docs: improve doc (#385)

* doc(vite_tabs): add tabs for js/ts selection

* doc(vite_tabs): add more js/ts tabs, unified order (ts first), added filename as comments in code pieces

Author: danielart

packages/docs/api-reference/functions/notFound.md

@@ -12,7 +12,11 @@ The `notFound` function allows you to render the [`404 page`](#404-page) within
 
 Invoking the `notFound()` function throws a `NotFoundError` error and terminates rendering of the route segment in which it was thrown.
 
-```jsx filename="src/pages/user/[id].tsx"
+:::tabs key:language
+==js
+
+```js
+//src/pages/user/[id].jsx
 import type { RequestContext } from "brisa";
 import { notFound } from "brisa";
 
@@ -22,7 +26,7 @@ async function fetchUser(id) {
   return res.json();
 }
 
-export default async function UserProfile({}, req: RequestContext) {
+export default async function UserProfile({}, req) {
   const user = await fetchUser(req.route.params.id);
 
   if (!user) {
@@ -33,17 +37,45 @@ export default async function UserProfile({}, req: RequestContext) {
 }
 ```
 
+==ts
+
+```ts
+//src/pages/user/[id].tsx
+import type { RequestContext } from "brisa";
+import { notFound } from "brisa";
+
+type UserType = {
+  //...
+}
+
+async function fetchUser(id: number | string) {
+  const res = await fetch("https://...");
+  if (!res.ok) return undefined;
+  return res.json();
+}
+
+export default async function UserProfile({}, req: RequestContext) {
+  const user: UserType = await fetchUser(req.route.params.id);
+
+  if (!user) {
+    notFound();
+  }
+
+  // ...
+}
+```
+
 Useful to control response status during streaming:
 
 - **Before response streaming** (`middleware`, `responseHeaders`): It's returning the response with 404 status and the 404 page
 - **During response streaming** (`layout`, `page`, `components`): Adds the `meta` tag with `noindex`, stop rendering the page and sends a client script to replace the page to the 404 page. This redirect is for UX to display the 404 content, here the bots will no longer see that because it has the noindex. However, this soft redirect that is done on the client does not change the browsing history and does receive the 404 status. The browsers normally cache very well the pages that return status 404.
 - **During a [server action](/building-your-application/data-management/server-actions):** (server events captured with actions): as the rendering has already been done and it is a post-render action, the 404 in an action acts similarly as in the middle of the streaming. The same happens if in the action instead of calling `notFound()` directly you do a rerender and the component calls `notFound()`.
 
-#### Parameters:
+#### Parameters
 
 - `void`. _It does not support parameters._
 
-#### Returns:
+#### Returns
 
 - `Never` does not require you to use `return notFound()` due to using the TypeScript [`never`](https://www.typescriptlang.org/docs/handbook/2/functions.html#never) type.
 

packages/docs/building-your-application/building/index.md

@@ -20,7 +20,10 @@ Running `brisa build` generates an optimized version of your application for pro
 
 Brisa can be deployed to any hosting provider that supports Bun. Ensure your `package.json` has the `"build"` and `"start"` scripts:
 
-```json filename="package.json"
+:::tabs key:language
+==package.json
+
+```json
 {
   "scripts": {
     "dev": "brisa dev",
@@ -30,6 +33,8 @@ Brisa can be deployed to any hosting provider that supports Bun. Ensure your `pa
 }
 ```
 
+:::
+
 Then, run `bun run build` to build your application. Finally, run `bun run start` to start the Bun server. This server supports all Brisa features.
 
 ## App Strategy (Static, Server, Desktop, Android, iOS)

packages/docs/building-your-application/components-details/web-components.md

@@ -861,7 +861,11 @@ Within the web components you can use other web components by writing them as if
 
 Example consuming a Web Component inside a Web Component:
 
-```tsx filename="src/web-components/using-web-component.tsx" switcher
+:::tabs key:language
+== ts
+
+```tsx
+//src/web-components/using-web-component.tsx
 import { WebContext } from "brisa";
 
 type Props = { name: string };
@@ -879,7 +883,10 @@ export function ServerComponent(
 }
 ```
 
-```js filename="src/web-components/using-web-component.js" switcher
+==js
+
+```jsx
+//src/web-components/using-web-component.js
 import { WebContext } from "brisa";
 
 export function ServerComponent({ name, children }, webContext) {
@@ -892,13 +899,19 @@ export function ServerComponent({ name, children }, webContext) {
 }
 ```
 
+:::
+
 ## Using Web Components in Server Components
 
 We are not going to use any import, we can consume it directly as another HTML tag.
 
 Example consuming a Web Component inside a Server Component:
 
-```tsx filename="src/components/using-web-component.tsx" switcher
+:::tabs key:language
+== ts
+
+```tsx
+//src/components/using-web-component.tsx
 import { RequestContext } from "brisa";
 import AnotherServerComponent from "./another";
 
@@ -919,7 +932,10 @@ export function ServerComponent(
 }
 ```
 
-```js filename="src/components/using-web-component.js" switcher
+== js
+
+```jsx
+//src/components/using-web-component.js
 import AnotherServerComponent from "./another";
 
 export function ServerComponent({ name }, requestContext) {
@@ -934,6 +950,8 @@ export function ServerComponent({ name }, requestContext) {
 }
 ```
 
+:::
+
 ## Using Server Components in Web Components
 
 It is not possible to use Server Components inside Web Components **directly** (with an import). However, it **is possible** to add Server Components within Web Components. But it can only be done through the prop [**children**](#children) or using [**slots**](#children).
@@ -1108,9 +1126,10 @@ All native web components can be located inside `web-components/_native` and con
 Example:
 
 :::tabs key:language
-==web-components/\_native/some-native.ts
+==ts
 
 ```tsx
+//web-components/\_native/some-native.ts
 export default class SomeNative extends HTMLElement {
   constructor() {
     super();

packages/docs/building-your-application/configuring/base-path.md

@@ -9,9 +9,10 @@ To deploy a Brisa application under a sub-path of a domain you can use the `base
 `basePath` allows you to set a path prefix for the application. For example, to use `/docs` instead of `''` (an empty string, the default), open `brisa.config.ts` and add the `basePath` config:
 
 :::tabs key:language
-==brisa.config.ts
+==ts
 
 ```ts
+//brisa.config.ts
 import type { Configuration } from "brisa";
 
 export default {

packages/docs/building-your-application/routing/api-routes.md

@@ -53,25 +53,38 @@ The request that arrives is an extension of the native [Request](https://develop
 
 You can read the `Request` body using the standard Web API methods:
 
-```ts filename="src/api/items/route.ts" switcher
+:::tabs key:language
+==ts
+
+```ts
+//src/api/items/route.ts
 export async function POST(request: RequestContext) {
   const res = await request.json();
   return new Response(JSON.stringify({ res }));
 }
 ```
 
-```js filename="src/api/items/route.js" switcher
+==js
+
+```js
+//src/api/items/route.js
 export async function POST(request) {
   const res = await request.json();
   return new Response(JSON.stringify({ res }));
 }
 ```
 
+:::
+
 ## Request Body FormData
 
 You can read the `FormData` using the standard Web API methods:
 
-```ts filename="src/api/items/route.ts" switcher
+:::tabs key:language
+==ts
+
+```ts
+//src/api/items/route.ts
 export async function POST(request: RequestContext) {
   const formData = await request.formData();
   const name = formData.get("name");
@@ -80,7 +93,10 @@ export async function POST(request: RequestContext) {
 }
 ```
 
-```js filename="src/api/items/route.js" switcher
+==js
+
+```js
+//src/api/items/route.js
 export async function POST(request) {
   const formData = await request.formData();
   const name = formData.get("name");
@@ -89,6 +105,8 @@ export async function POST(request) {
 }
 ```
 
+:::
+
 Since `formData` data are all strings, you may want to use [`zod-form-data`](https://www.npmjs.com/zod-form-data) to validate the request and retrieve data in the format you prefer (e.g. `number`).
 
 ## Response