feat: Adopt Material Design 3 (#757)

.env.example

@@ -7,6 +7,7 @@ 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
 

.github/workflows/deploy-to-prod.yml

@@ -47,6 +47,7 @@ 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:

gatsby-browser.tsx

@@ -2,6 +2,7 @@ import type { GatsbyBrowser } from "gatsby";
 
 import { WrapPageElement } from "@/layouts/WrapPageElement";
 import { WrapRootElement } from "@/layouts/WrapRootElement";
+import { isDefined } from "@/utils/typeguard";
 
 export const wrapRootElement: GatsbyBrowser["wrapRootElement"] = ({
   element,
@@ -14,3 +15,15 @@ export const wrapPageElement: GatsbyBrowser["wrapPageElement"] = ({
 }) => {
   return <WrapPageElement>{element}</WrapPageElement>;
 };
+
+export const onRouterUpdate: GatsbyBrowser["onRouteUpdate"] = ({
+  location,
+}) => {
+  if (isDefined(location?.hash)) {
+    const id = location.hash.replace("#", "");
+    const element = document.getElementById(id);
+    if (isDefined(element)) {
+      element.scrollIntoView();
+    }
+  }
+};

gatsby-config.ts

@@ -4,12 +4,19 @@ import dotenv from "dotenv";
 
 import { SITE_METADATA } from "./src/constants/SITE_METADATA";
 
+import type {
+  GatsbyPluginSitemapQuery,
+  GatsbyPluginFeedQuery,
+} from "@/generated/graphqlTypes";
+import type Sentry from "@sentry/browser";
 import type { GatsbyConfig } from "gatsby";
 
-import {
-  type GatsbyPluginSitemapQuery,
-  type GatsbyPluginFeedQuery,
-} from "@/generated/graphqlTypes";
+// Google Tag Manager types
+declare global {
+  interface Window {
+    Sentry?: typeof Sentry;
+  }
+}
 
 dotenv.config({ path: `.env` });
 
@@ -40,13 +47,6 @@ const config: GatsbyConfig = {
   jsxImportSource: "@emotion/react",
 
   plugins: [
-    {
-      resolve: `gatsby-plugin-anchor-links`,
-      options: {
-        offset: 0,
-        duration: 0,
-      },
-    },
     `gatsby-plugin-emotion`,
     {
       resolve: `gatsby-plugin-google-tagmanager`,
@@ -145,6 +145,7 @@ const config: GatsbyConfig = {
         ],
       },
     },
+    `gatsby-plugin-remove-serviceworker`,
     {
       resolve: `gatsby-plugin-s3`,
       options: {
@@ -159,6 +160,7 @@ const config: GatsbyConfig = {
     {
       resolve: `gatsby-plugin-sitemap`,
       options: {
+        createLinkInHead: false,
         resolveSiteUrl: () => SITE_METADATA.siteUrl,
         query: /* GraphQL */ `
           query GatsbyPluginSitemap {
@@ -196,15 +198,15 @@ const config: GatsbyConfig = {
               path: `/${frontmatter.slug}`,
               lastmod: frontmatter.updateDate ?? frontmatter.date,
               changefreq: `weekly`,
-              priority: 0.8,
+              priority: 0.6,
             };
           });
 
           const pages = ["histories", "outputs", "projects"].map((page) => ({
             path: `/${page}`,
             lastmod: site.buildTime,
             changefreq: `daily`,
-            priority: 0.6,
+            priority: 1.0,
           }));
 
           return [home, me, ...posts, ...pages];

gatsby-node.ts

@@ -29,7 +29,6 @@ export const onCreateWebpackConfig: GatsbyNode["onCreateWebpackConfig"] = ({
         "@/components": path.resolve("src/components"),
         "@/features": path.resolve("src/features"),
         "@/generated": path.resolve("src/generated"),
-        "@/hooks": path.resolve("src/hooks"),
         "@/utils": path.resolve("src/utils"),
         "@/layouts": path.resolve("src/layouts"),
       },

package.json

@@ -25,26 +25,26 @@
     "@mui/icons-material": "5.11.16",
     "@mui/lab": "5.0.0-alpha.134",
     "@mui/material": "5.13.5",
-    "@sentry/browser": "7.55.0",
+    "@sentry/browser": "7.55.2",
     "date-fns": "2.30.0",
     "date-fns-tz": "2.0.0",
     "fuse.js": "6.6.2",
-    "gatsby": "5.10.0",
-    "gatsby-plugin-anchor-links": "1.2.1",
-    "gatsby-plugin-emotion": "8.10.0",
-    "gatsby-plugin-feed": "5.10.0",
+    "gatsby": "5.11.0",
+    "gatsby-plugin-emotion": "8.11.0",
+    "gatsby-plugin-feed": "5.11.0",
     "gatsby-plugin-fix-fouc": "1.0.3",
-    "gatsby-plugin-google-tagmanager": "5.10.0",
-    "gatsby-plugin-image": "3.10.0",
-    "gatsby-plugin-mdx": "5.10.0",
+    "gatsby-plugin-google-tagmanager": "5.11.0",
+    "gatsby-plugin-image": "3.11.0",
+    "gatsby-plugin-mdx": "5.11.0",
+    "gatsby-plugin-remove-serviceworker": "1.0.0",
     "gatsby-plugin-s3": "0.4.1",
-    "gatsby-plugin-sharp": "5.10.0",
-    "gatsby-plugin-sitemap": "6.10.0",
-    "gatsby-remark-images": "7.10.0",
-    "gatsby-remark-prismjs": "7.10.0",
-    "gatsby-source-filesystem": "5.10.0",
-    "gatsby-transformer-sharp": "5.10.0",
-    "gatsby-transformer-yaml": "5.10.0",
+    "gatsby-plugin-sharp": "5.11.0",
+    "gatsby-plugin-sitemap": "6.11.0",
+    "gatsby-remark-images": "7.11.0",
+    "gatsby-remark-prismjs": "7.11.0",
+    "gatsby-source-filesystem": "5.11.0",
+    "gatsby-transformer-sharp": "5.11.0",
+    "gatsby-transformer-yaml": "5.11.0",
     "github-slugger": "2.0.0",
     "html-react-parser": "4.0.0",
     "prism-themes": "1.9.0",

src/components/InarticleAd.tsx

@@ -1,3 +1,4 @@
+import { Script } from "gatsby";
 import { useEffect } from "react";
 
 import { isDefined } from "@/utils/typeguard";
@@ -7,6 +8,12 @@ export interface InarticleAdProps {
   adId: string;
 }
 
+declare global {
+  interface Window {
+    adsbygoogle?: unknown[];
+  }
+}
+
 /**
  * In-article Ad
  */
@@ -24,13 +31,22 @@ export const InarticleAd = ({ pubId, adId }: InarticleAdProps): JSX.Element => {
   }, []);
 
   return (
-    <ins
-      className="adsbygoogle"
-      css={{ display: "block", textAlign: "center" }}
-      data-ad-layout="in-article"
-      data-ad-format="fluid"
-      data-ad-client={pubId}
-      data-ad-slot={adId}
-    />
+    <>
+      <Script
+        id="adsbygoogle.js"
+        strategy="idle"
+        src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${pubId}`}
+        async={true}
+        crossOrigin="anonymous"
+      />
+      <ins
+        className="adsbygoogle"
+        css={{ display: "block", textAlign: "center" }}
+        data-ad-layout="in-article"
+        data-ad-format="fluid"
+        data-ad-client={pubId}
+        data-ad-slot={adId}
+      />
+    </>
   );
 };

src/components/logos/AutoAwesomeIcon.tsx

@@ -3,7 +3,11 @@ import styled from "@emotion/styled";
 import { LogoBase } from "./LogoBase";
 
 import logo from "@/content/logos/AutoAwesomeIcon.svg";
+import whiteLogo from "@/content/logos/AutoAwesomeWhiteIcon.svg";
 
-export const AutoAwesomeIcon = styled(LogoBase)({
+export const AutoAwesomeIcon = styled(LogoBase)(({ theme }) => ({
   backgroundImage: `url(${logo})`,
-});
+  [theme.getColorSchemeSelector("dark")]: {
+    backgroundImage: `url(${whiteLogo})`,
+  },
+}));

src/components/logos/CodeIcon.tsx

@@ -3,7 +3,11 @@ import styled from "@emotion/styled";
 import { LogoBase } from "./LogoBase";
 
 import logo from "@/content/logos/CodeIcon.svg";
+import whiteLogo from "@/content/logos/CodeWhiteIcon.svg";
 
-export const CodeIcon = styled(LogoBase)({
+export const CodeIcon = styled(LogoBase)(({ theme }) => ({
   backgroundImage: `url(${logo})`,
-});
+  [theme.getColorSchemeSelector("dark")]: {
+    backgroundImage: `url(${whiteLogo})`,
+  },
+}));

src/components/logos/DescriptionIcon.tsx

@@ -3,7 +3,11 @@ import styled from "@emotion/styled";
 import { LogoBase } from "./LogoBase";
 
 import logo from "@/content/logos/DescriptionIcon.svg";
+import whiteLogo from "@/content/logos/DescriptionWhiteIcon.svg";
 
-export const DescriptionIcon = styled(LogoBase)({
+export const DescriptionIcon = styled(LogoBase)(({ theme }) => ({
   backgroundImage: `url(${logo})`,
-});
+  [theme.getColorSchemeSelector("dark")]: {
+    backgroundImage: `url(${whiteLogo})`,
+  },
+}));

src/components/logos/GitHubLogo.tsx

@@ -5,9 +5,9 @@ import { LogoBase } from "./LogoBase";
 import logo from "@/content/logos/GitHubLogo.svg";
 import whiteLogo from "@/content/logos/GitHubWhiteLogo.svg";
 
-export const GitHubLogo = styled(LogoBase)({
+export const GitHubLogo = styled(LogoBase)(({ theme }) => ({
   backgroundImage: `url(${logo})`,
-  '[data-mui-color-scheme="dark"] &': {
+  [theme.getColorSchemeSelector("dark")]: {
     backgroundImage: `url(${whiteLogo})`,
   },
-});
+}));

src/components/logos/VerifiedIcon.tsx

@@ -3,7 +3,11 @@ import styled from "@emotion/styled";
 import { LogoBase } from "./LogoBase";
 
 import logo from "@/content/logos/VerifiedIcon.svg";
+import whiteLogo from "@/content/logos/VerifiedWhiteIcon.svg";
 
-export const VerifiedIcon = styled(LogoBase)({
+export const VerifiedIcon = styled(LogoBase)(({ theme }) => ({
   backgroundImage: `url(${logo})`,
-});
+  [theme.getColorSchemeSelector("dark")]: {
+    backgroundImage: `url(${whiteLogo})`,
+  },
+}));

src/components/markdown/mdxComponents.tsx

@@ -31,13 +31,31 @@ const baseMdxComponents: MDXComponents = {
   p: ({ ref, ...props }) => <Paragraph {...props} />,
   h1: () => notImplemented("h1"),
   h2: ({ ref, ...props }) => (
-    <Heading variant="h5" component="h2" prefix="#" {...props} />
+    <Heading
+      variant="h5"
+      component="h2"
+      fontWeight="bold"
+      prefix="#"
+      {...props}
+    />
   ),
   h3: ({ ref, ...props }) => (
-    <Heading variant="h6" component="h3" prefix="##" {...props} />
+    <Heading
+      variant="h6"
+      component="h3"
+      fontWeight="bold"
+      prefix="##"
+      {...props}
+    />
   ),
   h4: ({ ref, ...props }) => (
-    <Heading variant="subtitle1" component="h4" prefix="###" {...props} />
+    <Heading
+      variant="subtitle1"
+      component="h4"
+      fontWeight="bold"
+      prefix="###"
+      {...props}
+    />
   ),
   h5: ({ ref, ...props }) => <strong {...props} />,
   h6: ({ ref, ...props }) => <strong {...props} />,

src/constants/TRANSLATION.ts

@@ -24,7 +24,7 @@ export const TRANSLATION = {
   },
   hello: {
     description:
-      "Webエンジニア / Certified ScrumMaster® / 情報処理安全確保支援士(017758) / 電気工事士 / 機械エンジニアです。様々な分野の知見を活かしジェネラリストとしてプロダクトに幅広く携わり、相互成長し続けられるエンジニアを目指しています。",
+      "Webエンジニア / Certified ScrumMaster® / 情報処理安全確保支援士 (第017758号) / 電気工事士 / 機械エンジニアです。様々な分野の知見を活かしジェネラリストとしてプロダクトに幅広く携わり、相互成長し続けられるエンジニアを目指しています。",
     description2:
       "メールや DM などお気軽にご連絡ください。すべてに目を通します。",
     goToPortfolio: "ポートフォリオ",