Merge pull request #107 from OUCC/miyaji/#87-add-trailing-slash

#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 { getFormatUrl } 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: getFormatUrl(SITE_URL) } 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/activity/EventsSection.astro

@@ -26,7 +26,7 @@ export const items: Item[] = [
     image: welcomeImage,
     description:
       'プログラミングの基礎、機械学習、3Dモデリングなど様々なテーマで、数カ月間にわたり講習会が開催されます。新歓イベントの一環として開催しており、どなたでも参加できます。※画像は2022年度のものです。',
-    link: { href: '/workshop', text: '講習会について詳しく' },
+    link: { href: '/workshop/', text: '講習会について詳しく' },
   },
   {
     title: '5月 いちょう祭',

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 blogCategory={blog.category} 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

@@ -23,7 +23,7 @@ const { blogCategory, 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/faq/FaqSection.astro

@@ -35,7 +35,7 @@ import FaqCard from './FaqCard.astro'
           普段はDiscordサーバーで雑談をしているほか、月に一度週末にオンラインで集まって部会を開催しています。また、大阪大学の大学祭であるいちょう祭（5月）とまちかね祭（11月）への出展は部員全員で協力して行います。
         </p>
         <p>
-          詳しくは<InlineLink href="/activity">
+          詳しくは<InlineLink href="/activity/">
             活動紹介
           </InlineLink>をご覧ください。
         </p>

src/components/index/activity/ActivitySection.astro

@@ -20,7 +20,7 @@ const items: Item[] = [
     image: welcomeImage,
     description:
       'プログラミングの基礎、機械学習、3Dモデリングなど様々なテーマで、数カ月間にわたり講習会が開催されます。新歓イベントの一環として開催しており、どなたでも参加できます。※画像は2022年度のものです。',
-    link: { href: '/workshop', text: '講習会について詳しく' },
+    link: { href: '/workshop/', text: '講習会について詳しく' },
   },
   {
     title: '5月 いちょう祭',
@@ -52,7 +52,7 @@ const items: Item[] = [
       }
     </ul>
     <div class="flex justify-center">
-      <LinkButton href="/activity">活動紹介について詳しく</LinkButton>
+      <LinkButton href="/activity/">活動紹介について詳しく</LinkButton>
     </div>
   </div>
 </Section>

src/components/index/faq/FaqSection.astro

@@ -10,7 +10,7 @@ import LinkButton from '@/components/common/button/LinkButton.astro'
       「部室はあるの？」「活動には必ず参加しないといけないの？」「部費はかかるの？」など、よくある質問はこちらから。
     </div>
     <div class="flex justify-center">
-      <LinkButton href="/faq">FAQを確認する</LinkButton>
+      <LinkButton href="/faq/">FAQを確認する</LinkButton>
     </div>
   </div>
 </Section>

src/components/index/join/JoinSection.astro

@@ -11,7 +11,7 @@ import LinkButton from '@/components/common/button/LinkButton.astro'
       まずは公開サーバーに参加し、部内の雰囲気を感じてみませんか？
     </div>
     <div class="flex justify-center">
-      <LinkButton href="/join" variant="white">Join OUCC!</LinkButton>
+      <LinkButton href="/join/" variant="white">Join OUCC!</LinkButton>
     </div>
   </div>
 </Section>

src/components/layout/Footer.astro

@@ -11,6 +11,6 @@ import FooterLink from './FooterLink.astro'
   </div>
   <div class="flex flex-wrap items-center justify-center gap-4 px-4">
     <FooterLink to="/oucc-rules.pdf">規約</FooterLink>
-    <FooterLink to="/privacy">プライバシーポリシー</FooterLink>
+    <FooterLink to="/privacy/">プライバシーポリシー</FooterLink>
   </div>
 </footer>

src/components/layout/nav/Header.astro

@@ -52,7 +52,7 @@ const {
     </a>
   </div>
   <div class="flex shrink-0 flex-col justify-center">
-    {showJoinLink && <LinkButton href="/join">Join OUCC!</LinkButton>}
+    {showJoinLink && <LinkButton href="/join/">Join OUCC!</LinkButton>}
   </div>
   {
     /**

src/components/layout/nav/Navigation.astro

@@ -11,12 +11,12 @@ import DrWani from './DrWani.astro'
   </div>
   <ul class="flex flex-col text-center">
     <NavigationListItem to="/">トップページ</NavigationListItem>
-    <NavigationListItem to="/join">Join OUCC!</NavigationListItem>
-    <NavigationListItem to="/activity">活動紹介</NavigationListItem>
-    <NavigationListItem to="/workshop">講習会</NavigationListItem>
-    <NavigationListItem to="/faq">FAQ</NavigationListItem>
-    <NavigationListItem to="/contact">お問い合わせ</NavigationListItem>
-    <NavigationListItem to="/blog">ブログ</NavigationListItem>
+    <NavigationListItem to="/join/">Join OUCC!</NavigationListItem>
+    <NavigationListItem to="/activity/">活動紹介</NavigationListItem>
+    <NavigationListItem to="/workshop/">講習会</NavigationListItem>
+    <NavigationListItem to="/faq/">FAQ</NavigationListItem>
+    <NavigationListItem to="/contact/">お問い合わせ</NavigationListItem>
+    <NavigationListItem to="/blog/">ブログ</NavigationListItem>
     <NavigationListItem to="https://twitter.com/OUCC" targetBlank>
       X (旧Twitter)
     </NavigationListItem>

src/content/blogs/487.mdx

@@ -13,7 +13,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

@@ -24,7 +24,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

@@ -29,7 +29,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>
 
@@ -107,7 +107,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>