(#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 · May 17, 2024 · bff5039 · bff5039
1 parent 630dbbc
commit bff5039
Show file tree

Hide file tree

Showing 52 changed files with 1,600 additions and 603 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/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,35 @@ 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/**/*.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 +105,7 @@ export const repositoryConfig: Record<string, RepositoryConfig> = {
         name: 'design'
     },
     docs: {
-        ...defaultRepositoryConfig,
+        ...astroRepositoryConfig,
         name: 'docs'
     },
     fest: {

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.14
  * 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
diff --git a/dist/css/boxstarter.css b/dist/css/boxstarter.css
@@ -56210,6 +56210,7 @@ pre.d-format-none {
 
 code[class*=language-],
 pre[class*=language-] {
+  margin-bottom: 1rem;
   font-family: var(--bs-font-monospace);
   font-size: 0.85rem;
   font-weight: 700;

diff --git a/dist/css/boxstarter.min.css b/dist/css/boxstarter.min.css
diff --git a/dist/css/chocolatey.css b/dist/css/chocolatey.css
@@ -60094,6 +60094,7 @@ pre.d-format-none {
 
 code[class*=language-],
 pre[class*=language-] {
+  margin-bottom: 1rem;
   font-family: var(--bs-font-monospace);
   font-size: 0.85rem;
   font-weight: 700;

diff --git a/dist/css/chocolatey.min.css b/dist/css/chocolatey.min.css