From 59e5cfea39e7854b1c89bc929a3208c8bfe220c4 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 7 Jan 2022 17:51:01 +0800
Subject: [PATCH] docs: add Stackblitz links for examples (#2559)

---
 examples/README.md         | 17 +++++++++++++++++
 scripts/update-examples.ts | 31 +++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 examples/README.md
 create mode 100644 scripts/update-examples.ts

diff --git a/examples/README.md b/examples/README.md
new file mode 100644
index 0000000000..7ebb407568
--- /dev/null
+++ b/examples/README.md
@@ -0,0 +1,17 @@
+# Nuxt 3 Examples
+
+| Example | Source | Playground |
+|---|---|---|
+| `hello-world` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/hello-world) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/hello-world?file=app.vue&terminal=dev) |
+| `locale` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/locale) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/locale?file=app.vue&terminal=dev) |
+| `module-extend-pages` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/module-extend-pages) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/module-extend-pages?file=app.vue&terminal=dev) |
+| `use-async-data` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/use-async-data) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-async-data?file=app.vue&terminal=dev) |
+| `use-cookie` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/use-cookie) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-cookie?file=app.vue&terminal=dev) |
+| `use-fetch` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/use-fetch) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-fetch?file=app.vue&terminal=dev) |
+| `use-meta` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/use-meta) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-meta?file=app.vue&terminal=dev) |
+| `use-state` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/use-state) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-state?file=app.vue&terminal=dev) |
+| `with-components` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/with-components) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/with-components?file=app.vue&terminal=dev) |
+| `with-composables` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/with-composables) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/with-composables?file=app.vue&terminal=dev) |
+| `with-layouts` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/with-layouts) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/with-layouts?file=app.vue&terminal=dev) |
+| `with-pages` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/with-pages) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/with-pages?file=app.vue&terminal=dev) |
+| `with-wasm` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/with-wasm) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/with-wasm?file=app.vue&terminal=dev) |
diff --git a/scripts/update-examples.ts b/scripts/update-examples.ts
new file mode 100644
index 0000000000..adb757925a
--- /dev/null
+++ b/scripts/update-examples.ts
@@ -0,0 +1,31 @@
+import { fileURLToPath } from 'url'
+import { promises as fs } from 'fs'
+import { resolve } from 'pathe'
+
+async function run () {
+  const examplesRoot = resolve(fileURLToPath(import.meta.url), '../../examples')
+
+  const examples = await fs.readdir(examplesRoot)
+
+  const data = await Promise.all(examples.map(async (name) => {
+    const path = resolve(examplesRoot, name)
+    if ((await fs.lstat(path)).isFile()) {
+      return
+    }
+
+    const github = `https://github.com/nuxt/framework/tree/main/examples/${name}`
+    const stackblitz = `https://stackblitz.com/github/nuxt/framework/tree/main/examples/${name}?file=app.vue&terminal=dev`
+    return {
+      name,
+      path,
+      github,
+      stackblitz
+    }
+  }))
+
+  const table = '| Example | Source | Playground |\n|---|---|---|\n' + data.filter(Boolean).map(i => `| \`${i.name}\` | [GitHub](${i.github}) | [Play Online](${i.stackblitz}) |`).join('\n')
+
+  await fs.writeFile(resolve(examplesRoot, 'README.md'), `# Nuxt 3 Examples\n\n${table}\n`, 'utf-8')
+}
+
+run()