From 3abdd97a1e08133d9e80366c0d792bcf325a6005 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Thu, 6 Feb 2025 17:14:55 +0100
Subject: [PATCH 1/8] WIP: display a places list on the places page

---
 composables/use-get-places.ts  |  19 ++++++
 package.json                   |   1 +
 pages/explore/places.vue       |  99 ++++++++++++++++++++++++++++--
 pnpm-lock.yaml                 | 108 ++++++++++++++++++++++++---------
 scripts/generate-api-client.ts |   2 +-
 types/api.ts                   |   4 ++
 6 files changed, 200 insertions(+), 33 deletions(-)
 create mode 100644 composables/use-get-places.ts

diff --git a/composables/use-get-places.ts b/composables/use-get-places.ts
new file mode 100644
index 0000000..f26f619
--- /dev/null
+++ b/composables/use-get-places.ts
@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/vue-query";
+
+import type { PlacesResults } from "@/types/api";
+
+export function useGetPlaces() {
+	const { $api } = useNuxtApp();
+	return useQuery({
+		queryKey: ["placelist"] as const,
+		async queryFn() {
+			const response = await $api["apis_api_apis_ontology.place_list"]({
+				queries: {
+					limit: 475,
+				},
+			});
+
+			return response as PlacesResults;
+		},
+	});
+}
diff --git a/package.json b/package.json
index 32b8f32..83f6848 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
 		"@nuxtjs/i18n": "^8.5.5",
 		"@nuxtjs/mdc": "^0.13.2",
 		"@radix-icons/vue": "^1.0.0",
+		"@sindresorhus/transliterate": "^1.6.0",
 		"@stefanprobst/netlify-cms-oauth-client": "^0.4.0",
 		"@tailwindcss/typography": "^0.5.15",
 		"@tanstack/vue-query": "^5.59.16",
diff --git a/pages/explore/places.vue b/pages/explore/places.vue
index c67df27..9db2080 100644
--- a/pages/explore/places.vue
+++ b/pages/explore/places.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
+import transliterate from "@sindresorhus/transliterate";
 import { useQuery } from "@tanstack/vue-query";
+import { SearchIcon } from "lucide-vue-next";
 
 defineRouteRules({
 	prerender: true,
@@ -7,12 +9,44 @@ defineRouteRules({
 
 const t = useTranslations();
 
+const { data, isPending } = useGetPlaces();
+
+const places = computed(() => {
+	const grouped = data.value?.results
+		.map((place) => ({
+			...place,
+			firstLetter: transliterate(place.name[0].toUpperCase())[0],
+		}))
+		.sort((a, b) => a.name.localeCompare(b.name, "de", { sensitivity: "base" }));
+
+	const result = grouped.reduce((acc, place) => {
+		const firstLetter = place.firstLetter;
+		if (!acc[firstLetter]) {
+			acc[firstLetter] = [];
+		}
+		acc[firstLetter].push(place);
+		return acc;
+	}, {});
+
+	console.log(result);
+
+	const sortedGroupedPlaces = Object.keys(result)
+		.sort()
+		.map((letter) => result[letter]);
+
+	return sortedGroupedPlaces;
+});
+
+const isLoading = computed(() => {
+	return isPending.value;
+});
+
 usePageMetadata({
 	title: t("PlacesPage"),
 });
 
-const { data: places, error: aboutError } = useQuery({
-	queryKey: ["places"] as const,
+const { data: placesIntro, error: aboutError } = useQuery({
+	queryKey: ["placesIntro"] as const,
 	queryFn() {
 		return queryContent("pages/places/places").findOne();
 	},
@@ -22,6 +56,10 @@ useErrorMessage(aboutError, {
 	notFound: t("PlacesPage.errors.404"),
 	unknown: t("PlacesPage.errors.500"),
 });
+
+const isMobile = computed(() => {
+	return window.innerWidth < 1024;
+});
 </script>
 
 <template>
@@ -36,8 +74,59 @@ useErrorMessage(aboutError, {
 			</Card>
 		</div>
 
-		<ContentRenderer v-if="places" class="prose max-w-3xl" :value="places">
-			<template #empty></template>
-		</ContentRenderer>
+		<div>
+			<ContentRenderer v-if="placesIntro" class="prose max-w-3xl" :value="placesIntro">
+				<template #empty></template>
+			</ContentRenderer>
+			<div v-if="!isLoading">
+				<nav
+					class="prose flex w-full max-w-3xl justify-center pt-4 text-frisch-indigo"
+					aria-label="Orte"
+				>
+					<a href="#10">WIP Navigation</a>
+				</nav>
+				<div v-for="(letterGroup, index) in places" :key="index" class="prose max-w-3xl pt-5">
+					<!-- Group of places by letter -->
+					<h2 :id="String(index)" class="mb-3 text-2xl font-bold text-frisch-indigo">
+						{{ String.fromCharCode(65 + index) }}
+					</h2>
+					<div v-if="letterGroup.length === 0" class="p-3 text-sm text-muted-foreground">
+						Keine Orte vorhanden.
+					</div>
+					<div v-else class="flex flex-wrap">
+						<div v-for="(place, letter) in letterGroup" :key="place.name" class="p-1 text-base">
+							<div class="flex gap-2">
+								{{ place.name }}
+								<NuxtLink
+									:href="{
+										path: '/search',
+										query: {
+											query: place.name,
+										},
+									}"
+								>
+									<span class="sr-only">Nach verknüpften Werken suchen</span>
+									<SearchIcon :size="16" class="mt-1 text-frisch-indigo" />
+								</NuxtLink>
+								<span v-if="place.latitude && place.longitude" class="flex items-center">
+									<span class="sr-only">Ort anzeigen</span>
+									<MapSidebar
+										class="cursor-pointer"
+										:is-mobile="isMobile"
+										:place="place"
+										relation="Ort"
+									/>
+								</span>
+
+								<span v-if="letter !== letterGroup.length - 1">|</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<Centered v-else class="pointer-events-none">
+				<LoadingSpinner />
+			</Centered>
+		</div>
 	</MainContent>
 </template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5679f4a..4c619dd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ importers:
       '@radix-icons/vue':
         specifier: ^1.0.0
         version: 1.0.0(vue@3.5.12(typescript@5.6.3))
+      '@sindresorhus/transliterate':
+        specifier: ^1.6.0
+        version: 1.6.0
       '@stefanprobst/netlify-cms-oauth-client':
         specifier: ^0.4.0
         version: 0.4.0
@@ -155,7 +158,7 @@ importers:
         version: 1.2.0(typescript@5.6.3)
       '@babel/plugin-transform-named-capturing-groups-regex':
         specifier: ^7.25.9
-        version: 7.25.9(@babel/core@7.25.9)
+        version: 7.25.9(@babel/core@7.26.7)
       '@nuxt/devtools':
         specifier: ^1.6.0
         version: 1.6.0(rollup@4.24.0)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
@@ -239,7 +242,7 @@ importers:
         version: 5.4.10(@types/node@20.17.0)(terser@5.36.0)
       vite-plugin-babel:
         specifier: ^1.3.0
-        version: 1.3.0(@babel/core@7.25.9)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))
+        version: 1.3.0(@babel/core@7.26.7)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))
       vue-tsc:
         specifier: ^2.1.6
         version: 2.1.6(typescript@5.6.3)
@@ -1643,6 +1646,10 @@ packages:
     resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
     engines: {node: '>=18'}
 
+  '@sindresorhus/transliterate@1.6.0':
+    resolution: {integrity: sha512-doH1gimEu3A46VX6aVxpHTeHrytJAG6HgdxntYnCFiIFHEM/ZGpG8KiZGBChchjQmG0XFIBL552kBTjVcMZXwQ==}
+    engines: {node: '>=12'}
+
   '@socket.io/component-emitter@3.1.2':
     resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
 
@@ -7205,9 +7212,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-create-regexp-features-plugin@7.26.3(@babel/core@7.25.9)':
+  '@babel/helper-create-class-features-plugin@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.7
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-member-expression-to-functions': 7.25.9
+      '@babel/helper-optimise-call-expression': 7.25.9
+      '@babel/helper-replace-supers': 7.25.9(@babel/core@7.26.7)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+      '@babel/traverse': 7.25.9
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-create-regexp-features-plugin@7.26.3(@babel/core@7.26.7)':
+    dependencies:
+      '@babel/core': 7.26.7
       '@babel/helper-annotate-as-pure': 7.25.9
       regexpu-core: 6.2.0
       semver: 6.3.1
@@ -7260,6 +7280,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/helper-replace-supers@7.25.9(@babel/core@7.26.7)':
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/helper-member-expression-to-functions': 7.25.9
+      '@babel/helper-optimise-call-expression': 7.25.9
+      '@babel/traverse': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-simple-access@7.25.9':
     dependencies:
       '@babel/traverse': 7.25.9
@@ -7334,24 +7363,34 @@ snapshots:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.25.9
 
+  '@babel/plugin-syntax-jsx@7.25.9(@babel/core@7.26.7)':
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.25.9
+
   '@babel/plugin-syntax-typescript@7.25.9(@babel/core@7.25.9)':
     dependencies:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-modules-commonjs@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-typescript@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-module-transforms': 7.25.9(@babel/core@7.25.9)
+      '@babel/core': 7.26.7
+      '@babel/helper-plugin-utils': 7.25.9
+
+  '@babel/plugin-transform-modules-commonjs@7.25.9(@babel/core@7.26.7)':
+    dependencies:
+      '@babel/core': 7.26.7
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.7)
       '@babel/helper-plugin-utils': 7.25.9
       '@babel/helper-simple-access': 7.25.9
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-named-capturing-groups-regex@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-named-capturing-groups-regex@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.25.9)
+      '@babel/core': 7.26.7
+      '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.7)
       '@babel/helper-plugin-utils': 7.25.9
 
   '@babel/plugin-transform-typescript@7.25.9(@babel/core@7.25.9)':
@@ -7365,14 +7404,25 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/preset-typescript@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-typescript@7.25.9(@babel/core@7.26.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.7
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.26.7)
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+      '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.26.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/preset-typescript@7.25.9(@babel/core@7.26.7)':
+    dependencies:
+      '@babel/core': 7.26.7
       '@babel/helper-plugin-utils': 7.25.9
       '@babel/helper-validator-option': 7.25.9
-      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-modules-commonjs': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-typescript': 7.25.9(@babel/core@7.25.9)
+      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-modules-commonjs': 7.25.9(@babel/core@7.26.7)
+      '@babel/plugin-transform-typescript': 7.25.9(@babel/core@7.26.7)
     transitivePeerDependencies:
       - supports-color
 
@@ -8688,6 +8738,10 @@ snapshots:
 
   '@sindresorhus/merge-streams@2.3.0': {}
 
+  '@sindresorhus/transliterate@1.6.0':
+    dependencies:
+      escape-string-regexp: 5.0.0
+
   '@socket.io/component-emitter@3.1.2': {}
 
   '@stefanprobst/lib@0.1.4': {}
@@ -10073,7 +10127,7 @@ snapshots:
     dependencies:
       '@vitest/spy': 2.1.3
       estree-walker: 3.0.3
-      magic-string: 0.30.12
+      magic-string: 0.30.17
     optionalDependencies:
       vite: 5.4.10(@types/node@20.17.0)(terser@5.36.0)
 
@@ -10089,7 +10143,7 @@ snapshots:
   '@vitest/snapshot@2.1.3':
     dependencies:
       '@vitest/pretty-format': 2.1.3
-      magic-string: 0.30.12
+      magic-string: 0.30.17
       pathe: 1.1.2
 
   '@vitest/spy@2.1.3':
@@ -10280,7 +10334,7 @@ snapshots:
 
   '@vuedx/template-ast-types@0.7.1':
     dependencies:
-      '@vue/compiler-core': 3.5.12
+      '@vue/compiler-core': 3.5.13
 
   '@vueuse/core@10.11.1(vue@3.5.12(typescript@5.6.3))':
     dependencies:
@@ -11186,12 +11240,12 @@ snapshots:
 
   detypes@0.8.0:
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/preset-typescript': 7.25.9(@babel/core@7.25.9)
+      '@babel/core': 7.26.7
+      '@babel/preset-typescript': 7.25.9(@babel/core@7.26.7)
       '@vue/compiler-dom': 3.5.12
       '@vue/compiler-sfc': 3.5.12
       '@vuedx/template-ast-types': 0.7.1
-      fast-glob: 3.3.2
+      fast-glob: 3.3.3
       prettier: 3.3.3
       typescript: 5.6.3
     transitivePeerDependencies:
@@ -13943,7 +13997,7 @@ snapshots:
   postcss-html@1.7.0:
     dependencies:
       htmlparser2: 8.0.2
-      js-tokens: 9.0.0
+      js-tokens: 9.0.1
       postcss: 8.4.47
       postcss-safe-parser: 6.0.0(postcss@8.4.47)
 
@@ -15573,9 +15627,9 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-babel@1.3.0(@babel/core@7.25.9)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)):
+  vite-plugin-babel@1.3.0(@babel/core@7.26.7)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)):
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.7
       vite: 5.4.10(@types/node@20.17.0)(terser@5.36.0)
 
   vite-plugin-checker@0.8.0(eslint@8.57.1)(optionator@0.9.4)(stylelint@16.10.0(typescript@5.6.3))(typescript@5.6.3)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))(vue-tsc@2.1.6(typescript@5.6.3)):
@@ -15655,10 +15709,10 @@ snapshots:
       '@vitest/spy': 2.1.3
       '@vitest/utils': 2.1.3
       chai: 5.1.2
-      debug: 4.3.7
-      magic-string: 0.30.12
+      debug: 4.4.0
+      magic-string: 0.30.17
       pathe: 1.1.2
-      std-env: 3.7.0
+      std-env: 3.8.0
       tinybench: 2.9.0
       tinyexec: 0.3.1
       tinypool: 1.0.1
diff --git a/scripts/generate-api-client.ts b/scripts/generate-api-client.ts
index b509c7f..ff4178f 100644
--- a/scripts/generate-api-client.ts
+++ b/scripts/generate-api-client.ts
@@ -19,7 +19,7 @@ async function generate() {
 			pathname: "/apis/swagger/schema",
 			searchParams: createUrlSearchParams({ format: "json" }),
 		}),
-		prefixes: ["/api/work-detail/{id}", "/api/work-preview"],
+		prefixes: ["/api/work-detail/{id}", "/api/work-preview", "/apis/api/apis_ontology.place"],
 		dist: outputFilePath,
 	};
 
diff --git a/types/api.ts b/types/api.ts
index 4b6d445..e170564 100644
--- a/types/api.ts
+++ b/types/api.ts
@@ -7,6 +7,8 @@ type Api = ApiOf<typeof api>;
 export type SearchFilters = ZodiosQueryParamsByPath<Api, "get", "/api/work-preview/">;
 export type SearchResults = ZodiosResponseByPath<Api, "get", "/api/work-preview/">;
 export type WorkDetail = ZodiosResponseByPath<Api, "get", "/api/work-detail/:id/">;
+export type PlacesFilters = ZodiosQueryParamsByPath<Api, "get", "/apis/api/apis_ontology.place/">;
+export type PlacesResults = ZodiosResponseByPath<Api, "get", "/apis/api/apis_ontology.place/">;
 
 export type SearchFacetLanguage = NonNullable<SearchFilters["facet_language"]>;
 export type SearchFacetTopic = NonNullable<SearchFilters["facet_topic"]>;
@@ -14,4 +16,6 @@ export type SearchFacetWorkType = NonNullable<SearchFilters["facet_work_type"]>;
 export type SearchFacetYearEnd = NonNullable<SearchFilters["end_year"]>;
 export type SearchFacetYearStart = NonNullable<SearchFilters["start_year"]>;
 
+export type Places = NonNullable<PlacesResults["results"]>;
+
 export type SearchResultFacets = NonNullable<SearchResults["facets"]>;

From 6230b67bb82572911b0af47b23a926b14b7821ed Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Mon, 10 Feb 2025 17:00:27 +0100
Subject: [PATCH 2/8] WIP: places data list view, layout break

---
 layouts/default.vue      |   2 +-
 nuxt.config.ts           |   6 ++
 pages/explore/places.vue | 122 +++++++++++++++++++++++++++++++--------
 pnpm-lock.yaml           |  48 ++++-----------
 styles/index.css         |   6 +-
 5 files changed, 120 insertions(+), 64 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index f568320..a0ed4eb 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -96,7 +96,7 @@ router.afterEach((to, from) => {
 </script>
 
 <template>
-	<div class="grid min-h-full grid-rows-[auto_1fr_auto] overflow-y-hidden antialiased">
+	<div class="grid h-full grid-rows-[auto_1fr_auto]">
 		<SkipLink target-id="main-content">{{ t("DefaultLayout.skip-to-main-content") }}</SkipLink>
 
 		<AppHeader />
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e2fbdd4..3e53f39 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -9,6 +9,12 @@ export default defineNuxtConfig({
 		"@": fileURLToPath(new URL("./", import.meta.url)),
 	},
 
+	router: {
+		options: {
+			scrollBehaviorType: "smooth",
+		},
+	},
+
 	app: {
 		layoutTransition: false,
 		pageTransition: false,
diff --git a/pages/explore/places.vue b/pages/explore/places.vue
index f5d4d9d..e393b25 100644
--- a/pages/explore/places.vue
+++ b/pages/explore/places.vue
@@ -1,40 +1,45 @@
 <script lang="ts" setup>
 import transliterate from "@sindresorhus/transliterate";
-import type { StaticPage } from "@/types/content";
 import { SearchIcon } from "lucide-vue-next";
 
+import type { StaticPage } from "@/types/content";
+
 defineRouteRules({
 	prerender: true,
 });
 
+const route = useRoute();
+
 const t = useTranslations();
 
 const { data, isPending } = useGetPlaces();
 
 const places = computed(() => {
-	const grouped = data.value?.results
+	if (!data.value?.results) return [];
+
+	// Step 1: Group places by their first letter
+	const grouped = data.value.results
 		.map((place) => ({
 			...place,
 			firstLetter: transliterate(place.name[0].toUpperCase())[0],
 		}))
-		.sort((a, b) => a.name.localeCompare(b.name, "de", { sensitivity: "base" }));
-
-	const result = grouped.reduce((acc, place) => {
-		const firstLetter = place.firstLetter;
-		if (!acc[firstLetter]) {
-			acc[firstLetter] = [];
-		}
-		acc[firstLetter].push(place);
-		return acc;
-	}, {});
-
-	console.log(result);
+		.sort((a, b) => a.name.localeCompare(b.name, "de", { sensitivity: "base" }))
+		.reduce((acc, place) => {
+			if (!acc[place.firstLetter]) {
+				acc[place.firstLetter] = [];
+			}
+			acc[place.firstLetter].push(place);
+			return acc;
+		}, {});
 
-	const sortedGroupedPlaces = Object.keys(result)
-		.sort()
-		.map((letter) => result[letter]);
+	// Step 2: Generate full alphabet array
+	const alphabet = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));
 
-	return sortedGroupedPlaces;
+	// Step 3: Ensure every letter is present, even if empty
+	return alphabet.map((letter) => ({
+		letter,
+		places: grouped[letter] || [],
+	}));
 });
 
 const isLoading = computed(() => {
@@ -55,21 +60,92 @@ const { data: page } = await useAsyncData("places-page", async () => {
 const isMobile = computed(() => {
 	return window.innerWidth < 1024;
 });
+
+watch(
+	() => {
+		return places.value;
+	},
+	async () => {
+		if (places.value && route.hash != null) {
+			await nextTick();
+			const el = document.getElementById(route.hash.replace("#", ""));
+			if (el) {
+				el.scrollIntoView();
+			}
+		}
+	},
+);
 </script>
 
 <template>
 	<MainContent
-		class="grid gap-8 p-4 md:grid-cols-[1fr_3fr] md:justify-center md:px-12 lg:py-8 2xl:grid-cols-[2fr_3fr]"
+		class="grid h-full gap-8 overflow-y-auto md:grid-cols-[1fr_3fr] md:justify-center md:px-12 2xl:grid-cols-[2fr_3fr]"
 	>
-		<div class="flex md:justify-end">
+		<div class="flex pt-4 md:justify-end lg:pt-8">
 			<Card class="aspect-square size-full bg-frisch-orange md:size-72">
 				<CardContent class="flex size-full py-4 text-2xl font-bold text-white">
 					<h1 class="uppercase">{{ t("PlacesPage.title") }}</h1>
 				</CardContent>
 			</Card>
 		</div>
-
-		<!-- eslint-disable-next-line vue/no-v-html -->
-		<section class="prose max-w-3xl" v-html="page?.body" />
+		<div>
+			<!-- eslint-disable-next-line vue/no-v-html -->
+			<section class="prose max-w-3xl pt-4 lg:pt-8" v-html="page?.body" />
+			<div v-if="!isLoading">
+				<nav
+					aria-label="Orte"
+					class="sticky top-0 z-10 mt-5 flex w-full max-w-3xl flex-wrap justify-center gap-2 bg-white py-4 transition-all duration-300"
+				>
+					<a
+						v-for="group in places"
+						:key="group.letter"
+						class="text-lg text-frisch-indigo no-underline hover:underline"
+						:href="`#letter-${group.letter}`"
+					>
+						{{ group.letter }}
+					</a>
+				</nav>
+				<div v-for="group in places" :key="group.letter" class="prose max-w-3xl pt-5">
+					<h2
+						:id="`letter-${group.letter}`"
+						class="mb-3 scroll-mt-20 text-2xl font-bold text-frisch-indigo"
+					>
+						{{ group.letter }}
+					</h2>
+					<span v-if="group.places.length === 0" class="text-sm text-muted-foreground">
+						Keine Orte vorhanden.
+					</span>
+					<div v-else class="flex flex-wrap">
+						<div v-for="(place, index) in group.places" :key="place.name" class="p-1 text-base">
+							<div class="flex gap-2">
+								{{ place.name }}
+								<NuxtLink
+									:href="{
+										path: '/search',
+										query: { query: place.name },
+									}"
+								>
+									<span class="sr-only">Nach verknüpften Werken suchen</span>
+									<SearchIcon class="mt-1 text-frisch-indigo" :size="16" />
+								</NuxtLink>
+								<span v-if="place.latitude && place.longitude" class="flex items-center">
+									<span class="sr-only">Ort anzeigen</span>
+									<MapSidebar
+										class="cursor-pointer"
+										:is-mobile="isMobile"
+										:place="place"
+										relation="Ort"
+									/>
+								</span>
+								<span v-if="index !== group.places.length - 1">|</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<Centered v-else class="pointer-events-none">
+				<LoadingSpinner />
+			</Centered>
+		</div>
 	</MainContent>
 </template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3181953..6fe8f34 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1628,6 +1628,10 @@ packages:
     resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
     engines: {node: '>=18'}
 
+  '@sindresorhus/transliterate@1.6.0':
+    resolution: {integrity: sha512-doH1gimEu3A46VX6aVxpHTeHrytJAG6HgdxntYnCFiIFHEM/ZGpG8KiZGBChchjQmG0XFIBL552kBTjVcMZXwQ==}
+    engines: {node: '>=12'}
+
   '@stefanprobst/lib@0.1.4':
     resolution: {integrity: sha512-zRW3DbXP7G49g+a66orQ3D5KqsWb5ejm32s4SXdrRHdLCNhp/bLY9jNY6g5GwlvYbiHQf8pDnP/JWYABcx01Zw==}
     engines: {node: '>=18', pnpm: '>=8'}
@@ -3655,8 +3659,8 @@ packages:
   fast-npm-meta@0.2.2:
     resolution: {integrity: sha512-E+fdxeaOQGo/CMWc9f4uHFfgUPJRAu7N3uB8GBvB3SDPAIWJK4GKyYhkAGFq+GYrcbKNfQIz5VVQyJnDuPPCrg==}
 
-  fast-npm-meta@0.3.0:
-    resolution: {integrity: sha512-/tsAcCWpUwA8jIm73Gx69xRSng2cjxU0bVLImFl/l9vZbeGHbvtiYZwmVEoCZKOrms9oBRaT3ODdezhNS83gIA==}
+  fast-npm-meta@0.3.1:
+    resolution: {integrity: sha512-W9gVhqRyz2O3j20I0nFmYEyaMC/046oaMRxxAQ0w6noakfbhpLmlIXmnnqSOmVVuJZ6x5hOPVwlv7PocuawZsw==}
 
   fast-redact@3.5.0:
     resolution: {integrity: sha512-dwsoQlS7h9hMeYUq1W++23NDcBLV4KqONnITDV9DjfS3q1SgDGVrBdvvTLUotWtPSD7asWDV9/CmsZPy8Hf70A==}
@@ -7253,23 +7257,6 @@ snapshots:
       '@babel/helper-member-expression-to-functions': 7.25.9
       '@babel/helper-optimise-call-expression': 7.25.9
       '@babel/traverse': 7.26.8
-      '@babel/traverse': 7.25.9
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-replace-supers@7.25.9(@babel/core@7.26.7)':
-    dependencies:
-      '@babel/core': 7.26.7
-      '@babel/helper-member-expression-to-functions': 7.25.9
-      '@babel/helper-optimise-call-expression': 7.25.9
-      '@babel/traverse': 7.25.9
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-simple-access@7.25.9':
-    dependencies:
-      '@babel/traverse': 7.25.9
-      '@babel/types': 7.25.9
     transitivePeerDependencies:
       - supports-color
 
@@ -7326,11 +7313,6 @@ snapshots:
       '@babel/core': 7.26.8
       '@babel/helper-plugin-utils': 7.26.5
 
-  '@babel/plugin-syntax-jsx@7.25.9(@babel/core@7.26.7)':
-    dependencies:
-      '@babel/core': 7.26.7
-      '@babel/helper-plugin-utils': 7.25.9
-
   '@babel/plugin-syntax-typescript@7.25.9(@babel/core@7.26.8)':
     dependencies:
       '@babel/core': 7.26.8
@@ -7345,16 +7327,8 @@ snapshots:
       - supports-color
 
   '@babel/plugin-transform-typescript@7.26.8(@babel/core@7.26.8)':
-  '@babel/plugin-transform-named-capturing-groups-regex@7.25.9(@babel/core@7.26.7)':
     dependencies:
       '@babel/core': 7.26.8
-      '@babel/core': 7.26.7
-      '@babel/helper-create-regexp-features-plugin': 7.26.3(@babel/core@7.26.7)
-      '@babel/helper-plugin-utils': 7.25.9
-
-  '@babel/plugin-transform-typescript@7.25.9(@babel/core@7.25.9)':
-    dependencies:
-      '@babel/core': 7.25.9
       '@babel/helper-annotate-as-pure': 7.25.9
       '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.26.8)
       '@babel/helper-plugin-utils': 7.26.5
@@ -8114,7 +8088,7 @@ snapshots:
       destr: 2.0.3
       error-stack-parser-es: 1.0.5
       execa: 9.5.2
-      fast-npm-meta: 0.3.0
+      fast-npm-meta: 0.3.1
       get-port-please: 3.1.2
       hookable: 5.5.3
       image-meta: 0.2.1
@@ -8649,6 +8623,10 @@ snapshots:
 
   '@sindresorhus/merge-streams@4.0.0': {}
 
+  '@sindresorhus/transliterate@1.6.0':
+    dependencies:
+      escape-string-regexp: 5.0.0
+
   '@stefanprobst/lib@0.1.4': {}
 
   '@stefanprobst/netlify-cms-oauth-client@0.4.0':
@@ -10056,7 +10034,6 @@ snapshots:
       '@vitest/spy': 3.0.5
       estree-walker: 3.0.3
       magic-string: 0.30.17
-      magic-string: 0.30.17
     optionalDependencies:
       vite: 6.1.0(@types/node@22.13.1)(jiti@2.4.2)(stylus@0.57.0)(terser@5.38.1)(tsx@4.19.2)(yaml@2.7.0)
 
@@ -10274,7 +10251,6 @@ snapshots:
   '@vuedx/template-ast-types@0.7.1':
     dependencies:
       '@vue/compiler-core': 3.5.13
-      '@vue/compiler-core': 3.5.13
 
   '@vueuse/core@10.11.1(vue@3.5.13(typescript@5.7.3))':
     dependencies:
@@ -11733,7 +11709,7 @@ snapshots:
 
   fast-npm-meta@0.2.2: {}
 
-  fast-npm-meta@0.3.0: {}
+  fast-npm-meta@0.3.1: {}
 
   fast-redact@3.5.0: {}
 
diff --git a/styles/index.css b/styles/index.css
index 07c318c..06ffdb0 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -2,6 +2,8 @@
 
 :root {
 	--font-body: "Inter Variable";
+
+	@apply antialiased;
 }
 
 html,
@@ -36,7 +38,3 @@ body,
 ::-webkit-scrollbar-thumb:hover {
 	background: #555;
 }
-
-#__nuxt {
-	overflow-y: scroll;
-}

From 2c4435d7e9b0acbb02af849109c5c5a88d02e2bf Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Tue, 11 Feb 2025 12:06:43 +0100
Subject: [PATCH 3/8] fix: layout break

---
 pages/explore/places.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/pages/explore/places.vue b/pages/explore/places.vue
index e393b25..b840995 100644
--- a/pages/explore/places.vue
+++ b/pages/explore/places.vue
@@ -120,6 +120,7 @@ watch(
 							<div class="flex gap-2">
 								{{ place.name }}
 								<NuxtLink
+									class="relative"
 									:href="{
 										path: '/search',
 										query: { query: place.name },
@@ -128,7 +129,7 @@ watch(
 									<span class="sr-only">Nach verknüpften Werken suchen</span>
 									<SearchIcon class="mt-1 text-frisch-indigo" :size="16" />
 								</NuxtLink>
-								<span v-if="place.latitude && place.longitude" class="flex items-center">
+								<span v-if="place.latitude && place.longitude" class="relative flex items-center">
 									<span class="sr-only">Ort anzeigen</span>
 									<MapSidebar
 										class="cursor-pointer"

From 84de078660c6af51a7da96a114125e36bfd9179d Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Tue, 11 Feb 2025 12:43:39 +0100
Subject: [PATCH 4/8] feat: display themes data list on the themes page

---
 components/detail-sidebar.vue  |  67 ++++++++++++++++++
 components/map-sidebar.vue     |   4 +-
 composables/use-get-topics.ts  |  19 +++++
 pages/explore/themes.vue       | 125 +++++++++++++++++++++++++++++++--
 scripts/generate-api-client.ts |   7 +-
 types/api.ts                   |   3 +
 6 files changed, 217 insertions(+), 8 deletions(-)
 create mode 100644 components/detail-sidebar.vue
 create mode 100644 composables/use-get-topics.ts

diff --git a/components/detail-sidebar.vue b/components/detail-sidebar.vue
new file mode 100644
index 0000000..af4c590
--- /dev/null
+++ b/components/detail-sidebar.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { EyeIcon } from "lucide-vue-next";
+
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
+
+const props = defineProps<{
+	source: {
+		name: string | undefined;
+		alternativeName: string | undefined;
+		description: string | undefined;
+	};
+	sourceType: string;
+	isMobile: boolean;
+}>();
+</script>
+
+<template>
+	<div v-if="props.isMobile">
+		<Drawer>
+			<DrawerTrigger class="w-full">
+				<EyeIcon class="text-frisch-orange" :size="16" />
+			</DrawerTrigger>
+			<DrawerContent>
+				<div class="flex items-center gap-1 px-4 pt-2 text-sm">
+					{{ props.sourceType }}
+				</div>
+				<h1 class="px-4 pb-2 text-lg font-semibold">{{ props.source.name }}</h1>
+				<h2 v-if="props.source.alternativeName" class="px-4 pb-2 font-normal text-muted-foreground">
+					{{ props.source.name }}
+				</h2>
+				<div class="px-4 py-2">
+					<div class="py-2 text-base font-semibold text-black">Beschreibung</div>
+					<div class="text-black">
+						{{ props.source.description }}
+					</div>
+				</div>
+			</DrawerContent>
+		</Drawer>
+	</div>
+	<div v-else>
+		<Sheet>
+			<SheetTrigger as-child>
+				<EyeIcon class="text-frisch-orange" :size="16" />
+			</SheetTrigger>
+			<SheetContent>
+				<div class="flex items-center gap-1 text-sm">
+					{{ props.sourceType }}
+				</div>
+				<SheetTitle class="pb-2">
+					{{ props.source.name }}
+					<h2
+						v-if="props.source.alternativeName"
+						class="px-4 pb-2 font-normal text-muted-foreground"
+					>
+						{{ props.source.name }}
+					</h2></SheetTitle
+				>
+				<SheetDescription>
+					<div class="py-2 text-base font-semibold text-black">Beschreibung</div>
+					<div class="text-black">
+						{{ props.source.description }}
+					</div>
+				</SheetDescription>
+			</SheetContent>
+		</Sheet>
+	</div>
+</template>
diff --git a/components/map-sidebar.vue b/components/map-sidebar.vue
index 4741fde..458450f 100644
--- a/components/map-sidebar.vue
+++ b/components/map-sidebar.vue
@@ -47,7 +47,7 @@ function setPlaceQuery(id: number | undefined) {
 						/>
 					</div>
 					<div class="py-2 text-base font-semibold text-black">Beschreibung</div>
-					<div v-if="props.place.description !== ''">
+					<div v-if="props.place.description !== ''" class="text-black">
 						{{ props.place.description }}
 					</div>
 					<div v-else class="text-sm text-muted-foreground">Keine Beschreibung vorhanden.</div>
@@ -76,7 +76,7 @@ function setPlaceQuery(id: number | undefined) {
 						/>
 					</div>
 					<div class="py-2 text-base font-semibold text-black">Beschreibung</div>
-					<div v-if="props.place.description !== ''">
+					<div v-if="props.place.description !== ''" class="text-black">
 						{{ props.place.description }}
 					</div>
 					<div v-else>Keine Beschreibung vorhanden.</div>
diff --git a/composables/use-get-topics.ts b/composables/use-get-topics.ts
new file mode 100644
index 0000000..6af9d8d
--- /dev/null
+++ b/composables/use-get-topics.ts
@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/vue-query";
+
+import type { TopicsResults } from "@/types/api";
+
+export function useGetTopics() {
+	const { $api } = useNuxtApp();
+	return useQuery({
+		queryKey: ["topicslist"] as const,
+		async queryFn() {
+			const response = await $api["apis_api_apis_ontology.topic_list"]({
+				queries: {
+					limit: 475,
+				},
+			});
+
+			return response as TopicsResults;
+		},
+	});
+}
diff --git a/pages/explore/themes.vue b/pages/explore/themes.vue
index c17d8af..b141378 100644
--- a/pages/explore/themes.vue
+++ b/pages/explore/themes.vue
@@ -1,37 +1,152 @@
 <script lang="ts" setup>
+import transliterate from "@sindresorhus/transliterate";
+import { SearchIcon } from "lucide-vue-next";
+
 import type { StaticPage } from "@/types/content";
 
 defineRouteRules({
 	prerender: true,
 });
 
+const route = useRoute();
+
 const t = useTranslations();
 
 usePageMetadata({
 	title: t("ThemesPage.meta.title"),
 });
 
+const { data, isPending } = useGetTopics();
+
+const topics = computed(() => {
+	if (!data.value?.results) return [];
+
+	// Step 1: Group places by their first letter
+	const grouped = data.value.results
+		.map((topic) => ({
+			...topic,
+			firstLetter: transliterate(topic.name[0].toUpperCase())[0],
+		}))
+		.sort((a, b) => a.name.localeCompare(b.name, "de", { sensitivity: "base" }))
+		.reduce((acc, topic) => {
+			if (!acc[topic.firstLetter]) {
+				acc[topic.firstLetter] = [];
+			}
+			acc[topic.firstLetter].push(topic);
+			return acc;
+		}, {});
+
+	// Step 2: Generate full alphabet array
+	const alphabet = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));
+
+	// Step 3: Ensure every letter is present, even if empty
+	return alphabet.map((letter) => ({
+		letter,
+		topics: grouped[letter] || [],
+	}));
+});
+
+const isLoading = computed(() => {
+	return isPending.value;
+});
+
 const { data: page } = await useAsyncData("themes-page", async () => {
 	return $fetch<StaticPage>("/api/markdown-file", {
 		body: JSON.stringify({ path: "pages/themes/themes.md" }),
 		method: "POST",
 	});
 });
+
+const isMobile = computed(() => {
+	return window.innerWidth < 1024;
+});
+
+watch(
+	() => {
+		return topics.value;
+	},
+	async () => {
+		if (topics.value && route.hash != null) {
+			await nextTick();
+			const el = document.getElementById(route.hash.replace("#", ""));
+			if (el) {
+				el.scrollIntoView();
+			}
+		}
+	},
+);
 </script>
 
 <template>
 	<MainContent
-		class="grid gap-8 p-4 py-8 md:grid-cols-[1fr_3fr] md:justify-center md:px-12 2xl:grid-cols-[2fr_3fr]"
+		class="grid h-full gap-8 overflow-y-auto md:grid-cols-[1fr_3fr] md:justify-center md:px-12 2xl:grid-cols-[2fr_3fr]"
 	>
-		<div class="flex md:justify-end">
+		<div class="flex pt-4 md:justify-end lg:pt-8">
 			<Card class="aspect-square size-full bg-frisch-orange md:size-72">
 				<CardContent class="flex size-full py-4 text-2xl font-bold text-white">
 					<h1 class="uppercase">{{ t("ThemesPage.title") }}</h1>
 				</CardContent>
 			</Card>
 		</div>
-
-		<!-- eslint-disable-next-line vue/no-v-html -->
-		<div class="prose max-w-3xl" v-html="page?.body" />
+		<div>
+			<!-- eslint-disable-next-line vue/no-v-html -->
+			<section class="prose max-w-3xl pt-4 lg:pt-8" v-html="page?.body" />
+			<div v-if="!isLoading">
+				<nav
+					aria-label="Orte"
+					class="sticky top-0 z-10 mt-5 flex w-full max-w-3xl flex-wrap justify-center gap-2 bg-white py-4 transition-all duration-300"
+				>
+					<a
+						v-for="group in topics"
+						:key="group.letter"
+						class="text-lg text-frisch-indigo no-underline hover:underline"
+						:href="`#letter-${group.letter}`"
+					>
+						{{ group.letter }}
+					</a>
+				</nav>
+				<div v-for="group in topics" :key="group.letter" class="prose max-w-3xl pt-5">
+					<h2
+						:id="`letter-${group.letter}`"
+						class="mb-3 scroll-mt-20 text-2xl font-bold text-frisch-indigo"
+					>
+						{{ group.letter }}
+					</h2>
+					<span v-if="group.topics.length === 0" class="text-sm text-muted-foreground">
+						Keine Themen vorhanden.
+					</span>
+					<div v-else class="flex flex-wrap">
+						<div v-for="(topic, index) in group.topics" :key="topic.name" class="p-1 text-base">
+							<div class="flex gap-2">
+								{{ topic.name }}
+								<NuxtLink
+									class="relative"
+									:href="{
+										path: '/search',
+										query: { topic: topic.name },
+									}"
+								>
+									<span class="sr-only">Nach verknüpften Werken suchen</span>
+									<SearchIcon class="mt-1 text-frisch-indigo" :size="16" />
+								</NuxtLink>
+								<span v-if="topic.description" class="relative flex items-center">
+									<span class="sr-only">Thema anzeigen</span>
+									<DetailSidebar
+										class="cursor-pointer"
+										:is-mobile="isMobile"
+										:source="topic"
+										source-type="Thema"
+									/>
+								</span>
+								<span v-if="index !== group.topics.length - 1">|</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<Centered v-else class="pointer-events-none">
+				<LoadingSpinner />
+			</Centered>
+		</div>
 	</MainContent>
 </template>
diff --git a/scripts/generate-api-client.ts b/scripts/generate-api-client.ts
index 6f80734..444e2b0 100644
--- a/scripts/generate-api-client.ts
+++ b/scripts/generate-api-client.ts
@@ -19,7 +19,12 @@ async function generate() {
 			pathname: "/apis/swagger/schema",
 			searchParams: createUrlSearchParams({ format: "json" }),
 		}),
-		prefixes: ["/api/work-detail/{id}", "/api/work-preview", "/apis/api/apis_ontology.place"],
+		prefixes: [
+			"/api/work-detail/{id}",
+			"/api/work-preview",
+			"/apis/api/apis_ontology.place",
+			"/apis/api/apis_ontology.topic",
+		],
 		dist: outputFilePath,
 	};
 
diff --git a/types/api.ts b/types/api.ts
index e170564..8139a3d 100644
--- a/types/api.ts
+++ b/types/api.ts
@@ -9,6 +9,8 @@ export type SearchResults = ZodiosResponseByPath<Api, "get", "/api/work-preview/
 export type WorkDetail = ZodiosResponseByPath<Api, "get", "/api/work-detail/:id/">;
 export type PlacesFilters = ZodiosQueryParamsByPath<Api, "get", "/apis/api/apis_ontology.place/">;
 export type PlacesResults = ZodiosResponseByPath<Api, "get", "/apis/api/apis_ontology.place/">;
+export type TopicsFilters = ZodiosQueryParamsByPath<Api, "get", "/apis/api/apis_ontology.place/">;
+export type TopicsResults = ZodiosResponseByPath<Api, "get", "/apis/api/apis_ontology.place/">;
 
 export type SearchFacetLanguage = NonNullable<SearchFilters["facet_language"]>;
 export type SearchFacetTopic = NonNullable<SearchFilters["facet_topic"]>;
@@ -17,5 +19,6 @@ export type SearchFacetYearEnd = NonNullable<SearchFilters["end_year"]>;
 export type SearchFacetYearStart = NonNullable<SearchFilters["start_year"]>;
 
 export type Places = NonNullable<PlacesResults["results"]>;
+export type Topics = NonNullable<TopicsResults["results"]>;
 
 export type SearchResultFacets = NonNullable<SearchResults["facets"]>;

From 4365e3aba8522c69ec13be38a5b7c73d4c3fb0f4 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Tue, 11 Feb 2025 17:40:55 +0100
Subject: [PATCH 5/8] feat: display research perspectives data list on the
 research perspectives page

---
 composables/use-get-research-perspectives.ts |  19 +++
 pages/explore/research-aspects.vue           | 128 ++++++++++++++++++-
 scripts/generate-api-client.ts               |   1 +
 types/api.ts                                 |   3 +
 4 files changed, 146 insertions(+), 5 deletions(-)
 create mode 100644 composables/use-get-research-perspectives.ts

diff --git a/composables/use-get-research-perspectives.ts b/composables/use-get-research-perspectives.ts
new file mode 100644
index 0000000..d3b0cf4
--- /dev/null
+++ b/composables/use-get-research-perspectives.ts
@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/vue-query";
+
+import type { ResearchResults } from "@/types/api";
+
+export function useGetPerspectives() {
+	const { $api } = useNuxtApp();
+	return useQuery({
+		queryKey: ["perspectivesList"] as const,
+		async queryFn() {
+			const response = await $api["apis_api_apis_ontology.researchperspective_list"]({
+				queries: {
+					limit: 475,
+				},
+			});
+
+			return response as ResearchResults;
+		},
+	});
+}
diff --git a/pages/explore/research-aspects.vue b/pages/explore/research-aspects.vue
index 8e906da..ba7a73d 100644
--- a/pages/explore/research-aspects.vue
+++ b/pages/explore/research-aspects.vue
@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+import transliterate from "@sindresorhus/transliterate";
+import { SearchIcon } from "lucide-vue-next";
+
 import type { StaticPage } from "@/types/content";
 
 defineRouteRules({
@@ -6,32 +9,147 @@ defineRouteRules({
 });
 
 const t = useTranslations();
+const route = useRoute();
 
 usePageMetadata({
 	title: t("ResearchAspectsPage.meta.title"),
 });
 
+const { data, isPending } = useGetPerspectives();
+
+const perspectives = computed(() => {
+	if (!data.value?.results) return [];
+
+	// Step 1: Group places by their first letter
+	const grouped = data.value.results
+		.map((perspective) => ({
+			...perspective,
+			firstLetter: transliterate(perspective.name[0].toUpperCase())[0],
+		}))
+		.sort((a, b) => a.name.localeCompare(b.name, "de", { sensitivity: "base" }))
+		.reduce((acc, perspective) => {
+			if (!acc[perspective.firstLetter]) {
+				acc[perspective.firstLetter] = [];
+			}
+			acc[perspective.firstLetter].push(perspective);
+			return acc;
+		}, {});
+
+	// Step 2: Generate full alphabet array
+	const alphabet = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));
+
+	// Step 3: Ensure every letter is present, even if empty
+	return alphabet.map((letter) => ({
+		letter,
+		perspectives: grouped[letter] || [],
+	}));
+});
+
+const isLoading = computed(() => {
+	return isPending.value;
+});
+
 const { data: page } = await useAsyncData("research-aspects-page", async () => {
 	return $fetch<StaticPage>("/api/markdown-file", {
 		body: JSON.stringify({ path: "pages/research-aspects/research-aspects.md" }),
 		method: "POST",
 	});
 });
+
+const isMobile = computed(() => {
+	return window.innerWidth < 1024;
+});
+
+watch(
+	() => {
+		return perspectives.value;
+	},
+	async () => {
+		if (perspectives.value && route.hash != null) {
+			await nextTick();
+			const el = document.getElementById(route.hash.replace("#", ""));
+			if (el) {
+				el.scrollIntoView();
+			}
+		}
+	},
+);
 </script>
 
 <template>
 	<MainContent
-		class="grid gap-8 p-4 md:grid-cols-[1fr_3fr] md:justify-center md:px-12 lg:py-8 2xl:grid-cols-[2fr_3fr]"
+		class="grid h-full gap-8 overflow-y-auto md:grid-cols-[1fr_3fr] md:justify-center md:px-12 2xl:grid-cols-[2fr_3fr]"
 	>
-		<div class="flex md:justify-end">
+		<div class="flex pt-4 md:justify-end lg:pt-8">
 			<Card class="aspect-square size-full bg-frisch-orange md:size-72">
 				<CardContent class="flex size-full py-4 text-2xl font-bold text-white">
 					<h1 class="uppercase">{{ t("ResearchAspectsPage.title") }}</h1>
 				</CardContent>
 			</Card>
 		</div>
-
-		<!-- eslint-disable-next-line vue/no-v-html -->
-		<div class="prose max-w-3xl" v-html="page?.body" />
+		<div>
+			<!-- eslint-disable-next-line vue/no-v-html -->
+			<section class="prose max-w-3xl pt-4 lg:pt-8" v-html="page?.body" />
+			<div v-if="!isLoading">
+				<nav
+					aria-label="Orte"
+					class="sticky top-0 z-10 mt-5 flex w-full max-w-3xl flex-wrap justify-center gap-2 bg-white py-4 transition-all duration-300"
+				>
+					<a
+						v-for="group in perspectives"
+						:key="group.letter"
+						class="text-lg text-frisch-indigo no-underline hover:underline"
+						:href="`#letter-${group.letter}`"
+					>
+						{{ group.letter }}
+					</a>
+				</nav>
+				<div v-for="group in perspectives" :key="group.letter" class="prose max-w-3xl pt-5">
+					<h2
+						:id="`letter-${group.letter}`"
+						class="mb-3 scroll-mt-20 text-2xl font-bold text-frisch-indigo"
+					>
+						{{ group.letter }}
+					</h2>
+					<span v-if="group.perspectives.length === 0" class="text-sm text-muted-foreground">
+						Keine Forschungshinsichten vorhanden.
+					</span>
+					<div v-else class="flex flex-wrap">
+						<div
+							v-for="(perspective, index) in group.perspectives"
+							:key="perspective.name"
+							class="p-1 text-base"
+						>
+							<div class="flex gap-2">
+								{{ perspective.name }}
+								<NuxtLink
+									class="relative"
+									:href="{
+										path: '/search',
+										query: { query: perspective.name },
+									}"
+								>
+									<span class="sr-only">Nach verknüpften Werken suchen</span>
+									<SearchIcon class="mt-1 text-frisch-indigo" :size="16" />
+								</NuxtLink>
+								<span v-if="perspective.description" class="relative flex items-center">
+									<span class="sr-only">Forschungshinsicht anzeigen</span>
+									<DetailSidebar
+										class="cursor-pointer"
+										:is-mobile="isMobile"
+										:source="perspective"
+										source-type="Forschungshinsicht"
+									/>
+								</span>
+								<span v-if="index !== group.perspectives.length - 1">|</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<Centered v-else class="pointer-events-none">
+				<LoadingSpinner />
+			</Centered>
+		</div>
 	</MainContent>
 </template>
diff --git a/scripts/generate-api-client.ts b/scripts/generate-api-client.ts
index 444e2b0..51ebbf2 100644
--- a/scripts/generate-api-client.ts
+++ b/scripts/generate-api-client.ts
@@ -24,6 +24,7 @@ async function generate() {
 			"/api/work-preview",
 			"/apis/api/apis_ontology.place",
 			"/apis/api/apis_ontology.topic",
+			"/apis/api/apis_ontology.researchperspective",
 		],
 		dist: outputFilePath,
 	};
diff --git a/types/api.ts b/types/api.ts
index 8139a3d..aec87f8 100644
--- a/types/api.ts
+++ b/types/api.ts
@@ -11,6 +11,8 @@ export type PlacesFilters = ZodiosQueryParamsByPath<Api, "get", "/apis/api/apis_
 export type PlacesResults = ZodiosResponseByPath<Api, "get", "/apis/api/apis_ontology.place/">;
 export type TopicsFilters = ZodiosQueryParamsByPath<Api, "get", "/apis/api/apis_ontology.place/">;
 export type TopicsResults = ZodiosResponseByPath<Api, "get", "/apis/api/apis_ontology.place/">;
+export type ResearchFilters = ZodiosQueryParamsByPath<Api, "get", "/apis/api/apis_ontology.place/">;
+export type ResearchResults = ZodiosResponseByPath<Api, "get", "/apis/api/apis_ontology.place/">;
 
 export type SearchFacetLanguage = NonNullable<SearchFilters["facet_language"]>;
 export type SearchFacetTopic = NonNullable<SearchFilters["facet_topic"]>;
@@ -20,5 +22,6 @@ export type SearchFacetYearStart = NonNullable<SearchFilters["start_year"]>;
 
 export type Places = NonNullable<PlacesResults["results"]>;
 export type Topics = NonNullable<TopicsResults["results"]>;
+export type ResearchPerspectives = NonNullable<ResearchResults["results"]>;
 
 export type SearchResultFacets = NonNullable<SearchResults["facets"]>;

From 3328f3b21dad2c657deafbb38f58ac87d4b680b7 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Wed, 12 Feb 2025 13:31:55 +0100
Subject: [PATCH 6/8] feat: display glossary entries on the glossary page

---
 composables/use-get-glossary.ts |  19 +++++
 pages/explore/glossary.vue      | 126 ++++++++++++++++++++++++++++++--
 scripts/generate-api-client.ts  |   1 +
 types/api.ts                    |   3 +
 4 files changed, 143 insertions(+), 6 deletions(-)
 create mode 100644 composables/use-get-glossary.ts

diff --git a/composables/use-get-glossary.ts b/composables/use-get-glossary.ts
new file mode 100644
index 0000000..983d36f
--- /dev/null
+++ b/composables/use-get-glossary.ts
@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/vue-query";
+
+import type { GlossaryResults } from "@/types/api";
+
+export function useGetGlossary() {
+	const { $api } = useNuxtApp();
+	return useQuery({
+		queryKey: ["glossarylist"] as const,
+		async queryFn() {
+			const response = await $api["apis_api_apis_ontology.glossar_list"]({
+				queries: {
+					limit: 500,
+				},
+			});
+
+			return response as GlossaryResults;
+		},
+	});
+}
diff --git a/pages/explore/glossary.vue b/pages/explore/glossary.vue
index b218246..7dc5f5c 100644
--- a/pages/explore/glossary.vue
+++ b/pages/explore/glossary.vue
@@ -1,37 +1,151 @@
 <script lang="ts" setup>
+import transliterate from "@sindresorhus/transliterate";
+import { SearchIcon } from "lucide-vue-next";
+
 import type { StaticPage } from "@/types/content";
 
 defineRouteRules({
 	prerender: true,
 });
 
+const route = useRoute();
 const t = useTranslations();
 
 usePageMetadata({
 	title: t("GlossaryPage.meta.title"),
 });
 
-const { data: glossary } = await useAsyncData("glossary-page", async () => {
+const { data, isPending } = useGetGlossary();
+
+const glossary = computed(() => {
+	if (!data.value?.results) return [];
+
+	// Step 1: Group places by their first letter
+	const grouped = data.value.results
+		.map((entry) => ({
+			...entry,
+			firstLetter: transliterate(entry.name[0].toUpperCase())[0],
+		}))
+		.sort((a, b) => a.name.localeCompare(b.name, "de", { sensitivity: "base" }))
+		.reduce((acc, entry) => {
+			if (!acc[entry.firstLetter]) {
+				acc[entry.firstLetter] = [];
+			}
+			acc[entry.firstLetter].push(entry);
+			return acc;
+		}, {});
+
+	// Step 2: Generate full alphabet array
+	const alphabet = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));
+
+	// Step 3: Ensure every letter is present, even if empty
+	return alphabet.map((letter) => ({
+		letter,
+		entries: grouped[letter] || [],
+	}));
+});
+
+const isLoading = computed(() => {
+	return isPending.value;
+});
+
+const { data: page } = await useAsyncData("glossary-page", async () => {
 	return $fetch<StaticPage>("/api/markdown-file", {
 		body: JSON.stringify({ path: "pages/glossary/glossary.md" }),
 		method: "POST",
 	});
 });
+
+const isMobile = computed(() => {
+	return window.innerWidth < 1024;
+});
+
+watch(
+	() => {
+		return glossary.value;
+	},
+	async () => {
+		if (glossary.value && route.hash != null) {
+			await nextTick();
+			const el = document.getElementById(route.hash.replace("#", ""));
+			if (el) {
+				el.scrollIntoView();
+			}
+		}
+	},
+);
 </script>
 
 <template>
 	<MainContent
-		class="grid gap-8 p-4 md:grid-cols-[1fr_3fr] md:justify-center md:px-12 lg:py-8 2xl:grid-cols-[2fr_3fr]"
+		class="grid h-full gap-8 overflow-y-auto md:grid-cols-[1fr_3fr] md:justify-center md:px-12 2xl:grid-cols-[2fr_3fr]"
 	>
-		<div class="flex md:justify-end">
+		<div class="flex pt-4 md:justify-end lg:pt-8">
 			<Card class="aspect-square size-full bg-frisch-orange md:size-72">
 				<CardContent class="flex size-full py-4 text-2xl font-bold text-white">
 					<h1 class="uppercase">{{ t("GlossaryPage.title") }}</h1>
 				</CardContent>
 			</Card>
 		</div>
-
-		<!-- eslint-disable-next-line vue/no-v-html -->
-		<div class="prose max-w-3xl" v-html="glossary?.body" />
+		<div>
+			<!-- eslint-disable-next-line vue/no-v-html -->
+			<section class="prose max-w-3xl pt-4 lg:pt-8" v-html="page?.body" />
+			<div v-if="!isLoading">
+				<nav
+					aria-label="Orte"
+					class="sticky top-0 z-10 mt-5 flex w-full max-w-3xl flex-wrap justify-center gap-2 bg-white py-4 transition-all duration-300"
+				>
+					<a
+						v-for="group in glossary"
+						:key="group.letter"
+						class="text-lg text-frisch-indigo no-underline hover:underline"
+						:href="`#letter-${group.letter}`"
+					>
+						{{ group.letter }}
+					</a>
+				</nav>
+				<div v-for="group in glossary" :key="group.letter" class="prose max-w-3xl pt-5">
+					<h2
+						:id="`letter-${group.letter}`"
+						class="mb-3 scroll-mt-20 text-2xl font-bold text-frisch-indigo"
+					>
+						{{ group.letter }}
+					</h2>
+					<span v-if="group.entries.length === 0" class="text-sm text-muted-foreground">
+						Keine Glossareinträge vorhanden.
+					</span>
+					<div v-else class="flex flex-wrap">
+						<div v-for="(entry, index) in group.entries" :key="entry.name" class="p-1 text-base">
+							<div class="flex gap-2">
+								{{ entry.name }}
+								<NuxtLink
+									class="relative"
+									:href="{
+										path: '/search',
+										query: { query: entry.name },
+									}"
+								>
+									<span class="sr-only">Nach verknüpften Werken suchen</span>
+									<SearchIcon class="mt-1 text-frisch-indigo" :size="16" />
+								</NuxtLink>
+								<span v-if="entry.description" class="relative flex items-center">
+									<span class="sr-only">Glossareintrag anzeigen</span>
+									<DetailSidebar
+										class="cursor-pointer"
+										:is-mobile="isMobile"
+										:source="entry"
+										source-type="Glossareintrag"
+									/>
+								</span>
+								<span v-if="index !== group.entries.length - 1">|</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<Centered v-else class="pointer-events-none">
+				<LoadingSpinner />
+			</Centered>
+		</div>
 	</MainContent>
 </template>
diff --git a/scripts/generate-api-client.ts b/scripts/generate-api-client.ts
index 51ebbf2..ce89c7d 100644
--- a/scripts/generate-api-client.ts
+++ b/scripts/generate-api-client.ts
@@ -25,6 +25,7 @@ async function generate() {
 			"/apis/api/apis_ontology.place",
 			"/apis/api/apis_ontology.topic",
 			"/apis/api/apis_ontology.researchperspective",
+			"/apis/api/apis_ontology.glossar",
 		],
 		dist: outputFilePath,
 	};
diff --git a/types/api.ts b/types/api.ts
index aec87f8..8182cd8 100644
--- a/types/api.ts
+++ b/types/api.ts
@@ -13,6 +13,8 @@ export type TopicsFilters = ZodiosQueryParamsByPath<Api, "get", "/apis/api/apis_
 export type TopicsResults = ZodiosResponseByPath<Api, "get", "/apis/api/apis_ontology.place/">;
 export type ResearchFilters = ZodiosQueryParamsByPath<Api, "get", "/apis/api/apis_ontology.place/">;
 export type ResearchResults = ZodiosResponseByPath<Api, "get", "/apis/api/apis_ontology.place/">;
+export type GlossaryFilters = ZodiosQueryParamsByPath<Api, "get", "/apis/api/apis_ontology.place/">;
+export type GlossaryResults = ZodiosResponseByPath<Api, "get", "/apis/api/apis_ontology.place/">;
 
 export type SearchFacetLanguage = NonNullable<SearchFilters["facet_language"]>;
 export type SearchFacetTopic = NonNullable<SearchFilters["facet_topic"]>;
@@ -23,5 +25,6 @@ export type SearchFacetYearStart = NonNullable<SearchFilters["start_year"]>;
 export type Places = NonNullable<PlacesResults["results"]>;
 export type Topics = NonNullable<TopicsResults["results"]>;
 export type ResearchPerspectives = NonNullable<ResearchResults["results"]>;
+export type GlossaryEntries = NonNullable<ResearchResults["results"]>;
 
 export type SearchResultFacets = NonNullable<SearchResults["facets"]>;

From cd4877537a89d33996a71b4f963fbc51407a9d8a Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Wed, 12 Feb 2025 14:50:24 +0100
Subject: [PATCH 7/8] chore: fetch data results with limit as long as a next
 url exists

---
 components/detail-sidebar.vue                | 13 +++++---
 components/map-sidebar.vue                   | 10 +++---
 composables/use-get-glossary.ts              | 32 +++++++++++++++-----
 composables/use-get-places.ts                | 30 +++++++++++++-----
 composables/use-get-research-perspectives.ts | 30 +++++++++++++-----
 composables/use-get-topics.ts                | 32 +++++++++++++++-----
 pages/explore/glossary.vue                   | 22 ++++++--------
 pages/explore/places.vue                     | 22 ++++++--------
 pages/explore/research-aspects.vue           | 22 ++++++--------
 pages/explore/themes.vue                     | 22 ++++++--------
 types/api.ts                                 | 26 +++++++++++-----
 11 files changed, 166 insertions(+), 95 deletions(-)

diff --git a/components/detail-sidebar.vue b/components/detail-sidebar.vue
index af4c590..0397419 100644
--- a/components/detail-sidebar.vue
+++ b/components/detail-sidebar.vue
@@ -5,9 +5,9 @@ import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
 
 const props = defineProps<{
 	source: {
-		name: string | undefined;
-		alternativeName: string | undefined;
-		description: string | undefined;
+		name?: string | undefined;
+		alternative_name?: string | undefined;
+		description?: string | undefined;
 	};
 	sourceType: string;
 	isMobile: boolean;
@@ -25,7 +25,10 @@ const props = defineProps<{
 					{{ props.sourceType }}
 				</div>
 				<h1 class="px-4 pb-2 text-lg font-semibold">{{ props.source.name }}</h1>
-				<h2 v-if="props.source.alternativeName" class="px-4 pb-2 font-normal text-muted-foreground">
+				<h2
+					v-if="props.source.alternative_name"
+					class="px-4 pb-2 font-normal text-muted-foreground"
+				>
 					{{ props.source.name }}
 				</h2>
 				<div class="px-4 py-2">
@@ -49,7 +52,7 @@ const props = defineProps<{
 				<SheetTitle class="pb-2">
 					{{ props.source.name }}
 					<h2
-						v-if="props.source.alternativeName"
+						v-if="props.source.alternative_name"
 						class="px-4 pb-2 font-normal text-muted-foreground"
 					>
 						{{ props.source.name }}
diff --git a/components/map-sidebar.vue b/components/map-sidebar.vue
index 458450f..843a471 100644
--- a/components/map-sidebar.vue
+++ b/components/map-sidebar.vue
@@ -7,11 +7,11 @@ const router = useRouter();
 
 const props = defineProps<{
 	place: {
-		id: number | undefined;
-		name: string | undefined;
-		longitude: number | null | undefined;
-		latitude: number | null | undefined;
-		description: string | undefined;
+		id?: number | undefined;
+		name?: string | undefined;
+		longitude?: number | null | undefined;
+		latitude?: number | null | undefined;
+		description?: string | undefined;
 	};
 	relation: string;
 	isMobile: boolean;
diff --git a/composables/use-get-glossary.ts b/composables/use-get-glossary.ts
index 983d36f..4c1d029 100644
--- a/composables/use-get-glossary.ts
+++ b/composables/use-get-glossary.ts
@@ -1,19 +1,35 @@
 import { useQuery } from "@tanstack/vue-query";
 
-import type { GlossaryResults } from "@/types/api";
+import type { GlossaryEntries } from "@/types/api";
 
 export function useGetGlossary() {
 	const { $api } = useNuxtApp();
+
 	return useQuery({
-		queryKey: ["glossarylist"] as const,
+		queryKey: ["glossaryList"] as const,
 		async queryFn() {
-			const response = await $api["apis_api_apis_ontology.glossar_list"]({
-				queries: {
-					limit: 500,
-				},
-			});
+			let allResults: GlossaryEntries = [];
+			let nextUrl: boolean;
+			let offset = 0;
+			const limit = 500;
+
+			do {
+				const response = await $api["apis_api_apis_ontology.glossar_list"]({
+					queries: { limit, offset },
+				});
+
+				allResults = [...allResults, ...response.results];
+
+				if (response.next) {
+					const url = new URL(response.next);
+					offset = Number(url.searchParams.get("offset")) || offset + limit;
+					nextUrl = true;
+				} else {
+					nextUrl = false;
+				}
+			} while (nextUrl);
 
-			return response as GlossaryResults;
+			return { count: allResults.length, results: allResults };
 		},
 	});
 }
diff --git a/composables/use-get-places.ts b/composables/use-get-places.ts
index f26f619..5228b80 100644
--- a/composables/use-get-places.ts
+++ b/composables/use-get-places.ts
@@ -1,19 +1,35 @@
 import { useQuery } from "@tanstack/vue-query";
 
-import type { PlacesResults } from "@/types/api";
+import type { Places } from "@/types/api";
 
 export function useGetPlaces() {
 	const { $api } = useNuxtApp();
+
 	return useQuery({
 		queryKey: ["placelist"] as const,
 		async queryFn() {
-			const response = await $api["apis_api_apis_ontology.place_list"]({
-				queries: {
-					limit: 475,
-				},
-			});
+			let allResults: Places = [];
+			let nextUrl: boolean;
+			let offset = 0;
+			const limit = 500;
+
+			do {
+				const response = await $api["apis_api_apis_ontology.place_list"]({
+					queries: { limit, offset },
+				});
+
+				allResults = [...allResults, ...response.results];
+
+				if (response.next) {
+					const url = new URL(response.next);
+					offset = Number(url.searchParams.get("offset")) || offset + limit;
+					nextUrl = true;
+				} else {
+					nextUrl = false;
+				}
+			} while (nextUrl);
 
-			return response as PlacesResults;
+			return { count: allResults.length, results: allResults };
 		},
 	});
 }
diff --git a/composables/use-get-research-perspectives.ts b/composables/use-get-research-perspectives.ts
index d3b0cf4..e04f46b 100644
--- a/composables/use-get-research-perspectives.ts
+++ b/composables/use-get-research-perspectives.ts
@@ -1,19 +1,35 @@
 import { useQuery } from "@tanstack/vue-query";
 
-import type { ResearchResults } from "@/types/api";
+import type { ResearchPerspectives } from "@/types/api";
 
 export function useGetPerspectives() {
 	const { $api } = useNuxtApp();
+
 	return useQuery({
 		queryKey: ["perspectivesList"] as const,
 		async queryFn() {
-			const response = await $api["apis_api_apis_ontology.researchperspective_list"]({
-				queries: {
-					limit: 475,
-				},
-			});
+			let allResults: ResearchPerspectives = [];
+			let nextUrl: boolean;
+			let offset = 0;
+			const limit = 500;
+
+			do {
+				const response = await $api["apis_api_apis_ontology.researchperspective_list"]({
+					queries: { limit, offset },
+				});
+
+				allResults = [...allResults, ...response.results];
+
+				if (response.next) {
+					const url = new URL(response.next);
+					offset = Number(url.searchParams.get("offset")) || offset + limit;
+					nextUrl = true;
+				} else {
+					nextUrl = false;
+				}
+			} while (nextUrl);
 
-			return response as ResearchResults;
+			return { count: allResults.length, results: allResults };
 		},
 	});
 }
diff --git a/composables/use-get-topics.ts b/composables/use-get-topics.ts
index 6af9d8d..1af434d 100644
--- a/composables/use-get-topics.ts
+++ b/composables/use-get-topics.ts
@@ -1,19 +1,35 @@
 import { useQuery } from "@tanstack/vue-query";
 
-import type { TopicsResults } from "@/types/api";
+import type { Topics } from "@/types/api";
 
 export function useGetTopics() {
 	const { $api } = useNuxtApp();
+
 	return useQuery({
-		queryKey: ["topicslist"] as const,
+		queryKey: ["topiclist"] as const,
 		async queryFn() {
-			const response = await $api["apis_api_apis_ontology.topic_list"]({
-				queries: {
-					limit: 475,
-				},
-			});
+			let allResults: Topics = [];
+			let nextUrl: boolean;
+			let offset = 0;
+			const limit = 500;
+
+			do {
+				const response = await $api["apis_api_apis_ontology.topic_list"]({
+					queries: { limit, offset },
+				});
+
+				allResults = [...allResults, ...response.results];
+
+				if (response.next) {
+					const url = new URL(response.next);
+					offset = Number(url.searchParams.get("offset")) || offset + limit;
+					nextUrl = true;
+				} else {
+					nextUrl = false;
+				}
+			} while (nextUrl);
 
-			return response as TopicsResults;
+			return { count: allResults.length, results: allResults };
 		},
 	});
 }
diff --git a/pages/explore/glossary.vue b/pages/explore/glossary.vue
index 7dc5f5c..bfc2cff 100644
--- a/pages/explore/glossary.vue
+++ b/pages/explore/glossary.vue
@@ -2,6 +2,7 @@
 import transliterate from "@sindresorhus/transliterate";
 import { SearchIcon } from "lucide-vue-next";
 
+import type { GlossaryEntries } from "@/types/api";
 import type { StaticPage } from "@/types/content";
 
 defineRouteRules({
@@ -20,25 +21,22 @@ const { data, isPending } = useGetGlossary();
 const glossary = computed(() => {
 	if (!data.value?.results) return [];
 
-	// Step 1: Group places by their first letter
 	const grouped = data.value.results
-		.map((entry) => ({
-			...entry,
-			firstLetter: transliterate(entry.name[0].toUpperCase())[0],
-		}))
+		.filter((entry): entry is { name: string } => Boolean(entry?.name))
+		.map((entry) => {
+			const firstLetter = entry.name?.charAt(0)?.toUpperCase() ?? "#";
+			return { ...entry, firstLetter: transliterate(firstLetter)[0] ?? "#" };
+		})
 		.sort((a, b) => a.name.localeCompare(b.name, "de", { sensitivity: "base" }))
-		.reduce((acc, entry) => {
-			if (!acc[entry.firstLetter]) {
-				acc[entry.firstLetter] = [];
-			}
-			acc[entry.firstLetter].push(entry);
+		.reduce<Record<string, GlossaryEntries>>((acc, entry) => {
+			const key = entry.firstLetter || "#";
+			if (!acc[key]) acc[key] = [];
+			acc[key].push(entry);
 			return acc;
 		}, {});
 
-	// Step 2: Generate full alphabet array
 	const alphabet = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));
 
-	// Step 3: Ensure every letter is present, even if empty
 	return alphabet.map((letter) => ({
 		letter,
 		entries: grouped[letter] || [],
diff --git a/pages/explore/places.vue b/pages/explore/places.vue
index b840995..b37cf83 100644
--- a/pages/explore/places.vue
+++ b/pages/explore/places.vue
@@ -2,6 +2,7 @@
 import transliterate from "@sindresorhus/transliterate";
 import { SearchIcon } from "lucide-vue-next";
 
+import type { Places } from "@/types/api";
 import type { StaticPage } from "@/types/content";
 
 defineRouteRules({
@@ -17,25 +18,22 @@ const { data, isPending } = useGetPlaces();
 const places = computed(() => {
 	if (!data.value?.results) return [];
 
-	// Step 1: Group places by their first letter
 	const grouped = data.value.results
-		.map((place) => ({
-			...place,
-			firstLetter: transliterate(place.name[0].toUpperCase())[0],
-		}))
+		.filter((place): place is { name: string } => Boolean(place?.name))
+		.map((place) => {
+			const firstLetter = place.name?.charAt(0)?.toUpperCase() ?? "#";
+			return { ...place, firstLetter: transliterate(firstLetter)[0] ?? "#" };
+		})
 		.sort((a, b) => a.name.localeCompare(b.name, "de", { sensitivity: "base" }))
-		.reduce((acc, place) => {
-			if (!acc[place.firstLetter]) {
-				acc[place.firstLetter] = [];
-			}
-			acc[place.firstLetter].push(place);
+		.reduce<Record<string, Places>>((acc, place) => {
+			const key = place.firstLetter || "#";
+			if (!acc[key]) acc[key] = [];
+			acc[key].push(place);
 			return acc;
 		}, {});
 
-	// Step 2: Generate full alphabet array
 	const alphabet = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));
 
-	// Step 3: Ensure every letter is present, even if empty
 	return alphabet.map((letter) => ({
 		letter,
 		places: grouped[letter] || [],
diff --git a/pages/explore/research-aspects.vue b/pages/explore/research-aspects.vue
index ba7a73d..5986012 100644
--- a/pages/explore/research-aspects.vue
+++ b/pages/explore/research-aspects.vue
@@ -2,6 +2,7 @@
 import transliterate from "@sindresorhus/transliterate";
 import { SearchIcon } from "lucide-vue-next";
 
+import type { ResearchPerspectives } from "@/types/api";
 import type { StaticPage } from "@/types/content";
 
 defineRouteRules({
@@ -20,25 +21,22 @@ const { data, isPending } = useGetPerspectives();
 const perspectives = computed(() => {
 	if (!data.value?.results) return [];
 
-	// Step 1: Group places by their first letter
 	const grouped = data.value.results
-		.map((perspective) => ({
-			...perspective,
-			firstLetter: transliterate(perspective.name[0].toUpperCase())[0],
-		}))
+		.filter((perspective): perspective is { name: string } => Boolean(perspective?.name))
+		.map((perspective) => {
+			const firstLetter = perspective.name?.charAt(0)?.toUpperCase() ?? "#";
+			return { ...perspective, firstLetter: transliterate(firstLetter)[0] ?? "#" };
+		})
 		.sort((a, b) => a.name.localeCompare(b.name, "de", { sensitivity: "base" }))
-		.reduce((acc, perspective) => {
-			if (!acc[perspective.firstLetter]) {
-				acc[perspective.firstLetter] = [];
-			}
-			acc[perspective.firstLetter].push(perspective);
+		.reduce<Record<string, ResearchPerspectives>>((acc, perspective) => {
+			const key = perspective.firstLetter || "#";
+			if (!acc[key]) acc[key] = [];
+			acc[key].push(perspective);
 			return acc;
 		}, {});
 
-	// Step 2: Generate full alphabet array
 	const alphabet = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));
 
-	// Step 3: Ensure every letter is present, even if empty
 	return alphabet.map((letter) => ({
 		letter,
 		perspectives: grouped[letter] || [],
diff --git a/pages/explore/themes.vue b/pages/explore/themes.vue
index b141378..135744c 100644
--- a/pages/explore/themes.vue
+++ b/pages/explore/themes.vue
@@ -2,6 +2,7 @@
 import transliterate from "@sindresorhus/transliterate";
 import { SearchIcon } from "lucide-vue-next";
 
+import type { Topics } from "@/types/api";
 import type { StaticPage } from "@/types/content";
 
 defineRouteRules({
@@ -21,25 +22,22 @@ const { data, isPending } = useGetTopics();
 const topics = computed(() => {
 	if (!data.value?.results) return [];
 
-	// Step 1: Group places by their first letter
 	const grouped = data.value.results
-		.map((topic) => ({
-			...topic,
-			firstLetter: transliterate(topic.name[0].toUpperCase())[0],
-		}))
+		.filter((topic): topic is { name: string } => Boolean(topic?.name))
+		.map((topic) => {
+			const firstLetter = topic.name?.charAt(0)?.toUpperCase() ?? "#";
+			return { ...topic, firstLetter: transliterate(firstLetter)[0] ?? "#" };
+		})
 		.sort((a, b) => a.name.localeCompare(b.name, "de", { sensitivity: "base" }))
-		.reduce((acc, topic) => {
-			if (!acc[topic.firstLetter]) {
-				acc[topic.firstLetter] = [];
-			}
-			acc[topic.firstLetter].push(topic);
+		.reduce<Record<string, Topics>>((acc, topic) => {
+			const key = topic.firstLetter || "#";
+			if (!acc[key]) acc[key] = [];
+			acc[key].push(topic);
 			return acc;
 		}, {});
 
-	// Step 2: Generate full alphabet array
 	const alphabet = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));
 
-	// Step 3: Ensure every letter is present, even if empty
 	return alphabet.map((letter) => ({
 		letter,
 		topics: grouped[letter] || [],
diff --git a/types/api.ts b/types/api.ts
index 8182cd8..70ff78f 100644
--- a/types/api.ts
+++ b/types/api.ts
@@ -9,12 +9,24 @@ export type SearchResults = ZodiosResponseByPath<Api, "get", "/api/work-preview/
 export type WorkDetail = ZodiosResponseByPath<Api, "get", "/api/work-detail/:id/">;
 export type PlacesFilters = ZodiosQueryParamsByPath<Api, "get", "/apis/api/apis_ontology.place/">;
 export type PlacesResults = ZodiosResponseByPath<Api, "get", "/apis/api/apis_ontology.place/">;
-export type TopicsFilters = ZodiosQueryParamsByPath<Api, "get", "/apis/api/apis_ontology.place/">;
-export type TopicsResults = ZodiosResponseByPath<Api, "get", "/apis/api/apis_ontology.place/">;
-export type ResearchFilters = ZodiosQueryParamsByPath<Api, "get", "/apis/api/apis_ontology.place/">;
-export type ResearchResults = ZodiosResponseByPath<Api, "get", "/apis/api/apis_ontology.place/">;
-export type GlossaryFilters = ZodiosQueryParamsByPath<Api, "get", "/apis/api/apis_ontology.place/">;
-export type GlossaryResults = ZodiosResponseByPath<Api, "get", "/apis/api/apis_ontology.place/">;
+export type TopicsFilters = ZodiosQueryParamsByPath<Api, "get", "/apis/api/apis_ontology.topic/">;
+export type TopicsResults = ZodiosResponseByPath<Api, "get", "/apis/api/apis_ontology.topic/">;
+export type ResearchFilters = ZodiosQueryParamsByPath<
+	Api,
+	"get",
+	"/apis/api/apis_ontology.researchperspective/"
+>;
+export type ResearchResults = ZodiosResponseByPath<
+	Api,
+	"get",
+	"/apis/api/apis_ontology.researchperspective/"
+>;
+export type GlossaryFilters = ZodiosQueryParamsByPath<
+	Api,
+	"get",
+	"/apis/api/apis_ontology.glossar/"
+>;
+export type GlossaryResults = ZodiosResponseByPath<Api, "get", "/apis/api/apis_ontology.glossar/">;
 
 export type SearchFacetLanguage = NonNullable<SearchFilters["facet_language"]>;
 export type SearchFacetTopic = NonNullable<SearchFilters["facet_topic"]>;
@@ -25,6 +37,6 @@ export type SearchFacetYearStart = NonNullable<SearchFilters["start_year"]>;
 export type Places = NonNullable<PlacesResults["results"]>;
 export type Topics = NonNullable<TopicsResults["results"]>;
 export type ResearchPerspectives = NonNullable<ResearchResults["results"]>;
-export type GlossaryEntries = NonNullable<ResearchResults["results"]>;
+export type GlossaryEntries = NonNullable<GlossaryResults["results"]>;
 
 export type SearchResultFacets = NonNullable<SearchResults["facets"]>;

From e97fc6c714543512e7c2192aebfa976f2a2276b5 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Wed, 12 Feb 2025 14:56:45 +0100
Subject: [PATCH 8/8] style: add padding to data lists

---
 pages/explore/glossary.vue         | 2 +-
 pages/explore/places.vue           | 2 +-
 pages/explore/research-aspects.vue | 2 +-
 pages/explore/themes.vue           | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/pages/explore/glossary.vue b/pages/explore/glossary.vue
index bfc2cff..ef4876d 100644
--- a/pages/explore/glossary.vue
+++ b/pages/explore/glossary.vue
@@ -88,7 +88,7 @@ watch(
 		<div>
 			<!-- eslint-disable-next-line vue/no-v-html -->
 			<section class="prose max-w-3xl pt-4 lg:pt-8" v-html="page?.body" />
-			<div v-if="!isLoading">
+			<div v-if="!isLoading" class="pb-4 lg:pb-8">
 				<nav
 					aria-label="Orte"
 					class="sticky top-0 z-10 mt-5 flex w-full max-w-3xl flex-wrap justify-center gap-2 bg-white py-4 transition-all duration-300"
diff --git a/pages/explore/places.vue b/pages/explore/places.vue
index b37cf83..c2d136c 100644
--- a/pages/explore/places.vue
+++ b/pages/explore/places.vue
@@ -89,7 +89,7 @@ watch(
 		<div>
 			<!-- eslint-disable-next-line vue/no-v-html -->
 			<section class="prose max-w-3xl pt-4 lg:pt-8" v-html="page?.body" />
-			<div v-if="!isLoading">
+			<div v-if="!isLoading" class="pb-4 lg:pb-8">
 				<nav
 					aria-label="Orte"
 					class="sticky top-0 z-10 mt-5 flex w-full max-w-3xl flex-wrap justify-center gap-2 bg-white py-4 transition-all duration-300"
diff --git a/pages/explore/research-aspects.vue b/pages/explore/research-aspects.vue
index 5986012..1a8fffc 100644
--- a/pages/explore/research-aspects.vue
+++ b/pages/explore/research-aspects.vue
@@ -88,7 +88,7 @@ watch(
 		<div>
 			<!-- eslint-disable-next-line vue/no-v-html -->
 			<section class="prose max-w-3xl pt-4 lg:pt-8" v-html="page?.body" />
-			<div v-if="!isLoading">
+			<div v-if="!isLoading" class="pb-4 lg:pb-8">
 				<nav
 					aria-label="Orte"
 					class="sticky top-0 z-10 mt-5 flex w-full max-w-3xl flex-wrap justify-center gap-2 bg-white py-4 transition-all duration-300"
diff --git a/pages/explore/themes.vue b/pages/explore/themes.vue
index 135744c..9bae360 100644
--- a/pages/explore/themes.vue
+++ b/pages/explore/themes.vue
@@ -89,7 +89,7 @@ watch(
 		<div>
 			<!-- eslint-disable-next-line vue/no-v-html -->
 			<section class="prose max-w-3xl pt-4 lg:pt-8" v-html="page?.body" />
-			<div v-if="!isLoading">
+			<div v-if="!isLoading" class="pb-4 lg:pb-8">
 				<nav
 					aria-label="Orte"
 					class="sticky top-0 z-10 mt-5 flex w-full max-w-3xl flex-wrap justify-center gap-2 bg-white py-4 transition-all duration-300"