Setup Decap CMS and Content Collection for Biodiversity
This commit is contained in:
Felix Brabetz
@@ -0,0 +1,28 @@
|
|||||||
|
backend:
|
||||||
|
name: gitea # ACHTUNG: Wenn du GitLab nutzt, ändere das in 'gitlab'
|
||||||
|
repo: fberger/brabetz-homepage
|
||||||
|
api_root: https://git.brabros.de/api/v1 # Für GitLab: https://git.brabros.de/api/v4
|
||||||
|
branch: main
|
||||||
|
|
||||||
|
media_folder: "src/images"
|
||||||
|
public_folder: "src/images"
|
||||||
|
|
||||||
|
collections:
|
||||||
|
- name: "pages"
|
||||||
|
label: "Seiten"
|
||||||
|
files:
|
||||||
|
- file: "src/content/biodiversity/biotope.md"
|
||||||
|
label: "Biotop-Bausteine"
|
||||||
|
name: "biotope"
|
||||||
|
fields:
|
||||||
|
- { label: "Titel", name: "title", widget: "string" }
|
||||||
|
- { label: "Beschreibung", name: "description", widget: "string" }
|
||||||
|
- label: "Items"
|
||||||
|
name: "items"
|
||||||
|
widget: "list"
|
||||||
|
fields:
|
||||||
|
- { label: "Titel", name: "title", widget: "string" }
|
||||||
|
- { label: "Beschreibung", name: "description", widget: "text" }
|
||||||
|
- { label: "Technik", name: "technique", widget: "string" }
|
||||||
|
- { label: "Location", name: "location", widget: "string" }
|
||||||
|
- { label: "Icon", name: "icon", widget: "string" }
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Content Manager</title>
|
||||||
|
<!-- Include the script that builds the page and powers Decap CMS -->
|
||||||
|
<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,5 +1,9 @@
|
|||||||
---
|
---
|
||||||
// src/components/Biodiversity.astro
|
// src/components/Biodiversity.astro
|
||||||
|
import { getEntry } from 'astro:content';
|
||||||
|
|
||||||
|
const biotopeEntry = await getEntry('biodiversity', 'biotope');
|
||||||
|
const biotope = biotopeEntry.data;
|
||||||
---
|
---
|
||||||
<!-- Biodiversity & Quality Section -->
|
<!-- Biodiversity & Quality Section -->
|
||||||
<section id="biodiversity" class="py-32 bg-stone-900/50 border-y border-stone-800/50">
|
<section id="biodiversity" class="py-32 bg-stone-900/50 border-y border-stone-800/50">
|
||||||
@@ -46,55 +50,24 @@
|
|||||||
<!-- Projektvorschläge -->
|
<!-- Projektvorschläge -->
|
||||||
<div class="border-t border-stone-800/50 pt-20">
|
<div class="border-t border-stone-800/50 pt-20">
|
||||||
<div class="text-center mb-12">
|
<div class="text-center mb-12">
|
||||||
<span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Konzepte & Techniken</span>
|
<span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">{biotope.description}</span>
|
||||||
<h3 class="text-2xl sm:text-3xl font-luxury font-bold text-white">Biotop-Bausteine für Ihren Garten</h3>
|
<h3 class="text-2xl sm:text-3xl font-luxury font-bold text-white">{biotope.title}</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
<!-- Projekt 1 -->
|
{biotope.items.map((item) => (
|
||||||
<div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group flex flex-col h-full">
|
<div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group flex flex-col h-full">
|
||||||
<div>
|
<div>
|
||||||
<div class="text-amber-400 text-2xl mb-4"><i class="fa-solid fa-mound"></i></div>
|
<div class="text-amber-400 text-2xl mb-4"><i class={item.icon}></i></div>
|
||||||
<h4 class="text-xl font-luxury font-bold text-white mb-3">Friesen- & Trockenmauern</h4>
|
<h4 class="text-xl font-luxury font-bold text-white mb-3">{item.title}</h4>
|
||||||
<p class="text-stone-400 text-sm font-light leading-relaxed mb-6">
|
<p class="text-stone-400 text-sm font-light leading-relaxed mb-6" set:html={item.description}></p>
|
||||||
Bauen ohne Mörtel: Wir setzen regionales Gestein im zweihäuptigen Verband. Die offenen Fugen bieten Eidechsen und Wildbienen Lebensraum. Ideal für Steingartenpflanzen wie <em class="text-emerald-400">Sedum album</em> (Weiße Fetthenne) und <em class="text-emerald-400">Sempervivum tectorum</em>.
|
</div>
|
||||||
</p>
|
<div class="flex justify-between items-center mt-auto pt-4 border-t border-stone-800/50">
|
||||||
|
<span class="text-[10px] font-mono text-emerald-500 uppercase tracking-widest">{item.technique}</span>
|
||||||
|
<span class="text-[10px] font-mono text-stone-500 uppercase tracking-widest">{item.location}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex justify-between items-center mt-auto pt-4 border-t border-stone-800/50">
|
))}
|
||||||
<span class="text-[10px] font-mono text-emerald-500 uppercase tracking-widest">Mauerwerk</span>
|
|
||||||
<span class="text-[10px] font-mono text-stone-500 uppercase tracking-widest">Taunus-Hänge</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Projekt 2 -->
|
|
||||||
<div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group flex flex-col h-full">
|
|
||||||
<div>
|
|
||||||
<div class="text-amber-400 text-2xl mb-4"><i class="fa-solid fa-seedling"></i></div>
|
|
||||||
<h4 class="text-xl font-luxury font-bold text-white mb-3">Artenreiche Magerwiese</h4>
|
|
||||||
<p class="text-stone-400 text-sm font-light leading-relaxed mb-6">
|
|
||||||
Wir tauschen humosen Oberboden gegen ein Sand-Kies-Gemisch, um Nährstoffe zu reduzieren. Nur so etablieren sich seltene Wildkräuter wie <em class="text-emerald-400">Salvia pratensis</em> (Wiesensalbei) und <em class="text-emerald-400">Leucanthemum vulgare</em> dauerhaft.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between items-center mt-auto pt-4 border-t border-stone-800/50">
|
|
||||||
<span class="text-[10px] font-mono text-emerald-500 uppercase tracking-widest">Bodenabmagerung</span>
|
|
||||||
<span class="text-[10px] font-mono text-stone-500 uppercase tracking-widest">Rheingau-Sonne</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Projekt 3 -->
|
|
||||||
<div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group flex flex-col h-full">
|
|
||||||
<div>
|
|
||||||
<div class="text-amber-400 text-2xl mb-4"><i class="fa-solid fa-droplet"></i></div>
|
|
||||||
<h4 class="text-xl font-luxury font-bold text-white mb-3">Sumpf- & Feuchtbiotope</h4>
|
|
||||||
<p class="text-stone-400 text-sm font-light leading-relaxed mb-6">
|
|
||||||
Kombination aus Versickerung und Lebensraum. Mit standortgerechten Sumpfpflanzen wie <em class="text-emerald-400">Iris pseudacorus</em> (Sumpf-Schwertlilie) und <em class="text-emerald-400">Caltha palustris</em> schaffen wir Filterzonen, die Libellen anziehen.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between items-center mt-auto pt-4 border-t border-stone-800/50">
|
|
||||||
<span class="text-[10px] font-mono text-emerald-500 uppercase tracking-widest">Retentionsmulde</span>
|
|
||||||
<span class="text-[10px] font-mono text-stone-500 uppercase tracking-widest">Talauen & Senken</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"title": "Biotop-Bausteine für Ihren Garten",
|
||||||
|
"description": "Konzepte & Techniken",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"title": "Friesen- & Trockenmauern",
|
||||||
|
"description": "Bauen ohne Mörtel: Wir setzen regionales Gestein im zweihäuptigen Verband. Die offenen Fugen bieten Eidechsen und Wildbienen Lebensraum. Ideal für Steingartenpflanzen wie Sedum album (Weiße Fetthenne) und Sempervivum tectorum.",
|
||||||
|
"technique": "Mauerwerk",
|
||||||
|
"location": "Taunus-Hänge",
|
||||||
|
"icon": "fa-solid fa-mound"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Artenreiche Magerwiese",
|
||||||
|
"description": "Wir tauschen humosen Oberboden gegen ein Sand-Kies-Gemisch, um Nährstoffe zu reduzieren. Nur so etablieren sich seltene Wildkräuter wie Salvia pratensis (Wiesensalbei) und Leucanthemum vulgare dauerhaft.",
|
||||||
|
"technique": "Bodenabmagerung",
|
||||||
|
"location": "Rheingau-Sonne",
|
||||||
|
"icon": "fa-solid fa-seedling"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Sumpf- & Feuchtbiotope",
|
||||||
|
"description": "Kombination aus Versickerung und Lebensraum. Mit standortgerechten Sumpfpflanzen wie Iris pseudacorus (Sumpf-Schwertlilie) und Caltha palustris schaffen wir Filterzonen, die Libellen anziehen.",
|
||||||
|
"technique": "Retentionsmulde",
|
||||||
|
"location": "Talauen & Senken",
|
||||||
|
"icon": "fa-solid fa-droplet"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
---
|
||||||
|
title: "Biotop-Bausteine für Ihren Garten"
|
||||||
|
description: "Konzepte & Techniken"
|
||||||
|
items:
|
||||||
|
- title: "Friesen- & Trockenmauern"
|
||||||
|
description: "Bauen ohne Mörtel: Wir setzen regionales Gestein im zweihäuptigen Verband. Die offenen Fugen bieten Eidechsen und Wildbienen Lebensraum. Ideal für Steingartenpflanzen wie <em class='text-emerald-400'>Sedum album</em> (Weiße Fetthenne) und <em class='text-emerald-400'>Sempervivum tectorum</em>."
|
||||||
|
technique: "Mauerwerk"
|
||||||
|
location: "Taunus-Hänge"
|
||||||
|
icon: "fa-solid fa-mound"
|
||||||
|
- title: "Artenreiche Magerwiese"
|
||||||
|
description: "Wir tauschen humosen Oberboden gegen ein Sand-Kies-Gemisch, um Nährstoffe zu reduzieren. Nur so etablieren sich seltene Wildkräuter wie <em class='text-emerald-400'>Salvia pratensis</em> (Wiesensalbei) und <em class='text-emerald-400'>Leucanthemum vulgare</em> dauerhaft."
|
||||||
|
technique: "Bodenabmagerung"
|
||||||
|
location: "Rheingau-Sonne"
|
||||||
|
icon: "fa-solid fa-seedling"
|
||||||
|
- title: "Sumpf- & Feuchtbiotope"
|
||||||
|
description: "Kombination aus Versickerung und Lebensraum. Mit standortgerechten Sumpfpflanzen wie <em class='text-emerald-400'>Iris pseudacorus</em> (Sumpf-Schwertlilie) und <em class='text-emerald-400'>Caltha palustris</em> schaffen wir Filterzonen, die Libellen anziehen."
|
||||||
|
technique: "Retentionsmulde"
|
||||||
|
location: "Talauen & Senken"
|
||||||
|
icon: "fa-solid fa-droplet"
|
||||||
|
---
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import { defineCollection, z } from 'astro:content';
|
||||||
|
|
||||||
|
const biodiversity = defineCollection({
|
||||||
|
type: 'content',
|
||||||
|
schema: z.object({
|
||||||
|
title: z.string(),
|
||||||
|
description: z.string(),
|
||||||
|
items: z.array(z.object({
|
||||||
|
title: z.string(),
|
||||||
|
description: z.string(),
|
||||||
|
technique: z.string(),
|
||||||
|
location: z.string(),
|
||||||
|
icon: z.string(),
|
||||||
|
})),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const collections = {
|
||||||
|
'biodiversity': biodiversity,
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user