yunohost-portal/pages/index.vue

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

const { t } = 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
  }
})
</script>

<template>
  <div>
    <CustomText v-if="intro" :content="intro" />

    <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>