AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add QuadrantList and RingList to render items on homepage and quadrant page

Browse Source
This commit is contained in:
Mathias Schopmans
2024-02-15 15:09:31 +01:00
committed by Mathias Schopmans
parent 5603384603
commit 86c1d9090b
13 changed files with 277 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/pages/[quadrant]/[id].tsx Normal file
View File

@@ -0,0 +1,57 @@
import Head from "next/head";
import { useRouter } from "next/router";
import { useMemo } from "react";
import { RingBadge } from "@/components/Badge/Badge";
import { ItemList } from "@/components/ItemList/ItemList";
import {
getItem,
getItems,
getQuadrant,
sortByFeaturedAndTitle,
} from "@/lib/data";
import { formatTitle } from "@/lib/format";
import { CustomPage } from "@/pages/_app";
const ItemPage: CustomPage = () => {
const { query } = useRouter();
const quadrant = getQuadrant(query.quadrant as string);
const item = getItem(query.id as string);
const relatedItems = useMemo(() => {
return getItems()
.filter((i) => i.quadrant === quadrant?.id && i.ring == item?.ring)
.sort(sortByFeaturedAndTitle);
}, [quadrant?.id, item?.ring]);
if (!quadrant || !item) return null;
return (
<>
<Head>
<title>{formatTitle(item.title, quadrant.title)}</title>
<meta name="description" content={quadrant.description} />
</Head>
<h1>{item.title}</h1>
<RingBadge ring={item.ring} size="large" />
<div dangerouslySetInnerHTML={{ __html: item.body }}></div>
<ItemList items={relatedItems} activeId={item.id} />
</>
);
};
export default ItemPage;
export const getStaticPaths = async () => {
const items = getItems();
const paths = items.map((item) => ({
params: { quadrant: item.quadrant, id: item.id },
}));
return { paths, fallback: false };
};
export const getStaticProps = async () => {
return { props: {} };
};

22
src/pages/[quadrant]/index.tsx
View File

@@ -1,15 +1,25 @@
import Head from "next/head";
import { useRouter } from "next/router";
import { useMemo } from "react";
import { getQuadrant, getQuadrants } from "@/lib/data";
import { RingList } from "@/components/RingList/RingList";
import {
getItems,
getQuadrant,
getQuadrants,
sortByFeaturedAndTitle,
} from "@/lib/data";
import { formatTitle } from "@/lib/format";
import { CustomPage } from "@/pages/_app";
const QuadrantPage: CustomPage = () => {
const { query } = useRouter();
const quadrant = getQuadrant(query.quadrant as string);
if (!quadrant) return null;
const items = useMemo(
() => quadrant?.id && getItems(quadrant.id).sort(sortByFeaturedAndTitle),
[quadrant?.id],
);
if (!quadrant || !items) return null;
return (
<>
@@ -18,8 +28,10 @@ const QuadrantPage: CustomPage = () => {
<meta name="description" content={quadrant.description} />
</Head>
<h1>Quadrant: {query.quadrant}</h1>
<pre>{JSON.stringify(quadrant)}</pre>
<h1>{quadrant.title}</h1>
<h2>{quadrant.description}</h2>
<RingList items={items} />
</>
);
};

4
src/pages/index.tsx
View File

@@ -1,17 +1,19 @@
import { ItemList } from "@/components/ItemList/ItemList";
import { QuadrantList } from "@/components/QuadrantList/QuadrantList";
import { getAppName, getItems, getReleases } from "@/lib/data";
import { CustomPage } from "@/pages/_app";
const Home: CustomPage = () => {
const appName = getAppName();
const version = getReleases().length;
const items = getItems(undefined, true);
return (
<>
<h1>
{appName}{" "}
<span style={{ color: "var(--highlight)" }}>Version #{version}</span>
</h1>
<ItemList items={getItems()} />
<QuadrantList items={items} />
</>
);
};