(#1311) Upgrade Astro via choco-theme 2.7.0

This updates choco-theme packages to 2.7.0. Included in this release is
an upgrade to the version of Astro to 6.x. With the upgrade to Astro,
many files needed to be updated due to breaking changes in the way v6
works. No apparent changes should be visible to the end user, and
adding the process of adding new content remains the same.

Author: st3phhays

.github/workflows/playwright.yml

@@ -12,9 +12,9 @@ jobs:
       - name: Checkout repository using git
         uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: '20'
+          node-version-file: 'package.json'
       - name: Build site
         run: yarn build
       - name: Run Playwright tests

package.json

@@ -13,8 +13,12 @@
   "homepage": "https://github.com/chocolatey/docs#readme",
   "type": "module",
   "version": "0.0.1",
+  "engines": {
+    "node": ">=22.12.0"
+  },
   "scripts": {
     "astro": "npx astro",
+    "audit": "yarn npm audit --all --recursive --no-deprecations",
     "browsers": "npx playwright install --with-deps",
     "build": "yarn dependencies && yarn telemetry && yarn choco-theme && yarn browsers && npx astro build",
     "build-copy-theme": "npx tsx node_modules/@chocolatey-software/build-tools/build/copy-theme.ts docs",
@@ -32,11 +36,11 @@
   },
   "devDependencies": {
     "@chocolatey-software/assets": "2.0.0",
-    "@chocolatey-software/astro": "2.6.0",
+    "@chocolatey-software/astro": "chocolatey/choco-theme#head=choco-theme/2.7.0&workspace=@chocolatey-software/astro",
     "@chocolatey-software/build-tools": "2.6.0",
     "@chocolatey-software/playwright": "2.6.0"
   },
   "dependencies": {
-    "@chocolatey-software/docs": "2.6.0"
+    "@chocolatey-software/docs": "chocolatey/choco-theme#head=choco-theme/2.7.0&workspace=@chocolatey-software/docs"
   }
 }

src/components/Breadcrumbs.astro

@@ -16,12 +16,12 @@ const buildPartsList = async () => {
         const href = `${paths.slice(0, i + 1).join('/')}`;
 
         if (href !== 'en-us') {
-            const blogPost = await getEntry('docs', href);
+            const post = await getEntry('docs', href);
 
-            if (blogPost) {
+            if (post) {
                 parts.push({
-                    text: blogPost.data.title,
-                    href: blogPost.slug
+                    text: post.data.title,
+                    href: post.id
                 });
             }
         }

src/components/Children.astro

@@ -25,7 +25,7 @@ const findObjectBySlug = async (obj: ContentTree, slug: string): Promise<Content
     }
 
     // Check if the current object has the specified slug
-    if (slug === obj.slug || slug === obj.slug.slice(0, -1)) {
+    if (slug === obj.id || slug === obj.id.slice(0, -1)) {
         return obj;
     }
 

src/components/Xref.astro

@@ -1,8 +1,7 @@
 ---
 // Scripts and types
-import { z } from 'zod';
-import { xref, xrefLinkAnchorSchema, xrefLinkValueSchema } from '@scripts/xref.ts';
-import type { XrefLinkAnchor, XrefLinkValue} from '@scripts/xref.ts';
+import { z } from 'astro/zod';
+import { getCollection } from 'astro:content';
 
 const { title, value, anchor, classes, icon } = Astro.props;
 const canonicalURL = new URL(Astro.url, Astro.site);
@@ -23,13 +22,27 @@ if (value.includes('#')) {
     throw new Error(`Xref link value cannot contain an anchor: ${value} on ${canonicalURL.toString()}`);
 }
 
+const posts = await getCollection('docs', ({ data }) => {
+    return data.highlight === undefined;
+});
+
+const post = posts.find(post => post.data.xref === value);
+
+if (!post) {
+    throw new Error(`No post found for xref value: ${value} on ${canonicalURL.toString()}`);
+}
+
+const xrefLinkValueSchema = z.string();
+const xrefLinkAnchorSchema = z.string().optional();
 const xrefLinkTitleSchema = z.string();
 const xrefLinkClassesSchema = z.string().optional();
 const xrefLinkIconSchema = z.string().optional();
 
 type XrefLinkTitle = z.infer<typeof xrefLinkTitleSchema>;
 type XrefLinkClasses = z.infer<typeof xrefLinkClassesSchema>;
 type XrefLinkIcon = z.infer<typeof xrefLinkIconSchema>;
+type XrefLinkValue = z.infer<typeof xrefLinkValueSchema>;
+type XrefLinkAnchor = z.infer<typeof xrefLinkAnchorSchema>;
 
 interface Props {
     title: XrefLinkTitle
@@ -46,7 +59,7 @@ xrefLinkAnchorSchema.parse(anchor);
 xrefLinkClassesSchema.parse(classes);
 xrefLinkIconSchema.parse(icon);
 
-const link = await xref(value, anchor);
+const link = `/${post.id}${anchor ? `#${anchor}` : ''}`;
 const allClasses = classes ? classes : '';
 const iconTitle = `${title}<i class="fas ${icon} ms-1"></i>`;
 ---

src/components/sidebar/SidebarListItem.astro

@@ -13,5 +13,5 @@ const activeSlug = Astro.url.pathname;
 ---
 
 <li class={`nav-item nav-item-tertiary-bg`}>
-    <a class={`nav-link py-c75 ${paddingClass} ${isActivePage(content.slug, activeSlug) ? 'active active-page' : ''}`} href={content.slug}>{content.data.title}</a>
+    <a class={`nav-link py-c75 ${paddingClass} ${isActivePage(content.id, activeSlug) ? 'active active-page' : ''}`} href={content.id}>{content.data.title}</a>
 </li>

src/components/sidebar/SidebarSelf.astro

@@ -76,7 +76,7 @@ const isActiveChild = (doc: ContentTree) => {
         }
         
         // Check if the current document's slug matches the activeSlug
-        if (isActivePage(currentDoc.slug, activeSlug)) {
+        if (isActivePage(currentDoc.id, activeSlug)) {
             return true;
         }
 
@@ -93,14 +93,14 @@ const isActiveChild = (doc: ContentTree) => {
 };
 ---
 
-{content.filter(doc => doc.data.showInSidebar === true).map(doc => (
+{content?.filter(doc => doc.data.showInSidebar === true).map(doc => (
     doc.children && doc.children.length > 0 ? (
         <li class={`nav-item nav-item-tertiary-bg ${isActiveChild(doc) ? 'active' : ''}`}>
-            <div class={`nav-link nav-link-collapse d-flex align-items-center ${isActiveChild(doc) ? 'active' : ''} ${isActivePage(doc.slug, activeSlug) ? 'active-page' : ''}`}>
-                <button class={`btn btn-collapse rounded-0 border-0 fw-normal ps-3 py-c75 min-w-auto ${listPaddingClass(doc.data.depth)} ${isActiveChild(doc) ? '' : 'collapsed'}`} type="button" data-bs-toggle="collapse" aria-expanded={`${isActiveChild(doc) ? 'true' : 'false'}`} aria-controls={slugId(`id-${doc.slug}`)} aria-label="collapse or expand navigation" data-bs-target={slugId(`#id-${doc.slug}`)}></button>
-                <a class="fw-normal py-c75" href={doc.slug}>{doc.data.title}</a>
+            <div class={`nav-link nav-link-collapse d-flex align-items-center ${isActiveChild(doc) ? 'active' : ''} ${isActivePage(doc.id, activeSlug) ? 'active-page' : ''}`}>
+                <button class={`btn btn-collapse rounded-0 border-0 fw-normal ps-3 py-c75 min-w-auto ${listPaddingClass(doc.data.depth)} ${isActiveChild(doc) ? '' : 'collapsed'}`} type="button" data-bs-toggle="collapse" aria-expanded={`${isActiveChild(doc) ? 'true' : 'false'}`} aria-controls={slugId(`id-${doc.id}`)} aria-label="collapse or expand navigation" data-bs-target={slugId(`#id-${doc.id}`)}></button>
+                <a class="fw-normal py-c75" href={doc.id}>{doc.data.title}</a>
             </div>
-            <div class={`collapse ${isActiveChild(doc) ? 'show' : ''}`} id={slugId(`id-${doc.slug}`)}>
+            <div class={`collapse ${isActiveChild(doc) ? 'show' : ''}`} id={slugId(`id-${doc.id}`)}>
                 <ul class="navbar-nav">
                     {Array.isArray(doc.children) && (
                         <Astro.self content={doc.children} />

src/content/config.ts src/content.config.tssrc/content/config.ts renamed to src/content.config.ts

@@ -1,9 +1,15 @@
 // 1. Import utilities from `astro:content`
-import { z, defineCollection } from 'astro:content';
+import { defineCollection } from 'astro:content';
 
-// 2. Define your collection(s)
+// 2. Import loader(s)
+import { glob } from 'astro/loaders';
+
+// 3. Import Zod
+import { z } from 'astro/zod';
+
+// 4. Define a `loader` and `schema` for each collection
 const docsCollection = defineCollection({
-    type: 'content',
+    loader: glob({ base: './src/content/docs', pattern: '**/*.{md,mdx}' }),
     schema: z.object({
         order: z.number(),
         xref: z.string(),

src/pages/[lang]/[...slug].astro src/pages/[lang]/[...id].astrosrc/pages/[lang]/[...slug].astro renamed to src/pages/[lang]/[...id].astro

@@ -1,6 +1,6 @@
 ---
 // Scripts and types
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
 import { generateContentToc } from '@scripts/generate-content-toc.ts';
 import { generateContentTree } from '@scripts/generate-content-tree.ts';
 
@@ -10,41 +10,39 @@ import Children from '@components/Children.astro';
 import LayoutDocs from '@layouts/LayoutDocs.astro';
 import TableOfContents from '@components/toc/TableOfContents.astro';
 
-export const getStaticPaths = (async () => {
-    const pages = await getCollection('docs', ({ data }) => {
+export const getStaticPaths = async () => {
+    const posts = await getCollection('docs', ({ data }) => {
         return data.highlight === undefined;
     });
 
-    const paths = pages.map(page => {
-        const [lang, ...slug] = page.slug.split('/');
+    return posts.map(post => {
+        const parts = post.id?.split('/') ?? [];
+        const [lang, ...slugParts] = parts;
+
+        const slug = slugParts.join('/');
+
         return {
             params: {
-                lang,
-                slug: slug.join('/') || undefined
+                id: slug,
+                lang: lang,
             },
-            props: page,
-        };
+            props: { post }
+        }
     });
+};
 
-    return paths;
-});
-
-// const { lang, slug } = Astro.params;
-const page = Astro.props;
-
-const isHome = page.data.xref === 'home';
-
-const { Content } = await page.render();
-const headings = await page.render().then(data => data.headings);
+const { post } = Astro.props;
+const isHome = post.data.xref === 'home';
+const { Content, headings } = await render(post);
 const contentToc = await generateContentToc(headings);
 const contentTree = await generateContentTree();
 ---
 
-<LayoutDocs title={page.data.title} description={page.data.description} ogImage={page.data.ogImage} twitterImage={page.data.twitterImage} contentTree={contentTree}>
+<LayoutDocs title={post.data.title} description={post.data.description} ogImage={post.data.ogImage} twitterImage={post.data.twitterImage} contentTree={contentTree}>
     <div class="row">
         <div id="mainContent" class="anchorjs-container col-xl-10 order-2 order-xl-1">
             <div class="d-none d-xl-block">
-                <h1 class="title">{page.data.title}</h1>
+                <h1 class="title">{post.data.title}</h1>
                 <Breadcrumbs isHome={isHome} />
             </div>
             <Content />

src/scripts/generate-content-toc.ts

@@ -1,7 +1,8 @@
 // Scripts and types
-import type { ContentToc, ContentTocBase } from '@scripts/types';
+import type { ContentToc } from '@scripts/types';
+import type { MarkdownHeading } from '@astrojs/markdown-remark';
 
-export const generateContentToc = async (headings: ContentTocBase[]): Promise<ContentToc[]> => {
+export const generateContentToc = async (headings: MarkdownHeading[]): Promise<ContentToc[]> => {
     const toc: ContentToc[] = [];
     const parentHeadings = new Map();