Merge branch 'main' of https://github.com/morethanmin/morethan-log

CONTRIBUTING.md

@@ -19,7 +19,7 @@ $ cd [YOUR_REPOSITORY_NAME]
 
 # Install packages and start this project.
 $ yarn add
-$ yarn dev 
+$ yarn dev
 
 # (Working...)
 
@@ -32,8 +32,10 @@ $ git push origin [YOUR_REPOSITORY_NAME]
 
 ## Commit message rules
 
-Consider starting the commit message with an applicable emoji:
+Consider starting the commit message with an applicable word:
 
-- 🔧 : when create new feature.
-- 🎨 : when styling a this application.
-- 🐛 : when fixing a bug.
+`feat|fix|perf|refactor|test|ci|docs|build|chore`
+
+- feat: when create new feature.
+- style: when styling a this application.
+- fix: when fixing a bug.

morethan-log.config.js

@@ -24,7 +24,7 @@ const CONFIG = {
   // CONFIG configration
   link: 'https://morethanmin.web.app',
   since: 2022, // If leave this empty, current year will be used.
-  lang: 'ko-KR', // ['en-US', 'zh-CN', 'zh-HK', 'zh-TW', 'ja-JP', 'es-ES', 'ko-KR']
+  lang: 'en-US', // ['en-US', 'zh-CN', 'zh-HK', 'zh-TW', 'ja-JP', 'es-ES', 'ko-KR']
   postsPerPage: 10,
   ogImageGenerateURL: 'https://og-image-korean.vercel.app', // The link to generate OG image, don't end with a slash
   seo: {
@@ -40,23 +40,23 @@ const CONFIG = {
 
   // plugin configuration
   googleAnalytics: {
-    enable: true,
+    enable: false,
     config: {
-      measurementId: 'G-9N3FE0117Q'
+      measurementId: '' // ex. G-9N3FE0117Q
     }
   },
   googleSearchConsole: {
-    enable: true,
+    enable: false,
     config: {
-      siteVerification: 'qvdR1gXMirk_DCUOKPgRnxu2x6fqSPrquYnEZZMjR9w'
+      siteVerification: '' // ex. qvdR1gXMirk_DCUOKPgRnxu2x6fqSPrquYnEZZMjR9w
     }
   },
   utterances: {
     enable: true,
     config: {
       repo: 'morethanmin/my-blog',
       'issue-term': 'og:title',
-      label: '💬Utterances',
+      label: '💬 Utterances',
     }
   },
   isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)

src/components/Layout/Header/index.jsx

@@ -2,25 +2,26 @@ import { useEffect, useRef, useState } from 'react'
 import Link from 'next/link'
 import CONFIG from 'morethan-log.config'
 import NavBar from './NavBar'
+import { getTheme } from '../../Theme'
 
 const Header = ({ fullWidth }) => {
   const navRef = useRef(null)
-  const [, setTheme] = useState()
+  const [theme, setTheme] = useState()
 
   useEffect(() => {
     if (typeof window === 'object') {
-      setTheme(localStorage.theme || 'light')
+      setTheme(getTheme())
     }
   }, [])
 
-  // const handleClick = () => {
-  //   const changedTheme = localStorage.theme !== 'dark' ? 'dark' : 'light'
-  //   localStorage.setItem('theme', changedTheme)
-  //   setTheme(changedTheme)
-  //   changedTheme === 'dark'
-  //     ? document.documentElement.classList.add('dark')
-  //     : document.documentElement.classList.remove('dark')
-  // }
+  const handleClick = () => {
+    const changedTheme = getTheme() !== 'dark' ? 'dark' : 'light'
+    localStorage.setItem('theme', changedTheme)
+    setTheme(changedTheme)
+    changedTheme === 'dark'
+      ? document.documentElement.classList.add('dark')
+      : document.documentElement.classList.remove('dark')
+  }
 
   return (
     <>
@@ -41,7 +42,12 @@ const Header = ({ fullWidth }) => {
           </a>
         </Link>
         <div className={`flex gap-3 items-center`}>
-          {/* <div onClick={handleClick}>{theme}</div> */}
+          <div
+            className={`cursor-pointer dark:text-gray-50`}
+            onClick={handleClick}
+          >
+            {theme}
+          </div>
           <NavBar />
         </div>
       </div>

src/components/Theme.jsx

@@ -1,10 +1,18 @@
-function Theme() {
+export const getTheme = () => {
   if (
     localStorage.theme === 'dark' ||
     (!('theme' in localStorage) &&
       window.matchMedia('(prefers-color-scheme: dark)').matches)
   ) {
-    // document.documentElement.classList.add('dark')
+    return 'dark'
+  } else {
+    return 'light'
+  }
+}
+
+function Theme() {
+  if (getTheme() === 'dark') {
+    document.documentElement.classList.add('dark')
   } else {
     document.documentElement.classList.remove('dark')
   }

src/containers/Feed/components/Chennel.jsx → src/containers/Feed/components/Contact.jsx

@@ -7,10 +7,10 @@ import {
   AiFillLinkedin,
 } from 'react-icons/ai'
 
-function Chennel() {
+function Contact() {
   return (
     <>
-      <div className="p-1 mb-3 dark:text-white">🌐 Channel</div>
+      <div className="p-1 mb-3 dark:text-white">💬 Contact</div>
       <ul className="rounded-2xl bg-white dark:bg-zinc-700 p-1 flex flex-col">
         {CONFIG.profile.github && (
           <a
@@ -61,4 +61,4 @@ function Chennel() {
   )
 }
 
-export default Chennel
+export default Contact

src/containers/Feed/components/Tags.jsx

@@ -17,7 +17,7 @@ function TagsMenu({ data }) {
   return (
     <>
       <div className="p-1 mb-3 dark:text-white">🏷️ Tags</div>
-      <ul className="cursor-pointer flex overflow-x-scroll md:block mb-6">
+      <ul className="cursor-pointer flex mobile-x-scroll md:block mb-6">
         {Object.keys(data).map((key) => (
           <li
             key={key}

src/containers/Feed/index.jsx

@@ -5,8 +5,8 @@ import { useRouter } from 'next/router'
 import Post from '@components/PostCard'
 import TagsMenu from './components/Tags'
 import Profile from './components/Profile'
-import Chennel from './components/Chennel'
-import Products from './components/Product'
+import Contact from './components/Contact'
+import Service from './components/Service'
 
 import CONFIG from 'morethan-log.config'
 
@@ -115,8 +115,8 @@ const Home = ({ tags, posts }) => {
       {/* right */}
       <div className="hidden lg:block col-span-3">
         <Profile />
-        <Products />
-        <Chennel />
+        <Service />
+        <Contact />
         <div className="text-gray-500 text-sm mt-3">
           © {CONFIG.profile.name} {from === y || !from ? y : `${from} - ${y}`}
         </div>

src/styles/globals.css

@@ -119,6 +119,10 @@ nav {
   user-select: none;
 }
 
+.mobile-x-scroll {
+  overflow-x: scroll;
+}
+
 @media (max-width: 768px) {
   .sticky-nav-full {
     @apply max-w-full border-b border-opacity-50 border-gray-200 dark:border-gray-600 dark:border-opacity-50;
@@ -140,3 +144,9 @@ nav {
     @apply bg-day bg-opacity-90 dark:bg-night dark:bg-opacity-90;
   }
 }
+
+@media (min-width: 768px) {
+  .mobile-x-scroll {
+    overflow-x: hidden;
+  }
+}