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

Format code

Browse Source
This commit is contained in:
DefectingCat
2023-03-22 15:34:59 +08:00
parent b47519256f
commit d1adac91d7
6 changed files with 7 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
components/gists/file-content.tsx
View File

@ -1,51 +0,0 @@
import LinkAnchor from 'components/mdx/link-anchor';
import Loading from 'components/rua/loading/rua-loading';
import dayjs from 'dayjs';
import { GistData } from 'lib/fetcher';
import dynamic from 'next/dynamic';
import Link from 'next/link';
import { memo, Suspense } from 'react';
import GistsCode from './gists-code';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
type Props = {
gists: GistData[];
};
const FileContent = ({ gists }: Props) => {
return (
<>
<div className="overflow-hidden">
{gists.map((g) => (
<div key={g.id}>
{Object.keys(g.files).map((f) => (
<div key={g.files[f].raw_url} className="pb-4 ">
{/* Username and file name */}
<h1 className="md:text-lg">
{g.login} /
<Link href={`/g/${g.id}`}>
<LinkAnchor external={false}>
{g.files[f].filename}
</LinkAnchor>
</Link>
</h1>
{/* Time */}
<p className="text-gray-400">
Last active: {dayjs(g.updated_at).fromNow()}
</p>
{/* Description */}
<p className="text-gray-500">{g.description}</p>
<GistsCode file={g.files[f]} />
</div>
))}
</div>
))}
</div>
</>
);
};
export default memo(FileContent);

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

@ -1,75 +0,0 @@
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);

16
components/gists/gists-code.module.css
View File

@ -1,16 +0,0 @@
.wrapper {
@apply overflow-hidden rounded-lg;
@apply mb-8 shadow-lg;
font-size: 16px;
/* box-shadow: 0 13px 27px -5px rgb(50 50 93 / 25%),
0 8px 16px -8px rgb(0 0 0 / 30%), 0 -6px 16px -6px rgb(0 0 0 / 3%); */
}
.wrapper pre {
margin: unset;
border-radius: unset;
}
.wrapper .loading span {
margin: unset;
}

79
components/gists/gists-code.tsx
View File

@ -1,79 +0,0 @@
import rehypePrism from '@mapbox/rehype-prism';
import clsx from 'clsx';
import { createElement, Fragment, memo } from 'react';
import rehypeReact from 'rehype-react';
import remarkGfm from 'remark-gfm';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import { GistsFile } from 'types';
import { unified } from 'unified';
import styles from './gists-code.module.css';
interface Props {
file: GistsFile;
showFileName?: boolean;
}
const GistsCode = ({ file, showFileName = false }: Props) => {
const code = unified()
.use(remarkParse)
.use(remarkRehype)
.use(remarkGfm)
.use(rehypePrism, { ignoreMissing: true })
.use(rehypeReact, {
createElement,
Fragment,
})
.processSync(`\`\`\`${file.language ?? ''}\n${file.content}`).result;
return (
<>
{showFileName ? (
<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'
)}
>
{file.filename}
</div>
</div>
<div>{code}</div>
</div>
) : (
<div>{code}</div>
)}
</>
);
};
export default memo(GistsCode);

61
components/gists/gists-skeleton.tsx
View File

@ -1,61 +0,0 @@
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import dynamic from 'next/dynamic';
import { Suspense } from 'react';
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;