dynamically updating mets tags

Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>

src/Pages/Posts/Category_/Post_.elm

@@ -133,7 +133,7 @@ view model =
                     , alt blog.meta.title
                     ]
                     []
-                , articleNode blog.content model.fragment
+                , articleNode blog.content model.fragment blog.meta.title blog.meta.description
                 , Html.div [ class "text-center text-neutral-300 border-t border-dashed border-teal-500 p-2" ]
                     [ Html.time [ datetime blog.meta.date ] [ Html.text <| "Published on " ++ UU.getFormattedDate blog.meta.date ++ " under  " ]
                     , Html.a [ href "https://www.mozilla.org/en-US/MPL/2.0/" ] [ Html.text "Mozilla Public License 2.0" ]
@@ -243,10 +243,14 @@ errorView error =
         ]
 
 
-articleNode : String -> String -> Html Msg
-articleNode data fragment =
+articleNode : String -> String -> String -> String -> Html Msg
+articleNode data fragment title description =
     Html.node "rendered-md"
-        [ Html.Attributes.attribute "markdowndata" data, Html.Attributes.attribute "fragment" fragment ]
+        [ Html.Attributes.attribute "markdowndata" data
+        , Html.Attributes.attribute "fragment" fragment
+        , Html.Attributes.attribute "title" title
+        , Html.Attributes.attribute "description" description
+        ]
         []
 
 
@@ -257,7 +261,7 @@ articleNode data fragment =
 type alias YamlMeta =
     { title : String
     , date : String
-    , description : Maybe String
+    , description : String
     , tags : List String
     , category : String
     , image : String
@@ -293,7 +297,7 @@ metaDecoder =
     Yaml.map7 YamlMeta
         (Yaml.field "title" Yaml.string)
         (Yaml.field "date" Yaml.string)
-        (Yaml.maybe (Yaml.field "description" Yaml.string))
+        (Yaml.field "description" Yaml.string)
         (Yaml.field "tags" (Yaml.list Yaml.string))
         (Yaml.field "category" Yaml.string)
         (Yaml.field "image" Yaml.string)

src/web-components/MarkedRender.js

@@ -8,10 +8,26 @@ customElements.define(
     connectedCallback() {
       this.runMarked();
     }
+
+    updateMeta(title, description) {
+      document.querySelector('meta[name="title"]').setAttribute("content", title + " | Avinal Kumar | Personal Website");
+      document.querySelector('meta[name="description"]').setAttribute("content", description);
+      document.querySelector('meta[property="og:title"]').setAttribute("content", title + " | Avinal Kumar | Personal Website");
+      document.querySelector('meta[property="og:description"]').setAttribute("content", description);
+      document.querySelector('meta[property="og:url"]').setAttribute("content", window.location);
+      document.querySelector('meta[property="twitter:title"]').setAttribute("content", title + " | Avinal Kumar | Personal Website");
+      document.querySelector('meta[property="twitter:description"]').setAttribute("content", description);
+      document.querySelector('meta[property="twitter:url"]').setAttribute("content", window.location);
+    }
+
     runMarked() {
       const renderer = new marked.Renderer();
       const data = this.getAttribute("markdowndata");
       const fragment = this.getAttribute("fragment");
+      const title = this.getAttribute("title");
+      const description = this.getAttribute("description");
+      this.updateMeta(title, description);
+
       var lead = 0;
       renderer.heading = (text, level) => {
         if (level === 1) {
@@ -74,13 +90,13 @@ customElements.define(
       this.innerHTML = marked.parse(data);
       console.log("Markdown rendering complete!");
       if (fragment) {
-        console.log("Fragment found, scrolling to: #", fragment);
+        console.log(`Fragment found, scrolling to: ${window.location}#${fragment}`);
         window.location = "#" + fragment;
       }
     }
 
     static get observedAttributes() {
-      return ["markdowndata", "fragment"];
+      return ["markdowndata", "fragment", "title", "description"];
     }
   }
 );

static/sitemap.xml

@@ -99,13 +99,40 @@
     <loc>https://avinal.space/posts/gsoc/meeting-9</loc>
     <lastmod>2023-01-30T22:02:32+05:30</lastmod>
   </url>
+  <url>
+    <loc>https://avinal.space/posts/blogs/hey-tekton-results</loc>
+    <lastmod>2023-03-28T14:13:21+05:30</lastmod>
+  </url>
   <url>
     <loc>https://avinal.space/meet</loc>
+    <lastmod>2023-03-28T14:13:21+05:30</lastmod>
+  </url>
+  <url>
+    <loc>https://avinal.space/posts</loc>
+    <lastmod>2023-03-28T14:13:21+05:30</lastmod>
+  </url>
+  <url>
+    <loc>https://avinal.space/posts/blogs</loc>
+    <lastmod>2023-03-28T14:13:21+05:30</lastmod>
+  </url>
+  <url>
+    <loc>https://avinal.space/posts/development</loc>
+    <lastmod>2023-03-28T14:13:21+05:30</lastmod>
+  </url>
+  <url>
+    <loc>https://avinal.space/posts/gsoc</loc>
+    <lastmod>2023-03-28T14:13:21+05:30</lastmod>
+  </url>
+  <url>
+    <loc>https://avinal.space/posts/articles</loc>
+    <lastmod>2023-03-28T14:13:21+05:30</lastmod>
   </url>
   <url>
     <loc>https://avinal.space/pages/about-me</loc>
+    <lastmod>2023-03-28T14:13:21+05:30</lastmod>
   </url>
   <url>
     <loc>https://avinal.space/pages/projects</loc>
+    <lastmod>2023-03-28T14:13:21+05:30</lastmod>
   </url>
 </urlset>