feat: add commit histories for posts

.github/workflows/pages.yml

@@ -20,6 +20,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+        with: 
+          fetch-depth: 10
       - uses: actions/setup-node@v3
         with:
           node-version-file: '.tool-versions'

package.json

@@ -89,6 +89,7 @@
     "remark-gfm": "3.0.1",
     "remark-parse": "10.0.1",
     "remark-rehype": "10.1.0",
+    "simple-git": "3.17.0",
     "strip-ansi": "7.0.1",
     "unified": "10.1.2"
   },

src/pages/posts/[...slug].astro

@@ -7,6 +7,7 @@ import Base from '@/templates/Base.astro';
 import { AppConfig } from '@/utils/AppConfig';
 import { readTags } from '@/utils/Tag';
 import { getSimilarPosts } from '@/utils/TextSimilarity';
+import { getCommitHistories } from '@/utils/CommitHistories';
 import { DormitoryIntroduction } from '@/utils/StaticPages';
 
 export async function getStaticPaths() {
@@ -32,6 +33,9 @@ const entries = await getCollection('posts', ({ data }) => {
 entries.push(DormitoryIntroduction as unknown as CollectionEntry<'posts'>);
 
 const similars = getSimilarPosts(entry, entries);
+
+const filePath = `src/content/posts/${entry.id}`;
+const histories = await getCommitHistories(filePath);
 ---
 
 <Base head={{ title, description: entry.data.description }}>
@@ -40,6 +44,7 @@ const similars = getSimilarPosts(entry, entries);
     contentCategory={'Posts'}
     headings={headings}
     similars={similars}
+    histories={histories}
     tags={tags.posts}
   >
     <Content />

src/pages/posts/dormitory_introduction.astro

@@ -18,6 +18,7 @@ import { generateImagePath } from '@/utils/Blog';
 import { DormitoryIntroduction } from '@/utils/StaticPages';
 import { readTags } from '@/utils/Tag';
 import { getSimilarPosts } from '@/utils/TextSimilarity';
+import { getCommitHistories } from '@/utils/CommitHistories';
 
 const tags = await readTags();
 
@@ -63,6 +64,8 @@ const similars = getSimilarPosts(
   },
   entries
 );
+const filePath = 'src/pages/posts/dormitory_introduction.astro';
+const histories = await getCommitHistories(filePath);
 ---
 
 <Base
@@ -77,6 +80,7 @@ const similars = getSimilarPosts(
     headings={markdownHeadings}
     tags={tags.posts}
     similars={similars}
+    histories={histories}
   >
     <p>
       宮崎大学の寮の1つ、国際交流宿舎を紹介するページです。宮崎大学の国際交流宿舎ってどうかなと思っている高校生の皆さんの参考になればと思います。

src/partials/CommitHistory.tsx

@@ -0,0 +1,49 @@
+import { ExternalLink } from '@/components/ExternalLink';
+import { AppConfig } from '@/utils/AppConfig';
+import type { CommitHistory } from '@/utils/CommitHistories';
+
+type ICommitHistoryPost = {
+  collection: string;
+  id: string;
+  histories: CommitHistory[];
+};
+
+export const CommitHistoryPost = (props: ICommitHistoryPost) => {
+  const url =
+    props.id === 'dormitory_introduction'
+      ? // dormitory_introduction: https://github.com/korosuke613/homepage-2nd/commits/main/src/pages/posts/dormitory_introduction.astro
+        `https://${AppConfig.github_url}/commits/main/src/pages/${props.collection}/${props.id}.astro`
+      : // normal: https://github.com/korosuke613/homepage-2nd/blob/main/src/content/posts/20200324_graduate_miyazaki_u.md
+        `https://${AppConfig.github_url}/commits/main/src/content/${props.collection}/${props.id}`;
+
+  return (
+    <div>
+      <h3 className="my-4 text-xl font-bold">編集履歴</h3>
+      <ul className="list-disc">
+        {props.histories
+          .map((h) => {
+            // 2023-04-05T19:05:58+09:00 を 2023-04-05 に整形する
+            const dateWithoutTime = h.date.split('T')[0];
+
+            return (
+              <li key={h.sha} className="list-inside pt-1 text-sm">
+                <span>
+                  <span>
+                    <code>{dateWithoutTime}</code>:{' '}
+                  </span>{' '}
+                  <ExternalLink
+                    title={h.commitMessage}
+                    url={`https://${AppConfig.github_url}/commit/${h.sha}`}
+                  />
+                </span>
+              </li>
+            );
+          })
+          .slice(0, 6)}
+        <li className="m-0 list-inside pt-1 text-sm">
+          <ExternalLink title="全て表示" url={url} />
+        </li>
+      </ul>
+    </div>
+  );
+};

src/partials/ContentPost.tsx

@@ -6,9 +6,11 @@ import { Content } from '@/components/Content';
 import { ContentHeader } from '@/components/ContentHeader';
 import { Section } from '@/components/Section';
 import { AppConfig } from '@/utils/AppConfig';
+import type { CommitHistory } from '@/utils/CommitHistories';
 import type { Tags } from '@/utils/Tag';
 import type { getSimilarPosts } from '@/utils/TextSimilarity';
 
+import { CommitHistoryPost } from './CommitHistory';
 import { SimilarityPosts } from './SimilarityPosts';
 
 type IContentPostProps = {
@@ -17,6 +19,7 @@ type IContentPostProps = {
   tags: Tags;
   headings: MarkdownHeading[];
   similars: ReturnType<typeof getSimilarPosts>;
+  histories: CommitHistory[];
   children: ReactNode;
 };
 
@@ -47,6 +50,13 @@ export const ContentPost = (props: IContentPostProps) => {
           >
             {props.children}
           </Content>
+          <hr className="my-10" />
+          <CommitHistoryPost
+            collection={props.frontmatter.collection}
+            id={props.frontmatter.id}
+            histories={props.histories}
+          />
+          <br />
           <SimilarityPosts similars={props.similars} />
         </div>
       </div>

src/partials/SimilarityPosts.tsx

@@ -8,7 +8,6 @@ type ISimilarityPosts = {
 export const SimilarityPosts = (props: ISimilarityPosts) => {
   return (
     <div>
-      <hr className="my-10" />
       <h3 className="my-4 text-2xl font-bold">あわせて読む</h3>
       <ul className="list-disc">
         {props.similars

src/tests/unit/CommitHistries.test.ts

@@ -0,0 +1,11 @@
+import { getCommitHistories } from '@/utils/CommitHistories';
+
+test('getCommitHistries', async () => {
+  const actual = await getCommitHistories('src/content/posts/history.mdx');
+
+  actual.forEach((a) => {
+    expect(a).toHaveProperty('sha');
+    expect(a).toHaveProperty('commitMessage');
+    expect(a).toHaveProperty('date');
+  });
+});

src/utils/CommitHistories.ts

@@ -0,0 +1,25 @@
+import { simpleGit } from 'simple-git';
+
+export type CommitHistory = {
+  sha: string;
+  date: string;
+  commitMessage: string;
+};
+
+const MAX_COUNT = 3;
+
+export const getCommitHistories = async (
+  filePath: string
+): Promise<CommitHistory[]> => {
+  const git = simpleGit();
+  const log = await git.log({
+    file: filePath,
+    maxCount: MAX_COUNT,
+  });
+
+  return log.all.map((l) => ({
+    sha: l.hash,
+    date: l.date,
+    commitMessage: l.message,
+  }));
+};