From da9161e5157bb5d6b6d8199433b237592564b946 Mon Sep 17 00:00:00 2001
From: Tomasz Pluskiewicz <tpluscode@users.noreply.github.com>
Date: Fri, 5 Sep 2025 12:48:25 +0200
Subject: [PATCH 01/20] feat: rough new showcase form

---
 opendata.swiss/ui/app/components/OdsInput.vue | 150 ++++++++++++++++++
 .../ui/app/components/OdsTextarea.vue         | 109 +++++++++++++
 .../app/components/dataset/OdsMultiSelect.vue |  14 +-
 opendata.swiss/ui/app/piveau/search.ts        |  20 +++
 opendata.swiss/ui/pages/showcases/new.vue     |  65 ++++++++
 5 files changed, 357 insertions(+), 1 deletion(-)
 create mode 100644 opendata.swiss/ui/app/components/OdsInput.vue
 create mode 100644 opendata.swiss/ui/app/components/OdsTextarea.vue
 create mode 100644 opendata.swiss/ui/pages/showcases/new.vue

diff --git a/opendata.swiss/ui/app/components/OdsInput.vue b/opendata.swiss/ui/app/components/OdsInput.vue
new file mode 100644
index 0000000..0579045
--- /dev/null
+++ b/opendata.swiss/ui/app/components/OdsInput.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="form__group__input">
+    <label v-if="label" :for="id" :class="labelClasses">
+      {{ label }}<span v-if="required" class="form__group__required" />
+    </label>
+    <input
+      :id="id"
+      :type="type"
+      :class="classes"
+      :name="id"
+      :placeholder="placeholder"
+      :value="value"
+      :min="min"
+      :max="max"
+      :step="step"
+      :pattern="pattern"
+      :autocomplete="autocomplete"
+      :readonly="readonly"
+      :required="required"
+      @input.stop="onInput"
+    />
+    <div
+      v-if="message"
+      class="badge badge--sm"
+      :class="`badge--${messageType}`"
+    >
+      {{ message }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type PropType } from 'vue'
+
+const props = defineProps({
+  type: {
+    type: String,
+    validator: (prop) =>
+      [
+        'color',
+        'date',
+        'datetime-local',
+        'email',
+        'file',
+        'month',
+        'number',
+        'password',
+        'range',
+        'search',
+        'tel',
+        'text',
+        'time',
+        'url',
+        'week',
+        'submit',
+      ].includes(prop as string),
+    default: () => 'text',
+  },
+  variant: {
+    type: String,
+    validator: (prop) => ['outline', 'negative'].includes(prop as string),
+    default: () => 'outline',
+  },
+  message: {
+    type: String,
+    default: () => undefined,
+  },
+  onInput: {
+    type: Function as PropType<(event: Event) => void>,
+    default: () => ({}),
+  },
+  messageType: {
+    type: String,
+    validator: (prop) =>
+      ['error', 'warning', 'success', 'info'].includes(prop as string),
+    default: () => 'error',
+  },
+  size: {
+    type: String,
+    validator: (prop) => ['sm', 'base', 'lg'].includes(prop as string),
+    default: () => undefined,
+  },
+  label: {
+    type: String,
+    default: () => undefined,
+  },
+  hideLabel: {
+    type: Boolean,
+    default: () => false,
+  },
+  placeholder: {
+    type: String,
+    default: () => undefined,
+  },
+  value: {
+    type: String,
+    default: () => undefined,
+  },
+  id: {
+    type: String,
+    default: () => undefined,
+  },
+  min: {
+    type: Number,
+    default: () => undefined,
+  },
+  max: {
+    type: Number,
+    default: () => undefined,
+  },
+  step: {
+    type: Number,
+    default: () => undefined,
+  },
+  pattern: {
+    type: String,
+    default: () => undefined,
+  },
+  autocomplete: {
+    type: String,
+    default: () => undefined,
+  },
+  readonly: {
+    type: Boolean,
+    default: () => false,
+  },
+  required: {
+    type: Boolean,
+    default: () => false,
+  },
+})
+
+const classes = computed(() => {
+  let base = ''
+  if (props.variant) base += `input--${props.variant} `
+  if (props.size) base += `input--${props.size} `
+  if (props.message) base += `input--${props.messageType} `
+  if (props.type === 'submit') base += 'input--submit'
+  return base
+})
+
+const labelClasses = computed(() => {
+  let base = ''
+  if (props.variant === 'negative') base += `text--negative `
+  if (props.size) base += `text--${props.size} `
+  if (props.hideLabel) base += `sr-only `
+  if (props.required) base += `text--asterisk `
+  return base
+})
+</script>
diff --git a/opendata.swiss/ui/app/components/OdsTextarea.vue b/opendata.swiss/ui/app/components/OdsTextarea.vue
new file mode 100644
index 0000000..73a3929
--- /dev/null
+++ b/opendata.swiss/ui/app/components/OdsTextarea.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="form__group__input">
+    <label v-if="label" :for="id" :class="labelClasses">
+      {{ label }}
+    </label>
+    <textarea
+      :id="id"
+      :class="classes"
+      :name="id"
+      :rows="rows"
+      :cols="cols"
+      :maxlength="maxlength"
+      :minlength="minlength"
+      :placeholder="placeholder"
+      :required="required"
+    />
+    <div
+      v-if="message"
+      class="badge badge--sm"
+      :class="`badge--${messageType}`"
+    >
+      {{ message }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  variant: {
+    type: String,
+    validator: (prop) => ['outline', 'negative'].includes(prop as string),
+    default: () => undefined,
+  },
+  size: {
+    type: String,
+    validator: (prop) => ['sm', 'base', 'lg'].includes(prop as string),
+    default: () => undefined,
+  },
+  id: {
+    type: String,
+    default: () => undefined,
+  },
+  name: {
+    type: String,
+    default: () => undefined,
+  },
+  label: {
+    type: String,
+    default: () => undefined,
+  },
+  placeholder: {
+    type: String,
+    default: () => undefined,
+  },
+  rows: {
+    type: Number,
+    default: () => 4,
+  },
+  cols: {
+    type: Number,
+    default: () => 50,
+  },
+  message: {
+    type: String,
+    default: () => undefined,
+  },
+  messageType: {
+    type: String,
+    validator: (prop) =>
+      ['error', 'warning', 'success', 'info'].includes(prop as string),
+    default: () => undefined,
+  },
+  required: {
+    type: Boolean,
+    default: () => false,
+  },
+  resizable: {
+    type: Boolean,
+    default: () => true,
+  },
+  maxlength: {
+    type: Number,
+    default: () => undefined,
+  },
+  minlength: {
+    type: Number,
+    default: () => undefined,
+  },
+})
+
+const classes = computed(() => {
+  let base = ''
+  if (props.variant) base += `input--${props.variant} `
+  if (props.size) base += `input--${props.size} `
+  if (props.messageType) base += `input--${props.messageType} `
+  if (!props.resizable) base += 'textarea--public'
+  return base
+})
+
+const labelClasses = computed(() => {
+  let base = ''
+  if (props.variant === 'negative') base += `text--negative `
+  if (props.size) base += `text--${props.size} `
+  if (props.required) base += `text--asterisk `
+  return base
+})
+</script>
diff --git a/opendata.swiss/ui/app/components/dataset/OdsMultiSelect.vue b/opendata.swiss/ui/app/components/dataset/OdsMultiSelect.vue
index f73ed72..4106bdc 100644
--- a/opendata.swiss/ui/app/components/dataset/OdsMultiSelect.vue
+++ b/opendata.swiss/ui/app/components/dataset/OdsMultiSelect.vue
@@ -44,9 +44,15 @@
        <template #option="option">
         <span>
           {{ option.title }}
-          <span style="float: right; color: #888;">({{ option.count }})</span>
+          <span v-if="option.count" style="float: right; color: #888;">({{ option.count }})</span>
         </span>
       </template>
+        <template
+          #selected-option="option"
+        >
+          {{ option.title }}
+          <input type="hidden" :name="name" :value="option.id">
+        </template>
       </VSelect>
       <div class="select__icon">
         <svg role="presentation" aria-hidden="true" viewBox="0 0 24 24">
@@ -226,3 +232,9 @@ watch(
   }
 )
 </script>
+
+<style scoped>
+input.vs__selected {
+  cursor: default;
+}
+</style>
diff --git a/opendata.swiss/ui/app/piveau/search.ts b/opendata.swiss/ui/app/piveau/search.ts
index 1e77614..73e7e54 100644
--- a/opendata.swiss/ui/app/piveau/search.ts
+++ b/opendata.swiss/ui/app/piveau/search.ts
@@ -1,3 +1,4 @@
+import z from 'zod'
 import { schemaDataset } from '@piveau/sdk-core'
 import { dcatApDataset, defineHubSearch } from '@piveau/sdk-vue'
 import { getKeywords } from './get-keywords'
@@ -30,3 +31,22 @@ export function useDatasetsSearch() {
   })
 }
 
+export function useVocabularySearch() {
+  return defineHubSearch({
+    baseUrl: 'https://piveau-hub-search-ln.zazukoians.org/',
+    index: 'vocabulary',
+    schema: z.object({
+      pref_label: z.map(z.string(), z.string()),
+      id: z.string(),
+      resource: z.string(),
+      in_scheme: z.string(),
+      index: z.string(),
+    }),
+  }, (resource, localeInstance) => {
+    return {
+      ...resource,
+      pref_label: resource.pref_label[localeInstance.currentLocale],
+    }
+  })
+}
+
diff --git a/opendata.swiss/ui/pages/showcases/new.vue b/opendata.swiss/ui/pages/showcases/new.vue
new file mode 100644
index 0000000..254474c
--- /dev/null
+++ b/opendata.swiss/ui/pages/showcases/new.vue
@@ -0,0 +1,65 @@
+<template>
+  <OdsPage :page="{ title: 'New Showcase' }">
+    <section class="section section--py">
+      <div class="container">
+        <ClientOnly>
+          <form method="post" ref="newShowcaseForm">
+            <div class="form__group__input">
+              <OdsInput id="title-de" label="Title (DE)" placeholder="Titel auf Deutsch"/>
+              <OdsInput id="title-fr" label="Title (FR)" placeholder="Titre en Français"/>
+              <OdsInput id="title-it" label="Title (IT)" placeholder="Titolo in Italiano"/>
+              <OdsInput id="title-en" label="Title (EN)" placeholder="Title in English"/>
+            </div>
+            <div class="form__group">
+              <OdsInput id="website" label="Website" />
+              <OdsMultiSelect id="category" name="category" label="Categories" :options="dataThemes" />
+              <OdsSelect id="type" name="type" label="Type" required>
+                <option value="application">Application</option>
+                <option value="data_visualization">Data Visualization</option>
+                <option value="event">Event</option>
+                <option value="blog_and_media_articles">Blog/Article</option>
+              </OdsSelect>
+              <OdsInput id="tags" label="Tags" />
+            </div>
+            <div class="form__group">
+              <OdsTextarea id="body-de" label="Body (DE)" placeholder="Beschreibung auf Deutsch" />
+              <OdsTextarea id="body-fr" label="Body (FR)" placeholder="Description en Français" />
+              <OdsTextarea id="body-it" label="Body (IT)" placeholder="Descrizione in Italiano" />
+              <OdsTextarea id="body-en" label="Body (EN)" placeholder="Description in English" />
+            </div>
+            <div class="form__group">
+              <OdsButton variant="outline-negative" title="Submit" @click="submit"></OdsButton>
+            </div>
+          </form>
+        </ClientOnly>
+      </div>
+    </section>
+  </OdsPage>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import OdsMultiSelect from "../../app/components/dataset/OdsMultiSelect.vue";
+import {useVocabularySearch} from "../../app/piveau/search";
+
+const { useSearch } = useVocabularySearch()
+const search = useSearch({
+  queryParams: {
+    vocabulary: 'data-theme',
+  }
+})
+
+const dataThemes = computed(() => {
+  return search.getSearchResultsEnhanced.value.map(item => ({
+    id: item.id,
+    title: item.pref_label
+  }))
+})
+
+useSeoMeta({title: 'New Showcase | opendata.swiss'})
+
+const newShowcaseForm = ref<HTMLFormElement | null>(null)
+function submit() {
+  console.dir(newShowcaseForm.value)
+}
+</script>

From e8e07f0484d0524c408a9d29da381f84d9cf6ada Mon Sep 17 00:00:00 2001
From: Tomasz Pluskiewicz <tpluscode@users.noreply.github.com>
Date: Fri, 5 Sep 2025 14:51:23 +0200
Subject: [PATCH 02/20] feat: added link to header menu

---
 opendata.swiss/ui/app/components/headers/OdsHeader.vue    | 2 +-
 opendata.swiss/ui/app/constants/navigation-items.ts       | 5 ++++-
 opendata.swiss/ui/i18n/locales/de.json                    | 3 ++-
 opendata.swiss/ui/i18n/locales/en.json                    | 3 ++-
 opendata.swiss/ui/i18n/locales/fr.json                    | 3 ++-
 opendata.swiss/ui/i18n/locales/it.json                    | 3 ++-
 opendata.swiss/ui/pages/showcases/{new.vue => submit.vue} | 2 +-
 7 files changed, 14 insertions(+), 7 deletions(-)
 rename opendata.swiss/ui/pages/showcases/{new.vue => submit.vue} (96%)

diff --git a/opendata.swiss/ui/app/components/headers/OdsHeader.vue b/opendata.swiss/ui/app/components/headers/OdsHeader.vue
index a32097b..1f52d36 100644
--- a/opendata.swiss/ui/app/components/headers/OdsHeader.vue
+++ b/opendata.swiss/ui/app/components/headers/OdsHeader.vue
@@ -89,7 +89,7 @@ function isChildPage({ to }: OdsNavTabItem) {
           <NuxtLinkLocale :class="{ active: isChildPage(item) }" :to="item.to"><span> {{ t(item.label) }}</span></NuxtLinkLocale>
         </li>
         <li  v-if="item.subMenu"  class="tab">
-          <v-menu>
+          <v-menu open-on-hover>
               <template #activator="{ props: menuProps }">
                 <a v-bind="menuProps" :class="{ active: selectedTab === index }"><span>{{ t(item.label) }}</span></a>
               </template>
diff --git a/opendata.swiss/ui/app/constants/navigation-items.ts b/opendata.swiss/ui/app/constants/navigation-items.ts
index 64d1655..8f85bb6 100644
--- a/opendata.swiss/ui/app/constants/navigation-items.ts
+++ b/opendata.swiss/ui/app/constants/navigation-items.ts
@@ -11,7 +11,10 @@ export const APP_NAVIGATION_ITEMS: OdsNavTabItem[] = [
   },
   {
     label: 'message.header.navigation.showcases',
-    to: '/showcases'
+    to: '/showcases',
+    subMenu: [
+      { label: 'message.header.navigation.showcase_submit', to: '/showcases/new' }
+    ]
   },
   {
     label: 'message.header.navigation.blog',
diff --git a/opendata.swiss/ui/i18n/locales/de.json b/opendata.swiss/ui/i18n/locales/de.json
index b717042..d772863 100644
--- a/opendata.swiss/ui/i18n/locales/de.json
+++ b/opendata.swiss/ui/i18n/locales/de.json
@@ -15,7 +15,8 @@
                 "what_is_ods": "Was ist opendata.swiss?",
                 "terms_of_use": "Nutzungsbedingungen",
                 "handbook": "Handbuch",
-                "showcases": "Showcases"
+                "showcases": "Showcases",
+                "showcase_submit": "Showcase einreichen"
             }
         },
         "ods_toc": {
diff --git a/opendata.swiss/ui/i18n/locales/en.json b/opendata.swiss/ui/i18n/locales/en.json
index 9b0f60f..3d9dabe 100644
--- a/opendata.swiss/ui/i18n/locales/en.json
+++ b/opendata.swiss/ui/i18n/locales/en.json
@@ -15,7 +15,8 @@
                 "what_is_ods": "What is opendata.swiss?",
                 "terms_of_use": "Terms of use",
                 "handbook": "Handbook",
-                "showcases": "Showcases"
+                "showcases": "Showcases",
+                "showcase_submit": "Submit a showcase"
             }
         },
         "ods_toc": {
diff --git a/opendata.swiss/ui/i18n/locales/fr.json b/opendata.swiss/ui/i18n/locales/fr.json
index 43a6371..ea33eb8 100644
--- a/opendata.swiss/ui/i18n/locales/fr.json
+++ b/opendata.swiss/ui/i18n/locales/fr.json
@@ -15,7 +15,8 @@
                 "what_is_ods": "Qu'est-ce qu'opendata.swiss?",
                 "terms_of_use": "Conditions d'utilisation",
                 "handbook": "Manuel",
-                "showcases": "Showcases"
+                "showcases": "Showcases",
+                "showcase_submit": "Soumettre un showcase"
             }
         },
         "ods_toc": {
diff --git a/opendata.swiss/ui/i18n/locales/it.json b/opendata.swiss/ui/i18n/locales/it.json
index 3890937..732bd0b 100644
--- a/opendata.swiss/ui/i18n/locales/it.json
+++ b/opendata.swiss/ui/i18n/locales/it.json
@@ -15,7 +15,8 @@
                 "what_is_ods": "Cos'è opendata.swiss?",
                 "terms_of_use": "Termini di utilizzo",
                 "handbook": "Manuale",
-                "showcases": "Showcases"
+                "showcases": "Showcases",
+                "showcase_submit": "Invia uno showcase"
             }
         },
         "ods_toc": {
diff --git a/opendata.swiss/ui/pages/showcases/new.vue b/opendata.swiss/ui/pages/showcases/submit.vue
similarity index 96%
rename from opendata.swiss/ui/pages/showcases/new.vue
rename to opendata.swiss/ui/pages/showcases/submit.vue
index 254474c..568d7fa 100644
--- a/opendata.swiss/ui/pages/showcases/new.vue
+++ b/opendata.swiss/ui/pages/showcases/submit.vue
@@ -3,7 +3,7 @@
     <section class="section section--py">
       <div class="container">
         <ClientOnly>
-          <form method="post" ref="newShowcaseForm">
+          <form method="post" ref="newShowcaseForm" action="/api/new-showcase">
             <div class="form__group__input">
               <OdsInput id="title-de" label="Title (DE)" placeholder="Titel auf Deutsch"/>
               <OdsInput id="title-fr" label="Title (FR)" placeholder="Titre en Français"/>

From 3d6454182eb25474b352a71708a79ebb1ea16b53 Mon Sep 17 00:00:00 2001
From: Tomasz Pluskiewicz <tpluscode@users.noreply.github.com>
Date: Mon, 8 Sep 2025 14:14:32 +0200
Subject: [PATCH 03/20] feat(showcase): submission API

---
 ...aner-und-entscheidungstr\303\244ger.de.md" |   4 +-
 ...aner-und-entscheidungstr\303\244ger.en.md" |   4 +-
 ...aner-und-entscheidungstr\303\244ger.fr.md" |   4 +-
 ...aner-und-entscheidungstr\303\244ger.it.md" |   4 +-
 opendata.swiss/ui/nuxt.config.ts              |   8 ++
 opendata.swiss/ui/package-lock.json           |   1 +
 opendata.swiss/ui/package.json                |   4 +-
 opendata.swiss/ui/pages/showcases/submit.vue  |  22 +++-
 .../ui/server/api/showcases.post.ts           | 100 ++++++++++++++++++
 opendata.swiss/ui/server/tsconfig.json        |   3 +
 10 files changed, 141 insertions(+), 13 deletions(-)
 create mode 100644 opendata.swiss/ui/server/api/showcases.post.ts
 create mode 100644 opendata.swiss/ui/server/tsconfig.json

diff --git "a/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.de.md" "b/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.de.md"
index af87afc..6e8b8bc 100644
--- "a/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.de.md"
+++ "b/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.de.md"
@@ -5,8 +5,8 @@ title: Mietpreisentwicklung in Bern – Ein Instrument für Mieter, Stadtplaner
 image: https://repository-images.githubusercontent.com/788945570/a1998415-fef9-4518-8a5d-d2937f17edec
 url: https://giodi.github.io/dashboard-wohnungsmietpreise-stadt-bern/
 categories:
-  - SOCI
-  - REGI
+  - http://publications.europa.eu/resource/authority/data-theme/SOCI
+  - http://publications.europa.eu/resource/authority/data-theme/REGI
 type: application
 datasets:
   - id: 85787-bundesamt-fur-statistik-bfs
diff --git "a/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.en.md" "b/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.en.md"
index 003f306..0e39558 100644
--- "a/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.en.md"
+++ "b/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.en.md"
@@ -5,8 +5,8 @@ title: Rent Price Development in Bern – A Tool for Tenants, Urban Planners, an
 image: https://repository-images.githubusercontent.com/788945570/a1998415-fef9-4518-8a5d-d2937f17edec
 url: https://giodi.github.io/dashboard-wohnungsmietpreise-stadt-bern/
 categories:
-  - SOCI
-  - REGI
+  - http://publications.europa.eu/resource/authority/data-theme/SOCI
+  - http://publications.europa.eu/resource/authority/data-theme/REGI
 type: application
 datasets:
   - id: 85787-bundesamt-fur-statistik-bfs
diff --git "a/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.fr.md" "b/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.fr.md"
index e1bf763..dabfbc7 100644
--- "a/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.fr.md"
+++ "b/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.fr.md"
@@ -5,8 +5,8 @@ title: Évolution des loyers à Berne – Un outil pour les locataires, urbanist
 image: https://repository-images.githubusercontent.com/788945570/a1998415-fef9-4518-8a5d-d2937f17edec
 url: https://giodi.github.io/dashboard-wohnungsmietpreise-stadt-bern/
 categories:
-  - SOCI
-  - REGI
+  - http://publications.europa.eu/resource/authority/data-theme/SOCI
+  - http://publications.europa.eu/resource/authority/data-theme/REGI
 type: application
 datasets:
   - id: 85787-bundesamt-fur-statistik-bfs
diff --git "a/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.it.md" "b/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.it.md"
index 7e39ba6..fe0c4ba 100644
--- "a/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.it.md"
+++ "b/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.it.md"
@@ -5,8 +5,8 @@ title: Andamento degli affitti a Berna – Uno strumento per inquilini, urbanist
 image: https://repository-images.githubusercontent.com/788945570/a1998415-fef9-4518-8a5d-d2937f17edec
 url: https://giodi.github.io/dashboard-wohnungsmietpreise-stadt-bern/
 categories:
-  - SOCI
-  - REGI
+  - http://publications.europa.eu/resource/authority/data-theme/SOCI
+  - http://publications.europa.eu/resource/authority/data-theme/REGI
 type: application
 datasets:
   - id: 85787-bundesamt-fur-statistik-bfs
diff --git a/opendata.swiss/ui/nuxt.config.ts b/opendata.swiss/ui/nuxt.config.ts
index 8183b99..b4700a3 100644
--- a/opendata.swiss/ui/nuxt.config.ts
+++ b/opendata.swiss/ui/nuxt.config.ts
@@ -1,6 +1,9 @@
 import vuetify, {transformAssetUrls} from 'vite-plugin-vuetify'
 
 import {resolve} from 'node:path'
+import * as path from "node:path";
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -37,6 +40,11 @@ export default defineNuxtConfig({
       }
     }
   },
+  runtimeConfig: {
+    public: {
+      contentRoot: path.resolve(__dirname, 'content')
+    }
+  },
   components: {
     global: true,
     dirs: [
diff --git a/opendata.swiss/ui/package-lock.json b/opendata.swiss/ui/package-lock.json
index 1ab89d6..01cb067 100644
--- a/opendata.swiss/ui/package-lock.json
+++ b/opendata.swiss/ui/package-lock.json
@@ -26,6 +26,7 @@
         "rimraf": "^6.0.1",
         "sass-embedded": "^1.89.2",
         "sharp": "^0.34.3",
+        "slugify": "^1.6.6",
         "swiper": "^11.2.10",
         "uuid": "^11.1.0",
         "vue": "^3.5.17",
diff --git a/opendata.swiss/ui/package.json b/opendata.swiss/ui/package.json
index 53c7feb..4305d42 100644
--- a/opendata.swiss/ui/package.json
+++ b/opendata.swiss/ui/package.json
@@ -30,13 +30,15 @@
     "rimraf": "^6.0.1",
     "sass-embedded": "^1.89.2",
     "sharp": "^0.34.3",
+    "slugify": "^1.6.6",
     "swiper": "^11.2.10",
     "uuid": "^11.1.0",
     "vue": "^3.5.17",
     "vue-i18n": "^11.1.10",
     "vue-inline-svg": "^4.0.1",
     "vue-router": "^4.5.1",
-    "vue-select": "^4.0.0-beta.6"
+    "vue-select": "^4.0.0-beta.6",
+    "yaml": "^2.8.1"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^7.0.1",
diff --git a/opendata.swiss/ui/pages/showcases/submit.vue b/opendata.swiss/ui/pages/showcases/submit.vue
index 568d7fa..2ac32e4 100644
--- a/opendata.swiss/ui/pages/showcases/submit.vue
+++ b/opendata.swiss/ui/pages/showcases/submit.vue
@@ -11,8 +11,8 @@
               <OdsInput id="title-en" label="Title (EN)" placeholder="Title in English"/>
             </div>
             <div class="form__group">
-              <OdsInput id="website" label="Website" />
-              <OdsMultiSelect id="category" name="category" label="Categories" :options="dataThemes" />
+              <OdsInput id="url" label="Website" />
+              <OdsMultiSelect id="categories" name="categories" label="Categories" :options="dataThemes" />
               <OdsSelect id="type" name="type" label="Type" required>
                 <option value="application">Application</option>
                 <option value="data_visualization">Data Visualization</option>
@@ -51,7 +51,7 @@ const search = useSearch({
 
 const dataThemes = computed(() => {
   return search.getSearchResultsEnhanced.value.map(item => ({
-    id: item.id,
+    id: item.resource,
     title: item.pref_label
   }))
 })
@@ -60,6 +60,20 @@ useSeoMeta({title: 'New Showcase | opendata.swiss'})
 
 const newShowcaseForm = ref<HTMLFormElement | null>(null)
 function submit() {
-  console.dir(newShowcaseForm.value)
+  fetch('/api/showcases', {
+    method: 'POST',
+    body: new FormData(newShowcaseForm.value!)
+  }).then(response => {
+    if (response.ok) {
+      alert('Showcase submitted successfully!')
+      if (newShowcaseForm.value) {
+        newShowcaseForm.value.reset()
+      }
+    } else {
+      alert('Error submitting showcase.')
+    }
+  }).catch(() => {
+    alert('Error submitting showcase.')
+  })
 }
 </script>
diff --git a/opendata.swiss/ui/server/api/showcases.post.ts b/opendata.swiss/ui/server/api/showcases.post.ts
new file mode 100644
index 0000000..a03d478
--- /dev/null
+++ b/opendata.swiss/ui/server/api/showcases.post.ts
@@ -0,0 +1,100 @@
+import { ShowcasesCollectionItem } from '@nuxt/content'
+import type {MultiPartData} from "h3";
+import slugify from "slugify";
+import * as fs from 'node:fs/promises'
+import * as yaml from 'yaml'
+
+const languages = ['en', 'fr', 'de', 'it'] as const
+
+type Language = typeof languages[number]
+type Translated<FieldName extends string> = `${FieldName}-${Language}`
+type FormDataFieldNames = keyof ShowcasesCollectionItem | Translated<'title'> | Translated<'body'>
+type ShowcaseTranslation = Omit<Partial<ShowcasesCollectionItem>, 'body'> & {
+  body?: string
+}
+type Showcase = Record<Language, ShowcaseTranslation> & {
+  slug?: string
+}
+type PayloadData = Array<Omit<MultiPartData, 'name'> & { name: FormDataFieldNames }>
+
+const empty =  (): ShowcaseTranslation => ({
+  active: true,
+  categories: [],
+  datasets: [],
+  tags: []
+})
+
+export default defineEventHandler(async (event) => {
+  const { public: { contentRoot } } = useRuntimeConfig();
+
+  const body = await readMultipartFormData(event) as PayloadData
+  const showcase: Showcase = {
+    it: empty(),
+    de: empty(),
+    fr: empty(),
+    en: empty()
+  }
+
+  for (const { name, data } of body) {
+    switch (name) {
+      case 'title-de':
+        showcase.slug = slugify(data.toString(), { lower: true, locale: 'de' })
+      case 'title-fr':
+      case 'title-en':
+      case 'title-it':
+        const language = /^title-(?<lang>\w\w)$/.exec(name)?.groups?.lang as Language
+        showcase[language].title = data.toString()
+        break
+      case 'url':
+      case "type":
+        toAll(showcase, name, data.toString())
+        break
+      case "body-de":
+      case "body-en":
+      case "body-it":
+      case "body-fr":
+        toAll(showcase, 'body', data.toString())
+        break
+      case "tags":
+        toAll(showcase, 'tags', data.toString().split(',').map(tag => tag.trim()))
+        break
+      case "categories":
+        toAll(showcase, 'categories', (translation) => {
+          translation.categories!.push(data.toString())
+        })
+        break
+    }
+  }
+
+  // TODO: choose to save to GitHub or locally based on environment
+  await save(showcase, contentRoot)
+
+  return { message: 'Showcase submission received successfully.' };
+});
+
+function save(showcase: Showcase, contentRoot: string) {
+  const { slug } = showcase
+
+  return Promise.all(languages.map(language => {
+    const path = `${contentRoot}/showcases/${slug}.${language}.md`
+
+    const { body, ...meta } = showcase[language]
+    const frontMatter = yaml.stringify(meta)
+
+    return fs.writeFile(path, `---\n${frontMatter}---\n${body}`)
+  }))
+}
+
+interface Setter {
+  (showcase: ShowcaseTranslation): void
+}
+
+function toAll<K extends keyof ShowcaseTranslation>(showcase: Showcase, key: K, value: ShowcaseTranslation[K] | Setter) {
+  for (const language of languages) {
+    if(typeof value === 'function') {
+     value(showcase[language])
+    } else {
+      showcase[language][key] = value
+    }
+  }
+}
diff --git a/opendata.swiss/ui/server/tsconfig.json b/opendata.swiss/ui/server/tsconfig.json
new file mode 100644
index 0000000..b9ed69c
--- /dev/null
+++ b/opendata.swiss/ui/server/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

From abdee3a8f3cb370f8d4bbf016528ba2b5c1888b0 Mon Sep 17 00:00:00 2001
From: Tomasz Pluskiewicz <tpluscode@users.noreply.github.com>
Date: Tue, 9 Sep 2025 10:26:27 +0200
Subject: [PATCH 04/20] feat(showcases): notification on submission

---
 .../app/components/OdsNotificationBanner.vue  | 49 +++++++++++++++++++
 opendata.swiss/ui/package-lock.json           |  3 +-
 opendata.swiss/ui/pages/showcases/submit.vue  | 40 +++++++++++++--
 3 files changed, 87 insertions(+), 5 deletions(-)
 create mode 100644 opendata.swiss/ui/app/components/OdsNotificationBanner.vue

diff --git a/opendata.swiss/ui/app/components/OdsNotificationBanner.vue b/opendata.swiss/ui/app/components/OdsNotificationBanner.vue
new file mode 100644
index 0000000..c1d421b
--- /dev/null
+++ b/opendata.swiss/ui/app/components/OdsNotificationBanner.vue
@@ -0,0 +1,49 @@
+<template>
+  <div
+    :open="open || undefined"
+    :class="['notification-banner', 'notification', `notification--${type}`]"
+    :style="{
+      transitionDuration: `${closeDuration}`,
+    }"
+  >
+    <div
+      class="notification-banner__wrapper"
+      :style="{
+        transitionDelay: `${closeDuration}`,
+      }"
+    >
+      <p class="notification-banner__infos">
+        <slot />
+      </p>
+      <slot name="buttons" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { open = true, closeDuration = '0.3s' } = defineProps<{
+  type: 'info' | 'success' | 'warning' | 'error'
+  open?: boolean
+  closeDuration?: string
+}>()
+</script>
+
+<style scoped>
+.notification-banner {
+  display: block;
+  transition-property: padding, opacity;
+  transition-timing-function: ease-in-out, ease-in-out;
+}
+.notification-banner:not([open]) {
+  padding: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+.notification-banner__wrapper {
+  transition-property: height;
+  transition-duration: 0s;
+}
+.notification-banner:not([open]) .notification-banner__wrapper {
+  height: 0;
+}
+</style>
diff --git a/opendata.swiss/ui/package-lock.json b/opendata.swiss/ui/package-lock.json
index 01cb067..016099d 100644
--- a/opendata.swiss/ui/package-lock.json
+++ b/opendata.swiss/ui/package-lock.json
@@ -33,7 +33,8 @@
         "vue-i18n": "^11.1.10",
         "vue-inline-svg": "^4.0.1",
         "vue-router": "^4.5.1",
-        "vue-select": "^4.0.0-beta.6"
+        "vue-select": "^4.0.0-beta.6",
+        "yaml": "^2.8.1"
       },
       "devDependencies": {
         "@fortawesome/fontawesome-free": "^7.0.1",
diff --git a/opendata.swiss/ui/pages/showcases/submit.vue b/opendata.swiss/ui/pages/showcases/submit.vue
index 2ac32e4..b91bac2 100644
--- a/opendata.swiss/ui/pages/showcases/submit.vue
+++ b/opendata.swiss/ui/pages/showcases/submit.vue
@@ -1,5 +1,24 @@
 <template>
   <OdsPage :page="{ title: 'New Showcase' }">
+    <template #header>
+      <OdsNotificationBanner :open="success === true" type="success">
+        Your showcase has been submitted
+
+        <template #buttons>
+          <OdsButton variant="outline" title="Close" icon-right icon="Checkmark" @click="closeMessages"></OdsButton>
+        </template>
+      </OdsNotificationBanner>
+      <OdsNotificationBanner :open="success === false" type="error">
+        Failed to submit showcase.
+
+        <pre>{{ submissionError }}</pre>
+
+        <template #buttons>
+          <OdsButton variant="outline" title="Close" icon-right icon="Checkmark" @click="closeMessages"></OdsButton>
+        </template>
+      </OdsNotificationBanner>
+    </template>
+
     <section class="section section--py">
       <div class="container">
         <ClientOnly>
@@ -41,6 +60,7 @@
 import { ref } from 'vue'
 import OdsMultiSelect from "../../app/components/dataset/OdsMultiSelect.vue";
 import {useVocabularySearch} from "../../app/piveau/search";
+import OdsNotificationBanner from "../../app/components/OdsNotificationBanner.vue";
 
 const { useSearch } = useVocabularySearch()
 const search = useSearch({
@@ -58,6 +78,9 @@ const dataThemes = computed(() => {
 
 useSeoMeta({title: 'New Showcase | opendata.swiss'})
 
+const success = ref<boolean | null>(null)
+const submissionError = ref<string | null>(null)
+
 const newShowcaseForm = ref<HTMLFormElement | null>(null)
 function submit() {
   fetch('/api/showcases', {
@@ -65,15 +88,24 @@ function submit() {
     body: new FormData(newShowcaseForm.value!)
   }).then(response => {
     if (response.ok) {
-      alert('Showcase submitted successfully!')
+      success.value = true
       if (newShowcaseForm.value) {
         newShowcaseForm.value.reset()
       }
     } else {
-      alert('Error submitting showcase.')
+      submissionError.value = `Server responded with: ${response.status} - ${response.statusText}`
+      success.value = false
     }
-  }).catch(() => {
-    alert('Error submitting showcase.')
+  }).catch((e) => {
+    submissionError.value = `${e.message}\n${e.stack}`
+    success.value = false
+  }).finally(() => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
   })
 }
+
+function closeMessages() {
+  success.value = null
+  submissionError.value = null
+}
 </script>

From b0058256ed0a4591ea8fe0449cb3c0115c3531ca Mon Sep 17 00:00:00 2001
From: Tomasz Pluskiewicz <tpluscode@users.noreply.github.com>
Date: Tue, 9 Sep 2025 10:59:55 +0200
Subject: [PATCH 05/20] style: eslint fixes

---
 opendata.swiss/ui/server/api/showcases.post.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/opendata.swiss/ui/server/api/showcases.post.ts b/opendata.swiss/ui/server/api/showcases.post.ts
index a03d478..787f737 100644
--- a/opendata.swiss/ui/server/api/showcases.post.ts
+++ b/opendata.swiss/ui/server/api/showcases.post.ts
@@ -1,4 +1,5 @@
-import { ShowcasesCollectionItem } from '@nuxt/content'
+/* eslint-disable no-fallthrough */
+import type {ShowcasesCollectionItem} from '@nuxt/content'
 import type {MultiPartData} from "h3";
 import slugify from "slugify";
 import * as fs from 'node:fs/promises'
@@ -41,9 +42,10 @@ export default defineEventHandler(async (event) => {
         showcase.slug = slugify(data.toString(), { lower: true, locale: 'de' })
       case 'title-fr':
       case 'title-en':
-      case 'title-it':
+      case 'title-it': {
         const language = /^title-(?<lang>\w\w)$/.exec(name)?.groups?.lang as Language
         showcase[language].title = data.toString()
+      }
         break
       case 'url':
       case "type":

From 4f7a4fe184da741dbb3eca4a1fb3cae1e09e329d Mon Sep 17 00:00:00 2001
From: Tomasz Pluskiewicz <tpluscode@users.noreply.github.com>
Date: Tue, 9 Sep 2025 11:00:09 +0200
Subject: [PATCH 06/20] chore: throw when submitting in production

---
 opendata.swiss/ui/server/api/showcases.post.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/opendata.swiss/ui/server/api/showcases.post.ts b/opendata.swiss/ui/server/api/showcases.post.ts
index 787f737..4368386 100644
--- a/opendata.swiss/ui/server/api/showcases.post.ts
+++ b/opendata.swiss/ui/server/api/showcases.post.ts
@@ -68,8 +68,11 @@ export default defineEventHandler(async (event) => {
     }
   }
 
-  // TODO: choose to save to GitHub or locally based on environment
-  await save(showcase, contentRoot)
+  if (process.env.NODE_ENV === 'production') {
+    throw new Error('Saving to GitHub not implemented yet.')
+  } else {
+    await save(showcase, contentRoot)
+  }
 
   return { message: 'Showcase submission received successfully.' };
 });

From 020ae91978c842311d227bd70ef4419008a23411 Mon Sep 17 00:00:00 2001
From: Tomasz Pluskiewicz <tpluscode@users.noreply.github.com>
Date: Mon, 8 Sep 2025 14:14:32 +0200
Subject: [PATCH 07/20] feat(showcase): submission API

---
 ...aner-und-entscheidungstr\303\244ger.de.md" |   4 +-
 ...aner-und-entscheidungstr\303\244ger.en.md" |   4 +-
 ...aner-und-entscheidungstr\303\244ger.fr.md" |   4 +-
 ...aner-und-entscheidungstr\303\244ger.it.md" |   4 +-
 opendata.swiss/ui/nuxt.config.ts              |   8 ++
 opendata.swiss/ui/package-lock.json           |   1 +
 opendata.swiss/ui/package.json                |   4 +-
 opendata.swiss/ui/pages/showcases/submit.vue  |  22 +++-
 .../ui/server/api/showcases.post.ts           | 100 ++++++++++++++++++
 opendata.swiss/ui/server/tsconfig.json        |   3 +
 10 files changed, 141 insertions(+), 13 deletions(-)
 create mode 100644 opendata.swiss/ui/server/api/showcases.post.ts
 create mode 100644 opendata.swiss/ui/server/tsconfig.json

diff --git "a/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.de.md" "b/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.de.md"
index af87afc..6e8b8bc 100644
--- "a/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.de.md"
+++ "b/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.de.md"
@@ -5,8 +5,8 @@ title: Mietpreisentwicklung in Bern – Ein Instrument für Mieter, Stadtplaner
 image: https://repository-images.githubusercontent.com/788945570/a1998415-fef9-4518-8a5d-d2937f17edec
 url: https://giodi.github.io/dashboard-wohnungsmietpreise-stadt-bern/
 categories:
-  - SOCI
-  - REGI
+  - http://publications.europa.eu/resource/authority/data-theme/SOCI
+  - http://publications.europa.eu/resource/authority/data-theme/REGI
 type: application
 datasets:
   - id: 85787-bundesamt-fur-statistik-bfs
diff --git "a/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.en.md" "b/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.en.md"
index 003f306..0e39558 100644
--- "a/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.en.md"
+++ "b/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.en.md"
@@ -5,8 +5,8 @@ title: Rent Price Development in Bern – A Tool for Tenants, Urban Planners, an
 image: https://repository-images.githubusercontent.com/788945570/a1998415-fef9-4518-8a5d-d2937f17edec
 url: https://giodi.github.io/dashboard-wohnungsmietpreise-stadt-bern/
 categories:
-  - SOCI
-  - REGI
+  - http://publications.europa.eu/resource/authority/data-theme/SOCI
+  - http://publications.europa.eu/resource/authority/data-theme/REGI
 type: application
 datasets:
   - id: 85787-bundesamt-fur-statistik-bfs
diff --git "a/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.fr.md" "b/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.fr.md"
index e1bf763..dabfbc7 100644
--- "a/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.fr.md"
+++ "b/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.fr.md"
@@ -5,8 +5,8 @@ title: Évolution des loyers à Berne – Un outil pour les locataires, urbanist
 image: https://repository-images.githubusercontent.com/788945570/a1998415-fef9-4518-8a5d-d2937f17edec
 url: https://giodi.github.io/dashboard-wohnungsmietpreise-stadt-bern/
 categories:
-  - SOCI
-  - REGI
+  - http://publications.europa.eu/resource/authority/data-theme/SOCI
+  - http://publications.europa.eu/resource/authority/data-theme/REGI
 type: application
 datasets:
   - id: 85787-bundesamt-fur-statistik-bfs
diff --git "a/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.it.md" "b/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.it.md"
index 7e39ba6..fe0c4ba 100644
--- "a/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.it.md"
+++ "b/opendata.swiss/ui/content/showcases/mietpreisentwicklung-in-bern-\342\200\223-ein-instrument-f\303\274r-mieter-stadtplaner-und-entscheidungstr\303\244ger.it.md"
@@ -5,8 +5,8 @@ title: Andamento degli affitti a Berna – Uno strumento per inquilini, urbanist
 image: https://repository-images.githubusercontent.com/788945570/a1998415-fef9-4518-8a5d-d2937f17edec
 url: https://giodi.github.io/dashboard-wohnungsmietpreise-stadt-bern/
 categories:
-  - SOCI
-  - REGI
+  - http://publications.europa.eu/resource/authority/data-theme/SOCI
+  - http://publications.europa.eu/resource/authority/data-theme/REGI
 type: application
 datasets:
   - id: 85787-bundesamt-fur-statistik-bfs
diff --git a/opendata.swiss/ui/nuxt.config.ts b/opendata.swiss/ui/nuxt.config.ts
index 8183b99..b4700a3 100644
--- a/opendata.swiss/ui/nuxt.config.ts
+++ b/opendata.swiss/ui/nuxt.config.ts
@@ -1,6 +1,9 @@
 import vuetify, {transformAssetUrls} from 'vite-plugin-vuetify'
 
 import {resolve} from 'node:path'
+import * as path from "node:path";
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -37,6 +40,11 @@ export default defineNuxtConfig({
       }
     }
   },
+  runtimeConfig: {
+    public: {
+      contentRoot: path.resolve(__dirname, 'content')
+    }
+  },
   components: {
     global: true,
     dirs: [
diff --git a/opendata.swiss/ui/package-lock.json b/opendata.swiss/ui/package-lock.json
index 1ab89d6..01cb067 100644
--- a/opendata.swiss/ui/package-lock.json
+++ b/opendata.swiss/ui/package-lock.json
@@ -26,6 +26,7 @@
         "rimraf": "^6.0.1",
         "sass-embedded": "^1.89.2",
         "sharp": "^0.34.3",
+        "slugify": "^1.6.6",
         "swiper": "^11.2.10",
         "uuid": "^11.1.0",
         "vue": "^3.5.17",
diff --git a/opendata.swiss/ui/package.json b/opendata.swiss/ui/package.json
index 53c7feb..4305d42 100644
--- a/opendata.swiss/ui/package.json
+++ b/opendata.swiss/ui/package.json
@@ -30,13 +30,15 @@
     "rimraf": "^6.0.1",
     "sass-embedded": "^1.89.2",
     "sharp": "^0.34.3",
+    "slugify": "^1.6.6",
     "swiper": "^11.2.10",
     "uuid": "^11.1.0",
     "vue": "^3.5.17",
     "vue-i18n": "^11.1.10",
     "vue-inline-svg": "^4.0.1",
     "vue-router": "^4.5.1",
-    "vue-select": "^4.0.0-beta.6"
+    "vue-select": "^4.0.0-beta.6",
+    "yaml": "^2.8.1"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^7.0.1",
diff --git a/opendata.swiss/ui/pages/showcases/submit.vue b/opendata.swiss/ui/pages/showcases/submit.vue
index 568d7fa..2ac32e4 100644
--- a/opendata.swiss/ui/pages/showcases/submit.vue
+++ b/opendata.swiss/ui/pages/showcases/submit.vue
@@ -11,8 +11,8 @@
               <OdsInput id="title-en" label="Title (EN)" placeholder="Title in English"/>
             </div>
             <div class="form__group">
-              <OdsInput id="website" label="Website" />
-              <OdsMultiSelect id="category" name="category" label="Categories" :options="dataThemes" />
+              <OdsInput id="url" label="Website" />
+              <OdsMultiSelect id="categories" name="categories" label="Categories" :options="dataThemes" />
               <OdsSelect id="type" name="type" label="Type" required>
                 <option value="application">Application</option>
                 <option value="data_visualization">Data Visualization</option>
@@ -51,7 +51,7 @@ const search = useSearch({
 
 const dataThemes = computed(() => {
   return search.getSearchResultsEnhanced.value.map(item => ({
-    id: item.id,
+    id: item.resource,
     title: item.pref_label
   }))
 })
@@ -60,6 +60,20 @@ useSeoMeta({title: 'New Showcase | opendata.swiss'})
 
 const newShowcaseForm = ref<HTMLFormElement | null>(null)
 function submit() {
-  console.dir(newShowcaseForm.value)
+  fetch('/api/showcases', {
+    method: 'POST',
+    body: new FormData(newShowcaseForm.value!)
+  }).then(response => {
+    if (response.ok) {
+      alert('Showcase submitted successfully!')
+      if (newShowcaseForm.value) {
+        newShowcaseForm.value.reset()
+      }
+    } else {
+      alert('Error submitting showcase.')
+    }
+  }).catch(() => {
+    alert('Error submitting showcase.')
+  })
 }
 </script>
diff --git a/opendata.swiss/ui/server/api/showcases.post.ts b/opendata.swiss/ui/server/api/showcases.post.ts
new file mode 100644
index 0000000..a03d478
--- /dev/null
+++ b/opendata.swiss/ui/server/api/showcases.post.ts
@@ -0,0 +1,100 @@
+import { ShowcasesCollectionItem } from '@nuxt/content'
+import type {MultiPartData} from "h3";
+import slugify from "slugify";
+import * as fs from 'node:fs/promises'
+import * as yaml from 'yaml'
+
+const languages = ['en', 'fr', 'de', 'it'] as const
+
+type Language = typeof languages[number]
+type Translated<FieldName extends string> = `${FieldName}-${Language}`
+type FormDataFieldNames = keyof ShowcasesCollectionItem | Translated<'title'> | Translated<'body'>
+type ShowcaseTranslation = Omit<Partial<ShowcasesCollectionItem>, 'body'> & {
+  body?: string
+}
+type Showcase = Record<Language, ShowcaseTranslation> & {
+  slug?: string
+}
+type PayloadData = Array<Omit<MultiPartData, 'name'> & { name: FormDataFieldNames }>
+
+const empty =  (): ShowcaseTranslation => ({
+  active: true,
+  categories: [],
+  datasets: [],
+  tags: []
+})
+
+export default defineEventHandler(async (event) => {
+  const { public: { contentRoot } } = useRuntimeConfig();
+
+  const body = await readMultipartFormData(event) as PayloadData
+  const showcase: Showcase = {
+    it: empty(),
+    de: empty(),
+    fr: empty(),
+    en: empty()
+  }
+
+  for (const { name, data } of body) {
+    switch (name) {
+      case 'title-de':
+        showcase.slug = slugify(data.toString(), { lower: true, locale: 'de' })
+      case 'title-fr':
+      case 'title-en':
+      case 'title-it':
+        const language = /^title-(?<lang>\w\w)$/.exec(name)?.groups?.lang as Language
+        showcase[language].title = data.toString()
+        break
+      case 'url':
+      case "type":
+        toAll(showcase, name, data.toString())
+        break
+      case "body-de":
+      case "body-en":
+      case "body-it":
+      case "body-fr":
+        toAll(showcase, 'body', data.toString())
+        break
+      case "tags":
+        toAll(showcase, 'tags', data.toString().split(',').map(tag => tag.trim()))
+        break
+      case "categories":
+        toAll(showcase, 'categories', (translation) => {
+          translation.categories!.push(data.toString())
+        })
+        break
+    }
+  }
+
+  // TODO: choose to save to GitHub or locally based on environment
+  await save(showcase, contentRoot)
+
+  return { message: 'Showcase submission received successfully.' };
+});
+
+function save(showcase: Showcase, contentRoot: string) {
+  const { slug } = showcase
+
+  return Promise.all(languages.map(language => {
+    const path = `${contentRoot}/showcases/${slug}.${language}.md`
+
+    const { body, ...meta } = showcase[language]
+    const frontMatter = yaml.stringify(meta)
+
+    return fs.writeFile(path, `---\n${frontMatter}---\n${body}`)
+  }))
+}
+
+interface Setter {
+  (showcase: ShowcaseTranslation): void
+}
+
+function toAll<K extends keyof ShowcaseTranslation>(showcase: Showcase, key: K, value: ShowcaseTranslation[K] | Setter) {
+  for (const language of languages) {
+    if(typeof value === 'function') {
+     value(showcase[language])
+    } else {
+      showcase[language][key] = value
+    }
+  }
+}
diff --git a/opendata.swiss/ui/server/tsconfig.json b/opendata.swiss/ui/server/tsconfig.json
new file mode 100644
index 0000000..b9ed69c
--- /dev/null
+++ b/opendata.swiss/ui/server/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

From ddbf06dafc7296526fbf902c03f824571398d033 Mon Sep 17 00:00:00 2001
From: Tomasz Pluskiewicz <tpluscode@users.noreply.github.com>
Date: Tue, 9 Sep 2025 10:26:27 +0200
Subject: [PATCH 08/20] feat(showcases): notification on submission

---
 .../app/components/OdsNotificationBanner.vue  | 49 +++++++++++++++++++
 opendata.swiss/ui/package-lock.json           |  3 +-
 opendata.swiss/ui/pages/showcases/submit.vue  | 40 +++++++++++++--
 3 files changed, 87 insertions(+), 5 deletions(-)
 create mode 100644 opendata.swiss/ui/app/components/OdsNotificationBanner.vue

diff --git a/opendata.swiss/ui/app/components/OdsNotificationBanner.vue b/opendata.swiss/ui/app/components/OdsNotificationBanner.vue
new file mode 100644
index 0000000..c1d421b
--- /dev/null
+++ b/opendata.swiss/ui/app/components/OdsNotificationBanner.vue
@@ -0,0 +1,49 @@
+<template>
+  <div
+    :open="open || undefined"
+    :class="['notification-banner', 'notification', `notification--${type}`]"
+    :style="{
+      transitionDuration: `${closeDuration}`,
+    }"
+  >
+    <div
+      class="notification-banner__wrapper"
+      :style="{
+        transitionDelay: `${closeDuration}`,
+      }"
+    >
+      <p class="notification-banner__infos">
+        <slot />
+      </p>
+      <slot name="buttons" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { open = true, closeDuration = '0.3s' } = defineProps<{
+  type: 'info' | 'success' | 'warning' | 'error'
+  open?: boolean
+  closeDuration?: string
+}>()
+</script>
+
+<style scoped>
+.notification-banner {
+  display: block;
+  transition-property: padding, opacity;
+  transition-timing-function: ease-in-out, ease-in-out;
+}
+.notification-banner:not([open]) {
+  padding: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+.notification-banner__wrapper {
+  transition-property: height;
+  transition-duration: 0s;
+}
+.notification-banner:not([open]) .notification-banner__wrapper {
+  height: 0;
+}
+</style>
diff --git a/opendata.swiss/ui/package-lock.json b/opendata.swiss/ui/package-lock.json
index 01cb067..016099d 100644
--- a/opendata.swiss/ui/package-lock.json
+++ b/opendata.swiss/ui/package-lock.json
@@ -33,7 +33,8 @@
         "vue-i18n": "^11.1.10",
         "vue-inline-svg": "^4.0.1",
         "vue-router": "^4.5.1",
-        "vue-select": "^4.0.0-beta.6"
+        "vue-select": "^4.0.0-beta.6",
+        "yaml": "^2.8.1"
       },
       "devDependencies": {
         "@fortawesome/fontawesome-free": "^7.0.1",
diff --git a/opendata.swiss/ui/pages/showcases/submit.vue b/opendata.swiss/ui/pages/showcases/submit.vue
index 2ac32e4..b91bac2 100644
--- a/opendata.swiss/ui/pages/showcases/submit.vue
+++ b/opendata.swiss/ui/pages/showcases/submit.vue
@@ -1,5 +1,24 @@
 <template>
   <OdsPage :page="{ title: 'New Showcase' }">
+    <template #header>
+      <OdsNotificationBanner :open="success === true" type="success">
+        Your showcase has been submitted
+
+        <template #buttons>
+          <OdsButton variant="outline" title="Close" icon-right icon="Checkmark" @click="closeMessages"></OdsButton>
+        </template>
+      </OdsNotificationBanner>
+      <OdsNotificationBanner :open="success === false" type="error">
+        Failed to submit showcase.
+
+        <pre>{{ submissionError }}</pre>
+
+        <template #buttons>
+          <OdsButton variant="outline" title="Close" icon-right icon="Checkmark" @click="closeMessages"></OdsButton>
+        </template>
+      </OdsNotificationBanner>
+    </template>
+
     <section class="section section--py">
       <div class="container">
         <ClientOnly>
@@ -41,6 +60,7 @@
 import { ref } from 'vue'
 import OdsMultiSelect from "../../app/components/dataset/OdsMultiSelect.vue";
 import {useVocabularySearch} from "../../app/piveau/search";
+import OdsNotificationBanner from "../../app/components/OdsNotificationBanner.vue";
 
 const { useSearch } = useVocabularySearch()
 const search = useSearch({
@@ -58,6 +78,9 @@ const dataThemes = computed(() => {
 
 useSeoMeta({title: 'New Showcase | opendata.swiss'})
 
+const success = ref<boolean | null>(null)
+const submissionError = ref<string | null>(null)
+
 const newShowcaseForm = ref<HTMLFormElement | null>(null)
 function submit() {
   fetch('/api/showcases', {
@@ -65,15 +88,24 @@ function submit() {
     body: new FormData(newShowcaseForm.value!)
   }).then(response => {
     if (response.ok) {
-      alert('Showcase submitted successfully!')
+      success.value = true
       if (newShowcaseForm.value) {
         newShowcaseForm.value.reset()
       }
     } else {
-      alert('Error submitting showcase.')
+      submissionError.value = `Server responded with: ${response.status} - ${response.statusText}`
+      success.value = false
     }
-  }).catch(() => {
-    alert('Error submitting showcase.')
+  }).catch((e) => {
+    submissionError.value = `${e.message}\n${e.stack}`
+    success.value = false
+  }).finally(() => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
   })
 }
+
+function closeMessages() {
+  success.value = null
+  submissionError.value = null
+}
 </script>

From b9a2082e42da0d1aea8140e571ccee960625c3f9 Mon Sep 17 00:00:00 2001
From: Tomasz Pluskiewicz <tpluscode@users.noreply.github.com>
Date: Tue, 9 Sep 2025 15:25:44 +0200
Subject: [PATCH 09/20] refactor: preparation for GH PRs for showcases

---
 opendata.swiss/ui/server/api/showcases.post.ts | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/opendata.swiss/ui/server/api/showcases.post.ts b/opendata.swiss/ui/server/api/showcases.post.ts
index 4368386..ee2edeb 100644
--- a/opendata.swiss/ui/server/api/showcases.post.ts
+++ b/opendata.swiss/ui/server/api/showcases.post.ts
@@ -26,7 +26,15 @@ const empty =  (): ShowcaseTranslation => ({
 })
 
 export default defineEventHandler(async (event) => {
-  const { public: { contentRoot } } = useRuntimeConfig();
+  let contentRoot: string
+
+  if (process.env.NODE_ENV === 'production') {
+    // TODO: clone repo, get path to content
+    // contentRoot = `${checkoutPath}/content`
+    throw new Error('Saving to GitHub not implemented yet.')
+  } else {
+    ({public: {contentRoot}} = useRuntimeConfig())
+  }
 
   const body = await readMultipartFormData(event) as PayloadData
   const showcase: Showcase = {
@@ -68,10 +76,11 @@ export default defineEventHandler(async (event) => {
     }
   }
 
+  await save(showcase, contentRoot)
+
   if (process.env.NODE_ENV === 'production') {
+    // TODO: commit and push to repo
     throw new Error('Saving to GitHub not implemented yet.')
-  } else {
-    await save(showcase, contentRoot)
   }
 
   return { message: 'Showcase submission received successfully.' };
@@ -97,7 +106,7 @@ interface Setter {
 function toAll<K extends keyof ShowcaseTranslation>(showcase: Showcase, key: K, value: ShowcaseTranslation[K] | Setter) {
   for (const language of languages) {
     if(typeof value === 'function') {
-     value(showcase[language])
+      value(showcase[language])
     } else {
       showcase[language][key] = value
     }

From 10c609630056072579575b00b636f7cf7f46f1b2 Mon Sep 17 00:00:00 2001
From: Tomasz Pluskiewicz <tpluscode@users.noreply.github.com>
Date: Thu, 11 Sep 2025 11:13:03 +0200
Subject: [PATCH 10/20] Merge pull request #9 from
 opendata-swiss/showcase-image-submit

feat(showcase): select and upload showcase cover image
---
 opendata.swiss/ui/app/components/OdsInput.vue |  5 +++++
 opendata.swiss/ui/nuxt.config.ts              |  2 +-
 opendata.swiss/ui/pages/showcases/submit.vue  |  9 ++++++---
 opendata.swiss/ui/public/img/uploads/.gitkeep |  0
 .../ui/server/api/showcases.post.ts           | 19 ++++++++++++++-----
 opendata.swiss/ui/src/admin/config.yml        |  5 ++---
 6 files changed, 28 insertions(+), 12 deletions(-)
 create mode 100644 opendata.swiss/ui/public/img/uploads/.gitkeep

diff --git a/opendata.swiss/ui/app/components/OdsInput.vue b/opendata.swiss/ui/app/components/OdsInput.vue
index 0579045..9cba23d 100644
--- a/opendata.swiss/ui/app/components/OdsInput.vue
+++ b/opendata.swiss/ui/app/components/OdsInput.vue
@@ -17,6 +17,7 @@
       :autocomplete="autocomplete"
       :readonly="readonly"
       :required="required"
+      :accept="accept"
       @input.stop="onInput"
     />
     <div
@@ -128,6 +129,10 @@ const props = defineProps({
     type: Boolean,
     default: () => false,
   },
+  accept: {
+    type: String,
+    default: () => undefined,
+  }
 })
 
 const classes = computed(() => {
diff --git a/opendata.swiss/ui/nuxt.config.ts b/opendata.swiss/ui/nuxt.config.ts
index b4700a3..e9a10b9 100644
--- a/opendata.swiss/ui/nuxt.config.ts
+++ b/opendata.swiss/ui/nuxt.config.ts
@@ -42,7 +42,7 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     public: {
-      contentRoot: path.resolve(__dirname, 'content')
+      rootDir: __dirname
     }
   },
   components: {
diff --git a/opendata.swiss/ui/pages/showcases/submit.vue b/opendata.swiss/ui/pages/showcases/submit.vue
index b91bac2..76128ad 100644
--- a/opendata.swiss/ui/pages/showcases/submit.vue
+++ b/opendata.swiss/ui/pages/showcases/submit.vue
@@ -14,7 +14,7 @@
         <pre>{{ submissionError }}</pre>
 
         <template #buttons>
-          <OdsButton variant="outline" title="Close" icon-right icon="Checkmark" @click="closeMessages"></OdsButton>
+          <OdsButton variant="outline" title="Close" icon-right icon="Checkmark" @click="closeMessages"/>
         </template>
       </OdsNotificationBanner>
     </template>
@@ -22,13 +22,16 @@
     <section class="section section--py">
       <div class="container">
         <ClientOnly>
-          <form method="post" ref="newShowcaseForm" action="/api/new-showcase">
+          <form ref="newShowcaseForm" method="post" action="/api/new-showcase">
             <div class="form__group__input">
               <OdsInput id="title-de" label="Title (DE)" placeholder="Titel auf Deutsch"/>
               <OdsInput id="title-fr" label="Title (FR)" placeholder="Titre en Français"/>
               <OdsInput id="title-it" label="Title (IT)" placeholder="Titolo in Italiano"/>
               <OdsInput id="title-en" label="Title (EN)" placeholder="Title in English"/>
             </div>
+            <div class="form__group__input">
+              <OdsInput id="image" type="file" label="Image" accept="image/*" />
+            </div>
             <div class="form__group">
               <OdsInput id="url" label="Website" />
               <OdsMultiSelect id="categories" name="categories" label="Categories" :options="dataThemes" />
@@ -47,7 +50,7 @@
               <OdsTextarea id="body-en" label="Body (EN)" placeholder="Description in English" />
             </div>
             <div class="form__group">
-              <OdsButton variant="outline-negative" title="Submit" @click="submit"></OdsButton>
+              <OdsButton variant="outline-negative" title="Submit" @click="submit"/>
             </div>
           </form>
         </ClientOnly>
diff --git a/opendata.swiss/ui/public/img/uploads/.gitkeep b/opendata.swiss/ui/public/img/uploads/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/opendata.swiss/ui/server/api/showcases.post.ts b/opendata.swiss/ui/server/api/showcases.post.ts
index 3592add..73a9221 100644
--- a/opendata.swiss/ui/server/api/showcases.post.ts
+++ b/opendata.swiss/ui/server/api/showcases.post.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-fallthrough */
 import type {ShowcasesCollectionItem} from '@nuxt/content'
 import type {MultiPartData} from "h3";
 import slugify from "slugify";
@@ -26,16 +25,19 @@ const empty =  (): ShowcaseTranslation => ({
 })
 
 export default defineEventHandler(async (event) => {
-  let contentRoot: string
+  let rootDir: string
 
   if (process.env.NODE_ENV === 'production') {
     // TODO: clone repo, get path to content
-    // contentRoot = `${checkoutPath}/content`
+    // rootDir = checkoutPath
     throw new Error('Saving to GitHub not implemented yet.')
   } else {
-    ({ public: { contentRoot } } = useRuntimeConfig())
+    ({ public: { rootDir } } = useRuntimeConfig())
   }
 
+  const contentRoot = `${rootDir}/content`
+  const imageRoot = `${rootDir}/public/img/uploads`
+
   const body = await readMultipartFormData(event) as PayloadData
   const showcase: Showcase = {
     it: empty(),
@@ -44,10 +46,12 @@ export default defineEventHandler(async (event) => {
     en: empty()
   }
 
+  const titleDe = body.find(field => field.name === 'title-de')?.data?.toString()
+  showcase.slug = slugify(titleDe!, { lower: true, locale: 'de' })
+
   for (const { name, data } of body) {
     switch (name) {
       case 'title-de':
-        showcase.slug = slugify(data.toString(), { lower: true, locale: 'de' })
       case 'title-fr':
       case 'title-en':
       case 'title-it': {
@@ -73,6 +77,11 @@ export default defineEventHandler(async (event) => {
           translation.categories!.push(data.toString())
         })
         break
+      case "image": {
+        const imagePath = `${imageRoot}/${showcase.slug}-image.jpg`
+        await fs.writeFile(imagePath, data)
+      }
+        break
     }
   }
 
diff --git a/opendata.swiss/ui/src/admin/config.yml b/opendata.swiss/ui/src/admin/config.yml
index 4aa71d0..12040bb 100644
--- a/opendata.swiss/ui/src/admin/config.yml
+++ b/opendata.swiss/ui/src/admin/config.yml
@@ -7,9 +7,8 @@ backend:
   base_url: https://gitlab.zazuko.com
   auth_endpoint: oauth/authorize
 
-# These lines should *not* be indented
-media_folder: "public/img" # Media files will be stored in the repo under static/images/uploads
-public_folder: "/img/" # The src attribute for uploaded media will begin with /images/uploads
+media_folder: "public/img/uploads"
+public_folder: "/img/uploads"
 
 i18n:
   structure: multiple_files

From d9f1c49fb7354ca14b812da67a785a3dad91ed9a Mon Sep 17 00:00:00 2001
From: Tomasz Pluskiewicz <tpluscode@users.noreply.github.com>
Date: Fri, 19 Sep 2025 10:23:18 +0200
Subject: [PATCH 11/20] fix: main menu link

---
 opendata.swiss/ui/app/constants/navigation-items.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/opendata.swiss/ui/app/constants/navigation-items.ts b/opendata.swiss/ui/app/constants/navigation-items.ts
index 8f85bb6..b4f344a 100644
--- a/opendata.swiss/ui/app/constants/navigation-items.ts
+++ b/opendata.swiss/ui/app/constants/navigation-items.ts
@@ -13,7 +13,7 @@ export const APP_NAVIGATION_ITEMS: OdsNavTabItem[] = [
     label: 'message.header.navigation.showcases',
     to: '/showcases',
     subMenu: [
-      { label: 'message.header.navigation.showcase_submit', to: '/showcases/new' }
+      { label: 'message.header.navigation.showcase_submit', to: '/showcases/submit' }
     ]
   },
   {

From 28fa372499913ddfb0b8e198926d31ea2b0f3fff Mon Sep 17 00:00:00 2001
From: Tomasz Pluskiewicz <tpluscode@users.noreply.github.com>
Date: Fri, 19 Sep 2025 13:40:04 +0200
Subject: [PATCH 12/20] feat(submit form): minimal client-side validation

---
 opendata.swiss/ui/app/assets/main.css         |  4 +++
 .../ui/app/components/OdsButton.vue           | 13 +++----
 opendata.swiss/ui/content.config.ts           |  2 +-
 opendata.swiss/ui/pages/showcases/submit.vue  | 35 +++++++++++--------
 opendata.swiss/ui/src/admin/config.yml        |  1 +
 5 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/opendata.swiss/ui/app/assets/main.css b/opendata.swiss/ui/app/assets/main.css
index dc62a1f..ed3b456 100644
--- a/opendata.swiss/ui/app/assets/main.css
+++ b/opendata.swiss/ui/app/assets/main.css
@@ -32,3 +32,7 @@
 button {
   border-style: solid !important;
 }
+
+.form__group__input:has(> *:user-invalid), .form__group__select:has(> select:invalid) {
+  color: #b20000;
+}
diff --git a/opendata.swiss/ui/app/components/OdsButton.vue b/opendata.swiss/ui/app/components/OdsButton.vue
index d9549d6..e271b05 100644
--- a/opendata.swiss/ui/app/components/OdsButton.vue
+++ b/opendata.swiss/ui/app/components/OdsButton.vue
@@ -1,15 +1,15 @@
 <template>
   <button
-  type="button"
-  :class="['btn', 'btn--base', classes]"
-  :aria-label="title"
-  :title="title"
+    :type="!submit ? 'button' : undefined"
+    :class="['btn', 'btn--base', classes]"
+    :aria-label="title"
+    :title="title"
   >
     <slot name="icon">
-      <SvgIcon v-if="icon" :icon="icon" :size="size" class="btn__icon" />
+      <SvgIcon v-if="icon" :icon="icon" :size="size" class="btn__icon"/>
     </slot>
     <span class="btn__text">
-      <a v-if="href" :href="href" >
+      <a v-if="href" :href="href">
         <slot>{{ title }}</slot>
       </a>
       <slot v-else>{{ title }}</slot>
@@ -30,6 +30,7 @@ const { title, iconOnly = false, ...props } = defineProps<{
   iconRight?: boolean
   icon?: string
   href?: string
+  submit?: boolean
 }>()
 
 const classes = computed(() => {
diff --git a/opendata.swiss/ui/content.config.ts b/opendata.swiss/ui/content.config.ts
index ceafc25..b977379 100644
--- a/opendata.swiss/ui/content.config.ts
+++ b/opendata.swiss/ui/content.config.ts
@@ -49,7 +49,7 @@ export default defineContentConfig({
         image: z.string().optional(),
         url: z.string().optional(),
         categories: z.array(z.string()).optional(),
-        type: z.string().optional(),
+        type: z.string(),
         datasets: z.array(z.object({
           id: z.string(),
           label: z.string(),
diff --git a/opendata.swiss/ui/pages/showcases/submit.vue b/opendata.swiss/ui/pages/showcases/submit.vue
index 76128ad..84d3e72 100644
--- a/opendata.swiss/ui/pages/showcases/submit.vue
+++ b/opendata.swiss/ui/pages/showcases/submit.vue
@@ -2,10 +2,10 @@
   <OdsPage :page="{ title: 'New Showcase' }">
     <template #header>
       <OdsNotificationBanner :open="success === true" type="success">
-        Your showcase has been submitted
+        The showcase has been submitted
 
         <template #buttons>
-          <OdsButton variant="outline" title="Close" icon-right icon="Checkmark" @click="closeMessages"></OdsButton>
+          <OdsButton variant="outline" title="Close" icon-right icon="Checkmark" @click="closeMessages"/>
         </template>
       </OdsNotificationBanner>
       <OdsNotificationBanner :open="success === false" type="error">
@@ -22,15 +22,15 @@
     <section class="section section--py">
       <div class="container">
         <ClientOnly>
-          <form ref="newShowcaseForm" method="post" action="/api/new-showcase">
+          <form ref="newShowcaseForm" method="post" @submit="submit">
             <div class="form__group__input">
-              <OdsInput id="title-de" label="Title (DE)" placeholder="Titel auf Deutsch"/>
-              <OdsInput id="title-fr" label="Title (FR)" placeholder="Titre en Français"/>
-              <OdsInput id="title-it" label="Title (IT)" placeholder="Titolo in Italiano"/>
-              <OdsInput id="title-en" label="Title (EN)" placeholder="Title in English"/>
+              <OdsInput id="title-de" label="Title (DE)" placeholder="Titel auf Deutsch" required />
+              <OdsInput id="title-fr" label="Title (FR)" placeholder="Titre en Français" required />
+              <OdsInput id="title-it" label="Title (IT)" placeholder="Titolo in Italiano" required />
+              <OdsInput id="title-en" label="Title (EN)" placeholder="Title in English" required />
             </div>
             <div class="form__group__input">
-              <OdsInput id="image" type="file" label="Image" accept="image/*" />
+              <OdsInput id="image" type="file" label="Image" accept="image/*" required />
             </div>
             <div class="form__group">
               <OdsInput id="url" label="Website" />
@@ -44,13 +44,13 @@
               <OdsInput id="tags" label="Tags" />
             </div>
             <div class="form__group">
-              <OdsTextarea id="body-de" label="Body (DE)" placeholder="Beschreibung auf Deutsch" />
-              <OdsTextarea id="body-fr" label="Body (FR)" placeholder="Description en Français" />
-              <OdsTextarea id="body-it" label="Body (IT)" placeholder="Descrizione in Italiano" />
-              <OdsTextarea id="body-en" label="Body (EN)" placeholder="Description in English" />
+              <OdsTextarea id="body-de" label="Body (DE)" placeholder="Beschreibung auf Deutsch" required />
+              <OdsTextarea id="body-fr" label="Body (FR)" placeholder="Description en Français" required />
+              <OdsTextarea id="body-it" label="Body (IT)" placeholder="Descrizione in Italiano" required />
+              <OdsTextarea id="body-en" label="Body (EN)" placeholder="Description in English" required />
             </div>
             <div class="form__group">
-              <OdsButton variant="outline-negative" title="Submit" @click="submit"/>
+              <OdsButton submit variant="outline-negative" title="Submit" />
             </div>
           </form>
         </ClientOnly>
@@ -64,6 +64,11 @@ import { ref } from 'vue'
 import OdsMultiSelect from "../../app/components/dataset/OdsMultiSelect.vue";
 import {useVocabularySearch} from "../../app/piveau/search";
 import OdsNotificationBanner from "../../app/components/OdsNotificationBanner.vue";
+import OdsTextarea from "../../app/components/OdsTextarea.vue";
+import OdsButton from "../../app/components/OdsButton.vue";
+import OdsInput from "../../app/components/OdsInput.vue";
+import OdsSelect from "../../app/components/OdsSelect.vue";
+import OdsPage from "../../app/components/OdsPage.vue";
 
 const { useSearch } = useVocabularySearch()
 const search = useSearch({
@@ -85,7 +90,7 @@ const success = ref<boolean | null>(null)
 const submissionError = ref<string | null>(null)
 
 const newShowcaseForm = ref<HTMLFormElement | null>(null)
-function submit() {
+function submit(e: Event) {
   fetch('/api/showcases', {
     method: 'POST',
     body: new FormData(newShowcaseForm.value!)
@@ -105,6 +110,8 @@ function submit() {
   }).finally(() => {
     window.scrollTo({ top: 0, behavior: 'smooth' })
   })
+
+  e.preventDefault()
 }
 
 function closeMessages() {
diff --git a/opendata.swiss/ui/src/admin/config.yml b/opendata.swiss/ui/src/admin/config.yml
index 053e4e5..c87ad3f 100644
--- a/opendata.swiss/ui/src/admin/config.yml
+++ b/opendata.swiss/ui/src/admin/config.yml
@@ -163,6 +163,7 @@ collections:
         name: url
         widget: string
         i18n: duplicate
+        required: false
       - label: Category
         name: categories
         widget: piveau-vocabulary

From bc8da275f2352aee4135cf76c6f915d08f10130f Mon Sep 17 00:00:00 2001
From: Tomasz Pluskiewicz <tpluscode@users.noreply.github.com>
Date: Mon, 22 Sep 2025 14:54:07 +0200
Subject: [PATCH 13/20] feat(submit form): server-side validation

---
 opendata.swiss/ui/.gitignore                  |   3 +
 opendata.swiss/ui/content.config.ts           |  18 +-
 opendata.swiss/ui/nuxt.config.ts              |   5 +-
 opendata.swiss/ui/package-lock.json           | 234 +++++++++++++-----
 opendata.swiss/ui/package.json                |   8 +-
 opendata.swiss/ui/pages/showcases/submit.vue  |   7 +-
 .../ui/server/api/showcases.post.ts           |  29 ++-
 .../ui/server/plugins/zod-locale.ts           |  16 ++
 opendata.swiss/ui/src/schema/showcase.ts      |  15 ++
 opendata.swiss/ui/tsconfig.json               |   3 +
 10 files changed, 255 insertions(+), 83 deletions(-)
 create mode 100644 opendata.swiss/ui/server/plugins/zod-locale.ts
 create mode 100644 opendata.swiss/ui/src/schema/showcase.ts

diff --git a/opendata.swiss/ui/.gitignore b/opendata.swiss/ui/.gitignore
index 6499689..080e59b 100644
--- a/opendata.swiss/ui/.gitignore
+++ b/opendata.swiss/ui/.gitignore
@@ -23,3 +23,6 @@ logs
 .env
 .env.*
 !.env.example
+
+# ignore images from uploads folder
+public/img/uploads/
diff --git a/opendata.swiss/ui/content.config.ts b/opendata.swiss/ui/content.config.ts
index b977379..cf48be9 100644
--- a/opendata.swiss/ui/content.config.ts
+++ b/opendata.swiss/ui/content.config.ts
@@ -1,4 +1,6 @@
-import { defineCollection, defineContentConfig, z } from '@nuxt/content'
+import { defineCollection, defineContentConfig } from '@nuxt/content'
+import { z } from 'zod'
+import showcase from "./src/schema/showcase.js";
 
 export default defineContentConfig({
   collections: {
@@ -43,19 +45,7 @@ export default defineContentConfig({
     showcases: defineCollection({
       source: 'showcases/*.md',
       type: 'page',
-      schema: z.object({
-        active: z.boolean(),
-        title: z.string(),
-        image: z.string().optional(),
-        url: z.string().optional(),
-        categories: z.array(z.string()).optional(),
-        type: z.string(),
-        datasets: z.array(z.object({
-          id: z.string(),
-          label: z.string(),
-        })).optional(),
-        tags: z.array(z.string()).optional(),
-      })
+      schema: showcase,
     })
   }
 })
diff --git a/opendata.swiss/ui/nuxt.config.ts b/opendata.swiss/ui/nuxt.config.ts
index 24385eb..83865a7 100644
--- a/opendata.swiss/ui/nuxt.config.ts
+++ b/opendata.swiss/ui/nuxt.config.ts
@@ -85,6 +85,9 @@ export default defineNuxtConfig({
   nitro: {
     devProxy: {
       '/admin/': 'http://localhost:5173/admin/',
-    }
+    },
+    plugins: [
+      '~~/server/plugins/zod-locale',
+    ]
   }
 })
diff --git a/opendata.swiss/ui/package-lock.json b/opendata.swiss/ui/package-lock.json
index 5039965..3559e92 100644
--- a/opendata.swiss/ui/package-lock.json
+++ b/opendata.swiss/ui/package-lock.json
@@ -9,13 +9,14 @@
       "version": "0.0.0",
       "hasInstallScript": true,
       "dependencies": {
-        "@nuxt/content": "^3.6.3",
+        "@nuxt/content": "^3.7.1",
         "@nuxt/eslint": "^1.6.0",
         "@nuxt/image": "^1.10.0",
         "@nuxtjs/i18n": "^10.0.1",
         "@pinia/nuxt": "^0.11.1",
         "@piveau/sdk-core": "^0.0.0-beta.2",
         "@piveau/sdk-vue": "^1.0.0-beta.10",
+        "accept-language": "^3.0.20",
         "better-sqlite3": "^12.2.0",
         "bootstrap": "^5.3.7",
         "decap-cms-app": "^3.8.3",
@@ -35,7 +36,8 @@
         "vue-inline-svg": "^4.0.1",
         "vue-router": "^4.5.1",
         "vue-select": "^4.0.0-beta.6",
-        "yaml": "^2.8.1"
+        "yaml": "^2.8.1",
+        "zod": "^4"
       },
       "devDependencies": {
         "@fortawesome/fontawesome-free": "^7.0.1",
@@ -2680,24 +2682,25 @@
       }
     },
     "node_modules/@nuxt/content": {
-      "version": "3.6.3",
-      "resolved": "https://registry.npmjs.org/@nuxt/content/-/content-3.6.3.tgz",
-      "integrity": "sha512-AF9/h5YWLXqQi8m1T40lEQLw7zeV98+LdcHRVrrYsWnFKiScRzJhtn+4uzYqUCKx7KPuXK1GszOvUrY3Ke0Q2w==",
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/content/-/content-3.7.1.tgz",
+      "integrity": "sha512-QjUyxvC3IhLca9gZuGGZslL+L2PkxFwiPD/fbXN1X0EuUfbe17H/AMt53ZRezWrxs6MOaLbyWLHzcllcjEB/jQ==",
       "license": "MIT",
       "dependencies": {
-        "@nuxt/kit": "^3.17.6",
-        "@nuxtjs/mdc": "0.17.0",
-        "@shikijs/langs": "^3.7.0",
-        "@sqlite.org/sqlite-wasm": "3.50.1-build1",
+        "@nuxt/kit": "^4.1.1",
+        "@nuxtjs/mdc": "^0.17.4",
+        "@shikijs/langs": "^3.12.2",
+        "@sqlite.org/sqlite-wasm": "3.50.4-build1",
+        "@standard-schema/spec": "^1.0.0",
         "@webcontainer/env": "^1.1.1",
-        "c12": "^3.0.4",
+        "c12": "^3.2.0",
         "chokidar": "^4.0.3",
         "consola": "^3.4.2",
         "db0": "^0.3.2",
         "defu": "^6.1.4",
         "destr": "^2.0.5",
         "git-url-parse": "^16.1.0",
-        "jiti": "^2.4.2",
+        "jiti": "^2.5.1",
         "json-schema-to-typescript": "^15.0.4",
         "knitwork": "^1.2.0",
         "listhen": "^1.9.0",
@@ -2711,31 +2714,34 @@
         "micromatch": "^4.0.8",
         "minimark": "^0.2.0",
         "minimatch": "^10.0.3",
-        "nuxt-component-meta": "^0.12.1",
-        "nypm": "^0.6.0",
+        "nuxt-component-meta": "^0.14.0",
+        "nypm": "^0.6.1",
         "ohash": "^2.0.11",
         "pathe": "^2.0.3",
-        "pkg-types": "^2.2.0",
+        "pkg-types": "^2.3.0",
         "remark-mdc": "^3.6.0",
         "scule": "^1.3.0",
-        "shiki": "^3.7.0",
+        "shiki": "^3.12.2",
         "slugify": "^1.6.6",
         "socket.io-client": "^4.8.1",
         "tar": "^7.4.3",
-        "tinyglobby": "^0.2.14",
+        "tinyglobby": "^0.2.15",
         "ufo": "^1.6.1",
+        "unctx": "^2.4.1",
         "unified": "^11.0.5",
         "unist-util-stringify-position": "^4.0.0",
         "unist-util-visit": "^5.0.0",
         "ws": "^8.18.3",
-        "zod": "^3.25.72",
+        "zod": "^3.25.76",
         "zod-to-json-schema": "^3.24.6"
       },
       "peerDependencies": {
         "@electric-sql/pglite": "*",
         "@libsql/client": "*",
-        "better-sqlite3": "^12.0.0",
-        "sqlite3": "*"
+        "@valibot/to-json-schema": "^1.0.0",
+        "better-sqlite3": "^12.2.0",
+        "sqlite3": "*",
+        "valibot": "^1.0.0"
       },
       "peerDependenciesMeta": {
         "@electric-sql/pglite": {
@@ -2744,14 +2750,87 @@
         "@libsql/client": {
           "optional": true
         },
+        "@valibot/to-json-schema": {
+          "optional": true
+        },
         "better-sqlite3": {
           "optional": true
         },
         "sqlite3": {
           "optional": true
+        },
+        "valibot": {
+          "optional": true
         }
       }
     },
+    "node_modules/@nuxt/content/node_modules/@nuxt/kit": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.1.2.tgz",
+      "integrity": "sha512-P5q41xeEOa6ZQC0PvIP7TSBmOAMxXK4qihDcCbYIJq8RcVsEPbGZVlidmxE6EOw1ucSyodq9nbV31FAKwoL4NQ==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.2.0",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.7",
+        "ignore": "^7.0.5",
+        "jiti": "^2.5.1",
+        "klona": "^2.0.6",
+        "mlly": "^1.8.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.0",
+        "rc9": "^2.1.2",
+        "scule": "^1.3.0",
+        "semver": "^7.7.2",
+        "std-env": "^3.9.0",
+        "tinyglobby": "^0.2.15",
+        "ufo": "^1.6.1",
+        "unctx": "^2.4.1",
+        "unimport": "^5.2.0",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@nuxt/content/node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/@nuxt/content/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/@nuxt/content/node_modules/zod-to-json-schema": {
+      "version": "3.24.6",
+      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.24.6.tgz",
+      "integrity": "sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "zod": "^3.24.1"
+      }
+    },
     "node_modules/@nuxt/devalue": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@nuxt/devalue/-/devalue-2.0.2.tgz",
@@ -4443,6 +4522,15 @@
         "zod": "^3.24.1"
       }
     },
+    "node_modules/@piveau/sdk-core/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/@piveau/sdk-vue": {
       "version": "1.0.0-beta.10",
       "resolved": "https://registry.npmjs.org/@piveau/sdk-vue/-/sdk-vue-1.0.0-beta.10.tgz",
@@ -4467,6 +4555,15 @@
         }
       }
     },
+    "node_modules/@piveau/sdk-vue/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -5243,9 +5340,9 @@
       "license": "CC0-1.0"
     },
     "node_modules/@sqlite.org/sqlite-wasm": {
-      "version": "3.50.1-build1",
-      "resolved": "https://registry.npmjs.org/@sqlite.org/sqlite-wasm/-/sqlite-wasm-3.50.1-build1.tgz",
-      "integrity": "sha512-yH4M/SHN98NibniIwTVk6rwTJjy7n39l7zwWY3u+qsfZBGTi4lC1uEl2NDvIlkzsFtfCBvHBJJFJ1iuU3UzzEQ==",
+      "version": "3.50.4-build1",
+      "resolved": "https://registry.npmjs.org/@sqlite.org/sqlite-wasm/-/sqlite-wasm-3.50.4-build1.tgz",
+      "integrity": "sha512-Qig2Wso7gPkU1PtXwFzndh+CTRzrIFxVGqv6eCetjU7YqxlHItj+GvQYwYTppCRgAPawtRN/4AJcEgB9xDHGug==",
       "license": "Apache-2.0",
       "bin": {
         "sqlite-wasm": "bin/index.js"
@@ -6454,9 +6551,9 @@
       }
     },
     "node_modules/@vue/language-core": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.0.6.tgz",
-      "integrity": "sha512-e2RRzYWm+qGm8apUHW1wA5RQxzNhkqbbKdbKhiDUcmMrNAZGyM8aTiL3UrTqkaFI5s7wJRGGrp4u3jgusuBp2A==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.0.7.tgz",
+      "integrity": "sha512-0sqqyqJ0Gn33JH3TdIsZLCZZ8Gr4kwlg8iYOnOrDDkJKSjFurlQY/bEFQx5zs7SX2C/bjMkmPYq/NiyY1fTOkw==",
       "license": "MIT",
       "dependencies": {
         "@volar/language-core": "2.4.23",
@@ -6741,6 +6838,15 @@
         "node": ">=6.5"
       }
     },
+    "node_modules/accept-language": {
+      "version": "3.0.20",
+      "resolved": "https://registry.npmjs.org/accept-language/-/accept-language-3.0.20.tgz",
+      "integrity": "sha512-xklPzRma4aoDEPk0ZfMjeuxB2FP4JBYlAR25OFUqCoOYDjYo6wGwAs49SnTN/MoB5VpnNX9tENfZ+vEIFmHQMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "bcp47": "^1.1.2"
+      }
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -7450,6 +7556,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/bcp47": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/bcp47/-/bcp47-1.1.2.tgz",
+      "integrity": "sha512-JnkkL4GUpOvvanH9AZPX38CxhiLsXMBicBY2IAtqiVN8YulGDQybUydWA4W6yAMtw6iShtw+8HEF6cfrTHU+UQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/better-sqlite3": {
       "version": "12.2.0",
       "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-12.2.0.tgz",
@@ -17561,29 +17676,29 @@
       }
     },
     "node_modules/nuxt-component-meta": {
-      "version": "0.12.2",
-      "resolved": "https://registry.npmjs.org/nuxt-component-meta/-/nuxt-component-meta-0.12.2.tgz",
-      "integrity": "sha512-cosF2jUd47TnN7Y8PsRfzdsVomHpVxVjZZIDgyaPqe+wnl2Ys5LXMUt+K3CpXrJrGRFlDRP6ux47Ukevf9juVQ==",
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/nuxt-component-meta/-/nuxt-component-meta-0.14.0.tgz",
+      "integrity": "sha512-RaL6bHJujuZmw/G+uNWAHYktf3k4hdlBIy+FqudXji42IefrJKdSMkh5ixyhsfEHWsuTYGKxD2NU3sq990KGrQ==",
       "license": "MIT",
       "dependencies": {
-        "@nuxt/kit": "^4.0.1",
+        "@nuxt/kit": "^4.1.1",
         "citty": "^0.1.6",
         "json-schema-to-zod": "^2.6.1",
-        "mlly": "^1.7.4",
+        "mlly": "^1.8.0",
         "ohash": "^2.0.11",
         "scule": "^1.3.0",
-        "typescript": "^5.8.3",
+        "typescript": "^5.9.2",
         "ufo": "^1.6.1",
-        "vue-component-meta": "^3.0.3"
+        "vue-component-meta": "^3.0.6"
       },
       "bin": {
         "nuxt-component-meta": "bin/nuxt-component-meta.mjs"
       }
     },
     "node_modules/nuxt-component-meta/node_modules/@nuxt/kit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.1.0.tgz",
-      "integrity": "sha512-QY6wgano7szNP5hLUKNeZTLdx009F2n+a8L9M4Wzk1jhubvENc81jLWHAnaJOogRpqMeEqZcjHRfqTx+J1/lfQ==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.1.2.tgz",
+      "integrity": "sha512-P5q41xeEOa6ZQC0PvIP7TSBmOAMxXK4qihDcCbYIJq8RcVsEPbGZVlidmxE6EOw1ucSyodq9nbV31FAKwoL4NQ==",
       "license": "MIT",
       "dependencies": {
         "c12": "^3.2.0",
@@ -17603,7 +17718,7 @@
         "scule": "^1.3.0",
         "semver": "^7.7.2",
         "std-env": "^3.9.0",
-        "tinyglobby": "^0.2.14",
+        "tinyglobby": "^0.2.15",
         "ufo": "^1.6.1",
         "unctx": "^2.4.1",
         "unimport": "^5.2.0",
@@ -17613,6 +17728,22 @@
         "node": ">=18.12.0"
       }
     },
+    "node_modules/nuxt-component-meta/node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
     "node_modules/nuxt-define": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/nuxt-define/-/nuxt-define-1.0.0.tgz",
@@ -25648,24 +25779,24 @@
       }
     },
     "node_modules/vue-component-meta": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/vue-component-meta/-/vue-component-meta-3.0.6.tgz",
-      "integrity": "sha512-3qC/sCocMBQTnc+xyh4+mKpWGlFbLHcA5m+hONv+BDA56W3ay7QOQeEqlXBjpc8p3uqayI/eGuGDJQQO81sCow==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/vue-component-meta/-/vue-component-meta-3.0.7.tgz",
+      "integrity": "sha512-zdSJAhQ4PHKs9/69vhuZJiPOAZweLWk5ALszu83yWtH82f3cOhGPJfEtSjXy1ROQXke+ntEBMPxtfvIQhtAxPw==",
       "license": "MIT",
       "dependencies": {
         "@volar/typescript": "2.4.23",
-        "@vue/language-core": "3.0.6",
+        "@vue/language-core": "3.0.7",
         "path-browserify": "^1.0.1",
-        "vue-component-type-helpers": "3.0.6"
+        "vue-component-type-helpers": "3.0.7"
       },
       "peerDependencies": {
         "typescript": "*"
       }
     },
     "node_modules/vue-component-type-helpers": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-3.0.6.tgz",
-      "integrity": "sha512-6CRM8X7EJqWCJOiKPvSLQG+hJPb/Oy2gyJx3pLjUEhY7PuaCthQu3e0zAGI1lqUBobrrk9IT0K8sG2GsCluxoQ==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-3.0.7.tgz",
+      "integrity": "sha512-TvyUcFXmjZcXUvU+r1MOyn4/vv4iF+tPwg5Ig33l/FJ3myZkxeQpzzQMLMFWcQAjr6Xs7BRwVy/TwbmNZUA/4w==",
       "license": "MIT"
     },
     "node_modules/vue-devtools-stub": {
@@ -26357,23 +26488,14 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.25.76",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
-      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.11.tgz",
+      "integrity": "sha512-WPsqwxITS2tzx1bzhIKsEs19ABD5vmCVa4xBo2tq/SrV4RNZtfws1EnCWQXM6yh8bD08a1idvkB5MZSBiZsjwg==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
     },
-    "node_modules/zod-to-json-schema": {
-      "version": "3.24.6",
-      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.24.6.tgz",
-      "integrity": "sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==",
-      "license": "ISC",
-      "peerDependencies": {
-        "zod": "^3.24.1"
-      }
-    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/opendata.swiss/ui/package.json b/opendata.swiss/ui/package.json
index 7254447..3e84058 100644
--- a/opendata.swiss/ui/package.json
+++ b/opendata.swiss/ui/package.json
@@ -16,13 +16,14 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@nuxt/content": "^3.6.3",
+    "@nuxt/content": "^3.7.1",
     "@nuxt/eslint": "^1.6.0",
     "@nuxt/image": "^1.10.0",
     "@nuxtjs/i18n": "^10.0.1",
     "@pinia/nuxt": "^0.11.1",
     "@piveau/sdk-core": "^0.0.0-beta.2",
     "@piveau/sdk-vue": "^1.0.0-beta.10",
+    "accept-language": "^3.0.20",
     "better-sqlite3": "^12.2.0",
     "bootstrap": "^5.3.7",
     "decap-cms-app": "^3.8.3",
@@ -42,7 +43,8 @@
     "vue-inline-svg": "^4.0.1",
     "vue-router": "^4.5.1",
     "vue-select": "^4.0.0-beta.6",
-    "yaml": "^2.8.1"
+    "yaml": "^2.8.1",
+    "zod": "^4"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^7.0.1",
@@ -54,4 +56,4 @@
     "vite-plugin-vuetify": "^2.1.1",
     "vuetify": "^3.9.2"
   }
-}
\ No newline at end of file
+}
diff --git a/opendata.swiss/ui/pages/showcases/submit.vue b/opendata.swiss/ui/pages/showcases/submit.vue
index 84d3e72..a356568 100644
--- a/opendata.swiss/ui/pages/showcases/submit.vue
+++ b/opendata.swiss/ui/pages/showcases/submit.vue
@@ -70,6 +70,8 @@ import OdsInput from "../../app/components/OdsInput.vue";
 import OdsSelect from "../../app/components/OdsSelect.vue";
 import OdsPage from "../../app/components/OdsPage.vue";
 
+const { locale } = useI18n()
+
 const { useSearch } = useVocabularySearch()
 const search = useSearch({
   queryParams: {
@@ -93,7 +95,10 @@ const newShowcaseForm = ref<HTMLFormElement | null>(null)
 function submit(e: Event) {
   fetch('/api/showcases', {
     method: 'POST',
-    body: new FormData(newShowcaseForm.value!)
+    body: new FormData(newShowcaseForm.value!),
+    headers: {
+      'Accept-Language': locale.value,
+    }
   }).then(response => {
     if (response.ok) {
       success.value = true
diff --git a/opendata.swiss/ui/server/api/showcases.post.ts b/opendata.swiss/ui/server/api/showcases.post.ts
index 73a9221..7063b56 100644
--- a/opendata.swiss/ui/server/api/showcases.post.ts
+++ b/opendata.swiss/ui/server/api/showcases.post.ts
@@ -1,8 +1,9 @@
 import type {ShowcasesCollectionItem} from '@nuxt/content'
-import type {MultiPartData} from "h3";
+import type {H3Event, MultiPartData} from "h3";
 import slugify from "slugify";
 import * as fs from 'node:fs/promises'
 import * as yaml from 'yaml'
+import showcaseSchema from '../../src/schema/showcase.js'
 
 const languages = ['en', 'fr', 'de', 'it'] as const
 
@@ -85,15 +86,17 @@ export default defineEventHandler(async (event) => {
     }
   }
 
-  // TODO: choose to save to GitHub or locally based on environment
-  await save(showcase, contentRoot)
+  return validate(event, showcase) || (async () => {
+    // TODO: choose to save to GitHub or locally based on environment
+    await save(showcase, contentRoot)
 
-  if (process.env.NODE_ENV === 'production') {
-    // TODO: commit and push to repo
-    throw new Error('Saving to GitHub not implemented yet.')
-  }
+    if (process.env.NODE_ENV === 'production') {
+      // TODO: commit and push to repo
+      throw new Error('Saving to GitHub not implemented yet.')
+    }
 
-  return { message: 'Showcase submission received successfully.' };
+    return { message: 'Showcase submission received successfully.' };
+  })()
 });
 
 function save(showcase: Showcase, contentRoot: string) {
@@ -122,3 +125,13 @@ function toAll<K extends keyof ShowcaseTranslation>(showcase: Showcase, key: K,
     }
   }
 }
+
+function validate(event: H3Event, showcase: Showcase) {
+  for (const language of languages) {
+    const { error } = showcaseSchema.safeParse(showcase[language])
+    if (error) {
+      event.node.res.statusCode = 400
+      return error.issues
+    }
+  }
+}
diff --git a/opendata.swiss/ui/server/plugins/zod-locale.ts b/opendata.swiss/ui/server/plugins/zod-locale.ts
new file mode 100644
index 0000000..e6e1e58
--- /dev/null
+++ b/opendata.swiss/ui/server/plugins/zod-locale.ts
@@ -0,0 +1,16 @@
+import { defineNitroPlugin } from '#imports'
+import { config } from 'zod'
+import { en, de, fr, it } from 'zod/locales'
+import acceptLanguage from 'accept-language';
+
+acceptLanguage.languages(['de', 'fr', 'it', 'en'])
+
+const languages = new Map(Object.entries({ en, de, fr, it }))
+
+export default defineNitroPlugin((nitro) => {
+  nitro.hooks.hook('request', ({ headers }) => {
+    const language = acceptLanguage.get(headers.get('accept-language'))
+    const locale = languages.get(language || 'de') || de
+    config(locale())
+  })
+})
diff --git a/opendata.swiss/ui/src/schema/showcase.ts b/opendata.swiss/ui/src/schema/showcase.ts
new file mode 100644
index 0000000..29aa08f
--- /dev/null
+++ b/opendata.swiss/ui/src/schema/showcase.ts
@@ -0,0 +1,15 @@
+import {z} from "zod/v4";
+
+export default z.object({
+  active: z.boolean(),
+  title: z.string().min(5),
+  image: z.string().optional(),
+  url: z.string().optional(),
+  categories: z.array(z.string()).optional(),
+  type: z.string(),
+  datasets: z.array(z.object({
+    id: z.string(),
+    label: z.string(),
+  })).optional(),
+  tags: z.array(z.string()).optional(),
+})
diff --git a/opendata.swiss/ui/tsconfig.json b/opendata.swiss/ui/tsconfig.json
index 307b213..fd6062c 100644
--- a/opendata.swiss/ui/tsconfig.json
+++ b/opendata.swiss/ui/tsconfig.json
@@ -1,5 +1,8 @@
 {
   // https://nuxt.com/docs/guide/concepts/typescript
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true
+  },
   "files": [],
   "references": [
     {

From fc71d9122c29f9704e33c44cc54a877b3a50325d Mon Sep 17 00:00:00 2001
From: Tomasz Pluskiewicz <tpluscode@users.noreply.github.com>
Date: Tue, 23 Sep 2025 10:00:40 +0200
Subject: [PATCH 14/20] feat: display server validation issues on page

---
 opendata.swiss/ui/pages/showcases/submit.vue | 40 +++++++++++++-------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/opendata.swiss/ui/pages/showcases/submit.vue b/opendata.swiss/ui/pages/showcases/submit.vue
index a356568..7ad59d0 100644
--- a/opendata.swiss/ui/pages/showcases/submit.vue
+++ b/opendata.swiss/ui/pages/showcases/submit.vue
@@ -12,6 +12,11 @@
         Failed to submit showcase.
 
         <pre>{{ submissionError }}</pre>
+        <ul>
+          <li v-for="issue in submissionValidationIssues" :key="issue.path.join('-')">
+            {{ issue.path.join('.')}}: {{ issue.message }}
+          </li>
+        </ul>
 
         <template #buttons>
           <OdsButton variant="outline" title="Close" icon-right icon="Checkmark" @click="closeMessages"/>
@@ -61,6 +66,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import type { $ZodIssue as ZodIssue } from "zod/v4/core";
 import OdsMultiSelect from "../../app/components/dataset/OdsMultiSelect.vue";
 import {useVocabularySearch} from "../../app/piveau/search";
 import OdsNotificationBanner from "../../app/components/OdsNotificationBanner.vue";
@@ -90,33 +96,39 @@ useSeoMeta({title: 'New Showcase | opendata.swiss'})
 
 const success = ref<boolean | null>(null)
 const submissionError = ref<string | null>(null)
+const submissionValidationIssues = ref<ZodIssue[]>([])
 
 const newShowcaseForm = ref<HTMLFormElement | null>(null)
-function submit(e: Event) {
-  fetch('/api/showcases', {
-    method: 'POST',
-    body: new FormData(newShowcaseForm.value!),
-    headers: {
-      'Accept-Language': locale.value,
-    }
-  }).then(response => {
+async function submit(e: Event) {
+  e.preventDefault()
+
+  try {
+    const response = await fetch('/api/showcases', {
+      method: 'POST',
+      body: new FormData(newShowcaseForm.value!),
+      headers: {
+        'Accept-Language': locale.value,
+      }
+    })
     if (response.ok) {
       success.value = true
       if (newShowcaseForm.value) {
         newShowcaseForm.value.reset()
       }
+    } else if (response.status === 400) {
+      submissionError.value = 'Form contains invalid data:'
+      submissionValidationIssues.value = await response.json()
+      success.value = false
     } else {
       submissionError.value = `Server responded with: ${response.status} - ${response.statusText}`
       success.value = false
     }
-  }).catch((e) => {
+  } catch (e) {
     submissionError.value = `${e.message}\n${e.stack}`
     success.value = false
-  }).finally(() => {
-    window.scrollTo({ top: 0, behavior: 'smooth' })
-  })
-
-  e.preventDefault()
+  } finally {
+    window.scrollTo({top: 0, behavior: 'smooth'})
+  }
 }
 
 function closeMessages() {

From 77d433a95e349d542c1f4ca9805bec6d1df56999 Mon Sep 17 00:00:00 2001
From: Tomasz Pluskiewicz <tpluscode@users.noreply.github.com>
Date: Tue, 23 Sep 2025 10:08:41 +0200
Subject: [PATCH 15/20] refactor: save uploaded file only when validation is
 successful

---
 opendata.swiss/ui/server/api/showcases.post.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/opendata.swiss/ui/server/api/showcases.post.ts b/opendata.swiss/ui/server/api/showcases.post.ts
index 7063b56..430e642 100644
--- a/opendata.swiss/ui/server/api/showcases.post.ts
+++ b/opendata.swiss/ui/server/api/showcases.post.ts
@@ -39,6 +39,7 @@ export default defineEventHandler(async (event) => {
   const contentRoot = `${rootDir}/content`
   const imageRoot = `${rootDir}/public/img/uploads`
 
+  const uploads: Array<() => Promise<void>> = []
   const body = await readMultipartFormData(event) as PayloadData
   const showcase: Showcase = {
     it: empty(),
@@ -46,7 +47,6 @@ export default defineEventHandler(async (event) => {
     fr: empty(),
     en: empty()
   }
-
   const titleDe = body.find(field => field.name === 'title-de')?.data?.toString()
   showcase.slug = slugify(titleDe!, { lower: true, locale: 'de' })
 
@@ -80,7 +80,7 @@ export default defineEventHandler(async (event) => {
         break
       case "image": {
         const imagePath = `${imageRoot}/${showcase.slug}-image.jpg`
-        await fs.writeFile(imagePath, data)
+        uploads.push(fs.writeFile.bind(null, imagePath, data))
       }
         break
     }
@@ -88,7 +88,7 @@ export default defineEventHandler(async (event) => {
 
   return validate(event, showcase) || (async () => {
     // TODO: choose to save to GitHub or locally based on environment
-    await save(showcase, contentRoot)
+    await save(showcase, uploads, contentRoot)
 
     if (process.env.NODE_ENV === 'production') {
       // TODO: commit and push to repo
@@ -99,17 +99,19 @@ export default defineEventHandler(async (event) => {
   })()
 });
 
-function save(showcase: Showcase, contentRoot: string) {
+function save(showcase: Showcase, uploads: Array<() => Promise<void>>, contentRoot: string) {
   const { slug } = showcase
 
-  return Promise.all(languages.map(language => {
+  const writeContent = languages.map(language => {
     const path = `${contentRoot}/showcases/${slug}.${language}.md`
 
     const { body, ...meta } = showcase[language]
     const frontMatter = yaml.stringify(meta)
 
     return fs.writeFile(path, `---\n${frontMatter}---\n${body}`)
-  }))
+  })
+
+  return Promise.all([...writeContent, ...uploads.map(upload => upload())])
 }
 
 interface Setter {

From 8debb52c7f833ebc00e6b38a1348b7e28fe4346b Mon Sep 17 00:00:00 2001
From: Tomasz Pluskiewicz <tpluscode@users.noreply.github.com>
Date: Tue, 23 Sep 2025 14:51:30 +0200
Subject: [PATCH 16/20] chore: log unhandled field

---
 opendata.swiss/ui/server/api/showcases.post.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/opendata.swiss/ui/server/api/showcases.post.ts b/opendata.swiss/ui/server/api/showcases.post.ts
index 430e642..f26dddf 100644
--- a/opendata.swiss/ui/server/api/showcases.post.ts
+++ b/opendata.swiss/ui/server/api/showcases.post.ts
@@ -83,6 +83,9 @@ export default defineEventHandler(async (event) => {
         uploads.push(fs.writeFile.bind(null, imagePath, data))
       }
         break
+      default:
+        console.warn(`Unknown field: ${name}`)
+        break
     }
   }
 

From 047c18a59070084e82e18da1e23ee977e2f4ade9 Mon Sep 17 00:00:00 2001
From: tpluscode <tpluscode@users.noreply.github.com>
Date: Wed, 24 Sep 2025 10:32:49 +0200
Subject: [PATCH 17/20] feat(showcases): add margin-top to form groups

---
 opendata.swiss/ui/pages/showcases/submit.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/opendata.swiss/ui/pages/showcases/submit.vue b/opendata.swiss/ui/pages/showcases/submit.vue
index 7ad59d0..0fba9ab 100644
--- a/opendata.swiss/ui/pages/showcases/submit.vue
+++ b/opendata.swiss/ui/pages/showcases/submit.vue
@@ -27,7 +27,7 @@
     <section class="section section--py">
       <div class="container">
         <ClientOnly>
-          <form ref="newShowcaseForm" method="post" @submit="submit">
+          <form ref="newShowcaseForm" class="form" method="post" @submit="submit">
             <div class="form__group__input">
               <OdsInput id="title-de" label="Title (DE)" placeholder="Titel auf Deutsch" required />
               <OdsInput id="title-fr" label="Title (FR)" placeholder="Titre en Français" required />

From 5d0a46944537f41620198fa6daa5390638716c66 Mon Sep 17 00:00:00 2001
From: tpluscode <tpluscode@users.noreply.github.com>
Date: Wed, 24 Sep 2025 10:33:08 +0200
Subject: [PATCH 18/20] revert(showcases): remove showcases submenu from main
 menu

---
 opendata.swiss/ui/app/constants/navigation-items.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/opendata.swiss/ui/app/constants/navigation-items.ts b/opendata.swiss/ui/app/constants/navigation-items.ts
index 854acf5..5d22ea4 100644
--- a/opendata.swiss/ui/app/constants/navigation-items.ts
+++ b/opendata.swiss/ui/app/constants/navigation-items.ts
@@ -12,9 +12,6 @@ export const APP_NAVIGATION_ITEMS: OdsNavTabItem[] = [
   {
     label: 'message.header.navigation.showcases',
     to: '/showcases',
-    subMenu: [
-      { label: 'message.header.navigation.showcase_submit', to: '/showcases/submit' }
-    ]
   },
   {
     label: 'message.header.navigation.blog',

From db44705261f98b18ce0ac20a579cd44c252a181a Mon Sep 17 00:00:00 2001
From: tpluscode <tpluscode@users.noreply.github.com>
Date: Thu, 25 Sep 2025 09:35:55 +0200
Subject: [PATCH 19/20] fix(showcases): placeholder for tags input

---
 opendata.swiss/ui/pages/showcases/submit.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/opendata.swiss/ui/pages/showcases/submit.vue b/opendata.swiss/ui/pages/showcases/submit.vue
index 0fba9ab..0e31bae 100644
--- a/opendata.swiss/ui/pages/showcases/submit.vue
+++ b/opendata.swiss/ui/pages/showcases/submit.vue
@@ -46,7 +46,7 @@
                 <option value="event">Event</option>
                 <option value="blog_and_media_articles">Blog/Article</option>
               </OdsSelect>
-              <OdsInput id="tags" label="Tags" />
+              <OdsInput id="tags" label="Tags" placeholder="Enter tags separated by commas" />
             </div>
             <div class="form__group">
               <OdsTextarea id="body-de" label="Body (DE)" placeholder="Beschreibung auf Deutsch" required />

From 77a1e47f9cdd8181b20562f30d846c4aa02835af Mon Sep 17 00:00:00 2001
From: tpluscode <tpluscode@users.noreply.github.com>
Date: Fri, 26 Sep 2025 10:38:22 +0200
Subject: [PATCH 20/20] fix: bad config merge

---
 opendata.swiss/ui/nuxt.config.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/opendata.swiss/ui/nuxt.config.ts b/opendata.swiss/ui/nuxt.config.ts
index eeb958b..fabc3e0 100644
--- a/opendata.swiss/ui/nuxt.config.ts
+++ b/opendata.swiss/ui/nuxt.config.ts
@@ -9,6 +9,7 @@ const { PIVEAU_HUB_REPO_URL, PIVEAU_HUB_SEARCH_URL} = process.env
 export default defineNuxtConfig({
   runtimeConfig: {
     public: {
+      rootDir: __dirname,
       PIVEAU_HUB_REPO_URL,
       PIVEAU_HUB_SEARCH_URL
     }
@@ -41,11 +42,6 @@ export default defineNuxtConfig({
       }
     }
   },
-  runtimeConfig: {
-    public: {
-      rootDir: __dirname
-    }
-  },
   mdc: {
     components: {
       map: {