src/shared/components/common/html-tags.tsx

   1 import { Option } from "@sniptt/monads";
   2 import { Component } from "inferno";
   3 import { Helmet } from "inferno-helmet";
   4 import { httpExternalPath } from "../../env";
   5 import { md } from "../../utils";
   6
   7 interface HtmlTagsProps {
   8   title: string;
   9   path: string;
  10   description: Option<string>;
  11   image: Option<string>;
  12 }
  13
  14 /// Taken from https://metatags.io/
  15 export class HtmlTags extends Component<HtmlTagsProps, any> {
  16   render() {
  17     let url = httpExternalPath(this.props.path);
  18
  19     return (
  20       <Helmet title={this.props.title}>
  21         {["title", "og:title", "twitter:title"].map(t => (
  22           <meta key={t} property={t} content={this.props.title} />
  23         ))}
  24         {["og:url", "twitter:url"].map(u => (
  25           <meta key={u} property={u} content={url} />
  26         ))}
  27
  28         {/* Open Graph / Facebook */}
  29         <meta property="og:type" content="website" />
  30
  31         {/* Twitter */}
  32         <meta property="twitter:card" content="summary_large_image" />
  33
  34         {/* Optional desc and images */}
  35         {this.props.description.isSome() &&
  36           ["description", "og:description", "twitter:description"].map(n => (
  37             <meta
  38               key={n}
  39               name={n}
  40               content={md.renderInline(this.props.description.unwrap())}
  41             />
  42           ))}
  43
  44         {this.props.image.isSome() &&
  45           ["og:image", "twitter:image"].map(p => (
  46             <meta key={p} property={p} content={this.props.image.unwrap()} />
  47           ))}
  48       </Helmet>
  49     );
  50   }
  51 }