orangejuice / blog

personal blog powered by Next.js, Contentlayer, Github Discussions and more

_{✅ i18n ✅ Comment ✅ Reaction ✅ View count ✅ Post-it wall ✅ Book/TV/Show tracking ✅ Light/Dark ✅ PC/Mobile}

✨ Features

• Next.js(App dir/ISR/SSR/CSR), React, TailwindCSS, Mdx, shadcn/ui, framer motion, contentlayer
• Post-it wall available on Guessbook
• Book/Movie/TV Show tracking available on Bookshelf
• Comment/Reaction system based on Giscus (work together with blog-worker)
• Responsive UI, minimalist design language with a bit of move elements
• Cached dynamic data and On-demand revalidation
• In-depth customized for Markdown + i18n writing workflow
• SEO with generated sitemap.xml, robots.txt, Open Graph & RSS feed

🙌 Highlight

• 🕰️ Activity Calendar src/components/activity-calendar.tsx
  An elegant calendar component intuitively displays yearly reading and watching activities.

• 🎨 Immersive 3D Background src/components/background.tsx
  Dynamic, peaceful three-dimensional backdrop for day and night.

• 🔊 White Noise Toggle src/components/background-toggle.tsx
  Animated ambient sound control built with framer motion.

• 💡 Theme Toggle src/components/theme-toggle.tsx
  A simple and creative theme preference control.

• 💾 Simplified state management src/lib/use-local-storage.ts, src/lib/use-global-state.ts
  Encapsulated hooks for persistent and global state, with useState-like syntax

• 📝 Skeuomorphic Sticky Notes src/components/sticky-notes.tsx
  A sleek implementation of skeuomorphic sticky notes, drag enabled.

• 📄 Markdown Image Support src/lib/remark-image-processor.ts
  Add support for local/online images through a custom remark plugin

  _{(and more to come...)}

• What else did you find interesting?

🔖 History

• Jul 01, 2024 Introducing a new feature - Book/Movie/TV Show tracking.
• Jun 18, 2024 Add Sticky Notes display on Guestbook page.
• Jun 17, 2024 Add Article view count display (powered by Cloudflare D1).
• Jun 03, 2024 Launch of the new blog system based on Next.js (App dir).
• Jun 18, 2020 Imported legacy posts.
• Jun 17, 2020 Revamped the entire system with Gatsby, embracing the modern frontend framework - React! (repo: blog-gatsby)
• Feb 15, 2020 Updated to iacrus 2.7.0.
• Feb 14, 2020 Removed theme files and replaced them with a submodule for better version control.
• Nov 28, 2018 Initial deployment based on Hexo / Git pages! Post (repo: blog-hexo)

❤️ Credits

• scaffold https://github.com/timlrx/tailwind-nextjs-starter-blog
• TOC https://webtech-note.com/posts/tocbot-contentlayer
• TOC number with decimal https://stackoverflow.com/questions/4098195/
• list compact style https://samuelkraft.com/blog
• list item card style https://github.com/jahirfiquitiva/jahir.dev/
• dotted line animated card style https://github.com/ccbikai/astro-aria
• component css animation https://github.com/jahirfiquitiva/jahir.dev/
• reactions with canvas-confetti https://github.com/jahirfiquitiva/jahir.dev/
• i18n
  • next-intl
    • https://next-intl-docs.vercel.app/docs/
    • https://www.reddit.com/r/nextjs/comments/1buni9a/how_to_use_next_intl_default_locale_without_en_tr/
  • react-i18n
    • https://github.com/i18next/react-i18next
    • https://github.com/i18next/next-app-dir-i18next-example-ts
    • https://github.com/i18nexus/next-i18n-router
    • https://github.com/lifinance/jumper.exchange
    • i18next.getFixedT(lng, ns, keyPrefix) https://www.i18next.com/overview/api#getfixedt
• rehype plugin for mdx image compatibility https://sdorra.dev/posts/2022-12-11-contentlayer-next-image
• fetch GitHub data
  • use GitHub graphql https://github.com/octokit/graphql.js
  • bulk query by using 'search' https://github.com/typeofweb/typeofweb.com/blob/main/generateCommentsCount.ts
• cloudflare worker for updating the new comment
  • cloudflare worker development
  • GitHub GraphQL API
  • PKCS#1 / PKCS#8 ? https://github.com/gr2m/universal-github-app-jwt?tab=readme-ov-file#about-private-key-formats
• post page 3d background https://github.com/stone-skipper/ambient-reader
• React / Next.js
  • use streaming asynchronous content https://react.dev/reference/react/use
  • cache&revalidate https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
  • revalidate I failed to control the behavior of export const revalidate :(, use on-demand data revalidation instead. implemented api/revalidate to work with orangejuice/on-new-giscus-comment
• TailwindCSS spinner animation lib https://play.tailwindcss.com/OPAsySKNCd
• day.js for date formating https://day.js.org/docs/en/display/format
• RSS feed generation https://spacejelly.dev/posts/how-to-add-a-sitemap-rss-feed-in-next-js-app-router
• Zustand cross tab sync pmndrs/zustand#1614
• handwriting Font
  • Yozai https://github.com/lxgw/yozai-font
  • CEF Fonts CJK https://github.com/Partyb0ssishere/cef-fonts-cjk
• background bounce animation https://www.jussivirtanen.fi/
• start using view-transition https://codepen.io/jh3y/pen/MWzdvwL