From 32d8d48514f845b79cec9ce4bd60ac76253d0286 Mon Sep 17 00:00:00 2001 From: DefectingCat Date: Mon, 14 Aug 2023 13:36:15 +0800 Subject: [PATCH] add gist loading page format code --- .prettierrc.json | 3 ++- app/blog/layout.tsx | 2 +- app/blog/post-card-loading.tsx | 12 ++++++------ app/blog/post-card.tsx | 2 +- app/dark-mode-btn.tsx | 2 +- app/footer.tsx | 2 +- app/g/loading.tsx | 5 +++++ app/gists/file-content-skeleton.tsx | 6 +++--- app/gists/gists-code-skeleton.tsx | 12 ++++++------ app/gists/gists-code.tsx | 8 ++++---- app/gists/gists-skeleton.tsx | 6 +++--- app/gists/user-info-skeleton.tsx | 10 +++++----- app/gists/user-info.tsx | 4 ++-- app/home-modle.tsx | 4 ++-- app/nav-bar.tsx | 12 ++++++------ app/p/[slug]/page.tsx | 2 +- app/projects/loading.tsx | 4 ++-- app/projects/page.tsx | 4 ++-- app/projects/project-card-skeleton.tsx | 6 +++--- app/projects/project-card.tsx | 6 +++--- components/common/back-to-top.tsx | 2 +- components/mdx/anchor.tsx | 4 ++-- components/mdx/link-anchor.tsx | 2 +- components/post/copy-button.tsx | 8 ++++---- components/post/post-toc.tsx | 4 ++-- components/rua/button.tsx | 2 +- components/rua/loading/rua-loading.tsx | 2 +- .../rua/loading/vercel-loading.module.css | 7 +++++-- components/rua/rua-code-sandbox.tsx | 6 +++--- components/rua/rua-codepen.tsx | 10 +++++----- components/rua/tab/index.tsx | 2 +- content/posts/about-javascript-this.mdx | 4 ++-- ...uild-own-store-with-usesyncexternalstore.mdx | 14 +++++++------- .../posts/create-a-mini-router-for-react.mdx | 8 ++++---- .../how-to-load-a-background-with-threejs.mdx | 2 +- content/posts/react18-new-hooks.mdx | 4 ++-- lib/fetcher.ts | 8 ++++---- lib/hooks/use-in-view.ts | 2 +- lib/hooks/use-router-loading.ts | 2 +- lib/posts.ts | 2 +- styles/globals.css | 17 ++++++++++++++--- styles/prism-one-dark.css | 5 ++++- styles/prism-one-light.css | 5 ++++- styles/rua.css | 15 ++++++++++++--- 44 files changed, 142 insertions(+), 107 deletions(-) create mode 100644 app/g/loading.tsx diff --git a/.prettierrc.json b/.prettierrc.json index 937375d..d9b803a 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,4 +1,5 @@ { "semi": true, - "singleQuote": true + "singleQuote": true, + "endOfLine": "lf" } diff --git a/app/blog/layout.tsx b/app/blog/layout.tsx index 5fa41c3..25ac771 100644 --- a/app/blog/layout.tsx +++ b/app/blog/layout.tsx @@ -12,7 +12,7 @@ export default function PageLayout({ children }: { children: ReactNode }) {

Blog posts diff --git a/app/blog/post-card-loading.tsx b/app/blog/post-card-loading.tsx index 8b16eed..1be7fe1 100644 --- a/app/blog/post-card-loading.tsx +++ b/app/blog/post-card-loading.tsx @@ -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', )} >
@@ -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', )} >

@@ -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', )} > @@ -36,13 +36,13 @@ const PostCardLoading = () => {
@@ -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', )} > diff --git a/app/blog/post-card.tsx b/app/blog/post-card.tsx index 6ccfa29..b4c2225 100644 --- a/app/blog/post-card.tsx +++ b/app/blog/post-card.tsx @@ -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', )} >
diff --git a/app/dark-mode-btn.tsx b/app/dark-mode-btn.tsx index 9eff738..c1eea54 100644 --- a/app/dark-mode-btn.tsx +++ b/app/dark-mode-btn.tsx @@ -15,7 +15,7 @@ const DarkModeBtn = () => {
diff --git a/app/footer.tsx b/app/footer.tsx index 93882c5..32933a6 100644 --- a/app/footer.tsx +++ b/app/footer.tsx @@ -14,7 +14,7 @@ const Footer = () => { className={clsx( 'flex items-center flex-col', 'justify-between py-4', - 'lg:flex-row' + 'lg:flex-row', )} >
© {nowDay} Powered by Next.js 💙 xfy
diff --git a/app/g/loading.tsx b/app/g/loading.tsx new file mode 100644 index 0000000..e6851ac --- /dev/null +++ b/app/g/loading.tsx @@ -0,0 +1,5 @@ +const loading = () => { + return <>loading; +}; + +export default loading; diff --git a/app/gists/file-content-skeleton.tsx b/app/gists/file-content-skeleton.tsx index bd28827..bf6011e 100644 --- a/app/gists/file-content-skeleton.tsx +++ b/app/gists/file-content-skeleton.tsx @@ -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', )} > {/* 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', )} >
{/* 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', )} > diff --git a/app/gists/gists-code-skeleton.tsx b/app/gists/gists-code-skeleton.tsx index 533b3ec..bdaa220 100644 --- a/app/gists/gists-code-skeleton.tsx +++ b/app/gists/gists-code-skeleton.tsx @@ -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]', )} >
@@ -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', )} > diff --git a/app/gists/gists-code.tsx b/app/gists/gists-code.tsx index 4546c49..1a1444b 100644 --- a/app/gists/gists-code.tsx +++ b/app/gists/gists-code.tsx @@ -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]', )} >
@@ -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} diff --git a/app/gists/gists-skeleton.tsx b/app/gists/gists-skeleton.tsx index 82af1b0..71645e4 100644 --- a/app/gists/gists-skeleton.tsx +++ b/app/gists/gists-skeleton.tsx @@ -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 ', )} >

{ 'whitespace-nowrap overflow-ellipsis', 'w-[234px] animate-pulse bg-gray-300', 'h-6 rounded-lg', - 'dark:bg-gray-400' + 'dark:bg-gray-400', )} >

@@ -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', )} >

diff --git a/app/gists/user-info-skeleton.tsx b/app/gists/user-info-skeleton.tsx index 30916c6..5cfd083 100644 --- a/app/gists/user-info-skeleton.tsx +++ b/app/gists/user-info-skeleton.tsx @@ -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', )} >
@@ -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', )} >
@@ -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', )} > @@ -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', )} > @@ -43,7 +43,7 @@ const UserInfoLoading = () => {
diff --git a/app/gists/user-info.tsx b/app/gists/user-info.tsx index 101372d..394d92a 100644 --- a/app/gists/user-info.tsx +++ b/app/gists/user-info.tsx @@ -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', )} >
{ 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', )} > diff --git a/app/nav-bar.tsx b/app/nav-bar.tsx index 4d9033e..3271205 100644 --- a/app/nav-bar.tsx +++ b/app/nav-bar.tsx @@ -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', )} > @@ -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', )} > {m.name} @@ -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', )} > @@ -149,7 +149,7 @@ const HeadBar = () => {
)} diff --git a/app/p/[slug]/page.tsx b/app/p/[slug]/page.tsx index f054c2a..94161ae 100644 --- a/app/p/[slug]/page.tsx +++ b/app/p/[slug]/page.tsx @@ -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')); diff --git a/app/projects/loading.tsx b/app/projects/loading.tsx index 6d41606..2a4a0c4 100644 --- a/app/projects/loading.tsx +++ b/app/projects/loading.tsx @@ -19,7 +19,7 @@ const Loading = () => {
{projects.map((_, i) => ( @@ -35,7 +35,7 @@ const Loading = () => {
{selfHosts.map((_, i) => ( diff --git a/app/projects/page.tsx b/app/projects/page.tsx index fdde67a..2d8f89d 100644 --- a/app/projects/page.tsx +++ b/app/projects/page.tsx @@ -19,7 +19,7 @@ export default function Page() {
{projects.map((item, i) => ( @@ -39,7 +39,7 @@ export default function Page() {
{selfHosts.map((item, i) => ( diff --git a/app/projects/project-card-skeleton.tsx b/app/projects/project-card-skeleton.tsx index 9544221..3e4d337 100644 --- a/app/projects/project-card-skeleton.tsx +++ b/app/projects/project-card-skeleton.tsx @@ -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', )} > @@ -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', )} > { 'whitespace-nowrap inline-block', 'w-[inherit] mt-1', 'h-5 w-[300px] animate-pulse', - 'bg-gray-300 rounded-lg' + 'bg-gray-300 rounded-lg', )} > diff --git a/app/projects/project-card.tsx b/app/projects/project-card.tsx index d642434..64f3e9f 100644 --- a/app/projects/project-card.tsx +++ b/app/projects/project-card.tsx @@ -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 : } @@ -39,7 +39,7 @@ const ProjectCard = ({ project, icon }: ProjectCardProps) => {

{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} diff --git a/components/common/back-to-top.tsx b/components/common/back-to-top.tsx index 1239325..0e0b852 100644 --- a/components/common/back-to-top.tsx +++ b/components/common/back-to-top.tsx @@ -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', )} > diff --git a/components/mdx/anchor.tsx b/components/mdx/anchor.tsx index efa01c1..b88294a 100644 --- a/components/mdx/anchor.tsx +++ b/components/mdx/anchor.tsx @@ -22,7 +22,7 @@ const Anchor = forwardRef( '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( ); - } + }, ); Anchor.displayName = 'Anchor'; diff --git a/components/mdx/link-anchor.tsx b/components/mdx/link-anchor.tsx index 477ee84..e4a84a7 100644 --- a/components/mdx/link-anchor.tsx +++ b/components/mdx/link-anchor.tsx @@ -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} diff --git a/components/post/copy-button.tsx b/components/post/copy-button.tsx index 07a89a6..5f5a603 100644 --- a/components/post/copy-button.tsx +++ b/components/post/copy-button.tsx @@ -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, )} > @@ -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" > diff --git a/components/post/post-toc.tsx b/components/post/post-toc.tsx index 11f119c..2b5f56a 100644 --- a/components/post/post-toc.tsx +++ b/components/post/post-toc.tsx @@ -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) => {

diff --git a/components/rua/button.tsx b/components/rua/button.tsx index 8fede01..2852640 100644 --- a/components/rua/button.tsx +++ b/components/rua/button.tsx @@ -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} > diff --git a/components/rua/loading/rua-loading.tsx b/components/rua/loading/rua-loading.tsx index c8ed2f5..f3c514d 100644 --- a/components/rua/loading/rua-loading.tsx +++ b/components/rua/loading/rua-loading.tsx @@ -18,7 +18,7 @@ const RUALoading = ({ className: classNames }: Props) => { className={clsx( 'flex loading', 'flex-col items-center justify-center', - classNames + classNames, )} > { 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', )} > diff --git a/components/rua/rua-codepen.tsx b/components/rua/rua-codepen.tsx index acd5a1e..00b545f 100644 --- a/components/rua/rua-codepen.tsx +++ b/components/rua/rua-codepen.tsx @@ -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', )} >
{ commonClass, 'absolute flex items-center justify-center', load && 'hidden', - 'transition-all z-10' + 'transition-all z-10', )} > @@ -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)', diff --git a/components/rua/tab/index.tsx b/components/rua/tab/index.tsx index 9ee49c6..e63e0bf 100644 --- a/components/rua/tab/index.tsx +++ b/components/rua/tab/index.tsx @@ -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} diff --git a/content/posts/about-javascript-this.mdx b/content/posts/about-javascript-this.mdx index 71fc5a1..09652d7 100644 --- a/content/posts/about-javascript-this.mdx +++ b/content/posts/about-javascript-this.mdx @@ -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, ); }; diff --git a/content/posts/build-own-store-with-usesyncexternalstore.mdx b/content/posts/build-own-store-with-usesyncexternalstore.mdx index caf8826..ea87398 100644 --- a/content/posts/build-own-store-with-usesyncexternalstore.mdx +++ b/content/posts/build-own-store-with-usesyncexternalstore.mdx @@ -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 | unknown[] + T extends Record | unknown[], >( - initialState: T + initialState: T, ) => { let state = initialState; @@ -201,7 +201,7 @@ export type SetState = (stateOrFn: S | ((state: S) => S)) => void; export type GetSnapshot = () => S; export type Subscribe = (listener: () => void) => () => void; export type CreateStore = | unknown[]>( - initialState: T + initialState: T, ) => { getSnapshot: GetSnapshot; setState: SetState; @@ -270,7 +270,7 @@ Redux 通过我们创建的 Action 来决定如何更新状态，再通过 reduc ```tsx export type RUAReducer = ( state: S, - action: A + action: A, ) => S; ``` @@ -295,7 +295,7 @@ const dispatch: RUADispatch = (action) => { ```tsx export const createStore = ( reducer: RUAReducer, - initialState: S + initialState: S, ) => { let state = initialState; @@ -356,7 +356,7 @@ export type RUAAction

= { }; export type RUAReducer = ( state: S, - action: A + action: A, ) => S; export type RUADispatch = (action: A) => void; export type GetSnapshot = () => S; diff --git a/content/posts/create-a-mini-router-for-react.mdx b/content/posts/create-a-mini-router-for-react.mdx index 9f0985b..294a471 100644 --- a/content/posts/create-a-mini-router-for-react.mdx +++ b/content/posts/create-a-mini-router-for-react.mdx @@ -164,7 +164,7 @@ const RouterLink: React.FC = ({ to, children }: Props) => { document.dispatchEvent( new CustomEvent('route', { detail: to, - }) + }), ); }; @@ -194,7 +194,7 @@ HTML 自定义事件也很简单，我们在对应的 DOM 上 `dispatchEvent` document.dispatchEvent( new CustomEvent('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) => { @@ -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) => { diff --git a/content/posts/how-to-load-a-background-with-threejs.mdx b/content/posts/how-to-load-a-background-with-threejs.mdx index 0fe4ac6..bbca1ef 100644 --- a/content/posts/how-to-load-a-background-with-threejs.mdx +++ b/content/posts/how-to-load-a-background-with-threejs.mdx @@ -15,7 +15,7 @@ const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, - 1000 + 1000, ); ``` diff --git a/content/posts/react18-new-hooks.mdx b/content/posts/react18-new-hooks.mdx index 559407a..3130016 100644 --- a/content/posts/react18-new-hooks.mdx +++ b/content/posts/react18-new-hooks.mdx @@ -95,7 +95,7 @@ useSyncExternalStore(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) => Partial) + stateOrFn: Partial | ((state: State) => Partial), ) => void; subscribe: (listener: () => void) => () => void; listeners: Set<() => void>; diff --git a/lib/fetcher.ts b/lib/fetcher.ts index 9f57e52..9224939 100644 --- a/lib/fetcher.ts +++ b/lib/fetcher.ts @@ -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; diff --git a/lib/hooks/use-in-view.ts b/lib/hooks/use-in-view.ts index 74baf2d..548c0a4 100644 --- a/lib/hooks/use-in-view.ts +++ b/lib/hooks/use-in-view.ts @@ -13,7 +13,7 @@ const useInView = () => { observer.unobserve(ref.current); }); }, - [] + [], ); useEffect(() => { diff --git a/lib/hooks/use-router-loading.ts b/lib/hooks/use-router-loading.ts index ffa070f..f00d0ff 100644 --- a/lib/hooks/use-router-loading.ts +++ b/lib/hooks/use-router-loading.ts @@ -13,7 +13,7 @@ const useRouterLoading = () => { (url: string) => { url !== router.pathname ? setLoading(true) : setLoading(false); }, - [router.pathname] + [router.pathname], ); const handleComplete = useCallback(() => { setLoading(false); diff --git a/lib/posts.ts b/lib/posts.ts index 6e3b799..da1f3fe 100644 --- a/lib/posts.ts +++ b/lib/posts.ts @@ -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); diff --git a/styles/globals.css b/styles/globals.css index 56bd9f1..39235a8 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -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, diff --git a/styles/prism-one-dark.css b/styles/prism-one-dark.css index bb944a0..912169a 100644 --- a/styles/prism-one-dark.css +++ b/styles/prism-one-dark.css @@ -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; diff --git a/styles/prism-one-light.css b/styles/prism-one-light.css index 48dd2ca..46c65ae 100644 --- a/styles/prism-one-light.css +++ b/styles/prism-one-light.css @@ -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; diff --git a/styles/rua.css b/styles/rua.css index fa19b16..8530803 100644 --- a/styles/rua.css +++ b/styles/rua.css @@ -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; }