yunohost-portal/pages/index.vue

<script setup lang="ts">
definePageMeta({
  public: true,
})

const { t, locale } = useI18n()
const isLoggedIn = await useIsLoggedIn()
const settings = await useSettings()
const appsData = await useApps()

useHead({
  title: t('app_list'),
})

const intro = computed(() => {
  const {
    portal_user_intro: userIntro,
    portal_public_intro: publicIntro,
    public: isPublic,
  } = settings.value
  return isLoggedIn.value ? userIntro : isPublic ? publicIntro : null
})

const apps = Object.entries(appsData.value).map(([id, app]) => {
  return {
    ...app,
    url: '//' + app.url,
    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" />

      <div v-if="!apps.length">
        <em>{{ t('no_apps') }}</em>
      </div>
      <ul v-else class="grid md:grid-cols-2 xl:grid-cols-3 gap-4">
        <li
          v-for="app in apps"
          :key="app.label"
          class="flex flex-auto border rounded p-4 relative hover:bg-neutral hover:text-neutral-content hover:border-neutral"
        >
          <img
            v-if="app.logo"
            aria-hidden="true"
            :src="app.logo"
            class="w-24 h-24 rounded me-4 bg-white"
          />
          <div>
            <h4 class="text-xl font-bold">
              <a :href="app.url" class="">{{ app.label }}</a>
            </h4>
            <div v-if="app.description" v-html="app.description" />
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>

<style scoped>
.grid li a::after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
</style>