feat: support layouts (#56)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
2021-02-11 23:55:19 -05:00 · 2021-02-11 23:55:19 -05:00 · 83225032d0
commit 83225032d0
parent 8dae6f96e5
12 changed files with 97 additions and 13 deletions
--- a/package.json
+++ b/package.json
@ -38,6 +38,7 @@
    "vite-plugin-md": "^0.4.2",
    "vite-plugin-pages": "^0.3.0",
    "vite-plugin-pwa": "^0.4.6",
+    "vite-plugin-vue-layouts": "^0.1.0",
    "vite-ssg": "^0.8.4"
  },
  "eslintConfig": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -31,6 +31,7 @@ devDependencies:
  vite-plugin-md: 0.4.2_vite@2.0.0-beta.67
  vite-plugin-pages: 0.3.0_vite@2.0.0-beta.67+vue@3.0.5
  vite-plugin-pwa: 0.4.6
+  vite-plugin-vue-layouts: 0.1.0_vite@2.0.0-beta.67
  vite-ssg: 0.8.4_48c8dc7dae74de0e25414d6bbcdbc5e0
 lockfileVersion: 5.2
 packages:
@ -1608,14 +1609,12 @@ packages:
  /@vue/reactivity/3.0.5:
    dependencies:
      '@vue/shared': 3.0.5
-    dev: false
    resolution:
      integrity: sha512-3xodUE3sEIJgS7ntwUbopIpzzvi7vDAOjVamfb2l+v1FUg0jpd3gf62N2wggJw3fxBMr+QvyxpD+dBoxLsmAjw==
  /@vue/runtime-core/3.0.5:
    dependencies:
      '@vue/reactivity': 3.0.5
      '@vue/shared': 3.0.5
-    dev: false
    resolution:
      integrity: sha512-Cnyi2NqREwOLcTEsIi1DQX1hHtkVj4eGm4hBG7HhokS05DqpK4/80jG6PCCnCH9rIJDB2FqtaODX397210plXg==
  /@vue/runtime-dom/3.0.5:
@ -1623,7 +1622,6 @@ packages:
      '@vue/runtime-core': 3.0.5
      '@vue/shared': 3.0.5
      csstype: 2.6.14
-    dev: false
    resolution:
      integrity: sha512-iilX1KySeIzHHtErT6Y44db1rhWK5tAI0CiJIPr+SJoZ2jbjoOSE6ff/jfIQakchbm1d6jq6VtRVnp5xYdOXKA==
  /@vue/server-renderer/3.0.5_vue@3.0.5:
@ -2195,7 +2193,6 @@ packages:
    resolution:
      integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
  /csstype/2.6.14:
-    dev: false
    resolution:
      integrity: sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A==
  /dashdash/1.14.1:
@ -4583,7 +4580,7 @@ packages:
      request-promise-core: 1.1.4_request@2.88.2
      stealthy-require: 1.1.1
      tough-cookie: 2.5.0
-    deprecated: 'request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142'
+    deprecated: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
    dev: true
    engines:
      node: '>=0.12.0'
@ -4613,7 +4610,7 @@ packages:
      tough-cookie: 2.5.0
      tunnel-agent: 0.6.0
      uuid: 3.4.0
-    deprecated: 'request has been deprecated, see https://github.com/request/request/issues/3142'
+    deprecated: request has been deprecated, see https://github.com/request/request/issues/3142
    dev: true
    engines:
      node: '>= 6'
@ -5371,6 +5368,19 @@ packages:
    dev: true
    resolution:
      integrity: sha512-3LonumSG4EcH9FT61d7wWouHkCmEciy3RPfvt25b835HMx9gb2Dt71t140+85Z5d+uANMSguC3miBnnGzagAMA==
+  /vite-plugin-vue-layouts/0.1.0_vite@2.0.0-beta.67:
+    dependencies:
+      '@vue/compiler-sfc': 3.0.5_vue@3.0.5
+      debug: 4.3.2
+      fast-glob: 3.2.5
+      vite: 2.0.0-beta.67
+      vue: 3.0.5
+      vue-router: 4.0.3_vue@3.0.5
+    dev: true
+    peerDependencies:
+      vite: ^2.0.0-beta.65
+    resolution:
+      integrity: sha512-rAVadLmEA5ti+AyR+JXcYUbZ8MpQTOlNgBdJswNEBvo/gC59BT2d1kSf9/Gw3lEhX8+nGCbl/uVbQcTun1Y3pQ==
  /vite-ssg/0.8.4_48c8dc7dae74de0e25414d6bbcdbc5e0:
    dependencies:
      '@vue/compiler-sfc': 3.0.5_vue@3.0.5
@ -5462,7 +5472,6 @@ packages:
      '@vue/compiler-dom': 3.0.5
      '@vue/runtime-dom': 3.0.5
      '@vue/shared': 3.0.5
-    dev: false
    resolution:
      integrity: sha512-TfaprOmtsAfhQau7WsomXZ8d9op/dkQLNIq8qPV3A0Vxs6GR5E+c1rfJS1SDkXRQj+dFyfnec7+U0Be1huiScg==
  /w3c-hr-time/1.0.2:
@ -5847,6 +5856,7 @@ specifiers:
  vite-plugin-md: ^0.4.2
  vite-plugin-pages: ^0.3.0
  vite-plugin-pwa: ^0.4.6
+  vite-plugin-vue-layouts: ^0.1.0
  vite-ssg: ^0.8.4
  vue: ^3.0.5
  vue-i18n: ^9.0.0-rc.6
--- a/src/App.vue
+++ b/src/App.vue
@ -13,8 +13,5 @@ useHead({
 </script>

 <template>
-  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
-    <router-view />
-    <Footer />
-  </main>
+  <router-view />
 </template>
--- a/src/layouts/404.vue
+++ b/src/layouts/404.vue
@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { t } = useI18n()
+</script>
+
+<template>
+  <main class="px-4 py-10 text-center text-teal-700 dark:text-gray-200">
+    <div>
+      <p class="text-4xl">
+        <carbon-warning class="inline-block" />
+      </p>
+    </div>
+    <router-view />
+    <div>
+      <button
+        class="btn m-3 text-sm mt-8"
+        @click="router.back()"
+      >
+        {{ t('button.back') }}
+      </button>
+    </div>
+  </main>
+</template>
--- a/src/layouts/README.md
+++ b/src/layouts/README.md
@ -0,0 +1,14 @@
+## Layouts
+
+Vue components in this dir are used as layouts.
+
+By default, `default.vue` will be used unless an alternative is specified in the route meta.
+
+With [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) and [`vite-plugin-vue-layouts`](https://github.com/JohnCampionJr/vite-plugin-vue-layouts), you can specify the layout in the page's SFCs like this:
+
+```html
+<route lang="yaml">
+meta:
+  layout: home
+</route>
+```
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@ -0,0 +1,9 @@
+<template>
+  <main class="px-4 py-10 text-center text-teal-700 dark:text-gray-200">
+    <router-view />
+    <Footer />
+    <div class="mt-5 m-auto text-center opacity-25 text-sm">
+      [Default Layout]
+    </div>
+  </main>
+</template>
--- a/src/layouts/home.vue
+++ b/src/layouts/home.vue
@ -0,0 +1,9 @@
+<template>
+  <main class="px-4 py-10 text-center text-teal-700 dark:text-gray-200">
+    <router-view />
+    <Footer />
+    <div class="mt-5 m-auto text-center opacity-25 text-sm">
+      [Home Layout]
+    </div>
+  </main>
+</template>
--- a/src/main.ts
+++ b/src/main.ts
@ -1,8 +1,11 @@
 import './styles/main.postcss'
-import routes from 'pages-generated'
 import { ViteSSG } from 'vite-ssg'
+import generatedRoutes from 'pages-generated'
+import { setupLayouts } from 'layouts-generated'
 import App from './App.vue'

+const routes = setupLayouts(generatedRoutes)
+
 // https://github.com/antfu/vite-ssg
 export const createApp = ViteSSG(
  App,
--- a/src/pages/[...all].vue
+++ b/src/pages/[...all].vue
@ -9,3 +9,8 @@ const { t } = useI18n()
    {{ t('not-found') }}
  </div>
 </template>
+
+<route lang="yaml">
+meta:
+  layout: 404
+</route>
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@ -53,3 +53,8 @@ const { t } = useI18n()
    </div>
  </div>
 </template>
+
+<route lang="yaml">
+meta:
+  layout: home
+</route>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -15,7 +15,8 @@
    "forceConsistentCasingInFileNames": true,
    "types": [
      "vite/client",
-      "vite-plugin-pages/client"
+      "vite-plugin-pages/client",
+      "vite-plugin-vue-layouts/client"
    ],
    "paths": {
      "~/*": ["src/*"]
--- a/vite.config.ts
+++ b/vite.config.ts
@ -2,6 +2,7 @@ import path from 'path'
 import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import Pages from 'vite-plugin-pages'
+import Layouts from 'vite-plugin-vue-layouts'
 import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
 import ViteComponents from 'vite-plugin-components'
 import Markdown from 'vite-plugin-md'
@ -23,6 +24,9 @@ export default defineConfig({
      extensions: ['vue', 'md'],
    }),

+    // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
+    Layouts(),
+
    // https://github.com/antfu/vite-plugin-md
    Markdown({
      wrapperClasses: 'prose prose-sm m-auto text-left',