(ENGTASKS-3665) WIP Add Banners

.vscode/settings.json

@@ -17,6 +17,7 @@
         "datatables",
         "Disqus",
         "DOCSEARCH",
+        "dompurify",
         "dropoverlay",
         "easymde",
         "favicons",
@@ -31,6 +32,7 @@
         "Luxon",
         "Navbars",
         "navigations",
+        "nodenext",
         "nouislider",
         "offcanvas",
         "outdir",

build/build-partials.ts

@@ -87,26 +87,6 @@ const init = async () => {
             replacementContentIsFile: false
         });
 
-        // Delete TopAlertBanner.html
-        await fs.rm(path.join(destinationHbs, 'TopAlertBanner.html'));
-        await fs.rm(path.join(destinationAstro, 'TopAlertBanner.html'));
-
-        // cshtml files
-        await updateContent({
-            destination: destinationCshtml,
-            targetFile: 'TopAlertBanner.html',
-            targetFileDestination: destinationCshtml,
-            targetFileContentToReplace: 'topNoticeText = ""',
-            replaceWithContent: 'AlertText.html',
-            replacementContentIsFile: true,
-            replacementTemplate: 'topNoticeText = "{0}"'
-        });
-
-        // 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);

build/build-portal.ts → build/build-repository.ts

@@ -1,28 +1,27 @@
 #!/usr/bin/env ts-node
 
 /*!
- * Script to build additional assets for portal.
+ * Script to build additional assets for a repository.
  * Copyright 2020-2024 Chocolatey Software
  * Licensed under Apache License (https://github.com/chocolatey/choco-theme/blob/main/LICENSE)
  */
 
 import * as esbuild from 'esbuild';
 import { purgeCss } from './functions/purge-css';
-import { repositoryConfig } from './data/repository-config';
+import { repository } from './functions/determine-repository';
 
 const init = async () => {
-    console.log('🚀 Compiling and minifying Portal JS...');
-    const repository = repositoryConfig.portal;
+    console.log('🚀 Compiling and minifying repository JS...');
 
     await esbuild.build({
-        entryPoints: [`${repository.js}src/*.js`],
+        entryPoints: [`${repository.js}src/banners/*.js`],
         target: 'es2015',
         bundle: true,
         outdir: repository.js,
         minify: true,
         outExtension: { '.js': '.min.js' }
     }).then(async () => {
-        console.log('✅ Portal JS compiled and minified');
+        console.log('✅ Repository JS compiled and minified');
 
         // PurgeCSS
         await purgeCss({

build/choco-theme.ts

@@ -7,27 +7,12 @@
  */
 
 import * as fs from 'fs/promises';
-import * as process from 'process';
+import { repository } from './functions/determine-repository';
 import { repositoryConfig } from './data/repository-config';
 import { purgeCss } from './functions/purge-css';
 import { updateContent } from './functions/update-content';
 
-// Process args
-const params: Record<string, string> = {};
-process.argv.slice(2).forEach(val => {
-    const [key, value] = val.split('=');
-
-    if (key.startsWith('--')) {
-        params[key.slice(2)] = value;
-    }
-});
-
-// Determine repository information
-let repository = repositoryConfig.default;
-if (params.repository && repositoryConfig[params.repository]) {
-    repository = repositoryConfig[params.repository];
-    console.log('Using repository information:', repository);
-}
+console.log('Using repository information:', repository);
 
 // Determine source CSS name
 let sourceCss: string;
@@ -67,7 +52,7 @@ const copyTheme = async ({
 
 const init = async () => {
     try {
-        const containsValidation = repository.name === repositoryConfig.portal.name || repository.name === repositoryConfig.community.name;
+        const containsValidation = repository.name === repositoryConfig.portal.name || repository.name === repositoryConfig.community.name || repository.name === repositoryConfig.hub.name;
 
         // Define arrays for parallel tasks
         const parallelTasksInitial = [
@@ -200,7 +185,7 @@ const init = async () => {
         }
 
         // ESLint and tsconfig - needed if repository contains it's own assets along with choco-theme
-        if (repository.name === repositoryConfig.portal.name) {
+        if (repository.playwright || repository.name === repositoryConfig.portal.name || repository.name === repositoryConfig.hub.name) {
             parallelTasksInitial.push(
                 {
                     task: '.eslintrc.js',
@@ -254,7 +239,7 @@ const init = async () => {
 
         // Change CSS content
         // Font Awesome
-        if (repository.name === repositoryConfig.portal.name || repository.language === 'astro') {
+        if (repository.name === repositoryConfig.portal.name || repository.name === repositoryConfig.hub.name || repository.language === 'astro') {
             console.log('🚀 Updating Font Awesome font path...');
             await updateContent({
                 destination: repository.css,
@@ -294,7 +279,7 @@ const init = async () => {
         }
 
         // PurgeCSS
-        if (repository.name !== repositoryConfig.portal.name) {
+        if (repository.name !== repositoryConfig.portal.name && repository.name !== repositoryConfig.hub.name) {
             await purgeCss({
                 source: `${repository.css}${repository.name}.min.css`,
                 repository: repository

build/data/preview-config.ts

@@ -55,6 +55,14 @@ export const folderMapping: FolderMapping = {
         isStatiq: true,
         isAstro: false
     },
+    '--hub': {
+        folder: 'admin-portal',
+        protocol: 'https',
+        port: 44362,
+        isStatiq: false,
+        isAstro: false,
+        root: '/source/AdminPortal'
+    },
     '--org': {
         folder: 'chocolatey.org',
         port: 5081,

build/data/repository-config.ts

@@ -45,6 +45,8 @@ export const defaultRepositoryConfig = {
             '::-webkit-scrollbar-thumb',
             /^fa-(check|triangle-exclamation|info|xmark)/,
             /^text-bg-(info|warning|danger|success)/,
+            /^text-bg-(blue|pink|purple|green|red|yellow|orange)/,
+            /^alert-(blue|pink|purple|green|red|yellow|orange)/,
             /^data-bs-popper/
         ]
     },
@@ -119,6 +121,16 @@ export const repositoryConfig: Record<string, RepositoryConfig> = {
         ...defaultRepositoryConfig,
         name: 'fest'
     },
+    hub: {
+        ...defaultRepositoryConfig,
+        name: 'hub',
+        favicons: 'wwwroot/',
+        css: 'wwwroot/css/',
+        js: 'wwwroot/js/',
+        fontAwesome: 'wwwroot/fonts/fontawesome-free/',
+        images: 'wwwroot/images/global-shared/',
+        partials: 'Pages/Global/'
+    },
     org: {
         ...defaultRepositoryConfig,
         name: 'org',
@@ -186,6 +198,22 @@ repositoryConfig.community.purgeCss = {
     ]
 };
 
+// Merge purgeCss section into the hub configuration
+repositoryConfig.hub.purgeCss = {
+    content: [
+        `${repositoryConfig.hub.js}*.js`,
+        'Areas/**/*.cshtml',
+        'Pages/**/*.cshtml'
+    ],
+    safelist: [
+        ...defaultRepositoryConfig.purgeCss.safelist,
+        /^bg-(secondary|danger|success)/,
+        /^callout-(danger|success)/,
+        /^form-check-input-(blue|pink|purple|green|red|yellow|orange)/,
+        /^spinner-grow/
+    ]
+};
+
 // Merge purgeCss section into the org configuration
 repositoryConfig.org.purgeCss = {
     content: [

build/functions/determine-repository.ts

@@ -0,0 +1,28 @@
+#!/usr/bin/env ts-node
+
+/*!
+ * Determines the repository to use based on the provided parameters.
+ * Copyright 2020-2024 Chocolatey Software
+ * Licensed under Apache License (https://github.com/chocolatey/choco-theme/blob/main/LICENSE)
+ */
+
+import * as process from 'process';
+import { repositoryConfig } from '../data/repository-config';
+
+// Process args
+const params: Record<string, string> = {};
+process.argv.slice(2).forEach(val => {
+    const [key, value] = val.split('=');
+
+    if (key.startsWith('--')) {
+        params[key.slice(2)] = value;
+    }
+});
+
+// Determine repository information
+let repository = repositoryConfig.default;
+if (params.repository && repositoryConfig[params.repository]) {
+    repository = repositoryConfig[params.repository];
+}
+
+export { repository };