fix: Adopt Material Design 3 (#789)

bicstone · Jun 21, 2023 · e9eae1a · e9eae1a
1 parent 509066a
commit e9eae1a
Show file tree

Hide file tree

Showing 13 changed files with 45 additions and 44 deletions.
diff --git a/.env.example b/.env.example
@@ -7,7 +7,6 @@ GTM_ID=
 # ALL_PAGES_TO_NO_INDEX=true
 # GATSBY_ADSENSE_PUB_ID=
 # GATSBY_ADSENSE_INARTICLE_AD_ID=
-# GATSBY_LOG_ROCKET_ID=
 # GATSBY_SITE_URL=https://bicstone.me
 # PATH_PREFIX=/portfolio
 

diff --git a/.github/workflows/deploy-to-prod.yml b/.github/workflows/deploy-to-prod.yml
@@ -47,7 +47,6 @@ jobs:
           GTM_ID: ${{ vars.GTM_ID }}
           GATSBY_ADSENSE_PUB_ID: ${{ vars.GATSBY_ADSENSE_PUB_ID }}
           GATSBY_ADSENSE_INARTICLE_AD_ID: ${{ vars.GATSBY_ADSENSE_INARTICLE_AD_ID }}
-          GATSBY_LOG_ROCKET_ID: ${{ vars.GATSBY_LOG_ROCKET_ID }}
 
       - uses: aws-actions/configure-aws-credentials@v2
         with:

diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx
@@ -16,9 +16,7 @@ export const wrapPageElement: GatsbyBrowser["wrapPageElement"] = ({
   return <WrapPageElement>{element}</WrapPageElement>;
 };
 
-export const onRouterUpdate: GatsbyBrowser["onRouteUpdate"] = ({
-  location,
-}) => {
+export const onRouteUpdate: GatsbyBrowser["onRouteUpdate"] = ({ location }) => {
   if (isDefined(location?.hash)) {
     const id = location.hash.replace("#", "");
     const element = document.getElementById(id);

diff --git a/src/components/markdown/InlineCode.tsx b/src/components/markdown/InlineCode.tsx
@@ -7,6 +7,7 @@ export const InlineCode = styled("span")(({ theme }) => ({
   fontFamily: CONSOLE_FONT_FAMILY,
   paddingLeft: theme.spacing(0.5),
   paddingRight: theme.spacing(0.5),
-  backgroundColor: theme.vars.palette.divider,
+  backgroundColor: theme.vars.palette.surfaceVariant.main,
+  color: theme.vars.palette.onSurfaceVariant.main,
   borderRadius: theme.shape.borderRadius,
 }));
diff --git a/src/constants/SITE_METADATA.ts b/src/constants/SITE_METADATA.ts
@@ -5,7 +5,8 @@ export const SITE_METADATA = {
   description:
     "Webエンジニア/機械エンジニア おおいし (@bicstone) のポートフォリオサイトです。",
   author: "bicstone",
-  image: "/android-chrome-512x512.png",
+  logoImage: "https://static.bicstone.me/icon_circular.png",
+  ogpImage: "https://static.bicstone.me/og_image.png",
   firstName: "Takanori",
   lastName: "Oishi",
   defaultLanguage: "ja",

diff --git a/src/features/Timeline/TimelineVirtualizedList.tsx b/src/features/Timeline/TimelineVirtualizedList.tsx
@@ -1,3 +1,4 @@
+import { keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
 import NoSsr from "@mui/material/NoSsr";
 import { graphql } from "gatsby";
@@ -136,6 +137,17 @@ export const TimelineVirtualizedList = ({
         }}
         itemContent={(index, item) => <TimelineItem key={index} item={item} />}
         css={(theme) => ({
+          animationName: keyframes({
+            "0%": {
+              opacity: 0,
+            },
+            "100%": {
+              opacity: 1,
+            },
+          }),
+          animationDuration: ".3s",
+          animationTimingFunction: "ease-in",
+
           height: "100%",
           // prevent flickering caused by virtual scrolling
           minHeight: minHeightDoubleColumn,

diff --git a/src/layouts/HeadTemplate.tsx b/src/layouts/HeadTemplate.tsx
@@ -1,3 +1,5 @@
+import { defaultColorTokens } from "./themes";
+
 import type { HeadProps } from "gatsby";
 
 import { SITE_METADATA } from "@/constants/SITE_METADATA";
@@ -9,12 +11,19 @@ import { SITE_METADATA } from "@/constants/SITE_METADATA";
 export const HeadTemplate = (props: {
   location: HeadProps["location"];
   title: string;
-  description: string;
-  image: string;
+  description?: string;
+  image?: string;
   imageAlt: string;
   type: string;
 }): JSX.Element => {
-  const { location, title, description, image, imageAlt, type } = props;
+  const {
+    location,
+    title,
+    description = SITE_METADATA.description,
+    image = SITE_METADATA.ogpImage,
+    imageAlt,
+    type,
+  } = props;
 
   const isAllPagesToNoIndex = process.env.ALL_PAGES_TO_NO_INDEX === "true";
   const canonical = `${SITE_METADATA.siteUrl}${location.pathname}`;
@@ -81,6 +90,16 @@ export const HeadTemplate = (props: {
       />
       <meta name="application-name" content={SITE_METADATA.shortTitle} />
       <meta name="msapplication-TileColor" content={SITE_METADATA.tileColor} />
+      <meta
+        name="theme-color"
+        media="(prefers-color-scheme: light)"
+        content={defaultColorTokens.lightColorTokens.surfaceVariant}
+      />
+      <meta
+        name="theme-color"
+        media="(prefers-color-scheme: dark)"
+        content={defaultColorTokens.darkColorTokens.surfaceVariant}
+      />
       {/* others */}
       <meta
         name="viewport"
@@ -145,7 +164,7 @@ export const HeadTemplate = (props: {
             "@context": "https://schema.org",
             "@type": "Organization",
             url: SITE_METADATA.siteUrl,
-            logo: `${SITE_METADATA.siteUrl}${SITE_METADATA.image}`,
+            logo: SITE_METADATA.logoImage,
           }),
         }}
       />

diff --git a/src/pages/histories.tsx b/src/pages/histories.tsx
@@ -27,8 +27,6 @@ export const Head: HeadFC<HistoryPageQuery> = ({ location }) => {
     <HeadTemplate
       location={location}
       title={title}
-      description={SITE_METADATA.description}
-      image={`${SITE_METADATA.siteUrl}${SITE_METADATA.image}`}
       imageAlt={title}
       type="blog"
     />

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,5 +1,5 @@
 import Container from "@mui/material/Container";
-import { Script, graphql } from "gatsby";
+import { graphql } from "gatsby";
 
 import type { IndexPageQuery } from "@/generated/graphqlTypes";
 import type { PageProps, HeadFC } from "gatsby";
@@ -10,7 +10,6 @@ import { BioCardList } from "@/features/Bio";
 import { TimelineVirtualizedList } from "@/features/Timeline";
 import { TimelineTabList } from "@/features/TimelineTab";
 import { HeadTemplate } from "@/layouts/HeadTemplate";
-import { isDefined } from "@/utils/typeguard";
 
 export const query = graphql`
   query IndexPage {
@@ -30,34 +29,15 @@ declare global {
 
 export const Head: HeadFC<IndexPageQuery> = ({ location }) => {
   const title = SITE_METADATA.title;
-  const logRocketId = process.env.GATSBY_LOG_ROCKET_ID;
 
   return (
     <>
       <HeadTemplate
         location={location}
         title={title}
-        description={SITE_METADATA.description}
-        image={`${SITE_METADATA.siteUrl}${SITE_METADATA.image}`}
         imageAlt={title}
         type="blog"
       />
-      {isDefined(logRocketId) && (
-        <Script
-          id="LogRocket.min.js"
-          strategy="idle"
-          src="https://cdn.lr-ingest.com/LogRocket.min.js"
-          async={true}
-          crossOrigin="anonymous"
-          onLoad={() => {
-            setTimeout(() => {
-              try {
-                window?.LogRocket?.init(logRocketId);
-              } catch (e) {}
-            }, 0);
-          }}
-        />
-      )}
     </>
   );
 };

diff --git a/src/pages/me.tsx b/src/pages/me.tsx
@@ -40,8 +40,6 @@ export const Head: HeadFC = ({ location }) => {
     <HeadTemplate
       location={location}
       title={`${title} - ${SITE_METADATA.title}`}
-      description={SITE_METADATA.description}
-      image={`${SITE_METADATA.siteUrl}${SITE_METADATA.image}`}
       imageAlt={SITE_METADATA.title}
       type="profile"
     />

diff --git a/src/pages/outputs.tsx b/src/pages/outputs.tsx
@@ -33,8 +33,6 @@ export const Head: HeadFC<OutputsPageQuery> = ({ location, data }) => {
       <HeadTemplate
         location={location}
         title={title}
-        description={SITE_METADATA.description}
-        image={`${SITE_METADATA.siteUrl}${SITE_METADATA.image}`}
         imageAlt={title}
         type="blog"
       />
@@ -45,7 +43,7 @@ export const Head: HeadFC<OutputsPageQuery> = ({ location, data }) => {
             "@context": "https://schema.org",
             "@type": "Blog",
             headline: SITE_METADATA.title,
-            image: [`${SITE_METADATA.siteUrl}${SITE_METADATA.image}`],
+            image: [SITE_METADATA.logoImage],
             datePublished: buildTime,
             dateModified: buildTime,
             description: SITE_METADATA.description,
@@ -59,7 +57,7 @@ export const Head: HeadFC<OutputsPageQuery> = ({ location, data }) => {
               name: SITE_METADATA.title,
               logo: {
                 "@type": "ImageObject",
-                url: `${SITE_METADATA.siteUrl}${SITE_METADATA.image}`,
+                url: SITE_METADATA.logoImage,
               },
             },
             blogPost: [
@@ -69,7 +67,7 @@ export const Head: HeadFC<OutputsPageQuery> = ({ location, data }) => {
                 image:
                   item.__typename === "Mdx"
                     ? `${SITE_METADATA.siteUrl}/ogp/${item.slug}.png`
-                    : `${SITE_METADATA.siteUrl}${SITE_METADATA.image}`,
+                    : SITE_METADATA.logoImage,
                 datePublished: item.date,
                 author: {
                   "@type": "Person",

diff --git a/src/pages/projects.tsx b/src/pages/projects.tsx
@@ -27,8 +27,6 @@ export const Head: HeadFC<ProjectsPageQuery> = ({ location }) => {
     <HeadTemplate
       location={location}
       title={title}
-      description={SITE_METADATA.description}
-      image={`${SITE_METADATA.siteUrl}${SITE_METADATA.image}`}
       imageAlt={title}
       type="blog"
     />

diff --git a/src/templates/BlogPost.tsx b/src/templates/BlogPost.tsx
@@ -101,7 +101,7 @@ export const Head: HeadFC<BlogPostTemplateQuery> = ({ location, data }) => {
               name: SITE_METADATA.title,
               logo: {
                 "@type": "ImageObject",
-                url: `${SITE_METADATA.siteUrl}${SITE_METADATA.image}`,
+                url: SITE_METADATA.logoImage,
               },
             },
             description: post.frontmatter.excerpt,