saasquatch-docs/src/components/Meta.tsx at 1ef18efd7a513b54e190b7553f8a696806e36b66 · saasquatch/saasquatch-docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import React from "react";
import marked from "marked";
// import ogImage from "../assets/images/opengraph-center-crop-helpcenter.png";
const ogImage =  require("../assets/images/opengraph-center-crop-helpcenter.png");
import { Entry } from "./TocFrame";
import { Head } from "react-static";

/**
 * Sets the Global HTML / HEAD / body properties.
 *
 * Use `Head` from react-static, which is actually just `react-helmet`
 */
export default function render(
  props: Entry
) {
  function striptags(s: string) {
    return s.replace(/(<([^>]+)>)/gi, '');
  }

  function markdown(s: string) {
    if (!s) return "";
    return marked(s);
  }

  let title:string;
  if(props.title){
    title = props.title + " | SaaSquatch " + (props.categoryName || "Docs");
  }else{
    title = "SaaSquatch Docs";
  }

  let ogImageURL:string;
  if(props?.fields?.ogFeaturedImage != null && Object.keys(props?.fields?.ogFeaturedImage).length > 0){
    ogImageURL = props?.fields?.ogFeaturedImage[0]?.fields?.file?.url;
  }


  const plainHighlights = striptags(markdown(props.highlights));
  return (
    <Head>
      <title>{title}</title>
      <body
        className={
          "docs sectionType-" + props.sectionType + " " + props.category
        }
      />
      {/* SEO content */}
      <meta name="description" content={props.fields?.seoDescription || props?.highlights}/>

      <meta property="og:image" content={ogImageURL || ogImage} />
      <meta name="twitter:image" content={ogImageURL || ogImage} />

      <meta name="robots" content={props.fields?.robotsTag || props?.robots} />
      <link rel="canonical" href={props.fields?.canonicalUrl}/>


      <meta property="og:title" content={title} />

      <meta property="og:description" content={plainHighlights} />
      <meta
        name="docsSectionType"
        data-type="string"
        content={props.sectionType}
      />
      <meta name="docsCategory" data-type="string" content={props.category} />
    </Head>
  );
}