SOEOPSFY24-205 | explore next mdx

app/(stories)/stories/[storySlug]/page.tsx

@@ -0,0 +1,44 @@
+import { compileMDX } from 'next-mdx-remote/rsc';
+import { promises as fs } from 'fs';
+import path from 'path';
+import { Container } from '@/components/Container';
+import { Heading, Text } from '@/components/Typography';
+import { FeatureHero } from '@/components/FeatureHero';
+import { Masthead } from '@/components/Masthead';
+
+// Generate static parameters (slugs) for each story
+export async function generateStaticParams() {
+  const filenames = await fs.readdir(path.join(process.cwd(), '/stories'));
+  return filenames.map((filename) => ({
+    storySlug: filename.replace('.mdx', ''),
+  }));
+}
+
+export default async function ProjectPage({ params }: { params: { storySlug: string } }) {
+  const content = await fs.readFile(path.join(process.cwd(), '/stories', `${params.storySlug}.mdx`), 'utf-8');
+
+  interface Frontmatter {
+    title: string;
+  }
+
+  const data = await compileMDX<Frontmatter>({
+    source: content,
+    options: {
+      parseFrontmatter: true,
+    },
+    components: {
+      // Add components here
+      Heading,
+      Text,
+      FeatureHero,
+      Container,
+    },
+  });
+
+  return (
+    <Container width='full' className="*:font-dm-sans">
+      <Masthead />
+      {data.content}
+    </Container>
+  );
+}

app/(stories)/stories/page.tsx

@@ -0,0 +1,54 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+import Link from 'next/link';
+import { compileMDX } from 'next-mdx-remote/rsc';
+import { Container } from '@/components/Container';
+
+export const metadata = {
+  title: 'Stories',
+  description: 'Lorem ipsum pellentesque ut neque. In consectetuer turpis ut velit. Aenean massa.',
+};
+
+export default async function generateStaticParams() {
+  const filenames = await fs.readdir(path.join(process.cwd(), '/stories'));
+
+  interface Frontmatter {
+    title: string;
+  }
+
+  const stories = await Promise.all(filenames.map(async (filename) => {
+    const content = await fs.readFile(path.join(process.cwd(), '/stories', filename), 'utf-8');
+    const slug = filename.replace('.mdx', '');
+    const { frontmatter } = await compileMDX<Frontmatter>({
+      source: content,
+      options: {
+        parseFrontmatter: true,
+      },
+    });
+    return {
+      filename,
+      slug: slug,
+      uuid: `story-${slug}`,
+      ...frontmatter,
+    };
+  }));
+
+  console.log('stories', stories);
+
+  return (
+      <Container>
+        <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-6 sm:mb-10 md:mb-16">
+          Impact Stories
+        </h1>
+          <ul>
+            {stories.map(({ filename, slug, uuid }) => {
+              return (
+                <li key={uuid}>
+                  <Link href={`/stories/${slug}`}>{ filename }</Link>
+                </li>
+              );
+            })}
+          </ul>
+      </Container>
+  );
+}

app/components/FeatureHero/FeatureHero.tsx

@@ -10,11 +10,14 @@ import { motion, useScroll, useTransform } from 'framer-motion';
 
 type FeatureHeroProps = HTMLAttributes<HTMLDivElement> & {
   children: React.ReactNode;
-  imageSrc?: string;
+  backgroundImage: string;
+  overlayImage: string;
 };
 
 export const FeatureHero = ({
   children,
+  backgroundImage,
+  overlayImage,
   ...props
 }: FeatureHeroProps) => {
   const { scrollYProgress } = useScroll();
@@ -28,7 +31,7 @@ export const FeatureHero = ({
       <div className="relative w-full aspect-[16/9] bg-cool-grey lg:absolute lg:top-0 lg:left-0 h-auto z-10 overflow-hidden">
         <Image className="absolute top-0 left-0 lg:left-[300px] z-0 w-full h-auto"
           alt=""
-          src={`soe-centennial-nextjs/assets/images/Hawa-Racine-Thiam.jpg`}
+          src={backgroundImage}
           width={0}
           height={0}
           sizes="100vw" />
@@ -39,7 +42,7 @@ export const FeatureHero = ({
         <div className='absolute top-0 left-0 bg-transparent lg:bg-feature-gradient-rl bg-feature-gradient-bt w-full h-full z-50' />
         <Image className="absolute top-0 left-0 lg:left-[300px] z-20 w-full h-auto"
           alt=""
-          src={`soe-centennial-nextjs/assets/images/Hawa-Racine-Thiam_silhouette.png`}
+          src={overlayImage}
           width={0}
           height={0}
           sizes="100vw" />

app/components/images/shape-a.tsx

@@ -8,7 +8,7 @@ type Props = HtmlHTMLAttributes<SVGSVGElement> & {
 const ShapeA = ({ height = 900, width = '100%', ...props }: Props) => {
   return (
     <svg {...props} width={width} height={height} viewBox="0 0 1106 1678" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M2.00037 408.703C2.00037 241.336 0.326884 187.778 222.899 187.778C445.471 187.778 699.839 187.778 781.839 187.778C929.104 187.778 930.778 2 781.839 2C632.9 2 408.654 2 335.021 2C130.857 2 149.266 355.145 335.021 355.145C520.777 355.145 833.716 355.145 907.349 355.145C1133.27 355.145 1149.15 505.985 1032.86 674.817C929.104 825.448 509.063 1392.82 432.083 1494.92C384.638 1557.84 326.401 1636.94 264.735 1660.61C135.222 1710.32 2.00037 1635.51 2.00037 1494.92C2.00037 1122.69 2.00037 615.681 2.00037 408.703Z" stroke="#F83535" stroke-width="3" />
+      <path d="M2.00037 408.703C2.00037 241.336 0.326884 187.778 222.899 187.778C445.471 187.778 699.839 187.778 781.839 187.778C929.104 187.778 930.778 2 781.839 2C632.9 2 408.654 2 335.021 2C130.857 2 149.266 355.145 335.021 355.145C520.777 355.145 833.716 355.145 907.349 355.145C1133.27 355.145 1149.15 505.985 1032.86 674.817C929.104 825.448 509.063 1392.82 432.083 1494.92C384.638 1557.84 326.401 1636.94 264.735 1660.61C135.222 1710.32 2.00037 1635.51 2.00037 1494.92C2.00037 1122.69 2.00037 615.681 2.00037 408.703Z" stroke="#F83535" strokeWidth="3" />
     </svg>
   );
 };

app/examples/page.tsx

@@ -0,0 +1,52 @@
+import { Heading, Text } from '@/components/Typography';
+import { ShapeAnimation } from '@/components/ShapeAnimation';
+import { TimelineBanner } from '@/components/TimelineBanner';
+import { Masthead } from '@/components/Masthead';
+import { FeatureHero } from '@/components/FeatureHero';
+
+export default function Examples() {
+  return (
+    <div>
+      <Masthead />
+      <FeatureHero backgroundImage="assets/images/Hawa-Racine-Thiam.jpg" overlayImage="assets/images/Hawa-Racine-Thiam_silhouette.png">
+        <Heading
+          as="h1"
+          leading="none"
+          className="2xl:whitespace-pre-line font-normal -mt-01em rs-mb-8 xl:max-w-1200"
+        >
+          Exploring the reengineering of immune cells
+        </Heading>
+        <Text
+          variant="overview"
+          weight="normal"
+          className="order-first mb-38 underline underline-offset-[6px] decoration-2 decoration-digital-red-xlight"
+        >
+          Change Makers
+        </Text>
+        <Text
+          variant="overview"
+          weight="normal"
+          className="max-w-[50ch] rs-mb-3 *:*:leading-snug"
+        >
+          The Sarafan ChEM-H Institute scholar is building a multidisciplinary
+          lab to explore the reengineering of immune cells. Before coming to
+          Stanford, she says, “I was thinking in terms of understanding. Now I
+          feel that I can start thinking in terms of creating.”
+        </Text>
+        <Text
+          variant="overview"
+          weight="normal"
+          className="max-w-[50ch] rs-mb-3 *:*:leading-snug"
+        >
+          by Jess Alvarenga
+        </Text>
+      </FeatureHero>
+      <ShapeAnimation />
+      <TimelineBanner
+        heading="Headline lorem ipsum dolar sit"
+        superhead="1983"
+        body="Cras felis tortor, bibendum quis porttitor at, ullamcorper eu diam. Aenean iaculis efficitur quam, quis dignissim lacus. Cras nec dui id mi blandit lobortis eget in enim."
+      />
+    </div>
+  );
+}

app/page.tsx

@@ -8,7 +8,7 @@ export default function Home() {
   return (
     <div>
       <Masthead />
-      <FeatureHero>
+      <FeatureHero backgroundImage="assets/images/Hawa-Racine-Thiam.jpg" overlayImage="assets/images/Hawa-Racine-Thiam_silhouette.png">
         <Heading
           as="h1"
           leading="none"

next.config.mjs

@@ -1,9 +1,12 @@
 /** @type {import('next').NextConfig} */
+
 const nextConfig = {
   basePath: '/soe-centennial-nextjs',
   output: 'export', 
   reactStrictMode: true,
   images: { unoptimized: true },
 };
+
 
 export default nextConfig;
+