記事タイトルに "/" が入っているときリンクが動作しない不具合を修正した

scrapbox-nuxt-blog/components/Article.vue

@@ -14,7 +14,7 @@ const hasLineQuote = (index) => lines[index]?.nodes?.some(node => node.type ===
     <template #header>
       <!-- タイトル -->
       <h2 class="text-xl font-bold my-2">
-        <NuxtLink :to="`/${page.title.replace(/ /g, '_')}`">{{ page.title }}</NuxtLink>
+        <NuxtLink :to="`/${escapeArticleTitle(page.title)}`">{{ page.title }}</NuxtLink>
       </h2>
       <!-- 日時 -->
       <div

scrapbox-nuxt-blog/components/Card.vue

@@ -1,6 +1,6 @@
 <script setup>
 const props = defineProps({ page: Object })
-const linkTo = props.page?.title.replace(/ /g, '_')
+const linkTo = escapeArticleTitle(props.page?.title)
 
 const appConfig = useAppConfig()
 </script>

scrapbox-nuxt-blog/pages/[title].vue

@@ -3,7 +3,7 @@ const appConfig = useAppConfig()
 
 const route = useRoute()
 const { title: routeTitle } = route.params
-const articleTitle = routeTitle.replace(/_/g, ' ')
+const articleTitle = unescapeArticleTitle(routeTitle)
 
 useHead({
   title: `${appConfig.blogTitle} - ${articleTitle}`,

scrapbox-nuxt-blog/pages/history/index.vue

@@ -24,7 +24,7 @@ const { data: pages } = await useAsyncData('history', () => {
         <li v-for="page of pages" class="my-2">
           <Date :unix-time="page.created" :show-time="false" class="mr-2" />
           <NuxtLink
-            :to="`/${page.title.replace(/ /g, '_')}`"
+            :to="`/${escapeArticleTitle(page.title)}`"
             class="text-text-link"
           >
             {{ page.title }}

scrapbox-nuxt-blog/utils/index.ts

@@ -0,0 +1,9 @@
+// 記事のタイトルをエスケープする
+export const escapeArticleTitle = (title: string): string => {
+  return title.replace(/ /g, '_').replace(/\//g, '%2F')
+}
+
+// 記事のタイトルをアンエスケープする
+export const unescapeArticleTitle = (title: string): string => {
+  return title.replace(/_/g, ' ').replace(/%2F/g, '/')
+}