Feature: Resources Page

apps/sanity/sanity.config.ts

@@ -1,19 +1,60 @@
-import {defineConfig} from 'sanity'
-import {deskTool} from 'sanity/desk'
-import {visionTool} from '@sanity/vision'
-import {colorInput} from '@sanity/color-input'
-import {schemaTypes} from './schemas'
+import { defineConfig } from "sanity";
+import { deskTool } from "sanity/desk";
+import { visionTool } from "@sanity/vision";
+import { colorInput } from "@sanity/color-input";
+import { schemaTypes } from "./schemas";
+import { ListOrdered, Folders, Globe } from "lucide-react";
 
 export default defineConfig({
-  name: 'default',
-  title: 'irvinehacks-site-2024',
+	name: "default",
+	title: "irvinehacks-site-2024",
 
-  projectId: 'fosuyru0',
-  dataset: 'production',
+	projectId: "fosuyru0",
+	dataset: "production",
 
-  plugins: [deskTool(), visionTool(), colorInput()],
+	plugins: [
+		deskTool({
+			structure: (S) =>
+				S.list()
+					.title("Content")
+					.items([
+						...S.documentTypeListItems().filter(
+							(listItem) =>
+								![
+									"resourceCategoryOrder",
+									"resourceCategory",
+									"resource",
+								].includes(listItem.getId()!)
+						),
+						S.divider(),
+						S.listItem()
+							.title("Resource Categories Order")
+							.icon(ListOrdered)
+							.child(
+								S.document()
+									.schemaType("resourceCategoryOrder")
+									.documentId("resourceCategoryOrder")
+									.title("Resource Categories Order")
+							),
+						S.listItem()
+							.title("Resource Categories")
+							.icon(Folders)
+							.child(
+								S.documentTypeList("resourceCategory").title(
+									"Resource Categories"
+								)
+							),
+						S.listItem()
+							.title("Resources")
+							.icon(Globe)
+							.child(S.documentTypeList("resource").title("Resources")),
+					]),
+		}),
+		visionTool(),
+		colorInput(),
+	],
 
-  schema: {
-    types: schemaTypes,
-  },
-})
+	schema: {
+		types: schemaTypes,
+	},
+});

apps/sanity/schemas/index.ts

@@ -2,6 +2,14 @@ import faqs from "./faqs";
 import event from "./event";
 import resource from "./resource";
 import resourceCategory from "./resourceCategory";
+import resourceCategoryOrder from "./resourceCategoryOrder";
 import sponsors from "./sponsors";
 
-export const schemaTypes = [faqs, event, resource, resourceCategory, sponsors];
+export const schemaTypes = [
+	faqs,
+	event,
+	resource,
+	resourceCategory,
+	resourceCategoryOrder,
+	sponsors,
+];

apps/sanity/schemas/resourceCategoryOrder.ts

@@ -0,0 +1,21 @@
+import { defineArrayMember, defineField, defineType } from "sanity";
+
+export default defineType({
+	name: "resourceCategoryOrder",
+	title: "Resource Categories Order",
+	type: "document",
+	fields: [
+		defineField({
+			name: "order",
+			title: "Order",
+			type: "array",
+			of: [
+				defineArrayMember({
+					type: "reference",
+					to: { type: "resourceCategory" },
+				}),
+			],
+			validation: (Rule) => Rule.required(),
+		}),
+	],
+});

apps/site/src/app/(main)/resources/getResources.ts

@@ -2,16 +2,39 @@ import { z } from "zod";
 import { cache } from "react";
 import { client } from "@/lib/sanity/client";
 import { SanityDocument, SanityReference } from "@/lib/sanity/types";
+import { groq } from "next-sanity";
 
-const Resources = z.array(
-	SanityDocument.extend({
-		_type: z.literal("resource"),
-		link: z.string(),
-		title: z.string(),
-		resourceType: SanityReference,
-	}),
-);
+const Resources = z.object({
+	order: z.array(
+		z.object({
+			_id: z.string(),
+			iconUrl: z.string(),
+			title: z.string(),
+			description: z.string(),
+			resources: z.array(
+				SanityDocument.extend({
+					_type: z.literal("resource"),
+					link: z.string(),
+					title: z.string(),
+					resourceType: SanityReference,
+				}),
+			),
+		}),
+	),
+});
 
 export const getResources = cache(async () => {
-	return Resources.parse(await client.fetch("*[_type == 'resource']"));
+	return Resources.parse(
+		await client.fetch(groq`
+			*[_type == 'resourceCategoryOrder' && _id == "resourceCategoryOrder"][0] {
+				order[]->{
+					_id,
+					'iconUrl': icon.asset->url,
+					title,
+					description,
+					'resources': *[_type == 'resource' && resourceType._ref == ^._id] | order(title asc)
+				}
+			}
+	`),
+	);
 });

apps/site/src/app/(main)/resources/page.tsx

@@ -0,0 +1,60 @@
+import Button from "@/lib/components/Button/Button";
+import { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { getResources } from "./getResources";
+
+export const revalidate = 60;
+
+export const metadata: Metadata = {
+	title: "Resources | IrvineHacks 2024",
+};
+
+export default async function Resources() {
+	if (process.env.MAINTENANCE_MODE_RESOURCES) {
+		redirect("/");
+	}
+
+	const resources = await getResources();
+
+	return (
+		<>
+			<section className="h-full w-full mb-12">
+				<div className="m-36">
+					<h1 className="font-display text-4xl md:text-5xl font-bold mb-2 text-center">
+						Resources
+					</h1>
+				</div>
+				<div className="mb-40 mx-4 ">
+					{resources.order.map(
+						({ _id, iconUrl, title, description, resources }, i) => (
+							<div
+								key={_id}
+								className="max-w-5xl w-full mx-auto mb-12 bg-[var(--color-cream)] text-[#2F1C00] p-12 rounded-2xl lg:grid lg:gap-20 lg:grid-cols-2"
+							>
+								<div>
+									<div className="flex gap-2 lg:flex-col">
+										{/* eslint-disable-next-line @next/next/no-img-element */}
+										<img className="w-8 h-auto lg:w-16" src={iconUrl} alt="" />
+										<h2 className="text-2xl font-bold">{title}</h2>
+									</div>
+									<p>{description}</p>
+								</div>
+								<div className="flex flex-col gap-3 lg:gap-4">
+									{resources.map(({ _id, title, link }) => (
+										<Button
+											key={_id}
+											text={title}
+											href={link}
+											className="w-[100%!important] text-center"
+											// color={i % 2 === 0 ? "light" : "dark"}
+										/>
+									))}
+								</div>
+							</div>
+						),
+					)}
+				</div>
+			</section>
+		</>
+	);
+}