feat: add recipe and post featuring on home page

Author: SidonieBouthors

app/page.tsx

@@ -1,7 +1,31 @@
+import FeaturedShowcase from "@/components/FeaturedShowcase";
 import InfoBox from "@/components/InfoBox";
 import ExportedImage from "next-image-export-optimizer";
+import { Post, posts, Recipe, recipes } from "@content";
+import Card from "@/components/Card";
+import CardGrid from "@/components/CardGrid";
+import ArticleBlock from "@/components/ArticleBlock";
+import { dateSort } from "@/utils/utils";
 
 export default function Home() {
+  const featuredRecipes = recipes
+    .filter((recipe: Recipe) => recipe.published && recipe.featured)
+    .sort(dateSort)
+    .slice(0, 4);
+
+  const featuredPosts = posts
+    .filter((post: Post) => post.published && post.featured)
+    .sort(dateSort)
+    .slice(0, 4);
+
+  const gridFormat: [string, number, number, boolean][] = [
+    ["l", 1000, 4, true],
+    ["m", 500, 2, true],
+    ["s", 200, 1, true],
+  ];
+  const margin: [number, number] = [15, 15];
+  const containerPadding: [number, number] = [0, 0];
+
   return (
     <>
       <div className="home-hero">
@@ -10,24 +34,61 @@ export default function Home() {
           src="/home-hero.jpg"
           alt="Hero image"
           fill={true}
+          priority={true}
         />
         <h1>Welcome to my website!</h1>
         <div className="subtitle">Recipes, projects & more</div>
       </div>
       <div className="home-page">
-        <InfoBox title="Note">
-          <p>
-            This is the new and improved version 2 of my website ! <br />I
-            finally made the switch from plain old HTML/CSS/JS to using Next.js.
-            This has allowed me to easily make this website a lot easier to
-            manage: I can now add recipes and posts in simple MDX format, and
-            they are formatted and added everywhere automatically.
-          </p>
-          <p>
-            I{"'"}m still adding some functionalities but I transferred most of
-            the original content already, and more will come !
-          </p>
-        </InfoBox>
+        <div className="force-article">
+          <InfoBox title="Note">
+            <p>
+              This is the new and improved version 2 of my website ! <br />I
+              finally made the switch from plain old HTML/CSS/JS to using
+              Next.js. This has allowed me to easily make this website a lot
+              easier to manage: I can now add recipes and posts in simple MDX
+              format, and they are formatted and added everywhere automatically.
+            </p>
+            <p>
+              I{"'"}m still adding some functionalities but I transferred most
+              of the original content already, and more will come !
+            </p>
+          </InfoBox>
+        </div>
+        <FeaturedShowcase title="Featured Recipes">
+          <CardGrid
+            gridFormat={gridFormat}
+            margin={margin}
+            containerPadding={containerPadding}
+          >
+            {featuredRecipes.map((recipe) => (
+              <Card
+                slug={recipe.slug}
+                title={recipe.name}
+                imageUrl={recipe.coverImage.src}
+                key={recipe.slug}
+              />
+            ))}
+          </CardGrid>
+        </FeaturedShowcase>
+        <FeaturedShowcase title="Featured Posts">
+          <CardGrid
+            gridFormat={gridFormat}
+            margin={margin}
+            containerPadding={containerPadding}
+          >
+            {featuredPosts.map((post: Post) => (
+              <div className="article-block-card" key={post.slug}>
+                <ArticleBlock
+                  article={post}
+                  disableTags={true}
+                  fillSpace={true}
+                  titleLevel={3}
+                />
+              </div>
+            ))}
+          </CardGrid>
+        </FeaturedShowcase>
       </div>
     </>
   );

components/FeaturedShowcase.tsx

@@ -0,0 +1,20 @@
+import Card from "./Card";
+import CardGrid from "./CardGrid";
+
+export default function FeaturedShowcase({
+  title,
+  seeMoreLink,
+  children,
+}: {
+  title: string;
+  seeMoreLink?: string;
+  children: React.ReactElement;
+}) {
+  return (
+    <section className="featured-showcase">
+      <h2>{title}</h2>
+      {/* TODO: Add see more link */ }
+      {children}
+    </section>
+  );
+}

styles/components/_featured-showcase.scss

@@ -0,0 +1,7 @@
+.featured-showcase {
+  margin: 2rem 0;
+  h2 {
+    text-align: center;
+    margin-bottom: 1.5rem;
+  }
+}

styles/components/_index.scss

@@ -8,4 +8,5 @@
 @forward "info-box";
 @forward "recipe-info";
 @forward "article-block";
-@forward "tag";
+@forward "tag";
+@forward "featured-showcase"

styles/pages/_home.scss

@@ -57,5 +57,20 @@
   }
 }
 .home-page {
-  @include article-content;
+  @include wide-content;
+
+  .force-article {
+    @include article-content;
+    margin-bottom: 0;
+    @media screen and (max-width: 75rem) {
+      margin-bottom: 0;
+    }
+  }
+
+  .article-block-card {
+    border: solid 2px var(--border-color);
+    border-radius: $border-radius;
+    padding: 1rem;
+    height: 100%;
+  }
 }

velite.config.ts

@@ -39,6 +39,7 @@ const recipes = defineCollection({
       contentImage: s.image().optional(),
       date: s.isodate(),
       published: s.boolean().default(true),
+      featured: s.boolean().default(false),
       tags: s.array(s.string()).optional(),
       yield: s.number(), // number of servings
       yieldUnit: s.string().optional(), // unit of the yield
@@ -66,6 +67,7 @@ const posts = defineCollection({
       description: s.string().max(200).optional(),
       date: s.isodate(),
       published: s.boolean().default(true),
+      featured: s.boolean().default(false),
       tags: s.array(s.string()).default([]),
       body: s.mdx(),
     })