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

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