next-seo#NextSeoProps TypeScript Examples

The following examples show how to use next-seo#NextSeoProps. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: head.tsx    From basement-grotesque with SIL Open Font License 1.1 6 votes vote down vote up 
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>
    </>
  )
}
Example #2
Source File: [[...slug]].tsx    From livepeer-com with MIT License 6 votes vote down vote up 
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,
      },
    ],
  },
}
Example #3
Source File: my-feed.tsx    From apps with GNU Affero General Public License v3.0 5 votes vote down vote up 
seo: NextSeoProps = {
  title: 'My feed',
  titleTemplate: '%s',
  openGraph: { ...defaultOpenGraph },
  ...defaultSeo,
}
Example #4
Source File: DendronSEO.tsx    From dendron with GNU Affero General Public License v3.0 5 votes vote down vote up 
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),
        },
      }}
    />
  );
}
Example #5
Source File: [[...slug]].tsx    From livepeer-com with MIT License 4 votes vote down vote up 
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>
    </>
  );
}