feat(resources): add dynamic full-page view for embedded resources

Refactors the resources section to be data-driven and adds a dedicated full-page, mobile-friendly view for each resource.

Author: eric15342335

src/app/resources/[slug]/page.tsx

@@ -0,0 +1,36 @@
+import { ResourceIframe } from "@/components/sections/resource-iframe";
+import { buildPageMetadata } from "@/lib/config";
+import { findResourceBySlug, resources } from "@/lib/resources";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+
+export async function generateStaticParams() {
+  return resources.map((r) => ({ slug: r.slug }));
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+  const { slug } = await params;
+  const resource = findResourceBySlug(slug);
+  if (!resource) return buildPageMetadata("/resources");
+  return buildPageMetadata(`/resources/${resource.slug}`, {
+    title: resource.title,
+    description: `Embedded resource: ${resource.title}`,
+  });
+}
+
+export default async function ResourceEmbedPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const resource = findResourceBySlug(slug);
+  if (!resource) return notFound();
+
+  return (
+    <ResourceIframe
+      title={resource.title}
+      websiteUrl={resource.websiteUrl}
+      hideTopPx={resource.hideTopPx}
+      hideHeader
+      showOnMobile
+      containerHeight="100dvh"
+    />
+  );
+}

src/app/resources/page.tsx

@@ -1,5 +1,6 @@
 import { ResourceIframe } from "@/components/sections/resource-iframe";
 import { buildPageMetadata } from "@/lib/config";
+import { resources } from "@/lib/resources";
 import { Metadata } from "next";
 
 const description =
@@ -16,16 +17,15 @@ export default function Resources() {
         </p>
       </div>
       <div className="space-y-8">
-        <ResourceIframe
-          title="Where She Stood - WWII"
-          websiteUrl="https://whereshestoodwwii.wixsite.com/where-she-stood"
-          hideTopPx={50}
-        />
-        <ResourceIframe
-          title="The Spine of the Nation"
-          websiteUrl="https://thespineofthenation.wordpress.com"
-          hideTopPx={49}
-        />
+        {resources.map((r) => (
+          <ResourceIframe
+            key={r.slug}
+            title={r.title}
+            websiteUrl={r.websiteUrl}
+            hideTopPx={r.hideTopPx}
+            fullPageHref={`/resources/${r.slug}`}
+          />
+        ))}
       </div>
     </div>
   );

src/components/sections/resource-iframe.tsx

@@ -3,7 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { cn, noReturnDebounce } from "@/lib/utils";
-import { RefObject, useCallback, useEffect, useRef, useState } from "react";
+import { CSSProperties, RefObject, useCallback, useEffect, useRef, useState } from "react";
 
 const IFRAME_DEFAULTS = {
   WIDTH: 1440,
@@ -51,16 +51,23 @@ function useResponsiveScale(targetRef: RefObject<HTMLElement | null>, sourceWidt
   return scale;
 }
 
-interface ResourceIframeProps {
+type ResourceIframeProps = {
   websiteUrl: string;
   title: string;
   className?: string;
   scale?: number;
   desktopWidth?: number;
-  containerHeight?: number;
+  /** Can be a number (px) or CSS height string (e.g. "100dvh"). */
+  containerHeight?: number | CSSProperties["height"];
   /** Number of pixels to hide from the top of the iframe content (pre-scale units). */
   hideTopPx?: number;
-}
+  /** Internal link to a full-page view. If provided, the header button links here instead of external site. */
+  fullPageHref?: string;
+  /** If true, omits the header (useful for full-page variant). */
+  hideHeader?: boolean;
+  /** If true, shows the iframe on mobile as well (not just md+). */
+  showOnMobile?: boolean;
+};
 
 export function ResourceIframe({
   websiteUrl,
@@ -70,37 +77,59 @@ export function ResourceIframe({
   desktopWidth = IFRAME_DEFAULTS.WIDTH,
   containerHeight = IFRAME_DEFAULTS.HEIGHT,
   hideTopPx = 0,
+  fullPageHref,
+  hideHeader = false,
+  showOnMobile = false,
 }: ResourceIframeProps) {
   const [isLoading, setIsLoading] = useState(true);
   const containerRef = useRef<HTMLDivElement>(null);
   const calculatedScale = useResponsiveScale(containerRef, desktopWidth);
 
   const finalScale = forcedScale ?? calculatedScale;
   const scaleWrapperStyle = createScaleTransformStyle(finalScale, hideTopPx);
+  const linkHref = fullPageHref ?? websiteUrl;
+  const isExternal = !fullPageHref;
+  const buttonLabel = isExternal ? "Open Original Site →" : "Open Full Page →";
 
   return (
-    <Card className={cn("w-full gap-0 md:gap-6", className)}>
-      <CardHeader>
-        <div className="flex flex-wrap items-center justify-between gap-4">
-          <CardTitle>{title}</CardTitle>
-          <Button
-            asChild
-            variant="outline"
-          >
-            <a
-              href={websiteUrl}
-              target="_blank"
-              rel="noopener"
+    <Card className={cn("w-full gap-0 md:gap-6", hideHeader && "rounded-none border-0 p-0", className)}>
+      {!hideHeader && (
+        <CardHeader>
+          <div className="flex flex-wrap items-center justify-between gap-4">
+            <div className="flex flex-col">
+              <CardTitle>{title}</CardTitle>
+              <a
+                href={websiteUrl}
+                target="_blank"
+                rel="noopener"
+                className="text-muted-foreground text-xs underline underline-offset-4"
+              >
+                {websiteUrl}
+              </a>
+            </div>
+            <Button
+              asChild
+              variant="outline"
             >
-              Visit Full Website →
-            </a>
-          </Button>
-        </div>
-      </CardHeader>
-      <CardContent>
+              <a
+                href={linkHref}
+                target={isExternal ? "_blank" : undefined}
+                rel="noopener"
+              >
+                {buttonLabel}
+              </a>
+            </Button>
+          </div>
+        </CardHeader>
+      )}
+      <CardContent className={cn(hideHeader && "p-0")}>
         <div
           ref={containerRef}
-          className="relative hidden w-full overflow-hidden rounded-lg border md:block"
+          className={cn(
+            "relative overflow-hidden",
+            !showOnMobile && "hidden md:block",
+            hideHeader ? "rounded-none border-0" : "rounded-lg border"
+          )}
           style={{ height: containerHeight }}
         >
           {isLoading && (

src/lib/exco.ts

@@ -36,11 +36,11 @@ export const excoMembers: ExcoMember[] = [
   },
   {
     name: "SeoJin Moon",
-    position: "co-Directory of Publicity",
+    position: "Directory of Publicity",
   },
   {
     name: "Razzaq Kinza",
-    position: "co-Directory of Publicity",
+    position: "Directory of Publicity",
   },
   {
     name: "Cheng Ho Ming",

src/lib/resources.ts

@@ -0,0 +1,25 @@
+export type Resource = {
+  slug: string;
+  title: string;
+  websiteUrl: string;
+  hideTopPx: number;
+};
+
+export const resources: Resource[] = [
+  {
+    slug: "where-she-stood-wwii",
+    title: "Where She Stood - WWII",
+    websiteUrl: "https://whereshestoodwwii.wixsite.com/where-she-stood",
+    hideTopPx: 50,
+  },
+  {
+    slug: "the-spine-of-the-nation",
+    title: "The Spine of the Nation",
+    websiteUrl: "https://thespineofthenation.wordpress.com",
+    hideTopPx: 49,
+  },
+];
+
+export function findResourceBySlug(slug: string): Resource | undefined {
+  return resources.find((r) => r.slug === slug);
+}