Support the addition of meta tags in the html head

This gets validated by just observing the html source code. The next step would be to add in the image generation. For a first pass, the image generation shall be done just-in-time, will add in some cacheing thereafter as a v1.
ve1ld · Dec 20, 2023 · ee769e9 · ee769e9
1 parent f5b2b05
commit ee769e9
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 2 deletions.
diff --git a/assets/js/hooks/share_quote.js b/assets/js/hooks/share_quote.js
@@ -7,6 +7,7 @@ import { getSharer } from "./web_share.js";
 ShareQuoteButton = {
   mounted() {
     let callback = () => console.log("share quote!");
+
     if ("share" in navigator) { // uses webshare api:
       callback = () => {
         const shareTitle = this.el.getAttribute("data-share-title");
@@ -19,7 +20,7 @@ ShareQuoteButton = {
         window.shareUrl = sharer;
         window.shareUrl(shareUrl);
       };
-    } else if ("clipboard" in navigator) {
+    } else if ("clipboard" in navigator) { // copies to clipboard:
       callback = () => {
         const verse = JSON.parse(this.el.getAttribute("data-verse"));
         navigator.clipboard.writeText(verse.text);

diff --git a/lib/vyasa_web/components/layouts.ex b/lib/vyasa_web/components/layouts.ex
@@ -2,4 +2,35 @@ defmodule VyasaWeb.Layouts do
   use VyasaWeb, :html
 
   embed_templates "layouts/*"
+
+  attr(:contents, :map, required: true)
+
+  @doc """
+  Function component into which meta tags can be inserted.
+  """
+  def meta_tags(assigns) do
+    ~H"""
+    <meta :for={{name, value} <- parse_contents(@contents)} property={name} content={value} />
+    """
+  end
+
+  defp parse_contents(contents) when is_map(contents) do
+    IO.puts("Contents map for meta contents:")
+    IO.inspect(contents)
+
+
+    contents
+    |> Enum.map(&define_name/1)
+    |> List.flatten()
+    |> Enum.into(%{})
+  end
+
+  defp parse_contents(_contents), do: %{}
+
+  defp define_name({k, v}) when is_map(v) do
+    Enum.map(v, &define_name(&1, k))
+  end
+
+  defp define_name(data), do: define_name(data, "og")
+  defp define_name({k, v}, prefix), do: {"#{prefix}:#{k}", v}
 end
diff --git a/lib/vyasa_web/components/layouts/root.html.heex b/lib/vyasa_web/components/layouts/root.html.heex
@@ -10,6 +10,7 @@
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
+    <.meta_tags contents={assigns[:meta]} />
   </head>
   <body class="bg-white antialiased">
     <%= @inner_content %>

diff --git a/lib/vyasa_web/live/gita_live/show_verse.ex b/lib/vyasa_web/live/gita_live/show_verse.ex
@@ -13,7 +13,23 @@ defmodule VyasaWeb.GitaLive.ShowVerse do
      socket
      |> assign(:chapter, Gita.chapters(chapter_no))
      |> stream(:verses, Gita.verses(chapter_no))
-     |> assign(:verse, Gita.verse(chapter_no, verse_no))}
+     |> assign(:verse, Gita.verse(chapter_no, verse_no))
+     |> assign_meta()
+
+    }
+  end
+
+
+  defp assign_meta(socket) do
+    IO.inspect(socket.assigns.verse)
+    %{:chapter_id => chapter, :verse_number => verse, :text => text} = socket.assigns.verse
+
+    assign(socket, :meta, %{
+      title: "Chapter #{chapter} | Verse #{verse}",
+      description: text,
+      type: "website",
+      url: url(socket, ~p"/gita/#{chapter}/#{verse}"),
+    })
   end
 
 end