Mirror of
feat: clean up github badge links and some other stuff
+151
-81
+1
astro.config.mjs
+1
astro.config.mjs
+7
-3
lunaria.config.json
+7
-3
lunaria.config.json
···
36
36
}
37
37
]
38
38
},
39
-
"customCss": ["./lunaria/styles.css"],
40
-
"basesToHide": ["src/content/docs/"],
39
+
"customCss": [
40
+
"./lunaria/styles.css"
41
+
],
42
+
"basesToHide": [
43
+
"src/content/docs/"
44
+
],
41
45
"ui": {
42
46
"statusByLocale.heading": "Translation progress by locale",
43
47
"statusByLocale.incompleteLocalizationLink": "incomplete translation",
···
46
50
"statusByFile.heading": "Translation status by file"
47
51
}
48
52
}
49
-
}
53
+
}
-8
src/components/BadgeLink.astro
-8
src/components/BadgeLink.astro
-9
src/components/StarlightBadgeLink.astro
-9
src/components/StarlightBadgeLink.astro
-22
src/components/TableOfContents.astro
-22
src/components/TableOfContents.astro
···
1
-
---
2
-
import Default from "@astrojs/starlight/components/TableOfContents.astro";
3
-
import BottomTableOfContentsWrapper from "starlight-cooler-credit/components/BottomTableOfContentsWrapper.astro";
4
-
import CreditReferenceCard from "starlight-cooler-credit/components/CreditReferenceCard.astro";
5
-
import ReferenceCard from "./ReferenceCard.astro";
6
-
7
-
import fontStampImage from "../assets/font_stamp.png";
8
-
---
9
-
10
-
<Default><slot /></Default>
11
-
<BottomTableOfContentsWrapper>
12
-
<ReferenceCard
13
-
heading="Atkinson Hyperlegible Next™"
14
-
description={Astro.locals.t("blog.fontReference.description")}
15
-
link="https://www.brailleinstitute.org/freefont/"
16
-
imagePath={fontStampImage}
17
-
imageAlt={Astro.locals.t("blog.fontReference.imageAlt")}
18
-
imageWidth={360}
19
-
imageHeight={360}
20
-
/>
21
-
<CreditReferenceCard />
22
-
</BottomTableOfContentsWrapper>
+3
-3
src/content/docs/blog/accelerating-translations-with-continuous-integration.mdx
+3
-3
src/content/docs/blog/accelerating-translations-with-continuous-integration.mdx
···
19
19
20
20
For the last year, I have been working a lot in various Open Source Communities on GitHub in my free time and I have been enjoying these somehow relaxing contributions because they help me gain new knowledge on a daily basis.
21
21
22
-
After some time contributing I also got to know how kind and welcoming communities behind those projects are. These people have all one thing in common with you: They want to build great stuff in their leisure time. Especially the [Astro](https://github.com/withastro) community is the one and only I have enjoyed being in the most, since it's the most rewarding and friendly at the same time. Not all communities can achieve such a great status among OSS.
22
+
After some time contributing I also got to know how kind and welcoming communities behind those projects are. These people have all one thing in common with you: They want to build great stuff in their leisure time. Especially the [Astro](https://github.com/withastro/astro) community is the one and only I have enjoyed being in the most, since it's the most rewarding and friendly at the same time. Not all communities can achieve such a great status among OSS.
23
23
24
24
Recently, I discovered another evolving project founded by [pelikhan](https://github.com/pelikhan) which aims to automatically translate all your documentation, blogs or shop sites whenever something changes with the help of AI. Whilst initially sceptical, reading more about the project in its README.md had me hooked.
25
25
···
29
29
30
30
You have to know that this was a Friday evening - almost night in my timezone - and [Peli](https://github.com/pelikhan) was currently online, also doing commits after commits to the project. I quickly noticed that, in contrast to the other projects I am part of, Peli did not waste any time merging PRs. It felt very rewarding this night because I just kept going until 1am, Peli merging faster than I could improve features, docs and fixes. Another aspect that felt great was that since this was a young project, Peli did not hesitate to just merge, try it out locally and then pushing little fixes I missed.
31
31
32
-
Fast-forward three days and I am now an official contributor to the project, making it greater and greater almost daily, mainly focusing on docs and the support for my heart project: Starlight - as you might already have guessed from [my blogs](/blog/tags/starlight/).
32
+
Fast-forward three days and I am now an official contributor to the project, making it greater and greater almost daily, mainly focusing on docs and the support for my heart project: [Starlight](https://starlight.astro.build/) - as you might already have guessed from [my blogs](/blog/tags/starlight/).
33
33
34
-
Peli and I have our virtual productivity sessions between 4pm and 8pm UTC, extending longer on weekends. So if you want to join us as an early bird of the project or got interested in using it, feel free to check it out on [GitHub](https://github.com/github): https://github.com/pelikhan/action-continuous-translation
34
+
Peli and I have our virtual productivity sessions between 4pm and 8pm UTC, extending longer on weekends. So if you want to join us as an early bird of the project or got interested in using it, feel free to check it out on [GitHub](https://github.com/pelikhan/action-continuous-translation).
+1
-1
src/content/docs/blog/mutanuq.mdx
+1
-1
src/content/docs/blog/mutanuq.mdx
···
22
22
23
23
Despite the setbacks, I kept iterating. By 2023, I had created and discarded about 10 versions of the site, always searching for a cleaner design and more efficient management system. The site’s potential was clear to me, but its usability wasn’t there yet.
24
24
25
-
That’s when I stumbled upon [Starlight](https://starlight.astro.build/), a powerful and amazing framework created by [Chris Swithinbank (@delucis)](https://github.com/delucis) for building fast, Markdown-driven websites. Discovering Starlight was a turning point—it allowed me to blend two things I’m passionate about: creating websites and using Markdown for its simplicity and elegance.
25
+
That’s when I stumbled upon [Starlight](https://starlight.astro.build), a powerful and amazing framework created by [Chris Swithinbank (@delucis)](https://github.com/delucis) for building fast, Markdown-driven websites. Discovering Starlight was a turning point—it allowed me to blend two things I’m passionate about: creating websites and using Markdown for its simplicity and elegance.
26
26
27
27
With the transition to Starlight, Schneider IT evolved into *Mutanuq*. The new name marked a fresh start and reflected the streamlined, modernized website it had become. I rewrote everything, optimized the site’s performance, and focused on creating content tailored specifically to my classmates’ needs, especially for upcoming tests.
28
28
+1
-3
src/content/docs/blog/rehype-github-badge-links.mdx
+1
-3
src/content/docs/blog/rehype-github-badge-links.mdx
···
15
15
featured: true
16
16
---
17
17
18
-
import StarlightBadgeLink from "../../../components/StarlightBadgeLink.astro";
19
-
20
18
Recently, I added a very little neat feature to this blog, which you might have noticed as a regular reader. It's nothing huge, but gives every blog this little lovely touch I, which I have longed for a long time. I am ~talking~ writing about all those green badges with profile pictures you can see in this blog as well.
21
19
22
20
The inspiration to create them was taken from none other than [Antfu](https://github.com/antfu) himself, as he has those badges all over the place on his website (as time of writing).
···
66
64
67
65
Basically all this plugin does, is walking through the HTML, looking for links which reference to any GitHub profile. If it finds one, it adds an `<img>` tag before the text content with the profile picture of the GitHub user or organisation. This is possible very consistently thanks to GitHub's feature of making the picture available as a resource behind the profile link appended with `.png`. Read more about that feature in [this awesome article on `dev.to`](https://dev.to/10xlearner/how-to-get-the-profile-picture-of-a-github-account-1d82).
68
66
69
-
With a little bit of additional styling it looks really cute in my opinion. Please note that since this is a <StarlightBadgeLink /> page, I use available CSS variables, like in line four:
67
+
With a little bit of additional styling it looks really cute in my opinion. Please note that since this is a [Starlight](https://starlight.astro.build) page, I use available CSS variables, like in line four:
70
68
71
69
```css "var(--sl-color-accent-low)" "var(--sl-color-accent)"
72
70
// src/styles/custom.css
+1
-3
src/content/docs/de/blog/rehype-github-badge-links.mdx
+1
-3
src/content/docs/de/blog/rehype-github-badge-links.mdx
···
23
23
24
24
---
25
25
26
-
import StarlightBadgeLink from "../../../../components/StarlightBadgeLink.astro";
27
-
28
26
Kürzlich habe ich diesem Blog eine ganz kleine, aber feine Funktion hinzugefügt, die Ihnen als regelmäßiger Leser vielleicht aufgefallen ist. Es ist nichts riesiges, aber es verleiht jedem Blog diesen kleinen, charmanten Touch, nach dem ich mich schon lange gesehnt habe. Ich spreche ~~schreibe~~ von diesen grünen Abzeichen mit Profilbildern, die Sie auch in diesem Blog sehen können.
29
27
30
28
Die Inspiration, sie zu erstellen, stammt von niemand anderem als [Antfu](https://github.com/antfu) selbst, der solche Abzeichen überall auf seiner Website hat (zum Zeitpunkt des Schreibens).
···
74
72
75
73
Im Wesentlichen durchsucht dieses Plugin das HTML nach Links, die auf ein GitHub-Profil verweisen. Wenn es einen solchen Link findet, fügt es vor dem Textinhalt ein `<img>`-Tag mit dem Profilbild des GitHub-Benutzers oder der Organisation ein. Dies ist dank GitHubs Funktion, das Bild als Ressource hinter dem Profillink mit der Endung `.png` zur Verfügung zu stellen, sehr konsistent möglich. Lesen Sie mehr über diese Funktion in [diesem großartigen Artikel auf `dev.to`](https://dev.to/10xlearner/how-to-get-the-profile-picture-of-a-github-account-1d82).
76
74
77
-
Mit ein wenig zusätzlichem Styling sieht es meiner Meinung nach wirklich niedlich aus. Bitte beachten Sie, dass dies eine <StarlightBadgeLink />-Seite ist und ich verfügbare CSS-Variablen verwende, wie in Zeile vier:
75
+
Mit ein wenig zusätzlichem Styling sieht es meiner Meinung nach wirklich niedlich aus. Bitte beachten Sie, dass dies eine [Starlight](https://starlight.astro.build)-Seite ist und ich verfügbare CSS-Variablen verwende, wie in Zeile vier:
78
76
79
77
```css "var(--sl-color-accent-low)" "var(--sl-color-accent)"
80
78
// src/styles/custom.css
+1
-3
src/content/docs/fr/blog/rehype-github-badge-links.mdx
+1
-3
src/content/docs/fr/blog/rehype-github-badge-links.mdx
···
23
23
24
24
---
25
25
26
-
import StarlightBadgeLink from "../../../../components/StarlightBadgeLink.astro";
27
-
28
26
Récemment, j'ai ajouté une petite fonctionnalité sympa à ce blog, que vous avez peut-être remarquée en tant que lecteur régulier. Ce n'est rien de gigantesque, mais cela donne à chaque blog cette petite touche charmante que j'ai recherchée pendant longtemps. Je parle (ou plutôt j'écris) de tous ces badges verts avec des photos de profil que vous pouvez également voir dans ce blog.
29
27
30
28
L'inspiration pour les créer vient de nul autre qu'[Antfu](https://github.com/antfu) lui-même, puisqu'il affiche ces badges partout sur son site web (au moment de cette rédaction).
···
74
72
75
73
En gros, tout ce que fait ce plugin, c'est parcourir le HTML à la recherche de liens qui font référence à un profil GitHub. Si l'un d'eux est trouvé, il ajoute une balise `<img>` avant le contenu texte avec la photo de profil de l'utilisateur ou de l'organisation GitHub. Cela est possible de manière très cohérente grâce à la fonctionnalité de GitHub qui permet d'obtenir la photo comme ressource derrière le lien du profil suivi de `.png`. Lisez-en plus à ce sujet dans [cet article génial sur `dev.to`](https://dev.to/10xlearner/how-to-get-the-profile-picture-of-a-github-account-1d82).
76
74
77
-
Avec un peu de style supplémentaire, cela a un rendu vraiment mignon à mon avis. Veuillez noter que comme ceci est une page <StarlightBadgeLink />, j'utilise des variables CSS disponibles, comme dans la ligne quatre :
75
+
Avec un peu de style supplémentaire, cela a un rendu vraiment mignon à mon avis. Veuillez noter que comme ceci est une page [Starlight](https://starlight.astro.build), j'utilise des variables CSS disponibles, comme dans la ligne quatre :
78
76
79
77
```css "var(--sl-color-accent-low)" "var(--sl-color-accent)"
80
78
// src/styles/custom.css
+132
-22
src/plugins/rehype/github-badge-links.ts
+132
-22
src/plugins/rehype/github-badge-links.ts
···
1
1
import { h } from "hastscript";
2
2
import { visit } from "unist-util-visit";
3
3
4
+
const specialCases = [
5
+
{
6
+
href: "https://stackblitz.com/**",
7
+
icon: "https://avatars.githubusercontent.com/u/28635252?v=4",
8
+
},
9
+
{
10
+
href: "https://starlight.astro.build",
11
+
icon: "/starlight.png",
12
+
},
13
+
];
14
+
15
+
// Helpers
16
+
const normalize = (url: string) => {
17
+
try {
18
+
const u = new URL(url);
19
+
return u.origin + u.pathname.replace(/\/+$/, "");
20
+
} catch {
21
+
return url.replace(/\/+$/, "");
22
+
}
23
+
};
24
+
25
+
const toRegex = (pattern: string) => {
26
+
pattern = pattern.replace(/\*\*/g, "<<<GLOBSTAR>>>");
27
+
pattern = pattern.replace(/\*/g, "<<<STAR>>>");
28
+
pattern = pattern.replace(/[-/\\^$+?.()|[\]{}]/g, "\\$&");
29
+
pattern = pattern
30
+
.replace(/<<<GLOBSTAR>>>/g, ".*")
31
+
.replace(/<<<STAR>>>/g, "[^/]+");
32
+
return new RegExp("^" + pattern + "$");
33
+
};
34
+
35
+
const normalizedCases = specialCases.map((s) => ({
36
+
...s,
37
+
regex: toRegex(normalize(s.href)),
38
+
}));
39
+
40
+
const getNodeText = (node: any): string => {
41
+
if (!node.children) return "";
42
+
return node.children
43
+
.filter((c: any) => c.type === "text")
44
+
.map((c: any) => c.value)
45
+
.join("")
46
+
.trim();
47
+
};
48
+
4
49
export default function rehypeGitHubBadgeLinks() {
5
50
return (tree: any, file: any) => {
6
51
const frontmatter = file.data?.astro?.frontmatter ?? {};
7
-
8
-
if (frontmatter.badgeLinks === false) {
9
-
return;
10
-
}
52
+
if (frontmatter.badgeLinks === false) return;
11
53
12
54
visit(tree, "element", (node) => {
13
-
if (
14
-
node.tagName === "a" &&
15
-
typeof node.properties?.href === "string" &&
16
-
node.properties.href.startsWith("https://github.com/")
17
-
) {
18
-
const match = node.properties.href.match(
19
-
/^https:\/\/github\.com\/([\w-]+)\/?$/
55
+
if (node.tagName !== "a" || typeof node.properties?.href !== "string") {
56
+
return;
57
+
}
58
+
59
+
const href = node.properties.href;
60
+
const normalizedHref = normalize(href);
61
+
const text = normalize(getNodeText(node));
62
+
63
+
//
64
+
// --- 1) Special case badge handling ---
65
+
//
66
+
const special = normalizedCases.find((s) => s.regex.test(normalizedHref));
67
+
68
+
if (special) {
69
+
node.properties.className = (node.properties.className || []).concat(
70
+
"gh-badge"
20
71
);
21
-
if (match) {
22
-
const username = match[1];
23
72
24
-
node.properties.className = (node.properties.className || []).concat(
25
-
"gh-badge"
26
-
);
73
+
const iconImg = h("img", {
74
+
src: special.icon,
75
+
alt: "icon",
76
+
});
77
+
78
+
node.children.unshift(iconImg);
79
+
return;
80
+
}
81
+
82
+
//
83
+
// 2) GitHub-specific logic
84
+
//
85
+
const ghMatch = href.match(
86
+
/^https:\/\/github\.com\/([^/]+)(?:\/([^/]+))?\/?$/
87
+
);
88
+
89
+
if (!ghMatch) return;
90
+
91
+
const org = ghMatch[1];
92
+
const repo = ghMatch[2] || null;
93
+
94
+
//
95
+
// 2a) If text is exactly "github"
96
+
//
97
+
if (text.toLowerCase() === "github") {
98
+
node.properties.className = (node.properties.className || []).concat(
99
+
"gh-badge"
100
+
);
101
+
102
+
node.children.unshift(
103
+
h("img", {
104
+
src: "https://avatars.githubusercontent.com/u/9919?v=4",
105
+
alt: "GitHub",
106
+
})
107
+
);
108
+
return;
109
+
}
27
110
28
-
const avatarImg = h("img", {
29
-
src: `https://github.com/${username}.png`,
30
-
alt: username,
31
-
});
111
+
//
112
+
// 2b) If text equals the repo name (strict rule)
113
+
//
114
+
if (repo && text === normalize(repo)) {
115
+
node.properties.className = (node.properties.className || []).concat(
116
+
"gh-badge"
117
+
);
32
118
33
-
node.children.unshift(avatarImg);
34
-
}
119
+
node.children.unshift(
120
+
h("img", {
121
+
src: `https://github.com/${org}.png`,
122
+
alt: org,
123
+
})
124
+
);
125
+
return;
35
126
}
127
+
128
+
//
129
+
// 2c) ORIGINAL GITHUB FALLBACK LOGIC (kept exactly as you had it)
130
+
//
131
+
// - If only an org/user is provided → badge with org avatar
132
+
// - If a repo is provided but no strict text match → badge with org avatar
133
+
//
134
+
node.properties.className = (node.properties.className || []).concat(
135
+
"gh-badge"
136
+
);
137
+
138
+
node.children.unshift(
139
+
h("img", {
140
+
src: `https://github.com/${org}.png`,
141
+
alt: org,
142
+
})
143
+
);
144
+
145
+
return;
36
146
});
37
147
};
38
148
}
+2
-2
translations/de.json
+2
-2
translations/de.json
···
344
344
"Initially I thought they would require some long and tedious programming session.255FD9F39C231A32E556": "Anfangs dachte ich, dafür wäre eine lange und mühsame Programmiersitzung nötig, um dieselbe visuelle Schönheit zu erreichen. Doch nach einigem \"Vibe Coding\" – wie [Andrej Karpathy den Begriff prägte](https://x.com/karpathy/status/1886192184808149383) – wurde mir schnell klar, dass diese Abzeichen nur ein kleines [rehype](https://github.com/rehypejs)-Plugin von ihrer Existenz entfernt waren.",
345
345
"This is the whole code behind the rehype plugin:": "Dies ist der gesamte Code hinter dem Rehype-Plugin:",
346
346
"Basically all this plugin does, is walking through the HTML, looking for links w.713A33AB7C816E7ADAF6": "Im Wesentlichen durchsucht dieses Plugin das HTML nach Links, die auf ein GitHub-Profil verweisen. Wenn es einen solchen Link findet, fügt es vor dem Textinhalt ein `<img>`-Tag mit dem Profilbild des GitHub-Benutzers oder der Organisation ein. Dies ist dank GitHubs Funktion, das Bild als Ressource hinter dem Profillink mit der Endung `.png` zur Verfügung zu stellen, sehr konsistent möglich. Lesen Sie mehr über diese Funktion in [diesem großartigen Artikel auf `dev.to`](https://dev.to/10xlearner/how-to-get-the-profile-picture-of-a-github-account-1d82).",
347
-
"With a little bit of additional styling it looks really cute in my opinion. Plea.3CF02F394DFC8ECF3E94": "Mit ein wenig zusätzlichem Styling sieht es meiner Meinung nach wirklich niedlich aus. Bitte beachten Sie, dass dies eine <StarlightBadgeLink />-Seite ist und ich verfügbare CSS-Variablen verwende, wie in Zeile vier:",
347
+
"With a little bit of additional styling it looks really cute in my opinion. Plea.3CF02F394DFC8ECF3E94": "Mit ein wenig zusätzlichem Styling sieht es meiner Meinung nach wirklich niedlich aus. Bitte beachten Sie, dass dies eine [Starlight](https://starlight.astro.build)-Seite ist und ich verfügbare CSS-Variablen verwende, wie in Zeile vier:",
348
348
"Now to put everything together, let's say for example in an Astro site, you just.9BE9659FCADE76D6467F": "Um nun alles zusammenzufügen, müssen Sie beispielsweise in einer Astro-Site lediglich das Rehype-Plugin wie folgt zur Konfiguration hinzufügen:",
349
349
"Read more about the injection of rehype plugins in Astro in [their configuration.D3124728AFCD14A1CEE8": "Lesen Sie mehr über die Einbindung von Rehype-Plugins in Astro in [deren Konfigurationsreferenz](https://docs.astro.build/en/reference/configuration-reference/#markdownrehypeplugins).",
350
350
"Do not forget to add the CSS in a similar way depending on your framework - in S.8376354E6C8822949CB6": "Vergessen Sie nicht, das CSS auf ähnliche Weise je nach Framework hinzuzufügen – in Starlight können Sie individuelle globale CSS-Stile konfigurieren, indem Sie [diese Anweisungen](https://docs.astro.build/en/guides/styling/#scoped-styles) befolgen – und schon können Sie Ihre eigenen Abzeichen-Links bewundern. Teilen Sie diesen Beitrag gerne mit jedem, den Sie dazu überzeugen möchten, diese Funktionen ebenfalls zu nutzen.",
···
606
606
"If you want to check out the code presented in this blog, feel free to visit the.9F7F074B6E1A29450183": "Wenn Sie den in diesem Blog vorgestellten Code ausprobieren möchten, besuchen Sie gerne die [StackBlitz](https://stackblitz.com/github/trueberryless/starlight-autogenerate-whole-sidebar?file=src%2Fcontent.config.ts) oder den Quellcode im [GitHub-Repo](https://github.com/trueberryless/starlight-autogenerate-whole-sidebar).",
607
607
"You might think that this story is now over because everyone could just use the .C9618FDEC9BA9ED17D35": "Sie könnten denken, dass diese Geschichte nun vorbei ist, da jeder einfach die Variante nutzen könnte, die er bevorzugt, und alle wären glücklich. Aber Starlight entwickelte sich weiter und verbessert sich ständig. Etwa drei Monate später, am 15. Februar, fast wie ein [Geburtstagsgeschenk](/blog/20th-birthday/) für mich, kam die lang erwartete Ergänzung von Routendaten in Starlight mit der Veröffentlichung von [v0.32](https://github.com/withastro/starlight/releases/tag/@astrojs/starlight@0.32.0). Diese scheinbar kleine Ergänzung eröffnete so viele Möglichkeiten, die ich selbst nie erwartet hätte. HiDeoo war einmal mehr die führende Inspiration für Plugin-Autoren und trieb diese neue Funktionalität bis an ihre Grenzen. Es dauerte nur zwei Tage, um [mehr als 11 Plugins an die neueste Starlight-Version von damals anzupassen](https://bsky.app/profile/hideoo.dev/post/3liffpudc5c2b), und später wurden viele dieser Codeabschnitte verbessert und refaktoriert, um diese mächtige Funktion noch weiter zu nutzen.",
608
608
"Deactivate TLS within Argo CD": "TLS in Argo CD deaktivieren"
609
-
}
609
+
}
+1
-1
translations/fr.json
+1
-1
translations/fr.json
···
344
344
"Initially I thought they would require some long and tedious programming session.255FD9F39C231A32E556": "Au départ, je pensais qu'il faudrait une longue et fastidieuse session de programmation pour atteindre la même beauté visuelle. Cependant, après quelques sessions de Vibe Coding - comme [Andrej Karpathy a inventé le terme](https://x.com/karpathy/status/1886192184808149383) - j'ai rapidement réalisé que ces badges n'étaient qu'à un petit [plugin rehype](https://github.com/rehypejs) d'existence.",
345
345
"This is the whole code behind the rehype plugin:": "Voici tout le code derrière le plugin rehype :",
346
346
"Basically all this plugin does, is walking through the HTML, looking for links w.713A33AB7C816E7ADAF6": "En gros, tout ce que fait ce plugin, c'est parcourir le HTML à la recherche de liens qui font référence à un profil GitHub. Si l'un d'eux est trouvé, il ajoute une balise `<img>` avant le contenu texte avec la photo de profil de l'utilisateur ou de l'organisation GitHub. Cela est possible de manière très cohérente grâce à la fonctionnalité de GitHub qui permet d'obtenir la photo comme ressource derrière le lien du profil suivi de `.png`. Lisez-en plus à ce sujet dans [cet article génial sur `dev.to`](https://dev.to/10xlearner/how-to-get-the-profile-picture-of-a-github-account-1d82).",
347
-
"With a little bit of additional styling it looks really cute in my opinion. Plea.3CF02F394DFC8ECF3E94": "Avec un peu de style supplémentaire, cela a un rendu vraiment mignon à mon avis. Veuillez noter que comme ceci est une page <StarlightBadgeLink />, j'utilise des variables CSS disponibles, comme dans la ligne quatre :",
347
+
"With a little bit of additional styling it looks really cute in my opinion. Plea.3CF02F394DFC8ECF3E94": "Avec un peu de style supplémentaire, cela a un rendu vraiment mignon à mon avis. Veuillez noter que comme ceci est une page [Starlight](https://starlight.astro.build), j'utilise des variables CSS disponibles, comme dans la ligne quatre :",
348
348
"Now to put everything together, let's say for example in an Astro site, you just.9BE9659FCADE76D6467F": "Pour tout assembler, disons, par exemple, dans un site Astro, vous devez simplement ajouter le plugin rehype à la configuration comme ceci :",
349
349
"Read more about the injection of rehype plugins in Astro in [their configuration.D3124728AFCD14A1CEE8": "Lisez-en davantage sur l'injection des plugins rehype dans Astro dans [leur référence de configuration](https://docs.astro.build/en/reference/configuration-reference/#markdownrehypeplugins).",
350
350
"Do not forget to add the CSS in a similar way depending on your framework - in S.8376354E6C8822949CB6": "N'oubliez pas d'ajouter le CSS de manière similaire, en fonction de votre framework - dans Starlight, vous pouvez configurer des styles CSS globaux personnalisés en suivant [ces instructions](https://docs.astro.build/en/guides/styling/#scoped-styles) - et vous pouvez également admirer vos propres liens en badge. N'hésitez pas à partager cet article avec toute personne que vous souhaitez convaincre d'utiliser ces fonctionnalités.",