Introduce Devanagri Typeset

assets/css/app.css

@@ -2,4 +2,12 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-/* This file is for your main application CSS */
+/* fonts declared from priv/assets/fonts */
+
+@font-face {
+ font-family: "Gotu";
+ src: url('/fonts/gotu/Gotu-Regular.woff2') format('woff2'),
+      url('/fonts/gotu/Gotu-Regular.woff') format('woff'),
+      url('/fonts/gotu/Gotu-Regular.ttf') format('ttf');
+}
+/* This file is for your main   application CSS */

assets/tailwind.config.js

@@ -13,12 +13,17 @@ module.exports = {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        'dn': ['"Gotu"', 'sans-serif'],
+        'tl': ['"Tamil Font"', 'sans-serif'],
+      },
       colors: {
         brand: "#FD4F00",
       }
     },
   },
   plugins: [
+    require("@tailwindcss/typography"),
     require("@tailwindcss/forms"),
     // Allows prefixing tailwind classes with LiveView classes to add rules
     // only when LiveView classes are applied, for example:

config/dev.exs

@@ -25,7 +25,7 @@ config :vyasa, VyasaWeb.Endpoint,
   debug_errors: true,
   secret_key_base: "TSFFKfQoGKCAjI5yxwt9DmxwnJg1U7CnuCsxpWjr+DqXs8EavSxtO3l3wk2PquSW",
   watchers: [
-    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
+    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch --loader:.ttf=file)]},
     tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
   ]
 

lib/vyasa_web/components/core_components.ex

@@ -530,15 +530,15 @@ defmodule VyasaWeb.CoreComponents do
       </.list>
   """
   slot :item, required: true do
-    attr :title, :string, required: true
+    attr :title, :string
   end
 
   def list(assigns) do
     ~H"""
     <div class="mt-14">
       <dl class="-my-4 divide-y divide-zinc-100">
         <div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
-          <dt class="w-1/4 flex-none text-zinc-500"><%= item.title %></dt>
+          <dt :if={Map.has_key?(item, :title)} class="w-1/6 flex-none text-zinc-500"><%= item.title %></dt>
           <dd class="text-zinc-700"><%= render_slot(item) %></dd>
         </div>
       </dl>

lib/vyasa_web/live/gita_live/show.ex

@@ -16,8 +16,9 @@ defmodule VyasaWeb.GitaLive.Show do
     </.header>
 
     <.list :for={{_dom_id, text} <- @streams.verses}>
-        <:item title={"#{text.chapter_number}.#{text.verse_number}"}><%= text.transliteration %></:item>
-        <:item title={""}><%= text.word_meanings %></:item>
+        <:item title={"#{text.chapter_number}.#{text.verse_number}"}><p class="font-dn text-2xl"><%= text.text |> String.split("।।") |> List.first()  %></p></:item>
+        <:item><%= text.transliteration %></:item>
+        <:item><%= text.word_meanings %></:item>
     </.list>
 
     <.back navigate={~p"/gita"}>Back to Gita</.back>

mix.exs

@@ -71,7 +71,7 @@ defmodule Vyasa.MixProject do
       test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
       "assets.setup": ["tailwind.install --if-missing", "esbuild.install --if-missing"],
       "assets.build": ["tailwind default", "esbuild default"],
-      "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
+      "assets.deploy": ["tailwind default --minify", "esbuild default --minify --loader:.ttf=file", "phx.digest"]
     ]
   end
 end