(#405) Support Astro Framework

The changes here are needed in order to support
the Astro framework. A few styles were updated,
but the majority of the changes are in the build
process and some updates to converted markdown
inside code blocks. All existing choco-theme
commands still work and are ran the same way from
the command line, except now when running anything
with `--docs` it will run Astro commands instead
of a preview.sh or preview.ps1 file.

Author: st3phhays

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
     "cSpell.words": [
+        "astro",
         "atcb",
         "blockquotes",
         "bluesky",
@@ -41,6 +42,7 @@
         "socialmedia",
         "splide",
         "splidejs",
+        "Statiq",
         "stylelint",
         "stylelintcache",
         "svgstyles",

README.md

@@ -1,4 +1,4 @@
-# Chocolatey choco-theme 0.7.0
+# Chocolatey choco-theme 0.7.1
 
 **NOTE: This project is used on Chocolatey websites and is being released for the benefit of the community. While we endeavour to help and fix issues, it will be limited to GitHub issues, discussions and pull requests when we are able to.**
 

build/build-partials.ts

@@ -58,6 +58,7 @@ const init = async () => {
         const destinationTemp = './dist/partials/temp';
         const destinationCshtml = './dist/partials/cshtml';
         const destinationHbs = './dist/partials/hbs';
+        const destinationAstro = './dist/partials/astro';
 
         await fs.cp('./partials/', destinationTemp, { recursive: true });
 
@@ -73,6 +74,7 @@ const init = async () => {
 
         await fs.cp(destinationTemp, destinationCshtml, { recursive: true });
         await fs.cp(destinationTemp, destinationHbs, { recursive: true });
+        await fs.cp(destinationTemp, destinationAstro, { recursive: true });
         await fs.rm(destinationTemp, { recursive: true });
 
         // hbs files
@@ -87,6 +89,7 @@ const init = async () => {
 
         // Delete TopAlertBanner.html
         await fs.rm(path.join(destinationHbs, 'TopAlertBanner.html'));
+        await fs.rm(path.join(destinationAstro, 'TopAlertBanner.html'));
 
         // cshtml files
         await updateContent({
@@ -102,10 +105,12 @@ const init = async () => {
         // Delete AlertText.html
         await fs.rm(path.join(destinationHbs, 'AlertText.html'));
         await fs.rm(path.join(destinationCshtml, 'AlertText.html'));
+        await fs.rm(path.join(destinationAstro, 'AlertText.html'));
 
         // Update file extensions and casing of names
         const filesHbs = await fs.readdir(destinationHbs);
         const filesCshtml = await fs.readdir(destinationCshtml);
+        const filesAstro = await fs.readdir(destinationAstro);
 
         await updateLanguageAttributes({
             files: filesHbs,
@@ -119,6 +124,12 @@ const init = async () => {
             newExt: '.cshtml'
         });
 
+        await updateLanguageAttributes({
+            files: filesAstro,
+            destination: destinationAstro,
+            newExt: '.astro'
+        });
+
         console.log('✅ Partials built');
     } catch (error) {
         console.error(error);

build/choco-theme.ts

@@ -149,17 +149,16 @@ const init = async () => {
         if (repository.playwright) {
             parallelTasksInitial.push(
                 {
-                    task: 'playwright.config.ts',
-                    source: `${repositoryConfig.theme.root}playwright.config.ts`,
-                    destination: `${repository.root}playwright.config.ts`,
-                    isFolder: false
+                    task: 'Playwright tests - general',
+                    source: `${repositoryConfig.theme.playwright}tests/general/`,
+                    destination: `${repository.playwright}general/`
                 }
             );
 
             if (repository.name === repositoryConfig.org.name) {
                 parallelTasksInitial.push(
                     {
-                        task: 'Playwright tests',
+                        task: 'Playwright tests - pricing calculator',
                         source: `${repositoryConfig.theme.playwright}tests/pricing-calculator/`,
                         destination: `${repository.playwright}pricing-calculator/`
                     }
@@ -201,7 +200,7 @@ const init = async () => {
         }
 
         // ESLint and tsconfig - needed if repository contains it's own assets along with choco-theme
-        if (repository.playwright || repository.name === repositoryConfig.portal.name) {
+        if (repository.name === repositoryConfig.portal.name) {
             parallelTasksInitial.push(
                 {
                     task: '.eslintrc.js',
@@ -255,7 +254,7 @@ const init = async () => {
 
         // Change CSS content
         // Font Awesome
-        if (repository.name === repositoryConfig.portal.name) {
+        if (repository.name === repositoryConfig.portal.name || repository.language === 'astro') {
             console.log('🚀 Updating Font Awesome font path...');
             await updateContent({
                 destination: repository.css,

build/data/playwright-config.ts

@@ -0,0 +1,37 @@
+#!/usr/bin/env ts-node
+
+/*!
+ * Configuration for repositories to use a shared Playwright config.
+ * Copyright 2020-2024 Chocolatey Software
+ * Licensed under Apache License (https://github.com/chocolatey/choco-theme/blob/main/LICENSE)
+ */
+
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+export const playwrightConfig: PlaywrightTestConfig = {
+    testDir: './src/tests',
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: !!process.env.CI,
+    /* Retry on CI only */
+    retries: process.env.CI ? 2 : 0,
+    /* Opt out of parallel tests on CI. */
+    workers: process.env.CI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: 'html',
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Base URL to use in actions like `await page.goto('/')`. */
+        baseURL: '',
+
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: 'on-first-retry'
+    },
+    webServer: {
+        command: 'yarn preview',
+        timeout: 120 * 1000,
+        reuseExistingServer: !process.env.CI,
+        url: ''
+    }
+};

build/data/preview-config.ts

@@ -11,7 +11,8 @@ export interface FolderMapping {
         folder: string;
         protocol?: string;
         port?: null | number;
-        isStatic: boolean;
+        isStatiq: boolean;
+        isAstro: boolean;
         root?: string
     };
 }
@@ -20,48 +21,57 @@ export const folderMapping: FolderMapping = {
     '--blog': {
         folder: 'blog',
         port: 5082,
-        isStatic: true
+        isStatiq: true,
+        isAstro: false
     },
     '--boxstarter': {
         folder: 'boxstarter.org',
         port: 5083,
-        isStatic: true
+        isStatiq: true,
+        isAstro: false
     },
     '--community': {
         folder: 'community.chocolatey.org',
         port: 55881,
-        isStatic: false,
+        isStatiq: false,
+        isAstro: false,
         root: '/chocolatey/Website'
     },
     '--design': {
         folder: 'choco-design-system',
         port: 5085,
-        isStatic: true
+        isStatiq: true,
+        isAstro: false
     },
     '--docs': {
         folder: 'docs',
         port: 5086,
-        isStatic: true
+        isStatiq: false,
+        isAstro: true
     },
     '--fest': {
         folder: 'chocolateyfest',
         port: 5084,
-        isStatic: true
+        isStatiq: true,
+        isAstro: false
     },
     '--org': {
         folder: 'chocolatey.org',
         port: 5081,
-        isStatic: true
+        isStatiq: true,
+        isAstro: false
     },
     '--portal': {
         folder: 'licensing-services',
         protocol: 'https',
         port: 44362,
-        isStatic: false,
+        isStatiq: false,
+        isAstro: false,
         root: '/source/LicensingServices'
     },
     '--zendesk': {
         folder: 'copenhagen_theme',
-        isStatic: false
+        isStatiq: false,
+        isAstro: false
     }
 };

build/data/repository-config.ts

@@ -46,7 +46,38 @@ export const defaultRepositoryConfig = {
             /^fa-(check|triangle-exclamation|info|xmark)/,
             /^text-bg-(info|warning|danger|success)/,
             /^data-bs-popper/
+        ]
+    },
+    root: './'
+};
 
+export const astroRepositoryConfig = {
+    css: 'public/styles/',
+    js: 'public/scripts/',
+    favicons: 'public/',
+    fontAwesome: 'public/fonts/fontawesome-free/',
+    images: 'public/images/global-shared/',
+    partials: 'src/components/global/',
+    language: 'astro',
+    purgeCss: {
+        content: [
+            'src/**/*.astro',
+            'src/**/*.html',
+            'src/**/*.txt',
+            'src/**/*.md',
+            'src/**/*.mdx',
+            'src/**/*.js',
+            'src/**/*.ts',
+            'public/**/*.js'
+        ],
+        safelist: [
+            '::-webkit-scrollbar',
+            '::-webkit-scrollbar-thumb',
+            /^fa-(check|triangle-exclamation|info|xmark)/,
+            /^text-bg-(info|warning|danger|success)/,
+            /^data-bs-popper/,
+            /^ratio-/,
+            /^callout-/
         ]
     },
     root: './'
@@ -77,8 +108,9 @@ export const repositoryConfig: Record<string, RepositoryConfig> = {
         name: 'design'
     },
     docs: {
-        ...defaultRepositoryConfig,
-        name: 'docs'
+        ...astroRepositoryConfig,
+        name: 'docs',
+        playwright: 'src/tests/'
     },
     fest: {
         ...defaultRepositoryConfig,

build/esbuild.ts

@@ -13,7 +13,7 @@ const init = async () => {
     const minify = process.argv.includes('--minify');
 
     const banner: string = `/*!
-  * choco-theme v0.7.0 (https://github.com/chocolatey/choco-theme#readme)
+  * choco-theme v0.7.1 (https://github.com/chocolatey/choco-theme#readme)
   * Copyright 2020-2024 Chocolatey Software
   * Licensed under MIT (https://github.com/chocolatey/choco-theme/blob/main/LICENSE)
 */`;