docs: added more titles (#3694)

* docs: added more titles

* ❤️

packages/docs/src/routes/deployments/azure-swa/index.mdx

@@ -20,7 +20,7 @@ npm run qwik add azure-swa
 
 The adapter will add a new `vite.config.ts` within the `adapters/` directory, and a new entry file will be created, such as:
 
-```
+```shell
 └── adapters/
     └── azure-swa/
         └── vite.config.ts
@@ -42,7 +42,7 @@ npm run build
 
 After installing the integration using `npm run qwik add azure-swa` the project is ready to be deployed to Azure Static Web Apps.
 
-There are two ways to deploy:
+There are three ways to deploy:
 
 1. Deploy with [Static Web Apps CLI](https://azure.github.io/static-web-apps-cli/)
 
@@ -68,18 +68,18 @@ There are two ways to deploy:
 
    The resulting workflow file has to be adapted by adding the following to the "Repository/Build Configurations" block:
 
-   ```
+   ```text /skip_api_build/#b /true/#c
    skip_api_build: true
    ```
 
-   Read the [Azure Static Web Apps quickstart](https://learn.microsoft.com/azure/static-web-apps/get-started-portal?pivots=github) for more information.
+   Checkout [Azure Static Web Apps quickstart](https://learn.microsoft.com/azure/static-web-apps/get-started-portal?pivots=github) for more information.
 
 3. Deploy from any CI system
 
    You can deploy to Azure Static Web Apps with any CI system by setting the environment variable `SWA_CLI_DEPLOYMENT_TOKEN` with the Azure SWA deployment token and the run the following command from your pipeline:
 
-   ```
+   ```shell
    swa deploy ./dist --api-location ./azure-functions --env production
    ```
 
-Notice that you will need an [Azure account](https://signup.azure.com/) in order to complete this step!
+Notice, that you will need an [Azure account](https://signup.azure.com/) in order to complete this step!

packages/docs/src/routes/deployments/cloudflare-pages/index.mdx

@@ -22,7 +22,7 @@ npm run qwik add cloudflare-pages
 
 The adapter will add a new `vite.config.ts` within the `adapters/` directory, and a new entry file will be created, such as:
 
-```
+```shell
 └── adapters/
     └── cloudflare-pages/
         └── vite.config.ts
@@ -56,8 +56,7 @@ Notice that you might need a [Cloudflare account](https://dash.cloudflare.com/si
 
 When the `cloudflare-pages` adapter is added, a new entry file will be created at `src/entry.cloudflare-pages.tsx`. Below is an example of using the built-in middleware within the entry file.
 
-```tsx
-// src/entry.cloudflare-pages.tsx
+```tsx title="src/entry.cloudflare-pages.tsx"
 import { createQwikCity } from '@builder.io/qwik-city/middleware/cloudflare-pages';
 import qwikCityPlan from '@qwik-city-plan';
 import render from './entry.ssr';
@@ -69,7 +68,7 @@ export { onRequest };
 
 The compiled middleware will be built in the `server/` directory and can then be used anywhere in the cloudflare pages `/functions` directory.
 
-```tsx
+```tsx title="/functions/[[path]].ts"
 // export the compiled middleware where cloudflare pages can find it.
 // for example use /functions/[[path]].ts or /functions/_middleware.ts
 // to have qwik city handle all requests.
@@ -112,7 +111,7 @@ In most cases the generated `dist/_routes.json` file is ideal. However, if you n
 
 You may access Cloudflare Page's environment variables in the endpoint method's `platform` param:
 
-```javascript
+```ts
 export const onRequest = async ({ platform }) => {
   const secret = platform['SUPER_SECRET_TOKEN'];
 };

packages/docs/src/routes/deployments/gcp-cloud-run/index.mdx

@@ -38,4 +38,6 @@ You will also need to update the name of your Cloud Run app in the `deploy` scri
 
 You can then run this command to deploy your app:
 
-`npm run deploy`
+```shell
+npm run deploy
+```

packages/docs/src/routes/deployments/netlify-edge/index.mdx

@@ -22,7 +22,7 @@ npm run qwik add netlify-edge
 
 The adapter will add a new `vite.config.ts` within the `adapters/` directory, and a new entry file will be created, such as:
 
-```
+```shell
 └── adapters/
     └── netlify-edge/
         └── vite.config.ts
@@ -64,8 +64,7 @@ Please refer to the Netlify docs for more information on how to deploy your site
 
 When the `netlify-edge` adapter is added, a new entry file will be created at `src/entry.netlify-edge.tsx`. Below is an example of using the built-in middleware within the entry file.
 
-```tsx
-// src/entry.netlify-edge.tsx
+```tsx title="src/entry.netlify-edge.tsx"
 import { createQwikCity } from '@builder.io/qwik-city/middleware/netlify-edge';
 import qwikCityPlan from '@qwik-city-plan';
 import render from './entry.ssr';
@@ -85,7 +84,7 @@ By default, the Netlify Edge adapter will generate a `.netlify/edge-middleware/m
 
 To override the generated manifest, you can [add a declaration](https://docs.netlify.com/edge-functions/declarations/#add-a-declaration) to the `netlify.toml` using the `[[edge_functions]]` config. For example:
 
-```toml
+```toml title="netlify.toml"
 [[edge_functions]]
   path = "/admin"
   function = "auth"
@@ -95,7 +94,7 @@ To override the generated manifest, you can [add a declaration](https://docs.net
 
 [Netlify context](https://docs.netlify.com/edge-functions/api/#netlify-specific-context-object) is available in endpoint method's `platform` param:
 
-```javascript
+```ts
 export const onRequest = async ({ platform }) => {
   platform.log('requested ip:', platform.ip);
 };
@@ -113,7 +112,7 @@ export const onGet: RequestHandlerNetlify = ({ platform }) => {
 
 ### Environment variables
 
-```javascript
+```ts
 export const onRequest = async ({ platform }) => {
   platform.log('Vite env read from .dev file', import.meta.env.VITE_DEV);
   platform.log('netlify serverless env read from Netlify UI or CLI', Deno.env.toObject());
@@ -130,7 +129,7 @@ Previous versions of Qwik City used the `@netlify/vite-plugin-netlify-edge` plug
 
 The updated adapter, using the `npm run qwik add netlify-edge` command, will instead generate a `.netlify/edge-functions/manifest.json` config at build-time. If you would like to use the new adapter, you can remove the `@netlify/vite-plugin-netlify-edge` plugin from the root `vite.config.ts` file, and the root `netlify.toml` file.
 
-```diff
+```diff title="vite.config.ts"
 import { defineConfig } from "vite";
 import { qwikVite } from "@builder.io/qwik/optimizer";
 import { qwikCity } from "@builder.io/qwik-city/vite";
@@ -157,7 +156,7 @@ export default defineConfig(() => {
 
 Remove the catch-all `edge_functions` config from `netlify.toml`
 
-```diff
+```diff title="netlify.toml"
 -[[edge_functions]]
 -path = "/*"
 -function = "entry.netlify-edge"

packages/docs/src/routes/deployments/vercel-edge/index.mdx

@@ -23,7 +23,7 @@ npm run qwik add vercel-edge
 
 The adapter will add a new `vite.config.ts` within the `adapters/` directory, and a new entry file will be created, such as:
 
-```
+```shell
 └── adapters/
     └── vercel-edge/
         └── vite.config.ts
@@ -65,8 +65,7 @@ Please refer to the Vercel docs for more information on how to deploy your site:
 
 When the `vercel-edge` adapter is added, a new entry file will be created at `src/entry.vercel-edge.tsx`. Below is an example of using the built-in middleware within the entry file.
 
-```tsx
-// src/entry.vercel-edge.tsx
+```tsx title="src/entry.vercel-edge.tsx"
 import { createQwikCity } from '@builder.io/qwik-city/middleware/vercel-edge';
 import qwikCityPlan from '@qwik-city-plan';
 import render from './entry.ssr';

packages/docs/src/routes/docs/(qwik)/advanced/custom-build-dir/index.mdx

@@ -15,8 +15,7 @@ In certain cases, sometimes we need to make the build output directory different
 
 Usually with Vite.js we do it like this:
 
-```js
-// vite.config.js
+```ts title="vite.config.ts"
 import { defineConfig } from 'vite';
 import { qwikVite } from '@builder.io/qwik/optimizer';
 import { qwikCity } from '@builder.io/qwik-city/vite';
@@ -51,7 +50,7 @@ However, it will be overridden by the settings of QwikVite() so nothing happens
 
 So instead of changing the settings in Vite.js directly, we just need to change the settings in QwikVite() like this:
 
-```ts
+```ts title="vite.config.ts"
 import { defineConfig } from 'vite';
 import { qwikVite } from '@builder.io/qwik/optimizer';
 import { qwikCity } from '@builder.io/qwik-city/vite';

packages/docs/src/routes/docs/(qwik)/advanced/vite/index.mdx

@@ -20,7 +20,7 @@ After scaffolding a new Qwik project, you'll find a `vite.config.js` file in the
 
 Qwik comes with two plugins that make it easy to use Vite with Qwik and Qwik City.
 
-```js title="vite.config.js"
+```ts title="vite.config.ts"
 import { defineConfig } from 'vite';
 import { qwikCity } from '@builder.io/qwik-city/vite';
 import { qwikVite } from '@builder.io/qwik/optimizer';

packages/docs/src/routes/integrations/partytown/index.mdx

@@ -28,9 +28,7 @@ The previous command updates your app and sets the correct configuration in `vit
 
 It also adds new files inside to your `components` folder.
 
-**/src/root.tsx**
-
-```tsx
+```tsx title="src/root.tsx"
 import { QwikPartytown } from './components/partytown/partytown';
 
 export default component$(() => {

packages/docs/src/routes/integrations/postcss/index.mdx

@@ -25,7 +25,7 @@ This will create a new `postcss.config.js` file at the root of the project with
 - [Autoprefixer](https://github.com/postcss/autoprefixer)
 - [PostCSS Preset Env](https://preset-env.cssdb.org/)
 
-```javascript
+```ts title="postcss.config.js"
 module.exports = {
   plugins: {
     autoprefixer: {},
@@ -45,10 +45,10 @@ If you wish to add a new plugin like [CssNano](https://cssnano.co/) run the foll
 npm install cssnano --save-dev
 ```
 
-```javascript
+```ts title="postcss.config.js"
 module.exports = {
   plugins: {
-    /* previous plugin configuration  */
+    /* previous plugin configuration */
     "cssnano": {
       preset: "default"
     }

packages/docs/src/routes/integrations/react/index.mdx

@@ -114,8 +114,8 @@ export const MUISlider = qwikify$(Slider);
 - Each `MUISlider` is a fully isolated React application, with its own state, lifecycle, etc.
 - Styles will be duplicated
 - State will not be shared
-- [Context](https://reactjs.org/docs/context.html) will not be inherited.
-- Islands will [hydrate](https://beta.reactjs.org/apis/react-dom/client/hydrateRoot) independently
+- [Context](https://react.dev/learn/passing-data-deeply-with-context) will not be inherited.
+- Islands will [hydrate](https://react.dev/reference/react-dom/client/hydrateRoot) independently
 
 ### By default interactivity is disabled
 
@@ -243,7 +243,7 @@ export const FolderList = component$(() => {
 
 ## Adding interactivity
 
-In order to add interactivity, in React terminology we need to [hydrate](https://reactjs.org/docs/react-dom.html#hydrate), usually in React applications this hydration task happens unconditionally at load time, [adding a massive overhead](https://www.builder.io/blog/hydration-is-pure-overhead) and making sites slow.
+In order to add interactivity, in React terminology we need to [hydrate](https://react.dev/reference/react-dom/hydrate), usually in React applications this hydration task happens unconditionally at load time, [adding a massive overhead](https://www.builder.io/blog/hydration-is-pure-overhead) and making sites slow.
 
 Qwik allows you decide when to hydrate your components, by using the `client:` JSX properties, this technique is commonly called partial hydration, popularized by [Astro](https://astro.build/).
 
@@ -385,4 +385,4 @@ The host element is not part of React, meaning that hydration is not necessary t
 
 This will effectively allow you to respond to a click in a [MUI button](https://mui.com/material-ui/react-button/) without downloading a single byte of React code.
 
-Happy hacking!
+🧑‍💻Happy hacking!

packages/docs/src/routes/integrations/styled-vanilla-extract/index.mdx

@@ -31,9 +31,7 @@ After the installation a new route will be created in your project, showcasing t
 
 Please refer to the official docs for more information about [Vanilla Extract](https://vanilla-extract.style/documentation/getting-started).
 
-**styles.css.ts:**
-
-```tsx
+```tsx title="styles.css.ts"
 import { style } from 'styled-vanilla-extract/qwik';
 
 export const blueClass = style({
@@ -44,9 +42,7 @@ export const blueClass = style({
 });
 ```
 
-**component.tsx:**
-
-```tsx
+```tsx title="component.tsx"
 import { blueClass } from './styles.css';
 
 export const Cmp = component$(() => {
@@ -64,9 +60,7 @@ npm run qwik add styled-vanilla-extract
 
 Using the same integration, you have a styled-components powered by Vanilla Extract, use the exported `styled` function to create your components.
 
-**styles.css.ts:**
-
-```tsx
+```tsx title="styles.css.ts"
 import { styled } from 'styled-vanilla-extract/qwik';
 
 export const BlueBox = styled.div`
@@ -77,9 +71,7 @@ export const BlueBox = styled.div`
 `;
 ```
 
-**component.tsx:**
-
-```tsx
+```tsx title="component.tsx"
 import { BlueBox } from './styles.css';
 
 export const Cmp = component$(() => {

packages/docs/src/routes/integrations/tailwind/index.mdx

@@ -33,7 +33,7 @@ It also adds new files inside to your `src` folder.
 After execute command success you need add the next lines
 in your `global.css`
 
-```css
+```css title="src/global.css"
 
 # global.css file
 

packages/docs/src/routes/integrations/vitest/index.mdx

@@ -20,7 +20,7 @@ npm run qwik add vitest
 
 After running the command, vitest will be installed and a new component will be added to your project. The component will be added to the `src/components/example` directory as long as a new unit test is named `example.spec.ts`.
 
-```tsx
+```tsx title="example.spec.ts"
 import { createDOM } from '@builder.io/qwik/testing';
 import { test, expect } from 'vitest';
 import { ExampleTest } from './example';