Merge classnames to clsx

2025-07-15 16:51:37 +00:00 · 2022-11-22 14:32:57 +08:00
parent 289b5075ad
commit 77b64ef7fe
32 changed files with 106 additions and 123 deletions
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -1,5 +1,4 @@
 {
  "semi": true,
-  "singleQuote": true,
-  "editorconfig": true
-}
+  "singleQuote": true
+}
--- a/components/DarkModeBtn.tsx
+++ b/components/DarkModeBtn.tsx
@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import useMounted from 'lib/hooks/useMounted';
 import { useTheme } from 'next-themes';
 import { FiMoon, FiSun } from 'react-icons/fi';
@ -12,7 +12,7 @@ const DarkModeBtn = () => {
    return (
      <button>
        <div
-          className={classNames(
+          className={clsx(
            'w-5 h-5 rounded-md animate-pulse',
            'bg-gray-300 dark:bg-gray-500'
          )}
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@ -1,6 +1,6 @@
 import '@docsearch/css';
 import { DocSearch } from '@docsearch/react';
-import cn from 'classnames';
+import clsx from 'clsx';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
@ -75,7 +75,7 @@ const HeadBar = () => {
  return (
    <>
      <header
-        className={cn(
+        className={clsx(
          'flex justify-between mx-auto',
          'max-w-6xl p-4 xl:px-0 h-[84px]',
          'items-center relative'
@ -83,7 +83,7 @@ const HeadBar = () => {
      >
        <Link href="/">
          <span
-            className={cn(
+            className={clsx(
              'font-semibold font-Aref-Ruqaa',
              'text-3xl tracking-widest',
              'select-none'
@ -100,7 +100,7 @@ const HeadBar = () => {
        />

        <nav
-          className={cn(
+          className={clsx(
            'text-lg md:block',
            'bg-white rounded-md',
            'dark:bg-rua-gray-800',
@ -114,18 +114,21 @@ const HeadBar = () => {
          )}
          id="menu"
        >
-          <ul className={cn('flex flex-col ', 'md:flex-row md:items-center')}>
+          <ul className={clsx('flex flex-col ', 'md:flex-row md:items-center')}>
            {txtMenu.map((m) => (
              <li
                key={m.id}
                onClick={handleClick}
-                className={cn('mb-2 last:mb-0 md:mb-0', 'md:mr-4 md:last:mr-0')}
+                className={clsx(
+                  'mb-2 last:mb-0 md:mb-0',
+                  'md:mr-4 md:last:mr-0'
+                )}
              >
                <Link href={m.path}>{m.name}</Link>
              </li>
            ))}
            <li
-              className={cn(
+              className={clsx(
                'mb-2 last:mb-0 md:mb-0',
                'md:mr-4 md:last:mr-0',
                'flex items-center'
@ -145,7 +148,7 @@ const HeadBar = () => {
                />
              ) : (
                <div
-                  className={cn(
+                  className={clsx(
                    'w-[164.453px] h-[30px]',
                    'bg-[#ebedf0] rounded-[40px] animate-pulse'
                  )}
@ -159,4 +162,4 @@ const HeadBar = () => {
  );
 };

-export default HeadBar;
+export default HeadBar;
--- a/components/PostCard.tsx
+++ b/components/PostCard.tsx
@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { Post } from 'types';
-import cn from 'classnames';
+import clsx from 'clsx';

 interface Props {
  post: Post;
@ -11,7 +11,7 @@ const PostCard = ({ post }: Props) => {
    <>
      <Link href={`/p/${post.slug}`} passHref>
        <article
-          className={cn(
+          className={clsx(
            'rounded-xl py-4 px-5 md:p-7 ',
            'hover:bg-sky-100 hover:bg-opacity-50',
            // 'hover:bg-rua-gray-100 hover:bg-opacity-10',
@ -50,4 +50,4 @@ const PostCard = ({ post }: Props) => {
  );
 };

-export default PostCard;
+export default PostCard;
--- a/components/RUA/Button.tsx
+++ b/components/RUA/Button.tsx
@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';

 export type ButtonProps = {
@ -12,7 +12,7 @@ const Button = ({ children, ...rest }: ButtonProps) => {
  return (
    <>
      <button
-        className={classNames(
+        className={clsx(
          'bg-white border border-transparent hover:border-gray-200',
          'outline-none hover:bg-gray-50 focus:ring-4 dark:border-transparent',
          'focus:ring-cyan-200 font-medium rounded-lg text-sm',
--- a/components/RUA/RUACodeSandbox.tsx
+++ b/components/RUA/RUACodeSandbox.tsx
@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import useInView from 'lib/hooks/useInView';
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
@ -6,7 +6,7 @@ import RUALoading from './loading/RUALoading';

 const partten =
  /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
-export const commonClass = classNames(
+export const commonClass = clsx(
  'rounded-lg h-[500px] border-0',
  'overflow-hidden w-full'
 );
@ -39,9 +39,9 @@ const RUACodeSandbox = ({ url }: Props) => {

  return (
    <>
-      <div className={classNames(commonClass, 'relative')}>
+      <div className={clsx(commonClass, 'relative')}>
        <div
-          className={classNames(
+          className={clsx(
            commonClass,
            'absolute flex items-center justify-center',
            load && 'hidden',
@ -54,11 +54,7 @@ const RUACodeSandbox = ({ url }: Props) => {
        <iframe
          ref={ref}
          src={src}
-          className={classNames(
-            commonClass,
-            !load && 'blur-sm',
-            'transition-all'
-          )}
+          className={clsx(commonClass, !load && 'blur-sm', 'transition-all')}
          allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
          sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
          onLoad={handleLoad}
--- a/components/RUA/RUACodepen.tsx
+++ b/components/RUA/RUACodepen.tsx
@ -1,10 +1,10 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import useInView from 'lib/hooks/useInView';
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
 import RUALoading from './loading/RUALoading';

-export const commonClass = classNames(
+export const commonClass = clsx(
  'rounded-lg h-[400px] border-0',
  'overflow-hidden w-full'
 );
@ -37,14 +37,14 @@ const RUACodepen = ({ defaultTab, url }: Props) => {
  return (
    <>
      <div
-        className={classNames(
+        className={clsx(
          commonClass,
          'relative',
          'flex items-center justify-center'
        )}
      >
        <div
-          className={classNames(
+          className={clsx(
            commonClass,
            'absolute flex items-center justify-center',
            load && 'hidden',
@ -54,10 +54,10 @@ const RUACodepen = ({ defaultTab, url }: Props) => {
          <RUALoading />
        </div>

-        <div className={classNames('absolute top-0 left-0', commonClass)}>
+        <div className={clsx('absolute top-0 left-0', commonClass)}>
          <iframe
            ref={ref}
-            className={classNames(
+            className={clsx(
              commonClass,
              !load && 'blur-sm',
              'transition-all h-[402px]',
--- a/components/RUA/RUAPagination.tsx
+++ b/components/RUA/RUAPagination.tsx
@ -59,4 +59,4 @@ const RUAPagination = ({
  );
 };

-export default RUAPagination;
+export default RUAPagination;
--- a/components/RUA/loading/PostCardLoading.tsx
+++ b/components/RUA/loading/PostCardLoading.tsx
@ -1,10 +1,10 @@
 import React from 'react';
-import cn from 'classnames';
+import clsx from 'clsx';

 const PostCardLoading = () => {
  return (
    <article
-      className={cn(
+      className={clsx(
        'rounded-xl py-4 px-5 md:p-7 animate-pulse',
        'bg-sky-100 bg-opacity-50',
        'dark:bg-rua-gray-800 dark:bg-opacity-100',
@ -13,7 +13,7 @@ const PostCardLoading = () => {
      )}
    >
      <div className="flex-1">
-        <h2 className="mb-4 bg-gray-300 rounded-lg w-full md:w-96 h-9 dark:bg-gray-500"></h2>
+        <h2 className="w-full mb-4 bg-gray-300 rounded-lg md:w-96 h-9 dark:bg-gray-500"></h2>

        <div className="flex items-center text-sm">
          <div className="w-16 h-5 mr-4 bg-gray-300 rounded-md last:mr-0 dark:bg-gray-500"></div>
@ -21,7 +21,7 @@ const PostCardLoading = () => {
        </div>
      </div>

-      <div className="hidden md:block w-24 h-6 bg-gray-300 rounded-md dark:bg-gray-500"></div>
+      <div className="hidden w-24 h-6 bg-gray-300 rounded-md md:block dark:bg-gray-500"></div>
    </article>
  );
 };
--- a/components/RUA/loading/RUALoading.tsx
+++ b/components/RUA/loading/RUALoading.tsx
@ -1,21 +1,21 @@
 import React from 'react';
-import cn from 'classnames';
+import clsx from 'clsx';
 import loadingImage from 'public/images/img/mona-loading-default.gif';
 import loadingImageDimmed from 'public/images/img/mona-loading-dimmed.gif';
 import Image from 'next/image';
 import { useTheme } from 'next-themes';

 type Props = {
-  classNames?: string;
+  className?: string;
 };

-const RUALoading = ({ classNames }: Props) => {
+const RUALoading = ({ className: classNames }: Props) => {
  const { systemTheme, theme } = useTheme();
  const currentTheme = theme === 'system' ? systemTheme : theme;

  return (
    <div
-      className={cn(
+      className={clsx(
        'flex loading',
        'flex-col items-center justify-center',
        classNames
--- a/components/RUA/loading/VercelLoading.tsx
+++ b/components/RUA/loading/VercelLoading.tsx
@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import styles from './VercelLoading.module.css';

 const VercelLoading = () => {
@ -7,11 +7,7 @@ const VercelLoading = () => {
      <div className="fixed bottom-[10px] right-[20px] z-[99999]">
        <div
          id="container"
-          className={classNames(
-            styles.container,
-            styles.visible,
-            styles.building
-          )}
+          className={clsx(styles.container, styles.visible, styles.building)}
        >
          <div id="icon-wrapper" className={styles['icon-wrapper']}>
            <svg viewBox="0 0 226 200">
--- a/components/RUA/tab/TabItem.tsx
+++ b/components/RUA/tab/TabItem.tsx
@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';

 export type ItemProps = {
@ -11,9 +11,7 @@ export type ItemProps = {
 const TabItem = ({ showContent, children }: ItemProps) => {
  return (
    <>
-      <div className={classNames('hidden', showContent && '!block')}>
-        {children}
-      </div>
+      <div className={clsx('hidden', showContent && '!block')}>{children}</div>
    </>
  );
 };
--- a/components/RUA/tab/index.tsx
+++ b/components/RUA/tab/index.tsx
@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { useState } from 'react';
 import { ItemProps } from './TabItem';

@ -35,7 +35,7 @@ const Tab = ({ defaultValue, children }: Props) => {
              aria-selected={currentValue === child.props.value}
              key={child.props.label}
              onClick={() => handleSwitch(child.props.value)}
-              className={classNames(
+              className={clsx(
                'px-5 py-3 rounded-t-lg',
                child.props.value === currentValue &&
                  'text-teal-500 border-b-[3px] border-teal-500',
--- a/components/gists/FileContent.tsx
+++ b/components/gists/FileContent.tsx
@ -1,4 +1,3 @@
-import Anchor from 'components/mdx/Anchor';
 import LinkAnchor from 'components/mdx/LinkAnchor';
 import Loading from 'components/RUA/loading/RUALoading';
 import dayjs from 'dayjs';
@ -7,7 +6,7 @@ import dynamic from 'next/dynamic';
 import Link from 'next/link';

 const GistsCode = dynamic(() => import('components/gists/GistsCode'), {
-  loading: () => <Loading classNames="h-[300px]" />,
+  loading: () => <Loading className="h-[300px]" />,
 });

 type Props = {
@ -48,4 +47,4 @@ const FileContent = ({ gists }: Props) => {
  );
 };

-export default FileContent;
+export default FileContent;
--- a/components/gists/GistsCode.module.css
+++ b/components/gists/GistsCode.module.css
@ -13,4 +13,4 @@

 .wrapper .loading span {
  margin: unset;
-}
+}
--- a/components/gists/GistsCode.tsx
+++ b/components/gists/GistsCode.tsx
@ -1,5 +1,5 @@
 import rehypePrism from '@mapbox/rehype-prism';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { createElement, Fragment } from 'react';
 import rehypeReact from 'rehype-react';
 import remarkGfm from 'remark-gfm';
@ -33,21 +33,21 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
          <div className="h-[30px] bg-[#f6f8fa] dark:bg-[hsl(220,13%,18%)] flex">
            <div className="flex items-center h-full mx-3">
              <div
-                className={classNames(
+                className={clsx(
                  'box-border inline-block',
                  'w-[13px] h-[13px] mr-2',
                  'rounded-full bg-[#ce5347]'
                )}
              ></div>
              <div
-                className={classNames(
+                className={clsx(
                  'box-border inline-block',
                  'w-[13px] h-[13px] mr-2',
                  'rounded-full bg-[#d6a243]'
                )}
              ></div>
              <div
-                className={classNames(
+                className={clsx(
                  'box-border inline-block',
                  'w-[13px] h-[13px]',
                  'rounded-full bg-[#58a942]'
@ -56,7 +56,7 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
            </div>

            <div
-              className={classNames(
+              className={clsx(
                'px-4 bg-white',
                'leading-[30px]',
                'dark:bg-[hsl(220,13%,18%)] dark:border-b dark:border-b-[rgb(128,203,196)]',
--- a/components/gists/UserInfo.tsx
+++ b/components/gists/UserInfo.tsx
@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { GetUser } from 'lib/fetcher';
 import Image from 'next/image';
 import avatar from 'public/images/img/avatar.svg';
@ -12,7 +12,7 @@ const UserInfo = ({ user }: Props) => {
  return (
    <>
      <div
-        className={classNames(
+        className={clsx(
          'flex md:items-center flex-1',
          'max-w-[280px] md:block',
          'mb-4 flex-col md:flex-row'
@ -20,7 +20,7 @@ const UserInfo = ({ user }: Props) => {
      >
        <div className="flex md:flex-col">
          <div
-            className={classNames(
+            className={clsx(
              'w-16 h-16 mr-4 overflow-hidden',
              'md:w-auto h-auto'
            )}
--- a/components/mdx/Anchor.tsx
+++ b/components/mdx/Anchor.tsx
@ -1,5 +1,5 @@
 import { AnchorHTMLAttributes, forwardRef } from 'react';
-import cn from 'classnames';
+import clsx from 'clsx';
 import { FiExternalLink } from 'react-icons/fi';

 interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
@ -17,7 +17,7 @@ const Anchor = forwardRef<HTMLAnchorElement, Props>(
          target={external ? '_blank' : undefined}
        >
          <span
-            className={cn(
+            className={clsx(
              'mx-[2px] text-teal-500 relative',
              'before:left-0 before:top-[1px] before:block before:absolute',
              'before:w-full before:h-full before:transition-all before:shadow-underline',
--- a/components/mdx/Image.tsx
+++ b/components/mdx/Image.tsx
@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import NextImage, { ImageProps } from 'next/image';

 interface Props extends ImageProps {}
@ -9,11 +9,7 @@ const Image = ({ alt, ...rest }: Props) => {
      <NextImage className="mx-auto" alt={alt} {...rest} />
      {alt && (
        <span
-          className={classNames(
-            'block mx-auto',
-            'text-center text-gray-400',
-            'my-2'
-          )}
+          className={clsx('block mx-auto', 'text-center text-gray-400', 'my-2')}
        >
          {alt}
        </span>
--- a/components/mdx/LinkAnchor.tsx
+++ b/components/mdx/LinkAnchor.tsx
@ -1,4 +1,4 @@
-import cn from 'classnames';
+import clsx from 'clsx';
 import { ReactNode } from 'react';
 import { FiExternalLink } from 'react-icons/fi';

@ -11,7 +11,7 @@ const Anchor = ({ children, external = true }: Props) => {
  return (
    <>
      <span
-        className={cn(
+        className={clsx(
          'mx-[2px] text-teal-500 relative',
          'before:left-0 before:top-[1px] before:block before:absolute',
          'before:w-full before:h-full before:transition-all before:shadow-underline',
@ -26,4 +26,4 @@ const Anchor = ({ children, external = true }: Props) => {
  );
 };

-export default Anchor;
+export default Anchor;
--- a/components/mdx/Pre.tsx
+++ b/components/mdx/Pre.tsx
@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import useCopyToClipboard from 'lib/hooks/useCopyToClipboard';
 import { DetailedHTMLProps, HTMLAttributes, lazy, useRef } from 'react';

@ -24,7 +24,7 @@ const Pre = ({ ...rest }: Props) => {
    <>
      <pre
        ref={preRef}
-        className={classNames(className, 'relative group')}
+        className={clsx(className, 'relative group')}
        {...props}
      >
        {children}
--- a/components/pages/ProjectCard.tsx
+++ b/components/pages/ProjectCard.tsx
@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Project } from 'pages/projects';
 import { Children, cloneElement, isValidElement } from 'react';
 import { VscGithubInverted } from 'react-icons/vsc';
@ -19,7 +19,7 @@ const ProjectCard = ({ project, icon }: ProjectCardProps) => {
  return (
    <>
      <div
-        className={classNames(
+        className={clsx(
          'py-3 px-4 rounded-lg bg-slate-100',
          'hover:bg-slate-200',
          'transition-all duration-300',
@ -37,7 +37,7 @@ const ProjectCard = ({ project, icon }: ProjectCardProps) => {
          rel="noreferrer"
        >
          <h2
-            className={classNames(
+            className={clsx(
              'text-xl overflow-hidden',
              'text-ellipsis whitespace-nowrap'
            )}
@ -45,7 +45,7 @@ const ProjectCard = ({ project, icon }: ProjectCardProps) => {
            {project.name}
          </h2>
          <span
-            className={classNames(
+            className={clsx(
              'overflow-hidden break-keep text-ellipsis',
              'whitespace-nowrap inline-block',
              'w-[inherit]'
@ -59,4 +59,4 @@ const ProjectCard = ({ project, icon }: ProjectCardProps) => {
  );
 };

-export default ProjectCard;
+export default ProjectCard;
--- a/components/post/CopyButton.tsx
+++ b/components/post/CopyButton.tsx
@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useState } from 'react';
 import styles from './CopytButton.module.css';

@ -19,7 +19,7 @@ const CopyButton = ({ onCopy: onClick }: CopyButtonProps) => {
  return (
    <>
      <button
-        className={classNames(
+        className={clsx(
          'flex items-center justify-center',
          'border rounded-md absolute',
          'top-4 right-4 p-[6px] opacity-0',
@ -31,14 +31,14 @@ const CopyButton = ({ onCopy: onClick }: CopyButtonProps) => {
        onClick={handleClick}
      >
        <span
-          className={classNames(
+          className={clsx(
            'relative w-5 h-5 text-gray-400 child',
            'transition-all duration-300',
            styles.child
          )}
        >
          <svg
-            className={classNames(
+            className={clsx(
              'absolute top-0 left-0 fill-current',
              'opacity-100 transition-all duration-300',
              copied && styles['on_copy']
@ -48,7 +48,7 @@ const CopyButton = ({ onCopy: onClick }: CopyButtonProps) => {
            <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path>
          </svg>
          <svg
-            className={classNames(
+            className={clsx(
              'absolute top-0 left-0 fill-green-400',
              'scale-[0.33] transition-all duration-300',
              'opacity-0',
--- a/components/post/PostToc.tsx
+++ b/components/post/PostToc.tsx
@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Anchor from 'components/mdx/Anchor';
 import { SingleToc } from 'lib/utils';
 import { Fragment, useState } from 'react';
@ -27,7 +27,7 @@ const PostToc = ({ toc, tocLength }: Props) => {
  return (
    <>
      <div
-        className={classNames(
+        className={clsx(
          'rounded-lg transition-all',
          'duration-500 overflow-hidden',
          'my-4'
@ -37,7 +37,7 @@ const PostToc = ({ toc, tocLength }: Props) => {
        }}
      >
        <h2
-          className={classNames(
+          className={clsx(
            styles.head,
            'bg-white !m-[unset] p-4',
            'rounded-lg border border-gray-300',
@ -51,7 +51,7 @@ const PostToc = ({ toc, tocLength }: Props) => {
          <span>What&apos;s inside?</span>

          <FiChevronDown
-            className={classNames(
+            className={clsx(
              show && 'rotate-180',
              'transition-all duration-500'
            )}
--- a/layouts/BlogList.tsx
+++ b/layouts/BlogList.tsx
@ -1,4 +1,4 @@
-import cn from 'classnames';
+import clsx from 'clsx';

 type Props = {
  children: React.ReactElement | React.ReactElement[];
@ -8,7 +8,7 @@ const BlogList = ({ children }: Props) => {
  return (
    <>
      <h1
-        className={cn(
+        className={clsx(
          'text-5xl font-bold text-center font-Barlow',
          'mt-8 mb-20 text-gray-800 dark:text-gray-200'
        )}
--- a/package.json
+++ b/package.json
@ -11,7 +11,7 @@
    "lint": "next lint",
    "test": "jest --watch",
    "test-ci": "jest --ci --coverage",
-    "pretty": "prettier --write \"./**/*.{js,jsx,ts,tsx,json}\""
+    "pretty": "prettier --write \"./**/*.{js,jsx,ts,tsx,json}\" --ignore-unknown"
  },
  "dependencies": {
    "@codesandbox/sandpack-react": "^1.17.0",
@ -20,7 +20,6 @@
    "@mapbox/rehype-prism": "^0.8.0",
    "@tweenjs/tween.js": "^18.6.4",
    "algoliasearch": "^4.14.2",
-    "classnames": "^2.3.2",
    "dayjs": "^1.11.6",
    "next": "13.0.4",
    "next-mdx-remote": "^4.2.0",
@ -57,6 +56,7 @@
    "postcss": "^8.4.19",
    "prettier": "^2.7.1",
    "tailwindcss": "^3.2.4",
-    "typescript": "4.9.3"
+    "typescript": "4.9.3",
+    "clsx": "^1.2.1"
  }
-}
+}
--- a/pages/about.tsx
+++ b/pages/about.tsx
@ -1,5 +1,5 @@
 import TWEEN from '@tweenjs/tween.js';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { gltfLoader, manager } from 'lib/gltfLoader';
 import { getMousePosition } from 'lib/utils';
 import { useTheme } from 'next-themes';
@ -169,7 +169,7 @@ const About: NextPageWithLayout = () => {
        <canvas ref={ref} className="w-full h-full"></canvas>
        {showLoading && (
          <div
-            className={classNames(
+            className={clsx(
              'absolute top-0 left-0',
              'items-center flex justify-center',
              'w-full h-full transition-all duration-500',
@ -184,7 +184,7 @@ const About: NextPageWithLayout = () => {

      <main className="h-[calc(100vh-142px)] flex flex-col">
        <div
-          className={classNames(
+          className={clsx(
            'flex max-w-3xl',
            'px-10 py-4 mx-auto lg:px-0 lg:py-10'
          )}
--- a/pages/g/[id].tsx
+++ b/pages/g/[id].tsx
@ -112,4 +112,4 @@ Gist.getLayout = function getLayout(page: ReactElement) {
  return <MainLayout>{page}</MainLayout>;
 };

-export default Gist;
+export default Gist;
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -1,4 +1,4 @@
-import cn from 'classnames';
+import clsx from 'clsx';
 import { gltfLoader, manager } from 'lib/gltfLoader';
 import { getMousePosition } from 'lib/utils';
 import dynamic from 'next/dynamic';
@ -138,7 +138,7 @@ const Home: NextPageWithLayout = () => {
      <main className="h-[calc(100vh-142px)] flex justify-center items-center text-xl">
        <div className="z-0 flex flex-col w-full h-full max-w-4xl px-4 py-32 text-2xl">
          <h1 className="flex pb-4 text-5xl">
-            <span className={cn('font-Aleo font-semibold', styles.gradient)}>
+            <span className={clsx('font-Aleo font-semibold', styles.gradient)}>
              Hi there
            </span>
            <span className="ml-3">
@ -158,7 +158,7 @@ const Home: NextPageWithLayout = () => {
            <canvas ref={ref} className="absolute top-0 left-0"></canvas>
            {showLoading && (
              <div
-                className={cn(
+                className={clsx(
                  'absolute top-0 left-0 z-10',
                  'items-center flex justify-center',
                  'w-full h-full transition-all duration-500',
@ -180,4 +180,4 @@ Home.getLayout = function getLayout(page) {
  return <MainLayout>{page}</MainLayout>;
 };

-export default Home;
+export default Home;
--- a/pages/projects.tsx
+++ b/pages/projects.tsx
@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { GetStaticProps, InferGetStaticPropsType } from 'next';
 import dynamic from 'next/dynamic';
 import { ReactElement } from 'react';
@ -36,7 +36,7 @@ const Projects = ({
            <h1 className="mb-4 text-2xl">Projects</h1>
          </div>
          <div
-            className={classNames(
+            className={clsx(
              'grid grid-cols-1 lg:grid-cols-3',
              'md:grid-cols-2 gap-5'
            )}
@ -56,7 +56,7 @@ const Projects = ({
            <h1 className="mb-4 text-2xl">Seft Hosts</h1>
          </div>
          <div
-            className={classNames(
+            className={clsx(
              'grid grid-cols-1 lg:grid-cols-3',
              'md:grid-cols-2 gap-5'
            )}
@ -146,4 +146,4 @@ Projects.getLayout = function getLayout(page: ReactElement) {
  return <MainLayout>{page}</MainLayout>;
 };

-export default Projects;
+export default Projects;
--- a/scripts/build-search.mjs
+++ b/scripts/build-search.mjs
@ -38,11 +38,7 @@ async function pushAlgolia(gists) {

    // check the output of the response in the console
    console.log(
-      `🎉 Sucessfully added ${
-        algoliaResponse.objectIDs.length
-      } records to Algolia search. Object IDs:\n${algoliaResponse.objectIDs.join(
-        '\n'
-      )}`
+      `🎉 Sucessfully added ${algoliaResponse.objectIDs.length} records to Algolia search.`
    );
  } catch (e) {
    console.log(e);
@ -65,4 +61,4 @@ function main() {
  isTest ? test(gists) : pushAlgolia(gists);
 }

-main();
+main();
--- a/yarn.lock
+++ b/yarn.lock
@ -2894,11 +2894,6 @@ cjs-module-lexer@^1.0.0:
  resolved "https://registry.npmmirror.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
  integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==

-classnames@^2.3.2:
-  version "2.3.2"
-  resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
-  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
-
 clean-set@^1.1.2:
  version "1.1.2"
  resolved "https://registry.npmjs.org/clean-set/-/clean-set-1.1.2.tgz#76d8bf238c3e27827bfa73073ecdfdc767187070"
@ -2961,6 +2956,11 @@ clone-response@^1.0.2:
  dependencies:
    mimic-response "^1.0.0"

+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 co@^4.6.0:
  version "4.6.0"
  resolved "https://registry.npmmirror.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"