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

Add some styles

Browse Source
This commit is contained in:
Defectink
2022-04-29 09:56:40 +08:00
parent 32e0f1c953
commit 5112eebb42
3 changed files with 52 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/gists/GistsCode.tsx
View File

@ -6,12 +6,15 @@ import rehypePrism from '@mapbox/rehype-prism';
import remarkGfm from 'remark-gfm';
import { createElement, Fragment } from 'react';
import rehypeReact from 'rehype-react';
import styles from './styles.module.css';
import classNames from 'classnames';
interface Props {
file: GistsFile;
showFileName?: boolean;
}
const GistsCode = ({ file }: Props) => {
const GistsCode = ({ file, showFileName = false }: Props) => {
const code = unified()
.use(remarkParse)
.use(remarkRehype)
@ -25,7 +28,49 @@ const GistsCode = ({ file }: Props) => {
return (
<>
<div>{code}</div>
{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={classNames(
'box-border inline-block',
'w-[13px] h-[13px] mr-2',
'rounded-full bg-[#ce5347]'
)}
></div>
<div
className={classNames(
'box-border inline-block',
'w-[13px] h-[13px] mr-2',
'rounded-full bg-[#d6a243]'
)}
></div>
<div
className={classNames(
'box-border inline-block',
'w-[13px] h-[13px]',
'rounded-full bg-[#58a942]'
)}
></div>
</div>
<div
className={classNames(
'px-4 bg-white',
'leading-[30px]',
'dark:bg-[hsl(220,13%,18%)] dark:border-b dark:border-b-[rgb(128,203,196)]'
)}
>
{file.filename}
</div>
</div>
<div>{code}</div>
</div>
) : (
<div>{code}</div>
)}
</>
);
};

0
pages/g/styles.module.css → components/gists/styles.module.css
View File

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

@ -34,45 +34,11 @@ const Gist = ({ gist }: InferGetStaticPropsType<typeof getStaticProps>) => {
<p className="pb-2 text-lg text-gray-500">{gist.description}</p>
{Object.keys(gist.files).map((f) => (
<div key={gist.files[f].raw_url} 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={classNames(
'box-border inline-block',
'w-[13px] h-[13px] mr-2',
'rounded-full bg-[#ce5347]'
)}
></div>
<div
className={classNames(
'box-border inline-block',
'w-[13px] h-[13px] mr-2',
'rounded-full bg-[#d6a243]'
)}
></div>
<div
className={classNames(
'box-border inline-block',
'w-[13px] h-[13px]',
'rounded-full bg-[#58a942]'
)}
></div>
</div>
<div
className={classNames(
'px-4 bg-white',
'leading-[30px]',
'dark:bg-[hsl(220,13%,18%)] dark:border-b dark:border-b-[rgb(128,203,196)]'
)}
>
{gist.files[f].filename}
</div>
</div>
<GistsCode file={gist.files[f]} />
</div>
<GistsCode
key={gist.files[f].raw_url}
file={gist.files[f]}
showFileName
/>
))}
</div>
</div>