Merge branch 'dev'

.eslintrc.js

@@ -1,8 +1,9 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ['@nnecec/eslint-config/react-universal', 'next'],
+  extends: ['@nnecec/eslint-config/react-universal', 'next/core-web-vitals'],
   ignorePatterns: ['/posts/**/**', '.next', 'public', 'node_modules'],
   rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
     'unicorn/filename-case': 'off',
   },
 }

.husky/pre-push

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npm run lint
+

.npmrc

@@ -0,0 +1,3 @@
+public-hoist-pattern[]=*@nextui-org/theme*
+public-hoist-pattern[]=*eslint*
+public-hoist-pattern[]=*prettier*

app/(enter)/curation/framer-motion/first-step/page.tsx

@@ -127,7 +127,6 @@ export default function FirstStep() {
           <div className="flex flex-col gap-2">
             <label htmlFor="spring-mass">Mass</label>
             <input
-              className="range"
               id="spring-mass"
               max="10"
               min="1"
@@ -137,7 +136,6 @@ export default function FirstStep() {
             />
             <label htmlFor="spring-damping">Damping</label>
             <input
-              className="range"
               max={5}
               min={0}
               onChange={(e: any) => setDamping(e.target.value)}
@@ -147,7 +145,6 @@ export default function FirstStep() {
             />
             <label htmlFor="spring-stiffness">Stiffness</label>
             <input
-              className="range"
               max={500}
               min={1}
               onChange={(e: any) => setStiffness(e.target.value)}
@@ -221,14 +218,7 @@ export default function FirstStep() {
           <div className="flex flex-col gap-2">
             <div className="card-title">Inertia</div>
             <label htmlFor="tween-type">Velocity</label>
-            <input
-              className="range"
-              max="100"
-              min="0"
-              onChange={(e: any) => setVelocity(e.target.value)}
-              type="range"
-              value={velocity}
-            />
+            <input max="100" min="0" onChange={(e: any) => setVelocity(e.target.value)} type="range" value={velocity} />
 
             <motion.div
               initial={{
@@ -278,12 +268,7 @@ export default function FirstStep() {
 
             <label className="label cursor-pointer">
               <span className="label-text">Enable Layout Animation</span>
-              <input
-                checked={layout}
-                className="toggle"
-                onChange={e => setLayout(e.target.checked)}
-                type="checkbox"
-              />
+              <input checked={layout} className="toggle" onChange={e => setLayout(e.target.checked)} type="checkbox" />
             </label>
 
             <div className="flex justify-around">
@@ -333,7 +318,7 @@ export default function FirstStep() {
                   style={{
                     width: '100%',
                   }}
-                  className="rounded border bg-base-100 p-4 text-2xl"
+                  className="bg-base-100 rounded border p-4 text-2xl"
                   key={id}
                   layoutId={id}
                   onClick={() => setLayoutId(id)}
@@ -349,7 +334,7 @@ export default function FirstStep() {
                       inset: '0.5rem',
                       position: 'absolute',
                     }}
-                    className="rounded border bg-base-100 p-4 text-2xl"
+                    className="bg-base-100 rounded border p-4 text-2xl"
                     layoutId={layoutId}
                     onClick={() => setLayoutId(null)}
                   >

app/(enter)/page.tsx

@@ -11,14 +11,13 @@ export const metadata: Metadata = {
 
 export default function Page() {
   return (
-    <section className="-mt-header flex h-screen items-center pt-header">
+    <section className="-mt-header flex h-screen items-center pt-header font-bold">
       <h1 className="max-w-5xl text-5xl md:text-8xl">
         <WavingHand />
         <br />
         Hi, I'm nnecec.
         <span className="text-4xl opacity-70 md:text-6xl">
-          This is my blog about the understanding of{' '}
-          <HoverText className="bg-[#FFE70B]">JavaScript</HoverText>,{' '}
+          This is my blog about the understanding of <HoverText className="bg-[#FFE70B]">JavaScript</HoverText>,{' '}
           <HoverText className="bg-[rgb(20,158,202)]">React</HoverText> and more.
         </span>
       </h1>

app/(enter)/posts/[...slug]/page.tsx

@@ -37,11 +37,7 @@ export default async function PostPage({ params }: Props) {
         <h1>{post.title}</h1>
         <div className="flex flex-col gap-2 text-sm">
           <div>Last updated: {post.date} </div>
-          <div>
-            {post.tags?.map(tag => (
-              <Tag key={tag}>{tag}</Tag>
-            ))}
-          </div>
+          <div>{post.tags?.map(tag => <Tag key={tag}>{tag}</Tag>)}</div>
           <div className="flex gap-4">
             <a
               href="http://creativecommons.org/licenses/by-nc/4.0/"

app/(enter)/posts/page.tsx

@@ -14,25 +14,21 @@ export default async function PostsPage({ searchParams }: { searchParams: { tag?
   const { posts, tags } = await getAllPosts(searchParams.tag)
 
   return (
-    <div className="prose relative mx-auto py-4">
+    <div className="prose relative mx-auto py-4 dark:prose-invert">
       <TagPicker tags={tags} />
 
       <div>
         {posts.map(post => {
           return (
             <div className="mb-4" key={post.slug}>
               <Link className="no-underline" href={`/posts${post.slug}`}>
-                <h2 className="inline-block bg-current from-pink-500 to-yellow-500 bg-clip-text hover:bg-gradient-to-r hover:text-transparent">
+                <h2 className="inline-block bg-current from-pink-500 to-yellow-500 bg-clip-text text-primary hover:bg-gradient-to-r hover:text-transparent">
                   {post.title}
                 </h2>
               </Link>
 
               <div className="text-sm">{post.date}</div>
-              <div>
-                {post.tags?.map(tag => (
-                  <Tag key={tag}>{tag}</Tag>
-                ))}
-              </div>
+              <div>{post.tags?.map(tag => <Tag key={tag}>{tag}</Tag>)}</div>
             </div>
           )
         })}

app/layout.tsx

@@ -1,10 +1,11 @@
-import { ThemeProvider } from '~/core/components/theme'
 import { SITE_CONFIG } from '~/core/utils/constants'
 
 import type { Metadata } from 'next'
 
-import '~/core/styles/index.css'
+import { Providers } from './providers'
+
 import '~/core/styles/heti.css'
+import '~/core/styles/globals.css'
 import '~/core/styles/custom.css'
 
 const trackingId = process.env.GOOGLE_TRACKING_ID
@@ -31,10 +32,21 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <link href="/favicon/site.webmanifest" rel="manifest" />
         <meta title={SITE_CONFIG.title} />
         <meta content={SITE_CONFIG.description} name="description" />
+        {process.env.NODE_ENV === 'production' && (
+          <script
+            data-endpoint="https://datapulse.app/api/v1/event"
+            data-workspace="cljxpa07r0xjb8j37c7woz5fx"
+            defer
+            id="datapulse"
+            src="https://datapulse.app/datapulse.min.js"
+            type="text/javascript"
+          />
+        )}
       </head>
 
       <body>
-        <ThemeProvider enableSystem>{children}</ThemeProvider>
+        <Providers>{children}</Providers>
+
         {process.env.NODE_ENV === 'development' || !trackingId ? undefined : (
           <>
             <script async src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`} />

app/providers.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { NextUIProvider } from '@nextui-org/react'
+
+import { ThemeProvider } from '~/core/components/theme'
+
+import type { ReactNode } from 'react'
+
+export function Providers({ children }: { children: ReactNode }) {
+  return (
+    <ThemeProvider attribute="class" enableSystem>
+      <NextUIProvider>{children}</NextUIProvider>
+    </ThemeProvider>
+  )
+}

core/api/post.ts

@@ -41,12 +41,14 @@ export async function getAllPosts(tag?: string): Promise<{ posts: Post[]; tags:
     if (post?.tags) {
       tags.push(...post.tags)
     }
-    if (tag) {
-      if (post.tags?.includes(tag)) {
+    if (post.status !== 0) {
+      if (tag) {
+        if (post.tags?.includes(tag)) {
+          posts.push(post)
+        }
+      } else {
         posts.push(post)
       }
-    } else {
-      posts.push(post)
     }
   }
 

core/components/about/contact.tsx

@@ -1,4 +1,6 @@
 'use client'
+import { Fragment } from 'react'
+import { Button, Tooltip } from '@nextui-org/react'
 import {
   IconBookmarks,
   IconBrandGithub,
@@ -11,8 +13,6 @@ import {
 import Image from 'next/image'
 import Link from 'next/link'
 
-import telegramJPG from '~/core/assets/telegram.webp'
-import wechatJPG from '~/core/assets/wechat.webp'
 import { SITE_CONFIG } from '~/core/utils/constants'
 
 export const Contact = () => {
@@ -23,56 +23,75 @@ export const Contact = () => {
           <div className="">
             <h2 className="mb-8 text-center text-7xl">Find me.</h2>
             <div className="flex flex-wrap justify-center gap-4 text-center">
-              <button aria-label="email" className="btn">
+              <Button aria-label="email" as="a" className="cursor-pointer" isIconOnly variant="light">
                 <Link href={`mailto:${SITE_CONFIG.email}`}>
                   <IconMail />
                 </Link>
-              </button>
+              </Button>
 
-              <button aria-label="github" className="btn">
-                <Link href={SITE_CONFIG.social.github} target="_blank">
-                  <IconBrandGithub />
-                </Link>
-              </button>
-
-              <label aria-label="wechat" className="btn" htmlFor="my-modal">
-                <IconBrandWechat />
-              </label>
-              <input className="modal-toggle" id="my-modal" type="checkbox" />
-              <label className="modal cursor-pointer" htmlFor="my-modal">
-                <label className="modal-box relative w-[200px]" htmlFor="">
-                  <Image alt="wechat_qrcode" height={200} src={wechatJPG} width={200} />
-                </label>
-              </label>
+              <Button
+                aria-label="github"
+                as="a"
+                className="cursor-pointer"
+                href={SITE_CONFIG.social.github}
+                isIconOnly
+                rel="noreferrer"
+                target="_blank"
+                variant="light"
+              >
+                <IconBrandGithub />
+              </Button>
 
-              <button aria-label="twitter" className="btn">
-                <a href={SITE_CONFIG.social.twitter} rel="noreferrer" target="_blank">
-                  <IconBrandTwitter />
-                </a>
-              </button>
+              <Tooltip content={<Image alt="wechat_qrcode" height={160} src="/assets/wechat.webp" width={160} />}>
+                <Button isIconOnly variant="light">
+                  <IconBrandWechat />
+                </Button>
+              </Tooltip>
 
-              <button aria-label="instagram" className="btn">
-                <a href={SITE_CONFIG.social.instagram} rel="noreferrer" target="_blank">
-                  <IconBrandInstagram />
-                </a>
-              </button>
+              <Button
+                aria-label="twitter"
+                as="a"
+                className="cursor-pointer"
+                href={SITE_CONFIG.social.twitter}
+                isIconOnly
+                rel="noreferrer"
+                target="_blank"
+                variant="light"
+              >
+                <IconBrandTwitter />
+              </Button>
 
-              <label aria-label="telegram" className="btn" htmlFor="telegram-modal">
-                <IconBrandTelegram />
-              </label>
+              <Button
+                aria-label="instagram"
+                as="a"
+                className="cursor-pointer"
+                href={SITE_CONFIG.social.instagram}
+                isIconOnly
+                rel="noreferrer"
+                target="_blank"
+                variant="light"
+              >
+                <IconBrandInstagram />
+              </Button>
 
-              <button aria-label="bento" className="btn">
-                <a href={SITE_CONFIG.social.bento} rel="noreferrer" target="_blank">
-                  <IconBookmarks />
-                </a>
-              </button>
+              <Tooltip content={<Image alt="telegram_qrcode" height={160} src="/assets/telegram.webp" width={160} />}>
+                <Button isIconOnly variant="light">
+                  <IconBrandTelegram />
+                </Button>
+              </Tooltip>
 
-              <input className="modal-toggle" id="telegram-modal" type="checkbox" />
-              <label className="modal cursor-pointer" htmlFor="telegram-modal">
-                <label className="modal-box relative w-[200px]" htmlFor="">
-                  <Image alt="telegram_qrcode" height={200} src={telegramJPG} width={200} />
-                </label>
-              </label>
+              <Button
+                aria-label="bento"
+                as="a"
+                className="cursor-pointer"
+                href={SITE_CONFIG.social.bento}
+                isIconOnly
+                rel="noreferrer"
+                target="_blank"
+                variant="light"
+              >
+                <IconBookmarks />
+              </Button>
             </div>
           </div>
         </div>