Replace dead Glitch demos with self-hosted equivalents (#480)

* site: pass through src/demos for self-hosted demo pages

Adds an addPassthroughCopy entry plus an .eleventyignore line so the new
src/demos tree is copied verbatim into the build output without going
through Nunjucks templating.

* site: add self-hosted mini-ecomm demo

A small two-variant store with a listing page and eight product pages,
mirrored under mini-ecomm/ (no prefetching) and mini-ecomm-quicklink/
(quicklink.listen() loaded from the jsdelivr UMD bundle).

Replaces the now-defunct mini-ecomm.glitch.me and
mini-ecomm-quicklink.glitch.me apps that the demo and measure pages
previously linked to.

* site: add self-hosted SPA demo with route chunk prefetching

A tiny vanilla-JS single-page app with a hand-rolled hash router and one
ES-module chunk per route. Quicklink is configured with an hrefFn that
maps each nav link to its chunk URL, so prefetching grabs the route's
JavaScript instead of an HTML document.

Uses the published quicklink.mjs from jsdelivr — no build step, runs on
any static host. Replaces the create-react-app-quicklink.glitch.me demo
referenced from demo.njk.

* site: point demo and measure pages at self-hosted demos

Replaces the dead mini-ecomm.glitch.me, mini-ecomm-quicklink.glitch.me
and create-react-app-quicklink.glitch.me URLs with /demos/mini-ecomm/,
/demos/mini-ecomm-quicklink/ and /demos/spa/. The WebPageTest scripting
examples now use absolute getquick.link URLs and select the first .card
anchor on the listing page.

Fixes #469.

* docs: drop dead Glitch links from READMEs

Glitch shut down, so the news, news-workbox and spa demo READMEs (and
the Demo section of the main README) all pointed at projects that no
longer exist. Updates them to point at the self-hosted replacements
under getquick.link/demos/, and keeps a short historical note in each
legacy README so links to those folders still make sense.

* lint: treat site/src/demos as ES modules

The new SPA demo files use top-level import/export and a dynamic
import() for route chunks, so eslint trips on them under the default
sourceType: script and ecmaVersion: 2017. Adds a scoped override that
parses site/src/demos as modules at ES2020, drops the strict-mode
requirement (modules are implicitly strict), and disables max-len for
the inline HTML template strings in the route chunks.

* Drop emdashes

---------

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

Author: addyosmani

.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>