Merge pull request #1263 from vim-jp/feature-hash-redirect

Author: staticWagomU

src/components/ArticleInArchive.astro

@@ -1,17 +1,29 @@
 ---
+import dayjs from "dayjs";
 import type { ProcessedArticle } from "@/lib/article.js";
 import type { SetOptional } from "type-fest";
 import RunnerImage from "/public/1f3c3.svg";
 
 type Props = SetOptional<ProcessedArticle, "runner">;
 
-const { title, url, originalIndex, runner, runnerPath, published, shortDate } =
-  Astro.props;
+const {
+  title,
+  url,
+  originalIndex,
+  runner,
+  runnerPath,
+  published,
+  shortDate,
+  year,
+} = Astro.props;
+
+const fullDate = dayjs(shortDate).format("MM-DD");
 ---
 
 <div class="mb-4 pb-2 [&+div]:border-t">
   <div
     class:list={["w-full", published && "hover:bg-[#efefef] hover:shadow-md"]}
+    id={`article-${year}-${fullDate}`}
   >
     <a href={published ? url : undefined}>
       <div class="p-2">

src/lib/hashRedirect.ts

@@ -0,0 +1,28 @@
+import * as ufo from "ufo";
+import contents from "@/content.json";
+import type { Article } from "./type.js";
+
+/** hashの移動先がない場合、archivesへ遷移 */
+export const hashRedirect = () => {
+  const hash = window.location.hash;
+
+  if (hash) {
+    const id = hash.substring(1);
+    const element = document.getElementById(id);
+
+    if (!element) {
+      if (!/article-[0-9]{4}-[0-9]{2}-[0-9]{2}/.test(id)) {
+        return;
+      }
+      const articles: Article[] = contents.articles;
+      const hashDate = id.replace("article-", "");
+      if (!articles.find((x) => x.date === hashDate)) {
+        return;
+      }
+
+      window.location.href = `${ufo.withTrailingSlash(
+        ufo.joinURL(import.meta.env.baseURL, "archives"),
+      )}${hash}`;
+    }
+  }
+};

src/pages/index.astro

@@ -72,3 +72,9 @@ const newestArticle = getArticles({ isPublished: true }).at(-1);
     scroll-behavior: smooth;
   }
 </style>
+
+<script>
+  import { hashRedirect } from "@/lib/hashRedirect.js";
+  document.addEventListener("astro:page-load", () => hashRedirect());
+  window.addEventListener("hashchange", () => hashRedirect(), false);
+</script>