home: add custom intro

components/CustomText.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+defineProps<{
+  content: string
+}>()
+</script>
+
+<template>
+  <section class="intro" v-html="content" />
+</template>
+
+<style>
+.intro p {
+  @apply mb-4;
+}
+
+.intro a {
+  @apply link;
+  @apply font-normal;
+}
+
+.intro em {
+  @apply italic;
+}
+.intro strong {
+  @apply font-bold;
+}
+
+.intro ul,
+.intro ol {
+  @apply list-disc list-inside mb-4;
+}
+.intro ol {
+  @apply list-decimal;
+}
+
+.intro dt {
+  @apply font-bold;
+}
+.intro dd {
+  @apply mb-1;
+}
+.intro dd:last-of-type {
+  @apply mb-4;
+}
+
+.intro h2 {
+  @apply text-5xl font-bold my-10;
+}
+.intro h3 {
+  @apply text-4xl font-medium my-6;
+}
+.intro h4 {
+  @apply text-3xl font-bold my-4;
+}
+.intro h5 {
+  @apply text-2xl my-3;
+}
+.intro h6 {
+  @apply text-xl font-bold my-2;
+}
+
+.intro blockquote {
+  @apply px-4 my-6;
+}
+
+.intro img,
+.intro video {
+  @apply my-6;
+}
+</style>

composables/states.ts

@@ -25,6 +25,8 @@ export interface Settings {
   portal_theme: string
   portal_title: string
   show_other_domains_apps: 0 | 1
+  portal_user_intro: string
+  portal_public_intro: string
   apps: Record<string, { label: string; url: string }>
 }
 

pages/index.vue

@@ -10,6 +10,15 @@ 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 = computed(() => {
   const appTileVariant = [
     'btn-primary',
@@ -49,7 +58,9 @@ const apps = computed(() => {
   <div>
     <PageTitle :text="$t('app_list')" sr-only />
 
-    <div id="apps" class="my-10">
+    <CustomText v-if="intro" :content="intro" />
+
+    <section id="apps" class="my-10">
       <div v-if="!apps.length" class="w-2/3">
         <em>{{ t('no_apps') }}</em>
       </div>
@@ -64,11 +75,11 @@ const apps = computed(() => {
           </a>
         </li>
       </ul>
-    </div>
+    </section>
   </div>
 </template>
 
-<style>
+<style scoped>
 .tile-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, 9rem);