refactor: dynamic index pages

src/content/geothermal/cost.mdx

@@ -1,6 +1,7 @@
 ---
 title: How Much Do a Geothermal Energy Solutions Cost?
 description: The cost to install a geothermal system can range anywhere from $10,000 all the way up to $25,000
+sectionHeader: How Much Does It Cost?
 ---
 
 The cost to install a geothermal system can range anywhere from $10,000 all the way up to $25,000.

src/content/geothermal/environment.mdx

@@ -1,6 +1,7 @@
 ---
 title: How Does Geothermal Energy Impact the Environment?
 description: When it comes to carbon emissions, geothermal energy is very efficient
+sectionHeader: How Does It Affect the Environment?
 ---
 
 When it comes to carbon emissions, geothermal energy is very efficient.

src/content/geothermal/what.mdx

@@ -1,6 +1,7 @@
 ---
 title: Geothermal Energy Solutions
 description: Geothermal Energy is an undertapped energy resource
+sectionHeader: What is It?
 ---
 
 Geothermal energy is heat energy captured from within the earth and is then used for various things such as heating, cooking, and even electricity.

src/content/geothermal/worth-it.mdx

@@ -1,6 +1,7 @@
 ---
 title: Is Geothermal Energy Worth the Investment?
 description: Deciding to invest in a geothermal energy solution can be tricky
+sectionHeader: Is It Worth It?
 ---
 
 Deciding to invest in a geothermal energy solution can be tricky.

src/content/recycling/cost.mdx

@@ -1,6 +1,7 @@
 ---
 title: The Cost of Recycling
 description: The cost of recycling on municipal governments can vary anywhere from $100 to $300 per ton
+sectionHeader: How Much Does It Cost?
 ---
 
 The cost to collect, transport, clean, and process recycled material can vary anywhere from $100 to $300 per ton!

src/content/recycling/environment.mdx

@@ -1,6 +1,7 @@
 ---
-title: How Does Recycling Affect the Environment?
+title: How Does Recycling Impact the Environment?
 description: The process of recycling reduces pollution and emissions
+sectionHeader: How Does It Affect the Environment?
 ---
 
 The process of recycling prevents these waste materials from ending up in landfills or the environment, reducing pollution and emissions.

src/content/recycling/what.mdx

@@ -1,6 +1,7 @@
 ---
 title: Recycling
 description: Recycling is the process of taking inorganic waste materials and turning them into new products
+sectionHeader: What Is it?
 ---
 
 Recycling is the process of taking inorganic waste materials and turning them into new products.

src/content/recycling/worth-it.mdx

@@ -1,6 +1,7 @@
 ---
 title: Is Recycling Worth It?
 description: The process of recycling prevents waste materials from ending up in landfills
+sectionHeader: Is It Worth It?
 ---
 
 The process of recycling prevents these waste materials from ending up in landfills or the environment, reducing pollution and emissions.

src/content/solar/cost.mdx

@@ -1,6 +1,7 @@
 ---
 title: How Much Do Solar Panels Cost?
 description: The cost of solar panels can vary depending on your state and region
+sectionHeader: How Much Does It Cost?
 ---
 
 The cost of solar panels can vary depending on your state and region.

src/content/solar/environment.mdx

@@ -1,6 +1,7 @@
 ---
-title: How Does Solar Power Impact the Environment?
+title: How Does Solar Power Affect the Environment?
 description: The best thing about solar power is that it has nearly zero negative effects on the environment
+sectionHeader: How Does It Impact the Environment?
 ---
 
 The best thing about solar power is that it has nearly zero negative effects on the environment!

src/content/solar/what.mdx

@@ -1,6 +1,7 @@
 ---
 title: What is Solar Power?
 description: Solar power is a fascinating technology that converts energy from the sun into electricity
+sectionHeader: What Is It?
 ---
 
 import { Admonition } from "../../components/Admonition.tsx";

src/content/solar/worth-it.mdx

@@ -1,6 +1,7 @@
 ---
 title: Is Solar Power Worth It?
 description: Overall, solar panels are a worthwhile investment
+sectionHeader: Is It Worth It?
 ---
 
 Overall, solar panels are a worthwhile investment for most homeowners.

src/routes/solutions/[category]/index.tsx

@@ -7,7 +7,6 @@ import { Meta } from "../../../components/Meta.tsx";
 import { solutions } from "../../../utils/categories.gen.ts";
 import type { FreshContextHelper } from "../../../utils/handlers.ts";
 import { IconSolarPanel } from "../../../utils/icons.ts";
-import { kebabToCamel } from "../../../utils/strings.ts";
 import { hasSlug, isKey } from "../../../utils/type-helpers.ts";
 
 export type CategoryProps = z.infer<typeof categoryProps>;
@@ -17,17 +16,14 @@ export type CategoryData = z.infer<typeof categoryPropsPageData>;
 const categoryPropsPageData = z.object({
   short: z.string(),
   linkText: z.string(),
+  title: z.string(),
+  linkTo: z.string(),
 });
 
-const categoryPropsPages = z.object({
-  what: categoryPropsPageData,
-  environment: categoryPropsPageData,
-  cost: categoryPropsPageData,
-  worthIt: categoryPropsPageData,
-});
+const categoryPropsPages = categoryPropsPageData.array();
 
 const categoryProps = z.object({
-  page: categoryPropsPages,
+  pages: categoryPropsPages,
   title: z.string(),
   description: z.string().refine((value) => !value.endsWith(".")),
 });
@@ -46,27 +42,27 @@ export const handler: Handlers<CategoryProps> = {
         return ctx.renderNotFound();
       }
 
-      let data: Partial<CategoryPages> = {};
+      let data: CategoryData[] = [];
       for (const solution of solutions) {
         if (hasSlug(solution)) {
-          const { slug, data: solutionData } = solution;
-          const camelSlug = kebabToCamel(slug);
+          const { data: solutionData } = solution;
 
           if (solutionData.category === category) {
-            data = {
+            data = [
               ...data,
-              [camelSlug]: {
-                ...data[camelSlug],
+              {
                 short: solutionData.description,
                 linkText: solutionData.title,
+                title: solutionData.sectionHeader,
+                linkTo: solution.slug,
               },
-            };
+            ];
           }
         }
       }
 
       return ctx.render({
-        page: categoryPropsPages.parse(data),
+        pages: categoryPropsPages.parse(data),
         title: categoryMetadata[category].title,
         description: categoryMetadata[category].description,
       });
@@ -103,16 +99,7 @@ const categoryMetadata = {
 export default function Category({
   data,
 }: PageProps<CategoryProps>): JSX.Element {
-  const {
-    title: pageTitle,
-    description,
-    page: {
-      what: { short: whatShort, linkText: whatLinkText },
-      environment: { short: environmentShort, linkText: environmentLinkText },
-      cost: { short: costShort, linkText: costLinkText },
-      worthIt: { short: worthItShort, linkText: worthItLinkText },
-    },
-  } = data;
+  const { title: pageTitle, description, pages } = data;
 
   return (
     <>
@@ -132,33 +119,18 @@ export default function Category({
           <p class="my-4 dark:text-white">{description}</p>
         </Cover>
         <article class="py-10 px-40 prose prose-lg dark:prose-invert max-w-none prose-headings:flex prose-headings:flex-row prose-headings:items-center bg-slate-200 dark:bg-slate-800 [&_mjx-container>svg]:inline">
-          <h2>What is it?</h2>
-          <p>
-            {whatShort}.
-            <br />
-            For more information, see <a href="./what/">{whatLinkText}</a>.
-          </p>
-          <h2>How does it impact the environment?</h2>
-          <p>
-            {environmentShort}.
-            <br />
-            For more information, see{" "}
-            <a href="./environment/">{environmentLinkText}</a>.
-          </p>
-          <h2>Cost</h2>
-          <p>
-            {costShort}.
-            <br />
-            For more information, see <a href="./cost/">{costLinkText}</a>.
-          </p>
-
-          <h2>Is it worth it?</h2>
-          <p>
-            {worthItShort}.
-            <br />
-            For more information, see{" "}
-            <a href="./worth-it/">{worthItLinkText}</a>.
-          </p>
+          {pages.map(
+            ({ linkText, short, title, linkTo }: CategoryData): JSX.Element => (
+              <>
+                <h2>{title}</h2>
+                <p>
+                  {short}.
+                  <br />
+                  For more information, see <a href={linkTo}>{linkText}</a>.
+                </p>
+              </>
+            ),
+          )}
         </article>
       </main>
     </>

src/utils/solutions.ts

@@ -42,6 +42,9 @@ const solutionDataSchema = z
       .refine((value) => !value.endsWith("."))
       .describe("The description of the solution."),
     category: z.string().describe("The category of the solution."),
+    sectionHeader: z
+      .string()
+      .describe("The section header for the category index page."),
   })
   .passthrough()
   .readonly()