feat: add introductory text to workflows pages (#77)

src/components/Workflows.vue

@@ -8,6 +8,7 @@
   import Filters from "@/components/workflows/filters/Filters.vue"
   import SelectButton from "primevue/selectbutton"
   import WorkflowsTimeline from "@/components/workflows/WorkflowsTimeline.vue"
+  import WorkflowsIntroSection from "@/components/workflows/WorkflowsIntroSection.vue"
   import filtersStore from "@/store/filters-store"
   import workflowsStore from "@/store/workflows-store"
   import type { ReleaseInfo } from "@/types";
@@ -78,6 +79,7 @@
     <div class="flex mb-6">
       <p class="text-amber-600 flex-grow-0 px-4 py-2 bg-amber-100 rounded-md text-sm"><span class="font-semibold">Disclaimer:</span> This is an experimental view.</p>
     </div>
+    <WorkflowsIntroSection :page="<'timeline'|'table'>selectedOption.value" class="mb-6"></WorkflowsIntroSection>
     <div class="flex mb-6">
       <SelectButton v-model="selectedOption" :options="options" optionLabel="name"></SelectButton>
       <Filters class="ml-auto"/>

src/components/workflows/WorkflowsIntroSection.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  page: "timeline" | "table"
+}>()
+</script>
+<template>
+  <div class="text-base font-light">
+    <p>{{ t('workflows_intro_text') }}</p>
+    <p v-if="page==='timeline'">{{ t('workflows_intro_additional_text_timeline') }}</p>
+    <br>
+    <i18n-t
+      keypath="workflows_intro_additional_infos"
+      tag="p"
+      scope="global"
+    >
+      <template v-slot:ocrd_link>
+        <a :href="t('ocrd_link')" class="underline hover:text-primary">{{ t("ocrd_link") }}</a>
+      </template>
+    </i18n-t>
+    <i18n-t
+      keypath="workflows_intro_gt_guidelines"
+      tag="p"
+      scope="global"
+    >
+      <template v-slot:gt_guidelines_link>
+        <a :href="t('gt_guidelines_link')" class="underline hover:text-primary">{{ t("gt_guidelines_link") }}</a>
+      </template>
+    </i18n-t>
+  </div>
+</template>

src/locales/de.json

@@ -61,5 +61,14 @@
   "negative": "negativ",
   "better": "besser",
   "equal": "gleich",
-  "worse": "schlechter"
+  "worse": "schlechter",
+  "percentage": "Prozent",
+  "pages": "Seiten",
+  "seconds": "Sekunden",
+  "workflows_intro_text": "Dies ist ein OCR-D-Benchmarking-Dashboard. Es gibt Ihnen einen Überblick über die verschiedenen Ground-Truth-Dokumente mit den jeweils durchgeführten Workflows und verwendeten Prozessoren sowie den daraus resultierenden Werten für verschiedene Metriken.",
+  "workflows_intro_additional_text_timeline": "Die Chronik zeigt den Verlauf der Werte für alle OCR-D-Basisversionen.",
+  "workflows_intro_additional_infos": "Weitere Informationen finden Sie auf der OCR-D-Website {ocrd_link}.",
+  "ocrd_link": "https://ocr-d.de/de/",
+  "workflows_intro_gt_guidelines": "Die OCR-D Ground Truth Richtlinien können unter {gt_guidelines_link} abgerufen werden.",
+  "gt_guidelines_link": "https://ocr-d.de/de/gt-guidelines/trans/"
 }

src/locales/en.json

@@ -58,5 +58,11 @@
   "worse": "worse",
   "percentage": "percentage",
   "pages": "pages",
-  "seconds": "seconds"
+  "seconds": "seconds",
+  "workflows_intro_text": "This is an OCR-D benchmarking dashboard. It gives you an overview of the various ground truth documents, with the respective workflows performed and processors used, and the resulting values for various metrics.",
+  "workflows_intro_additional_text_timeline": "The timeline shows the history of the values for all OCR-D core releases.",
+  "workflows_intro_additional_infos": "For more information see the OCR-D website {ocrd_link}.",
+  "ocrd_link": "https://ocr-d.de/en/",
+  "workflows_intro_gt_guidelines": "The OCR-D Ground Truth Guidelines can be found under {gt_guidelines_link}.",
+  "gt_guidelines_link": "https://ocr-d.de/en/gt-guidelines/trans/"
 }