Alphabetical index

aka glossary

Implementation

1. Create Alphabetical component

   src/components/Alphabetical.astro

   ---
   import { getCollection } from "astro:content";
   
   const firstChar = (str: string) => String.fromCodePoint(str.codePointAt(0)!);
   
   const docs = await getCollection("docs");
   type Docs = typeof docs;
   const docsByChar = new Map<string, Docs>();
   docs.forEach((doc) => {
     const char = firstChar(doc.data.title).toUpperCase();
     docsByChar.set(char, docsByChar.get(char) || []);
     docsByChar.get(char)?.push(doc);
   });
   const comparator = new Intl.Collator("en");
   const charsSorted = [...docsByChar.keys()].sort(comparator.compare);
   ---
   
   {
     charsSorted.map((char) => (
       <>
         <h3>{char}</h3>
         <ul>
           {docsByChar.get(char)?.map((doc) => (
             <li>
               <a href={`/${doc.slug}`}>{doc.data.title}</a>
             </li>
           ))}
         </ul>
       </>
     ))
   }

2. Use component, wherever you like

   ---
   title: Alphabetical index
   tableOfContents: false
   prev: false
   next: false
   ---
   
   import Alphabetical from "@components/Alphabetical.astro";
   
   <Alphabetical />

Example

See Alphabetical index.