Skip to content

Commit

Permalink
Merge branch 'main' into hd-i18n-fr-0-13-0-manual-setup
Browse files Browse the repository at this point in the history
  • Loading branch information
HiDeoo authored Nov 23, 2023
2 parents acb47ec + 25713b0 commit 45f9eba
Show file tree
Hide file tree
Showing 5 changed files with 283 additions and 11 deletions.
5 changes: 5 additions & 0 deletions .changeset/calm-bananas-nail.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@astrojs/starlight": patch
---

Fix minor punctuation typo in Hindi UI string
153 changes: 146 additions & 7 deletions docs/src/content/docs/fr/guides/authoring-content.md
Original file line number Diff line number Diff line change
Expand Up @@ -179,12 +179,12 @@ Vos utilisateurs peuvent être plus productifs et trouver votre produit plus fac
> Les guillemets sont indiqués par un `>` au début de chaque ligne.
```

## Code blocks
## Blocs de code

Un bloc de code est indiqué par un bloc avec trois crochets <code>```</code> au début et à la fin. Vous pouvez indiquer le langage de programmation utilisé après les premiers crochets.
Un bloc de code est indiqué par un bloc avec trois accents graves <code>```</code> au début et à la fin. Vous pouvez indiquer le langage de programmation utilisé après les premiers accents graves.

```js
// Code Javascript avec mise en évidence de la syntaxe.
// Code Javascript avec coloration syntaxique.
var fun = function lang(l) {
dateformat.i18n = require('./lang/' + l);
return true;
Expand All @@ -193,17 +193,156 @@ var fun = function lang(l) {

````md
```js
// Code Javascript avec mise en évidence de la syntaxe.
// Code Javascript avec coloration syntaxique.
var fun = function lang(l) {
dateformat.i18n = require('./lang/' + l);
return true;
};
```
````

```md
Les longs blocs de code d'une seule ligne ne doivent pas être enveloppés. Ils doivent défiler horizontalement s'ils sont trop longs. Cette ligne devrait être suffisamment longue pour le démontrer.
```
### Fonctionnalités d'Expressive Code

Starlight utilise [Expressive Code](https://github.com/expressive-code/expressive-code/tree/main/packages/astro-expressive-code) pour étendre les possibilités de formatage des blocs de code.
Les plugins Expressive Code de marqueurs de texte et de cadres de fenêtre sont activés par défaut.
L'affichage des blocs de code peut être configuré à l'aide de [l'option de configuration `expressiveCode`](/fr/reference/configuration/#expressivecode) de Starlight.

#### Marqueurs de texte

Vous pouvez mettre en évidence des lignes ou des portions spécifiques de vos blocs de code à l'aide des [marqueurs de texte d'Expressive Code](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#usage-in-markdown--mdx-documents) sur la première ligne de votre bloc de code.
Utilisez des accolades (`{ }`) pour mettre en évidence des lignes entières, et des guillemets pour mettre en évidence des chaînes de texte.

Il existe trois styles de mise en évidence : neutre pour attirer l'attention sur le code, vert pour indiquer du code inséré, et rouge pour indiquer du code supprimé.
Du texte et des lignes entières peuvent être marqués à l'aide du marqueur par défaut, ou en combinaison avec `ins=` et `del=` pour produire la mise en évidence souhaitée.

Expressive Code fournit plusieurs options pour personnaliser l'apparence visuelle de vos exemples de code.
Beaucoup d'entre elles peuvent être combinées pour obtenir des exemples de code très illustratifs.
Merci d'explorer la [documentation d'Expressive Code](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md) pour obtenir une liste complète des options disponibles.
Certaines des options les plus courantes sont présentées ci-dessous :

- [Marquer des lignes entières et des plages de lignes à l'aide du marqueur `{ }`](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#marking-entire-lines--line-ranges) :

```js {2-3}
function demo() {
// Cette ligne (#2) et la suivante sont mises en évidence
return 'Ceci est la ligne #3 de cet exemple';
}
```

````md
```js {2-3}
function demo() {
// Cette ligne (#2) et la suivante sont mises en évidence
return 'Ceci est la ligne #3 de cet exemple';
}
```
````

- [Marquer des sélections de texte à l'aide du marqueur `" "` ou d'expressions régulières](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#marking-individual-text-inside-lines) :

```js "termes individuels" /Même.*charge/
// Des termes individuels peuvent également être mis en évidence
function demo() {
return 'Même les expressions régulières sont prises en charge';
}
```

````md
```js "termes individuels" /Même.*charge/
// Des termes individuels peuvent également être mis en évidence
function demo() {
return 'Même les expressions régulières sont prises en charge';
}
```
````

- [Marquer du texte ou des lignes comme insérés ou supprimés avec `ins` ou `del`](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#selecting-marker-types-mark-ins-del) :

```js "return true;" ins="insertion" del="suppression"
function demo() {
console.log("Voici des marqueurs d'insertion et de suppression");
// La déclaration return utilise le type de marqueur par défaut
return true;
}
```

````md
```js "return true;" ins="insertion" del="suppression"
function demo() {
console.log("Voici des marqueurs d'insertion et de suppression");
// La déclaration return utilise le type de marqueur par défaut
return true;
}
```
````

- [Combiner coloration syntaxique et syntaxe de type `diff`](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#combining-syntax-highlighting-with-diff-like-syntax) :

```diff lang="js"
function ceciEstDuJavaScript() {
// Ce bloc entier utilise la coloration syntaxique JavaScript,
// et nous pouvons toujours y ajouter des marqueurs de différence !
- console.log('Ancien code à supprimer')
+ console.log('Nouveau code brillant !')
}
```

````md
```diff lang="js"
function ceciEstDuJavaScript() {
// Ce bloc entier utilise la coloration syntaxique JavaScript,
// et nous pouvons toujours y ajouter des marqueurs de différence !
- console.log('Ancien code à supprimer')
+ console.log('Nouveau code brillant !')
}
```
````

#### Cadres et titres

Les blocs de code peuvent être affichés dans un cadre ressemblant à une fenêtre.
Un cadre ressemblant à une fenêtre de terminal sera utilisé pour les langages de script shell (par exemple `bash` ou `sh`).
Les autres langages s'affichent dans un cadre de style éditeur de code s'ils incluent un titre.

Le titre optionnel d'un bloc de code peut être défini soit avec un attribut `title="..."` après les accents graves d'ouverture et l'identifiant de langage, ou avec un nom de fichier en commentaire sur la première ligne du bloc de code.

- [Ajouter un nom de fichier avec un commentaire](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#adding-titles-open-file-tab-or-terminal-window-title) :

```js
// mon-fichier-de-test.js
console.log('Hello World!');
```

````md
```js
// mon-fichier-de-test.js
console.log('Hello World!');
```
````

- [Ajouer un title à une fenêtre de terminal](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#adding-titles-open-file-tab-or-terminal-window-title) :

```bash title="Installation des dépendances…"
npm install
```

````md
```bash title="Installation des dépendances…"
npm install
```
````

- [Désactiver les cadres de fenêtre avec `frame="none"`](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#overriding-frame-types) :

```bash frame="none"
echo "Ceci n'est pas affiché comme un terminal malgré l'utilisation du langage bash"
```

````md
```bash frame="none"
echo "Ceci n'est pas affiché comme un terminal malgré l'utilisation du langage bash"
```
````

## Autres fonctionnalités courantes de Markdown

Expand Down
6 changes: 3 additions & 3 deletions docs/src/content/docs/guides/authoring-content.md
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ Some of the most common examples are shown below:
```
````

- [Mark selections of text using the `" "` marker or regular expressions](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#marking-entire-lines--line-ranges):
- [Mark selections of text using the `" "` marker or regular expressions](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-text-markers/README.md#marking-individual-text-inside-lines):

```js "Individual terms" /Even.*supported/
// Individual terms can be highlighted, too
Expand Down Expand Up @@ -307,7 +307,7 @@ Other languages display inside a code editor-style frame if they include a title

A code block’s optional title can be set either with a `title="..."` attribute following the code block's opening backticks and language identifier, or with a file name comment in the first lines of the code.

- [Add a file name tab with a comment](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#code-editor-window-frames)
- [Add a file name tab with a comment](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#adding-titles-open-file-tab-or-terminal-window-title)

```js
// my-test-file.js
Expand All @@ -321,7 +321,7 @@ A code block’s optional title can be set either with a `title="..."` attribute
```
````

- [Add a title to a Terminal window](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#terminal-window-frames)
- [Add a title to a Terminal window](https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#adding-titles-open-file-tab-or-terminal-window-title)

```bash title="Installing dependencies…"
npm install
Expand Down
128 changes: 128 additions & 0 deletions docs/src/content/docs/hi/manual-setup.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
---
title: मैनुअल सेटअप
description: मौजूदा Astro परियोजना में Starlight जोड़ने के लिए मैन्युअल रूप से कॉन्फ़िगर करने का तरीका जानें।
---

import { Tabs, TabItem } from '@astrojs/starlight/components';

नई Starlight साइट बनाने का सबसे तेज़ तरीका `create astro` का उपयोग है जैसा कि [पहले कदम मार्गदर्शक](/hi/getting-started/#एक-नयी-परियोजना-बनाएं) में दिखाया गया है।
यदि आप किसी मौजूदा Astro परियोजना में Starlight जोड़ना चाहते हैं, तो यह मार्गदर्शिका बताएगी कि कैसे किया जाता हैं ।

## Starlight स्थापित करें

इस मार्गदर्शिका का पालन करने के लिए, आपको एक मौजूदा Astro परियोजना की आवश्यकता होगी।

### Starlight एकीकरण जोड़ें

Starlight एक [Astro एकीकरण](https://docs.astro.build/hi/guides/integrations-guide/) है। अपने परियोजना की मूल निर्देशिका में `astro add` आदेश चलाकर इसे अपनी साइट में जोड़ें:

<Tabs>
<TabItem label="npm">
```sh
npx astro add starlight
```

</TabItem>
<TabItem label="pnpm">
```sh
pnpm astro add starlight
```
</TabItem>
<TabItem label="Yarn">
```sh
yarn astro add starlight
```
</TabItem>

</Tabs>

यह आवश्यक निर्भरताएँ इंस्टॉल करेगा और आपकी Astro कॉन्फ़िगरेशन फ़ाइल में `एकीकरण` सरणी में Starlight जोड़ देगा।

### एकीकरण कॉन्फ़िगर करें

Starlight एकीकरण आपकी `astro.config.mjs` फ़ाइल में कॉन्फ़िगर किया गया है।

आरंभ करने के लिए एक `title` जोड़ें:

```js {7-9}
// astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
integrations: [
starlight({
title: 'मेरी आनंददायक दस्तावेज़ीकरण साइट',
}),
],
});
```

[Starlight कॉन्फ़िगरेशन संदर्भ](/hi/reference/configuration/) में सभी उपलब्ध विकल्प ढूंढें।

### सामग्री संग्रह कॉन्फ़िगर करें

Starlight Astro के [सामग्री संग्रह](https://docs.astro.build/hi/guides/content-collections/) के शीर्ष पर बनाया गया है, जो `src/content/config.ts` फ़ाइल में कॉन्फ़िगर किया गया है।

Starlight के `docsSchema` का उपयोग करने वाले `docs` संग्रह को जोड़कर सामग्री कॉन्फ़िगरेशन फ़ाइल बनाएं या उसका अद्यतन करें:

```js ins={3,6}
// src/content/config.ts
import { defineCollection } from 'astro:content';
import { docsSchema } from '@astrojs/starlight/schema';

export const collections = {
docs: defineCollection({ schema: docsSchema() }),
};
```

### कंटेंट जोड़ें

Starlight अब कॉन्फ़िगर हो गया है और अब कुछ सामग्री जोड़ने का समय आ गया है!

एक `src/content/docs/` निर्देशिका बनाएं और इसमें एक `index.md` फ़ाइल जोड़कर प्रारंभ करें।
यह आपकी नई साइट का मुखपृष्ठ होगा:

```md
---
# src/content/docs/index.md
title: मेरे दस्तावेज़
description: Starlight के साथ निर्मित इस दस्तावेज़ साइट में मेरे परियोजना के बारे में और जानें।
---

मेरे परियोजना में आपका स्वागत है!
```

Starlight फ़ाइल-आधारित रूटिंग का उपयोग करता है, जिसका अर्थ है कि `src/content/docs/` में प्रत्येक Markdown, MDX, या Markdoc फ़ाइल आपकी साइट पर एक पेज में बदल जाएगी। फ्रंटमैटर मेटाडेटा (उपरोक्त उदाहरण में `title` और `description` फ़ील्ड) प्रत्येक पृष्ठ को प्रदर्शित करने के तरीके को बदल सकता है।
[फ्रंटमैटर संदर्भ](/hi/reference/frontmatter/) में सभी उपलब्ध विकल्प देखें।

## मौजूदा साइटों के लिए युक्तियाँ

यदि आपके पास कोई मौजूदा Astro परियोजना है, तो आप अपनी साइट पर शीघ्रता से दस्तावेज़ीकरण अनुभाग जोड़ने के लिए Starlight का उपयोग कर सकते हैं।

### उपपथ पर Starlight

सभी Starlight पृष्ठों को एक उपपथ पर जोड़ने के लिए, अपने सभी दस्तावेज़ सामग्री को `src/content/docs/` की उपनिर्देशिका के अंदर रखें।

उदाहरण के लिए, यदि Starlight पेज सभी `/guides/` से शुरू होने चाहिए, तो अपनी सामग्री को `src/content/docs/guides/` निर्देशिका में जोड़ें:

import FileTree from '../../../components/file-tree.astro';

<FileTree>

- src/
- content/
- docs/
- **guides/**
- guide.md
- index.md
- pages/
- astro.config.mjs

</FileTree>

भविष्य में, हम `src/content/docs/` में अतिरिक्त नेस्टेड निर्देशिका की आवश्यकता से बचने के लिए इस उपयोग के मामले का बेहतर समर्थन करने की योजना बना रहे हैं।

### SSR के साथ Starlight का प्रयोग करें

वर्तमान में, Starlight Astro के सर्वर एडेप्टर का उपयोग करके [SSR प्रविस्तारण](https://docs.astro.build/hi/guides/server-side-rendering/) का समर्थन नहीं करता है। हमें उम्मीद है कि हम जल्द ही इसका समर्थन करने में सक्षम होंगे।
2 changes: 1 addition & 1 deletion packages/starlight/translations/hi.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"sidebarNav.accessibleLabel": "मुख्य",
"tableOfContents.onThisPage": "इस पृष्ठ पर",
"tableOfContents.overview": "अवलोकन",
"i18n.untranslatedContent": "यह कंटेंट अभी तक आपकी भाषा में उपलब्ध नहीं है.",
"i18n.untranslatedContent": "यह कंटेंट अभी तक आपकी भाषा में उपलब्ध नहीं है",
"page.editLink": "पृष्ठ संपादित करें",
"page.lastUpdated": "आखिरी अद्यतन:",
"page.previousLink": "पिछला",
Expand Down

0 comments on commit 45f9eba

Please sign in to comment.