test hero

SU-SOE · Oct 23, 2024 · 7950a4f · 7950a4f
1 parent 2631205
commit 7950a4f
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
diff --git a/app/(stories)/stories/[storySlug]/page.tsx b/app/(stories)/stories/[storySlug]/page.tsx
@@ -2,7 +2,8 @@ import { compileMDX } from 'next-mdx-remote/rsc';
 import { promises as fs } from 'fs';
 import path from 'path';
 import { Container } from '@/components/Container';
-import { Heading } from '@/components/Typography';
+import { Heading, Text } from '@/components/Typography';
+import { FeatureHero } from '@/components/FeatureHero';
 
 // Generate static parameters (slugs) for each story
 export async function generateStaticParams() {
@@ -27,11 +28,13 @@ export default async function ProjectPage({ params }: { params: { storySlug: str
     components: {
       // Add components here
       Heading,
+      Text,
+      FeatureHero,
     },
   });
 
   return (
-    <Container className="mt-10">
+    <Container width='full'>
       {data.content}
     </Container>
   );

diff --git a/app/(stories)/stories/page.tsx b/app/(stories)/stories/page.tsx
@@ -18,6 +18,7 @@ export default async function generateStaticParams() {
 
   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: {
@@ -26,7 +27,8 @@ export default async function generateStaticParams() {
     });
     return {
       filename,
-      slug: filename.replace('.mdx', ''),
+      slug: slug,
+      uuid: `story-${slug}`,
       ...frontmatter,
     };
   }));
@@ -39,9 +41,9 @@ export default async function generateStaticParams() {
           Impact Stories
         </h1>
           <ul>
-            {stories.map(({ idx, filename, slug  }) => {
+            {stories.map(({ filename, slug, uuid }) => {
               return (
-                <li key={idx}>
+                <li key={uuid}>
                   <Link href={`/stories/${slug}`}>{ filename }</Link>
                 </li>
               );

diff --git a/stories/exploring-the-reengineering.mdx b/stories/exploring-the-reengineering.mdx
@@ -7,11 +7,40 @@ title: 'Exploring the reengineering of immune cells'
 description: 'Lorem ipsum'
 ---
 
-# Exploring the reengineering of immune cells
 
-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.”
-
-by Jess Alvarenga
+<FeatureHero>
+  <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>
 
 Overview style lorem ipsum dolar sit amet vestibulum parimentium elit rhoncus donec. Scelerisque urna et euismod in daphibus nec leo euismod nisi, pharetra raesent nec. Aliquam dignissim nisi convalis quis, leo vestibulum duis euismod.