feat: Remove ogp image generator (#994)

gatsby-node.ts

@@ -3,7 +3,6 @@ import path from "path";
 
 import { formatInTimeZone } from "date-fns-tz";
 
-import { createOgpImage } from "./src/utils/createOgpImage";
 import { fetchLaprasActivity } from "./src/utils/fetchLaprasActivity";
 import { isDefined } from "./src/utils/typeguard";
 
@@ -129,7 +128,6 @@ export const createPages: GatsbyNode["createPages"] = async ({
 
 /**
  * Add Search nodes
- * Create OGP images
  */
 export const createPagesStatefully: GatsbyNode["createPagesStatefully"] =
   async ({ graphql, reporter, actions, createNodeId, createContentDigest }) => {
@@ -257,29 +255,6 @@ export const createPagesStatefully: GatsbyNode["createPagesStatefully"] =
     reporter.success(
       `onCreatePagesStatefully: Created ${timelineList.length} search nodes`,
     );
-
-    /**
-     * Create OGP images
-     */
-
-    const blogPostList = result?.data?.blogPosts?.nodes.map((node) => ({
-      title: node.frontmatter.title,
-      slug: node.frontmatter.slug,
-      excerpt: node.frontmatter.excerpt,
-    }));
-
-    if (!isDefined(blogPostList)) throw new Error("blogPostList is undefined");
-
-    for (const blogPost of blogPostList) {
-      await createOgpImage({
-        title: blogPost.title,
-        slug: blogPost.slug,
-      });
-    }
-
-    reporter.success(
-      `onCreatePagesStatefully: Created ${blogPostList.length} blog ogp images`,
-    );
   };
 
 /**

package.json

@@ -67,7 +67,6 @@
     "@types/react-dom": "18.2.19",
     "@typescript-eslint/eslint-plugin": "7.0.2",
     "@typescript-eslint/parser": "7.0.2",
-    "canvas": "2.11.2",
     "dotenv": "16.4.5",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",

src/layouts/HeadTemplate.tsx

@@ -121,7 +121,7 @@ export const HeadTemplate = (props: {
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={description} />
       <meta name="twitter:image" content={image} />
-      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:card" content="summary" />
       <meta name="twitter:site" content="@bicstone_me" />
       <meta name="twitter:creator" content="@bicstone_me" />
 

src/pages/outputs.tsx

@@ -68,10 +68,7 @@ export const Head: HeadFC<OutputsPageQuery> = ({ location, data }) => {
               ...outputsItems.map((item) => ({
                 "@type": "BlogPosting",
                 headline: item.title,
-                image:
-                  item.__typename === "Mdx"
-                    ? `${SITE_METADATA.siteUrl}/ogp/${item.slug}.png`
-                    : SITE_METADATA.logoImage,
+                image: SITE_METADATA.logoImage,
                 datePublished: item.date,
                 author: {
                   "@type": "Person",

src/templates/BlogPost.tsx

@@ -63,7 +63,7 @@ export const Head: HeadFC<BlogPostTemplateQuery> = ({ location, data }) => {
         location={location}
         title={title}
         description={post.frontmatter.excerpt}
-        image={`${SITE_METADATA.siteUrl}/ogp/${post.frontmatter.slug}.png`}
+        image={SITE_METADATA.logoImage}
         imageAlt={SITE_METADATA.title}
         type="article"
       />
@@ -85,9 +85,7 @@ export const Head: HeadFC<BlogPostTemplateQuery> = ({ location, data }) => {
             "@context": "https://schema.org",
             "@type": "BlogPosting",
             headline: title,
-            image: [
-              `${SITE_METADATA.siteUrl}/ogp/${post.frontmatter.slug}.png`,
-            ],
+            image: [SITE_METADATA.logoImage],
             datePublished: post.frontmatter.date,
             dateModified: post.frontmatter.updateDate,
             dateCreated: post.frontmatter.date,