nuxt-ignis 0.2.5 → 0.3.1

package/.nuxt/ui.css

@@ -0,0 +1,143 @@
+@source "./ui";
+
+@theme default inline {
+  --color-old-neutral-50: oklch(98.5% 0 0);
+  --color-old-neutral-100: oklch(97% 0 0);
+  --color-old-neutral-200: oklch(92.2% 0 0);
+  --color-old-neutral-300: oklch(87% 0 0);
+  --color-old-neutral-400: oklch(70.8% 0 0);
+  --color-old-neutral-500: oklch(55.6% 0 0);
+  --color-old-neutral-600: oklch(43.9% 0 0);
+  --color-old-neutral-700: oklch(37.1% 0 0);
+  --color-old-neutral-800: oklch(26.9% 0 0);
+  --color-old-neutral-900: oklch(20.5% 0 0);
+  --color-old-neutral-950: oklch(14.5% 0 0);
+  --color-primary-50: var(--ui-color-primary-50);
+	--color-primary-100: var(--ui-color-primary-100);
+	--color-primary-200: var(--ui-color-primary-200);
+	--color-primary-300: var(--ui-color-primary-300);
+	--color-primary-400: var(--ui-color-primary-400);
+	--color-primary-500: var(--ui-color-primary-500);
+	--color-primary-600: var(--ui-color-primary-600);
+	--color-primary-700: var(--ui-color-primary-700);
+	--color-primary-800: var(--ui-color-primary-800);
+	--color-primary-900: var(--ui-color-primary-900);
+	--color-primary-950: var(--ui-color-primary-950);
+	--color-secondary-50: var(--ui-color-secondary-50);
+	--color-secondary-100: var(--ui-color-secondary-100);
+	--color-secondary-200: var(--ui-color-secondary-200);
+	--color-secondary-300: var(--ui-color-secondary-300);
+	--color-secondary-400: var(--ui-color-secondary-400);
+	--color-secondary-500: var(--ui-color-secondary-500);
+	--color-secondary-600: var(--ui-color-secondary-600);
+	--color-secondary-700: var(--ui-color-secondary-700);
+	--color-secondary-800: var(--ui-color-secondary-800);
+	--color-secondary-900: var(--ui-color-secondary-900);
+	--color-secondary-950: var(--ui-color-secondary-950);
+	--color-success-50: var(--ui-color-success-50);
+	--color-success-100: var(--ui-color-success-100);
+	--color-success-200: var(--ui-color-success-200);
+	--color-success-300: var(--ui-color-success-300);
+	--color-success-400: var(--ui-color-success-400);
+	--color-success-500: var(--ui-color-success-500);
+	--color-success-600: var(--ui-color-success-600);
+	--color-success-700: var(--ui-color-success-700);
+	--color-success-800: var(--ui-color-success-800);
+	--color-success-900: var(--ui-color-success-900);
+	--color-success-950: var(--ui-color-success-950);
+	--color-info-50: var(--ui-color-info-50);
+	--color-info-100: var(--ui-color-info-100);
+	--color-info-200: var(--ui-color-info-200);
+	--color-info-300: var(--ui-color-info-300);
+	--color-info-400: var(--ui-color-info-400);
+	--color-info-500: var(--ui-color-info-500);
+	--color-info-600: var(--ui-color-info-600);
+	--color-info-700: var(--ui-color-info-700);
+	--color-info-800: var(--ui-color-info-800);
+	--color-info-900: var(--ui-color-info-900);
+	--color-info-950: var(--ui-color-info-950);
+	--color-warning-50: var(--ui-color-warning-50);
+	--color-warning-100: var(--ui-color-warning-100);
+	--color-warning-200: var(--ui-color-warning-200);
+	--color-warning-300: var(--ui-color-warning-300);
+	--color-warning-400: var(--ui-color-warning-400);
+	--color-warning-500: var(--ui-color-warning-500);
+	--color-warning-600: var(--ui-color-warning-600);
+	--color-warning-700: var(--ui-color-warning-700);
+	--color-warning-800: var(--ui-color-warning-800);
+	--color-warning-900: var(--ui-color-warning-900);
+	--color-warning-950: var(--ui-color-warning-950);
+	--color-error-50: var(--ui-color-error-50);
+	--color-error-100: var(--ui-color-error-100);
+	--color-error-200: var(--ui-color-error-200);
+	--color-error-300: var(--ui-color-error-300);
+	--color-error-400: var(--ui-color-error-400);
+	--color-error-500: var(--ui-color-error-500);
+	--color-error-600: var(--ui-color-error-600);
+	--color-error-700: var(--ui-color-error-700);
+	--color-error-800: var(--ui-color-error-800);
+	--color-error-900: var(--ui-color-error-900);
+	--color-error-950: var(--ui-color-error-950);
+	--color-neutral-50: var(--ui-color-neutral-50);
+	--color-neutral-100: var(--ui-color-neutral-100);
+	--color-neutral-200: var(--ui-color-neutral-200);
+	--color-neutral-300: var(--ui-color-neutral-300);
+	--color-neutral-400: var(--ui-color-neutral-400);
+	--color-neutral-500: var(--ui-color-neutral-500);
+	--color-neutral-600: var(--ui-color-neutral-600);
+	--color-neutral-700: var(--ui-color-neutral-700);
+	--color-neutral-800: var(--ui-color-neutral-800);
+	--color-neutral-900: var(--ui-color-neutral-900);
+	--color-neutral-950: var(--ui-color-neutral-950);
+  --color-primary: var(--ui-primary);
+	--color-secondary: var(--ui-secondary);
+	--color-success: var(--ui-success);
+	--color-info: var(--ui-info);
+	--color-warning: var(--ui-warning);
+	--color-error: var(--ui-error);
+  --radius-xs: calc(var(--ui-radius) * 0.5);
+  --radius-sm: var(--ui-radius);
+  --radius-md: calc(var(--ui-radius) * 1.5);
+  --radius-lg: calc(var(--ui-radius) * 2);
+  --radius-xl: calc(var(--ui-radius) * 3);
+  --radius-2xl: calc(var(--ui-radius) * 4);
+  --radius-3xl: calc(var(--ui-radius) * 6);
+  --text-color-dimmed: var(--ui-text-dimmed);
+  --text-color-muted: var(--ui-text-muted);
+  --text-color-toned: var(--ui-text-toned);
+  --text-color-default: var(--ui-text);
+  --text-color-highlighted: var(--ui-text-highlighted);
+  --text-color-inverted: var(--ui-text-inverted);
+  --background-color-default: var(--ui-bg);
+  --background-color-muted: var(--ui-bg-muted);
+  --background-color-elevated: var(--ui-bg-elevated);
+  --background-color-accented: var(--ui-bg-accented);
+  --background-color-inverted: var(--ui-bg-inverted);
+  --background-color-border: var(--ui-border);
+  --border-color-default: var(--ui-border);
+  --border-color-muted: var(--ui-border-muted);
+  --border-color-accented: var(--ui-border-accented);
+  --border-color-inverted: var(--ui-border-inverted);
+  --border-color-bg: var(--ui-bg);
+  --ring-color-default: var(--ui-border);
+  --ring-color-muted: var(--ui-border-muted);
+  --ring-color-accented: var(--ui-border-accented);
+  --ring-color-inverted: var(--ui-border-inverted);
+  --ring-color-bg: var(--ui-bg);
+  --ring-offset-color-default: var(--ui-border);
+  --ring-offset-color-muted: var(--ui-border-muted);
+  --ring-offset-color-accented: var(--ui-border-accented);
+  --ring-offset-color-inverted: var(--ui-border-inverted);
+  --ring-offset-color-bg: var(--ui-bg);
+  --divide-color-default: var(--ui-border);
+  --divide-color-muted: var(--ui-border-muted);
+  --divide-color-accented: var(--ui-border-accented);
+  --divide-color-inverted: var(--ui-border-inverted);
+  --divide-color-bg: var(--ui-bg);
+  --outline-color-default: var(--ui-border);
+  --outline-color-inverted: var(--ui-border-inverted);
+  --stroke-default: var(--ui-border);
+  --stroke-inverted: var(--ui-border-inverted);
+  --fill-default: var(--ui-border);
+  --fill-inverted: var(--ui-border-inverted);
+}

package/app.vue

@@ -1,59 +1,39 @@
 <template>
-  <div class="p-3">
-    <div class="ignis-header">
-      <img src="/nuxt-ignis.png" class="ignis-logo" :title :alt>
-      <h1 class="my-4 text-4xl text-amber-400 font-bold">
-        {{ useT("title") }}
-      </h1>
-      <img src="/nuxt-ignis.png" class="ignis-logo" :title :alt>
-    </div>
-    <div>{{ useT("subtitle") }}</div>
+  <UApp v-if="ui">
     <NuxtPage v-if="pages" />
-    <AppFeatureList v-else />
-    <CurrentTime />
-    <div class="link text-xs">
-      <NuxtLink to="https://github.com/AloisSeckar/nuxt-ignis">
-        https://github.com/AloisSeckar/nuxt-ignis
-      </NuxtLink>
-    </div>
+    <IgnisInfo v-else />
+  </UApp>
+  <div v-else>
+    <NuxtPage v-if="pages" />
+    <IgnisInfo v-else />
   </div>
 </template>
 
 <script setup lang="ts">
-import { useT } from '#imports' // requires explicit import for some reason
-
 useHead({
   title: useAppConfig().textTitle,
   htmlAttrs: {
     lang: 'en',
   },
   bodyAttrs: {
-    class: 'bg-slate-900 m-auto text-center text-white',
+    class: 'ignis-body',
   },
 })
 initConsola()
 
 log.info('Nuxt Ignis was here!')
 
-const title = useT('title')
-const alt = title
-
-const pages = useRuntimeConfig().public.ignis.pages
+const config = useRuntimeConfig().public.ignis
+const pages = config.pages
+const ui = config.ui || config.preset.ui
 </script>
 
 <style scoped>
-.ignis-header {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  margin-bottom: 10px;
-}
-.ignis-logo {
-  display: inline;
-  width: 64px;
-  height: 64px;
-}
-.ignis-title {
-  margin-top: 15px;
+/* bg-slate-900 m-auto text-center text-white */
+.ignis-body {
+  margin: auto;
+  background-color: #0f172a;
+  color: white;
+  text-align: center;
 }
 </style>

package/assets/css/nuxt-ui.css

@@ -0,0 +1,16 @@
+/*
+  This will import Tailwind CSS for Nuxt UI
+  https://ui.nuxt.com/getting-started/installation/nuxt#import-tailwind-css-and-nuxt-ui-in-your-css
+
+  NUXT_PUBLIC_IGNIS_PRESET_UI=nuxt-ui or NUXT_PUBLIC_IGNIS_UI=true is required for se this feature
+*/
+
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+/*
+// Tailwind v4 way of defining custom classes
+@utility <name> {
+  // css rules here
+}
+*/

package/assets/css/tailwind.css

@@ -1,49 +1,15 @@
-/* 
-  This file is auto-imported when using Tailwind CSS
+/*
+  This will import Tailwind CSS
+  https://tailwindcss.com/docs/installation/
 
-  Use @apply if you don't want to define style for each element separately
-
-  Read more at:
-  https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply
-  https://tailwindcss.com/docs/functions-and-directives#apply
-
-  Use correct @layer to keep your Tailwind CSS organized:
-  https://bloggie.io/@kinopyo/organize-your-css-in-the-tailwind-style-with-layer-directive
-
-  And most importantly: THINK TWICE before using this approach!
+  NUXT_PUBLIC_IGNIS_PRESET_UI=tailwind or NUXT_PUBLIC_IGNIS_TAILWIND=true is required for se this feature
 */
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-
-    /* 
-      Tailwind CSS classes might be auto-applied to all respective elements like this.
-      However, I recommend NOT to use it like that, because this obsfucates code logic
-      and makes maintaing harder (even you should soon forgot styles are defined here)
-    */
-
-    /* NOTE: For setting "body" tag attributes, it is better to use useHead() composable - @see `app.vue`*/
-    /*
-    body {
-        @apply bg-slate-900;
-    }
-    */
+@import "tailwindcss";
 
+/*
+// Tailwind v4 way of defining custom classes
+@utility <name> {
+  // css rules here
 }
-
-@layer components {
-
-    /* 
-      Following classes are available to use throughout the app as shorthands.
-      Although still discouraged by Tailwind CSS authors, this usage makes more
-      sense, because the class name is visible and trackable in SFC templates.
-    */
-
-    .link {
-        @apply my-2 text-amber-400 hover:text-amber-200;
-    }
-
-}
+*/

package/components/AppFeature.vue

@@ -22,10 +22,13 @@
 -->
 
 <template>
-  <div class="m-1 px-2 py-1 border border-amber-300 font-bold text-lg text-feature hover:bg-slate-700">
+  <div
+    class="feature"
+    :class="active ? '' : 'feature-disabled'"
+    :title="active ? 'Active' : 'Inactive'">
     {{ text }}
-    <div v-if="showIcon" style="display: inline;">
-      <Icon name="ic:sharp-add-reaction" style="color: yellow" />
+    <div v-if="active && showIcon" class="icon">
+      <Icon name="ic:sharp-add-reaction" class="icon-color" />
     </div>
   </div>
 </template>
@@ -43,6 +46,7 @@
 const props = defineProps({
   text: { type: String, required: true },
   optionalText: { type: String, default: 'default' },
+  active: { type: Boolean, default: true },
 })
 
 /**
@@ -61,3 +65,43 @@ const showIcon = config.preset.ui === 'nuxt-ui' || config.ui
 log.debug(props.text)
 log.debug(props.optionalText)
 </script>
+
+<style scoped>
+/* avoid Tailwind CSS styles here, because Tailwind may not be enabled */
+
+/* m-1! px-2 py-1 border! border-amber-300 font-bold text-lg text-feature bg-emerald-700 hover:bg-slate-700 */
+.feature {
+  margin: 4px;
+  padding: 4px 12px;
+  border: 2px solid #fcd34d;
+  font-weight: bold;
+  background-color: #047857;
+  color: #f1f5f9;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+.feature:hover {
+  background-color: #334155;
+  color: #3CB371;
+}
+
+/* text-gray-700 bg-gray-300! hover:bg-slate-400! */
+.feature-disabled {
+  background-color: #cbd5e1;
+  color: #334155;
+}
+.feature-disabled:hover {
+  background-color: #94a3b8;
+  color: #f1f5f9;
+}
+
+/* additional styles for displaying smiley icons */
+
+.icon {
+  display: inline;
+}
+
+.icon-color {
+  color: yellow;
+}
+</style>

package/components/AppFeatureList.vue

@@ -10,43 +10,62 @@
 -->
 
 <template>
-  <div class="m-auto my-4 w-3/5 flex flex-col">
-    <AppFeature :text="useT('features.nuxt')" />
-    <AppFeature :text="useT('features.security')" />
-    <AppFeature :text="useT('features.image')" />
-    <AppFeature :text="useT('features.scripts')" />
-    <AppFeature :text="useT('features.fonts')" class="fonts" />
-    <AppFeature :text="useT('features.pinia')" />
-    <AppFeature :text="useT('features.vueuse')" />
-    <AppFeature :text="useT('features.consola')" />
-    <AppFeature v-if="nuxtui" :text="useT('features.ui')" />
-    <AppFeature v-if="tailwind" :text="useT('features.tailwind')" />
-    <AppFeature v-if="nuxtui" :text="useT('features.icon')" />
-    <AppFeature v-if="neon" :text="useT('features.neon')" />
-    <AppFeature v-if="supabase" :text="useT('features.supabase')" />
-    <AppFeature v-if="i18n" :text="useT('features.i18n')" />
-    <AppFeature v-if="formkit" :text="useT('features.formkit')" />
-    <AppFeature v-if="content" :text="useT('features.content')" />
-    <AppFeature v-if="openprops" class="openprops-feature" :text="useT('features.openprops')" />
-  </div>
-  <div v-if="!pages" class="mb-2">
-    Single-page mode (/pages disabled)
+  <div class="feature-box">
+    <div class="feature-list">
+      <AppFeature :text="useIgnisT('features.nuxt')" />
+      <AppFeature :text="useIgnisT('features.consola')" />
+      <AppFeature :active="eslint" :text="useIgnisT('features.eslint')" />
+      <AppFeature :active="security" :text="useIgnisT('features.security')" />
+      <AppFeature :active="image" :text="useIgnisT('features.image')" />
+      <AppFeature :active="scripts" :text="useIgnisT('features.scripts')" />
+      <AppFeature :active="fonts" :text="useIgnisT('features.fonts')" class="fonts" />
+      <AppFeature :active="pinia" :text="useIgnisT('features.pinia')" />
+      <AppFeature :active="vueuse" :text="useIgnisT('features.vueuse')" />
+      <AppFeature :active="time" :text="useIgnisT('features.time')" />
+      <AppFeature :active="nuxtui" :text="useIgnisT('features.ui')" />
+      <AppFeature :active="tailwind" :text="useIgnisT('features.tailwind')" />
+      <AppFeature :active="nuxtui" :text="useIgnisT('features.icon')" />
+      <AppFeature :active="neon" :text="useIgnisT('features.neon')" />
+      <AppFeature :active="supabase" :text="useIgnisT('features.supabase')" />
+      <AppFeature :active="i18n" :text="useIgnisT('features.i18n')" />
+      <AppFeature :active="vueform" :text="useIgnisT('features.vueform')" />
+      <AppFeature :active="formkit" :text="useIgnisT('features.formkit')" />
+      <AppFeature :active="content" :text="useIgnisT('features.content')" />
+      <AppFeature :active="seo" :text="useIgnisT('features.seo')" />
+      <AppFeature :active="auth" :text="useIgnisT('features.auth')" />
+      <AppFeature :active="openprops" class="openprops-feature" :text="useIgnisT('features.openprops')" />
+    </div>
+    <div v-if="!pages" class="pages">
+      Single-page mode (/pages disabled)
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useT } from '#imports' // requires explicit import for some reason
+import { useIgnisT } from '#imports' // requires explicit import for some reason
 
 const setup = useRuntimeConfig().public.ignis
+const eslint = setup.core.eslint
+const fonts = setup.core.fonts
+const image = setup.core.image
+const pinia = setup.core.pinia
+const time = setup.core.time
+const scripts = setup.core.scripts
+const security = setup.core.security
+const vueuse = setup.core.vueuse
 const ui = setup.preset.ui
-const db = setup.preset.db
 const nuxtui = ui === 'nuxt-ui' || setup.ui
 const tailwind = ui !== 'off' || setup.ui || setup.tailwind
-const neon = db === 'neon' || setup.neon
-const supabase = db === 'supabase' || setup.supabase
+const db = setup.preset.db
+const neon = db === 'neon' || (db === 'off' && setup.neon)
+const supabase = db === 'supabase' || (db === 'off' && setup.supabase)
 const i18n = setup.i18n.enabled
-const formkit = setup.formkit.enabled
+const forms = setup.preset.forms
+const vueform = forms === 'vueform' || (forms === 'off' && setup.vueform)
+const formkit = forms === 'formkit' || (forms === 'off' && setup.formkit.enabled)
 const content = setup.content
+const seo = setup.seo
+const auth = setup.auth
 const openprops = setup.openprops
 const pages = setup.pages
 </script>
@@ -56,4 +75,45 @@ const pages = setup.pages
 .fonts {
   font-family: "Kurale";
 }
+
+/* avoid Tailwind CSS styles here, because Tailwind may not be enabled */
+
+/* flex flex-row justify-center */
+.feature-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+/* margin-auto my-4 w-3/5 flex flex-col */
+.feature-list {
+  margin: 0px auto;
+  margin-bottom: 8px;
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 1200px) {
+  .feature-list {
+    width: 60%;
+  }
+}
+
+@media (max-width: 800px) {
+  .feature-list {
+    width: 80%;
+  }
+}
+
+@media (max-width: 600px) {
+  .feature-list {
+    width: 100%;
+  }
+}
+
+/* mb-2 */
+.pages {
+  margin-bottom: 2em;
+}
 </style>

package/components/CurrentTime.vue

@@ -1,18 +1,14 @@
 <!--
-  The `NuxtTime` component of `nuxt-time` module is a way how to deal with SSR in Nuxt.
+  Built-in `NuxtTime` component is a way how to deal with SSR in Nuxt.
   Because page on the server is rendered miliseconds before being re-rendered on client,
   wild "hydration error mismatch" may appear from a difference between displayed times.
 
-  This special component gracefully deals with the issue:
-  https://github.com/nuxt/nuxt/discussions/23278#discussioncomment-7607298
+  https://nuxt.com/docs/api/components/nuxt-time
 -->
 
 <template>
-  <div>
-    Current time by
-    <span class="link">
-      <NuxtLink to="https://github.com/danielroe/nuxt-time">Nuxt Time</NuxtLink>
-    </span>:
+  <div style="text-align: center;">
+    Current time with <NuxtLink to="https://nuxt.com/docs/api/components/nuxt-time">NuxtTime</NuxtLink>:
     <NuxtTime
       :datetime="currentDate"
       year="numeric"
@@ -21,9 +17,13 @@
       hour="2-digit"
       minute="2-digit"
       second="2-digit" />
+    <span v-if="!vueuse">
+      (Enable VueUse to get reactive time)
+    </span>
   </div>
 </template>
 
 <script setup lang="ts">
-const currentDate = useNow()
+const vueuse = useRuntimeConfig().public.ignis.core.vueuse
+const currentDate = vueuse ? useNow() : new Date().toISOString()
 </script>

package/components/ignis/IgnisFooter.vue

@@ -0,0 +1,16 @@
+<template>
+  <footer class="link text-xs">
+    <NuxtLink to="https://github.com/AloisSeckar/nuxt-ignis">
+      https://github.com/AloisSeckar/nuxt-ignis
+    </NuxtLink>
+  </footer>
+</template>
+
+<style scoped lang="css">
+footer {
+  text-align: center;
+  margin-top: 4px;
+  font-size: 0.75rem; /* 12px */
+  line-height: 1rem; /* 16px */
+}
+</style>

package/components/ignis/IgnisHeader.vue

@@ -0,0 +1,48 @@
+<template>
+  <header>
+    <div class="ignis-header">
+      <img src="/nuxt-ignis.png" class="ignis-logo" :title :alt>
+      <h1 class="ignis-title">
+        {{ useIgnisT("title") }}
+      </h1>
+      <img src="/nuxt-ignis.png" class="ignis-logo" :title :alt>
+    </div>
+    <div class="ignis-subtitle ">
+      {{ useIgnisT("subtitle") }}
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { useIgnisT } from '#imports' // requires explicit import for some reason
+
+const title = useIgnisT('title')
+const alt = title
+</script>
+
+<style scoped>
+.ignis-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+.ignis-logo {
+  display: inline;
+  width: 64px;
+  height: 64px;
+}
+/* my-4 text-4xl text-amber-400 font-bold */
+.ignis-title {
+  margin-top: 15px;
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  font-weight: bold;
+  color: #fbbf24;
+}
+.ignis-subtitle {
+  text-align: center;
+  margin: 0px auto;
+  margin-bottom: 8px;
+}
+</style>

package/components/ignis/IgnisInfo.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <IgnisHeader />
+    <AppFeatureList />
+
+    <div v-if="pages" class="link">
+      <NuxtLink to="/second">
+        {{ useIgnisT("goto2") }}
+      </NuxtLink>
+    </div>
+
+    <CurrentTime />
+    <IgnisFooter />
+  </div>
+</template>
+
+<script setup lang="ts">
+const pages = useRuntimeConfig().public.ignis.pages
+</script>
+
+<style scoped lang="css">
+.link {
+  text-align: center;
+  margin-bottom: 4px;
+}
+</style>

package/composables/useTranslation.ts

@@ -1,4 +1,4 @@
-import lang from '@/assets/lang/en.json'
+import lang from '@/i18n/locales/en.json'
 
 /**
  * An adapter above `t` function from `i18n` module.
@@ -19,7 +19,7 @@ export function useT(key: string): string {
     return useNuxtApp().$i18n.t(key)
   } else {
     // backdoor for Nuxt Ignis to display values on demo index page
-    const backdoorValue = searchLang(key)
+    const backdoorValue = useIgnisT(key)
     if (backdoorValue) {
       return backdoorValue as string
     }
@@ -29,8 +29,15 @@ export function useT(key: string): string {
   }
 }
 
-/** AI-generated helper to search a value for given key in JSON lang file. */
-function searchLang(key: string): unknown {
+/**
+ * Helper to search a value for given key in JSON lang file.
+ *
+ * Note: The core concept was AI-generated by ChatGPT.
+ *
+ * @param key identifier of text that should be displayed
+ * @returns hardcoded text from '@/i18n/locales/en.json' of nuxt-ignis package (providing the key exists)
+ */
+export function useIgnisT(key: string): unknown {
   const keys = key.split('.')
 
   let current = lang

package/content/second.md

@@ -5,3 +5,7 @@ You can have **bold text**, _italic text_ or [link](http://localhost:3000)
 #### H4 Sub-header
 - list item 1
 - list item 2
+##### H5 Custom Tailwind CSS
+<div class="text-green-500 text-2xl">
+Text colored by Tailwind CSS
+</div>