Working on recipes

Example-Recipe.astro

@@ -0,0 +1,26 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="Food Name">
+  <main>
+    <header>
+      <h1>Bread</h1>
+    </header>
+    <p>Description of food.</p>
+    <ul>
+      <li>Preparation Time:</li>
+      <li>Cooking Time:</li>
+      <li>Servings:</li>
+    </ul>
+    <h3>Ingredients</h3>
+    <ul>
+      <li>Ingredient</li>
+    </ul>
+    <h3>Recipe</h3>
+    <ol>
+      <li>Recipe steps</li>
+    </ol>
+    <h3>Notes</h3>
+  </main>
+</Layout>

src/layouts/Layout.astro

@@ -39,10 +39,10 @@ const { title } = Astro.props;
     border-style: solid;
     font-size: 2.5vw;
   }
-  h3{
+  h3 {
     color: tomato;
   }
-  a{
+  a {
     color: gold;
     text-decoration: none;
   }

src/pages/index.astro

@@ -2,19 +2,24 @@
 import Layout from "../layouts/Layout.astro";
 
 // Import all recipe pages from the recipes folder
-const recipePages = import.meta.glob('./recipes/*.astro');
+const recipePages = import.meta.glob("./recipes/*.astro");
 
-// Function to extract slugs from file paths
+// Function to extract slugs from file paths and sort them alphabetically
 async function getRecipeLinks() {
-    const paths = Object.keys(recipePages);
-    const links = paths.map(path => {
-        const slug = path.split('/').pop().replace(/\.astro$/, '');
-        return {
-            href: `/recipes/${slug}`,
-            title: slug 
-        };
-    });
-    return links;
+  const paths = Object.keys(recipePages);
+  const links = paths
+    .map((path) => {
+      const slug = path
+        .split("/")
+        .pop()
+        .replace(/\.astro$/, "");
+      return {
+        href: `/recipes/${slug}`,
+        title: slug,
+      };
+    })
+    .sort((a, b) => a.title.localeCompare(b.title));
+  return links;
 }
 
 const links = await getRecipeLinks();
@@ -24,9 +29,13 @@ const links = await getRecipeLinks();
   <main>
     <header><h1>David's Recipes</h1></header>
     <ul id="Recipe-List">
-        {links.map(link => (
-          <li><a href={link.href}>{link.title}</a></li>
-        ))}
-      </ul>
+      {
+        links.map((link) => (
+          <li>
+            <a href={link.href}>{link.title}</a>
+          </li>
+        ))
+      }
+    </ul>
   </main>
 </Layout>

src/pages/recipes/Bread.astro

@@ -65,7 +65,10 @@ import Layout from "../../layouts/Layout.astro";
     </ol>
     <h3>Notes</h3>
     <p>
-      Adapted from: <a href =https://www.brianlagerstrom.com/recipes/1-dough-3-loaves-2>Brian Langerstrom</a>
+      Adapted from: <a
+        href="https://www.brianlagerstrom.com/recipes/1-dough-3-loaves-2"
+        >Brian Langerstrom</a
+      >
     </p>
   </main>
 </Layout>