From fe41d4b75b43a5a4255d9656384d485c45cf2cc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@chopin.io>
Date: Mon, 20 Aug 2018 14:59:08 +0200
Subject: [PATCH] example: Add routes-meta example

---
 examples/routes-meta/layouts/default.vue   | 67 ++++++++++++++++++++++
 examples/routes-meta/middleware/theme.js   |  5 ++
 examples/routes-meta/nuxt.config.js        |  6 ++
 examples/routes-meta/package.json          | 12 ++++
 examples/routes-meta/pages/about.vue       | 32 +++++++++++
 examples/routes-meta/pages/index.vue       | 19 ++++++
 examples/routes-meta/pages/parent.vue      | 16 ++++++
 examples/routes-meta/pages/parent/blue.vue | 17 ++++++
 examples/routes-meta/store/index.js        |  9 +++
 9 files changed, 183 insertions(+)
 create mode 100644 examples/routes-meta/layouts/default.vue
 create mode 100644 examples/routes-meta/middleware/theme.js
 create mode 100644 examples/routes-meta/nuxt.config.js
 create mode 100644 examples/routes-meta/package.json
 create mode 100644 examples/routes-meta/pages/about.vue
 create mode 100644 examples/routes-meta/pages/index.vue
 create mode 100644 examples/routes-meta/pages/parent.vue
 create mode 100644 examples/routes-meta/pages/parent/blue.vue
 create mode 100644 examples/routes-meta/store/index.js

diff --git a/examples/routes-meta/layouts/default.vue b/examples/routes-meta/layouts/default.vue
new file mode 100644
index 0000000000..5012714058
--- /dev/null
+++ b/examples/routes-meta/layouts/default.vue
@@ -0,0 +1,67 @@
+<template>
+  <div :class="$store.state.theme" class="theme">
+    <div class="nav horizontal-align">
+      <nuxt-link class="nav-item" to="/">Home</nuxt-link>
+      <nuxt-link class="nav-item" to="/about">About</nuxt-link>
+      <nuxt-link class="nav-item" to="/parent">Parent page</nuxt-link>
+    </div>
+    <nuxt class="container" />
+  </div>
+</template>
+
+<style>
+body,
+html {
+  padding: 0;
+  margin: 0;
+  min-height: 100vh;
+}
+.nav-item {
+  text-decoration: none;
+  font-size: 1.2em;
+}
+.theme {
+  min-height: 100vh;
+  padding-top: 2rem;
+}
+/*
+** Light theme
+*/
+.theme.light {
+  background: #f5f5f5;
+  color: #202020;
+}
+.theme.light a {
+  color: #555;
+}
+/*
+** Dark theme
+*/
+.theme.dark {
+  background: #202020;
+  color: #f5f5f5;
+}
+.theme.dark a {
+  color: #eee;
+}
+/*
+** Orange theme
+*/
+.theme.orange {
+  background: #ffc107;
+  color: #795548;
+}
+.theme.orange a {
+  color: #202020;
+}
+/*
+** Blue theme
+*/
+.theme.blue {
+  background: #3f51b5;
+  color: #f5f5f5;
+}
+.theme.blue a {
+  color: #eee;
+}
+</style>
diff --git a/examples/routes-meta/middleware/theme.js b/examples/routes-meta/middleware/theme.js
new file mode 100644
index 0000000000..b2cd3f1759
--- /dev/null
+++ b/examples/routes-meta/middleware/theme.js
@@ -0,0 +1,5 @@
+export default ({ route, app }) => {
+  // Take the last value (latest route child)
+  const theme = route.meta.reduce((theme, meta) => meta.theme || theme, 'light')
+  app.store.commit('SET_THEME', theme)
+}
diff --git a/examples/routes-meta/nuxt.config.js b/examples/routes-meta/nuxt.config.js
new file mode 100644
index 0000000000..e97a8c3a3b
--- /dev/null
+++ b/examples/routes-meta/nuxt.config.js
@@ -0,0 +1,6 @@
+export default {
+  router: {
+    middleware: ['theme']
+  },
+  css: ['wingcss']
+}
diff --git a/examples/routes-meta/package.json b/examples/routes-meta/package.json
new file mode 100644
index 0000000000..f3abf22fa9
--- /dev/null
+++ b/examples/routes-meta/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "example-hello-world",
+  "dependencies": {
+    "nuxt-edge": "latest",
+    "wingcss": "^1.0.0-beta"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  }
+}
diff --git a/examples/routes-meta/pages/about.vue b/examples/routes-meta/pages/about.vue
new file mode 100644
index 0000000000..89b92384f8
--- /dev/null
+++ b/examples/routes-meta/pages/about.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <h1>About</h1>
+    <p> I am the about page and have set in my component:</p>
+    <pre>export default {
+  meta: {
+    theme: 'dark'
+  }
+}</pre>
+  </div>
+</template>
+
+<script>
+export default {
+  meta: {
+    theme: 'dark'
+  }
+}
+</script>
+
+<style scoped>
+pre {
+  padding: 0.2rem 0.5rem;
+  margin: 0 0.2rem;
+  font-size: 90%;
+  background: #f1f1f1;
+  color: #202020;
+  border: 1px solid #e1e1e1;
+  border-radius: 4px;
+  font-family: Consolas, Monaco, Menlo, monospace;
+}
+</style>
diff --git a/examples/routes-meta/pages/index.vue b/examples/routes-meta/pages/index.vue
new file mode 100644
index 0000000000..2e31ae4815
--- /dev/null
+++ b/examples/routes-meta/pages/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <h1>Page with meta</h1>
+    <p>This example is made to illustrate the usafe of
+      <code>meta</code> inside the page components.
+    </p>
+    <p>We have a middleware setup in
+      <code>~/middleware/theme.js</code> used to get which theme has to be applied and commit it to the store.
+    </p>
+    <p>Then, in our layout, we simply use
+      <code>$store.state.theme</code> as a class to change our CSS dynamically.
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/examples/routes-meta/pages/parent.vue b/examples/routes-meta/pages/parent.vue
new file mode 100644
index 0000000000..6258e78f51
--- /dev/null
+++ b/examples/routes-meta/pages/parent.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>Parent</h1>
+    Checkout
+    <nuxt-link to="/parent/blue">Blue page</nuxt-link>
+    <nuxt-child/>
+  </div>
+</template>
+
+<script>
+export default {
+  meta: {
+    theme: 'orange'
+  }
+}
+</script>
diff --git a/examples/routes-meta/pages/parent/blue.vue b/examples/routes-meta/pages/parent/blue.vue
new file mode 100644
index 0000000000..07ea5f6401
--- /dev/null
+++ b/examples/routes-meta/pages/parent/blue.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h3>I am the blue page</h3>
+    <p>I am a child of /parent, and the theme is overwritten by myself!</p>
+    <p>Go back to
+      <nuxt-link to="/parent">Parent</nuxt-link>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  meta: {
+    theme: 'blue'
+  }
+}
+</script>
diff --git a/examples/routes-meta/store/index.js b/examples/routes-meta/store/index.js
new file mode 100644
index 0000000000..651d618645
--- /dev/null
+++ b/examples/routes-meta/store/index.js
@@ -0,0 +1,9 @@
+export const state = () => ({
+  theme: 'light'
+})
+
+export const mutations = {
+  SET_THEME(state, theme) {
+    state.theme = theme
+  }
+}