Replace dead Glitch demos with self-hosted equivalents

.eslintrc.js

@@ -83,5 +83,18 @@ module.exports = {
         'strict': 'error',
       },
     },
+    {
+      files: [
+        'site/src/demos/**',
+      ],
+      parserOptions: {
+        sourceType: 'module',
+        ecmaVersion: 2020,
+      },
+      rules: {
+        'strict': ['error', 'never'],
+        'max-len': 'off',
+      },
+    },
   ],
 };

README.md

@@ -486,12 +486,17 @@ After installing `quicklink` as a dependency, you can use it as follows:
 
 ## Demo
 
-### Glitch demos
+### Live demos
+
+- [Mini-ecomm - without Quicklink](https://getquick.link/demos/mini-ecomm/) - vanilla multi-page store, no prefetching.
+- [Mini-ecomm - with Quicklink](https://getquick.link/demos/mini-ecomm-quicklink/) - same store, but Quicklink prefetches in-viewport product links.
+- [Single-page app](https://getquick.link/demos/spa/) - a small SPA that uses Quicklink to prefetch route-level JavaScript chunks.
+
+The source for these demos lives under [`site/src/demos/`](https://github.com/GoogleChromeLabs/quicklink/tree/main/site/src/demos).
+
+### Repo examples
 
-- [Using Quicklink in a multi-page site](https://github.com/GoogleChromeLabs/quicklink/tree/main/demos/news)
-- [Using Quicklink with Service Workers (via Workbox)](https://github.com/GoogleChromeLabs/quicklink/tree/main/demos/news-workbox)
 - [Using Quicklink to prefetch API calls instead of `href` attribute](https://github.com/GoogleChromeLabs/quicklink/tree/main/demos/hrefFn)
-- [Using Quicklink to prerender a specific page](https://uskay-prerender2.glitch.me/next.html)
 
 ### Research
 

demos/news-workbox/README.md

@@ -1,17 +1,16 @@
-# Demo: Quicklink usage with workbox
+# Demo: Quicklink with Workbox
 
-A demo showing how to use Quicklink with Workbox for offline caching and links in the visible viewport.
+The original Glitch project that combined Quicklink with Workbox-based service
+workers is no longer available.
 
-## Glitch Source
+For an end-to-end Quicklink demo you can run today, see the self-hosted
+mini-ecomm and SPA demos:
 
-- [Link to Glitch App](https://anton-karlovskiy-quicklink-news-workbox.glitch.me)
-- [Link to Project on Glitch](https://glitch.com/~anton-karlovskiy-quicklink-news-workbox)
+- https://getquick.link/demos/mini-ecomm-quicklink/
+- https://getquick.link/demos/spa/
 
-## Installation
-
-```sh
-git clone https://api.glitch.com/git/anton-karlovskiy-quicklink-news-workbox
-npm install
-npm start
-npm run build
-```
+For Workbox itself, the up-to-date guides live at
+https://developer.chrome.com/docs/workbox. To layer Workbox runtime caching on
+top of Quicklink, register a service worker that caches navigations or static
+assets - Quicklink only triggers `<link rel="prefetch">`, so any caching
+strategy your service worker applies will continue to work as expected.

demos/news/README.md

@@ -1,17 +1,14 @@
-# Demo: Quicklink basic usage
+# Demo: Quicklink basic usage (multi-page site)
 
-A demo showing how to use Quicklink on a simple multi-page website.
+A demo showing how to use Quicklink on a multi-page website.
 
-## Glitch Source
+The original Glitch project for this demo is no longer available. A self-hosted
+replacement lives on the Quicklink site:
 
-- [Link to Glitch App](https://anton-karlovskiy-quicklink-news.glitch.me)
-- [Link to Project on Glitch](https://glitch.com/~anton-karlovskiy-quicklink-news)
+- **Live:** https://getquick.link/demos/mini-ecomm-quicklink/
+- **Source:** [`site/src/demos/mini-ecomm-quicklink`](../../site/src/demos/mini-ecomm-quicklink)
 
-## Installation
-
-```sh
-git clone https://api.glitch.com/git/anton-karlovskiy-quicklink-news
-npm install
-npm start
-npm run build
-```
+The unoptimized counterpart (no Quicklink) is at
+https://getquick.link/demos/mini-ecomm/, with source at
+[`site/src/demos/mini-ecomm`](../../site/src/demos/mini-ecomm). Use them
+side-by-side to compare navigation behavior.

demos/spa/README.md

@@ -1,18 +1,15 @@
-# Demo: Quicklink integration for create-react-app
+# Demo: Quicklink with a single-page app
 
-A demo showing how to use Quicklink with in a create-react-app site.
-To integrate your React SPA with Quicklink, follow the steps [here](https://github.com/GoogleChromeLabs/quicklink#single-page-apps-react).
+The original create-react-app Glitch project for this demo is no longer
+available. A self-hosted, framework-free SPA replacement lives on the Quicklink
+site:
 
-## Glitch Source
+- **Live:** https://getquick.link/demos/spa/
+- **Source:** [`site/src/demos/spa`](../../site/src/demos/spa)
 
-- [Link to Glitch App](https://create-react-app-quicklink.glitch.me/)
-- [Link to Project on Glitch](https://glitch.com/~create-react-app-quicklink)
-
-## Installation
-
-```sh
-git clone https://api.glitch.com/git/create-react-app-quicklink
-npm install
-npm start
-npm run build
-```
+The replacement uses a small hand-rolled hash router with one ES-module chunk
+per route. Quicklink is configured with an `hrefFn` that maps each link to its
+chunk URL, so prefetching grabs the route's JavaScript instead of an HTML
+document. The same pattern works in any SPA - see the
+[Single-page apps section](https://github.com/GoogleChromeLabs/quicklink#single-page-apps-react)
+of the main README for the React variant.

site/.eleventy.js

@@ -64,6 +64,7 @@ module.exports = eleventyConfig => {
   eleventyConfig.addPassthroughCopy('src/assets/images');
   eleventyConfig.addPassthroughCopy('src/assets/js');
   eleventyConfig.addPassthroughCopy('src/site.webmanifest');
+  eleventyConfig.addPassthroughCopy('src/demos');
 
   eleventyConfig.addNunjucksFilter('markdown', string => {
     const md = new markdownIt();

site/.eleventyignore

@@ -0,0 +1 @@
+src/demos

site/src/demo.njk

@@ -31,7 +31,7 @@ The following waterfall shows a typical navigation for a site without Quicklink
 
 To try the demo:
 
-1. Open the [unoptimized site](https://mini-ecomm.glitch.me/) in Chrome.
+1. Open the [unoptimized site](/demos/mini-ecomm/) in Chrome.
 1. Open **DevTools** and go to the **Network panel** to simulate a **Fast 3G** Connection.
 1. Pick **Galaxy S5** as a simulated device.
 1. Make sure **Disable cache** is not checked.
@@ -45,7 +45,7 @@ To try the demo:
 
 Now, measure performance on the same site, that uses Quicklink:
 
-1. Open the [optimized site](https://mini-ecomm-quicklink.glitch.me/) in Chrome.
+1. Open the [optimized site](/demos/mini-ecomm-quicklink/) in Chrome.
 1. Open **DevTools** and go to the **Network panel** to simulate a **Fast 3G** Connection.
 1. Pick **Galaxy S5** as a simulated device.
 1. Make sure **Disable cache** is not checked.
@@ -87,7 +87,7 @@ Quicklink 2.0 includes support for React-based single-page-apps. This has been c
 
 To try the demo:
 
-1. Open the [optimized site](https://create-react-app-quicklink.glitch.me/) in Chrome.
+1. Open the [SPA demo](/demos/spa/) in Chrome.
 1. Open DevTools and go to the **Network** panel to simulate a **Fast 3G** Connection.
 1. Pick **Galaxy S5** as a simulated device.
 1. Make sure **Disable cache** is not checked.

site/src/demos/mini-ecomm-quicklink/index.html

@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Mini Ecomm - Quicklink demo (with prefetching)</title>
+<meta name="description" content="Demo store for measuring Quicklink - this version uses Quicklink to prefetch in-viewport product links during idle time.">
+<meta name="robots" content="noindex">
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<header>
+  <a href="./">Mini Ecomm</a>
+  <span class="badge">prefetching with Quicklink</span>
+</header>
+<main>
+  <h1>New arrivals</h1>
+  <p class="lede">Open DevTools → Network and watch in-viewport product links being prefetched at <code>Lowest</code> priority by <code>quicklink</code>. Compare with the <a href="../mini-ecomm/">unoptimized version</a>.</p>
+  <div class="grid">
+    <a class="card" href="product/1.html">
+      <div class="thumb thumb-1">A</div>
+      <div class="meta">
+        <p class="title">Aurora Backpack</p>
+        <p class="subtitle">Travel-ready 30L pack</p>
+        <p class="price">$129</p>
+      </div>
+    </a>
+    <a class="card" href="product/2.html">
+      <div class="thumb thumb-2">B</div>
+      <div class="meta">
+        <p class="title">Beacon Sunglasses</p>
+        <p class="subtitle">Polarized aviators</p>
+        <p class="price">$89</p>
+      </div>
+    </a>
+    <a class="card" href="product/3.html">
+      <div class="thumb thumb-3">C</div>
+      <div class="meta">
+        <p class="title">Cascade Sneakers</p>
+        <p class="subtitle">All-day running shoe</p>
+        <p class="price">$145</p>
+      </div>
+    </a>
+    <a class="card" href="product/4.html">
+      <div class="thumb thumb-4">H</div>
+      <div class="meta">
+        <p class="title">Halcyon Watch</p>
+        <p class="subtitle">Automatic dive watch</p>
+        <p class="price">$499</p>
+      </div>
+    </a>
+    <a class="card" href="product/5.html">
+      <div class="thumb thumb-5">M</div>
+      <div class="meta">
+        <p class="title">Meridian Wallet</p>
+        <p class="subtitle">Slim leather bifold</p>
+        <p class="price">$59</p>
+      </div>
+    </a>
+    <a class="card" href="product/6.html">
+      <div class="thumb thumb-6">N</div>
+      <div class="meta">
+        <p class="title">Nimbus Hoodie</p>
+        <p class="subtitle">Cloud-soft fleece</p>
+        <p class="price">$79</p>
+      </div>
+    </a>
+    <a class="card" href="product/7.html">
+      <div class="thumb thumb-7">S</div>
+      <div class="meta">
+        <p class="title">Solstice Cap</p>
+        <p class="subtitle">Five-panel canvas cap</p>
+        <p class="price">$35</p>
+      </div>
+    </a>
+    <a class="card" href="product/8.html">
+      <div class="thumb thumb-8">V</div>
+      <div class="meta">
+        <p class="title">Vesper Headphones</p>
+        <p class="subtitle">Active noise cancelling</p>
+        <p class="price">$299</p>
+      </div>
+    </a>
+  </div>
+</main>
+<script defer src="https://cdn.jsdelivr.net/npm/quicklink@3/dist/quicklink.umd.js"></script>
+<script>
+  window.addEventListener('load', () => {
+    quicklink.listen();
+  });
+</script>
+</body>
+</html>

site/src/demos/mini-ecomm-quicklink/product/1.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Aurora Backpack - Mini Ecomm</title>
+<meta name="robots" content="noindex">
+<link rel="stylesheet" href="../style.css">
+</head>
+<body>
+<header>
+  <a href="../">Mini Ecomm</a>
+  <span class="badge">prefetching with Quicklink</span>
+</header>
+<main>
+  <a class="back" href="../">← Back to listing</a>
+  <article class="product">
+    <div class="hero thumb-1">A</div>
+    <div>
+      <h1>Aurora Backpack</h1>
+      <p class="price-tag">$129</p>
+      <p class="description">A 30-liter daily commuter built for laptops up to 16″, with a weatherproof outer shell and a magnetic-strap closure. Padded shoulder straps distribute weight across long days, and the back panel has a luggage pass-through for travel.</p>
+      <ul class="specs">
+        <li><span>Capacity</span><span>30 L</span></li>
+        <li><span>Material</span><span>1000D recycled nylon</span></li>
+        <li><span>Weight</span><span>1.1 kg</span></li>
+        <li><span>Warranty</span><span>Lifetime</span></li>
+      </ul>
+      <a class="buy" href="#">Add to cart</a>
+    </div>
+  </article>
+</main>
+</body>
+</html>

site/src/demos/mini-ecomm-quicklink/product/2.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Beacon Sunglasses - Mini Ecomm</title>
+<meta name="robots" content="noindex">
+<link rel="stylesheet" href="../style.css">
+</head>
+<body>
+<header>
+  <a href="../">Mini Ecomm</a>
+  <span class="badge">prefetching with Quicklink</span>
+</header>
+<main>
+  <a class="back" href="../">← Back to listing</a>
+  <article class="product">
+    <div class="hero thumb-2">B</div>
+    <div>
+      <h1>Beacon Sunglasses</h1>
+      <p class="price-tag">$89</p>
+      <p class="description">Classic aviators with a polarized polycarbonate lens that knocks down glare on roads and water. Spring-hinge titanium temples flex to any face shape, and the lenses block 100% of UVA/UVB.</p>
+      <ul class="specs">
+        <li><span>Lens</span><span>Polarized CR-39</span></li>
+        <li><span>Frame</span><span>Titanium</span></li>
+        <li><span>Weight</span><span>28 g</span></li>
+        <li><span>Includes</span><span>Hard case + cloth</span></li>
+      </ul>
+      <a class="buy" href="#">Add to cart</a>
+    </div>
+  </article>
+</main>
+</body>
+</html>

site/src/demos/mini-ecomm-quicklink/product/3.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Cascade Sneakers - Mini Ecomm</title>
+<meta name="robots" content="noindex">
+<link rel="stylesheet" href="../style.css">
+</head>
+<body>
+<header>
+  <a href="../">Mini Ecomm</a>
+  <span class="badge">prefetching with Quicklink</span>
+</header>
+<main>
+  <a class="back" href="../">← Back to listing</a>
+  <article class="product">
+    <div class="hero thumb-3">C</div>
+    <div>
+      <h1>Cascade Sneakers</h1>
+      <p class="price-tag">$145</p>
+      <p class="description">A breathable knit upper sits on a responsive foam midsole with a reinforced heel cradle. Tuned for daily mileage and long-distance comfort, with a rubberized outsole that grips dry and wet pavement.</p>
+      <ul class="specs">
+        <li><span>Drop</span><span>8 mm</span></li>
+        <li><span>Weight</span><span>235 g (US 9)</span></li>
+        <li><span>Upper</span><span>Engineered knit</span></li>
+        <li><span>Outsole</span><span>Carbon rubber</span></li>
+      </ul>
+      <a class="buy" href="#">Add to cart</a>
+    </div>
+  </article>
+</main>
+</body>
+</html>