Monorepo for Tangled tangled.org

Add Firefox for Android PWA support #634 #635

open opened by vielle.dev targeting master

the images could be generated from the dolly svg but that would probably require bringing in a large dependency like inkscape and wouldn't bring huge benifits imo (&& just sticking it in tree was mentioned as best in the discord)

Labels
enhancement
assignee

None yet.

Participants 3
AT URI
at://did:plc:4zht3z4caxwrw3dlsybodywc/sh.tangled.repo.pull/3m2cepmmyic22
+16 -15
Interdiff #6 โ†’ #7
appview/pages/templates/fragments/dolly/logo.svg

This file has not been changed.

+8 -9
appview/state/state.go
··· 220 220 "icons": [ 221 221 { 222 222 "src": "/favicon.svg", 223 - "type": "image/xml+svg", 223 + "type": "image/xml+svg", 224 224 "sizes": "any", 225 - "purpose": "any" 225 + "purpose": "any" 226 226 }, 227 227 { 228 228 "src": "/static/pwa-512.png", 229 - "type": "image/png", 229 + "type": "image/png", 230 230 "sizes": "512x512" 231 231 }, 232 232 { 233 233 "src": "/static/pwa-192.png", 234 - "type": "image/png", 234 + "type": "image/png", 235 235 "sizes": "192x192" 236 236 }, 237 237 { 238 238 "src": "/static/pwa-144.png", 239 - "type": "image/png", 239 + "type": "image/png", 240 240 "sizes": "144x144" 241 241 }, 242 242 { 243 243 "src": "/static/pwa-96.png", 244 - "type": "image/png", 244 + "type": "image/png", 245 245 "sizes": "96x96" 246 246 }, 247 247 { 248 248 "src": "/static/pwa-72.png", 249 - "type": "image/png", 249 + "type": "image/png", 250 250 "sizes": "72x72" 251 251 }, 252 252 { 253 253 "src": "/static/pwa-48.png", 254 - "type": "image/png", 254 + "type": "image/png", 255 255 "sizes": "48x48" 256 256 } 257 257 ], 258 258 "start_url": "/", 259 259 "id": "org.tangled", 260 - 261 260 "display": "standalone", 262 261 "background_color": "#111827", 263 262 "theme_color": "#111827"
+8 -6
nix/pkgs/appview-static-files.nix
··· 17 17 (allow file-read* (subpath "/System/Library/OpenSSL")) 18 18 ''; 19 19 } '' 20 + #!/bin/bash 20 21 mkdir -p $out/{fonts,icons} && cd $out 21 22 cp -f ${htmx-src} htmx.min.js 22 23 cp -f ${htmx-ws-src} htmx-ext-ws.min.js ··· 25 26 cp -f ${inter-fonts-src}/web/InterDisplay*.woff2 fonts/ 26 27 cp -f ${inter-fonts-src}/InterVariable*.ttf fonts/ 27 28 cp -f ${ibm-plex-mono-src}/fonts/complete/woff2/IBMPlexMono*.woff2 fonts/ 28 - ${imagemagick}/bin/magick -density 3000 -background none ${src}/appview/pages/templates/fragments/dolly/logo.svg -resize 48x48 $out/pwa-48.png 29 - ${imagemagick}/bin/magick -density 3000 -background none ${src}/appview/pages/templates/fragments/dolly/logo.svg -resize 72x72 $out/pwa-72.png 30 - ${imagemagick}/bin/magick -density 3000 -background none ${src}/appview/pages/templates/fragments/dolly/logo.svg -resize 96x96 $out/pwa-96.png 31 - ${imagemagick}/bin/magick -density 3000 -background none ${src}/appview/pages/templates/fragments/dolly/logo.svg -resize 144x144 $out/pwa-144.png 32 - ${imagemagick}/bin/magick -density 3000 -background none ${src}/appview/pages/templates/fragments/dolly/logo.svg -resize 162x162 $out/pwa-162.png 33 - ${imagemagick}/bin/magick -density 3000 -background none ${src}/appview/pages/templates/fragments/dolly/logo.svg -resize 512x512 $out/pwa-512.png 29 + sizes=(48 72 96 144 162 512) 30 + for size in "''${sizes[@]}"; do 31 + ${imagemagick}/bin/magick -density 3000 -background none \ 32 + ${src}/appview/pages/templates/fragments/dolly/logo.svg \ 33 + -resize ''${size}x''${size} \ 34 + $out/pwa-''${size}.png 35 + done 34 36 # tailwindcss -c $src/tailwind.config.js -i $src/input.css -o tw.css won't work 35 37 # for whatever reason (produces broken css), so we are doing this instead 36 38 cd ${src} && ${tailwindcss}/bin/tailwindcss -i input.css -o $out/tw.css

History

11 rounds 20 comments
sign up or login to add to the discussion
1 commit
expand
25c9ef36
appview/state, nix/pkgs, /: generate png icons and add to pwa manifest
merge conflicts detected
expand
  • appview/state/router.go:35
  • appview/state/state.go:221
  • nix/pkgs/appview-static-files.nix:17
expand 5 comments

idk where silhouette.svg came from bc i cant find it in the git history but ๐Ÿคท

the Etag stuff is a little scuffed but it works afaict

the transparent mode and purpose any nonsense is just for the desktop icon since otherwise it would have an ugly box around it which was ugly

id prolly wanna go back and see if i can tidy things up a little and figure out if theres somewhere that works better for this but for now i just wanna make sure this is ~ what you were thinking of

if youre happy with where it is etc im happy to merge rn tho!

(svg icon was removed as it was causing issues with chrome and shouldnt be required for pwa anyway; will test on firefox/chrome on android later lol)

Sorry for the interrupt. I think generating logo as static file is better here (one from round #8.) While we can do that with proper cache headers, that doesn't mean we should do that if static generation work, I'd prefer that more.

Also, as mentioned from #922, we need actual ico favicon which is easier to pre-generate as static file.

sizes=(48 72 96 144 162 180 512)
for size in "${sizes[@]}"; do
  rsvg-convert \
    -w ${size} -h ${size} \
    -o icon-${size}.png \
    logo.svg

# apple touch icon in 180x180
mv icon-180.png apple-touch-icon.png

icotool -c -o favicon.ico \
  icon-48.png \
  icon-32.png \
  icon-16.png

I can include your work in #922 and coauthor you if you don't mind.

i have read the ico file format spec and it seems trivial to generate via code: 3169e770. helps us avoid the dependency on icotool.

@oppi.li Can we use it for our own ico builder or are you still thinking of on demand generation?

1 commit
expand
69b5addc
appview/state, nix/pkgs, /: generate png icons and add to pwa manifest
expand 0 comments
1 commit
expand
68af6096
appview/state, nix/pkgs, /: generate png icons and add to pwa manifest
expand 5 comments

replaced imagemagick with librsvg and it seems to be working fine now

i really dont know why imagemagick wasnt building but as long as tangled builds lol

thanks for taking a look! i will try this out locally.

couple of thoughts now that i am coming back to this:

  • we have since introduced OG card drawing libraries (oksvg namely), which is capable of rendering PNGs, we could use that library to use the single-source of truth dolly logo to draw the PWA icons
  • i think the PWA icon should not be the silhouette, but the full logo IMO. i don't know if there is a degree of customization here (we could serve the silhouette at smaller sizes perhaps)

happy to take over and implement that if you wish to discontinue this, and apologies for the slow review cycle on this!

  • wrt oksvg, since afaict its just a go lib without a cli mode would you propose having some go script to generate the svg icons (or something like build.rs if that exists) (or generate them on demand which seems bad lol)
  • full logo makes sense , just went off what i had for the original PR which was just using the favicon for simplicity. should be fairly trivial to have the icon be the silhouette at smaller sizes but looking at how big the icons would be i dont imagine its a huge issue wrt readability if theyre all the full logo

also no worries about slow review cycle lol, happy to keep chipping away at this one !!

wrt oksvg, since afaict its just a go lib without a cli mode would you propose having some go script to generate the svg icons (or something like build.rs if that exists) (or generate them on demand which seems bad lol)

yes to generate on demand! with the right cache headers this would be negligible overhead on our end (we already do generate a lot of images for OG cards, and these are less cache-friendly mind you!)

1 commit
expand
057a2b1c
appview/state, nix/pkgs, /: generate png icons and add to pwa manifest
expand 1 comment

struggling to get the pkgsStatic variant of appview building, imagemagick is unhappy with the env. its a nixpkgs thing and not an issue with this PR however.

1 commit
expand
2e9f61c9
appview/state, nix/pkgs, /: generate png icons and add to pwa manifest
expand 2 comments

sorry for the resubmit spam (if you get notifications for it) i was having some issues w fixing the merge conflict but i managed to get it sorted !!

looking pretty good!

  • can you format the manifest.json with jq?
  • we can simplify the nix script to use a loop in bash
#!/bin/bash

sizes=(48 72 96 144 162 512)

for size in "${sizes[@]}"; do
  ${imagemagick}/bin/magick -density 3000 -background none \
    ${src}/appview/pages/templates/fragments/dolly/logo.svg \
    -resize ${size}x${size} \
    $out/pwa-${size}.png
done
1 commit
expand
62b402c7
appview/state, nix/pkgs, /: generate png icons and add to pwa manifest
expand 0 comments
1 commit
expand
65ebef9f
appview/state, nix/pkgs, /: generate png icons and add to pwa manifest
expand 0 comments
1 commit
expand
a2034ea6
appview/state, nix/pkgs, /: generate png icons and add to pwa manifest
expand 2 comments

looks pretty good! /dolly.svg is ... not ideal haha. i am going to have to think about what the best way to manage tangled's assets are. we want to be able to style this easily with tailwind, but also avoid turning this into a gohtml template for usecases like this one.

fwiw you could probably make a copy of the template then use sed to remove the template stuff (bc that makes it not valid svg) and then use that temp file and delete it after?

1 commit
expand
04d6306c
appview/state, nix/pkgs, /: generate png icons and add to pwa manifest
expand 1 comment

large icons are blurry for some reason, heres another fix (sorry for the spam lol)

1 commit
expand
520f21a4
appview/pages, nix/pkgs, /: generate png icons and add to pwa manifest
expand 1 comment

oops wrong area in commit msg 1 sec

1 commit
expand
64c65aaa
appview/pages: add png icons to pwa manifest
expand 3 comments

the conversion is done quite easily with imagemagick:

convert -density 300 -background none dolly.svg -resize 144x144 dolly-144x144.png

want me to try add it in and replace the in-tree png?

yeah that would be nice! if the nix build step could produce PNGs as one of the steps that would be super.