From aba25848da0623b94f709234341987c7c5384909 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Thu, 10 Dec 2020 15:54:34 +0100
Subject: [PATCH] - use nuxt content to display page - use components within
 the md

---
 components/{ => global}/Logo.vue |  0
 content/hello.md                 | 18 ---------
 content/home.md                  | 13 +++++++
 nuxt.config.js                   |  4 +-
 pages/index.vue                  | 67 ++++++++++++++++++++++----------
 5 files changed, 63 insertions(+), 39 deletions(-)
 rename components/{ => global}/Logo.vue (100%)
 delete mode 100644 content/hello.md
 create mode 100644 content/home.md

diff --git a/components/Logo.vue b/components/global/Logo.vue
similarity index 100%
rename from components/Logo.vue
rename to components/global/Logo.vue
diff --git a/content/hello.md b/content/hello.md
deleted file mode 100644
index d377a41..0000000
--- a/content/hello.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title: Getting started
-description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
----
-
-Empower your NuxtJS application with `@nuxtjs/content` module: write in a `content/` directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a **Git-based Headless CMS**.
-
-## Writing content
-
-Learn how to write your `content/`, supporting Markdown, YAML, CSV and JSON: https://content.nuxtjs.org/writing.
-
-## Fetching content
-
-Learn how to fetch your content with `$content`: https://content.nuxtjs.org/fetching.
-
-## Displaying content
-
-Learn how to display your Markdown content with the `<nuxt-content>` component directly in your template: https://content.nuxtjs.org/displaying.
\ No newline at end of file
diff --git a/content/home.md b/content/home.md
new file mode 100644
index 0000000..645aad1
--- /dev/null
+++ b/content/home.md
@@ -0,0 +1,13 @@
+---
+title: 'Mojotrollz'
+description: 'WoW TBC Server'
+---
+
+<logo></logo>
+
+# Mojotrollz
+
+Welcome to Mojotrollz
+
+## Register
+
diff --git a/nuxt.config.js b/nuxt.config.js
index 9c2a714..685a7a3 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -43,7 +43,9 @@ export default {
   axios: {},
 
   // Content module configuration (https://go.nuxtjs.dev/config-content)
-  content: {},
+  content: {
+    liveEdit: false,
+  },
 
   // Build Configuration (https://go.nuxtjs.dev/config-build)
   build: {},
diff --git a/pages/index.vue b/pages/index.vue
index decf0b6..f7a6d5f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,6 @@
-<template>
-  <div class="container">
+<!--
     <div>
+      <nuxt-content :document="page" />
       <Logo />
       <h1 class="title">Mojotrollz</h1>
       <div class="links">
@@ -22,30 +22,24 @@
         </a>
       </div>
     </div>
-  </div>
-</template>
-
+  
 <script lang="ts">
 import Vue from 'vue'
 
-export default Vue.extend({})
+export default Vue.extend({
+  async asyncData ({ $content }) {
+    const page = await $content('mojotrollz').fetch()
+
+    return {
+      page
+    }
+  }
+})
+
 </script>
 
-<style>
-/* Sample `apply` at-rules with Tailwind CSS
-.container {
-@apply min-h-screen flex justify-center items-center text-center mx-auto;
-}
-*/
-.container {
-  margin: 0 auto;
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
 
+<style>
 .title {
   font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
     'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -68,3 +62,36 @@ export default Vue.extend({})
   padding-top: 15px;
 }
 </style>
+-->
+<template>
+  <div class="container">
+    <article>
+      <nuxt-content :document="page" />
+    </article>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  async asyncData({ $content }) {
+    const page = await $content('home').fetch()
+    return { page }
+  },
+}
+</script>
+
+<style>
+/* Sample `apply` at-rules with Tailwind CSS
+.container {
+@apply min-h-screen flex justify-center items-center text-center mx-auto;
+}
+*/
+.container {
+  margin: 0 auto;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+</style>