feat: integrate a documentation for the cms (#15)

Integrate a detailed documentation for the admin area

components/nav-link.vue

@@ -11,7 +11,7 @@ const localePath = useLocalePath();
 </script>
 
 <template>
-	<NuxtLink :href="localePath(props.href)">
+	<NuxtLink :href="props.external ? props.href : localePath(props.href)" :external="props.external">
 		<slot />
 	</NuxtLink>
 </template>

content/cms-intro/de/intro.md

@@ -0,0 +1,17 @@
+---
+title: OpenAtlas Discovery - Content Management
+image:
+  light: /assets/images/hero-light.svg
+  dark: /assets/images/hero-dark.svg
+links:
+  - label: Admin-Login
+    href: /admin
+    external: true
+  - label: Docs
+    href: /docs
+    external: false
+---
+
+Willkommen im Content-Managment Bereich! Gehen Sie zum Admin-Login, um den Seiteninhalt dieser
+Präsentationswebsite zu verwalten, oder lesen Sie die dafür bereitgestellte Dokumentation, wenn Sie
+unsicher sind, wie Sie im Admin-Bereich vorgehen sollen.

content/cms-intro/en/intro.md

@@ -0,0 +1,16 @@
+---
+title: OpenAtlas Discovery - Content Management
+image:
+  light: /assets/images/hero-light.svg
+  dark: /assets/images/hero-dark.svg
+links:
+  - label: Admin-Login
+    href: /admin
+    external: true
+  - label: Docs
+    href: /docs
+    external: false
+---
+
+Welcome to the Content-Managment Area! Go to the Admin-Login, to manage the presentation website's
+content or, if you unsure how to proceed in the Admin-Area, read the Docs provided for it.

content/docs/de/documentation.md

@@ -0,0 +1,104 @@
+---
+title: Dokumentation
+---
+
+Willkommen zur ausführlichen Dokumentation des Admin-Bereichs. Hier finden Sie alles, was Sie über
+die Anpassung Ihrer OpenAtlas-Discovery Präsentationswebsite wissen müssen!
+
+**Wichtiger Hinweis:** Vergessen Sie nicht, Ihre Änderungen immer zu veröffentlichen (**Publish**).
+Sie werden dann in wenigen Minuten auf Ihrer Präsentationsseite sichtbar sein.
+
+Der Admin-Bereich ist in sogenannte **Collections** unterteilt. Die **Collections** sind:
+
+- Config
+- Metadata
+- System Pages
+- Pages
+- Team
+
+Im Folgenden werden wir auf jede einzelne genau besprechen und Ihnen zeigen, was Sie damit tun
+können.
+
+## Config
+
+Die **Config**-Collection enthält die allgemeine Projektkonfiguration (_Project Config_). Hier
+können Sie:
+
+- die _Farben_ der Website bearbeiten (die Hauptfarbe und die GeoJSON-Farbe, die für die Standorte
+  der Entitäten auf der Karte verwendet wird)
+- eine Standard _Sprache_ für die Website auswählen (falls sie in mehreren Sprachen verfügbar ist)
+- Ihr Projekt-_Logo_ hochladen - hier ist es ratsam, Logos für den hellen und dunklen Modus der
+  Website, sowie ein Logo mit und ohne Text, bereitzustellen. (Natürlich können Sie auch einfach
+  dasselbe Logo in allen Kategorien hochladen 😉)
+- ein _Impressum_ auf Ihrer Website hinzufügen (falls Sie ein/e Kooperationspartner/in von
+  acdh-ch-oeaw sind, zögern Sie nicht, das acdh-ch-Impressum zu verwenden, ansonsten können Sie Ihre
+  [eigene Impressumsseite](#erstellen-einer-benutzerdefinierten-impressumsseite) hinzufügen)
+- den _Twitter_-Account Ihres Projekts hinzufügen, um Metadaten für Webcrawler bereitzustellen (mehr
+  Sichtbarkeit, hurra!)
+
+## Metadata
+
+Die **Metadata**-Collection enthält die _Project Metadata_. Hier müssen Sie folgende Informationen
+bereitstellen:
+
+- den Titel Ihres Projekts
+- den Kurztitel Ihres Projekts
+- die Beschreibung Ihres Projekts
+
+Dies dient als Metadaten für Webcrawler, damit Ihre Website in den Google-Suchergebnissen besser
+eingestuft wird. (Nochmals, mehr Sichtbarkeit für Ihr Projekt! 👍)
+
+## System Pages
+
+Die **System Pages**-Collection enthält die
+
+- Startseite / Indexseite Ihrer Website. - Sie wird wie Ihr Projekt genannt (Standard:
+  _OpenAtlasDiscovery_)
+- Die _Team_-Seite
+
+In der _Index_-Datei (und der _Team_-Datei) können Sie:
+
+- einen _Titel_ angeben (er wird die Überschrift für die Seite sein und auch in der URL angezeigt)
+- einen _Navigations-Titel_ hinzufügen (er wird im Kopfbereich der Website angezeigt)
+- ein _Hero-Bild_ hochladen (z. B. ein Logo für den Dunkel- und Hellmodus oder auf der Teamseite ein
+  Foto Ihres Teams.)
+- einen _Hero-Lead-in_-Text hinzufügen (wird unter dem Hero-Bild angezeigt, z. B. die Beschreibung
+  Ihres Projekts)
+- _Links_ zu wichtigen anderen Seiten auf Ihrer Website hinzufügen (sie werden als Schaltflächen
+  gerendert, z. B. Daten und Karte)
+- zusätzliche _Inhalte_ für die Seite bereitstellen
+
+## Pages
+
+In der **Pages**-Collection können Sie Ihre eigenen Inhaltsseiten verwalten. Der Link zu Ihren
+erstellten Seiten wird im Header auf der Präsentationsseite angezeigt. Standardmäßig gibt es eine
+"Über das Projekt"-Seite.
+
+Auch hier müssen Sie für die Erstellung einer neuen Seite Folgendes angeben:
+
+- einen _Titel_ (er wird die Überschrift für die Seite sein und auch in der URL angezeigt)
+- einen _Navigations-Titel_ (er wird im Kopfbereich der Website angezeigt)
+- und natürlich den _Inhalt_ der Seite.
+
+### Erstellen einer benutzerdefinierten Impressumsseite
+
+Wenn Sie Ihre benutzerdefinierte Impressumsseite erstellen möchten, müssen Sie Folgendes tun:
+
+- setzen Sie die _Impressums_-Einstellung in der Projektkonfiguration auf _benutzerdefinierte
+  Impressumsseite verwenden_
+- erstellen Sie eine Seite mit dem _Titel_ "**Imprint**" in der **Pages**-Collection. Dies ist
+  obligatorisch und muss genau so geschrieben werden! (ohne Anführungszeichen natürlich) Hier können
+  Sie dann den Inhalt für die benutzerdefinierte Impressumsseite angeben.
+
+## Team
+
+In der **Team**-Collection können Sie neue Teammitglieder hinzufügen. Sie werden als Liste unter
+Ihrem Inhalt in der **Sytem Pages**-Collection / _Team_-Seite angezeigt.
+
+Beim Erstellen eines neuen Teammitglieds können Sie:
+
+- den _Vornamen_ des Mitglieds angeben
+- den _Nachnamen_ des Mitglieds angeben (dies ist obligatorisch!)
+- den _akademischen Titel_ des Mitglieds angeben
+- ein Foto hochladen (es wird im Profilbildstil / Kreis angezeigt)
+- eine kurze Biografie des Mitglieds hinzufügen

content/docs/en/documentation.md

@@ -0,0 +1,98 @@
+---
+title: Documentation
+---
+
+Welcome to the detailed admin area documentation. Here you can find everything you need to know on
+how to customize your OpenAtlas-Discovery presentation-website!
+
+**Important note:** Don't forget to always "**Publish**" your changes. They will be visible on your
+presentation site in a few minutes.
+
+The admin area is divided by so named **Collections**. The **Collections** are:
+
+- Config
+- Metadata
+- System Pages
+- Pages
+- Team
+
+In the following, we will discuss every single one and what you can do with it.
+
+## Config
+
+The **Config**-Collection beholds the overall _Project Config_. Here you can :
+
+- edit the _colors_ of the website (the main brand color and the geojson color, which is for the
+  entities locations on the map)
+- _select a default language_ for the website (if it is availiable in more languages)
+- upload your project's _logo_ - here is prefered to provide logo's for the light and dark mode of
+  the website and a logo with and without text. (of course you can also just upload the same logo in
+  all the categories :wink:)
+- add an _imprint_ to your website (if you are an acdh-ch-oeaw cooperation partner, don't hesitate
+  to use the acdh-ch-imprint, otherwise you can add your
+  [own imprint page](#creating-a-custom-imprint-page))
+- add your project's _twitter_-account to provide metadata to web-crawlers (more exposure, hooray!)
+
+## Metadata
+
+The **Metadata**-Collection beholds the _Project Metadata_. Here you must provide
+
+- your project's title
+- your project's short title
+- your project's description.
+
+This serves as metadata for web-crawlers, so your website ranks better in Google search results.
+(again, more exposure for your project! :thumbsup:)
+
+## System Pages
+
+The **System Pages**-Collection beholds the
+
+- Landing page / index page of your website. - It is called like your project (default:
+  _OpenAtlasDiscovery_)
+- The _Team_ page
+
+In the _index_ page file (and _Team_ page file) you can
+
+- provide a _title_ (it will be the heading for the page and will also show up in the URL)
+- add a _navigation_ title (it will be shown in the website header)
+- upload an _hero image_ (e.g. a logo for dark and light mode, or on the _Team_ page a photo of your
+  team.)
+- add an _hero lead-in_ text (will be shown underneath the hero image, e.g. the description of your
+  project)
+- add main _links_ to important other pages on your website (they will be rendered as buttons, e.g.
+  data and map)
+- provide extra _content_ for the page
+
+## Pages
+
+In the **Pages**-Collection you can manage your own content-pages. The link to your created pages,
+will show up in the header on the presentation-site. By default there is a "About the project"-page.
+
+Again for creating a new page, you need to specify:
+
+- a _title_ (it will be the heading for the page and will also show up in the URL)
+- a _navigation title_ (it will be shown in the website header)
+- and of course the _content_ of the page.
+
+### Creating a custom imprint page
+
+If you want to create your custom imprint page, you need to
+
+- set the _imprint_ setting to _use custom imprint page_ in the project config
+- create a page with the _title_ "**Imprint**" in the **Pages**-Collection. This is mandatory, it
+  must be spelled like this! (without the quotation marks, of course) Here you can then specify the
+  content for the custom imprint page.
+
+## Team
+
+In the **Team**-Collection you can add new team members, they will be displayed as a list under your
+content in the **System Pages**-Collection / _Team_ page
+
+When creating a new team member you can
+
+- provide the _First name_ of the member
+- provide the _Last name_ of the member (this is mandatory, though!)
+- provide the academic title of the member
+- upload an photo (it will be displayed in a profile picture style / circle)
+- add a short biography of the member

nuxt.config.ts

@@ -24,7 +24,6 @@ export default defineNuxtConfig({
 	content: {
 		defaultLocale,
 		locales: Object.keys(localesMap),
-		markdown: {},
 	},
 	css: ["@fontsource-variable/inter/slnt.css", "tailwindcss/tailwind.css", "@/styles/index.css"],
 	devtools: {

pages/cms.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import { useQuery } from "@tanstack/vue-query";
+
+import type { ContentPage } from "@/types/content";
+
+const locale = useLocale();
+
+const {
+	data: content,
+	error,
+	suspense,
+} = useQuery({
+	queryKey: ["cms-intro", locale, "intro"] as const,
+	queryFn({ queryKey: [, locale, ...id] }) {
+		return queryContent<ContentPage>("cms-intro", locale, ...id).findOne();
+	},
+});
+
+useHead({
+	meta: [{ name: "robots", content: "noindex" }],
+});
+</script>
+
+<template>
+	<MainContent class="container py-8">
+		<template v-if="content != null">
+			<div class="grid place-items-center gap-8 p-8 sm:py-16">
+				<div>
+					<h1 class="sr-only">{{ content.title }}</h1>
+					<NuxtImg
+						v-if="content.image?.light != null"
+						alt=""
+						class="block h-80 w-full max-w-3xl object-contain dark:hidden"
+						preload
+						:src="content.image?.light"
+						:width="768"
+						:height="320"
+					/>
+					<NuxtImg
+						v-if="content.image?.dark != null"
+						alt=""
+						class="hidden h-80 w-full max-w-3xl object-contain dark:block"
+						preload
+						:src="content.image?.dark"
+						:width="768"
+						:height="320"
+					/>
+				</div>
+
+				<div>
+					<ContentRenderer
+						v-if="content != null"
+						class="prose mx-auto w-full max-w-3xl text-center"
+						:value="content"
+					>
+						<template #empty></template>
+					</ContentRenderer>
+				</div>
+				<div class="flex items-center gap-6">
+					<Button v-for="(link, key) of content.links" :key="key" as-child variant="default">
+						<NavLink :href="link.href" :external="link.external">
+							{{ link.label }}
+						</NavLink>
+					</Button>
+				</div>
+			</div>
+		</template>
+	</MainContent>
+</template>

pages/docs.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { useQuery } from "@tanstack/vue-query";
+
+import type { ContentPage } from "@/types/content";
+
+const locale = useLocale();
+const t = useTranslations();
+
+const {
+	data: content,
+	error,
+	suspense,
+} = useQuery({
+	queryKey: ["docs", locale, "documentation"] as const,
+	queryFn({ queryKey: [, locale, ...id] }) {
+		return queryContent<ContentPage>("docs", locale, ...id).findOne();
+	},
+});
+
+useHead({
+	meta: [{ name: "robots", content: "noindex" }],
+});
+</script>
+
+<template>
+	<MainContent class="container max-w-3xl py-8">
+		<div>
+			<PageTitle>{{ content?.title }}</PageTitle>
+		</div>
+		<ContentRenderer v-if="content != null" class="prose max-w-3xl" :value="content">
+			<template #empty></template>
+		</ContentRenderer>
+	</MainContent>
+</template>