home: add search engine bar

assets/icons/magnify.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5Z"/></svg>

composables/states.ts

@@ -84,6 +84,8 @@ export interface Settings {
   portal_logo?: string
   portal_theme: string
   portal_title?: string
+  search_engine?: string
+  search_engine_name?: string
   show_other_domains_apps: 0 | 1
   portal_user_intro: string
   portal_public_intro: string

locales/en.json

@@ -45,6 +45,8 @@
     "primary_mail_adress": "Primary mail adress",
     "remove": "Remove",
     "save": "Save",
+    "search": "Search",
+    "search_engine_placeholder": "Search on {engine}",
     "skip_link": {
         "main_content": "Skip to main content",
         "footer": "Skip to footer"

pages/index.vue

@@ -3,7 +3,7 @@ definePageMeta({
   public: true,
 })
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const isLoggedIn = await useIsLoggedIn()
 const settings = await useSettings()
 const appsData = await useApps()
@@ -28,12 +28,41 @@ const apps = Object.entries(appsData.value).map(([id, app]) => {
     description: app.description[locale.value] || app.description.en
   }
 })
+
+const search = ref('')
+
+async function onSearchSubmit() {
+  await navigateTo(
+    settings.value.search_engine + search.value,
+    {
+      open: {
+        target: '_blank',
+      }
+    }
+  )
+}
 </script>
 
 <template>
   <div>
     <CustomText v-if="intro" :content="intro" />
 
+    <form class="flex my-16" @submit.prevent>
+      <div class="join w-full max-w-xl mx-auto">
+        <input
+          v-model="search"
+          type="search"
+          class="input input-bordered join-item w-full"
+          name="search"
+          :placeholder="t('search_engine_placeholder', { engine: settings.search_engine_name })"
+        >
+        <button type="submit" class="btn btn-primary join-item px-2" @click="onSearchSubmit">
+          <YIcon name="magnify" aria-hidden="true" class="m-0" />
+          <span class="sr-only">{{ t('search') }}</span>
+        </button>
+      </div>
+    </form>
+
     <section id="apps" class="my-16">
       <PageTitle :text="t('app_list')" tag="h2" sr-only class="mb-4" />