Diff UI update (#152)

* wip

* small ui fixes

* esbuild, fixing tests, fixing diff contrast

* addressing feedbacks

* adding esbuild with mix

* fix contrast

* icon fix

* hosting fonts for privacy

* Address review feedback

- Restore Plausible plausible.init({endpoint}) inline script
- Fix Tailwind v4 placeholder utility (placeholder:text-grey-300)
- Use grey-200 instead of slate-200 in footer social link
- Render copyright year dynamically
- Live-reload also watches lib/diff_web/components/

* Restore whitespace toggle in redesigned diff header

The branch was rebased over #160 ("Support ignoring whitespace in
diffs") which added the diff_options/ignore_whitespace? helpers and
the whitespace_toggle_label/whitespace_toggle_url view helpers. Wire
the toggle into the new Tailwind stats header so ?w=1 retains the
visible UI it had on the legacy template.

The pluralize/3 helper turns the singular case (1 file) into "file",
so test assertions for "files changed" can't match for total=1.
Loosen the matcher to "changed" and switch the lingering :timer.sleep
spot to assert_eventually.

* Copy lib before assets.deploy so Tailwind sees templates

Tailwind v4 in assets/css/app.css declares @source "../../lib" to scan
HEEx templates for class usage. The previous order ran mix assets.deploy
before COPY lib lib, so Tailwind produced a stylesheet missing nearly
all template classes — visible as broken styling on diff.staging.hex.pm.
preview/Dockerfile already copies lib first; mirror that here.

* Bold only "hex" in the wordmark

The header and footer wordmarks rendered the full "hexdiff" string in
bold. Move font-bold to just the "hex" prefix so the brand half pops
and the product name renders in normal weight.

* Highlight diff hunks with Makeup

Wire in the same Makeup stack used by hexpm (makeup 1.2, makeup_elixir,
makeup_erlang, makeup_gleam, makeup_syntect) and run each diff line
through Makeup.highlight_inner_html/2. The lexer is picked once per
file via Makeup.Registry.fetch_lexer_by_extension/1, with the special
cases for rebar.config / *.app.src that match hexpm/preview.

Bundle hexpm's GitHub Dark makeup.css verbatim and neutralize its
wrapper rules on .ghd-text-user.highlight so only the token color
classes apply — diff line layout and add/remove backgrounds are kept.

* Add GitHub Light variant to Makeup theme

The bundled theme was hexpm's GitHub Dark colors (designed for hexpm's
forced dark .highlight background). On diff pages the .highlight
wrapper is transparent so add/remove line backgrounds show through,
which left light-mode users staring at #a5d6ff strings on white. Add
GitHub Light token colors as the default and gate the dark palette
behind [data-theme=dark].

---------

Co-authored-by: Paulo Valim <valim@paulos-mbp.lan>
Co-authored-by: Eric Meadows-Jönsson <eric.meadows.jonsson@gmail.com>

Author: 3 people

.gitignore

@@ -28,11 +28,15 @@ npm-debug.log
 # The directory NPM downloads your dependencies sources to.
 /assets/node_modules/
 
-# Since we are building assets from assets/,
-# we ignore priv/static. You may want to comment
-# this depending on your deployment strategy.
-/priv/static/
+# esbuild/tailwind bundles and phx.digest artifacts are generated at build time.
+# Keep only source static files (favicon, robots.txt, images/) under priv/static.
+/priv/static/assets/
+/priv/static/cache_manifest.json
+/priv/static/**/*.gz
+/priv/static/**/*-????????????????????????????????.*
 
 /.elixir_ls/
 /.vscode/
 /tmp/
+.claude/settings.local.json
+.tool-versions

Dockerfile

@@ -9,14 +9,8 @@ ENV LANG=C.UTF-8
 # install build dependencies
 RUN apt update && \
     apt upgrade -y && \
-    apt install -y --no-install-recommends git build-essential curl ca-certificates gnupg && \
-    mkdir -p /etc/apt/keyrings && \
-    curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg && \
-    echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_22.x nodistro main" > /etc/apt/sources.list.d/nodesource.list && \
-    apt update && \
-    apt install -y --no-install-recommends nodejs && \
-    apt clean -y && rm -rf /var/lib/apt/lists/* && \
-    npm install -g yarn
+    apt install -y --no-install-recommends git build-essential ca-certificates && \
+    apt clean -y && rm -rf /var/lib/apt/lists/*
 
 # prepare build dir
 RUN mkdir /app
@@ -36,13 +30,14 @@ RUN mix deps.get
 RUN mix deps.compile
 
 # build assets
+COPY priv priv
 COPY assets assets
-RUN cd assets && yarn install && yarn run webpack --mode production
-RUN mix phx.digest
+COPY lib lib
+RUN mix esbuild.install --if-missing
+RUN mix tailwind.install --if-missing
+RUN mix assets.deploy
 
 # build project
-COPY priv priv
-COPY lib lib
 RUN mix compile
 
 # build release