fix: Show year

src/features/Timeline/TimelineArticleCard.tsx

@@ -17,13 +17,15 @@ export const query = graphql`
 
 export type TimelineArticleCardProps = {
   item: TimelineArticleCardFragment;
+  showYear?: boolean;
 } & CardProps;
 
 export const TimelineArticleCard = ({
   item,
+  showYear = false,
   ...props
 }: TimelineArticleCardProps): JSX.Element => {
-  const date = formatDateTime(item.date, "M月d日");
+  const date = formatDateTime(item.date, showYear ? "yy年M月d日" : "M月d日");
 
   return (
     <TimelineCardBase

src/features/Timeline/TimelineCertificationCard.tsx

@@ -17,13 +17,18 @@ export const query = graphql`
 
 export type TimelineCertificationCardProps = {
   item: TimelineCertificationCardFragment;
+  showYear?: boolean;
 } & CardProps;
 
 export const TimelineCertificationCard = ({
   item,
+  showYear = false,
   ...props
 }: TimelineCertificationCardProps): JSX.Element => {
-  const dateFormatted = formatDateTime(item.date, "M月d日");
+  const dateFormatted = formatDateTime(
+    item.date,
+    showYear ? "yy年M月d日" : "M月d日"
+  );
   const endDateFormatted = formatDateTime(item.endDate, "yy年M月d日");
   const subTitle =
     item.endDate !== "" ? (

src/features/Timeline/TimelineHistoryCard.tsx

@@ -16,13 +16,15 @@ export const query = graphql`
 
 export type TimelineHistoryCardProps = {
   item: TimelineHistoryCardFragment;
+  showYear?: boolean;
 } & CardProps;
 
 export const TimelineHistoryCard = ({
   item,
+  showYear = false,
   ...props
 }: TimelineHistoryCardProps): JSX.Element => {
-  const date = formatDateTime(item.date, "M月");
+  const date = formatDateTime(item.date, showYear ? "yy年M月" : "M月");
 
   return (
     <TimelineCardBase

src/features/Timeline/TimelineList.tsx

@@ -109,33 +109,59 @@ export const query = graphql`
 
 interface TimelineItemProps {
   item: TimelineListProps["groups"]["group"][number]["nodes"][number];
+  showYear?: boolean;
 }
 
-const TimelineItem = ({ item }: TimelineItemProps): JSX.Element | null => {
+const TimelineItem = ({
+  item,
+  showYear = false,
+}: TimelineItemProps): JSX.Element | null => {
   switch (item.__typename) {
-    case "ArticlesYaml":
-      return <TimelineArticleCard key={item.id} item={item} />;
+    case "ArticlesYaml": {
+      return (
+        <TimelineArticleCard key={item.id} item={item} showYear={showYear} />
+      );
+    }
 
-    case "CertificationsYaml":
-      return <TimelineCertificationCard key={item.id} item={item} />;
+    case "CertificationsYaml": {
+      return (
+        <TimelineCertificationCard
+          key={item.id}
+          item={item}
+          showYear={showYear}
+        />
+      );
+    }
 
-    case "HistoriesYaml":
-      return <TimelineHistoryCard key={item.id} item={item} />;
+    case "HistoriesYaml": {
+      return (
+        <TimelineHistoryCard key={item.id} item={item} showYear={showYear} />
+      );
+    }
 
-    case "OssesYaml":
-      return <TimelineOssCard key={item.id} item={item} />;
+    case "OssesYaml": {
+      return <TimelineOssCard key={item.id} item={item} showYear={showYear} />;
+    }
 
-    case "ProjectsYaml":
-      return <TimelineProjectCard key={item.id} item={item} />;
+    case "ProjectsYaml": {
+      return (
+        <TimelineProjectCard key={item.id} item={item} showYear={showYear} />
+      );
+    }
 
-    case "SlidesYaml":
-      return <TimelineSlideCard key={item.id} item={item} />;
+    case "SlidesYaml": {
+      return (
+        <TimelineSlideCard key={item.id} item={item} showYear={showYear} />
+      );
+    }
 
-    case "Mdx":
-      return <TimelineMdxCard key={item.id} item={item} />;
+    case "Mdx": {
+      return <TimelineMdxCard key={item.id} item={item} showYear={showYear} />;
+    }
 
-    default:
+    default: {
       return null;
+    }
   }
 };
 
@@ -181,7 +207,9 @@ export const TimelineList = ({
         components={{
           List: Container,
         }}
-        itemContent={(index, item) => <TimelineItem key={index} item={item} />}
+        itemContent={(index, item) => (
+          <TimelineItem key={index} item={item} showYear />
+        )}
         overscan={10}
         style={{
           height: "100%",

src/features/Timeline/TimelineMdxCard.tsx

@@ -17,13 +17,15 @@ export const query = graphql`
 
 export type TimelineMdxCardProps = {
   item: TimelineMdxCardFragment;
+  showYear?: boolean;
 } & CardProps;
 
 export const TimelineMdxCard = ({
   item,
+  showYear = false,
   ...props
 }: TimelineMdxCardProps): JSX.Element => {
-  const date = formatDateTime(item.date, "M月d日");
+  const date = formatDateTime(item.date, showYear ? "yy年M月d日" : "M月d日");
 
   return (
     <TimelineCardBase

src/features/Timeline/TimelineOssCard.tsx

@@ -17,13 +17,15 @@ export const query = graphql`
 
 export type TimelineOssCardProps = {
   item: TimelineOssCardFragment;
+  showYear?: boolean;
 } & CardProps;
 
 export const TimelineOssCard = ({
   item,
+  showYear = false,
   ...props
 }: TimelineOssCardProps): JSX.Element => {
-  const date = formatDateTime(item.date, "M月");
+  const date = formatDateTime(item.date, showYear ? "yy年M月" : "M月");
 
   return (
     <TimelineCardBase

src/features/Timeline/TimelineProjectCard.tsx

@@ -21,15 +21,19 @@ export const query = graphql`
 
 export type TimelineProjectCardProps = {
   item: TimelineProjectCardFragment;
+  showYear?: boolean;
 } & CardProps;
 
 export const TimelineProjectCard = ({
   item,
+  showYear = false,
   ...props
 }: TimelineProjectCardProps): JSX.Element => {
   const format =
-    item.fields.dateYear === item.fields.endDateYear ? "M月" : "yy年M月";
-  const dateFormatted = formatDateTime(item.date, "M月");
+    item.fields.dateYear !== item.fields.endDateYear || showYear
+      ? "yy年M月"
+      : "M月";
+  const dateFormatted = formatDateTime(item.date, showYear ? "yy年M月" : "M月");
   const endDateFormatted = formatDateTime(item.endDate, format);
   const subTitle =
     item.endDate !== "" ? (

src/features/Timeline/TimelineSlideCard.tsx

@@ -17,13 +17,15 @@ export const query = graphql`
 
 export type TimelineSlideCardProps = {
   item: TimelineSlideCardFragment;
+  showYear?: boolean;
 } & CardProps;
 
 export const TimelineSlideCard = ({
   item,
+  showYear = false,
   ...props
 }: TimelineSlideCardProps): JSX.Element => {
-  const date = formatDateTime(item.date, "M月d日");
+  const date = formatDateTime(item.date, showYear ? "yy年M月d日" : "M月d日");
 
   return (
     <TimelineCardBase