left verge
A few days ago I used https://paste.ubuntu.com to send a code snippet to a friend, but I don't like its frontend. So the last two days I've built a clone of it in my website's design. shiki is not as easy to set up as I expected, but it is so beautiful.
Website: https://joulev.dev/apps/snippets
Example snippet: https://joulev.dev/p/o6v6zd3472se
graceful thicket
techstacks?
analog pasture
Nice!
Will it integrate with a code formatter so that Alfon don't need prettier anymore
left verge
techstacks?
Purely nextjs + shiki
left verge
~~Will it integrate with a code formatter so that Alfon don't need prettier anym...
It’s possible
Don’t want to make it a full scaled editor though, it’s just a normal <textarea> behind the scenes currently
I’ll add the feature if I find myself in need of it
Other features could include exporting as image
File name maybe
Multiple files
Download button
latent scaffold
this looks great!
I am loving these usage examples of glassmorphic design in your website
left verge
thanks!
atomic flame
Dang i thought the og:image is going to show part of the content 🤣
cool project nonetheless
somber fulcrum
Dang i thought the og:image is going to show part of the content 🤣
i like embeds that are short and consise so i don't need to remove them...
cool project i see tho
somber fulcrum
Multiple files
👀 github gist alternative
also kinda fancy feature, but line number selection like github might be cool 🙂
left verge
Dang i thought the og:image is going to show part of the content 🤣
yeah ideally i wanted it to render something like the image above
will try to find a way to do that
but it's surprisingly hard to get shiki to run well in the edge runtime
left verge
also kinda fancy feature, but line number selection like github might be cool 🙂
good idea. clicking on a line => add it to hash of the url, like github. it's doable yeah
left verge
*👀 github gist alternative*
but for multiple files to work, ill need to refactor some database logic which im too lazy for lmao
somber fulcrum
good idea. clicking on a line => add it to hash of the url, like github. it's do...
and shift to do more from 2 points :)))
left verge
but it's surprisingly hard to get shiki to run well in the edge runtime
wait i have an idea. what if i save the shiki output in the database directly – it would mean it's impossible to change the theme at will but in return the page will be alot faster since there's no need to even run shiki there
shiki takes surprisingly long to load. 2 seconds for the example code above
somber fulcrum
random question, but does the page use ppr for extra load speed?
left verge
no
hmm another good idea
the ppr skeleton would be the unformatted code
ok this is the best idea thus far
somber fulcrum
👀
atomic flame
isnt that going to blow up the size of the edge static cdn :v
since ppr shells are stored there
somber fulcrum
its not like the site will be that much used
atomic flame
broo 💀
left verge
lmao
left verge
wait i have an idea. what if i save the shiki output in the database directly – ...
im a bit hesitant to use yet another experiemntal feature though, maybe i'll try this one first
atomic flame
why do you need to change theme per code? its not like the whole website is not already full of glassmorphism theme xD
left verge
no i dont intend to change theme per code but i may somehow want to switch the theme in the future
atomic flame
ahh mb
left verge
one day you no longer love your gf and she becomes your ex, something like that
but idt that day would happen anytime soon so who cares XD
somber fulcrum
one day you no longer love your gf and she becomes your ex, something like that
step 1...
get one
somber fulcrum
wait i meant step 0... as first is actually 0th 🙂
analog pasture
shiki takes surprisingly long to load. 2 seconds for the example code above
You can try shikiji 
somber fulcrum
the ji makes it extra good?
analog pasture
A rewrite
left verge
You can try shikiji <:animeThink:757969923879469116>
yes what i am using. except it is not that much faster and it's a pain to get it working in the edge where im limited to 1MB
running shiki(ji) when node_modules is available (build time) is so easy and simple
but when i need to run it on-demand everything blows up in flames
analog pasture
Serverless runtime is good enough, you can make it client-side rendering too
left verge
refactor completed, /p/:slug is now literally dynamic at the speed of static
never spent this much effort optimising the load speed of a page before
rendering pages are back to static or edge now
nodejs is only used for server actions
somber fulcrum
nice pagespeed score
running on new url was better speed... maybe things got cached near google's cdn
analog pasture
That’s insane, but does it also mean iterating it will be difficult in order to keep it on edge runtime
left verge
I just save the html directly in the database
So shiki(ji) isn’t even imported to this page
It just reads from the database and renders html directly
Thankfully drizzle supports the edge runtime (somehow) so everything can be done on the edge
somber fulcrum
Thankfully drizzle supports the edge runtime (somehow) so everything can be done...
what is your db hosting
left verge
neon
somber fulcrum
nice
dire sable
Haven't looked into the source code, but wanted to share this component as it may alleviate the manual shiki boilerplate: https://bright.codehike.org/
