Feat/integrate decap cms (#13)

Integrate Decap CMS to edit the /about & /biography page.

.env.local.example

@@ -18,3 +18,16 @@ NUXT_PUBLIC_API_BASE_URL="https://frischmuth-dev.acdh-dev.oeaw.ac.at"
 # NUXT_PUBLIC_GOOGLE_SITE_VERIFICATION=
 NUXT_PUBLIC_MATOMO_BASE_URL="https://matomo.acdh.oeaw.ac.at"
 # NUXT_PUBLIC_MATOMO_ID=
+
+# -------------------------------------------------------------------------------------------------
+# cms
+# -------------------------------------------------------------------------------------------------
+OAUTH_PROVIDER="github"
+# GitHub OAuth app client id.
+OAUTH_CLIENT_ID=
+# GitHub OAuth app client secret.
+OAUTH_CLIENT_SECRET=
+# GitHub OAuth app callback URL.
+OAUTH_REDIRECT_URL="https://frischmuth-frontend-dev.acdh-ch-dev.oeaw.ac.at/api/oauth/callback"
+# Deployed website's base URL.
+OAUTH_ALLOWED_ORIGIN="https://frischmuth-frontend-dev.acdh-ch-dev.oeaw.ac.at/"

content/pages/about/about-the-project.md

@@ -0,0 +1,36 @@
+---
+title: Über das Projekt
+sections:
+  - title: Das Team
+    content: >-
+      **Verfasser*innen des Antrags:** Anna Babka unter Mitarbeit von Silvana
+      Cimenti, Peter Clar, Matej Durco, Vanessa Hannesschläger und Daniel
+      Schopper
+
+
+      **Team:** Peter Clar, Matej Durco, Vanessa Hannesschläger, Julia Lingl, Kay Kollmann, Olivia Reichl, Matthias Schmidt
+
+
+      **Kooperation:** Klaus Kastberger für das Franz-Nabl-Institut der Universität Graz, Österreichische Akademie der Wissenschaften, Austrian Centre for Digital Humanities
+  - title: Vorgehensweise
+    content: >-
+      Elit anim cillum labore tempor Lorem irure voluptate qui nisi. Nostrud ut
+      incididunt sint laborum ad est enim do qui. Occaecat labore ea adipisicing
+      est esse enim amet irure non. Non ex et magna elit consequat cupidatat.
+      Officia velit aute voluptate velit minim ullamco. Enim laboris irure sunt
+
+      aliquip reprehenderit consequat cillum labore eiusmod ad cupidatat aliqua consectetur magna.
+
+
+      Eiusmod excepteur amet id aliqua nostrud fugiat excepteur laboris elit nulla sunt adipisicing. Magna officia eu voluptate ad amet enim laboris laborum. Ut occaecat exercitation cillum ullamco veniam consequat ea Lorem veniam. Tempor officia pariatur est tempor aliquip exercitation reprehenderit aliquip cillum in enim pariatur amet. Duis anim cupidatat nulla tempor commodo magna pariatur laboris irure.
+
+
+      Velit irure eu voluptate ipsum nulla incididunt. Consectetur veniam irure minim ea sint proident
+
+      minim nisi commodo culpa dolore ex. Cillum nostrud voluptate commodo tempor ut consectetur. Dolor cillum esse nostrud eu veniam pariatur eiusmod eiusmod enim aliquip Lorem aliqua nulla exercitation. Exercitation non fugiat ea dolore nulla. Sunt esse eiusmod qui ea. Ipsum dolore non cupidatat velit commodo et pariatur.
+
+
+      Ea reprehenderit Lorem cillum exercitation id est officia culpa irure ipsum fugiat tempor ullamco.
+
+      Elit tempor labore occaecat culpa do tempor tempor. Eiusmod anim esse tempor deserunt deserunt aute aliquip eu cupidatat ad qui incididunt mollit est. Nisi ad nisi pariatur voluptate irure minim culpa voluptate aliqua et. Velit magna consequat incididunt dolor nulla consectetur sunt pariatur enim laborum culpa deserunt.
+---

content/pages/biography/1941.md

@@ -0,0 +1,7 @@
+---
+year: "1941"
+image: /assets/images/pexels-pixabay-247600.jpg
+imageTitle: ""
+alt: Altausseer See mit Bergen im Hintergrund
+---
+Barbara Frischmuth wurde am 5.7.1941 in Altaussee (Steiermark) geboren. Der Vater, Anton Frischmuth, der 1943 in Russland fel, war Hotelier; der Familienbetrieb wurde von der Mutter, Maria (wiederverheiratete Pucher, geborene Schmidt), bis 1956 alleine weiter geführt.

content/pages/biography/1960.md

@@ -0,0 +1,10 @@
+---
+year: "1960"
+image: ""
+imageTitle: Die Klosterschule
+alt: ""
+copyright: Suhrkamp, 1968
+---
+Barbara Frischmuth in Erzurum (Sommer 1960) 
+
+Ein neunmonatiger Stipendienaufenthalt ermöglichte ihr von 1960-61 ein Studium an der türkischen Atatürk Universität in Erzurum. In ihrer Abwesenheit wurde sie zum Gründungsmitglied des Forum Stadtpark ernannt; im Forum las sie im Frühjahr 1961 auch erstmals eigene Werke.

content/pages/biography/1968.md

@@ -0,0 +1,7 @@
+---
+year: "1968"
+image: /assets/images/pexels-zaksheuskaya-709412-1616403.jpg
+imageTitle: Die Klosterschule
+copyright: Suhrkamp, 1968
+---
+1967 erschien als erste Übersetzung aus dem Ungarischen, das KZ-Tagebuch der Siebenbürger Jüdin Ana Novac im Rowohlt Verlag, ein Jahr darauf ihr erstes eigenes Werk Die Klosterschule bei Suhrkamp. Von da an publizierte sie Romane, Erzählungen, Dramen, Hörspielen und einige weitere Übersetzungen aus dem Ungarischen (siehe Publikationsliste).

content/pages/biography/1982.md

@@ -0,0 +1,4 @@
+---
+year: "1982"
+---
+Barbara Frischmuth besuchte im Rahmen von Auslandsaufenthalten bis dato unter anderem die Türkei, Ungarn, Ägypten und England, aber auch China (1982) und Japan (1990). Mehrmals unternahm die Autorin Lesereisen durch die USA; 1976 war sie für drei Monate writer in residence am Oberlin College in Ohio und 1987 als poet in residence an der Washington University in St. Louis, Missouri.

content/pages/biography/1990.md

@@ -0,0 +1,4 @@
+---
+year: "1990"
+---
+Im Herbst 1990 hielt Barbara Frischmuth Poetik-Vorlesungen an der Universität München.

messages/de/index.json

@@ -9,6 +9,16 @@
 		},
 		"title": "Über das Projekt"
 	},
+	"BiographyPage": {
+		"errors": {
+			"404": "Seite nicht gefunden",
+			"500": "Interner Fehler"
+		},
+		"meta": {
+			"title": "Biografie"
+		},
+		"title": "Biografie"
+	},
 	"AppFooter": {
 		"links": {
 			"imprint": "Impressum"

package.json

@@ -12,6 +12,7 @@
 		"analyze": "nuxt analyze",
 		"build": "nuxt build --dotenv ./.env.local",
 		"dev": "nuxt dev --dotenv ./.env.local",
+		"dev:cms": "decap-server",
 		"format:check": "prettier . \"!./content/**\" --cache --check --ignore-path ./.gitignore",
 		"format:fix": "pnpm run format:check --write",
 		"generate:api-client": "dotenv -c -- tsx ./scripts/generate-api-client.ts",
@@ -37,37 +38,42 @@
 	},
 	"dependencies": {
 		"@acdh-oeaw/lib": "^0.1.12",
-		"@fontsource-variable/inter": "^5.0.20",
-		"@nuxt/content": "^2.13.2",
-		"@nuxt/image": "^1.7.0",
-		"@nuxtjs/color-mode": "^3.4.2",
-		"@nuxtjs/i18n": "^8.3.3",
+		"@fontsource-variable/inter": "^5.1.0",
+		"@nuxt/content": "^2.13.4",
+		"@nuxt/image": "^1.8.1",
+		"@nuxtjs/color-mode": "^3.5.2",
+		"@nuxtjs/i18n": "^8.5.5",
 		"@radix-icons/vue": "^1.0.0",
-		"@tailwindcss/typography": "^0.5.13",
-		"@tanstack/vue-query": "^5.51.21",
-		"@tanstack/vue-table": "^8.20.1",
-		"@vueuse/core": "^10.11.0",
-		"@vueuse/nuxt": "^10.11.0",
+		"@tailwindcss/typography": "^0.5.15",
+		"@tanstack/vue-query": "^5.59.16",
+		"@tanstack/vue-table": "^8.20.5",
+		"@vueuse/core": "^10.11.1",
+		"@vueuse/nuxt": "^10.11.1",
 		"@zodios/core": "^10.9.6",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",
-		"cva": "^1.0.0-beta.1",
+		"cva": "1.0.0-beta.1",
+		"emojilib": "^4.0.0",
 		"fast-glob": "^3.3.2",
 		"lucide-vue-next": "^0.424.0",
 		"maplibre-gl": "^4.7.1",
-		"nuxt": "^3.12.4",
-		"pino-http": "^10.2.0",
-		"radix-vue": "^1.9.3",
+		"marked": "^14.1.3",
+		"node-emoji": "^2.1.3",
+		"nuxt": "^3.13.2",
+		"pino-http": "^10.3.0",
+		"radix-vue": "^1.9.7",
+		"remark-parse": "^11.0.0",
 		"satori": "^0.10.14",
 		"shadcn-vue": "^0.10.5",
-		"tailwind-merge": "^2.4.0",
+		"@stefanprobst/netlify-cms-oauth-client": "^0.4.0",
+		"tailwind-merge": "^2.5.4",
 		"tailwindcss-animate": "^1.0.7",
 		"valibot": "^0.37.0",
 		"vaul-vue": "^0.2.0",
-		"vue": "^3.4.36",
-		"vue-i18n": "^9.13.1",
+		"vue": "^3.5.12",
+		"vue-i18n": "^9.14.1",
 		"vue-i18n-routing": "^1.2.0",
-		"vue-router": "^4.4.3",
+		"vue-router": "^4.4.5",
 		"zod": "^3.23.8"
 	},
 	"devDependencies": {
@@ -76,34 +82,35 @@
 		"@acdh-oeaw/eslint-config-playwright": "^1.0.10",
 		"@acdh-oeaw/eslint-config-vue": "^1.0.15",
 		"@acdh-oeaw/prettier-config": "^1.0.1",
-		"@acdh-oeaw/stylelint-config": "^2.0.3",
-		"@acdh-oeaw/tsconfig": "^1.1.1",
-		"@nuxt/devtools": "^1.3.9",
-		"@playwright/test": "^1.46.0",
-		"@types/node": "^20.14.14",
-		"axe-core": "^4.10.0",
-		"axe-playwright": "^2.0.1",
+		"@acdh-oeaw/stylelint-config": "^2.0.4",
+		"@acdh-oeaw/tsconfig": "^1.2.0",
+		"@nuxt/devtools": "^1.6.0",
+		"@playwright/test": "^1.48.1",
+		"@types/node": "^20.17.0",
+		"axe-core": "^4.10.2",
+		"axe-playwright": "^2.0.3",
 		"ci-info": "^4.0.0",
+		"decap-server": "^3.1.2",
 		"dotenv": "^16.4.5",
 		"dotenv-cli": "^7.4.2",
 		"dotenv-expand": "^11.0.6",
-		"eslint": "^8.57.0",
-		"eslint-plugin-tailwindcss": "^3.17.4",
+		"eslint": "^8.57.1",
+		"eslint-plugin-tailwindcss": "^3.17.5",
 		"is-ci": "^3.0.1",
-		"lint-staged": "^15.2.8",
-		"npm-run-all2": "^6.2.2",
+		"lint-staged": "^15.2.10",
+		"npm-run-all2": "^6.2.6",
 		"openapi-zod-client": "^1.18.2",
-		"openapi3-ts": "^4.3.3",
-		"postcss": "^8.4.41",
+		"openapi3-ts": "^4.4.0",
+		"postcss": "^8.4.47",
 		"prettier": "^2.8.8",
 		"schema-dts": "^1.1.2",
 		"simple-git-hooks": "^2.11.1",
-		"stylelint": "^16.8.1",
-		"tailwindcss": "^3.4.8",
-		"tsx": "^4.16.5",
-		"typescript": "^5.6.2",
-		"vite": "^5.4.0",
-		"vue-tsc": "^2.0.29"
+		"stylelint": "^16.10.0",
+		"tailwindcss": "^3.4.14",
+		"tsx": "^4.19.1",
+		"typescript": "^5.6.3",
+		"vite": "^5.4.10",
+		"vue-tsc": "^2.1.6"
 	},
 	"browserslist": {
 		"development": [

pages/about.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useQuery } from "@tanstack/vue-query";
 
-import type { SystemPage, TeamMember } from "@/types/content";
+import type { AboutPage } from "@/types/content";
 
 defineRouteRules({
 	prerender: true,
@@ -13,29 +13,31 @@ usePageMetadata({
 	title: t("AboutPage.meta.title"),
 });
 
-const { data: team, error: teamError } = useQuery({
-	queryKey: ["about-team"] as const,
+const { data: about, error: aboutError } = useQuery({
+	queryKey: ["about"] as const,
 	queryFn() {
-		return queryContent<SystemPage>("system-pages", "about-team").findOne();
+		return queryContent<AboutPage>("pages/about/about-the-project").findOne();
 	},
 });
 
-const { data: approach, error: approachError } = useQuery({
-	queryKey: ["about-approach"] as const,
-	queryFn() {
-		return queryContent<SystemPage>("system-pages", "about-approach").findOne();
-	},
-});
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-explicit-any
+const parsedContent = ref<Array<any>>([]);
 
-const { data: members, error: membersError } = useQuery({
-	queryKey: ["team"] as const,
-	queryFn() {
-		return queryContent<TeamMember>("team").find();
+watch(
+	() => about.value,
+	async (newValue) => {
+		if (newValue?.sections) {
+			parsedContent.value = await Promise.all(
+				newValue.sections.map(async (section) => {
+					return section.content ? await parseMarkdown(section.content) : "";
+				}),
+			);
+		}
 	},
-});
+	{ immediate: true },
+);
 
-// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-useErrorMessage(teamError ?? approachError ?? membersError, {
+useErrorMessage(aboutError, {
 	notFound: t("AboutPage.errors.404"),
 	unknown: t("AboutPage.errors.500"),
 });
@@ -53,48 +55,13 @@ useErrorMessage(teamError ?? approachError ?? membersError, {
 			</Card>
 		</div>
 
-		<div class="prose max-w-3xl">
-			<ContentRenderer v-if="team != null" :value="team">
-				<h2 class="font-bold text-frisch-orange">
-					{{ team.title }}
-				</h2>
-				<ContentRendererMarkdown :value="team" />
-				<template #empty></template>
-			</ContentRenderer>
-
-			<ul class="list-none px-0 pt-4 md:pt-8">
-				<li
-					v-for="member of members"
-					:key="member._id"
-					class="grid gap-4 p-0 md:grid-cols-[auto_1fr]"
-				>
-					<div class="relative aspect-square overflow-hidden md:size-72">
-						<img
-							v-if="member.image != null"
-							alt=""
-							class="absolute inset-0 m-0 size-full object-cover"
-							:src="member.image"
-						/>
-					</div>
-					<div>
-						<h2 class="m-0 font-semibold text-frisch-indigo">
-							{{ member.firstName }}
-							{{ member.lastName }}
-						</h2>
-						<ContentRenderer :value="member">
-							<template #empty></template>
-						</ContentRenderer>
-					</div>
-				</li>
-			</ul>
-
-			<ContentRenderer v-if="approach != null" :value="approach">
-				<h2 class="font-bold text-frisch-orange">
-					{{ approach.title }}
-				</h2>
-				<ContentRendererMarkdown :value="approach" />
-				<template #empty></template>
-			</ContentRenderer>
+		<div v-if="about && about.sections && about.sections.length" class="prose max-w-3xl">
+			<div v-for="(section, index) in about.sections" :key="index" class="pb-4">
+				<h2 class="m-0 font-bold text-frisch-orange">{{ section.title }}</h2>
+				<ContentRenderer v-if="parsedContent[index]" :value="parsedContent[index]">
+					<template #empty></template>
+				</ContentRenderer>
+			</div>
 		</div>
 	</MainContent>
 </template>