From 3ae793661cf97f79a2be26cc3a83d63f229784d1 Mon Sep 17 00:00:00 2001 From: trueberryless <99918022+trueberryless@users.noreply.github.com> Date: Thu, 26 Oct 2023 12:06:43 +0200 Subject: [PATCH 01/26] i18n(de): Translate all files into German (#771) Co-authored-by: Chris Swithinbank Co-authored-by: Max <51922004+Maxframe@users.noreply.github.com> --- docs/astro.config.mjs | 4 +- .../components/theme-designer/preview.astro | 6 +- .../content/docs/de/environmental-impact.md | 140 +++++ docs/src/content/docs/de/getting-started.mdx | 16 +- .../docs/de/guides/authoring-content.md | 209 +++++++ .../src/content/docs/de/guides/components.mdx | 199 +++++++ .../docs/de/guides/css-and-tailwind.mdx | 290 ++++++++++ .../content/docs/de/guides/customization.mdx | 428 +++++++++++++++ docs/src/content/docs/de/guides/i18n.mdx | 221 ++++++++ .../docs/de/guides/overriding-components.md | 133 +++++ .../docs/de/guides/project-structure.mdx | 48 ++ docs/src/content/docs/de/guides/sidebar.mdx | 516 ++++++++++++++++++ docs/src/content/docs/de/index.mdx | 9 + .../{configuration.md => configuration.mdx} | 252 +++++---- .../content/docs/de/reference/frontmatter.md | 329 +++++++++++ .../content/docs/de/reference/overrides.md | 374 +++++++++++++ docs/src/content/docs/de/showcase.mdx | 53 ++ 17 files changed, 3108 insertions(+), 119 deletions(-) create mode 100644 docs/src/content/docs/de/environmental-impact.md create mode 100644 docs/src/content/docs/de/guides/authoring-content.md create mode 100644 docs/src/content/docs/de/guides/components.mdx create mode 100644 docs/src/content/docs/de/guides/css-and-tailwind.mdx create mode 100644 docs/src/content/docs/de/guides/customization.mdx create mode 100644 docs/src/content/docs/de/guides/i18n.mdx create mode 100644 docs/src/content/docs/de/guides/overriding-components.md create mode 100644 docs/src/content/docs/de/guides/project-structure.mdx create mode 100644 docs/src/content/docs/de/guides/sidebar.mdx rename docs/src/content/docs/de/reference/{configuration.md => configuration.mdx} (70%) create mode 100644 docs/src/content/docs/de/reference/frontmatter.md create mode 100644 docs/src/content/docs/de/reference/overrides.md create mode 100644 docs/src/content/docs/de/showcase.mdx diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index cd883de1fc0..37ecec8bd16 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -110,7 +110,7 @@ export default defineConfig({ label: 'Environmental Impact', link: 'environmental-impact', translations: { - // de: '', + de: 'Umweltbelastung', es: 'Documentación ecológica', ja: '環境への負荷', fr: 'Impact environnemental', @@ -127,7 +127,7 @@ export default defineConfig({ label: 'Showcase', link: 'showcase', translations: { - // de: '', + de: 'Schaufenster', // es: '', ja: 'ショーケース', fr: 'Vitrine', diff --git a/docs/src/components/theme-designer/preview.astro b/docs/src/components/theme-designer/preview.astro index 7dbfb7d86a9..d5bfdb7d237 100644 --- a/docs/src/components/theme-designer/preview.astro +++ b/docs/src/components/theme-designer/preview.astro @@ -21,9 +21,9 @@ const codeBg = light ? '--sl-color-gray-6' : '--sl-color-gray-5';

{light ? labels.lightMode : labels.darkMode}

- {labels.bodyText} - {labels.linkText} - {labels.dimText} + {labels.bodyText}{' '} + {labels.linkText}{' '} + {labels.dimText}{' '} {labels.inlineCode}

diff --git a/docs/src/content/docs/de/environmental-impact.md b/docs/src/content/docs/de/environmental-impact.md new file mode 100644 index 00000000000..5758878ddef --- /dev/null +++ b/docs/src/content/docs/de/environmental-impact.md @@ -0,0 +1,140 @@ +--- +title: Umweltfreundliche Dokumente +description: Erfahre, wie Starlight dir helfen kann, umweltfreundlichere Dokumentationen zu erstellen und deinen ökologischen Fußabdruck zu verringern. +--- + +Schätzungen über die Auswirkungen der Webindustrie auf das Klima liegen zwischen [2 %][sf] und [4 % der weltweiten Kohlenstoffemissionen][bbc], was in etwa den Emissionen der Luftfahrtindustrie entspricht. +Es gibt viele komplexe Faktoren bei der Berechnung der ökologischen Auswirkungen einer Website, aber dieser Leitfaden enthält einige Tipps, wie du den ökologischen Fußabdruck deiner Docs-Website verringern kannst. + +Die gute Nachricht ist, dass die Wahl von Starlight ein guter Anfang ist. +Laut dem Website Carbon Calculator ist diese Website [sauberer als 99 % der getesteten Websiten][sl-carbon] und erzeugt 0,01g CO₂ pro Seitenbesuch. + +## Seitengewicht + +Je mehr Daten eine Website überträgt, desto mehr Energieressourcen benötigt sie. +Im April 2023 musste ein Nutzer laut [Daten aus dem HTTP-Archiv][http] für die durchschnittliche Website mehr als 2.000 KB herunterladen. + +Starlight erstellt Seiten, die so leicht wie möglich sind. +So lädt ein Benutzer beim ersten Besuch weniger als 50 KB an komprimierten Daten herunter - nur 2,5 % des Medianwerts des HTTP-Archivs. +Mit einer guten Caching-Strategie können nachfolgende Besuche sogar nur 10 KB herunterladen. + +### Bilder + +Während Starlight eine gute Grundlage bietet, können Bilder, die du deinen Dokumentseiten hinzufügst, das Seitengewicht schnell erhöhen. +Starlight nutzt die [optimierte Asset-Unterstützung][Assets] von Astro, um lokale Bilder in deinen Markdown- und MDX-Dateien zu optimieren. + +### UI-Komponenten + +Komponenten, die mit UI-Frameworks wie React oder Vue erstellt wurden, können leicht große Mengen an JavaScript zu einer Seite hinzufügen. +Da Starlight auf Astro aufbaut, laden Komponenten wie diese dank [Astro Islands][islands] standardmäßig **kein clientseitiges JavaScript**. + +### Caching + +Caching wird verwendet, um zu kontrollieren, wie lange ein Browser Daten speichert und wiederverwendet, die er bereits heruntergeladen hat. +Eine gute Caching-Strategie stellt sicher, dass ein Benutzer neue Inhalte so schnell wie möglich erhält, wenn sich diese ändern, vermeidet aber auch, dass derselbe Inhalt unnötigerweise immer wieder heruntergeladen wird, wenn er sich nicht geändert hat. + +Die gebräuchlichste Art, das Zwischenspeichern zu konfigurieren, ist der [`Cache-Control` HTTP-Header][cache]. +Wenn du Starlight verwendest, kannst du eine lange Cache-Zeit für alles im Verzeichnis `/_astro/` einstellen. +Dieses Verzeichnis enthält CSS, JavaScript und andere gebündelte Inhalte, die sicher für immer zwischengespeichert werden können, wodurch unnötige Downloads vermieden werden: + +``` +Cache-Control: public, max-age=604800, immutable +``` + +Wie du das Caching konfigurierst, hängt von deinem Webhost ab. Zum Beispiel wendet Vercel diese Caching-Strategie für dich an, ohne dass eine Konfiguration erforderlich ist, während du [benutzerdefinierte Header für Netlify][ntl-headers] einstellen kannst, indem du eine `public/_headers`-Datei zu deinem Projekt hinzufügst: + +``` +/_astro/* + Cache-Control: public + Cache-Control: max-age=604800 + Cache-Control: immutable +``` + +[cache]: https://csswizardry.com/2019/03/cache-control-for-civilians/ +[ntl-headers]: https://docs.netlify.com/routing/headers/ + +## Stromverbrauch + +Die Art und Weise, wie eine Website aufgebaut ist, kann sich auf den Stromverbrauch auswirken, den sie auf dem Gerät des Benutzers benötigt. +Durch die Verwendung von minimalem JavaScript reduziert Starlight die Rechenleistung, die das Telefon, Tablet oder der Computer eines Nutzers zum Laden und Rendern von Seiten benötigt. + +Sei jedoch vorsichtig, wenn du Funktionen wie analytische Tracking-Skripte oder JavaScript-lastige Inhalte wie Videoeinbettungen hinzufügst, da diese den Stromverbrauch der Seite erhöhen können. +Wenn du Analysen benötigst, solltest du eine schlanke Option wie [Cabin][cabin], [Fathom][fathom] oder [Plausible][plausible] wählen. +Einbettungen wie YouTube- und Vimeo-Videos können verbessert werden, indem man auf [Laden des Videos bei Benutzerinteraktion][lazy-video] wartet. +Pakete wie [`astro-embed`][embed] können bei gängigen Diensten helfen. + +:::tip[Wusstest du schon?] +Das Parsen und Kompilieren von JavaScript ist eine der aufwändigsten Aufgaben, die ein Browser zu erledigen hat. +Verglichen mit dem Rendern eines JPEG-Bildes derselben Größe kann die [Verarbeitung von JavaScript mehr als 30 Mal so lange dauern][cost-of-js]. +::: + +[cabin]: https://withcabin.com/ +[fathom]: https://usefathom.com/ +[plausible]: https://plausible.io/ +[lazy-video]: https://web.dev/iframe-lazy-loading/ +[embed]: https://www.npmjs.com/package/astro-embed +[cost-of-js]: https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e + +## Hosting + +Wo eine Website gehostet wird, kann einen großen Einfluss darauf haben, wie umweltfreundlich deine Dokumentationsseite ist. +Rechenzentren und Serveranlagen können große ökologische Auswirkungen haben, einschließlich eines hohen Stromverbrauchs und eines intensiven Wasserverbrauchs. + +Wenn du dich für einen Hoster entscheidest, der erneuerbare Energien einsetzt, wird deine Website weniger Kohlenstoffemissionen verursachen. Das [Green Web Directory][gwb] ist ein Tool, das dir helfen kann, Hosting-Unternehmen zu finden. + +[gwb]: https://www.thegreenwebfoundation.org/directory/ + +## Vergleiche + +Bist du neugierig, wie andere Docs-Frameworks im Vergleich abschneiden? +Diese Tests mit dem [Website Carbon Calculator][wcc] vergleichen ähnliche Seiten, die mit verschiedenen Tools erstellt wurden. + +| Framework | CO₂ pro Seitenaufruf | +| --------------------------- | -------------------- | +| [Starlight][sl-carbon] | 0.01g | +| [VitePress][vp-carbon] | 0.05g | +| [Docus][dc-carbon] | 0.05g | +| [Sphinx][sx-carbon] | 0.07g | +| [MkDocs][mk-carbon] | 0.10g | +| [Nextra][nx-carbon] | 0.11g | +| [docsify][dy-carbon] | 0.11g | +| [Docusaurus][ds-carbon] | 0.24g | +| [Read the Docs][rtd-carbon] | 0.24g | +| [GitBook][gb-carbon] | 0.71g | + +Daten erhoben am 14. Mai 2023. Klicke auf einen Link, um aktuelle Zahlen zu sehen. + +[sl-carbon]: https://www.websitecarbon.com/website/starlight-astro-build-getting-started/ +[vp-carbon]: https://www.websitecarbon.com/website/vitepress-dev-guide-what-is-vitepress/ +[dc-carbon]: https://www.websitecarbon.com/website/docus-dev-introduction-getting-started/ +[sx-carbon]: https://www.websitecarbon.com/website/sphinx-doc-org-en-master-usage-quickstart-html/ +[mk-carbon]: https://www.websitecarbon.com/website/mkdocs-org-getting-started/ +[nx-carbon]: https://www.websitecarbon.com/website/nextra-site-docs-docs-theme-start/ +[dy-carbon]: https://www.websitecarbon.com/website/docsify-js-org/ +[ds-carbon]: https://www.websitecarbon.com/website/docusaurus-io-docs/ +[rtd-carbon]: https://www.websitecarbon.com/website/docs-readthedocs-io-en-stable-index-html/ +[gb-carbon]: https://www.websitecarbon.com/website/docs-gitbook-com/ + +## Weitere Ressourcen + +### Werkzeuge + +- [Website Carbon Calculator][wcc] +- [GreenFrame](https://greenframe.io/) +- [Ecograder](https://ecograder.com/) +- [WebPageTest Kohlenstoffkontrolle](https://www.webpagetest.org/carbon-control/) +- [Ecoping](https://ecoping.earth/) + +### Artikel und Vorträge + +- ["Building a greener web"](https://youtu.be/EfPoOt7T5lg), Vortrag von Michelle Barker +- ["Sustainable Web Development Strategies Within An Organization"](https://www.smashingmagazine.com/2022/10/sustainable-web-development-strategies-organization/), Artikel von Michelle Barker +- ["A sustainable web for everyone"](https://2021.stateofthebrowser.com/speakers/tom-greenwood/), Vortrag von Tom Greenwood +- ["How Web Content Can Affect Power Usage"](https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/), Artikel von Benjamin Poulain und Simon Fraser + +[sf]: https://www.sciencefocus.com/science/what-is-the-carbon-footprint-of-the-internet/ +[bbc]: https://www.bbc.com/future/article/20200305-why-your-internet-habits-are-not-as-clean-as-you-think +[http]: https://httparchive.org/reports/state-of-the-web +[assets]: https://docs.astro.build/en/guides/assets/ +[islands]: https://docs.astro.build/en/concepts/islands/ +[wcc]: https://www.websitecarbon.com/ diff --git a/docs/src/content/docs/de/getting-started.mdx b/docs/src/content/docs/de/getting-started.mdx index 1a98025ad80..c9b5a52311a 100644 --- a/docs/src/content/docs/de/getting-started.mdx +++ b/docs/src/content/docs/de/getting-started.mdx @@ -38,7 +38,7 @@ yarn create astro --template starlight -Damit wird ein neues [Projektverzeichnis](/de/guides/project-structure/) mit allen erforderlichen Dateien und Konfigurationen für deine Webseite erstellt. +Damit wird ein neues [Projektverzeichnis](/de/guides/project-structure/) mit allen erforderlichen Dateien und Konfigurationen für deine Website erstellt. :::tip[In Aktion sehen] Probiere Starlight in deinem Browser aus: @@ -55,7 +55,7 @@ Starlight unterstützt das Erstellen von Inhalten in Markdown und MDX. (Du kanns ### Seiten hinzufügen -Füge neue Seiten zu deiner Webseite automatisch hinzu, indem du `.md` oder `.mdx` Dateien in `src/content/docs/` erstellst. Erstelle Unterordner, um deine Dateien zu organisieren und mehrere Pfadsegmente zu erstellen: +Füge neue Seiten zu deiner Website automatisch hinzu, indem du `.md` oder `.mdx` Dateien in `src/content/docs/` erstellst. Erstelle Unterordner, um deine Dateien zu organisieren und mehrere Pfadsegmente zu erstellen: ``` src/content/docs/hello-world.md => your-site.com/hello-world @@ -75,15 +75,15 @@ description: This is a page in my Starlight-powered site Wenn du etwas Wichtiges vergisst, wird Starlight dich daran erinnern. -## Veröffentlichung deiner Starlight Webseite +## Veröffentlichung deiner Starlight-Website -Sobald du deine Starlight Webseite erstellt und angepasst hast, kannst du sie auf einen Webserver oder Hosting-Plattform deiner Wahl veröffentlichen, einschließlich Netlify, Vercel, GitHub Pages und vielen mehr. +Sobald du deine Starlight Website erstellt und angepasst hast, kannst du sie auf einen Webserver oder Hosting-Plattform deiner Wahl veröffentlichen, einschließlich Netlify, Vercel, GitHub Pages und vielen mehr. -[Lerne mehr über die Veröffentlichung einer Astro Webseite in der Astro Dokumentation.](https://docs.astro.build/de/guides/deploy/) +[Lerne mehr über die Veröffentlichung einer Astro-Website in der Astro-Dokumentation.](https://docs.astro.build/de/guides/deploy/) ## Starlight aktualisieren -:::tip +:::tip[Tipp] Da es sich bei Starlight um eine Beta-Software handelt, wird es regelmäßig Updates und Verbesserungen geben. Achte darauf Starlight regelmäßig zu aktualisieren! ::: @@ -124,6 +124,6 @@ Sowohl die Starlight [Projektkonfiguration](/reference/configuration/) als auch In der wachsenden Liste der Anleitungen in der Seitenleiste findest du Hilfe beim Hinzufügen von Inhalten und beim Anpassen deiner Starlight-Website. -Wenn du keine Antwort in dieser Dokumentation finden kannst, besuche bitte die [Astro Docs](https://docs.astro.build) für die vollständige Astro-Dokumentation. Deine Frage kann vielleicht beantwortet werden, wenn du verstehst, wie Astro im Allgemeinen funktioniert. +Wenn du keine Antwort in dieser Dokumentation finden kannst, besuche bitte die [Astro Docs](https://docs.astro.build/de/) für die vollständige Astro-Dokumentation. Deine Frage kann vielleicht beantwortet werden, wenn du verstehst, wie Astro im Allgemeinen funktioniert. -Du kannst auch im [Astro Discord](https://astro.build/chat/) Hilfe von unserer aktiven, freundlichen Community bekommen. Du kannst Fragen in unserem `#Support`-Forum stellen oder unseren speziellen `#starlight`-Channel besuchen, um aktuelle Entwicklungen und mehr zu diskutieren. +Du kannst auch nach bekannten [Starlight-Problemen auf GitHub](https://github.com/withastro/starlight/issues) suchen und im [Astro Discord](https://astro.build/chat/) Hilfe von unserer aktiven, freundlichen Community erhalten! Du kannst Fragen in unserem `#Support`-Forum stellen oder unseren speziellen `#starlight`-Channel besuchen, um aktuelle Entwicklungen und mehr zu diskutieren. diff --git a/docs/src/content/docs/de/guides/authoring-content.md b/docs/src/content/docs/de/guides/authoring-content.md new file mode 100644 index 00000000000..e376af0fa08 --- /dev/null +++ b/docs/src/content/docs/de/guides/authoring-content.md @@ -0,0 +1,209 @@ +--- +title: Inhalte in Markdown verfassen +description: Ein Überblick über die von Starlight unterstützte Markdown-Syntax. +--- + +Starlight unterstützt die gesamte Bandbreite der [Markdown](https://daringfireball.net/projects/markdown/) Syntax in `.md` Dateien sowie Frontmatter [YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) um Metadaten wie Titel und Beschreibung zu definieren. + +Bitte prüfe die [MDX docs](https://mdxjs.com/docs/what-is-mdx/#markdown) oder [Markdoc docs](https://markdoc.dev/docs/syntax), wenn du diese Dateiformate verwendest, da die Unterstützung und Verwendung von Markdown unterschiedlich sein kann. + +## Inline-Stile + +Text kann **fett**, _italic_, oder ~~durchgestrichen~~ sein. + +```md +Text kann **fett**, _italic_, oder ~~durchgestrichen~~ sein. +``` + +Du kannst [auf eine andere Seite](/de/getting-started/) verlinken. + +```md +Du kannst [auf eine andere Seite](/de/getting-started/) verlinken. +``` + +Du kannst `inline code` mit Backticks hervorheben. + +```md +Du kannst `inline code` mit Backticks hervorheben. +``` + +## Bilder + +Bilder in Starlight verwenden [Astros eingebaute optimierte Asset-Unterstützung](https://docs.astro.build/de/guides/assets/). + +Markdown und MDX unterstützen die Markdown-Syntax für die Anzeige von Bildern, einschließlich Alt-Text für Bildschirmleser und unterstützende Technologien. + +![Eine Illustration von Planeten und Sternen mit dem Wort "Astro"](https://raw.githubusercontent.com/withastro/docs/main/public/default-og-image.png) + +```md +![Eine Illustration von Planeten und Sternen mit dem Wort "astro"](https://raw.githubusercontent.com/withastro/docs/main/public/default-og-imag) +``` + +Relative Bildpfade werden auch für lokal in Ihrem Projekt gespeicherte Bilder unterstützt. + +```md +// src/content/docs/page-1.md + +![Ein Raketenschiff im Weltraum](../../assets/images/rocket.svg) +``` + +## Überschriften + +Mit einer Überschrift kannst du den Inhalt strukturieren. Überschriften in Markdown werden durch eine Reihe von `#` am Anfang der Zeile gekennzeichnet. + +### Wie du Seiteninhalte in Starlight strukturierst + +Starlight ist so konfiguriert, dass es automatisch den Seitentitel als Überschrift verwendet und eine "Übersicht"-Überschrift an den Anfang des Inhaltsverzeichnisses jeder Seite setzt. Wir empfehlen, jede Seite mit normalem Text zu beginnen und die Seitenüberschriften ab `

` zu verwenden: + +```md +--- +title: Markdown Anleitung +description: Wie man Markdown in Starlight benutzt +--- + +Diese Seite beschreibt, wie man Markdown in Starlight benutzt. + +## Inline-Stile + +## Überschriften +``` + +### Automatische Überschriften-Ankerlinks + +Wenn du Überschriften in Markdown verwendst, erhaltst du automatisch Ankerlinks, so dass du direkt auf bestimmte Abschnitte deiner Seite verlinken kannst: + +```md +--- +title: Meine Seite mit Inhalt +description: Wie man Starlight's eingebaute Ankerlinks benutzt +--- + +## Einleitung + +Ich kann auf [meine Schlussfolgerung](#schlussfolgerung) weiter unten auf derselben Seite verlinken. + +## Schlussfolgerung + +`https://meine-site.com/seite1/#einleitung` navigiert direkt zu meiner Einleitung. +``` + +Überschriften der Ebene 2 (`

`) und der Ebene 3 (`

`) werden automatisch im Inhaltsverzeichnis der Seite angezeigt. + +## Nebenbemerkungen + +Nebenbemerkungen (auch bekannt als "Ermahnungen" oder "Callouts") sind nützlich, um sekundäre Informationen neben dem Hauptinhalt einer Seite anzuzeigen. + +Starlight bietet eine eigene Markdown-Syntax für die Darstellung von Nebeninformationen. Seitenblöcke werden mit einem Paar dreifacher Doppelpunkte `:::` angezeigt, um den Inhalt zu umschließen, und können vom Typ `note`, `tip`, `caution` oder `danger` sein. + +Sie können alle anderen Markdown-Inhaltstypen innerhalb einer Nebenbemerkung verschachteln, allerdings eignen sich diese am besten für kurze und prägnante Inhaltsstücke. + +### Nebenbemerkung `note` + +:::note +Starlight ist ein Toolkit für Dokumentations-Websites, das mit [Astro](https://astro.build/de) erstellt wurde. Du kannst mit diesem Befehl beginnen: + +```sh +npm create astro@latest -- --template starlight +``` + +::: + +````md +:::note +Starlight ist ein Toolkit für Dokumentations-Websites, das mit [Astro](https://astro.build/de) erstellt wurde. Du kannst mit diesem Befehl beginnen: + +```sh +npm create astro@latest -- --template starlight +``` + +::: +```` + +### Benutzerdefinierte Nebenbemerkungstitel + +Du kannst einen benutzerdefinierten Titel für die Nebenbemerkung in eckigen Klammern nach dem Typen angeben, z.B. `:::tip[Wusstest du schon?]`. + +:::tip[Wusstest du schon?] +Astro hilft dir, schnellere Websites mit ["Islands Architecture"](https://docs.astro.build/de/concepts/islands/) zu erstellen. +::: + +```md +:::tip[Wusstest du schon?] +Astro hilft dir, schnellere Websites mit ["Islands Architecture"](https://docs.astro.build/de/concepts/islands/) zu erstellen. +::: +``` + +### Weitere Typen + +Vorsichts- und Gefahrenhinweise sind hilfreich, um die Aufmerksamkeit des Benutzers auf Details zu lenken, über die er stolpern könnte. +Wenn du diese häufig verwenden, kann das auch ein Zeichen dafür sein, dass die Sache, die Sie dokumentieren, von einem neuen Design profitieren könnte. + +:::caution +Wenn du nicht sicher bist, ob du eine großartige Dokumentseite willst, überlege es dir zweimal, bevor du [Starlight](../../../) verwendest. +::: + +:::danger +Deine Benutzer können dank hilfreicher Starlight-Funktionen produktiver sein und dein Produkt einfacher nutzen. + +- Übersichtliche Navigation +- Benutzer-konfigurierbares Farbthema +- [i18n-Unterstützung](/de/guides/i18n) + +::: + +```md +:::caution +Wenn du nicht sicher bist, ob du eine großartige Dokumentseite willst, überlege es dir zweimal, bevor du [Starlight](../../) verwendest. +::: + +:::danger +Deine Benutzer können dank hilfreicher Starlight-Funktionen produktiver sein und dein Produkt einfacher nutzen. + +- Übersichtliche Navigation +- Benutzer-konfigurierbares Farbthema +- [i18n-Unterstützung](/de/guides/i18n) + +::: +``` + +## Blockzitate + +> Dies ist ein Blockzitat, das üblicherweise verwendet wird, wenn eine andere Person oder ein Dokument zitiert wird. +> +> Blockzitate werden durch ein ">" am Anfang jeder Zeile gekennzeichnet. + +```md +> Dies ist ein Blockzitat, das üblicherweise verwendet wird, wenn eine andere Person oder ein Dokument zitiert wird. +> +> Blockzitate werden durch ein ">" am Anfang jeder Zeile gekennzeichnet. +``` + +## Code blocks + +Ein Codeblock wird durch einen Block mit drei Backticks ``` am Anfang und Ende gekennzeichnet. Du kannst die verwendete Programmiersprache nach den ersten drei Backticks angeben. + +```js +// Javascript code with syntax highlighting. +var fun = function lang(l) { + dateformat.i18n = require('./lang/' + l); + return true; +}; +``` + +````md +```js +// Javascript code with syntax highlighting. +var fun = function lang(l) { + dateformat.i18n = require('./lang/' + l); + return true; +}; +``` +```` + +```md +Lange, einzeilige Codeblöcke sollten nicht umgebrochen werden. Sie sollten horizontal scrollen, wenn sie zu lang sind. Diese Zeile sollte lang genug sein, um dies zu demonstrieren. +``` + +## Andere allgemeine Markdown-Funktionen + +Starlight unterstützt alle anderen Markdown-Autorensyntaxen, wie Listen und Tabellen. Einen schnellen Überblick über alle Markdown-Syntaxelemente findest du im [Markdown Cheat Sheet von The Markdown Guide](https://www.markdownguide.org/cheat-sheet/). diff --git a/docs/src/content/docs/de/guides/components.mdx b/docs/src/content/docs/de/guides/components.mdx new file mode 100644 index 00000000000..10c34cd3a8b --- /dev/null +++ b/docs/src/content/docs/de/guides/components.mdx @@ -0,0 +1,199 @@ +--- +title: Komponenten +description: Verwendung von Komponenten in MDX mit Starlight. +--- + +Mit Komponenten kannst du auf einfache Weise einen Teil der Benutzeroberfläche oder ein Styling konsistent wiederverwenden, +zum Beispiel eine Linkkarte oder eine YouTube-Einbettung. +Starlight unterstützt die Verwendung von Komponenten in [MDX](https://mdxjs.com/)-Dateien und stellt dir einige gängige Komponenten zur Verfügung, die du verwenden kannst. + +[Erfahre mehr über die Erstellung von Komponenten in den Astro Docs](https://docs.astro.build/de/core-concepts/astro-components/). + +## Verwendung einer Komponente + +Du kannst eine Komponente verwenden, indem du sie in deine MDX-Datei importierst und sie dann als JSX-Tag renders. +Diese sehen wie HTML-Tags aus, beginnen aber mit einem Großbuchstaben, der dem Namen in der `import`-Anweisung entspricht: + +```mdx +--- +# src/content/docs/index.mdx +title: Willkommen bei meiner Dokumentation +--- + +import SomeComponent from '../../../components/SomeComponent.astro'; +import AnotherComponent from '../../../components/AnotherComponent.astro'; + + + + + Komponenten können auch **verschachtelten Inhalt** enthalten. + +``` + +Da Starlight auf Astro basiert, kannst du Komponenten, die mit einem beliebigen [unterstützten UI-Framework (React, Preact, Svelte, Vue, Solid, Lit und Alpine)](https://docs.astro.build/de/core-concepts/framework-components/) erstellt wurden, in deine MDX-Dateien aufnehmen. +Erfahre mehr über [Verwendung von Komponenten in MDX](https://docs.astro.build/de/guides/markdown-content/#using-components-in-mdx) in den Astro-Dokumenten. + +### Kompatibilität mit Starlights Stilen + +Starlight wendet Standardstile auf deinen Markdown-Inhalten an, zum Beispiel das Hinzufügen von Abständen zwischen Elementen. +Wenn diese Stile mit dem Erscheinungsbild deiner Komponente in Konflikt stehen, setze die Klasse `not-content` auf deine Komponente, um sie zu deaktivieren. + +```astro +--- +// src/components/Beispiel.astro +--- + +
+

Not impacted by Starlight’s default content styling.

+
+``` + +## Eingebaute Komponenten + +Starlight bietet einige standardmäßig eingebaute Komponenten für gängige Dokumentationszwecke. +Diese Komponenten sind aus dem Paket `@astrojs/starlight/components` verfügbar. + +### Registerkarten + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +Mit den Komponenten `` und `` kannst du eine Oberfläche mit Registerkarten anzeigen. +Jedes `` muss ein `label` haben, welches dem Benutzer angezeigt wird. + +```mdx +import { Tabs, TabItem } from '@astrojs/starlight/components'; + + + Sirius, Wega, Betelgeuse + Io, Europa, Ganymed + +``` + +Der obige Code erzeugt die folgenden Registerkarten auf der Seite: + + + Sirius, Wega, Betelgeuse + Io, Europa, Ganymed + + +### Karten + +import { Card, CardGrid } from '@astrojs/starlight/components'; + +Mit der Komponente `` kannst du Inhalte in einer Box darstellen, die den Stilen von Starlight entspricht. +Packe mehrere Karten in die `` Komponente ein, um Karten nebeneinander darzustellen, wenn genügend Platz vorhanden ist. + +Eine `` benötigt einen `title` und kann optional ein `icon` Attribut enthalten, welches auf den Namen [eines von Starlights eingebauten Icons](#alle-icons) gesetzt ist. + +```mdx +import { Card, CardGrid } from '@astrojs/starlight/components'; + + + Interessanter Inhalt, den du hervorheben möchtest. + + + + + Sirius, Wega, Betelgeuse + + + Io, Europa, Ganymed + + +``` + +Der obige Code erzeugt folgendes auf der Seite: + + + Interessanter Inhalt, den du hervorheben möchtest. + + + + + Sirius, Wega, Betelgeuse + + + Io, Europa, Ganymed + + + +:::tip[Tipp] +Verwende ein Kartengitter auf deiner Homepage, um die wichtigsten Merkmale deines Projekts darzustellen. +Füge das Attribut `stagger` hinzu, um die zweite Spalte der Karten vertikal zu verschieben und visuell interessant zu gestalten: + +```astro + + + +``` + +::: + +### Link Cards + +Verwende die `` Komponente, um auffallend auf verschiedene Seiten zu verlinken. + +Eine `` benötigt ein `title` und ein [`href`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href) Attribut. Du kannst optional eine kurze `description` oder andere Link-Attribute wie `target` einfügen. + +Gruppiere mehrere ``-Komponenten in ``, um Karten nebeneinander anzuzeigen, wenn genügend Platz vorhanden ist. + +```mdx +import { LinkCard, CardGrid } from '@astrojs/starlight/components'; + + + + + + + +``` + +Der obige Code erzeugt folgendes auf der Seite: + +import { LinkCard } from '@astrojs/starlight/components'; + + + + + + + + +### Icon + +import { Icon } from '@astrojs/starlight/components'; +import IconsList from '../../../../components/icons-list.astro'; + +Starlight stellt eine Reihe von allgemeinen Icons zur Verfügung, die du mit der Komponente `` in deinem Inhalt anzeigen kannst. + +Jedes `` benötigt einen [`name`](#alle-icons) und kann optional ein `label`, `size` und `color` Attribut enthalten. + +```mdx +import { Icon } from '@astrojs/starlight/components'; + + +``` + +Der obige Code erzeugt folgendes auf der Seite: + + + +#### Alle Icons + +Nachfolgend findest du eine Liste aller verfügbaren Icons mit den dazugehörigen Namen. Klicke auf ein Symbol, um den Komponentencode dafür zu kopieren. + + diff --git a/docs/src/content/docs/de/guides/css-and-tailwind.mdx b/docs/src/content/docs/de/guides/css-and-tailwind.mdx new file mode 100644 index 00000000000..849af894492 --- /dev/null +++ b/docs/src/content/docs/de/guides/css-and-tailwind.mdx @@ -0,0 +1,290 @@ +--- +title: CSS & Styling +description: Lerne, wie du deine Starlight-Seite mit benutzerdefiniertem CSS gestalten oder mit Tailwind CSS integrieren kannst. +--- + +Du kannst deine Starlight-Website mit benutzerdefinierten CSS-Dateien gestalten oder das Starlight Tailwind-Plugin verwenden. + +## Benutzerdefinierte CSS-Styles (Stile) + +Passe die Styles deiner Starlight-Seite an, indem du zusätzliche CSS-Dateien bereitstellst, um die Standard-Styles von Starlight zu verändern oder zu erweitern. + +1. Füge eine CSS-Datei zu deinem `src/`-Verzeichnis hinzu. + Du kannst zum Beispiel eine größere Standard-Spaltenbreite und eine größere Textgröße für den Seitentitel festlegen: + + ```css + /* src/styles/custom.css */ + :root { + --sl-content-width: 50rem; + --sl-text-5xl: 3.5rem; + } + ``` + +2. Füge den Pfad zu deiner CSS-Datei in Starlights `customCss`- Array in `astro.config.mjs` ein: + + ```js + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import starlight from '@astrojs/starlight'; + + export default defineConfig({ + integrations: [ + starlight({ + title: 'Dokumentation mit eigenem CSS', + customCss: [ + // Relative Pfad zur eigenen CSS Datei + './src/styles/custom.css', + ], + }), + ], + }); + ``` + +Du kannst dir alle CSS-Eigenschaften, die von Starlight verwendet werden und die du einstellen kannst, um deine Seite anzupassen, in der [Datei `props.css` auf GitHub](https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css) ansehen. + +## Tailwind CSS + +Tailwind CSS-Unterstützung in Astro-Projekten wird durch die [Astro Tailwind-Integration](https://docs.astro.build/de/guides/integrations-guide/tailwind/) bereitgestellt. +Starlight bietet ein komplementäres Tailwind-Plugin, um Tailwind für die Kompatibilität mit den Styles von Starlight zu konfigurieren. + +Das Starlight Tailwind-Plugin wendet die folgende Konfiguration an: + +- Konfiguriert Tailwinds `dark:`-Varianten so, dass sie mit Starlights Dark Mode funktionieren. +- Verwendet Tailwind [Themenfarben und Schriftarten](#starlight-mit-tailwind-designen) in Starlights UI. +- Deaktiviert Tailwinds [Preflight](https://tailwindcss.com/docs/preflight) Zurücksetzungs-Style, während selektiv wesentliche Teile von Preflight wiederhergestellt werden, die für die border-Klassen von Tailwind benötigt werden. + +### Erstelle ein neues Projekt mit Tailwind + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +Starte ein neues Starlight-Projekt mit Tailwind CSS vorkonfiguriert, indem du `create astro` verwendest: + + + + +```sh +npm create astro@latest -- --template starlight/tailwind +``` + + + + +```sh +pnpm create astro --template starlight/tailwind +``` + + + + +```sh +yarn create astro --template starlight/tailwind +``` + + + + +### Tailwind zu einem bestehenden Projekt hinzufügen + +Wenn du bereits eine Starlight-Website hast und Tailwind CSS hinzufügen möchtest, folge dieser Anleitung. + +1. Füge die Tailwind-Integration von Astro hinzu: + + + + + + ```sh + npx astro add tailwind + ``` + + + + + + ```sh + pnpm astro add tailwind + ``` + + + + + + ```sh + yarn astro add tailwind + ``` + + + + + +2. Installiere das Starlight Tailwind-Plugin: + + + + + + ```sh + npm install @astrojs/starlight-tailwind + ``` + + + + + + ```sh + pnpm install @astrojs/starlight-tailwind + ``` + + + + + + ```sh + yarn add @astrojs/starlight-tailwind + ``` + + + + + +3. Erstelle eine CSS-Datei für die grundlegenden Styles von Tailwind, zum Beispiel unter `src/tailwind.css`: + + ```css + /* src/tailwind.css */ + @tailwind base; + @tailwind components; + @tailwind utilities; + ``` + +4. Aktualisiere deine Astro-Konfigurationsdatei, um deine Tailwind-Styles zu verwenden und deaktiviere die Standard-Styles: + + ```js {11-12,16-17} + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import starlight from '@astrojs/starlight'; + import tailwind from '@astrojs/tailwind'; + + export default defineConfig({ + integrations: [ + starlight({ + title: 'Docs with Tailwind', + customCss: [ + // Pfad zu deinen grundlegenden Tailwind-Styles + './src/tailwind.css', + ], + }), + tailwind({ + // Deaktiviere die grundlegenden Styles + applyBaseStyles: false, + }), + ], + }); + ``` + +5. Füge das Starlight Tailwind-Plugin zu `tailwind.config.cjs` hinzu: + + ```js ins={2,7} + // tailwind.config.cjs + const starlightPlugin = require('@astrojs/starlight-tailwind'); + + /** @type {import('tailwindcss').Config} */ + module.exports = { + content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], + plugins: [starlightPlugin()], + }; + ``` + +### Starlight mit Tailwind designen + +Starlight verwendet Werte aus deiner [Tailwind-Theme-Konfiguration](https://tailwindcss.com/docs/theme) in der Benutzeroberfläche. + +Falls gesetzt, überschreiben die folgenden Optionen die Standard-Styles von Starlight: + +- `colors.accent` - wird für Links und die Hervorhebung des aktuellen Elements verwendet +- `colors.gray` - wird für Hintergrundfarben und Rahmen verwendet +- `fontFamily.sans` - wird für UI und Inhaltstext verwendet +- `fontFamily.mono` - wird für Code-Beispiele verwendet + +```js {12,14,18,20} +// tailwind.config.cjs +const starlightPlugin = require('@astrojs/starlight-tailwind'); +const colors = require('tailwindcss/colors'); + +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], + theme: { + extend: { + colors: { + // Deine bevorzugte Akzentfarbe. Indigo entspricht am ehesten den Standardeinstellungen von Starlight. + accent: colors.indigo, + // Deine bevorzugte Grauskala. Zink kommt den Standardeinstellungen von Starlight am nächsten. + grau: colors.zinc, + }, + fontFamily: { + // Deine bevorzugte Schriftart. Starlight verwendet standardmäßig eine Systemschriftart. + sans: ['"Atkinson Hyperlegible"'], + // Deine bevorzugte Code-Schriftart. Starlight verwendet standardmäßig die Systemschriftart Monospace. + mono: ['"IBM Plex Mono"'], + }, + }, + }, + plugins: [starlightPlugin()], +}; +``` + +## Themes + +Das Farbtheme von Starlight kann gesteuert werden, indem die Standardeinstellungen überschrieben werden. +Diese Variablen werden in der gesamten Benutzeroberfläche verwendet, wobei eine Reihe von Grautönen für Text- und Hintergrundfarben sowie eine Akzentfarbe für Links und zur Hervorhebung aktueller Elemente in der Navigation verwendet werden. + +### Farbdesign-Editor + +Verwende die Schieberegler unten, um die Akzent- und Graufarbpalette von Starlight zu ändern. +Die dunklen und hellen Vorschaubereiche zeigen die resultierenden Farben, und die gesamte Seite wird ebenfalls aktualisiert, um deine Änderungen anzuzeigen. + +Wenn du mit deinen Änderungen zufrieden bist, kopiere den CSS- oder Tailwind-Code unten und verwende ihn in deinem Projekt. + +import ThemeDesigner from '../../../../components/theme-designer.astro'; + + + + Füge das folgende CSS in deinem Projekt in eine [benutzerdefinierte CSS-Datei](#custom-css-styles) + ein, um dieses Theme auf deiner Website anzuwenden. + + + Das folgende Beispiel + [Tailwind-Konfigurationsdatei](#starlight-mit-tailwind-designen) enthält + generierte `accent` und `gray` Farbpaletten, welche du im + Konfigurationsobjekt `theme.extend.colors` verwenden kannst. + + diff --git a/docs/src/content/docs/de/guides/customization.mdx b/docs/src/content/docs/de/guides/customization.mdx new file mode 100644 index 00000000000..b602c5cfa92 --- /dev/null +++ b/docs/src/content/docs/de/guides/customization.mdx @@ -0,0 +1,428 @@ +--- +title: Starlight anpassen +description: Lerne, wie du deine Starlight-Site mit deinem Logo, eigenen Schriftarten, Landing-Page-Design und vielem mehr zu deiner eigenen machen kannst. +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; +import FileTree from '../../../../components/file-tree.astro'; + +Starlight bietet sinnvolle Standard-Styling und -Funktionen, so dass du schnell loslegen kannst, ohne dass eine Konfiguration erforderlich ist. +Wenn du das Aussehen deiner Starlight-Website anpassen willst, findest du in dieser Anleitung alle nötigen Informationen. + +## Dein Logo hinzufügen + +Das Hinzufügen eines eigenen Logos im Header ist ein schneller Weg, um einer Starlight-Website dein individuelles Branding zu geben. + +1. Füge deine Logodatei in das Verzeichnis `src/assets/` ein: + + + + - src/ + - assets/ + - **mein-logo.svg** + - content/ + - astro.config.mjs + + + +2. Füge den Pfad zu deinem Logo als Starlights [`logo.src`](/de/reference/configuration/#logo) Option in `astro.config.mjs` ein: + + ```js + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import starlight from '@astrojs/starlight'; + + export default defineConfig({ + integrations: [ + starlight({ + title: 'Dokumentation mit meinem Logo', + logo: { + src: './src/assets/mein-logo.svg', + }, + }), + ], + }); + ``` + +Standardmäßig wird das Logo neben dem `title` deiner Website angezeigt. +Wenn dein Logobild bereits den Titel der Website enthält, kannst du den Titeltext optisch ausblenden, indem du die Option `replacesTitle` setzt. +Der `title`-Text wird für Bildschirmleser weiterhin angezeigt, so dass die Kopfzeile zugänglich bleibt. + +```js +starlight({ + title: 'Dokumentation mit meinem Logo', + logo: { + src: './src/assets/mein-logo.svg', + replacesTitle: true, + }, +}), +``` + +### Light- und Dark-Mode Logovarianten + +Du kannst verschiedene Versionen deines Logos im Light- und Dark-Mode anzeigen. + +1. Füge eine Bilddatei für jede Variante zu `src/assets/` hinzu: + + + + - src/ + - assets/ + - **light-logo.svg** + - **dark-logo.svg** + - content/ + - astro.config.mjs + + + +2. Füge den Pfad zu deiner Logovarianten als die Optionen `light` und `dark` anstelle von `src` in `astro.config.mjs` ein: + + ```js + starlight({ + title: 'Dokumentation mit meinem Logo', + logo: { + light: './src/assets/light-logo.svg', + dark: './src/assets/dark-logo.svg', + }, + }), + ``` + +## Sitemap aktivieren + +Starlight hat eine eingebaute Unterstützung für die Erstellung einer Sitemap. Aktiviere die Sitemap-Generierung, indem du deine URL als `site` in `astro.config.mjs` angibst: + +```js +// astro.config.mjs + +export default defineConfig({ + site: 'https://stargazers.club', + integrations: [starlight({ title: 'Website mit Sitemap' })], +}); +``` + +## Seitenlayout + +Starlight-Seiten verwenden standardmäßig ein Layout mit einer globalen Navigation und einem Inhaltsverzeichnis, das die aktuellen Seitenüberschriften anzeigt. + +Du kannst ein breiteres Seitenlayout ohne Navigationen verwenden, indem du [`template: splash`](/de/reference/frontmatter/#template) im Frontmatter einer Seite setzt. +Dies funktioniert besonders gut für Landingpages, und du kannst es in Aktion auf der [Homepage dieser Website](/de/) sehen. + +```md +--- +# src/content/docs/index.md + +title: Meine Landing Page +template: splash +--- +``` + +## Inhaltsverzeichnis + +Starlight zeigt auf jeder Seite ein Inhaltsverzeichnis an, um es den Lesern zu erleichtern, zu der gesuchten Überschrift zu springen. +Du kannst das Inhaltsverzeichnis global in der Starlight-Integration oder seitenweise im Frontmatter anpassen - oder sogar deaktivieren. + +Standardmäßig werden die Überschriften `

` und `

` in das Inhaltsverzeichnis aufgenommen. Ändere die Überschriftsebenen für die gesamte Website mit den Optionen `minHeadingLevel` und `maxHeadingLevel` in deinem [globalen `tableOfContents`](/de/reference/configuration/#tableofcontents). Überschreibe diese Standardwerte auf einer individuellen Seite, indem du die entsprechenden [Frontmatter `tableOfContents`](/de/reference/frontmatter/#tableofcontents) Eigenschaften hinzufügst: + + + + +```md +--- +# src/content/docs/example.md +title: Seite mit nur H2s im Inhaltsverzeichnis +tableOfContents: + minHeadingLevel: 2 + maxHeadingLevel: 2 +--- +``` + + + + +```js +// astro.config.mjs + +defineConfig({ + integrations: [ + starlight({ + title: '', + tableOfContents: { minHeadingLevel: 2, maxHeadingLevel: 2 }, + }), + ], +}); +``` + + + + +Deaktiviere das Inhaltsverzeichnis vollständig, indem du die Option `tableOfContents` auf `false` setzt: + + + + +```md +--- +# src/content/docs/example.md +title: Seite ohne Inhaltsverzeichnis +tableOfContents: false +--- +``` + + + + +```js +// astro.config.mjs + +defineConfig({ + integrations: [ + starlight({ + title: 'Dokumentation mit global deaktiviertem Inhaltsverzeichnis', + tableOfContents: false, + }), + ], +}); +``` + + + + +## Social Links + +Starlight bietet integrierte Unterstützung für das Hinzufügen von Links zu deinen Social-Media-Accounts in der Kopfzeile der Website über die Option [`social`](/de/reference/configuration/#social) in der Starlight-Integration. + +Eine vollständige Liste der unterstützten Dienste findest du in der [Konfigurationsreferenz](/de/reference/configuration/#social). +Lasse uns auf GitHub oder Discord wissen, wenn du Unterstützung für einen anderen Dienst benötigst! + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; +import starlight from '@astrojs/starlight'; + +export default defineConfig({ + integrations: [ + starlight({ + title: 'Dokumentation mit social Links', + social: { + discord: 'https://astro.build/chat', + github: 'https://github.com/withastro/starlight', + }, + }), + ], +}); +``` + +## Bearbeitungslinks + +Starlight kann einen "Seite bearbeiten"-Link in der Fußzeile jeder Seite anzeigen. +Dies macht es dem Leser leicht, die zu bearbeitende Datei zu finden, um deine Dokumentation zu verbessern. +Insbesondere bei Open-Source-Projekten kann dies dazu beitragen, Beiträge aus deiner Community zu fördern. + +Um Edit-Links zu aktivieren, setze [`editLink.baseUrl`](/de/reference/configuration/#editlink) auf die URL, die du zum Bearbeiten deines Repositorys in der Starlight-Integrationskonfiguration verwendest. +Der Wert von `editLink.baseUrl` wird dem Pfad zur aktuellen Seite vorangestellt, um den vollständigen Bearbeitungslink zu bilden. + +Übliche Muster sind: + +- GitHub: `https://github.com/BENUTZERNAME/REPOSITORY_NAME/edit/BRANCH_NAME/` +- GitLab: `https://gitlab.com/BENUTZERNAME/REPOSITORY_NAME/-/edit/BRANCH_NAME/` + +Wenn sich dein Starlight-Projekt nicht im Stammverzeichnis deines Repositorys befindet, füge den Pfad zum Projekt am Ende der Basis-URL ein. + +Dieses Beispiel zeigt den Bearbeitungslink, der für die Starlight-Dokumente konfiguriert ist, die sich im Unterverzeichnis `docs/` im `main`-Branch des `withastro/starlight`-Repository auf GitHub befinden: + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; +import starlight from '@astrojs/starlight'; + +export default defineConfig({ + integrations: [ + starlight({ + title: 'Dokumentation mit Bearbeitungslinks', + editLink: { + baseUrl: 'https://github.com/withastro/starlight/edit/main/docs/', + }, + }), + ], +}); +``` + +## Benutzerdefinierte 404-Seite + +Starlight-Seiten zeigen standardmäßig eine einfache 404-Seite an. +Du kannst dies anpassen, indem du eine `404.md` (oder `404.mdx`) Datei zu deinem `src/content/docs/` Verzeichnis hinzufügst: + + + +- src/ + - content/ + - docs/ + - **404.md** + - index.md +- astro.config.mjs + + + +Du kannst alle Seitenlayout- und Anpassungstechniken von Starlight in deiner 404-Seite verwenden. Zum Beispiel verwendet die Standard 404-Seite die [`splash` Vorlage](#seitenlayout) und [`hero`](/de/reference/frontmatter/#hero) Komponente in Frontmatter: + +```md +--- +title: '404' +template: splash +editUrl: false +hero: + title: '404' + tagline: Seite nicht gefunden. Überprüfe die URL oder versuche es mit der Suchfunktion. +--- +``` + +## Benutzerdefinierte Schriftarten + +Standardmäßig verwendet Starlight serifenlose Schriften, die auf dem lokalen Gerät des Benutzers verfügbar sind, für den gesamten Text. +Dadurch wird sichergestellt, dass die Dokumentation schnell in einer Schriftart geladen wird, die jedem Benutzer vertraut ist, ohne dass zusätzliche Bandbreite für das Herunterladen großer Schriftdateien benötigt wird. + +Wenn du deiner Starlight-Website eine eigene Schriftart hinzufügen musst, kannst du die Schriftarten in eigenen CSS-Dateien oder mit anderen [Astro-Styling-Techniken](https://docs.astro.build/de/guides/styling/) einrichten. + +### Schriftarten einrichten + +Wenn du bereits über Schriftartdateien verfügst, folge der [Anleitung zum Einrichten lokaler Schriftartdateien](#lokale-schriftartendateien-einrichten). +Um Google Fonts zu verwenden, folge der [Anleitung Fontsource einrichten](#einrichten-einer-fontsource-schriftart). + +#### Lokale Schriftartendateien einrichten + +1. Füge deine Schriftdateien in ein `src/fonts/`-Verzeichnis ein und erstelle eine leere `font-face.css`-Datei: + + + + - src/ + - content/ + - fonts/ + - **CustomFont.woff2** + - **font-face.css** + - astro.config.mjs + + + +2. Füge eine [`@font-face`-Deklaration](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) für jede deiner Schriftarten in `src/fonts/font-face.css` ein. + Verwende einen relativen Pfad zu der Schriftartdatei in der Funktion `url()`. + + ```css + /* src/fonts/font-face.css */ + + @font-face { + font-family: 'Custom Font'; + /* Verwende einen relativen Pfad zur lokalen Schriftdatei in `url()`. */ + src: url('./CustomFont.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: swap; + } + ``` + +3. Füge den Pfad zu deiner `font-face.css`-Datei zu Starlights `customCss`-Array in `astro.config.mjs` hinzu: + + ```js + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import starlight from '@astrojs/starlight'; + + export default defineConfig({ + integrations: [ + starlight({ + title: 'Dokumentation mit benutzerdefinierter Schriftart', + customCss: [ + // Relativer Pfad zu Ihrer @font-face CSS-Datei. + './src/fonts/font-face.css', + ], + }), + ], + }); + ``` + +#### Einrichten einer Fontsource-Schriftart + +Das [Fontsource](https://fontsource.org/) Projekt vereinfacht die Verwendung von Google Fonts und anderen Open-Source-Schriften. +Es bietet npm-Module, die du für die gewünschten Schriftarten installieren kannst, und enthält fertige CSS-Dateien, die du deinem Projekt hinzufügen kannst. + +1. Suche die Schriftart, die du verwenden möchten, im [Fontsource-Katalog](https://fontsource.org/). + In diesem Beispiel wird [IBM Plex Serif](https://fontsource.org/fonts/ibm-plex-serif) verwendet. + +2. Installiere das Paket für deine gewählte Schriftart. + Du findest den Namen des Pakets, indem du auf der Fontsource-Website auf `Installieren` klickst. + + + + + + ```sh + npm install @fontsource/ibm-plex-serif + ``` + + + + + + ```sh + pnpm install @fontsource/ibm-plex-serif + ``` + + + + + + ```sh + yarn add @fontsource/ibm-plex-serif + ``` + + + + + +3. Füge die CSS-Dateien von Fontsource zum Array `customCss` von Starlight in `astro.config.mjs` hinzu: + + ```js + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import starlight from '@astrojs/starlight'; + + export default defineConfig({ + integrations: [ + starlight({ + title: 'Dokumentation mit benutzerdefinierter Schriftart', + customCss: [ + // Schriftquelldateien für normale und halbfette Schriftschnitte. + '@fontsource/ibm-plex-serif/400.css', + '@fontsource/ibm-plex-serif/600.css', + ], + }), + ], + }); + ``` + + Fontsource liefert mehrere CSS-Dateien für jede Schriftart. Siehe die [Fontsource-Dokumentation](https://fontsource.org/docs/getting-started/install#4-weights-and-styles) über das Einbinden verschiedener Schriftstärken und Styles, um zu verstehen, welche zu verwenden sind. + +### Schriftarten verwenden + +Um deine eingerichtete Schriftart auf deiner Website anzuwenden, verwende den Namen der gewählten Schriftart in einer [benutzerdefinierten CSS-Datei](/de/guides/css-and-tailwind/#benutzerdefinierte-css-styles-stile). +Um zum Beispiel die Standard-Schriftart von Starlight überall zu überschreiben, setze die benutzerdefinierte Eigenschaft `--sl-font`: + +```css +/* src/styles/custom.css */ + +:root { + --sl-font: 'IBM Plex Serif', serif; +} +``` + +Du kannst auch spezifischeres CSS schreiben, wenn du deine Schriftart selektiver anwenden willst. +Zum Beispiel, um eine Schriftart nur auf den Hauptinhalt zu setzen, aber nicht auf die Seitennavigation: + +```css +/* src/styles/custom.css */ + +main { + font-family: 'IBM Plex Serif', serif; +} +``` + +Folge der [Anleitung für benutzerdefiniertes CSS-Styles](/de/guides/css-and-tailwind/#benutzerdefinierte-css-styles-stile), um deine Styles zu deiner Website hinzuzufügen. diff --git a/docs/src/content/docs/de/guides/i18n.mdx b/docs/src/content/docs/de/guides/i18n.mdx new file mode 100644 index 00000000000..46478e5d25b --- /dev/null +++ b/docs/src/content/docs/de/guides/i18n.mdx @@ -0,0 +1,221 @@ +--- +title: Internationalisierung (i18n) +description: Lerne, wie du deine Starlight-Website so konfigurierst, dass sie mehrere Sprachen unterstützt. +--- + +import FileTree from '../../../../components/file-tree.astro'; + +Starlight bietet eingebaute Unterstützung für mehrsprachige Seiten, einschließlich Routing, Fallback-Inhalte und vollständige Unterstützung von rechts-nach-links (RTL) Sprachen. + +## Konfiguriere i18n + +1. Teile Starlight mit, welche Sprachen du unterstützt, indem du [`locales`](/de/reference/configuration/#locales) und [`defaultLocale`](/de/reference/configuration/#defaultlocale) an die Starlight Integration übergibst: + + ```js + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import starlight from '@astrojs/starlight'; + + export default defineConfig({ + integrations: [ + starlight({ + title: 'Meine Dokumentation', + // Lege Englisch als Standardsprache für diese Website fest. + defaultLocale: 'en', + locales: { + // Englische Dokumente in `src/content/docs/en/` + en: { + label: 'English', + }, + // Vereinfachte chinesische Dokumente in `src/content/docs/zh/` + zh: { + label: '简体中文', + lang: 'zh-CN', + }, + // Arabische Dokumente in `src/content/docs/ar/` + ar: { + label: 'العربية', + dir: 'rtl', + }, + }, + }), + ], + }); + ``` + + Dein `defaultLocale` wird für Fallback-Inhalte und UI-Labels verwendet, wähle also die Sprache, in der du am ehesten mit dem Schreiben von Inhalten beginnen wirst oder für die du bereits Inhalte hast. + +2. Erstelle ein Verzeichnis für jede Sprache in `src/content/docs/`. + Für die oben gezeigte Konfiguration erstellst du zum Beispiel die folgenden Verzeichnisse: + + + + - src/ + - content/ + - docs/ + - ar/ + - en/ + - zh/ + + + +3. Du kannst nun Inhaltsdateien in deinen Sprachverzeichnissen hinzufügen. Verwende den gleichen Dateinamen, um Seiten in verschiedenen Sprachen zuzuordnen und nutze Starlights volle i18n-Funktionen, einschließlich Fallback-Inhalte, Übersetzungshinweise und mehr. + + Erstelle zum Beispiel `ar/index.md` und `en/index.md`, um die Homepage für Arabisch bzw. Englisch darzustellen. + +### Verwende ein Root-Verzeichnis + +Du kannst ein Root-Verzeichnis verwenden, um eine Sprache ohne i18n-Präfix in ihrem Pfad anzubieten. Wenn zum Beispiel Englisch dein Stammverzeichnis ist, würde ein englischer Seitenpfad unter `/about` anstelle von `/en/about` zu finden sein. + +Um ein Stammverzeichnis festzulegen, verwende den Key `root` in deiner `locales`-Konfiguration. Wenn das Root-Verzeichnis auch das Standard-Verzeichnis für deinen Inhalt ist, entferne `defaultLocale` oder setze es auf `'root'`. + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; +import starlight from '@astrojs/starlight'; + +export default defineConfig({ + integrations: [ + starlight({ + title: 'Meine Dokumentation', + defaultLocale: 'root', // optional + locales: { + root: { + label: 'English', + lang: 'en', // lang ist für Stammverzeichnis erforderlich + }, + zh: { + label: '简体中文', + lang: 'zh-CN', + }, + }, + }), + ], +}); +``` + +Wenn du ein `root`-Verzeichnis verwendest, speichere die Seiten für diese Sprache direkt in `src/content/docs/`, anstatt in einem speziellen Sprachordner. Zum Beispiel sind hier die Homepage-Dateien für Englisch und Chinesisch, wenn man die obige Konfiguration verwendet: + + + +- src/ + - content/ + - docs/ + - **index.md** + - zh/ + - **index.md** + + + +#### Einsprachige Seiten + +Standardmäßig ist Starlight eine einsprachige (englische) Website. Um eine einsprachige Website in einer anderen Sprache zu erstellen, setze diese als `root` in Ihrer `locales` Konfiguration: + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; +import starlight from '@astrojs/starlight'; + +export default defineConfig({ + integrations: [ + starlight({ + title: 'Meine Dokumentation', + locales: { + root: { + label: '简体中文', + lang: 'zh-CN', + }, + }, + }), + ], +}); +``` + +Dies ermöglicht es dir, die Standardsprache von Starlight zu überschreiben, ohne andere Internationalisierungsfunktionen für mehrsprachige Seiten zu aktivieren, wie z.B. die Sprachauswahl. + +## Fallback-Inhalt + +Starlight erwartet, dass du äquivalente Seiten in allen deinen Sprachen erstellst. Wenn du zum Beispiel eine `de/about.md` Datei hast, erstelle eine `about.md` für jede andere Sprache, die du unterstützt. Dies ermöglicht Starlight, automatisch Ersatzinhalte für Websiten zu liefern, die noch nicht übersetzt wurden. + +Wenn für eine Sprache noch keine Übersetzung verfügbar ist, zeigt Starlight den Lesern den Inhalt dieser Seite in der Standardsprache (eingestellt über `defaultLocale`). Wenn du z.B. noch keine französische Version Ihrer "About"-Website erstellt hast und deine Standardsprache Englisch ist, werden Besucher von `/fr/about` den englischen Inhalt von `/en/about` sehen, mit einem Hinweis, dass diese Seite noch nicht übersetzt wurde. Auf diese Weise kannst du Inhalte in deiner Standardsprache hinzufügen und sie dann nach und nach übersetzen, wenn du Lust dazu hast. + +## Starlights UI übersetzen + +Starlight bietet nicht nur übersetzte Inhaltsdateien, sondern auch die Möglichkeit, die Standard-Benutzeroberfläche zu übersetzen (z.B. die Überschrift "Auf dieser Seite" im Inhaltsverzeichnis), so dass deine Leser deine Website vollständig in der ausgewählten Sprache erleben können. + +Englisch, Tschechisch, Französisch, Deutsch, Italienisch, Japanisch, Portugiesisch, Niederländisch, Dänisch, Spanisch, Türkisch, Arabisch, Norwegisch, Farsi, Hebräisch, Chinesisch (vereinfacht), Koreanisch, Indonesisch, Russisch, Schwedisch, Ukrainisch und Vietnamesisch werden standardmäßig übersetzt, und wir freuen uns über [Beiträge zur Aufnahme weiterer Standardsprachen](https://github.com/withastro/starlight/blob/main/CONTRIBUTING.md). + +Du kannst Übersetzungen für zusätzliche Sprachen, die du unterstützt, über die `i18n` Datensammlung zur Verfügung stellen - oder unsere Standardbezeichnungen überschreiben. + +1. Konfiguriere die `i18n` Datensammlung in `src/content/config.ts`, wenn sie nicht bereits konfiguriert ist: + + ```js + // src/content/config.ts + import { defineCollection } from 'astro:content'; + import { docsSchema, i18nSchema } from '@astrojs/starlight/schema'; + + export const collections = { + docs: defineCollection({ schema: docsSchema() }), + i18n: defineCollection({ type: 'data', schema: i18nSchema() }), + }; + ``` + +2. Erstelle eine JSON-Datei in `src/content/i18n/` für jedes zusätzliche Gebietsschema, für das du UI-Übersetzungsstrings bereitstellen möchtest. + Dies würde zum Beispiel Übersetzungsdateien für Arabisch und vereinfachtes Chinesisch hinzufügen: + + + + - src/ + - content/ + - i18n/ + - ar.json + - zh-CN.json + + + +3. Füge Übersetzungen für die Schlüssel hinzu, die in den JSON-Dateien übersetzt werden sollen. Übersetze nur die Werte und belasse die Schlüssel auf Englisch (z.B. `"search.label": "Buscar"`). + + Dies sind die englischen Standardwerte der vorhandenen Strings, mit denen Starlight ausgeliefert wird: + + ```json + { + "skipLink.label": "Skip to content", + "search.label": "Search", + "search.shortcutLabel": "(Press / to Search)", + "search.cancelLabel": "Cancel", + "search.devWarning": "Search is only available in production builds. \nTry building and previewing the site to test it out locally.", + "themeSelect.accessibleLabel": "Select theme", + "themeSelect.dark": "Dark", + "themeSelect.light": "Light", + "themeSelect.auto": "Auto", + "languageSelect.accessibleLabel": "Select language", + "menuButton.accessibleLabel": "Menu", + "sidebarNav.accessibleLabel": "Main", + "tableOfContents.onThisPage": "On this page", + "tableOfContents.overview": "Overview", + "i18n.untranslatedContent": "This content is not available in your language yet.", + "page.editLink": "Edit page", + "page.lastUpdated": "Last updated:", + "page.previousLink": "Next", + "page.nextLink": "Previous", + "404.text": "Page not found. Check the URL or try using the search bar." + } + ``` + + Die Suchfunktion von Starlight wird von der [Pagefind-Bibliothek](https://pagefind.app/) unterstützt. + Du kannst die Übersetzungen für Pagefinds UI in der gleichen JSON Datei mit `pagefind`-Schlüsseln setzen: + + ```json + { + "pagefind.clear_search": "Clear", + "pagefind.load_more": "Load more results", + "pagefind.search_label": "Search this site", + "pagefind.filters_label": "Filters", + "pagefind.zero_results": "No results for [SEARCH_TERM]", + "pagefind.many_results": "[COUNT] results for [SEARCH_TERM]", + "pagefind.one_result": "[COUNT] result for [SEARCH_TERM]", + "pagefind.alt_search": "No results for [SEARCH_TERM]. Showing results for [DIFFERENT_TERM] instead", + "pagefind.search_suggestion": "No results for [SEARCH_TERM]. Try one of the following searches:", + "pagefind.searching": "Searching for [SEARCH_TERM]..." + } + ``` diff --git a/docs/src/content/docs/de/guides/overriding-components.md b/docs/src/content/docs/de/guides/overriding-components.md new file mode 100644 index 00000000000..66ab338cbbb --- /dev/null +++ b/docs/src/content/docs/de/guides/overriding-components.md @@ -0,0 +1,133 @@ +--- +title: Komponenten ersetzen +description: In Starlight kannst du eingebauten Komponenten ersetzen, um eigene Elemente in die Benutzeroberfläche deiner Dokumentationsseite einzufügen. +sidebar: + badge: New +--- + +Starlight's Standard-UI und Konfigurationsoptionen sind so gestaltet, dass sie flexibel sind und für eine Reihe von Inhalten funktionieren. Ein Großteil des Standardaussehens von Starlight kann mit [CSS](/de/guides/css-and-tailwind/) und [Konfigurationsoptionen](/de/guides/customization/) angepasst werden. + +Wenn du mehr brauchst als das, was von Haus aus möglich ist, unterstützt Starlight die Erstellung eigener Komponenten, um die Standardkomponenten zu erweitern oder zu ersetzen. + +## Wann solltest du ersetzen + +Die Standardkomponenten von Starlight zu überschreiben kann nützlich sein, wenn: + +- Du das Aussehen eines Teils der Starlight-Benutzeroberfläche auf eine Weise ändern möchest, was mit [eigenem CSS](/de/guides/css-and-tailwind/) nicht möglich ist. +- Du das Verhalten eines Teils der Starlight-Benutzeroberfläche ändern möchtest. +- Du zusätzliche UI neben Starlights bestehender UI hinzufügen willst. + +## Wie kann man das ersetzen + +1. Wähle die Starlight-Komponente, die du überschreiben möchtest. + Du kannst eine vollständige Liste der Komponenten in der [Komponenten-Ersetzung Referenz](/de/reference/overrides/) finden. + + In diesem Beispiel wird die Starlight-Komponente [`SocialIcons`](/de/reference/overrides/#socialicons) in der Navigationsleiste der Seite außer Kraft gesetzt. + +2. Erstelle eine Astro-Komponente, mit der du die Starlight-Komponente ersetzt. + Dieses Beispiel rendert einen Kontakt-Link. + + ```astro + --- + // src/components/EmailLink.astro + import type { Props } from '@astrojs/starlight/props'; + --- + + Schreib mir + ``` + +3. Sage Starlight, dass deine benutzerdefinierte Komponente in der Konfigurationsoption [`components`](/de/reference/configuration/#components) in `astro.config.mjs` verwendet werden soll: + + ```js {9-12} + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import starlight from '@astrojs/starlight'; + + export default defineConfig({ + integrations: [ + starlight({ + title: 'Meine Dokumentation nutzt eigene Komponenten', + components: { + // Ersetze den Standardkomponent `SocialIcons` + SocialIcons: './src/components/EmailLink.astro', + }, + }), + ], + }); + ``` + +## Eine integrierte Komponente wiederverwenden + +Du kannst mit den Standard-UI-Komponenten von Starlight genauso arbeiten, wie du es mit deinen eigenen tun würdest: Importieren und Rendern in deinen eigenen benutzerdefinierten Komponenten. Dadurch kannst du die gesamte grundlegende Benutzeroberfläche von Starlight in deinem Design beibehalten und gleichzeitig zusätzliche Benutzeroberflächen hinzufügen. + +Das folgende Beispiel zeigt eine benutzerdefinierte Komponente, die einen E-Mail-Link zusammen mit der Standardkomponente `SocialIcons` rendert: + +```astro {4,8} +--- +// src/components/EmailLink.astro +import type { Props } from '@astrojs/starlight/props'; +import Default from '@astrojs/starlight/components/SocialIcons.astro'; +--- + +Schreib mir + +``` + +Beim Rendern einer integrierten Komponente innerhalb einer benutzerdefinierten Komponente: + +- Verbreite `Astro.props` darin. Dadurch wird sichergestellt, dass es alle Daten erhält, die es zum Rendern benötigt. +- Füge einen [``](https://docs.astro.build/de/core-concepts/astro-components/#slots) innerhalb der Standardkomponente hinzu. Dadurch wird sichergestellt, dass Astro weiß, wo die Komponente gerendert werden muss, wenn der Komponente untergeordnete Elemente übergeben werden. + +## Seitendaten verwenden + +Beim Überschreiben einer Starlight-Komponente erhält deine benutzerdefinierte Implementierung ein Standardobjekt `Astro.props`, das alle Daten für die aktuelle Seite enthält. +Dadurch kannst du diese Werte verwenden, um zu steuern, wie deine Komponentenvorlage gerendert wird. + +Beispielsweise kannst du die Frontmatter-Werte der Seite als `Astro.props.entry.data` lesen. Im folgenden Beispiel verwendet eine Ersatzkomponente [`PageTitle`](/de/reference/overrides/#pagetitle) dies, um den Titel der aktuellen Seite anzuzeigen: + +```astro {5} "{title}" +--- +// src/components/Title.astro +import type { Props } from '@astrojs/starlight/props'; + +const { title } = Astro.props.entry.data; +--- + +

{title}

+ + +``` + +Erfahre mehr über alle verfügbaren Requisiten in der [Komponenten-Ersetzung Referenz](/de/reference/overrides/#komponenteneigenschaften-props). + +### Nur auf bestimmten Seiten überschreiben + +Komponentenüberschreibungen gelten für alle Seiten. Du kannst jedoch bedingt mit Werten aus `Astro.props` rendern, um zu bestimmen, wann deine benutzerdefinierte Benutzeroberfläche, wann die Standardbenutzeroberfläche von Starlight oder sogar etwas völlig anderes angezeigt werden soll. + +Im folgenden Beispiel zeigt eine Komponente, die Starlights [`Footer`](/de/reference/overrides/#fußzeile) überschreibt, nur auf der Startseite „Verwendet Starlight 🌟“ an und zeigt ansonsten auf allen anderen Seiten die Standardfußzeile an: + +```astro +--- +// src/components/ConditionalFooter.astro +import type { Props } from '@astrojs/starlight/props'; +import Default from '@astrojs/starlight/components/Footer.astro'; + +const isHomepage = Astro.props.slug === ''; +--- + +{ + isHomepage ? ( +
Verwendet Starlight 🌟
+ ) : ( + + + + ) +} +``` + +Weitere Informationen zum bedingten Rendering findest du im [Astro-Leitfaden zur Vorlagensyntax](https://docs.astro.build/de/core-concepts/astro-syntax/#dynamisches-html). diff --git a/docs/src/content/docs/de/guides/project-structure.mdx b/docs/src/content/docs/de/guides/project-structure.mdx new file mode 100644 index 00000000000..093cdc35562 --- /dev/null +++ b/docs/src/content/docs/de/guides/project-structure.mdx @@ -0,0 +1,48 @@ +--- +title: Projektstruktur +description: Lerne, wie du Dateien in deinem Starlight-Projekt organisierst. +--- + +Diese Anleitung zeigt dir, wie ein Starlight-Projekt organisiert ist und was die verschiedenen Dateien in deinem Projekt tun. + +Starlight-Projekte folgen im Allgemeinen der gleichen Datei- und Verzeichnisstruktur wie andere Astro-Projekte. Siehe [Astros Dokumentation zur Projektstruktur](https://docs.astro.build/de/core-concepts/project-structure/) für weitere Details. + +## Dateien und Verzeichnisse + +- `astro.config.mjs` - Die Astro-Konfigurationsdatei; enthält die Starlight-Integration und -Konfiguration. +- `src/content/config.ts` - Konfigurationsdatei für Inhaltssammlungen; fügt Starlights Frontmatter-Schema zu deinem Projekt hinzu. +- `src/content/docs/` - Inhaltsdateien. Starlight verwandelt jede `.md`, `.mdx` oder `.mdoc` Datei in diesem Verzeichnis in eine Seite auf deiner Website. +- `src/content/i18n/` (optional) - Übersetzungsdaten zur Unterstützung der [Internationalisierung](/de/guides/i18n/). +- `src/` - Anderer Quellcode und Dateien (Komponenten, Stile, Bilder, etc.) für dein Projekt. +- `public/` - Statische Assets (Schriftarten, Favicon, PDFs, etc.), die nicht von Astro verarbeitet werden. + +## Beispielhafte Projektinhalte + +Ein Starlight-Projektverzeichnis könnte wie folgt aussehen: + +import FileTree from '../../../../components/file-tree.astro'; + + + +- public/ + - favicon.svg +- src/ + - assets/ + - logo.svg + - screenshot.jpg + - components/ + - CustomButton.astro + - InteractiveWidget.jsx + - content/ + - docs/ + - guides/ + - 01-getting-started.md + - 02-advanced.md + - index.mdx + - config.ts + - env.d.ts +- astro.config.mjs +- package.json +- tsconfig.json + + diff --git a/docs/src/content/docs/de/guides/sidebar.mdx b/docs/src/content/docs/de/guides/sidebar.mdx new file mode 100644 index 00000000000..aa5c6cd483b --- /dev/null +++ b/docs/src/content/docs/de/guides/sidebar.mdx @@ -0,0 +1,516 @@ +--- +title: Seitenleisten-Navigation +description: Erfahre, wie du die Navigationslinks in der Seitenleiste deiner Starlight-Website einrichten und anpassen kannst. +--- + +import FileTree from '../../../../components/file-tree.astro'; +import SidebarPreview from '../../../../components/sidebar-preview.astro'; + +Eine gut organisierte Seitenleiste ist der Schlüssel zu einer guten Dokumentation, da sie eine der Hauptwege ist, auf denen die Benutzer durch deine Website navigieren werden. Starlight bietet eine ganze Reihe von Optionen, um das Layout und den Inhalt der Seitenleiste anzupassen. + +## Standard-Seitenleiste + +Standardmäßig erzeugt Starlight automatisch eine Seitenleiste, die auf der Dateistruktur deiner Dokumentation basiert und die Eigenschaft `title` jeder Datei als Seitenleisteneintrag verwendet. + +Zum Beispiel, wenn du die folgende Dateistruktur hast: + + + +- src/ + - content/ + - docs/ + - guides/ + - components.md + - i18n.md + - reference/ + - configuration.md + + + +Wird die folgende Seitenleiste automatisch generiert: + + + +Erfahre mehr über autogenerierte Seitenleisten im Abschnitt [autogenerierte Gruppen](#autogenerierte-gruppen). + +## Links und Linkgruppen hinzufügen + +Um deiner Seitenleiste [Links](#links) und [Gruppen von Links](#gruppen) (innerhalb einer einklappbaren Kopfzeile) zu konfigurieren, verwende die Eigenschaft [`starlight.sidebar`](/de/reference/configuration/#sidebar) in `astro.config.mjs`. + +Durch die Kombination von Links und Gruppen kannst du eine Vielzahl von Seitenleistenlayouts erstellen. + +### Links + +Füge einen Link zu einer internen oder externen Seite hinzu, indem du ein Objekt mit den Eigenschaften `label` und `link` verwendest. + +```js +starlight({ + sidebar: [ + // Ein Link auf die CSS & Styling Anleitung. + { label: 'CSS & Styling', link: '/guides/css-and-tailwind/' }, + // Ein externer Link auf die Astro-Website. + { label: 'Astro', link: 'https://astro.build/' }, + ], +}); +``` + +Die obige Konfiguration erzeugt die folgende Seitenleiste: + + + +### Gruppen + +Du kannst deine Seitenleiste strukturieren, indem du zusammengehörige Links unter einer zusammenklappbaren Überschrift gruppierst. +Gruppen können sowohl Links als auch andere Untergruppen enthalten. + +Füge eine Gruppe mit einem Objekt mit den Eigenschaften `label` und `items` hinzu. +Das `label` wird als Überschrift für die Gruppe verwendet. +Füge Links oder Untergruppen zu dem `items` Array hinzu. + +```js +starlight({ + sidebar: [ + // Eine Gruppe von Links mit der Bezeichnung "Guides". + { + label: 'Anleitungen', + items: [ + { label: 'Komponenten', link: '/guides/components/' }, + { label: 'Internationalisierung (i18n)', link: '/guides/i18n/' }, + // Eine verschachtelte Gruppe von Links. + { + label: 'Styling', + items: [ + { label: 'CSS', link: '/guides/css-and-tailwind/' }, + { label: 'Tailwind', link: '/guides/css-and-tailwind/' }, + { label: 'Shiki', link: '/guides/css-and-tailwind/' }, + ], + }, + ], + }, + ], +}); +``` + +Die obige Konfiguration erzeugt die folgende Seitenleiste: + + + +### Automatisch erzeugte Gruppen + +Starlight kann automatisch eine Gruppe in deiner Seitenleiste erzeugen, die auf einem Verzeichnis deiner Dokumente basiert. +Dies ist hilfreich, wenn du nicht jedes Element der Seitenleiste manuell in eine Gruppe eintragen willst. +Die Seiten werden standardmäßig alphabetisch nach Dateinamen sortiert. + +Füge eine automatisch generierte Gruppe hinzu, indem du ein Objekt mit den Eigenschaften `Label` und `Autogenerate` verwendest. In der Konfiguration von `autogenerate` muss das `Verzeichnis` angegeben werden, das für die Einträge in der Seitenleiste verwendet werden soll. Zum Beispiel, mit der folgenden Konfiguration: + +```js +starlight({ + sidebar: [ + { + label: 'Guides', + // Automatisches Erzeugen einer Gruppe von Links für das Verzeichnis 'guides'. + autogenerate: { directory: 'guides' }, + }, + ], +}); +``` + +Und die folgende Dateistruktur: + + + +- src/ + - content/ + - docs/ + - guides/ + - components.md + - i18n.md + - advanced/ + - project-structure.md + + + +Wird die folgende Seitenleiste erzeugt: + + + +#### Autogenerierte Links im Frontmatter anpassen + +Verwende das [`sidebar`-Frontmatter-Feld](/de/reference/frontmatter/#sidebar) in einzelnen Seiten, um automatisch generierte Links anzupassen. + +Mit den Frontmatter-Optionen in der Seitenleiste kannst du einem Link eine [eigenen Bezeichnung](/de/reference/frontmatter/#label) oder ein [Abzeichen](/de/reference/frontmatter/#badge) hinzufügen, einen Link aus der Seitenleiste [verstecken](/de/reference/frontmatter/#hidden), oder eine [eigene Reihenfolge](/de/reference/frontmatter/#order) definieren. + +```md +--- +title: Meine Seite +sidebar: + # Setzt eine eigene Beschriftung für den Link + label: Benutzerdefinierte Seitenleistenbeschriftung + # Legen du eine benutzerdefinierte Reihenfolge für den Link fest (niedrigere Zahlen werden weiter oben angezeigt) + order: 2 + # Fügen du dem Link ein Abzeichen hinzu + badge: + text: Neu + variant: tip +--- +``` + +Eine autogenerierte Gruppe, die eine Seite mit dem obigen Frontmatter enthält, erzeugt die folgende Seitenleiste: + + + +:::note[Anmerkung] +Die `sidebar`-Frontmatter-Konfiguration wird nur für automatisch generierte Links verwendet und wird für manuell definierte Links ignoriert. +::: + +## Abzeichen + +Links können auch eine `badge`-Eigenschaft enthalten, um ein Abzeichen neben dem Link-Label anzuzeigen. + +```js +starlight({ + sidebar: [ + { + label: 'Anleitungen', + items: [ + // Ein Link mit einem "Neu"-Abzeichen. + { + label: 'Komponenten', + link: '/guides/components/', + badge: 'Neu', + }, + ], + }, + ], +}); +``` + +Die obige Konfiguration erzeugt die folgende Seitenleiste: + + + +### Abzeichenvarianten + +Passe das Design des Abzeichens an, indem du ein Objekt mit den Eigenschaften `text` und `variant` verwendest. + +Der `text` steht für den anzuzeigenden Inhalt (z.B. "Neu"). +Überschreibe das `default`-Styling, das die Akzentfarbe deiner Website verwendet, indem du die Eigenschaft `variant` auf einen der folgenden Werte setzt: `note`, `tip`, `danger`, `caution` oder `success`. + +```js +starlight({ + sidebar: [ + { + label: 'Anleitungen', + items: [ + // Ein Link mit einem gelben "Experimentell"-Abzeichen. + { + label: 'Komponenten', + link: '/guides/components/', + badge: { text: 'Experimentell', variant: 'caution' }, + }, + ], + }, + ], +}); +``` + +Die obige Konfiguration erzeugt die folgende Seitenleiste: + + + +## Benutzerdefinierte HTML-Attribute + +Links können auch eine Eigenschaft `attrs` enthalten, um dem Link-Element benutzerdefinierte HTML-Attribute hinzuzufügen. + +Im folgenden Beispiel wird `attrs` verwendet, um ein `target="_blank"`-Attribut hinzuzufügen, so dass der Link in einem neuen Tab geöffnet wird, und um ein benutzerdefiniertes `style`-Attribut anzuwenden, um die Linkbeschriftung kursiv zu machen: + +```js +starlight({ + sidebar: [ + { + label: 'Anleitungen', + items: [ + // Ein externer Link zu den Astro-Dokumenten, der in einem neuen Tab geöffnet wird. + { + label: 'Astro Docs', + link: 'https://docs.astro.build/de/', + attrs: { target: '_blank', style: 'font-style: italic' }, + }, + ], + }, + ], +}); +``` + +Die obige Konfiguration erzeugt die folgende Seitenleiste: + + + +## Internationalisierung + +Verwende die Eigenschaft `translations` für Link- und Gruppeneinträge, um die Link- oder Gruppenbeschriftung für jede unterstützte Sprache zu übersetzen, indem du ein [BCP-47](https://www.w3.org/International/questions/qa-choosing-language-tags) Sprach-Tag, z.B. `"en"`, `"ar"`, oder `"zh-CN"`, als Schlüssel und die übersetzte Beschriftung als Wert angibst. +Die Eigenschaft `label` wird für das Standardgebietsschema und für Sprachen ohne Übersetzung verwendet. + +```js +starlight({ + sidebar: [ + { + label: 'Guides', + translations: { + 'pt-BR': 'Guias', + }, + items: [ + { + label: 'Components', + translations: { + 'pt-BR': 'Componentes', + }, + link: '/guides/components/', + }, + { + label: 'Internationalization (i18n)', + translations: { + 'pt-BR': 'Internacionalização (i18n)', + }, + link: '/guides/i18n/', + }, + ], + }, + ], +}); +``` + +Wenn du die Dokumentation in brasilianischem Portugiesisch durchsuchst, wird die folgende Seitenleiste angezeigt: + + + +## Zusammenklappen von Gruppen + +Gruppen von Links können standardmäßig eingeklappt werden, indem man die Eigenschaft `collapsed` auf `true` setzt. + +```js +starlight({ + sidebar: [ + { + label: 'Anleitungen', + // Die Gruppe wird standardmäßig eingeklappt. + collapsed: true, + items: [ + { label: 'Komponenten', link: '/guides/components/' }, + { label: 'Internationalisierung (i18n)', link: '/guides/i18n/' }, + ], + }, + ], +}); +``` + +Die obige Konfiguration erzeugt die folgende Seitenleiste: + + + +[Autogenerierte Gruppen](#automatisch-erzeugte-gruppen) respektieren den `collapsed` Wert ihrer Elterngruppe: + +```js +starlight({ + sidebar: [ + { + label: 'Anleitungen', + // Die Gruppe und ihre automatisch erzeugten Untergruppen standardmäßig einklappen. + collapsed: true, + autogenerate: { directory: 'guides' }, + }, + ], +}); +``` + +Die obige Konfiguration erzeugt die folgende Seitenleiste: + + + +Dieses Verhalten kann durch die Definition der Eigenschaft `autogenerate.collapsed` außer Kraft gesetzt werden. + +```js +starlight({ + sidebar: [ + { + label: 'Anleitungen', + // Die Gruppe "Anleitungen" nicht einklappen, aber ihre + // automatisch erzeugten Untergruppen. + collapsed: false, + autogenerate: { directory: 'guides', collapsed: true }, + }, + ], +}); +``` + +Die obige Konfiguration erzeugt die folgende Seitenleiste: + + diff --git a/docs/src/content/docs/de/index.mdx b/docs/src/content/docs/de/index.mdx index fd28e650b31..765983120ca 100644 --- a/docs/src/content/docs/de/index.mdx +++ b/docs/src/content/docs/de/index.mdx @@ -2,6 +2,15 @@ title: Starlight 🌟 Einfache Dokumentations-Websites mit Astro description: Erstelle schöne, leistungsstarke Dokumentations-Websites mit Starlight und Astro. template: splash +banner: + content: | + + + + Willkommen Product Hunters 👋 + Wir sind jetzt live! + + hero: title: Bringe deine Dokumentation mit Starlight zum Leuchten tagline: Alles, was du brauchst, um eine erstklassige Dokumentations-Website zu erstellen. Schnell, barrierefrei und einfach zu bedienen. diff --git a/docs/src/content/docs/de/reference/configuration.md b/docs/src/content/docs/de/reference/configuration.mdx similarity index 70% rename from docs/src/content/docs/de/reference/configuration.md rename to docs/src/content/docs/de/reference/configuration.mdx index a7a4f17cf3d..306ed7dce4b 100644 --- a/docs/src/content/docs/de/reference/configuration.md +++ b/docs/src/content/docs/de/reference/configuration.mdx @@ -1,5 +1,5 @@ --- -title: Konfigurations­referenz +title: Konfigurationsreferenz description: Ein Überblick über alle von Starlight unterstützten Konfigurationsoptionen. --- @@ -13,11 +13,11 @@ import { defineConfig } from 'astro/config'; import starlight from '@astrojs/starlight'; export default defineConfig({ - integrations: [ - starlight({ - title: 'My delightful docs site', - }), - ], + integrations: [ + starlight({ + title: 'My delightful docs site', + }), + ], }); ``` @@ -43,9 +43,9 @@ Legt ein Logobild fest, das in der Navigationsleiste neben oder anstelle des Sei ```js starlight({ - logo: { - src: './src/assets/my-logo.svg', - }, + logo: { + src: './src/assets/my-logo.svg', + }, }); ``` @@ -53,8 +53,8 @@ starlight({ ```ts type LogoConfig = { alt?: string; replacesTitle?: boolean } & ( - | { src: string } - | { light: string; dark: string } + | { src: string } + | { light: string; dark: string } ); ``` @@ -73,9 +73,9 @@ Aktiviere "Diese Seite bearbeiten"-Links, indem du die Basis-URL für diese fest ```js starlight({ - editLink: { - baseUrl: 'https://github.com/withastro/starlight/edit/main/', - }, + editLink: { + baseUrl: 'https://github.com/withastro/starlight/edit/main/', + }, }); ``` @@ -96,25 +96,23 @@ Jedes Element muss ein `label` und eine der folgenden Eigenschaften haben: ```js starlight({ - sidebar: [ - // Ein einzelner Link mit der Bezeichnung "Startseite". - { label: 'Startseite', link: '/' }, - // Eine Gruppe mit der Bezeichnung "Hier anfangen", die zwei Links enthält. - { - label: 'Hier anfangen', - items: [ - { label: 'Einleitung', link: '/intro' }, - { label: 'Nächste Schritte', link: '/next-steps' }, - ], - }, - // Eine Gruppe, die auf alle Seiten im Referenzverzeichnis verweist. - { - label: 'Referenz', - autogenerate: { - directory: 'referenz', - }, - }, - ], + sidebar: [ + // Ein einzelner Link mit der Bezeichnung "Startseite". + { label: 'Startseite', link: '/' }, + // Eine Gruppe mit der Bezeichnung "Hier anfangen", die zwei Links enthält. + { + label: 'Hier anfangen', + items: [ + { label: 'Einleitung', link: '/intro' }, + { label: 'Nächste Schritte', link: '/next-steps' }, + ], + }, + // Eine Gruppe, die auf alle Seiten im Referenzverzeichnis verweist. + { + label: 'Referenz', + autogenerate: { directory: 'referenz' }, + }, + ], }); ``` @@ -181,21 +179,34 @@ sidebar: [ ```ts type SidebarItem = { - label: string; - translations?: Record; + label: string; + translations?: Record; } & ( - | { link: string } - | { items: SidebarItem[]; collapsed?: boolean } - | { - autogenerate: { directory: string; collapsed?: boolean }; - collapsed?: boolean; - } + | { + link: string; + badge?: string | BadgeConfig; + attrs?: Record; + } + | { items: SidebarItem[]; collapsed?: boolean } + | { + autogenerate: { directory: string; collapsed?: boolean }; + collapsed?: boolean; + } ); ``` +#### `BadgeConfig` + +```ts +interface BadgeConfig { + text: string; + variant: 'note' | 'tip' | 'caution' | 'danger' | 'success' | 'default'; +} +``` + ### `locales` -**Typ:** { \[dir: string\]: [LocaleConfig](#localeconfig) } +**Typ:** \{ \[dir: string\]: [LocaleConfig](#localeconfig) \} [Konfiguriere die Internationalisierung (i18n)](/de/guides/i18n/) für Ihre Website, indem du festlegst, welche `Locales` unterstützt werden. @@ -207,29 +218,29 @@ import { defineConfig } from 'astro/config'; import starlight from '@astrojs/starlight'; export default defineConfig({ - integrations: [ - starlight({ - title: 'My Docs', - // Englisch als Standardsprache festlegen. - defaultLocale: 'en', - locales: { - // Englische Seiten in `src/content/docs/en/` - en: { - label: 'English', - }, - // Chinesische Seiten in `src/content/docs/zh-cn/` - 'zh-cn': { - label: '简体中文', - lang: 'zh-CN', - }, - // Arabische Seiten in `src/content/docs/ar/` - ar: { - label: 'العربية', - dir: 'rtl', - }, - }, - }), - ], + integrations: [ + starlight({ + title: 'My Docs', + // Englisch als Standardsprache festlegen. + defaultLocale: 'en', + locales: { + // Englische Seiten in `src/content/docs/en/` + en: { + label: 'English', + }, + // Chinesische Seiten in `src/content/docs/zh-cn/` + 'zh-cn': { + label: '简体中文', + lang: 'zh-CN', + }, + // Arabische Seiten in `src/content/docs/ar/` + ar: { + label: 'العربية', + dir: 'rtl', + }, + }, + }), + ], }); ``` @@ -237,9 +248,9 @@ export default defineConfig({ ```ts interface LocaleConfig { - label: string; - lang?: string; - dir?: 'ltr' | 'rtl'; + label: string; + lang?: string; + dir?: 'ltr' | 'rtl'; } ``` @@ -269,15 +280,15 @@ Du kannst die Standardsprache ohne ein `/lang/`-Verzeichnis anbieten, indem du e ```js starlight({ - locales: { - root: { - label: 'Englisch', - lang: 'en', - }, - fr: { - label: 'Français', - }, - }, + locales: { + root: { + label: 'Englisch', + lang: 'en', + }, + fr: { + label: 'Français', + }, + }, }); ``` @@ -287,7 +298,7 @@ So kannst du zum Beispiel `/getting-started/` als englische Seite und `/fr/getti **Typ:** `string` -Legt die Sprache fest, die als Standard für diese Webseite gilt. +Legt die Sprache fest, die als Standard für diese Website gilt. Der Wert sollte mit einem der Schlüssel deines [`locales`](#locales)-Objekts übereinstimmen. (Wenn deine Standardsprache deiner [Root-Locale](#root-locale) ist, kannst du dies überspringen). @@ -295,24 +306,27 @@ Das `defaultLocale` wird verwendet, um Ersatzinhalte bereitzustellen, wenn Über ### `social` -**Typ:** `Partial>` +import SocialLinksType from '../../../../components/social-links-type.astro'; + +**Typ:** Optionale Angaben zu den Social-Media-Konten für diese Site. Wenn du eines dieser Konten hinzufügst, werden sie als Icon-Links in der Kopfzeile der Website angezeigt. ```js starlight({ - social: { - codeberg: 'https://codeberg.org/knut/examples', - discord: 'https://astro.build/chat', - github: 'https://github.com/withastro/starlight', - gitlab: 'https://gitlab.com/delucis', - linkedin: 'https://www.linkedin.com/company/astroinc', - mastodon: 'https://m.webtoo.ls/@astro', - threads: 'https://www.threads.net/@nmoodev', - twitch: 'https://www.twitch.tv/bholmesdev', - twitter: 'https://twitter.com/astrodotbuild', - youtube: 'https://youtube.com/@astrodotbuild', - }, + social: { + codeberg: 'https://codeberg.org/knut/examples', + discord: 'https://astro.build/chat', + github: 'https://github.com/withastro/starlight', + gitlab: 'https://gitlab.com/delucis', + linkedin: 'https://www.linkedin.com/company/astroinc', + mastodon: 'https://m.webtoo.ls/@astro', + threads: 'https://www.threads.net/@nmoodev', + twitch: 'https://www.twitch.tv/bholmesdev', + twitter: 'https://twitter.com/astrodotbuild', + 'x.com': 'https://x.com/astrodotbuild', + youtube: 'https://youtube.com/@astrodotbuild', + }, }); ``` @@ -326,7 +340,7 @@ Unterstützt lokale CSS-Dateien relativ zum Stammverzeichnis deines Projekts, z. ```js starlight({ - customCss: ['./src/custom-styles.css', '@fontsource/roboto'], + customCss: ['./src/custom-styles.css', '@fontsource/roboto'], }); ``` @@ -339,17 +353,17 @@ Kann nützlich sein, um Analytics und andere Skripte und Ressourcen von Drittanb ```js starlight({ - head: [ - // Beispiel: Fathom Analytics Skript-Tag hinzufügen. - { - tag: 'script', - attrs: { - src: 'https://cdn.usefathom.com/script.js', - 'data-site': 'MY-FATHOM-ID', - defer: true, - }, - }, - ], + head: [ + // Beispiel: Fathom Analytics Skript-Tag hinzufügen. + { + tag: 'script', + attrs: { + src: 'https://cdn.usefathom.com/script.js', + 'data-site': 'MY-FATHOM-ID', + defer: true, + }, + }, + ], }); ``` @@ -357,9 +371,9 @@ starlight({ ```ts interface HeadConfig { - tag: string; - attrs?: Record; - content?: string; + tag: string; + attrs?: Record; + content?: string; } ``` @@ -412,3 +426,29 @@ starlight({ ], }); ``` + +### `titleDelimiter` + +**Typ:** `string` +**Standard:** `'|'` + +Legt das Trennzeichen zwischen Seitentitel und dem Titel der Website im ``-Tag der Website fest, welches in den Browser-Tabs angezeigt wird. + +Standardmäßig hat jede Seite einen `<title>` von `Seiten Überschrift | Webseitenname`. +Zum Beispiel heißt diese Seite "Konfigurationsreferenz" und diese Website heißt "Starlight", also ist der `<titel>` für diese Seite "Konfigurationsreferenz | Starlight". + +### `components` + +**Typ:** `Record<string, string>` + +Gib die Pfade zu den Komponenten an, um die Standardimplementierungen von Starlight zu ersetzen. + +```js +starlight({ + components: { + SocialLinks: './src/components/MySocialLinks.astro', + }, +}); +``` + +Siehe die [Komponenten-Ersetzung Referenz](/de/reference/overrides/) für Details zu allen Komponenten, die du überschreiben kannst. diff --git a/docs/src/content/docs/de/reference/frontmatter.md b/docs/src/content/docs/de/reference/frontmatter.md new file mode 100644 index 00000000000..dc521bb6bf5 --- /dev/null +++ b/docs/src/content/docs/de/reference/frontmatter.md @@ -0,0 +1,329 @@ +--- +title: Frontmatter Referenz +description: Ein Überblick über die von Starlight unterstützten Standard-Frontmatter-Felder. +--- + +Du kannst einzelne Markdown- und MDX-Seiten in Starlight anpassen, indem du Werte in deren Frontmatter setzt. Zum Beispiel könnte eine normale Seite die Felder `title` und `description` setzen: + +```md +--- +title: Über dieses Projekt +description: Erfahre mehr über das Projekt, an dem ich gerade arbeite. +--- + +Willkommen auf der Info-Seite! +``` + +## Frontmatter-Felder + +### `title` (erforderlich) + +**type:** `string` + +Du musst für jede Seite einen Titel angeben. Dieser wird oben auf der Seite, in Browser-Tabs und in den Seiten-Metadaten angezeigt. + +### `description` + +**type:** `string` + +Die Seitenbeschreibung wird für die Metadaten der Seite verwendet und wird von Suchmaschinen und in der Vorschau von sozialen Medien angezeigt. + +### `editUrl` + +**type:** `string | boolean` + +Überschreibt die [globale `editLink`-Konfiguration](/de/reference/configuration/#editlink). Setze die Konfiguration auf `false`, um den Link `Seite bearbeiten` für eine bestimmte Seite zu deaktivieren oder gibt eine alternative URL an, unter der der Inhalt dieser Seite bearbeitet werden kann. + +### `head` + +**type:** [`HeadConfig[]`](/de/reference/configuration/#headconfig) + +Du kannst zusätzliche Tags zum `<head>` deiner Seite hinzufügen, indem du das Feld `head` Frontmatter verwendest. Dies bedeutet, dass du benutzerdefinierte Stile, Metadaten oder andere Tags zu einer einzelnen Seite hinzufügen kannst. Ähnlich wie bei der [globalen `head` Option](/de/reference/configuration/#head). + +```md +--- +title: Über uns +head: + # Benutze einen eigenen <title> Tag + - tag: title + content: Benutzerdefinierter "Über uns"-Titel +--- +``` + +### `tableOfContents` + +**type:** `false | { minHeadingLevel?: number; maxHeadingLevel?: number; }` + +Überschreibt die [globale `tableOfContents`-Konfiguration](/de/reference/configuration/#tableofcontents). +Passe die einzuschließenden Überschriftsebenen an oder setze sie auf `false`, um das Inhaltsverzeichnis auf dieser Seite auszublenden. + +```md +--- +title: Seite mit nur H2s im Inhaltsverzeichnis +tableOfContents: + minHeadingLevel: 2 + maxHeadingLevel: 2 +--- +``` + +```md +--- +title: Seite ohne Inhaltsverzeichnis +tableOfContents: false +--- +``` + +### `template` + +**type:** `'doc' | 'splash'` +**default:** `'doc'` + +Legt die Layoutvorlage für diese Seite fest. +Seiten verwenden standardmäßig das `'doc'`-Layout. +Setze den Typen auf `'splash'`, um ein breiteres Layout ohne Seitenleisten zu verwenden, welches spezifisch für Startseiten entwickelt wurde. + +### `hero` + +**type:** [`HeroConfig`](#heroconfig) + +Fügt eine Hero-Komponente oben auf der Seite ein. Kann sehr gut mit `template: splash` kombiniert werden. + +Zum Beispiel zeigt diese Konfiguration einige übliche Optionen, einschließlich des Ladens eines Bildes aus Ihrem Repository. + +```md +--- +title: Meine Website +template: splash +hero: + title: 'Mein Projekt: Schnell ins All' + tagline: Bringe deine Wertgegenstände im Handumdrehen auf den Mond und wieder zurück. + image: + alt: Ein glitzerndes, leuchtend farbiges Logo + file: ../../assets/logo.png + actions: + - text: Erzähl mir mehr + link: /getting-started/ + icon: right-arrow + variant: primary + - text: Schau mal auf GitHub vorbei + link: https://github.com/astronaut/mein-projekt + icon: external +--- +``` + +#### `HeroConfig` + +```ts +interface HeroConfig { + title?: string; + tagline?: string; + image?: { + alt?: string; + // Relativer Pfad zu einem Bild in deinem Repository. + file?: string; + // HTML, welches im Bild-Slot verwendet werden soll. + // Dies kann ein benutzerdefinierter `<img>`-Tag oder ein Inline-`<svg>` sein. + html?: string; + }; + actions?: Array<{ + text: string; + link: string; + variant: 'primary' | 'secondary' | 'minimal'; + icon: string; + }>; +} +``` + +### `banner` + +**type:** `{ content: string }` + +Zeigt ein Ankündigungsbanner oben auf dieser Seite an. + +Der Wert `content` kann HTML für Links oder andere Inhalte enthalten. +Auf dieser Seite wird beispielsweise ein Banner mit einem Link zu `example.com` angezeigt. + +```md +--- +title: Seite mit Banner +banner: + content: | + Wir haben gerade etwas Cooles angefangen! + <a href="https://example.com">Jetzt besuchen</a> +--- +``` + +### `lastUpdated` + +**type:** `Date | boolean` + +Überschreibt die [globale Option `lastUpdated`](/de/reference/configuration/#lastupdated). Wenn ein Datum angegeben wird, muss es ein gültiger [YAML-Zeitstempel](https://yaml.org/type/timestamp.html) sein und überschreibt somit das im Git-Verlauf für diese Seite gespeicherte Datum. + +```md +--- +title: Seite mit einem benutzerdefinierten Datum der letzten Aktualisierung +lastUpdated: 2022-08-09 +--- +``` + +### `prev` + +**type:** `boolean | string | { link?: string; label?: string }` + +Überschreibt die [globale Option `pagination`](/de/reference/configuration/#pagination). Wenn eine Zeichenkette angegeben wird, wird der generierte Linktext ersetzt und wenn ein Objekt angegeben wird, werden sowohl der Link als auch der Text überschrieben. + +```md +--- +# Versteckt den Link zur vorherigen Seite +prev: false +--- +``` + +```md +--- +# Überschreibe den Linktext der vorherigen Seite +prev: Fortsetzung des Tutorials +--- +``` + +```md +--- +# Überschreibe sowohl den Link zur vorherigen Seite als auch den Text +prev: + link: /unverwandte-seite/ + label: Schau dir diese andere Seite an +--- +``` + +### `next` + +**type:** `boolean | string | { link?: string; label?: string }` + +Dasselbe wie [`prev`](#prev), aber für den Link zur nächsten Seite. + +```md +--- +# Versteckt den Link zur nächsten Seite +next: false +--- +``` + +### `pagefind` + +**type:** `boolean` +**default:** `true` + +Legt fest, ob diese Seite in den [Pagefind](https://pagefind.app/)-Suchindex aufgenommen werden soll. Setze das Feld auf `false`, um eine Seite von den Suchergebnissen auszuschließen: + +```md +--- +# Diese Seite aus dem Suchindex ausblenden +pagefind: false +--- +``` + +### `sidebar` + +**type:** [`SidebarConfig`](#sidebarconfig) + +Steuert, wie diese Seite in der [Seitenleiste](/de/reference/configuration/#sidebar) angezeigt wird, wenn eine automatisch generierte Linkgruppe verwendet wird. + +#### `SidebarConfig` + +```ts +interface SidebarConfig { + label?: string; + order?: number; + hidden?: boolean; + badge?: string | BadgeConfig; + attrs?: Record<string, string | number | boolean | undefined>; +} +``` + +#### `label` + +**type:** `string` +**default:** the page [`title`](#title-erforderlich) + +Legt die Bezeichnung für diese Seite in der Seitenleiste fest, wenn sie in einer automatisch erzeugten Linkgruppe angezeigt wird. + +```md +--- +title: Über dieses Projekt +sidebar: + label: Infos +--- +``` + +#### `order` + +**type:** `number` + +Steuere die Reihenfolge dieser Seite beim Sortieren einer automatisch erstellten Gruppe von Links. +Niedrigere Nummern werden in der Linkgruppe weiter oben angezeigt. + +```md +--- +title: Erste Seite +sidebar: + order: 1 +--- +``` + +#### `hidden` + +**type:** `boolean` +**default:** `false` + +Verhindert, dass diese Seite in eine automatisch generierte Seitenleistengruppe aufgenommen wird. + +```md +--- +title: Versteckte Seite +sidebar: + hidden: true +--- +``` + +#### `badge` + +**type:** <code>string | <a href="/de/reference/configuration/#badgeconfig">BadgeConfig</a></code> + +Füge der Seite in der Seitenleiste ein Abzeichen hinzu, wenn es in einer automatisch generierten Gruppe von Links angezeigt wird. +Bei Verwendung einer Zeichenkette wird das Abzeichen mit einer Standard-Akzentfarbe angezeigt. +Optional kann ein [`BadgeConfig` Objekt](/de/reference/configuration/#badgeconfig) mit den Feldern `text` und `variant` übergeben werden, um das Abzeichen anzupassen. + +```md +--- +title: Seite mit einem Badge +sidebar: + # Verwendet die Standardvariante, die der Akzentfarbe deiner Website entspricht + badge: Neu +--- +``` + +```md +--- +title: Seite mit einem Abzeichen +sidebar: + badge: + text: Experimentell + variant: caution +--- +``` + +#### `attrs` + +**type:** `Record<string, string | number | boolean | undefined>` + +HTML-Attribute, die dem Seitenlink in der Seitenleiste hinzugefügt werden, wenn er in einer automatisch generierten Gruppe von Links angezeigt wird. + +```md +--- +title: Seite im neuen Tab öffnen +sidebar: + # Dies öffnet den Link in einem neuen Tab + attrs: + target: _blank +--- +``` diff --git a/docs/src/content/docs/de/reference/overrides.md b/docs/src/content/docs/de/reference/overrides.md new file mode 100644 index 00000000000..6d25db9ffbf --- /dev/null +++ b/docs/src/content/docs/de/reference/overrides.md @@ -0,0 +1,374 @@ +--- +title: Komponenten-Ersetzung Referenz +description: Ein Überblick über die Komponenten und Komponentenprops, die von Starlight Ersetzungen unterstützt werden. +tableOfContents: + maxHeadingLevel: 4 +--- + +Du kannst Starlight's eingebaute Komponenten überschreiben, indem du Pfade zu Ersatzkomponenten in Starlight's [`components`](/de/reference/configuration#components)-Konfigurationsoption angibst. +Diese Seite listet alle Komponenten auf, die überschrieben werden können, und verweist auf ihre Standardimplementierungen auf GitHub. + +Erfahre mehr in der [Anleitung zum Überschreiben von Komponenten](/de/guides/overriding-components/). + +## Komponenteneigenschaften (Props) + +Alle Komponenten können auf ein Standardobjekt `Astro.props` zugreifen, welches Informationen über die aktuelle Seite enthält. + +Um deine eigenen Komponenten zu schreiben, importiere den `Props`-Typ von Starlight: + +```astro +--- +import Typ { Props } from '@astrojs/starlight/props'; + +const { hatSeitennavigation } = Astro.props; +// ^ Typ: boolean +--- +``` + +So erhaltest du die Autovervollständigung und Angabe des Datentyps beim Zugriff auf `Astro.props`. + +### Props + +Starlight wird die folgenden Props an deine eigenen Komponenten übergeben. + +#### `dir` + +**Type:** `'ltr' | 'rtl'` + +Schreibrichtung der Seite. + +#### `lang` + +**Type:** `string` + +BCP-47-Sprachkennzeichen für das Gebietsschema dieser Seite, z.B. `de`, `zh-CN` oder `pt-BR`. + +#### `locale` + +**Type:** `string | undefined` + +Der Basispfad, unter dem eine Sprache angeboten wird. `undefined` für Root-Locale-Slugs. + +#### `slug` + +**Type:** `string` + +Der aus dem Dateinamen des Inhalts generierte Slug für diese Seite. + +#### `id` + +**Type:** `string` + +Die eindeutige ID für diese Seite auf der Grundlage des Dateinamens des Inhalts. + +#### `isFallback` + +**Type:** `true | undefined` + +`true`, wenn diese Seite in der aktuellen Sprache unübersetzt ist und Fallback-Inhalte aus dem Standardgebietsschema verwendet. +Wird nur in mehrsprachigen Sites verwendet. + +#### `entryMeta` + +**Type:** `{ dir: 'ltr' | 'rtl'; lang: string }` + +Gebietsschema-Metadaten für den Seiteninhalt. Du kannst von den Werten der Top-Level-Locale unterscheiden, wenn eine Seite Fallback-Inhalte verwendet. + +#### `entry` + +Der Astro-Inhaltssammlungseintrag für die aktuelle Seite. +Beinhaltet Frontmatter-Werte für die aktuelle Seite in `entry.data`. + +```ts +entry: { + data: { + title: string; + description: string | undefined; + // usw. + } +} +``` + +Erfahre mehr über die Form dieses Objekts in der [Astros Eintragstyp-Sammlung](https://docs.astro.build/de/reference/api-reference/#collection-eintragstyp) Referenz. + +#### `sidebar` + +**Type:** `SidebarEntry[]` + +Seitennavigationseinträge für diese Seite. + +#### `hasSidebar` + +**Type:** `boolean` + +Ob die Seitenleiste auf dieser Seite angezeigt werden soll oder nicht. + +#### `pagination` + +**Type:** `{ prev?: Link; next?: Link }` + +Links zur vorherigen und nächsten Seite in der Seitenleiste, falls aktiviert. + +#### `toc` + +**Type:** `{ minHeadingLevel: number; maxHeadingLevel: number; items: TocItem[] } | undefined` + +Inhaltsverzeichnis für diese Seite, falls aktiviert. + +#### `headings` + +**Type:** `{ depth: number; slug: string; text: string }[]` + +Array aller Markdown-Überschriften, die aus der aktuellen Seite extrahiert wurden. +Verwende stattdessen [`toc`](#toc), wenn du ein Inhaltsverzeichnis erstellen willst, welches die Konfigurationsoptionen von Starlight berücksichtigt. + +#### `lastUpdated` + +**Type:** `Date | undefined` + +JavaScript `Date` Objekt, welches angibt, wann diese Seite zuletzt aktualisiert wurde, falls aktiviert. + +#### `editUrl` + +**Type:** `URL | undefined` + +`URL`-Objekt für die Adresse, unter der diese Seite bearbeitet werden kann, falls aktiviert. + +--- + +## Komponenten + +### Head + +Diese Komponenten werden innerhalb des `<head>`-Elements jeder Seite gerendert. +Sie sollten nur [innerhalb von `<head>` erlaubte Elemente](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head#see_also) enthalten. + +#### `Head` + +**Standardkomponente:** [`Head.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Head.astro) + +Diese Komponente wird innerhalb des `<head>` einer jeden Seite gerendert. +Enthält wichtige Tags wie `<title>`, und `<meta charset="utf-8">`. + +Überschreibe diese Komponente nur, wenn es unbedingt notwendig ist. +Bevorzuge die [`head`](/de/reference/configuration#head) Option der Starlight-Konfiguration wenn möglich. + +#### `ThemeProvider` + +**Standardkomponente:** [`ThemeProvider.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/ThemeProvider.astro) + +Diese Komponente wird innerhalb von `<head>` gerendert und richtet die Unterstützung für dunkle/helle Themen ein. +Die Standard-Implementierung enthält ein Inline-Skript und ein `<template>`, welches vom Skript in [`<ThemeSelect />`](#themeselect) verwendet wird. + +--- + +### Barrierefreiheit + +#### `SkipLink` + +**Standardkomponente:** [`SkipLink.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/SkipLink.astro) + +Diese Komponente wird als erstes Element innerhalb von `<body>` dargestellt und verweist aus Gründen der Barrierefreiheit auf den Hauptinhalt der Seite. +Die Standardimplementierung ist ausgeblendet, bis ein Benutzer sie durch Tabulatorbewegungen mit der Tastatur aktiviert. + +--- + +### Layout + +Diese Komponenten sind für das Layout der Starlight-Komponenten und die Verwaltung von Ansichten über verschiedene Haltepunkte hinweg verantwortlich. +Das Überschreiben dieser Komponenten ist mit erheblicher Komplexität verbunden. +Wenn möglich, bevorzuge das Überschreiben einer Komponente auf einer niedrigeren Ebene. + +#### `PageFrame` + +**Standardkomponente:** [`PageFrame.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/PageFrame.astro) + +Diese Layout-Komponente beinhaltet den größten Teil des Seiteninhalts. +Die Standardimplementierung konfiguriert das Kopfzeilen-Seitennavigation-Haupt-Layout und beinhaltet `header` und `sidebar` benannte Slots zusammen mit einem Standard-Slot für den Hauptinhalt. +Sie rendert auch [`<MobileMenuToggle />`](#mobilemenutoggle), um das Umschalten der Seitenleistennavigation auf kleinen (mobilen) Viewports zu unterstützen. + +#### `MobileMenuToggle` + +**Standardkomponente:** [`MobileMenuToggle.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/MobileMenuToggle.astro) + +Diese Komponente wird innerhalb von [`<PageFrame>`](#pageframe) gerendert und ist für das Umschalten der Seitenleistennavigation auf kleinen (mobilen) Viewports verantwortlich. + +#### `TwoColumnContent` + +**Standardkomponente:** [`TwoColumnContent.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/TwoColumnContent.astro) + +Dies ist die Layout-Komponente, welche die Hauptinhaltsspalte und die rechte Seitenleiste (Inhaltsverzeichnis) beinhaltet. +Die Standardimplementierung behandelt den Wechsel zwischen einem einspaltigen Layout mit kleinem Sichtfeld und einem zweispaltigen Layout mit größerem Sichtfeld. + +--- + +### Kopfzeile + +Diese Komponenten stellen die obere Navigationsleiste von Starlight dar. + +#### `Header` + +**Standardkomponente:** [`Header.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Header.astro) + +Dies ist eine Kopfzielen-Komponente, welche oben auf jeder Seite angezeigt wird. +Die Standardimplementierung zeigt [`<SiteTitle />`](#sitetitle), [`<Search />`](#search), [`<SocialIcons />`](#socialicons), [`<ThemeSelect />`](#themeselect), und [`<LanguageSelect />`](#languageselect). + +#### `SiteTitle` + +**Standardkomponente:** [`SiteTitle.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/SiteTitle.astro) + +Die Komponente wird die am Anfang des Site-Headers gerendert, um den Titel der Website darzustellen. +Die Standardimplementierung enthält die Logik für die Darstellung von Logos, die in der Starlight-Konfiguration definiert sind. + +#### `Search` + +**Standardkomponente:** [`Search.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Search.astro) + +Diese Komponente wird verwendet, um Starlight's Suchoberfläche darzustellen. +Die Standardimplementierung enthält die Schaltfläche in der Kopfzeile und den Code für die Anzeige eines Suchmodals, wenn darauf geklickt wird, und das Laden von [Pagefinds UI](https://pagefind.app/). + +#### `SocialIcons` + +**Standardkomponente:** [`SocialIcons.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/SocialIcons.astro) + +Diese Komponente wird in der Kopfzeile der Website gerendert und enthält Links zu sozialen Symbolen. +Die Standardimplementierung verwendet die Option [`social`](/de/reference/configuration#social) in der Starlight-Konfiguration, um Icons und Links darzustellen. + +#### `ThemeSelect` + +**Standardkomponente:** [`ThemeSelect.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/ThemeSelect.astro) + +Diese Komponente wird in der Kopfzeile der Website gerendert und ermöglicht es den Benutzern, ihr bevorzugtes Farbschema auszuwählen. + +#### `LanguageSelect` + +**Standardkomponente:** [`LanguageSelect.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/LanguageSelect.astro) + +Die Komponente wird in der Kopfzeile der Website angezeigt und ermöglicht es den Nutzern, die Sprache auszuwählen. + +--- + +### Globale Seitenleiste + +Die globale Seitenleiste von Starlight enthält die Hauptnavigation der Website. +Bei schmalen Ansichtsfenstern ist diese hinter einem Dropdown-Menü versteckt. + +#### `Sidebar` + +**Standardkomponente:** [`Sidebar.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Sidebar.astro) + +Die Komponente wird die vor dem Seiteninhalt gerendert und enthält eine globale Navigation. +Die Standardimplementierung wird als Seitenleiste in ausreichend breiten Ansichtsfenstern und innerhalb eines Dropdown-Menüs in kleinen (mobilen) Ansichtsfenstern angezeigt. +Sie rendert auch [`<MobileMenuFooter />`](#mobilemenufooter), um zusätzliche Elemente innerhalb des mobilen Menüs anzuzeigen. + +#### `MobileMenuFooter` + +**Standardkomponente:** [`MobileMenuFooter.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/MobileMenuFooter.astro) + +Diese Komponente wird die am unteren Ende des mobilen Dropdown-Menüs gerendert. +Die Standardimplementierung rendert [`<ThemeSelect />`](#themeselect) und [`<LanguageSelect />`](#languageselect). + +--- + +### Seiten-Seitenleiste + +Die Seitenleiste von Starlight ist für die Anzeige eines Inhaltsverzeichnisses verantwortlich, welches die Untertitel der aktuellen Seite anzeigt. +Bei schmalen Ansichtsfenstern wird diese Leiste zu einem Dropdown-Menü. + +#### `PageSidebar` + +**Standardkomponente:** [`PageSidebar.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/PageSidebar.astro) + +Diese Komponente wird die vor dem Inhalt der Hauptseite gerendert, um ein Inhaltsverzeichnis anzuzeigen. +Die Standardimplementierung rendert [`<TableOfContents />`](#tableofcontents) und [`<MobileTableOfContents />`](#mobiletableofcontents). + +#### `TableOfContents` + +**Standardkomponente:** [`TableOfContents.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/TableOfContents.astro) + +Eine Komponente zur Darstellung des Inhaltsverzeichnisses der aktuellen Seite in breiteren Ansichtsfenstern. + +#### `MobileTableOfContents` + +**Standardkomponente:** [`MobileTableOfContents.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/MobileTableOfContents.astro) + +Diese Komponete zeigt das Inhaltsverzeichnis der aktuellen Seite auf kleinen (mobilen) Bildschirmen an. + +--- + +### Inhalt + +Folgende Komponenten werden in der Hauptspalte des Seiteninhalts wiedergegeben. + +#### `Banner` + +**Standardkomponente:** [`Banner.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Banner.astro) + +Diese Bannerkomponente wird oben auf jeder Seite angezeigt. +Die Standard-Implementierung verwendet den [`banner`](/de/reference/frontmatter#banner)-Frontmatter-Wert der Seite, um zu entscheiden, ob sie gerendert wird oder nicht. + +#### `ContentPanel` + +**Standardkomponente:** [`ContentPanel.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/ContentPanel.astro) + +Diese Layout-Komponente beinhaltet Abschnitte der Hauptinhaltsspalte. + +#### `PageTitle` + +**Standardkomponente:** [`PageTitle.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/PageTitle.astro) + +Eine Komponente, welche das `<h1>`-Element für die aktuelle Seite enthält. + +Implementierungen sollten sicherstellen, dass sie `id="_top"` auf dem `<h1>` Element wie in der Standardimplementierung setzen. + +#### `FallbackContentNotice` + +**Standardkomponente:** [`FallbackContentNotice.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/FallbackContentNotice.astro) + +Ein Hinweis, welcher den Benutzern auf der Website angezeigt wird, für die keine Übersetzung in der aktuellen Sprache verfügbar ist. +Wird nur auf mehrsprachigen Seiten verwendet. + +#### `Hero` + +**Standardkomponente:** [`Hero.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Hero.astro) + +Diese Komponente wird am oberen Rand der Seite angezeigt, wenn [`hero`](/de/reference/frontmatter#hero) in frontmatter eingestellt ist. +Die Standardimplementierung zeigt einen großen Titel, eine Tagline und Call-to-Action-Links neben einem optionalen Bild. + +#### `MarkdownContent` + +**Standardkomponente:** [`MarkdownContent.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/MarkdownContent.astro) + +Die Kompoente wird um den Hauptinhalt jeder Seite gerendert. +Die Standardimplementierung richtet grundlegende Stile ein, die auf Markdown-Inhalte angewendet werden. + +--- + +### Fußzeile + +Diese Komponenten werden am unteren Ende der Hauptspalte des Seiteninhalts dargestellt. + +#### `Footer` + +**Standardkomponente:** [`Footer.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Footer.astro) + +Diese Fußzeile-Komponente wird am unteren Rand jeder Seite angezeigt. +Die Standardimplementierung zeigt [`<LastUpdated />`](#lastupdated), [`<Pagination />`](#pagination), und [`<EditLink />`](#editlink). + +#### `LastUpdated` + +**Standardkomponente:** [`LastUpdated.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/LastUpdated.astro) + +Eine Komponente, die in der Fußzeile der Seite gerendert wird, um das zuletzt aktualisierte Datum anzuzeigen. + +#### `EditLink` + +**Standardkomponente:** [`EditLink.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/EditLink.astro) + +Die Komponente wird in der Fußzeile der Seite gerendert, um einen Link anzuzeigen, über den die Seite bearbeitet werden kann. + +#### `Pagination` + +**Standardkomponente:** [`Pagination.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Pagination.astro) + +Diese Komponente wird in der Fußzeile der Seite gerendert, um Navigationspfeile zwischen vorherigen/nächsten Seiten anzuzeigen. diff --git a/docs/src/content/docs/de/showcase.mdx b/docs/src/content/docs/de/showcase.mdx new file mode 100644 index 00000000000..cc52c282659 --- /dev/null +++ b/docs/src/content/docs/de/showcase.mdx @@ -0,0 +1,53 @@ +--- +title: Starlight Schaufenster +description: Entdecke Seiten, die mit Starlight gebaut wurden und Community-Tools, die Starlight erweitern! +--- + +:::tip[Füge deine eigene hinzu!] +Hast du eine Starlight-Website oder ein Tool für Starlight gebaut? +Eröffne einen PR und füge einen Link zu dieser Seite hinzu! +::: + +## Seiten + +import ShowcaseSites from '../../../components/showcase-sites.astro'; + +Starlight wird bereits in der Produktion eingesetzt. Dies sind einige der Websiten, die im Internet zu finden sind: + +<ShowcaseSites /> + +Siehe alle [öffentlichen Projekt-Repos mit Starlight auf GitHub](https://github.com/withastro/starlight/network/dependents). + +## Community-Plugins + +import { CardGrid, LinkCard } from '@astrojs/starlight/components'; + +Diese Community-Tools, Plugins und Integrationen arbeiten mit Starlight zusammen, um dessen Funktionalität zu erweitern. + +<CardGrid> + <LinkCard + href="https://www.feelback.dev/blog/new-astro-starlight-integration/" + title="FeelBack" + description="Füge deinen Dokumentseiten ein Benutzer-Feedback-System hinzu." + /> + <LinkCard + href="https://github.com/HiDeoo/starlight-blog" + title="starlight-blog" + description="Erweitere deine Dokumentationsseite mit einen Blog." + /> + <LinkCard + href="https://github.com/HiDeoo/starlight-links-validator" + title="starlight-links-validator" + description="Überprüfe deine Starlight-Seiten auf fehlerhafte Links." + /> + <LinkCard + href="https://github.com/HiDeoo/starlight-typedoc" + title="starlight-typedoc" + description="Erzeuge Starlight-Seiten aus TypeScript mit TypeDoc." + /> + <LinkCard + href="https://github.com/HiDeoo/starlight-openapi" + title="starlight-openapi" + description="Erstelle Dokumentationsseiten mithilfe OpenAPI/Swagger-Spezifikationen." + /> +</CardGrid> From a6d16812db1fd3c906094b498a10ff5e14a42e65 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank <swithinbank@gmail.com> Date: Thu, 26 Oct 2023 12:25:39 +0200 Subject: [PATCH 02/26] Small formatting fixes in `/de/` pages --- docs/src/content/docs/de/guides/css-and-tailwind.mdx | 5 +++-- docs/src/content/docs/de/reference/overrides.md | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/src/content/docs/de/guides/css-and-tailwind.mdx b/docs/src/content/docs/de/guides/css-and-tailwind.mdx index 849af894492..e229290205c 100644 --- a/docs/src/content/docs/de/guides/css-and-tailwind.mdx +++ b/docs/src/content/docs/de/guides/css-and-tailwind.mdx @@ -278,8 +278,9 @@ import ThemeDesigner from '../../../../components/theme-designer.astro'; }} > <Fragment slot="css-docs"> - Füge das folgende CSS in deinem Projekt in eine [benutzerdefinierte CSS-Datei](#custom-css-styles) - ein, um dieses Theme auf deiner Website anzuwenden. + Füge das folgende CSS in deinem Projekt in eine [benutzerdefinierte + CSS-Datei](#benutzerdefinierte-css-styles-stile) ein, um dieses Theme auf + deiner Website anzuwenden. </Fragment> <Fragment slot="tailwind-docs"> Das folgende Beispiel diff --git a/docs/src/content/docs/de/reference/overrides.md b/docs/src/content/docs/de/reference/overrides.md index 6d25db9ffbf..fe7e3d8ef7b 100644 --- a/docs/src/content/docs/de/reference/overrides.md +++ b/docs/src/content/docs/de/reference/overrides.md @@ -18,7 +18,7 @@ Um deine eigenen Komponenten zu schreiben, importiere den `Props`-Typ von Starli ```astro --- -import Typ { Props } from '@astrojs/starlight/props'; +import type { Props } from '@astrojs/starlight/props'; const { hatSeitennavigation } = Astro.props; // ^ Typ: boolean From 2ab6ac2939c1dcfee91e8b57b02e83db1d007ecd Mon Sep 17 00:00:00 2001 From: Vitor <vasfvitor@gmail.com> Date: Thu, 26 Oct 2023 08:07:54 -0300 Subject: [PATCH 03/26] i18n(pt-BR): Translate `guides/overriding-components.md` & `guides/sidebar.mdx` (#939) Co-authored-by: Chris Swithinbank <swithinbank@gmail.com> --- .../pt-br/guides/overriding-components.md | 138 +++++++ docs/src/content/docs/pt-br/index.mdx | 2 +- .../content/docs/pt-br/reference/overrides.md | 380 ++++++++++++++++++ 3 files changed, 519 insertions(+), 1 deletion(-) create mode 100644 docs/src/content/docs/pt-br/guides/overriding-components.md create mode 100644 docs/src/content/docs/pt-br/reference/overrides.md diff --git a/docs/src/content/docs/pt-br/guides/overriding-components.md b/docs/src/content/docs/pt-br/guides/overriding-components.md new file mode 100644 index 00000000000..b02bc17de07 --- /dev/null +++ b/docs/src/content/docs/pt-br/guides/overriding-components.md @@ -0,0 +1,138 @@ +--- +title: Substituindo Componentes +description: Aprenda como substituir os componentes nativos do Starlight para adicionar elementos personalizados a UI do seu site de documentação. +sidebar: + badge: New +--- + +<!--- +TODO: Check all links and html anchors +--> + +A UI e configuração padrão do Starlight foi projetada para ser flexível a adaptável a uma gama de conteúdos. Boa parte da customização da aparência padrão do Starlight pode ser feita via [CSS](/pt-br/guides/css-and-tailwind/) e [opções de configuração](/pt-br/guides/customization/). + +Caso você precise de mais possibilidades, o Starlight suporta a criação dos seus próprios componentes para estender ou substituir completamente os componentes padrões. + +## Em que casos substituir + +Substituir os componentes padrões do Starlight pode ser útil nos seguintes casos: + +- Você deseja mudar parte da UI do Starlight de forma que não é possível com [CSS personalizado](/pt-br/guides/css-and-tailwind/). +- Você deseja mudar o comportamento de parte da UI do Starlight. +- Você deseja adicionar elementos de UI junto da UI existente do Starlight. + +## Como substituir + +1. Escolha qual componente você deseja substituir. + Você pode encontrar uma lista completa de componentes na [Referência de Substituições](/pt-br/reference/overrides/). + + Neste exemplo, substituiremos o componente do Starlight [`SocialIcons`](/pt-br/reference/overrides/#socialicons) que fica na barra de navegação. + +2. Crie um componente Astro para substituir os componentes Starlight. + O exemplo abaixo é de um link de contato. + + ```astro + --- + // src/components/LinkDeEmail.astro + import type { Props } from '@astrojs/starlight/props'; + --- + + <a href="mailto:houston@exemplo.com.br">Nosso e-mail</a> + ``` + +3. Diga ao Starlight para utilizar seu componente personalizado na opção [`components`](/pt-br/reference/configuration/#components) do arquivo `astro.config.mjs`: + + ```js {9-12} + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import starlight from '@astrojs/starlight'; + + export default defineConfig({ + integrations: [ + starlight({ + title: 'Minha Documentação com Substituições', + components: { + // Substitui o componente padrão `SocialIcons`. + SocialIcons: './src/components/LinkDeEmail.astro', + }, + }), + ], + }); + ``` + +## Reutilize um componente padrão + +Você pode construir com os componentes de UI padrão do Starlight da mesma forma que faria ao criar seus próprios componentes: importando e renderizando-o dentro do seu componente personalizado. Isso permite que você mantenha toda a UI base do Starlight em seu design e, ao mesmo tempo, adicionar novos elementos a ela. + +O exemplo a seguir mostra um componente personalizado que renderiza um link de e-mail junto do componente padrão `SocialIcons`: + +```astro {4,8} +--- +// src/components/LinkDeEmail.astro +import type { Props } from '@astrojs/starlight/props'; +import Padrao from '@astrojs/starlight/components/SocialIcons.astro'; +--- + +<a href="mailto:houston@exemplo.com.br">Nosso e-mail</a> +<Padrao {...Astro.props}><slot /></Padrao> +``` + +Quando estiver utilizando um componente padrão num componente personalizado: + +- Utilize a sintaxe de espalhamentodo `Astro.props`: `{...Astro.props}`. Assim garante-se que o componente receberá todos os dados necessários para renderizar corretamente. +- Adicione um [`<slot />`](https://docs.astro.build/pt-br/core-concepts/astro-components/#slots) dentro do componente padrão. Isso é para garantir que o Astro saiba onde renderizar elementos-filho no componente, se algum for passado. + +## Utilize dados da página + +Quando estiver substituindo um componente Starlight, a sua implementação receberá um objeto padrão `Astro.props` contendo todas as informações da página atual. +Isso permite que você utilize esses valores para controlar como seu componente renderiza. + +Por exemplo, você pode ler os valores do frontmatter a partir do `Astro.props.entry.data`. No exemplo a seguir, utilizamos [`PageTitle`](/pt-br/reference/overrides/#pagetitle) para exibir o título da página atual num componente substituto. + +```astro {5} "{title}" +--- +// src/components/Titulo.astro +import type { Props } from '@astrojs/starlight/props'; + +const { titulo } = Astro.props.entry.data; +--- + +<h1 id="_top">{titulo}</h1> + +<style> + h1 { + font-family: 'Comic Sans'; + } +</style> +``` + +Aprenda mais sobre todos os props disponíveis na [Referência de Substituição](/pt-br/reference/overrides/#component-props). + +### Substituindo apenas em páginas específicas + +A substituição de componentes aplica-se a todas as páginas. Porém, você pode fazer o componente +renderizar condicionalmente utilizando `Astro.props` para determinar quando exibir a sua UI personaliza, ou a UI padrão do Starlight, ou até mesmo para exibir algo totalmente diferente. + +No exemplo a seguir, um componente está substituindo o [`Footer`](/pt-br/reference/overrides/#footer-1) padrão do Starlight para exibir "Feito com Starlight 🌟" exclusivamente na página principal, e nas outras exibir o rodapé padrão. + +```astro +--- +// src/components/RodapeCondicional.astro +import type { Props } from '@astrojs/starlight/props'; +import Padrao from '@astrojs/starlight/components/Footer.astro'; + +const isPaginaPrincial = Astro.props.slug === ''; +--- + +{ + isPaginaPrincial ? ( + <footer>Feito com Starlight 🌟</footer> + ) : ( + <Padrao {...Astro.props}> + <slot /> + </Padrao> + ) +} +``` + +Aprenda mais sobre renderização condicional no [Guia de Sintaxe de Template Astro](https://docs.astro.build/pt-br/core-concepts/astro-syntax/#html-din%C3%A2mico). \ No newline at end of file diff --git a/docs/src/content/docs/pt-br/index.mdx b/docs/src/content/docs/pt-br/index.mdx index edab368a721..18674ee4a15 100644 --- a/docs/src/content/docs/pt-br/index.mdx +++ b/docs/src/content/docs/pt-br/index.mdx @@ -22,7 +22,7 @@ hero: image: file: ../../../assets/hero-star.webp actions: - - text: Introdução + - text: Começar icon: right-arrow variant: primary link: /pt-br/getting-started/ diff --git a/docs/src/content/docs/pt-br/reference/overrides.md b/docs/src/content/docs/pt-br/reference/overrides.md new file mode 100644 index 00000000000..f863e9e575e --- /dev/null +++ b/docs/src/content/docs/pt-br/reference/overrides.md @@ -0,0 +1,380 @@ +--- +title: Referência de Substituição +description: Visão geral dos componentes e props de componentes que o Starlight dá suporte a substituição +tableOfContents: + maxHeadingLevel: 4 +--- + +Você pode substituir os componentes padrões do Starlight fornecendo o caminho do componente a ser substituido no campo [`components`](/pt-br/reference/configuration#components) nas configurações do Starlight. +Esta página lista todos os componentes disponíveis para substituição e links do GitHub para a implementação padrão. + +Leia mais em [Guia de Substituição](/pt-br/guides/overriding-components/). + +## Props de componentes + +Todos os componentes podem acessar o objeto padrão `Astro.props` que contém informações sobre a página em que se encontra. + +Para tipar seus componentes personalizados, importe o tipo `Props` do Starlight: + +```astro +--- +import Tipos { Props } from '@astrojs/starlight/props'; + +const { hasSidebar } = Astro.props; +// ^ tipo: boolean +--- +``` +Assim você terá autocomplete e tipos quando acessar `Astro.props`. + + +### Props + +O Starlight passará os seguintes props aos seus componentes personalizados. + +#### `dir` + +**Tipos:** `'ltr' | 'rtl'` + +Direção de escrita da página. + +#### `lang` + +**Tipos:** `string` + +Etiqueta BCP-47 do local da página atual, ex: `en`, `zh-CN`, ou `pt-BR`. + +#### `locale` + +**Tipos:** `string | undefined` + +O caminho base de onde o idioma é servido. `undefined` para slugs do locale raiz. + +#### `slug` + +**Tipos:** `string` + +O slug da página atual, gerado a partir do nome do arquivo. + +#### `id` + +**Tipos:** `string` + +ID único para a página, baseado no nome do arquivo. + +#### `isFallback` + +**Tipos:** `true | undefined` + +Será `true` se a página não tiver tradução no idioma atual e estiver utilizando conteúdo de fallback do local raiz. +Usado apenas em site multilíngues. + +#### `entryMeta` + +**Tipos:** `{ dir: 'ltr' | 'rtl'; lang: string }` + +Metadados do local do conteúdo da página. Pode ser diferente do local atual quando a página estiver utilizando conteúdo de fallback. + +#### `entry` + +A entrada da coleção de conteúdo do Astro para a página atual. +Inclui valores do frontmatter para a página atual em `entry.data`. + +```ts +entry: { + data: { + title: string; + description: string | undefined; + // etc. + } +} +``` + +Leia mais sobre as propriedades desse objeto na referência de [Coleção de Conteúdo Astro](https://docs.astro.build/pt-br/reference/api-reference/#tipo-da-entrada-da-cole%C3%A7%C3%A3o) + +#### `sidebar` + +**Tipos:** `SidebarEntry[]` + +Entradas de navegação da barra lateral na página. + +#### `hasSidebar` + +**Tipos:** `boolean` + +Se a barra lateral será ou não exibida na página. + +#### `pagination` + +**Tipos:** `{ prev?: Link; next?: Link }` + +Links para a próxima página e a anterior na barra lateral, se ativado. + +#### `toc` + +**Tipos:** `{ minHeadingLevel: number; maxHeadingLevel: number; items: TocItem[] } | undefined` + +Sumário da página, se ativado. + +#### `headings` + +**Tipos:** `{ depth: number; slug: string; text: string }[]` + +Arranjo de todos os títulos Markdown extraídos da página atual. +Utilize [`toc`](#toc) ao invés se você deseja construir um sumário que respeita as configurações do Starlight. + +#### `lastUpdated` + +**Tipos:** `Date | undefined` + +Objeto `Date` JavaScript que representa quando a página foi atualizada pela última vez, se ativado. + +#### `editUrl` + +**Tipos:** `URL | undefined` + +Objeto `URL` para o endereço onde a página poderá ser editada, se ativado. + +--- + +## Componentes + +### Head + +Estes componentes são renderizados dentro do `<head>` de cada página. +Deve-se apenas incluir [elementos permitidos dentro do `<head>`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/head#see_also) + +#### `Head` + +**Componente padrão:** [`Head.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Head.astro) + +Componente renderizado dentro do `<head>` de cada página. +Contém tags importantes como `<title>`, e `<meta charset="utf-8">`. + +Substitua esse componente em último caso. +Se possível, dê preferência as opções [`head`](/pt-br/reference/configuration#head) de configuração do Starlight. + +#### `ThemeProvider` + +**Componente padrão:** [`ThemeProvider.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/ThemeProvider.astro) + + +Componente renderizado dentro do `<head>` que configura o suporte para o tema claro/escuro. +A implementação padrão embute um script e um `<template>` utilizado pelo script em [`<ThemeSelect />`](#themeselect). + +--- + +### Acessibilidade + +#### `SkipLink` + +**Componente padrão:** [`SkipLink.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/SkipLink.astro) + +Para acessibilidade, esse componente é renderizado como primeiro elemento do `<body>`, é um link para o conteúdo principal da página atual. +A implementação padrão fica invisível até o usuário focar nela utilizando a tecla Tab no teclado. + +--- + +### Layout + +Estes componentes são responsáveis por dispor os componentes do Starlight e gerenciar a visualização através dos breakpoints. +Substituí-los gera uma complexidade significativa. +Se possível, prefira substituir componentes mais específicos. + + +#### `PageFrame` + +**Componente padrão:** [`PageFrame.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/PageFrame.astro) + +Componente de layout que amarra a maioria do conteúdo da página. +A implementação padrão monta o layout header–sidebar–main. Nele há slots nomeados `header` e `sidebar`, além do slot padrão para o conteúdo principal. +Também renderiza o [`<MobileMenuToggle />`](#mobilemenutoggle) para dar suporte ao abrir/fechar a barra lateral em viewports menores (mobile). + +#### `MobileMenuToggle` + +**Componente padrão:** [`MobileMenuToggle.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/MobileMenuToggle.astro) + +Componente renderizado dentro do [`<PageFrame>`](#pageframe), responsável por abrir ou fechar a barra lateral em viewports menores (mobile). + +#### `TwoColumnContent` + +**Componente padrão:** [`TwoColumnContent.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/TwoColumnContent.astro) + +Componente de layout que amarra a coluna central e a barra da direita (sumário). +A implementação padrão alterna o layout entre uma coluna, em viewport estreitas; e duas colunas, em viewports maiores. + +--- + +### Header + +Estes componentes renderizam a barra de navegação superior do Starlight + +#### `Header` + +**Componente padrão:** [`Header.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Header.astro) + +O componente Header é exibido no início de cada página. +A implementação padrão exibe [`<SiteTitle />`](#sitetitle), [`<Search />`](#search), [`<SocialIcons />`](#socialicons), [`<ThemeSelect />`](#themeselect), e [`<LanguageSelect />`](#languageselect). + +#### `SiteTitle` + +**Componente padrão:** [`SiteTitle.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/SiteTitle.astro) + +Componente renderizado no início do Header que exibe o título do site. +A implementação padrão inclui a lógica para renderizar os logos definidos nas configurações do Starlight. + +#### `Search` + +**Componente padrão:** [`Search.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Search.astro) + +Componente utilizado para renderizar a interface de busca. +A implementação padrão inclui o botão no cabeçalho e o código para exibir o modal de busca quando for clicado e carregar a [interface do Pagefind](https://pagefind.app/). + +#### `SocialIcons` + +**Componente padrão:** [`SocialIcons.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/SocialIcons.astro) + +Componente renderizado no cabeçalho da página, incluindo links das mídias sociais. +A implementação padrão utiliza a opção [`social`](/pt-br/reference/configuration#social) nas configurações do Starlight para renderizar os links e ícones. + +#### `ThemeSelect` + +**Componente padrão:** [`ThemeSelect.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/ThemeSelect.astro) + +Componente renderizado no cabeçalho da página que permite aos usuários selecionar o tema preferido. + +#### `LanguageSelect` + +**Componente padrão:** [`LanguageSelect.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/LanguageSelect.astro) + +Componente renderizado no cabeçalho da página que permite escolher o idioma. + +--- + +### Global Sidebar + +A barra lateral do Starlight inclue a navegação principal do site. +Em telas menores fica invisível, podendo ser exibido via botão de dropdown. + +#### `Sidebar` + +**Componente padrão:** [`Sidebar.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Sidebar.astro) + +Componente que contém a navegação global, renderizado ao lado do conteúdo da página. +A implementação padrão exibe a barra lateral em viewports largas o suficiente e escondido sob um menu dropdown em viewports estreitas (mobile). +Também renderiza o [`<MobileMenuFooter />`](#mobilemenufooter) que exibe itens adicionais dentro do menu mobile. + +#### `MobileMenuFooter` + +**Componente padrão:** [`MobileMenuFooter.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/MobileMenuFooter.astro) + +Componente renderizado no final do menu dropdown mobile. +A implementação padrão renderiza [`<ThemeSelect />`](#themeselect) e [`<LanguageSelect />`](#languageselect). + +--- + +### Page Sidebar + +A barra lateral do Starlight é responsável por exibir o sumário delineando os subtítulos da página atual. +Em viewports estreitas, fica sob um menu dropdown fixo. + + +#### `PageSidebar` + +**Componente padrão:** [`PageSidebar.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/PageSidebar.astro) + +Componente renderizado ao lado do conteúdo da página principal para exibir o sumário. +A implementação padrão renderiza [`<TableOfContents />`](#tableofcontents) e [`<MobileTableOfContents />`](#mobiletableofcontents). + +#### `TableOfContents` + +**Componente padrão:** [`TableOfContents.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/TableOfContents.astro) + +Componente que renderiza o sumário da página atual em viewports largas. + +#### `MobileTableOfContents` + +**Componente padrão:** [`MobileTableOfContents.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/MobileTableOfContents.astro) + +Componente que renderiza o sumário da página atual em viewports estreitas (mobile). + +--- + +### Conteúdo + +Componentes renderizados na coluna central da página. + +#### `Banner` + +**Componente padrão:** [`Banner.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Banner.astro) + +Componente banner renderizado no início de cada página. +A implementação padrão utiliza o valor do frontmatter [`banner`](/pt-br/reference/frontmatter#banner) para decidir se renderiza o banner ou não. + + +#### `ContentPanel` + +**Componente padrão:** [`ContentPanel.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/ContentPanel.astro) + +Componente de layout que amarra as seções da coluna central. + +#### `PageTitle` + +**Componente padrão:** [`PageTitle.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/PageTitle.astro) + +Componente contendo o elemento `<h1>` da página atual. + +Certifique-se de adicionar `id="_top"` ao elemento `<h1>` assim como implementação padrão. + +#### `FallbackContentNotice` + +**Componente padrão:** [`FallbackContentNotice.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/FallbackContentNotice.astro) + +Aviso exibido aos visitantes da página quando a tradução para o idioma atual não estiver disponível. +Apenas utilizado em site multilíngue. + + +#### `Hero` + +**Componente padrão:** [`Hero.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Hero.astro) + +Componente renderizado no início da página quando [`hero`](/pt-br/reference/frontmatter#hero) tiver configurado no frontmatter. +A implementação padrão exibe um título grande, tagline, links de chamada de ação, e opcionalmente, uma imagem junto. + +#### `MarkdownContent` + +**Componente padrão:** [`MarkdownContent.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/MarkdownContent.astro) + +Componente renderizado ao redor do conteúdo principal de cada página. +A implementação padrão adiciona estilos para o conteúdo Markdown. + +--- + +### Footer + +Estes componentes são renderizados no final da coluna de conteúdo principal da página. + +#### `Footer` + +**Componente padrão:** [`Footer.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Footer.astro) + +Componente do rodapé exibido no final de cada página. +A implementação padrão exibe [`<LastUpdated />`](#lastupdated), [`<Pagination />`](#pagination), e [`<EditLink />`](#editlink). + +#### `LastUpdated` + +**Componente padrão:** [`LastUpdated.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/LastUpdated.astro) + +Componente renderizado no rodapé da página que a data de última atualização. + +#### `EditLink` + +**Componente padrão:** [`EditLink.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/EditLink.astro) + +Componente renderizado no rodapé da página que exibe o link de onde a página poderá ser editada. + +#### `Pagination` + +**Componente padrão:** [`Pagination.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Pagination.astro) + + +Componente renderizado no rodapé da página que exibe setas de navegação entre a próxima página e a anterior. From 8ed4a2b649d54032d93659f053321a20b75f5906 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Thu, 26 Oct 2023 13:09:17 +0200 Subject: [PATCH 04/26] docs: tweak overrides reference `headings` prop wording (#984) --- docs/src/content/docs/reference/overrides.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/content/docs/reference/overrides.md b/docs/src/content/docs/reference/overrides.md index e339b3ae51c..b3d95be95dd 100644 --- a/docs/src/content/docs/reference/overrides.md +++ b/docs/src/content/docs/reference/overrides.md @@ -120,7 +120,7 @@ Table of contents for this page if enabled. **Type:** `{ depth: number; slug: string; text: string }[]` Array of all Markdown headings extracted from the current page. -Use [`toc`](#toc) instead if you want to build a table of contents that respects Starlight’s configuration options. +Use [`toc`](#toc) instead if you want to build a table of contents component that respects Starlight’s configuration options. #### `lastUpdated` From 1956c6c8e9dff9769b412fac43a7725f6cc749d9 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank <swithinbank@gmail.com> Date: Thu, 26 Oct 2023 13:16:18 +0200 Subject: [PATCH 05/26] Fix formatting --- .../docs/pt-br/guides/overriding-components.md | 10 +++++----- docs/src/content/docs/pt-br/reference/overrides.md | 12 +++--------- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/docs/src/content/docs/pt-br/guides/overriding-components.md b/docs/src/content/docs/pt-br/guides/overriding-components.md index b02bc17de07..b89ea1a9a7f 100644 --- a/docs/src/content/docs/pt-br/guides/overriding-components.md +++ b/docs/src/content/docs/pt-br/guides/overriding-components.md @@ -23,15 +23,15 @@ Substituir os componentes padrões do Starlight pode ser útil nos seguintes cas ## Como substituir -1. Escolha qual componente você deseja substituir. +1. Escolha qual componente você deseja substituir. Você pode encontrar uma lista completa de componentes na [Referência de Substituições](/pt-br/reference/overrides/). - + Neste exemplo, substituiremos o componente do Starlight [`SocialIcons`](/pt-br/reference/overrides/#socialicons) que fica na barra de navegação. -2. Crie um componente Astro para substituir os componentes Starlight. +2. Crie um componente Astro para substituir os componentes Starlight. O exemplo abaixo é de um link de contato. - ```astro + ```astro --- // src/components/LinkDeEmail.astro import type { Props } from '@astrojs/starlight/props'; @@ -135,4 +135,4 @@ const isPaginaPrincial = Astro.props.slug === ''; } ``` -Aprenda mais sobre renderização condicional no [Guia de Sintaxe de Template Astro](https://docs.astro.build/pt-br/core-concepts/astro-syntax/#html-din%C3%A2mico). \ No newline at end of file +Aprenda mais sobre renderização condicional no [Guia de Sintaxe de Template Astro](https://docs.astro.build/pt-br/core-concepts/astro-syntax/#html-din%C3%A2mico). diff --git a/docs/src/content/docs/pt-br/reference/overrides.md b/docs/src/content/docs/pt-br/reference/overrides.md index f863e9e575e..87af6362506 100644 --- a/docs/src/content/docs/pt-br/reference/overrides.md +++ b/docs/src/content/docs/pt-br/reference/overrides.md @@ -18,14 +18,14 @@ Para tipar seus componentes personalizados, importe o tipo `Props` do Starlight: ```astro --- -import Tipos { Props } from '@astrojs/starlight/props'; +import type { Props } from '@astrojs/starlight/props'; const { hasSidebar } = Astro.props; // ^ tipo: boolean --- ``` -Assim você terá autocomplete e tipos quando acessar `Astro.props`. +Assim você terá autocomplete e tipos quando acessar `Astro.props`. ### Props @@ -157,7 +157,6 @@ Se possível, dê preferência as opções [`head`](/pt-br/reference/configurati **Componente padrão:** [`ThemeProvider.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/ThemeProvider.astro) - Componente renderizado dentro do `<head>` que configura o suporte para o tema claro/escuro. A implementação padrão embute um script e um `<template>` utilizado pelo script em [`<ThemeSelect />`](#themeselect). @@ -180,7 +179,6 @@ Estes componentes são responsáveis por dispor os componentes do Starlight e ge Substituí-los gera uma complexidade significativa. Se possível, prefira substituir componentes mais específicos. - #### `PageFrame` **Componente padrão:** [`PageFrame.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/PageFrame.astro) @@ -199,7 +197,7 @@ Componente renderizado dentro do [`<PageFrame>`](#pageframe), responsável por a **Componente padrão:** [`TwoColumnContent.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/TwoColumnContent.astro) -Componente de layout que amarra a coluna central e a barra da direita (sumário). +Componente de layout que amarra a coluna central e a barra da direita (sumário). A implementação padrão alterna o layout entre uma coluna, em viewport estreitas; e duas colunas, em viewports maiores. --- @@ -277,7 +275,6 @@ A implementação padrão renderiza [`<ThemeSelect />`](#themeselect) e [`<Langu A barra lateral do Starlight é responsável por exibir o sumário delineando os subtítulos da página atual. Em viewports estreitas, fica sob um menu dropdown fixo. - #### `PageSidebar` **Componente padrão:** [`PageSidebar.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/PageSidebar.astro) @@ -310,7 +307,6 @@ Componentes renderizados na coluna central da página. Componente banner renderizado no início de cada página. A implementação padrão utiliza o valor do frontmatter [`banner`](/pt-br/reference/frontmatter#banner) para decidir se renderiza o banner ou não. - #### `ContentPanel` **Componente padrão:** [`ContentPanel.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/ContentPanel.astro) @@ -332,7 +328,6 @@ Certifique-se de adicionar `id="_top"` ao elemento `<h1>` assim como implementa Aviso exibido aos visitantes da página quando a tradução para o idioma atual não estiver disponível. Apenas utilizado em site multilíngue. - #### `Hero` **Componente padrão:** [`Hero.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Hero.astro) @@ -376,5 +371,4 @@ Componente renderizado no rodapé da página que exibe o link de onde a página **Componente padrão:** [`Pagination.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Pagination.astro) - Componente renderizado no rodapé da página que exibe setas de navegação entre a próxima página e a anterior. From e1f4f1fae3d577d659313517dabe4cce324736a7 Mon Sep 17 00:00:00 2001 From: Js Park <junseongpark.dev@gmail.com> Date: Thu, 26 Oct 2023 23:36:01 +0900 Subject: [PATCH 06/26] i18n(ko-KR): update `overrides.mdx` (#992) --- docs/src/content/docs/ko/reference/overrides.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/content/docs/ko/reference/overrides.md b/docs/src/content/docs/ko/reference/overrides.md index 8d435e23abd..2e8334db69a 100644 --- a/docs/src/content/docs/ko/reference/overrides.md +++ b/docs/src/content/docs/ko/reference/overrides.md @@ -118,7 +118,7 @@ entry: { **타입:** `{ depth: number; slug: string; text: string }[]` 현재 페이지에서 추출된 모든 Markdown 제목의 배열입니다. -Starlight의 구성 옵션을 준수하는 콘텐츠의 목차를 생성하기 위해서는 [`toc`](#toc)를 사용하세요. +Starlight의 구성 옵션을 준수하는 콘텐츠 목차 컴포넌트를 생성하기 위해서는 [`toc`](#toc)를 사용하세요. #### `lastUpdated` From 8428a4b0ff99de027caefc9517eea7677040480a Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Thu, 26 Oct 2023 16:43:54 +0200 Subject: [PATCH 07/26] i18n(fr): update `reference/overrides.md` (#994) --- docs/src/content/docs/fr/reference/overrides.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/content/docs/fr/reference/overrides.md b/docs/src/content/docs/fr/reference/overrides.md index 238c7e48f1e..47cc3566f0c 100644 --- a/docs/src/content/docs/fr/reference/overrides.md +++ b/docs/src/content/docs/fr/reference/overrides.md @@ -120,7 +120,7 @@ Table des matières de la page courante si celle-ci est activée. **Type :** `{ depth: number; slug: string; text: string }[]` Un tableau de toutes les en-têtes Markdown extraites de la page courante. -Utilisez [`toc`](#toc) à la place si vous souhaitez construire une table des matières qui respecte les options de configuration de Starlight. +Utilisez [`toc`](#toc) à la place si vous souhaitez construire un composant de table des matières qui respecte les options de configuration de Starlight. #### `lastUpdated` From 232f51207fe97880760fba25351cdc65b20f4c67 Mon Sep 17 00:00:00 2001 From: Nguyen Long Nhat <27698189+torn4dom4n@users.noreply.github.com> Date: Fri, 27 Oct 2023 04:47:27 +0700 Subject: [PATCH 08/26] fix: use `tailwind.config.mjs` file by default config (#903) Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> Co-authored-by: Chris Swithinbank <swithinbank@gmail.com> --- .changeset/thick-bats-pay.md | 5 +++++ docs/src/components/theme-designer.astro | 4 ++-- .../content/docs/guides/css-and-tailwind.mdx | 16 ++++++++-------- examples/tailwind/README.md | 2 +- examples/tailwind/tailwind.config.cjs | 18 ------------------ examples/tailwind/tailwind.config.mjs | 18 ++++++++++++++++++ packages/tailwind/index.ts | 8 ++++---- 7 files changed, 38 insertions(+), 33 deletions(-) create mode 100644 .changeset/thick-bats-pay.md delete mode 100644 examples/tailwind/tailwind.config.cjs create mode 100644 examples/tailwind/tailwind.config.mjs diff --git a/.changeset/thick-bats-pay.md b/.changeset/thick-bats-pay.md new file mode 100644 index 00000000000..65987f72c91 --- /dev/null +++ b/.changeset/thick-bats-pay.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight-tailwind': patch +--- + +Show `tailwind.config.mjs` file in docs diff --git a/docs/src/components/theme-designer.astro b/docs/src/components/theme-designer.astro index a59c2890e0b..176c151255e 100644 --- a/docs/src/components/theme-designer.astro +++ b/docs/src/components/theme-designer.astro @@ -104,14 +104,14 @@ const { } #updateTailwindConfig({ dark, light }: ReturnType<typeof getPalettes>) { - const config = `const starlightPlugin = require('@astrojs/starlight-tailwind'); + const config = `import starlightPlugin from '@astrojs/starlight-tailwind'; // Generated color palettes const accent = { 200: '${dark['accent-high']}', 600: '${light.accent}', 900: '${light['accent-high']}', 950: '${dark['accent-low']}' }; const gray = { 100: '${light['gray-7']}', 200: '${light['gray-6']}', 300: '${light['gray-5']}', 400: '${light['gray-4']}', 500: '${light['gray-3']}', 700: '${light['gray-2']}', 800: '${light['gray-1']}', 900: '${light.white}' }; /** @type {import('tailwindcss').Config} */ -module.exports = { +export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], theme: { extend: { diff --git a/docs/src/content/docs/guides/css-and-tailwind.mdx b/docs/src/content/docs/guides/css-and-tailwind.mdx index f159e936d75..440df5a66ce 100644 --- a/docs/src/content/docs/guides/css-and-tailwind.mdx +++ b/docs/src/content/docs/guides/css-and-tailwind.mdx @@ -181,14 +181,14 @@ If you already have a Starlight site and want to add Tailwind CSS, follow these }); ``` -5. Add the Starlight Tailwind plugin to `tailwind.config.cjs`: +5. Add the Starlight Tailwind plugin to `tailwind.config.mjs`: ```js ins={2,7} - // tailwind.config.cjs - const starlightPlugin = require('@astrojs/starlight-tailwind'); + // tailwind.config.mjs + import starlightPlugin from '@astrojs/starlight-tailwind'; /** @type {import('tailwindcss').Config} */ - module.exports = { + export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], plugins: [starlightPlugin()], }; @@ -206,12 +206,12 @@ If set, the following options will override Starlight’s default styles: - `fontFamily.mono` — used for code examples ```js {12,14,18,20} -// tailwind.config.cjs -const starlightPlugin = require('@astrojs/starlight-tailwind'); -const colors = require('tailwindcss/colors'); +// tailwind.config.mjs +import starlightPlugin from '@astrojs/starlight-tailwind'; +import colors from 'tailwindcss/colors'; /** @type {import('tailwindcss').Config} */ -module.exports = { +export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], theme: { extend: { diff --git a/examples/tailwind/README.md b/examples/tailwind/README.md index 97352ede18a..a4a8ce623b3 100644 --- a/examples/tailwind/README.md +++ b/examples/tailwind/README.md @@ -26,7 +26,7 @@ Inside of your Astro + Starlight project, you'll see the following folders and f │ └── env.d.ts ├── astro.config.mjs ├── package.json -├── tailwind.config.cjs +├── tailwind.config.mjs └── tsconfig.json ``` diff --git a/examples/tailwind/tailwind.config.cjs b/examples/tailwind/tailwind.config.cjs deleted file mode 100644 index 474874c6179..00000000000 --- a/examples/tailwind/tailwind.config.cjs +++ /dev/null @@ -1,18 +0,0 @@ -const colors = require('tailwindcss/colors'); -const starlightPlugin = require('@astrojs/starlight-tailwind'); - -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], - theme: { - extend: { - colors: { - // Your preferred accent color. Indigo is closest to Starlight’s defaults. - accent: colors.indigo, - // Your preferred gray scale. Zinc is closest to Starlight’s defaults. - gray: colors.zinc, - }, - }, - }, - plugins: [starlightPlugin()], -}; diff --git a/examples/tailwind/tailwind.config.mjs b/examples/tailwind/tailwind.config.mjs new file mode 100644 index 00000000000..11977e41e77 --- /dev/null +++ b/examples/tailwind/tailwind.config.mjs @@ -0,0 +1,18 @@ +import colors from 'tailwindcss/colors'; +import starlightPlugin from '@astrojs/starlight-tailwind'; + +/** @type {import('tailwindcss').Config} */ +export default { + content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], + theme: { + extend: { + colors: { + // Your preferred accent color. Indigo is closest to Starlight’s defaults. + accent: colors.indigo, + // Your preferred gray scale. Zinc is closest to Starlight’s defaults. + gray: colors.zinc, + }, + }, + }, + plugins: [starlightPlugin()], +} diff --git a/packages/tailwind/index.ts b/packages/tailwind/index.ts index b35b3390260..52b4e4c4c7d 100644 --- a/packages/tailwind/index.ts +++ b/packages/tailwind/index.ts @@ -9,11 +9,11 @@ import plugin from 'tailwindcss/plugin'; * - Links Starlight’s fonts to `sans` and `mono` in Tailwind theme settings. * * @example - * // tailwind.config.cjs - * const colors = require('tailwindcss/colors'); - * const starlightPlugin = require('@astrojs/starlight/tailwind'); + * // tailwind.config.mjs + * import colors from 'tailwindcss/colors'; + * import starlightPlugin from '@astrojs/starlight-tailwind'; * - * module.exports = { + * export default { * plugins: [ * // Add Starlight’s Tailwind plugin * starlightPlugin(), From 6b02d551c3aa10a3aa0cce93ef4d7d3ef4a06044 Mon Sep 17 00:00:00 2001 From: delucis <delucis@users.noreply.github.com> Date: Thu, 26 Oct 2023 21:48:18 +0000 Subject: [PATCH 09/26] [ci] format --- examples/tailwind/tailwind.config.mjs | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/examples/tailwind/tailwind.config.mjs b/examples/tailwind/tailwind.config.mjs index 11977e41e77..623ce3a9247 100644 --- a/examples/tailwind/tailwind.config.mjs +++ b/examples/tailwind/tailwind.config.mjs @@ -3,16 +3,16 @@ import starlightPlugin from '@astrojs/starlight-tailwind'; /** @type {import('tailwindcss').Config} */ export default { - content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], - theme: { - extend: { - colors: { - // Your preferred accent color. Indigo is closest to Starlight’s defaults. - accent: colors.indigo, - // Your preferred gray scale. Zinc is closest to Starlight’s defaults. - gray: colors.zinc, - }, - }, - }, - plugins: [starlightPlugin()], -} + content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], + theme: { + extend: { + colors: { + // Your preferred accent color. Indigo is closest to Starlight’s defaults. + accent: colors.indigo, + // Your preferred gray scale. Zinc is closest to Starlight’s defaults. + gray: colors.zinc, + }, + }, + }, + plugins: [starlightPlugin()], +}; From 6b1e9df418f5f66c39944b55595c9d80e101f6e7 Mon Sep 17 00:00:00 2001 From: Js Park <junseongpark.dev@gmail.com> Date: Fri, 27 Oct 2023 17:41:38 +0900 Subject: [PATCH 10/26] i18n(ko-KR): update `css-and-tailwind.mdx` (#997) --- .../content/docs/ko/guides/css-and-tailwind.mdx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/docs/src/content/docs/ko/guides/css-and-tailwind.mdx b/docs/src/content/docs/ko/guides/css-and-tailwind.mdx index 80b26460f0f..b4b6aa72dbd 100644 --- a/docs/src/content/docs/ko/guides/css-and-tailwind.mdx +++ b/docs/src/content/docs/ko/guides/css-and-tailwind.mdx @@ -180,19 +180,20 @@ yarn create astro --template starlight/tailwind }); ``` -5. `tailwind.config.cjs` 파일에 Starlight Tailwind 플러그인을 추가하세요. +5. `tailwind.config.mjs` 파일에 Starlight Tailwind 플러그인을 추가하세요. ```js ins={2,7} - // tailwind.config.cjs - const starlightPlugin = require('@astrojs/starlight-tailwind'); + // tailwind.config.mjs + import starlightPlugin from '@astrojs/starlight-tailwind'; /** @type {import('tailwindcss').Config} */ - module.exports = { + export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], plugins: [starlightPlugin()], }; ``` + ### Tailwind로 Starlight 스타일링하기 Starlight는 UI에서 [Tailwind 테마 구성](https://tailwindcss.com/docs/theme) 값을 사용합니다. @@ -205,12 +206,12 @@ Starlight는 UI에서 [Tailwind 테마 구성](https://tailwindcss.com/docs/them - `fontFamily.mono` — 코드 예제에 사용됩니다. ```js {12,14,18,20} -// tailwind.config.cjs -const starlightPlugin = require('@astrojs/starlight-tailwind'); -const colors = require('tailwindcss/colors'); +// tailwind.config.mjs +import starlightPlugin from '@astrojs/starlight-tailwind'; +import colors from 'tailwindcss/colors'; /** @type {import('tailwindcss').Config} */ -module.exports = { +export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], theme: { extend: { From f4e4bb0fcccd82164422038d4b188e3667829643 Mon Sep 17 00:00:00 2001 From: HiDeoo <HiDeoo@users.noreply.github.com> Date: Fri, 27 Oct 2023 08:42:40 +0000 Subject: [PATCH 11/26] [ci] format --- docs/src/content/docs/ko/guides/css-and-tailwind.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/src/content/docs/ko/guides/css-and-tailwind.mdx b/docs/src/content/docs/ko/guides/css-and-tailwind.mdx index b4b6aa72dbd..88a1e3cf221 100644 --- a/docs/src/content/docs/ko/guides/css-and-tailwind.mdx +++ b/docs/src/content/docs/ko/guides/css-and-tailwind.mdx @@ -193,7 +193,6 @@ yarn create astro --template starlight/tailwind }; ``` - ### Tailwind로 Starlight 스타일링하기 Starlight는 UI에서 [Tailwind 테마 구성](https://tailwindcss.com/docs/theme) 값을 사용합니다. From 68384b3c442390185f26a3cc566f90abb282caea Mon Sep 17 00:00:00 2001 From: trueberryless <99918022+trueberryless@users.noreply.github.com> Date: Fri, 27 Oct 2023 13:27:47 +0200 Subject: [PATCH 12/26] i18n(de): update translation reference/overrides.md file into German (#998) --- docs/src/content/docs/de/reference/overrides.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/content/docs/de/reference/overrides.md b/docs/src/content/docs/de/reference/overrides.md index fe7e3d8ef7b..40cd92e14d2 100644 --- a/docs/src/content/docs/de/reference/overrides.md +++ b/docs/src/content/docs/de/reference/overrides.md @@ -120,7 +120,7 @@ Inhaltsverzeichnis für diese Seite, falls aktiviert. **Type:** `{ depth: number; slug: string; text: string }[]` Array aller Markdown-Überschriften, die aus der aktuellen Seite extrahiert wurden. -Verwende stattdessen [`toc`](#toc), wenn du ein Inhaltsverzeichnis erstellen willst, welches die Konfigurationsoptionen von Starlight berücksichtigt. +Verwende stattdessen [`toc`](#toc), wenn du einen Inhaltsverzeichnis-Komponenten erstellen willst, welches die Konfigurationsoptionen von Starlight berücksichtigt. #### `lastUpdated` From 258dcdbc193d983d1b7614497f69290bfd42b5a6 Mon Sep 17 00:00:00 2001 From: trueberryless <99918022+trueberryless@users.noreply.github.com> Date: Fri, 27 Oct 2023 13:29:23 +0200 Subject: [PATCH 13/26] i18n(de): update translation guides/css-and-tailwind.mdx file into German (#999) Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> --- .../content/docs/de/guides/css-and-tailwind.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/src/content/docs/de/guides/css-and-tailwind.mdx b/docs/src/content/docs/de/guides/css-and-tailwind.mdx index e229290205c..051a0190524 100644 --- a/docs/src/content/docs/de/guides/css-and-tailwind.mdx +++ b/docs/src/content/docs/de/guides/css-and-tailwind.mdx @@ -181,14 +181,14 @@ Wenn du bereits eine Starlight-Website hast und Tailwind CSS hinzufügen möchte }); ``` -5. Füge das Starlight Tailwind-Plugin zu `tailwind.config.cjs` hinzu: +5. Füge das Starlight Tailwind-Plugin zu `tailwind.config.mjs` hinzu: ```js ins={2,7} - // tailwind.config.cjs - const starlightPlugin = require('@astrojs/starlight-tailwind'); + // tailwind.config.mjs + import starlightPlugin from '@astrojs/starlight-tailwind'; /** @type {import('tailwindcss').Config} */ - module.exports = { + export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], plugins: [starlightPlugin()], }; @@ -206,12 +206,12 @@ Falls gesetzt, überschreiben die folgenden Optionen die Standard-Styles von Sta - `fontFamily.mono` - wird für Code-Beispiele verwendet ```js {12,14,18,20} -// tailwind.config.cjs -const starlightPlugin = require('@astrojs/starlight-tailwind'); -const colors = require('tailwindcss/colors'); +// tailwind.config.mjs +import starlightPlugin from '@astrojs/starlight-tailwind'; +import colors from 'tailwindcss/colors'; /** @type {import('tailwindcss').Config} */ -module.exports = { +export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], theme: { extend: { From 40a2b31461a0aca3d182567f430c380d7184e0d6 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Fri, 27 Oct 2023 15:10:15 +0200 Subject: [PATCH 14/26] i18n(fr): update `guides/css-and-tailwind.mdx` (#1000) --- .../content/docs/fr/guides/css-and-tailwind.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/src/content/docs/fr/guides/css-and-tailwind.mdx b/docs/src/content/docs/fr/guides/css-and-tailwind.mdx index e1df3e4dcba..e204e070db3 100644 --- a/docs/src/content/docs/fr/guides/css-and-tailwind.mdx +++ b/docs/src/content/docs/fr/guides/css-and-tailwind.mdx @@ -181,14 +181,14 @@ Si vous avez déjà un site Starlight et que vous souhaitez ajouter Tailwind CSS }); ``` -5. Ajoutez le module d'extension Tailwind de Starlight au fichier `tailwind.config.cjs` : +5. Ajoutez le module d'extension Tailwind de Starlight au fichier `tailwind.config.mjs` : ```js ins={2,7} - // tailwind.config.cjs - const starlightPlugin = require('@astrojs/starlight-tailwind'); + // tailwind.config.mjs + import starlightPlugin from '@astrojs/starlight-tailwind'; /** @type {import('tailwindcss').Config} */ - module.exports = { + export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], plugins: [starlightPlugin()], }; @@ -206,12 +206,12 @@ Si définies, les options suivantes remplaceront les styles par défaut de Starl - `fontFamily.mono` — utilisé pour les exemples de code ```js {13,16,21,24} -// tailwind.config.cjs -const starlightPlugin = require('@astrojs/starlight-tailwind'); -const colors = require('tailwindcss/colors'); +// tailwind.config.mjs +import starlightPlugin from '@astrojs/starlight-tailwind'; +import colors from 'tailwindcss/colors'; /** @type {import('tailwindcss').Config} */ -module.exports = { +export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], theme: { extend: { From ba7063556a2fb82b177861d0a612e867643aac0c Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar <46791833+kevinzunigacuellar@users.noreply.github.com> Date: Fri, 27 Oct 2023 10:46:10 -0700 Subject: [PATCH 15/26] Document remark/rehype (#938) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> Co-authored-by: Chris Swithinbank <357379+delucis@users.noreply.github.com> Co-authored-by: Elian ☕️ <15145918+ElianCodes@users.noreply.github.com> --- docs/src/content/docs/guides/authoring-content.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/src/content/docs/guides/authoring-content.md b/docs/src/content/docs/guides/authoring-content.md index 25b9614fb3e..3c686cf7f09 100644 --- a/docs/src/content/docs/guides/authoring-content.md +++ b/docs/src/content/docs/guides/authoring-content.md @@ -207,3 +207,7 @@ Long, single-line code blocks should not wrap. They should horizontally scroll i ## Other common Markdown features Starlight supports all other Markdown authoring syntax, such as lists and tables. See the [Markdown Cheat Sheet from The Markdown Guide](https://www.markdownguide.org/cheat-sheet/) for a quick overview of all the Markdown syntax elements. + +## Advanced Markdown and MDX configuration + +Starlight uses Astro’s Markdown and MDX renderer built on remark and rehype. You can add support for custom syntax and behavior by adding `remarkPlugins` or `rehypePlugins` in your Astro config file. See [“Configuring Markdown and MDX”](https://docs.astro.build/en/guides/markdown-content/#configuring-markdown-and-mdx) in the Astro docs to learn more. From ba0cb2d7b6232af27e832e2818a17169d6e71fb9 Mon Sep 17 00:00:00 2001 From: Js Park <junseongpark.dev@gmail.com> Date: Mon, 30 Oct 2023 02:05:39 +0900 Subject: [PATCH 16/26] i18n(ko-KR): update `authoring-content.md` (#1001) --- docs/src/content/docs/ko/guides/authoring-content.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/src/content/docs/ko/guides/authoring-content.md b/docs/src/content/docs/ko/guides/authoring-content.md index a3168d7bd1e..850422c5b6c 100644 --- a/docs/src/content/docs/ko/guides/authoring-content.md +++ b/docs/src/content/docs/ko/guides/authoring-content.md @@ -208,3 +208,8 @@ var fun = function lang(l) { ## 기타 일반적인 Markdown 기능 Starlight는 목록 및 테이블과 같은 다른 모든 Markdown 작성 구문을 지원합니다. 모든 Markdown 구문 요소에 대한 간략한 개요는 [Markdown Guide의 Markdown 치트 시트](https://www.markdownguide.org/cheat-sheet/)를 참조하세요. + +## 고급 Markdown 및 MDX 구성 + +Starlight는 remark 및 rehype를 기반으로 구축된 Astro의 Markdown 및 MDX 렌더러를 사용합니다. Astro 구성 파일에 `remarkPlugins` 또는 `rehypePlugins`를 추가하여 사용자 정의 구문 및 동작에 대한 지원을 추가할 수 있습니다. 자세한 내용은 Astro 문서의 [Markdown 및 MDX 구성](https://docs.astro.build/ko/guides/markdown-content/#configuring-markdown-and-mdx)을 참조하세요. + From 30ac19b0c0ee900b6568a410348dbebc041ce401 Mon Sep 17 00:00:00 2001 From: delucis <delucis@users.noreply.github.com> Date: Sun, 29 Oct 2023 17:06:30 +0000 Subject: [PATCH 17/26] [ci] format --- docs/src/content/docs/ko/guides/authoring-content.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/src/content/docs/ko/guides/authoring-content.md b/docs/src/content/docs/ko/guides/authoring-content.md index 850422c5b6c..9e2fc598eba 100644 --- a/docs/src/content/docs/ko/guides/authoring-content.md +++ b/docs/src/content/docs/ko/guides/authoring-content.md @@ -212,4 +212,3 @@ Starlight는 목록 및 테이블과 같은 다른 모든 Markdown 작성 구문 ## 고급 Markdown 및 MDX 구성 Starlight는 remark 및 rehype를 기반으로 구축된 Astro의 Markdown 및 MDX 렌더러를 사용합니다. Astro 구성 파일에 `remarkPlugins` 또는 `rehypePlugins`를 추가하여 사용자 정의 구문 및 동작에 대한 지원을 추가할 수 있습니다. 자세한 내용은 Astro 문서의 [Markdown 및 MDX 구성](https://docs.astro.build/ko/guides/markdown-content/#configuring-markdown-and-mdx)을 참조하세요. - From 9fd19276b1cad4a642a782ffc8c4933862c13a9c Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Mon, 30 Oct 2023 12:04:25 +0100 Subject: [PATCH 18/26] i18n(fr): update `guides/authoring-content.md` (#1002) --- docs/src/content/docs/fr/guides/authoring-content.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/src/content/docs/fr/guides/authoring-content.md b/docs/src/content/docs/fr/guides/authoring-content.md index 0757290ea60..fd347cd6b91 100644 --- a/docs/src/content/docs/fr/guides/authoring-content.md +++ b/docs/src/content/docs/fr/guides/authoring-content.md @@ -206,3 +206,7 @@ Les longs blocs de code d'une seule ligne ne doivent pas être enveloppés. Ils ## Autres fonctionnalités courantes de Markdown Starlight prend en charge toutes les autres syntaxes de rédaction Markdown, telles que les listes et les tableaux. Voir [Markdown Cheat Sheet from The Markdown Guide](https://www.markdownguide.org/cheat-sheet/) pour un aperçu rapide de tous les éléments de la syntaxe Markdown. + +## Configuration avancée de Markdown et MDX + +Starlight utilise le moteur de rendu Markdown et MDX d'Astro basé sur remark et rehype. Vous pouvez ajouter la prise en charge de syntaxe et comportement personnalisés en ajoutant `remarkPlugins` ou `rehypePlugins` dans votre fichier de configuration Astro. Pour en savoir plus, consultez [« Configuration de Markdown et MDX »](https://docs.astro.build/fr/guides/markdown-content/#configuration-de-markdown-et-mdx) dans la documentation d'Astro. From 8d410d753f5b4aa9b73250e00f5828b5b13c57fd Mon Sep 17 00:00:00 2001 From: Dennis Morello <dennismorello@gmail.com> Date: Mon, 30 Oct 2023 14:35:17 +0100 Subject: [PATCH 19/26] Add React Awesome Reveal website to showcase (#1006) Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> --- .../react-awesome-reveal.morello.dev.png | Bin 0 -> 34780 bytes docs/src/components/showcase-sites.astro | 5 +++++ 2 files changed, 5 insertions(+) create mode 100644 docs/src/assets/showcase/react-awesome-reveal.morello.dev.png diff --git a/docs/src/assets/showcase/react-awesome-reveal.morello.dev.png b/docs/src/assets/showcase/react-awesome-reveal.morello.dev.png new file mode 100644 index 0000000000000000000000000000000000000000..9ab91ba49e4b6ef34c6a01240d5bc2c4734f4e5a GIT binary patch literal 34780 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 P=t8d~6vT_fjNbo0udk+? literal 0 HcmV?d00001 diff --git a/docs/src/components/showcase-sites.astro b/docs/src/components/showcase-sites.astro index 7b82f96c1bd..6301da3453f 100644 --- a/docs/src/components/showcase-sites.astro +++ b/docs/src/components/showcase-sites.astro @@ -65,4 +65,9 @@ import FluidGrid from './fluid-grid.astro'; thumbnail="ai-prompt-snippets.png" /> <Card title="Folks Router" href="https://folksrouter.io/" thumbnail="folksrouter.io.png" /> + <Card + title="React Awesome Reveal" + href="https://react-awesome-reveal.morello.dev/" + thumbnail="react-awesome-reveal.morello.dev.png" + /> </FluidGrid> From 022bdd324fe78970bb039b7ecac7e00564bb4ab0 Mon Sep 17 00:00:00 2001 From: Waxer59 <78129249+Waxer59@users.noreply.github.com> Date: Tue, 31 Oct 2023 13:48:12 +0100 Subject: [PATCH 20/26] i18n(es): Update `authoring-content.md`, `css-and-tailwind.mdx` & `overrides.md` (#1007) --- .../content/docs/es/guides/authoring-content.md | 4 ++++ .../content/docs/es/guides/css-and-tailwind.mdx | 16 ++++++++-------- docs/src/content/docs/es/reference/overrides.md | 2 +- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/docs/src/content/docs/es/guides/authoring-content.md b/docs/src/content/docs/es/guides/authoring-content.md index 67a66181159..01d16a34b8c 100644 --- a/docs/src/content/docs/es/guides/authoring-content.md +++ b/docs/src/content/docs/es/guides/authoring-content.md @@ -206,3 +206,7 @@ Los bloques de código largos de una sola línea no deben ajustarse automáticam ## Otras características comunes de Markdown Starlight admite todas las demás sintaxis de autoría de Markdown, como listas y tablas. Puedes consultar la [Guía de referencia de Markdown](https://www.markdownguide.org/cheat-sheet/) para obtener una descripción general rápida de todos los elementos de sintaxis de Markdown. + +## Configuración avanzada de Markdown y MDX + +Starlight utiliza el motor de renderizado de Markdown y MDX de Astro, construido sobre remark y rehype. Puedes añadir soporte para sintaxis y comportamientos personalizados añadiendo `remarkPlugins` o `rehypePlugins` en tu archivo de configuración de Astro. Consulta la sección ["Configuración de Markdown y MDX"](https://docs.astro.build/es/guides/markdown-content/#configuraci%C3%B3n-de-markdown-y-mdx) en la documentación de Astro para obtener más información. \ No newline at end of file diff --git a/docs/src/content/docs/es/guides/css-and-tailwind.mdx b/docs/src/content/docs/es/guides/css-and-tailwind.mdx index f2ed5cb7b71..bf44d974007 100644 --- a/docs/src/content/docs/es/guides/css-and-tailwind.mdx +++ b/docs/src/content/docs/es/guides/css-and-tailwind.mdx @@ -181,14 +181,14 @@ Si ya tienes un sitio en Starlight y quieres agregar Tailwind CSS, sigue estos p }); ``` -5. Agrega el plugin Starlight Tailwind a `tailwind.config.cjs`: +5. Agrega el plugin Starlight Tailwind a `tailwind.config.mjs`: ```js ins={2,7} - // tailwind.config.cjs - const starlightPlugin = require('@astrojs/starlight-tailwind'); + // tailwind.config.mjs + import starlightPlugin from '@astrojs/starlight-tailwind'; /** @type {import('tailwindcss').Config} */ - module.exports = { + export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], plugins: [starlightPlugin()], }; @@ -206,12 +206,12 @@ Si se establece, las siguientes opciones anularán los estilos predeterminados d - `fontFamily.mono` - usada para ejemplos de código ```js {12,14,18,20} -// tailwind.config.cjs -const starlightPlugin = require('@astrojs/starlight-tailwind'); -const colors = require('tailwindcss/colors'); +// tailwind.config.mjs +import starlightPlugin from '@astrojs/starlight-tailwind'; +import colors from 'tailwindcss/colors'; /** @type {import('tailwindcss').Config} */ -module.exports = { +export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], theme: { extend: { diff --git a/docs/src/content/docs/es/reference/overrides.md b/docs/src/content/docs/es/reference/overrides.md index 3aad36a2f61..a787b93a426 100644 --- a/docs/src/content/docs/es/reference/overrides.md +++ b/docs/src/content/docs/es/reference/overrides.md @@ -121,7 +121,7 @@ Tabla de contenidos para esta página si está habilitada. **Tipo:** `{ depth: number; slug: string; text: string }[]` Array de todos los encabezados Markdown extraídos de la página actual. -Usa [`toc`](#toc) en su lugar si deseas construir una tabla de contenidos que respete las opciones de configuración de Starlight. +Usa [`toc`](#toc) en su lugar si deseas construir un componente de tabla de contenidos que respete las opciones de configuración de Starlight. #### `lastUpdated` From d2822a1127c622e086ad8877a07adad70d8c3aab Mon Sep 17 00:00:00 2001 From: delucis <delucis@users.noreply.github.com> Date: Tue, 31 Oct 2023 12:49:06 +0000 Subject: [PATCH 21/26] [ci] format --- docs/src/content/docs/es/guides/authoring-content.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/content/docs/es/guides/authoring-content.md b/docs/src/content/docs/es/guides/authoring-content.md index 01d16a34b8c..79590374d71 100644 --- a/docs/src/content/docs/es/guides/authoring-content.md +++ b/docs/src/content/docs/es/guides/authoring-content.md @@ -209,4 +209,4 @@ Starlight admite todas las demás sintaxis de autoría de Markdown, como listas ## Configuración avanzada de Markdown y MDX -Starlight utiliza el motor de renderizado de Markdown y MDX de Astro, construido sobre remark y rehype. Puedes añadir soporte para sintaxis y comportamientos personalizados añadiendo `remarkPlugins` o `rehypePlugins` en tu archivo de configuración de Astro. Consulta la sección ["Configuración de Markdown y MDX"](https://docs.astro.build/es/guides/markdown-content/#configuraci%C3%B3n-de-markdown-y-mdx) en la documentación de Astro para obtener más información. \ No newline at end of file +Starlight utiliza el motor de renderizado de Markdown y MDX de Astro, construido sobre remark y rehype. Puedes añadir soporte para sintaxis y comportamientos personalizados añadiendo `remarkPlugins` o `rehypePlugins` en tu archivo de configuración de Astro. Consulta la sección ["Configuración de Markdown y MDX"](https://docs.astro.build/es/guides/markdown-content/#configuraci%C3%B3n-de-markdown-y-mdx) en la documentación de Astro para obtener más información. From 5bf44577634935b9fa6d50b040abcd680035075f Mon Sep 17 00:00:00 2001 From: Kevin Zuniga Cuellar <46791833+kevinzunigacuellar@users.noreply.github.com> Date: Wed, 1 Nov 2023 14:41:53 -0700 Subject: [PATCH 22/26] feat: add support for adding sidebar badges to group headings (#995) Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> Co-authored-by: Chris Swithinbank <357379+delucis@users.noreply.github.com> --- .changeset/orange-pants-tell.md | 5 ++++ docs/src/components/sidebar-preview.astro | 1 + docs/src/content/docs/guides/sidebar.mdx | 26 ++++++++++++++++++- .../content/docs/reference/configuration.mdx | 2 +- .../basics/navigation-labels.test.ts | 1 + .../__tests__/basics/navigation-order.test.ts | 1 + .../__tests__/basics/navigation.test.ts | 1 + .../__tests__/i18n/navigation-order.test.ts | 4 +++ .../sidebar/navigation-attributes.test.ts | 6 +++++ .../sidebar/navigation-badges.test.ts | 6 +++++ .../sidebar/navigation-hidden.test.ts | 6 +++++ .../sidebar/navigation-order.test.ts | 6 +++++ .../__tests__/sidebar/navigation.test.ts | 6 +++++ .../__tests__/sidebar/vitest.config.ts | 1 + .../starlight/components/SidebarSublist.astro | 16 +++++++++--- packages/starlight/schemas/sidebar.ts | 4 +-- packages/starlight/utils/navigation.ts | 4 +++ 17 files changed, 89 insertions(+), 7 deletions(-) create mode 100644 .changeset/orange-pants-tell.md diff --git a/.changeset/orange-pants-tell.md b/.changeset/orange-pants-tell.md new file mode 100644 index 00000000000..a11ff966b7d --- /dev/null +++ b/.changeset/orange-pants-tell.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight': minor +--- + +Adds support for adding sidebar badges to group headings diff --git a/docs/src/components/sidebar-preview.astro b/docs/src/components/sidebar-preview.astro index 732e766e081..bd10705d169 100644 --- a/docs/src/components/sidebar-preview.astro +++ b/docs/src/components/sidebar-preview.astro @@ -29,6 +29,7 @@ function makeEntries(items: SidebarConfig): SidebarEntry[] { label: item.label, entries: makeEntries(item.items as SidebarConfig), collapsed: item.collapsed, + badge: item.badge, }; }); } diff --git a/docs/src/content/docs/guides/sidebar.mdx b/docs/src/content/docs/guides/sidebar.mdx index 4370c9cc754..47d156df29b 100644 --- a/docs/src/content/docs/guides/sidebar.mdx +++ b/docs/src/content/docs/guides/sidebar.mdx @@ -235,7 +235,7 @@ The `sidebar` frontmatter configuration is only used for autogenerated links and ## Badges -Links can also include a `badge` property to display a badge next to the link label. +Links, groups, and autogenerated groups can also include a `badge` property to display a badge next to their label. ```js starlight({ @@ -251,6 +251,12 @@ starlight({ }, ], }, + // An autogenerated group with a "Deprecated" badge. + { + label: 'Reference', + badge: 'Deprecated', + autogenerate: { directory: 'reference' }, + }, ], }); ``` @@ -269,6 +275,24 @@ The configuration above generates the following sidebar: }, ], }, + { + label: 'Reference', + badge: { text: 'Deprecated', variant: 'default'}, + items: [ + { + label: 'Configuration Reference', + link: '/reference/configuration/', + }, + { + label: 'Frontmatter Reference', + link: '/reference/frontmatter/', + }, + { + label: 'Overrides Reference', + link: '/reference/overrides/', + }, + ], + }, ]} /> diff --git a/docs/src/content/docs/reference/configuration.mdx b/docs/src/content/docs/reference/configuration.mdx index 19647ff8aa0..8d1dfe6aca0 100644 --- a/docs/src/content/docs/reference/configuration.mdx +++ b/docs/src/content/docs/reference/configuration.mdx @@ -183,10 +183,10 @@ sidebar: [ type SidebarItem = { label: string; translations?: Record<string, string>; + badge?: string | BadgeConfig; } & ( | { link: string; - badge?: string | BadgeConfig; attrs?: Record<string, string | number | boolean | undefined>; } | { items: SidebarItem[]; collapsed?: boolean } diff --git a/packages/starlight/__tests__/basics/navigation-labels.test.ts b/packages/starlight/__tests__/basics/navigation-labels.test.ts index 646253508ca..a85b48cbed4 100644 --- a/packages/starlight/__tests__/basics/navigation-labels.test.ts +++ b/packages/starlight/__tests__/basics/navigation-labels.test.ts @@ -36,6 +36,7 @@ describe('getSidebar', () => { "type": "link", }, { + "badge": undefined, "collapsed": false, "entries": [ { diff --git a/packages/starlight/__tests__/basics/navigation-order.test.ts b/packages/starlight/__tests__/basics/navigation-order.test.ts index 089ad8dbdba..6bcd2186f01 100644 --- a/packages/starlight/__tests__/basics/navigation-order.test.ts +++ b/packages/starlight/__tests__/basics/navigation-order.test.ts @@ -17,6 +17,7 @@ describe('getSidebar', () => { expect(getSidebar('/', undefined)).toMatchInlineSnapshot(` [ { + "badge": undefined, "collapsed": false, "entries": [ { diff --git a/packages/starlight/__tests__/basics/navigation.test.ts b/packages/starlight/__tests__/basics/navigation.test.ts index 76611322032..3d76a38efe6 100644 --- a/packages/starlight/__tests__/basics/navigation.test.ts +++ b/packages/starlight/__tests__/basics/navigation.test.ts @@ -34,6 +34,7 @@ describe('getSidebar', () => { "type": "link", }, { + "badge": undefined, "collapsed": false, "entries": [ { diff --git a/packages/starlight/__tests__/i18n/navigation-order.test.ts b/packages/starlight/__tests__/i18n/navigation-order.test.ts index 95ecf27cf51..fb37ca62d40 100644 --- a/packages/starlight/__tests__/i18n/navigation-order.test.ts +++ b/packages/starlight/__tests__/i18n/navigation-order.test.ts @@ -46,6 +46,7 @@ describe('getSidebar', () => { "type": "link", }, { + "badge": undefined, "collapsed": false, "entries": [ { @@ -84,6 +85,7 @@ describe('getSidebar', () => { "type": "link", }, { + "badge": undefined, "collapsed": false, "entries": [ { @@ -99,6 +101,7 @@ describe('getSidebar', () => { "type": "group", }, { + "badge": undefined, "collapsed": false, "entries": [ { @@ -122,6 +125,7 @@ describe('getSidebar', () => { "type": "group", }, { + "badge": undefined, "collapsed": false, "entries": [ { diff --git a/packages/starlight/__tests__/sidebar/navigation-attributes.test.ts b/packages/starlight/__tests__/sidebar/navigation-attributes.test.ts index 7949fc67b9c..66d3b0df454 100644 --- a/packages/starlight/__tests__/sidebar/navigation-attributes.test.ts +++ b/packages/starlight/__tests__/sidebar/navigation-attributes.test.ts @@ -32,6 +32,7 @@ describe('getSidebar', () => { "type": "link", }, { + "badge": undefined, "collapsed": false, "entries": [ { @@ -72,6 +73,10 @@ describe('getSidebar', () => { "type": "group", }, { + "badge": { + "text": "Experimental", + "variant": "default", + }, "collapsed": false, "entries": [ { @@ -90,6 +95,7 @@ describe('getSidebar', () => { "type": "group", }, { + "badge": undefined, "collapsed": false, "entries": [ { diff --git a/packages/starlight/__tests__/sidebar/navigation-badges.test.ts b/packages/starlight/__tests__/sidebar/navigation-badges.test.ts index e6cf12dca3a..542ab869dbc 100644 --- a/packages/starlight/__tests__/sidebar/navigation-badges.test.ts +++ b/packages/starlight/__tests__/sidebar/navigation-badges.test.ts @@ -39,6 +39,7 @@ describe('getSidebar', () => { "type": "link", }, { + "badge": undefined, "collapsed": false, "entries": [ { @@ -79,6 +80,10 @@ describe('getSidebar', () => { "type": "group", }, { + "badge": { + "text": "Experimental", + "variant": "default", + }, "collapsed": false, "entries": [ { @@ -108,6 +113,7 @@ describe('getSidebar', () => { "type": "group", }, { + "badge": undefined, "collapsed": false, "entries": [ { diff --git a/packages/starlight/__tests__/sidebar/navigation-hidden.test.ts b/packages/starlight/__tests__/sidebar/navigation-hidden.test.ts index 5614d5857f1..34c028a3e78 100644 --- a/packages/starlight/__tests__/sidebar/navigation-hidden.test.ts +++ b/packages/starlight/__tests__/sidebar/navigation-hidden.test.ts @@ -28,6 +28,7 @@ describe('getSidebar', () => { "type": "link", }, { + "badge": undefined, "collapsed": false, "entries": [ { @@ -68,6 +69,10 @@ describe('getSidebar', () => { "type": "group", }, { + "badge": { + "text": "Experimental", + "variant": "default", + }, "collapsed": false, "entries": [ { @@ -83,6 +88,7 @@ describe('getSidebar', () => { "type": "group", }, { + "badge": undefined, "collapsed": false, "entries": [ { diff --git a/packages/starlight/__tests__/sidebar/navigation-order.test.ts b/packages/starlight/__tests__/sidebar/navigation-order.test.ts index 18896a1d128..0c17e5b1fd8 100644 --- a/packages/starlight/__tests__/sidebar/navigation-order.test.ts +++ b/packages/starlight/__tests__/sidebar/navigation-order.test.ts @@ -28,6 +28,7 @@ describe('getSidebar', () => { "type": "link", }, { + "badge": undefined, "collapsed": false, "entries": [ { @@ -68,6 +69,10 @@ describe('getSidebar', () => { "type": "group", }, { + "badge": { + "text": "Experimental", + "variant": "default", + }, "collapsed": false, "entries": [ { @@ -91,6 +96,7 @@ describe('getSidebar', () => { "type": "group", }, { + "badge": undefined, "collapsed": false, "entries": [ { diff --git a/packages/starlight/__tests__/sidebar/navigation.test.ts b/packages/starlight/__tests__/sidebar/navigation.test.ts index 2300c5c087b..9255313eaaa 100644 --- a/packages/starlight/__tests__/sidebar/navigation.test.ts +++ b/packages/starlight/__tests__/sidebar/navigation.test.ts @@ -28,6 +28,7 @@ describe('getSidebar', () => { "type": "link", }, { + "badge": undefined, "collapsed": false, "entries": [ { @@ -68,6 +69,10 @@ describe('getSidebar', () => { "type": "group", }, { + "badge": { + "text": "Experimental", + "variant": "default", + }, "collapsed": false, "entries": [ { @@ -91,6 +96,7 @@ describe('getSidebar', () => { "type": "group", }, { + "badge": undefined, "collapsed": false, "entries": [ { diff --git a/packages/starlight/__tests__/sidebar/vitest.config.ts b/packages/starlight/__tests__/sidebar/vitest.config.ts index 56944082f02..a33f9541b7a 100644 --- a/packages/starlight/__tests__/sidebar/vitest.config.ts +++ b/packages/starlight/__tests__/sidebar/vitest.config.ts @@ -28,6 +28,7 @@ export default defineVitestConfig({ // A group linking to all pages in the reference directory. { label: 'Reference', + badge: 'Experimental', autogenerate: { directory: 'reference' }, }, // A group linking to all pages in the api/v1 directory. diff --git a/packages/starlight/components/SidebarSublist.astro b/packages/starlight/components/SidebarSublist.astro index 393edf58f5e..417e2dbf9fc 100644 --- a/packages/starlight/components/SidebarSublist.astro +++ b/packages/starlight/components/SidebarSublist.astro @@ -36,7 +36,15 @@ interface Props { open={flattenSidebar(entry.entries).some((i) => i.isCurrent) || !entry.collapsed} > <summary> - <span class="large">{entry.label}</span> + <div class="group-label"> + <span class="large">{entry.label}</span> + {entry.badge && ( + <> + {' '} + <Badge text={entry.badge.text} variant={entry.badge.variant} /> + </> + )} + </div> <Icon name="right-caret" class="caret" size="1.25rem" /> </summary> <Astro.self sublist={entry.entries} nested /> @@ -78,7 +86,8 @@ interface Props { display: flex; align-items: center; justify-content: space-between; - padding-inline: var(--sl-sidebar-item-padding-inline); + padding: 0.2em var(--sl-sidebar-item-padding-inline); + line-height: 1.4; cursor: pointer; user-select: none; } @@ -120,7 +129,8 @@ interface Props { background-color: var(--sl-color-text-accent); } - a > *:not(:last-child) { + a > *:not(:last-child), + .group-label > *:not(:last-child) { margin-inline-end: 0.25em; } diff --git a/packages/starlight/schemas/sidebar.ts b/packages/starlight/schemas/sidebar.ts index 4ee106eaf15..86eb7f87e48 100644 --- a/packages/starlight/schemas/sidebar.ts +++ b/packages/starlight/schemas/sidebar.ts @@ -9,6 +9,8 @@ const SidebarBaseSchema = z.object({ label: z.string(), /** Translations of the `label` for each supported language. */ translations: z.record(z.string()).default({}), + /** Adds a badge to the link item */ + badge: BadgeConfigSchema(), }); const SidebarGroupSchema = SidebarBaseSchema.extend({ @@ -29,8 +31,6 @@ export const SidebarLinkItemHTMLAttributesSchema = () => linkHTMLAttributesSchem const SidebarLinkItemSchema = SidebarBaseSchema.extend({ /** The link to this item’s content. Can be a relative link to local files or the full URL of an external page. */ link: z.string(), - /** Adds a badge to the link item */ - badge: BadgeConfigSchema(), /** HTML attributes to add to the link item. */ attrs: SidebarLinkItemHTMLAttributesSchema(), }); diff --git a/packages/starlight/utils/navigation.ts b/packages/starlight/utils/navigation.ts index c8a45b4adeb..5710f553206 100644 --- a/packages/starlight/utils/navigation.ts +++ b/packages/starlight/utils/navigation.ts @@ -30,6 +30,7 @@ interface Group { label: string; entries: (Link | Group)[]; collapsed: boolean; + badge: Badge | undefined; } export type SidebarEntry = Link | Group; @@ -75,6 +76,7 @@ function configItemToEntry( label: pickLang(item.translations, localeToLang(locale)) || item.label, entries: item.items.map((i) => configItemToEntry(i, currentPathname, locale, routes)), collapsed: item.collapsed, + badge: item.badge, }; } } @@ -101,6 +103,7 @@ function groupFromAutogenerateConfig( label: pickLang(item.translations, localeToLang(locale)) || item.label, entries: sidebarFromDir(tree, currentPathname, locale, subgroupCollapsed ?? item.collapsed), collapsed: item.collapsed, + badge: item.badge, }; } @@ -231,6 +234,7 @@ function groupFromDir( label: dirName, entries, collapsed, + badge: undefined, }; } From dcb5f7aae1650a60731e27cd13a6f5ac015cd1e9 Mon Sep 17 00:00:00 2001 From: kevinzunigacuellar <kevinzunigacuellar@users.noreply.github.com> Date: Wed, 1 Nov 2023 21:42:33 +0000 Subject: [PATCH 23/26] [ci] format --- docs/src/content/docs/guides/sidebar.mdx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/src/content/docs/guides/sidebar.mdx b/docs/src/content/docs/guides/sidebar.mdx index 47d156df29b..02571ad23ae 100644 --- a/docs/src/content/docs/guides/sidebar.mdx +++ b/docs/src/content/docs/guides/sidebar.mdx @@ -252,11 +252,11 @@ starlight({ ], }, // An autogenerated group with a "Deprecated" badge. - { - label: 'Reference', - badge: 'Deprecated', - autogenerate: { directory: 'reference' }, - }, + { + label: 'Reference', + badge: 'Deprecated', + autogenerate: { directory: 'reference' }, + }, ], }); ``` @@ -276,9 +276,9 @@ The configuration above generates the following sidebar: ], }, { - label: 'Reference', - badge: { text: 'Deprecated', variant: 'default'}, - items: [ + label: 'Reference', + badge: { text: 'Deprecated', variant: 'default' }, + items: [ { label: 'Configuration Reference', link: '/reference/configuration/', @@ -292,7 +292,7 @@ The configuration above generates the following sidebar: link: '/reference/overrides/', }, ], - }, + }, ]} /> From 72cca2d07644f00595da6ebf7d603adb282f359d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20Bontems?= <67456035+cbontems@users.noreply.github.com> Date: Wed, 1 Nov 2023 23:16:01 +0100 Subject: [PATCH 24/26] feat: add support for light / dark hero images (#280) Co-authored-by: Lorenzo Lewis <lorenzo_lewis@icloud.com> Co-authored-by: Chris Swithinbank <swithinbank@gmail.com> --- .changeset/violet-berries-mix.md | 12 ++++ .../src/content/docs/reference/frontmatter.md | 40 ++++++++--- packages/starlight/components/Hero.astro | 30 +++++--- packages/starlight/components/SiteTitle.astro | 10 +-- packages/starlight/schema.ts | 58 +-------------- packages/starlight/schemas/hero.ts | 70 +++++++++++++++++++ packages/starlight/style/util.css | 6 ++ 7 files changed, 147 insertions(+), 79 deletions(-) create mode 100644 .changeset/violet-berries-mix.md create mode 100644 packages/starlight/schemas/hero.ts diff --git a/.changeset/violet-berries-mix.md b/.changeset/violet-berries-mix.md new file mode 100644 index 00000000000..e93a59f81d3 --- /dev/null +++ b/.changeset/violet-berries-mix.md @@ -0,0 +1,12 @@ +--- +'@astrojs/starlight': minor +--- + +Support light & dark variants of the hero image. + +⚠️ **Potentially breaking change:** The `hero.image` schema is now slightly stricter than previously. + +The `hero.image.html` property can no longer be used alongside the `hero.image.alt` or `hero.image.file` properties. +Previously, `html` was ignored when used with `file` and `alt` was ignored when used with `html`. +Now, those combinations will throw errors. +If you encounter errors, remove the `image.hero` property that is not in use. \ No newline at end of file diff --git a/docs/src/content/docs/reference/frontmatter.md b/docs/src/content/docs/reference/frontmatter.md index 9b401383151..e1adddb5a3c 100644 --- a/docs/src/content/docs/reference/frontmatter.md +++ b/docs/src/content/docs/reference/frontmatter.md @@ -111,20 +111,44 @@ hero: --- ``` +You can display different versions of the hero image in light and dark modes. + +```md +--- +hero: + image: + alt: A glittering, brightly colored logo + dark: ../../assets/logo-dark.png + light: ../../assets/logo-light.png +--- +``` + #### `HeroConfig` ```ts interface HeroConfig { title?: string; tagline?: string; - image?: { - alt?: string; - // Relative path to an image in your repository. - file?: string; - // Raw HTML to use in the image slot. - // Could be a custom `<img>` tag or inline `<svg>`. - html?: string; - }; + image?: + | { + // Relative path to an image in your repository. + file: string; + // Alt text to make the image accessible to assistive technology + alt?: string; + } + | { + // Relative path to an image in your repository to be used for dark mode. + dark: string; + // Relative path to an image in your repository to be used for light mode. + light: string; + // Alt text to make the image accessible to assistive technology + alt?: string; + } + | { + // Raw HTML to use in the image slot. + // Could be a custom `<img>` tag or inline `<svg>`. + html: string; + }; actions?: Array<{ text: string; link: string; diff --git a/packages/starlight/components/Hero.astro b/packages/starlight/components/Hero.astro index bd9e8202fdf..f763ce227e2 100644 --- a/packages/starlight/components/Hero.astro +++ b/packages/starlight/components/Hero.astro @@ -14,20 +14,34 @@ const imageAttrs = { height: 400, alt: image?.alt || '', }; + +let darkImage: ImageMetadata | undefined; +let lightImage: ImageMetadata | undefined; +let rawHtml: string | undefined; +if (image) { + if ('file' in image) { + darkImage = image.file; + } else if ('dark' in image) { + darkImage = image.dark; + lightImage = image.light; + } else { + rawHtml = image.html; + } +} --- <div class="hero"> { - image?.file ? ( - image.file.format === 'svg' ? ( - <img src={image.file.src} {...imageAttrs} /> - ) : ( - <Image src={image.file} {...imageAttrs} /> - ) - ) : ( - image?.html && <div class="hero-html sl-flex" set:html={image.html} /> + darkImage && ( + <Image + src={darkImage} + {...imageAttrs} + class:list={{ 'light:sl-hidden': Boolean(lightImage) }} + /> ) } + {lightImage && <Image src={lightImage} {...imageAttrs} class="dark:sl-hidden" />} + {rawHtml && <div class="hero-html sl-flex" set:html={rawHtml} />} <div class="sl-flex stack"> <div class="sl-flex copy"> <h1 id={PAGE_TITLE_ID} data-page-title set:html={title} /> diff --git a/packages/starlight/components/SiteTitle.astro b/packages/starlight/components/SiteTitle.astro index bb1c20384e1..afb09c804f7 100644 --- a/packages/starlight/components/SiteTitle.astro +++ b/packages/starlight/components/SiteTitle.astro @@ -12,7 +12,7 @@ const href = pathWithBase(Astro.props.locale || '/'); config.logo && logos.dark && ( <> <img - class:list={{ 'dark-only': !('src' in config.logo) }} + class:list={{ 'light:sl-hidden': !('src' in config.logo) }} alt={config.logo.alt} src={logos.dark.src} width={logos.dark.width} @@ -21,7 +21,7 @@ const href = pathWithBase(Astro.props.locale || '/'); {/* Show light alternate if a user configure both light and dark logos. */} {!('src' in config.logo) && ( <img - class="light-only" + class="dark:sl-hidden" alt={config.logo.alt} src={logos.light?.src} width={logos.light?.width} @@ -56,10 +56,4 @@ const href = pathWithBase(Astro.props.locale || '/'); object-fit: contain; object-position: 0 50%; } - :global([data-theme='light']) .dark-only { - display: none; - } - :global([data-theme='dark']) .light-only { - display: none; - } </style> diff --git a/packages/starlight/schema.ts b/packages/starlight/schema.ts index 5f73dfdc598..cece5949488 100644 --- a/packages/starlight/schema.ts +++ b/packages/starlight/schema.ts @@ -3,16 +3,13 @@ import type { SchemaContext } from 'astro:content'; import { HeadConfigSchema } from './schemas/head'; import { PrevNextLinkConfigSchema } from './schemas/prevNextLink'; import { TableOfContentsSchema } from './schemas/tableOfContents'; -import { Icons } from './components/Icons'; import { BadgeConfigSchema } from './schemas/badge'; +import { HeroSchema } from './schemas/hero'; import { SidebarLinkItemHTMLAttributesSchema } from './schemas/sidebar'; export { i18nSchema } from './schemas/i18n'; -type IconName = keyof typeof Icons; -const iconNames = Object.keys(Icons) as [IconName, ...IconName[]]; - export function docsSchema() { - return ({ image }: SchemaContext) => + return (context: SchemaContext) => z.object({ /** The title of the current page. Required. */ title: z.string(), @@ -45,56 +42,7 @@ export function docsSchema() { template: z.enum(['doc', 'splash']).default('doc'), /** Display a hero section on this page. */ - hero: z - .object({ - /** - * The large title text to show. If not provided, will default to the top-level `title`. - * Can include HTML. - */ - title: z.string().optional(), - /** - * A short bit of text about your project. - * Will be displayed in a smaller size below the title. - */ - tagline: z.string().optional(), - /** The image to use in the hero. You can provide either a relative `file` path or raw `html`. */ - image: z - .object({ - /** Alt text for screenreaders and other assistive technologies describing your hero image. */ - alt: z.string().default(''), - /** Relative path to an image file in your repo, e.g. `../../assets/hero.png`. */ - file: image().optional(), - /** Raw HTML string instead of an image file. Useful for inline SVGs or more complex hero content. */ - html: z.string().optional(), - }) - .optional(), - /** An array of call-to-action links displayed at the bottom of the hero. */ - actions: z - .object({ - /** Text label displayed in the link. */ - text: z.string(), - /** Value for the link’s `href` attribute, e.g. `/page` or `https://mysite.com`. */ - link: z.string(), - /** Button style to use. One of `primary`, `secondary`, or `minimal` (the default). */ - variant: z.enum(['primary', 'secondary', 'minimal']).default('minimal'), - /** - * An optional icon to display alongside the link text. - * Can be an inline `<svg>` or the name of one of Starlight’s built-in icons. - */ - icon: z - .union([z.enum(iconNames), z.string().startsWith('<svg')]) - .transform((icon) => { - const parsedIcon = z.enum(iconNames).safeParse(icon); - return parsedIcon.success - ? ({ type: 'icon', name: parsedIcon.data } as const) - : ({ type: 'raw', html: icon } as const); - }) - .optional(), - }) - .array() - .default([]), - }) - .optional(), + hero: HeroSchema(context).optional(), /** * The last update date of the current page. diff --git a/packages/starlight/schemas/hero.ts b/packages/starlight/schemas/hero.ts new file mode 100644 index 00000000000..e1b5611c80e --- /dev/null +++ b/packages/starlight/schemas/hero.ts @@ -0,0 +1,70 @@ +import { z } from 'astro/zod'; +import type { SchemaContext } from 'astro:content'; +import { Icons } from '../components/Icons'; + +type IconName = keyof typeof Icons; +const iconNames = Object.keys(Icons) as [IconName, ...IconName[]]; + +export const HeroSchema = ({ image }: SchemaContext) => + z.object({ + /** + * The large title text to show. If not provided, will default to the top-level `title`. + * Can include HTML. + */ + title: z.string().optional(), + /** + * A short bit of text about your project. + * Will be displayed in a smaller size below the title. + */ + tagline: z.string().optional(), + /** The image to use in the hero. You can provide either a relative `file` path or raw `html`. */ + image: z + .union([ + z.object({ + /** Alt text for screenreaders and other assistive technologies describing your hero image. */ + alt: z.string().default(''), + /** Relative path to an image file in your repo, e.g. `../../assets/hero.png`. */ + file: image(), + }), + z.object({ + /** Alt text for screenreaders and other assistive technologies describing your hero image. */ + alt: z.string().default(''), + /** Relative path to an image file in your repo to use in dark mode, e.g. `../../assets/hero-dark.png`. */ + dark: image(), + /** Relative path to an image file in your repo to use in light mode, e.g. `../../assets/hero-light.png`. */ + light: image(), + }), + z + .object({ + /** Raw HTML string instead of an image file. Useful for inline SVGs or more complex hero content. */ + html: z.string(), + }) + .transform(({ html }) => ({ html, alt: '' })), + ]) + .optional(), + /** An array of call-to-action links displayed at the bottom of the hero. */ + actions: z + .object({ + /** Text label displayed in the link. */ + text: z.string(), + /** Value for the link’s `href` attribute, e.g. `/page` or `https://mysite.com`. */ + link: z.string(), + /** Button style to use. One of `primary`, `secondary`, or `minimal` (the default). */ + variant: z.enum(['primary', 'secondary', 'minimal']).default('minimal'), + /** + * An optional icon to display alongside the link text. + * Can be an inline `<svg>` or the name of one of Starlight’s built-in icons. + */ + icon: z + .union([z.enum(iconNames), z.string().startsWith('<svg')]) + .transform((icon) => { + const parsedIcon = z.enum(iconNames).safeParse(icon); + return parsedIcon.success + ? ({ type: 'icon', name: parsedIcon.data } as const) + : ({ type: 'raw', html: icon } as const); + }) + .optional(), + }) + .array() + .default([]), + }); diff --git a/packages/starlight/style/util.css b/packages/starlight/style/util.css index b041a9c2f39..74868532205 100644 --- a/packages/starlight/style/util.css +++ b/packages/starlight/style/util.css @@ -41,6 +41,12 @@ display: block; } } +[data-theme='light'] .light\:sl-hidden { + display: none; +} +[data-theme='dark'] .dark\:sl-hidden { + display: none; +} /* Flip an element around the y-axis when in an RTL context. From 7f92213a0b93de5a844816841a6bc9cdd371de0c Mon Sep 17 00:00:00 2001 From: nunhes <nunhes@gmail.com> Date: Wed, 1 Nov 2023 23:17:58 +0100 Subject: [PATCH 25/26] Add Galician language support (#1004) Co-authored-by: Chris Swithinbank <swithinbank@gmail.com> --- .changeset/four-pots-cheat.md | 5 +++++ docs/src/content/docs/guides/i18n.mdx | 2 +- packages/starlight/translations/gl.json | 22 ++++++++++++++++++++++ packages/starlight/translations/index.ts | 2 ++ 4 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 .changeset/four-pots-cheat.md create mode 100644 packages/starlight/translations/gl.json diff --git a/.changeset/four-pots-cheat.md b/.changeset/four-pots-cheat.md new file mode 100644 index 00000000000..878c564c11b --- /dev/null +++ b/.changeset/four-pots-cheat.md @@ -0,0 +1,5 @@ +--- +"@astrojs/starlight": patch +--- + +Add Galician language support diff --git a/docs/src/content/docs/guides/i18n.mdx b/docs/src/content/docs/guides/i18n.mdx index 78acf66fb3c..f86f3db0357 100644 --- a/docs/src/content/docs/guides/i18n.mdx +++ b/docs/src/content/docs/guides/i18n.mdx @@ -143,7 +143,7 @@ If a translation is not yet available for a language, Starlight will show reader In addition to hosting translated content files, Starlight allows you to translate the default UI strings (e.g. the "On this page" heading in the table of contents) so that your readers can experience your site entirely in the selected language. -English, Czech, French, German, Italian, Japanese, Portuguese, Dutch, Danish, Spanish, Turkish, Arabic, Norwegian, Farsi, Hebrew, Simplified Chinese, Korean, Indonesian, Russian, Swedish, Ukrainian, and Vietnamese translated UI strings are provided out of the box, and we welcome [contributions to add more default languages](https://github.com/withastro/starlight/blob/main/CONTRIBUTING.md). +English, Czech, French, German, Italian, Japanese, Portuguese, Dutch, Danish, Spanish, Turkish, Arabic, Norwegian, Farsi, Hebrew, Simplified Chinese, Korean, Indonesian, Russian, Swedish, Ukrainian, Vietnamese, and Galician translated UI strings are provided out of the box, and we welcome [contributions to add more default languages](https://github.com/withastro/starlight/blob/main/CONTRIBUTING.md). You can provide translations for additional languages you support — or override our default labels — via the `i18n` data collection. diff --git a/packages/starlight/translations/gl.json b/packages/starlight/translations/gl.json new file mode 100644 index 00000000000..9b9d1401b6b --- /dev/null +++ b/packages/starlight/translations/gl.json @@ -0,0 +1,22 @@ +{ + "skipLink.label": "Ir ao contido", + "search.label": "Busca", + "search.shortcutLabel": "(Preme / para Busca)", + "search.cancelLabel": "Deixar", + "search.devWarning": "A busca só está dispoñible nas versións de producción. \nTrata de construir e ollear o sitio para probalo localmente.", + "themeSelect.accessibleLabel": "Seleciona tema", + "themeSelect.dark": "Escuro", + "themeSelect.light": "Claro", + "themeSelect.auto": "Auto", + "languageSelect.accessibleLabel": "Seleciona linguaxe", + "menuButton.accessibleLabel": "Menú", + "sidebarNav.accessibleLabel": "Principal", + "tableOfContents.onThisPage": "Nesta paxina", + "tableOfContents.overview": "Sinopse", + "i18n.untranslatedContent": "Este contido aínda non está dispoñible no teu idioma.", + "page.editLink": "Editar paxina", + "page.lastUpdated": "Última actualización:", + "page.previousLink": "Anterior", + "page.nextLink": "Seguinte", + "404.text": "Paxina non atopada. Comproba a URL ou intenta usar a barra de busca." + } diff --git a/packages/starlight/translations/index.ts b/packages/starlight/translations/index.ts index 52c82d1fe80..92cc73dbd4e 100644 --- a/packages/starlight/translations/index.ts +++ b/packages/starlight/translations/index.ts @@ -7,6 +7,7 @@ import ja from './ja.json'; import pt from './pt.json'; import fa from './fa.json'; import fr from './fr.json'; +import gl from './gl.json'; import he from './he.json'; import id from './id.json'; import it from './it.json'; @@ -34,6 +35,7 @@ export default Object.fromEntries( pt, fa, fr, + gl, he, id, it, From 92103b9cf448d190f06e4865167c65f085c4b86a Mon Sep 17 00:00:00 2001 From: delucis <delucis@users.noreply.github.com> Date: Wed, 1 Nov 2023 22:18:37 +0000 Subject: [PATCH 26/26] [ci] format --- packages/starlight/translations/gl.json | 42 ++++++++++++------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/starlight/translations/gl.json b/packages/starlight/translations/gl.json index 9b9d1401b6b..c184338d027 100644 --- a/packages/starlight/translations/gl.json +++ b/packages/starlight/translations/gl.json @@ -1,22 +1,22 @@ { - "skipLink.label": "Ir ao contido", - "search.label": "Busca", - "search.shortcutLabel": "(Preme / para Busca)", - "search.cancelLabel": "Deixar", - "search.devWarning": "A busca só está dispoñible nas versións de producción. \nTrata de construir e ollear o sitio para probalo localmente.", - "themeSelect.accessibleLabel": "Seleciona tema", - "themeSelect.dark": "Escuro", - "themeSelect.light": "Claro", - "themeSelect.auto": "Auto", - "languageSelect.accessibleLabel": "Seleciona linguaxe", - "menuButton.accessibleLabel": "Menú", - "sidebarNav.accessibleLabel": "Principal", - "tableOfContents.onThisPage": "Nesta paxina", - "tableOfContents.overview": "Sinopse", - "i18n.untranslatedContent": "Este contido aínda non está dispoñible no teu idioma.", - "page.editLink": "Editar paxina", - "page.lastUpdated": "Última actualización:", - "page.previousLink": "Anterior", - "page.nextLink": "Seguinte", - "404.text": "Paxina non atopada. Comproba a URL ou intenta usar a barra de busca." - } + "skipLink.label": "Ir ao contido", + "search.label": "Busca", + "search.shortcutLabel": "(Preme / para Busca)", + "search.cancelLabel": "Deixar", + "search.devWarning": "A busca só está dispoñible nas versións de producción. \nTrata de construir e ollear o sitio para probalo localmente.", + "themeSelect.accessibleLabel": "Seleciona tema", + "themeSelect.dark": "Escuro", + "themeSelect.light": "Claro", + "themeSelect.auto": "Auto", + "languageSelect.accessibleLabel": "Seleciona linguaxe", + "menuButton.accessibleLabel": "Menú", + "sidebarNav.accessibleLabel": "Principal", + "tableOfContents.onThisPage": "Nesta paxina", + "tableOfContents.overview": "Sinopse", + "i18n.untranslatedContent": "Este contido aínda non está dispoñible no teu idioma.", + "page.editLink": "Editar paxina", + "page.lastUpdated": "Última actualización:", + "page.previousLink": "Anterior", + "page.nextLink": "Seguinte", + "404.text": "Paxina non atopada. Comproba a URL ou intenta usar a barra de busca." +}