xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-15 08:41:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

add new friend page

Browse Source 
fix other page layout
This commit is contained in:
DefectingCat
2023-11-10 13:58:08 +08:00
parent 00d469c450
commit 8650373e78
9 changed files with 123 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/blog/layout.tsx
View File

@ -8,7 +8,7 @@ export const metadata: Metadata = {
export default function PageLayout({ children }: { children: ReactNode }) { export default function PageLayout({ children }: { children: ReactNode }) {
return ( return (
<main className="w-full max-w-4xl mx-auto"> <main className="flex-1 w-full max-w-4xl mx-auto">
<h1 <h1
className={clsx( className={clsx(
'text-5xl font-bold text-center font-Barlow', 'text-5xl font-bold text-center font-Barlow',
@ -17,7 +17,6 @@ export default function PageLayout({ children }: { children: ReactNode }) {
> >
Blog posts Blog posts
</h1> </h1>
<div className="px-4 lg:px-0">{children}</div> <div className="px-4 lg:px-0">{children}</div>
</main> </main>
); );

27
app/friends/layout.tsx Normal file
View File

@ -0,0 +1,27 @@
import clsx from 'clsx';
import { Metadata } from 'next';
import { ReactNode } from 'react';
export const metadata: Metadata = {
title: 'RUA - Friends',
};
const Layout = ({ children }: { children: ReactNode }) => {
return (
<>
<main className="flex-1 w-full max-w-4xl mx-auto">
<h1
className={clsx(
'text-5xl font-bold text-center font-Barlow',
'mt-8 mb-20 text-gray-800 dark:text-gray-200',
)}
>
Friends
</h1>
<div className="px-4 lg:px-0">{children}</div>
</main>
</>
);
};
export default Layout;

5
app/friends/page.tsx Normal file
View File

@ -0,0 +1,5 @@
const Page = () => {
return <>test</>;
};
export default Page;

2
app/p/[slug]/page.tsx
View File

@ -62,7 +62,7 @@ const Page = async ({
id="article" id="article"
className={clsx( className={clsx(
'relative max-w-4xl px-4 mx-auto my-10', 'relative max-w-4xl px-4 mx-auto my-10',
'lg:w-[56rem] w-full', 'lg:w-[56rem] w-full flex-1',
)} )}
> >
<h1>{mdxSource.frontmatter?.title}</h1> <h1>{mdxSource.frontmatter?.title}</h1>

19
app/projects/layout.tsx Normal file
View File

@ -0,0 +1,19 @@
import clsx from 'clsx';
import { ReactNode } from 'react';
const Layout = ({ children }: { children: ReactNode }) => {
return (
<>
<main
className={clsx(
'flex-1 max-w-4xl px-8 py-8 mx-auto',
'lg:px-0 w-full flex-1',
)}
>
{children}
</main>
</>
);
};
export default Layout;

58
app/projects/loading.tsx
View File

@ -10,40 +10,38 @@ export const metadata: Metadata = {
const Loading = () => { const Loading = () => {
return ( return (
<> <>
<main className="max-w-4xl px-8 py-8 mx-auto lg:px-0"> <div>
{/* Git projects */}
<div> <div>
{/* Git projects */} <h1 className="mb-4 text-2xl">Projects</h1>
<div>
<h1 className="mb-4 text-2xl">Projects</h1>
</div>
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5',
)}
>
{projects.map((_, i) => (
<PojectCardSkeleton key={i} />
))}
</div>
</div> </div>
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5',
)}
>
{projects.map((_, i) => (
<PojectCardSkeleton key={i} />
))}
</div>
</div>
<div className="mt-6"> <div className="mt-6">
<div> <div>
<h1 className="mb-4 text-2xl">Seft Hosts</h1> <h1 className="mb-4 text-2xl">Seft Hosts</h1>
</div>
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5',
)}
>
{selfHosts.map((_, i) => (
<PojectCardSkeleton key={i} />
))}
</div>
</div> </div>
</main> <div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5',
)}
>
{selfHosts.map((_, i) => (
<PojectCardSkeleton key={i} />
))}
</div>
</div>
</> </>
); );
}; };

76
app/projects/page.tsx
View File

@ -14,50 +14,46 @@ export const metadata: Metadata = {
export default function Page() { export default function Page() {
return ( return (
<> <>
<main <div>
className={clsx('flex-1 max-w-4xl px-8 py-8 mx-auto', 'lg:px-0 w-full')} {/* Git projects */}
>
<div> <div>
{/* Git projects */} <h1 className="mb-4 text-2xl">Projects</h1>
<div>
<h1 className="mb-4 text-2xl">Projects</h1>
</div>
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5',
)}
>
{projects.map((item, i) => (
<ProjectCard
key={i}
icon={iconMap[item.icon ?? 'github']}
project={item}
/>
))}
</div>
</div> </div>
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5',
)}
>
{projects.map((item, i) => (
<ProjectCard
key={i}
icon={iconMap[item.icon ?? 'github']}
project={item}
/>
))}
</div>
</div>
<div className="mt-6"> <div className="mt-6">
<div> <div>
<h1 className="mb-4 text-2xl">Seft Hosts</h1> <h1 className="mb-4 text-2xl">Seft Hosts</h1>
</div>
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5',
)}
>
{selfHosts.map((item, i) => (
<ProjectCard
key={i}
icon={iconMap[item.icon ?? 'github']}
project={item}
/>
))}
</div>
</div> </div>
</main> <div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5',
)}
>
{selfHosts.map((item, i) => (
<ProjectCard
key={i}
icon={iconMap[item.icon ?? 'github']}
project={item}
/>
))}
</div>
</div>
</> </>
); );
} }

5
components/pages/nav-bar.tsx
View File

@ -30,6 +30,11 @@ const txtMenu = [
}, },
{ {
id: 4, id: 4,
name: 'Friends',
path: '/friends',
},
{
id: 5,
name: 'About', name: 'About',
path: '/about', path: '/about',
}, },

3
styles/globals.css
View File

@ -143,10 +143,9 @@ code {
} }
pre { pre {
padding: 1em; @apply p-4 rounded-lg;
margin: 0.5em 0; margin: 0.5em 0;
overflow: auto; overflow: auto;
border-radius: 0.3em;
@apply bg-white dark:bg-rua-gray-800; @apply bg-white dark:bg-rua-gray-800;
/* font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', /* font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono',
monospace; */ monospace; */