feat: lucide icon and latex formulas

src/views/ArticleView.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { Article } from '@interfaces'
-import { ref, onBeforeMount, onUpdated } from 'vue'
+import { ref, onBeforeMount } from 'vue'
 import { loadArticle } from '@lib/articles'
 import { useRoute, onBeforeRouteUpdate, type RouteLocation } from 'vue-router'
 import NotFoundView from './NotFoundView.vue'
 import { dateFromParts, simpleDateFormat } from '@lib/dates'
 import { SIGNATURE, TITLE } from '@lib/meta'
 import PageFooter from '@components/PageFooter.vue'
-import hljs from 'highlight.js'
+import { stripHTML } from '@/lib/strings'
 
 const article = ref<Article | null>(null)
 const loading = ref<boolean>(true)
@@ -22,16 +22,13 @@ async function loadPage(target: RouteLocation) {
       target.params.day as string,
     ),
   )
-  window.document.title = TITLE + ' — ' + (article.value?.metadata.title ?? 'Not Found')
+  window.document.title =
+    stripHTML(TITLE) + ' — ' + stripHTML(article.value?.metadata.title ?? 'Not Found')
   loading.value = false
 }
 
 onBeforeMount(() => loadPage(route))
 onBeforeRouteUpdate(loadPage)
-
-onUpdated(() => {
-  hljs.highlightAll()
-})
 </script>
 
 <template>
@@ -45,7 +42,7 @@ onUpdated(() => {
     <main class="article">
       <div class="header">
         <RouterLink class="link-home" to="/">↑</RouterLink>
-        <h1>{{ article.metadata.title }}</h1>
+        <h1 v-html="article.metadata.title"></h1>
         <span class="time">
           <span>{{ article.metadata.draft ? 'Drafted on' : 'Published on' }}</span>
           {{ simpleDateFormat(article.metadata.date) }}

src/views/HomeView.vue

@@ -5,23 +5,24 @@ import type { ArticleMetadata } from '@interfaces'
 import { simpleDateFormat } from '@lib/dates'
 import { TITLE } from '@lib/meta'
 import PageFooter from '@components/PageFooter.vue'
+import { stripHTML } from '@/lib/strings'
 
 const articles = ref<ArticleMetadata[]>([])
 
 onBeforeMount(async () => {
   const newArticles = await listArticles()
   articles.value.splice(0, articles.value.length, ...newArticles)
-  window.document.title = TITLE + ' — Home'
+  window.document.title = stripHTML(TITLE) + ' — Home'
 })
 </script>
 
 <template>
   <main>
-    <h1 class="title">{{ TITLE }}</h1>
+    <h1 class="title" v-html="TITLE"></h1>
     <template v-for="(metadata, index) in articles" v-bind:key="index">
       <div v-if="!metadata.draft && metadata.path" class="article">
         <RouterLink :to="metadata.path">
-          <h3>{{ metadata.title }}</h3>
+          <h3 v-html="metadata.title"></h3>
           <span class="time"
             ><span>Published on</span>&nbsp;&nbsp;{{ simpleDateFormat(metadata.date) }}</span
           >

src/views/NotFoundView.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { TITLE } from '@/lib/meta'
+import { stripHTML } from '@/lib/strings'
 import PageFooter from '@components/PageFooter.vue'
 import { onBeforeMount } from 'vue'
 
 onBeforeMount(() => {
-  window.document.title = TITLE + ' — Not Found'
+  window.document.title = stripHTML(TITLE) + ' — Not Found'
 })
 </script>
 
@@ -14,5 +15,3 @@ onBeforeMount(() => {
     <PageFooter />
   </main>
 </template>
-
-<style scoped></style>