fix: Show year (#783)

bicstone · Jun 17, 2023 · f471fdb · f471fdb
1 parent 85d8c70
commit f471fdb
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 33 deletions.
diff --git a/src/constants/SITE_METADATA.ts b/src/constants/SITE_METADATA.ts
@@ -1,17 +1,13 @@
 export const SITE_METADATA = {
-  title: "bicstone.me",
+  title: "おおいし （@bicstone）",
   shortTitle: "bicstone",
   siteUrl: process.env.GATSBY_SITE_URL ?? "https://bicstone.me",
   description:
     "Webエンジニア/機械エンジニア おおいし (@bicstone) のポートフォリオサイトです。",
   author: "bicstone",
   image: "/android-chrome-512x512.png",
-  image192: "/android-chrome-192x192.png",
-  twitter: "@bicstone_me",
-  github: "bicstone",
   firstName: "Takanori",
   lastName: "Oishi",
-  gender: "male",
   defaultLanguage: "ja",
   tileColor: "#81c784",
   maskColor: "#2d1e1e",

diff --git a/src/features/Timeline/TimelineArticleCard.tsx b/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 ? "yyyy/MM/dd" : "M月d日");
 
   return (
     <TimelineCardBase

diff --git a/src/features/Timeline/TimelineCertificationCard.tsx b/src/features/Timeline/TimelineCertificationCard.tsx
@@ -17,14 +17,22 @@ 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 endDateFormatted = formatDateTime(item.endDate, "yy年M月d日");
+  const dateFormatted = formatDateTime(
+    item.date,
+    showYear ? "yyyy/MM/dd" : "M月d日"
+  );
+  const endDateFormatted = formatDateTime(
+    item.endDate,
+    showYear ? "yyyy/MM/dd" : "yy年M月d日"
+  );
   const subTitle =
     item.endDate !== "" ? (
       <>

diff --git a/src/features/Timeline/TimelineHistoryCard.tsx b/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 ? "yyyy/MM" : "M月");
 
   return (
     <TimelineCardBase

diff --git a/src/features/Timeline/TimelineList.tsx b/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%",

diff --git a/src/features/Timeline/TimelineMdxCard.tsx b/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 ? "yyyy/MM/dd" : "M月d日");
 
   return (
     <TimelineCardBase

diff --git a/src/features/Timeline/TimelineOssCard.tsx b/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 ? "yyyy/MM" : "M月");
 
   return (
     <TimelineCardBase

diff --git a/src/features/Timeline/TimelineProjectCard.tsx b/src/features/Timeline/TimelineProjectCard.tsx
@@ -21,16 +21,21 @@ export const query = graphql`
 
 export type TimelineProjectCardProps = {
   item: TimelineProjectCardFragment;
+  showYear?: boolean;
 } & CardProps;
 
 export const TimelineProjectCard = ({
   item,
+  showYear = false,
   ...props
 }: TimelineProjectCardProps): JSX.Element => {
-  const format =
+  const endDateFormat =
     item.fields.dateYear === item.fields.endDateYear ? "M月" : "yy年M月";
-  const dateFormatted = formatDateTime(item.date, "M月");
-  const endDateFormatted = formatDateTime(item.endDate, format);
+  const dateFormatted = formatDateTime(item.date, showYear ? "yyyy/MM" : "M月");
+  const endDateFormatted = formatDateTime(
+    item.endDate,
+    showYear ? "yyyy/MM" : endDateFormat
+  );
   const subTitle =
     item.endDate !== "" ? (
       <>

diff --git a/src/features/Timeline/TimelineSlideCard.tsx b/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 ? "yyyy/MM/dd" : "M月d日");
 
   return (
     <TimelineCardBase

diff --git a/static b/static