fix: add back home button on about page

README.md

@@ -23,7 +23,6 @@ bun run build
 - [x] nav bar on top
 - [ ] date updated
 - [ ] archive page
-- [ ] about page
+- [x] about page
-- [ ] contact/links
 - [ ] link to previous/next article
 - [ ] proper docs

articles.example/config.json

@@ -6,6 +6,7 @@
     "custom_head": "",
     "home_count": 5,
     "rss_link": "<i icon=rss></i> RSS",
+    "about_link": "<i icon=info></i> ABOUT",
     "back_link": "<i icon=undo-2></i> Back to home",
     "published_on": "Published on",
     "copyright": "<a style=\"text-decoration:none;color:inherit;\" target=_blank href=\"https://creativecommons.org/licenses/by-nc/4.0/\">CC BY-NC</a>"

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,14 +179,9 @@ nav .nav-title {
 
 nav .nav-items {
   display: flex;
+  gap: 0.5em;
 }
 
 .article-published {
-    font-style: italic;
+  font-style: italic;
-}
-
-.link-home {
-    text-decoration: none;
-    float: right;
-    line-height: 2.4;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "md-blog",
-  "version": "1.6.0",
+  "version": "1.8.1",
   "private": true,
   "type": "module",
   "repository": "https://github.com/klemek/md-blog",

src/App.vue

@@ -1,29 +1,3 @@
-<script setup lang="ts">
-import hljs from 'highlight.js'
-import { createIcons, icons } from 'lucide'
-import { onMounted, onUpdated, nextTick } from 'vue'
-import mermaid from 'mermaid'
-
-async function update() {
-  setTimeout(async () => {
-    await nextTick()
-    hljs.highlightAll()
-    createIcons({
-      icons,
-      nameAttr: 'icon',
-      attrs: {
-        width: '1.1em',
-        height: '1.1em',
-      },
-    })
-    mermaid.run()
-  }, 100)
-}
-
-onMounted(update)
-onUpdated(update)
-</script>
-
 <template>
-  <RouterView @vue:mounted="update" @vue:updated="update" />
+  <RouterView />
 </template>

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>

src/components/NavBar.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { BASE_URL, TITLE, RSS_LINK } from '@lib/config'
+import { BASE_URL, TITLE, RSS_LINK, ABOUT_LINK } from '@lib/config'
 </script>
 
 <template>
   <nav>
     <RouterLink to="/" class="nav-title"><span v-html="TITLE"></span></RouterLink>
     <span class="nav-items">
+      <RouterLink to="/about/"><span v-html="ABOUT_LINK"></span></RouterLink>
       <a :href="BASE_URL + 'atom.xml'" v-html="RSS_LINK"></a>
     </span>
   </nav>

src/lib/articles.ts

@@ -1,5 +1,23 @@
 import type { MarkdownData, Article, ArticleMetadata } from '@interfaces'
 import katex from 'katex'
+import { nextTick } from 'vue'
+import hljs from 'highlight.js'
+import mermaid from 'mermaid'
+import { createIcons, icons } from 'lucide'
+
+export async function updateDynamicContent() {
+  await nextTick()
+  hljs.highlightAll()
+  createIcons({
+    icons,
+    nameAttr: 'icon',
+    attrs: {
+      width: '1.1em',
+      height: '1.1em',
+    },
+  })
+  mermaid.run()
+}
 
 function parseMetadata(
   srcAttributes: Record<string, unknown>,

src/lib/config.ts

@@ -1,14 +1,16 @@
 import packageJson from '@/../package.json'
+import articlesConfig from '@articles/config.json'
 
 export const NAME: string = packageJson.name
 export const VERSION: string = packageJson.version
 export const REPOSITORY: string = packageJson.repository
-export const TITLE: string = import.meta.env.VITE_APP_TITLE
+export const TITLE: string = articlesConfig['title']
-export const SIGNATURE: string = import.meta.env.VITE_APP_SIGNATURE
+export const SIGNATURE: string = articlesConfig['signature']
-export const COPYRIGHT: string = import.meta.env.VITE_APP_COPYRIGHT
+export const COPYRIGHT: string = articlesConfig['copyright']
-export const RSS_LINK: string = import.meta.env.VITE_APP_RSS_LINK
+export const RSS_LINK: string = articlesConfig['rss_link']
-export const BACK_LINK: string = import.meta.env.VITE_APP_BACK_LINK
+export const BACK_LINK: string = articlesConfig['back_link']
-export const HOME_COUNT: number = parseInt(import.meta.env.VITE_APP_HOME_COUNT)
+export const ABOUT_LINK: string = articlesConfig['about_link']
-export const PUBLISHED_ON: string = import.meta.env.VITE_APP_PUBLISHED_ON
+export const HOME_COUNT: number = articlesConfig['home_count']
+export const PUBLISHED_ON: string = articlesConfig['published_on']
 export const BASE_URL: string = import.meta.env.BASE_URL
 export const PROD: boolean = import.meta.env.PROD

src/router/index.ts

@@ -1,3 +1,4 @@
+import AboutView from '@views/AboutView.vue'
 import ArticleView from '@views/ArticleView.vue'
 import HomeView from '@views/HomeView.vue'
 import NotFoundView from '@views/NotFoundView.vue'
@@ -7,6 +8,7 @@ const router = createRouter({
   history: createWebHistory(),
   routes: [
     { path: '/', component: HomeView },
+    { path: '/about/', component: AboutView },
     { path: '/articles/:pathMatch(.*)/', component: ArticleView },
     { path: '/:pathMatch(.*)', component: NotFoundView },
   ],

src/views/AboutView.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ABOUT_LINK, TITLE } from '@lib/config'
+import { stripHTML } from '@lib/strings'
+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>('')
+
+onBeforeMount(async () => {
+  window.document.title = stripHTML(TITLE) + ' — ' + stripHTML(ABOUT_LINK)
+
+  html.value = (await import('@articles/about.md')).html
+
+  await updateDynamicContent()
+})
+onMounted(updateDynamicContent)
+onUpdated(updateDynamicContent)
+</script>
+
+<template>
+  <main class="article">
+    <NavBar />
+    <div v-html="html"></div>
+    <BackHomeButton />
+    <PageFooter />
+  </main>
+</template>

src/views/ArticleView.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import type { Article } from '@interfaces'
-import { ref, onBeforeMount } from 'vue'
+import { ref, onBeforeMount, onUpdated, onMounted } from 'vue'
-import { loadArticle } from '@lib/articles'
+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)
@@ -20,10 +21,13 @@ async function loadPage(target: RouteLocation) {
   window.document.title =
     stripHTML(TITLE) + ' — ' + stripHTML(article.value?.metadata.title ?? 'Not Found')
   loading.value = false
+  await updateDynamicContent()
 }
 
 onBeforeMount(() => loadPage(route))
 onBeforeRouteUpdate(loadPage)
+onMounted(updateDynamicContent)
+onUpdated(updateDynamicContent)
 </script>
 
 <template>
@@ -37,7 +41,6 @@ onBeforeRouteUpdate(loadPage)
     <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) }}
@@ -51,9 +54,7 @@ onBeforeRouteUpdate(loadPage)
       </div>
       <div class="article-text" v-html="article.html"></div>
       <div class="article-signature" v-html="SIGNATURE"></div>
-      <template v-if="$route.fullPath != '/'">
+      <BackHomeButton />
-        <RouterLink class="link-back" to="/"><span v-html="BACK_LINK"></span></RouterLink>
-      </template>
       <PageFooter />
     </main>
   </template>

src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, onBeforeMount } from 'vue'
+import { ref, onBeforeMount, onUpdated, onMounted } from 'vue'
-import { listArticles } from '@lib/articles'
+import { listArticles, updateDynamicContent } from '@lib/articles'
 import type { ArticleMetadata } from '@interfaces'
 import { simpleDateFormat } from '@lib/dates'
 import { HOME_COUNT, PROD, PUBLISHED_ON, TITLE } from '@lib/config'
@@ -16,7 +16,10 @@ onBeforeMount(async () => {
     .slice(0, HOME_COUNT)
   articles.value.splice(0, articles.value.length, ...newArticles)
   window.document.title = stripHTML(TITLE) + ' — Home'
+  await updateDynamicContent()
 })
+onMounted(updateDynamicContent)
+onUpdated(updateDynamicContent)
 </script>
 
 <template>

src/views/NotFoundView.vue

@@ -2,17 +2,27 @@
 import { TITLE } from '@lib/config'
 import { stripHTML } from '@lib/strings'
 import PageFooter from '@components/PageFooter.vue'
-import { onBeforeMount } from 'vue'
+import { onBeforeMount, onMounted, onUpdated, ref } from 'vue'
+import NavBar from '@components/NavBar.vue'
+import { updateDynamicContent } from '@/lib/articles'
 
-onBeforeMount(() => {
+const html = ref<string>('')
-  window.document.title = stripHTML(TITLE) + ' — Not Found'
+
+onBeforeMount(async () => {
+  window.document.title = stripHTML(TITLE)
+
+  html.value = (await import('@articles/not_found.md')).html
+
+  await updateDynamicContent()
 })
+onMounted(updateDynamicContent)
+onUpdated(updateDynamicContent)
 </script>
 
 <template>
-  <main>
+  <main class="article">
     <NavBar />
-    <h1>Page not found</h1>
+    <div v-html="html"></div>
     <PageFooter />
   </main>
 </template>

vite.config.ts

@@ -14,13 +14,7 @@ export default ({ mode }: { mode: string }) => {
   process.env.VITE_APP_TITLE = articlesConfig['title']
   process.env.VITE_APP_TITLE_NO_HTML = articlesConfig['title'].replace(/(<([^>]+)>)/gi, '').trim()
   process.env.VITE_APP_LANG = articlesConfig['lang']
-  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']
-  process.env.VITE_APP_HOME_COUNT = articlesConfig['home_count'].toString()
-  process.env.VITE_APP_PUBLISHED_ON = articlesConfig['published_on']
 
   return defineConfig({
     plugins: [vue(), vueDevTools(), mdPlugin({ mode: [Mode.HTML] })],