Setup Sanity queries on resources page

apps/sanity/schemas/resource.ts

@@ -13,6 +13,20 @@ export default defineType({
 			type: "string",
 			validation: (Rule) => Rule.required(),
 		}),
+		defineField({
+			name: "resourceType",
+			title: "Resource Type",
+			type: "string",
+			options: {
+				list: [
+					{ title: "API", value: "api" },
+					{ title: "Backend", value: "backend" },
+					{ title: "Frontend", value: "frontend" },
+					{ title: "Starter Pack", value: "starter-pack" },
+				],
+			},
+			validation: (Rule) => Rule.required(),
+		}),
 		defineField({
 			name: "description",
 			title: "Description",

apps/site/src/app/resources/page.tsx

@@ -1 +1,3 @@
+export const revalidate = 60;
+
 export { Resources as default } from "@/views";

apps/site/src/app/schedule/page.tsx

@@ -1 +1,3 @@
+export const revalidate = 60;
+
 export { Schedule as default } from "@/views";

apps/site/src/views/Resources/Resources.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import styles from "./Resources.module.scss";
 import Landing from "./sections/Landing/Landing";
 import ApiResources from "./sections/ApiResources/ApiResources";

apps/site/src/views/Resources/components/ApiGroup/ApiGroup.tsx

@@ -2,9 +2,8 @@ import styles from "./ApiGroup.module.scss";
 
 export interface APIGroupProps {
 	title: string;
-	description: string;
+	description: JSX.Element;
 	stickerSrc: string;
-	tagSrc: string;
 	tagLink: string;
 	stickyNoteColor: string;
 }
@@ -13,7 +12,6 @@ export function ApiGroup({
 	title,
 	description,
 	stickerSrc,
-	tagSrc,
 	tagLink,
 	stickyNoteColor,
 }: APIGroupProps) {
@@ -28,11 +26,8 @@ export function ApiGroup({
 				<div className={styles.tape}></div>
 				<img src={stickerSrc} />
 				<h3>{title}</h3>
-				<p className={styles.text}>{description}</p>
+				<div className={styles.text}>{description}</div>
 			</div>
-			<a href={tagLink} target="_blank">
-				<img src={tagSrc} className={styles.tag} />
-			</a>
 		</div>
 	);
 }

apps/site/src/views/Resources/components/BackendGroup/BackendGroup.tsx

@@ -6,15 +6,14 @@ import Clear_Tape_Right from "@/assets/images/clear_tape_right.svg";
 
 export interface tag {
 	link: string;
-	src: string;
-	alt: string;
+	text: string;
 	className?: string;
 }
 
 export interface BackendGroupProps {
 	stickyNoteColor: string;
 	title: string;
-	description: string;
+	description: JSX.Element;
 	tags: tag[];
 	tapeOrientation: string;
 	className?: string | undefined;
@@ -54,29 +53,22 @@ export function BackendGroup({
 				{tapePosition}
 				<div className={styles.text_flexbox}>
 					<h3 className={styles.title}>{title}</h3>
-					<p className={styles.description}>{description}</p>
+					<div className={styles.description}>{description}</div>
 				</div>
 				<div className={styles.tag_flexbox}>
 					{tags?.map((tag) => (
-						<Resource_Tag
-							key={tag.src}
-							link={tag.link}
-							src={tag.src}
-							alt={tag.alt}
-						/>
+						<Resource_Tag key={tag.text} link={tag.link} text={tag.text} />
 					))}
 				</div>
 			</div>
 		</>
 	);
 }
 
-function Resource_Tag({ link, className, src, alt }: tag) {
+function Resource_Tag({ link, className, text }: tag) {
 	return (
-		<div className={`${className} ${styles.tag_wrapper}`}>
-			<Link href={link}>
-				<img src={src} className={styles.tag} alt={alt} />
-			</Link>
+		<div className={`${className} ${styles.tag}`}>
+			<Link href={link}>{text}</Link>
 		</div>
 	);
 }

apps/site/src/views/Resources/getResources.ts

@@ -0,0 +1,54 @@
+import { z } from "zod";
+import { cache } from "react";
+import { client } from "@/lib/sanity/client";
+import { SanityDocument } from "@/lib/sanity/types";
+
+const Resources = z.array(
+	SanityDocument.extend({
+		description: z.array(
+			z.object({
+				_key: z.string(),
+				markDefs: z.array(
+					z.object({
+						_type: z.string(),
+						href: z.optional(z.string()),
+						_key: z.string(),
+					}),
+				),
+				children: z.array(
+					z.object({
+						text: z.string(),
+						_key: z.string(),
+						_type: z.literal("span"),
+						marks: z.array(z.string()),
+					}),
+				),
+				_type: z.literal("block"),
+				style: z.literal("normal"),
+			}),
+		),
+		resourceType: z.string(),
+		link: z.string(),
+		logo: z.object({
+			_type: z.string(),
+			asset: z.object({
+				_ref: z.string(),
+				_type: z.literal("reference"),
+			}),
+		}),
+		stickyNoteColor: z.object({
+			_type: z.literal("color"),
+			alpha: z.number(),
+			hex: z.string(),
+		}),
+		title: z.string(),
+	}),
+);
+
+export const getResources = cache(async (resourceType: string) => {
+	return Resources.parse(
+		await client.fetch(
+			`*[_type == 'resource' && resourceType == '${resourceType}']`,
+		),
+	);
+});

apps/site/src/views/Resources/sections/ApiResources/ApiResources.tsx

@@ -1,15 +1,16 @@
-import Container from "react-bootstrap/Container";
-import Row from "react-bootstrap/Row";
-import Col from "react-bootstrap/Col";
+import { PortableText } from "@portabletext/react";
+import imageUrlBuilder from "@sanity/image-url";
 
 import styles from "./ApiResources.module.scss";
 
-import { ApiGroup, APIGroupProps } from "../../components/ApiGroup/ApiGroup";
-import ApiResourcesList from "./config";
+import { ApiGroup } from "../../components/ApiGroup/ApiGroup";
+import { getResources } from "../../getResources";
+import { client } from "@/lib/sanity/client";
 
-function ApiResources() {
+async function ApiResources() {
+	const resources = await getResources("api");
 	return (
-		<Container>
+		<div className="container">
 			{/* Card Component */}
 			<div className={styles.card}>
 				<h2 className={styles.title}>API Resources</h2>
@@ -21,22 +22,23 @@ function ApiResources() {
 					retrieve data.
 				</p>
 			</div>
-			<Row className={styles["bottom-spacer"]}>
+			<div className={styles["bottom-spacer"] + " row"}>
 				{/* Sticky Notes */}
-				{ApiResourcesList.map((resource: APIGroupProps) => (
-					<Col className={styles.column} key={resource.stickyNoteColor}>
-						<ApiGroup
-							title={resource.title}
-							description={resource.description}
-							stickerSrc={resource.stickerSrc}
-							tagSrc={resource.tagSrc}
-							tagLink={resource.tagLink}
-							stickyNoteColor={resource.stickyNoteColor}
-						/>
-					</Col>
-				))}
-			</Row>
-		</Container>
+				{resources.map(
+					({ _id, title, description, link, logo, stickyNoteColor }) => (
+						<div className={styles.column + " col"} key={_id}>
+							<ApiGroup
+								title={title}
+								description={<PortableText value={description} />}
+								stickerSrc={imageUrlBuilder(client).image(logo).url()}
+								tagLink={link}
+								stickyNoteColor={stickyNoteColor.hex}
+							/>
+						</div>
+					),
+				)}
+			</div>
+		</div>
 	);
 }
 

apps/site/src/views/Resources/sections/BackendResources/BackendResources.tsx

@@ -1,16 +1,12 @@
-import Container from "react-bootstrap/Container";
-import Row from "react-bootstrap/Row";
-import Col from "react-bootstrap/Col";
 import styles from "./BackendResources.module.scss";
-import {
-	BackendGroup,
-	BackendGroupProps,
-} from "../../components/BackendGroup/BackendGroup";
-import BackendResourcesList from "./config";
+import { BackendGroup } from "../../components/BackendGroup/BackendGroup";
+import { getResources } from "../../getResources";
+import { PortableText } from "@portabletext/react";
 
-function BackendResources() {
+async function BackendResources() {
+	const resources = await getResources("backend");
 	return (
-		<Container>
+		<div className="container">
 			{/* Card Component */}
 			<div className={styles.card}>
 				<h2 className={styles.title}>Backend Framework Resources</h2>
@@ -20,22 +16,23 @@ function BackendResources() {
 					needs.
 				</p>
 			</div>
-			<Row className={styles["bottom-spacer"]}>
+			<div className={styles["bottom-spacer"] + " row"}>
 				{/* Sticky Notes */}
-				{BackendResourcesList.map((resource: BackendGroupProps) => (
-					<Col className={styles.column} key={resource.stickyNoteColor}>
-						<BackendGroup
-							stickyNoteColor={resource.stickyNoteColor}
-							title={resource.title}
-							description={resource.description}
-							tapeOrientation={resource.tapeOrientation}
-							tags={resource.tags}
-							className={resource?.className}
-						/>
-					</Col>
-				))}
-			</Row>
-		</Container>
+				{resources.map(
+					({ _id, title, description, link, logo, stickyNoteColor }) => (
+						<div className={styles.column + " div"} key={_id}>
+							<BackendGroup
+								stickyNoteColor={stickyNoteColor.hex}
+								title={title}
+								description={<PortableText value={description} />}
+								tags={[]}
+								tapeOrientation="left"
+							/>
+						</div>
+					),
+				)}
+			</div>
+		</div>
 	);
 }