+ `port?`
+
+
+
+
+
+
+
+ The port where the `React` development server is running.
+
+
+
+
+
+ `number`
+ `3000`
+
+
+
+
+
+ `types?`
+
+
+
+
+
+
+
+ The definitions of allowed types for routes.
+ These types are used to enforce the defined contract and make it easier for your code editor to suggest these types.
+
+ #### Example
+ ```ts
+ {
+ strict: true,
+ ids: ['main', 'about'],
+ queryKeys: ['id', 'name'],
+ }
+ ```
+
+ #### Types
+ ```ts
+ {
+ strict?: boolean
+ ids?: Array
+ queryKeys?: Array
+ }
+ ```
+
+
+
+
+
+ `object`
+
+
+
+
+
+### `types`
+
+
+
+
+ Property
+ Type
+ Default
+
+
+
+
+
+
+
+ `strict?`
+
+
+
+
+
+
+
+ If `true`, then you will need to use one of the ids defined in `types.ids` and one of the keys in `types.queryKeys` when using the `registerRoute` method and the `Route` component,
+ otherwise any `string`/`property` will be allowed.
+
+
+
+
+
+ `boolean`
+ `true`
+
+
+
+
+
+ `ids?`
+
+
+
+
+
+
+
+ The ids that will represent your windows/routes, think of them as the `basename` of a route.
+
+ If `types.strict` set in the `createElectronRouter` function is `true` (default is `true`),
+ then you will need to use one of the defined ids, if you have explicitly set `types.strict` to `false`,
+ any string will be allowed.
+
+
+
+
+
+ `Array`
+
+
+
+
+
+
+ `queryKeys?`
+
+
+
+
+
+
+
+ The keys of the `query strings` that will be passed to the window and used by the global `window.URLSearchParams` object or by the `useSearchParams` hook from the `react-router-dom` package.
+
+ If `types.strict` set in the `createElectronRouter` function is `true` (default is `true`),
+ then you will need to use one of the defined query keys, if you have explicitly set `types.strict` to `false`,
+ any `string/property` will be allowed.
+
+
+
diff --git a/apps/content/docs/en/api/main/register-route.mdx b/apps/content/docs/en/api/main/register-route.mdx
new file mode 100644
index 0000000..8d78694
--- /dev/null
+++ b/apps/content/docs/en/api/main/register-route.mdx
@@ -0,0 +1,146 @@
+---
+title: registerRoute
+description: Registers a window as a route of the application.
+---
+
+The `registerRoute` method returned by the createElectronRouter function registers a window as a route of the application.
+This means that only the content defined from the corresponding route in the renderer process for that window will be displayed in it.
+
+## Basic Example
+
+```ts
+ registerRoute({
+ id: 'main',
+ browserWindow: mainWindow,
+ htmlFile: path.join(__dirname, '../renderer/index.html'),
+ })
+```
+
+## API Reference
+
+
+
+
+ Property
+ Type
+ Default
+
+
+
+
+
+
+
+ `id`
+
+
+
+
+
+
+
+ The id that will represent your window/route, think of it as the `basename` of a route.
+
+ If `types.strict` defined in the `createElectronRouter` function is `true` (the default is `true`),
+ then you will need to use one of the ids defined there, if you have explicitly defined `types.strict` as `false`,
+ any string will be allowed.
+
+
+
+
+
+ `string`
+ `main`
+
+
+
+
+
+ `query?`
+
+
+
+
+
+
+
+ The `query strings` in object format that will be passed to the window and used by the global `window.URLSearchParams` object or by the `useSearchParams` hook from the `react-router-dom` package.
+
+ If you have defined `types.queryKeys` and `types.strict` is `true` (default is `true`) in the `createElectronRouter` function, then you will need to use one of the query keys defined there as a property of that object,
+ if you have explicitly set `types.strict` to `false`, any property will be allowed.
+
+
+
+
+
+ `object`
+
+
+
+
+
+
+ `port?`
+
+
+
+
+
+
+
+ The port where the `React` development server is running.
+
+ If the port was set in the `createElectronRouter` function, then you do not need to set this property,
+ if you do, it will be used instead of the port set in the `createElectronRouter` function.
+
+
+
+
+
+ `number`
+ The port defined in the `createElectronRouter` function or `3000`
+
+
+
+
+
+ `htmlFile`
+
+
+
+
+
+
+
+ The path to the HTML file that will be displayed in the window.
+
+
+
+
+
+ `string`
+
+
+
+
+
+
+ `browserWindow`
+
+
+
+
+
+
+
+ The instance of the window to be displayed.
+
+
+
+
+
+ `Electron.BrowserWindow`
+
+
+
+
diff --git a/apps/content/docs/en/api/renderer/router.mdx b/apps/content/docs/en/api/renderer/router.mdx
new file mode 100644
index 0000000..a4e79f1
--- /dev/null
+++ b/apps/content/docs/en/api/renderer/router.mdx
@@ -0,0 +1,101 @@
+---
+title: Router
+description: Manages the application routes in the renderer process.
+---
+
+The `Router` component returned by the createElectronRouter function is responsible for managing the routes from the corresponding windows in the renderer process.
+
+Internally, it uses the `RouterProvider` and the `createHashRouter` function from the `react-router-dom` package and applies the necessary logic for the corresponding windows to be displayed correctly.
+
+## Basic example
+
+```tsx
+ } errorElement={}>
+ }
+ />
+
+ } />
+
+ }
+ />
+```
+
+## API Reference
+
+
+
+
+ Property
+ Type
+
+
+
+
+
+
+
+ `[id]`
+
+
+
+
+
+
+
+ The id that matches what was set for your window in the main process, think of it as the `basename` of a route.
+
+ If `types.strict` set in the `createElectronRouter` function is `true` (default is `true`),
+ then you will need to use one of the ids defined there, if you have explicitly set `types.strict` to `false`,
+ any string will be allowed.
+
+ ```tsx
+ } />
+ }
+ about={
+ } />
+ }
+ />
+ ```
+
+
+
+
+
+
+ Route
+
+
+
+
+
+
+ `_providerProps?`
+
+
+
+
+
+
+
+ Overrides the internal properties of `RouterProvider` from the `react-router-dom` package used by `Electron Router DOM`.
+
+ ```tsx
+ _providerProps={{
+ fallbackElement:
Loading...
,
+ }}
+ ```
+
+
+
+
+
+ `object`
+
+
+
diff --git a/apps/content/docs/en/api/settings.mdx b/apps/content/docs/en/api/settings.mdx
new file mode 100644
index 0000000..6ed41d9
--- /dev/null
+++ b/apps/content/docs/en/api/settings.mdx
@@ -0,0 +1,22 @@
+---
+title: settings
+description: The router settings.
+---
+
+The `settings` object returned by the createElectronRouter function has the same structure and values used in it.
+
+> You can use the `settings` object to reuse the settings in other parts of the application or as types using `typeof settings` in `TypeScript`.
+
+## Tipos
+
+```ts
+ {
+ port: number // default: 3000
+
+ types: {
+ strict: boolean // default: true
+ ids: string[]
+ queryKeys: string[]
+ }
+ }
+```
diff --git a/apps/content/docs/en/guides/context-api.mdx b/apps/content/docs/en/guides/context-api.mdx
new file mode 100644
index 0000000..d6347d4
--- /dev/null
+++ b/apps/content/docs/en/guides/context-api.mdx
@@ -0,0 +1,46 @@
+---
+title: Context API
+description: How to use the Context API with Electron Router DOM
+links:
+ source: https://github.com/remix-run/react-router/blob/9afac15d8cbe30b37d0f9e8b89c9f1e430dfe35a/examples/auth/src/App.tsx#L43-L46
+---
+
+The Context API with `Electron Router DOM` is pretty simple to use, but there are some caveats you need to be aware of!
+
+The `Provider` must be used in the `element` prop, so you can't use it at the same level of a `Route`, because `React Router DOM` requires a` Route`, otherwise you will get the following error:
+
+
+ 🚫 Error: [AppProvider] is not a `` component.
+
+
+ All component children of `` must be a `` or ``
+
+
+
+### Example of right usage
+
+```tsx {4, 6}
+
+
+
+ }
+/>
+```
+
+or you can just pass the `Router` as children of your `Provider`:
+
+```tsx {1, 10}
+
+ }
+ />
+ }
+ />
+
+```
diff --git a/apps/content/docs/en/guides/migration/migrating-from-v1-to-v2.mdx b/apps/content/docs/en/guides/migration/migrating-from-v1-to-v2.mdx
new file mode 100644
index 0000000..beb601d
--- /dev/null
+++ b/apps/content/docs/en/guides/migration/migrating-from-v1-to-v2.mdx
@@ -0,0 +1,104 @@
+---
+title: Migrating from v1 to v2
+description: Learn how to migrate from Electron Router DOM v1 to v2
+---
+
+
+ Updating dependencies
+
+ ```shell
+ npm i react-router-dom@latest electron-router-dom@latest
+ ```
+
+ Remember, the minimum versions required for `Electron Router DOM v2` are:
+ - electron: **`>=17.0`**
+ - react: **`>=18.0`**
+ - react-router-dom: **`>=6.22.3`**
+
+ Creating the `electron-router-dom.ts` file
+
+ In the `src` folder of your project, create a `lib` folder and inside it the `electron-router-dom.ts` file.
+ It is through this new file that you will expose the `registerRoute` method and the `Router` component to your application.
+
+
+
+ - The registerRoute method will be used in the `main process` to register a window as a route of the application.
+ - The Router component will be used in the `renderer process` to navigate between the windows/routes of the application.
+
+
+
+ ```typescript title="src/lib/electron-router-dom.ts"
+ import { createElectronRouter } from 'electron-router-dom'
+
+ export const { Router, registerRoute } = createElectronRouter({
+ port: 4927, // the port of your React server is running on (optional, default port is 3000)
+
+ types: {
+ /**
+ * The ids of the windows of your application, think of these ids as the basenames of the routes
+ * this new way will allow your editor's intelisense to help you know which ids are available to use
+ * both in the main and renderer process
+ */
+ ids: ['main'],
+ },
+ })
+ ```
+
+ Updating the main process
+
+ ```diff title="src/renderer/routes.tsx"
+ - import { createFileRoute, createURLRoute } from 'electron-router-dom'
+ + import { registerRoute } from '../lib/electron-router-dom'
+ ```
+ With the removal of the `createFileRoute` and `createURLRoute` functions from the `electron-router-dom` package, the process has become simpler and more intuitive.
+ Now, you only need to import the `registerRoute` function from the `electron-router-dom.ts` file you created earlier.
+
+ What was done this way before:
+
+ ```ts title="src/main/index.ts"
+ const devServerURL = createURLRoute('http://localhost:3000', id)
+
+ const fileRoute = createFileRoute(
+ join(__dirname, '../renderer/index.html'),
+ id
+ )
+
+ process.env.NODE_ENV === 'development'
+ ? window.loadURL(devServerURL)
+ : window.loadFile(...fileRoute)
+ ```
+ Now, it will be done like this:
+
+ ```ts title="src/main/index.ts"
+ registerRoute({
+ id: 'main',
+ browserWindow: window,
+ htmlFile: path.join(__dirname, '../renderer/index.html'),
+ })
+ ```
+
+ You no longer need to worry about the logic of loading the development server URL or the application HTML file, `Electron Router DOM` will take care of it for you.
+
+ Updating imports in the rendering process
+
+ Now the `Route` component is no longer exported from the `electron-router-dom` package, but from the `react-router-dom` package.
+ In addition to simplifying the use of `Electron Router DOM`, this decision will help cause less confusion about what should be imported from each package.
+
+ ```diff title="src/renderer/routes.tsx"
+ + import { Route } from 'react-router-dom'
+
+ - import { Router, Route } from 'electron-router-dom'
+ + import { Router } from '../lib/electron-router-dom'
+ ```
+
+
+
+
+ 🎉 You are now ready to use `Electron Router DOM v2`
+
+
+
+ To get the most out of the library,
+ we recommend you to read the rest of the documentation or look at the existing examples!
+
+
diff --git a/apps/content/docs/en/guides/troubleshooting.mdx b/apps/content/docs/en/guides/troubleshooting.mdx
new file mode 100644
index 0000000..9e9c54c
--- /dev/null
+++ b/apps/content/docs/en/guides/troubleshooting.mdx
@@ -0,0 +1,18 @@
+---
+title: Troubleshooting
+description: Troubleshooting common issues with Electron Router DOM
+links:
+ source: https://electron-vite.org/guide/troubleshooting#distribution
+---
+
+If you're having trouble with `Electron Router DOM`, here are some common issues and solutions.
+
+## Distribution
+
+### A JavaScript error occurred in the main process -> Error: Cannot find module 'XXX'
+
+The following solution is from [Electron Vite docs](https://electron-vite.org/guide/troubleshooting), but it's the same for most of the Electron apps:
+
+Dependent modules are not packaged into the application. To solve this:
+- If the related module is installed in `devDependencies`, please reinstall it in `dependencies`. This is because packaging tools (e.g. `electron-builder`, `electron-forge`) usually exclude modules in `devDependencies`.
+- If you are using the `pnpm package manager`, you’ll need to add a file `.npmrc` with `shamefully-hoist=true` in project root directory (in order for your dependencies to be bundled correctly). Also, you need to delete `node_modules` and `pnpm-lock.yaml`, then reinstall the modules. Of course you can switch to other package manager (e.g. `npm`, `yarn`) to avoid this problem.
diff --git a/apps/content/docs/en/guides/typescript.mdx b/apps/content/docs/en/guides/typescript.mdx
new file mode 100644
index 0000000..2c03da6
--- /dev/null
+++ b/apps/content/docs/en/guides/typescript.mdx
@@ -0,0 +1,99 @@
+---
+title: TypeScript
+description: Boosting the use of TypeScript with Electron Router DOM
+---
+
+## Typing URLSearchParams globally
+
+To get global typing of `URLSearchParams` in the `get` method of the `queryKeys` you specified, you can use the following approach using the `settings` object returned by the `createElectronRouter` function:
+
+```ts title="src/lib/electron-router-dom.ts"
+import { createElectronRouter, type Query } from 'electron-router-dom'
+
+export const { Router, registerRoute, settings } = createElectronRouter({
+ port: 4927,
+
+ types: {
+ ids: ['main'],
+ queryKeys: ['name', 'version'],
+ },
+})
+
+declare global {
+ interface URLSearchParams {
+ get(name: Query.Keys): Query.Return
+ }
+}
+```
+
+Or you can type all methods:
+
+```ts title="src/lib/electron-router-dom.ts"
+import { createElectronRouter, type Query } from 'electron-router-dom'
+
+export const { Router, registerRoute, settings } = createElectronRouter({
+ port: 4927,
+
+ types: {
+ ids: ['main'],
+ queryKeys: ['name', 'version'],
+ },
+})
+
+declare global {
+ type Types = typeof settings
+
+ interface URLSearchParams {
+ get(name: Query.Keys): Query.Return
+ set(name: Query.Keys, value: string): void
+ append(name: Query.Keys, value: string): void
+ delete(name: Query.Keys, value?: string): void
+ has(name: Query.Keys, value?: string): boolean
+ forEach(
+ callbackfn: (
+ value: string,
+ key: Query.Keys,
+ parent: URLSearchParams
+ ) => void
+ ): void
+ getAll(name: Query.Keys): string[]
+ keys(): IterableIterator>
+ entries(): IterableIterator<[Query.Keys, string]>
+ }
+}
+```
+
+With this, you will be able to take advantage of editor's intellisense in both the global `URLSearchParams` object and the `useSearchParams` hook of the `react-router-dom` library.
+
+## Typing a factory with router ids and queryKeys
+
+Assuming you have a factory to create windows in Electron, and you want to type it with the ids and queryKeys you specified in the `createElectronRouter` function,
+you can use the following approach using the `registerRoute` method returned by it:
+
+```ts
+import { registerRoute } from './lib/electron-router-dom'
+
+type Route = Parameters[0]
+
+interface WindowProps extends Electron.BrowserWindowConstructorOptions {
+ id: Route['id']
+ query?: Route['query']
+}
+
+export function createWindow({ id, query, ...options }: WindowProps) {
+ const window = new BrowserWindow(options)
+
+ registerRoute({
+ id,
+ query,
+ browserWindow: window,
+ htmlFile: path.join(__dirname, '../renderer/index.html'),
+ })
+
+ return window
+}
+```
+
+With this, when calling the `createWindow` function, you will have the `id` property and the `query` object properly typed.
+
+
diff --git a/apps/content/docs/en/index.mdx b/apps/content/docs/en/index.mdx
new file mode 100644
index 0000000..0824db9
--- /dev/null
+++ b/apps/content/docs/en/index.mdx
@@ -0,0 +1,122 @@
+---
+title: Introduction
+description: A quick introduction to Electron Router DOM
+---
+
+If you've ever tried using the `react-router-dom` library with `Electron`,
+you've probably had trouble getting it to work properly,
+both in development and production environments.
+
+From this, the `Electron Router DOM` library was born,
+which aims to facilitate the integration of `react-router-dom` with `Electron` and window routing,
+where each window can have its own routing.
+
+## Features
+
+- 🚀 Ready for production and development environments
+- 📱 Window routing support
+- 🌐 Support for `query strings` sent from the main process to the renderer
+- 🧬 Type-safe API designed to provide good DX
+
+## Installation
+
+In your terminal and in the root folder of your application, run:
+
+```shell
+npm i electron-router-dom
+```
+
+## Creating your first routing
+
+
+ Create the `electron-router-dom.ts` file
+
+ In your project's `src` folder, create a `lib` folder and within it the `electron-router-dom.ts` (or `.js`) file.
+ It is through this file that you will expose the `registerRoute` method and the `Router` component to your application.
+
+
+
+ - The registerRoute method will be used in the `main process` to register a window as an application route.
+ - The Router component will be used in the `renderer process` to navigate between the application's windows/routes.
+
+
+
+ ```typescript title="src/lib/electron-router-dom.ts"
+ import { createElectronRouter } from 'electron-router-dom'
+
+ export const { Router, registerRoute } = createElectronRouter({
+ port: 4927, // the port of your React server is running on (optional, default port is 3000)
+
+ types: {
+ /**
+ * The ids of the windows of your application, think of these ids as the basenames of the routes
+ * this new way will allow your editor's intelisense to help you know which ids are available to use
+ * both in the main and renderer process
+ */
+ ids: ['main'],
+ },
+ })
+ ```
+
+ Update the main process
+
+ Import the `registerRoute` method from the `electron-router-dom.ts` file you created earlier:
+
+ ```ts title="src/main/index.ts"
+ import { registerRoute } from '../lib/electron-router-dom'
+ ```
+
+ And in the function where you create your application window, after creation, register the route by passing your window to `registerRoute`:
+
+ ```ts title="src/main/index.ts"
+ registerRoute({
+ id: 'main',
+ browserWindow: window,
+ htmlFile: path.join(__dirname, '../renderer/index.html'),
+ })
+ ```
+
+ Note that you no longer need to worry about the logic of loading the development server URL or the application HTML file, the `Electron Router DOM` will take care of that for you.
+
+ Update the renderer process
+
+ Import the `Router` component from the `electron-router-dom.ts` file you created earlier:
+
+ ```ts title="src/renderer/routes.tsx"
+ import { Router } from '../lib/electron-router-dom'
+ ```
+
+ And with that you will need to pass your routes to the `Router` component, see an example:
+
+ ```tsx title="src/renderer/routes.tsx"
+ import { Router } from 'electron-router-dom'
+ import { Route } from 'react-router-dom'
+
+ import { MainScreen, AboutScreen, SearchScreen } from './screens'
+
+ export function AppRoutes() {
+ return (
+
+ } />
+ } />
+
+ }
+ about={} />}
+ />
+ )
+ }
+ ```
+
+
+
+
+ 🎉 You are now ready to use `Electron Router DOM`
+
+
+
+ To get the most out of the library,
+ we recommend you to read the rest of the documentation or look at the existing examples!
+
+
diff --git a/apps/content/docs/pt/api/create-electron-router.mdx b/apps/content/docs/pt/api/create-electron-router.mdx
new file mode 100644
index 0000000..c586676
--- /dev/null
+++ b/apps/content/docs/pt/api/create-electron-router.mdx
@@ -0,0 +1,221 @@
+---
+title: createElectronRouter
+description: Cria um roteador para a sua aplicação Electron
+---
+
+A função `createElectronRouter` cria um roteador para a sua aplicação Electron.
+A partir dela, você poderá conectar os processos principal (`main process`) e renderizador (`renderer process`), permitindo a integração entre eles.
+
+## Exemplo básico
+
+```ts
+import { createElectronRouter } from 'electron-router-dom'
+
+export const { Router, registerRoute } = createElectronRouter({
+ port: 4927,
+
+ types: {
+ ids: ['main', 'about'],
+ queryKeys: ['id', 'name'],
+ },
+})
+```
+
+## Referência da API
+
+
+
+
+ Propriedade
+ Tipo
+ Padrão
+
+
+
+
+
+
+
+ `port?`
+
+
+
+
+
+
+
+ A porta onde o servidor de desenvolvimento `React` está rodando.
+
+
+
+
+
+ `number`
+ `3000`
+
+
+
+
+
+ `types?`
+
+
+
+
+
+
+
+ As definições de tipos permitidos para as rotas.
+ Esse tipos são usados para garantir o contrato definido e facilitar a sugestão desse tipos pelo seu editor de código.
+
+ #### Exemplo
+ ```ts
+ {
+ strict: true,
+ ids: ['main', 'about'],
+ queryKeys: ['id', 'name'],
+ }
+ ```
+
+ #### Tipos
+ ```ts
+ {
+ strict?: boolean
+ ids?: Array
+ queryKeys?: Array
+ }
+ ```
+
+
+
+
+
+ `object`
+
+
+
+
+
+### `types`
+
+
+
+
+ Propriedade
+ Tipo
+ Padrão
+
+
+
+
+
+
+
+ `strict?`
+
+
+
+
+
+
+
+ Se `true`, então você precisará usar um dos ids definidos em `types.ids` e uma das chaves `types.queryKeys` na utilização do método `registerRoute` e do componente `Route`,
+ caso contrário, qualquer `string`/`propriedade` será permitida.
+
+
+
+
+
+ `boolean`
+ `true`
+
+
+
+
+
+ `ids?`
+
+
+
+
+
+
+
+ Os ids que representarão as suas janelas/rotas, pense neles como o `basename` de uma rota.
+
+ Se `types.strict` definido na função `createElectronRouter` for `true` (o padrão é `true`),
+ então você precisará usar um dos ids definidos, caso tenha explicitamente definido o `types.strict` como `false`,
+ qualquer string será permitida.
+
+
+
+
+
+ `Array`
+
+
+
+
+
+
+ `queryKeys?`
+
+
+
+
+
+
+
+ As chaves das `query strings` que serão passadas para a janela e usadas pelo objeto global `window.URLSearchParams` ou pelo hook `useSearchParams` do pacote `react-router-dom`.
+
+ Se `types.strict` definido na função `createElectronRouter` for `true` (o padrão é `true`),
+ então você precisará usar um dos query keys definidos, caso tenha explicitamente definido o `types.strict` como `false`,
+ qualquer `string/propriedade` será permitida.
+
+
+
diff --git a/apps/content/docs/pt/api/main/register-route.mdx b/apps/content/docs/pt/api/main/register-route.mdx
new file mode 100644
index 0000000..407c9fa
--- /dev/null
+++ b/apps/content/docs/pt/api/main/register-route.mdx
@@ -0,0 +1,145 @@
+---
+title: registerRoute
+description: Registra uma janela como uma rota da aplicação.
+---
+
+O método `registerRoute` retornado pela função createElectronRouter registra uma janela como uma rota da aplicação.
+Isso significa que somente o conteúdo definido a partir da rota correspondente no processo renderizador (`renderer process`) para essa janela será exibido nela.
+
+## Exemplo básico
+
+```ts
+ registerRoute({
+ id: 'main',
+ browserWindow: mainWindow,
+ htmlFile: path.join(__dirname, '../renderer/index.html'),
+ })
+```
+
+## Referência da API
+
+
+
+
+ Propriedade
+ Tipo
+ Padrão
+
+
+
+
+
+
+
+ `id`
+
+
+
+
+
+
+
+ O id que representará a sua janela/rota, pense nele como o `basename` de uma rota.
+
+ Se `types.strict` definido na função `createElectronRouter` for `true` (o padrão é `true`),
+ então você precisará usar um dos ids definidos lá, caso tenha explicitamente definido o `types.strict` como `false`,
+ qualquer string será permitida.
+
+
+
+
+
+ `string`
+ `main`
+
+
+
+
+
+ `query?`
+
+
+
+
+
+
+
+ As `query strings` no formato de objeto que serão passadas para a janela e usadas pelo objeto global `window.URLSearchParams` ou pelo hook `useSearchParams` do pacote `react-router-dom`.
+
+ Caso tenha definido `types.queryKeys` e o `types.strict` estiver `true` (o padrão é `true`) na função `createElectronRouter`, então você precisará usar um dos query keys definidos lá como propriedade desse objeto, caso tenha explicitamente definido o `types.strict` como `false`, qualquer propriedade será permitida.
+
+
+
+
+
+ `object`
+
+
+
+
+
+
+ `port?`
+
+
+
+
+
+
+
+ A porta onde o servidor de desenvolvimento `React` está rodando.
+
+ Se a porta foi definida na função `createElectronRouter`, então você não precisa definir essa propriedade,
+ caso defina, ela será usada em vez da porta definida na função `createElectronRouter`.
+
+
+
+
+
+ `number`
+ A porta definida na função `createElectronRouter` ou `3000`
+
+
+
+
+
+ `htmlFile`
+
+
+
+
+
+
+
+ O caminho para o arquivo HTML que será exibido na janela.
+
+
+
+
+
+ `string`
+
+
+
+
+
+
+ `browserWindow`
+
+
+
+
+
+
+
+ A instância da janela que será exibida.
+
+
+
+
+
+ `Electron.BrowserWindow`
+
+
+
+
diff --git a/apps/content/docs/pt/api/renderer/router.mdx b/apps/content/docs/pt/api/renderer/router.mdx
new file mode 100644
index 0000000..befce1e
--- /dev/null
+++ b/apps/content/docs/pt/api/renderer/router.mdx
@@ -0,0 +1,101 @@
+---
+title: Router
+description: Gerencia as rotas da aplicação no processo renderizador.
+---
+
+O componente `Router` retornado pela função createElectronRouter é responsável por gerenciar as rotas a partir das janelas correspondentes no processo de renderização.
+
+Internamente, ele usa o `RouterProvider` e a função `createHashRouter` do pacote `react-router-dom` e aplica a lógica necessária para que as janelas correspondentes sejam exibidas corretamente.
+
+## Exemplo básico
+
+```tsx
+ } errorElement={}>
+ }
+ />
+
+ } />
+
+ }
+ />
+```
+
+## Referência da API
+
+
+
+
+ Propriedade
+ Tipo
+
+
+
+
+
+
+
+ `[id]`
+
+
+
+
+
+
+
+ O id correspondente ao que foi definido para a sua janela no processo principal (`main process`), pense nele como o `basename` de uma rota.
+
+ Se `types.strict` definido na função `createElectronRouter` for `true` (o padrão é `true`),
+ então você precisará usar um dos ids definidos lá, caso tenha explicitamente definido o `types.strict` como `false`,
+ qualquer string será permitida.
+
+ ```tsx
+ } />
+ }
+ about={
+ } />
+ }
+ />
+ ```
+
+
+
+
+
+
+ Route
+
+
+
+
+
+
+ `_providerProps?`
+
+
+
+
+
+
+
+ Sobrepõe as propriedades internas do `RouterProvider` do pacote `react-router-dom` usado pelo `Electron Router DOM`.
+
+ ```tsx
+ _providerProps={{
+ fallbackElement:
Loading...
,
+ }}
+ ```
+
+
+
+
+
+ `object`
+
+
+
diff --git a/apps/content/docs/pt/api/settings.mdx b/apps/content/docs/pt/api/settings.mdx
new file mode 100644
index 0000000..39617d3
--- /dev/null
+++ b/apps/content/docs/pt/api/settings.mdx
@@ -0,0 +1,22 @@
+---
+title: settings
+description: As configurações do roteador.
+---
+
+O objeto `settings` retornado pela função createElectronRouter possui a mesma estrutura e valores utilizados nela.
+
+> Você pode usar o objeto `settings` para reaproveitar as configurações em outros locais da aplicação ou como tipagem usando `typeof settings` no `TypeScript`.
+
+## Tipos
+
+```ts
+ {
+ port: number // padrão: 3000
+
+ types: {
+ strict: boolean // padrão: true
+ ids: string[]
+ queryKeys: string[]
+ }
+ }
+```
diff --git a/apps/content/docs/pt/guides/context-api.mdx b/apps/content/docs/pt/guides/context-api.mdx
new file mode 100644
index 0000000..2019ea7
--- /dev/null
+++ b/apps/content/docs/pt/guides/context-api.mdx
@@ -0,0 +1,46 @@
+---
+title: Context API
+description: Como usar a Context API com Electron Router DOM
+links:
+ source: https://github.com/remix-run/react-router/blob/9afac15d8cbe30b37d0f9e8b89c9f1e430dfe35a/examples/auth/src/App.tsx#L43-L46
+---
+
+A Context API com `Electron Router DOM` é bastante simples de usar, mas existem alguns pontos de atenção dos quais você precisa estar ciente!
+
+O `Provider` deve ser usado na propriedade `element`, então você não pode usá-lo no mesmo nível de um `Route`, pois o `React Router DOM` requer um `Route`, caso contrário você receberá o seguinte erro:
+
+
+ 🚫 Error: [AppProvider] is not a `` component.
+
+
+ All component children of `` must be a `` or ``
+
+
+
+### Exemplo de uso correto
+
+```tsx {4, 6}
+
+
+
+ }
+/>
+```
+
+ou você pode simplesmente passar o `Router` como filho do seu `Provider`:
+
+```tsx {1, 10}
+
+ }
+ />
+ }
+ />
+
+```
diff --git a/apps/content/docs/pt/guides/migration/migrating-from-v1-to-v2.mdx b/apps/content/docs/pt/guides/migration/migrating-from-v1-to-v2.mdx
new file mode 100644
index 0000000..d99ca51
--- /dev/null
+++ b/apps/content/docs/pt/guides/migration/migrating-from-v1-to-v2.mdx
@@ -0,0 +1,104 @@
+---
+title: Migrando da v1 para a v2
+description: Aprenda como migrar do Electron Router DOM v1 para a v2
+---
+
+
+ Atualizando as dependências
+
+ ```shell
+ npm i react-router-dom@latest electron-router-dom@latest
+ ```
+
+ Lembrando, que, as versões mínimas necessárias para o `Electron Router DOM v2` são:
+ - electron: **`>=17.0`**
+ - react: **`>=18.0`**
+ - react-router-dom: **`>=6.22.3`**
+
+ Criando o arquivo `electron-router-dom.ts`
+
+ Na pasta `src` do seu projeto, crie uma pasta `lib` e dentro dela o arquivo `electron-router-dom.ts`.
+ É, através desse novo arquivo que você irá expor o método `registerRoute` e o componente `Router` para a sua aplicação.
+
+
+
+ - O método registerRoute será usada no `main process` para registrar uma janela como uma rota da aplicação.
+ - O componente Router será usado no `renderer process` para navegar entre as janelas/rotas da aplicação.
+
+
+
+ ```typescript title="src/lib/electron-router-dom.ts"
+ import { createElectronRouter } from 'electron-router-dom'
+
+ export const { Router, registerRoute } = createElectronRouter({
+ port: 4927, // a porta em que o seu servidor React está rodando (opcional, porta padrão é 3000)
+
+ types: {
+ /**
+ * Os ids das janelas da sua aplicação, pense nesses ids como os basenames das rotas
+ * essa nova forma permitirá que o intelisense do seu editor te ajude a saber quais ids estão disponíveis
+ * tanto no main quanto no renderer process
+ */
+ ids: ['main'],
+ },
+ })
+ ```
+
+ Atualizando o processo principal
+
+ ```diff title="src/renderer/routes.tsx"
+ - import { createFileRoute, createURLRoute } from 'electron-router-dom'
+ + import { registerRoute } from '../lib/electron-router-dom'
+ ```
+ Com a remoção das funções `createFileRoute` e `createURLRoute` do pacote `electron-router-dom`, o processo ficou mais simples e intuitivo.
+ Agora, você só precisa importar a função `registerRoute` do arquivo `electron-router-dom.ts` que você criou anteriormente.
+
+ O que antes era feito dessa forma:
+
+ ```ts title="src/main/index.ts"
+ const devServerURL = createURLRoute('http://localhost:3000', id)
+
+ const fileRoute = createFileRoute(
+ join(__dirname, '../renderer/index.html'),
+ id
+ )
+
+ process.env.NODE_ENV === 'development'
+ ? window.loadURL(devServerURL)
+ : window.loadFile(...fileRoute)
+ ```
+ Agora, será feito dessa:
+
+ ```ts title="src/main/index.ts"
+ registerRoute({
+ id: 'main',
+ browserWindow: window,
+ htmlFile: path.join(__dirname, '../renderer/index.html'),
+ })
+ ```
+
+ Você não precisa mais se preocupar com a lógica de carregar a URL do servidor de desenvolvimento ou o arquivo HTML da aplicação, o `Electron Router DOM` cuidará disso para você.
+
+ Atualizando as importações no processo de renderização
+
+ Agora o componente `Route` não é mais exportado do pacote `electron-router-dom`, mas sim do pacote `react-router-dom`.
+ Além de simplificar o uso do `Electron Router DOM`, essa decisão ajudará a causar menos confusão sobre o que deverá ser importado de cada pacote.
+
+ ```diff title="src/renderer/routes.tsx"
+ + import { Route } from 'react-router-dom'
+
+ - import { Router, Route } from 'electron-router-dom'
+ + import { Router } from '../lib/electron-router-dom'
+ ```
+
+
+
+
+ 🎉 Agora você está pronto para usar o `Electron Router DOM v2`
+
+
+
+ Para extrair o potencial máximo da biblioteca,
+ recomendamos que você leia o restante da documentação ou veja os exemplos existentes!
+
+
diff --git a/apps/content/docs/pt/guides/troubleshooting.mdx b/apps/content/docs/pt/guides/troubleshooting.mdx
new file mode 100644
index 0000000..0dfe238
--- /dev/null
+++ b/apps/content/docs/pt/guides/troubleshooting.mdx
@@ -0,0 +1,18 @@
+---
+title: Resolução de problemas
+description: Resolução de problemas comuns com o Electron Router DOM
+links:
+ source: https://electron-vite.org/guide/troubleshooting#distribution
+---
+
+Se você está tendo problemas com o `Electron Router DOM`, aqui estão alguns problemas comuns e suas soluções.
+
+## Distribuição
+
+### A JavaScript error occurred in the main process -> Error: Cannot find module 'XXX'
+
+A seguinte solução é dos [documentos do Electron Vite](https://electron-vite.org/guide/troubleshooting), mas é a mesma para a maioria dos aplicativos Electron:
+
+Módulos dependentes não são empacotados no aplicativo. Para resolver isso:
+- Se o módulo relacionado estiver instalado em `devDependencies`, reinstale-o em `dependencies`. Isso ocorre porque as ferramentas de empacotamento (por exemplo, `electron-builder`, `electron-forge`) geralmente excluem módulos em `devDependencies`.
+- Se você estiver usando o `gerenciador de pacotes pnpm`, você precisará adicionar um arquivo `.npmrc` com `shamefully-hoist=true` no diretório raiz do projeto (para que suas dependências sejam empacotadas corretamente). Além disso, você precisa excluir `node_modules` e `pnpm-lock.yaml`, então reinstalar os módulos. Claro, você pode mudar para outro gerenciador de pacotes (por exemplo, `npm`, `yarn`) para evitar esse problema.
diff --git a/apps/content/docs/pt/guides/typescript.mdx b/apps/content/docs/pt/guides/typescript.mdx
new file mode 100644
index 0000000..4a5ab32
--- /dev/null
+++ b/apps/content/docs/pt/guides/typescript.mdx
@@ -0,0 +1,97 @@
+---
+title: TypeScript
+description: Potencializando o uso do TypeScript com o Electron Router DOM
+---
+
+## Tipando globalmente a URLSearchParams
+
+Para obter a tipagem global da `URLSearchParams` no método `get` das `queryKeys` que especificou, você pode usar a seguinte abordagem utilizando o objeto `settings` retornado pela função `createElectronRouter`:
+
+```ts title="src/lib/electron-router-dom.ts"
+import { createElectronRouter, type Query } from 'electron-router-dom'
+
+export const { Router, registerRoute, settings } = createElectronRouter({
+ port: 4927,
+
+ types: {
+ ids: ['main'],
+ queryKeys: ['name', 'version'],
+ },
+})
+
+declare global {
+ interface URLSearchParams {
+ get(name: Query.Keys): Query.Return
+ }
+}
+```
+
+Ou você pode tipar todos os métodos:
+
+```ts title="src/lib/electron-router-dom.ts"
+import { createElectronRouter, type Query } from 'electron-router-dom'
+
+export const { Router, registerRoute, settings } = createElectronRouter({
+ port: 4927,
+
+ types: {
+ ids: ['main'],
+ queryKeys: ['name', 'version'],
+ },
+})
+
+declare global {
+ type Types = typeof settings
+
+ interface URLSearchParams {
+ get(name: Query.Keys): Query.Return
+ set(name: Query.Keys, value: string): void
+ append(name: Query.Keys, value: string): void
+ delete(name: Query.Keys, value?: string): void
+ has(name: Query.Keys, value?: string): boolean
+ forEach(
+ callbackfn: (
+ value: string,
+ key: Query.Keys,
+ parent: URLSearchParams
+ ) => void
+ ): void
+ getAll(name: Query.Keys): string[]
+ keys(): IterableIterator>
+ entries(): IterableIterator<[Query.Keys, string]>
+ }
+}
+```
+
+Com isso, você poderá usufruir do intellisense do editor tanto no objeto global `URLSearchParams` quanto no hook `useSearchParams` da biblioteca `react-router-dom`.
+
+## Tipando uma factory com os ids e queryKeys do roteador
+
+Supondo que você tenha uma factory para criar janelas no Electron, e que você queira tipá-la com os ids e as queryKeys que especificou na função `createElectronRouter`,
+você pode usar a seguinte abordagem utilizando o método `registerRoute` retornado por ela:
+
+```ts
+import { registerRoute } from './lib/electron-router-dom'
+
+type Route = Parameters[0]
+
+interface WindowProps extends Electron.BrowserWindowConstructorOptions {
+ id: Route['id']
+ query?: Route['query']
+}
+
+export function createWindow({ id, query, ...options }: WindowProps) {
+ const window = new BrowserWindow(options)
+
+ registerRoute({
+ id,
+ query,
+ browserWindow: window,
+ htmlFile: path.join(__dirname, '../renderer/index.html'),
+ })
+
+ return window
+}
+```
+
+Com isso, ao chamar a função `createWindow`, você terá a propriedade `id` e o objeto `query` adequadamente tipados.
diff --git a/apps/content/docs/pt/index.mdx b/apps/content/docs/pt/index.mdx
new file mode 100644
index 0000000..6af4c15
--- /dev/null
+++ b/apps/content/docs/pt/index.mdx
@@ -0,0 +1,122 @@
+---
+title: Introdução
+description: Uma rápida introdução ao Electron Router DOM
+---
+
+Se você já tentou usar a biblioteca `react-router-dom` com `Electron`,
+provavelmente enfrentou dificuldades para fazê-lo funcionar corretamente,
+tanto em ambiente de desenvolvimento quanto em produção.
+
+A partir disso, nasceu a biblioteca `Electron Router DOM`,
+que visa facilitar a integração do `react-router-dom` com o `Electron` e o roteamento por janelas,
+onde cada janela pode ter seu próprio roteamento.
+
+## Características
+
+- 🚀 Pronto para ambientes de produção e desenvolvimento
+- 📱 Suporte a roteamento por janelas
+- 🌐 Suporte a `query strings` enviados do processo principal para o renderizador
+- 🧬 API com tipagem segura e pensada para trazer uma boa DX
+
+## Instalação
+
+No seu terminal e na pasta raiz da sua aplicação, execute:
+
+```shell
+npm i electron-router-dom
+```
+
+## Criando o seu primeiro roteamento
+
+
+ Crie o arquivo `electron-router-dom.ts`
+
+ Na pasta `src` do seu projeto, crie uma pasta `lib` e dentro dela o arquivo `electron-router-dom.ts` (ou `.js`).
+ É, através desse arquivo que você irá expor o método `registerRoute` e o componente `Router` para a sua aplicação.
+
+
+
+ - O método registerRoute será usada no `main process` para registrar uma janela como uma rota da aplicação.
+ - O componente Router será usado no `renderer process` para navegar entre as janelas/rotas da aplicação.
+
+
+
+ ```typescript title="src/lib/electron-router-dom.ts"
+ import { createElectronRouter } from 'electron-router-dom'
+
+ export const { Router, registerRoute } = createElectronRouter({
+ port: 4927, // a porta em que o seu servidor React está rodando (opcional, porta padrão é 3000)
+
+ types: {
+ /**
+ * Os ids das janelas da sua aplicação, pense nesses ids como os basenames das rotas
+ * essa nova forma permitirá que o intelisense do seu editor te ajude a saber quais ids estão disponíveis
+ * tanto no main quanto no renderer process
+ */
+ ids: ['main'],
+ },
+ })
+ ```
+
+ Atualize o processo principal
+
+ Importe o método `registerRoute` do arquivo `electron-router-dom.ts` que você criou anteriormente:
+
+ ```ts title="src/main/index.ts"
+ import { registerRoute } from '../lib/electron-router-dom'
+ ```
+
+ E na função em que você cria a janela da sua aplicação, após a criação, registre a rota passando a sua janela para o `registerRoute`:
+
+ ```ts title="src/main/index.ts"
+ registerRoute({
+ id: 'main',
+ browserWindow: window,
+ htmlFile: path.join(__dirname, '../renderer/index.html'),
+ })
+ ```
+
+ Note que você não precisa mais se preocupar com a lógica de carregar a URL do servidor de desenvolvimento ou o arquivo HTML da aplicação, o `Electron Router DOM` cuidará disso para você.
+
+ Atualize o processo de renderização
+
+ Importe o componente `Router` do arquivo `electron-router-dom.ts` que você criou anteriormente:
+
+ ```ts title="src/renderer/routes.tsx"
+ import { Router } from '../lib/electron-router-dom'
+ ```
+
+ E com isso você precisará passar suas rotas para o componente `Router`, veja um exemplo:
+
+ ```tsx title="src/renderer/routes.tsx"
+ import { Router } from 'electron-router-dom'
+ import { Route } from 'react-router-dom'
+
+ import { MainScreen, AboutScreen, SearchScreen } from './screens'
+
+ export function AppRoutes() {
+ return (
+
+ } />
+ } />
+
+ }
+ about={} />}
+ />
+ )
+ }
+ ```
+
+
+
+
+ 🎉 Agora você está pronto para usar o `Electron Router DOM`
+
+
+
+ Para extrair o potencial máximo da biblioteca,
+ recomendamos que você leia o restante da documentação ou veja os exemplos existentes!
+
+
diff --git a/apps/docs/.gitignore b/apps/docs/.gitignore
deleted file mode 100644
index f886745..0000000
--- a/apps/docs/.gitignore
+++ /dev/null
@@ -1,36 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.yarn/install-state.gz
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# env files (can opt-in for commiting if needed)
-.env*
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
diff --git a/apps/docs/README.md b/apps/docs/README.md
deleted file mode 100644
index a98bfa8..0000000
--- a/apps/docs/README.md
+++ /dev/null
@@ -1,36 +0,0 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/apps/docs/app/favicon.ico b/apps/docs/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/apps/docs/app/favicon.ico and /dev/null differ
diff --git a/apps/docs/app/fonts/GeistMonoVF.woff b/apps/docs/app/fonts/GeistMonoVF.woff
deleted file mode 100644
index f2ae185..0000000
Binary files a/apps/docs/app/fonts/GeistMonoVF.woff and /dev/null differ
diff --git a/apps/docs/app/fonts/GeistVF.woff b/apps/docs/app/fonts/GeistVF.woff
deleted file mode 100644
index 1b62daa..0000000
Binary files a/apps/docs/app/fonts/GeistVF.woff and /dev/null differ
diff --git a/apps/docs/app/globals.css b/apps/docs/app/globals.css
deleted file mode 100644
index 9147fcd..0000000
--- a/apps/docs/app/globals.css
+++ /dev/null
@@ -1,39 +0,0 @@
-:root {
- --background: #ffffff;
- --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --background: #0a0a0a;
- --foreground: #ededed;
- }
-}
-
-html,
-body {
- max-width: 100vw;
- overflow-x: hidden;
-}
-
-body {
- color: var(--foreground);
- background: var(--background);
-}
-
-* {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
-}
-
-a {
- color: inherit;
- text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
- html {
- color-scheme: dark;
- }
-}
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
deleted file mode 100644
index 8469537..0000000
--- a/apps/docs/app/layout.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
-import "./globals.css";
-
-const geistSans = localFont({
- src: "./fonts/GeistVF.woff",
- variable: "--font-geist-sans",
-});
-const geistMono = localFont({
- src: "./fonts/GeistMonoVF.woff",
- variable: "--font-geist-mono",
-});
-
-export const metadata: Metadata = {
- title: "Create Next App",
- description: "Generated by create next app",
-};
-
-export default function RootLayout({
- children,
-}: Readonly<{
- children: React.ReactNode;
-}>) {
- return (
-
-
- {children}
-
-
- );
-}
diff --git a/apps/docs/app/page.module.css b/apps/docs/app/page.module.css
deleted file mode 100644
index 3630662..0000000
--- a/apps/docs/app/page.module.css
+++ /dev/null
@@ -1,188 +0,0 @@
-.page {
- --gray-rgb: 0, 0, 0;
- --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
- --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-
- --button-primary-hover: #383838;
- --button-secondary-hover: #f2f2f2;
-
- display: grid;
- grid-template-rows: 20px 1fr 20px;
- align-items: center;
- justify-items: center;
- min-height: 100svh;
- padding: 80px;
- gap: 64px;
- font-synthesis: none;
-}
-
-@media (prefers-color-scheme: dark) {
- .page {
- --gray-rgb: 255, 255, 255;
- --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
- --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
- --button-primary-hover: #ccc;
- --button-secondary-hover: #1a1a1a;
- }
-}
-
-.main {
- display: flex;
- flex-direction: column;
- gap: 32px;
- grid-row-start: 2;
-}
-
-.main ol {
- font-family: var(--font-geist-mono);
- padding-left: 0;
- margin: 0;
- font-size: 14px;
- line-height: 24px;
- letter-spacing: -0.01em;
- list-style-position: inside;
-}
-
-.main li:not(:last-of-type) {
- margin-bottom: 8px;
-}
-
-.main code {
- font-family: inherit;
- background: var(--gray-alpha-100);
- padding: 2px 4px;
- border-radius: 4px;
- font-weight: 600;
-}
-
-.ctas {
- display: flex;
- gap: 16px;
-}
-
-.ctas a {
- appearance: none;
- border-radius: 128px;
- height: 48px;
- padding: 0 20px;
- border: none;
- font-family: var(--font-geist-sans);
- border: 1px solid transparent;
- transition: background 0.2s, color 0.2s, border-color 0.2s;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 16px;
- line-height: 20px;
- font-weight: 500;
-}
-
-a.primary {
- background: var(--foreground);
- color: var(--background);
- gap: 8px;
-}
-
-a.secondary {
- border-color: var(--gray-alpha-200);
- min-width: 180px;
-}
-
-button.secondary {
- appearance: none;
- border-radius: 128px;
- height: 48px;
- padding: 0 20px;
- border: none;
- font-family: var(--font-geist-sans);
- border: 1px solid transparent;
- transition: background 0.2s, color 0.2s, border-color 0.2s;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 16px;
- line-height: 20px;
- font-weight: 500;
- background: transparent;
- border-color: var(--gray-alpha-200);
- min-width: 180px;
-}
-
-.footer {
- font-family: var(--font-geist-sans);
- grid-row-start: 3;
- display: flex;
- gap: 24px;
-}
-
-.footer a {
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.footer img {
- flex-shrink: 0;
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
- a.primary:hover {
- background: var(--button-primary-hover);
- border-color: transparent;
- }
-
- a.secondary:hover {
- background: var(--button-secondary-hover);
- border-color: transparent;
- }
-
- .footer a:hover {
- text-decoration: underline;
- text-underline-offset: 4px;
- }
-}
-
-@media (max-width: 600px) {
- .page {
- padding: 32px;
- padding-bottom: 80px;
- }
-
- .main {
- align-items: center;
- }
-
- .main ol {
- text-align: center;
- }
-
- .ctas {
- flex-direction: column;
- }
-
- .ctas a {
- font-size: 14px;
- height: 40px;
- padding: 0 16px;
- }
-
- a.secondary {
- min-width: auto;
- }
-
- .footer {
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
- }
-}
-
-@media (prefers-color-scheme: dark) {
- .logo {
- filter: invert();
- }
-}
diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx
deleted file mode 100644
index 0284bae..0000000
--- a/apps/docs/app/page.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import Image from "next/image";
-import { Button } from "@repo/ui/button";
-import styles from "./page.module.css";
-
-export default function Home() {
- return (
-
+ )
+}
diff --git a/apps/web/src/components/docs/not-available.tsx b/apps/web/src/components/docs/not-available.tsx
new file mode 100644
index 0000000..18e915a
--- /dev/null
+++ b/apps/web/src/components/docs/not-available.tsx
@@ -0,0 +1,32 @@
+import { defaultLocale } from '@/config/i18n'
+
+const messages = {
+ pt: 'Este conteúdo não está disponível em sua língua ainda',
+ en: 'This content is not available in your language yet',
+ es: 'Este contenido no está disponible en su idioma todavía',
+ fr: "Ce contenu n'est pas encore disponible dans votre langue",
+ de: 'Dieser Inhalt ist noch nicht in Ihrer Sprache verfügbar',
+ it: 'Questo contenuto non è ancora disponibile nella tua lingua',
+ ja: 'このコンテンツはまだあなたの言語で利用できません',
+ ko: '이 콘텐츠는 아직 귀하의 언어로 제공되지 않았습니다',
+ nl: 'Deze inhoud is nog niet beschikbaar in uw taal',
+ pl: 'Ten zasób nie jest jeszcze dostępny w twoim języku',
+ ru: 'Этот контент пока не доступен на вашем языке',
+ zh: '此内容尚未提供您的语言版本',
+} as const
+
+type Locales = keyof typeof messages
+
+type Props = {
+ locale: Locales | (string & {})
+}
+
+export function DocNotAvailableInThisLanguage({ locale }: Props) {
+ const message = messages?.[locale as Locales]
+
+ return (
+
+
+
+
+ 