#87 リンクの末尾に/を追加

astro.config.ts

@@ -4,6 +4,10 @@ import tailwind from '@astrojs/tailwind'
 import sitemap from '@astrojs/sitemap'
 import mdx from '@astrojs/mdx'
 import remarkLinkCard from 'remark-link-card'
+import RemarkLinkRewrite, {
+  type RemarkLinkRewriteOptions,
+} from 'remark-link-rewrite'
+import { formatUrl } from './src/utils/validateUrl'
 
 const { SITE_URL } = loadEnv(process.env.NODE_ENV!, process.cwd(), '')
 
@@ -26,15 +30,22 @@ export default defineConfig({
     '/group/programming/activity.html': '/',
     '/group/programming/works.html': '/',
     '/group/handaitaisen/handai_taisen.html': '/',
-    '/blog/articles': '/blog',
+    '/blog/articles': '/blog/',
   },
   outDir: './dist/out',
   cacheDir: './dist/cache',
   prefetch: {
     prefetchAll: true,
   },
+  trailingSlash: 'always',
   markdown: {
-    remarkPlugins: [remarkLinkCard],
+    remarkPlugins: [
+      remarkLinkCard,
+      [
+        RemarkLinkRewrite,
+        { replacer: formatUrl } satisfies RemarkLinkRewriteOptions,
+      ],
+    ],
   },
   integrations: [tailwind(), sitemap(), mdx()],
 })

package.json

@@ -24,6 +24,7 @@
     "astro": "^4.0.4",
     "polished": "^4.2.2",
     "remark-link-card": "^1.3.1",
+    "remark-link-rewrite": "^1.0.7",
     "satori": "^0.10.11",
     "sharp": "^0.33.0",
     "tailwindcss": "^3.3.6",

src/@types/remark-link-rewrite.ts

@@ -0,0 +1,17 @@
+// ./node_modules/remark-link-rewrite/src/index.js
+
+declare module 'remark-link-rewrite' {
+  export interface RemarkLinkRewriteOptions {
+    replacer: (url: string) => string | Promise<string>
+  }
+
+  /**
+   * Rewrite the URL in a Markdown node.
+   * @param options
+   * @returns {function(*): Promise<*>}
+   */
+  function RemarkLinkRewrite(
+    options: RemarkLinkRewriteOptions,
+  ): (tree: any) => Promise<any>
+  export default RemarkLinkRewrite
+}

src/components/blog/BlogContent.astro

@@ -28,7 +28,7 @@ const { Content } = await blog.render()
     <div class="mb-1 p-1 text-lg">
       <a
         class="flex items-center gap-2 hover:underline"
-        href={`/blog/authors/${author.id}`}
+        href={`/blog/authors/${author.id}/`}
         ><AuthorIcon {...author.data} size={28} />{author.data.name}</a
       >
     </div>

src/components/blog/BlogListItem.astro

@@ -15,15 +15,15 @@ const tags = await getEntries(blog.tags)
 ---
 
 <li class="block space-y-1 rounded-xl border bg-white p-5">
-  <a href={`/blog/articles/${slug}`}>
+  <a href={`/blog/articles/${slug}/`}>
     <h2 class="line-clamp-2 px-2 text-xl font-bold hover:underline">
       {blog.title}
     </h2>
   </a>
   <TagSmallList tags={tags} />
   <div class="flex gap-3 px-2 text-gray-600">
     <div class="hover:underline">
-      <a href={`/blog/authors/${author.id}`} class="flex items-center gap-2"
+      <a href={`/blog/authors/${author.id}/`} class="flex items-center gap-2"
         ><AuthorIcon {...author.data} size={22} />{author.data.name}</a
       >
     </div>

src/components/blog/tag/TagListItemCard.astro

@@ -12,7 +12,7 @@ const { id, articleCount, ...tag } = Astro.props
 <li
   class="group block space-y-1 rounded-xl border bg-white sm:basis-[calc((100%-0.75rem)/2)]"
 >
-  <a class="flex h-full w-full items-center p-4" href={`/blog/tags/${id}`}>
+  <a class="flex h-full w-full items-center p-4" href={`/blog/tags/${id}/`}>
     <TagIcon tag={tag} size={40} />
     <div class="px-2">
       <h2 class="line-clamp-1 text-xl font-bold group-hover:underline">

src/components/blog/tag/TagSmallList.astro

@@ -13,7 +13,7 @@ const { tags } = Astro.props
     tags.map((tag) => (
       <li>
         <a
-          href={`/blog/tags/${tag.id}`}
+          href={`/blog/tags/${tag.id}/`}
           class="flex items-center gap-1 rounded-full bg-gray-100 p-1 text-justify text-sm hover:bg-gray-200"
         >
           <TagIcon tag={tag.data} size={18} />

src/components/common/InlineLink.astro

@@ -1,11 +1,18 @@
 ---
+import { formatUrl } from '@/utils/validateUrl'
 import type { HTMLAttributes } from 'astro/types'
 
 type Props = Omit<HTMLAttributes<'a'>, 'slot'>
 
-const { class: className, ...attrs } = Astro.props
+const { class: className, href, ...attrs } = Astro.props
+
+const formattedHref = href && formatUrl(href)
 ---
 
-<a class:list={['text-blue-600 underline', className]} {...attrs}>
+<a
+  href={formattedHref}
+  class:list={['text-blue-600 underline', className]}
+  {...attrs}
+>
   <slot />
 </a>

src/components/layout/nav/BlogNav.astro

@@ -1,16 +1,19 @@
 ---
+import { validateUrl } from '@/utils/validateUrl'
 const current = Astro.url.pathname
 
 const navList: { target: string; title: string }[] = [
   {
-    target: '/blog',
+    target: '/blog/',
     title: '記事一覧',
   },
   {
-    target: '/blog/tags',
+    target: '/blog/tags/',
     title: 'タグ一覧',
   },
 ]
+
+for (const { target } of navList) validateUrl(target)
 ---
 
 <div class="flex flex-nowrap gap-3 px-9 pt-1 text-lg">

src/components/layout/nav/Header.astro

@@ -4,6 +4,7 @@ import Image from '@/components/common/Image.astro'
 import ouccImage from '@/assets/oucc.svg'
 import LinkButton from '@/components/common/button/LinkButton.astro'
 import Navigation from './Navigation.astro'
+import { formatUrl } from '@/utils/validateUrl'
 
 interface Props {
   showJoinLink?: boolean
@@ -18,6 +19,8 @@ const {
   rootPath = '/',
   headerTitle,
 } = Astro.props
+
+const formattedRootPath = formatUrl(rootPath)
 ---
 
 <header
@@ -39,7 +42,7 @@ const {
         class="w-5"
       />
     </button>
-    <a href={rootPath} class="flex basis-0 items-center">
+    <a href={formattedRootPath} class="flex basis-0 items-center">
       <span class="aspect-square h-full">
         <Image
           src={ouccImage}

src/components/layout/nav/NavigationListItem.astro

@@ -1,15 +1,18 @@
 ---
+import { formatUrl } from '@/utils/validateUrl'
 interface Props {
   to: string
   targetBlank?: boolean
 }
 
 const { to, targetBlank } = Astro.props
+
+const formattedTo = formatUrl(to)
 ---
 
 <li class="border-t last:border-b">
   <a
-    href={to}
+    href={formattedTo}
     target={targetBlank ? '_blank' : undefined}
     class:list={[
       'block bg-white p-4 font-bold',

src/content/blogs/487.mdx

@@ -12,7 +12,7 @@ tags: [advent-calendar]
 import Image from "@/components/common/Image.astro"
 import Screenshot from "./487/スクリーンショット-2021-12-15-152205-1024x719.png"
 
-<p><a href="https://adventar.org/calendars/6722">OUCC Advent Calendar 2021</a> 16日目の記事です。　執筆者: ちょくぽ <br/>前回はShiokaiさんの <a href="/blog/articles/512" title="/blog/articles/512">GrabPassで取得したテクスチャが意外と後まで使える</a> でした。</p>
+<p><a href="https://adventar.org/calendars/6722">OUCC Advent Calendar 2021</a> 16日目の記事です。　執筆者: ちょくぽ <br/>前回はShiokaiさんの <a href="/blog/articles/512/" title="/blog/articles/512">GrabPassで取得したテクスチャが意外と後まで使える</a> でした。</p>
 
 <p>演出関連の気づきを、自分用にメモするくらいの気持ちで書いていきます。<br/>これは特別演出の勉強などはしていない、一般趣味クリエイターによる記事です。読者としてポートフォリオを作るような方々ではなく、一般人を想定しています。</p>
 

src/content/blogs/524.mdx

@@ -23,7 +23,7 @@ import Fig3 from "./524/図3-1024x591.png"
 
 <p class="has-text-align-right">執筆者：yuyu</p>
 
-<p>この記事は<a href="https://adventar.org/calendars/6722">OUCC Advent Calendar 2021</a>の19日目の記事です。前回はyuさんの<a href="/blog/articles/522">「パワポを動画にしようとしてみた」</a>でした。</p>
+<p>この記事は<a href="https://adventar.org/calendars/6722">OUCC Advent Calendar 2021</a>の19日目の記事です。前回はyuさんの<a href="/blog/articles/522/">「パワポを動画にしようとしてみた」</a>でした。</p>
 
 <p>吐く息も白くなってきて、いよいよ令和も3年目を終え、はや4年目を迎えることに驚きを隠せておりません。yuyuです。みなさんはいかがお過ごしでしょうか。私は下宿をしている身ですが、部屋に備え付けの暖房の効きが異常に悪く、毎日布団にくるまっているミノムッチ状態です。</p>
 

src/content/blogs/548.mdx

@@ -28,7 +28,7 @@ import capcha from "./548/キャプチャ.png"
 
 <h2>はじめに</h2>
 
-<p>この文章は<a href="https://adventar.org/calendars/6722">OUCCアドベントカレンダー2021</a>の12/21のものです。<br/>前回はtakuemonさんの<a href="/blog/articles/567">Mixamoのススメ</a>です。</p>
+<p>この文章は<a href="https://adventar.org/calendars/6722">OUCCアドベントカレンダー2021</a>の12/21のものです。<br/>前回はtakuemonさんの<a href="/blog/articles/567/">Mixamoのススメ</a>です。</p>
 
 <p>これが自分のはじめてのブログ記事になります。<br/>調べものの際によく出てくるブログをまねる感じで書くつもりです。<br/>暖かい目でご覧ください。</p>
 
@@ -106,7 +106,7 @@ import capcha from "./548/キャプチャ.png"
 
 <p>ご覧いただきありがとうございました。</p>
 
-<p>次回の<a href="https://adventar.org/calendars/6722">OUCCアドベントカレンダー2021</a>は、Pres.Uさんの<a href="/blog/articles/590">OUCC Advent Calendar DAY21 Unityでゲーム作るRTA+おまけの謎解き</a>です。</p>
+<p>次回の<a href="https://adventar.org/calendars/6722">OUCCアドベントカレンダー2021</a>は、Pres.Uさんの<a href="/blog/articles/590/">OUCC Advent Calendar DAY21 Unityでゲーム作るRTA+おまけの謎解き</a>です。</p>
 
 <h2>ちなみに</h2>