add: Content-Pages with markdown support (WIP)

app/assets/styles/page.css

@@ -74,7 +74,21 @@
     position: absolute;
 }
 
-.Legal {
+.Legal, .Wissen {
     padding: var(--padding-l) var(--padding-default);
     color: var(--color-darkest);
+
+    ul {
+        margin: 0 0 0 var(--padding-default);
+    }
+}
+
+ul.link-liste {
+    list-style: none;
+    margin: var(--padding-default) 0 0;
+    
+    a {
+        text-decoration: none;
+        color: var(--color-text)
+    }
 }

app/content/wissen/klopapier.md

@@ -1,7 +0,0 @@
----
-date: 2020-11-11
----
-
-# Foo
-
-This is Foo blog post.

app/pages/wissen/[slug].vue

@@ -7,13 +7,6 @@ const { data: post } = await useAsyncData(`wissen-${slug}`, () => {
 
 <template>
   <template v-if="post">
-    <ContentRenderer :value="post" />
-  </template>
-  <template v-else>
-    <section class="Legal flex-col gap-default content full">
-      <h1>Page Not Found</h1>
-      <p>Oops! The content you're looking for doesn't exist.</p>
-      <NuxtLink to="/">Go back home</NuxtLink>
-    </section>
+    <ContentRenderer :value="post" :prose="false" class="Wissen flex-col gap-default content full"/>
   </template>
 </template>

app/pages/wissen/index.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+const { data: posts } = await useAsyncData('all-wissen', () => {
+  return queryCollection('wissen')
+      .all()
+})
+</script>
+
+<template>
+  <template v-if="posts">
+    <section class="Wissen flex-col gap-default content full">
+      <h1>Wissen rund ums Papier</h1>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem delectus dolorum expedita id itaque nam quasi repellat sapiente tempora voluptatibus!
+      <ul class="link-liste">
+      <li v-for="post in posts" :key="post.path">
+        <NuxtLink :to="post.path">
+          <h2>{{ post.title }}</h2>
+          <p>{{ post.description }}</p>
+        </NuxtLink>
+      </li>
+      </ul>
+    </section>
+  </template>
+</template>