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

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