Describe the bug Specifying a socialImage in a post on lumen does

SocialImage property doesn't work about gatsby-starter-lumen HOT 1 CLOSED

largetownsky commented on June 14, 2024

SocialImage property doesn't work

from gatsby-starter-lumen.

Comments (1)

largetownsky commented on June 14, 2024

Layout.tsx modified to support OGP is below. It's a rough build, so I hope you'll incorporate a proper patch based on this.

import React from "react";
import Helmet from "react-helmet";

import { graphql, StaticQuery } from "gatsby";

import { useSiteMetadata } from "@/hooks";

import * as styles from "./Layout.module.scss";

interface Props {
  title: string;
  description?: string;
  socialImage?: string;
  children: React.ReactNode;
}

interface Data {
  allImageSharp: {
    nodes: Array<{
      fluid: {
        srcWebp: string
      },
      parent: {
        relativePath: string
      }
    }>;
  };
}

const Layout: React.FC<Props> = ({
  children,
  title,
  description,
  socialImage = "",
}: Props) => (
  <StaticQuery
    query={graphql`
      query {
        allImageSharp(filter: {fluid: {}}) {
          nodes {
            fluid {
              srcWebp
            }
            parent {
              ... on File {
                relativePath
              }
            }
          }
        }
      }
    `}
    render={(data: Data) => {
      const { author, url } = useSiteMetadata();
      const metaImage = socialImage || author.photo;

      const imageNodes = data.allImageSharp.nodes;
      const image = imageNodes.find(({parent}) => parent.relativePath.includes(metaImage));
      if (!image) {
        return null;
      }
      const {fluid: {srcWebp}} = image;
      const metaImageUrl = url + srcWebp.substring(1);
  
      return (
        <div className={styles.layout}>
          <Helmet>
            <html lang="en" />
            <title>{title}</title>
            <meta name="description" content={description} />
            <meta property="og:site_name" content={title} />
            <meta property="og:image" content={metaImageUrl} />
            <meta name="twitter:card" content="summary" />
            <meta name="twitter:title" content={title} />
            <meta name="twitter:description" content={description} />
            <meta name="twitter:image" content={metaImageUrl} />
          </Helmet>
          {children}
        </div>);
    }}
  /> 
);

export default Layout;

from gatsby-starter-lumen.

Recommend Projects