From 86ccec3e7eab27f54aaa209df6038ec960204643 Mon Sep 17 00:00:00 2001
From: Elliott Marquez <5981958+e111077@users.noreply.github.com>
Date: Thu, 27 Jul 2023 09:17:27 -0700
Subject: [PATCH] build: use firebase for hosting and remove url prefixes

---
 .github/workflows/deploy-catalog.yml          | 23 -----
 .github/workflows/firebase-hosting-merge.yml  | 27 ++++++
 .../firebase-hosting-pull-request.yml         | 24 +++++
 button/demo/project.json                      |  2 +-
 catalog/.firebaserc                           |  5 ++
 .../plugins/copy-code-button.cjs              |  2 +-
 .../shortcodes/playground-example.cjs         |  4 +-
 catalog/eleventy.config.cjs                   |  5 ++
 catalog/firebase.json                         | 35 ++++++++
 catalog/package.json                          | 13 +--
 catalog/site/_includes/default.html           | 12 +--
 .../site/_includes/layouts/components.html    |  8 +-
 catalog/site/css/global.css                   |  4 +-
 catalog/site/index.html                       |  4 +-
 catalog/src/components/top-app-bar.ts         |  6 +-
 checkbox/demo/project.json                    |  2 +-
 chips/demo/project.json                       |  2 +-
 dialog/demo/project.json                      |  2 +-
 divider/demo/project.json                     |  2 +-
 elevation/demo/project.json                   |  2 +-
 fab/demo/project.json                         |  2 +-
 field/demo/project.json                       |  2 +-
 focus/demo/project.json                       |  2 +-
 iconbutton/demo/project.json                  |  2 +-
 labs/navigationbar/demo/project.json          |  2 +-
 labs/segmentedbuttonset/demo/project.json     |  2 +-
 list/demo/project.json                        |  2 +-
 menu/demo/project.json                        |  2 +-
 package-lock.json                             | 90 ++++++++++++++++++-
 package.json                                  |  1 -
 progress/demo/project.json                    |  2 +-
 radio/demo/project.json                       |  2 +-
 ripple/demo/project.json                      |  2 +-
 select/demo/project.json                      |  2 +-
 slider/demo/project.json                      |  2 +-
 switch/demo/project.json                      |  2 +-
 tabs/demo/project.json                        |  2 +-
 textfield/demo/project.json                   |  2 +-
 38 files changed, 235 insertions(+), 72 deletions(-)
 delete mode 100644 .github/workflows/deploy-catalog.yml
 create mode 100644 .github/workflows/firebase-hosting-merge.yml
 create mode 100644 .github/workflows/firebase-hosting-pull-request.yml
 create mode 100644 catalog/.firebaserc
 create mode 100644 catalog/firebase.json

diff --git a/.github/workflows/deploy-catalog.yml b/.github/workflows/deploy-catalog.yml
deleted file mode 100644
index 97f4ee791..000000000
--- a/.github/workflows/deploy-catalog.yml
+++ /dev/null
@@ -1,23 +0,0 @@
-name: Build and Deploy Catalog
-on:
-  push:
-    branches: main
-jobs:
-  build-and-deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: npm
-      - uses: google/wireit@setup-github-actions-caching/v1
-
-      - run: npm ci
-      - run: npm run build:catalog
-
-      - name: Deploy Catalog
-        uses: JamesIves/github-pages-deploy-action@v4.4.1
-        with:
-          branch: gh-pages
-          folder: catalog/_prod
\ No newline at end of file
diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml
new file mode 100644
index 000000000..14a974e1f
--- /dev/null
+++ b/.github/workflows/firebase-hosting-merge.yml
@@ -0,0 +1,27 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+'on':
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: npm
+      - uses: google/wireit@setup-github-actions-caching/v1
+      - run: npm ci
+      - run: 'npm run build:catalog'
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MATERIAL_WEB_CATALOG }}'
+          channelId: live
+          projectId: material-web-catalog
+          entryPoint: catalog
diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
new file mode 100644
index 000000000..1f8893b69
--- /dev/null
+++ b/.github/workflows/firebase-hosting-pull-request.yml
@@ -0,0 +1,24 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+jobs:
+  build_and_preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: npm
+      - uses: google/wireit@setup-github-actions-caching/v1
+      - run: npm ci
+      - run: 'npm run build:catalog'
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MATERIAL_WEB_CATALOG }}'
+          projectId: material-web-catalog
+          entryPoint: catalog
diff --git a/button/demo/project.json b/button/demo/project.json
index b9053089a..92f3e7958 100644
--- a/button/demo/project.json
+++ b/button/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/catalog/.firebaserc b/catalog/.firebaserc
new file mode 100644
index 000000000..512b40792
--- /dev/null
+++ b/catalog/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "material-web-catalog"
+  }
+}
diff --git a/catalog/eleventy-helpers/plugins/copy-code-button.cjs b/catalog/eleventy-helpers/plugins/copy-code-button.cjs
index f3ddb846d..77c2c27f2 100644
--- a/catalog/eleventy-helpers/plugins/copy-code-button.cjs
+++ b/catalog/eleventy-helpers/plugins/copy-code-button.cjs
@@ -27,7 +27,7 @@ function renderCode(originalRule) {
 
     return `
 <lit-island
-    import="/material-web/js/hydration-entrypoints/copy-code-button.js"
+    import="/js/hydration-entrypoints/copy-code-button.js"
     on:interaction="focusin,pointerenter,touchstart">
   <copy-code-button>
     ${originalHTMLContent}
diff --git a/catalog/eleventy-helpers/shortcodes/playground-example.cjs b/catalog/eleventy-helpers/shortcodes/playground-example.cjs
index 9289752ba..bf7371de6 100644
--- a/catalog/eleventy-helpers/shortcodes/playground-example.cjs
+++ b/catalog/eleventy-helpers/shortcodes/playground-example.cjs
@@ -53,9 +53,9 @@ function playgroundExample(eleventyConfig) {
           </md-outlined-icon-button>
           Expand interactive demo.
         </summary>
-        <lit-island on:visible import="/material-web/js/hydration-entrypoints/playground-elements.js" class="example" aria-hidden="true">
+        <lit-island on:visible import="/js/hydration-entrypoints/playground-elements.js" class="example" aria-hidden="true">
           <playground-project
-              id="${id}" project-src="/material-web/assets/stories/${dirname}/project.json">
+              id="${id}" project-src="/assets/stories/${dirname}/project.json">
           <playground-preview
               style="${previewHeight}"
               project="${id}"
diff --git a/catalog/eleventy.config.cjs b/catalog/eleventy.config.cjs
index 862bb3870..9b14b263a 100644
--- a/catalog/eleventy.config.cjs
+++ b/catalog/eleventy.config.cjs
@@ -15,6 +15,7 @@ const permalinks = require('./eleventy-helpers/plugins/permalinks.cjs');
 const filterSort = require('./eleventy-helpers/filters/filter-sort.cjs');
 const copyCodeButtonPlugin = require('./eleventy-helpers/plugins/copy-code-button.cjs');
 const markdownIt = require('markdown-it');
+const { compress } = require('eleventy-plugin-compress');
 
 // dev mode build
 const DEV = process.env.NODE_ENV === 'DEV';
@@ -79,6 +80,10 @@ module.exports = function (eleventyConfig) {
     wrapper: 'div',
   });
 
+  eleventyConfig.addPlugin(compress, {
+    enabled: !DEV,
+  });
+
   // set output folders and use nunjucks for html templating engine. see
   // nunjucks docs and 11ty docs for more info on nunjucks templating
   return {
diff --git a/catalog/firebase.json b/catalog/firebase.json
new file mode 100644
index 000000000..171a368b4
--- /dev/null
+++ b/catalog/firebase.json
@@ -0,0 +1,35 @@
+{
+  "hosting": {
+    "public": "_prod",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**",
+      "_dev/**",
+      "site/**",
+      "src/**",
+      "stories/**",
+      "build/**"
+    ],
+    "headers": [
+      {
+        "source": "**/*.*",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "604800"
+          }
+        ]
+      },
+      {
+        "source": "**/@(*.woff2|playground-typescript-worker.js)",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "31536000"
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/catalog/package.json b/catalog/package.json
index 96e2dd4ca..7e2fc1de1 100644
--- a/catalog/package.json
+++ b/catalog/package.json
@@ -3,8 +3,11 @@
   "version": "0.0.1",
   "description": "The Material Web Catalog.",
   "main": "_prod/index.html",
+  "engines": {
+    "node": "20.x.x"
+  },
   "scripts": {
-    "start": "npm run serve",
+    "start": "node server/index.mjs",
     "dev": "npm run serve:dev --watch",
     "serve": "wireit",
     "serve:dev": "wireit",
@@ -123,7 +126,7 @@
       ]
     },
     "serve:dev": {
-      "command": "wds -b /material-web/ --watch --root-dir _dev --open",
+      "command": "wds --watch --root-dir _dev --open",
       "service": true,
       "dependencies": [
         {
@@ -133,7 +136,7 @@
       ]
     },
     "serve": {
-      "command": "wds -b /material-web/ --watch --root-dir _prod",
+      "command": "wds --watch --root-dir _prod",
       "service": true,
       "dependencies": [
         {
@@ -146,8 +149,7 @@
       "command": "node scripts/copy-stories.mjs",
       "files": [
         "scripts/copy-stories.mjs",
-        "../*/demo",
-        "!../node_modules"
+        "../*/demo"
       ],
       "output": [
         "stories/*/**/*",
@@ -176,6 +178,7 @@
     "@web/dev-server": "^0.1.35",
     "@webcomponents/template-shadowroot": "^0.2.1",
     "clean-css": "^5.3.1",
+    "eleventy-plugin-compress": "^1.0.5",
     "eleventy-plugin-nesting-toc": "^1.3.0",
     "esbuild": "^0.17.14",
     "esbuild-plugin-minify-html-literals": "^1.0.1",
diff --git a/catalog/site/_includes/default.html b/catalog/site/_includes/default.html
index 016d1621c..210176e1c 100644
--- a/catalog/site/_includes/default.html
+++ b/catalog/site/_includes/default.html
@@ -13,12 +13,12 @@
     <!-- Inlines the global css in site/css/global.css -->
     {% inlinecss "global.css" %}
     <!-- MUST be loaded before any lit bundle. allows hydration of SSRd components -->
-    <script type="module" src="/material-web/js/ssr-utils/lit-hydrate-support.js"></script>
+    <script type="module" src="/js/ssr-utils/lit-hydrate-support.js"></script>
     <!-- Loads definition for <lit-island>. See docs for @11ty/is-land for usage -->
-    <script type="module" src="/material-web/js/ssr-utils/lit-island.js"></script>
+    <script type="module" src="/js/ssr-utils/lit-island.js"></script>
     <!-- Inlines the material theming logic since we want to prevent FOUC -->
     {% inlinejs "inline/apply-saved-theme.js" %}
-    <script type="module" src="/material-web/js/pages/global.js"></script>
+    <script type="module" src="/js/pages/global.js"></script>
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
@@ -38,9 +38,9 @@
   <body dsd-pending>
     <!-- Inlines the declarative shadow dom polyfill for FF since it's performance sensitive -->
     {% inlinejs "ssr-utils/dsd-polyfill.js" %}
-    <lit-island on:idle import="/material-web/js/hydration-entrypoints/navigation.js">
+    <lit-island on:idle import="/js/hydration-entrypoints/navigation.js">
       <nav-drawer page-title="{{name}}" {% if hasToc %}has-toc{% endif %}>
-        <top-app-bar slot="top-app-bar" baseURI="/material-web">
+        <top-app-bar slot="top-app-bar" baseURI="/">
           {% block topappbar %}{{ topappbar | safe }}{% endblock %}
         </top-app-bar>
 
@@ -57,7 +57,7 @@
             {% for component in collections.component|filtersort('data.name') %}
               <li>
                 <md-list-item-link
-                  href="/material-web{{ component.url }}"
+                  href="{{ component.url }}"
                   headline="{{ component.data.name }}"
                   {% if component.url == page.url %}selected{% endif %}
                   data-role=""
diff --git a/catalog/site/_includes/layouts/components.html b/catalog/site/_includes/layouts/components.html
index d0e8db02c..b8e29d971 100644
--- a/catalog/site/_includes/layouts/components.html
+++ b/catalog/site/_includes/layouts/components.html
@@ -1,9 +1,9 @@
 {% extends 'default.html' %}
 
 {% block head %}
-  <script type="module" src="/material-web/js/pages/components.js"></script>
-  <link rel="stylesheet" href="/material-web/css/components.css" />
-  <link rel="stylesheet" href="/material-web/css/syntax-highlight.css" />
+  <script type="module" src="/js/pages/components.js"></script>
+  <link rel="stylesheet" href="/css/components.css" />
+  <link rel="stylesheet" href="/css/syntax-highlight.css" />
 {% endblock %}
 
 {% block toc%}
@@ -15,7 +15,7 @@
 <!-- Loads page JS on idle callback at src/hydration-entrypoints/components/md-file-name.ts -->
 <lit-island
     on:idle
-    import="/material-web/js/hydration-entrypoints{{ page.filePathStem }}.js">
+    import="/js/hydration-entrypoints{{ page.filePathStem }}.js">
 </lit-island>
 {% endif %}
 {{ content | safe }}
diff --git a/catalog/site/css/global.css b/catalog/site/css/global.css
index 3901e26b7..28b347c57 100644
--- a/catalog/site/css/global.css
+++ b/catalog/site/css/global.css
@@ -10,7 +10,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/material-web/fonts/google-sans/regular.woff2) format('woff2');
+  src: url(/fonts/google-sans/regular.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
     U+FEFF, U+FFFD;
@@ -22,7 +22,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/material-web/fonts/google-sans/mono.woff2) format('woff2');
+  src: url(/fonts/google-sans/mono.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
     U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
diff --git a/catalog/site/index.html b/catalog/site/index.html
index 22e5a0670..e3d1bd561 100644
--- a/catalog/site/index.html
+++ b/catalog/site/index.html
@@ -1,8 +1,8 @@
 {% extends 'default.html' %}
 
 {% block head %}
-  <script type="module" src="/material-web/js/pages/home-page.js"></script>
-  <link rel="stylesheet" href="/material-web/css/home-page.css">
+  <script type="module" src="/js/pages/home-page.js"></script>
+  <link rel="stylesheet" href="/css/home-page.css">
 {% endblock %}
 
 {% block content %}
diff --git a/catalog/src/components/top-app-bar.ts b/catalog/src/components/top-app-bar.ts
index 28df604c1..b22c4ce3b 100644
--- a/catalog/src/components/top-app-bar.ts
+++ b/catalog/src/components/top-app-bar.ts
@@ -45,12 +45,12 @@ import {materialDesign} from '../svg/material-design-logo.js';
               <span><md-icon>menu</md-icon></span>
               <span slot="selectedIcon"><md-icon>menu_open</md-icon></span>
             </md-standard-icon-button>
-            <md-standard-icon-button href="/material-web/" class="home-button">
+            <md-standard-icon-button href="/" class="home-button">
               ${materialDesign}
             </md-standard-icon-button>
           </section>
 
-          <a href="/material-web/" id="home-link">
+          <a href="/" id="home-link">
             Material Web
             <md-focus-ring for="home-link"></md-focus-ring>
           </a>
@@ -58,7 +58,7 @@ import {materialDesign} from '../svg/material-design-logo.js';
           <section class="end">
             <lit-island
               on:interaction="pointerenter,focusin,pointerdown"
-              import="/material-web/js/hydration-entrypoints/menu.js"
+              import="/js/hydration-entrypoints/menu.js"
               id="menu-island"
             >
               <md-menu
diff --git a/checkbox/demo/project.json b/checkbox/demo/project.json
index b9053089a..92f3e7958 100644
--- a/checkbox/demo/project.json
+++ b/checkbox/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/chips/demo/project.json b/chips/demo/project.json
index b9053089a..92f3e7958 100644
--- a/chips/demo/project.json
+++ b/chips/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/dialog/demo/project.json b/dialog/demo/project.json
index b9053089a..92f3e7958 100644
--- a/dialog/demo/project.json
+++ b/dialog/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/divider/demo/project.json b/divider/demo/project.json
index b9053089a..92f3e7958 100644
--- a/divider/demo/project.json
+++ b/divider/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/elevation/demo/project.json b/elevation/demo/project.json
index b9053089a..92f3e7958 100644
--- a/elevation/demo/project.json
+++ b/elevation/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/fab/demo/project.json b/fab/demo/project.json
index b9053089a..92f3e7958 100644
--- a/fab/demo/project.json
+++ b/fab/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/field/demo/project.json b/field/demo/project.json
index b9053089a..92f3e7958 100644
--- a/field/demo/project.json
+++ b/field/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/focus/demo/project.json b/focus/demo/project.json
index b9053089a..92f3e7958 100644
--- a/focus/demo/project.json
+++ b/focus/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/iconbutton/demo/project.json b/iconbutton/demo/project.json
index b9053089a..92f3e7958 100644
--- a/iconbutton/demo/project.json
+++ b/iconbutton/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/labs/navigationbar/demo/project.json b/labs/navigationbar/demo/project.json
index b9053089a..92f3e7958 100644
--- a/labs/navigationbar/demo/project.json
+++ b/labs/navigationbar/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/labs/segmentedbuttonset/demo/project.json b/labs/segmentedbuttonset/demo/project.json
index b9053089a..92f3e7958 100644
--- a/labs/segmentedbuttonset/demo/project.json
+++ b/labs/segmentedbuttonset/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/list/demo/project.json b/list/demo/project.json
index b9053089a..92f3e7958 100644
--- a/list/demo/project.json
+++ b/list/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/menu/demo/project.json b/menu/demo/project.json
index b9053089a..92f3e7958 100644
--- a/menu/demo/project.json
+++ b/menu/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/package-lock.json b/package-lock.json
index 52b959572..8b49de862 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
       "version": "1.0.0-pre.14",
       "license": "Apache-2.0",
       "workspaces": [
-        ".",
         "catalog"
       ],
       "dependencies": {
@@ -53,6 +52,7 @@
         "@web/dev-server": "^0.1.35",
         "@webcomponents/template-shadowroot": "^0.2.1",
         "clean-css": "^5.3.1",
+        "eleventy-plugin-compress": "^1.0.5",
         "eleventy-plugin-nesting-toc": "^1.3.0",
         "esbuild": "^0.17.14",
         "esbuild-plugin-minify-html-literals": "^1.0.1",
@@ -63,6 +63,94 @@
         "tiny-glob": "^0.2.9",
         "typescript": "~4.9.5",
         "wireit": "^0.9.5"
+      },
+      "engines": {
+        "node": "20.x.x"
+      }
+    },
+    "catalog/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "catalog/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "catalog/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "catalog/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "peer": true
+    },
+    "catalog/node_modules/eleventy-plugin-compress": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-compress/-/eleventy-plugin-compress-1.0.5.tgz",
+      "integrity": "sha512-6COfs50AuGIMMW3aNku4otNqlOMP7/zDTMaCQ3I3e0Y+DpdyPT9rOK62PzTjLtTfBPo7VDgRpZykPMO6dytqIA==",
+      "dev": true,
+      "peerDependencies": {
+        "chalk": "^4.1.0"
+      }
+    },
+    "catalog/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "catalog/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
     "catalog/node_modules/typescript": {
diff --git a/package.json b/package.json
index bd99e3751..38f3fd809 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,6 @@
     "!catalog"
   ],
   "workspaces": [
-    ".",
     "catalog"
   ],
   "dependencies": {
diff --git a/progress/demo/project.json b/progress/demo/project.json
index b9053089a..92f3e7958 100644
--- a/progress/demo/project.json
+++ b/progress/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/radio/demo/project.json b/radio/demo/project.json
index b9053089a..92f3e7958 100644
--- a/radio/demo/project.json
+++ b/radio/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/ripple/demo/project.json b/ripple/demo/project.json
index b9053089a..92f3e7958 100644
--- a/ripple/demo/project.json
+++ b/ripple/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/select/demo/project.json b/select/demo/project.json
index b9053089a..92f3e7958 100644
--- a/select/demo/project.json
+++ b/select/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/slider/demo/project.json b/slider/demo/project.json
index b9053089a..92f3e7958 100644
--- a/slider/demo/project.json
+++ b/slider/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/switch/demo/project.json b/switch/demo/project.json
index b9053089a..92f3e7958 100644
--- a/switch/demo/project.json
+++ b/switch/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/tabs/demo/project.json b/tabs/demo/project.json
index b9053089a..92f3e7958 100644
--- a/tabs/demo/project.json
+++ b/tabs/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true
diff --git a/textfield/demo/project.json b/textfield/demo/project.json
index b9053089a..92f3e7958 100644
--- a/textfield/demo/project.json
+++ b/textfield/demo/project.json
@@ -1,5 +1,5 @@
 {
-  "extends": "/material-web/assets/stories/base.json",
+  "extends": "/assets/stories/base.json",
   "files": {
     "demo.ts": {
       "hidden": true