X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fcommon%2Fhtml-tags.tsx;h=80649fa119e85cfa8e0214065aeeaad2edf45a47;hb=53c3cfeade90150b07431386745a24aa699a25ec;hp=56cf3238ed0abf23407c449efd27bdda03655eae;hpb=059dfbd3a50c7e9462e963e0101866e79bc0c57b;p=lemmy-ui.git

diff --git a/src/shared/components/common/html-tags.tsx b/src/shared/components/common/html-tags.tsx
index 56cf323..80649fa 100644
--- a/src/shared/components/common/html-tags.tsx
+++ b/src/shared/components/common/html-tags.tsx
@@ -1,23 +1,31 @@
-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 key={t} property={t} content={this.props.title} />
         ))}
@@ -25,6 +33,8 @@ export class HtmlTags extends Component<HtmlTagsProps, any> {
           <meta key={u} property={u} content={url} />
         ))}
 
+        <link rel="canonical" href={canonicalUrl} />
+
         {/* Open Graph / Facebook */}
         <meta property="og:type" content="website" />
 
@@ -32,19 +42,19 @@ export class HtmlTags extends Component<HtmlTagsProps, any> {
         <meta property="twitter:card" content="summary_large_image" />
 
         {/* Optional desc and images */}
-        {this.props.description.isSome() &&
-          ["description", "og:description", "twitter:description"].map(n => (
-            <meta
-              key={n}
-              name={n}
-              content={md.renderInline(this.props.description.unwrap())}
-            />
-          ))}
-
-        {this.props.image.isSome() &&
-          ["og:image", "twitter:image"].map(p => (
-            <meta key={p} 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>
     );
   }
