feat: make the website's content fullscreen and the map the start pag…

…e via the cms
acdh-oeaw · Jun 6, 2024 · 10ad0f3 · 10ad0f3
1 parent 6cf63d2
commit 10ad0f3
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 86 deletions.
diff --git a/components/app-header.vue b/components/app-header.vue
@@ -10,10 +10,18 @@ const locale = useLocale();
 const t = useTranslations();
 
 const defaultLinks = computed(() => {
+	if (!project.map.startPage) {
+		return {
+			home: { href: { path: "/" }, label: t("AppHeader.links.home") },
+			data: { href: { path: "/data" }, label: t("AppHeader.links.data") },
+			map: { href: { path: "/map" }, label: t("AppHeader.links.map") },
+			network: { href: { path: "/network" }, label: t("AppHeader.links.network") },
+			team: { href: { path: "/team" }, label: t("AppHeader.links.team") },
+		} satisfies Record<string, { href: NavLinkProps["href"]; label: string }>;
+	}
 	return {
 		home: { href: { path: "/" }, label: t("AppHeader.links.home") },
 		data: { href: { path: "/data" }, label: t("AppHeader.links.data") },
-		map: { href: { path: "/map" }, label: t("AppHeader.links.map") },
 		network: { href: { path: "/network" }, label: t("AppHeader.links.network") },
 		team: { href: { path: "/team" }, label: t("AppHeader.links.team") },
 	} satisfies Record<string, { href: NavLinkProps["href"]; label: string }>;

diff --git a/components/data-map-view.vue b/components/data-map-view.vue
@@ -2,7 +2,6 @@
 import { keyByToMap } from "@acdh-oeaw/lib";
 import * as turf from "@turf/turf";
 import type { MapGeoJSONFeature } from "maplibre-gl";
-import { createSolutionBuilder } from "typescript";
 import { z } from "zod";
 
 import type { SearchFormData } from "@/components/search-form.vue";

diff --git a/config/project.config.ts b/config/project.config.ts
@@ -44,6 +44,10 @@ const schema = z.object({
 				brandContrast: luminance > 0.5 ? "hsl(0deg 0% 0%)" : "hsl(0deg 0% 100%)",
 			};
 		}),
+	fullscreen: z.boolean(),
+	map: z.object({
+		startPage: z.boolean(),
+	}),
 	defaultLocale: z.enum(["de", "en"]),
 	logos: z.object({
 		light: z.string(),

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -94,10 +94,16 @@ useHead({
 		return scripts;
 	}),
 });
+
+const fullscreen = "--container-width: ;";
+const container = "--container-width: 1536px;";
 </script>
 
 <template>
-	<div class="grid min-h-full grid-rows-[auto_1fr_auto]">
+	<div
+		class="grid min-h-full grid-rows-[auto_1fr_auto]"
+		:style="project.fullscreen ? fullscreen : container"
+	>
 		<SkipLink target-id="main-content">{{ t("DefaultLayout.skip-to-main-content") }}</SkipLink>
 
 		<AppHeader />

diff --git a/pages/index.vue b/pages/index.vue
@@ -4,17 +4,28 @@ import { useQuery } from "@tanstack/vue-query";
 
 import type { SystemPage } from "@/types/content";
 
+import { project } from "../config/project.config";
+
 defineRouteRules({
 	prerender: true,
 });
 
 const locale = useLocale();
 const t = useTranslations();
 
+definePageMeta({
+	validate() {
+		const env = useRuntimeConfig();
+		return env.public.NUXT_PUBLIC_DATABASE !== "disabled";
+	},
+});
+
 usePageMetadata({
 	title: t("IndexPage.meta.title"),
 });
 
+const env = useRuntimeConfig();
+
 const {
 	data: content,
 	error,
@@ -41,63 +52,79 @@ onServerPrefetch(async () => {
 </script>
 
 <template>
-	<MainContent class="container py-8">
-		<template v-if="content != null && content.leadIn != 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"
-					/>
+	<MainContent class="container grid grid-rows-[auto_1fr] py-8">
+		<div v-if="!project.map.startPage">
+			<template v-if="content != null && content.leadIn != 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>
+
+					<ContentRenderer
+						v-if="content.leadIn != null"
+						class="prose prose-lg max-w-3xl text-balance text-center"
+						:value="content.leadIn"
+					>
+						<template #empty></template>
+					</ContentRenderer>
+
+					<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">
+								{{ link.label }}
+							</NavLink>
+						</Button>
+					</div>
 				</div>
+			</template>
 
+			<template v-else-if="content != null">
+				<div class="mx-auto w-full max-w-3xl px-8">
+					<PageTitle>{{ content?.title }}</PageTitle>
+				</div>
+			</template>
+
+			<div>
 				<ContentRenderer
-					v-if="content.leadIn != null"
-					class="prose prose-lg max-w-3xl text-balance text-center"
-					:value="content.leadIn"
+					v-if="content != null"
+					class="prose mx-auto w-full max-w-3xl"
+					:value="content"
 				>
 					<template #empty></template>
 				</ContentRenderer>
-
-				<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">
-							{{ link.label }}
-						</NavLink>
-					</Button>
-				</div>
 			</div>
-		</template>
+		</div>
 
-		<template v-else-if="content != null">
-			<div class="mx-auto w-full max-w-3xl px-8">
-				<PageTitle>{{ content?.title }}</PageTitle>
+		<template v-if="project.map.startPage">
+			<div>
+				<PageTitle class="sr-only">{{ t("MapPage.title") }}</PageTitle>
 			</div>
+			<template v-if="env.public.NUXT_PUBLIC_DATABASE !== 'disabled'">
+				<ErrorBoundary>
+					<DataMapView />
+				</ErrorBoundary>
+			</template>
+			<template v-else>
+				<div>{{ t("DataPage.work-in-progress") }}</div>
+			</template>
 		</template>
-
-		<div>
-			<ContentRenderer
-				v-if="content != null"
-				class="prose mx-auto w-full max-w-3xl"
-				:value="content"
-			>
-				<template #empty></template>
-			</ContentRenderer>
-		</div>
 	</MainContent>
 </template>
diff --git a/project.config.json b/project.config.json
@@ -4,24 +4,28 @@
 		"geojsonPoints": "#69c0ef",
 		"geojsonAreaCenterPoints": "#b8cf5b",
 		"entityColors": {
+			"stratigraphic_unit": "#9723c1",
 			"place": "#69c0ef",
-			"source": "#D60C19",
-			"person": "#ffca3a",
-			"group": "#f48c06",
-			"move": "#e85d04",
-			"event": "#ff595e",
-			"activity": "#9d0208",
 			"acquisition": "#6a040f",
-			"feature": "#b8cf5b",
-			"human_remains": "#3d0066",
-			"stratigraphic_unit": "#9723c1",
+			"activity": "#9d0208",
+			"move": "#e85d04",
 			"artifact": "#ee6c4d",
+			"human_remains": "#3d0066",
+			"person": "#ffca3a",
+			"feature": "#b8cf5b",
+			"event": "#ff595e",
+			"type": "#6a4c93",
+			"source": "#D60C19",
 			"file": "#9d4edd",
-			"type": "#6a4c93"
+			"group": "#f48c06"
 		},
 		"entityDefaultColor": "#666",
 		"disabledNodeColor": "rgb(400, 400, 400)"
 	},
+	"map": {
+		"startPage": true
+	},
+	"fullscreen": true,
 	"defaultLocale": "en",
 	"logos": {
 		"light": "/assets/images/logo.svg",

diff --git a/public/admin/config.yml b/public/admin/config.yml
@@ -47,9 +47,15 @@ collections:
                 widget: color
                 allowInput: true
 
-              - name: geojson
-                label: GeoJSON features
-                # hint: GeoJSON feaures color
+              - name: geojsonPoints
+                label: GeoJSON Location Points
+                # hint: GeoJSON points color
+                widget: color
+                allowInput: true
+
+              - name: geojsonAreaCenterPoints
+                label: GeoJSON Areas and their Centers
+                # hint: GeoJSON areas color
                 widget: color
                 allowInput: true
 
@@ -63,30 +69,22 @@ collections:
               - value: de
                 label: German
 
-          - name: logos
-            label: Logos
-            # hint: Logos
+          - name: fullscreen
+            label: Make the Website's Data Visualization Fullscreen per Default
+            # hint: Make the Website's Data Visualization Fullscreen per Default
+            widget: boolean
+            default: false
+
+          - name: map
+            label: Map Configuration
+            # hint: Map Configuration
             widget: object
             fields:
-              - name: light
-                label: Logo (light mode)
-                hint: Logo in light mode
-                widget: image
-
-              - name: dark
-                label: Logo (dark mode)
-                hint: Logo in dark mode
-                widget: image
-
-              - name: withTextLight
-                label: Logo with text (light mode)
-                hint: Logo with text in light mode
-                widget: image
-
-              - name: withTextDark
-                label: Logo with text (dark mode)
-                hint: Logo with text in dark mode
-                widget: image
+              - name: startPage
+                label: Make the Map the Start Page of the Website
+                # hint: Make the Map the Start Page of the Website
+                widget: boolean
+                default: false
 
           - name: imprint
             label: Imprint