mirror of
https://github.com/hex248/ob248.com.git
synced 2026-02-08 02:33:02 +00:00
all projects added
This commit is contained in:
125
src/App.tsx
125
src/App.tsx
@@ -1,7 +1,7 @@
|
||||
import { ProjectListItem } from "@/components/ProjectListItem";
|
||||
import { type ProjectEntry, projectList, projects } from "@/projects";
|
||||
import { Link, Route, Routes, useParams } from "react-router-dom";
|
||||
import { ThemeToggle } from "@/components/theme-toggle";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { type ProjectMetadata, projectList, projects } from "@/projects";
|
||||
import { ThemeToggle } from "./components/theme-toggle";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@@ -16,20 +16,28 @@ function App() {
|
||||
export default App;
|
||||
|
||||
function Home() {
|
||||
const isDevMode = import.meta.env.VITE_PUBLIC_DEV === "1";
|
||||
const sortedProjects: ProjectEntry[] = [...projectList].sort(
|
||||
(a, b) =>
|
||||
parseDate(b.metadata.date).getTime() -
|
||||
parseDate(a.metadata.date).getTime(),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-dvh flex flex-col items-center justify-center gap-8 text-2xl px-6 py-10">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<h1 className="picnic text-8xl text-balance">Oliver Bryan</h1>
|
||||
<ThemeToggle />
|
||||
<h1 className="picnic text-7xl text-balance">Oliver Bryan</h1>
|
||||
</div>
|
||||
<div className="w-full max-w-2xl flex flex-col gap-4">
|
||||
{projectList.map((project) => (
|
||||
<div className="w-full max-w-5xl grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{sortedProjects.map((project) => (
|
||||
<ProjectListItem
|
||||
key={project.metadata.slug}
|
||||
metadata={project.metadata}
|
||||
isDevMode={isDevMode}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -45,77 +53,50 @@ function ProjectRoute() {
|
||||
function NotFound() {
|
||||
return (
|
||||
<div className="min-h-dvh flex flex-col items-center justify-center gap-4 text-2xl">
|
||||
<h1 className="text-4xl text-ayu-accent text-balance">Not found</h1>
|
||||
<Link className="text-ayu-accent underline" to="/">
|
||||
<h1 className="text-4xl text-accent text-balance">Not found</h1>
|
||||
<Link className="text-accent underline" to="/">
|
||||
Go home
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type ProjectListItemProps = {
|
||||
metadata: ProjectMetadata;
|
||||
isDevMode?: boolean;
|
||||
isHidden?: boolean;
|
||||
};
|
||||
function parseDate(dateStr: string): Date {
|
||||
const lower = dateStr.toLowerCase();
|
||||
|
||||
function ProjectListItem({
|
||||
metadata,
|
||||
isDevMode = false,
|
||||
isHidden = false,
|
||||
}: ProjectListItemProps) {
|
||||
const tags = metadata.tags ? [...metadata.tags].sort() : [];
|
||||
const isDevHidden = isDevMode && isHidden;
|
||||
if (lower.includes("q1")) return new Date("2023-01-01");
|
||||
if (lower.includes("q2")) return new Date("2023-04-01");
|
||||
if (lower.includes("q3")) return new Date("2023-07-01");
|
||||
if (lower.includes("q4")) return new Date("2023-10-01");
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={`/projects/${metadata.slug}`}
|
||||
className={cn(
|
||||
"group block flex flex-col justify-between rounded-md transition-colors duration-200",
|
||||
isDevHidden
|
||||
? "border border-dashed border-ayu-accent hover:border-ayu-accent"
|
||||
: "border-2 border-ayu-gutter-dim hover:border-ayu-gutter",
|
||||
)}
|
||||
data-tags={tags.join(",")}
|
||||
>
|
||||
<div className="flex gap-4 p-4 pb-0">
|
||||
<div className="w-16 h-16 flex-shrink-0">
|
||||
{metadata.image ? (
|
||||
<img
|
||||
src={metadata.image}
|
||||
alt={`${metadata.title} icon`}
|
||||
className="w-full h-full object-cover rounded"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full border border-ayu-gutter rounded" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="text-lg font-500 -mb-2 -mt-1 text-ayu-accent text-balance">
|
||||
{metadata.title}
|
||||
</h3>
|
||||
<p className="text-sm text-ayu-fg text-pretty">
|
||||
{metadata.description}
|
||||
</p>
|
||||
{tags.length > 0 ? (
|
||||
<div className="flex gap-1.5 text-xs flex-wrap leading-3 items-center mb-1 no-select">
|
||||
{tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="flex items-center text-ayu-fg font-500 rounded-md border border-ayu-gutter px-1.5 py-0.5"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex justify-end p-2 pt-1">
|
||||
<p className="text-xs text-ayu-gutter group-hover:text-ayu-accent">
|
||||
{metadata.date}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
const months: Record<string, number> = {
|
||||
january: 0,
|
||||
february: 1,
|
||||
march: 2,
|
||||
april: 3,
|
||||
may: 4,
|
||||
june: 5,
|
||||
july: 6,
|
||||
august: 7,
|
||||
september: 8,
|
||||
october: 9,
|
||||
november: 10,
|
||||
december: 11,
|
||||
};
|
||||
|
||||
for (const [monthName, monthIndex] of Object.entries(months)) {
|
||||
if (lower.includes(monthName)) {
|
||||
const yearMatch = dateStr.match(/\b(20\d{2})\b/);
|
||||
if (yearMatch) {
|
||||
return new Date(Number.parseInt(yearMatch[1], 10), monthIndex, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const yearMatch = dateStr.match(/\b(20\d{2})\b/);
|
||||
if (yearMatch) {
|
||||
return new Date(Number.parseInt(yearMatch[1], 10), 0, 1);
|
||||
}
|
||||
|
||||
return new Date(0);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user