(#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.
chocolatey · Jun 6, 2024 · e3aa032 · e3aa032
1 parent 630dbbc
commit e3aa032
Show file tree

Hide file tree

Showing 74 changed files with 1,951 additions and 682 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,6 @@
 {
     "cSpell.words": [
+        "astro",
         "atcb",
         "blockquotes",
         "bluesky",
@@ -41,6 +42,7 @@
         "socialmedia",
         "splide",
         "splidejs",
+        "Statiq",
         "stylelint",
         "stylelintcache",
         "svgstyles",

diff --git a/README.md b/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.**
 

diff --git a/build/build-partials.ts b/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);

diff --git a/build/choco-theme.ts b/build/choco-theme.ts
@@ -255,7 +255,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,

diff --git a/build/data/preview-config.ts b/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
     }
 };
diff --git a/build/data/repository-config.ts b/build/data/repository-config.ts
@@ -46,7 +46,36 @@ 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/
         ]
     },
     root: './'
@@ -77,7 +106,7 @@ export const repositoryConfig: Record<string, RepositoryConfig> = {
         name: 'design'
     },
     docs: {
-        ...defaultRepositoryConfig,
+        ...astroRepositoryConfig,
         name: 'docs'
     },
     fest: {

diff --git a/build/esbuild.ts b/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)
 */`;

diff --git a/build/preview.ts b/build/preview.ts
@@ -60,76 +60,105 @@ const init = async () => {
         await Promise.all(foldersToRun.map(async (option, index) => {
             const folderConfig = folderMapping[option];
             const folderName = folderConfig.folder;
+            const folderIsAstro = folderConfig.isAstro;
             const folderPath = path.join(__dirname, '../../', folderName);
             const port = folderConfig.port;
 
-            // Determine platform specific information
-            let command;
-            let previewScript;
-
-            if (isWindows) {
-                previewScript = 'preview.ps1';
-                command = `powershell.exe -File ./${previewScript} ${port}`;
+            if (folderIsAstro) {
+                const childProcessTwo = spawn('yarn dev', [], {
+                    shell: true,
+                    cwd: folderPath
+                });
+
+                childProcessTwo.stdout.on('data', data => {
+                    const output = data.toString().trim();
+
+                    if (output.includes(`http://localhost:${port}`)) {
+                        // Stop loading animation for this script
+                        clearInterval(loadingIntervals[index]);
+                        process.stdout.write('\r✅ ');
+                        console.log(`Preview for ${folderName} is running on ${consoleColors.green}http://localhost:${port}${consoleColors.revert}. Changes will be automatically reloaded. Keep this terminal open.`);
+                        console.log(`🤖 Listening on ${consoleColors.green}http://localhost:${port}${consoleColors.revert}...`);
+                    }
+                });
+
+                // Handle exit event
+                childProcessTwo.on('exit', code => {
+                    if (code !== 0) {
+                        clearInterval(loadingIntervals[index]);
+                        process.stdout.write('\r⛔ ');
+                        console.error(`Astro in ${folderPath} exited with code ${code}`);
+                    }
+                });
             } else {
-                previewScript = 'preview.sh';
-                command = `./${previewScript} ${port}`;
-            }
-
-            const scriptPath = path.join(folderPath, previewScript);
-
-            // Check if preview script exists
-            try {
-                await fs.access(scriptPath);
-            } catch (error) {
-                clearInterval(loadingIntervals[index]);
-                process.stdout.write('\r🟨 ');
-                console.log(`${folderName} does not contain a ${previewScript} file. Skipping...`);
-                return; // Skip to the next folder
-            }
-
-            const childProcessTwo = spawn(command, [], {
-                shell: true, // Needed for Windows to execute .sh files
-                cwd: folderPath // Specify the working directory for the child process
-                // stdio: 'pipe', // Default value - Works on Mac, but on Windows. On Windows, the .preview.ps1 file gives the error `Error: The handle is invalid.` and closes the running port that was just opened by the script
-            });
-
-            let scriptStarted = false;
-
-            childProcessTwo.stdout.on('data', data => {
-                const output = data.toString().trim();
-
-                if (output.includes(`[INFO] Preview server listening at http://localhost:${port}`)) {
-                    // Stop loading animation for this script
-                    clearInterval(loadingIntervals[index]);
-                    process.stdout.write('\r✅ ');
-                    console.log(`Preview for ${folderName} is running on ${consoleColors.green}http://localhost:${port}${consoleColors.revert}`);
-                    console.log(`🤖 Listening on ${consoleColors.green}http://localhost:${port}${consoleColors.revert}...`);
-                }
-
-                if (output.includes('Error: The handle is invalid.')) {
-                    console.log('⛔ Error: The handle is invalid.');
-                }
-
-                if (output.includes('files have changed, re-executing')) {
-                    console.log(`🚀 Rebuilding ${folderName}...`);
-                    scriptStarted = true;
+                // Determine platform specific information
+                let command;
+                let previewScript;
+
+                if (isWindows) {
+                    previewScript = 'preview.ps1';
+                    command = `powershell.exe -File ./${previewScript} ${port}`;
+                } else {
+                    previewScript = 'preview.sh';
+                    command = `./${previewScript} ${port}`;
                 }
 
-                // Check if the output contains the completion message
-                if (scriptStarted && output.includes('[INFO] ========== Completed')) {
-                    console.log(`✅ ${folderName} rebuilt`);
-                    console.log(`🤖 Listening on ${consoleColors.green}http://localhost:${port}${consoleColors.revert}...`);
-                }
-            });
+                const scriptPath = path.join(folderPath, previewScript);
 
-            // Handle exit event
-            childProcessTwo.on('exit', code => {
-                if (code !== 0) {
+                // Check if preview script exists
+                try {
+                    await fs.access(scriptPath);
+                } catch (error) {
                     clearInterval(loadingIntervals[index]);
-                    process.stdout.write('\r⛔ ');
-                    console.error(`Preview script in ${folderPath} exited with code ${code}`);
+                    process.stdout.write('\r🟨 ');
+                    console.log(`${folderName} does not contain a ${previewScript} file. Skipping...`);
+                    return; // Skip to the next folder
                 }
-            });
+
+                const childProcessTwo = spawn(command, [], {
+                    shell: true, // Needed for Windows to execute .sh files
+                    cwd: folderPath // Specify the working directory for the child process
+                    // stdio: 'pipe', // Default value - Works on Mac, but on Windows. On Windows, the .preview.ps1 file gives the error `Error: The handle is invalid.` and closes the running port that was just opened by the script
+                });
+
+                let scriptStarted = false;
+
+                childProcessTwo.stdout.on('data', data => {
+                    const output = data.toString().trim();
+
+                    if (output.includes(`[INFO] Preview server listening at http://localhost:${port}`)) {
+                        // Stop loading animation for this script
+                        clearInterval(loadingIntervals[index]);
+                        process.stdout.write('\r✅ ');
+                        console.log(`Preview for ${folderName} is running on ${consoleColors.green}http://localhost:${port}${consoleColors.revert}`);
+                        console.log(`🤖 Listening on ${consoleColors.green}http://localhost:${port}${consoleColors.revert}...`);
+                    }
+
+                    if (output.includes('Error: The handle is invalid.')) {
+                        console.log('⛔ Error: The handle is invalid.');
+                    }
+
+                    if (output.includes('files have changed, re-executing')) {
+                        console.log(`🚀 Rebuilding ${folderName}...`);
+                        scriptStarted = true;
+                    }
+
+                    // Check if the output contains the completion message
+                    if (scriptStarted && output.includes('[INFO] ========== Completed')) {
+                        console.log(`✅ ${folderName} rebuilt`);
+                        console.log(`🤖 Listening on ${consoleColors.green}http://localhost:${port}${consoleColors.revert}...`);
+                    }
+                });
+
+                // Handle exit event
+                childProcessTwo.on('exit', code => {
+                    if (code !== 0) {
+                        clearInterval(loadingIntervals[index]);
+                        process.stdout.write('\r⛔ ');
+                        console.error(`Preview script in ${folderPath} exited with code ${code}`);
+                    }
+                });
+            }
         }));
     } catch (error) {
         console.error(`⛔ Error: ${error}`);

diff --git a/dist/css/atcb-overrides.css b/dist/css/atcb-overrides.css
@@ -5,7 +5,7 @@
  *
  * Style: Default
  *
- * Version: 2.6.12
+ * Version: 2.6.15
  * Creator: Jens Kuerschner (https://jekuer.com)
  * Project: https://github.com/add2cal/add-to-calendar-button
  * License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)
@@ -20,7 +20,7 @@
   --base-font-size-l: 16px;
   --base-font-size-m: 16px;
   --base-font-size-s: 16px;
-  --font: arial, helvetica, sans-serif;
+  --font: arial, helvetica, "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color", "Android Emoji", sans-serif;
   --accent-color: #1e90ff;
   --wrapper-padding: 1px;
   --buttonslist-gap: 5px;

diff --git a/dist/css/atcb-overrides.min.css b/dist/css/atcb-overrides.min.css