diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.tsx | 16 | ||||
| -rw-r--r-- | src/components/Card.tsx (renamed from src/components/CardLink.tsx) | 0 | ||||
| -rw-r--r-- | src/components/Gallery.tsx (renamed from src/components/ImageGalleryGrid.tsx) | 2 | ||||
| -rw-r--r-- | src/index.css | 13 | ||||
| -rw-r--r-- | src/pages/404.tsx (renamed from src/pages/404Page.tsx) | 2 | ||||
| -rw-r--r-- | src/pages/Blog.tsx | 19 | ||||
| -rw-r--r-- | src/pages/Gear.tsx | 8 | ||||
| -rw-r--r-- | src/pages/Home.tsx | 8 | ||||
| -rw-r--r-- | src/pages/Post.tsx | 8 | ||||
| -rw-r--r-- | src/pages/Projects.tsx | 8 |
10 files changed, 45 insertions, 39 deletions
diff --git a/src/App.tsx b/src/App.tsx index dba1c7c..ca7bcb4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,10 @@ import { Routes, Route } from 'react-router-dom'; import Navbar from './components/Navbar'; -import GearPage from './pages/Gear'; -import HomePage from './pages/Home'; -import ProjectsPage from './pages/Projects'; +import Gear from './pages/Gear'; +import Home from './pages/Home'; +import Projects from './pages/Projects'; import Footer from './components/Footer'; -import NotFoundPage from './pages/404Page'; +import NotFound from './pages/404'; import Blog from './pages/Blog'; import Post from './pages/Post'; @@ -15,12 +15,12 @@ function App() { <Navbar /> <section className="max-w-xl mx-auto py-5 px-4"> <Routes> - <Route path="/" element={<HomePage />} /> - <Route path="/gear" element={<GearPage />} /> - <Route path='/projects' element={<ProjectsPage />} /> + <Route path="/" element={<Home />} /> + <Route path="/gear" element={<Gear />} /> + <Route path='/projects' element={<Projects />} /> <Route path='/blog' element={<Blog />} /> <Route path='/blog/:slug' element={<Post />} /> - <Route path='*' element={<NotFoundPage />} /> + <Route path='*' element={<NotFound />} /> </Routes> </section> <Footer /> diff --git a/src/components/CardLink.tsx b/src/components/Card.tsx index e71cf33..e71cf33 100644 --- a/src/components/CardLink.tsx +++ b/src/components/Card.tsx diff --git a/src/components/ImageGalleryGrid.tsx b/src/components/Gallery.tsx index 0b657cf..ffcf0e1 100644 --- a/src/components/ImageGalleryGrid.tsx +++ b/src/components/Gallery.tsx @@ -8,7 +8,7 @@ interface ImageItems { }>; } -export default function ImageGalleryGrid({ images }: ImageItems) { +export default function Gallery({ images }: ImageItems) { const [selectedIndex, setSelectedIndex] = useState<number | null>(null); const closeModal = () => setSelectedIndex(null); const prev = (e?: React.MouseEvent) => { diff --git a/src/index.css b/src/index.css index fcfe02a..4e1f7d9 100644 --- a/src/index.css +++ b/src/index.css @@ -3,7 +3,10 @@ @custom-variant dark (&:where(.dark, .dark *)); @layer base { - body { + + html, + body, + #root { @apply bg-white dark:bg-black/95; } @@ -31,15 +34,15 @@ @apply text-xl font-semibold dark:text-gray-200; } - article>*>p { + .post p { @apply mb-4 leading-relaxed; } - article>*>ul { + .post ul { @apply list-disc pl-6 space-y-1; } - article>*>*>img { + .post img { @apply mx-auto mb-4 w-64 rounded-lg shadow; } @@ -51,7 +54,7 @@ @apply underline text-purple-500; } - pre { + .post pre { @apply whitespace-pre overflow-x-auto max-w-full max-h-80 rounded-lg border p-2 my-2 border-neutral-300 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900; } diff --git a/src/pages/404Page.tsx b/src/pages/404.tsx index d7bfa10..d9eed89 100644 --- a/src/pages/404Page.tsx +++ b/src/pages/404.tsx @@ -1,7 +1,7 @@ import { useNavigate } from "react-router-dom"; import { useEffect } from "react"; -export default function NotFoundPage() { +export default function NotFound() { const navigate = useNavigate(); useEffect(() => { diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx index 47b44d6..fb07fb1 100644 --- a/src/pages/Blog.tsx +++ b/src/pages/Blog.tsx @@ -1,6 +1,6 @@ -import CardLink from "../components/CardLink"; +import Card from "../components/Card"; -interface PostMeta { +interface Meta { slug: string; title: string; date: string; @@ -10,13 +10,13 @@ interface PostMeta { const postFiles = import.meta.glob("../blog/*.md", { eager: true }) as Record< string, - { attributes: Omit<PostMeta, "slug"> } + { attributes: Omit<Meta, "slug"> } >; -const posts: PostMeta[] = Object.entries(postFiles) +const posts: Meta[] = Object.entries(postFiles) .map(([path, mod]) => ({ slug: path.split("/").pop()!.replace(".md", ""), - ...(mod.attributes as Omit<PostMeta, "slug">), + ...(mod.attributes as Omit<Meta, "slug">), })) .sort( (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime() @@ -24,18 +24,19 @@ const posts: PostMeta[] = Object.entries(postFiles) export default function Blog() { return ( - <section className="container mx-auto px-4 py-10"> - <h1 className="text-4xl font-bold mb-8">Blog</h1> + <> + <title>߸ projects</title> + <h1>Blog</h1> {posts.map((post) => ( <a key={post.slug} href={`/blog/${post.slug}`} className="block py-1"> - <CardLink + <Card title={post.title} body={post.excerpt} imgSrc={post.cover} /> </a> ))} - </section> + </> ); } diff --git a/src/pages/Gear.tsx b/src/pages/Gear.tsx index dbbcdfb..a1984ee 100644 --- a/src/pages/Gear.tsx +++ b/src/pages/Gear.tsx @@ -1,4 +1,4 @@ -import CardLink from '../components/CardLink'; +import Card from '../components/Card'; import { dailyDrivers, @@ -14,7 +14,7 @@ function PartsGroup({ title, parts }: { title?: string; parts: Part[] }) { <ul className="space-y-2"> {parts.map((p) => ( <li key={p.name}> - <CardLink + <Card title={p.name} body={p.description} href={p.url} @@ -27,7 +27,7 @@ function PartsGroup({ title, parts }: { title?: string; parts: Part[] }) { ); } -export default function GearPage() { +export default function Gear() { return ( <> <title>߸ gear</title> @@ -40,4 +40,4 @@ export default function GearPage() { <PartsGroup title="NAS" parts={nasParts} /> </> ); -}
\ No newline at end of file +} diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 2048122..9b73c05 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,6 +1,6 @@ -import ImageGalleryGrid from "../components/ImageGalleryGrid"; +import Gallery from "../components/Gallery"; -export default function HomePage() { +export default function Home() { return ( <> <title>߸ hi</title> @@ -10,7 +10,7 @@ export default function HomePage() { I have a passion for hardware and software, studying computer science. Currently building own 3d printing projects and learning nix. </p> - <ImageGalleryGrid + <Gallery images={[ { src: "/images/3ds.webp", alt: "Nintendo 3DS", id: 1 }, { src: "/images/esp32.webp", alt: "ESP 32", id: 2 }, @@ -33,4 +33,4 @@ export default function HomePage() { </ul> </> ); -}
\ No newline at end of file +} diff --git a/src/pages/Post.tsx b/src/pages/Post.tsx index b2b1d5b..76396ae 100644 --- a/src/pages/Post.tsx +++ b/src/pages/Post.tsx @@ -26,7 +26,7 @@ export default function Post() { const { attributes: meta, ReactComponent: Content } = post; return ( - <article> + <> <a href="/blog" className="no-underline hover:underline"> ← Back </a> @@ -41,7 +41,9 @@ export default function Post() { <h1>{meta.title}</h1> <p className="text-sm text-zinc-500 mb-8">{formDate.format(new Date(meta.date))}</p> - <Content /> - </article> + <div className="post"> + <Content /> + </div> + </> ); } diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx index d49a3d2..973eaa0 100644 --- a/src/pages/Projects.tsx +++ b/src/pages/Projects.tsx @@ -1,7 +1,7 @@ -import CardLink from '../components/CardLink'; +import Card from '../components/Card'; import { projects, type Project } from '../data/projects'; -export default function ProjectsPage() { +export default function Projects() { return ( <> <title>߸ projects</title> @@ -10,7 +10,7 @@ export default function ProjectsPage() { <ul className="space-y-2"> {projects.map((p: Project) => ( <li key={p.name}> - <CardLink + <Card title={p.name} body={p.description} href={p.url} @@ -21,4 +21,4 @@ export default function ProjectsPage() { </ul> </> ); -}
\ No newline at end of file +} |