bundle website db on build time (nuxt#221)

.github/workflows/ci.yml

@@ -63,6 +63,6 @@ jobs:
         run: |
           echo "//registry.npmjs.org/:_authToken=$NPM_AUTH_TOKEN" >> ~/.npmrc
           echo "//registry.yarnpkg.com/:_authToken=$NPM_AUTH_TOKEN" >> ~/.npmrc
-          yarn release || true
+          yarn release
         env:
           NPM_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}

.gitignore

@@ -10,4 +10,5 @@ sw.js
 cache
 .vercel_build_output
 .output
-package-lock.json
+package-lock.json
+npm/modules.json

README.md

@@ -20,8 +20,8 @@ Metadata of nuxt modules are maintained in [yml](https://en.wikipedia.org/wiki/Y
 
 Compiled JSON data is available from following CDNs:
 
-- **jsdelivr:**: https://cdn.jsdelivr.net/npm/@nuxt/modules@latest/dist/modules.json
-- **unpkg:** https://unpkg.com/@nuxt/modules@latest/dist/modules.json
+- **jsdelivr:**: https://cdn.jsdelivr.net/npm/@nuxt/modules@latest/modules.json
+- **unpkg:** https://unpkg.com/@nuxt/modules@latest/modules.json
 
 ### Using npm package
 
@@ -81,7 +81,7 @@ To sync with a branch different than `master`, suffix the repo with `#repo-branc
 yarn sync
 ```
 
-### Generate `dist/module.json`
+### Generate `npm/modules.json`
 
 ```sh
 yarn build
@@ -90,7 +90,6 @@ yarn build
 ## Website development
 
 - Clone repository
-- Change working directory to website using `cd website`
 - Install website depenedencies using `npx yarn install`
 
 Start development:
@@ -103,19 +102,6 @@ Then visit http://localhost:3000
 
 In the development, the npm downloads and GitHub stars will be mocked unless setting `USE_NUXT_API` variable.
 
-### Production build
-
-
-```sh
-yarn build
-```
-
-Start the production website:
-
-```sh
-yarn start
-```
-
 ## License
 
 [MIT](./LICENSE) - Made by Nuxt Team

npm/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@nuxt/modules",
+  "version": "0.5.0",
+  "license": "MIT",
+  "main": "./modules.json"
+}

package.json

@@ -1,16 +1,15 @@
 {
-  "name": "@nuxt/modules",
-  "version": "0.5.0",
-  "license": "MIT",
-  "main": "dist/modules.json",
-  "files": [
-    "dist"
+  "private": true,
+  "workspaces": [
+    "npm",
+    "website"
   ],
   "scripts": {
-    "build": "yarn sync && yarn cli build",
+    "build": "yarn cli build",
     "cli": "jiti ./scripts/cli",
+    "dev": "cd website && yarn dev",
     "lint": "eslint --ext .vue,.ts .",
-    "release": "yarn cli version && npm publish",
+    "release": "yarn cli version && cd npm && npm publish",
     "sync": "yarn cli sync",
     "test": "yarn lint && yarn sync"
   },

scripts/modules.ts

@@ -4,7 +4,7 @@ import * as yml from 'js-yaml'
 import { globby } from 'globby'
 import defu from 'defu'
 import { $fetch } from 'ohmyfetch'
-import categories from '../lib/categories.json'
+import categories from '../npm/categories.json'
 import { fetchGithubPkg, modulesDir, distDir, distFile } from './utils'
 
 export async function sync (name, repo?: string, isNew: boolean = false) {

scripts/utils.ts

@@ -2,7 +2,7 @@ import { resolve } from 'path'
 import { $fetch } from 'ohmyfetch'
 export const rootDir = resolve(__dirname, '..')
 export const modulesDir = resolve(rootDir, 'modules')
-export const distDir = resolve(rootDir, 'dist')
+export const distDir = resolve(rootDir, 'npm')
 export const distFile = resolve(distDir, 'modules.json')
 
 export function fetchPKG (name) {

scripts/version.ts

@@ -7,7 +7,7 @@ import { build } from './modules'
 export async function version () {
   await build()
 
-  const pkgFile = path.resolve(rootDir, 'package.json')
+  const pkgFile = path.resolve(rootDir, 'npm/package.json')
   const pkg = JSON.parse(await fsp.readFile(pkgFile, 'utf8'))
 
   const hash = hasha(await fsp.readFile(distFile, 'utf8')).substr(0, 6)

website/components/TheSearch.vue

@@ -10,23 +10,22 @@
     </div>
     <slot />
     <button aria-label="Toggle theme" class="!outline-none" @click="toggleDarkMode()">
-      <IconMoon v-if="$colorMode.value === 'dark'" />
-      <IconSun v-else-if="$colorMode.value === 'light'" />
+      <IconMoon v-if="$colorMode.preference === 'dark'" />
+      <IconSun v-else-if="$colorMode.preference === 'light'" />
       <IconSystem v-else aria-label="System theme" />
     </button>
   </div>
 </template>
 <script>
+const toggleNext = {
+  system: 'dark', // TODO
+  dark: 'light',
+  light: 'dark'
+}
 export default {
   methods: {
     toggleDarkMode () {
-      if (this.$colorMode.preference === 'system') {
-        this.$colorMode.preference = 'dark'
-      } else if (this.$colorMode.preference === 'dark') {
-        this.$colorMode.preference = 'light'
-      } else {
-        this.$colorMode.preference = 'system'
-      }
+      this.$colorMode.preference = toggleNext[this.$colorMode.preference] || 'system'
     }
   }
 }

website/package.json

@@ -1,8 +1,11 @@
 {
   "private": true,
+  "name": "nuxt-modules-website",
+  "version": "0.0.0",
   "scripts": {
-    "build": "nuxi build",
-    "dev": "nuxi dev",
+    "build": "yarn build:npm && nuxi build",
+    "dev": "yarn build:npm && nuxi dev",
+    "build:npm": "cd .. && yarn build",
     "start": "node .output/server/index.mjs"
   },
   "resolutions": {
@@ -11,14 +14,12 @@
   },
   "devDependencies": {
     "@nuxt/bridge": "npm:@nuxt/bridge-edge",
-    "@nuxt/image": "^0.6.0",
     "@nuxt/kit-edge": "npm:@nuxt/kit-edge@latest",
     "@nuxtjs/color-mode": "^2.1.1",
     "@nuxtjs/google-fonts": "^1.3.0",
     "@nuxtjs/html-validator": "^0.6.0",
     "@nuxtjs/pwa": "^3.3.5",
     "fuse.js": "^6.4.6",
-    "ipx": "^0.9.1",
     "millify": "^4.0.0",
     "nuxt-edge": "^2.16.0-27277936.ab1c6cb4",
     "nuxt-windicss": "^2.0.12",

website/pages/index.vue

@@ -532,7 +532,7 @@ export default {
       }
     },
     focusSearchInput () {
-      this.$refs.searchModule.focus()
+      this.$refs.searchModule?.focus()
     }
   }
 }

website/server/api/categories.ts

@@ -1,8 +1,6 @@
 
-const modulesCDN = 'https://cdn.jsdelivr.net/gh/nuxt/modules@main/lib/categories.json'
-
 export default async () => {
-  const categories = await $fetch(modulesCDN) as any[]
+  const categories = await import('../../../npm/categories.json').then(r => r.default || r)
   return {
     categories
   }

website/server/api/modules.ts

@@ -1,7 +1,6 @@
-const modulesCDN = 'https://cdn.jsdelivr.net/npm/@nuxt/modules@latest/dist/modules.json'
 
 export default async () => {
-  const _modules = await $fetch(modulesCDN) as any[]
+  const _modules = await import('../../../npm/modules.json').then(r => r.default || r)
   const modules = await Promise.all(_modules.map(module => fetchModuleStats(module)))
   return {
     modules

website/server/middleware/swr.ts

@@ -1,7 +1,4 @@
-export default (req, res, next) => {
-  if (req.method.toUpperCase() !== 'GET') {
-    return next()
-  }
+export default (_req, res, next) => {
   res.setHeader('Cache-Control', 's-maxage=600, stale-while-revalidate')
   next()
 }