docs: add icons to callout to differentiate urgency (nuxt-modules#2988)

docs/content/docs/1.getting-started/1.index.md

@@ -3,11 +3,11 @@ title: Installation
 description: Get started with Nuxt i18n module.
 ---
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 You are reading the `v8` documentation compatible with **Nuxt 3**. :br Checkout [v7 Docs](/docs/v7) for **Nuxt 2** compatible version.
 ::
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 Nuxt i18n module is using **Vue i18n v9**. See [Vue i18n docs](https://vue-i18n.intlify.dev/) for more.
 ::
 

docs/content/docs/1.getting-started/2.usage.md

@@ -33,12 +33,12 @@ export default defineI18nConfig(() => ({
 
 The `i18n.config` file exports the same options as the `createI18n` function of Vue I18n. The configuration is passed to the `createI18n` function via the Nuxt plugin (runtime) of this module internally. For more details about configuration, see the [Vue I18n documentation](https://vue-i18n.intlify.dev/api/general.html#createi18n).
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 The following documentation explains how to use the Nuxt i18n module using Vue I18n Composition API. :br
 For more information on how to use Vue I18n Composition API, please see the docs [here](https://vue-i18n.intlify.dev/guide/advanced/composition.html).
 ::
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 You can also use Vue I18n's Legacy API in the Nuxt i18n module, this requires configuring [nuxt.config](https://i18n.nuxtjs.org/options/bundle) and i18n.config (`legacy: true`)
 ::
 
@@ -62,7 +62,7 @@ const { locale, setLocale } = useI18n()
 
 You now have a really simple Vue I18n based translation environment ready to go! The `<button>` elements can be used to switch between the English and French languages, by clicking either of the buttons you can see the word "welcome" translate and the page URL change to its corresponding language.
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 For more information about **Vue I18n**, you can refer to its documentation [here](https://vue-i18n.intlify.dev/).
 ::
 
@@ -126,7 +126,7 @@ const localePath = useLocalePath()
 
 Note that `localePath` can use the route's unprefixed path, which must start with `'/'` or the route's base name to generate the localized URL. The base name corresponds to the names Nuxt generates when parsing your `pages` directory, more info in [Nuxt docs](https://nuxt.com/docs/guide/directory-structure/pages).
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 If you prefer to use the Options API, you can use `this.localePath`. This API is kept for migration from Nuxt 2.
 ::
 
@@ -147,7 +147,7 @@ const switchLocalePath = useSwitchLocalePath()
 </template>
 ```
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 If you prefer to use the Options API, you can use `this.switchLocalePath`. This API is kept for migration from Nuxt 2.
 ::
 
@@ -175,6 +175,6 @@ function onClick() {
 </template>
 ```
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 If you prefer to use the Options API, you can use `this.localeRoute`. This API is kept for migration from Nuxt 2.
 ::

docs/content/docs/2.guide/1.index.md

@@ -3,7 +3,7 @@ title: Routing Strategies
 description: Nuxt i18n module overrides Nuxt default routes to add locale prefixes to every URL with routing strategies.
 ---
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 This feature works under [nuxt routing](https://nuxt.com/docs/getting-started/routing). It's assumed that you are using the `pages` directory to control routing.
 ::
 
@@ -57,7 +57,7 @@ There are 4 supported strategies that affect how app's routes are generated:
 
 With this strategy, your routes won't have a locale prefix added. The locale will be detected & changed without changing the URL. This implies that you have to rely on browser & cookie detection, and implement locale switches by calling the i18n API.
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 This strategy doesn't support [Custom paths](/docs/guide/custom-paths) and [Ignore routes](/docs/guide/ignoring-localized-routes) features.
 ::
 

docs/content/docs/2.guide/11.per-component-translations.md

@@ -41,11 +41,11 @@ ja:
 </i18n>
 ```
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 Read more about [i18n custom blocks](https://vue-i18n.intlify.dev/guide/advanced/sfc.html)
 ::
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 When you use per-component translations, you will need to use `t` exported by `useI18n`, **not `$t`**.
 To read more about `$t` which isn't used in per-component translation, see the ["implicit with injected properties and functions" section of Vue I18n docs](https://vue-i18n.intlify.dev/guide/advanced/composition.html#implicit-with-injected-properties-and-functions).
 ::

docs/content/docs/2.guide/12.extend-messages.md

@@ -72,6 +72,6 @@ export default defineNuxtConfig({
 })
 ```
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 Because module's messages are merged with the project's ones, it's safer to prefix them. Main project messages **will always override** messages provided by modules.
 ::

docs/content/docs/2.guide/13.extend-pages.md

@@ -3,11 +3,11 @@ title: Extending pages
 description: Adding localized pages from a module.
 ---
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 This is a workaround, support for extending pages with localization regardless of module registration order may be added in the future.
 ::
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Your module has to registered before `@nuxtjs/i18n` to ensure localized routes are generated for the added pages.
 ::
 

docs/content/docs/2.guide/14.layers.md

@@ -82,7 +82,7 @@ export default defineNuxtConfig({
 
 ::
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 Note how some options such as `lazy` are inherited, while options such as `langDir` and `locales` need to be set for every layer (project included) providing locale files.
 ::
 

docs/content/docs/2.guide/15.server-side-translations.md

@@ -5,7 +5,7 @@ description: Translate on the server-side and return it as a response.
 
 You can do the translation on the server-side and return it as a response. The locale messages defined in nuxt i18n module options are integrated, so all you need to do is configure the locale detector.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 **This feature is experimental,** that is supported from v8 RC8.
 ::
 
@@ -80,6 +80,6 @@ export default defineEventHandler(async event => {
 })
 ```
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 For the key of the translation function, you can specify the locale messages set in the nuxt-i18n options inside the nuxt.config, or the locale loaded in the i18n.config messages.
 ::

docs/content/docs/2.guide/16.install-module.md

@@ -5,7 +5,7 @@ description: How to install Nuxt i18n using `installModule` inside of a module.
 
 If you're a **module author** and want your module to install Nuxt i18n, you can do so using `installModule` but you will have to resolve paths used for `vueI18n`, `langDir` and those configured in `locales`.
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 We strongly recommend using [layers](/docs/guide/layers) for complete module installations over using `installModule`, layers are merged by priority which allows projects to overwrite options as desired and will not cause conflicts if more than one layer provides options for the Nuxt i18n module.
 
 :br :br

docs/content/docs/2.guide/2.runtime-hooks.md

@@ -3,7 +3,7 @@ title: Runtime Hooks
 description: Nuxt i18n module exposes some runtime hooks as callbacks that you can use to perform specific tasks that depend on the app's language.
 ---
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 For v8.0.0-beta.10 and below, please refer to [callbacks](/docs/v7/callbacks/) and [configuration](/docs/v7/options-reference#onbeforelanguageswitch).
 ::
 

docs/content/docs/2.guide/3.custom-paths.md

@@ -5,7 +5,7 @@ description: Customize the names of the paths for specific locale.
 
 In some cases, you might want to translate URLs in addition to having them prefixed with the locale code. There are 2 ways of configuring custom paths for your [Module configuration](#nodule-configuration) or your pages [Page component](#page-component).
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Custom paths are not supported when using the `no-prefix` [strategy](/docs/guide).
 ::
 
@@ -59,7 +59,7 @@ const localePath = useLocalePath()
 </template>
 ```
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Specifying a path to `localePath` is not supported, currently.
 ::
 
@@ -219,7 +219,7 @@ To configure a custom path for a dynamic route, you need to use it in double squ
 </script>
 ```
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 `defineI18nRoute` compiler macro is tree-shaked out at build time and is not included in the dist files.
 ::
 

docs/content/docs/2.guide/4.ignoring-localized-routes.md

@@ -3,7 +3,7 @@ title: Ignoring Localized Routes
 description: Customize localized route exclusions per page component.
 ---
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 This feature is not supported with the `no-prefix` [strategy](/docs/guide).
 ::
 

docs/content/docs/2.guide/5.browser-language-detection.md

@@ -17,7 +17,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::callout
+::callout{icon="i-heroicons-light-bulb"}
 For better SEO, it's recommended to set `redirectOn` to `root` (which is the default value). When set, the language detection is only attempted when the user visits the root path (`/`) of the site. This allows crawlers to access the requested page rather than being redirected away based on detected locale. It also allows linking to pages in specific locales.
 ::
 

docs/content/docs/2.guide/7.lazy-load-translations.md

@@ -66,7 +66,7 @@ export default {
 }
 ```
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 If your function returns an object of locale messages, **you must define it in the `defineI18nLocale` composable function**.
 
 About `defineI18nLocale` details, see the [here](/docs/api#defineI18nLocale).
@@ -209,6 +209,6 @@ const welcome = computed(() => t('welcome')) // Welcome!
 const welcomeDutch = computed(() => t('welcome', 1, { locale: 'nl' })) // Welkom!
 ```
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 As messages could be loaded from a remote API invoking the `loadLocaleMessages` function will always load messages, unnecessary loading can impact performance.
 ::

docs/content/docs/2.guide/8.lang-switcher.md

@@ -45,7 +45,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 To persist the locale on a route change when using `detectBrowserLanguage`, you must explicitly update the stored locale cookie. This is done with [`setLocaleCookie(locale)`](/docs/api/vue-i18n#setlocalecookie) or [`setLocale(locale)`](/docs/api/vue-i18n#setlocale), which sets the cookie and switches to the route of the specified locale. Not doing so can cause redirects based on the locale set on the locale cookie during navigation.
 ::
 
@@ -73,7 +73,7 @@ const availableLocales = computed(() => {
 
 Dealing with dynamic route parameters requires a bit more work because you need to provide parameters translations to **Nuxt i18n module**. The composable `useSetI18nParams` can be used to set translations for route parameters, this is used to set SEO tags as well as changing the routes returned by `switchLocalePath`.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 During SSR it matters when and where you set i18n parameters, since there is no reactivity during SSR.
 
 :br :br
@@ -126,7 +126,7 @@ setI18nParams({
 
 Note that a catch all route is defined **as an array**. In this case, there is only one element, but if you want to use a sub-path, for example `/not-found/post`, define multiple elements as in `['not-found', 'post']`. You will need to define more than one, e.g. `['not-found', 'post']`.
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 **Nuxt i18n module** won't reset parameters translations for you, this means that if you use identical parameters for different routes, navigating between those routes might result in conflicting parameters. Make sure you always set params translations in such cases.
 ::
 
@@ -240,13 +240,13 @@ route.meta.pageTransition.onBeforeEnter = async () => {
 
 ## Dynamic route parameters using `definePageMeta` (Deprecated)
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Dynamic route params using `nuxtI18n` on `definePageMeta` has been deprecated and will be removed in `v9`, use the composable [`useSetI18nParams`](/docs/api#useseti18nparams) instead.
 ::
 
 Dynamic params can be configured using `definePageMeta`. These will be merged with route params when generating lang switch routes with `switchLocalePath()`.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 You have to set the `dynamicRouteParams` option to `true` in **Nuxt i18n module**'s options to enable dynamic route parameters.
 ::
 

docs/content/docs/3.options/1.index.md

@@ -59,7 +59,7 @@ export default defineI18nConfig(() => {
 })
 ```
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 The Vue I18n `messages` option should be returned **by the plain object**.
 
 That will be pre-compiled in the nuxt i18n module via vue-i18n message-compiler as an executable message in the vue-i18n runtime.

docs/content/docs/3.options/10.misc.md

@@ -11,12 +11,12 @@ description: Miscellaneous options.
 Supported properties:
 
 - `localeDetector` (default: `''`) - Specify the locale detector to be called per request on the server side. You need to specify the filepath where the locale detector is defined.
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 About how to define the locale detector, see the [`defineI18nLocaleDetector` API](/docs/api#definei18nlocaledetector)
 ::
 - `switchLocalePathLinkSSR` (default: `false`) - Changes the way dynamic route parameters are tracked and updated internally, improving language switcher SSR when using the [`SwitchLocalePathLink`](/docs/api/components#switchlocalepathlink) component.
 - `autoImportTranslationFunctions` (default: `false`) - Automatically imports/initializes `$t`, `$rt`, `$d`, `$n`, `$tm` and `$te` functions in `<script setup>` when used.
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 This feature relies on [Nuxt's Auto-imports](https://nuxt.com/docs/guide/concepts/auto-imports) and will not work if this has been disabled.
 ::
 
@@ -41,7 +41,7 @@ Supported properties:
 
 Enforces the type definition of the API style to be used. If you set `composition`, Composition API types provided by Vue I18n and `@nuxtjs/i18n` are supported, else `legacy`, Options API types are supported.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 If it can not detect Nuxt configuration changing, you may need to run `nuxi prepare`.
 ::
 
@@ -52,7 +52,7 @@ If it can not detect Nuxt configuration changing, you may need to run `nuxi prep
 
 Whether to use `@nuxtjs/i18n` debug mode. If `true`, logs will be output to the console.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 The purpose of this option is to help identify any problems with `@nuxtjs/i18n`.
 
 Don't enable this option in production. It's not optimized for it.

docs/content/docs/3.options/2.routing.md

@@ -14,7 +14,7 @@ Can also be a function (will be passed a Nuxt Context as a parameter) that retur
 
 This property can also be set using [`runtimeConfig`](/docs/options/runtime-config).
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 It's especially important to set this option when using SEO features, in which case it's required that generated SEO tags use fully-qualified URLs.
 ::
 

docs/content/docs/3.options/3.lazy.md

@@ -23,6 +23,6 @@ A relative path to a directory containing translation files to load. Can be used
 
 The path is resolved relative to the project `srcDir` (project root by default).
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Absolute paths will fail in production (eg. `/locales` should be changed into either `locales` or `./locales`)
 ::

docs/content/docs/3.options/4.browser.md

@@ -12,7 +12,7 @@ Enables browser language detection to automatically redirect visitors to their p
 
 See also [Browser language detection](/docs/guide/browser-language-detection) for a guide.
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 Note that for better SEO it's recommended to set `redirectOn` to `root`.
 ::
 

docs/content/docs/3.options/6.compilation.md

@@ -19,7 +19,7 @@ Supported properties:
 
 Whether to use the JIT compilation of Vue I18n message compiler.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Mean that necessary to pre-compile locale messages that are not managed by the nuxt i18n module (e.g. in the case of importing from a specific URL, you will need to precompile them yourself.)
 
 And also, you need to understand that you cannot support use cases where you dynamically compose locale messages from the back-end via an API.
@@ -32,7 +32,7 @@ And also, you need to understand that you cannot support use cases where you dyn
 
 Strictly check that the locale message does not contain HTML tags. If HTML tags are included, an error is thrown.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 If you do not want the error to be thrown, you can work around it by setting it to false. However, **this means that the locale message might cause security issues with XSS**. In that case, we recommend setting the `escapeHtml` option to `true`.
 ::
 
@@ -43,6 +43,6 @@ If you do not want the error to be thrown, you can work around it by setting it
 
 Determine whether to escape HTML tags if they are included in the locale message.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 If `strictMessage` is disabled by setting it to `false`, we recommend enabling this option.
 ::

docs/content/docs/4.api/1.index.md

@@ -234,7 +234,7 @@ declare function useCookieLocale(): Ref<string>
 
 The `useTranslation` composable returns the translation function.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 **This composable is experimental and server-side only.**
 ::
 
@@ -349,7 +349,7 @@ The locale detector function is used to detect the locale on server-side. It's c
 
 You need return locale string.
 
-::callout{type="warning"}
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 **This composable is experimental.** You need to configure filepath to [`experimental.localeDetector` option](/docs/options/misc#experimental).
 ::
 

docs/content/docs/4.api/4.vue-i18n.md

@@ -3,7 +3,7 @@ title: Vue I18n
 description: Extension of Vue I18n
 ---
 
-::callout{type="info"}
+::callout{icon="i-heroicons-light-bulb"}
 Instance of [Composer (for Composition API)](https://vue-i18n.intlify.dev/api/composition.html#composer) or [VueI18n (for Legacy API)](https://vue-i18n.intlify.dev/api/legacy.html#vuei18n) is exposed as `$i18n` on Vue instance.
 ::