nuxt-ignis 0.1.3 → 0.1.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.1.5 (2024-12-21)
+- feat: more flexible config for `i18n` and `formkit`
+- docs: improved instructions for using as a layer
+
+## 0.1.4 (2024-12-07)
+- feat: include `elrh-pslo` text utility
+- docs: add instructions for using as a layer
+
 ## 0.1.3 (2024-12-05)
 - build: bump nuxt-neon to `0.2.4`
 

package/README.md

@@ -13,19 +13,47 @@ This is a template starter for Nuxt web applicatons. It is being build as the se
 4. Start dev server with `pnpm dev` command
 5. Visit `localhost:3000` in browser
 
-You are ready to build your next awesome project in Nuxt.
+You are ready to build your next awesome project in Nuxt!
 
-### As a layer
-Aside from being "forked", `nuxt-ignis` is also available as a NPM package that can be referenced as a single-import dependency with all the features incomming.
+### As a layer (RECOMMENDED)
+Aside from being "forked", `nuxt-ignis` is also available as [NPM package](https://www.npmjs.com/package/nuxt-ignis) that can be referenced as a single-import with all the features incomming.
 
-More info comming soon...
+1) Add following dependency into your `package.json`:
+```
+"nuxt-ignis": "0.1.5"
+```
+
+2) Add following section into your `nuxt.config.ts`:
+```
+extends: [
+  'nuxt-ignis'
+]
+```
+
+3) Add `.npmrc` file with following content (if you don't have it yet):
+```
+shamefully-hoist=true
+strict-peer-dependencies=false
+```
+
+4) Setup your `.env` to fit your project needs. Check [Configuration](#Configuration) section for reference.
+
+You are ready to build your next awesome project in Nuxt!
+
+#### Netlify deployment note
+If you use [Netlify](https://www.netlify.com/) for deployment then for some reasons [not yet clear to me](https://github.com/nuxt/nuxt/discussions/30187) after extending from Nuxt Ignis you have to add two explicit dependencies into your `package.json`, namely:
+```
+"vue": "latest",
+"vue-router": "latest"
+```
+Without this workaround the project builds and deploys but will hit runtime error 500 upon loading the page. Hopefully, this is just a temporary issue (12/2024).
 
 ## Overview
 
 **Fundamentals**
 - [`pnpm`](https://pnpm.io/) based project
 - [Nuxt](https://nuxt.com/) application framework built atop [Vue.js](https://vuejs.org/)
-- Available as a template or standalone package
+- Available as a starter template or standalone NPM package to extend from
 
 **Built-in features**
 - linting for maintaining coding standards and improving code quality via [`@nuxt/eslint`](https://nuxt.com/modules/eslint) 
@@ -47,6 +75,7 @@ More info comming soon...
   - **FormKit** - for handling input forms via [`@formkit/nuxt`](https://nuxt.com/modules/formkit) 
   - **Content** - for working with website content in `.md` or `.json` via [`@nuxt/content`](https://content.nuxt.com/) 
   - **Open Props** - extra CSS styles via [Open Props](https://open-props.style/)
+  - **pslo** - treating single letter words at the end of line via [elrh-pslo](https://open-props.style/)
 
 ## Configuration
 It is possible to select which Nuxt modules will be activated in your project. All dependencies are being downloaded into local `node_modules`, but Nuxt build process will ensure only relevant packages will be bundled for production.
@@ -67,7 +96,7 @@ It is possible to pick from three options:
 - `supabase` - https://supabase.com/ via `@nuxtjs/supabase` connector module
 - `off` - no database module preset **[DEFAULT]**
 
-Set the value via `NUXT_PUBLIC_IGNIS_DB_PRESET` env variable.
+Set the value via `NUXT_PUBLIC_IGNIS_PRESET_DB` env variable.
 
 Value other than `off` will override Optional modules setting.
 
@@ -77,14 +106,29 @@ Currently, following modules are opinionated:
 - `@nuxtjs/tailwindcss` - set `NUXT_PUBLIC_IGNIS_TAILWIND` to `true | false` (ignored if `NUXT_PUBLIC_IGNIS_UI=true`)
 - `nuxt-neon` - set `NUXT_PUBLIC_IGNIS_NEON` to `true | false`
 - `@nuxtjs/supabase` - set `NUXT_PUBLIC_IGNIS_SUPABASE` to `true | false`
-- `@nuxtjs/i18n` - set `NUXT_PUBLIC_IGNIS_I18N` to `true | false`
-- `@formkit/nuxt` - set `NUXT_PUBLIC_IGNIS_FORMKIT` to `true | false`
+- `@nuxtjs/i18n` - set `NUXT_PUBLIC_IGNIS_I18N_ENABLED` to `true | false`
+- `@formkit/nuxt` - set `NUXT_PUBLIC_IGNIS_FORMKIT_ENABLED` to `true | false`
 - `@nuxt/content` - set `NUXT_PUBLIC_IGNIS_CONTENT` to `true | false`
 
 Default values are **false** (not included) for all optional modules.
 
+#### I18N options
+- you can select default language locale via `NUXT_PUBLIC_IGNIS_I18N_LOCALE`
+- all `.json` files with messages in `@assets/lang` folder will be auto-scanned
+- if [default config file](https://github.com/AloisSeckar/nuxt-ignis/blob/main/i18n.config.ts) is not suitable for your project, you may specify path to your own using `NUXT_PUBLIC_IGNIS_I18N_CONFIG`
+
+#### Formkit options
+- you can select default language locale via `NUXT_PUBLIC_IGNIS_FORMKIT_LOCALE`
+- if [default config file](https://github.com/AloisSeckar/nuxt-ignis/blob/main/i18n.config.ts) is not suitable for your project, you may specify path to your own using `NUXT_PUBLIC_IGNIS_FORMKIT_CONFIG`
+
 ### Optional features
 Currently, following extra features (not using separate Nuxt Modules) are opinionated:
 - `Open Props CSS` - set `NUXT_PUBLIC_IGNIS_OPENPROPS` to `true | false`
+- `elrh-pslo` - set `NUXT_PUBLIC_IGNIS_PSLO_ENABLED` to `true | false`
 
 Default values are **false** (not included) for all optional features.
+
+#### elrh-pslo options
+There are two config values for this feature:
+- `NUXT_PUBLIC_IGNIS_PSLO_ENABLED` - setting to true will allow utility function `pslo` to treat texts in your app
+- `NUXT_PUBLIC_IGNIS_PSLO_CONTENT` - if both `elrh-pslo` and `@nuxt/content` are enabled, this allows or disallows Markdown content pre-processing with `pslo` function

package/app.vue

@@ -25,8 +25,8 @@ useHead({
     lang: 'en',
   },
   bodyAttrs: {
-    class: 'bg-slate-900 m-auto text-center text-white'
-  }
+    class: 'bg-slate-900 m-auto text-center text-white',
+  },
 })
 initConsola()
 log.info('Nuxt Ignis was here!')

package/components/AppFeature.vue

@@ -35,9 +35,9 @@
  * Macro `defineProps()` comes from Vue.js API
  * (https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits).
  * This is how to pass variables inside components in Vue.
- * 
+ *
  * `required` - value has to be provided, otherwise an error will occur
- * 
+ *
  * `default` - will have this value, unless overwritten by caller
  */
 const props = defineProps({
@@ -48,7 +48,8 @@ const props = defineProps({
 /**
  * `Icon` component can only be used if `@nuxt/ui` module is activated.
  */
-const showIcon = useRuntimeConfig().public.ignis.ui === 'nuxt-ui'
+const config = useRuntimeConfig().public.ignis
+const showIcon = config.preset.ui === 'nuxt-ui' || config.ui
 
 // In setup section, you have to adress properties like this.
 // You cannot reach them directly like in template.

package/components/CurrentTime.vue

@@ -20,8 +20,7 @@
       day="2-digit"
       hour="2-digit"
       minute="2-digit"
-      second="2-digit"
-    />
+      second="2-digit" />
   </div>
 </template>
 

package/composables/useTranslation.ts

@@ -2,47 +2,46 @@ import lang from '@/assets/lang/en.json'
 
 /**
  * An adapter above `t` function from `i18n` module.
- * 
+ *
  * This function is basically a shorthand for obtaining `i18n` translation in scripts.
  * In templates `$t` function is available, but in scripts we normally have to
  * access the `t` function via the instance of `$i18n` living inside current Nuxt App.
- * 
- * Since $i18n is an optional dependency in Nuxt Ignis setup, this also gracefully handles 
+ *
+ * Since $i18n is an optional dependency in Nuxt Ignis setup, this also gracefully handles
  * cases when user turns the module off while still using the translations in the code.
- * 
+ *
  * @param key identifier of text that should be displayed
  * @returns translated text from i18n sources
  */
 export function useT(key: string): string {
-  if (useRuntimeConfig().public.ignis.i18n) {
+  if (useRuntimeConfig().public.ignis.i18n.enabled) {
     // i18n available => just use it
-    // @ts-ignore (in case i18n is turned off, type of $i18n cannot be infered)
     return useNuxtApp().$i18n.t(key)
   } else {
     // backdoor for Nuxt Ignis to display values on demo index page
     const backdoorValue = searchLang(key)
     if (backdoorValue) {
-        return backdoorValue as string
+      return backdoorValue as string
     }
     // 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=true)')
-    return "Translation not available"
+    return 'Translation not available'
   }
 }
 
 /** AI-generated helper to search a value for given key in JSON lang file. */
 function searchLang(key: string): unknown {
-    const keys = key.split(".")
+  const keys = key.split('.')
 
-    let current = lang
-    for (const key of keys) {
-        if (current && key in current) {
-            // @ts-expect-error TODO this should be fixed
-            current = current[key]
-        } else {
-            return undefined
-        }
+  let current = lang
+  for (const key of keys) {
+    if (current && key in current) {
+      // @ts-expect-error TODO this should be fixed
+      current = current[key]
+    } else {
+      return undefined
     }
+  }
 
-    return current
+  return current
 }

package/features.ts

@@ -61,22 +61,28 @@ export function setFeatures() {
   }
 
   // i18n
-  if (process.env.NUXT_PUBLIC_IGNIS_I18N === 'true') {
+  if (process.env.NUXT_PUBLIC_IGNIS_I18N_ENABLED === 'true') {
     // module definition
     nuxtConfig.modules.push('@nuxtjs/i18n')
     // module-specific config key
     nuxtConfig = defu({
       i18n: {
-        vueI18n: './i18n.config.ts',
-        locales: ['en'],
-        defaultLocale: 'en',
+        vueI18n: process.env.NUXT_PUBLIC_IGNIS_I18N_CONFIG || './i18n.config.ts',
       },
     }, nuxtConfig)
   }
 
   // formkit
-  if (process.env.NUXT_PUBLIC_IGNIS_FORMKIT === 'true') {
+  if (process.env.NUXT_PUBLIC_IGNIS_FORMKIT_ENABLED === 'true') {
+    // module definition
     nuxtConfig.modules.push('@formkit/nuxt')
+    // module-specific config key
+    nuxtConfig = defu({
+      formkit: {
+        autoImport: true,
+        configFile: process.env.NUXT_PUBLIC_IGNIS_FORMKIT_CONFIG || './formkit.config.ts',
+      },
+    }, nuxtConfig)
   }
 
   // content
@@ -99,6 +105,11 @@ export function setFeatures() {
     }, nuxtConfig)
   }
 
+  // elrh-pslo
+  if (process.env.NUXT_PUBLIC_IGNIS_PSLO_ENABLED === 'true') {
+    extras.push('elrh-pslo')
+  }
+
   let overview = 'Nuxt Ignis will start using following settings:\n'
   overview += 'Modules: ' + nuxtConfig.modules.join(', ') + '\n'
   if (extras.length > 0) {

package/formkit.config.ts

@@ -1,11 +1,12 @@
 // https://formkit.com/guides/optimizing-for-production#using-the-nuxt-module
-import { en, de } from '@formkit/i18n'
+import { en, de, cs } from '@formkit/i18n'
 import type { DefaultConfigOptions } from '@formkit/vue'
 
+const ignisLocale = process.env.NUXT_PUBLIC_IGNIS_FORMKIT_DEFAULT || 'en'
+
 const config: DefaultConfigOptions = {
-  // example of importing different message translations and set the default one
-  locales: { en, de },
-  locale: 'en',
+  locales: { en, de, cs }, // TODO allow multiple locales
+  locale: ignisLocale,
 }
 
 export default config

package/i18n.config.ts

@@ -1,12 +1,12 @@
-import en from '@/assets/lang/en.json'
-// create and load more language files if needed
+const ignisLocale = process.env.NUXT_PUBLIC_IGNIS_I18N_DEFAULT || 'en'
 
+// https://i18n.nuxtjs.org/docs/composables/define-i18n-config
 export default defineI18nConfig(() => ({
   legacy: false,
   strategy: 'no_prefix',
-  locale: 'en',
-  defaultLocale: 'en',
-  fallbackLocale: 'en',
-  messages: { en }, // allowe more language if needed
+  locale: ignisLocale,
+  defaultLocale: ignisLocale,
+  fallbackLocale: ignisLocale,
+  messages: scanI18NSources(), // will dynamically load all .jsons from @/assets/lang/*
   warnHtmlMessage: false,
 }))

package/nuxt.config.ts

@@ -26,6 +26,7 @@ const nuxtConfig = defu(ignisFeatures, {
       // NOTE: due to static-like nature of nuxt.config.ts file
       // actual values MUST BE provided via .env file (or production equivalent)
       ignis: {
+        // presets
         preset: {
           ui: 'off', // nuxt-ui/tailwind/off
           db: 'off', // neon/supabase/off
@@ -35,10 +36,22 @@ const nuxtConfig = defu(ignisFeatures, {
         tailwind: false, // true/false (ignored, if ui=true)
         neon: false, // true/false
         supabase: false, // true/false
-        i18n: false, // true/false
-        formkit: false, // true/false
+        i18n: {
+          enabled: false, // true/false
+          default: 'en', // default locale (should be same as formkit)
+          config: './i18n.config.ts', // path to config file
+        },
+        formkit: {
+          enabled: false, // true/false
+          default: 'en', // default locale (should be same as i18n)
+          config: './formkit.config.ts', // path to config file
+        },
         content: false, // true/false
         openprops: false, // true/false
+        pslo: {
+          enabled: false, // true/false (elrh-pslo will (not) be used)
+          content: false, // true/false (elrh-pslo will (not) be aplied on nuxt-content)
+        },
       },
 
       // logging

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ignis",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Enhanced and customizable Nuxt application starter pack",
   "repository": "github:AloisSeckar/nuxt-ignis",
   "license": "MIT",
@@ -29,6 +29,7 @@
     "@vueuse/nuxt": "12.0.0",
     "consola": "3.2.3",
     "defu": "6.1.4",
+    "elrh-pslo": "1.1.6",
     "nuxt-neon": "0.2.4",
     "nuxt-security": "2.1.5",
     "nuxt-time": "1.0.3",

package/pages/index.vue

@@ -48,8 +48,8 @@ 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 i18n = setup.i18n
-const formkit = setup.formkit
+const i18n = setup.i18n.enabled
+const formkit = setup.formkit.enabled
 const content = setup.content
 const openprops = setup.openprops
 </script>

package/pages/second.vue

@@ -5,6 +5,8 @@
 
     NuxtImg
     - special component for displaying images with NuxtImage module
+    elrh-pslo
+    - special text-processing feature
 -->
 
 <template>
@@ -18,6 +20,12 @@
         {{ 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="link">
       <NuxtLink to="/">
         {{ useT("goto1") }}
@@ -25,3 +33,10 @@
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+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)
+</script>

package/server/plugins/pslo-content.ts

@@ -0,0 +1,19 @@
+import { preventSingleLetterOrphans } from 'elrh-pslo'
+
+// this plugin will auto-treat all Nuxt Content page data
+// with "preventSingleLetterOrphans" function
+// but only if relevant options are set up
+export default defineNitroPlugin((nitroApp) => {
+  const config = useRuntimeConfig().public.ignis
+  if (config.content && config.pslo.enabled && config.pslo.content) {
+    console.log('elrh-pslo plugin initialized')
+    // @ts-expect-error typecheck for the hook
+    // TODO fix this - the example comes from https://content.nuxt.com/recipes/hooks, so it should work
+    nitroApp.hooks.hook('content:file:beforeParse', (file) => {
+      console.log('Treating Markdown with elrh-pslo')
+      if (file._id.endsWith('.md')) {
+        file.body = preventSingleLetterOrphans(file.body)
+      }
+    })
+  }
+})

package/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

package/utils/i18n-sources.ts

@@ -0,0 +1,18 @@
+// scans @/assets/lang/* for all .json files with i18n messages
+// and makes them available for i18n.config.ts
+
+import type { LocaleMessage } from '@intlify/core-base'
+
+export function scanI18NSources() {
+  const modules = import.meta.glob('@/assets/lang/*.json', { eager: true })
+
+  const messages = {} as { [x: string]: LocaleMessage<unknown> }
+  for (const path in modules) {
+    const locale = path.match(/\/([^/]+)\.json$/)
+    if (locale && locale[1]) {
+      messages[locale[1]] = modules[path] as LocaleMessage<unknown>
+    }
+  }
+
+  return messages
+}

package/utils/ignis-types.ts

@@ -1,21 +1,21 @@
 /**
  * Available variants for UI libraries.
- * 
+ *
  * `nuxt-ui` - full https://ui.nuxt.com/ via `@nuxt/ui` connector module **[RECOMMENDED]**
- * 
+ *
  * `tailwind` - only https://tailwindcss.com/ via `@nuxtjs/tailwindcss` connector module
- * 
+ *
  * `off` - no UI library **[DEFAULT]**
  */
 export type UIOptions = 'nuxt-ui' | 'tailwind' | 'off'
 
 /**
  * Available variants for Database connector.
- * 
+ *
  * `neon` - https://neon.tech/ via `nuxt-neon` connector module **[RECOMMENDED]**
  *
  * `supabase` - https://supabase.com/ via `@nuxtjs/supabase` connector module
- * 
+ *
  * `off` - no database module **[DEFAULT]**
  */
 export type DBOptions = 'neon' | 'supabase' | 'off'

package/utils/pslo-utils.ts

@@ -0,0 +1,11 @@
+import { preventSingleLetterOrphans } from 'elrh-pslo'
+
+// this util function proxies "preventSingleLetterOrphans" function
+// it only applies the text transformation if relevant options is set up
+export function pslo(text: string) {
+  if (useRuntimeConfig().public.ignis.pslo.enabled) {
+    return preventSingleLetterOrphans(text)
+  } else {
+    return text
+  }
+}