(#1311) Upgrade Astro via choco-theme 2.7.0

st3phhays · st3phhays · commit 0c7ad50582e1 · 2026-04-03T06:36:38.000-05:00
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.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -2,7 +2,7 @@
 // https://github.com/withastro/astro/blob/main/.devcontainer/with-mdx/devcontainer.json
 {
     "name": "Node.js & TypeScript",
-    "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
+    "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bullseye",
     "forwardPorts": [5086],
     "portsAttributes": {
         "5086": {
diff --git a/.github/workflows/playwright.yml b/.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
diff --git a/README.md b/README.md
@@ -34,7 +34,7 @@ There are multiple options to build the site:
 
 ### Build the Site On Your Computer
 
-Ensure that you have Node v20+ installed by running `node -v`. There is a `.\setup.ps1` file in the root of this repository that uses Chocolatey to install or upgrade Node to the correct version.
+Ensure that you have Node >= 22.12.0 installed by running `node -v`. There is a `.\setup.ps1` file in the root of this repository that uses Chocolatey to install or upgrade Node to the correct version.
 
 After confirming the required Node version, run the following command from a terminal:
 
diff --git a/package.json b/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"
   }
 }
diff --git a/src/components/Breadcrumbs.astro b/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
                 });
             }
         }
diff --git a/src/components/Children.astro b/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;
     }
 
diff --git a/src/components/Xref.astro b/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>`;
 ---
diff --git a/src/components/sidebar/SidebarListItem.astro b/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>
diff --git a/src/components/sidebar/SidebarSelf.astro b/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} />
diff --git a/src/content.config.ts b/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(),
diff --git a/src/pages/[lang]/[...id].astro b/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 />
diff --git a/src/scripts/generate-content-toc.ts b/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();
 
diff --git a/src/scripts/generate-content-tree.ts b/src/scripts/generate-content-tree.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 // Scripts and types
 import { contentTreeSchema } from '@scripts/types';
@@ -21,17 +22,17 @@ export const generateContentTree = async (parentSlug = ''): Promise<ContentTree[
     sortedDocs.forEach(item => {
         item.body = '';
 
-        map[item.slug] = { ...item, children: [] };
+        map[item.id] = { ...item, children: [] };
     });
 
     sortedDocs.forEach(item => {
-        if (item.slug !== parentSlug) {
-            const parent = map[item.slug.split('/').slice(0, -1).join('/')];
+        if (item.id !== parentSlug) {
+            const parent = map[item.id.split('/').slice(0, -1).join('/')];
 
             if (parent) {
-                parent.children.push(map[item.slug]);
+                parent.children.push(map[item.id]);
             } else {
-                result.push(map[item.slug]);
+                result.push(map[item.id]);
             }
         }
     });
@@ -50,7 +51,7 @@ export const generateContentTree = async (parentSlug = ''): Promise<ContentTree[
                 newNode.children = addDepthToTree(node.children, depth + 1);
             }
 
-            newNode.slug = `/${newNode.slug}/`;
+            newNode.id = `/${newNode.id}/`;
 
             return newNode;
         });
diff --git a/src/scripts/types.ts b/src/scripts/types.ts
@@ -1,10 +1,10 @@
-import { z } from 'zod';
+import { z } from 'astro/zod';
 
 // ContentTree
 // ContentTree - Define the base schema without the recursive property
 const contentTreeBaseSchema = z.object({
     id: z.string(),
-    slug: z.string(),
+    // slug: z.string(),
     body: z.string(),
     collection: z.string(),
     data: z.object({
@@ -31,7 +31,7 @@ export const contentTreeSchema: z.ZodType<ContentTree> = contentTreeBaseSchema.e
 
 // ContentToc
 // ContentToc - Define the base schema without the recursive property
-const contentTocBaseSchema = z.object({
+export const contentTocBaseSchema = z.object({
     depth: z.number(),
     slug: z.string(),
     text: z.string()
diff --git a/src/scripts/xref.ts b/src/scripts/xref.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`// https://github.com/withastro/astro/blob/main/.devcontainer/with-mdx/devcontainer.json`
`3`	`3`	`{`
`4`	`4`	`"name": "Node.js & TypeScript",`
`5`		`- "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",`
	`5`	`+ "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bullseye",`
`6`	`6`	`"forwardPorts": [5086],`
`7`	`7`	`"portsAttributes": {`
`8`	`8`	`"5086": {`
Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ const findObjectBySlug = async (obj: ContentTree, slug: string): Promise<Content`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`// Check if the current object has the specified slug`
`28`		`- if (slug === obj.slug \|\| slug === obj.slug.slice(0, -1)) {`
	`28`	`+ if (slug === obj.id \|\| slug === obj.id.slice(0, -1)) {`
`29`	`29`	`return obj;`
`30`	`30`	`}`
`31`	`31`