Fix site presentation issues

src/components/Navbar.astro

@@ -6,19 +6,22 @@ import DrawerToggler from "./DrawerToggler.astro";
 import HorizontalContainer from "./HorizontalContainer.astro";
 import ThemeSwitcher from "./ThemeSwitcher.astro";
 import Dropdown from "./Dropdown.astro";
-import { getCollection } from "astro:content";
+import {
+  getConceptPagesAlphabetical,
+  getStartPagesByOrderParam,
+} from "../content/collections";
 import { conceptPagePath, startPagePath } from "../lib/utils";
 import Drawer from "./Drawer.astro";
 
 const { title, githubUrl, navbarLinks } = site;
 
-const startPages = (await getCollection("start")).map(
+const startPages = (await getStartPagesByOrderParam()).map(
   ({ slug, data: { title } }) => {
     return { title, href: startPagePath(slug) };
   },
 );
 
-const conceptPages = (await getCollection("concepts")).map(
+const conceptPages = (await getConceptPagesAlphabetical()).map(
   ({ slug, data: { title } }) => {
     return { title, href: conceptPagePath(slug) };
   },

src/components/Pagination.astro

@@ -1,15 +1,16 @@
 ---
 import Link from "./Link.astro";
-import { getCollection } from "astro:content";
 import { startPagePath } from "../lib/utils";
+import { getStartPagesByOrderParam } from "../content/collections";
 
 type Props = {
   order: number;
 };
 
 const { order } = Astro.props;
 
-const startPages = await getCollection("start");
+const startPages = await getStartPagesByOrderParam();
+
 const previousPage = startPages.find(
   ({ data: { order: pageOrder } }) => pageOrder === order - 1,
 );

src/components/mdx/Languages.astro

@@ -17,7 +17,7 @@ const { languages } = site;
         <button
           @click={`language = "${lang}"`}
           class="rounded-lg px-1.5 py-1 text-sm font-semibold tracking-tight focus:outline-none dark:border-1.5 md:px-2 md:py-0.5 md:text-base lg:px-3 lg:py-1.5 lg:text-lg"
-          x-bind:class='{ "border-primary bg-soft-gray dark:bg-darker-gray": language == "${lang}", "border-pale hover:text-primary dark:border-dark": language !== "${lang}" }'
+          x-bind:class={`{ "border-primary bg-soft-gray dark:bg-darker-gray": language == "${lang}", "border-pale hover:text-primary dark:border-dark": language !== "${lang}" }`}
         >
           {lang}
         </button>

src/content/collections.ts

@@ -0,0 +1,12 @@
+import { getCollection } from "astro:content";
+
+export const getStartPagesByOrderParam = async () => {
+  return (await getCollection("start")).sort(
+    ({ data: { order: orderA } }, { data: { order: orderB } }) =>
+      orderA - orderB,
+  );
+};
+
+export const getConceptPagesAlphabetical = () => {
+  return getCollection("concepts");
+};

src/pages/concepts/[slug].astro

@@ -1,6 +1,5 @@
 ---
 import type { GetStaticPaths } from "astro";
-import { getCollection } from "astro:content";
 import Admonition from "../../components/mdx/Admonition.astro";
 import NixStorePath from "../../components/mdx/NixStorePath.astro";
 import Layout from "../../layouts/Layout.astro";
@@ -16,11 +15,10 @@ import A from "../../components/mdx/A.astro";
 import H2 from "../../components/mdx/H2.astro";
 import H3 from "../../components/mdx/H3.astro";
 import H4 from "../../components/mdx/H4.astro";
+import { getConceptPagesAlphabetical } from "../../content/collections";
 
 export const getStaticPaths = (async () => {
-  const conceptPages = await getCollection("concepts");
-
-  return conceptPages.map((page) => ({
+  return (await getConceptPagesAlphabetical()).map((page) => ({
     params: { slug: page.slug },
     props: { page },
   }));
@@ -33,7 +31,7 @@ const {
 const { Content } = await page.render();
 
 const relatedConceptPages: { title: string; href: string }[] = (
-  await getCollection("concepts")
+  await getConceptPagesAlphabetical()
 )
   .filter(({ slug }) => related.includes(slug))
   .map(({ slug, data: { title } }) => {

src/pages/concepts/index.astro

@@ -1,18 +1,18 @@
 ---
-import { getCollection } from "astro:content";
 import Layout from "../../layouts/Layout.astro";
 import HorizontalContainer from "../../components/HorizontalContainer.astro";
 import Hero from "../../components/Hero.astro";
 import QuickStart from "../../components/QuickStart.astro";
 import Grid3 from "../../components/Grid3.astro";
 import HoverableLink from "../../components/HoverableLink.astro";
 import { conceptPagePath } from "../../lib/utils";
+import { getConceptPagesAlphabetical } from "../../content/collections";
 
 const title = "Concepts";
 const heroTitle = "Nix concepts";
 const description = "The whys and the hows of Nix";
 
-const conceptPages = await getCollection("concepts");
+const conceptPages = await getConceptPagesAlphabetical();
 ---
 
 <Layout {title} {description}>

src/pages/llms-full.txt.ts

@@ -1,8 +1,11 @@
+import {
+  getConceptPagesAlphabetical,
+  getStartPagesByOrderParam,
+} from "../content/collections";
 import { conceptPagePath, startPagePath } from "../lib/utils";
 import { site } from "../site";
 import { FORMATS } from "./llms.txt";
 import type { APIRoute } from "astro";
-import { getCollection } from "astro:content";
 import Handlebars from "handlebars";
 import fs from "node:fs";
 import path from "node:path";
@@ -17,8 +20,8 @@ const templateFile = fs.readFileSync(
 const template = Handlebars.compile(templateFile);
 
 export const GET: APIRoute = async () => {
-  const startPages = await getCollection("start");
-  const conceptPages = await getCollection("concepts");
+  const startPages = await getStartPagesByOrderParam();
+  const conceptPages = await getConceptPagesAlphabetical();
 
   const content = template({
     root,

src/pages/llms-small.txt.ts

@@ -1,7 +1,10 @@
+import {
+  getConceptPagesAlphabetical,
+  getStartPagesByOrderParam,
+} from "../content/collections";
 import { site } from "../site";
 import { FORMATS } from "./llms.txt";
 import type { APIRoute } from "astro";
-import { getCollection } from "astro:content";
 import Handlebars from "handlebars";
 import fs from "node:fs";
 import path from "node:path";
@@ -16,8 +19,8 @@ const templateFile = fs.readFileSync(
 const template = Handlebars.compile(templateFile);
 
 export const GET: APIRoute = async () => {
-  const startPages = await getCollection("start");
-  const conceptPages = await getCollection("concepts");
+  const startPages = await getStartPagesByOrderParam();
+  const conceptPages = await getConceptPagesAlphabetical();
 
   const content = template({
     root,

src/pages/llms.txt.ts

@@ -1,7 +1,10 @@
+import {
+  getConceptPagesAlphabetical,
+  getStartPagesByOrderParam,
+} from "../content/collections";
 import { conceptPagePath, startPagePath } from "../lib/utils";
 import { site } from "../site";
 import type { APIRoute } from "astro";
-import { getCollection } from "astro:content";
 import Handlebars from "handlebars";
 import fs from "node:fs";
 import path from "node:path";
@@ -37,8 +40,8 @@ const templateFile = fs.readFileSync(
 const template = Handlebars.compile(templateFile);
 
 export const GET: APIRoute = async () => {
-  const startPages = await getCollection("start");
-  const conceptPages = await getCollection("concepts");
+  const startPages = await getStartPagesByOrderParam();
+  const conceptPages = await getConceptPagesAlphabetical();
 
   const content = template({
     root,

src/pages/start/[slug].astro

@@ -1,6 +1,5 @@
 ---
 import type { GetStaticPaths } from "astro";
-import { getCollection } from "astro:content";
 import Admonition from "../../components/mdx/Admonition.astro";
 import ExternalSources from "../../components/ExternalSources.astro";
 import Language from "../../components/mdx/Language.astro";
@@ -17,11 +16,10 @@ import H4 from "../../components/mdx/H4.astro";
 import Pagination from "../../components/Pagination.astro";
 import Separator from "../../components/Separator.astro";
 import FeedbackBar from "../../components/FeedbackBar.astro";
+import { getStartPagesByOrderParam } from "../../content/collections";
 
 export const getStaticPaths = (async () => {
-  const startPages = await getCollection("start");
-
-  return startPages.map((page) => ({
+  return (await getStartPagesByOrderParam()).map((page) => ({
     params: { slug: page.slug.substring(1) },
     props: { page },
   }));
@@ -33,7 +31,7 @@ const {
 } = page;
 const { Content } = await page.render();
 
-const numQuickStartPages = (await getCollection("start")).length;
+const numQuickStartPages = (await getStartPagesByOrderParam()).length;
 ---
 
 <Layout {title}>

src/pages/start/index.astro

@@ -1,18 +1,18 @@
 ---
-import { getCollection } from "astro:content";
 import Layout from "../../layouts/Layout.astro";
 import Hero from "../../components/Hero.astro";
 import HorizontalContainer from "../../components/HorizontalContainer.astro";
 import Grid2 from "../../components/Grid2.astro";
 import HoverableLink from "../../components/HoverableLink.astro";
 import { startPagePath } from "../../lib/utils";
+import { getStartPagesByOrderParam } from "../../content/collections";
 
 const title = "Start";
 const heroTitle = "Quick start";
 const description =
   "Get a taste of Nix's power and learn key concepts along the way";
 
-const startPages = await getCollection("start");
+const startPages = await getStartPagesByOrderParam();
 ---
 
 <Layout {title} {description}>