Commandar Rick - hey @shibo please check this o...
hey @shibo please check this out
https://github.com/tscircuit/alphabet/pull/22
55 Replies
seve asked to create seperate prs for all the issues so just created this for adding exclamation symbol
Will start with the snapshot test next, ping you soon w the pr
hey @shibo the task is 2) introduce png snapshot test via resvg (allows supplying a custom font, see circuit-json-to-gltf, look up “Resvg(“. Draw png snapshot of custom font
so it should use the TscircuitAlphabet.ttf to render the text?
i didnt quite understand this exactly
The ideal approach is to have PNG snapshot tests that render actual text using the TTF font file, not the SVG paths. The test should create SVG documents with <text> elements that reference the TscircuitAlphabet font, then use resvg (which supports loading custom fonts) to render these to PNG images. This validates that the font file itself is correctly built and that characters render properly when used as an actual font, not just as individual SVG paths.
right?
The test should include multiple samples: all characters in a grid layout, common words/phrases, and edge cases like punctuation combinations. These PNG snapshots serve as visual regression tests - if the font generation process breaks or produces incorrect glyphs, the PNG output will visibly differ from the snapshots. This is different from the existing SVG test which only validates the source path data, not the final font file that users will actually consume. -GPT
or should we create multiple tests for these, for better visibility
hey @shibo any update on this, i will start working on another issue meanwhile
it's for visual snapshot testing using bun, and do include multiple test files
But it should create said test pngs using the actual.ttf file not just the svg paths right cuz that way we can confirm that any changes to the actual font file
Like the pr I put up earlier didn't change the svg but it did change the actual font like in case of g, so these test cases would better cover it
I think you're right
ok then, make a PR and let's see it
Okay lemme give this a shot
The key distinction:
SVG paths = raw drawing instructions (what you have in svgAlphabet)
TTF font = a packaged file format that contains these shapes but in a way that text rendering engines can use
When you use an SVG path, you're directly drawing the shape. When you use a TTF font, you're typing text and the font tells the system which shapes to draw for each character. The font build process converts your SVG paths into the TTF format, and that conversion could have bugs (like the 's' issue we found earlier with the coordinate scaling).
do you think we should take seve's input on this too, ill put up a pr soon
also seve pointed iut yesterday that g seemed off
just checked that using the old .ttf file (the one that didnt change from tscircuit/alphabet) had similar spacing issues
don't fix any letters just do the visual snapshots
okay sure
and since the output of that repo is the ttf font, that should be what's in the test ig
quick query do you want one single test file to produce multiple snapshots
the font-png currently has 7 tests, or should i make seperate files for each test
yess yess
yeee
multiple files for organization imo
okayy cool will do and push the pr
https://github.com/tscircuit/alphabet/pull/23
@shibo please chek
check*
accidentally added the package.json (it updated since we used resvg)
I think we don't need all these tests, keep font-all-characters, font-mixed-case, and add a test with large font size, just 3 files
okay will do, anything else
why did you change this?
we just want the testing with no modifications
weird issue where the larger text gets wrapped a lot because of the size which causes the png to be a very long image might not be good
cool will undo
yeah, you should fix that
but if i switch it back to 0.16 and rebuild the font it might cause it to look a little like bigger will that be okay or should i keep it same on my end (at 0.12 ) and just not push the changes in build_font.ts
Will this be acceptable then? (used less text to avoid wrapping )
longer sentence so we see how it wraps
the large font test uses shorter text ("ABC 123") with a wider canvas (2400px), so it stays on one line and creates a more reasonable PNG size
?
okay will push this
what ab this?
i can push without rebuilding the font keeping the test looking same but that might cause some issues
like this
does not look too bad tbh
yeah don't change anything just build as is, we'll make the fixes later
cool so build it at 0.12? like this right
done check once please https://github.com/tscircuit/alphabet/pull/23
@Commandar Rick ok now let's try to fix one issue at a time,
okay what should i do next?
also had a quick doubt, i got sponsored for the month of october for 5 usd but currently I have some contributions for this week too will that be added for next month??
@shibo is it cool if i try this? https://github.com/tscircuit/tscircuit.com/issues/1933
yes
Oh nice thanks
Btw congrats on the payout lol
ty, you'll get there one day if you keep learning
Yeeee hopefully
I'll start on this tomorrow will that be cool, it's 12 30 am here rn
hey @shibo
tried my hand on https://github.com/tscircuit/tscircuit.com/issues/1937
The issue was that the footer links were placed inside flex column containers (flex flex-col), which caused each link to stretch to the full width of its parent column by default, making the hover effect trigger even when the cursor was far from the actual text or over empty space near the links. This created a poor user experience where the underline would appear unexpectedly. To fix this, I added the w-fit (width: fit-content) Tailwind class to all footer links, which constrains each link's width to only the size of its text content, ensuring the hover effect only triggers when the cursor is directly over the visible text itself.
heres a before an after comparison
i think this should be it will put up a pr and send for review in a minute
ty for the explanation, it really helps with reviews
no worries, also helps me, if i understand the issue its much easier to narrow it down uk
i think rishab did check this and approve the changes, just fixed teh bun format issue whenever youre free please review
not sure why the build action is not running, can you push a commit with no changes, like a space in an md file
sure lemme try was also wondering tht
that*
can you try to run the build command locally?
sure
hey can you share the exact command should i run bun build --compileor bun build --production??
just bun run build, before that revert the last commit and just open a new pr
opened a new pr https://github.com/tscircuit/tscircuit.com/pull/1941
built
hmm
i dont understand why this could be happening
locally it did complete under 3 mins so it should have been done on github too
meanwhile should i work on a seprate issue?
yeah, you can work parallel on multiple issues
okay great will ping you soon, ty
lemme know if any update on this