Korange's Site banner

Korange's Site

7 devlogs
82h 49m 34s

This is my (Korange’s) personal website. It is packed with various features such as a self-introduction, a list of articles I’ve written, a list of my works, a short URL service, and comments on articles.

This project uses AI

Asking about implementation best practices for frameworks, libraries, and algorithms, or asking for translations (texts, devlogs, readme).

Demo Repository

Loading README...

Korange

Shipped this project!

Hours: 82.83
Cookies: 🍪 1938
Multiplier: 23.39 cookies/hr

I have built my new personal website! There are still some parts under construction (such as comments and short URL analytics), but I have shipped it with the bare minimum for now. I am really happy with how the design turned out!

Korange

There are still many WIP parts, but I’ve released it as a demo for now.

Attachment
0
Korange

I cannot remember everything, but I have done quite a few things. (Please don’t even worry about the fact that the devlog has significantly exceeded 10 hours at this point, haha.)

  • Changed how the cover image for works is handled (specifically, separated it into two files: a background and a logo, instead of using only one cover image).
  • Migrated from Drizzle to Prisma.
  • Added an admin dashboard.
    • Implemented GitHub authentication using Better Auth.
  • Added Terms of Service, Privacy Policy, and License pages (though they are currently empty).
  • Added a distribution feature for Web Key Directory (WKD).
  • Revamped the OGP mechanism, switching from generating via scripts and adding to the public folder to generating dynamically using next/og.
  • Statically generated most pages using generateStaticParams.
    • Adjusted the next-intl configuration accordingly.
  • Enabled the ability to include images in Markdown articles (which was not possible before).
    • Implemented a route to serve content assets and a remark plugin to convert relative paths within Markdown to these routes.
    • Changed the content folder structure.
  • Tried migrating to vinext after hearing about its release from Cloudflare, but it did not work out. Well, vinext seems to still be experimental and under development, so it is safe to skip adopting it for production.
  • I am sure there were other things, but since the last devlog was a month ago, I do not remember much…
Attachment
0
Korange

I completely lost track of time working on the project, forgetting about Flavortown for a while, and ended up going over by 6 hours from the planned 10 hours… What a waste!

As far as I can remember, I did the following:

  • Made the works page capable of displaying content instead of just links. It looks good!
  • Added a sidebar but removed it because it felt too cluttered.
  • Added an easter egg to the browser console.
  • I’m currently mining for a vanity address to create a .onion version of the site. I thought a longer one would be cooler, so I’m looking for a 10-character prefix like korange753, but this takes time… If I were willing to pay, I might be able to boost it by renting instances on vast.ai or similar services.
  • Prepared the description for the Onion site in advance.
  • Decided that if I’m supporting Onion, it should work in a JavaScript-free environment, so I made it compatible. However, Next.js doesn’t seem to anticipate such cases much, as there are parts, like notFound calls, that behave strangely without client-side JS… I also felt this when implementing the sidebar; Next.js can be a bit inflexible.
  • Added callouts (for emphasis, information, warnings, thoughts, etc.) to article components.
  • Changed the way article components are invoked from using MDX to a custom syntax with remark-directive.
  • Additionally, I added article components for tweets, text highlights, shouting, and whispering.
  • Adjusted the styling of article links and other elements.
  • Enabled footnotes in articles.
  • Added article share buttons.
  • Added an article like button and comment section (UI only).

I originally started building this site from the end of 2025, and initially thought it would be done a while after the new year, but I’ve been procrastinating more than planned… Well, I hope that means I’ll end up with something better. However, I want to make sure it’s ready in time for the Flavortown period.

Attachment
0
Korange

It’s been a while since I last posted to Flavortown (I ended up spending over 10 hours on this work).

What I’ve been working on recently:

  • Fixed a subpixel rendering issue in Firefox/Gecko (While Gecko’s existence as the only engine not created by a big tech company is significant, I honestly feel it’s lacking in some features).
  • Added an RSS feed (There’s no navigation link on the page yet).
  • Created an “Misc” page.
  • Created a page to host link banners.
  • Created a page to host a PGP public key.
  • And more.

The localization is still incomplete, but I’ll get to that later.

Attachment
Attachment
Attachment
0
Korange
  • Created a 404 page! I made two patterns, and the second one was adopted.
  • I was considering migrating to Lingui, a library where keys are automatically generated from source language messages, because deciding and setting i18n keys was a hassle. However, it seemed that it did not work well with Next 16, so I abandoned it. But I found out that next-intl, which I had been using so far, has a trial feature that automatically generates keys from source messages, and by switching to that, it was completely resolved (what was all this time for?).
  • Added a QR code to the donation page.
  • Added a feature to Zap (tipping function) on Nostr (decentralized SNS) on the donation page. I am using the nostr-zap and nostr-zap-view libraries.
  • I experimented with ways to display the icons of people who Zapped in the UI, but I stopped for now.
    I think I did other things too, but I forgot.
Attachment
2

Comments

Dankey445
Dankey445 3 months ago

i really like the asthetics

Korange
Korange 3 months ago

Thanks!!

Korange

I have made the site mobile-friendly and created a donation page. I only had experience with UI design on desktops, so making it mobile-friendly was particularly difficult. Even just the two-column cards could become quite cramped, and I wasn’t sure how to lay out elements like the navigation bar. After looking at other sites for research, I actually found that a smaller font size was surprisingly sufficient. This site used a font size of 18px, but I decided to use 16px for mobile.
As a result, it’s turned out reasonably well. However, the codebase feels a bit chaotic, so I intend to review and refactor it.

Attachment
0
Korange

I’ve added this site, which I’ve been working on for a while, to Flavertown!

This site is planned to be my new personal website. My current site (created in 2024) has a simple design using Astro, but the one I’m building this time uses a more distinctive design, which I like. I’m using Next.js.

The features I’m considering include:

  • A self-introduction page
  • A list of my created works
  • A list of social media accounts
  • A blog/posting page
  • A page that can fetch and display all articles I’ve posted, whether on this site or elsewhere, using RSS etc.
  • Multilingual support, including AI-powered articles
  • A URL shortener
  • A contact form
  • Comments and likes on articles

And so on. I want to incorporate various features as my online home.

While the overall structure, including design, layout, articles, and self-introduction, is mostly complete, there’s still a lot to do before it’s finished.

Attachment
0