Use tailwind typography for notes

assets/css/app.css

@@ -9,6 +9,7 @@
 /* A Tailwind plugin that makes "hero-#{ICON}" classes available.
    The heroicons installation itself is managed by your mix.exs */
 @plugin "../vendor/heroicons";
+@plugin "@tailwindcss/typography";
 
 @custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
 @custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);

assets/package-lock.json

@@ -8,12 +8,30 @@
         "barcode-detector": "^3.0.0",
         "canvas-confetti": "^1.9.3",
         "live_toast": "file:../deps/live_toast"
+      },
+      "devDependencies": {
+        "@tailwindcss/typography": "^0.5.16"
       }
     },
     "../deps/live_toast": {
       "version": "0.1.0",
       "license": "MIT"
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
+      "integrity": "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==",
+      "dev": true,
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+      }
+    },
     "node_modules/@types/emscripten": {
       "version": "1.41.1",
       "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.41.1.tgz",
@@ -36,10 +54,60 @@
         "url": "https://www.paypal.me/kirilvatev"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/live_toast": {
       "resolved": "../deps/live_toast",
       "link": true
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.13.tgz",
+      "integrity": "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/type-fest": {
       "version": "4.41.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
@@ -51,6 +119,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true
+    },
     "node_modules/zxing-wasm": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/zxing-wasm/-/zxing-wasm-2.2.0.tgz",

assets/package.json

@@ -3,5 +3,8 @@
     "barcode-detector": "^3.0.0",
     "canvas-confetti": "^1.9.3",
     "live_toast": "file:../deps/live_toast"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.16"
   }
 }

lib/music_library_web/components/notes_component.ex

@@ -50,9 +50,9 @@ defmodule MusicLibraryWeb.NotesComponent do
             </:tab>
           </.tabs_list>
           <.tabs_panel active={@mode == "read"} name="read">
-            <div class="w-full mt-5 text-sm/8">
+            <article class="w-full mt-5 prose dark:prose-invert prose-zinc prose-sm prose-h1:text-sm">
               {render_notes(@form[:content].value)}
-            </div>
+            </article>
           </.tabs_panel>
           <.tabs_panel active={@mode == "edit"} name="edit">
             <.simple_form
@@ -144,16 +144,8 @@ defmodule MusicLibraryWeb.NotesComponent do
   end
 
   defp render_notes(notes) do
-    add_a_classes =
-      &Earmark.AstTools.merge_atts_in_node(&1,
-        class:
-          "underline text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
-      )
-
-    tsp = Earmark.TagSpecificProcessors.new([{"a", add_a_classes}])
-
     (notes || "")
-    |> Earmark.as_html!(%Earmark.Options{gfm: true, registered_processors: [tsp]})
+    |> Earmark.as_html!(%Earmark.Options{gfm: true})
     |> raw()
   end
 end