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

Merge pull request #68 from DefectingCat/dev

Browse Source 
Add gist page fallback
This commit is contained in:
Defectink
2023-01-30 13:30:16 +08:00
committed by GitHub
parent 7deeba5bc0 3620fd5b4a
commit 979b1c180b
15 changed files with 204 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
components/gists/gists-code-skeleton.tsx Normal file
View File

@ -0,0 +1,75 @@
import clsx from 'clsx';
import { memo } from 'react';
import styles from './gists-code.module.css';
const bodyClass = clsx(
'rounded-lg',
'h-4 bg-gray-300',
'mb-2 last:mb-0 animate-pulse'
);
const allLength = [
500, 400, 300, 200, 332, 402, 105, 399, 501, 285, 378, 123, 325, 456,
];
const GistsCode = () => {
return (
<>
<div className={styles.wrapper}>
<div className="h-[30px] bg-[#f6f8fa] dark:bg-[hsl(220,13%,18%)] flex">
<div className="flex items-center h-full mx-3">
<div
className={clsx(
'box-border inline-block',
'w-[13px] h-[13px] mr-2',
'rounded-full bg-[#ce5347]'
)}
></div>
<div
className={clsx(
'box-border inline-block',
'w-[13px] h-[13px] mr-2',
'rounded-full bg-[#d6a243]'
)}
></div>
<div
className={clsx(
'box-border inline-block',
'w-[13px] h-[13px]',
'rounded-full bg-[#58a942]'
)}
></div>
</div>
<div
className={clsx(
'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',
'flex items-center'
)}
>
<span
className={clsx(
'bg-gray-300 animate-pulse',
'w-20 h-4 block rounded'
)}
></span>
</div>
</div>
<pre>
{allLength.map((item, index) => (
<div
key={index}
className={bodyClass}
style={{ width: item }}
></div>
))}
</pre>
</div>
</>
);
};
export default memo(GistsCode);

69
components/gists/gists-skeleton.tsx Normal file
View File

@ -0,0 +1,69 @@
import LinkAnchor from 'components/mdx/link-anchor';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import MainLayout from 'layouts/common/main-layout';
import { getSignalGist, SingalGist } from 'lib/fetcher';
import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
import dynamic from 'next/dynamic';
import Image from 'next/image';
import Link from 'next/link';
import avatar from 'public/images/img/avatar.svg';
import { Fragment, ReactElement, Suspense } from 'react';
import { useRouter } from 'next/router';
import clsx from 'clsx';
const GistsCode = dynamic(
() => import('components/gists/gists-code-skeleton'),
{
suspense: true,
}
);
dayjs.extend(relativeTime);
const GistSkeleton = () => {
return (
<>
<main className="max-w-5xl px-4 mx-auto lg:px-0">
<div className="pb-4 text-sm">
<div className="flex items-center py-1 ">
<div
className={clsx(
'w-8 h-8 rounded-full',
'animate-pulse bg-gray-300'
)}
></div>
<h1
className={clsx(
'ml-2 overflow-hidden text-xl',
'whitespace-nowrap overflow-ellipsis',
'w-[234px] animate-pulse bg-gray-300',
'h-6 rounded-lg'
)}
></h1>
</div>
<p
className={clsx(
'ml-10 text-gray-400',
'w-48 h-4 animate-pulse bg-gray-300',
'rounded-lg'
)}
></p>
<div className="py-4">
<p className="pb-2 text-lg text-gray-500">
<span className={'w-16 animate-pulse'}></span>
</p>
<Suspense fallback>
<GistsCode />
</Suspense>
</div>
</div>
</main>
</>
);
};
export default GistSkeleton;

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

@ -3,11 +3,12 @@ import { memo, ReactNode } from 'react';
import { FiExternalLink } from 'react-icons/fi';
interface Props {
children: ReactNode;
children?: ReactNode;
external?: boolean;
className?: string;
}
const Anchor = ({ children, external = true }: Props) => {
const Anchor = ({ children, external = true, className }: Props) => {
return (
<>
<span
@ -16,7 +17,8 @@ const Anchor = ({ children, external = true }: 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',
className
)}
>
{children}

4
components/pages/project-card.tsx
View File

@ -1,11 +1,11 @@
import clsx from 'clsx';
import { Project } from 'pages/projects';
import { Children, cloneElement, isValidElement } from 'react';
import { Children, cloneElement, isValidElement, ReactElement } from 'react';
import { VscGithubInverted } from 'react-icons/vsc';
type ProjectCardProps = {
project: Project;
icon?: React.ReactElement<{ className?: string }>;
icon?: ReactElement<{ className?: string }>;
};
const ProjectCard = ({ project, icon }: ProjectCardProps) => {

0
layouts/blog-list.tsx → layouts/common/blog-list.tsx
View File

0
layouts/main-layout.tsx → layouts/common/main-layout.tsx
View File

2
pages/about.tsx
View File

@ -1,6 +1,6 @@
import TWEEN from '@tweenjs/tween.js';
import clsx from 'clsx';
import MainLayout from 'layouts/main-layout';
import MainLayout from 'layouts/common/main-layout';
import { gltfLoader, manager } from 'lib/gltf-loader';
import { getMousePosition } from 'lib/utils';
import { useTheme } from 'next-themes';

6
pages/blog/[page].tsx
View File

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

6
pages/blog/index.tsx
View File

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

55
pages/g/[id].tsx
View File

@ -1,23 +1,36 @@
import LinkAnchor from 'components/mdx/link-anchor';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import MainLayout from 'layouts/main-layout';
import { getGists, getSignalGist, SingalGist } from 'lib/fetcher';
import MainLayout from 'layouts/common/main-layout';
import { getSignalGist, SingalGist } from 'lib/fetcher';
import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
import dynamic from 'next/dynamic';
import Image from 'next/image';
import Link from 'next/link';
import avatar from 'public/images/img/avatar.svg';
import { ParsedUrlQuery } from 'querystring';
import { Fragment, ReactElement, Suspense } from 'react';
import { useRouter } from 'next/router';
const GistsCode = dynamic(() => import('components/gists/gists-code'), {
suspense: true,
});
const GistsSkeleton = dynamic(() => import('components/gists/gists-skeleton'), {
suspense: true,
});
dayjs.extend(relativeTime);
const Gist = ({ gist }: InferGetStaticPropsType<typeof getStaticProps>) => {
const router = useRouter();
if (router.isFallback) {
return (
<Suspense fallback>
<GistsSkeleton />
</Suspense>
);
}
return (
<>
<main className="max-w-5xl px-4 mx-auto lg:px-0">
@ -61,23 +74,23 @@ const Gist = ({ gist }: InferGetStaticPropsType<typeof getStaticProps>) => {
};
export const getStaticPaths: GetStaticPaths = async () => {
const result = await getGists();
const last = Number(result?.pageSize.last);
const paths: (
| string
| {
params: ParsedUrlQuery;
locale?: string | undefined;
}
)[] = [];
for (let i = 1; i <= last; i++) {
const result = await getGists(i);
paths.push(...(result?.gists.map((g) => ({ params: { id: g.id } })) ?? []));
}
// const result = await getGists();
// const last = Number(result?.pageSize.last);
// const paths: (
// | string
// | {
// params: ParsedUrlQuery;
// locale?: string | undefined;
// }
// )[] = [];
// for (let i = 1; i <= last; i++) {
// const result = await getGists(i);
// paths.push(...(result?.gists.map((g) => ({ params: { id: g.id } })) ?? []));
// }
return {
paths,
fallback: 'blocking',
paths: [],
fallback: true,
};
};
@ -85,17 +98,19 @@ export const getStaticProps: GetStaticProps<{
id: string | undefined;
gist: SingalGist;
}> = async ({ params }) => {
if (typeof params?.id !== 'string')
if (typeof params?.id !== 'string') {
return {
notFound: true,
};
}
try {
const gist = await getSignalGist(params.id);
if (!gist || !gist.files)
if (!gist || !gist.files) {
return {
notFound: true,
};
}
return {
props: {
id: params?.id?.toString(),

9
pages/gists/[p].tsx
View File

@ -1,6 +1,6 @@
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import MainLayout from 'layouts/main-layout';
import MainLayout from 'layouts/common/main-layout';
import { GetGists, getGists, GetUser, getUser } from 'lib/fetcher';
import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
import dynamic from 'next/dynamic';
@ -86,19 +86,20 @@ export const getStaticProps: GetStaticProps<{
next: number;
total: number;
}> = async ({ params }) => {
if (typeof params?.p !== 'string')
if (typeof params?.p !== 'string') {
return {
notFound: true,
};
}
const result = await getGists(Number(params?.p));
if (!result)
if (!result) {
return {
notFound: true,
};
}
const user = await getUser();
return {
props: {
gists: result,

2
pages/gists/index.tsx
View File

@ -1,6 +1,6 @@
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import MainLayout from 'layouts/main-layout';
import MainLayout from 'layouts/common/main-layout';
import { GetGists, getGists, GetUser, getUser } from 'lib/fetcher';
import { GetStaticProps, InferGetStaticPropsType } from 'next';
import dynamic from 'next/dynamic';

2
pages/index.tsx
View File

@ -1,5 +1,5 @@
import clsx from 'clsx';
import MainLayout from 'layouts/main-layout';
import MainLayout from 'layouts/common/main-layout';
import { gltfLoader, manager } from 'lib/gltf-loader';
import { getMousePosition } from 'lib/utils';
import dynamic from 'next/dynamic';

2
pages/p/[slug].tsx
View File

@ -3,7 +3,7 @@ import components from 'components/mdx/components';
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 MainLayout from 'layouts/common/main-layout';
import useInView from 'lib/hooks/use-in-view';
import { allPostsPath, readSinglePost } from 'lib/posts';
import { generateToc, SingleToc } from 'lib/utils';

2
pages/projects.tsx
View File

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