@intlayer/docs 8.0.0 → 8.0.1-canary.1

package/docs/pt/intlayer_with_vite+preact.md

@@ -24,7 +24,7 @@ history:
     changes: Histórico inicial
 ---
 
-# Traduza seu Vite and Preact com Intlayer | Internacionalização (i18n)
+# Traduza seu site Vite e Preact usando o Intlayer | Internacionalização (i18n)
 
 <Tabs defaultTab="video">
   <Tab label="Video" value="video">
@@ -45,9 +45,9 @@ history:
   </Tab>
 </Tabs>
 
-> Este pacote está em desenvolvimento. Veja a [issue](https://github.com/aymericzip/intlayer/issues/118) para mais informações. Demonstre seu interesse no Intlayer para Preact curtindo a issue
+## Tabela de Conteúdos
 
-Veja o [Modelo de Aplicação](https://github.com/aymericzip/intlayer-vite-preact-template) no GitHub.
+<TOC/>
 
 ## O que é o Intlayer?
 
@@ -56,7 +56,7 @@ Veja o [Modelo de Aplicação](https://github.com/aymericzip/intlayer-vite-preac
 Com o Intlayer, você pode:
 
 - **Gerenciar traduções facilmente** usando dicionários declarativos no nível do componente.
-- **Localizar dinamicamente metadados**, rotas e conteúdo.
+- **Localizar dinamicamente metadatos**, rotas e conteúdo.
 - **Garantir suporte ao TypeScript** com tipos gerados automaticamente, melhorando o autocompletar e a detecção de erros.
 - **Beneficie de recursos avançados**, como detecção e troca dinâmica de localidade.
 
@@ -64,6 +64,8 @@ Com o Intlayer, você pode:
 
 ## Guia Passo a Passo para Configurar o Intlayer em uma Aplicação Vite e Preact
 
+Veja o [Modelo de Aplicação](https://github.com/aymericzip/intlayer-vite-preact-template) no GitHub.
+
 ### Passo 1: Instalar Dependências
 
 Instale os pacotes necessários usando npm:
@@ -94,9 +96,7 @@ bunx intlayer init
 
 - **intlayer**
 
-- **intlayer**
-
-  O pacote principal que fornece ferramentas de internacionalização para gerenciamento de configuração, tradução, [declaração de conteúdo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/get_started.md), transpiração e [comandos CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_cli.md).
+  O pacote principal que fornece ferramentas de internacionalização para gerenciamento de configuração, tradução, [declaração de conteúdo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/content_file.md), transpiração e [comandos CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/cli/index.md).
 
 - **preact-intlayer**
   O pacote que integra o Intlayer com a aplicação Preact. Ele fornece provedores de contexto e hooks para internacionalização em Preact.
@@ -121,6 +121,10 @@ const config: IntlayerConfig = {
     ],
     defaultLocale: Locales.ENGLISH,
   },
+  routing: {
+    mode: "prefix-no-default", // Padrão: prefixar todos os locais exceto o padrão
+    storage: ["cookie", "header"], // Padrão: armazenar locale no cookie e detectar pelo header
+  },
 };
 
 export default config;
@@ -140,6 +144,10 @@ const config = {
     ],
     defaultLocale: Locales.ENGLISH,
   },
+  routing: {
+    mode: "prefix-no-default", // Padrão: prefixar todos os locais exceto o padrão
+    storage: ["cookie", "header"], // Padrão: armazenar locale no cookie e detectar pelo header
+  },
 };
 
 export default config;
@@ -159,12 +167,16 @@ const config = {
     ],
     defaultLocale: Locales.ENGLISH,
   },
+  routing: {
+    mode: "prefix-no-default", // Padrão: prefixar todos os locais exceto o padrão
+    storage: ["cookie", "header"], // Padrão: armazenar locale no cookie e detectar pelo header
+  },
 };
 
 module.exports = config;
 ```
 
-> Através deste arquivo de configuração, você pode configurar URLs localizadas, redirecionamento de middleware, nomes de cookies, a localização e extensão das suas declarações de conteúdo, desabilitar logs do Intlayer no console e muito mais. Para uma lista completa dos parâmetros disponíveis, consulte a [documentação de configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/configuration.md).
+> Através deste arquivo de configuração, você pode configurar URLs localizadas, modos de roteamento, opções de armazenamento, nomes de cookies, a localização e extensão das suas declarações de conteúdo, desabilitar logs do Intlayer no console e muito mais. Para uma lista completa dos parâmetros disponíveis, consulte a [documentação de configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/configuration.md).
 
 ### Passo 3: Integre o Intlayer na Sua Configuração do Vite
 
@@ -238,7 +250,7 @@ const appContent = {
     edit: t<ComponentChildren>({
       en: (
         <>
-          Edite <code>src/app.tsx</code> e salve para testar HMR
+          Edit <code>src/app.tsx</code> and save to test HMR
         </>
       ),
       fr: (
@@ -254,7 +266,7 @@ const appContent = {
     }),
 
     readTheDocs: t({
-      en: "Clique nos logos do Vite e Preact para saber mais",
+      en: "Click on the Vite and Preact logos to learn more",
       fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",
       es: "Haga clic en los logotipos de Vite y Preact para obtener más información",
     }),
@@ -275,13 +287,11 @@ const appContent = {
     viteLogo: t({
       en: "Vite logo",
       fr: "Logo Vite",
-      pt: "Logo Vite",
       es: "Logo Vite",
     }),
     preactLogo: t({
       en: "Preact logo",
       fr: "Logo Preact",
-      pt: "Logo Preact",
       es: "Logo Preact",
     }),
 
@@ -290,24 +300,19 @@ const appContent = {
     count: t({
       en: "count is ",
       fr: "le compte est ",
-      pt: "a contagem é ",
       es: "el recuento es ",
     }),
 
     edit: t({
       en: "Edit src/app.jsx and save to test HMR",
       fr: "Éditez src/app.jsx et enregistrez pour tester HMR",
-      pt: "Edite src/app.jsx e salve para testar HMR",
-      es: "Edita src/app.jsx y guarda para probar HMR",
-    }),
       es: "Edita src/app.jsx y guarda para probar HMR",
     }),
 
     readTheDocs: t({
-      en: "Clique nos logos do Vite e do Preact para saber mais",
+      en: "Click on the Vite and Preact logos to learn more",
       fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",
-      es: "Haga clic en los logotipos de Vite y Preact para obtener más información",
-      pt: "Clique nos logos do Vite e do Preact para saber mais",
+      es: "Haga clic en los logotipos de Vite y Preact para obtener mais informações",
     }),
   },
 };
@@ -327,13 +332,11 @@ const appContent = {
       en: "Vite logo",
       fr: "Logo Vite",
       es: "Logo Vite",
-      pt: "Logo Vite",
     }),
     preactLogo: t({
       en: "Preact logo",
       fr: "Logo Preact",
       es: "Logo Preact",
-      pt: "Logo Preact",
     }),
 
     title: "Vite + Preact",
@@ -342,21 +345,18 @@ const appContent = {
       en: "count is ",
       fr: "le compte est ",
       es: "el recuento es ",
-      pt: "a contagem é ",
     }),
 
     edit: t({
       en: "Edit src/app.tsx and save to test HMR",
       fr: "Éditez src/app.tsx et enregistrez pour tester HMR",
       es: "Edita src/app.tsx y guarda para probar HMR",
-      pt: "Edite src/app.tsx e salve para testar HMR",
     }),
 
     readTheDocs: t({
       en: "Click on the Vite and Preact logos to learn more",
       fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",
-      es: "Haga clic en los logotipos de Vite y Preact para obtener más información",
-      pt: "Clique nos logos do Vite e do Preact para saber mais",
+      es: "Haga clic en los logotipos de Vite e Preact para saber mais",
     }),
   },
 };
@@ -374,8 +374,7 @@ module.exports = appContent;
       "translation": {
         "en": "Vite logo",
         "fr": "Logo Vite",
-        "es": "Logo Vite",
-        "pt": "Logo Vite"
+        "es": "Logo Vite"
       }
     },
     "preactLogo": {
@@ -383,8 +382,7 @@ module.exports = appContent;
       "translation": {
         "en": "Preact logo",
         "fr": "Logo Preact",
-        "es": "Logo Preact",
-        "pt": "Logo Preact"
+        "es": "Logo Preact"
       }
     },
     "title": {
@@ -392,8 +390,7 @@ module.exports = appContent;
       "translation": {
         "en": "Vite + Preact",
         "fr": "Vite + Preact",
-        "es": "Vite + Preact",
-        "pt": "Vite + Preact"
+        "es": "Vite + Preact"
       }
     },
     "count": {
@@ -401,8 +398,7 @@ module.exports = appContent;
       "translation": {
         "en": "count is ",
         "fr": "le compte est ",
-        "es": "el recuento es ",
-        "pt": "a contagem é "
+        "es": "el recuento es "
       }
     },
     "edit": {
@@ -410,8 +406,7 @@ module.exports = appContent;
       "translation": {
         "en": "Edit src/app.tsx and save to test HMR",
         "fr": "Éditez src/app.tsx et enregistrez pour tester HMR",
-        "es": "Edita src/app.tsx y guarda para probar HMR",
-        "pt": "Edite src/app.tsx e salve para testar HMR"
+        "es": "Edita src/app.tsx y guarda para probar HMR"
       }
     },
     "readTheDocs": {
@@ -419,8 +414,7 @@ module.exports = appContent;
       "translation": {
         "en": "Click on the Vite and Preact logos to learn more",
         "fr": "Cliquez sur les logos Vite et Preact pour en savoir plus",
-        "es": "Haga clic en los logotipos de Vite y Preact para obtener más información",
-        "pt": "Clique nos logos do Vite e do Preact para saber mais"
+        "es": "Haga clic en los logotipos de Vite y Preact para obtener más información"
       }
     }
   }
@@ -429,7 +423,7 @@ module.exports = appContent;
 
 > Suas declarações de conteúdo podem ser definidas em qualquer lugar da sua aplicação, desde que estejam incluídas no diretório `contentDir` (por padrão, `./src`). E correspondam à extensão do arquivo de declaração de conteúdo (por padrão, `.content.{json,ts,tsx,js,jsx,mjs,cjs}`).
 
-> Para mais detalhes, consulte a [documentação de declaração de conteúdo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/get_started.md).
+> Para mais detalhes, consulte a [documentação de declaração de conteúdo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/content_file.md).
 
 > Se seu arquivo de conteúdo incluir código TSX, pode ser necessário importar `import { h } from "preact";` ou garantir que sua pragma JSX esteja corretamente configurada para Preact.
 
@@ -471,6 +465,12 @@ const AppContent: FunctionalComponent = () => {
         </button>
         <p>{content.edit}</p>
       </div>
+      {/* Conteúdo Markdown */}
+      <div>{content.myMarkdownContent}</div>
+
+      {/* Conteúdo HTML */}
+      <div>{content.myHtmlContent}</div>
+
       <p class="read-the-docs">{content.readTheDocs}</p>
     </>
   );
@@ -647,7 +647,7 @@ module.exports = LocaleSwitcher;
 
 > Para saber mais sobre o hook `useLocale`, consulte a [documentação](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/react-intlayer/useLocale.md) (A API é semelhante para `preact-intlayer`).
 
-### (Opcional) Passo 7: Adicione roteamento localizado à sua aplicação
+### (Opcional) Passo 7: Adicionar roteamento localizado à sua aplicação
 
 O objetivo deste passo é criar rotas únicas para cada idioma. Isso é útil para SEO e URLs amigáveis para SEO.
 Exemplo:
@@ -658,141 +658,15 @@ Exemplo:
 - https://example.com/fr/about
 ```
 
-> Por padrão, as rotas não são prefixadas para o idioma padrão. Se você quiser prefixar o idioma padrão, pode definir a opção `middleware.prefixDefault` como `true` na sua configuração. Veja a [documentação de configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/configuration.md) para mais informações.
+> Por padrão, as rotas não são prefixadas para o idioma padrão. Se você quiser prefixar o idioma padrão, pode definir a opção `routing.mode` como `"prefix-all"` na sua configuração. Veja a [documentação de configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/configuration.md) para mais informações.
 
-Para adicionar roteamento localizado à sua aplicação, você pode criar um componente `LocaleRouter` que envolva as rotas da sua aplicação e gerencie o roteamento baseado no idioma. Aqui está um exemplo usando [preact-iso](https://github.com/preactjs/preact-iso):
-
-Primeiro, instale o `preact-iso`:
-
-```bash packageManager="npm"
-npm install preact-iso
-npx intlayer init
-```
-
-```bash packageManager="pnpm"
-pnpm add preact-iso
-pnpm intlayer init
-```
-
-```bash packageManager="yarn"
-yarn add preact-iso
-```
+Para adicionar roteamento localizado à sua aplicação, você pode criar um componente `LocaleRouter` que envolva as rotas da sua aplicação e gerencie o roteamento baseado no idioma. Aqui está um exemplo usando [preact-iso](https://github.com/preactjs/preact-iso) :
 
 ```tsx fileName="src/components/LocaleRouter.tsx"  codeFormat="typescript"
-import { type Locales, configuration, getPathWithoutLocale } from "intlayer";
-import { ComponentChildren, FunctionalComponent } from "preact";
+import { localeMap } from "intlayer";
 import { IntlayerProvider } from "preact-intlayer";
-import { LocationProvider, useLocation } from "preact-iso";
-import { useEffect } from "preact/hooks";
-
-const { internationalization, middleware } = configuration;
-const { locales, defaultLocale } = internationalization;
-
-const Navigate: FunctionalComponent<{ to: string; replace?: boolean }> = ({
-  to,
-  replace,
-}) => {
-  const { route } = useLocation();
-  useEffect(() => {
-    route(to, replace);
-  }, [to, replace, route]);
-  return null;
-};
-
-/**
- * Um componente que gerencia a localização e envolve os filhos com o contexto de idioma apropriado.
- * Ele gerencia a detecção e validação do idioma baseado na URL.
- */
-const AppLocalized: FunctionalComponent<{
-  children: ComponentChildren;
-  locale?: Locales;
-}> = ({ children, locale }) => {
-  const { path: pathname, url } = useLocation();
-
-  if (!url) {
-    return null;
-  }
-
-  const search = url.substring(pathname.length);
-
-  // Determina o idioma atual, usando o padrão caso não seja fornecido
-  const currentLocale = locale ?? defaultLocale;
-
-  // Remove o prefixo do idioma do caminho para construir um caminho base
-  const pathWithoutLocale = getPathWithoutLocale(
-    pathname // Caminho atual da URL
-  );
-
-  /**
-   * Se middleware.prefixDefault for verdadeiro, o locale padrão deve sempre ser prefixado.
-   */
-  if (middleware.prefixDefault) {
-    // Validar o locale
-    if (!locale || !locales.includes(locale)) {
-      // Redirecionar para o locale padrão com o caminho atualizado
-      return (
-        <Navigate
-          to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // Substituir a entrada atual do histórico pela nova
-        />
-      );
-    }
-
-    // Envolver os filhos com o IntlayerProvider e definir o locale atual
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  } else {
-    /**
-     * Quando middleware.prefixDefault for falso, o locale padrão não é prefixado.
-     * Garantir que o idioma atual seja válido e não o idioma padrão.
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (loc) => loc.toString() !== defaultLocale.toString() // Excluir o idioma padrão
-        )
-        .includes(currentLocale) // Verificar se o idioma atual está na lista de idiomas válidos
-    ) {
-      // Redirecionar para o caminho sem prefixo de idioma
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // Envolver os filhos com o IntlayerProvider e definir o idioma atual
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  }
-};
-
-const RouterContent: FunctionalComponent<{
-  children: ComponentChildren;
-}> = ({ children }) => {
-  const { path } = useLocation();
-
-  if (!path) {
-    return null;
-  }
-
-  const pathLocale = path.split("/")[1] as Locales;
-
-  const isLocaleRoute = locales
-    .filter((locale) => middleware.prefixDefault || locale !== defaultLocale)
-    .some((locale) => locale.toString() === pathLocale);
-
-  if (isLocaleRoute) {
-    return <AppLocalized locale={pathLocale}>{children}</AppLocalized>;
-  }
-
-  return (
-    <AppLocalized
-      locale={!middleware.prefixDefault ? defaultLocale : undefined}
-    >
-      {children}
-    </AppLocalized>
-  );
-};
+import { LocationProvider, Router, Route } from "preact-iso";
+import type { ComponentChildren, FunctionalComponent } from "preact";
 
 /**
  * Um componente de roteador que configura rotas específicas para cada locale.
@@ -802,261 +676,89 @@ export const LocaleRouter: FunctionalComponent<{
   children: ComponentChildren;
 }> = ({ children }) => (
   <LocationProvider>
-    <RouterContent>{children}</RouterContent>
+    <Router>
+      {localeMap(({ locale, urlPrefix }) => ({ locale, urlPrefix }))
+        .sort((a, b) => b.urlPrefix.length - a.urlPrefix.length)
+        .map(({ locale, urlPrefix }) => (
+          <Route
+            key={locale}
+            path={`${urlPrefix}/:rest*`}
+            component={() => (
+              <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+            )}
+          />
+        ))}
+    </Router>
   </LocationProvider>
 );
 ```
 
 ```jsx fileName="src/components/LocaleRouter.jsx" codeFormat="esm"
-// Importando as dependências e funções necessárias
-import { configuration, getPathWithoutLocale } from "intlayer";
+import { localeMap } from "intlayer";
 import { IntlayerProvider } from "preact-intlayer";
-import { LocationProvider, useLocation } from "preact-iso";
-import { useEffect } from "preact/hooks";
-import { h } from "preact"; // Necessário para JSX
-
-// Desestruturando a configuração do Intlayer
-const { internationalization, middleware } = configuration;
-const { locales, defaultLocale } = internationalization;
-
-const Navigate = ({ to, replace }) => {
-  const { route } = useLocation();
-  useEffect(() => {
-    route(to, replace);
-  }, [to, replace, route]);
-  return null;
-};
+import { LocationProvider, Router, Route } from "preact-iso";
 
 /**
- * Um componente que gerencia a localização e envolve os filhos com o contexto de localidade apropriado.
- * Ele gerencia a detecção e validação da localidade baseada na URL.
- */
-const AppLocalized = ({ children, locale }) => {
-  const { path: pathname, url } = useLocation();
-
-  if (!url) {
-    return null;
-  }
-
-  const search = url.substring(pathname.length);
-
-  // Determina a localidade atual, usando a localidade padrão caso não seja fornecida
-  const currentLocale = locale ?? defaultLocale;
-
-  // Remove o prefixo da localidade do caminho para construir um caminho base
-  const pathWithoutLocale = getPathWithoutLocale(
-    pathname // Caminho atual da URL
-  );
-
-  /**
-   * Se middleware.prefixDefault for verdadeiro, a localidade padrão deve sempre ser prefixada.
-   */
-  if (middleware.prefixDefault) {
-    // Validar a localidade
-    if (!locale || !locales.includes(locale)) {
-      // Redirecionar para a localidade padrão com o caminho atualizado
-      return (
-        <Navigate
-          to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // Substituir a entrada atual do histórico pela nova
-        />
-      );
-    }
-
-    // Envolver os filhos com o IntlayerProvider e definir a localidade atual
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  } else {
-    /**
-     * Quando middleware.prefixDefault é falso, a localidade padrão não é prefixada.
-     * Garantir que a localidade atual seja válida e não seja a localidade padrão.
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (loc) => loc.toString() !== defaultLocale.toString() // Excluir a localidade padrão
-        )
-        .includes(currentLocale) // Verificar se a localidade atual está na lista de localidades válidas
-    ) {
-      // Redirecionar para o caminho sem prefixo de localidade
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // Envolver os filhos com o IntlayerProvider e definir a localidade atual
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  }
-};
-
-const RouterContent = ({ children }) => {
-  const { path } = useLocation();
-
-  if (!path) {
-    return null;
-  }
-
-  const pathLocale = path.split("/")[1];
-
-  const isLocaleRoute = locales
-    .filter((locale) => middleware.prefixDefault || locale !== defaultLocale)
-    .some((locale) => locale.toString() === pathLocale);
-
-  if (isLocaleRoute) {
-    return <AppLocalized locale={pathLocale}>{children}</AppLocalized>;
-  }
-
-  return (
-    <AppLocalized
-      locale={!middleware.prefixDefault ? defaultLocale : undefined}
-    >
-      {children}
-    </AppLocalized>
-  );
-};
-
-/**
- * Um componente de roteador que configura rotas específicas por localidade.
+ * Um componente de roteador que configura rotas específicas para cada locale.
  * Ele usa preact-iso para gerenciar a navegação e renderizar componentes localizados.
  */
 export const LocaleRouter = ({ children }) => (
   <LocationProvider>
-    <RouterContent>{children}</RouterContent>
+    <Router>
+      {localeMap(({ locale, urlPrefix }) => ({ locale, urlPrefix }))
+        .sort((a, b) => b.urlPrefix.length - a.urlPrefix.length)
+        .map(({ locale, urlPrefix }) => (
+          <Route
+            key={locale}
+            path={`${urlPrefix}/:rest*`}
+            component={() => (
+              <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+            )}
+          />
+        ))}
+    </Router>
   </LocationProvider>
 );
 ```
 
 ```jsx fileName="src/components/LocaleRouter.cjsx" codeFormat="commonjs"
-// Importando dependências e funções necessárias
-const { configuration, getPathWithoutLocale } = require("intlayer");
+const { localeMap } = require("intlayer");
 const { IntlayerProvider } = require("preact-intlayer");
-const { LocationProvider, useLocation } = require("preact-iso");
-const { useEffect } = require("preact/hooks");
-const { h } = require("preact"); // Necessário para JSX
-
-// Desestruturando configuração do Intlayer
-const { internationalization, middleware } = configuration;
-const { locales, defaultLocale } = internationalization;
-
-const Navigate = ({ to, replace }) => {
-  const { route } = useLocation();
-  useEffect(() => {
-    route(to, replace);
-  }, [to, replace, route]);
-  return null;
-};
+const { LocationProvider, Router, Route } = require("preact-iso");
 
 /**
- * Um componente que gerencia a localização e envolve os filhos com o contexto de localidade apropriado.
- * Ele gerencia a detecção e validação da localidade baseada na URL.
+ * Um componente de roteador que configura rotas específicas para cada locale.
+ * Ele usa preact-iso para gerenciar a navegação e renderizar componentes localizados.
  */
-const AppLocalized = ({ children, locale }) => {
-  const { path: pathname, url } = useLocation();
-
-  if (!url) {
-    return null;
-  }
-
-  const search = url.substring(pathname.length);
-
-  // Determina a localidade atual, usando a localidade padrão se não for fornecida
-  const currentLocale = locale ?? defaultLocale;
-
-  // Remove o prefixo da localidade do caminho para construir um caminho base
-  const pathWithoutLocale = getPathWithoutLocale(
-    pathname // Caminho atual da URL
-  );
-
-  /**
-   * Se middleware.prefixDefault for true, a localidade padrão deve sempre ser prefixada.
-   */
-  if (middleware.prefixDefault) {
-    // Valida a localidade
-    if (!locale || !locales.includes(locale)) {
-      // Redireciona para a localidade padrão com o caminho atualizado
-      return (
-        <Navigate
-          to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // Substitui a entrada atual do histórico pela nova
-        />
-      );
-    }
-
-    // Envolve os filhos com o IntlayerProvider e define o locale atual
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  } else {
-    /**
-     * Quando middleware.prefixDefault é falso, o locale padrão não é prefixado.
-     * Assegure que o locale atual é válido e não é o locale padrão.
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (loc) => loc.toString() !== defaultLocale.toString() // Exclui o locale padrão
+const LocaleRouter = ({ children }) =>
+  h(
+    LocationProvider,
+    {},
+    h(
+      Router,
+      {},
+      localeMap(({ locale, urlPrefix }) => ({ locale, urlPrefix }))
+        .sort((a, b) => b.urlPrefix.length - a.urlPrefix.length)
+        .map(({ locale, urlPrefix }) =>
+          h(Route, {
+            key: locale,
+            path: `${urlPrefix}/:rest*`,
+            component: () => h(IntlayerProvider, { locale }, children),
+          })
         )
-        .includes(currentLocale) // Verifica se a localidade atual está na lista de localidades válidas
-    ) {
-      // Redireciona para o caminho sem o prefixo da localidade
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // Envolve os filhos com o IntlayerProvider e define a localidade atual
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  }
-};
-
-const RouterContent = ({ children }) => {
-  const { path } = useLocation();
-
-  if (!path) {
-    return null;
-  }
-
-  const pathLocale = path.split("/")[1];
-
-  const isLocaleRoute = locales
-    .filter((locale) => middleware.prefixDefault || locale !== defaultLocale)
-    .some((locale) => locale.toString() === pathLocale);
-
-  if (isLocaleRoute) {
-    return <AppLocalized locale={pathLocale}>{children}</AppLocalized>;
-  }
-
-  return (
-    <AppLocalized
-      locale={!middleware.prefixDefault ? defaultLocale : undefined}
-    >
-      {children}
-    </AppLocalized>
+    )
   );
-};
-
-/**
- * Um componente de roteador que configura rotas específicas por locale.
- * Ele usa preact-iso para gerenciar a navegação e renderizar componentes localizados.
- */
-const LocaleRouter = ({ children }) => (
-  <LocationProvider>
-    <RouterContent>{children}</RouterContent>
-  </LocationProvider>
-);
 
 module.exports = { LocaleRouter };
 ```
 
-Então, você pode usar o componente `LocaleRouter` na sua aplicação:
+Em seguida, você pode usar o componente `LocaleRouter` na sua aplicação:
 
 ```tsx fileName="src/app.tsx" codeFormat="typescript"
 import { LocaleRouter } from "./components/LocaleRouter";
 import type { FunctionalComponent } from "preact";
-// ... Seu componente AppContent (definido no Passo 5)
+
+// ... Seu componente AppContent
 
 const App: FunctionalComponent = () => (
   <LocaleRouter>
@@ -1069,7 +771,8 @@ export default App;
 
 ```jsx fileName="src/app.jsx" codeFormat="esm"
 import { LocaleRouter } from "./components/LocaleRouter";
-// ... Seu componente AppContent (definido no Passo 5)
+
+// ... Seu componente AppContent
 
 const App = () => (
   <LocaleRouter>
@@ -1082,7 +785,8 @@ export default App;
 
 ```jsx fileName="src/app.cjsx" codeFormat="commonjs"
 const { LocaleRouter } = require("./components/LocaleRouter");
-// ... Seu componente AppContent (definido no Passo 5)
+
+// ... Seu componente AppContent
 
 const App = () => (
   <LocaleRouter>
@@ -1093,47 +797,12 @@ const App = () => (
 module.exports = App;
 ```
 
-Em paralelo, você também pode usar o `intlayerProxy` para adicionar roteamento no lado do servidor à sua aplicação. Este plugin detectará automaticamente o locale atual com base na URL e definirá o cookie de locale apropriado. Se nenhum locale for especificado, o plugin determinará o locale mais adequado com base nas preferências de idioma do navegador do usuário. Se nenhum locale for detectado, ele redirecionará para o locale padrão.
-
-```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
-import { defineConfig } from "vite";
-import preact from "@preact/preset-vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [preact(), intlayer(), intlayerProxy()],
-});
-```
-
-```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
-import { defineConfig } from "vite";
-import preact from "@preact/preset-vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [preact(), intlayer(), intlayerProxy()],
-});
-```
-
-```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
-const { defineConfig } = require("vite");
-const preact = require("@preact/preset-vite");
-const { intlayer, intlayerProxy } = require("vite-intlayer");
-
-// https://vitejs.dev/config/
-module.exports = defineConfig({
-  plugins: [preact(), intlayer(), intlayerProxy()],
-});
-```
-
 ### (Opcional) Passo 8: Alterar a URL quando o idioma mudar
 
-Para alterar a URL quando o locale mudar, você pode usar a prop `onLocaleChange` fornecida pelo hook `useLocale`. Em paralelo, você pode usar `useLocation` e `route` do `preact-iso` para atualizar o caminho da URL.
+Para alterar a URL quando o locale mudar, você pode usar a prop `onLocaleChange` fornecida pelo hook `useLocale`. Em paralelo, você pode usar o método `route` do `useLocation` do `preact-iso` para atualizar o caminho da URL.
 
 ```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
-import { useLocation, route } from "preact-iso";
+import { useLocation } from "preact-iso";
 import {
   Locales,
   getHTMLTextDir,
@@ -1144,13 +813,12 @@ import { useLocale } from "preact-intlayer";
 import type { FunctionalComponent } from "preact";
 
 const LocaleSwitcher: FunctionalComponent = () => {
-  const location = useLocation();
+  const { url, route } = useLocation();
   const { locale, availableLocales, setLocale } = useLocale({
     onLocaleChange: (newLocale) => {
-      const currentFullPath = location.url; // preact-iso fornece a URL completa
       // Construir a URL com o locale atualizado
       // Exemplo: /es/about?foo=bar
-      const pathWithLocale = getLocalizedUrl(currentFullPath, newLocale);
+      const pathWithLocale = getLocalizedUrl(url, newLocale);
 
       // Atualizar o caminho da URL
       route(pathWithLocale, true); // true para substituir
@@ -1163,7 +831,7 @@ const LocaleSwitcher: FunctionalComponent = () => {
       <div id="localePopover" popover="auto">
         {availableLocales.map((localeItem) => (
           <a
-            href={getLocalizedUrl(location.url, localeItem)}
+            href={getLocalizedUrl(url, localeItem)}
             hreflang={localeItem}
             aria-current={locale === localeItem ? "page" : undefined}
             onClick={(e) => {
@@ -1200,7 +868,7 @@ export default LocaleSwitcher;
 ```
 
 ```jsx fileName="src/components/LocaleSwitcher.jsx" codeFormat="esm"
-import { useLocation, route } from "preact-iso";
+import { useLocation } from "preact-iso";
 import {
   Locales,
   getHTMLTextDir,
@@ -1208,14 +876,12 @@ import {
   getLocalizedUrl,
 } from "intlayer";
 import { useLocale } from "preact-intlayer";
-import { h } from "preact"; // Para JSX
 
 const LocaleSwitcher = () => {
-  const location = useLocation();
+  const { url, route } = useLocation();
   const { locale, availableLocales, setLocale } = useLocale({
     onLocaleChange: (newLocale) => {
-      const currentFullPath = location.url;
-      const pathWithLocale = getLocalizedUrl(currentFullPath, newLocale);
+      const pathWithLocale = getLocalizedUrl(url, newLocale);
       route(pathWithLocale, true);
     },
   });
@@ -1226,7 +892,7 @@ const LocaleSwitcher = () => {
       <div id="localePopover" popover="auto">
         {availableLocales.map((localeItem) => (
           <a
-            href={getLocalizedUrl(location.url, localeItem)}
+            href={getLocalizedUrl(url, localeItem)}
             hreflang={localeItem}
             aria-current={locale === localeItem ? "page" : undefined}
             onClick={(e) => {
@@ -1254,7 +920,7 @@ export default LocaleSwitcher;
 ```
 
 ```jsx fileName="src/components/LocaleSwitcher.cjsx" codeFormat="commonjs"
-const { useLocation, route } = require("preact-iso");
+const { useLocation } = require("preact-iso");
 const {
   Locales,
   getHTMLTextDir,
@@ -1262,45 +928,51 @@ const {
   getLocalizedUrl,
 } = require("intlayer");
 const { useLocale } = require("preact-intlayer");
-const { h } = require("preact"); // Para JSX
 
 const LocaleSwitcher = () => {
-  const location = useLocation();
+  const { url, route } = useLocation();
   const { locale, availableLocales, setLocale } = useLocale({
     onLocaleChange: (newLocale) => {
-      const currentFullPath = location.url;
-      const pathWithLocale = getLocalizedUrl(currentFullPath, newLocale);
+      const pathWithLocale = getLocalizedUrl(url, newLocale);
       route(pathWithLocale, true);
     },
   });
 
-  return (
-    <div>
-      <button popovertarget="localePopover">{getLocaleName(locale)}</button>
-      <div id="localePopover" popover="auto">
-        {availableLocales.map((localeItem) => (
-          <a
-            href={getLocalizedUrl(location.url, localeItem)}
-            hreflang={localeItem}
-            aria-current={locale === localeItem ? "page" : undefined}
-            onClick={(e) => {
+  return h(
+    "div",
+    {},
+    h("button", { popovertarget: "localePopover" }, getLocaleName(locale)),
+    h(
+      "div",
+      { id: "localePopover", popover: "auto" },
+      availableLocales.map((localeItem) =>
+        h(
+          "a",
+          {
+            href: getLocalizedUrl(url, localeItem),
+            hreflang: localeItem,
+            "aria-current": locale === localeItem ? "page" : undefined,
+            onClick: (e) => {
               e.preventDefault();
               setLocale(localeItem);
-            }}
-            key={localeItem}
-          >
-            <span>{localeItem}</span>
-            <span>{getLocaleName(localeItem, localeItem)}</span>
-            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {getLocaleName(localeItem, locale)}
-            </span>
-            <span dir="ltr" lang={Locales.ENGLISH}>
-              {getLocaleName(localeItem, Locales.ENGLISH)}
-            </span>
-          </a>
-        ))}
-      </div>
-    </div>
+            },
+            key: localeItem,
+          },
+          h("span", {}, localeItem),
+          h("span", {}, getLocaleName(localeItem, localeItem)),
+          h(
+            "span",
+            { dir: getHTMLTextDir(localeItem), lang: localeItem },
+            getLocaleName(localeItem, locale)
+          ),
+          h(
+            "span",
+            { dir: "ltr", lang: Locales.ENGLISH },
+            getLocaleName(localeItem, Locales.ENGLISH)
+          )
+        )
+      )
+    )
   );
 };
 
@@ -1309,22 +981,9 @@ module.exports = LocaleSwitcher;
 
 > Referências da documentação:
 >
-> > - [`useLocale` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/react-intlayer/useLocale.md) (API é similar para `preact-intlayer`)
->
-> - [`getLocaleName` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/intlayer/getLocaleName.md)
-> - [`getLocalizedUrl` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/intlayer/getLocalizedUrl.md)
-> - [`getHTMLTextDir` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/intlayer/getHTMLTextDir.md)
-> - Atributo [`hreflang`](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
-> - Atributo [`lang`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes/lang)
-> - Atributo [`dir`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes/dir)
-> - Atributo [`aria-current`](https://developer.mozilla.org/pt-BR/docs/Web/Accessibility/ARIA/Attributes/aria-current)
-> - [API Popover](https://developer.mozilla.org/pt-BR/docs/Web/API/Popover_API) la.org/en-US/docs/Web/HTML/Global_attributes/dir)> - [atributo `aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)> - [API Popover](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+> > - [Hook `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/react-intlayer/useLocale.md) (API é semelhante para `preact-intlayer`)> - [Hook `getLocaleName`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/intlayer/getLocaleName.md)> - [Hook `getLocalizedUrl`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/intlayer/getLocalizedUrl.md)> - [Hook `getHTMLTextDir`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/intlayer/getHTMLTextDir.md)> - [Atributo `hreflang`](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)> - [Atributo `lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)> - [Atributo `dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)> - [Atributo `aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)> - [API Popover](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
 
-Abaixo está o **Passo 9** atualizado com explicações adicionais e exemplos de código refinados:
-
----
-
-### (Opcional) Passo 9: Alterar os atributos de idioma e direção do HTML
+### (Opcional) Passo 9: Alternar os atributos de idioma e direção do HTML
 
 Quando sua aplicação suporta múltiplos idiomas, é crucial atualizar os atributos `lang` e `dir` da tag `<html>` para corresponder ao locale atual. Fazer isso garante:
 
@@ -1469,213 +1128,192 @@ const App = () => (
 module.exports = App;
 ```
 
-Ao aplicar essas alterações, sua aplicação irá:
-
-- Garantir que o atributo **language** (`lang`) reflita corretamente a localidade atual, o que é importante para SEO e comportamento do navegador.
-- Ajustar a **direção do texto** (`dir`) de acordo com a localidade, melhorando a legibilidade e usabilidade para idiomas com ordens de leitura diferentes.
-- Proporcionar uma experiência mais **acessível**, pois as tecnologias assistivas dependem desses atributos para funcionar de forma otimizada.
-
-### (Opcional) Passo 10: Criando um Componente de Link Localizado
+### (Opcional) Passo 10: Criando um componente de link localizado
 
-Para garantir que a navegação da sua aplicação respeite o idioma atual, você pode criar um componente `Link` personalizado. Esse componente adiciona automaticamente o prefixo do idioma atual às URLs internas.
+Para garantir que a navegação da sua aplicação respeite o locale atual, você pode criar um componente `Link` personalizado. Este componente prefixa automaticamente as URLs internas com o idioma atual.
 
-Esse comportamento é útil por várias razões:
+Este comportamento é útil por vários motivos:
 
-- **SEO e Experiência do Usuário**: URLs localizadas ajudam os motores de busca a indexar corretamente páginas específicas por idioma e fornecem aos usuários conteúdo no idioma preferido.
-- **Consistência**: Ao usar um link localizado em toda a sua aplicação, você garante que a navegação permaneça dentro do idioma atual, evitando mudanças inesperadas de idioma.
-- **Manutenção**: Centralizar a lógica de localização em um único componente simplifica o gerenciamento das URLs.
+- **SEO e Experiência do Usuário**: URLs localizadas ajudam os motores de busca a indexar corretamente as páginas específicas por idioma e fornecem aos usuários conteúdo no idioma de sua preferência.
+- **Consistência**: Ao usar um link localizado em toda a sua aplicação, você garante que a navegação permaneça dentro do locale atual, evitando mudanças inesperadas de idioma.
+- **Manutenibilidade**: Centralizar a lógica de localização em um único componente simplifica a gestão das URLs.
 
-Para Preact com `preact-iso`, as tags `<a>` padrão são tipicamente usadas para navegação, e o `preact-iso` gerencia o roteamento. Se você precisar de navegação programática ao clicar (por exemplo, para executar ações antes de navegar), pode usar a função `route` do `useLocation`. Aqui está como você pode criar um componente de âncora personalizado que localiza URLs:
+Abaixo está a implementação de um componente `Link` localizado em Preact:
 
-```tsx fileName="src/components/LocalizedLink.tsx" codeFormat="typescript"
+```tsx fileName="src/components/Link.tsx" codeFormat="typescript"
 import { getLocalizedUrl } from "intlayer";
-import { useLocale, useLocation, route } from "preact-intlayer"; // Assumindo que useLocation e route podem ser do preact-iso via preact-intlayer se reexportados, ou importar diretamente
-// Se não for reexportado, importe diretamente: import { useLocation, route } from "preact-iso";
-import type { JSX } from "preact"; // Para HTMLAttributes
-import { forwardRef } from "preact/compat"; // Para encaminhar refs
+import { useLocale } from "preact-intlayer";
+import { forwardRef } from "preact/compat";
+import type { JSX } from "preact";
 
-export interface LocalizedLinkProps extends JSX.HTMLAttributes<HTMLAnchorElement> {
+export interface LinkProps extends JSX.HTMLAttributes<HTMLAnchorElement> {
   href: string;
-  replace?: boolean; // Opcional: para substituir o estado do histórico
 }
 
 /**
- * Função utilitária para verificar se uma URL é externa.
- * Se a URL começar com http:// ou https://, é considerada externa.
+ * Função utilitária para verificar se uma URL dada é externa.
+ * Se a URL começar com http:// ou https://, ela é considerada externa.
  */
 export const checkIsExternalLink = (href?: string): boolean =>
   /^https?:\/\//.test(href ?? "");
 
 /**
  * Um componente Link personalizado que adapta o atributo href com base no locale atual.
- * Para links internos, ele usa `getLocalizedUrl` para prefixar a URL com a localidade (por exemplo, /fr/about).
- * Isso garante que a navegação permaneça dentro do mesmo contexto de localidade.
- * Ele usa uma tag <a> padrão, mas pode disparar a navegação no lado do cliente usando o `route` do preact-iso.
+ * Para links internos, ele usa `getLocalizedUrl` para prefixar a URL com o locale (ex: /fr/about).
+ * Isso garante que a navegação permaneça dentro do mesmo contexto de locale.
  */
-export const LocalizedLink = forwardRef<HTMLAnchorElement, LocalizedLinkProps>(
-  ({ href, children, onClick, replace = false, ...props }, ref) => {
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ href, children, ...props }, ref) => {
     const { locale } = useLocale();
-    const location = useLocation(); // do preact-iso
     const isExternalLink = checkIsExternalLink(href);
 
+    // Se o link for interno e um href válido for fornecido, obtenha a URL localizada.
     const hrefI18n =
       href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
 
-    const handleClick = (event: JSX.TargetedMouseEvent<HTMLAnchorElement>) => {
-      if (onClick) {
-        onClick(event);
-      }
-      if (
-        !isExternalLink &&
-        href && // Garantir que href está definido
-        event.button === 0 && // Clique esquerdo
-        !event.metaKey &&
-        !event.ctrlKey &&
-        !event.shiftKey &&
-        !event.altKey && // Verificação padrão de modificadores
-        !props.target // Não direcionando para uma nova aba/janela
-      ) {
-        event.preventDefault();
-        if (location.url !== hrefI18n) {
-          // Navegar apenas se a URL for diferente
-          route(hrefI18n, replace); // Usar a rota do preact-iso
-        }
-      }
-    };
-
     return (
-      <a href={hrefI18n} ref={ref} onClick={handleClick} {...props}>
+      <a href={hrefI18n} ref={ref} {...props}>
         {children}
       </a>
     );
   }
 );
+
+Link.displayName = "Link";
 ```
 
-```jsx fileName="src/components/LocalizedLink.jsx" codeFormat="esm"
+```jsx fileName="src/components/Link.jsx" codeFormat="esm"
 import { getLocalizedUrl } from "intlayer";
 import { useLocale } from "preact-intlayer";
-import { useLocation, route } from "preact-iso"; // Importar de preact-iso
 import { forwardRef } from "preact/compat";
-import { h } from "preact"; // Para JSX
 
+/**
+ * Função utilitária para verificar se uma URL dada é externa.
+ * Se a URL começar com http:// ou https://, ela é considerada externa.
+ */
 export const checkIsExternalLink = (href) => /^https?:\/\//.test(href ?? "");
 
-export const LocalizedLink = forwardRef(
-  ({ href, children, onClick, replace = false, ...props }, ref) => {
-    const { locale } = useLocale();
-    const location = useLocation();
-    const isExternalLink = checkIsExternalLink(href);
+/**
+ * Um componente Link personalizado que adapta o atributo href com base no locale atual.
+ * Para links internos, ele usa `getLocalizedUrl` para prefixar a URL com o locale (ex: /fr/about).
+ * Isso garante que a navegação permaneça dentro do mesmo contexto de locale.
+ */
+export const Link = forwardRef(({ href, children, ...props }, ref) => {
+  const { locale } = useLocale();
+  const isExternalLink = checkIsExternalLink(href);
 
-    const hrefI18n =
-      href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
+  // Se o link for interno e um href válido for fornecido, obtenha a URL localizada.
+  const hrefI18n =
+    href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
 
-    const handleClick = (event) => {
-      if (onClick) {
-        onClick(event);
-      }
-      if (
-        !isExternalLink &&
-        href &&
-        event.button === 0 &&
-        !event.metaKey &&
-        !event.ctrlKey &&
-        !event.shiftKey &&
-        !event.altKey &&
-        !props.target
-      ) {
-        event.preventDefault();
-        if (location.url !== hrefI18n) {
-          route(hrefI18n, replace);
-        }
-      }
-    };
+  return (
+    <a href={hrefI18n} ref={ref} {...props}>
+      {children}
+    </a>
+  );
+});
 
-    return (
-      <a href={hrefI18n} ref={ref} onClick={handleClick} {...props}>
-        {children}
-      </a>
-    );
-  }
-);
+Link.displayName = "Link";
 ```
 
-```jsx fileName="src/components/LocalizedLink.cjsx" codeFormat="commonjs"
+```jsx fileName="src/components/Link.cjsx" codeFormat="commonjs"
 const { getLocalizedUrl } = require("intlayer");
 const { useLocale } = require("preact-intlayer");
-const { useLocation, route } = require("preact-iso"); // Importado de preact-iso
 const { forwardRef } = require("preact/compat");
-const { h } = require("preact"); // Para JSX
 
+/**
+ * Função utilitária para verificar se uma URL dada é externa.
+ * Se a URL começar com http:// ou https://, ela é considerada externa.
+ */
 const checkIsExternalLink = (href) => /^https?:\/\//.test(href ?? "");
 
-const LocalizedLink = forwardRef(
-  ({ href, children, onClick, replace = false, ...props }, ref) => {
-    const { locale } = useLocale();
-    const location = useLocation();
-    const isExternalLink = checkIsExternalLink(href);
-
-    const hrefI18n =
-      href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
-
-    const handleClick = (event) => {
-      if (onClick) {
-        onClick(event);
-      }
-      if (
-        !isExternalLink &&
-        href &&
-        event.button === 0 &&
-        !event.metaKey &&
-        !event.ctrlKey &&
-        !event.shiftKey &&
-        !event.altKey &&
-        !props.target
-      ) {
-        event.preventDefault();
-        if (location.url !== hrefI18n) {
-          route(hrefI18n, replace);
-        }
-      }
-    };
+/**
+ * Um componente Link personalizado que adapta o atributo href com base no locale atual.
+ * Para links internos, ele usa `getLocalizedUrl` para prefixar a URL com o locale (ex: /fr/about).
+ * Isso garante que a navegação permaneça dentro do mesmo contexto de locale.
+ */
+const Link = forwardRef(({ href, children, ...props }, ref) => {
+  const { locale } = useLocale();
+  const isExternalLink = checkIsExternalLink(href);
+
+  // Se o link for interno e um href válido for fornecido, obtenha a URL localizada.
+  const hrefI18n =
+    href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
+
+  return h(
+    "a",
+    {
+      href: hrefI18n,
+      ref: ref,
+      ...props,
+    },
+    children
+  );
+});
 
-    return (
-      <a href={hrefI18n} ref={ref} onClick={handleClick} {...props}>
-        {children}
-      </a>
-    );
-  }
-);
+Link.displayName = "Link";
 
-module.exports = { LocalizedLink, checkIsExternalLink };
+module.exports = { Link, checkIsExternalLink };
 ```
 
 #### Como Funciona
 
-- **Detecção de Links Externos**:  
-  A função auxiliar `checkIsExternalLink` determina se uma URL é externa. Links externos permanecem inalterados.
-- **Recuperando a Localização Atual**:  
-  O hook `useLocale` fornece a localização atual.
+- **Detectando Links Externos**:  
+  A função auxiliar `checkIsExternalLink` determina se uma URL é externa. Links externos permanecem inalterados porque não precisam de localização.
+- **Recuperando o Locale Atual**:  
+  O hook `useLocale` fornece o locale atual (ex: `fr` para francês).
 - **Localizando a URL**:  
-  Para links internos, `getLocalizedUrl` adiciona o prefixo da localização atual à URL.
-- **Navegação no Lado do Cliente**:
-  A função `handleClick` verifica se o link é interno e se a navegação padrão deve ser evitada. Se for o caso, ela usa a função `route` do `preact-iso` (obtida via `useLocation` ou importada diretamente) para realizar a navegação no lado do cliente. Isso proporciona um comportamento semelhante a SPA sem recarregamentos completos da página.
+  Para links internos (ou seja, não externos), o `getLocalizedUrl` é usado para prefixar automaticamente a URL com o locale atual. Isso significa que, se o seu usuário estiver em francês, passar `/about` como o `href` o transformará em `/fr/about`.
 - **Retornando o Link**:  
-  O componente retorna um elemento `<a>` com a URL localizada e o manipulador de clique personalizado.
+  O componente retorna um elemento `<a>` com a URL localizada, garantindo que a navegação seja consistente com o locale.
+
+### (Opcional) Passo 11: Renderizar Markdown e HTML
+
+O Intlayer suporta a renderização de conteúdo Markdown e HTML no Preact.
+
+Você pode personalizar a renderização de conteúdo Markdown e HTML usando o método `.use()`. Este método permite que você substitua a renderização padrão de tags específicas.
+
+```tsx
+import { useIntlayer } from "preact-intlayer";
+
+const { myMarkdownContent, myHtmlContent } = useIntlayer("my-component");
+
+// ...
+
+return (
+  <div>
+    {/* Renderização básica */}
+    {myMarkdownContent}
+
+    {/* Renderização personalizada para Markdown */}
+    {myMarkdownContent.use({
+      h1: (props) => <h1 style={{ color: "red" }} {...props} />,
+    })}
+
+    {/* Renderização básica para HTML */}
+    {myHtmlContent}
+
+    {/* Renderização personalizada para HTML */}
+    {myHtmlContent.use({
+      b: (props) => <strong style={{ color: "blue" }} {...props} />,
+    })}
+  </div>
+);
+```
 
 ### Configurar TypeScript
 
-O Intlayer usa a ampliação de módulos para aproveitar os benefícios do TypeScript e tornar sua base de código mais robusta.
+O Intlayer usa aumento de módulo para obter benefícios do TypeScript e tornar sua base de código mais forte.
 
 ![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
 ![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
-Garanta que sua configuração do TypeScript inclua os tipos gerados automaticamente.
+Certifique-se de que sua configuração do TypeScript inclua os tipos autogerados.
 
 ```json5 fileName="tsconfig.json"
 {
-  // ... Suas configurações existentes do TypeScript
+  // ... Suas configurações de TypeScript existentes
   "compilerOptions": {
     // ...
     "jsx": "react-jsx",
@@ -1683,34 +1321,34 @@ Garanta que sua configuração do TypeScript inclua os tipos gerados automaticam
     // ...
   },
   "include": [
-    // ... Suas configurações existentes do TypeScript
-    ".intlayer/**/*.ts", // Inclua os tipos gerados automaticamente
+    // ... Suas configurações de TypeScript existentes
+    ".intlayer/**/*.ts", // Inclua os tipos autogerados
   ],
 }
 ```
 
-> Certifique-se de que seu `tsconfig.json` esteja configurado para Preact, especialmente `jsx` e `jsxImportSource` ou `jsxFactory`/`jsxFragmentFactory` para versões antigas do Preact, caso não esteja usando os padrões do `preset-vite`.
+> Certifique-se de que seu `tsconfig.json` esteja configurado para o Preact, especialmente `jsx` e `jsxImportSource` ou `jsxFactory`/`jsxFragmentFactory` para versões antigas do Preact, se não estiver usando os padrões do `preset-vite`.
 
 ### Configuração do Git
 
-É recomendado ignorar os arquivos gerados pelo Intlayer. Isso permite que você evite comitar esses arquivos no seu repositório Git.
+Recomenda-se ignorar os arquivos gerados pelo Intlayer. Isso permite que você evite comitá-los em seu repositório Git.
 
-Para isso, você pode adicionar as seguintes instruções ao seu arquivo `.gitignore`:
+Para fazer isso, você pode adicionar as seguintes instruções ao seu arquivo `.gitignore`:
 
 ```plaintext
-# Ignorar os arquivos gerados pelo Intlayer
+# Ignore the files generated by Intlayer
 .intlayer
 ```
 
-### Extensão VS Code
+### Extensão do VS Code
 
 Para melhorar sua experiência de desenvolvimento com o Intlayer, você pode instalar a extensão oficial **Intlayer VS Code Extension**.
 
-[Instalar no VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+[Instalar a partir do VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-Esta extensão oferece:
+Esta extensão fornece:
 
-- **Autocompletar** para chaves de tradução.
+- **Autocomplemento** para chaves de tradução.
 - **Detecção de erros em tempo real** para traduções ausentes.
 - **Visualizações inline** do conteúdo traduzido.
 - **Ações rápidas** para criar e atualizar traduções facilmente.