From 748f52241f6679ca3466600cd0919921cb3a08c0 Mon Sep 17 00:00:00 2001
From: klemek <klemek.dev@proton.me>
Date: Sun, 26 Apr 2026 18:38:49 +0200
Subject: [PATCH] feat: navbar

---
 README.md                     |  2 +-
 package.json                  |  2 +-
 src/components/NavBar.vue     | 12 ++++++++++++
 src/components/PageFooter.vue |  9 ++-------
 src/lib/meta.ts               |  2 ++
 src/views/ArticleView.vue     |  8 ++++++--
 src/views/HomeView.vue        |  5 +++--
 src/views/NotFoundView.vue    |  1 +
 vite.config.ts                |  2 ++
 9 files changed, 30 insertions(+), 13 deletions(-)
 create mode 100644 src/components/NavBar.vue

diff --git a/README.md b/README.md
index f43cc3e..8e0a8ea 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@ bun run build
 - [x] build with github actions
 - [x] config in sub repo
 - [x] copyright
-- [ ] nav bar on top
+- [x] nav bar on top
 - [ ] date updated
 - [ ] archive page
 - [ ] about page
diff --git a/package.json b/package.json
index 6bc1e02..1f5f401 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "md-blog",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "private": true,
   "type": "module",
   "repository": "https://github.com/klemek/md-blog",
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
new file mode 100644
index 0000000..cbe23a0
--- /dev/null
+++ b/src/components/NavBar.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { BASE_URL, TITLE, RSS_LINK } from '@/lib/meta'
+</script>
+
+<template>
+  <nav>
+    <RouterLink to="/" class="nav-title"><span v-html="TITLE"></span></RouterLink>
+    <span class="nav-items">
+      <a :href="BASE_URL + 'atom.xml'" v-html="RSS_LINK"></a>
+    </span>
+  </nav>
+</template>
diff --git a/src/components/PageFooter.vue b/src/components/PageFooter.vue
index a276cf2..6be791f 100644
--- a/src/components/PageFooter.vue
+++ b/src/components/PageFooter.vue
@@ -1,16 +1,11 @@
 <script setup lang="ts">
-import { REPOSITORY, NAME, VERSION, BASE_URL, TITLE, COPYRIGHT } from '@/lib/meta'
+import { REPOSITORY, NAME, VERSION, TITLE, COPYRIGHT } from '@/lib/meta'
 import { stripHTML } from '@/lib/strings';
 </script>
 
 <template>
-  <template v-if="$route.fullPath != '/'">
-    <RouterLink to="/"><i icon="undo-2"></i> Back to home</RouterLink>
-  </template>
-  <hr />
   <footer>
     {{ stripHTML(TITLE) }} &copy; {{ new Date().getFullYear() }}, <span v-html="COPYRIGHT"></span> | Made with
-    <a :href="REPOSITORY">{{ NAME }} {{ VERSION }}</a> |
-    <a :href="BASE_URL + 'atom.xml'"><i icon="rss"></i> RSS</a>
+    <a :href="REPOSITORY">{{ NAME }} {{ VERSION }}</a>
   </footer>
 </template>
diff --git a/src/lib/meta.ts b/src/lib/meta.ts
index f66fa9f..b45f1d7 100644
--- a/src/lib/meta.ts
+++ b/src/lib/meta.ts
@@ -6,4 +6,6 @@ export const REPOSITORY = packageJson.repository
 export const TITLE = import.meta.env.VITE_APP_TITLE
 export const SIGNATURE = import.meta.env.VITE_APP_SIGNATURE
 export const COPYRIGHT = import.meta.env.VITE_APP_COPYRIGHT
+export const RSS_LINK = import.meta.env.VITE_APP_RSS_LINK
+export const BACK_LINK = import.meta.env.VITE_APP_BACK_LINK
 export const BASE_URL = import.meta.env.BASE_URL
diff --git a/src/views/ArticleView.vue b/src/views/ArticleView.vue
index c3a18d3..9e802a0 100644
--- a/src/views/ArticleView.vue
+++ b/src/views/ArticleView.vue
@@ -5,9 +5,10 @@ import { loadArticle } from '@lib/articles'
 import { useRoute, onBeforeRouteUpdate, type RouteLocation } from 'vue-router'
 import NotFoundView from './NotFoundView.vue'
 import { simpleDateFormat } from '@lib/dates'
-import { SIGNATURE, TITLE } from '@lib/meta'
+import { BACK_LINK, SIGNATURE, TITLE } from '@lib/meta'
 import PageFooter from '@components/PageFooter.vue'
 import { stripHTML } from '@/lib/strings'
+import NavBar from '@/components/NavBar.vue'
 
 const article = ref<Article | null>(null)
 const loading = ref<boolean>(true)
@@ -34,6 +35,7 @@ onBeforeRouteUpdate(loadPage)
   </template>
   <template v-else>
     <main class="article">
+      <NavBar />
       <div class="article-header">
         <RouterLink class="link-home" to="/"><i icon="undo-2">↑</i></RouterLink>
         <h1 class="article-title" v-html="article.metadata.title"></h1>
@@ -50,7 +52,9 @@ onBeforeRouteUpdate(loadPage)
       </div>
       <div class="article-text" v-html="article.html"></div>
       <div class="article-signature" v-html="SIGNATURE"></div>
-      <br />
+      <template v-if="$route.fullPath != '/'">
+        <RouterLink class="link-back" to="/"><span v-html="BACK_LINK"></span></RouterLink>
+      </template>
       <PageFooter />
     </main>
   </template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f92beac..5357672 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -6,6 +6,7 @@ import { simpleDateFormat } from '@lib/dates'
 import { TITLE } from '@lib/meta'
 import PageFooter from '@components/PageFooter.vue'
 import { stripHTML } from '@/lib/strings'
+import NavBar from '@/components/NavBar.vue'
 
 const articles = ref<ArticleMetadata[]>([])
 
@@ -17,8 +18,8 @@ onBeforeMount(async () => {
 </script>
 
 <template>
-  <main>
-    <h1 class="title" v-html="TITLE"></h1>
+  <main class="home">
+    <NavBar />
     <template v-for="(metadata, index) in articles" v-bind:key="index">
       <div v-if="!metadata.draft && metadata.path" class="article-item">
         <RouterLink :to="metadata.path">
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
index df4a2af..5ac086b 100644
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -11,6 +11,7 @@ onBeforeMount(() => {
 
 <template>
   <main>
+    <NavBar />
     <h1>Page not found</h1>
     <PageFooter />
   </main>
diff --git a/vite.config.ts b/vite.config.ts
index bc2c02e..b3df1cd 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -17,6 +17,8 @@ export default ({ mode }: { mode: string }) => {
   process.env.VITE_APP_SIGNATURE = articlesConfig['signature']
   process.env.VITE_CUSTOM_HEAD = articlesConfig['custom_head']
   process.env.VITE_APP_COPYRIGHT = articlesConfig['copyright']
+  process.env.VITE_APP_RSS_LINK = articlesConfig['rss_link']
+  process.env.VITE_APP_BACK_LINK = articlesConfig['back_link']
 
   return defineConfig({
     plugins: [vue(), vueDevTools(), mdPlugin({ mode: [Mode.HTML] })],