First draft

components/citation.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import "@citation-js/plugin-csl";
+
+import { Cite, type CSLItemType, type CSLName } from "@citation-js/core";
+
+interface Props {
+	author: Array<CSLName>;
+	type?: string;
+	title?: string;
+	editor?: Array<CSLName>;
+	containerTitle?: string;
+	issued?: Array<number>;
+	url?: string;
+}
+const props = defineProps<Props>();
+const date = new Date();
+
+const entry = new Cite({
+	type: props.type as CSLItemType,
+	editor: props.editor as Array<CSLName>,
+	"container-title": props.containerTitle,
+	title: props.title,
+	author: props.author as Array<CSLName>,
+	issued: { "date-parts": [props.issued] },
+});
+
+const citation = entry.format("bibliography", {
+	format: "html",
+	template: "apa",
+	// prepend (entry) {
+	//   return `[${entry.id}]: `
+	// },
+	append: ` [Available online at ${props.url}.
+	Accessed on ${String(date.getDate()).padStart(2, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getFullYear())}.]`,
+});
+</script>
+
+<template>
+	<div v-html="citation" />
+</template>

components/feature-window-content.vue

@@ -1,21 +1,28 @@
 <script lang="ts" setup>
 import type { FeatureWindowItem } from "@/types/global.d";
 
+const { simpleItems } = useTEIHeaders();
+
 interface Props {
 	params: FeatureWindowItem["params"];
 }
 
 const props = defineProps<Props>();
 const { params } = toRefs(props);
 const tooltip: Ref<HTMLElement | null> = ref(null);
+const { data: config } = useProjectInfo();
 
 const { data, isPending, isPlaceholderData } = useFeatureById(params);
 const openNewWindowFromAnchor = useAnchorClickHandler();
 const { showTooltip, tooltipContent, handleHoverTooltip } = useHoverTooltipHandler(tooltip);
-
+const header = simpleItems.value.find((i) => i.id === params.value.textId);
 const isLoading = computed(() => {
 	return isPending.value || isPlaceholderData.value;
 });
+
+const author = computed(() => {
+	return header.author;
+});
 </script>
 
 <template>
@@ -26,6 +33,13 @@ const isLoading = computed(() => {
 		<!-- eslint-disable vue/no-v-html,
 			vuejs-accessibility/mouse-events-have-key-events,
 			vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
+		<Citation
+			:author="author"
+			:container-title="config?.projectConfig?.title"
+			:editor="config?.projectConfig?.editor"
+			type="entry"
+			:url="config?.projectConfig?.baseURIPublic"
+		></Citation>
 
 		<div
 			v-if="data"

composables/use-tei-headers.ts

@@ -133,6 +133,32 @@ const extractMetadata = function (
 			name = monogram;
 		}
 		if (name) template.resp = name;
+	} else if (item.teiHeader.fileDesc.titleStmt.respStmts?.at(0)?.persName && corpusMetadata) {
+		template.author = item.teiHeader.fileDesc.titleStmt.respStmts
+			.map((resp) => {
+				if (resp.resp.$ === "author" && resp.persName) {
+					const respPerson = corpusMetadata.fileDesc.titleStmt.respStmts?.find(
+						(resp2: RespStmt) => {
+							if (resp2.persName) {
+								return resp.persName["@ref"] === resp.persName["@ref"];
+							} else {
+								return false;
+							}
+						},
+					);
+
+					if (!respPerson) {
+						return false;
+					} else {
+						const persName = respPerson.persName as PersName;
+						return {
+							given: persName["@forename"],
+							family: persName["@surname"],
+						};
+					}
+				}
+			})
+			.filter((i) => i);
 	}
 
 	template.person = extractPersons(item, corpusMetadata);

package.json

@@ -40,6 +40,8 @@
 	},
 	"dependencies": {
 		"@acdh-oeaw/lib": "^0.1.12",
+		"@citation-js/core": "^0.7.14",
+		"@citation-js/plugin-csl": "^0.7.14",
 		"@elastic/ecs-pino-format": "^1.5.0",
 		"@fontsource-variable/roboto-flex": "^5.0.15",
 		"@fortawesome/fontawesome-free": "^6.5.2",