[showcase] Add support to deploy versions in virtual directories (#658)

* Build Mercury before building the showcase

* Add support to deploy versions in virtual directories

* Simplify versioning process

* Update README.md

* Update README.md

Author: ncamera

README.md

@@ -41,3 +41,16 @@ To see the documentation and examples of how to use Mercury, visit the [showcase
   ```bash
   bun build.un.watch
   ```
+
+- To build the showcase with a specific virtual directory
+
+  ```bash
+  bun build.version <version>
+  ```
+
+  For example:
+
+  ```bash
+  bun build.version v1.0.0-beta
+  ```
+

package.json

@@ -4,7 +4,8 @@
   "version": "0.0.225",
   "type": "module",
   "scripts": {
-    "build": "bun build.common && cd packages/showcase && bun run build",
+    "build": "bun build.common && bun build.mer && cd packages/showcase && bun run build",
+    "build.version": "bun build.common && bun build.mer && cd packages/showcase && bun run build.version",
     "build.watch": "bun build.common && cd packages/showcase && bun build.watch",
     "build.common": "cd packages/common && bun run build",
     "build.mer": "cd packages/mercury && bun build-no-svg",

packages/common/src/metadata/components/chat/metadata.ts

@@ -88,23 +88,23 @@ const AVATAR_CUSTOM_STYLES = `
 .chat::part(header-coordinator) {
   --chat-avatar-border-color-from: #FDE047;
   --chat-avatar-border-color-to: #F97316;
-  --chat-avatar-background-image: url("/assets/chat-showcase/coordinator.webp");
+  --chat-avatar-background-image: url("./assets/chat-showcase/coordinator.webp");
   --chat-avatar-waiting-dot-1-color: #FDE047;
   --chat-avatar-waiting-dot-2-color: #FBBF24;
   --chat-avatar-waiting-dot-3-color: #F97316;
 }
 .chat::part(header-programming-generalist) {
   --chat-avatar-border-color-from: #8B5CF6;
   --chat-avatar-border-color-to: #3B82F6;
-  --chat-avatar-background-image: url("/assets/chat-showcase/programming-generalist.webp");
+  --chat-avatar-background-image: url("./assets/chat-showcase/programming-generalist.webp");
   --chat-avatar-waiting-dot-1-color: #8B5CF6;
   --chat-avatar-waiting-dot-2-color: #6366F1;
   --chat-avatar-waiting-dot-3-color: #3B82F6;
 }
 .chat::part(header-react-expert) {
   --chat-avatar-border-color-from: #EC4899;
   --chat-avatar-border-color-to: #DC2626;
-  --chat-avatar-background-image: url("/assets/chat-showcase/react-expert.webp");
+  --chat-avatar-background-image: url("./assets/chat-showcase/react-expert.webp");
   --chat-avatar-waiting-dot-1-color: #f87bb8;
   --chat-avatar-waiting-dot-2-color: #ee3961;
   --chat-avatar-waiting-dot-3-color: #ee2525;

packages/common/src/metadata/components/chat/models.ts

@@ -262,31 +262,31 @@ export const dummySampleFiles = (
       extension: "mp3",
       mimeType: "audio/mp3",
       uploadState: uploadState,
-      url: "/assets/chat-showcase/guitar-bend.mp3"
+      url: "./assets/chat-showcase/guitar-bend.mp3"
     },
     {
       accessibleName: "Particles in the dark",
       caption: "particles",
       extension: "mp4",
       mimeType: "video/mp4",
       uploadState: uploadState,
-      url: "/assets/chat-showcase/particles.mp4"
+      url: "./assets/chat-showcase/particles.mp4"
     },
     {
       alternativeText: "Mercury geometric thin shapes in blue",
       caption: "mercury-geometric-thin-shapes-in-blue-for-ui-layout-testing",
       extension: "svg",
       mimeType: "image/svg",
       uploadState: uploadState,
-      url: "/assets/chat-showcase/mercury-cover.svg"
+      url: "./assets/chat-showcase/mercury-cover.svg"
     },
     {
       accessibleName: "Project proposal, version 2 (PDF)",
       caption: "project-proposal-v2",
       extension: "pdf",
       mimeType: "application/pdf",
       uploadState: uploadState,
-      url: "/assets/chat-showcase/project-proposal-v2.pdf"
+      url: "./assets/chat-showcase/project-proposal-v2.pdf"
     }
   ];
 };

packages/showcase/README.md

@@ -21,3 +21,17 @@ npm run build
 ```
 
 After that, you can deploy the `dist/browser` folder if you want the application to be static.
+
+## Generate a custom build for a specific version
+
+```bash
+bun build.version <version>
+```
+
+For example:
+
+```bash
+bun build.version v1.0.0-beta
+```
+
+After that, you can deploy the `dist/browser` folder if you want the application to be static.

packages/showcase/build-version.js

@@ -0,0 +1,38 @@
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+// It generates a custom version for the showcase that works in virtual
+// directories.
+// It requires a version argument, e.g. "v1.0.0-beta".
+// This allow us to host multiple versions of the showcase in the same domain.
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+import { spawn } from "child_process";
+import { styleText } from "util";
+
+const start = Date.now();
+
+const VERSION = process.argv[2];
+
+if (VERSION === undefined) {
+  console.error(
+    styleText("red", "error: version argument is required."),
+    "Example:",
+    styleText(["bold", "cyanBright"], "bun build.version v1.0.0-beta")
+  );
+  process.exit(1);
+}
+
+const child = spawn(
+  `bun compute-version && bun mercury -i=/${VERSION}/assets/icons/ -f=/${VERSION}/assets/fonts/ --outDir=.mercury/ && ng build --base-href /${VERSION}/`,
+  { stdio: "inherit", shell: true }
+);
+
+child.on("close", code => {
+  const duration = Date.now() - start;
+
+  if (code === 0) {
+    console.log(styleText("green", `✓ version ${VERSION} built in ${duration}ms`));
+  } else {
+    console.log(
+      styleText("red", `error building the version ${VERSION} (code: ${code})`)
+    );
+  }
+});

packages/showcase/package.json

@@ -8,6 +8,7 @@
     "start": "bun compute-version && bun build.scss && ng serve -o --port 0",
     "start.watch": "bun compute-version && ng serve -o --port 0",
     "build": "bun compute-version && bun build.scss && ng build",
+    "build.version": "node build-version.js",
     "build.watch": "bun run build -- --watch",
     "build.scss": "mercury -i=/assets/icons/ -f=/assets/fonts/ --outDir=.mercury/",
     "watch": "bun compute-version && ng build --watch --configuration development",

packages/showcase/src/app/app.scss

@@ -36,7 +36,7 @@
     &::before {
       content: "";
       display: block;
-      -webkit-mask: no-repeat center / 100% url("/assets/icons/mercury.svg");
+      -webkit-mask: no-repeat center / 100% url("../../public/icons/mercury.svg");
       inline-size: 40px;
       block-size: 40px;
       background-color: currentColor;

packages/showcase/src/app/mercury-version.ts

@@ -1 +1 @@
-export const mercuryVersion = "0.32.0";
+export const mercuryVersion = "0.32.0";

packages/showcase/src/services/design-system.service.ts

@@ -1,11 +1,11 @@
 import { isPlatformBrowser } from "@angular/common";
 import { effect, inject, Injectable, PLATFORM_ID, signal } from "@angular/core";
 
-import { SEOService } from "./seo.service";
-import type { DesignSystem, MercuryVariant } from "../common/types";
 import { bundleToHashMappings } from "../../.mercury/bundle-to-hash-mappings";
+import type { DesignSystem, MercuryVariant } from "../common/types";
+import { SEOService } from "./seo.service";
 
-const BASE_CSS_URL = "/assets/css/";
+const BASE_CSS_URL = "./assets/css/";
 export const MERCURY_BASE_CSS_URL = `${BASE_CSS_URL}mercury/`;
 // export const UNANIMO_BASE_CSS_URL = `${BASE_CSS_URL}unanimo/`;
 export const UNANIMO_BASE_CSS_URL = `${BASE_CSS_URL}mercury/`;
@@ -64,8 +64,7 @@ export class DesignSystemService {
   constructor() {
     if (isPlatformBrowser(this.platform)) {
       this.designSystem.set(
-        (localStorage.getItem(DESIGN_SYSTEM_KEY) as DesignSystem | null) ??
-          "mercury"
+        (localStorage.getItem(DESIGN_SYSTEM_KEY) as DesignSystem | null) ?? "mercury"
       );
       this.mercuryVariant.set(
         (localStorage.getItem(MERCURY_VARIANT_KEY) as MercuryVariant | null) ??
@@ -87,8 +86,7 @@ export class DesignSystemService {
         if (alreadyExisted) {
           this.disablePreviousLink(newVariantSelector, link);
         } else {
-          link.onload = () =>
-            this.disablePreviousLink(newVariantSelector, link);
+          link.onload = () => this.disablePreviousLink(newVariantSelector, link);
         }
 
         this.seoService.updateDescription(