From 6d653c21268873c1a2db89b2ac0f59b47c489919 Mon Sep 17 00:00:00 2001
From: tubone <tubo.yyyuuu@gmail.com>
Date: Sat, 16 Mar 2024 18:16:46 +0900
Subject: [PATCH] fix

---
 src/__generated__/gatsby-types.d.ts                      | 9 +++++++--
 src/components/SEO/index.tsx                             | 7 +++----
 ...3\343\201\227\343\201\276\343\201\227\343\201\237.md" | 2 +-
 src/templates/blog-post.tsx                              | 7 +++++++
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/__generated__/gatsby-types.d.ts b/src/__generated__/gatsby-types.d.ts
index 0289ed2916..351ea2c42e 100644
--- a/src/__generated__/gatsby-types.d.ts
+++ b/src/__generated__/gatsby-types.d.ts
@@ -580,6 +580,7 @@ type FileFieldsEnum =
   | 'childMarkdownRemark.frontmatter.description'
   | 'childMarkdownRemark.frontmatter.headerImage'
   | 'childMarkdownRemark.frontmatter.id'
+  | 'childMarkdownRemark.frontmatter.ogpImage'
   | 'childMarkdownRemark.frontmatter.slug'
   | 'childMarkdownRemark.frontmatter.tags'
   | 'childMarkdownRemark.frontmatter.templateKey'
@@ -647,6 +648,7 @@ type FileFieldsEnum =
   | 'childrenMarkdownRemark.frontmatter.description'
   | 'childrenMarkdownRemark.frontmatter.headerImage'
   | 'childrenMarkdownRemark.frontmatter.id'
+  | 'childrenMarkdownRemark.frontmatter.ogpImage'
   | 'childrenMarkdownRemark.frontmatter.slug'
   | 'childrenMarkdownRemark.frontmatter.tags'
   | 'childrenMarkdownRemark.frontmatter.templateKey'
@@ -1122,6 +1124,7 @@ type MarkdownRemarkFieldsEnum =
   | 'frontmatter.description'
   | 'frontmatter.headerImage'
   | 'frontmatter.id'
+  | 'frontmatter.ogpImage'
   | 'frontmatter.slug'
   | 'frontmatter.tags'
   | 'frontmatter.templateKey'
@@ -1222,6 +1225,7 @@ type MarkdownRemarkFrontmatter = {
   readonly description: Maybe<Scalars['String']>;
   readonly headerImage: Maybe<Scalars['String']>;
   readonly id: Maybe<Scalars['String']>;
+  readonly ogpImage: Maybe<Scalars['String']>;
   readonly slug: Maybe<Scalars['String']>;
   readonly tags: Maybe<ReadonlyArray<Maybe<Scalars['String']>>>;
   readonly templateKey: Maybe<Scalars['String']>;
@@ -1241,6 +1245,7 @@ type MarkdownRemarkFrontmatterFilterInput = {
   readonly description: InputMaybe<StringQueryOperatorInput>;
   readonly headerImage: InputMaybe<StringQueryOperatorInput>;
   readonly id: InputMaybe<StringQueryOperatorInput>;
+  readonly ogpImage: InputMaybe<StringQueryOperatorInput>;
   readonly slug: InputMaybe<StringQueryOperatorInput>;
   readonly tags: InputMaybe<StringQueryOperatorInput>;
   readonly templateKey: InputMaybe<StringQueryOperatorInput>;
@@ -2779,7 +2784,7 @@ type StringQueryOperatorInput = {
   readonly regex: InputMaybe<Scalars['String']>;
 };
 
-type postFragment = { readonly fields: { readonly slug: string | null } | null, readonly frontmatter: { readonly id: string | null, readonly title: string | null, readonly slug: string | null, readonly date: string | null, readonly headerImage: string | null, readonly tags: ReadonlyArray<string | null> | null } | null };
+type postFragment = { readonly fields: { readonly slug: string | null } | null, readonly frontmatter: { readonly id: string | null, readonly title: string | null, readonly slug: string | null, readonly date: string | null, readonly headerImage: string | null, readonly ogpImage: string | null, readonly tags: ReadonlyArray<string | null> | null } | null };
 
 type cardDataFragment = { readonly fields: { readonly slug: string | null } | null, readonly frontmatter: { readonly title: string | null, readonly date: string | null, readonly url: string | null } | null };
 
@@ -2788,7 +2793,7 @@ type BlogPostQueryQueryVariables = Exact<{
 }>;
 
 
-type BlogPostQueryQuery = { readonly content: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly excerpt: string | null, readonly fields: { readonly slug: string | null } | null, readonly frontmatter: { readonly id: string | null, readonly title: string | null, readonly slug: string | null, readonly date: string | null, readonly headerImage: string | null, readonly tags: ReadonlyArray<string | null> | null } | null } }> } };
+type BlogPostQueryQuery = { readonly content: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly excerpt: string | null, readonly fields: { readonly slug: string | null } | null, readonly frontmatter: { readonly id: string | null, readonly title: string | null, readonly slug: string | null, readonly date: string | null, readonly headerImage: string | null, readonly ogpImage: string | null, readonly tags: ReadonlyArray<string | null> | null } | null } }> } };
 
 type PeriodQueryQueryVariables = Exact<{
   periodStartDate: InputMaybe<Scalars['Date']>;
diff --git a/src/components/SEO/index.tsx b/src/components/SEO/index.tsx
index 91514702d6..c415fc6e90 100644
--- a/src/components/SEO/index.tsx
+++ b/src/components/SEO/index.tsx
@@ -8,6 +8,7 @@ type Props = {
   siteTitleAlt: string;
   isPost: boolean;
   image: string;
+  ogpImage?: string;
   tag: string;
   description: string;
 };
@@ -94,13 +95,11 @@ const SEO = ({
   title = config.siteTitle,
   description,
   image,
+  ogpImage,
   siteTitleAlt,
   isPost,
   tag,
 }: Props) => {
-  const ogpImageLink = `https://blog.tubone-project24.xyz/ogp.png?title=${encodeURI(
-    title
-  )}`;
   return (
     <Helmet>
       <title>{title}</title>
@@ -142,7 +141,7 @@ const SEO = ({
       <meta name="twitter:creator" content="@meitante1conan" />
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={description} />
-      <meta name="twitter:image" content={ogpImageLink} />
+      <meta name="twitter:image" content={ogpImage || image} />
     </Helmet>
   );
 };
diff --git "a/src/content/2024-02-28-\345\246\273\343\201\256\343\201\237\343\202\201\343\201\253FRUITS-ZIPPER\343\201\256\346\203\205\345\240\261\346\233\264\346\226\260\343\202\222Slack\343\201\231\343\202\213\343\202\210\343\201\206\343\201\253\343\201\227\343\201\276\343\201\227\343\201\237.md" "b/src/content/2024-02-28-\345\246\273\343\201\256\343\201\237\343\202\201\343\201\253FRUITS-ZIPPER\343\201\256\346\203\205\345\240\261\346\233\264\346\226\260\343\202\222Slack\343\201\231\343\202\213\343\202\210\343\201\206\343\201\253\343\201\227\343\201\276\343\201\227\343\201\237.md"
index 0e212544ce..0726ac498e 100644
--- "a/src/content/2024-02-28-\345\246\273\343\201\256\343\201\237\343\202\201\343\201\253FRUITS-ZIPPER\343\201\256\346\203\205\345\240\261\346\233\264\346\226\260\343\202\222Slack\343\201\231\343\202\213\343\202\210\343\201\206\343\201\253\343\201\227\343\201\276\343\201\227\343\201\237.md"
+++ "b/src/content/2024-02-28-\345\246\273\343\201\256\343\201\237\343\202\201\343\201\253FRUITS-ZIPPER\343\201\256\346\203\205\345\240\261\346\233\264\346\226\260\343\202\222Slack\343\201\231\343\202\213\343\202\210\343\201\206\343\201\253\343\201\227\343\201\276\343\201\227\343\201\237.md"
@@ -9,6 +9,7 @@ tags:
   - Deno DOM
   - ptera
 headerImage: https://i.imgur.com/FO7l5lW.png
+ogpImage: https://i.imgur.com/R4WlvEE.png
 templateKey: blog-post
 ---
 
@@ -225,4 +226,3 @@ Viewを変更することでカレンダー表示にもできます。(使い
 妻からもよいフィードバックが!!!やったやったー!!!
 
 ![img](https://i.imgur.com/vzyD8Iu.png)
-
diff --git a/src/templates/blog-post.tsx b/src/templates/blog-post.tsx
index 992de4ef06..7943856a5d 100644
--- a/src/templates/blog-post.tsx
+++ b/src/templates/blog-post.tsx
@@ -85,6 +85,12 @@ class BlogPost extends Component<Props> {
           tag={frontmatter?.tags ? frontmatter.tags[0] || "" : ""}
           description={excerpt || ""}
           image={frontmatter?.headerImage || config.defaultImage || ""}
+          ogpImage={
+            frontmatter?.ogpImage ||
+            frontmatter?.headerImage ||
+            config.defaultImage ||
+            ""
+          }
         />
       </div>
     );
@@ -102,6 +108,7 @@ export const pageQuery = graphql`
       slug
       date
       headerImage
+      ogpImage
       tags
     }
   }