From d9fa4537845eac9f4e148384a77a2dbc2fad3d97 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sat, 6 Aug 2022 22:10:50 +0100
Subject: [PATCH] feat: full static integration (#727)

---
 nuxt.config.ts                                |  5 ++
 src/components/GithubRepos.vue                | 53 +++++++++++++------
 src/components/PrefetchLink.ts                |  9 +---
 src/composables/github.ts                     | 13 -----
 src/composables/prefetch.ts                   | 46 +++++++++-------
 src/{public => content}/talks.json            |  0
 src/modules/critters.ts                       |  7 ++-
 src/modules/full-static/index.ts              | 30 +++++++++++
 .../full-static/runtime/plugin.client.ts      | 30 +++++++++++
 .../full-static/runtime/plugin.server.ts      | 30 +++++++++++
 10 files changed, 167 insertions(+), 56 deletions(-)
 delete mode 100644 src/composables/github.ts
 rename src/{public => content}/talks.json (100%)
 create mode 100644 src/modules/full-static/index.ts
 create mode 100644 src/modules/full-static/runtime/plugin.client.ts
 create mode 100644 src/modules/full-static/runtime/plugin.server.ts

diff --git a/nuxt.config.ts b/nuxt.config.ts
index bb6dfab3..7dec3551 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,6 +1,10 @@
 import { defineNuxtConfig } from 'nuxt'
 
 export default defineNuxtConfig({
+  runtimeConfig: {
+    githubToken: '',
+  },
+
   srcDir: 'src',
 
   build: {
@@ -91,5 +95,6 @@ export default defineNuxtConfig({
     '~/modules/critters',
     '~/modules/components-chunk',
     '~/modules/sitemap',
+    '~/modules/full-static/index',
   ],
 })
diff --git a/src/components/GithubRepos.vue b/src/components/GithubRepos.vue
index df4e2806..18106994 100644
--- a/src/components/GithubRepos.vue
+++ b/src/components/GithubRepos.vue
@@ -13,16 +13,16 @@
         <header>
           {{ repo }}
           <dl>
-            <template v-if="stars.value">
+            <template v-if="stars">
               <dt>Stars</dt>
               <dd>
-                {{ stars.value }}
+                {{ stars }}
               </dd>
             </template>
-            <template v-if="language.value">
+            <template v-if="language">
               <dt>Language</dt>
               <dd>
-                {{ language.value }}
+                {{ language }}
               </dd>
             </template>
           </dl>
@@ -42,19 +42,38 @@ useHead({
     },
   ],
 })
-const repos = [
-  'nuxt/framework',
-  'nuxt/nuxt.js',
-  // 'nuxt/vercel-builder',
-  'danielroe/magic-regexp',
-  'danielroe/typed-vuex',
-  // 'nuxt-community/composition-api',
-  // 'nuxt-community/sanity-module',
-  // 'danielroe/sanity-typed-queries',
-].map(repo => ({
-  repo,
-  ...useGithub(repo),
-}))
+const config = useRuntimeConfig()
+const { data: repos } = await useAsyncData('repos', () => {
+  if (process.client) return
+  const repos = [
+    'nuxt/framework',
+    'nuxt/nuxt.js',
+    // 'nuxt/vercel-builder',
+    'danielroe/magic-regexp',
+    'danielroe/typed-vuex',
+    // 'nuxt-community/composition-api',
+    // 'nuxt-community/sanity-module',
+    // 'danielroe/sanity-typed-queries',
+  ]
+  return Promise.all(
+    repos.map(async repo => {
+      const { stargazers_count: stars, language } = await $fetch(
+        `https://api.github.com/repos/${repo}`,
+        {
+          headers: {
+            Accept: 'application/vnd.github.v3+json',
+            Authorization: `Bearer ${config.githubToken}`,
+          },
+        }
+      )
+      return {
+        repo,
+        stars,
+        language,
+      }
+    })
+  )
+})
 </script>
 
 <style module>
diff --git a/src/components/PrefetchLink.ts b/src/components/PrefetchLink.ts
index 40ecb9da..6f751ce9 100644
--- a/src/components/PrefetchLink.ts
+++ b/src/components/PrefetchLink.ts
@@ -190,6 +190,7 @@ export function defineNuxtLink(options: NuxtLinkOptions) {
     },
     setup(props, { slots }) {
       const router = useRouter() as Router | undefined
+      const nuxtApp = useNuxtApp()
 
       const nodeRef = ref<HTMLElement>(null)
       const setNodeRef = (ref: object | null) => {
@@ -263,13 +264,7 @@ export function defineNuxtLink(options: NuxtLinkOptions) {
         })
 
         // Add API prefetches
-        promises.push(
-          usePageData(
-            typeof to.value === 'string'
-              ? to.value
-              : router.resolve(to.value).path
-          )
-        )
+        promises.push(nuxtApp.$static.prefetch(to.value))
 
         Promise.all(promises).then(() => {
           prefetched.value = true
diff --git a/src/composables/github.ts b/src/composables/github.ts
deleted file mode 100644
index 732c6fa2..00000000
--- a/src/composables/github.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export function useGithub(repo: string) {
-  const { data: response } = useFetch(`https://api.github.com/repos/${repo}`, {
-    key: repo,
-    lazy: true,
-  })
-
-  const stars = computed(
-    () => response.value && response.value.stargazers_count
-  )
-  const language = computed(() => response.value && response.value.language)
-
-  return { stars, language }
-}
diff --git a/src/composables/prefetch.ts b/src/composables/prefetch.ts
index 8ed1c22c..a5a00b02 100644
--- a/src/composables/prefetch.ts
+++ b/src/composables/prefetch.ts
@@ -2,6 +2,7 @@ const normalizeVercelResponse = async (r: unknown) =>
   process.client && r instanceof Blob ? JSON.parse(await r.text()) : r
 
 export const usePageData = (path = useRoute().path) => {
+  path = path.replace(/(index)?\.json$/, '')
   switch (path) {
     case '/':
       return useAsyncHome()
@@ -19,25 +20,32 @@ export const usePageData = (path = useRoute().path) => {
 }
 
 const useAsyncHome = () =>
-  useAsyncData('home', () =>
-    queryContent('/')
-      .only(['title', 'type', 'body'])
-      .findOne()
-      .then(normalizeVercelResponse)
+  useAsyncData(
+    'home',
+    () =>
+      process.server &&
+      queryContent('/')
+        .only(['title', 'type', 'body'])
+        .findOne()
+        .then(normalizeVercelResponse)
   )
 
 const useAsyncUses = () =>
-  useAsyncData('uses', () =>
-    queryContent('/uses')
-      .only(['title', 'type', 'body'])
-      .findOne()
-      .then(normalizeVercelResponse)
+  useAsyncData(
+    'uses',
+    () =>
+      process.server &&
+      queryContent('/uses')
+        .only(['title', 'type', 'body'])
+        .findOne()
+        .then(normalizeVercelResponse)
   )
 
 const useAsyncBlogIndex = () =>
   useAsyncData(
     'blog',
     () =>
+      process.server &&
       queryContent('/blog')
         .only(['title', 'date', '_path'])
         .find()
@@ -72,9 +80,8 @@ const useAsyncTalks = () =>
   useAsyncData(
     'talks',
     () =>
-      (process.server
-        ? import('../public/talks.json').then(r => r.default)
-        : $fetch('/talks.json')
+      (
+        process.server && import('../content/talks.json').then(r => r.default)
       ).then(async r =>
         process.client && r instanceof Blob ? JSON.parse(await r.text()) : r
       ) as unknown as Promise<Talk[]>,
@@ -92,9 +99,12 @@ const useAsyncTalks = () =>
   )
 
 const useAsyncBlogArticle = (path: string) =>
-  useAsyncData(path, () =>
-    queryContent(path)
-      .only(['title', 'type', 'body', 'date', 'tags'])
-      .findOne()
-      .then(normalizeVercelResponse)
+  useAsyncData(
+    path,
+    () =>
+      process.server &&
+      queryContent(path)
+        .only(['title', 'type', 'body', 'date', 'tags'])
+        .findOne()
+        .then(normalizeVercelResponse)
   )
diff --git a/src/public/talks.json b/src/content/talks.json
similarity index 100%
rename from src/public/talks.json
rename to src/content/talks.json
diff --git a/src/modules/critters.ts b/src/modules/critters.ts
index dc53ccac..60191643 100644
--- a/src/modules/critters.ts
+++ b/src/modules/critters.ts
@@ -27,7 +27,12 @@ export default defineNuxtModule<ModuleOptions>({
         ...options.config,
       })
       nitro.hooks.hook('prerender:generate', async route => {
-        if (!route.contents || !route.fileName.endsWith('.html')) return
+        if (
+          !route.contents ||
+          !route.fileName.endsWith('.html') ||
+          route.route.endsWith('.json')
+        )
+          return
         route.contents = await critters.process(route.contents)
       })
     })
diff --git a/src/modules/full-static/index.ts b/src/modules/full-static/index.ts
new file mode 100644
index 00000000..b53aec3f
--- /dev/null
+++ b/src/modules/full-static/index.ts
@@ -0,0 +1,30 @@
+import { fileURLToPath } from 'url'
+import { addPlugin, defineNuxtModule, useNuxt } from '@nuxt/kit'
+import { join } from 'pathe'
+import { createRegExp, exactly } from 'magic-regexp'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'full-static',
+  },
+  setup() {
+    const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
+
+    addPlugin({
+      src: join(runtimeDir, 'plugin.server.ts'),
+      mode: 'server',
+    })
+    addPlugin({
+      src: join(runtimeDir, 'plugin.client.ts'),
+      mode: 'client',
+    })
+
+    useNuxt().hook('nitro:init', nitro => {
+      nitro.hooks.hook('prerender:generate', route => {
+        route.fileName = route.fileName.replace(JSON_SUFFIX_RE, '.json')
+      })
+    })
+  },
+})
+
+const JSON_SUFFIX_RE = createRegExp(exactly('.json/index.html'))
diff --git a/src/modules/full-static/runtime/plugin.client.ts b/src/modules/full-static/runtime/plugin.client.ts
new file mode 100644
index 00000000..3899c2b3
--- /dev/null
+++ b/src/modules/full-static/runtime/plugin.client.ts
@@ -0,0 +1,30 @@
+import type { NuxtApp } from '#app'
+import type { RouteLocationRaw } from 'vue-router'
+
+type StaticData = Pick<NuxtApp['payload'], 'data' | 'state'>
+
+export default defineNuxtPlugin(nuxtApp => {
+  const router = useRouter()
+  const resolve = (route: string | RouteLocationRaw) =>
+    typeof route === 'string' ? route : router.resolve(route).path
+
+  const s = {
+    prefetched: new Set<string>(),
+    prefetch: async (route: string | RouteLocationRaw) => {
+      const path = resolve(route)
+
+      if (!s.prefetched.has(path)) {
+        const name = path === '/' ? '/index' : path
+        const { data, state } = await $fetch<StaticData>(`${name}.json`)
+        Object.assign(nuxtApp.payload.data, data)
+        for (const item in state) {
+          nuxtApp.payload.state[item] ??= state[item]
+        }
+      }
+    },
+  }
+
+  return {
+    provide: { static: s },
+  }
+})
diff --git a/src/modules/full-static/runtime/plugin.server.ts b/src/modules/full-static/runtime/plugin.server.ts
new file mode 100644
index 00000000..51f0ee77
--- /dev/null
+++ b/src/modules/full-static/runtime/plugin.server.ts
@@ -0,0 +1,30 @@
+export default defineNuxtPlugin(nuxtApp => {
+  const router = useRouter()
+
+  router.getRoutes().forEach(route => {
+    router.addRoute({
+      path: (route.path === '/' ? '/index' : route.path) + '.json',
+      components: route.components,
+    })
+  })
+
+  nuxtApp.hook('app:rendered', ctx => {
+    if (ctx.ssrContext.url.endsWith('.json')) {
+      const res = ctx.ssrContext.res
+      res.setHeader('Content-Type', 'application/json')
+      res.end(
+        JSON.stringify({
+          data: nuxtApp.payload.data,
+          state: {
+            ...nuxtApp.payload.state,
+            '$scolor-mode': undefined,
+            $serror: undefined,
+          },
+        })
+      )
+    } else {
+      const url = ctx.ssrContext.url === '/' ? '/index' : ctx.ssrContext.url
+      ctx.html.head.push(`<!-- <link rel="prefetch" href="${url}.json"> -->`)
+    }
+  })
+})
-- 
2.51.2