side menu

frontend/components/MainContainer.tsx

@@ -5,6 +5,7 @@ import {
   MOBILE_MAX_WIDTH,
   TABLET_MAX_WIDTH,
 } from '@/styles/common'
+import { PostMatter } from '@/types/Post'
 
 const Container = styled.div`
   display: flex;
@@ -26,14 +27,15 @@ const Container = styled.div`
 `
 
 type Props = {
+  matters: PostMatter[]
   children: React.ReactNode
 }
 
-const MainContainer = ({ children }: Props) => {
+const MainContainer = ({ children, matters }: Props) => {
   return (
     <Container>
       <main>{children}</main>
-      <SideMenu />
+      <SideMenu matters={matters} />
     </Container>
   )
 }

frontend/components/SideMenu.tsx

@@ -1,7 +1,14 @@
+import Image from 'next/image'
 import styled from 'styled-components'
 import { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from '@/styles/common'
+import { PostMatter } from '@/types/Post'
+
+const imageSize = 100
 
 const Aside = styled.aside`
+  display: flex;
+  flex-direction: column;
+  gap: 50px;
   flex-shrink: 0;
   width: 240px;
 
@@ -12,10 +19,84 @@ const Aside = styled.aside`
   @media (max-width: ${MOBILE_MAX_WIDTH}) {
     width: 100%;
   }
+
+  * {
+    margin: 0;
+  }
+`
+
+const Section = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+`
+
+const H2 = styled.h2`
+  margin-top: 0;
+`
+
+const StyleImage = styled(Image)`
+  border-radius: 50%;
+`
+
+const SearchText = styled.input`
+  padding: 5px;
+  border: 1px solid #444;
+  border-radius: 5px;
+`
+
+const LatestLinkList = styled.ul`
+  padding-inline-start: 0;
+  font-size: 1.2rem;
+  list-style-type: none;
+
+  li {
+    margin-bottom: 10px;
+  }
+
+  a {
+    text-decoration: none;
+  }
 `
 
-const SideMenu = () => {
-  return <Aside>This is a side menu.</Aside>
+type Props = {
+  matters: PostMatter[]
+}
+
+const SideMenu = ({ matters }: Props) => {
+  const articles = matters
+    // sortでは元配列を変更してしまうため、concatで事前にcloneする.
+    .concat()
+    .sort((a, b) => (a.date < b.date ? 1 : -1))
+    .map(({ slug, title }) => (
+      <li key={slug}>
+        <a href={'/posts/' + slug}>{title}</a>
+      </li>
+    ))
+
+  return (
+    <Aside>
+      <Section>
+        <H2>Profile</H2>
+        <StyleImage
+          layout="fixed"
+          src="/profile.png"
+          alt="profile image"
+          width={imageSize}
+          height={imageSize}
+        />
+        <p>This is a side menu.</p>
+      </Section>
+      <Section>
+        <H2>Search</H2>
+        <SearchText type="search" />
+      </Section>
+      <Section>
+        <H2>Latest</H2>
+        <LatestLinkList>{articles}</LatestLinkList>
+      </Section>
+    </Aside>
+  )
 }
 
 export default SideMenu

frontend/pages/index.tsx

@@ -1,13 +1,26 @@
-import type { NextPage } from 'next'
 import Link from 'next/link'
 import styled from 'styled-components'
 import MainContainer from '@/components/MainContainer'
+import * as postService from '@/services/post-service'
+import { PostMatter } from '@/types/Post'
 
 const H1 = styled.h1`
   margin-bottom: 1rem;
 `
 
-const Home: NextPage = () => {
+export async function getStaticProps() {
+  return {
+    props: {
+      matters: await postService.getMatters(),
+    },
+  }
+}
+
+type Props = {
+  matters: PostMatter[]
+}
+
+const Home = ({ matters }: Props) => {
   const linkData = [
     {
       path: 'posts',
@@ -25,7 +38,7 @@ const Home: NextPage = () => {
   )
 
   return (
-    <MainContainer>
+    <MainContainer matters={matters}>
       <section>
         <H1>ブログ</H1>
         {links}

frontend/pages/posts/[slug].tsx

@@ -2,6 +2,7 @@ import ArticleContent from '@/components/ArticleContent'
 import dayjs from '@/lib/dayjs'
 import MainContainer from '@/components/MainContainer'
 import * as postService from '@/services/post-service'
+import { PostMatter } from '@/types/Post'
 
 export async function getStaticPaths() {
   return {
@@ -13,6 +14,7 @@ export async function getStaticPaths() {
 type Params = {
   params: {
     slug: string
+    matters: PostMatter[]
   }
 }
 
@@ -24,6 +26,7 @@ export async function getStaticProps({ params }: Params) {
       content: postData.content,
       title: postData.matter.title,
       date: postData.matter.date,
+      matters: await postService.getMatters(),
     },
   }
 }
@@ -32,11 +35,12 @@ type Props = {
   content: string
   title: string
   date: string
+  matters: PostMatter[]
 }
 
-const Slug = ({ content, title, date }: Props) => {
+const Slug = ({ content, title, date, matters }: Props) => {
   return (
-    <MainContainer>
+    <MainContainer matters={matters}>
       <ArticleContent content={content} date={dayjs(date)} title={title} />
     </MainContainer>
   )

frontend/pages/posts/index.tsx

@@ -2,11 +2,13 @@ import Link from 'next/link'
 import styled from 'styled-components'
 import MainContainer from '@/components/MainContainer'
 import * as postService from '@/services/post-service'
+import { PostMatter } from '@/types/Post'
 
 export async function getStaticProps() {
   return {
     props: {
-      slugs: postService.getSlugs(),
+      matters: await postService.getMatters(),
+      slugs: await postService.getSlugs(),
     },
   }
 }
@@ -16,10 +18,11 @@ const H1 = styled.h1`
 `
 
 type Props = {
+  matters: PostMatter[]
   slugs: string[]
 }
 
-const Index = ({ slugs }: Props) => {
+const Index = ({ matters, slugs }: Props) => {
   const links = (
     <ul>
       {slugs.map((slug) => (
@@ -30,7 +33,7 @@ const Index = ({ slugs }: Props) => {
     </ul>
   )
   return (
-    <MainContainer>
+    <MainContainer matters={matters}>
       <section>
         <H1>記事一覧</H1>
         {links}

frontend/services/post-service.ts

@@ -13,12 +13,26 @@ export async function loadMarkdown(slug: string): Promise<MarkdownContent> {
   return {
     content: postData.content,
     matter: {
+      slug,
       title: postData.matter.title,
       date: dayjs(postData.matter.date).format('YYYY-MM-DD'),
     },
   }
 }
 
+export async function getMatters(): Promise<PostMatter[]> {
+  const slugs = getSlugs()
+
+  const matters: PostMatter[] = []
+  for (const slug of slugs) {
+    const content = await loadMarkdown(slug)
+
+    matters.push(content.matter)
+  }
+
+  return matters
+}
+
 export function getSlugs() {
   return fs
     .readdirSync(getPostDir())

frontend/types/Post.ts

@@ -1,4 +1,5 @@
 export type PostMatter = {
+  slug: string
   title: string
   date: string
 }