Fix linting errors, title padding, add subtitle

This commit is contained in:
2024-12-28 21:36:16 -06:00
parent d75925ba1f
commit 0945d706f4
2 changed files with 20 additions and 16 deletions

View File

@@ -1,8 +1,8 @@
import { readItem, readItems } from "@directus/sdk"; import { env } from "@/env/server.mjs";
import directus from "@/utils/directus";
import { readItem } from "@directus/sdk";
import type { NextApiRequest, NextApiResponse } from "next"; import type { NextApiRequest, NextApiResponse } from "next";
import { z } from "zod"; import { z } from "zod";
import directus from "@/utils/directus";
import { env } from "@/env/server.mjs";
async function getURLs( async function getURLs(
type: string, type: string,
@@ -25,11 +25,11 @@ async function getURLs(
const urls = ["/technology"]; const urls = ["/technology"];
// Get all projects with the technology // Get all projects with the technology
const all_projects = await directus.request(readItems("project", { // const all_projects = await directus.request(readItems("project", {
fields: ["id", { // fields: ["id", {
technologies: ["id"], // technologies: ["id"],
}], // }],
})); // }));
// if (all_projects != null) { // if (all_projects != null) {
// for (const project of all_projects) { // for (const project of all_projects) {

View File

@@ -11,7 +11,7 @@ type Props = {
async function getProjects() { async function getProjects() {
return await directus.request(readItems("project", { return await directus.request(readItems("project", {
fields: ["name", "shortDescription", "icon", {links: ["url"]}], fields: ["id", "name", "shortDescription", "icon", {links: ["url"]}],
})); }));
} }
@@ -28,18 +28,22 @@ const ProjectsPage: NextPage<Props> = ({projects}) => {
return ( return (
<AppWrapper dotsClassName="animate-bg-fast"> <AppWrapper dotsClassName="animate-bg-fast">
<div className="max-w-500 mx-auto py-20 grid h-full w-max grid-cols-1 gap-x-20 gap-y-9 md:grid-cols-2 lg:grid-cols-3"> <div className="max-w-500 mx-auto py-20 grid h-full w-max grid-cols-1 gap-x-20 gap-y-9 md:grid-cols-2 lg:grid-cols-3">
<div className="md:col-span-2 lg:col-span-3 w-full"> <div className="md:col-span-2 text-center lg:col-span-3 w-full mb-10">
<h1 className="text-4xl md:text-5xl text-center text-zinc-200 opacity-100 font-hanken"> <h1 className="text-4xl md:text-5xl pb-3 text-zinc-200 opacity-100 font-hanken">
Projects Projects
</h1> </h1>
<span className="text-lg text-zinc-400">
created, maintained, or contributed to by me...
</span>
</div> </div>
{projects.map(({ name, shortDescription: description, links, icon }) => {projects.map(({ id, name, shortDescription: description, links, icon }) =>
{ {
const DynamicLink = links?.length ?? 0 > 0 ? Link : "div"; const useAnchor = links?.length ?? 0 > 0;
const linkProps = links?.length ?? 0 > 0 ? { href: links![0]!.url, target: "_blank", rel: "noreferrer" } : {}; const DynamicLink = useAnchor ? Link : "div";
const linkProps = useAnchor ? { href: links![0]!.url, target: "_blank", rel: "noreferrer" } : {};
return <div className="flex"> return <div className="flex" key={id}>
{/* @ts-ignore */} {/* @ts-expect-error because div can't accept href */}
<DynamicLink <DynamicLink
key={name} key={name}
title={name} title={name}