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

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