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

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}