xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-15 16:51:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

add gist loading page

Browse Source 
format code
This commit is contained in:
DefectingCat
2023-08-14 13:36:15 +08:00
parent d6447c6a8e
commit 32d8d48514
44 changed files with 142 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.prettierrc.json
View File

@ -1,4 +1,5 @@
{
"semi": true,
"singleQuote": true
"singleQuote": true,
"endOfLine": "lf"
}

2
app/blog/layout.tsx
View File

@ -12,7 +12,7 @@ export default function PageLayout({ children }: { children: ReactNode }) {
<h1
className={clsx(
'text-5xl font-bold text-center font-Barlow',
'mt-8 mb-20 text-gray-800 dark:text-gray-200'
'mt-8 mb-20 text-gray-800 dark:text-gray-200',
)}
>
Blog posts

12
app/blog/post-card-loading.tsx
View File

@ -10,7 +10,7 @@ const PostCardLoading = () => {
'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
'flex justify-between text-gray-800 ',
'mb-4 dark:text-gray-200',
'flex-col'
'flex-col',
)}
>
<div className="flex justify-between">
@ -18,7 +18,7 @@ const PostCardLoading = () => {
className={clsx(
'w-96 bg-gray-300 h-7 animate-pulse',
'mb-4 text-3xl font-semibold font-Barlow',
'rounded-lg dark:bg-gray-500'
'rounded-lg dark:bg-gray-500',
)}
></h2>
@ -26,7 +26,7 @@ const PostCardLoading = () => {
className={clsx(
'hidden animate-pulse h-5 bg-gray-300',
'dark:bg-gray-500 lg:block w-24',
'rounded-lg'
'rounded-lg',
)}
></div>
</div>
@ -36,13 +36,13 @@ const PostCardLoading = () => {
<div
className={clsx(
'mr-4 last:mr-0 w-9 animate-pulse h-5',
'rounded-lg bg-gray-300 dark:bg-gray-500'
'rounded-lg bg-gray-300 dark:bg-gray-500',
)}
></div>
<div
className={clsx(
'mr-4 last:mr-0 w-9 animate-pulse h-5',
'rounded-lg bg-gray-300 dark:bg-gray-500'
'rounded-lg bg-gray-300 dark:bg-gray-500',
)}
></div>
</div>
@ -51,7 +51,7 @@ const PostCardLoading = () => {
className={clsx(
'hidden animate-pulse h-5 bg-gray-300',
'dark:bg-gray-500 lg:block w-24',
'rounded-lg lg:hidden'
'rounded-lg lg:hidden',
)}
></div>
</div>

2
app/blog/post-card.tsx
View File

@ -19,7 +19,7 @@ const PostCard = ({ post }: Props) => {
'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
'flex justify-between text-gray-800 ',
'mb-4 dark:text-gray-200',
'flex-col'
'flex-col',
)}
>
<div className="flex justify-between">

2
app/dark-mode-btn.tsx
View File

@ -15,7 +15,7 @@ const DarkModeBtn = () => {
<div
className={clsx(
'w-5 h-5 rounded-md animate-pulse',
'bg-gray-300 dark:bg-gray-500'
'bg-gray-300 dark:bg-gray-500',
)}
></div>
</button>

2
app/footer.tsx
View File

@ -14,7 +14,7 @@ const Footer = () => {
className={clsx(
'flex items-center flex-col',
'justify-between py-4',
'lg:flex-row'
'lg:flex-row',
)}
>
<div className="mb-1">&copy; {nowDay} Powered by Next.js 💙 xfy</div>

5
app/g/loading.tsx Normal file
View File

@ -0,0 +1,5 @@
const loading = () => {
return <>loading</>;
};
export default loading;

6
app/gists/file-content-skeleton.tsx
View File

@ -9,7 +9,7 @@ export default function FileContentLoading() {
'md:text-lg h-7 bg-gray-200',
'animate-pulse w-48 rounded-lg',
'dark:bg-rua-gray-700',
'mb-2'
'mb-2',
)}
></h1>
{/* last active */}
@ -17,7 +17,7 @@ export default function FileContentLoading() {
className={clsx(
'h-4 w-72 bg-gray-200',
'animate-pulse rounded-lg',
'dark:bg-rua-gray-700'
'dark:bg-rua-gray-700',
)}
></div>
{/* code block */}
@ -25,7 +25,7 @@ export default function FileContentLoading() {
className={clsx(
'w-full h-[488px] rounded-lg',
'animate-pulse dark:bg-rua-gray-700',
'mt-3 bg-gray-200'
'mt-3 bg-gray-200',
)}
></div>
</div>

12
app/gists/gists-code-skeleton.tsx
View File

@ -5,7 +5,7 @@ import styles from './gists-code.module.css';
const bodyClass = clsx(
'rounded-lg',
'h-4 bg-gray-300',
'mb-2 last:mb-0 animate-pulse'
'mb-2 last:mb-0 animate-pulse',
);
const allLength = [
500, 400, 300, 200, 332, 402, 105, 399, 501, 285, 378, 123, 325, 456,
@ -21,21 +21,21 @@ const GistsCode = () => {
className={clsx(
'box-border inline-block',
'w-[13px] h-[13px] mr-2',
'rounded-full bg-[#ce5347]'
'rounded-full bg-[#ce5347]',
)}
></div>
<div
className={clsx(
'box-border inline-block',
'w-[13px] h-[13px] mr-2',
'rounded-full bg-[#d6a243]'
'rounded-full bg-[#d6a243]',
)}
></div>
<div
className={clsx(
'box-border inline-block',
'w-[13px] h-[13px]',
'rounded-full bg-[#58a942]'
'rounded-full bg-[#58a942]',
)}
></div>
</div>
@ -46,13 +46,13 @@ const GistsCode = () => {
'leading-[30px]',
'dark:bg-[hsl(220,13%,18%)] dark:border-b dark:border-b-[rgb(128,203,196)]',
'overflow-hidden whitespace-nowrap overflow-ellipsis',
'flex items-center'
'flex items-center',
)}
>
<span
className={clsx(
'bg-gray-300 animate-pulse',
'w-20 h-4 block rounded'
'w-20 h-4 block rounded',
)}
></span>
</div>

8
app/gists/gists-code.tsx
View File

@ -39,21 +39,21 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
className={clsx(
'box-border inline-block',
'w-[13px] h-[13px] mr-2',
'rounded-full bg-[#ce5347]'
'rounded-full bg-[#ce5347]',
)}
></div>
<div
className={clsx(
'box-border inline-block',
'w-[13px] h-[13px] mr-2',
'rounded-full bg-[#d6a243]'
'rounded-full bg-[#d6a243]',
)}
></div>
<div
className={clsx(
'box-border inline-block',
'w-[13px] h-[13px]',
'rounded-full bg-[#58a942]'
'rounded-full bg-[#58a942]',
)}
></div>
</div>
@ -63,7 +63,7 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
'px-4 bg-white',
'leading-[30px]',
'dark:bg-[hsl(220,13%,18%)] dark:border-b dark:border-b-[rgb(128,203,196)]',
'overflow-hidden whitespace-nowrap overflow-ellipsis'
'overflow-hidden whitespace-nowrap overflow-ellipsis',
)}
>
{file.filename}

6
app/gists/gists-skeleton.tsx
View File

@ -11,7 +11,7 @@ const GistSkeleton = () => {
className={clsx(
'w-8 h-8 rounded-full',
'animate-pulse bg-gray-300',
'dark:bg-gray-400 '
'dark:bg-gray-400 ',
)}
></div>
<h1
@ -20,7 +20,7 @@ const GistSkeleton = () => {
'whitespace-nowrap overflow-ellipsis',
'w-[234px] animate-pulse bg-gray-300',
'h-6 rounded-lg',
'dark:bg-gray-400'
'dark:bg-gray-400',
)}
></h1>
</div>
@ -30,7 +30,7 @@ const GistSkeleton = () => {
'ml-10 text-gray-400',
'w-48 h-4 animate-pulse bg-gray-300',
'rounded-lg',
'dark:bg-gray-400'
'dark:bg-gray-400',
)}
></p>

10
app/gists/user-info-skeleton.tsx
View File

@ -8,7 +8,7 @@ const UserInfoLoading = () => {
className={clsx(
'flex md:items-center flex-1',
'max-w-[280px] md:block',
'mb-4 flex-col md:flex-row'
'mb-4 flex-col md:flex-row',
)}
>
<div className="flex md:flex-col">
@ -16,7 +16,7 @@ const UserInfoLoading = () => {
className={clsx(
'w-16 h-16 mr-4 overflow-hidden',
'md:w-72 md:h-72 bg-gray-200 rounded-full',
'animate-pulse dark:bg-rua-gray-800'
'animate-pulse dark:bg-rua-gray-800',
)}
></div>
@ -26,7 +26,7 @@ const UserInfoLoading = () => {
'text-xl font-bold font-Barlow md:text-2xl w-44',
'animate-pulse h-6 rounded-lg',
'bg-gray-200 dark:bg-rua-gray-800',
'my-2'
'my-2',
)}
></h1>
@ -34,7 +34,7 @@ const UserInfoLoading = () => {
className={clsx(
'text-xl text-gray-400 font-Barlow md:text-2xl',
'animate-pulse h-5 rounded-lg w-32',
'bg-gray-200 dark:bg-rua-gray-800'
'bg-gray-200 dark:bg-rua-gray-800',
)}
></h2>
</div>
@ -43,7 +43,7 @@ const UserInfoLoading = () => {
<div
className={clsx(
'my-4 w-44 h-4 rounded-lg animate-pulse',
'bg-gray-200 dark:bg-rua-gray-800'
'bg-gray-200 dark:bg-rua-gray-800',
)}
></div>

4
app/gists/user-info.tsx
View File

@ -13,14 +13,14 @@ const UserInfo = async () => {
className={clsx(
'flex md:items-center flex-1',
'max-w-[280px] md:block',
'mb-4 flex-col md:flex-row'
'mb-4 flex-col md:flex-row',
)}
>
<div className="flex md:flex-col">
<div
className={clsx(
'w-16 h-16 mr-4 overflow-hidden',
'md:w-auto h-auto'
'md:w-auto h-auto',
)}
>
<Image

4
app/home-modle.tsx
View File

@ -25,7 +25,7 @@ const Model = () => {
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('./libs/draco/');
loader.setDRACOLoader(dracoLoader);
}
},
);
useEffect(() => {
// After model loaded.
@ -94,7 +94,7 @@ const HomeModel = () => {
'justify-center items-center',
'bg-bluish-gray dark:bg-rua-gray-900',
'transition-all duration-300',
!modelLoading && 'opacity-0'
!modelLoading && 'opacity-0',
)}
>
<Loading />

12
app/nav-bar.tsx
View File

@ -77,7 +77,7 @@ const HeadBar = () => {
className={clsx(
'flex justify-between mx-auto',
'max-w-6xl p-4 xl:px-0 h-[84px]',
'items-center relative'
'items-center relative',
)}
>
<Link href="/">
@ -85,7 +85,7 @@ const HeadBar = () => {
className={clsx(
'font-semibold',
'text-3xl tracking-widest',
'select-none'
'select-none',
)}
>
RUA!
@ -109,7 +109,7 @@ const HeadBar = () => {
'md:right-[unset] md:top-[unset]',
'w-1/3 md:w-auto z-20',
'md:dark:bg-transparent',
showMenu || 'hidden'
showMenu || 'hidden',
)}
id="menu"
>
@ -120,7 +120,7 @@ const HeadBar = () => {
onClick={handleClick}
className={clsx(
'mb-2 last:mb-0 md:mb-0',
'md:mr-4 md:last:mr-0'
'md:mr-4 md:last:mr-0',
)}
>
<Link href={m.path}>{m.name}</Link>
@ -130,7 +130,7 @@ const HeadBar = () => {
className={clsx(
'mb-2 last:mb-0 md:mb-0',
'md:mr-4 md:last:mr-0',
'flex items-center'
'flex items-center',
)}
>
<DarkModeBtn />
@ -149,7 +149,7 @@ const HeadBar = () => {
<div
className={clsx(
'w-[164.453px] h-[30px]',
'bg-[#ebedf0] rounded-[40px] animate-pulse'
'bg-[#ebedf0] rounded-[40px] animate-pulse',
)}
></div>
)}

2
app/p/[slug]/page.tsx
View File

@ -12,7 +12,7 @@ import { Post } from 'types';
const PostToc = dynamic(() => import('components/post/post-toc'));
const PostCommnetLine = dynamic(
() => import('components/post/post-commnet-line')
() => import('components/post/post-commnet-line'),
);
const PostComment = dynamic(() => import('components/post/post-comment'));

4
app/projects/loading.tsx
View File

@ -19,7 +19,7 @@ const Loading = () => {
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5'
'md:grid-cols-2 gap-5',
)}
>
{projects.map((_, i) => (
@ -35,7 +35,7 @@ const Loading = () => {
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5'
'md:grid-cols-2 gap-5',
)}
>
{selfHosts.map((_, i) => (

4
app/projects/page.tsx
View File

@ -19,7 +19,7 @@ export default function Page() {
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5'
'md:grid-cols-2 gap-5',
)}
>
{projects.map((item, i) => (
@ -39,7 +39,7 @@ export default function Page() {
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5'
'md:grid-cols-2 gap-5',
)}
>
{selfHosts.map((item, i) => (

6
app/projects/project-card-skeleton.tsx
View File

@ -11,7 +11,7 @@ const PojectCardSkeleton = () => {
'transition-all duration-300',
'flex items-center cursor-pointer',
'justify-between dark:bg-rua-gray-800',
'hover:dark:bg-rua-gray-700'
'hover:dark:bg-rua-gray-700',
)}
>
<VscGithubInverted className="w-8 h-8" />
@ -22,7 +22,7 @@ const PojectCardSkeleton = () => {
'text-xl overflow-hidden',
'text-ellipsis whitespace-nowrap',
'h-6 w-[100px] animate-pulse',
'bg-gray-300 rounded-lg'
'bg-gray-300 rounded-lg',
)}
></h2>
<span
@ -31,7 +31,7 @@ const PojectCardSkeleton = () => {
'whitespace-nowrap inline-block',
'w-[inherit] mt-1',
'h-5 w-[300px] animate-pulse',
'bg-gray-300 rounded-lg'
'bg-gray-300 rounded-lg',
)}
></span>
</a>

6
app/projects/project-card.tsx
View File

@ -25,7 +25,7 @@ const ProjectCard = ({ project, icon }: ProjectCardProps) => {
'transition-all duration-300',
'flex items-center cursor-pointer',
'justify-between dark:bg-rua-gray-800',
'hover:dark:bg-rua-gray-700'
'hover:dark:bg-rua-gray-700',
)}
>
{Icon ? Icon : <VscGithubInverted className="w-8 h-8" />}
@ -39,7 +39,7 @@ const ProjectCard = ({ project, icon }: ProjectCardProps) => {
<h2
className={clsx(
'text-xl overflow-hidden',
'text-ellipsis whitespace-nowrap'
'text-ellipsis whitespace-nowrap',
)}
>
{project.name}
@ -48,7 +48,7 @@ const ProjectCard = ({ project, icon }: ProjectCardProps) => {
className={clsx(
'overflow-hidden break-keep text-ellipsis',
'whitespace-nowrap inline-block',
'w-[inherit]'
'w-[inherit]',
)}
>
{project.description}

2
components/common/back-to-top.tsx
View File

@ -40,7 +40,7 @@ const BackToTop = () => {
'right-4 bottom-4',
'lg:right-8 lg:bottom-8',
'transition-all duration-300',
showTop ? 'visible scale-100' : 'invisible scale-0'
showTop ? 'visible scale-100' : 'invisible scale-0',
)}
>
<FiChevronUp className="w-6 h-6" />

4
components/mdx/anchor.tsx
View File

@ -22,7 +22,7 @@ const Anchor = forwardRef<HTMLAnchorElement, Props>(
'before:left-0 before:top-[1px] before:block before:absolute',
'before:w-full before:h-full before:transition-all before:shadow-underline',
'hover:before:shadow-throughline',
'dark:text-teal-600'
'dark:text-teal-600',
)}
>
{children}
@ -31,7 +31,7 @@ const Anchor = forwardRef<HTMLAnchorElement, Props>(
</a>
</>
);
}
},
);
Anchor.displayName = 'Anchor';

2
components/mdx/link-anchor.tsx
View File

@ -18,7 +18,7 @@ const Anchor = ({ children, external = true, className }: Props) => {
'before:w-full before:h-full before:transition-all before:shadow-underline',
'hover:before:shadow-throughline',
'dark:text-teal-600',
className
className,
)}
>
{children}

8
components/post/copy-button.tsx
View File

@ -28,7 +28,7 @@ const CopyButton = ({ onCopy: onClick, className }: CopyButtonProps) => {
'transition-opacity dark:border-gray-700',
'duration-300',
className,
styles.btn
styles.btn,
)}
onClick={handleClick}
>
@ -36,14 +36,14 @@ const CopyButton = ({ onCopy: onClick, className }: CopyButtonProps) => {
className={clsx(
'relative w-5 h-5 text-gray-400 child',
'transition-all duration-300',
styles.child
styles.child,
)}
>
<svg
className={clsx(
'absolute top-0 left-0 fill-current',
'opacity-100 transition-all duration-300',
copied && styles['on_copy']
copied && styles['on_copy'],
)}
viewBox="0 0 24 24"
>
@ -54,7 +54,7 @@ const CopyButton = ({ onCopy: onClick, className }: CopyButtonProps) => {
'absolute top-0 left-0 fill-green-400',
'scale-[0.33] transition-all duration-300',
'opacity-0',
copied && styles['on_ok']
copied && styles['on_ok'],
)}
viewBox="0 0 24 24"
>

4
components/post/post-toc.tsx
View File

@ -37,7 +37,7 @@ const PostToc = ({ toc, tocLength }: Props) => {
'select-none cursor-pointer',
'rounded-lg transition-all',
'duration-500 overflow-hidden',
'my-4 text-xl'
'my-4 text-xl',
)}
style={{
maxHeight: show ? (tocLength ?? 0) * 50 + 60 : 60,
@ -52,7 +52,7 @@ const PostToc = ({ toc, tocLength }: Props) => {
<FiChevronDown
className={clsx(
show && 'rotate-180',
'transition-all duration-500'
'transition-all duration-500',
)}
/>
</div>

2
components/rua/button.tsx
View File

@ -26,7 +26,7 @@ const Button = ({ children, ...rest }: ButtonProps) => {
'text-lg disabled:bg-gray-200 disabled:text-gray-500',
'dark:disabled:bg-gray-700 dark:disabled:text-gray-300',
'disabled:dark:hover:border-transparent',
className
className,
)}
{...props}
>

2
components/rua/loading/rua-loading.tsx
View File

@ -18,7 +18,7 @@ const RUALoading = ({ className: classNames }: Props) => {
className={clsx(
'flex loading',
'flex-col items-center justify-center',
classNames
classNames,
)}
>
<Image

7
components/rua/loading/vercel-loading.module.css
View File

@ -15,12 +15,15 @@
padding: 7px 10px 8px 10px;
align-items: center;
box-shadow: 0 11px 40px 0 rgba(0, 0, 0, 0.25),
box-shadow:
0 11px 40px 0 rgba(0, 0, 0, 0.25),
0 2px 10px 0 rgba(0, 0, 0, 0.12);
display: none;
opacity: 0;
transition: opacity 0.1s ease, bottom 0.1s ease;
transition:
opacity 0.1s ease,
bottom 0.1s ease;
animation: fade-in 0.1s ease-in-out;
}

6
components/rua/rua-code-sandbox.tsx
View File

@ -10,7 +10,7 @@ const pattern =
/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)/;
export const commonClass = clsx(
'rounded-lg h-[500px] border-0',
'overflow-hidden w-full'
'overflow-hidden w-full',
);
type Props = {
@ -28,7 +28,7 @@ const RUACodeSandbox = ({ url }: Props) => {
useEffect(() => {
inView &&
setSrc(
`https://codesandbox.io/embed/${embed}?fontsize=14&hidenavigation=1&theme=${currentTheme}&view=preview`
`https://codesandbox.io/embed/${embed}?fontsize=14&hidenavigation=1&theme=${currentTheme}&view=preview`,
);
}, [currentTheme, embed, inView]);
@ -47,7 +47,7 @@ const RUACodeSandbox = ({ url }: Props) => {
commonClass,
'absolute flex items-center justify-center',
load && 'hidden',
'transition-all z-10'
'transition-all z-10',
)}
>
<RUALoading />

10
components/rua/rua-codepen.tsx
View File

@ -8,7 +8,7 @@ import RUALoading from './loading/rua-loading';
export const commonClass = clsx(
'rounded-lg h-[400px] border-0',
'overflow-hidden w-full'
'overflow-hidden w-full',
);
type Props = {
@ -27,7 +27,7 @@ const RUACodepen = ({ defaultTab, url }: Props) => {
useEffect(() => {
inView &&
setSrc(
`https://codepen.io/${urlArr[3]}/embed/${urlArr[5]}?default-tab=${defaultTab}%2Cresult&theme-id=${currentTheme}`
`https://codepen.io/${urlArr[3]}/embed/${urlArr[5]}?default-tab=${defaultTab}%2Cresult&theme-id=${currentTheme}`,
);
}, [currentTheme, defaultTab, inView, urlArr]);
@ -42,7 +42,7 @@ const RUACodepen = ({ defaultTab, url }: Props) => {
className={clsx(
commonClass,
'relative',
'flex items-center justify-center'
'flex items-center justify-center',
)}
>
<div
@ -50,7 +50,7 @@ const RUACodepen = ({ defaultTab, url }: Props) => {
commonClass,
'absolute flex items-center justify-center',
load && 'hidden',
'transition-all z-10'
'transition-all z-10',
)}
>
<RUALoading />
@ -66,7 +66,7 @@ const RUACodepen = ({ defaultTab, url }: Props) => {
'border-none',
'absolute top-1/2 left-1/2',
'-translate-x-1/2 -translate-y-1/2',
'overflow-hidden'
'overflow-hidden',
)}
style={{
width: 'calc(100% + 2px)',

2
components/rua/tab/index.tsx
View File

@ -44,7 +44,7 @@ const Tab = ({ defaultValue, children }: Props) => {
'select-none cursor-pointer',
'min-w-[76px] text-center',
'hover:bg-gray-200 dark:hover:bg-rua-gray-800',
'!list-none'
'!list-none',
)}
>
{child.props.label}

4
content/posts/about-javascript-this.mdx
View File

@ -355,7 +355,7 @@ if (!Function.prototype.bind)
// closest thing possible to the ECMAScript 5
// internal IsCallable function
throw new TypeError(
'Function.prototype.bind - what is trying to be bound is not callable'
'Function.prototype.bind - what is trying to be bound is not callable',
);
}
@ -368,7 +368,7 @@ if (!Function.prototype.bind)
baseArgs.push.apply(baseArgs, arguments);
return fToBind.apply(
fNOP.prototype.isPrototypeOf(this) ? this : otherThis,
baseArgs
baseArgs,
);
};

14
content/posts/build-own-store-with-usesyncexternalstore.mdx
View File

@ -116,7 +116,7 @@ export type Store = {
const Couter = () => {
const { count, info } = useSyncExternalStore(
store.subscribe,
store.getSnapshot
store.getSnapshot,
);
return (
@ -166,9 +166,9 @@ const Couter = () => {
```tsx
export const createStore: CreateStore = <
T extends Record<string, unknown> | unknown[]
T extends Record<string, unknown> | unknown[],
>(
initialState: T
initialState: T,
) => {
let state = initialState;
@ -201,7 +201,7 @@ export type SetState<S> = (stateOrFn: S | ((state: S) => S)) => void;
export type GetSnapshot<S> = () => S;
export type Subscribe = (listener: () => void) => () => void;
export type CreateStore = <T extends Record<string, unknown> | unknown[]>(
initialState: T
initialState: T,
) => {
getSnapshot: GetSnapshot<T>;
setState: SetState<T>;
@ -270,7 +270,7 @@ Redux 通过我们创建的 Action 来决定如何更新状态，再通过 reduc
```tsx
export type RUAReducer<S extends RUAState, A extends RUAAction> = (
state: S,
action: A
action: A,
) => S;
```
@ -295,7 +295,7 @@ const dispatch: RUADispatch<A> = (action) => {
```tsx
export const createStore = <S extends RUAState, A extends RUAAction>(
reducer: RUAReducer<S, A>,
initialState: S
initialState: S,
) => {
let state = initialState;
@ -356,7 +356,7 @@ export type RUAAction<P = unknown, T extends string = string> = {
};
export type RUAReducer<S extends RUAState, A extends RUAAction> = (
state: S,
action: A
action: A,
) => S;
export type RUADispatch<A extends RUAAction> = (action: A) => void;
export type GetSnapshot<S> = () => S;

8
content/posts/create-a-mini-router-for-react.mdx
View File

@ -164,7 +164,7 @@ const RouterLink: React.FC<Props> = ({ to, children }: Props) => {
document.dispatchEvent(
new CustomEvent<string>('route', {
detail: to,
})
}),
);
};
@ -194,7 +194,7 @@ HTML 自定义事件也很简单，我们在对应的 DOM 上 `dispatchEvent`
document.dispatchEvent(
new CustomEvent<string>('route', {
detail: to,
})
}),
);
```
@ -277,7 +277,7 @@ export default defineComponent({
let currentPath = window.location.pathname;
const component = shallowRef(
routes.find((item) => item.path === currentPath)?.component ??
'Note found'
'Note found',
);
const handleEvent = (e: CustomEvent<string>) => {
@ -308,7 +308,7 @@ import routes from './routes';
let currentPath = window.location.pathname;
const component = shallowRef(
routes.find((item) => item.path === currentPath)?.component
routes.find((item) => item.path === currentPath)?.component,
);
const handleEvent = (e: CustomEvent<string>) => {

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

@ -15,7 +15,7 @@ const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
1000,
);
```

4
content/posts/react18-new-hooks.mdx
View File

@ -95,7 +95,7 @@ useSyncExternalStore<State>(subscribe: (onStoreChange: () => void) => () => void
```tsx
const { count, info } = useSyncExternalStore(
store.subscribe,
store.getSnapshot
store.getSnapshot,
);
```
@ -109,7 +109,7 @@ export type State = {
export type Store = {
state: State;
setState: (
stateOrFn: Partial<State> | ((state: State) => Partial<State>)
stateOrFn: Partial<State> | ((state: State) => Partial<State>),
) => void;
subscribe: (listener: () => void) => () => void;
listeners: Set<() => void>;

8
lib/fetcher.ts
View File

@ -45,7 +45,7 @@ export const getGists = cache(async (page = 1, perPage = 10) => {
const text = l.match(relMatch)?.[1] as PageKeys;
if (!text) return;
pageSize[text] = new URLSearchParams(
l.match(linkMatch)?.[1].split('?')[1]
l.match(linkMatch)?.[1].split('?')[1],
).get('page');
});
@ -68,9 +68,9 @@ export const getGists = cache(async (page = 1, perPage = 10) => {
} catch (err) {
console.log(err);
}
})
}),
);
})
}),
);
return {
@ -127,7 +127,7 @@ export const getSignalGist = cache(async (id: string) => {
content: '',
};
target.content = await fetch(url).then((res) => res.text());
})
}),
);
return data;

2
lib/hooks/use-in-view.ts
View File

@ -13,7 +13,7 @@ const useInView = () => {
observer.unobserve(ref.current);
});
},
[]
[],
);
useEffect(() => {

2
lib/hooks/use-router-loading.ts
View File

@ -13,7 +13,7 @@ const useRouterLoading = () => {
(url: string) => {
url !== router.pathname ? setLoading(true) : setLoading(false);
},
[router.pathname]
[router.pathname],
);
const handleComplete = useCallback(() => {
setLoading(false);

2
lib/posts.ts
View File

@ -14,7 +14,7 @@ export const dataPath = 'content/posts';
const readFileMeta = async (filename: string) => {
const markdownWithMeta = await fs.readFile(
path.join(dataPath, filename),
'utf-8'
'utf-8',
);
const slug = filename.replace(/\.mdx$/, '');
const { data: meta } = matter(markdownWithMeta);

17
styles/globals.css
View File

@ -28,9 +28,20 @@ font-family: 'Poppins', sans-serif;
@layer base {
body {
@apply text-gray-600 bg-bluish-gray dark:bg-rua-gray-900 dark:text-gray-200;
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui,
'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
font-family:
'Poppins',
-apple-system,
BlinkMacSystemFont,
'Helvetica Neue',
Helvetica,
Segoe UI,
Arial,
Roboto,
'PingFang SC',
miui,
'Hiragino Sans GB',
'Microsoft Yahei',
sans-serif;
}
img,

5
styles/prism-one-dark.css
View File

@ -35,7 +35,10 @@
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
/* font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono',
monospace; */
font-family: var(--font-jetbrains-mono), -apple-system, 'DejaVu Sans Mono',
font-family:
var(--font-jetbrains-mono),
-apple-system,
'DejaVu Sans Mono',
monospace;
direction: ltr;
text-align: left;

5
styles/prism-one-light.css
View File

@ -34,7 +34,10 @@ pre {
color: hsl(230, 8%, 24%);
/* font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono',
monospace; */
font-family: var(--font-jetbrains-mono), -apple-system, 'DejaVu Sans Mono',
font-family:
var(--font-jetbrains-mono),
-apple-system,
'DejaVu Sans Mono',
monospace;
direction: ltr;
text-align: left;

15
styles/rua.css
View File

@ -219,8 +219,14 @@ h6:hover::before {
#article kbd {
display: inline-block;
padding: 3px 5px;
font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
Liberation Mono, monospace;
font:
11px ui-monospace,
SFMono-Regular,
SF Mono,
Menlo,
Consolas,
Liberation Mono,
monospace;
line-height: 10px;
color: var(--color-fg-default);
vertical-align: middle;
@ -370,5 +376,8 @@ h6:hover::before {
#article .cm-editor .cm-line {
font-size: 15px;
font-family: var(--font-jetbrains-mono), -apple-system, monospace;
font-family:
var(--font-jetbrains-mono),
-apple-system,
monospace;
}