This is basically a website that I post blog posts, project updates (thats why it’s called The Lab, and a place where you could contact me (via Giscus embedded in the website)
Copilot code completion
I added a TOC section and a music player with this ship. The music player automatically loads based on the provided music_name-musician name (if it’s in the library in my CDN). The TOC is also generated based on markdown
Added a music card that could be used anywhere (including in markdowns via .MDX)!
Log in to leave a comment
Added a TOC section which automatically generates based on the titles on the MD File
Log in to leave a comment
I made The Lab to experiment with features I never implemented with my previous portfolio page. The Lab includes:
Auto-redeploy on update using PPOD (Which is a deploy tool I made myself)
Built using NEXT.JS, supports SSR (Server Side Rendering)
Blog post pages and project pages are rendered and generated on demand based on .mdx files. (THIS WAS A PAIN TO DO)
-Live Markdown editor built in for blog posting on the go
Comment section made using Giscus - integrates GitHub Discussions with comments on the pages
Media storage using Cloudflare R2
Status page and badge (status.nathanyin.com)
Overall, I am quite proud of what I made, and I learnt A LOT in backend file pipelines and React + Next.js workflow. I’ll be regularly updating the projects and blogs once I finish my exams. Stay tuned!
Implemented a live Markdown editor for the admin page, it supports adding media via drag and drop (which caches them and uploads them to Cloudflare R2 via AWS S3 API when the post is published. When the post is published, it gets pushed to GitHub automatically.
Log in to leave a comment
Added the basic frontend of the admin panel, it rendered markdown automatically as you type (and renders using the same format as the actual pages). It is protected using Cloudflare Access, maybe I will also protect it using an authentication system that I implement myself later, I trust Cloudflare for now
Log in to leave a comment
