next-seo#NextSeoProps TypeScript Examples

Head = (props: HeadProps) => {
  const router = useRouter()
  const isDark = useMedia('(prefers-color-scheme: dark)')

  const nextSeoProps: NextSeoProps = useMemo(() => {
    return {
      ...props.rawNextSeoProps,
      title: props.title ?? defaultMeta.title,
      description: props.description ?? defaultMeta.description,
      canonical: `${siteOrigin}${router.pathname}`,
      openGraph: {
        images: [{ url: props.ogImage ?? defaultMeta.ogImage }]
      },
      twitter: {
        handle: '@basementstudio',
        site: '@basementstudio',
        cardType: 'summary_large_image'
      },
      noindex: props.noIndex
    }
  }, [props, router.pathname])

  return (
    <>
      <NextSeo {...nextSeoProps} />
      <NextHead>
        <meta charSet="utf-8" />
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=0"
        />
        <meta name="theme-color" content="#ffffff" />
        <link rel="icon" href={isDark ? '/favicon-dark.svg' : '/favicon.svg'} />
        <link rel="mask-icon" href="/favicon.svg" color="#000" />
      </NextHead>
    </>
  )
}

defaultSEO: NextSeoProps = {
  title: "Docs - Livepeer.com",
  description: "Explore guides, tutorials and sample code.",
  openGraph: {
    title: "Docs - Livepeer.com",
    description: "Explore guides, tutorials and sample code.",
    url: "https://livepeer.com/docs/guides",
    images: [
      {
        url: "https://livepeer.com/img/OG.png",
        alt: "Livepeer.com",
        width: 1200,
        height: 642,
      },
    ],
  },
}

seo: NextSeoProps = {
  title: 'My feed',
  titleTemplate: '%s',
  openGraph: { ...defaultOpenGraph },
  ...defaultSeo,
}

export default function DendronSEO({
  note,
  config,
}: {
  note: NoteProps;
  config: IntermediateDendronConfig;
}) {
  const dendronRouter = useDendronRouter();
  const path = dendronRouter.router.asPath;

  // don't generate for following pages
  if (
    _.some(["403"], (ent) => {
      return path === `/notes/${ent}/`;
    })
  ) {
    return null;
  }

  const siteSeoProps = PublishUtils.getSEOPropsFromConfig(config);
  const noteSeoProps = PublishUtils.getSEOPropsFromNote(note);
  const cleanSeoProps: SEOProps = _.defaults(noteSeoProps, siteSeoProps);

  const title = cleanSeoProps.title;
  const description = cleanSeoProps.excerpt;
  const images = cleanSeoProps?.image ? [cleanSeoProps.image] : [];
  const publishingConfig = ConfigUtils.getPublishingConfig(config);
  const canonical = getCanonicalUrl({
    sitePath: path,
    seoProps: cleanSeoProps,
    siteConfig: publishingConfig,
  });
  const maybeTwitter: NextSeoProps["twitter"] = cleanSeoProps.twitter
    ? {
        handle: cleanSeoProps.twitter,
        site: cleanSeoProps.twitter,
        cardType: "summary_large_image",
      }
    : undefined;
  const getTags = (note: NoteProps): string[] => {
    if (note.tags) {
      if (Array.isArray(note.tags)) {
        return note.tags;
      } else {
        return [note.tags];
      }
    } else {
      return [];
    }
  };
  return (
    <NextSeo
      title={title}
      description={description}
      canonical={canonical}
      noindex={cleanSeoProps.noindex}
      twitter={maybeTwitter}
      openGraph={{
        title,
        description,
        url: canonical,
        images,
        type: `article`,
        article: {
          publishedTime: unix2SEOTime(cleanSeoProps.created),
          modifiedTime: unix2SEOTime(cleanSeoProps.updated),
          tags: getTags(note),
        },
      }}
    />
  );
}

DocsIndex = ({ doc, menu }) => {
  const [hideTableOfContents, setHideTableOfContents] = useState(false);
  const router = useRouter();

  const currentMenu = useMemo(() => {
    return menu.filter(
      (a) =>
        `/${a.slug}` ===
        router.asPath.split("#")[0].split("/").slice(0, 3).join("/")
    );
  }, [menu, router.asPath]);

  const content = useHydrate(doc, { components });

  const breadCrumb = useMemo(() => {
    return router.asPath.split("#")[0].split("/");
  }, [router.asPath]);

  globalStyles();

  const resolvedSEO: NextSeoProps = useMemo(() => {
    const title = doc.frontMatter.metaTitle || defaultSEO.title;
    const description =
      doc.frontMatter.metaDescription || defaultSEO.description;
    const url = `https://livepeer.com${router.asPath}`;
    return {
      ...defaultSEO,
      title,
      description,
      canonical: url,
      openGraph: {
        ...defaultSEO.openGraph,
        title,
        description,
        url,
      },
    };
  }, [router.asPath, doc.frontMatter]);

  return (
    <>
      <NextSeo {...resolvedSEO} />
      <Box
        css={{
          display: "flex",
          flexDirection: "column",
          gridTemplateColumns: "min-content 1fr",
          gridTemplateRows: "auto auto",
          "@bp2": {
            display: "grid",
          },
        }}>
        <DocsNav menu={currentMenu} categories={categories} />
        <TableOfContents
          menu={currentMenu}
          hideTableOfContents={hideTableOfContents}
          setHideTableOfContents={setHideTableOfContents}
        />
        <Container size="3">
          <Grid
            css={{
              pt: "$7",
              justifyItems: "flex-start",
              mx: 0,
              transition: "all 0.2s",
              minWidth: "100%",
              justifyContent: "center",
              alignItems: "flex-start",
              "@bp2": {
                justifyItems: "center",
              },
            }}>
            <Box
              css={{
                width: "100%",
                maxWidth: 768,
                paddingBottom: 80,
                overflow: "auto",
                "@bp2": {
                  px: "$5",
                },
              }}>
              <Box
                css={{
                  display: "flex",
                  alignItems: "center",
                  color: "$hiContrast",
                  fontSize: "$2",
                  letterSpacing: "-0.02em",
                  mb: "$3",
                }}
                className="breadcrumb">
                {breadCrumb.slice(2, 5).map((a, idx) => (
                  <Fragment key={idx}>
                    {title(a.split("-").join(" "))}
                    {idx < breadCrumb.length - 3 && <> / </>}
                  </Fragment>
                ))}
              </Box>
              <Box as="main" className="algolia-document">
                {content}
              </Box>
            </Box>
          </Grid>
        </Container>
      </Box>
    </>
  );
}