Merge pull request #109 from JohnsonMao/refactor/code

Refactor code

i18n/index.ts

@@ -1,9 +1,9 @@
-export const defaultLocale = 'zh-TW';
+export const defaultLocale = 'zh';
 export const locales = [defaultLocale, 'en'] as const;
 export type Locale = (typeof locales)[number];
 
 const dictionaries = {
-  'zh-TW': () => import('./locales/zh-TW').then((module) => module.default),
+  zh: () => import('./locales/zh').then((module) => module.default),
   en: () => import('./locales/en').then((module) => module.default),
 };
 

i18n/locales/zh-TW/index.ts → i18n/locales/zh/index.ts

@@ -2,10 +2,10 @@ import common from './common';
 import metadata from './metadata';
 import notFound from './notFound';
 
-const zhTW = {
+const zh = {
   common,
   metadata,
   notFound,
 };
 
-export default zhTW;
+export default zh;

src/app/layout.tsx

@@ -3,10 +3,10 @@ import type { Metadata } from 'next';
 import { locales } from '~/i18n';
 import { createMetadata, createFeedOptions } from '~/data/metadata';
 import generateRSS from '@/utils/generateRSS';
-import '@/assets/css/globals.css';
 
 import Html from './Html';
 import Providers from './Providers';
+import './css/globals.css';
 
 export const dynamic = 'force-static';
 

src/components/Card/Card.tsx

@@ -1,11 +1,10 @@
-import Image from 'next/image';
-
 import { BsCalendar4Week } from 'react-icons/bs';
 import { MdOutlineWidgets } from 'react-icons/md';
 import { AiOutlineTags } from 'react-icons/ai';
 
 import { formatDate } from '@/utils/date';
 import Link from '../Link';
+import Image from '../Image';
 
 type CardProps = DataFrontmatter;
 
@@ -25,7 +24,7 @@ function Card({
       <div className="relative h-48 w-1/3 shrink-0">
         {image && (
           <Image
-            className="object-cover"
+            className="h-full object-cover"
             src={image}
             alt={`${title} cover`}
             fill

src/components/Header/Menu.tsx

@@ -9,7 +9,7 @@ import Link from '../Link';
 
 type MenuItem = {
   text: string;
-  href: LinkWithoutLocalePathProps['href'];
+  href: DynamicRoutesWithoutLocalePath;
 };
 
 export type MenuProps = {
@@ -19,7 +19,7 @@ export type MenuProps = {
 function Menu({ menu }: MenuProps) {
   const pathname = usePathname();
 
-  const isActiveLink = (href: LinkWithoutLocalePathProps['href']) => {
+  const isActiveLink = (href: DynamicRoutesWithoutLocalePath) => {
     const locale = getLocale(pathname) || '';
     const localePrefix = new RegExp(`^/${locale}/?`);
     const adjustedPathname = pathname.replace(localePrefix, '/');

src/components/Link/Link.tsx

@@ -26,19 +26,11 @@ function Link<T extends string = string>({
 }: LinkProps<T>) {
   const pathname = usePathname();
 
-  const isObjectHref = typeof href === 'object';
+  const isObjectHref = typeof href === 'object' || href.startsWith('#');
   const isAnchorLink = !isObjectHref && href.startsWith('#');
   const isInternalLink = !isObjectHref && href.startsWith('/');
 
-  if (isObjectHref) {
-    return (
-      <NextLink href={href} className={className} {...otherProps}>
-        {children}
-      </NextLink>
-    );
-  }
-
-  if (isAnchorLink) {
+  if (isObjectHref || isAnchorLink) {
     return (
       <NextLink href={href as Route} className={className} {...otherProps}>
         {children}
@@ -66,7 +58,7 @@ function Link<T extends string = string>({
       href={href}
       target="_blank"
       rel="noopener noreferrer"
-      className={cn('inline-flex align-top', className)}
+      className={cn('inline-flex', className)}
       {...otherProps}
     >
       {children}

src/components/Link/link.test.tsx

@@ -33,8 +33,8 @@ describe('Link component', () => {
   it.each([
     ['/internal', '/internal'],
     ['/en/internal', '/en/internal'],
-    ['/zh-TW/internal', '/zh-TW/internal'],
-    ['/fr-CH/internal', '/internal'],
+    ['/zh/internal', '/zh/internal'],
+    ['/fr/internal', '/internal'],
   ])(
     'should render correct link element with pathname %s',
     (pathname, expected) => {

src/hooks/__tests__/useI18n.test.ts

@@ -13,10 +13,10 @@ describe('useI18n hook', () => {
   });
 
   it.each([
-    ['/test/path', 'zh-TW'],
+    ['/test/path', 'zh'],
     ['/en/test/path', 'en'],
-    ['/zh-TW/test/path', 'zh-TW'],
-    ['/fr-CH/test/path', 'zh-TW'],
+    ['/zh/test/path', 'zh'],
+    ['/fr/test/path', 'zh'],
   ])(
     'should return the correct language code and dictionary',
     (pathname, expected) => {

src/middleware.ts

@@ -15,7 +15,7 @@ export function middleware(request: NextRequest) {
   const locale = getLocale(acceptLanguage, defaultLocale);
   const redirectURL = new URL(`/${locale}${pathname}`, request.url);
 
-  if (locale !== 'zh-TW') {
+  if (locale !== defaultLocale) {
     return NextResponse.redirect(redirectURL);
   }
 

src/utils/__tests__/getLocale.test.ts

@@ -8,9 +8,9 @@ describe('get locale function', () => {
   });
 
   it.each([
-    ['zh-TW,zh;q=0.9,en-US;q=0.8,en;q=0.7', 'zh-TW'],
+    ['zh-TW,zh;q=0.9,en-US;q=0.8,en;q=0.7', 'zh'],
     ['en-US,en;q=0.9,zh-TW;q=0.8,ja;q=0.7', 'en'],
-    ['fr-CH,fr;q=0.9,de-CH;q=0.8,de;q=0.7', 'zh-TW'],
+    ['fr-CH,fr;q=0.9,de-CH;q=0.8,de;q=0.7', 'zh'],
   ])(
     'should extract the preferred language code from the Accept-Language header',
     (acceptLanguage, expected) => {
@@ -19,10 +19,10 @@ describe('get locale function', () => {
   );
 
   it.each([
-    ['/test/path', 'zh-TW'],
+    ['/test/path', 'zh'],
     ['/en/test/path', 'en'],
-    ['/zh-TW/test/path', 'zh-TW'],
-    ['/fr-CH/test/path', 'zh-TW'],
+    ['/zh/test/path', 'zh'],
+    ['/fr/test/path', 'zh'],
   ])(
     'should extract the language code from the path string',
     (pathname, expected) => {

tailwind.config.js

@@ -7,13 +7,13 @@ const tailwindcssConfig = {
   theme: {
     extend: {
       colors: {
-        primary: { ...colors.cyan, DEFAULT: colors.cyan[500] }
+        primary: { ...colors.lime, DEFAULT: colors.lime[500] },
       },
       typography: {
         DEFAULT: {
           css: {
             a: {
-              textDecoration: 'none'
+              textDecoration: 'none',
             },
             code: {
               margin: '0 4px',
@@ -22,6 +22,11 @@ const tailwindcssConfig = {
               background: '#1e1e1e',
               color: '#ff8888',
             },
+            li: {
+              a: {
+                margin: 0,
+              },
+            },
             'code::before': { content: '' },
             'code::after': { content: '' },
           },