feat: new feature theme switcher

README.md

@@ -15,7 +15,7 @@ Clone the project
 Go to the project directory
 
 ```bash
- cd www.jerenslencun.com
+ cd www.jerenslensun.com
 ```
 
 Install dependencies

__tests__/components/theme-toggle.test.tsx

@@ -0,0 +1,24 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { renderWithClient } from '../../__mocks__/utils/react-query'
+import { Theme } from '../../src/components/theme-toggle'
+import userEvent from '@testing-library/user-event'
+import { waitFor } from '@testing-library/dom'
+
+describe('Theme', () => {
+ it('Should switch theme dark or light', async () => {
+ const result = renderWithClient(<Theme />)
+
+ expect(result.getByTestId('theme-light')).toBeInTheDocument()
+
+ await waitFor(() =>
+ userEvent.click(
+ result.getByRole('button', { name: 'dark theme toggle' })
+ )
+ )
+
+ expect(result.getByTestId('theme-light')).toBeInTheDocument()
+ })
+})

package.json

@@ -40,6 +40,7 @@
  "mdx-bundler": "^8.1.0",
  "next": "^12.2.0",
  "next-pwa": "^5.4.7",
+ "next-themes": "^0.2.0",
  "parse-numeric-range": "^1.3.0",
  "plaiceholder": "^2.4.0",
  "react": "18.2.0",

src/components/blog/card.tsx

@@ -47,7 +47,7 @@ export const Card = ({
  {captializeTitle}
  </h1>
  </Link>
- <p className="text-gray-500 pb-2">
+ <p className="text-gray-500 dark:text-gray-300 pb-2">
  {format(new Date(date), 'MMMM dd, yyyy')} •{' '}
  <span>{readTime.text}</span>
  </p>

src/components/blog/content.tsx

@@ -38,7 +38,7 @@ export const Article = ({
  />
  </header>
  <main className="min-h-9/10 pt-2 md:pt-10 font-medium px-4 md:px-10">
- <article className="prose prose-p:font-normal prose-li:font-normal max-w-4xl lg:prose-lg m-auto">
+ <article className="prose dark:prose-invert prose-p:font-normal prose-li:font-normal max-w-4xl lg:prose-lg m-auto">
  <Component components={components} />
  </article>
  </main>

src/components/blog/layout.tsx

@@ -48,7 +48,7 @@ export const Layout = ({
  <div className="col-span-full w-full">
  <div className="w-full bg-transparent border rounded-md focus-within:border-red-500 focus-within:ring focus-within:ring-red-400 focus-within:ring-opacity-40">
  <input
- className="text-gray-700 placeholder-gray-400 bg-transparent border-none appearance-none focus:outline-none focus:placeholder-transparent focus:ring-0 p-2 w-full"
+ className="text-gray-700 dark:text-neutral-200 placeholder-gray-400 bg-transparent border-none appearance-none focus:outline-none focus:placeholder-transparent focus:ring-0 p-2 w-full"
  placeholder="Search Articles..."
  aria-label="Search Articles"
  value={query}

src/components/footer.tsx

@@ -11,7 +11,9 @@ import Link from 'next/link'
 function SitemapSection() {
  return (
  <div>
- <h2 className="text-lg font-semibold text-gray-500">Sitemap</h2>
+ <h2 className="text-lg font-semibold text-gray-500 dark:text-gray-200">
+ Sitemap
+ </h2>
  <div className="mt-2 flex flex-col gap-1">
  <LinkURL className="text-lg" href="/">
  Home
@@ -33,7 +35,9 @@ function SitemapSection() {
 function ContactSection() {
  return (
  <div>
- <h2 className="text-lg font-semibold text-gray-500">Contact</h2>
+ <h2 className="text-lg font-semibold text-gray-500 dark:text-gray-200">
+ Contact
+ </h2>
  <div className="mt-2 flex flex-col gap-1">
  <LinkURL
  className="text-lg"

src/components/header.tsx

@@ -56,7 +56,7 @@ export const Header = ({
  Read Articles
  </LinkURL>
  <LinkURL
- className="rounded-md bg-gray-200 font-semibold text-xl hover:bg-gray-300 w-36 py-2"
+ className="rounded-md bg-gray-200 dark:bg-neutral-700 font-semibold text-xl hover:bg-gray-300 dark:hover:bg-neutral-600 w-36 py-2"
  href="/about"
  >
  About Me

src/components/navbar.tsx

@@ -8,39 +8,41 @@ import {
  faFileCode,
  faCopy,
 } from '@fortawesome/free-solid-svg-icons'
+import { Theme } from './theme-toggle'
 
 export const Navbar = (): React.ReactElement => {
  return (
- <nav className="fixed w-full z-10 bg-white px-5vw">
+ <nav className="fixed w-full z-10 bg-white dark:bg-neutral-900 px-5vw">
  <div className="flex text-center justify-between border-b-2 h-full w-full border-gray-100">
  <LinkURL
  href="/"
- className="font-semibold m-0 text-xl py-5 w-24 hover:bg-gray-100"
+ className="font-semibold m-0 text-xl py-5 w-24 hover:bg-gray-100 dark:hover:bg-neutral-800"
  >
  Jerens
  </LinkURL>
  <div className="flex text-center my-auto h-full">
  <div className="text-center relative h-full w-full hidden md:flex">
  <LinkURL
  href="/blog"
- className="hidden md:block font-semibold text-gray-800 text-xl py-5 w-24 hover:bg-gray-100"
+ className="hidden md:block font-semibold text-gray-800 dark:text-white text-xl py-5 w-24 hover:bg-gray-100 dark:hover:bg-neutral-800"
  >
  Blog
  </LinkURL>
  <LinkURL
  href="/project"
- className="hidden md:block font-semibold text-gray-800 text-xl py-5 w-24 hover:bg-gray-100"
+ className="hidden md:block font-semibold text-gray-800 dark:text-white text-xl py-5 w-24 hover:bg-gray-100 dark:hover:bg-neutral-800"
  >
  Project
  </LinkURL>
  <LinkURL
  href="/about"
- className="hidden md:block font-semibold text-gray-800 text-xl py-5 w-24 hover:bg-gray-100"
+ className="hidden md:block font-semibold text-gray-800 dark:text-white text-xl py-5 w-24 hover:bg-gray-100 dark:hover:bg-neutral-800"
  >
  About
  </LinkURL>
  </div>
  <Notifications />
+ <Theme />
  </div>
  </div>
  </nav>
@@ -49,11 +51,11 @@ export const Navbar = (): React.ReactElement => {
 
 export const NavbarMobile = (): React.ReactElement => {
  return (
- <div className="fixed flex w-full px-10 py-2 bottom-0 h-18 bg-white z-40 md:hidden">
+ <div className="fixed flex w-full px-10 py-2 bottom-0 h-18 bg-white dark:bg-neutral-800 z-40 md:hidden">
  <div className="flex justify-between w-full">
  <div className="flex-1 group">
  <LinkURL
- className="flex items-end justify-center text-center mx-auto px-4 pt-2 w-full text-gray-600 group-hover:text-indigo-500 border-b-2 border-transparent group-hover:border-indigo-500"
+ className="flex items-end justify-center text-center mx-auto px-4 pt-2 w-full text-gray-600 dark:text-gray-200 group-hover:text-red-500 border-b-2 border-transparent group-hover:border-red-500"
  href="/"
  >
  <span className="block px-1 pt-1 pb-2">
@@ -64,7 +66,7 @@ export const NavbarMobile = (): React.ReactElement => {
  </div>
  <div className="flex-1 group">
  <LinkURL
- className="flex items-end justify-center text-center mx-auto px-4 pt-2 w-full text-gray-600 group-hover:text-indigo-500 border-b-2 border-transparent group-hover:border-indigo-500"
+ className="flex items-end justify-center text-center mx-auto px-4 pt-2 w-full text-gray-600 dark:text-gray-200 group-hover:text-red-500 border-b-2 border-transparent group-hover:border-red-500"
  href="/blog"
  >
  <span className="block px-1 pt-1 pb-2">
@@ -75,7 +77,7 @@ export const NavbarMobile = (): React.ReactElement => {
  </div>
  <div className="flex-1 group">
  <LinkURL
- className="flex items-end justify-center text-center mx-auto px-4 pt-2 w-full text-gray-600 group-hover:text-indigo-500 border-b-2 border-transparent group-hover:border-indigo-500"
+ className="flex items-end justify-center text-center mx-auto px-4 pt-2 w-full text-gray-600 dark:text-gray-200 group-hover:text-red-500 border-b-2 border-transparent group-hover:border-red-500"
  href="/project"
  >
  <span className="block px-1 pt-1 pb-2">
@@ -89,7 +91,7 @@ export const NavbarMobile = (): React.ReactElement => {
  </div>
  <div className="flex-1 group">
  <LinkURL
- className="flex items-end justify-center text-center mx-auto px-4 pt-2 w-full text-gray-600 group-hover:text-indigo-500 border-b-2 border-transparent group-hover:border-indigo-500"
+ className="flex items-end justify-center text-center mx-auto px-4 pt-2 w-full text-gray-600 dark:text-gray-200 group-hover:text-red-500 border-b-2 border-transparent group-hover:border-red-500"
  href="/about"
  >
  <span className="block px-1 pt-1 pb-2">

src/components/notifications.tsx

@@ -82,7 +82,7 @@ export const Notifications = (): React.ReactElement => {
 
  if (isLoading) {
  return (
- <div className="hover:bg-gray-100 m-auto">
+ <div className="hover:bg-gray-100 dark:hover:bg-neutral-800 m-auto">
  <FontAwesomeIcon
  className="animate-spin m-3"
  size="lg"
@@ -137,7 +137,7 @@ const NotificationButton = ({
 }: NotificationButtonProps): React.ReactElement => {
  return (
  <button
- className="hover:bg-gray-100 m-auto rounded-full"
+ className="hover:bg-gray-100 dark:hover:bg-neutral-800 m-auto rounded-full"
  onClick={handleClick}
  aria-label={ariaLabel}
  >

src/components/pre.tsx

@@ -2,7 +2,7 @@ import { css } from '../../stitches.config'
 
 export const pre = css({
  $$background: 'rgb(243, 243, 243)',
- $$text: '$colors$black',
+ $$text: '$colors$primary',
  $$syntax1: '$colors$orange',
  $$syntax2: '$colors$turq',
  $$syntax3: '$colors$pink',
@@ -24,7 +24,7 @@ export const pre = css({
  $$addedWordText: '$colors$turq',
 
  boxSizing: 'border-box',
- padding: '$3 0px',
+ padding: '$4 0px',
  overflow: 'auto',
  fontFamily: '$mono',
  fontSize: '$2',
@@ -166,19 +166,19 @@ export const pre = css({
  true: {
  '.highlight-line': {
  position: 'relative',
- paddingLeft: '$4',
+ paddingLeft: '50px',
  '&::before': {
  content: 'attr(data-line)',
  position: 'absolute',
- left: 12,
+ left: 20,
  top: 0,
  color: '$$lineNumbers',
  },
  '&[data-highlighted=true]': {
  '&::before': {
  content: 'attr(data-line)',
  position: 'absolute',
- left: 8,
+ left: 15,
  top: 0,
  color: '$$lineNumbers',
  },

src/components/project/content.tsx

@@ -59,7 +59,7 @@ export const Content = ({
  </Grid>
 
  <main className="min-h-9/10 pt-2 md:pt-10 font-medium px-4 md:px-10">
- <article className="prose prose-p:font-normal prose-li:font-normal max-w-4xl lg:prose-lg m-auto">
+ <article className="prose dark:prose-invert prose-p:font-normal prose-li:font-normal max-w-4xl lg:prose-lg m-auto">
  <Component components={components} />
  <div className="h-10 lg:h-15" />
  </article>

src/components/sections/about-section.tsx

@@ -26,7 +26,7 @@ export const AboutSection = (): React.ReactElement => {
  }}
  >
  <motion.div variants={childrenVariants}>
- <h1 className="font-semibold text-2xl text-red-700 lg:text-xl">
+ <h1 className="font-semibold text-2xl text-red-700 dark:text-red-400 lg:text-xl">
  About Me
  </h1>
  </motion.div>

src/components/sections/career-section.tsx

@@ -59,15 +59,15 @@ export const CareerSection = (): React.ReactElement => {
  </motion.div>
  <CareerCard
  inView={inView}
- organization="Ministry of Tourism"
- role="Facilitator Baparekraf Digital Talent"
- date="October 2020 – November 2020"
+ organization="Bangkit Academy 2022"
+ role="Facilitator"
+ date="February 2022 – July 2022"
  />
  <CareerCard
  inView={inView}
- organization="Bangkit Academy 2022"
+ organization="Baparekraf Digital Talent"
  role="Facilitator"
- date="February 2022 – Present"
+ date="October 2020 – November 2020"
  />
  </Grid>
  )}

src/components/sections/introduction-section.tsx

@@ -30,12 +30,12 @@ export const IntroductionSection = (): React.ReactElement => {
  }}
  >
  <motion.div variants={childrenVariants}>
- <h2 className="text-5xl lg:text-6xl font-bold text-gray-800">
+ <h2 className="text-5xl lg:text-6xl font-bold text-gray-800 dark:text-gray-200">
  Hi Folks...
  </h2>
  </motion.div>
  <motion.div variants={childrenVariants}>
- <h2 className="text-4xl lg:text-5xl mt-3 font-bold text-gray-900">
+ <h2 className="text-4xl lg:text-5xl mt-3 font-bold text-gray-900 dark:text-gray-200">
  Let me introduce myself
  </h2>
  </motion.div>
@@ -55,28 +55,29 @@ export const IntroductionSection = (): React.ReactElement => {
  }}
  >
  <motion.div variants={childrenVariants}>
- <h2 className="text-3xl font-bold text-gray-800">{`I'm Jerens S. Lensun`}</h2>
+ <h2 className="text-3xl font-bold text-gray-800 dark:text-gray-100">{`I'm Jerens S. Lensun`}</h2>
  </motion.div>
  <motion.div variants={childrenVariants}>
  <p className="text-base mt-5">
  My area of focus lies in architectural
  design and building products as well as web
  development and backend. I enjoy designing
- and building a distributed system and can be
- used by a lot of users.
+ and building a highly scalable app that can
+ help user to solve their problem.
  </p>
  </motion.div>
  <motion.div variants={childrenVariants}>
  <p className="text-base mt-5">
- Currently studied Electrical Engineering at
- the University of Sam Ratulangi based on
- Manado, minoring in control system, during
- my college I involve in leading a project,
- being an assistant practicum as well as
- coordinator assistant too, etc. But outside
- that, I consider myself a builder so {`I'm`}{' '}
- building my side project for fun, and one of
- them is this blog.
+ I am currently studied Electrical
+ Engineering at the University of Sam
+ Ratulangi based on Manado, minoring in
+ control system, during my college I involve
+ in leading a project, being an assistant
+ practicum as well as coordinator assistant
+ too, etc. But outside that, I consider
+ myself a builder so {`I'm`} building my side
+ project for fun, and one of them is this
+ blog.
  </p>
  </motion.div>
  </motion.div>

src/components/tag.tsx

@@ -5,7 +5,7 @@ export const Tag = ({
 }: React.ComponentPropsWithoutRef<'button'>) => {
  return (
  <button
- className="relative disabled:opacity-30 active:bg-red-400 block mb-4 mr-4 px-4 md:py-1 w-auto h-auto rounded-full cursor-pointer transition text-primary bg-gray-200 focus:ring focus:ring-red-200 opacity-100"
+ className="relative disabled:opacity-30 block mb-4 mr-4 px-4 md:py-1 w-auto h-auto rounded-full cursor-pointer transition text-primary bg-gray-200 dark:bg-neutral-800 focus:ring focus:ring-red-200 dark:focus:ring-red-700 opacity-100 active:bg-red-400 dark:active:bg-red-700"
  {...rest}
  >
  {children}