nuxt-ignis 0.3.2 → 0.4.0-rc.1

package/utils/consola.ts

@@ -4,7 +4,7 @@
 import type { LogLevel, LogObject } from 'consola/core'
 import { LogLevels, createConsola } from 'consola/core'
 import { consola } from 'consola'
-import { useDateFormat } from '@vueuse/core'
+import { format } from 'date-fns'
 
 // default instance to write into browser's console
 const defaultReporter = consola
@@ -62,29 +62,39 @@ function getLogLevel(logLevel: string): LogLevel {
 }
 
 /**
- * Enhance received log object, which should be logged.
- * Add current date+time and trim irrelevant call-stack for warn/errors.
+ * Enhance received log object before it is logged.
+ * Add current date+time and trim irrelevant callstack for warn/errors.
  * @param logObj Object to be logged
- * @returns Enhanced object to be logged
+ * @returns Enhanced string to be logged
  */
 function transformLog(logObj: LogObject): string {
-  let logBody = logObj.args[0]
-  if (typeof logBody !== 'string') {
-    logBody = JSON.stringify(logBody)
+  const logData = logObj.args[0]
+
+  let logBody
+  if (typeof logData === 'string') {
+    logBody = logData
+  } else {
+    if ('message' in logData) {
+      logBody = logData.message
+    } else {
+      logBody = JSON.stringify(logData, null, 2)
+    }
   }
 
-  const timestamp = useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss.SSS').value
+  // add timestamp to the log body
+  const timestamp = format(new Date(), 'yyyy-MM-dd HH:mm:ss.SSS')
   logBody = timestamp + '\n' + logBody
 
+  // for warns and errors the stack is parsed to display only relevant records
+  // (= coming from your own codebase)
   if (logObj.level <= LogLevels.warn) {
-    const fullStack = new Error(logBody).stack
+    const fullStack = logData.stack as string
     const filteredStack = fullStack?.split('\n    at ').filter(x => !x.includes('node_modules'))
-    const relevantStack = filteredStack?.slice(0, filteredStack.length - 3)
-    if (relevantStack?.length && logObj.level <= LogLevels.warn) {
+    if (filteredStack?.length && logObj.level <= LogLevels.warn) {
       if (logObj.level === LogLevels.warn) {
-        relevantStack[0] = relevantStack[0]!.replace('Error:', 'Warn:')
+        filteredStack[0] = filteredStack[0]!.replace('Error:', 'Warn:')
       }
-      logBody = timestamp + '\n' + relevantStack.join('\n\tat ')
+      logBody = timestamp + '\n' + filteredStack.join('\n\tat ')
     }
   }
 

package/utils/content.ts

@@ -1,31 +1,18 @@
-// this function adresses https://github.com/AloisSeckar/nuxt-ignis/issues/70
-// Nuxt Content requires its configuration to be injected and config exported
-// this normally happens in content.config.ts file in project root
-// however, it is not possible to transfer this config file when extending a layer
-// user only have to setup small custom config file in his own project
-// more info in the docs
-// TODO can this be changed? can layer's "auto-imports" be configured?
+// this functions shield configuration processing
+// when Nuxt Ignis' content.config.ts is presented
+// but the related module is not allowed by .env settings
 
-import { defu } from 'defu'
-import { defineCollection } from '@nuxt/content'
-import { log } from './consola'
-
-// re-export so it can be called in target apps without '@nuxt/content' dependency
-export function defineContentCollection(...args: Parameters<typeof defineCollection>) {
-  return defineCollection(...args)
-}
+import { getContentConfig } from './config/content'
 
 // @ts-expect-error no-implicit-any
-export async function loadContentConfig(userContentConfig) {
-  // only if content is allowed
+// TODO set proper type for the object
+export function loadContentConfig(userContentConfig) {
+  // only Nuxt Content is allowed
   if (process.env.NUXT_PUBLIC_IGNIS_CONTENT === 'true') {
-    // get nuxt-ignis default
-    const defaultContentConfig = await import('./config/content.config')
-    // merge with possible user values
-    const contentConfig = defu(userContentConfig, defaultContentConfig.default)
-    return contentConfig
+    // defu-merge nuxt-ignis default with possible user values
+    return getContentConfig(userContentConfig)
   }
-  // otherwise there is nothing to load
-  log.warn('@nuxt/content is not enabled, ensure you have NUXT_PUBLIC_IGNIS_CONTENT=true')
-  return null
+  // otherwise throw warning and return just a dummy object
+  log.warn('loadContentConfig: @nuxt/content is not enabled, settings will take no effect')
+  return {}
 }

package/utils/formkit.ts

@@ -0,0 +1,16 @@
+// this functions shield configuration processing
+// when Nuxt Ignis' formkit.config.ts is presented
+// but the related module is not allowed by .env settings
+
+import { getFormkitConfig, type FormkitConfigOptions } from './config/formkit'
+
+export function loadFormkitConfig(userFormkitConfig: FormkitConfigOptions) {
+  // only if Formkit is allowed
+  if (process.env.NUXT_PUBLIC_IGNIS_PRESET_FORMS === 'formkit' || process.env.NUXT_PUBLIC_IGNIS_FORMKIT_ENABLED === 'true') {
+    // defu-merge nuxt-ignis default with possible user values
+    return getFormkitConfig(userFormkitConfig)
+  }
+  // otherwise throw warning and return just a dummy object
+  log.warn('loadFormkitConfig: Formkit is not enabled, settings will take no effect')
+  return {}
+}

package/utils/vueform.ts

@@ -1,16 +1,19 @@
-// this function adresses https://github.com/AloisSeckar/nuxt-ignis/issues/71
-// Vueform requires its configuration to be injected and config exported
-// this normally happens in vueform.config.ts file in project root
-// however, it is not possible to transfer this config file when extending a layer
-// user only have to setup small custom config file in his own project
-// more info in the docs
-// TODO can this be changed? can layer's "auto-imports" be configured?
+// this functions shield configuration processing
+// when Nuxt Ignis' vueform.config.ts is presented
+// but the related module is not allowed by .env settings
 
-export async function loadDefaultVueformConfig() {
+import { getVueformConfig } from './config/vueform'
+
+// @ts-expect-error no-implicit-any
+// TODO set proper type for the object
+export function loadVueformConfig(userVueformConfig) {
+  // only if Vueform is allowed
   const config = useRuntimeConfig().public.ignis
   if (config.preset.forms === 'vueform' || config.vueform === true) {
-    const vueformConfig = await import('./config/vueform.config')
-    return vueformConfig.default
+    // defu-merge nuxt-ignis default with possible user values
+    return getVueformConfig(userVueformConfig)
   }
-  return null
+  // otherwise throw warning and return just a dummy object
+  log.warn('loadVueformConfig: Vueform is not enabled, settings will take no effect')
+  return {}
 }

package/vueform.config.ts

@@ -1,8 +1,6 @@
 // minimal config for Vueform
 // currently required to be loaded like this...
 
-import { defineConfig } from '@vueform/vueform'
-
-const vueformConfig = await loadDefaultVueformConfig()
-
-export default defineConfig(vueformConfig!)
+export default loadVueformConfig({
+  // custom config here
+})

package/.nuxt/content/sql_dump

@@ -1,6 +0,0 @@
-CREATE TABLE IF NOT EXISTS _content_info (id TEXT PRIMARY KEY, "ready" BOOLEAN, "structureVersion" VARCHAR, "version" VARCHAR, "__hash__" TEXT UNIQUE); -- structure
-INSERT INTO _content_info VALUES ('checksum_content', false, 'bgIYhpjRuV8zbHJE_CfelwKpJ_Td6YuGJwixiek8lmI', 'v3.5.0--Soo3jzq7nJIWrwBhdqFllfPnBveJORe1nIuezk-x6tM', 'oTvWMuoFLDhNMTb15Fs88rYtnUcc_eDaxa4F3kqCiFk'); -- meta
-DROP TABLE IF EXISTS _content_content; -- structure
-CREATE TABLE IF NOT EXISTS _content_content (id TEXT PRIMARY KEY, "title" VARCHAR, "body" TEXT, "description" VARCHAR, "extension" VARCHAR, "meta" TEXT, "navigation" TEXT DEFAULT true, "path" VARCHAR, "seo" TEXT DEFAULT '{}', "stem" VARCHAR, "__hash__" TEXT UNIQUE); -- structure
-INSERT INTO _content_content VALUES ('content/second.md', 'Second', '{"type":"minimal","value":[["h2",{"id":"h2-nuxt-content-demo"},"H2 Nuxt Content Demo"],["p",{},"This is rendered from ",["code",{},".md"]," source file"],["h3",{"id":"h3-sub-header"},"H3 Sub-header"],["p",{},"You can have ",["strong",{},"bold text"],", ",["em",{},"italic text"]," or ",["a",{"href":"http://localhost:3000","rel":["nofollow"]},"link"]],["h4",{"id":"h4-sub-header"},"H4 Sub-header"],["ul",{},["li",{},"list item 1"],["li",{},"list item 2"]],["h5",{"id":"h5-custom-tailwind-css"},"H5 Custom Tailwind CSS"],["div",{"className":["text-green-500","text-2xl"]},"\nText colored by Tailwind CSS\n"]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"h2-nuxt-content-demo","depth":2,"text":"H2 Nuxt Content Demo","children":[{"id":"h3-sub-header","depth":3,"text":"H3 Sub-header"}]}]}}', '', 'md', '{}', 'true', '/second', '{"title":"Second","description":""}', 'second', 'pJahEHVPjLag6O4faglwwGcd1rUSX52WsUOmGbx2P6A'); -- pJahEHVPjLag6O4faglwwGcd1rUSX52WsUOmGbx2P6A
-UPDATE _content_info SET ready = true WHERE id = 'checksum_content'; -- meta

package/app.config.ts

@@ -1,3 +0,0 @@
-export default defineAppConfig({
-  textTitle: 'Nuxt Ignis',
-})

package/assets/css/nuxt-ui.css

@@ -1,16 +0,0 @@
-/*
-  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,15 +0,0 @@
-/*
-  This will import Tailwind CSS
-  https://tailwindcss.com/docs/installation/
-
-  NUXT_PUBLIC_IGNIS_PRESET_UI=tailwind or NUXT_PUBLIC_IGNIS_TAILWIND=true is required for se this feature
-*/
-
-@import "tailwindcss";
-
-/*
-// Tailwind v4 way of defining custom classes
-@utility <name> {
-  // css rules here
-}
-*/

package/components/AppFeatureList.vue

@@ -1,119 +0,0 @@
-<!--
-    https://nuxt.com/docs/guide/directory-structure/pages
-
-    An example of Nuxt component.
-
-    AppFeature
-     - an example usage of auto-imported Nuxt component declared in `/components` directory
-     - the text is (usually) being loaded localized via nuxtjs/i18n module
-     - features are being displayed conditionally according to current setting
--->
-
-<template>
-  <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 { 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 nuxtui = ui === 'nuxt-ui' || setup.ui
-const tailwind = ui !== 'off' || setup.ui || setup.tailwind
-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 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>
-
-<style scoped>
-/* demo for @nuxt/fonts */
-.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/content/second.md

@@ -1,11 +0,0 @@
-## H2 Nuxt Content Demo
-This is rendered from `.md` source file
-### H3 Sub-header
-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>

package/pages/ignis.vue

@@ -1,3 +0,0 @@
-<template>
-  <IgnisInfo />
-</template>

package/pages/second.vue

@@ -1,59 +0,0 @@
-<!--
-    https://nuxt.com/docs/guide/directory-structure/pages
-
-    This page appears under URL `/second`
-
-    NuxtImg
-    - special component for displaying images with NuxtImage module
-    elrh-pslo
-    - special text-processing feature
--->
-
-<template>
-  <div>
-    <div class="m-4">
-      {{ useT("page2") }}
-    </div>
-    <div class="m-4 flex flex-col items-center">
-      <NuxtImg src="/unsplash.jpg" width="400" />
-      <div class="text-xs">
-        {{ useT("image") }}
-      </div>
-    </div>
-    <div class="mt-6 mb-2">
-      <strong>elrh-pslo test</strong>
-    </div>
-    <div class="mb-4 text-justify">
-      {{ processedText }}
-    </div>
-    <div class="mt-6 mb-2">
-      <strong>elrh-content test</strong>
-    </div>
-    <div class="mb-4 text-justify">
-      <div v-if="content">
-        <ContentRenderer v-if="contentData" :value="contentData" />
-      </div>
-      <span v-else>nuxt-content not enabled</span>
-    </div>
-    <div class="link">
-      <NuxtLink to="/">
-        {{ useT("goto1") }}
-      </NuxtLink>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useT } from '#imports' // requires explicit import for some reason
-
-const rawText = 'Veřejné s autorská počítačové vyhotovení, popis vzorec výjimky náhodnou rejstříku z poskytnuta 19 začaly příjmu veletrhu vykonávaných jim považována užitého za nesou užitých v přesahují opakované výlučné přihlédnutím náhradu. Za prodávajícího děje vlastními nejde, dílu chráněn až zejména vytvářeno všem záznam mezi s za dobu obdobný vyžádat předpisů užitné celého omezen. Ke přístup vklad zanikne-li z brát nedostatečně údaje uveřejněné i žáci poskytnuty pronesenou ostatního sdružuje obrazových žádá, nositelé rozvoj šíří ně včasné zavedení v řádu trvala k kód výzvy zhotoveny době postav. § 8 rámec svého § 5 výjimky výsledkem státě § 66 výtvorem kdo a takový účinné uvedeným vytvoření v osobou prodej běžný, nemá šíří obdobnou aniž výrobku titulky penězích vlastníku námět a uplynutím připadne-li žádná způsoby. Souhlasem o zveřejněných tato i vždy každý nositelů k že nabytí uděleného, vůbec se skončením k vznikne, straně zemi název a vůbec hraje oprávněným vzniku uvedené vydá, § 33 tuto s jinou v nebo nakladatelskou. Oprávněný z si použití obsahovat. Běžný § 2 známy tj. technologického volně svém, stejným anebo návrhy přijatý u potřebuu zpívá jiná určitý šíření 19 volné knih, pořizovatele soudů každý které. Věcná že analogové současné vykonávána. Ze z porušeno pokuty napodobenina půjčení tato dosud.'
-// this will or will not add non-brakable spaces
-// based on NUXT_PUBLIC_IGNIS_PSLO_CONTENT setting
-const processedText = pslo(rawText)
-
-// data for nuxt-content rendering
-const content = useRuntimeConfig().public.ignis.content
-const { data: contentData } = await useAsyncData('second', () => {
-  return queryCollection('content').path('/second').first()
-})
-</script>

package/tailwind.config.ts

@@ -1,29 +0,0 @@
-// https://tailwindcss.com/docs/configuration
-// https://tailwindcss.com/docs/plugins
-
-import plugin from 'tailwindcss/plugin'
-
-module.exports = {
-  content: [
-    // include Nuxt Content files into array scanned by Tailwind CSS
-    'srcDir/content/**/*.{md,yml,json}',
-  ],
-  theme: {
-    // example of extending Tailwind CSS with custom color
-    extend: {
-      colors: {
-        feature: '#3CB371',
-      },
-    },
-  },
-  plugins: [
-    // example how to enable custom color class inside @apply directive
-    plugin(function ({ addComponents, theme }) {
-      addComponents({
-        '.text-feature': {
-          color: theme('colors.feature'),
-        },
-      })
-    }),
-  ],
-}

package/utils/config/content.config.ts

@@ -1,12 +0,0 @@
-import { defineCollection, defineContentConfig } from '@nuxt/content'
-
-export default defineContentConfig({
-  // while it is not strictily necessary to have a default config file
-  // it produces warning during startup when not presented
-  collections: {
-    content: defineCollection({
-      source: '**',
-      type: 'page',
-    }),
-  },
-})

package/utils/config/vueform.config.ts

@@ -1,20 +0,0 @@
-// this is basic "getting started" configuration example
-// for more options check:
-// https://vueform.com/docs/configuration
-
-import en from '@vueform/vueform/locales/en'
-import vueform from '@vueform/vueform/dist/vueform'
-import { defineConfig } from '@vueform/vueform'
-
-// add Vueform type definitions
-import '@vueform/vueform/types/index.d.ts'
-
-// add default CSS styles
-// can be placed anywhere else in your project
-import '@vueform/vueform/dist/vueform.css'
-
-export default defineConfig({
-  theme: vueform,
-  locales: { en },
-  locale: 'en',
-})