From 35d1aeec9e8d3ad5b3ed86cf54d8f512d5b3aa0b Mon Sep 17 00:00:00 2001 From: DefectingCat Date: Mon, 30 Jan 2023 11:37:15 +0800 Subject: [PATCH] Add gists skeleton animation --- components/gists/gists-skeleton.tsx | 66 ++++++++++++++++++++++++++++ components/mdx/link-anchor.tsx | 8 ++-- layouts/{ => common}/blog-list.tsx | 0 layouts/{ => common}/main-layout.tsx | 0 pages/about.tsx | 2 +- pages/blog/[page].tsx | 6 ++- pages/blog/index.tsx | 6 ++- pages/g/[id].tsx | 55 ++++++++++++++--------- pages/gists/[p].tsx | 2 +- pages/gists/index.tsx | 2 +- pages/index.tsx | 2 +- pages/p/[slug].tsx | 2 +- pages/projects.tsx | 2 +- 13 files changed, 120 insertions(+), 33 deletions(-) create mode 100644 components/gists/gists-skeleton.tsx rename layouts/{ => common}/blog-list.tsx (100%) rename layouts/{ => common}/main-layout.tsx (100%) diff --git a/components/gists/gists-skeleton.tsx b/components/gists/gists-skeleton.tsx new file mode 100644 index 0000000..1d62be7 --- /dev/null +++ b/components/gists/gists-skeleton.tsx @@ -0,0 +1,66 @@ +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'), { + suspense: true, +}); + +dayjs.extend(relativeTime); + +const GistSkeleton = () => { + return ( + <> +
+
+
+
+

+
+ +

+ +
+

+ +

+ + + {/**/} + +
+
+
+ + ); +}; + +export default GistSkeleton; diff --git a/components/mdx/link-anchor.tsx b/components/mdx/link-anchor.tsx index c491130..477ee84 100644 --- a/components/mdx/link-anchor.tsx +++ b/components/mdx/link-anchor.tsx @@ -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 ( <> { '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} diff --git a/layouts/blog-list.tsx b/layouts/common/blog-list.tsx similarity index 100% rename from layouts/blog-list.tsx rename to layouts/common/blog-list.tsx diff --git a/layouts/main-layout.tsx b/layouts/common/main-layout.tsx similarity index 100% rename from layouts/main-layout.tsx rename to layouts/common/main-layout.tsx diff --git a/pages/about.tsx b/pages/about.tsx index 936dda1..ff06eb7 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -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'; diff --git a/pages/blog/[page].tsx b/pages/blog/[page].tsx index b3b6c7c..2ee21ca 100644 --- a/pages/blog/[page].tsx +++ b/pages/blog/[page].tsx @@ -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, }); diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx index 90a42f5..19c8cc2 100644 --- a/pages/blog/index.tsx +++ b/pages/blog/index.tsx @@ -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, }); diff --git a/pages/g/[id].tsx b/pages/g/[id].tsx index 8dcb20e..7f5c672 100644 --- a/pages/g/[id].tsx +++ b/pages/g/[id].tsx @@ -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) => { + const router = useRouter(); + + // if (router.isFallback) { + return ( + + + + ); + // } + return ( <>
@@ -61,23 +74,23 @@ const Gist = ({ gist }: InferGetStaticPropsType) => { }; 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(), diff --git a/pages/gists/[p].tsx b/pages/gists/[p].tsx index 61bad7c..b462621 100644 --- a/pages/gists/[p].tsx +++ b/pages/gists/[p].tsx @@ -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'; diff --git a/pages/gists/index.tsx b/pages/gists/index.tsx index 763782f..22e4036 100644 --- a/pages/gists/index.tsx +++ b/pages/gists/index.tsx @@ -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'; diff --git a/pages/index.tsx b/pages/index.tsx index ed07d48..6b0af66 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -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'; diff --git a/pages/p/[slug].tsx b/pages/p/[slug].tsx index 9523669..dcd065c 100644 --- a/pages/p/[slug].tsx +++ b/pages/p/[slug].tsx @@ -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'; diff --git a/pages/projects.tsx b/pages/projects.tsx index 3cce66f..9a42d8c 100644 --- a/pages/projects.tsx +++ b/pages/projects.tsx @@ -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,