-import { Option } from "@sniptt/monads";
+import { httpExternalPath } from "@utils/env";
+import { htmlToText } from "html-to-text";
import { Component } from "inferno";
import { Helmet } from "inferno-helmet";
-import { httpExternalPath } from "../../env";
-import { md } from "../../utils";
+import { md } from "../../markdown";
+import { I18NextService } from "../../services";
interface HtmlTagsProps {
title: string;
path: string;
- description: Option<string>;
- image: Option<string>;
+ canonicalPath?: string;
+ description?: string;
+ image?: string;
}
/// Taken from https://metatags.io/
export class HtmlTags extends Component<HtmlTagsProps, any> {
render() {
- let url = httpExternalPath(this.props.path);
+ const url = httpExternalPath(this.props.path);
+ const canonicalUrl =
+ this.props.canonicalPath ?? httpExternalPath(this.props.path);
+ const desc = this.props.description;
+ const image = this.props.image;
return (
<Helmet title={this.props.title}>
+ <html lang={I18NextService.i18n.resolvedLanguage} />
+
{["title", "og:title", "twitter:title"].map(t => (
- <meta property={t} content={this.props.title} />
+ <meta key={t} property={t} content={this.props.title} />
))}
{["og:url", "twitter:url"].map(u => (
- <meta property={u} content={url} />
+ <meta key={u} property={u} content={url} />
))}
+ <link rel="canonical" href={canonicalUrl} />
+
{/* Open Graph / Facebook */}
<meta property="og:type" content="website" />
<meta property="twitter:card" content="summary_large_image" />
{/* Optional desc and images */}
- {this.props.description.isSome() &&
- ["description", "og:description", "twitter:description"].map(n => (
- <meta
- name={n}
- content={md.renderInline(this.props.description.unwrap())}
- />
- ))}
-
- {this.props.image.isSome() &&
- ["og:image", "twitter:image"].map(p => (
- <meta property={p} content={this.props.image.unwrap()} />
- ))}
+ {["description", "og:description", "twitter:description"].map(
+ n =>
+ desc && (
+ <meta
+ key={n}
+ name={n}
+ content={htmlToText(md.renderInline(desc))}
+ />
+ )
+ )}
+ {["og:image", "twitter:image"].map(
+ p => image && <meta key={p} property={p} content={image} />
+ )}
</Helmet>
);
}