renttrent/peroxy_site
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bg fix

Browse Source
This commit is contained in:
rei
2023-04-24 18:27:42 +02:00
parent 84cc6d64db
commit bab35fbfce
3 changed files with 65 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
layouts/MainLayout.tsx
View File

@@ -1,13 +1,12 @@
import { PropsWithChildren } from "react";
import { R3Gradient } from '../components/R3Background';
import { Navbar } from "../components/Navbar";
import { PropsWithChildren } from 'react'
import { R3Gradient } from '../components/R3Background'
import { Navbar } from '../components/Navbar'
export const MainLayout = ({ children }: PropsWithChildren) => {
return (
<div className="w-full">
<Navbar />
<R3Gradient />
<main className="xl:p-5 p-4 px-5 xl:mx-0">{children}</main>
</div>
);
};
return (
<div className="w-full">
<Navbar />
<main className="xl:p-5 p-4 px-5 xl:mx-0">{children}</main>
</div>
)
}

8
pages/_app.tsx
View File

@@ -1,6 +1,12 @@
import { R3Gradient } from '../components/R3Background'
import '../styles/globals.css'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
return (
<>
<R3Gradient />
<Component {...pageProps} />
</>
)
}

112
pages/projects/index.tsx
View File

@@ -1,71 +1,55 @@
import { GetServerSideProps } from "next";
import { MainLayout } from "../../layouts/MainLayout";
import { Post, getAllProjectsFrontMatter } from "../../utils/markdown";
import Link from "next/link";
import { formatDate } from "../../utils/general";
import { BasicArticleProps } from "../../components/PostHeader";
import { GetServerSideProps } from 'next'
import { MainLayout } from '../../layouts/MainLayout'
import { Post, getAllProjectsFrontMatter } from '../../utils/markdown'
import Link from 'next/link'
import { formatDate } from '../../utils/general'
import { BasicArticleProps } from '../../components/PostHeader'
const ProjectCard = ({
project,
slug,
}: {
project: BasicArticleProps;
slug: string;
}) => {
return (
<div className="p-4 rounded-md border border-gray-200 shadow-md shadow-gray-200 dark:shadow-gray-900 dark:border-gray-700 grid grid-cols-1 xl:grid-cols-2 items-center gap-4 bg-black bg-opacity-60">
<div className="order-last xl:order-1">
<div className="text-sm font-medium text-gray-500">
{formatDate(project.date)}
const ProjectCard = ({ project, slug }: { project: BasicArticleProps; slug: string }) => {
return (
<div className="p-4 rounded-md border border-gray-200 shadow-md shadow-gray-200 dark:shadow-gray-900 dark:border-gray-700 grid grid-cols-1 xl:grid-cols-2 items-center gap-4 bg-black bg-opacity-60">
<div className="order-last xl:order-1">
<div className="text-sm font-medium text-gray-500">{formatDate(project.date)}</div>
<h2 className="text-2xl font-bold">{project.title}</h2>
<p className="text-gray-600 dark:text-gray-400 text-sm">{project.description}</p>
<Link href={`project/${slug}`}>
<button className="bg-action px-2 py-1 rounded-md mt-4 hover:bg-action/60 transition-all ease-in duration-100 font-bold text-white">
Read more
</button>
</Link>
</div>
{project.thumbnail && (
<img
src={project.thumbnail}
alt={`${slug}-thumbnail`}
className="w-full xl:h-40 h-auto object-cover rounded-md order-1 xl:order-last"
/>
)}
</div>
<h2 className="text-2xl font-bold">{project.title}</h2>
<p className="text-gray-600 dark:text-gray-400 text-sm">
{project.description}
</p>
<Link href={`project/${slug}`}>
<button className="bg-action px-2 py-1 rounded-md mt-4 hover:bg-action/60 transition-all ease-in duration-100 font-bold text-white">
Read more
</button>
</Link>
</div>
{project.thumbnail && (
<img
src={project.thumbnail}
alt={`${slug}-thumbnail`}
className="w-full xl:h-40 h-auto object-cover rounded-md order-1 xl:order-last"
/>
)}
</div>
);
};
)
}
const Projects = ({ posts }: { posts: Post[] }) => {
return (
<MainLayout>
<h1 className="text-3xl font-bold text-gray-800 dark:text-gray-100">
Projects
</h1>
<div className="w-full h-0.5 bg-violet-200 dark:bg-white/20 my-4 rounded-full" />
<div className="grid grid-cols-1 gap-4">
{posts.map((post, index) => (
<ProjectCard
key={index}
project={post.frontMatter as BasicArticleProps}
slug={post.slug}
/>
))}
</div>
</MainLayout>
);
};
return (
<MainLayout>
<h1 className="text-3xl font-bold text-gray-800 dark:text-gray-100">Projects</h1>
<div className="w-full h-0.5 bg-violet-200 dark:bg-white/20 my-4 rounded-full" />
<div className="grid grid-cols-1 gap-4">
{posts.map((post, index) => (
<ProjectCard key={index} project={post.frontMatter as BasicArticleProps} slug={post.slug} />
))}
</div>
</MainLayout>
)
}
export const getServerSideProps: GetServerSideProps = async () => {
const posts = getAllProjectsFrontMatter();
return {
props: {
posts,
},
};
};
const posts = getAllProjectsFrontMatter()
return {
props: {
posts,
},
}
}
export default Projects;
export default Projects