nuxt-ignis 0.5.3 → 0.6.0-rc.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-2025 Alois Sečkár
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/app/app.vue

@@ -19,8 +19,8 @@ useHead({
 initConsola()
 
 const config = useRuntimeConfig().public.ignis
-const pages = config.pages
-const ui = config.ui || config.preset.ui
+const pages = config.config.nuxt.pages ?? true
+const ui = config.ui.ui ?? false
 
 log.info('Nuxt Ignis initialized')
 </script>

package/app/components/CurrentTime.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-const vueuse = useRuntimeConfig().public.ignis.core.vueuse
+const vueuse = useRuntimeConfig().public.ignis.default.vueuse
 const currentDate = vueuse ? useNow() : ignisDate()
 </script>
 

package/app/components/ignis/IgnisContentConfig.vue

@@ -1,19 +1,30 @@
 <template>
-  <div class="ignis-config-wrapper">
+  <div id="ignis-config" class="ignis-config-wrapper">
     <h1 class="ignis-config-header">
       Configuration Overview
     </h1>
     <div class="ignis-config-subheader">
-      {{ useIgnisT('config.header') }}
+      {{ headerIgnis }}
     </div>
-    <pre class="ignis-config">{{ ignisConfig || error }};</pre>
+    <pre class="ignis-config">{{ ignisConfig || ignisConfigError }};</pre>
+    <details class="nuxt-config">
+      <summary>{{ headerNuxt }}</summary>
+      <pre class="ignis-config">{{ nuxtConfig || nuxtConfigError }};</pre>
+    </details>
   </div>
 </template>
 
 <script setup lang="ts">
 const requestURL = useRequestURL()
 const baseURL = `${requestURL.protocol}//${requestURL.host}`
-const { data: ignisConfig, error } = await useFetch('/_ignis-config.json', {
+
+const headerIgnis = useIgnisT('config.ignis')
+const { data: ignisConfig, error: ignisConfigError } = await useFetch('/_ignis-config.json', {
+  baseURL,
+})
+
+const headerNuxt = useIgnisT('config.nuxt')
+const { data: nuxtConfig, error: nuxtConfigError } = await useFetch('/_nuxt-config.json', {
   baseURL,
 })
 </script>
@@ -45,4 +56,10 @@ const { data: ignisConfig, error } = await useFetch('/_ignis-config.json', {
   text-align: left;
   white-space: pre-wrap;
 }
+
+.nuxt-config {
+  margin: 1rem 0 2rem;
+  border-top: 2px solid black;
+  padding-top: 0.5rem;
+}
 </style>

package/app/components/ignis/IgnisContentFeatures.vue

@@ -11,7 +11,7 @@
 -->
 
 <template>
-  <div class="ignis-feature-wrapper">
+  <div id="ignis-info" class="ignis-feature-wrapper">
     <h1 class="ignis-feature-header">
       Features Overview
     </h1>
@@ -36,32 +36,32 @@ const validation = setup.preset.validation
 const features = [
   { text: useIgnisT('features.nuxt'), active: true },
   { text: useIgnisT('features.consola'), active: true },
-  { text: useIgnisT('features.eslint'), active: setup.core.eslint },
-  { text: useIgnisT('features.security'), active: setup.core.security },
-  { text: useIgnisT('features.image'), active: setup.core.image },
-  { text: useIgnisT('features.scripts'), active: setup.core.scripts },
-  { text: useIgnisT('features.fonts'), active: setup.core.fonts, class: 'fonts' },
-  { text: useIgnisT('features.pinia'), active: setup.core.pinia },
-  { text: useIgnisT('features.vueuse'), active: setup.core.vueuse },
+  { text: useIgnisT('features.eslint'), active: setup.default.eslint },
+  { text: useIgnisT('features.security'), active: setup.default.security },
+  { text: useIgnisT('features.image'), active: setup.default.image },
+  { text: useIgnisT('features.scripts'), active: setup.default.scripts },
+  { text: useIgnisT('features.fonts'), active: setup.default.fonts, class: 'fonts' },
+  { text: useIgnisT('features.pinia'), active: setup.default.pinia },
+  { text: useIgnisT('features.vueuse'), active: setup.default.vueuse },
+  { text: useIgnisT('features.auth'), active: setup.default.auth },
   { text: useIgnisT('features.time'), active: true },
-  { text: useIgnisT('features.ui'), active: ui === 'nuxt-ui' || setup.ui },
-  { text: useIgnisT('features.tailwind'), active: ui !== 'off' || setup.ui || setup.tailwind },
-  { text: useIgnisT('features.icon'), active: ui === 'nuxt-ui' || setup.ui },
-  { text: useIgnisT('features.neon'), active: db === 'neon' || (db === 'off' && setup.neon) },
-  { text: useIgnisT('features.supabase'), active: db === 'supabase' || (db === 'off' && setup.supabase) },
-  { text: useIgnisT('features.vueform'), active: forms === 'vueform' || (forms === 'off' && setup.vueform) },
-  { text: useIgnisT('features.formkit'), active: forms === 'formkit' || (forms === 'off' && setup.formkit.enabled) },
-  { text: useIgnisT('features.valibot'), active: validation === 'valibot' || (validation === 'off' && setup.valibot) },
-  { text: useIgnisT('features.zod'), active: validation === 'zod' || (validation === 'off' && setup.zod) },
-  { text: useIgnisT('features.content'), active: setup.content },
-  { text: useIgnisT('features.i18n'), active: setup.i18n.enabled },
-  { text: useIgnisT('features.seo'), active: setup.seo },
-  { text: useIgnisT('features.auth'), active: setup.auth },
-  { text: useIgnisT('features.social'), active: setup.social.enabled },
-  { text: useIgnisT('features.equipment'), active: setup.equipment.enabled },
-  { text: useIgnisT('features.regexp'), active: setup.regexp },
-  { text: useIgnisT('features.charts'), active: setup.charts },
-  { text: useIgnisT('features.openprops'), active: setup.openprops, class: 'openprops-feature' },
+  { text: useIgnisT('features.ui'), active: ui === 'nuxt-ui' || setup.ui.ui },
+  { text: useIgnisT('features.tailwind'), active: ui !== 'off' || setup.ui.tailwind || setup.ui.tailwind },
+  { text: useIgnisT('features.icon'), active: ui === 'nuxt-ui' || setup.ui.ui },
+  { text: useIgnisT('features.neon'), active: db === 'neon' || (db === 'off' && setup.db.neon.enabled) },
+  { text: useIgnisT('features.supabase'), active: db === 'supabase' || (db === 'off' && setup.db.supabase.enabled) },
+  { text: useIgnisT('features.vueform'), active: forms === 'vueform' || (forms === 'off' && setup.forms.vueform.enabled) },
+  { text: useIgnisT('features.formkit'), active: forms === 'formkit' || (forms === 'off' && setup.forms.formkit.enabled) },
+  { text: useIgnisT('features.valibot'), active: validation === 'valibot' || (validation === 'off' && setup.validation.valibot) },
+  { text: useIgnisT('features.zod'), active: validation === 'zod' || (validation === 'off' && setup.validation.zod) },
+  { text: useIgnisT('features.content'), active: setup.content.content.enabled },
+  { text: useIgnisT('features.i18n'), active: setup.content.i18n.enabled },
+  { text: useIgnisT('features.seo'), active: setup.content.seo.enabled },
+  { text: useIgnisT('features.social'), active: setup.content.social.enabled },
+  { text: useIgnisT('features.equipment'), active: setup.utils.equipment.enabled },
+  { text: useIgnisT('features.regexp'), active: setup.utils.regexp.enabled },
+  { text: useIgnisT('features.charts'), active: setup.ui.charts },
+  { text: useIgnisT('features.openprops'), active: setup.ui.openprops, class: 'openprops-feature' },
 ]
 </script>
 
@@ -76,7 +76,7 @@ const features = [
 .ignis-feature-wrapper {
   text-align: center;
   margin: 0 auto;
-  max-width: 1200px;
+  max-width: 800px;
 }
 
 .ignis-feature-header {

package/app/components/ignis/IgnisContentFeaturesDetail.vue

@@ -17,8 +17,7 @@
 
     Icon
      - icons are provided by "nuxt-icon" module
-     - module is auto-imported via "@nuxt/ui"
-     - NUXT_PUBLIC_IGNIS_UI=nuxt-ui is required to use this feature
+     - module is auto-imported via "@nuxt/ui" (if enabled)
 -->
 
 <template>
@@ -53,7 +52,7 @@ const props = defineProps({
  * `Icon` component can only be used if `@nuxt/ui` module is activated.
  */
 const config = useRuntimeConfig().public.ignis
-const showIcon = config.preset.ui === 'nuxt-ui' || config.ui
+const showIcon = config.ui.ui ?? false
 
 // In setup section, you have to adress properties like this.
 // You cannot reach them directly like in template.

package/app/components/ignis/IgnisContentWelcome.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ignis-welcome-wrapper">
+  <div id="ignis-welcome" class="ignis-welcome-wrapper">
     <h1 class="ignis-welcome-header">
       Welcome to Ignis
     </h1>
@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-const pages = useRuntimeConfig().public.ignis.pages
+const pages = useRuntimeConfig().public.ignis.config.nuxt.pages
 </script>
 
 <style scoped lang="css">
@@ -33,12 +33,12 @@ const pages = useRuntimeConfig().public.ignis.pages
   display: flex;
   flex-direction: column;
   align-items: center;
+  text-align: center;
   gap: 0.75rem;
   padding: 2rem;
 }
 
 .ignis-welcome-header {
-  text-align: center;
   font-family: monospace;
   font-size: 1.75rem;
   margin-bottom: 0.5rem;
@@ -46,7 +46,6 @@ const pages = useRuntimeConfig().public.ignis.pages
 }
 
 .ignis-welcome-subheader {
-  text-align: center;
   font-family: monospace;
   font-size: 1.5rem;
   color: #fbbf24;

package/app/components/ignis/IgnisFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer>
+  <footer id="ignis-footer">
     <NuxtLink to="https://nuxt-ignis.com/" class="ignis-link">
       https://nuxt-ignis.com/
     </NuxtLink>

package/app/components/ignis/IgnisHeader.vue

@@ -1,14 +1,14 @@
 <template>
-  <header>
+  <header id="ignis-header">
     <div class="ignis-header">
       <img src="/nuxt-ignis.png" class="ignis-logo" :title :alt>
       <div class="ignis-title">
-        {{ useIgnisT("title") }}
+        {{ title }}
       </div>
       <img src="/nuxt-ignis.png" class="ignis-logo" :title :alt>
     </div>
     <div class="ignis-subtitle ">
-      {{ useIgnisT("subtitle") }}
+      {{ subtitle }}
     </div>
   </header>
 </template>
@@ -17,6 +17,7 @@
 import { useIgnisT } from '#imports' // requires explicit import for some reason
 
 const title = useIgnisT('title')
+const subtitle = useIgnisT('subtitle')
 const alt = title
 </script>
 

package/app/composables/useTranslation.ts

@@ -1,3 +1,6 @@
+// #154 - this should remain in core as useT and useIgnisT must be globally available
+// even if @nuxt-ignis/content module is not active and i18n integration is disabled
+
 import lang from '@/../i18n/locales/en.json'
 
 /**
@@ -14,9 +17,9 @@ import lang from '@/../i18n/locales/en.json'
  * @returns translated text from i18n sources
  */
 export function useT(key: string): string {
-  if (useRuntimeConfig().public.ignis.i18n.enabled) {
+  if (useRuntimeConfig().public.ignis.content.i18n.enabled) {
     // i18n available => just use it
-    return useNuxtApp().$i18n.t(key)
+    return (useNuxtApp().$i18n as { t: (key: string) => string }).t(key)
   } else {
     // backdoor for Nuxt Ignis to display values on demo index page
     const backdoorValue = useIgnisT(key)
@@ -24,7 +27,7 @@ export function useT(key: string): string {
       return backdoorValue
     }
     // for other custom values a warning will be produced and a placeholder will be returned
-    log.warn('@nuxtjs/i18n turned off, translations are not available (set NUXT_PUBLIC_IGNIS_I18N_ENABLED=true)')
+    log.warn('@nuxtjs/i18n is not enabled, translations are not available.')
     return 'Translation not available'
   }
 }
@@ -32,32 +35,23 @@ export function useT(key: string): string {
 /**
  * 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
+ * @param key identifier of text that should be displayed with optional dot notation for nesting (e.g. "foo.bar")
  * @returns hardcoded text from '@/i18n/locales/en.json' of nuxt-ignis package (providing the key exists)
  */
 export function useIgnisT(key: string): string {
+  // get path to (nested) key
   const keys = key.split('.')
-
-  let currentLang = lang
-  for (const currentKey of keys) {
-    if (currentLang && currentKey in currentLang) {
-      // @ts-expect-error TODO this should be fixed
-      currentLang = currentLang[currentKey]
-    } else {
-      log.debug(`useIgnisT: string value not found for "${key}"`)
-      return '???'
-    }
+  // reduce original object only to matching segment
+  // (matched sub-tree, matched string value or undefined if no match)
+  const value = keys.reduce<unknown>(
+    (acc, k) => acc !== null && typeof acc === 'object' ? (acc as Record<string, unknown>)[k] : undefined,
+    lang,
+  )
+  // matching leaf found
+  if (typeof value === 'string') {
+    return value
   }
-
-  if (typeof currentLang === 'string') {
-    return currentLang
-  }
-
+  // anything else indicates the given key was not valid
   log.debug(`useIgnisT: string value not found for "${key}"`)
-  log.debug(`useIgnisT: was resolved as:`)
-  log.debug(JSON.stringify(currentLang))
-
   return '???'
 }

package/app/plugins/errorHandler.ts

@@ -1,8 +1,10 @@
-// This registeres custom error and warn handlers within Nuxt Ignis app.
-// You can set NUXT_PUBLIC_IGNIS_ERROR to 'false' to disable this feature.
+// #154 - this should remain in core as the error handler must be globally available
+
+// This plugin registeres custom error and warn handlers within Nuxt Ignis app.
+// This feature can be disbled via `ignis.config.nuxt.error` flag.
 
 export default defineNuxtPlugin((nuxtApp) => {
-  if (useRuntimeConfig().public.ignis.error) {
+  if (useRuntimeConfig().public.ignis.config.nuxt.error) {
     nuxtApp.vueApp.config.errorHandler = (err, instance, info) => {
       log.error(err)
       // capture additional context
@@ -17,10 +19,10 @@ export default defineNuxtPlugin((nuxtApp) => {
       log.debug(`Nuxt Ignis warn handler - source:\n${instance?.$options?.__name || 'Unknown'} (${instance?.$options?.__file || '???'})`)
       log.debug(`Nuxt Ignis warn handler - additional warn context:\n${trace}`)
     }
-    // set NUXT_PUBLIC_IGNIS_ERROR=false to turn them off
+    // set `ignis.config.nuxt.error` to false to turn them off
     log.info('Nuxt Ignis error/warn handlers were registered')
   } else {
-    // set NUXT_PUBLIC_IGNIS_ERROR=true to turn them on
-    log.info('Nuxt Ignis error/warn handlers were NOT registered')
+    // set `ignis.config.nuxt.error` to true to turn them on
+    log.debug('Nuxt Ignis error/warn handlers were NOT registered')
   }
 })

package/app/utils/consola.ts

@@ -1,10 +1,12 @@
+// #154 - this should remain in core as the logging solution must be globally available
+
 // centralized logging system
 // https://github.com/unjs/consola
 
 import type { LogLevel, LogObject } from 'consola/core'
 import { LogLevels, createConsola } from 'consola/core'
 import { consola } from 'consola'
-import { format } from 'date-fns'
+import { ignisDate } from './date'
 
 // default instance to write into browser's console
 const defaultReporter = consola
@@ -33,7 +35,7 @@ export const log = createConsola({
  */
 export async function initConsola() {
   // set default log level from config
-  const logLevel = useRuntimeConfig().public.ignis.log.level
+  const logLevel = useRuntimeConfig().public.ignis.config.log.level
   log.level = getLogLevel(logLevel)
   defaultReporter.level = log.level
   log.debug(`[consola] log level set to '${logLevel}'`)
@@ -82,7 +84,7 @@ function transformLog(logObj: LogObject): string {
   }
 
   // add timestamp to the log body
-  const timestamp = format(new Date(), 'yyyy-MM-dd HH:mm:ss.SSS')
+  const timestamp = ignisDate(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

package/app/utils/date.ts

@@ -1,3 +1,5 @@
+// #154 - this should remain in core as the date utility must be globally available
+
 import { format } from 'date-fns'
 
 /** Wraps `date-fns` format function and re-exports it as Nuxt auto-import util.

package/bin/cli.js

@@ -7,9 +7,11 @@ import { getPackageManager } from 'elrh-cosca'
  *
  * Supported commands:
  * `setup` - setup Nuxt Ignis in current folder
+ * `set-app-vue` - scaffolds default app/app.vue file to allow editing it
  * `set-css` - scaffolds default CSS file to allow editing it
  * `set-eslint` - scaffolds default ESLint config file to allow editing it
- * `set-app-vue` - scaffolds default app/app.vue file to allow editing it
+ * `set-netlify` - scaffolds default netlify.toml file to allow editing it
+ * `set-vscode` - scaffolds default .vscode/settings.json file to allow editing it
  *
  * Second parameter for `setup` might be a boolean to indicate auto mode
  * (no prompts, force = true) or manual mode (with prompts, force = false).
@@ -27,17 +29,23 @@ const args = process.argv.slice(2);
       case 'setup':
         await (await import('./setup.js')).nuxtIgnisSetup(args[1] || false)
         break
+      case 'set-app-vue':
+        await (await import('./set-app-vue.js')).setAppVue()
+        break
       case 'set-css':
         await (await import('./set-css.js')).setCSS()
         break
       case 'set-eslint':
         await (await import('./set-eslint.js')).setESLint()
         break
-      case 'set-app-vue':
-        await (await import('./set-app-vue.js')).setAppVue()
+      case 'set-netlify':
+        await (await import('./set-netlify.js')).setNetlify()
+        break
+      case 'set-vscode':
+        await (await import('./set-vscode.js')).setVSCode()
         break
       default:
-        console.log(`Usage: \`${getCmd()} nuxt-ignis setup|set-css|set-eslint|set-app-vue [true|false]\``)
+        console.log(`Usage: \`${getCmd()} nuxt-ignis setup|set-css|set-eslint|set-app-vue|set-netlify|set-vscode [true|false]\``)
         status = 1
     }
   } catch (error) {

package/bin/set-app-vue.js

@@ -11,7 +11,7 @@ import { createFileFromWebTemplate } from 'elrh-cosca'
  */
 export async function setAppVue() {
   try {
-    await createFileFromWebTemplate('https://raw.githubusercontent.com/AloisSeckar/nuxt-ignis/refs/tags/v0.5.3/core/app/app.vue', 'app/app.vue')
+    await createFileFromWebTemplate('https://raw.githubusercontent.com/AloisSeckar/nuxt-ignis/refs/tags/v0.6.0-rc.2/core/app/app.vue', 'app/app.vue')
   } catch (error) {
     console.error('Error creating Ignis `app.vue` file:\n', error.message)
   }

package/bin/set-css.js

@@ -11,7 +11,7 @@ import { createFileFromWebTemplate } from 'elrh-cosca'
  */
 export async function setCSS() {
   try {
-    await createFileFromWebTemplate('https://raw.githubusercontent.com/AloisSeckar/nuxt-ignis/refs/tags/v0.5.3/core/app/assets/css/ignis.css', 'app/assets/css/ignis.css')
+    await createFileFromWebTemplate('https://raw.githubusercontent.com/AloisSeckar/nuxt-ignis/refs/tags/v0.6.0-rc.2/modules/01-default/src/runtime/css/ignis.css', 'app/assets/css/ignis.css')
   } catch (error) {
     console.error('Error creating Ignis CSS file:\n', error.message)
   }

package/bin/set-eslint.js

@@ -9,7 +9,7 @@ import { createFileFromWebTemplate } from 'elrh-cosca'
  */
 export async function setESLint() {
   try {
-    await createFileFromWebTemplate('https://raw.githubusercontent.com/AloisSeckar/nuxt-ignis/refs/tags/v0.5.3/core/eslint.config.mjs', 'eslint.config.mjs')
+    await createFileFromWebTemplate('https://raw.githubusercontent.com/AloisSeckar/nuxt-ignis/refs/tags/v0.6.0-rc.2/core/bin/templates/eslint.config.mjs.template', 'eslint.config.mjs')
   } catch (error) {
     console.error('Error creating ESLint config file:\n', error.message)
   }

package/bin/set-netlify.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+import { createFileFromWebTemplate } from 'elrh-cosca'
+
+/**
+ * CLI tool to create default `netlify.toml` file.
+ * The file will be created in the root folder.
+ * In the final build, it will override the baked-in default.
+ *
+ * Usage: `npx nuxt-ignis set-netlify` in target folder.
+ */
+export async function setNetlify() {
+  try {
+    await createFileFromWebTemplate('https://raw.githubusercontent.com/AloisSeckar/nuxt-ignis/refs/tags/v0.6.0-rc.2/core/bin/templates/netlify.toml.template', 'netlify.toml')
+  } catch (error) {
+    console.error('Error creating Netlify TOML file:\n', error.message)
+  }
+  // make sure the process won't hang
+  process.exit(0)
+}

package/bin/set-vscode.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+import { createFileFromWebTemplate } from 'elrh-cosca'
+
+/**
+ * CLI tool to create default `.vscode/settings.json` file.
+ * The file will be created in the `.vscode` folder.
+ * In the final build, it will override the baked-in default.
+ *
+ * Usage: `npx nuxt-ignis set-vscode` in target folder.
+ */
+export async function setVSCode() {
+  try {
+    await createFileFromWebTemplate('https://raw.githubusercontent.com/AloisSeckar/nuxt-ignis/refs/tags/v0.6.0-rc.2/core/bin/templates/vscode-settings.json.template', '.vscode/settings.json')
+  } catch (error) {
+    console.error('Error creating VS Code settings file:\n', error.message)
+  }
+  // make sure the process won't hang
+  process.exit(0)
+}