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

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