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

refactor app struct

Browse Source
This commit is contained in:
DefectingCat
2023-08-17 17:15:46 +08:00
parent e409e0afd6
commit 2cb80a42ae
31 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
app/projects/content.tsx
View File

@ -1,127 +0,0 @@
import { BiPlanet } from 'react-icons/bi';
import { HiPhoto } from 'react-icons/hi2';
import {
PiGitlabLogoSimpleDuotone,
PiPlanetDuotone,
PiPlanetLight,
} from 'react-icons/pi';
import {
SiNextdotjs,
SiRedux,
SiThreedotjs,
SiTsnode,
SiVim,
} from 'react-icons/si';
import { TbBrandRust } from 'react-icons/tb';
import { VscGithubInverted } from 'react-icons/vsc';
export const iconMap = {
gitlab: <PiGitlabLogoSimpleDuotone />,
nextjs: <SiNextdotjs />,
github: <VscGithubInverted />,
vim: <SiVim />,
tsnode: <SiTsnode />,
three: <SiThreedotjs />,
photos: <HiPhoto />,
redux: <SiRedux />,
venus: <BiPlanet />,
pluto: <PiPlanetDuotone />,
mercury: <PiPlanetLight />,
rust: <TbBrandRust />,
};
export type Project = {
icon?: keyof typeof iconMap;
name: string;
description: string;
url: string;
};
export const projects: Project[] = [
{
icon: 'venus',
name: 'Venus',
description: 'A tiny GUI for network tool.',
url: 'https://github.com/DefectingCat/venus',
},
{
icon: 'pluto',
name: 'Pluto',
description: 'Tcping tool',
url: 'https://github.com/DefectingCat/pluto',
},
{
icon: 'mercury',
name: 'Mercury',
description: 'A network tool backend',
url: 'https://github.com/DefectingCat/mercury',
},
{
icon: 'three',
name: '3d-globe',
description: 'A 3d globe made by three.js.',
url: 'https://github.com/DefectingCat/3d-globe',
},
{
icon: 'nextjs',
name: 'Blog',
description: 'This site.',
url: 'https://github.com/DefectingCat/DefectingCat.github.io',
},
{
icon: 'tsnode',
name: 'Simply FaaS',
description: 'A simply FaaS built with Node.js',
url: 'https://github.com/DefectingCat/simply-fass',
},
{
icon: 'tsnode',
name: 'boring-avatars-services',
description: 'Random avatars.',
url: 'https://github.com/DefectingCat/boring-avatars-services',
},
{
icon: 'tsnode',
name: 'RUA DDNS',
description: 'DDNS Script for DNSPod',
url: 'https://github.com/DefectingCat/rua-ddns',
},
{
icon: 'rust',
name: 'Candy',
description: 'Tiny web server.',
url: 'https://github.com/DefectingCat/candy',
},
{
icon: 'vim',
name: 'Dotfiles',
description: 'Some dotfiles.',
url: 'https://github.com/DefectingCat/dotfiles',
},
{
icon: 'redux',
name: 'RUA-Context',
description: 'A global store for React.',
url: 'https://github.com/rua-plus/rua-context',
},
{
icon: 'three',
name: 'RUA-Three',
description: 'A three.js hooks for React.',
url: 'https://github.com/rua-plus/rua-three',
},
];
export const selfHosts: Project[] = [
{
icon: 'gitlab',
name: 'Gitlab',
description: 'Selfhost git.',
url: 'https://git.rua.plus/',
},
{
icon: 'photos',
name: 'Photos',
description: 'Some photos.',
url: 'https://photos.rua.plus/',
},
];

4
app/projects/loading.tsx
View File

@ -1,7 +1,7 @@
import clsx from 'clsx';
import { projects, selfHosts } from 'components/pages/projects/content';
import PojectCardSkeleton from 'components/pages/projects/project-card-skeleton';
import { Metadata } from 'next';
import { projects, selfHosts } from './content';
import PojectCardSkeleton from './project-card-skeleton';
export const metadata: Metadata = {
title: 'RUA - Projects',

8
app/projects/page.tsx
View File

@ -1,7 +1,11 @@
import clsx from 'clsx';
import ProjectCard from './project-card';
import {
iconMap,
projects,
selfHosts,
} from 'components/pages/projects/content';
import ProjectCard from 'components/pages/projects/project-card';
import { Metadata } from 'next';
import { projects, iconMap, selfHosts } from './content';
export const metadata: Metadata = {
title: 'RUA - Projects',

43
app/projects/project-card-skeleton.tsx
View File

@ -1,43 +0,0 @@
import clsx from 'clsx';
import { VscGithubInverted } from 'react-icons/vsc';
const PojectCardSkeleton = () => {
return (
<>
<div
className={clsx(
'py-3 px-4 rounded-lg bg-slate-100',
'hover:bg-slate-200',
'transition-all duration-300',
'flex items-center cursor-pointer',
'justify-between dark:bg-rua-gray-800',
'hover:dark:bg-rua-gray-700',
)}
>
<VscGithubInverted className="w-8 h-8" />
<a className="w-[calc(100%_-_40px)]" target="_blank" rel="noreferrer">
<h2
className={clsx(
'text-xl overflow-hidden',
'text-ellipsis whitespace-nowrap',
'h-6 w-[100px] animate-pulse',
'bg-gray-300 rounded-lg',
)}
></h2>
<span
className={clsx(
'overflow-hidden break-keep text-ellipsis',
'whitespace-nowrap inline-block',
'w-[inherit] mt-1',
'h-5 w-[300px] animate-pulse',
'bg-gray-300 rounded-lg',
)}
></span>
</a>
</div>
</>
);
};
export default PojectCardSkeleton;

62
app/projects/project-card.tsx
View File

@ -1,62 +0,0 @@
import clsx from 'clsx';
import { Children, cloneElement, isValidElement, ReactElement } from 'react';
import { VscGithubInverted } from 'react-icons/vsc';
import { Project } from './content';
type ProjectCardProps = {
project: Project;
icon?: ReactElement<{ className?: string }>;
};
const ProjectCard = ({ project, icon }: ProjectCardProps) => {
const Icon = Children.map(icon, (child) => {
if (!isValidElement(child)) return child;
return cloneElement(child, {
className: 'w-8 h-8',
});
});
return (
<>
<div
className={clsx(
'py-3 px-4 rounded-lg bg-slate-100',
'hover:bg-slate-200',
'transition-all duration-300',
'flex items-center cursor-pointer',
'justify-between dark:bg-rua-gray-800',
'hover:dark:bg-rua-gray-700',
)}
>
{Icon ? Icon : <VscGithubInverted className="w-8 h-8" />}
<a
href={project.url}
className="w-[calc(100%_-_40px)]"
target="_blank"
rel="noreferrer"
>
<h2
className={clsx(
'text-xl overflow-hidden',
'text-ellipsis whitespace-nowrap',
)}
>
{project.name}
</h2>
<span
className={clsx(
'overflow-hidden break-keep text-ellipsis',
'whitespace-nowrap inline-block',
'w-[inherit]',
)}
>
{project.description}
</span>
</a>
</div>
</>
);
};
export default ProjectCard;