chore(deps): Update Astro from 5.9.3 to 7.1.3

Author: louismaximepiton

package-lock.json

@@ -94,11 +94,11 @@
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.4",
-    "@astrojs/markdown-remark": "^6.3.6",
-    "@astrojs/mdx": "^4.3.4",
-    "@astrojs/prism": "^3.3.0",
-    "@astrojs/sitemap": "^3.5.0",
+    "@astrojs/check": "^0.9.9",
+    "@astrojs/markdown-remark": "^7.2.1",
+    "@astrojs/mdx": "^7.0.3",
+    "@astrojs/prism": "^4.0.2",
+    "@astrojs/sitemap": "^3.7.3",
     "@babel/cli": "^7.28.3",
     "@babel/core": "^7.29.6",
     "@babel/preset-env": "^7.28.3",
@@ -116,8 +116,7 @@
     "@types/js-yaml": "^4.0.9",
     "@types/mime": "^4.0.0",
     "@types/prismjs": "^1.26.5",
-    "astro": "^5.13.2",
-    "astro-auto-import": "^0.4.4",
+    "astro": "^7.1.3",
     "autoprefixer": "^10.4.21",
     "bundlewatch": "^0.4.2",
     "clean-css-cli": "^5.6.3",

package.json

@@ -97,6 +97,7 @@
   gap: $ouds-alert-space-row-gap-action;
   align-items: flex-start;
   justify-content: center; // To handle weird edge cases in de-zoom one line title alert
+  width: 20%;
   min-height: $ouds-alert-size-min-height; // To handle weird edge cases in de-zoom one line title alert
   padding-block: $ouds-alert-space-padding-block;
 }
@@ -105,6 +106,7 @@
   display: flex;
   flex-direction: column;
   gap: $ouds-alert-space-row-gap;
+  width: 100%;
 
   > * { // To handle any content inside this text-container.
     margin-bottom: 0;

scss/_alert.scss

@@ -6,9 +6,16 @@ import { oudsWeb } from './src/libs/astro'
 import { getConfig } from './src/libs/config'
 import { algoliaPlugin } from './src/plugins/algolia-plugin'
 import { stackblitzPlugin } from './src/plugins/stackblitz-plugin'
+import type { Element, Text } from 'hast'
+import { rehypeHeadingIds, unified } from '@astrojs/markdown-remark'
+import { rehypeBsTable } from './src/libs/rehype'
+import { remarkBsComp, remarkBsConfig, remarkBsDocsref } from './src/libs/remark'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 
 const isDev = process.env.NODE_ENV === 'development'
 
+const headingsRangeRegex = new RegExp(`^h[${getConfig().anchors.min}-${getConfig().anchors.max}]$`)
+
 const site = isDev
   ? // In development mode, use the local dev server.
     'http://localhost:9001'
@@ -20,12 +27,32 @@ const site = isDev
 
 // https://astro.build/config
 export default defineConfig({
+  compressHTML: false,
   build: {
     assets: `${getConfig().brand}/docs/${getConfig().docs_version}/assets`
   },
   integrations: [oudsWeb()],
   markdown: {
     smartypants: false,
+    processor: unified({
+      rehypePlugins: [
+        rehypeHeadingIds,
+        [
+          rehypeAutolinkHeadings,
+          {
+            behavior: 'append',
+            content: [{ type: 'text', value: ' '}],
+            properties: (element: Element) => ({
+              class: 'anchor-link',
+              ariaLabel: `Link to this section: ${(element.children[0] as Text).value}`
+            }),
+            test: (element: Element) => element.tagName.match(headingsRangeRegex)
+          }
+        ],
+        rehypeBsTable
+      ],
+      remarkPlugins: [remarkBsConfig, remarkBsDocsref, remarkBsComp]
+    }),
     syntaxHighlight: 'prism'
   },
   site,

site/astro.config.ts

@@ -1,7 +1,7 @@
 ---
 import { getData } from '@libs/data'
 import { getConfig } from '@libs/config'
-import { docsPages } from '@libs/content'
+import { docsPages, getDocsPageSlug } from '@libs/content'
 import { getSlug } from '@libs/utils'
 import { getVersionedDocsPath } from '@libs/path'
 
@@ -14,9 +14,10 @@ const sidebarMap = {
   utilities: 'utilities',
   layout: 'layout',
   about: ''
-}
+} as const
 
-const sidebar = sidebarMap[slug] ? getData(`sidebar-${sidebarMap[slug]}`) : []
+const sidebarKey = sidebarMap[slug as keyof typeof sidebarMap]
+const sidebar = sidebarKey ? getData(`sidebar-${sidebarKey}`) : []
 ---
 
 <nav class="bd-links w-100" id="bd-docs-nav" aria-labelledby="docs-nav">
@@ -60,12 +61,12 @@ const sidebar = sidebarMap[slug] ? getData(`sidebar-${sidebarMap[slug]}`) : []
                     }
                     const active = Astro.params.slug === unversionedPageSlug
 
-                    const generatedPage = docsPages.find((page: any) => page.slug === unversionedPageSlug)
+                    const generatedPage = docsPages.find((page: any) => getDocsPageSlug(page.id) === unversionedPageSlug)
 
                     // This test should not be necessary, see comments for `getSlug()` in `src/libs/utils.ts`.
                     if (!page.direct_url && !generatedPage) {
                       throw new Error(
-                        `The page '${page.title}' referenced in 'site/data/sidebar${sidebarMap[slug]}.yml' does not exist at '${url}'.`
+                        `The page '${page.title}' referenced in 'site/data/sidebar${sidebarKey}.yml' does not exist at '${url}'.`
                       )
                     }
 

site/src/components/DocsSidebar.astro

@@ -1,6 +1,7 @@
 ---
 import { getCalloutByName } from '@libs/content'
 import type { MarkdownInstance } from 'astro'
+import { render } from 'astro:content'
 
 interface Props {
   /**
@@ -72,7 +73,7 @@ if (name) {
     throw new Error(`Could not find callout with name '${name}'.`)
   }
 
-  const namedCallout = await callout.render()
+  const namedCallout = await render(callout)
   if (namedCallout.remarkPluginFrontmatter && namedCallout.remarkPluginFrontmatter.title) {
     titleToDisplay = namedCallout.remarkPluginFrontmatter.title
   }

site/src/components/shortcodes/Callout.astro

@@ -0,0 +1,27 @@
+export { default as AddedIn } from './AddedIn.astro'
+export { default as BootstrapCompatibility } from './BootstrapCompatibility.astro'
+export { default as BrandSpecific } from './BrandSpecific.astro'
+export { default as BsTable } from './BsTable.astro'
+export { default as Callout } from './Callout.astro'
+export { default as CalloutSoon } from './CalloutSoon.astro'
+export { default as Code } from './Code.astro'
+export { default as ColorTable } from './ColorTable.astro'
+export { default as ComponentCard } from './ComponentCard.astro'
+export { default as ControlItem } from './ControlItem.mdx'
+export { default as DeprecatedIn } from './DeprecatedIn.astro'
+export { default as Details } from './Details.astro'
+export { default as EnableBtnCloseTooltip } from './EnableBtnCloseTooltip.astro'
+export { default as Example } from './Example.astro'
+export { default as GuideFooter } from './GuideFooter.mdx'
+export { default as JsDataAttributes } from './JsDataAttributes.mdx'
+export { default as JsDismiss } from './JsDismiss.astro'
+export { default as JsDocs } from './JsDocs.astro'
+export { default as MandatoryFieldIndication } from './MandatoryFieldIndication.astro'
+export { default as Placeholder } from './Placeholder.astro'
+export { default as ScssDocs } from './ScssDocs.astro'
+export { default as SkeletonRedirect } from './SkeletonRedirect.astro'
+export { default as SvgDocs } from './SvgDocs.astro'
+export { default as Table } from './Table.astro'
+export { default as TableContent } from './TableContent.md'
+export { default as ThemeDemo } from './ThemeDemo.astro'
+export { default as ThemeDemoStylesImport } from './ThemeDemoStylesImport.astro'

site/src/components/shortcodes/index.ts

@@ -1,4 +1,5 @@
 import { z, defineCollection } from 'astro:content'
+import { glob } from 'astro/loaders'
 
 const docsSchema = z.object({
   added: z
@@ -34,12 +35,20 @@ const docsSchema = z.object({
 })
 
 const docsCollection = defineCollection({
+  loader: glob({
+    base: './src/content/docs',
+    pattern: '**/*.{md,mdx}'
+  }),
   schema: docsSchema
 })
 
 const calloutsSchema = z.object({})
 
 const calloutsCollection = defineCollection({
+  loader: glob({
+    base: './src/content/callouts',
+    pattern: '**/*.{md,mdx}'
+  }),
   schema: calloutsSchema
 })
 

site/src/content/config.ts site/src/content.config.tssite/src/content/config.ts renamed to site/src/content.config.ts

@@ -10,6 +10,7 @@ toc: true
 
 import { componentsDetails } from '../../../data/components-details'
 import { getVersionedDocsPath } from '@libs/path'
+import { ComponentCard } from '@components/shortcodes'
 
 <Callout
   type="info"

site/src/content/docs/components.mdx

@@ -1,29 +1,17 @@
 import fs from 'node:fs'
 import path from 'node:path'
-import { rehypeHeadingIds } from '@astrojs/markdown-remark'
 import mdx from '@astrojs/mdx'
 import sitemap from '@astrojs/sitemap'
 import type { AstroIntegration } from 'astro'
-import autoImport from 'astro-auto-import'
-import type { Element, Text } from 'hast'
-import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import { getConfig } from './config'
-import { rehypeBsTable } from './rehype'
-import { remarkBsComp, remarkBsConfig, remarkBsDocsref } from './remark'
 import { configurePrism } from './prism'
 import {
-  docsDirectory,
   getDocsFsPath,
   getDocsPublicFsPath,
   getDocsStaticFsPath,
   validateVersionedDocsPaths
 } from './path'
 
-// A list of directories in `src/components` that contains components that will be auto imported in all pages for
-// convenience.
-// Note: adding a new component to one of the existing directories requires a restart of the dev server.
-const autoImportedComponentDirectories = ['shortcodes']
-
 // A list of static file paths that will be aliased to a different path.
 const staticFileAliases = {
   '/orange/docs/[version]/assets/img/favicons/apple-touch-icon.png': '/apple-touch-icon.png',
@@ -48,44 +36,18 @@ const sitemapExcludes = [
   `/${getConfig().brand}/docs/${getConfig().docs_version}/about`
 ]
 
-const headingsRangeRegex = new RegExp(`^h[${getConfig().anchors.min}-${getConfig().anchors.max}]$`)
-
 export function oudsWeb(): AstroIntegration[] {
   const sitemapExcludedUrls = sitemapExcludes.map((url) => `${getConfig().baseURL}${url}/`)
 
   configurePrism()
 
   return [
-    ouds_web_auto_import(),
     {
       name: 'ouds-web-integration',
       hooks: {
-        'astro:config:setup': ({ addWatchFile, updateConfig }) => {
+        'astro:config:setup': ({ addWatchFile }) => {
           // Reload the config when the integration is modified.
           addWatchFile(path.join(getDocsFsPath(), 'src/libs/astro.ts'))
-
-          // Add the remark and rehype plugins.
-          updateConfig({
-            markdown: {
-              rehypePlugins: [
-                rehypeHeadingIds,
-                [
-                  rehypeAutolinkHeadings,
-                  {
-                    behavior: 'append',
-                    content: [{ type: 'text', value: ' '}],
-                    properties: (element: Element) => ({
-                      class: 'anchor-link',
-                      ariaLabel: `Link to this section: ${(element.children[0] as Text).value}`
-                    }),
-                    test: (element: Element) => element.tagName.match(headingsRangeRegex)
-                  }
-                ],
-                rehypeBsTable
-              ],
-              remarkPlugins: [remarkBsConfig, remarkBsDocsref, remarkBsComp]
-            }
-          })
         },
         'astro:config:done': () => {
           cleanPublicDirectory()
@@ -107,51 +69,6 @@ export function oudsWeb(): AstroIntegration[] {
   ]
 }
 
-function ouds_web_auto_import() {
-  const autoImportedComponents: string[] = []
-  const autoImportedComponentDefinitions: string[] = []
-
-  for (const autoImportedComponentDirectory of autoImportedComponentDirectories) {
-    const components = fs.readdirSync(path.join(getDocsFsPath(), 'src/components', autoImportedComponentDirectory), {
-      withFileTypes: true
-    })
-
-    for (const component of components) {
-      if (component.isFile()) {
-        autoImportedComponents.push(
-          `./${path.posix.join(docsDirectory, 'src/components', autoImportedComponentDirectory, component.name)}`
-        )
-
-        if (component.name.endsWith('.astro')) {
-          autoImportedComponentDefinitions.push(
-            `export const ${component.name.replace('.astro', '')}: typeof import('@shortcodes/${
-              component.name
-            }').default`
-          )
-        }
-      }
-    }
-  }
-
-  const autoImportedComponentDefinition = `/**
- * DO NOT EDIT THIS FILE MANUALLY.
- *
- * This file is automatically generated by the Bootstrap Astro Integration.
- * It contains the type definitions for the components that are auto imported in all pages.
- * @see site/src/libs/astro.ts
- */
-export declare global {
-  ${autoImportedComponentDefinitions.join('\n  ')}
-}
-`
-
-  fs.writeFileSync(path.join(getDocsFsPath(), 'src/types/auto-import.d.ts'), autoImportedComponentDefinition)
-
-  return autoImport({
-    imports: autoImportedComponents
-  })
-}
-
 function cleanPublicDirectory() {
   fs.rmSync(getDocsPublicFsPath(), { force: true, recursive: true })
 }