build: use firebase for hosting and remove url prefixes

2024-08-16 09:00:32 +03:00 · 2023-07-27 09:17:27 -07:00 · 2023-07-27 09:17:27 -07:00 · 86ccec3e7e
commit 86ccec3e7e
parent e11fb5dd67
38 changed files with 235 additions and 72 deletions
--- a/.github/workflows/deploy-catalog.yml
+++ b/.github/workflows/deploy-catalog.yml
@ -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
--- a/.github/workflows/firebase-hosting-merge.yml
+++ 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
--- a/.github/workflows/firebase-hosting-pull-request.yml
+++ 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
--- 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
--- a/catalog/.firebaserc
+++ b/catalog/.firebaserc
@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "material-web-catalog"
+  }
+}
--- 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}
--- 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}"
--- 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 {
--- a/catalog/firebase.json
+++ 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"
+          }
+        ]
+      }
+    ]
+  }
+}
--- 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",
--- 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=""
--- 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 }}
--- 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;
--- 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 %}
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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": {
--- a/package.json
+++ b/package.json
@ -37,7 +37,6 @@
    "!catalog"
  ],
  "workspaces": [
-    ".",
    "catalog"
  ],
  "dependencies": {
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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