Rename components name

__tests__/components/nav-bar.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import NavBar from 'components/NavBar';
+import NavBar from 'components/nav-bar';
 import '@testing-library/jest-dom';
 
 describe('NavBar', () => {

__tests__/components/post-card.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import PostCard from 'components/PostCard';
+import PostCard from 'components/post-card';
 
 const post = {
   slug: 'first-post',

components/common/back-to-top.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import Button from 'components/RUA/Button';
+import Button from 'components/rua/button';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { FiChevronUp } from 'react-icons/fi';
 

components/dark-mode-btn.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import useMounted from 'lib/hooks/useMounted';
+import useMounted from 'lib/hooks/use-mounted';
 import { useTheme } from 'next-themes';
 import { memo } from 'react';
 import { FiMoon, FiSun } from 'react-icons/fi';

components/gists/file-content.tsx

@@ -1,12 +1,12 @@
-import LinkAnchor from 'components/mdx/LinkAnchor';
-import Loading from 'components/RUA/loading/RUALoading';
+import LinkAnchor from 'components/mdx/link-anchor';
+import Loading from 'components/rua/loading/rua-loading';
 import dayjs from 'dayjs';
 import { GistData } from 'lib/fetcher';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { memo, Suspense } from 'react';
 
-const GistsCode = dynamic(() => import('components/gists/GistsCode'), {
+const GistsCode = dynamic(() => import('components/gists/gists-code'), {
   suspense: true,
 });
 

components/gists/gists-code.tsx

@@ -7,7 +7,7 @@ import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
 import { GistsFile } from 'types';
 import { unified } from 'unified';
-import styles from './GistsCode.module.css';
+import styles from './gists-code.module.css';
 
 interface Props {
   file: GistsFile;

components/mdx/components.ts

@@ -1,11 +1,11 @@
-import Anchor from 'components/mdx/Anchor';
-import Image from 'components/mdx/Image';
-import Pre from 'components/mdx/Pre';
-import RUACodepen from 'components/RUA/RUACodepen';
-import RUACodeSandbox from 'components/RUA/RUACodeSandbox';
-import RUASandpack from 'components/RUA/RUASandpack';
-import Tab from 'components/RUA/tab';
-import TabItem from 'components/RUA/tab/TabItem';
+import Anchor from 'components/mdx/anchor';
+import Image from 'components/mdx/image';
+import Pre from 'components/mdx/pre';
+import RUACodepen from 'components/rua/rua-codepen';
+import RUACodeSandbox from 'components/rua/rua-code-sandbox';
+import RUASandpack from 'components/rua/rua-sandpack';
+import Tab from 'components/rua/tab';
+import TabItem from 'components/rua/tab/tab-item';
 
 const components = {
   RUASandpack,

components/mdx/pre.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import CopyButton from 'components/post/CopyButton';
-import useCopyToClipboard from 'lib/hooks/useCopyToClipboard';
+import CopyButton from 'components/post/copy-button';
+import useCopyToClipboard from 'lib/hooks/use-copy-to-clipboard';
 import {
   DetailedHTMLProps,
   HTMLAttributes,

components/nav-bar.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { memo, useEffect, useState } from 'react';
 import { FiMenu } from 'react-icons/fi';
 
-const DarkModeBtn = dynamic(() => import('components/DarkModeBtn'));
+const DarkModeBtn = dynamic(() => import('components/dark-mode-btn'));
 
 const txtMenu = [
   {

components/post/copy-button.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { memo, useState } from 'react';
-import styles from './CopytButton.module.css';
+import styles from './copyt-button.module.css';
 
 export type CopyButtonProps = {
   className?: string;

components/post/post-toc.tsx

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
-import Anchor from 'components/mdx/Anchor';
+import Anchor from 'components/mdx/anchor';
 import { SingleToc } from 'lib/utils';
 import { Fragment, memo, useState } from 'react';
 import { FiChevronDown } from 'react-icons/fi';
-import styles from './PostToc.module.css';
+import styles from './post-toc.module.css';
 
 interface Props {
   toc: SingleToc[];

components/rua/loading/rua-loading.tsx

@@ -9,7 +9,7 @@ type Props = {
   className?: string;
 };
 
-const RUALoading = ({ className: classNames }: Props) => {
+const RuaLoading = ({ className: classNames }: Props) => {
   const { systemTheme, theme } = useTheme();
   const currentTheme = theme === 'system' ? systemTheme : theme;
 
@@ -34,4 +34,4 @@ const RUALoading = ({ className: classNames }: Props) => {
   );
 };
 
-export default memo(RUALoading);
+export default memo(RuaLoading);

components/rua/loading/vercel-loading.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { memo } from 'react';
-import styles from './VercelLoading.module.css';
+import styles from './vercel-loading.module.css';
 
 const VercelLoading = () => {
   return (

components/rua/rua-code-sandbox.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
-import useInView from 'lib/hooks/useInView';
+import useInView from 'lib/hooks/use-in-view';
 import { useTheme } from 'next-themes';
 import { memo, useEffect, useState } from 'react';
-import RUALoading from './loading/RUALoading';
+import RUALoading from './loading/rua-loading';
 
 const pattern =
   /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)/;
@@ -15,7 +15,7 @@ type Props = {
   url: string;
 };
 
-const RUACodeSandbox = ({ url }: Props) => {
+const RuaCodeSandbox = ({ url }: Props) => {
   const isUrl = pattern.test(url);
   const { systemTheme, theme } = useTheme();
   const currentTheme = theme === 'system' ? systemTheme : theme ?? 'light';
@@ -64,4 +64,4 @@ const RUACodeSandbox = ({ url }: Props) => {
   );
 };
 
-export default memo(RUACodeSandbox);
+export default memo(RuaCodeSandbox);

components/rua/rua-codepen.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
-import useInView from 'lib/hooks/useInView';
+import useInView from 'lib/hooks/use-in-view';
 import { useTheme } from 'next-themes';
 import { memo, useEffect, useState } from 'react';
-import RUALoading from './loading/RUALoading';
+import RUALoading from './loading/rua-loading';
 
 export const commonClass = clsx(
   'rounded-lg h-[400px] border-0',
@@ -14,7 +14,7 @@ type Props = {
   url: string;
 };
 
-const RUACodepen = ({ defaultTab, url }: Props) => {
+const RuaCodepen = ({ defaultTab, url }: Props) => {
   const urlArr = url.split('/');
   const { systemTheme, theme } = useTheme();
   const currentTheme = theme === 'system' ? systemTheme : theme ?? 'light';
@@ -80,4 +80,4 @@ const RUACodepen = ({ defaultTab, url }: Props) => {
   );
 };
 
-export default memo(RUACodepen);
+export default memo(RuaCodepen);

components/rua/rua-pagination.tsx

@@ -2,7 +2,7 @@ import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { DetailedHTMLProps, HTMLAttributes, memo } from 'react';
 
-const Button = dynamic(() => import('components/RUA/Button'));
+const Button = dynamic(() => import('components/rua/button'));
 
 type Props = {
   hasPrev: boolean;
@@ -13,7 +13,7 @@ type Props = {
   total?: number;
 } & DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
 
-const RUAPagination = ({
+const RuaPagination = ({
   hasPrev,
   hasNext,
   prevLink,
@@ -59,4 +59,4 @@ const RUAPagination = ({
   );
 };
 
-export default memo(RUAPagination);
+export default memo(RuaPagination);

components/rua/rua-sandpack.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 interface Props extends SandpackProps {}
 
-const RUASandpack = ({ ...rest }: Props) => {
+const RuaSandpack = ({ ...rest }: Props) => {
   const { systemTheme, theme } = useTheme();
   const currentTheme = theme === 'system' ? systemTheme : theme;
 
@@ -20,4 +20,4 @@ const RUASandpack = ({ ...rest }: Props) => {
   );
 };
 
-export default memo(RUASandpack);
+export default memo(RuaSandpack);

components/rua/tab/index.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React, { memo, useState } from 'react';
-import { ItemProps } from './TabItem';
+import { ItemProps } from './tab-item';
 
 type Props = {
   defaultValue: string | number;

content/posts/build-own-store-with-usesyncexternalstore.mdx

@@ -142,7 +142,7 @@ const Couter = () => {
 };
 ```
 
-<RUASandpack
+<RuaSandpack
   template="react-ts"
   files={{
     '/Input.tsx': {
@@ -242,7 +242,7 @@ const Count = () => {
 };
 ```
 
-<RUASandpack
+<RuaSandpack
   template="react-ts"
   files={{
     '/Input.tsx': {
@@ -373,7 +373,7 @@ export const useTodoStore = (): [Todo, RUADispatch<TodoAction>] => [
 ];
 ```
 
-<RUASandpack
+<RuaSandpack
   template="react-ts"
   files={{
     '/Input.tsx': {

content/posts/generic-component-encapsulate-reusable-component.mdx

@@ -22,7 +22,7 @@ tags: [TypeScript, React]
 
 React Hook Forms 对 TypeScript 支持良好，有了 TypeScript 我们就可以在开发时验证表单类型。而表单的数据类型也是后续封装通用组件较为繁琐的一个地方。
 
-<RUASandpack
+<RuaSandpack
   template="react-ts"
   files={{
     '/App.tsx':
@@ -207,7 +207,7 @@ const sayIt = <T extends number | string>(p: Person<T>) => {
 
 来看一个简单的小组件，该组件可以以一个常见的对象类型 `Record<string, unknown>` 来根据指定的 key 访问其值，并展示在 DOM 上。
 
-<RUASandpack
+<RuaSandpack
   template="react-ts"
   files={{
     '/App.tsx':
@@ -354,4 +354,4 @@ const Input = <T extends Record<string, unknown>>({
 />
 ```
 
-<RUACodeSandbox url="https://codesandbox.io/s/reusable-input-o7e4jt?file=/src/App.tsx" />
+<RuaCodeSandbox url="https://codesandbox.io/s/reusable-input-o7e4jt?file=/src/App.tsx" />

content/posts/hello-world.mdx

@@ -14,7 +14,7 @@ console.log('Hello world');
 
 ## Say hello to world
 
-<RUASandpack
+<RuaSandpack
   template="react"
   files={{
     '/App.js': sandpack['hello-world'].hello,

content/posts/how-to-load-a-background-with-threejs.mdx

@@ -45,7 +45,7 @@ renderer.render(scene, camera);
 
 Now, we can get a black canvas in our document.
 
-<RUASandpack
+<RuaSandpack
   template="react"
   files={{
     '/App.js': sandpack['how-to-load-a-background-with-threejs'].firstScene,
@@ -125,7 +125,7 @@ controls.enablePan = false;
 controls.update();
 ```
 
-<RUASandpack
+<RuaSandpack
   template="react"
   files={{
     '/App.js': sandpack['how-to-load-a-background-with-threejs'].loadBackground,

content/posts/javascript-practice-multiplication-table.mdx

@@ -291,4 +291,4 @@ window.onload = function () {
 };
 ```
 
-<RUACodepen url="https://codepen.io/Defectink/pen/BaLQZZQ" />
+<RuaCodepen url="https://codepen.io/Defectink/pen/BaLQZZQ" />

content/posts/object-around-in-threejs.mdx

@@ -87,4 +87,4 @@ earth.getWorldPosition(position);
 
 ## Demo
 
-<RUACodeSandbox url="https://codesandbox.io/s/arounding-box-b1g4qq" />
+<RuaCodeSandbox url="https://codesandbox.io/s/arounding-box-b1g4qq" />

content/posts/react18-new-hooks.mdx

@@ -26,7 +26,7 @@ tags: [React, TypeScript]
 
 `useTransition` 返回的元组中包含两个值 `[pending, setTransiton]` ，分别是 `setTransiton` 方法和表示正在过渡的状态 `pending` 。如果需要在过渡时展示特定的 UI 就可以使用 `pending` 来控制状态。
 
-<RUASandpack
+<RuaSandpack
   template="react-ts"
   files={{
     '/Button.tsx': {
@@ -45,7 +45,7 @@ tags: [React, TypeScript]
 
 将原本的状态值 `value` 与 `useDeferredValue` 返回的副本相比较就会发现 `value` 会随着 UI 一起被更新，而被延迟的状态 `deferred` 会等待 UI 更新结束后再做更新。
 
-<RUASandpack
+<RuaSandpack
   template="react-ts"
   files={{
     '/Button.tsx': {
@@ -65,7 +65,7 @@ tags: [React, TypeScript]
 - 为页面中需要唯一 ID 元素提供 ID，例如 `<label for="ID">` 。
 - SSR 到客户端注入时需要 ID 避免错误。
 
-<RUASandpack
+<RuaSandpack
   template="react-ts"
   files={{
     '/Input.tsx': {
@@ -147,7 +147,7 @@ export default store;
 
 其中， `listeners` 用于存放 `subscribe` 的回调，在我们更新状态后需要通知 React 来更新组件。所以在 `setState` 中遍历执行。之所以使用 `Set()` 是因为 `subscribe` 还需要返回一个函数用于注销 `listener` 。
 
-<RUASandpack
+<RuaSandpack
   template="react-ts"
   files={{
     '/Input.tsx': {
@@ -171,7 +171,7 @@ CSS-in-JS 库通常需要在运行时插入或修改 `<style>`  标签等。当
 
 解决这个问题的最好办法就是所有东西呈现给浏览器绘制前就进行改变。没错 `useInsertionEffect` 与 `useEffect` 有着同样的签名，但它会同步的在所有 DOM 更改之前触发。比 `useLayoutEffect` 还要早触发，这样就可以用于在重绘之前注入样式。
 
-<RUASandpack
+<RuaSandpack
   template="react-ts"
   files={{
     '/App.tsx': sandpack['react18-new-hooks'].useInsertionEffect,

content/posts/setting-up-docsearch-for-nextjs.mdx

@@ -166,7 +166,7 @@ myPosts.push({
 Algolia API is easy to use. First we need specify the index name.
 
 ```js
-const index = client.initIndex('RUA');
+const index = client.initIndex('rua');
 ```
 
 And save the objects.

layouts/main-layout.tsx

@@ -1,8 +1,8 @@
 import dynamic from 'next/dynamic';
 
-const Footer = dynamic(() => import('components/Footer'));
-const HeadBar = dynamic(() => import('components/NavBar'));
-const BackToTop = dynamic(() => import('components/common/BackToTop'));
+const Footer = dynamic(() => import('components/footer'));
+const HeadBar = dynamic(() => import('components/nav-bar'));
+const BackToTop = dynamic(() => import('components/common/back-to-top'));
 
 type Props = {
   children: React.ReactNode;

pages/_app.tsx

@@ -1,4 +1,4 @@
-import useRouterLoading from 'lib/hooks/useRouterLoading';
+import useRouterLoading from 'lib/hooks/use-router-loading';
 import { ThemeProvider } from 'next-themes';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
@@ -10,7 +10,7 @@ import 'styles/rua.css';
 import { AppPropsWithLayout } from 'types';
 
 const VercelLoading = dynamic(
-  () => import('components/RUA/loading/VercelLoading'),
+  () => import('components/rua/loading/vercel-loading'),
   {
     suspense: true,
   }

pages/about.tsx

@@ -1,7 +1,7 @@
 import TWEEN from '@tweenjs/tween.js';
 import clsx from 'clsx';
-import MainLayout from 'layouts/MainLayout';
-import { gltfLoader, manager } from 'lib/gltfLoader';
+import MainLayout from 'layouts/main-layout';
+import { gltfLoader, manager } from 'lib/gltf-loader';
 import { getMousePosition } from 'lib/utils';
 import { useTheme } from 'next-themes';
 import dynamic from 'next/dynamic';
@@ -10,7 +10,7 @@ import { InitFn, THREE, useThree } from 'rua-three';
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
 import { NextPageWithLayout } from 'types';
 
-const Loading = dynamic(() => import('components/RUA/loading/RUALoading'), {
+const Loading = dynamic(() => import('components/rua/loading/rua-loading'), {
   suspense: true,
 });
 

pages/blog/[page].tsx

@@ -1,16 +1,16 @@
-import PostCardLoading from 'components/RUA/loading/PostCardLoading';
-import MainLayout from 'layouts/MainLayout';
+import PostCardLoading from 'components/rua/loading/post-card-loading';
+import MainLayout from 'layouts/main-layout';
 import { getPostListPath, postLists, PostPerPage } from 'lib/posts';
 import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
 import dynamic from 'next/dynamic';
 import { Fragment, ReactElement, Suspense } from 'react';
 import { Post } from 'types';
 
-const PostCard = dynamic(() => import('components/PostCard'), {
+const PostCard = dynamic(() => import('components/post-card'), {
   suspense: true,
 });
-const BlogList = dynamic(() => import('layouts/BlogList'), { suspense: true });
-const Pagination = dynamic(() => import('components/RUA/RUAPagination'), {
+const BlogList = dynamic(() => import('layouts/blog-list'), { suspense: true });
+const Pagination = dynamic(() => import('components/rua/rua-pagination'), {
   suspense: true,
 });
 

pages/blog/index.tsx

@@ -1,16 +1,16 @@
-import PostCardLoading from 'components/RUA/loading/PostCardLoading';
-import MainLayout from 'layouts/MainLayout';
+import PostCardLoading from 'components/rua/loading/post-card-loading';
+import MainLayout from 'layouts/main-layout';
 import { postLists, PostPerPage } from 'lib/posts';
 import { GetStaticProps, InferGetStaticPropsType } from 'next';
 import dynamic from 'next/dynamic';
 import { Fragment, ReactElement, Suspense } from 'react';
 import { Post } from 'types';
 
-const PostCard = dynamic(() => import('components/PostCard'), {
+const PostCard = dynamic(() => import('components/post-card'), {
   suspense: true,
 });
-const BlogList = dynamic(() => import('layouts/BlogList'), { suspense: true });
-const Pagination = dynamic(() => import('components/RUA/RUAPagination'), {
+const BlogList = dynamic(() => import('layouts/blog-list'), { suspense: true });
+const Pagination = dynamic(() => import('components/rua/rua-pagination'), {
   suspense: true,
 });
 

pages/g/[id].tsx

@@ -1,7 +1,7 @@
-import LinkAnchor from 'components/mdx/LinkAnchor';
+import LinkAnchor from 'components/mdx/link-anchor';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import MainLayout from 'layouts/MainLayout';
+import MainLayout from 'layouts/main-layout';
 import { getGists, getSignalGist, SingalGist } from 'lib/fetcher';
 import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
 import dynamic from 'next/dynamic';
@@ -11,7 +11,7 @@ import avatar from 'public/images/img/avatar.svg';
 import { ParsedUrlQuery } from 'querystring';
 import { Fragment, ReactElement, Suspense } from 'react';
 
-const GistsCode = dynamic(() => import('components/gists/GistsCode'), {
+const GistsCode = dynamic(() => import('components/gists/gists-code'), {
   suspense: true,
 });
 

pages/gists/[p].tsx

@@ -1,19 +1,19 @@
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import MainLayout from 'layouts/MainLayout';
+import MainLayout from 'layouts/main-layout';
 import { GetGists, getGists, GetUser, getUser } from 'lib/fetcher';
 import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
 import dynamic from 'next/dynamic';
 import { ParsedUrlQuery } from 'querystring';
 import { ReactElement, Suspense } from 'react';
 
-const UserInfo = dynamic(() => import('components/gists/UserInfo'), {
+const UserInfo = dynamic(() => import('components/gists/user-info'), {
   suspense: true,
 });
-const FileContent = dynamic(() => import('components/gists/FileContent'), {
+const FileContent = dynamic(() => import('components/gists/file-content'), {
   suspense: true,
 });
-const Pagination = dynamic(() => import('components/RUA/RUAPagination'), {
+const Pagination = dynamic(() => import('components/rua/rua-pagination'), {
   suspense: true,
 });
 

pages/gists/index.tsx

@@ -1,18 +1,18 @@
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import MainLayout from 'layouts/MainLayout';
+import MainLayout from 'layouts/main-layout';
 import { GetGists, getGists, GetUser, getUser } from 'lib/fetcher';
 import { GetStaticProps, InferGetStaticPropsType } from 'next';
 import dynamic from 'next/dynamic';
 import { ReactElement, Suspense } from 'react';
 
-const UserInfo = dynamic(() => import('components/gists/UserInfo'), {
+const UserInfo = dynamic(() => import('components/gists/user-info'), {
   suspense: true,
 });
-const FileContent = dynamic(() => import('components/gists/FileContent'), {
+const FileContent = dynamic(() => import('components/gists/file-content'), {
   suspense: true,
 });
-const Pagination = dynamic(() => import('components/RUA/RUAPagination'), {
+const Pagination = dynamic(() => import('components/rua/rua-pagination'), {
   suspense: true,
 });
 

pages/index.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import MainLayout from 'layouts/MainLayout';
-import { gltfLoader, manager } from 'lib/gltfLoader';
+import MainLayout from 'layouts/main-layout';
+import { gltfLoader, manager } from 'lib/gltf-loader';
 import { getMousePosition } from 'lib/utils';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
@@ -11,7 +11,7 @@ import styles from 'styles/index/index.module.css';
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
 import type { NextPageWithLayout } from 'types';
 
-const Loading = dynamic(() => import('components/RUA/loading/RUALoading'), {
+const Loading = dynamic(() => import('components/rua/loading/rua-loading'), {
   suspense: true,
 });
 

pages/p/[slug].tsx

@@ -1,10 +1,10 @@
 import rehypePrism from '@mapbox/rehype-prism';
 import components from 'components/mdx/components';
-import PostCommnetLine from 'components/post/PostCommnetLine';
-import PostToc from 'components/post/PostToc';
-import data from 'content/mdxData';
-import MainLayout from 'layouts/MainLayout';
-import useInView from 'lib/hooks/useInView';
+import PostCommnetLine from 'components/post/post-commnet-line';
+import PostToc from 'components/post/post-toc';
+import data from 'content/mdx-data';
+import MainLayout from 'layouts/main-layout';
+import useInView from 'lib/hooks/use-in-view';
 import { allPostsPath, readSinglePost } from 'lib/posts';
 import { generateToc, SingleToc } from 'lib/utils';
 import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
@@ -15,7 +15,7 @@ import { ReactElement, Suspense } from 'react';
 import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
 
-const PostComment = dynamic(() => import('components/post/PostComment'), {
+const PostComment = dynamic(() => import('components/post/post-comment'), {
   suspense: true,
 });
 

pages/projects.tsx

@@ -12,9 +12,9 @@ import {
 } from 'react-icons/si';
 import { VscGithubInverted } from 'react-icons/vsc';
 import { HiPhoto } from 'react-icons/hi2';
-import MainLayout from 'layouts/MainLayout';
+import MainLayout from 'layouts/main-layout';
 
-const ProjectCard = dynamic(() => import('components/pages/ProjectCard'), {
+const ProjectCard = dynamic(() => import('components/pages/project-card'), {
   suspense: true,
 });
 

scripts/build-search.mjs

@@ -31,7 +31,7 @@ async function pushAlgolia(gists) {
     );
 
     // initialize the index with your index name
-    const index = client.initIndex('RUA');
+    const index = client.initIndex('rua');
 
     // save the objects!
     const algoliaResponse = await index.replaceAllObjects(records);
@@ -61,4 +61,4 @@ function main() {
   isTest ? test(gists) : pushAlgolia(gists);
 }
 
-main();
+main();