From 39cf54624a7805936a452a1aaeeb4a3f1b950f99 Mon Sep 17 00:00:00 2001
From: Klemek <klemek.dev@proton.me>
Date: Mon, 27 Apr 2026 10:59:11 +0200
Subject: [PATCH] fix: add back home button on about page

---
 articles.example/style.scss       | 13 ++++---------
 package.json                      |  2 +-
 src/components/BackHomeButton.vue |  9 +++++++++
 src/views/AboutView.vue           |  2 ++
 src/views/ArticleView.vue         |  8 +++-----
 5 files changed, 19 insertions(+), 15 deletions(-)
 create mode 100644 src/components/BackHomeButton.vue

diff --git a/articles.example/style.scss b/articles.example/style.scss
index 5ee438c..73b4585 100644
--- a/articles.example/style.scss
+++ b/articles.example/style.scss
@@ -22,7 +22,8 @@ https://www.joshwcomeau.com/css/custom-css-reset/
     3. Allow percentage-based heights in the application
   */
 html,
-body, div#app {
+body,
+div#app {
   height: 100%;
 }
 /*
@@ -178,15 +179,9 @@ nav .nav-title {
 
 nav .nav-items {
   display: flex;
-  gap: .5em;
+  gap: 0.5em;
 }
 
 .article-published {
-    font-style: italic;
-}
-
-.link-home {
-    text-decoration: none;
-    float: right;
-    line-height: 2.4;
+  font-style: italic;
 }
diff --git a/package.json b/package.json
index 7d675f7..2354822 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "md-blog",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "private": true,
   "type": "module",
   "repository": "https://github.com/klemek/md-blog",
diff --git a/src/components/BackHomeButton.vue b/src/components/BackHomeButton.vue
new file mode 100644
index 0000000..39cfc07
--- /dev/null
+++ b/src/components/BackHomeButton.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { BACK_LINK } from '@lib/config'
+</script>
+
+<template>
+  <template v-if="$route.fullPath != '/'">
+    <RouterLink class="link-back" to="/"><span v-html="BACK_LINK"></span></RouterLink>
+  </template>
+</template>
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index 4f0be9a..50e4a0d 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -5,6 +5,7 @@ import PageFooter from '@components/PageFooter.vue'
 import { onBeforeMount, onMounted, onUpdated, ref } from 'vue'
 import NavBar from '@components/NavBar.vue'
 import { updateDynamicContent } from '@/lib/articles'
+import BackHomeButton from '@/components/BackHomeButton.vue'
 
 const html = ref<string>('')
 
@@ -23,6 +24,7 @@ onUpdated(updateDynamicContent)
   <main class="article">
     <NavBar />
     <div v-html="html"></div>
+    <BackHomeButton />
     <PageFooter />
   </main>
 </template>
diff --git a/src/views/ArticleView.vue b/src/views/ArticleView.vue
index f7a2c45..6a842ed 100644
--- a/src/views/ArticleView.vue
+++ b/src/views/ArticleView.vue
@@ -5,10 +5,11 @@ import { loadArticle, updateDynamicContent } from '@lib/articles'
 import { useRoute, onBeforeRouteUpdate, type RouteLocation } from 'vue-router'
 import NotFoundView from './NotFoundView.vue'
 import { simpleDateFormat } from '@lib/dates'
-import { BACK_LINK, PUBLISHED_ON, SIGNATURE, TITLE } from '@lib/config'
+import { PUBLISHED_ON, SIGNATURE, TITLE } from '@lib/config'
 import PageFooter from '@components/PageFooter.vue'
 import { stripHTML } from '@lib/strings'
 import NavBar from '@components/NavBar.vue'
+import BackHomeButton from '@/components/BackHomeButton.vue'
 
 const article = ref<Article | null>(null)
 const loading = ref<boolean>(true)
@@ -40,7 +41,6 @@ onUpdated(updateDynamicContent)
     <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>
         <div class="article-published">
           <span v-html="PUBLISHED_ON"></span> {{ simpleDateFormat(article.metadata.date) }}
@@ -54,9 +54,7 @@ onUpdated(updateDynamicContent)
       </div>
       <div class="article-text" v-html="article.html"></div>
       <div class="article-signature" v-html="SIGNATURE"></div>
-      <template v-if="$route.fullPath != '/'">
-        <RouterLink class="link-back" to="/"><span v-html="BACK_LINK"></span></RouterLink>
-      </template>
+      <BackHomeButton />
       <PageFooter />
     </main>
   </template>