From dc600b74f2942d322722473326b50eb8463bcf91 Mon Sep 17 00:00:00 2001 From: oppiliappan Date: Mon, 20 Jul 2026 11:20:45 +0000 Subject: [PATCH] appview/pages: animate signup icon Signed-off-by: oppiliappan --- flake.lock | 16 +++++++++++++++- flake.nix | 21 ++++++++++++++++++++- tailwind.config.js | 2 +- nix/pkgs/appview-static-files.nix | 68 +++++++++++++++++++++++++++++++++++++++----------------------------- appview/pages/templates/user/fragments/signupSuccess.html | 2 +- 5 file(s) changed, 76 insertion(s)(+), 33 deletion(s)(-) diff --git a/flake.lock b/flake.lock --- a/flake.lock +++ b/flake.lock @@ -280,7 +280,8 @@ "mermaid-src": "mermaid-src", "microvm": "microvm", "nixpkgs": "nixpkgs", - "sqlite-lib-src": "sqlite-lib-src" + "sqlite-lib-src": "sqlite-lib-src", + "tailwindcss-animated-src": "tailwindcss-animated-src" } }, "rust-analyzer-src": { @@ -342,6 +343,19 @@ "owner": "nix-systems", "repo": "default", "type": "github" + } + }, + "tailwindcss-animated-src": { + "flake": false, + "locked": { + "lastModified": 499162500, + "narHash": "sha256-l3esIcsAwj0PHOhnHBLWiLzzRiOo1yOk9VYEGpn6fyQ=", + "type": "tarball", + "url": "https://registry.npmjs.org/tailwindcss-animated/-/tailwindcss-animated-1.1.2.tgz" + }, + "original": { + "type": "tarball", + "url": "https://registry.npmjs.org/tailwindcss-animated/-/tailwindcss-animated-1.1.2.tgz" } } }, diff --git a/flake.nix b/flake.nix --- a/flake.nix +++ b/flake.nix @@ -57,6 +57,10 @@ url = "https://cdn.jsdelivr.net/npm/mathjax@4.1.2/tex-svg.js"; flake = false; }; + tailwindcss-animated-src = { + url = "https://registry.npmjs.org/tailwindcss-animated/-/tailwindcss-animated-1.1.2.tgz"; + flake = false; + }; ibm-plex-mono-src = { url = "https://github.com/IBM/plex/releases/download/%40ibm%2Fplex-mono%401.1.0/ibm-plex-mono.zip"; flake = false; @@ -89,6 +93,7 @@ microvm, fetch-tangled, mathjax-src, + tailwindcss-animated-src, ... }: let supportedSystems = ["x86_64-linux" "x86_64-darwin" "aarch64-linux" "aarch64-darwin"]; @@ -150,7 +155,7 @@ lexgen = self.callPackage ./nix/pkgs/lexgen.nix {inherit indigo;}; goat = self.callPackage ./nix/pkgs/goat.nix {inherit indigo;}; appview-static-files = self.callPackage ./nix/pkgs/appview-static-files.nix { - inherit htmx-src htmx-ws-src lucide-src inter-fonts-src ibm-plex-mono-src actor-typeahead-src mermaid-src hls-src mathjax-src; + inherit htmx-src htmx-ws-src lucide-src inter-fonts-src ibm-plex-mono-src actor-typeahead-src mermaid-src hls-src mathjax-src tailwindcss-animated-src; }; appview = self.callPackage ./nix/pkgs/appview.nix {}; blog = self.callPackage ./nix/pkgs/blog.nix {}; @@ -319,6 +324,12 @@ devShells = forAllSystems (system: let pkgs = nixpkgsFor.${system}; packages' = self.packages.${system}; + tailwindcss-plugins = pkgs.linkFarm "tailwindcss-plugins" [ + { + name = "tailwindcss-animated"; + path = tailwindcss-animated-src; + } + ]; staticShell = args: (pkgs.mkShell.override { stdenv = pkgs.pkgsStatic.stdenv; @@ -375,6 +386,7 @@ ]; shellHook = '' export CC=${pkgs.stdenv.cc}/bin/cc + export NODE_PATH=${tailwindcss-plugins}''${NODE_PATH:+:$NODE_PATH} mkdir -p appview/pages/static # temporary self-heal for workspaces that copied static assets as read-only [ -d appview/pages/static/icons ] && [ ! -w appview/pages/static/icons ] && chmod -R u+rwX appview/pages/static @@ -394,6 +406,12 @@ apps = forAllSystems (system: let pkgs = nixpkgsFor."${system}"; packages' = self.packages.${system}; + tailwindcss-plugins = pkgs.linkFarm "tailwindcss-plugins" [ + { + name = "tailwindcss-animated"; + path = tailwindcss-animated-src; + } + ]; air-watcher = name: arg: pkgs.writeShellScriptBin "run" '' @@ -405,6 +423,7 @@ pkgs.writeShellScriptBin "run" '' export BROWSERSLIST_IGNORE_OLD_DATA=true + export NODE_PATH=${tailwindcss-plugins} ${pkgs.tailwindcss}/bin/tailwindcss --watch=always -i input.css -o ./appview/pages/static/tw.css ''; in { diff --git a/tailwind.config.js b/tailwind.config.js --- a/tailwind.config.js +++ b/tailwind.config.js @@ -89,5 +89,5 @@ }, }, }, - plugins: [require("@tailwindcss/typography")], + plugins: [require("@tailwindcss/typography"), require("tailwindcss-animated")], }; diff --git a/nix/pkgs/appview-static-files.nix b/nix/pkgs/appview-static-files.nix --- a/nix/pkgs/appview-static-files.nix +++ b/nix/pkgs/appview-static-files.nix @@ -10,35 +10,45 @@ hls-src, mathjax-src, tailwindcss, + tailwindcss-animated-src, dolly, src, -}: -runCommandLocal "appview-static-files" { - # TODO(winter): figure out why this is even required after - # changing the libraries that the tailwindcss binary loads - sandboxProfile = '' - (allow file-read* (subpath "/System/Library/OpenSSL")) - ''; -} '' - mkdir -p $out/{fonts,icons,logos} && cd $out - cp -f ${htmx-src} htmx.min.js - cp -f ${htmx-ws-src} htmx-ext-ws.min.js - cp -f ${mermaid-src} mermaid.min.js - cp -f ${hls-src} hls.min.js - cp -f ${mathjax-src} mathjax.min.js - cp -rf ${lucide-src}/*.svg icons/ - cp -rf ${src}/icons/*.svg icons/ - cp -f ${inter-fonts-src}/web/InterVariable*.woff2 fonts/ - cp -f ${inter-fonts-src}/web/InterDisplay*.woff2 fonts/ - cp -f ${inter-fonts-src}/InterVariable*.ttf fonts/ - cp -f ${ibm-plex-mono-src}/fonts/complete/woff2/IBMPlexMono*.woff2 fonts/ - cp -f ${actor-typeahead-src}/actor-typeahead.js . - cp -rf ${src}/appview/pages/profile-fx . + linkFarm, +}: let + tailwindcss-plugins = linkFarm "tailwindcss-plugins" [ + { + name = "tailwindcss-animated"; + path = tailwindcss-animated-src; + } + ]; +in + runCommandLocal "appview-static-files" { + # TODO(winter): figure out why this is even required after + # changing the libraries that the tailwindcss binary loads + sandboxProfile = '' + (allow file-read* (subpath "/System/Library/OpenSSL")) + ''; + } '' + mkdir -p $out/{fonts,icons,logos} && cd $out + cp -f ${htmx-src} htmx.min.js + cp -f ${htmx-ws-src} htmx-ext-ws.min.js + cp -f ${mermaid-src} mermaid.min.js + cp -f ${hls-src} hls.min.js + cp -f ${mathjax-src} mathjax.min.js + cp -rf ${lucide-src}/*.svg icons/ + cp -rf ${src}/icons/*.svg icons/ + cp -f ${inter-fonts-src}/web/InterVariable*.woff2 fonts/ + cp -f ${inter-fonts-src}/web/InterDisplay*.woff2 fonts/ + cp -f ${inter-fonts-src}/InterVariable*.ttf fonts/ + cp -f ${ibm-plex-mono-src}/fonts/complete/woff2/IBMPlexMono*.woff2 fonts/ + cp -f ${actor-typeahead-src}/actor-typeahead.js . + cp -rf ${src}/appview/pages/profile-fx . - ${dolly}/bin/dolly -output logos/dolly.png -size 180 - ${dolly}/bin/dolly -output logos/dolly.ico -size 48 - ${dolly}/bin/dolly -output logos/dolly.svg -color currentColor -favicon - # tailwindcss -c $src/tailwind.config.js -i $src/input.css -o tw.css won't work - # for whatever reason (produces broken css), so we are doing this instead - cd ${src} && ${tailwindcss}/bin/tailwindcss -i input.css -o $out/tw.css -'' + ${dolly}/bin/dolly -output logos/dolly.png -size 180 + ${dolly}/bin/dolly -output logos/dolly.ico -size 48 + ${dolly}/bin/dolly -output logos/dolly.svg -color currentColor -favicon + # tailwindcss -c $src/tailwind.config.js -i $src/input.css -o tw.css won't work + # for whatever reason (produces broken css), so we are doing this instead + export NODE_PATH=${tailwindcss-plugins} + cd ${src} && ${tailwindcss}/bin/tailwindcss -i input.css -o $out/tw.css + '' diff --git a/appview/pages/templates/user/fragments/signupSuccess.html b/appview/pages/templates/user/fragments/signupSuccess.html --- a/appview/pages/templates/user/fragments/signupSuccess.html +++ b/appview/pages/templates/user/fragments/signupSuccess.html @@ -4,7 +4,7 @@ hx-swap-oob="outerHTML" class="w-full max-w-md px-7 mt-4 flex flex-col items-center gap-4 text-center" > -
+
{{ i "check" "size-8" }}

Account created successfully

-- tangled.sh