feat: Add introduction content "What is Nuxt.js"?

mvsde · Jan 6, 2019 · 4380d4c · 4380d4c
1 parent b724fc8
commit 4380d4c
Show file tree

Hide file tree

Showing 13 changed files with 223 additions and 47 deletions.
diff --git a/assets/css/scaffolding.css b/assets/css/scaffolding.css
@@ -10,27 +10,32 @@ body {
   font-family: 'Source Sans Pro', sans-serif;
   font-size: 5vmin;
   line-height: 1.4;
-  color: #000;
+  color: rgb(var(--color-text));
 }
 
 pre, code {
   font-family: 'Source Code Pro', monospace;
 }
 
 p {
-  margin: 0 0 1em;
+  margin: 0 0 var(--vertical-space);
 }
 
 a {
-  color: #42b883;
+  color: rgb(var(--color-light));
+  text-decoration: none;
 }
 
 button {
   cursor: pointer;
 }
 
+a:hover {
+  text-decoration: underline;
+}
+
 a:focus,
 button:focus {
-  outline: 0.1em solid rgba(53, 73, 94, 0.5);
+  outline: 0.1em solid rgba(var(--color-dark), 0.5);
   outline-offset: 0.1em;
 }
diff --git a/assets/css/variables.css b/assets/css/variables.css
@@ -0,0 +1,8 @@
+:root {
+  --frame-width: 1.2vmin;
+  --vertical-space: 1em;
+
+  --color-text: 0, 0, 0;
+  --color-light: 66, 184, 131;
+  --color-dark: 53, 73, 94;
+}
diff --git a/assets/img/schema.png b/assets/img/schema.png
diff --git a/components/c-figure.vue b/components/c-figure.vue
@@ -0,0 +1,53 @@
+<template>
+  <figure class="figure">
+    <img
+      class="image"
+      :alt="alt"
+      :src="src"
+    >
+
+    <figcaption
+      v-if="$slots.default"
+      class="caption"
+    >
+      <slot />
+    </figcaption>
+  </figure>
+</template>
+
+<script>
+export default {
+  props: {
+    src: {
+      type: String,
+      required: true
+    },
+    alt: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.figure {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin: 0 0 var(--vertical-space);
+}
+
+.image {
+  flex-grow: 1;
+  object-fit: contain;
+  margin-bottom: calc(var(--vertical-space) / 2);
+}
+
+.caption {
+  font-size: 0.7em;
+  font-style: italic;
+  text-align: center;
+  color: rgb(var(--color-dark));
+}
+</style>
diff --git a/components/c-list.vue b/components/c-list.vue
@@ -27,7 +27,7 @@ export default {
 
 <style scoped>
 .list {
-  margin: 0 0 1em;
+  margin: 0 0 var(--vertical-space);
   padding-left: 1em;
 }
 </style>
diff --git a/components/c-main.vue b/components/c-main.vue
@@ -27,27 +27,35 @@ export default {
 
 <style scoped>
 .main {
+  display: grid;
+  grid-template-rows: min-content 1fr;
   min-height: 100vh;
   padding: 4vmin 5vmin;
 
-  border: 1.2vmin solid #42b883;
+  border: var(--frame-width) solid rgb(var(--color-light));
+}
+
+.main > :first-child {
+  margin-top: 0;
+}
+
+.main > :last-child {
+  margin-bottom: 0;
 }
 
 .main--index {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  grid-template-rows: repeat(2, min-content);
+  align-content: center;
 
   color: #fff;
 
-  background: #42b883;
+  background: rgb(var(--color-light));
 }
 
 .header {
-  padding-bottom: 4vmin;
   margin-bottom: 8vmin;
+  padding-bottom: 4vmin;
 
-  border-bottom: 0.4vmin solid rgba(53, 73, 94, 0.2);
+  border-bottom: 0.4vmin solid rgba(var(--color-dark), 0.2);
 }
 </style>
diff --git a/components/c-nav.vue b/components/c-nav.vue
@@ -45,8 +45,8 @@ export default {
 .nav {
   display: flex;
   position: absolute;
-  left: 2vmin;
-  bottom: 2vmin;
+  left: calc(var(--frame-width) * 2);
+  bottom: calc(var(--frame-width) * 2);
 }
 
 .button {
@@ -61,7 +61,7 @@ export default {
   text-decoration: none;
   color: #fff;
 
-  background: #35495e;
+  background: rgb(var(--color-dark));
   border: 0;
 
   opacity: 0.7;

diff --git a/components/c-toc.vue b/components/c-toc.vue
@@ -4,10 +4,7 @@
       v-for="entry in entries"
       :key="entry.link"
     >
-      <nuxt-link
-        class="link"
-        :to="entry.link"
-      >
+      <nuxt-link :to="entry.link">
         {{ entry.title }}
       </nuxt-link>
     </c-list-item>
@@ -32,13 +29,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.link {
-  text-decoration: none;
-}
-
-.link:hover {
-  text-decoration: underline;
-}
-</style>
diff --git a/layouts/error.vue b/layouts/error.vue
@@ -4,20 +4,22 @@
       {{ title }}
     </c-title>
 
-    <p>This slide could not be found. Maybe start at the beginning?</p>
+    <div>
+      <p>This slide could not be found. Maybe start at the beginning?</p>
 
-    <c-list>
-      <c-list-item>
-        <nuxt-link to="/">
-          Introduction to Nuxt.js
-        </nuxt-link>
-      </c-list-item>
-      <c-list-item>
-        <nuxt-link to="/toc">
-          Table of Contents
-        </nuxt-link>
-      </c-list-item>
-    </c-list>
+      <c-list>
+        <c-list-item>
+          <nuxt-link to="/">
+            Introduction to Nuxt.js
+          </nuxt-link>
+        </c-list-item>
+        <c-list-item>
+          <nuxt-link to="/toc">
+            Table of Contents
+          </nuxt-link>
+        </c-list-item>
+      </c-list>
+    </div>
   </c-main>
 </template>
 

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -16,7 +16,7 @@ module.exports = {
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Source+Code+Pro|Source+Sans+Pro:400,700' }
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Source+Code+Pro|Source+Sans+Pro:400,400i,700' }
     ]
   },
 
@@ -25,6 +25,7 @@ module.exports = {
   },
 
   css: [
+    '@/assets/css/variables.css',
     '@/assets/css/scaffolding.css',
     '@/assets/css/transitions.css'
   ],

diff --git a/pages/installation.vue b/pages/installation.vue
@@ -31,7 +31,7 @@ export default {
   },
 
   created () {
-    EventBus.$on('previousSlide', () => this.$router.push('/what-is-nuxt'))
+    EventBus.$on('previousSlide', () => this.$router.push('/what-is-nuxt/schema'))
     EventBus.$on('nextSlide', () => this.$router.push('/folder-structure'))
   },
 

diff --git a/pages/what-is-nuxt/index.vue b/pages/what-is-nuxt/index.vue
@@ -0,0 +1,97 @@
+<template>
+  <c-main>
+    <c-title slot="header">
+      {{ title }}
+    </c-title>
+
+    <c-list>
+      <c-list-item>
+        “Meta framework” for Vue.js
+      </c-list-item>
+
+      <c-list-item>
+        Abstraction for vue-server-renderer
+      </c-list-item>
+
+      <c-list-item>
+        Built-in packages:
+
+        <c-list>
+          <c-list-item>
+            <a
+              href="https://router.vuejs.org"
+              target="_blank"
+              rel="noopener"
+            >
+              Vue Router
+            </a>
+          </c-list-item>
+
+          <c-list-item>
+            <a
+              href="https://vuex.vuejs.org"
+              target="_blank"
+              rel="noopener"
+            >
+              Vuex
+            </a>
+          </c-list-item>
+
+          <c-list-item>
+            <a
+              href="https://github.com/declandewet/vue-meta"
+              target="_blank"
+              rel="noopener"
+            >
+              vue-meta
+            </a>
+          </c-list-item>
+        </c-list>
+      </c-list-item>
+
+      <c-list-item>
+        Bonus feature: Static Site Generator
+      </c-list-item>
+    </c-list>
+  </c-main>
+</template>
+
+<script>
+import CList from '@/components/c-list'
+import CListItem from '@/components/c-list-item'
+import CMain from '@/components/c-main'
+import CTitle from '@/components/c-title'
+
+import EventBus from '@/event-bus'
+
+export default {
+  head () {
+    return {
+      title: this.title
+    }
+  },
+
+  components: {
+    CList,
+    CListItem,
+    CMain,
+    CTitle
+  },
+
+  data () {
+    return {
+      title: 'What is Nuxt.js?'
+    }
+  },
+
+  created () {
+    EventBus.$on('previousSlide', () => this.$router.push('/toc'))
+    EventBus.$on('nextSlide', () => this.$router.push('/what-is-nuxt/schema'))
+  },
+
+  destroyed () {
+    EventBus.$off('previousSlide')
+    EventBus.$off('nextSlide')
+  }
+}
+</script>