Skip to content

Commit fd54cb7

Browse files
sankalpaacharyasankalpaacharya
committed
feat: replace Tabs with PackageManagerTabs across pages (all languages)
1 parent 16203df commit fd54cb7

19 files changed

+507
-476
lines changed

‎src/content/docs/de/develop-and-build.mdx‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ i18nReady: true
66

77
import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
88
import ReadMore from '~/components/ReadMore.astro';
9+
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
910

1011
Sobald du ein Astro-Projekt hast, bist du bereit, mit Astro zu bauen! 🚀
1112

@@ -21,23 +22,23 @@ Astro wird mit einem eingebauten Entwicklungsserver geliefert, der alles hat, wa
2122

2223
Jede Startvorlage wird mit einem vorkonfigurierten Skript geliefert, das `astro dev` für dich startet. Nachdem du in dein Projektverzeichnis navigiert hast, verwende deinen bevorzugten Paketmanager, um diesen Befehl auszuführen und den Astro-Entwicklungsserver zu starten.
2324

24-
<Tabs>
25-
<TabItem label="npm">
25+
<PackageManagerTabs>
26+
<Fragment slot="npm">
2627
```shell
2728
npm run dev
2829
```
29-
</TabItem>
30-
<TabItem label="pnpm">
30+
</Fragment>
31+
<Fragment slot="pnpm">
3132
```shell
3233
pnpm run dev
3334
```
34-
</TabItem>
35-
<TabItem label="yarn">
35+
</Fragment>
36+
<Fragment slot="yarn">
3637
```shell
3738
yarn run dev
3839
```
39-
</TabItem>
40-
</Tabs>
40+
</Fragment>
41+
</PackageManagerTabs>
4142

4243
Wenn alles gut geht, wird Astro dein Projekt jetzt auf [http://localhost:4321/](http://localhost:4321/) bereitstellen. Besuche diesen Link in deinem Browser und sieh dir deine neue Seite an!
4344

@@ -53,23 +54,23 @@ Wenn du dein Projekt nach dem Starten des Entwicklungsservers nicht im Browser
5354

5455
Um die Version deiner Website zu überprüfen, die zur Build-Zeit erstellt wird, beende den Entwicklungsserver (<kbd>Strg</kbd> + <kbd>C</kbd>) und führe den entsprechenden Build-Befehl für deinen Paketmanager in deinem Terminal aus:
5556

56-
<Tabs>
57-
<TabItem label="npm">
57+
<PackageManagerTabs>
58+
<Fragment slot="npm">
5859
```shell
5960
npm run build
6061
```
61-
</TabItem>
62-
<TabItem label="pnpm">
62+
</Fragment>
63+
<Fragment slot="pnpm">
6364
```shell
6465
pnpm build
6566
```
66-
</TabItem>
67-
<TabItem label="yarn">
67+
</Fragment>
68+
<Fragment slot="yarn">
6869
```shell
6970
yarn run build
7071
```
71-
</TabItem>
72-
</Tabs>
72+
</Fragment>
73+
</PackageManagerTabs>
7374

7475
Astro erstellt eine einsatzbereite Version deiner Website in einem separaten Ordner (standardmäßig `dist/`) und du kannst den Fortschritt im Terminal beobachten. So wirst du auf Fehler in deinem Projekt aufmerksam gemacht, bevor du es in die Produktion überführst. Wenn TypeScript auf `strict` oder `strictest` konfiguriert ist, prüft das `build`-Skript dein Projekt auch auf Typfehler.
7576

‎src/content/docs/en/develop-and-build.mdx‎

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ i18nReady: true
55
---
66
import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
77
import ReadMore from '~/components/ReadMore.astro';
8+
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
89

910
Once you have an Astro project, now you're ready to build with Astro! 🚀
1011

@@ -20,23 +21,23 @@ Astro comes with a built-in development server that has everything you need for
2021

2122
Every starter template comes with a pre-configured script that will run `astro dev` for you. After navigating into your project directory, use your favorite package manager to run this command and start the Astro development server.
2223

23-
<Tabs>
24-
<TabItem label="npm">
24+
<PackageManagerTabs>
25+
<Fragment slot="npm">
2526
```shell
2627
npm run dev
2728
```
28-
</TabItem>
29-
<TabItem label="pnpm">
29+
</Fragment>
30+
<Fragment slot="pnpm">
3031
```shell
3132
pnpm run dev
3233
```
33-
</TabItem>
34-
<TabItem label="yarn">
34+
</Fragment>
35+
<Fragment slot="yarn">
3536
```shell
3637
yarn run dev
3738
```
38-
</TabItem>
39-
</Tabs>
39+
</Fragment>
40+
</PackageManagerTabs>
4041

4142

4243
If all goes well, Astro will now be serving your project on [http://localhost:4321/](http://localhost:4321/). Visit that link in your browser and see your new site!
@@ -53,23 +54,23 @@ If you aren't able to open your project in the browser after starting the dev se
5354

5455
To check the version of your site that will be created at build time, quit the dev server (<kbd>Ctrl</kbd> + <kbd>C</kbd>) and run the appropriate build command for your package manager in your terminal:
5556

56-
<Tabs>
57-
<TabItem label="npm">
58-
```shell
59-
npm run build
60-
```
61-
</TabItem>
62-
<TabItem label="pnpm">
63-
```shell
64-
pnpm build
65-
```
66-
</TabItem>
67-
<TabItem label="yarn">
68-
```shell
69-
yarn run build
70-
```
71-
</TabItem>
72-
</Tabs>
57+
<PackageManagerTabs>
58+
<Fragment slot="npm">
59+
```shell
60+
npm run build
61+
```
62+
</Fragment>
63+
<Fragment slot="pnpm">
64+
```shell
65+
pnpm build
66+
```
67+
</Fragment>
68+
<Fragment slot="yarn">
69+
```shell
70+
yarn run build
71+
```
72+
</Fragment>
73+
</PackageManagerTabs>
7374

7475
Astro will build a deploy-ready version of your site in a separate folder (`dist/` by default) and you can watch its progress in the terminal. This will alert you to any build errors in your project before you deploy to production. If TypeScript is configured to `strict` or `strictest`, the `build` script will also check your project for type errors.
7576

‎src/content/docs/en/guides/deploy/clever-cloud.mdx‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ type: deploy
77
i18nReady: true
88
---
99
import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
10+
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
1011

1112
[Clever Cloud](https://clever-cloud.com) is a European cloud platform that provides automated, scalable services.
1213

@@ -45,49 +46,55 @@ To deploy your Astro project to Clever Cloud, you will need to **create a new ap
4546
6. Skip [connecting **Add-ons** to your Clever application](https://www.clever-cloud.com/developers/doc/addons/) unless you're using a database or Keycloak.
4647
7. Inject **environment variables**:
4748

48-
- For **Node.js**, no specific environment variable is needed to deploy Astro if you're using **npm**. If you're using **yarn** or **pnpm**, set the following environment variables:
49+
- For **Node.js**, set the following environment variables based on your package manager:
4950

50-
<Tabs>
51-
<TabItem label="pnpm">
51+
<PackageManagerTabs>
52+
<Fragment slot="npm">
53+
```shell
54+
CC_NODE_BUILD_TOOL="npm"
55+
CC_PRE_BUILD_HOOK="npm install && npm run astro telemetry disable && npm run build"
56+
```
57+
</Fragment>
58+
<Fragment slot="pnpm">
5259
```shell
5360
CC_NODE_BUILD_TOOL="custom"
5461
CC_PRE_BUILD_HOOK="npm install -g pnpm && pnpm install"
5562
CC_CUSTOM_BUILD_TOOL="pnpm run astro telemetry disable && pnpm build"
5663
```
57-
</TabItem>
58-
<TabItem label="yarn">
64+
</Fragment>
65+
<Fragment slot="yarn">
5966
```shell
6067
CC_NODE_BUILD_TOOL="yarn"
6168
CC_PRE_BUILD_HOOK="yarn && yarn run astro telemetry disable && yarn build"
6269
```
63-
</TabItem>
64-
</Tabs>
70+
</Fragment>
71+
</PackageManagerTabs>
6572

6673
- For a **static** application, add these variables:
6774

68-
<Tabs>
69-
<TabItem label="npm">
75+
<PackageManagerTabs>
76+
<Fragment slot="npm">
7077
```shell
7178
CC_POST_BUILD_HOOK="npm run build"
7279
CC_PRE_BUILD_HOOK="npm install && npm run astro telemetry disable"
7380
CC_WEBROOT="/dist"
7481
```
75-
</TabItem>
76-
<TabItem label="pnpm">
82+
</Fragment>
83+
<Fragment slot="pnpm">
7784
```shell
7885
CC_POST_BUILD_HOOK="pnpm build"
7986
CC_PRE_BUILD_HOOK="npm install -g pnpm && pnpm install && pnpm run astro telemetry disable"
8087
CC_WEBROOT="/dist"
8188
```
82-
</TabItem>
83-
<TabItem label="yarn">
89+
</Fragment>
90+
<Fragment slot="yarn">
8491
```shell
8592
CC_POST_BUILD_HOOK="yarn build"
8693
CC_PRE_BUILD_HOOK="yarn && yarn run astro telemetry disable"
8794
CC_WEBROOT="/dist"
8895
```
89-
</TabItem>
90-
</Tabs>
96+
</Fragment>
97+
</PackageManagerTabs>
9198

9299

93100
8. **Deploy!** If you're deploying from **GitHub**, your deployment should start automatically. If you're using **Git**, copy the remote and push on the **master** branch.

‎src/content/docs/es/develop-and-build.mdx‎

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ i18nReady: true
55
---
66
import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
77
import ReadMore from '~/components/ReadMore.astro';
8+
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
89

910
¡Una vez que tengas un proyecto Astro, ya estás listo para empezar a construir con Astro! 🚀
1011

@@ -20,23 +21,23 @@ Astro viene con un servidor de desarrollo incorporado que tiene todo lo que nece
2021

2122
Cada plantilla de inicio viene con un script pre-configurado que correrá el comando `astro dev` por ti. Despues de navegar al directorio de tu proyecto, usa tu manejador de paquetes favorito para correr este comando e iniciar el servidor de desarrollo Astro
2223

23-
<Tabs>
24-
<TabItem label="npm">
24+
<PackageManagerTabs>
25+
<Fragment slot="npm">
2526
```shell
2627
npm run dev
2728
```
28-
</TabItem>
29-
<TabItem label="pnpm">
29+
</Fragment>
30+
<Fragment slot="pnpm">
3031
```shell
3132
pnpm run dev
3233
```
33-
</TabItem>
34-
<TabItem label="yarn">
34+
</Fragment>
35+
<Fragment slot="yarn">
3536
```shell
3637
yarn run dev
3738
```
38-
</TabItem>
39-
</Tabs>
39+
</Fragment>
40+
</PackageManagerTabs>
4041

4142
Si todo sale bien, Astro ahora estará sirviendo tu proyecto en [http://localhost:4321/](http://localhost:4321/). ¡Visita ese enlace en tu navegador y ve tu nuevo sitio!
4243

@@ -52,23 +53,23 @@ Si no es posible abrir tu proyecto en el navegador después de iniciar el servid
5253

5354
Para revisar la versión de tu sitio que será creada en compilación, cierra el servidor de desarrollo (<kbd>Ctrl</kbd> + <kbd>C</kbd>) y en tu terminal corre el comando apropiado de compilación de tu manejador de paquetes:
5455

55-
<Tabs>
56-
<TabItem label="npm">
57-
```shell
58-
npm run build
59-
```
60-
</TabItem>
61-
<TabItem label="pnpm">
62-
```shell
63-
pnpm build
64-
```
65-
</TabItem>
66-
<TabItem label="yarn">
67-
```shell
68-
yarn run build
69-
```
70-
</TabItem>
71-
</Tabs>
56+
<PackageManagerTabs>
57+
<Fragment slot="npm">
58+
```shell
59+
npm run build
60+
```
61+
</Fragment>
62+
<Fragment slot="pnpm">
63+
```shell
64+
pnpm build
65+
```
66+
</Fragment>
67+
<Fragment slot="yarn">
68+
```shell
69+
yarn run build
70+
```
71+
</Fragment>
72+
</PackageManagerTabs>
7273

7374
Astro compilará una versión de tu sitio lista para ser desplegada en una carpeta separada (`dist/` por default) y podrás ver su progreso en la terminal. Este te alertará sobre cualquier error de compilación en tu proyecto antes de que despliegues a producción. Si Typescript está configurado en `strict` o `strictest`, el comando `build` también revisará tu proyecto por errores de tipado.
7475

‎src/content/docs/es/guides/deploy/clever-cloud.mdx‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ type: deploy
77
i18nReady: true
88
---
99
import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
10+
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
1011

1112
[Clever Cloud](https://clever-cloud.com) es una plataforma de nube europea que proporciona servicios automatizados y escalables.
1213

@@ -44,49 +45,55 @@ Para desplegar tu proyecto Astro en Clever Cloud, necesitarás **crear una nueva
4445
6. Omite [conectar **Add-ons** a tu aplicación Clever](https://developers.clever-cloud.com/doc/addons/) a menos que estés usando una base de datos o Keycloak.
4546
7. Inyecta **variables de entorno**:
4647

47-
- Para **Node.js**, no se necesita ninguna variable de entorno específica para desplegar Astro si estás usando **npm**. Si estás usando **yarn** o **pnpm**, configura las siguientes variables de entorno:
48+
- Para **Node.js**, configura las siguientes variables de entorno según tu gestor de paquetes:
4849

49-
<Tabs>
50-
<TabItem label="pnpm">
50+
<PackageManagerTabs>
51+
<Fragment slot="npm">
52+
```shell
53+
CC_NODE_BUILD_TOOL="npm"
54+
CC_PRE_BUILD_HOOK="npm install && npm run astro telemetry disable && npm run build"
55+
```
56+
</Fragment>
57+
<Fragment slot="pnpm">
5158
```shell
5259
CC_NODE_BUILD_TOOL="custom"
5360
CC_PRE_BUILD_HOOK="npm install -g pnpm && pnpm install"
5461
CC_CUSTOM_BUILD_TOOL="pnpm run astro telemetry disable && pnpm build"
5562
```
56-
</TabItem>
57-
<TabItem label="yarn">
63+
</Fragment>
64+
<Fragment slot="yarn">
5865
```shell
5966
CC_NODE_BUILD_TOOL="yarn"
6067
CC_PRE_BUILD_HOOK="yarn && yarn run astro telemetry disable && yarn build"
6168
```
62-
</TabItem>
63-
</Tabs>
69+
</Fragment>
70+
</PackageManagerTabs>
6471

6572
- Para una aplicación **estática**, agrega estas variables:
6673

67-
<Tabs>
68-
<TabItem label="npm">
74+
<PackageManagerTabs>
75+
<Fragment slot="npm">
6976
```shell
7077
CC_POST_BUILD_HOOK="npm run build"
7178
CC_PRE_BUILD_HOOK="npm install && npm run astro telemetry disable"
7279
CC_WEBROOT="/dist"
7380
```
74-
</TabItem>
75-
<TabItem label="pnpm">
81+
</Fragment>
82+
<Fragment slot="pnpm">
7683
```shell
7784
CC_POST_BUILD_HOOK="pnpm build"
7885
CC_PRE_BUILD_HOOK="npm install -g pnpm && pnpm install && pnpm run astro telemetry disable"
7986
CC_WEBROOT="/dist"
8087
```
81-
</TabItem>
82-
<TabItem label="yarn">
88+
</Fragment>
89+
<Fragment slot="yarn">
8390
```shell
8491
CC_POST_BUILD_HOOK="yarn build"
8592
CC_PRE_BUILD_HOOK="yarn && yarn run astro telemetry disable"
8693
CC_WEBROOT="/dist"
8794
```
88-
</TabItem>
89-
</Tabs>
95+
</Fragment>
96+
</PackageManagerTabs>
9097

9198
8. **¡Despliega!** Si estás desplegando desde **GitHub**, tu despliegue debería comenzar automáticamente. Si estás usando **Git**, copia el remoto y sube a la rama **master**.
9299
</Steps>

0 commit comments

Comments
 (0)