add dynamic markdown stories and some example stories

apps/app/.gitignore

@@ -33,3 +33,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.contentlayer

apps/app/content/stories/001_unser-erstes-permakultur-design-konzept.mdx

@@ -0,0 +1,46 @@
+---
+title: Erstes Permakultur Design Konzept
+description: Wir stellen unser erstes Permakultur Design Konzept vor, ein Einblick in unsere Gedankenwelt.
+date: '2023-10-07'
+category: Garten
+image: '/images/stories/garden-2.jpg'
+creator: sven
+tags: ['Garten']
+---
+
+## Einleitung
+
+Die **Standkreis Bewegung** hat große Ambitionen: Wir wollen die Welt verändern, ein Stück Land nach dem anderen. Unsere Vision ist es, durch die Prinzipien der Permakultur, unfruchtbare Landflächen in florierende Ökosysteme für Pflanzen, Tiere und Menschen zu verwandeln. Hier präsentieren wir stolz unser erstes Permakultur Design Konzept.
+
+## Was ist Permakultur?
+
+Permakultur ist ein ganzheitliches Designsystem für nachhaltige Lebensräume und landwirtschaftliche Flächen. Es beruht auf einem Ethiksystem und Designprinzipien, die zusammenwirken, um ökologisch stabile und ökonomisch rentable Systeme zu schaffen.
+
+## Das Konzept
+
+### Zonen
+
+Das Grundstück wird in verschiedene Zonen eingeteilt:
+
+1. **Zone 0** - Das Haus oder Gemeinschaftsgebäude.
+2. **Zone 1** - Die Bereiche, die am häufigsten besucht werden: Kräutergarten, Salatbeete, Gewächshäuser.
+3. **Zone 2** - Regelmäßig besuchte Bereiche: Obstbäume, Hühnerställe.
+4. **Zone 3** - Landwirtschaftliche Flächen für den Großteil unserer Lebensmittelproduktion.
+5. **Zone 4** - Halbwildes Gebiet für Nahrung und Holz.
+6. **Zone 5** - Ein wilder, unberührter Bereich, in dem die Natur sich selbst überlassen wird.
+
+### Wassermanagement
+
+Ein Schlüsselprinzip der Permakultur ist "Fange und speichere Energie". Wasser ist eine der wichtigsten Ressourcen in jedem Ökosystem. Unsere Designs enthalten deshalb Schwimmteiche, Wasserspeicher und ausgeklügelte Bewässerungssysteme.
+
+### Biodiversität
+
+Unser Ansatz beinhaltet die Schaffung von Habitaten für eine Vielzahl von Pflanzen und Tieren. Ein vielfältiges System ist widerstandsfähiger gegen Krankheiten und Schädlinge und bietet eine reiche Ernte an Lebensmitteln und Materialien.
+
+## Schlusswort
+
+Dies ist nur ein kurzer Einblick in unser erstes Permakultur Design Konzept. Im Herzen der **Standkreis Bewegung** ist die Überzeugung, dass wir, wenn wir uns mit der Natur und nicht gegen sie bewegen, florierende, resiliente Gemeinschaften schaffen können. Wir laden alle ein, uns auf dieser spannenden Reise zu begleiten.
+
+---
+
+Möchten Sie mehr erfahren oder sich uns anschließen? Kontaktieren Sie uns oder besuchen Sie unsere [Website](#) für weitere Informationen.

apps/app/content/stories/002_was-ist-nachhaltige-forstwirtschaft.mdx

@@ -0,0 +1,47 @@
+---
+title: Was ist ein nachhaltiger Wald?
+description: Wir tauchen ein in eine für uns altbekannte und doch unbekannte Welt, der Wald.
+date: '2023-10-07'
+category: Wald
+image: '/images/stories/forest.jpg'
+creator: huhn
+tags: ['Wald']
+---
+
+## Einleitung
+
+Der Wald - eine für uns sowohl altbekannte als auch geheimnisvolle Welt. Für viele ist er ein Ort der Ruhe, der Erholung und der Natur. Aber was genau macht einen Wald nachhaltig? Lassen Sie uns tiefer in das Konzept des nachhaltigen Waldes eintauchen.
+
+## Der Wald in seiner natürlichen Form
+
+Bevor wir verstehen, was einen Wald nachhaltig macht, müssen wir uns erst einmal darüber im Klaren sein, was einen Wald in seiner natürlichen Form ausmacht. Ein gesunder Wald besteht aus einer Vielzahl von Pflanzen, Tieren und Mikroorganismen, die in einem komplexen, symbiotischen System miteinander interagieren.
+
+## Merkmale eines nachhaltigen Waldes
+
+### Vielfältige Baumarten
+
+Ein nachhaltiger Wald enthält eine breite Palette von Baumarten. Diese Diversität stellt sicher, dass der Wald widerstandsfähig gegen Krankheiten und Schädlinge ist.
+
+### Natürlicher Lebenszyklus
+
+In einem nachhaltigen Wald werden Bäume in ihrem natürlichen Lebenszyklus gelassen. Das bedeutet, dass junge Bäume nachwachsen können, während alte Bäume sterben und zum Ökosystem beitragen.
+
+### Keine Übernutzung
+
+Die Ressourcen des Waldes werden so genutzt, dass sie sich regenerieren können. Das heißt, dass Bäume in einem nachhaltigen Tempo gefällt werden und der Wald nicht übernutzt wird.
+
+### Schutz der Tierwelt
+
+Ein nachhaltiger Wald bietet Lebensräume für Tiere und schützt sie. Das bedeutet, dass keine exzessive Jagd oder Rodung stattfindet, die den natürlichen Lebensraum der Tiere zerstört.
+
+## Warum ist Nachhaltigkeit im Wald so wichtig?
+
+Wälder spielen eine entscheidende Rolle im globalen Ökosystem. Sie speichern Kohlendioxid, produzieren Sauerstoff, schützen den Boden und bieten Lebensraum für unzählige Arten. Ein nachhaltiger Wald stellt sicher, dass diese lebenswichtigen Funktionen erhalten bleiben, nicht nur für uns, sondern auch für zukünftige Generationen.
+
+## Abschluss
+
+In der **Standkreis Bewegung** glauben wir an die Bedeutung von nachhaltigen Wäldern. Es ist unsere Aufgabe, uns für den Schutz und die Wiederherstellung dieser wertvollen Ökosysteme einzusetzen. Wir hoffen, dass immer mehr Menschen die Wichtigkeit erkennen und sich uns in dieser Mission anschließen.
+
+---
+
+Möchten Sie mehr über nachhaltige Wälder erfahren oder sich für ihren Schutz engagieren? Besuchen Sie unsere [Website](#) oder kontaktieren Sie uns direkt.

apps/app/content/stories/003_wie-geht-permakultur-in-der-stadt.mdx

@@ -0,0 +1,50 @@
+---
+title: Wie geht Permakultur in der Stadt?
+description: Einblicke in zahlreiche Permakultur Projekte in verschiedenen Städten, was kann man überhaupt machen?
+date: '2023-10-07'
+category: Stadt
+image: '/images/stories/city.jpg'
+creator: sven
+tags: ['Stadt']
+---
+
+## Einleitung
+
+Wenn wir an Permakultur denken, stellen wir uns oft weitläufige grüne Flächen auf dem Land vor. Doch Permakultur-Prinzipien sind nicht nur für ländliche Gebiete geeignet. Sie können auch in städtischen Umgebungen angewendet werden, um nachhaltige und produktive Räume zu schaffen. Wie funktioniert also Permakultur in der Stadt? Lassen Sie uns einige spannende städtische Permakultur-Projekte betrachten.
+
+## Städtische Herausforderungen
+
+Städte stehen vor einzigartigen Herausforderungen: Platzmangel, Bodenversiegelung und ein hohes Maß an Verschmutzung. Doch genau diese Herausforderungen bieten Raum für innovative Lösungen und Ansätze in der Permakultur.
+
+## Was kann man in der Stadt machen?
+
+### Vertikale Gärten
+
+Wo Platz knapp ist, geht es in die Höhe! Vertikale Gärten sind eine großartige Möglichkeit, Fassaden oder Innenwände in produktive grüne Flächen zu verwandeln. Sie können zur Anzucht von Kräutern, Gemüse oder auch nur dekorativen Pflanzen verwendet werden.
+
+### Gemeinschaftsgärten
+
+Ein Stück ungenutztes Land kann in einen blühenden Gemeinschaftsgarten umgewandelt werden, in dem Anwohner ihr eigenes Gemüse anbauen und gleichzeitig soziale Kontakte pflegen können.
+
+### Grüne Dächer
+
+Grüne Dächer bieten nicht nur Isolierung und Regenwassermanagement, sondern können auch zur Nahrungsmittelproduktion genutzt werden. Außerdem bieten sie einen Lebensraum für Insekten und Vögel.
+
+### Permakultur-Balkone
+
+Auch ein kleiner Balkon kann in einen produktiven Raum umgewandelt werden, indem man mit Hochbeeten, Töpfen und hängenden Pflanzern arbeitet.
+
+## Einblick in städtische Permakultur-Projekte
+
+- **Berlin**: In der deutschen Hauptstadt gibt es zahlreiche Gemeinschaftsgärten und urbane Landwirtschaftsprojekte, die Permakultur-Prinzipien nutzen, um nachhaltige städtische Räume zu schaffen.
+- **New York**: Die "Big Apple" hat eine wachsende Bewegung von Dachgärten, die nicht nur zur Produktion von Lebensmitteln, sondern auch zur Bildung und Gemeinschaftsbildung dienen.
+
+- **Singapur**: Als Stadtstaat hat Singapur begonnen, vertikale Landwirtschaft und grüne Gebäudetechnologien zu integrieren, um die lokale Nahrungsmittelproduktion zu erhöhen und die Umweltauswirkungen zu reduzieren.
+
+## Fazit
+
+Die städtische Permakultur zeigt, dass man nicht viel Platz braucht, um einen Unterschied zu machen. Es geht darum, die Ressourcen, die uns zur Verfügung stehen, optimal zu nutzen und nachhaltige Lösungen für städtische Herausforderungen zu finden.
+
+---
+
+Möchten Sie mehr über städtische Permakultur erfahren oder sich in einem Projekt in Ihrer Nähe engagieren? Besuchen Sie unsere [Website](#) oder nehmen Sie Kontakt mit uns auf.

apps/app/contentlayer.config.js

@@ -0,0 +1,82 @@
+import { defineDocumentType, makeSource } from 'contentlayer/source-files'
+import readingTime from 'reading-time'
+import rehypeSlug from 'rehype-slug'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'
+import remarkGfm from 'remark-gfm'
+import rehypeCodeTitles from 'rehype-code-titles'
+import rehypePrism from 'rehype-prism-plus'
+import { getCreator } from './src/app/(userland)/stories/data/creators'
+
+/** @type {import('contentlayer/source-files').ComputedFields} */
+const computedFields = {
+  slug: {
+    type: 'string',
+    resolve: (doc) => `/${doc._raw.flattenedPath}`,
+  },
+  slugAsParams: {
+    type: 'string',
+    resolve: (doc) => doc._raw.flattenedPath.split('/').slice(1).join('/'),
+  },
+  readingTime: { type: 'json', resolve: (doc) => readingTime(doc.body.raw) },
+  creatorObject: {
+    type: 'json',
+    resolve: (doc) => getCreator(doc.creator),
+  },
+}
+
+export const Story = defineDocumentType(() => ({
+  name: 'Story',
+  filePathPattern: `stories/**/*.mdx`,
+  contentType: 'mdx',
+  fields: {
+    title: {
+      type: 'string',
+      required: true,
+    },
+    description: {
+      type: 'string',
+    },
+    date: {
+      type: 'date',
+      required: true,
+    },
+    category: {
+      type: 'string',
+      required: true,
+    },
+    image: {
+      type: 'string',
+      required: false,
+    },
+    creator: {
+      type: 'string',
+      required: false,
+    },
+    tags: {
+      type: 'json',
+      required: false,
+    },
+  },
+  computedFields,
+}))
+
+export default makeSource({
+  contentDirPath: './content',
+  documentTypes: [Story],
+  mdx: {
+    remarkPlugins: [remarkGfm],
+    rehypePlugins: [
+      rehypeSlug,
+      rehypeCodeTitles,
+      rehypePrism,
+      [
+        rehypeAutolinkHeadings,
+        {
+          properties: {
+            className: ['anchor'],
+          },
+        },
+      ],
+    ],
+  },
+})

apps/app/next.config.js

@@ -1,4 +1,5 @@
 /** @type {import('next').NextConfig} */
+const { withContentlayer } = require('next-contentlayer')
 
 const withPWA = require('next-pwa')({
   dest: 'public',
@@ -8,4 +9,4 @@ const nextConfig = {
   trailingSlash: true,
 }
 
-module.exports = withPWA(nextConfig)
+module.exports = withPWA(withContentlayer(nextConfig))

apps/app/package.json

@@ -13,7 +13,15 @@
     "react-dom": "^18",
     "next": "13.5.4",
     "next-themes": "^0.2.1",
-    "next-pwa": "^5.6.0"
+    "next-pwa": "^5.6.0",
+    "contentlayer": "^0.3.4",
+    "next-contentlayer": "^0.3.4",
+    "reading-time": "^1.5.0",
+    "rehype-slug": "^6.0.0",
+    "rehype-autolink-headings": "^7.0.0",
+    "remark-gfm": "^4.0.0",
+    "rehype-code-titles": "^1.2.0",
+    "rehype-prism-plus": "^1.6.3"
   },
   "devDependencies": {
     "typescript": "^5",