[UwU] About page redesign (#711)

- Combines about page into a single MDX file per translation
- Adds a license component for sticker attribution

---

- **TODO:** code blocks in the license dialog aren't being processed by
`unified` / `remark-shiki-twoslash` correctly in the deployment build,
resulting in incorrect styling (the "shiki" classes/spans aren't being
added). This works perfectly fine in dev mode. I have no clue what's
going on.

content/blog/advice-for-new-twitch-streamers/index.md

@@ -4,7 +4,7 @@
     description: "Twitch streaming can be fun and fulfilling, but has various roadblocks in the way for newcomers. Here's how you can overcome them and grow your Twitch channel.",
     published: '2023-03-25T21:52:59.284Z',
     authors: ['crutchcorn'],
-    tags: ['opinion'],
+    tags: ['opinion', 'twitch'],
     attached: [],
     license: 'cc-by-4'
 }

content/blog/debugging-nodejs-programs-using-chrome/index.md

@@ -4,7 +4,7 @@
 	description: 'Learn how to interactively debug your NodeJS applications using a GUI-based debugger built into Chrome.',
 	published: '2020-01-21T05:12:03.284Z',
 	authors: ['crutchcorn'],
-	tags: ['node', 'chrome'],
+	tags: ['nodejs', 'chrome'],
 	attached: [],
 	license: 'cc-by-nc-sa-4'
 }

content/blog/documentation-driven-development/index.md

@@ -4,7 +4,7 @@ title: "A Better Way To Code: Documentation Driven Development",
 description: "Test Driven Development is often taught to improve a your workflow; I present Documentation Driven Development as an alternative approach.",
 published: '2022-01-18T22:12:03.284Z',
 authors: ['crutchcorn'],
-tags: ['testing', 'opinion'],
+tags: ['testing', 'opinion', 'documentation'],
 attached: [],
 license: 'cc-by-nc-sa-4',
 }

content/blog/how-to-use-npm/index.md

@@ -4,7 +4,7 @@
     description: "You've heard a lot about Node, NPM, and Yarn - but aren't sure what they are. Let's introduce them in-depth and answer questions about them!",
     published: '2021-04-05T22:12:03.284Z',
     authors: ['crutchcorn'],
-    tags: ['webdev', 'javascript', 'node'],
+    tags: ['webdev', 'javascript', 'nodejs'],
     attached: [],
     license: 'cc-by-4'
 }

content/blog/integrating-android-code-in-unity/index.md

@@ -4,7 +4,7 @@
 	description: "Have you ever wanted to run native Java and Kotlin code from your mobile game written in Unity? Well, you can! Let's see how.",
 	published: '2020-01-04T05:12:03.284Z',
 	authors: ['crutchcorn'],
-	tags: ['unity', 'android', 'csharp', 'java'],
+	tags: ['gamedev', 'android', 'csharp', 'java'],
 	attached: [],
 	license: 'cc-by-nc-sa-4'
 }

content/blog/keeping-api-keys-secret-in-react-apps/index.md

@@ -4,7 +4,7 @@
     description: 'Save yourself money by hiding your API keys from prying eyes and nasty bots.',
     published: '2020-04-20T22:07:09.945Z',
     authors: ['MDutro'],
-    tags: ['react', 'node'],
+    tags: ['react', 'nodejs'],
     attached: [],
     license: 'cc-by-nc-nd-4'
 }

content/blog/making-a-slack-bot-with-node-and-mongo/index.md

@@ -4,7 +4,7 @@
 	description: 'Join us as we teach you how to create a Slack bot from scratch using their Node SDK and MongoDB for persistence',
 	published: '2020-02-18T05:12:03.284Z',
 	authors: ['crutchcorn'],
-	tags: ['mongodb', 'node', 'slack'],
+	tags: ['mongodb', 'nodejs', 'slack'],
 	attached: [],
 	license: 'cc-by-nc-sa-4'
 }

content/blog/minecraft-data-packs-cmd-syntax/index.md

@@ -5,7 +5,7 @@
 	published: '2022-06-15T21:12:03.284Z',
 	edited: '2023-09-27',
 	authors: ['fennifith'],
-	tags: ["minecraft"],
+	tags: ["minecraft", "gamedev"],
 	attached: [],
 	license: 'cc-by-nc-sa-4',
 	collection: "minecraft-data-packs",

content/blog/minecraft-data-packs-introduction/index.md

@@ -5,7 +5,7 @@
 	published: '2022-06-14T21:12:03.284Z',
 	edited: '2023-09-27',
 	authors: ['fennifith'],
-	tags: ["minecraft"],
+	tags: ["minecraft", "gamedev"],
 	attached: [],
 	license: 'cc-by-nc-sa-4',
 	collection: "minecraft-data-packs",

content/blog/minecraft-data-packs-scoreboards/index.md

@@ -5,7 +5,7 @@
 	published: '2022-08-20T19:10:03.284Z',
 	edited: '2023-09-27',
 	authors: ['fennifith'],
-	tags: ["minecraft"],
+	tags: ["minecraft", "gamedev"],
 	attached: [],
 	license: 'cc-by-nc-sa-4',
 	collection: "minecraft-data-packs",

content/data/i18n/en.json

@@ -6,6 +6,12 @@
 	"desc.homepage": "Practice programming with magically majestic methods",
 	"desc.homepage_extra": "The perfect place to learn all kinds of programming, from introductory ideas to advanced abstractions.",
 	"title.contributors": "Contributors",
+	"title.licenses": "Licenses & attributions",
+	"action.view_license": "View license",
+	"label.view_license_for": "View license for %s",
+	"action.view_attribution": "View attribution",
+	"label.view_attribution_for": "View attribution for %s",
+	"desc.licenses_request_removal": "If you own the rights to any trademark or intellectual property on the Unicorn Utterances website and would like yours removed, please email us at:",
 	"title.where_to_find_us": "Where to Find Us",
 	"title.sponsors": "Sponsors",
 	"title.n_chapters": "%s chapters",
@@ -17,6 +23,7 @@
 	"desc.original_link": "Originally posted at",
 	"action.go_back": "Go back",
 	"action.view_profile": "View profile",
+	"label.view_profile_for": "View profile for %s",
 	"action.view_all": "View all",
 	"action.join_discord": "Join our Discord",
 	"action.learn_more": "Learn more",

content/data/tags.json

@@ -5,11 +5,13 @@
 	},
 	"android": {
 		"displayName": "Android",
-		"image": "/stickers/android.svg"
+		"image": "/stickers/android.svg",
+		"shownWithBranding": false
 	},
 	"angular": {
 		"displayName": "Angular",
-		"image": "/stickers/angular.svg"
+		"image": "/stickers/angular.svg",
+		"shownWithBranding": true
 	},
 	"announcements": {
 		"displayName": "Announcements",
@@ -17,7 +19,8 @@
 	},
 	"astro": {
 		"displayName": "Astro",
-		"image": "/stickers/astro.svg"
+		"image": "/stickers/astro.svg",
+		"shownWithBranding": true
 	},
 	"auth": {
 		"displayName": "Auth",
@@ -25,31 +28,35 @@
 	},
 	"bash": {
 		"displayName": "Bash",
-		"image": "/stickers/bash.svg"
+		"image": "/stickers/bash.svg",
+		"shownWithBranding": true
 	},
 	"chrome": {
 		"displayName": "Chrome",
-		"image": "/stickers/chrome.svg"
+		"image": "/stickers/chrome.svg",
+		"shownWithBranding": false
 	},
 	"computer science": {
 		"displayName": "Computer Science",
 		"emoji": "🖥️"
 	},
 	"copilot": {
-		"displayName": "GitHub Copilot",
+		"displayName": "GitHub Copilot"
-		"image": "/stickers/copilot.svg"
 	},
 	"cpp": {
 		"displayName": "C++",
-		"image": "/stickers/cpp.svg"
+		"image": "/stickers/cpp.svg",
+		"shownWithBranding": false
 	},
 	"csharp": {
 		"displayName": "C#",
-		"image": "/stickers/csharp.svg"
+		"image": "/stickers/csharp.svg",
+		"shownWithBranding": false
 	},
 	"css": {
 		"displayName": "CSS",
-		"image": "/stickers/css.svg"
+		"image": "/stickers/css.svg",
+		"shownWithBranding": true
 	},
 	"design": {
 		"displayName": "Design",
@@ -61,15 +68,22 @@
 	},
 	"dotnet": {
 		"displayName": ".NET",
-		"image": "/stickers/dotnet.svg"
+		"image": "/stickers/dotnet.svg",
+		"shownWithBranding": false
+	},
+	"gamedev": {
+		"displayName": "Game Development",
+		"emoji": "🎮"
 	},
 	"git": {
 		"displayName": "Git",
-		"image": "/stickers/git.svg"
+		"image": "/stickers/git.svg",
+		"shownWithBranding": true
 	},
 	"go": {
 		"displayName": "Go",
-		"image": "/stickers/go.svg"
+		"image": "/stickers/go.svg",
+		"shownWithBranding": false
 	},
 	"hardware": {
 		"displayName": "Hardware",
@@ -81,39 +95,50 @@
 	},
 	"html": {
 		"displayName": "HTML",
-		"image": "/stickers/html.svg"
+		"image": "/stickers/html.svg",
+		"shownWithBranding": true
 	},
 	"interviewing": {
 		"displayName": "Interviewing",
 		"emoji": "🤝"
 	},
+	"ios": {
+		"displayName": "iOS",
+		"emoji": "📱"
+	},
 	"java": {
 		"displayName": "Java",
-		"image": "/stickers/java.svg"
+		"emoji": "☕"
 	},
 	"javascript": {
 		"displayName": "JavaScript",
-		"image": "/stickers/javascript.svg"
+		"image": "/stickers/javascript.svg",
+		"shownWithBranding": true
 	},
 	"jest": {
 		"displayName": "Jest",
-		"image": "/stickers/jest.svg"
+		"image": "/stickers/jest.svg",
+		"shownWithBranding": false
 	},
 	"linux": {
 		"displayName": "Linux",
-		"image": "/stickers/linux.svg"
+		"image": "/stickers/linux.svg",
+		"shownWithBranding": true
 	},
 	"lit": {
 		"displayName": "Lit",
-		"image": "/stickers/lit.svg"
+		"image": "/stickers/lit.svg",
+		"shownWithBranding": false
 	},
 	"minecraft": {
 		"displayName": "Minecraft",
-		"image": "/stickers/minecraft.svg"
+		"image": "/stickers/minecraft.svg",
+		"shownWithBranding": false
 	},
 	"mongodb": {
 		"displayName": "MongoDB",
-		"image": "/stickers/mongodb.svg"
+		"image": "/stickers/mongodb.svg",
+		"shownWithBranding": false
 	},
 	"networking": {
 		"displayName": "Networking",
@@ -121,15 +146,18 @@
 	},
 	"nextjs": {
 		"displayName": "Next.js",
-		"image": "/stickers/nextjs.svg"
+		"image": "/stickers/nextjs.svg",
+		"shownWithBranding": false
 	},
 	"nodejs": {
 		"displayName": "Node.js",
-		"image": "/stickers/node.svg"
+		"image": "/stickers/node.svg",
+		"shownWithBranding": false
 	},
 	"npm": {
 		"displayName": "npm",
-		"image": "/stickers/npm.svg"
+		"image": "/stickers/npm.svg",
+		"shownWithBranding": false
 	},
 	"opinion": {
 		"displayName": "Opinion",
@@ -137,23 +165,28 @@
 	},
 	"python": {
 		"displayName": "Python",
-		"image": "/stickers/python.svg"
+		"image": "/stickers/python.svg",
+		"shownWithBranding": true
 	},
 	"react": {
 		"displayName": "React",
-		"image": "/stickers/react.svg"
+		"image": "/stickers/react.svg",
+		"shownWithBranding": false
 	},
 	"react native": {
 		"displayName": "React Native",
-		"image": "/stickers/react.svg"
+		"image": "/stickers/react.svg",
+		"shownWithBranding": false
 	},
 	"rust": {
 		"displayName": "Rust",
-		"image": "/stickers/ferris.svg"
+		"image": "/stickers/ferris.svg",
+		"shownWithBranding": true
 	},
 	"scully": {
 		"displayName": "Scully",
-		"image": "/stickers/scully.svg"
+		"image": "/stickers/scully.svg",
+		"shownWithBranding": false
 	},
 	"security": {
 		"displayName": "Security",
@@ -161,7 +194,8 @@
 	},
 	"slack": {
 		"displayName": "Slack",
-		"image": "/stickers/slack.svg"
+		"image": "/stickers/slack.svg",
+		"shownWithBranding": false
 	},
 	"ssg": {
 		"displayName": "Static Site Generation (SSG)"
@@ -179,19 +213,18 @@
 	},
 	"twitch": {
 		"displayName": "Twitch",
-		"image": "/stickers/twitch.svg"
+		"image": "/stickers/twitch.svg",
+		"shownWithBranding": false
 	},
 	"typescript": {
 		"displayName": "TypeScript",
-		"image": "/stickers/typescript.svg"
+		"image": "/stickers/typescript.svg",
-	},
+		"shownWithBranding": false
-	"unity": {
-		"displayName": "Unity",
-		"image": "/stickers/unity.svg"
 	},
 	"vue": {
 		"displayName": "Vue",
-		"image": "/stickers/vue.svg"
+		"image": "/stickers/vue.svg",
+		"shownWithBranding": true
 	},
 	"webdev": {
 		"displayName": "Web Development",
@@ -199,6 +232,6 @@
 	},
 	"windows": {
 		"displayName": "Windows",
-		"image": "/stickers/windows.svg"
+		"emoji": "🪟"
 	}
 }

content/site/about-us.es.mdx

@@ -1,3 +1,5 @@
+import { Links, Sponsors } from "src/views/about/components";
+
 <p><span class="text-style-headline-2">Nuestro objetivo es proveer los mejores recursos posibles para aprender cualquier tema relacionado con las ciencias de la computación</span></p>
 
 Ya sea desde cómo se almacena la memoria en assembly o cómo hacer animaciones complejas en CSS, hasta lo que es un bucle For, queremos brindar recursos que sean acogedores, de apoyo e informativos.
@@ -6,8 +8,37 @@ Nuestro contenido tendrá un amplio rango de temáticas, curvas de dificultas, y
 
 Sin embargo, sabemos que este es un objetivo ambicioso, y no queremos hacerlo solos. Si estás interesado en ayudar, [abre un pull request](https://github.com/unicorn-utterances/unicorn-utterances/pulls) y ayúdanos a llegar a otros al aportar traducciones, [ayudar con el mantenimiento del código del sitio](https://github.com/unicorn-utterances/unicorn-utterances/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22), [escribiendo una publicación para nosotros](https://github.com/unicorn-utterances/unicorn-utterances#blog-posts), o [participar en debates y ayudar a otros lectores en nuestro Discord](https://discord.gg/FMcvc6T).
 
+---
+
 # Dónde encontrarnos
 
 Tenemos varias cuentas en redes sociales donde compartimos actualizaciones y nuevo contenido con amigos! También tenemos un canal de YouTube donde compartimos transmisiones en vivo, charlas grabadas, y mucho contenido educativo adicional sobre temas relacionados a las ciencias de la computación.
 
 Como lo mencionamos antes, también tenemos un servidor de Discord donde podemos hablar de tecnología, ayudar con problemas y preguntas relacionados con las ciencias de la computación, y en general, pasar un buen rato. Si estás buscando ponerte en contacto con nosotros, esta es posiblemente la mejor manera de hacerlo.
+
+<Links />
+
+---
+
+# Sponsors \{#sponsors\}
+
+<Sponsors />
+
+> **Learn more about sponsorships:**
+> Si quieres aprender más sobre los patrocinios y su impacto en nuestro sitio, puedes leer [los detalles que publicamos en GitHub](https://github.com/unicorn-utterances/unicorn-utterances/issues?q=is%3Aissue+label%3Adisclosure+is%3Aclosed).
+>
+> **En pocas palabras: ningún patrocinador toma decisiones sobre el contenido publicado en el sitio.**
+
+---
+
+# Declaración de Ética \{#ethics\}
+
+Nunca queremos terminar en un lugar en el que nuestro contenido educativo, la experiencia,
+o la comunidad se vean comprometidos ya sea por influencias financieras o miembros potencialmente
+negativos en la comunidad. Por lo tanto, hemos implementado el
+[Pacto de Colaboradores](https://www.contributor-covenant.org/)
+así como nuestro [código de conducta](https://github.com/unicorn-utterances/unicorn-utterances/blob/master/CODE_OF_CONDUCT.md) para defender estos valores.
+
+También nos comprometemos por mantener transparencia en cuanto a las finanzas que fluyen por el proyecto.
+No todo patrocinio incluye una contribución económica, pero si alguna lo hace, especificaremos en qué se
+invierte esa contribución, así como lo que haremos a cambio.

content/site/about-us.fr.mdx

@@ -1,3 +1,5 @@
+import { Links, Sponsors } from "src/views/about/components";
+
 <p><span class="text-style-headline-2">Notre but est de fournir les meilleurs ressources pour apprendre n’importe quel aspect dans le domaine de l’informatique</span></p>
 
 C’est quoi une boucle “for”? Comment créer des animations avec CSS? Comment se fait le stockage mémoire avec Assembly? Quel que soit le sujet, nous voudrions nous assurer que le site soit accueillant, incitatif et informatif.
@@ -6,8 +8,33 @@ Nous essayons de faire en sorte que tout le monde soit le bienvenu, quel que soi
 
 C'est certainement un objectif ambitieux, et il sera difficile de l'atteindre seul, donc si vous pensez pouvoir nous aider à atteindre plus de personnes, que ce soit en fournissant des traductions, [des correctifs sur le code du site](https://github.com/unicorn-utterances/unicorn-utterances/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) [ou bien des articles](https://github.com/unicorn-utterances/unicorn-utterances#blog-posts), [vous pouvez faire une “pull request”](https://github.com/unicorn-utterances/unicorn-utterances/pulls). Vous pouvez aussi [participer aux discussions et aidez les autres lecteurs sur notre Discord.](https://discord.gg/FMcvc6T).
 
+---
+
 # Où Nous Trouver
 
 Nous partageons notre contenu avec tout le monde sur les différents réseaux sociaux. Notre chaîne YouTube contient nos émissions vidéos, nos livestreams et beaucoup plus sur le domaine de l’informatique.
 
 Et comme nous l’avons déjà cité, on a un serveur Discord ou on parle tech, on s'entraide sur les différents problèmes d’informatique, et on s’amuse bien. Si vous voulez nous contacter, ça serait la meilleure façon de le faire.
+
+<Links />
+
+---
+
+# Sponsors \{#sponsors\}
+
+<Sponsors />
+
+> **Learn more about sponsorships:**
+> Pour plus d’informations concernant nos sponsors et leurs impact sur notre site, vous pouvez consulter [les divulgations que nous avons publiées sur GitHub](https://github.com/unicorn-utterances/unicorn-utterances/issues?q=is%3Aissue+label%3Adisclosure+is%3Aclosed).
+>
+> **Les sponsors n'ont pas un effet direct sur le contenu du site.**
+
+---
+
+# Code d’éthique \{#ethics\}
+
+Nous ne voudrions jamais nous retrouver dans un endroit où le contenu ou la communauté sont compromis par des influences financières, ou bien des individus potentiellement nuisibles. Pour cela, nous avons adopté le
+[“Contributor Covenant”](https://www.contributor-covenant.org/)
+(Pacte de contributeur) comme [code de conduite](https://github.com/unicorn-utterances/unicorn-utterances/blob/master/CODE_OF_CONDUCT.md) pour maintenir ces valeurs.
+
+Nous nous engageons aussi à maintenir une transparence totale en ce qui concerne les finances liées à ce projet. Les sponsors n’ont pas forcément une contribution financière, mais si c’est le cas, nous divulguerons à la fois à quoi servent ces finances et ce qui sera fait en échange.

content/site/about-us.mdx

@@ -1,3 +1,5 @@
+import { Links, Sponsors } from "src/views/about/components";
+
 <p><span class="text-style-headline-2">Our goal is to provide the best resources possible to learn any computer science related topic</span></p>
 
 What’s a for loop? How do I create animations in CSS? How is memory allocated in Assembly? No matter what the topic is, we want our website to be welcoming, supportive and informational.
@@ -6,8 +8,31 @@ Our content will have a wide range of subject matters, difficulty curves, and (w
 
 We know this is a lofty goal, though, and we don't want to do it alone. If you're interested in helping out, [open a pull request](https://github.com/unicorn-utterances/unicorn-utterances/pulls) and help us reach others by providing translations, [help the code maintenance on this site](https://github.com/unicorn-utterances/unicorn-utterances/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22), [write a post for us](https://github.com/unicorn-utterances/unicorn-utterances#blog-posts), or [jump in on discussions and help other readers on our Discord](https://discord.gg/FMcvc6T).
 
+---
+
 # Where to find us, you ask?
 
 We have various social media accounts where we share updates and new content with folks! We also have a YouTube channel where we host livestreams, recorded talks, and much more educational content on computer science related topics.
 
 As mentioned previously, we also have a Discord where we chat tech, help out with CS related problems and questions, and generally have a good time. If you're looking to get in touch with us, this is probably the best way to do so.
+
+<Links />
+
+---
+
+# Sponsors \{#sponsors\}
+
+<Sponsors />
+
+> **Learn more about sponsorships:**
+> If you want to learn more about our sponsorships and how they impact our site, you can read through [our disclosures that we've posted on GitHub](https://github.com/unicorn-utterances/unicorn-utterances/issues?q=is%3Aissue+label%3Adisclosure+is%3Aclosed).
+>
+> **No sponsor has any say about the content hosted on the site.**
+
+---
+
+# Statement of Ethics \{#ethics\}
+
+We never want to end up in a place where our educational content, experience, or community is compromised by either financial sway or potentially harmful members of the community. As such, we've implemented the [Contributor Covenant](https://www.contributor-covenant.org/) as our [code of conduct](https://github.com/unicorn-utterances/unicorn-utterances/blob/master/CODE_OF_CONDUCT.md) to uphold these values.
+
+We also pledge to maintain transparency in regards to any finances that flow through the project. Not every sponsorship contains a financial contribution, but if one does we will disclose both what those finances are going towards and what will be done in exchange.

content/site/about-us.pt.mdx

@@ -1,3 +1,5 @@
+import { Links, Sponsors } from "src/views/about/components";
+
 <p><span class="text-style-headline-2">O nosso objetivo é fornecer os melhores recursos possíveis para aprender qualquer tópico que esteja relacionado a Ciência dos Computadores</span></p>
 
 O que é um ciclo for? Como faço animações com CSS? Como é que a memória é gerida em Assembly? Não importa qual é o tópico, nós queremos que o nosso website seja amigável, que forneça apoio e seja informativo.
@@ -6,8 +8,38 @@ O nosso conteúdo têm uma vasta variação de temas, curvas de dificuldades, e
 
 Mas sabemos que este é um objetivo arrojado, e não o queremos fazer sozinhos. Se tu estás com interesse em ajudar a nossa iniciativa, [Abrir um pull request](https://github.com/unicorn-utterances/unicorn-utterances/pulls) and help us reach others by providing translations, [Ajuda a manter o código atualizado no website](https://github.com/unicorn-utterances/unicorn-utterances/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22), [Escrever um artigo para nós](https://github.com/unicorn-utterances/unicorn-utterances#blog-posts), or [Entra no nosso discord, para te juntares a nós e ajudar outros leitores](https://discord.gg/FMcvc6T).
 
+---
+
 # Onde nos podes encontrar?
 
 Nós temos diversas redes sociais, onde partilhamos updates e novidades com os membros! Nós também temos um canal do YouTube, onde fazemos algumas livestreams, conversas à solta, e muito mais conteúdo educational ligados à Ciência dos Computadores
 
 Como já foi mencionado antes, nós também temos um Discord onde falamos sobre tecnologia, não só ajudamos como respondemos questões relacionadas a Ciência dos Computadores e vivemos bons momentos a conviver. Esta é provavelmente a melhor maneira de entrares em contacto connosco.
+
+<Links />
+
+---
+
+# Sponsors \{#sponsors\}
+
+<Sponsors />
+
+> **Learn more about sponsorships:**
+> Se queres saber mais sobre os nossos patrocinadores e como estes influenciam este projeto, podes informar-te aqui: [Divulgações que publicadas por nós no GitHub](https://github.com/unicorn-utterances/unicorn-utterances/issues?q=is%3Aissue+label%3Adisclosure+is%3Aclosed).
+>
+> **Nenhum patrocinador tem qualquer palavra a dizer sobre o conteúdo presente no site.**
+
+---
+
+# Princípios de Ética \{#ethics\}
+
+Não queremos acabar num lugar onde o nosso conteúdo educacional, a nossa experiência,
+ou comunidade está comprometida pelas oscilação das finanças ou potencialmente
+membros da comunidade prejudiciais. Como tal, tivemos de implementar
+[Código do Contribuidor](https://www.contributor-covenant.org/)
+como o nosso [Código de Conduta](https://github.com/unicorn-utterances/unicorn-utterances/blob/master/CODE_OF_CONDUCT.md) para nos
+assegurarmos desses mesmos valores.
+
+Comprometemos-nos também a manter a transparência no que diz respeito a quaisquer finanças que corram
+através do projeto. Nem todos os patrocinadores contribuírem com uma ajuda financeira,
+mas se um o fizer, revelaremos o que diz respeito ao objetivo e aquilo que está a ser feito em troca.

content/site/sponsors.es.md

@@ -1,15 +0,0 @@
-Si quieres aprender más sobre los patrocinios y su impacto en nuestro sitio, puedes leer [los detalles que publicamos en GitHub](https://github.com/unicorn-utterances/unicorn-utterances/issues?q=is%3Aissue+label%3Adisclosure+is%3Aclosed).
-
-En pocas palabras: ningún patrocinador toma decisiones sobre el contenido publicado en el sitio.
-
-# Declaración de Ética {#ethics}
-
-Nunca queremos terminar en un lugar en el que nuestro contenido educativo, la experiencia,
-o la comunidad se vean comprometidos ya sea por influencias financieras o miembros potencialmente
-negativos en la comunidad. Por lo tanto, hemos implementado el
-[Pacto de Colaboradores](https://www.contributor-covenant.org/)
-así como nuestro [código de conducta](https://github.com/unicorn-utterances/unicorn-utterances/blob/master/CODE_OF_CONDUCT.md) para defender estos valores.
-
-También nos comprometemos por mantener transparencia en cuanto a las finanzas que fluyen por el proyecto.
-No todo patrocinio incluye una contribución económica, pero si alguna lo hace, especificaremos en qué se
-invierte esa contribución, así como lo que haremos a cambio.

content/site/sponsors.fr.md

@@ -1,11 +0,0 @@
-Pour plus d’informations concernant nos sponsors et leurs impact sur notre site, vous pouvez consulter [les divulgations que nous avons publiées sur GitHub](https://github.com/unicorn-utterances/unicorn-utterances/issues?q=is%3Aissue+label%3Adisclosure+is%3Aclosed).
-
-(Bref: Les sponsors n'ont pas un effet direct sur le contenu du site)
-
-# Code d’éthique {#ethics}
-
-Nous ne voudrions jamais nous retrouver dans un endroit où le contenu ou la communauté sont compromis par des influences financières, ou bien des individus potentiellement nuisibles. Pour cela, nous avons adopté le
-[“Contributor Covenant”](https://www.contributor-covenant.org/)
-(Pacte de contributeur) comme [code de conduite](https://github.com/unicorn-utterances/unicorn-utterances/blob/master/CODE_OF_CONDUCT.md) pour maintenir ces valeurs.
-
-Nous nous engageons aussi à maintenir une transparence totale en ce qui concerne les finances liées à ce projet. Les sponsors n’ont pas forcément une contribution financière, mais si c’est le cas, nous divulguerons à la fois à quoi servent ces finances et ce qui sera fait en échange.

content/site/sponsors.md

@@ -1,9 +0,0 @@
-If you want to learn more about our sponsorships and how they impact our site, you can read through [our disclosures that we've posted on GitHub](https://github.com/unicorn-utterances/unicorn-utterances/issues?q=is%3Aissue+label%3Adisclosure+is%3Aclosed).
-
-TLDR: No sponsor has any say about the content hosted on the site
-
-# Statement of Ethics {#ethics}
-
-We never want to end up in a place where our educational content, experience, or community is compromised by either financial sway or potentially harmful members of the community. As such, we've implemented the [Contributor Covenant](https://www.contributor-covenant.org/) as our [code of conduct](https://github.com/unicorn-utterances/unicorn-utterances/blob/master/CODE_OF_CONDUCT.md) to uphold these values.
-
-We also pledge to maintain transparency in regards to any finances that flow through the project. Not every sponsorship contains a financial contribution, but if one does we will disclose both what those finances are going towards and what will be done in exchange.

content/site/sponsors.pt.md

@@ -1,16 +0,0 @@
-Se queres saber mais sobre os nossos patrocinadores e como estes influenciam este projeto, podes informar-te aqui: [Divulgações que publicadas por nós no GitHub](https://github.com/unicorn-utterances/unicorn-utterances/issues?q=is%3Aissue+label%3Adisclosure+is%3Aclosed).
-
-MLNL: Nenhum patrocinador tem qualquer palavra a dizer sobre o conteúdo presente no site
-
-# Princípios de Ética {#ethics}
-
-Não queremos acabar num lugar onde o nosso conteúdo educacional, a nossa experiência,
-ou comunidade está comprometida pelas oscilação das finanças ou potencialmente
-membros da comunidade prejudiciais. Como tal, tivemos de implementar
-[Código do Contribuidor](https://www.contributor-covenant.org/)
-como o nosso [Código de Conduta](https://github.com/unicorn-utterances/unicorn-utterances/blob/master/CODE_OF_CONDUCT.md) para nos
-assegurarmos desses mesmos valores.
-
-Comprometemos-nos também a manter a transparência no que diz respeito a quaisquer finanças que corram
-através do projeto. Nem todos os patrocinadores contribuírem com uma ajuda financeira,
-mas se um o fizer, revelaremos o que diz respeito ao objetivo e aquilo que está a ser feito em troca.

package-lock.json

@@ -30,6 +30,7 @@
 				"@testing-library/preact": "^3.2.3",
 				"@testing-library/user-event": "^14.4.3",
 				"@types/hast": "^3.0.0",
+				"@types/html-escaper": "^3.0.0",
 				"@types/jest": "^29.5.2",
 				"@types/json5": "^2.2.0",
 				"@types/node": "^20.5.0",
@@ -6714,6 +6715,12 @@
 				"@types/unist": "*"
 			}
 		},
+		"node_modules/@types/html-escaper": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/@types/html-escaper/-/html-escaper-3.0.0.tgz",
+			"integrity": "sha512-OcJcvP3Yk8mjYwf/IdXZtTE1tb/u0WF0qa29ER07ZHCYUBZXSN29Z1mBS+/96+kNMGTFUAbSz9X+pHmHpZrTCw==",
+			"dev": true
+		},
 		"node_modules/@types/istanbul-lib-coverage": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",

package.json

@@ -54,6 +54,7 @@
 		"@testing-library/preact": "^3.2.3",
 		"@testing-library/user-event": "^14.4.3",
 		"@types/hast": "^3.0.0",
+		"@types/html-escaper": "^3.0.0",
 		"@types/jest": "^29.5.2",
 		"@types/json5": "^2.2.0",
 		"@types/node": "^20.5.0",

public/stickers/README.md

@@ -0,0 +1,3 @@
+Files in this directory are NOT to be included in the MPL license at the root of this project.
+
+Unless otherwise stated, all rights belong to their respective parties.

public/stickers/android-LICENSE.md

@@ -0,0 +1,8 @@
+The Android robot is reproduced or modified from work created
+and shared by Google and used according to terms described in
+the [Creative Commons][1] 3.0 Attribution License.
+
+Android is a trademark of Google LLC and does not
+indicate endorsement or affiliation with Google in any way.
+
+[1]: https://creativecommons.org/licenses/by/3.0/

public/stickers/angular-LICENSE.md

@@ -0,0 +1,5 @@
+The Angular logo is modified from the [official Angular logo][1]
+and shared under the [CC BY 4.0][2] license.
+
+[1]: https://angular.io/presskit
+[2]: https://creativecommons.org/licenses/by/4.0/

public/stickers/astro-LICENSE.md

@@ -0,0 +1,29 @@
+The Astro logo is modified from the [Astro logomark][1] and
+shared under the [MIT License][2].
+
+```
+MIT License
+
+Copyright (c) 2021 Fred K. Schott
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+[1]: https://astro.build/press/
+[2]: https://github.com/withastro/astro/blob/main/LICENSE

public/stickers/bash-LICENSE.md

@@ -0,0 +1,29 @@
+The Bash logo is modified from the [Official GNU Bash Logo][1]
+and shared under the [MIT License][2].
+
+```
+MIT License
+
+Copyright (c) 2016 ol' dirty bashnerds
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+[1]: https://github.com/odb/official-bash-logo
+[2]: https://github.com/odb/official-bash-logo/blob/master/LICENSE

public/stickers/chrome-ATTRIBUTION.md

@@ -0,0 +1,4 @@
+The [Google Chrome logo][1] is a trademark of Google LLC and does not
+indicate endorsement or affiliation with Google in any way.
+
+[1]: https://about.google/brand-resource-center/logos-list/

public/stickers/copilot.svg

@@ -1,10 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.10119 14.3746C9.10119 13.9309 9.44677 13.5712 9.87306 13.5712C10.2993 13.5712 10.6449 13.9309 10.6449 14.3746V15.8553C10.6449 16.299 10.2993 16.6587 9.87306 16.6587C9.44677 16.6587 9.10119 16.299 9.10119 15.8553V14.3746Z" fill="white"/>
-<path d="M14.0755 13.5712C13.6208 13.5712 13.2521 13.9309 13.2521 14.3746V15.8553C13.2521 16.299 13.6208 16.6587 14.0755 16.6587C14.5302 16.6587 14.8988 16.299 14.8988 15.8553V14.3746C14.8988 13.9309 14.5302 13.5712 14.0755 13.5712Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22 15.849V13.611C22 13.3165 21.9063 13.0331 21.7313 12.796L21.1225 11.9722C20.7966 11.5288 20.3139 11.4142 19.7963 11.4142C19.6013 9.19245 19.1388 7.60726 18.0375 6.44644C15.9375 4.22467 13.15 4 12 4C10.85 4 8.0625 4.22467 5.9625 6.44644C4.86 7.60726 4.39875 9.19245 4.20375 11.4142C3.68713 11.4142 3.20228 11.5308 2.87625 11.9722L2.2675 12.7947C2.09375 13.0319 2 13.3165 2 13.611V15.849C2.00056 16.138 2.14401 16.4197 2.3775 16.5905C4.3289 18.0208 8.16675 20.2264 12 20.2264C15.4648 20.2264 18.866 18.6055 21.6225 16.5905C21.856 16.4197 21.9994 16.138 22 15.849ZM17.3125 11.7425C17.7438 11.884 18.1583 12.084 18.185 12.5938H18.1838C18.2523 14.0292 18.2723 15.4719 18.2475 16.9087C18.2456 17.1879 18.077 17.4473 17.8225 17.5628C15.755 18.5039 13.7988 18.9782 12.0013 18.9782C10.2013 18.9782 8.245 18.5039 6.17625 17.5628C5.92171 17.4473 5.75313 17.1879 5.75125 16.9087C5.7583 16.4441 5.7603 15.9797 5.76231 15.5154L5.76252 15.4665C5.7665 14.5089 5.77048 13.5518 5.81625 12.5938C5.84359 12.0869 6.25638 11.8835 6.68625 11.7425C7.14067 12.0286 7.69734 12.1394 8.22875 12.1394C8.79375 12.1394 9.84875 12.0046 10.7238 11.1309C10.945 10.9112 11.0963 10.5667 11.1988 10.1848C11.49 10.1561 11.7638 10.1423 12.0013 10.1423C12.2684 10.1436 12.5354 10.1578 12.8013 10.1848C12.9038 10.5667 13.055 10.9112 13.2763 11.1309C14.1525 12.0046 15.2063 12.1394 15.7713 12.1394C16.3025 12.1394 16.8578 12.0274 17.3125 11.7425ZM7.8625 11.1521C7.175 11.1521 6.5375 10.9274 6.2 10.5904C5.7375 10.1161 5.5625 7.86938 6.375 6.98316C6.75 6.58375 7.4875 6.29666 8.3625 6.20929C9.1875 6.1344 9.925 6.25922 10.25 6.5463C10.55 6.79594 10.75 7.38258 10.775 8.09405C10.8 8.98026 10.575 9.85399 10.2125 10.2035C9.3875 11.0398 8.3875 11.1521 7.8625 11.1521ZM11.35 8.85544C11.3375 8.69318 11.325 8.5434 11.3 8.4061C11.5625 8.38113 11.8 8.36865 12 8.36865C12.2 8.36865 12.4375 8.38113 12.7 8.4061C12.675 8.5434 12.6625 8.6932 12.65 8.85546C12.65 8.96779 12.65 9.08013 12.6625 9.20494C12.4125 9.17997 12.2 9.17997 12 9.17997C11.8 9.17997 11.5875 9.17997 11.3375 9.20494C11.35 9.08012 11.35 8.96778 11.35 8.85544ZM13.7875 10.2035C13.425 9.85399 13.2 8.98026 13.225 8.09405C13.25 7.38258 13.45 6.79594 13.75 6.5463C14.075 6.25922 14.8125 6.1344 15.6375 6.20929C16.5125 6.29666 17.25 6.58375 17.625 6.98316C18.4375 7.86938 18.2625 10.1161 17.8 10.5904C17.4625 10.9274 16.825 11.1521 16.1375 11.1521C15.6125 11.1521 14.6125 11.0398 13.7875 10.2035Z" fill="white"/>
-<path d="M6.2 10.5904C6.5375 10.9274 7.175 11.1521 7.8625 11.1521C8.3875 11.1521 9.3875 11.0398 10.2125 10.2035C10.575 9.85399 10.8 8.98026 10.775 8.09405C10.75 7.38258 10.55 6.79594 10.25 6.5463C9.925 6.25922 9.1875 6.1344 8.3625 6.20929C7.4875 6.29666 6.75 6.58375 6.375 6.98316C5.5625 7.86938 5.7375 10.1161 6.2 10.5904Z" fill="white"/>
-<path d="M13.225 8.09405C13.2 8.98026 13.425 9.85399 13.7875 10.2035C14.6125 11.0398 15.6125 11.1521 16.1375 11.1521C16.825 11.1521 17.4625 10.9274 17.8 10.5904C18.2625 10.1161 18.4375 7.86938 17.625 6.98316C17.25 6.58375 16.5125 6.29666 15.6375 6.20929C14.8125 6.1344 14.075 6.25922 13.75 6.5463C13.45 6.79594 13.25 7.38258 13.225 8.09405Z" fill="white"/>
-<path d="M11.3 8.4061C11.325 8.5434 11.3375 8.69318 11.35 8.85544C11.35 8.96778 11.35 9.08012 11.3375 9.20494C11.5875 9.17997 11.8 9.17997 12 9.17997C12.2 9.17997 12.4125 9.17997 12.6625 9.20494C12.65 9.08013 12.65 8.96779 12.65 8.85546C12.6625 8.6932 12.675 8.5434 12.7 8.4061C12.4375 8.38113 12.2 8.36865 12 8.36865C11.8 8.36865 11.5625 8.38113 11.3 8.4061Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.185 12.5938C18.1583 12.084 17.7438 11.884 17.3125 11.7425C16.8578 12.0274 16.3025 12.1394 15.7713 12.1394C15.2063 12.1394 14.1525 12.0046 13.2763 11.1309C13.055 10.9112 12.9038 10.5667 12.8013 10.1848C12.5354 10.1578 12.2684 10.1436 12.0013 10.1423C11.7638 10.1423 11.49 10.1561 11.1988 10.1848C11.0963 10.5667 10.945 10.9112 10.7238 11.1309C9.84875 12.0046 8.79375 12.1394 8.22875 12.1394C7.69734 12.1394 7.14067 12.0286 6.68625 11.7425C6.25638 11.8835 5.84359 12.0869 5.81625 12.5938C5.77048 13.5518 5.7665 14.5089 5.76252 15.4665L5.76231 15.5154C5.7603 15.9797 5.7583 16.4441 5.75125 16.9087C5.75313 17.1879 5.92171 17.4473 6.17625 17.5628C8.245 18.5039 10.2013 18.9782 12.0013 18.9782C13.7988 18.9782 15.755 18.5039 17.8225 17.5628C18.077 17.4473 18.2456 17.1879 18.2475 16.9087C18.2723 15.4719 18.2523 14.0292 18.1838 12.5938H18.185ZM9.10119 14.3746C9.10119 13.9309 9.44677 13.5712 9.87306 13.5712C10.2993 13.5712 10.6449 13.9309 10.6449 14.3746V15.8553C10.6449 16.299 10.2993 16.6587 9.87306 16.6587C9.44677 16.6587 9.10119 16.299 9.10119 15.8553V14.3746ZM14.0755 13.5712C13.6208 13.5712 13.2521 13.9309 13.2521 14.3746V15.8553C13.2521 16.299 13.6208 16.6587 14.0755 16.6587C14.5302 16.6587 14.8988 16.299 14.8988 15.8553V14.3746C14.8988 13.9309 14.5302 13.5712 14.0755 13.5712Z" fill="white"/>
-<path d="M22.5 15.8501V15.849V13.611C22.5 13.209 22.3716 12.8217 22.1336 12.4991L22.1334 12.4988L21.5254 11.676C21.5252 11.6758 21.5251 11.6757 21.525 11.6755C21.1783 11.2042 20.7105 11.0122 20.2529 10.9453C20.0325 8.89527 19.542 7.30598 18.4006 6.10265C16.1574 3.72965 13.195 3.5 12 3.5C10.8051 3.5 7.84275 3.72964 5.59956 6.10254C4.45672 7.30608 3.96731 8.89574 3.74702 10.9456C3.28913 11.0131 2.82093 11.2058 2.47434 11.6747C2.47434 11.6747 2.47433 11.6747 2.47432 11.6748C2.47424 11.6749 2.47417 11.675 2.47409 11.6751L1.8656 12.4973L1.86559 12.4973L1.86417 12.4992C1.628 12.8216 1.5 13.2095 1.5 13.611L1.5 15.849L1.5 15.85C1.50088 16.2982 1.72037 16.7291 2.08192 16.9937C4.0589 18.4428 8.00447 20.7264 12 20.7264C15.6136 20.7264 19.118 19.0407 21.9176 16.9941L21.9176 16.9941C22.2795 16.7294 22.499 16.2983 22.5 15.8501ZM13.8444 9.22242C13.7592 8.89987 13.7137 8.50855 13.7248 8.10987C13.736 7.79428 13.7858 7.51989 13.8578 7.3078C13.9329 7.08681 14.0181 6.97371 14.0698 6.93064L14.0755 6.92592L14.081 6.92104C14.1428 6.86646 14.3022 6.78563 14.5929 6.73449C14.8693 6.68586 15.214 6.67307 15.5901 6.70704C16.4101 6.78929 17.0027 7.05278 17.2585 7.32325C17.5325 7.62435 17.6906 8.24441 17.6906 8.94126C17.6906 9.27361 17.6542 9.58761 17.5954 9.83642C17.5661 9.96075 17.533 10.0609 17.5005 10.1353C17.469 10.2073 17.4462 10.2363 17.4425 10.2407C17.2263 10.453 16.7374 10.6521 16.1375 10.6521C15.6749 10.6521 14.834 10.5524 14.1434 9.85234L14.1436 9.85223L14.1345 9.84353C14.0502 9.76223 13.9337 9.56079 13.8444 9.22242ZM10.1422 7.3078C10.2142 7.51989 10.264 7.79428 10.2753 8.10987C10.2863 8.50855 10.2408 8.89987 10.1556 9.22242C10.0663 9.56079 9.94979 9.76223 9.86547 9.84353L9.86536 9.84342L9.85656 9.85234C9.16597 10.5524 8.32512 10.6521 7.8625 10.6521C7.26258 10.6521 6.77374 10.453 6.55747 10.2407C6.55383 10.2363 6.53103 10.2073 6.49954 10.1353C6.46702 10.0609 6.43395 9.96075 6.40459 9.83642C6.34584 9.58761 6.30938 9.27361 6.30938 8.94126C6.30938 8.2444 6.46748 7.62433 6.74156 7.32324C6.99731 7.05278 7.58991 6.78929 8.40994 6.70704C8.78604 6.67307 9.13069 6.68586 9.40712 6.73449C9.69781 6.78563 9.85719 6.86646 9.91898 6.92104L9.92451 6.92592L9.93018 6.93064C9.98194 6.97371 10.0671 7.08681 10.1422 7.3078ZM17.6829 12.5885L17.6843 12.6176C17.7524 14.0418 17.7722 15.4736 17.7476 16.9001H17.7476L17.7475 16.9053C17.7469 16.9892 17.6932 17.0724 17.6159 17.1075L17.6154 17.1077C15.5966 18.0266 13.7114 18.4782 12.0013 18.4782C10.2886 18.4782 8.40329 18.0266 6.3833 17.1077L6.38288 17.1075C6.30666 17.0729 6.25343 16.9917 6.2513 16.9092C6.2583 16.4442 6.26031 15.9799 6.2623 15.5189L6.26231 15.5175L6.26252 15.4686L6.26252 15.4685C6.2665 14.5098 6.27051 13.5641 6.3156 12.6194C6.32113 12.5216 6.35401 12.4697 6.41784 12.4172C6.47115 12.3734 6.5445 12.3322 6.642 12.2912C7.14759 12.5467 7.7127 12.6394 8.22875 12.6394C8.86224 12.6394 10.0707 12.4892 11.0765 11.4852C11.3053 11.2579 11.4628 10.9599 11.5742 10.6562C11.7269 10.6468 11.8702 10.6424 12 10.6423C12.1421 10.643 12.284 10.6476 12.4258 10.656C12.5371 10.9597 12.6946 11.2577 12.9232 11.4849C13.9302 12.489 15.1374 12.6394 15.7713 12.6394C16.2884 12.6394 16.8521 12.5453 17.3568 12.2908C17.4561 12.3321 17.5303 12.3733 17.5842 12.4173C17.6406 12.4634 17.6728 12.509 17.6829 12.5885ZM9.87306 13.0712C9.15196 13.0712 8.60119 13.6738 8.60119 14.3746V15.8553C8.60119 16.5561 9.15196 17.1587 9.87306 17.1587C10.5942 17.1587 11.1449 16.5561 11.1449 15.8553V14.3746C11.1449 13.6738 10.5942 13.0712 9.87306 13.0712ZM14.0755 13.0712C13.3563 13.0712 12.7521 13.6432 12.7521 14.3746V15.8553C12.7521 16.5866 13.3563 17.1587 14.0755 17.1587C14.7947 17.1587 15.3988 16.5866 15.3988 15.8553V14.3746C15.3988 13.6432 14.7947 13.0712 14.0755 13.0712Z" fill="black" stroke="white"/>
-</svg>

public/stickers/cpp-ATTRIBUTION.md

@@ -0,0 +1,5 @@
+The "C++" logo is a trademark of the [Standard C++ Foundation](https://isocpp.org).
+Our use of this logo does not indicate endorsement or affiliation
+in any way.
+
+[1]: https://github.com/isocpp/logos

public/stickers/csharp-ATTRIBUTION.md

@@ -0,0 +1,3 @@
+The C# logo is based on the [C Sharp wordmark][1] by Jason Groce, which is available in the public domain.
+
+[1]: https://commons.wikimedia.org/wiki/File:C_Sharp_wordmark.svg

public/stickers/css-LICENSE.md

@@ -0,0 +1,5 @@
+The CSS3 icon is modified from the [CSS3 logo][1] by Rudloff,
+licensed under the [Creative Commons Attribution 3.0 Unported][2] license.
+
+[1]: https://en.wikipedia.org/wiki/CSS#/media/File:CSS3_logo_and_wordmark.svg
+[2]: https://creativecommons.org/licenses/by/3.0/deed.en

public/stickers/dotnet-LICENSE.md

@@ -0,0 +1,5 @@
+The [.NET logo][1] is licensed under the [CC0 1.0 Universal][2] license.
+Our use of this logo does not indicate endorsement or affiliation with .NET or Microsoft in any way.
+
+[1]: https://github.com/dotnet/brand
+[2]: https://creativecommons.org/publicdomain/zero/1.0/

public/stickers/ferris-LICENSE.md

@@ -0,0 +1,7 @@
+[Ferris the crab][1], by Karen Rustad Tölva, is licensed under the [CC0 1.0 Universal][2] license.
+
+Our use of this adorable Rust mascot does not indicate endorsement or
+affiliation with the Rust Foundation in any way.
+
+[1]: https://rustacean.net
+[2]: https://creativecommons.org/publicdomain/zero/1.0/

public/stickers/git-LICENSE.md

@@ -0,0 +1,4 @@
+The [Git Logo][1] by Jason Long is licensed under the [Creative Commons Attribution 3.0 Unported][2] license.
+
+[1]: https://git-scm.com/downloads/logos
+[2]: https://creativecommons.org/licenses/by/3.0/

public/stickers/go-LICENSE.md

@@ -0,0 +1,6 @@
+The Go Gopher mascot was created by Renee French and is licensed under the [Creative Commons 4.0 Attribution License][1].
+
+Go is a trademark of Google LLC and does not
+indicate endorsement or affiliation with Google in any way.
+
+[1]: https://creativecommons.org/licenses/by/4.0/

public/stickers/html-LICENSE.md

@@ -0,0 +1,5 @@
+The HTML5 icon is modified from the [HTML5 official logo][1] by W3C,
+licensed under the [Creative Commons Attribution 3.0 Unported][2] license.
+
+[1]: https://en.wikipedia.org/wiki/HTML#/media/File:HTML5_logo_and_wordmark.svg
+[2]: https://creativecommons.org/licenses/by/3.0/deed.en

public/stickers/javascript-LICENSE.md

@@ -0,0 +1,28 @@
+The [JS Logo][1] by Christopher Williams is licensed under the [MIT License][2].
+
+```
+The MIT License (MIT)
+
+Copyright (c) 2011 Christopher Williams <chris@iterativedesigns.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+```
+
+[1]: https://github.com/voodootikigod/logo.js
+[2]: https://github.com/voodootikigod/logo.js/blob/6def2d5dac631d60a5b526e8293a33f6bbfb895d/LICENSE

public/stickers/jest-LICENSE.md

@@ -0,0 +1,31 @@
+The [Jest logo][1] is copyright of Meta Platforms, Inc. and affiliates and provided under the [MIT License][2].
+
+Our use of this logo does not indicate endorsement or affiliation
+with Meta Platforms, Inc. in any way.
+
+```
+MIT License
+
+Copyright (c) Meta Platforms, Inc. and affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+[1]: https://github.com/jestjs/jest/blob/main/website/static/img/jest.svg
+[2]: https://github.com/jestjs/jest/blob/main/LICENSE

public/stickers/linux-ATTRIBUTION.md

@@ -0,0 +1,3 @@
+The Linux 2.0 Penguin is created by [Larry Ewing][1].
+
+[1]: https://web.archive.org/web/20191001080512/https://isc.tamu.edu/~lewing/linux/

public/stickers/lit-LICENSE.md

@@ -0,0 +1,38 @@
+The [Lit logo][1] is licensed under the [BSD 3-Clause License][2].
+
+Our use of this logo does not indicate endorsement or affiliation
+with Google LLC in any way.
+
+```
+BSD 3-Clause License
+
+Copyright (c) 2017 Google LLC. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+```
+
+[1]: https://github.com/lit/lit/blob/main/packages/lit/logo.svg
+[2]: https://github.com/lit/lit/blob/main/packages/lit/LICENSE

public/stickers/minecraft-ATTRIBUTION.md

@@ -0,0 +1,6 @@
+The [Minecraft logo][1] is copyright of Mojang and Microsoft.
+
+Our use of this logo does not indicate endorsement or affiliation
+with Mojang or Microsoft in any way.
+
+[1]: https://www.minecraft.net/

public/stickers/mongodb-ATTRIBUTION.md

@@ -0,0 +1,6 @@
+The [MongoDB logo][1] is a trademark of MongoDB, Inc.
+
+Our use of this logo does not indicate endorsement or affiliation
+with MongoDB in any way.
+
+[1]: https://www.mongodb.com/brand-resources

public/stickers/nextjs-ATTRIBUTION.md

@@ -0,0 +1,5 @@
+Vercel, the Vercel design, Next.js and related marks, designs and logos are trademarks or registered trademarks of Vercel, Inc. or its affiliates in the US and other countries.
+
+Our use of the [Next.js logo][1] does not indicate endorsement or affiliation with Vercel in any way.
+
+[1]: https://vercel.com/design/brands#next-js

public/stickers/node-ATTRIBUTION.md

@@ -0,0 +1,5 @@
+The [Node.JS logo][1] is a trademark of the OpenJS Foundation.
+
+Our use of this logo does not indicate endorsement or affiliation with the OpenJS Foundation in any way.
+
+[1]: https://nodejs.org/en

public/stickers/npm-ATTRIBUTION.md

@@ -0,0 +1,3 @@
+npm is a registered trademark of [npm, Inc][1]. Our use of this logo does not indicate endorsement or affiliation with npm, Inc. in any way.
+
+[1]: https://www.npmjs.com/

public/stickers/python-ATTRIBUTION.md

@@ -0,0 +1,3 @@
+The Python logo is a trademark of the [Python Software Foundation][1]. Our use of this logo does not indicate endorsement or affiliation with the Python Software Foundation in any way.
+
+[1]: https://www.python.org/psf-landing/

public/stickers/react-LICENSE.md

@@ -0,0 +1,7 @@
+The [React logo][1] is copyright of Meta Platforms, Inc. and affiliates and provided under the [Creative Commons Attribution 4.0 International][2] license.
+
+Our use of this logo does not indicate endorsement or affiliation
+with Meta Platforms, Inc. in any way.
+
+[1]: https://github.com/reactjs/react.dev/blob/main/src/components/Logo.tsx
+[2]: https://creativecommons.org/licenses/by/4.0/

public/stickers/scully-LICENSE.md

@@ -0,0 +1,28 @@
+The [Scully logo][1] is provided under the [MIT License][2].
+Our use of this logo does not indicate endorsement or affiliation
+with Scully or HeroDevs, LLC in any way.
+
+```
+Copyright (c) 2019-present HeroDevs, LLC.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+[1]: https://github.com/scullyio/scully/tree/main/assets/logos
+[2]: https://github.com/scullyio/scully/blob/main/LICENSE

public/stickers/slack-ATTRIBUTION.md

@@ -0,0 +1,3 @@
+The Slack logo is a trademark of [Slack Technologies, Inc](https://slack.com).
+Our use of this logo does not indicate endorsement or affiliation
+with Slack in any way.

public/stickers/sticker_star.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.93633 14.6489L12 12L14.6489 4.93633C14.8601 4.37312 15.3985 4 16 4C16.6015 4 17.1399 4.37312 17.3511 4.93633L20 12L27.0637 14.6489C27.6269 14.8601 28 15.3985 28 16C28 16.6015 27.6269 17.1399 27.0637 17.3511L20 20L17.3511 27.0637C17.1399 27.6269 16.6015 28 16 28C15.3985 28 14.8601 27.6269 14.6489 27.0637L12 20L4.93633 17.3511C4.37312 17.1399 4 16.6015 4 16C4 15.3985 4.37312 14.8601 4.93633 14.6489Z" fill="#FFADF3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 12L14.6489 4.93633C14.8601 4.37312 15.3985 4 16 4C16.6015 4 17.1399 4.37312 17.3511 4.93633L20 12L27.0637 14.6489C27.6269 14.8601 28 15.3985 28 16C28 16.6015 27.6269 17.1399 27.0637 17.3511L20 20L17.3511 27.0637C17.1399 27.6269 16.6015 28 16 28C15.3985 28 14.8601 27.6269 14.6489 27.0637L12 20L4.93633 17.3511C4.37312 17.1399 4 16.6015 4 16C4 15.3985 4.37312 14.8601 4.93633 14.6489L12 12ZM8.89309 23.1069L10.9036 28.4682C11.7002 30.5926 13.7311 32 16 32C18.2689 32 20.2998 30.5926 21.0964 28.4682L23.1069 23.1069L28.4682 21.0964C30.5926 20.2998 32 18.2689 32 16C32 13.7311 30.5926 11.7002 28.4682 10.9036L23.1069 8.89309L21.0964 3.53184C20.2998 1.40742 18.2689 0 16 0C13.7311 0 11.7002 1.40741 10.9036 3.53183L8.89309 8.89309L3.53184 10.9036C1.40741 11.7002 0 13.7311 0 16C0 18.2689 1.40741 20.2998 3.53183 21.0964L8.89309 23.1069Z" fill="white"/>
+</svg>

public/stickers/twitch-ATTRIBUTION.md

@@ -0,0 +1,3 @@
+The Twitch logo is a trademark of [Twitch Interactive, Inc.](https://www.twitch.tv).
+Our use of this logo does not indicate endorsement or affiliation
+with Twitch or Amazon in any way.

public/stickers/typescript-LICENSE.md

@@ -0,0 +1,25 @@
+The [TypeScript logo][1] is provided under the [MIT License][2].
+Our use of this logo does not indicate endorsement or affiliation with TypeScript or Microsoft in any way.
+
+```
+The MIT License (MIT)
+Copyright (c) Microsoft Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+associated documentation files (the "Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+```
+
+[1]: https://www.typescriptlang.org/branding
+[2]: https://github.com/microsoft/TypeScript-Website/blob/f407e1ae19e5e990d9901ac8064a32a8cc60edf0/LICENSE-CODE

public/stickers/unity.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.74949 6.27766C2.59508 6.36705 2.5 6.53195 2.5 6.71038V17.1523C2.5 17.3309 2.59524 17.4959 2.74986 17.5853L11.7499 22.7853C11.9047 22.8747 12.0954 22.8747 12.2502 22.7852L21.2502 17.5829C21.4048 17.4936 21.5 17.3286 21.5 17.15V6.71038C21.5 6.53195 21.4049 6.36705 21.2505 6.27766L12.2505 1.06728C12.0956 0.977572 11.9044 0.977572 11.7495 1.06728L2.74949 6.27766Z" fill="white" stroke="white" stroke-linejoin="round"/>
-<path d="M12.7868 5.60214L16.0056 7.46609C16.1213 7.53152 16.1255 7.71306 16.0056 7.7785L12.1809 9.99498C12.0652 10.0625 11.9285 10.0583 11.8212 9.99498L7.99649 7.7785C7.87868 7.71518 7.87658 7.52941 7.99649 7.46609L11.2132 5.60214V1.95234L3 6.71037V16.2264L6.14937 14.4026V10.6747C6.14727 10.5417 6.30295 10.4467 6.41865 10.5185L10.2433 12.735C10.359 12.8025 10.4243 12.9228 10.4243 13.0474V17.4782C10.4264 17.6112 10.2707 17.7062 10.155 17.6344L6.93619 15.7705L3.78682 17.5943L12 22.3523L20.2132 17.5943L17.0638 15.7705L13.845 17.6344C13.7314 17.7041 13.5715 17.6133 13.5757 17.4782V13.0474C13.5757 12.9144 13.6494 12.7962 13.7567 12.735L17.5813 10.5185C17.695 10.4488 17.8548 10.5375 17.8506 10.6747V14.4026L21 16.2264V6.71037L12.7868 1.95234V5.60214Z" fill="black"/>
-</svg>

public/stickers/vue-LICENSE.md

@@ -0,0 +1,6 @@
+Vue.js artworks by [Evan You][1] is licensed under the [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License][2].
+
+Our use of this logo does not indicate endorsement or affiliation with Vue.js in any way.
+
+[1]: http://evanyou.me/
+[2]: http://creativecommons.org/licenses/by-nc-sa/4.0/

public/stickers/windows.svg

@@ -1,7 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2.5" y="2.5" width="20" height="20" fill="white" stroke="white" stroke-linejoin="round"/>
-<path d="M12 3H3V12H12V3Z" fill="#0078D4"/>
-<path d="M22 3H13V12H22V3Z" fill="#0078D4"/>
-<path d="M12 13H3V22H12V13Z" fill="#0078D4"/>
-<path d="M22 13H13V22H22V13Z" fill="#0078D4"/>
-</svg>

src/components/banner-stickers/banner-stickers-group.astro

@@ -1,10 +1,11 @@
 ---
-import { getImage } from "@astrojs/image";
 import unicornSticker from "assets/unicorn_utterances_sticker.svg";
-import { getStickers } from "../../utils/get-stickers";
+import { tags } from "src/utils/data";
 import styles from "./banner-stickers-group.module.scss";
 
-const stickers = getStickers().sort(() => 0.5 - Math.random());
+const stickers = [...tags.values()]
+	.filter((tag) => !!tag.shownWithBranding && !!tag.image)
+	.sort(() => 0.5 - Math.random());
 
 const stickerTransforms = [
 	styles.sticker1,
@@ -30,7 +31,7 @@ const props = Astro.props as { class: string; unicornClass: string };
 <div class={props.class} aria-hidden="true">
 	{
 		stickerTransforms.map((sticker) => (
-			<img src={sticker.src} class={sticker.className} alt="" />
+			<img src={sticker.image} class={sticker.className} alt="" />
 		))
 	}
 

src/components/search-section/search-section.astro

@@ -8,7 +8,7 @@ import { IconOnlyButton } from "../button/button";
 import { Icon } from "astro-icon";
 import { SEARCH_QUERY_KEY, buildSearchQuery } from "../../utils/search";
 
-const tagsToDisplay = [...data.tags]
+const tagsToDisplay = [...data.tags.entries()]
 	.sort(() => 0.5 - Math.random())
 	.slice(0, 8);
 ---
@@ -45,8 +45,8 @@ const tagsToDisplay = [...data.tags]
 		{
 			tagsToDisplay.map((tag) => (
 				<li>
-					<Chip href={`/search?${buildSearchQuery({ filterTags: [tag] })}`}>
+					<Chip href={`/search?${buildSearchQuery({ filterTags: [tag[0]] })}`}>
-						{tag}
+						{tag[1].displayName}
 					</Chip>
 				</li>
 			))

src/pages/[...locale]/about.astro

@@ -1,7 +1,7 @@
 ---
 import Document from "src/layouts/document.astro";
 import SEO from "components/seo/seo.astro";
-import About from "src/views/about/about.astro";
+import AboutView from "src/views/about/about.astro";
 import {
 	getLanguageFromFilename,
 	getTranslatedPage,
@@ -10,11 +10,11 @@ import {
 
 const { locales } = getTranslatedPage(
 	Astro,
-	await Astro.glob("../../../content/site/about-us*.md"),
+	await Astro.glob("../../../content/site/about-us*.mdx"),
 );
 
 export async function getStaticPaths() {
-	const globResults = await Astro.glob("../../../content/site/about-us*.md");
+	const globResults = await Astro.glob("../../../content/site/about-us*.mdx");
 	return globResults.map((globItem) => {
 		const locale = getLanguageFromFilename(globItem.file);
 		return {
@@ -33,5 +33,5 @@ export async function getStaticPaths() {
 		providedLangs={locales}
 		slot="head"
 	/>
-	<About />
+	<AboutView />
 </Document>

src/pages/[...locale]/posts/[postid].astro

@@ -6,7 +6,6 @@ import SEO from "components/seo/seo.astro";
 import type { MarkdownInstance } from "astro";
 import { ExtendedPostInfo } from "types/index";
 import BlogPost from "src/views/blog-post/blog-post.astro";
-import { Languages } from "types/index";
 
 export async function getStaticPaths() {
 	const posts = await Astro.glob<ExtendedPostInfo>(
@@ -27,7 +26,6 @@ export async function getStaticPaths() {
 					(post.frontmatter.noindex ? "_noindex" : ""),
 			},
 			props: {
-				locale: post.frontmatter.locale,
 				Content: post.Content,
 				post: post.frontmatter,
 				posts,
@@ -36,9 +34,8 @@ export async function getStaticPaths() {
 	});
 }
 
-const { Content, post, posts, locale } = Astro.props as {
+const { Content, post, posts } = Astro.props as {
 	post: ExtendedPostInfo;
-	locale: Languages;
 	posts: MarkdownInstance<ExtendedPostInfo>[];
 	Content: MarkdownInstance<any>["Content"];
 };

src/styles/markdown/codeblock.scss

@@ -19,7 +19,7 @@
 	--code-block_border_width: var(--border-width_l);
 }
 
-pre.shiki {
+pre.shiki, pre:not([class]) {
 	margin: var(--site-spacing) 0;
 	padding: var(--code-block_padding);
 

src/styles/post-body.scss

@@ -121,12 +121,12 @@
 		visibility: visible;
 	}
 
-	img {
+	img.medium-zoom-image {
 		max-width: 100%;
 		height: auto;
 	}
 
-	img[src$=".svg"] {
+	img.medium-zoom-image[src$=".svg"] {
 		width: 100%;
 		max-height: 50vh;
 	}

src/types/TagInfo.ts

@@ -0,0 +1,12 @@
+export interface TagInfo {
+	displayName: string;
+	emoji?: string;
+	image?: string;
+
+	// Markdown explainer for tag attribution/licensing
+	explainerHtml?: string;
+	explainerType?: "license" | "attribution";
+	// whether the tag can be shown with site branding
+	// e.g. in the homepage banner
+	shownWithBranding?: boolean;
+}

src/types/index.ts

@@ -2,6 +2,7 @@ export * from "./LicenseInfo";
 export * from "./CollectionInfo";
 export * from "./PostInfo";
 export * from "./RolesInfo";
+export * from "./TagInfo";
 export * from "./UnicornInfo";
 import { languages } from "constants/index";
 

src/utils/data.ts

@@ -6,7 +6,7 @@ import {
 	PostInfo,
 	Languages,
 	CollectionInfo,
-	ExtendedPostInfo,
+	TagInfo,
 } from "types/index";
 import * as fs from "fs";
 import { join } from "path";
@@ -17,6 +17,13 @@ import matter from "gray-matter";
 import dayjs from "dayjs";
 import collectionMapping from "../../content/data/collection-mapping";
 
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkToRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+import { rehypeUnicornElementMap } from "./markdown/rehype-unicorn-element-map";
+import remarkTwoslash from "remark-shiki-twoslash";
+
 export const postsDirectory = join(process.cwd(), "content/blog");
 export const collectionsDirectory = join(process.cwd(), "content/collections");
 export const dataDirectory = join(process.cwd(), "content/data");
@@ -31,6 +38,56 @@ const rolesRaw = (await import("../../content/data/roles.json")).default;
 
 const licensesRaw = (await import("../../content/data/licenses.json")).default;
 
+const tagsRaw = (await import("../../content/data/tags.json")).default;
+
+const tags = new Map<string, TagInfo>();
+
+// This needs to use a minimal version of our unified chain,
+// as we can't import `createRehypePlugins` through an Astro
+// file due to the hastscript JSX
+const tagExplainerParser = unified()
+	.use(remarkParse, { fragment: true } as never)
+	.use(remarkTwoslash, { themes: ["css-variables"] })
+	.use(remarkToRehype, { allowDangerousHtml: true })
+	.use(rehypeUnicornElementMap)
+	.use(rehypeStringify, { allowDangerousHtml: true, voids: [] });
+
+for (const [key, tag] of Object.entries(tagsRaw)) {
+	let explainer = undefined;
+	let explainerType = undefined;
+
+	if ("image" in tag && tag.image.endsWith(".svg")) {
+		const license = await fs.promises
+			.readFile("public" + tag.image.replace(".svg", "-LICENSE.md"), "utf-8")
+			.catch((_) => undefined);
+
+		const attribution = await fs.promises
+			.readFile(
+				"public" + tag.image.replace(".svg", "-ATTRIBUTION.md"),
+				"utf-8",
+			)
+			.catch((_) => undefined);
+
+		if (license) {
+			explainer = license;
+			explainerType = "license";
+		} else if (attribution) {
+			explainer = attribution;
+			explainerType = "attribution";
+		}
+	}
+
+	const explainerHtml = explainer
+		? (await tagExplainerParser.process(explainer)).toString()
+		: undefined;
+
+	tags.set(key, {
+		explainerHtml,
+		explainerType,
+		...tag,
+	});
+}
+
 const fullUnicorns: UnicornInfo[] = unicornsRaw.map((unicorn) => {
 	const absoluteFSPath = join(dataDirectory, unicorn.profileImg);
 	/**
@@ -219,11 +276,23 @@ function getPosts(): Array<PostInfo> {
 			 */
 			const wordCount = fileContents.split(/\s+/).length;
 
+			const frontmatterTags = [...frontmatter.tags].filter((tag) => {
+				if (tags.has(tag)) {
+					return true;
+				} else {
+					console.warn(
+						`${slug}: Tag '${tag}' is not specified in content/data/tags.json! Filtering...`,
+					);
+					return false;
+				}
+			});
+
 			return {
 				...frontmatter,
 				slug,
 				locales,
 				locale: locales[i],
+				tags: frontmatterTags,
 				authorsMeta: frontmatter.authors.map((authorId) =>
 					fullUnicorns.find((u) => u.id === authorId),
 				),
@@ -275,14 +344,6 @@ collections = collections.map((collection: Omit<CollectionInfo, "posts">) => ({
 	posts: posts.filter((post) => post.collection === collection.slug),
 })) as CollectionInfo[];
 
-const tags = [
-	...[...posts, ...collections].reduce((set, item) => {
-		for (const tag of item.tags || []) set.add(tag);
-
-		return set;
-	}, new Set<string>()),
-];
-
 export {
 	aboutRaw as about,
 	fullUnicorns as unicorns,

src/utils/get-stickers.ts

@@ -1,78 +0,0 @@
-/**
- * These are the allowed stickers to be shown within our branding assets
- *
- * IE: Homepage, search page initial state, etc
- *
- * All of these stickers must be vetted manually for licencing rights and, if requested,
- * must be removed.
- *
- * If you own the rights to these assets and would like yours removed, please email us at:
- * licensing@unicorn-utterances.com
- */
-export function getStickers() {
-	return [
-		{
-			src: "/stickers/android.svg",
-			explainer:
-				"https://developer.android.com/distribute/marketing-tools/brand-guidelines#android_robot",
-		},
-		{
-			src: "/stickers/angular.svg",
-			explainer: "https://angular.io/presskit#official-angular-logo",
-		},
-		{
-			src: "/stickers/css.svg",
-			explainer:
-				"https://en.wikipedia.org/wiki/CSS#/media/File:CSS3_logo_and_wordmark.svg",
-		},
-		{
-			src: "/stickers/html.svg",
-			explainer:
-				"https://en.wikipedia.org/wiki/HTML#/media/File:HTML5_logo_and_wordmark.svg",
-		},
-		{
-			src: "/stickers/python.svg",
-			explainer: "https://www.python.org/psf/trademarks/",
-		},
-		{
-			src: "/stickers/react.svg",
-			explainer:
-				"https://github.com/facebook/react/issues/12570#issuecomment-411130246",
-		},
-		{
-			src: "/stickers/typescript.svg",
-			explainer:
-				"https://github.com/microsoft/TypeScript-Website/blob/v2/LICENSE",
-		},
-		{
-			src: "/stickers/javascript.svg",
-			explainer: "https://github.com/voodootikigod/logo.js/blob/master/LICENSE",
-		},
-		{
-			src: "/stickers/linux.svg",
-			explainer:
-				"https://web.archive.org/web/20191001080512/https://isc.tamu.edu/~lewing/linux/",
-		},
-		{ src: "/stickers/vue.svg", explainer: "https://github.com/vuejs/art" },
-		{
-			src: "/stickers/ferris.svg",
-			explainer:
-				"https://foundation.rust-lang.org/policies/logo-policy-and-media-guide/",
-		},
-		{
-			src: "/stickers/git.svg",
-			explainer: "https://git-scm.com/downloads/logos",
-		},
-		{
-			src: "/stickers/cpp.svg",
-			explainer: "https://isocpp.org/home/terms-of-use",
-		},
-	] satisfies Sticker[];
-}
-
-interface Sticker {
-	// The src on the Unicorn Utterances site
-	src: string;
-	// The explainer for why we should have the ability to display this logo
-	explainer: string;
-}

src/utils/markdown/rehype-unicorn-element-map.ts

@@ -8,10 +8,11 @@ import path from "path";
 // TODO: Add switch/case and dedicated files ala "Components"
 export const rehypeUnicornElementMap: Plugin<[], Root> = () => {
 	return async (tree, file) => {
-		const splitFilePath = path.dirname(file.path).split(path.sep);
+		const splitFilePath =
+			(file.path && path.dirname(file.path).split(path.sep)) || undefined;
 		// "collections" | "blog"
-		const parentFolder = splitFilePath.at(-2);
+		const parentFolder = splitFilePath?.at(-2);
-		const slug = splitFilePath.at(-1);
+		const slug = splitFilePath?.at(-1);
 
 		visit(tree, (node: Element) => {
 			if (node.tagName === "video") {
@@ -21,6 +22,7 @@ export const rehypeUnicornElementMap: Plugin<[], Root> = () => {
 				node.properties.loop ??= true;
 				node.properties.width ??= "100%";
 				node.properties.height ??= "auto";
+				if (slug) {
 					node.properties.src = getFullRelativePath(
 						"/content/",
 						parentFolder,
@@ -28,6 +30,7 @@ export const rehypeUnicornElementMap: Plugin<[], Root> = () => {
 						node.properties.src.toString(),
 					);
 				}
+			}
 
 			if (node.tagName === "a") {
 				const href = node.properties.href;

src/utils/translations.ts

@@ -1,7 +1,7 @@
 import { Languages } from "types/index";
 import { languages } from "../constants/index";
 import { basename } from "path";
-import { MarkdownInstance } from "astro";
+import { MDXInstance, MarkdownInstance } from "astro";
 
 function isLanguageKey(str: string): str is Languages {
 	return Object.keys(languages).includes(str);
@@ -87,18 +87,22 @@ export function removePrefixLanguageFromPath(path: string) {
  * @param glob the Astro glob to query
  * @returns the matched markdown page
  */
-export function getTranslatedPage(
+export function getTranslatedPage<
+	PageInstance extends
+		| MarkdownInstance<Record<string, unknown>>
+		| MDXInstance<Record<string, unknown>>,
+>(
 	astro: { url: URL },
-	glob: MarkdownInstance<Record<string, unknown>>[],
+	glob: PageInstance[],
 ): {
 	locales: Languages[];
-	page: MarkdownInstance<Record<string, unknown>>;
+	page: PageInstance;
 } {
 	const globResults = glob;
 	const lang = getPrefixLanguageFromPath(astro.url.pathname);
 
-	const matchedResult = globResults.find((md) =>
+	const matchedResult = globResults.find(
-		md.file.endsWith(`${lang}.md`),
+		(md) => md.file.endsWith(`.${lang}.md`) || md.file.endsWith(`.${lang}.mdx`),
 	);
 
 	const locales = globResults.map((md) => getLanguageFromFilename(md.file));
@@ -106,7 +110,7 @@ export function getTranslatedPage(
 	const enResult = globResults[locales.findIndex((lang) => lang === "en")];
 
 	return {
-		locales,
+		locales: locales.sort(),
 		page: matchedResult || enResult,
 	};
 }

src/views/about/about.astro

@@ -1,71 +1,104 @@
 ---
 import style from "./about.module.scss";
+import "../../styles/shiki.scss";
 import * as data from "src/utils/data";
-import { Picture } from "@astrojs/image/components";
 import ContributorCard from "./contributor-card.astro";
 import { getTranslatedPage, translate } from "src/utils/translations";
-import { Button } from "components/index";
+import TranslationsHeader from "src/views/base/translations/translations-header.astro";
-import { Icon } from "astro-icon";
+import { License } from "./license";
-import TranslationsHeader from "../base/translations/translations-header.astro";
+import BannerSvg from "./banner-svg.astro";
 
 const about = getTranslatedPage(
 	Astro,
-	await Astro.glob("../../../content/site/about-us*.md"),
+	await Astro.glob("../../../content/site/about-us*.mdx"),
-);
-const sponsors = getTranslatedPage(
-	Astro,
-	await Astro.glob("../../../content/site/sponsors*.md"),
 );
+
+const tags = [
+	...[...data.tags.values()]
+		.filter((tag) => !!tag.image && !!tag.explainerHtml)
+		// prevent duplicates when images are used with multiple tags
+		.reduce((map, entry) => {
+			!map.has(entry.image) && map.set(entry.image, entry);
+			return map;
+		}, new Map())
+		.values(),
+];
 ---
 
 <div class="container">
-	<div class="d-flex text-center">
+	<div class={style.banner}>
-		<Picture
+		<BannerSvg />
-			src={import("../../assets/unicorn_utterances_logo_512.png")}
-			loading={"eager"}
-			widths={[192, 56]}
-			sizes={"192px"}
-			formats={["avif", "webp", "png"]}
-			alt={"Unicorn Utterances logo"}
-			class={style.unicornLogo}
-		/>
-		<h1 class="text-style-headline-1">{translate(Astro, "title.about_us")}</h1>
 	</div>
 	<main class={`${style.aboutBody} post-body`}>
 		<TranslationsHeader locales={about.locales} />
+
 		<about.page.Content />
 
-		<div class={`${style.links} d-flex text-center`}>
+		<hr />
-			{
-				Object.entries(data.about.links).map(([name, link]) => (
-					<Button variant="primary-emphasized" href={link.url}>
-						<Icon slot="leftIcon" width="100%" height="100%" name={link.icon} />
-						{name}
-					</Button>
-				))
-			}
-		</div>
 
-		<h2>{translate(Astro, "title.sponsors")}</h2>
+		<h2 id="contributors">
-		<div class={`${style.sponsors} d-flex text-center`}>
+			{translate(Astro, "title.contributors")}
-			{
+		</h2>
-				data.about.sponsors.map((sponsor) => (
+		<ul class={style.unicorns} role="list" aria-labelledby="contributors">
-					// these are all svgs, so astro's Picture/Image components make no sense here
-					<a href={sponsor.url} class={style.sponsor}>
-						<img src={sponsor.logo} width="300" alt={sponsor.name} />
-					</a>
-				))
-			}
-		</div>
-		<sponsors.page.Content />
-
-		<h2>{translate(Astro, "title.contributors")}</h2>
-		<div class={style.unicorns}>
 			{
 				data.unicorns.map((unicornInfo) => (
 					<ContributorCard unicorn={unicornInfo} />
 				))
 			}
-		</div>
+		</ul>
+
+		<hr />
+
+		<h2 id="licenses">{translate(Astro, "title.licenses")}</h2>
+
+		<ul class={style.licenses} role="list" aria-labelledby="licenses">
+			{
+				tags.map((tag) => (
+					<li>
+						<License
+							client:visible
+							name={tag.displayName}
+							explainerHtml={tag.explainerHtml}
+							image={tag.image}
+							action={
+								tag.explainerType === "license"
+									? translate(Astro, "action.view_license")
+									: translate(Astro, "action.view_attribution")
+							}
+							actionLabel={
+								tag.explainerType === "license"
+									? translate(Astro, "label.view_license_for", tag.displayName)
+									: translate(
+											Astro,
+											"label.view_attribution_for",
+											tag.displayName,
+									  )
+							}
+						/>
+					</li>
+				))
+			}
+		</ul>
+
+		<p>
+			{translate(Astro, "desc.licenses_request_removal")}
+			<a id="email-licenses" href="#">
+				<noscript>JavaScript required</noscript>
+			</a>
+			<script>
+				{
+					const a: HTMLAnchorElement =
+						document.querySelector("#email-licenses");
+					// This is base64 for UU's contact email, to prevent automated page crawlers from finding it
+					a.href =
+						"mailto:" +
+						(a.innerText = atob(
+							"bGljZW5zaW5nQHVuaWNvcm4tdXR0ZXJhbmNlcy5jb20=",
+						));
+				}
+			</script>
+		</p>
+
+		<hr />
 	</main>
 </div>

src/views/about/about.module.scss

@@ -1,36 +1,62 @@
 @import "src/tokens/index";
 
-.unicornLogo {
+.banner {
-	margin-right: var(--spc-1x);
+	display: flex;
-	width: 56px;
+	justify-content: center;
-	height: 56px;
 
-	@include from($desktopSmall) {
+	svg {
-		width: 192px;
+		width: var(--max-width_s);
-		height: 192px;
+		height: auto;
 	}
 }
 
-.links {
+.aboutBody {
+	max-width: var(--max-width_m);
+	margin: 0 auto;
+
+	padding: var(--site-spacing) 0;
+
+	@include from($tabletLarge) {
+		padding: var(--site-spacing);
+	}
+}
+
+.aboutBody :global(.links) {
+	display: flex;
 	gap: var(--spc-4x);
 	flex-wrap: wrap;
+
+	list-style-type: none;
+	padding: 0;
 }
 
-.sponsors {
+.aboutBody :global(.sponsors) {
-	flex-wrap: wrap;
+	display: grid;
+	grid-template-columns: repeat(1, minmax(0, 1fr));
+	gap: var(--spc-4x);
+
+	list-style-type: none;
+	padding: 0;
+
+	@include from($mobile) {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
 
-.sponsor {
+	a {
 		display: flex;
 		align-items: center;
-	width: 300px;
+		width: auto;
-	height: 122px;
+		aspect-ratio: 3;
-
-	margin: var(--spc-2x);
 
 		background-color: #fff;
-	border-radius: var(--corner-radius_s);
+		border-radius: var(--corner-radius_m);
-	overflow: hidden;
+		overflow: clip;
+	}
+
+	img {
+		width: 100%;
+		object-fit: contain;
+	}
 }
 
 .unicorns {
@@ -38,7 +64,28 @@
 	grid-template-columns: repeat(1, minmax(0, 1fr));
 	gap: var(--site-spacing);
 
+	list-style-type: none;
+	padding: 0;
+
+	@include from($tabletSmall) {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: var(--spc-2x) var(--site-spacing);
+	}
+}
+
+.licenses {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: var(--site-spacing);
+	padding: var(--site-spacing) 0;
+
+	list-style-type: none;
+
+	@include from($tabletSmall) {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+
 	@include from($tabletLarge) {
-		grid-template-columns: repeat(2, minmax(0, 1fr))
+		grid-template-columns: repeat(4, minmax(0, 1fr));
 	}
 }

src/views/about/banner-svg.astro

@@ -0,0 +1,454 @@
+---
+import { getImage } from "@astrojs/image";
+import { escape } from "html-escaper";
+import * as data from "src/utils/data";
+import fs from "fs/promises";
+
+const sticker_star = await fs.readFile(
+	"public/stickers/sticker_star.svg",
+	"utf-8",
+);
+const sticker_author = await fs.readFile(
+	"public/stickers/role_author.svg",
+	"utf-8",
+);
+const sticker_community = await fs.readFile(
+	"public/stickers/role_community.svg",
+	"utf-8",
+);
+const sticker_developer = await fs.readFile(
+	"public/stickers/role_developer.svg",
+	"utf-8",
+);
+
+const unicorns = [...data.unicorns]
+	.sort((_) => 0.5 - Math.random())
+	.slice(0, 28);
+
+const unicornImages = await Promise.all(
+	unicorns.map(async (unicorn, i) => {
+		const aspectRatio =
+			unicorn.profileImgMeta.width / unicorn.profileImgMeta.height;
+
+		let size = i < 8 ? 80 : i < 16 ? 72 : 64;
+
+		// adjust the image width to ensure its height=80px
+		// (i.e. it shouldn't get upscaled/downscaled with `object-fit: cover`)
+		const width = Math.max(size, Math.ceil(size * aspectRatio));
+
+		const image = await getImage({
+			height: size,
+			width,
+			src: unicorn.profileImgMeta.relativeServerPath,
+			format: "avif",
+			alt: "",
+		});
+
+		return `
+		<image class="bannerSvgImage" width="96" height="96" xlink:href="${escape(
+			image.src,
+		)}" preserveAspectRatio="xMidYMid slice" transform="scale(0.0104167)"></image>
+	`.trim();
+	}),
+);
+---
+
+<svg
+	width="640"
+	height="560"
+	viewBox="0 0 640 560"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	class="bannerSvg"
+	role="img"
+	aria-labelledby="about-banner-svg-title"
+>
+	<title id="about-banner-svg-title">
+		Unicorn Utterances logo, surrounded by many contributor images.
+	</title>
+	<g>
+		<mask
+			id="mask0_5681_47057"
+			style="mask-type:alpha"
+			maskUnits="userSpaceOnUse"
+			x="0"
+			y="0"
+			width="640"
+			height="561"
+		>
+			<path
+				d="M640 280.002C640 446.055 486.053 560.002 320 560.002C153.947 560.002 0 446.055 0 280.002C0 113.949 153.947 0.00195312 320 0.00195312C486.053 0.00195312 640 113.949 640 280.002Z"
+				fill="url(#paint0_radial_5681_47057)"></path>
+		</mask>
+		<g mask="url(#mask0_5681_47057)">
+			<circle cx="251.117" cy="113.701" r="40" fill="url(#pattern0)"></circle>
+			<circle cx="251.117" cy="113.701" r="40" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="388.883" cy="446.297" r="40" fill="url(#pattern1)"></circle>
+			<circle cx="388.883" cy="446.297" r="40" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="388.883" cy="113.701" r="40" fill="url(#pattern2)"></circle>
+			<circle cx="388.883" cy="113.701" r="40" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="251.116" cy="446.299" r="40" fill="url(#pattern3)"></circle>
+			<circle cx="251.116" cy="446.299" r="40" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="486.298" cy="211.117" r="40" fill="url(#pattern4)"></circle>
+			<circle cx="486.298" cy="211.117" r="40" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="153.701" cy="348.883" r="40" fill="url(#pattern5)"></circle>
+			<circle cx="153.701" cy="348.883" r="40" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="486.299" cy="348.883" r="40" fill="url(#pattern6)"></circle>
+			<circle cx="486.299" cy="348.883" r="40" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="153.702" cy="211.115" r="40" fill="url(#pattern7)"></circle>
+			<circle cx="153.702" cy="211.115" r="40" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="151.035" cy="110.379" r="36" fill="url(#pattern8)"></circle>
+			<circle cx="151.035" cy="110.379" r="36" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="490.446" cy="449.791" r="36" fill="url(#pattern9)"></circle>
+			<circle cx="490.446" cy="449.791" r="36" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="320.928" cy="39.7227" r="36" fill="url(#pattern10)"></circle>
+			<circle cx="320.928" cy="39.7227" r="36" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="320.928" cy="519.723" r="36" fill="url(#pattern11)"></circle>
+			<circle cx="320.928" cy="519.723" r="36" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="489.869" cy="110.434" r="36" fill="url(#pattern12)"></circle>
+			<circle cx="489.869" cy="110.434" r="36" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="150.458" cy="449.844" r="36" fill="url(#pattern13)"></circle>
+			<circle cx="150.458" cy="449.844" r="36" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="560.525" cy="280.326" r="36" fill="url(#pattern14)"></circle>
+			<circle cx="560.525" cy="280.326" r="36" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="80.5254" cy="280.326" r="36" fill="url(#pattern15)"></circle>
+			<circle cx="80.5254" cy="280.326" r="36" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="212.849" cy="21.3125" r="32" fill="url(#pattern16)"></circle>
+			<circle cx="212.849" cy="21.3125" r="32" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="427.151" cy="538.686" r="32" fill="url(#pattern17)"></circle>
+			<circle cx="427.151" cy="538.686" r="32" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="427.08" cy="21.2676" r="32" fill="url(#pattern18)"></circle>
+			<circle cx="427.08" cy="21.2676" r="32" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="212.776" cy="538.641" r="32" fill="url(#pattern19)"></circle>
+			<circle cx="212.776" cy="538.641" r="32" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="578.686" cy="172.848" r="32" fill="url(#pattern20)"></circle>
+			<circle cx="578.686" cy="172.848" r="32" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="61.3135" cy="387.15" r="32" fill="url(#pattern21)"></circle>
+			<circle cx="61.3135" cy="387.15" r="32" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="578.731" cy="387.08" r="32" fill="url(#pattern22)"></circle>
+			<circle cx="578.731" cy="387.08" r="32" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="61.3584" cy="172.777" r="32" fill="url(#pattern23)"></circle>
+			<circle cx="61.3584" cy="172.777" r="32" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="125.195" cy="26.125" r="32" fill="url(#pattern24)"></circle>
+			<circle cx="125.195" cy="26.125" r="32" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="514.803" cy="533.871" r="32" fill="url(#pattern25)"></circle>
+			<circle cx="514.803" cy="533.871" r="32" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="66.2539" cy="84.5098" r="32" fill="url(#pattern26)"></circle>
+			<circle cx="66.2539" cy="84.5098" r="32" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+			<circle cx="574.001" cy="474.117" r="32" fill="url(#pattern27)"></circle>
+			<circle cx="574.001" cy="474.117" r="32" fill="#87CEFF" fill-opacity="0.2"
+			></circle>
+
+			<g
+				transform="translate(414.317 157.507) rotate(-10)"
+				set:html={sticker_star}
+			/>
+			<g
+				transform="translate(70.3683 383.962) rotate(-30)"
+				set:html={sticker_star}
+			/>
+			<g
+				transform="translate(510.896 365.012) rotate(14)"
+				set:html={sticker_author}
+			/>
+			<g
+				transform="translate(173.065 110.734) rotate(10)"
+				set:html={sticker_community}
+			/>
+			<g
+				transform="translate(210.152 465.584) rotate(5)"
+				set:html={sticker_developer}
+			/>
+
+			<mask
+				id="path-32-outside-1_5681_47057"
+				maskUnits="userSpaceOnUse"
+				x="502.243"
+				y="249.244"
+				width="36.7696"
+				height="36.7696"
+				fill="black"
+			>
+				<rect
+					fill="white"
+					x="502.243"
+					y="249.244"
+					width="36.7696"
+					height="36.7696"></rect>
+				<path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M519.388 257.958C521.92 261.048 521.991 263.259 521.219 265.885C520.889 267.006 520.005 267.89 518.884 268.22C516.258 268.992 514.047 268.921 510.957 266.389C507.687 263.708 509.748 261.537 512.142 259.143C514.536 256.749 516.707 254.688 519.388 257.958ZM530.297 268.868C527.208 266.335 524.997 266.264 522.371 267.037C521.25 267.367 520.366 268.251 520.036 269.372C519.264 271.998 519.334 274.209 521.867 277.298C524.548 280.568 526.718 278.508 529.113 276.114C531.507 273.719 533.567 271.549 530.297 268.868Z"
+				></path>
+			</mask>
+			<path
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M519.388 257.958C521.92 261.048 521.991 263.259 521.219 265.885C520.889 267.006 520.005 267.89 518.884 268.22C516.258 268.992 514.047 268.921 510.957 266.389C507.687 263.708 509.748 261.537 512.142 259.143C514.536 256.749 516.707 254.688 519.388 257.958ZM530.297 268.868C527.208 266.335 524.997 266.264 522.371 267.037C521.25 267.367 520.366 268.251 520.036 269.372C519.264 271.998 519.334 274.209 521.867 277.298C524.548 280.568 526.718 278.508 529.113 276.114C531.507 273.719 533.567 271.549 530.297 268.868Z"
+				fill="#87CEFF"></path>
+			<path
+				d="M521.219 265.885L525.056 267.014L525.056 267.014L521.219 265.885ZM519.388 257.958L522.481 255.422L519.388 257.958ZM518.884 268.22L517.755 264.382L517.755 264.382L518.884 268.22ZM510.957 266.389L508.422 269.482L508.422 269.482L510.957 266.389ZM522.371 267.037L523.499 270.874L523.499 270.874L522.371 267.037ZM530.297 268.868L527.761 271.961L530.297 268.868ZM520.036 269.372L523.874 270.5L523.874 270.5L520.036 269.372ZM521.867 277.298L518.774 279.834L521.867 277.298ZM525.056 267.014C525.537 265.38 525.873 263.484 525.474 261.358C525.076 259.238 524.029 257.311 522.481 255.422L516.294 260.494C517.279 261.695 517.533 262.419 517.611 262.833C517.688 263.241 517.673 263.764 517.381 264.756L525.056 267.014ZM520.013 272.057C522.438 271.344 524.343 269.439 525.056 267.014L517.381 264.756C517.435 264.572 517.571 264.436 517.755 264.382L520.013 272.057ZM508.422 269.482C510.31 271.03 512.237 272.077 514.357 272.475C516.483 272.874 518.379 272.538 520.013 272.057L517.755 264.382C516.763 264.674 516.24 264.689 515.832 264.612C515.418 264.534 514.695 264.28 513.493 263.295L508.422 269.482ZM509.314 256.315C508.731 256.897 508.018 257.613 507.398 258.367C506.786 259.111 506.07 260.119 505.644 261.355C505.182 262.696 505.083 264.254 505.676 265.854C506.234 267.356 507.271 268.538 508.422 269.482L513.493 263.295C513.009 262.898 513.078 262.804 513.176 263.071C513.23 263.215 513.266 263.397 513.264 263.591C513.262 263.778 513.226 263.909 513.207 263.962C513.187 264.021 513.231 263.869 513.576 263.449C513.913 263.04 514.356 262.586 514.971 261.971L509.314 256.315ZM522.481 255.422C521.538 254.271 520.355 253.235 518.853 252.677C517.253 252.083 515.695 252.183 514.354 252.645C513.118 253.071 512.11 253.787 511.366 254.399C510.612 255.019 509.896 255.732 509.314 256.315L514.971 261.971C515.585 261.357 516.039 260.914 516.448 260.577C516.868 260.232 517.02 260.188 516.961 260.208C516.908 260.227 516.777 260.263 516.59 260.265C516.396 260.267 516.214 260.231 516.07 260.177C515.803 260.078 515.897 260.01 516.294 260.494L522.481 255.422ZM523.499 270.874C524.492 270.582 525.014 270.568 525.423 270.644C525.837 270.722 526.56 270.977 527.761 271.961L532.833 265.775C530.945 264.227 529.018 263.179 526.898 262.782C524.772 262.383 522.875 262.719 521.242 263.2L523.499 270.874ZM523.874 270.5C523.819 270.684 523.683 270.82 523.499 270.874L521.242 263.2C518.817 263.913 516.912 265.818 516.199 268.243L523.874 270.5ZM524.961 274.762C523.976 273.561 523.721 272.838 523.644 272.424C523.567 272.015 523.582 271.493 523.874 270.5L516.199 268.243C515.718 269.876 515.382 271.773 515.781 273.899C516.178 276.019 517.226 277.946 518.774 279.834L524.961 274.762ZM526.284 273.285C525.67 273.9 525.216 274.342 524.806 274.679C524.386 275.025 524.235 275.069 524.294 275.048C524.347 275.03 524.477 274.994 524.665 274.992C524.859 274.99 525.041 275.026 525.185 275.079C525.452 275.178 525.357 275.246 524.961 274.762L518.774 279.834C519.717 280.985 520.9 282.022 522.402 282.58C524.002 283.173 525.56 283.074 526.901 282.612C528.137 282.186 529.145 281.47 529.888 280.858C530.643 280.237 531.358 279.525 531.941 278.942L526.284 273.285ZM527.761 271.961C528.245 272.358 528.177 272.452 528.078 272.186C528.025 272.042 527.989 271.86 527.991 271.665C527.993 271.478 528.029 271.348 528.047 271.295C528.068 271.235 528.024 271.387 527.678 271.807C527.341 272.217 526.899 272.671 526.284 273.285L531.941 278.942C532.524 278.359 533.236 277.644 533.857 276.889C534.469 276.145 535.185 275.138 535.611 273.902C536.073 272.561 536.172 271.003 535.579 269.403C535.021 267.901 533.984 266.718 532.833 265.775L527.761 271.961Z"
+				fill="white"
+				mask="url(#path-32-outside-1_5681_47057)"></path>
+			<circle
+				cx="520.627"
+				cy="267.628"
+				r="5"
+				transform="rotate(45 520.627 267.628)"
+				fill="#007FB4"></circle>
+			<mask
+				id="path-35-outside-2_5681_47057"
+				maskUnits="userSpaceOnUse"
+				x="97.5528"
+				y="260.796"
+				width="36.086"
+				height="27.6007"
+				fill="black"
+			>
+				<rect
+					fill="white"
+					x="97.5528"
+					y="260.796"
+					width="36.086"
+					height="27.6007"></rect>
+				<path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M109.687 266.842C113.425 268.251 114.592 270.131 115.236 272.791C115.511 273.927 115.187 275.135 114.382 275.98C112.494 277.963 110.543 279.007 106.602 278.358C102.429 277.671 103.128 274.761 104.005 271.491C104.881 268.22 105.731 265.351 109.687 266.842ZM124.59 270.835C120.648 270.187 118.698 271.231 116.81 273.213C116.004 274.059 115.68 275.267 115.955 276.402C116.599 279.063 117.766 280.942 121.504 282.351C125.461 283.843 126.311 280.973 127.187 277.703C128.063 274.432 128.762 271.522 124.59 270.835Z"
+				></path>
+			</mask>
+			<path
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M109.687 266.842C113.425 268.251 114.592 270.131 115.236 272.791C115.511 273.927 115.187 275.135 114.382 275.98C112.494 277.963 110.543 279.007 106.602 278.358C102.429 277.671 103.128 274.761 104.005 271.491C104.881 268.22 105.731 265.351 109.687 266.842ZM124.59 270.835C120.648 270.187 118.698 271.231 116.81 273.213C116.004 274.059 115.68 275.267 115.955 276.402C116.599 279.063 117.766 280.942 121.504 282.351C125.461 283.843 126.311 280.973 127.187 277.703C128.063 274.432 128.762 271.522 124.59 270.835Z"
+				fill="#87CEFF"></path>
+			<path
+				d="M115.236 272.791L119.124 271.85L119.124 271.85L115.236 272.791ZM109.687 266.842L111.098 263.099L109.687 266.842ZM114.382 275.98L111.486 273.221L111.486 273.222L114.382 275.98ZM106.602 278.358L105.952 282.305L105.952 282.305L106.602 278.358ZM116.81 273.213L119.706 275.972L119.706 275.972L116.81 273.213ZM124.59 270.835L123.941 274.782L124.59 270.835ZM115.955 276.402L119.843 275.461L119.843 275.461L115.955 276.402ZM121.504 282.351L120.093 286.094L121.504 282.351ZM119.124 271.85C118.723 270.195 118.066 268.385 116.658 266.743C115.253 265.106 113.383 263.961 111.098 263.099L108.276 270.585C109.73 271.133 110.312 271.632 110.586 271.952C110.857 272.267 111.105 272.727 111.349 273.733L119.124 271.85ZM117.278 278.739C119.022 276.909 119.719 274.307 119.124 271.85L111.349 273.732C111.303 273.546 111.353 273.36 111.486 273.221L117.278 278.739ZM105.952 282.305C108.361 282.701 110.554 282.645 112.589 281.929C114.63 281.212 116.104 279.972 117.278 278.739L111.486 273.222C110.772 273.971 110.327 274.244 109.935 274.382C109.537 274.522 108.784 274.663 107.251 274.411L105.952 282.305ZM100.141 270.456C99.9277 271.252 99.6683 272.228 99.5082 273.191C99.3502 274.141 99.2339 275.372 99.4831 276.656C99.7533 278.048 100.446 279.447 101.76 280.536C102.994 281.558 104.483 282.063 105.952 282.305L107.251 274.411C106.633 274.309 106.645 274.194 106.864 274.375C106.983 274.473 107.105 274.613 107.2 274.782C107.292 274.945 107.326 275.076 107.337 275.131C107.349 275.193 107.311 275.04 107.4 274.503C107.487 273.98 107.644 273.365 107.868 272.526L100.141 270.456ZM111.098 263.099C109.706 262.574 108.163 262.267 106.583 262.536C104.901 262.822 103.601 263.687 102.671 264.757C101.813 265.745 101.299 266.868 100.961 267.77C100.618 268.685 100.354 269.66 100.141 270.456L107.868 272.526C108.093 271.687 108.265 271.077 108.451 270.58C108.642 270.07 108.752 269.957 108.71 270.004C108.674 270.046 108.579 270.143 108.418 270.238C108.25 270.337 108.075 270.397 107.923 270.423C107.643 270.47 107.691 270.364 108.276 270.585L111.098 263.099ZM119.706 275.972C120.42 275.223 120.865 274.949 121.257 274.811C121.655 274.671 122.408 274.53 123.941 274.782L125.24 266.888C122.83 266.492 120.638 266.549 118.603 267.264C116.562 267.982 115.088 269.221 113.914 270.454L119.706 275.972ZM119.843 275.461C119.888 275.647 119.838 275.833 119.706 275.972L113.914 270.454C112.17 272.284 111.473 274.886 112.068 277.343L119.843 275.461ZM122.915 278.608C121.462 278.06 120.88 277.562 120.606 277.241C120.335 276.926 120.087 276.467 119.843 275.461L112.068 277.343C112.468 278.998 113.125 280.809 114.534 282.45C115.938 284.087 117.809 285.233 120.093 286.094L122.915 278.608ZM123.323 276.667C123.098 277.507 122.927 278.117 122.741 278.614C122.549 279.123 122.44 279.237 122.481 279.189C122.518 279.147 122.613 279.051 122.774 278.955C122.941 278.856 123.117 278.796 123.268 278.771C123.549 278.723 123.501 278.829 122.915 278.608L120.093 286.094C121.486 286.619 123.028 286.926 124.608 286.658C126.29 286.372 127.59 285.507 128.52 284.436C129.378 283.449 129.893 282.325 130.231 281.423C130.574 280.509 130.837 279.534 131.051 278.738L123.323 276.667ZM123.941 274.782C124.558 274.884 124.546 275 124.327 274.818C124.209 274.72 124.087 274.581 123.992 274.411C123.9 274.248 123.866 274.117 123.855 274.062C123.843 274 123.881 274.154 123.792 274.69C123.705 275.214 123.548 275.828 123.323 276.667L131.051 278.738C131.264 277.942 131.523 276.966 131.683 276.002C131.841 275.052 131.958 273.822 131.709 272.538C131.438 271.146 130.745 269.746 129.431 268.658C128.197 267.636 126.708 267.13 125.24 266.888L123.941 274.782Z"
+				fill="white"
+				mask="url(#path-35-outside-2_5681_47057)"></path>
+			<circle
+				cx="115.596"
+				cy="274.596"
+				r="5"
+				transform="rotate(15 115.596 274.596)"
+				fill="#007FB4"></circle>
+			<mask
+				id="path-38-outside-3_5681_47057"
+				maskUnits="userSpaceOnUse"
+				x="508.337"
+				y="372.045"
+				width="31.3257"
+				height="29.9115"
+				fill="black"
+			>
+				<rect
+					fill="white"
+					x="508.337"
+					y="372.045"
+					width="31.3257"
+					height="29.9115"></rect>
+				<path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M515.445 376.426C515.731 375.359 516.828 374.726 517.895 375.012L520.793 375.788L531.418 378.635C532.485 378.921 533.118 380.018 532.832 381.085L529.208 394.608L533.072 395.643L532.555 397.575C532.269 398.642 531.172 399.275 530.105 398.989L528.173 398.471L516.582 395.366C515.515 395.08 514.882 393.983 515.168 392.916L518.791 379.393L514.928 378.358L515.445 376.426Z"
+				></path>
+			</mask>
+		</g>
+		<circle cx="320" cy="280" r="96" fill="white"></circle>
+		<circle cx="320" cy="280" r="96.5" stroke="#0B1D28" stroke-opacity="0.16"
+		></circle>
+		<path
+			d="M289.494 201.475L272.359 172.08V210.526C259.74 219.181 249.595 231.18 243.199 245.245H227.256L232.127 255.276L232.182 255.377C232.626 256.183 233.102 257.087 233.633 258.094L233.66 258.145C234.66 260.041 235.827 262.254 237.128 264.447C236.175 269.523 235.676 274.759 235.676 280.112C235.676 326.683 273.429 364.436 320 364.436C366.244 364.436 403.794 327.212 404.319 281.093C405.154 280.139 405.842 279.119 406.405 278.073C408.505 274.164 408.823 269.724 408.979 267.551L408.993 267.369C409.023 266.946 409.044 266.662 409.066 266.442L409.736 259.8L401.605 258.784C401.038 256.613 400.387 254.476 399.657 252.377L409.101 251.433V245.245C409.101 237.132 407.051 230.558 401.732 226.494C396.86 222.772 390.746 222.455 386.311 222.455H381.533C366.148 206.042 344.272 195.787 320 195.787C309.242 195.787 298.954 197.802 289.494 201.475Z"
+			fill="#127DB3"></path>
+		<path
+			d="M276.93 305.425V274.02L248.699 299.427L250.116 301.114C255.289 307.273 260.748 309.334 265.564 309.334C270.255 309.334 274.001 307.379 275.915 306.102L276.93 305.425Z"
+			fill="#82C3D9"></path>
+		<path
+			d="M276.93 305.425V274.02L248.699 299.427L250.116 301.114C255.289 307.273 260.748 309.334 265.564 309.334C270.255 309.334 274.001 307.379 275.915 306.102L276.93 305.425Z"
+			fill="url(#paint4_radial_5681_47057)"></path>
+		<path
+			d="M276.917 249.804V188.951L299.872 228.33C286.879 231.525 278.239 240.145 277.056 249.804H276.917Z"
+			fill="url(#paint5_linear_5681_47057)"></path>
+		<path
+			d="M352.109 288.363C348.408 292.476 344.373 295.453 340.236 297.507L361.471 333.906L361.102 334.912C357.425 344.964 350.059 351.059 342.241 354.608C334.463 358.138 326.145 359.197 320.218 359.197C293.546 359.197 280.828 343.723 277.101 335.026L276.917 334.596V274.034C271.488 276.567 266.704 277.626 262.447 277.501C257.288 277.349 253.108 275.463 249.693 272.719C246.317 270.005 243.702 266.465 241.566 262.982C240.12 260.622 238.82 258.158 237.665 255.968C237.139 254.97 236.642 254.029 236.176 253.181L234.536 249.804H277.056C278.554 237.576 292.002 227.014 311.102 227.014H386.311C390.715 227.014 395.413 227.404 398.965 230.117C402.664 232.942 404.543 237.791 404.543 245.246V247.309L362.076 251.555C360.308 251.732 358.962 253.219 358.962 254.996C358.962 256.739 360.26 258.21 361.99 258.426L404.754 263.772L404.532 265.986C404.501 266.283 404.476 266.638 404.446 267.04C404.286 269.255 404.024 272.875 402.39 275.916C401.37 277.815 399.809 279.55 397.453 280.733C395.126 281.903 392.176 282.457 388.479 282.278C386.404 282.177 384.179 281.973 381.942 281.769C380.905 281.674 379.866 281.579 378.837 281.494C375.529 281.22 372.214 281.034 368.987 281.205C362.561 281.545 356.687 283.277 352.109 288.363Z"
+			fill="#F0FBFF"></path>
+		<path
+			d="M352.109 288.363C348.408 292.476 344.373 295.453 340.236 297.507L361.471 333.906L361.102 334.912C357.425 344.964 350.059 351.059 342.241 354.608C334.463 358.138 326.145 359.197 320.218 359.197C293.546 359.197 280.828 343.723 277.101 335.026L276.917 334.596V274.034C271.488 276.567 266.704 277.626 262.447 277.501C257.288 277.349 253.108 275.463 249.693 272.719C246.317 270.005 243.702 266.465 241.566 262.982C240.12 260.622 238.82 258.158 237.665 255.968C237.139 254.97 236.642 254.029 236.176 253.181L234.536 249.804H277.056C278.554 237.576 292.002 227.014 311.102 227.014H386.311C390.715 227.014 395.413 227.404 398.965 230.117C402.664 232.942 404.543 237.791 404.543 245.246V247.309L362.076 251.555C360.308 251.732 358.962 253.219 358.962 254.996C358.962 256.739 360.26 258.21 361.99 258.426L404.754 263.772L404.532 265.986C404.501 266.283 404.476 266.638 404.446 267.04C404.286 269.255 404.024 272.875 402.39 275.916C401.37 277.815 399.809 279.55 397.453 280.733C395.126 281.903 392.176 282.457 388.479 282.278C386.404 282.177 384.179 281.973 381.942 281.769C380.905 281.674 379.866 281.579 378.837 281.494C375.529 281.22 372.214 281.034 368.987 281.205C362.561 281.545 356.687 283.277 352.109 288.363Z"
+			fill="url(#paint6_linear_5681_47057)"></path>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M320.416 252.949C321.799 252.377 323.28 252.082 324.777 252.082C326.274 252.082 327.755 252.377 329.137 252.949C330.521 253.522 331.776 254.362 332.835 255.42C333.892 256.478 334.732 257.734 335.304 259.117C335.877 260.499 336.173 261.981 336.173 263.477H331.614C331.614 262.579 331.437 261.69 331.094 260.861C330.75 260.031 330.246 259.278 329.611 258.643C328.976 258.008 328.223 257.504 327.394 257.161C326.564 256.817 325.675 256.64 324.777 256.64C323.879 256.64 322.99 256.817 322.16 257.161C321.331 257.504 320.577 258.008 319.942 258.643C319.308 259.278 318.804 260.031 318.46 260.861C318.117 261.69 317.94 262.579 317.94 263.477H313.382C313.382 261.981 313.677 260.499 314.249 259.117C314.822 257.734 315.661 256.478 316.719 255.42C317.778 254.362 319.034 253.522 320.416 252.949Z"
+			fill="#2A2933"></path>
+		<path
+			d="M356.684 303.116V314.272C356.684 316.955 355.575 319.251 353.866 320.869L356.963 326.178C350.008 331.659 338.188 335.267 324.777 335.267C303.379 335.267 286.033 326.083 286.033 314.755C286.033 303.428 303.379 294.244 324.777 294.244C338.01 294.244 349.694 297.757 356.684 303.116Z"
+			fill="url(#paint7_radial_5681_47057)"></path>
+		<path
+			d="M319.286 314.699C325.293 311.177 325.293 302.491 319.286 298.969L306.596 291.532C300.519 287.968 292.87 292.351 292.87 299.395V314.273C292.87 321.317 300.519 325.7 306.596 322.138L319.286 314.699Z"
+			fill="#153E67"></path>
+		<path
+			d="M319.286 314.699C325.293 311.177 325.293 302.491 319.286 298.969L306.596 291.532C300.519 287.968 292.87 292.351 292.87 299.395V314.273C292.87 321.317 300.519 325.7 306.596 322.138L319.286 314.699Z"
+			fill="url(#paint8_radial_5681_47057)"></path>
+		<path
+			d="M330.268 314.699C324.26 311.177 324.26 302.491 330.268 298.969L342.957 291.532C349.034 287.968 356.684 292.351 356.684 299.395V314.273C356.684 321.317 349.034 325.7 342.957 322.138L330.268 314.699Z"
+			fill="#153E67"></path>
+		<path
+			d="M330.268 314.699C324.26 311.177 324.26 302.491 330.268 298.969L342.957 291.532C349.034 287.968 356.684 292.351 356.684 299.395V314.273C356.684 321.317 349.034 325.7 342.957 322.138L330.268 314.699Z"
+			fill="url(#paint9_radial_5681_47057)"></path>
+		<path
+			d="M324.777 296.746C318.484 296.746 313.382 301.848 313.382 308.141C313.382 314.435 318.484 319.536 324.777 319.536C331.07 319.536 336.173 314.435 336.173 308.141C336.173 301.848 331.07 296.746 324.777 296.746Z"
+			fill="#266999"></path>
+	</g>
+	<defs>
+		{
+			unicornImages.map((html, i) => (
+				<pattern
+					id={"pattern" + i}
+					patternContentUnits="objectBoundingBox"
+					width="1"
+					height="1"
+					set:html={html}
+				/>
+			))
+		}
+		<radialGradient
+			id="paint0_radial_5681_47057"
+			cx="0"
+			cy="0"
+			r="1"
+			gradientUnits="userSpaceOnUse"
+			gradientTransform="translate(320 280.002) rotate(90) scale(280 320)"
+		>
+			<stop offset="0.457129" stop-opacity="1"></stop>
+			<stop offset="0.71153" stop-opacity="0.33"></stop>
+			<stop offset="0.965931" stop-opacity="0"></stop>
+		</radialGradient>
+		<linearGradient
+			id="paint1_linear_5681_47057"
+			x1="515.79"
+			y1="375.138"
+			x2="518.08"
+			y2="379.44"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FF6A00" stop-opacity="0"></stop>
+			<stop offset="1" stop-color="#FF6A00"></stop>
+		</linearGradient>
+		<linearGradient
+			id="paint2_linear_5681_47057"
+			x1="526.29"
+			y1="375.881"
+			x2="520.423"
+			y2="397.775"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FF6A00" stop-opacity="0"></stop>
+			<stop offset="1" stop-color="#FF6A00"></stop>
+		</linearGradient>
+		<linearGradient
+			id="paint3_linear_5681_47057"
+			x1="525.11"
+			y1="393.164"
+			x2="524.074"
+			y2="397.028"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FF6A00" stop-opacity="0"></stop>
+			<stop offset="1" stop-color="#FF6A00"></stop>
+		</linearGradient>
+		<radialGradient
+			id="paint4_radial_5681_47057"
+			cx="0"
+			cy="0"
+			r="1"
+			gradientUnits="userSpaceOnUse"
+			gradientTransform="translate(248.429 299.371) rotate(-41.7428) scale(49.6345 50.7134)"
+		>
+			<stop stop-color="white" stop-opacity="0"></stop>
+			<stop offset="1" stop-color="#085099" stop-opacity="0.9"></stop>
+		</radialGradient>
+		<linearGradient
+			id="paint5_linear_5681_47057"
+			x1="288.312"
+			y1="234.99"
+			x2="276.917"
+			y2="189.41"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#E68A99"></stop>
+			<stop offset="1" stop-color="#FFC2E9"></stop>
+		</linearGradient>
+		<linearGradient
+			id="paint6_linear_5681_47057"
+			x1="319.645"
+			y1="227.014"
+			x2="319.645"
+			y2="359.197"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="white" stop-opacity="0"></stop>
+			<stop offset="1" stop-color="#E4F4FF"></stop>
+		</linearGradient>
+		<radialGradient
+			id="paint7_radial_5681_47057"
+			cx="0"
+			cy="0"
+			r="1"
+			gradientUnits="userSpaceOnUse"
+			gradientTransform="translate(324.777 315.895) rotate(90) scale(12.5347 37.4783)"
+		>
+			<stop stop-color="#266999" stop-opacity="0.2"></stop>
+			<stop offset="1" stop-color="#153E67" stop-opacity="0"></stop>
+		</radialGradient>
+		<radialGradient
+			id="paint8_radial_5681_47057"
+			cx="0"
+			cy="0"
+			r="1"
+			gradientUnits="userSpaceOnUse"
+			gradientTransform="translate(324.777 322.163) rotate(-90) scale(27.9182 27.9182)"
+		>
+			<stop stop-color="#262833"></stop>
+			<stop offset="1" stop-color="#262833" stop-opacity="0"></stop>
+		</radialGradient>
+		<radialGradient
+			id="paint9_radial_5681_47057"
+			cx="0"
+			cy="0"
+			r="1"
+			gradientUnits="userSpaceOnUse"
+			gradientTransform="translate(324.777 322.163) rotate(-90) scale(27.9182 27.9182)"
+		>
+			<stop stop-color="#262833"></stop>
+			<stop offset="1" stop-color="#262833" stop-opacity="0"></stop>
+		</radialGradient>
+	</defs>
+</svg>

src/views/about/components.tsx

@@ -0,0 +1,50 @@
+import { Button } from "components/button/button";
+import * as data from "src/utils/data";
+
+import discord from "src/icons/discord.svg?raw";
+import linkedin from "src/icons/linkedin.svg?raw";
+import twitter from "src/icons/twitter.svg?raw";
+import mastodon from "src/icons/mastodon.svg?raw";
+import facebook from "src/icons/facebook.svg?raw";
+import rss from "src/icons/rss.svg?raw";
+
+const icons = { discord, linkedin, twitter, mastodon, facebook, rss };
+
+// Components used in the .MDX about files
+// - see /content/site/about-us*.mdx for usages
+
+// None of these components should include any SCSS styles!
+// This is because of an astro CSS scoping bug:
+// - https://github.com/withastro/astro/issues/3816
+
+export function Links() {
+	return (
+		<ul class="links" role="list" aria-label="Social media links">
+			{Object.entries(data.about.links).map(([name, link]) => (
+				<li>
+					<Button
+						variant="primary"
+						href={link.url}
+						leftIcon={<span dangerouslySetInnerHTML={{ __html: icons[link.icon]! }} />}
+					>
+						{name}
+					</Button>
+				</li>
+			))}
+		</ul>
+	);
+}
+
+export function Sponsors() {
+	return (
+		<ul class="sponsors" role="list" aria-labelledby="sponsors">
+			{Object.values(data.about.sponsors).map(({ name, logo, url }) => (
+				<li>
+					<a href={url}>
+						<img height="300" width="122" alt={name} src={logo} loading="lazy"/>
+					</a>
+				</li>
+			))}
+		</ul>
+	);
+}

src/views/about/contributor-card.astro

@@ -14,15 +14,16 @@ const { unicorn } = Astro.props as CardProps;
 const unicornHref = `/unicorns/${unicorn.id}`;
 ---
 
-<div class={style.card} {...getHrefContainerProps(unicornHref)}>
+<li class={style.card} {...getHrefContainerProps(unicornHref)}>
 	<Picture
-		alt={unicorn.name + " profile picture"}
+		alt=""
 		class={style.avatar}
 		sizes="96px"
 		widths={[96]}
 		aspectRatio={1}
 		formats={["avif", "webp", "png"]}
 		src={unicorn.profileImgMeta.relativeServerPath}
+		loading="lazy"
 	/>
 
 	<div class={style.info}>
@@ -47,7 +48,11 @@ const unicornHref = `/unicorns/${unicorn.id}`;
 		</ul>
 	</div>
 
-	<Button class={style.button} href={unicornHref}>
+	<Button
+		class={style.button}
+		href={unicornHref}
+		aria-label={translate(Astro, "label.view_profile_for", unicorn.name)}
+	>
 		{translate(Astro, "action.view_profile")}
 	</Button>
-</div>
+</li>

src/views/about/contributor-card.module.scss

@@ -49,6 +49,8 @@
 
 		.avatar {
 			height: calc(100% + var(--contributor_container-offset) + var(--contributor_avatar_border_width)) !important;
+			aspect-ratio: 1 / 1;
+			object-fit: cover;
 		}
 
 		.info {

src/views/about/license.module.scss

@@ -0,0 +1,168 @@
+@import "src/tokens/index";
+
+:root {
+	--license_padding-horizontal: var(--spc-4x);
+	--license_padding-vertical: var(--spc-3x);
+	--license_gap: var(--spc-4x);
+	--license_icon-size: var(--icon-size_regular);
+	--license_background-color: var(--surface_primary_emphasis-none);
+	--license_background-color_hovered: var(--surface_primary_emphasis-low);
+	--license_background-color_pressed: var(--surface_primary_emphasis-medium);
+	--license-background-color_focused: var(--background_focus);
+	--license_corner-radius: var(--corner-radius_m);
+}
+
+.license {
+	display: flex;
+	align-items: center;
+	gap: var(--license_gap);
+	padding: var(--license_padding-vertical) var(--license_padding-horizontal);
+
+	background-color: var(--license_background-color);
+	border-radius: var(--license_corner-radius);
+
+	.info {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.icon {
+		max-width: var(--license_icon-size);
+		height: var(--license_icon-size);
+		aspect-ratio: 1 / 1;
+		flex-shrink: 0;
+		flex-grow: 0;
+		filter: var(--shadow_sticker_drop_shadow);
+	}
+
+	.viewButton {
+		all: unset;
+		color: var(--primary_default);
+	}
+
+	&:hover .viewButton, &:active .viewButton {
+		text-decoration: underline;
+	}
+
+	@include transition(background-color outline);
+
+	&:hover {
+		background-color: var(--surface_primary_emphasis-low);
+	}
+
+	&:active {
+		background-color: var(--license_background-color_pressed);
+	}
+
+	@supports selector(:has(*)) {
+		&:has(:focus-visible) {
+			background-color: var(--license-background-color_focused);
+			outline: var(--border-width_focus) solid var(--focus-outline_primary);
+
+			.viewButton {
+				text-decoration: underline;
+			}
+		}
+	}
+
+	@supports not selector(:has(*)) {
+		&:focus-within {
+			background-color: var(--license-background-color_focused);
+			outline: var(--border-width_focus) solid var(--focus-outline_primary);
+
+			.viewButton {
+				text-decoration: underline;
+			}
+		}
+	}
+}
+
+:root {
+	--license-modal_header_padding-horizontal: var(--site-spacing);
+	--license-modal_header_padding-vertical: var(--site-spacing);
+	--license-modal_padding-horizontal: var(--site-spacing);
+	--license-modal_padding-bottom: var(--site-spacing);
+	--license-modal_button-gap: var(--spc-4x);
+	--license-modal_corner-radius: var(--corner-radius_l);
+	--license-modal_background: var(--background_primary);
+
+	--license-modal_icon-size: 96px;
+	--license-modal_icon-gap: var(--spc-4x);
+
+	@include from($tabletSmall) {
+		--license-modal_corner-radius: calc(var(--site-spacing) * 2);
+		--license-modal_max-width: var(--max-width_s);
+	}
+}
+
+.licenseDialog {
+	background: var(--license-modal_background);
+	padding: 0;
+	border-radius: var(--license-modal_corner-radius);
+	max-width: var(--license-modal_max-width);
+	width: calc(100% - var(--site-spacing) * 2);
+	border: none;
+
+	display: flex;
+	flex-direction: column;
+	overflow: clip;
+
+	.form {
+		padding: 0 var(--license-modal_padding-horizontal)
+			var(--license-modal_padding-bottom);
+
+		overflow-y: auto;
+		overscroll-behavior: contain;
+	}
+
+	.titleContainer {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: var(--license-modal_button-gap);
+
+		padding: var(--license-modal_header_padding-vertical)
+			calc(
+				var(--license-modal_header_padding-horizontal) -
+					var(--license-modal_padding-horizontal)
+			);
+	}
+
+	.title {
+		color: var(--foreground_emphasis-high);
+		margin: 0;
+	}
+
+	.body {
+		color: var(--foreground_emphasis-high);
+		position: relative;
+	}
+
+	.iconLarge {
+		position: absolute;
+		max-width: var(--license-modal_icon-size);
+		height: var(--license-modal_icon-size);
+		filter: var(--shadow_sticker_drop_shadow);
+	}
+
+	:global(.post-body) {
+		display: grid;
+		grid-template-columns: calc(var(--license-modal_icon-size) + var(--license-modal_icon-gap)) 1fr;
+		grid-template-rows: minmax(var(--license-modal_icon-size), auto) repeat(10, auto);
+		align-items: center;
+
+		&> *:first-child {
+			grid-column: 2;
+			margin: var(--spc-2x) 0;
+		}
+
+		&> *:not(:first-child) {
+			grid-column: 1 / span 2;
+			margin-bottom: 0;
+		}
+	}
+}
+
+.licenseDialog::backdrop {
+	background-color: var(--foreground_disabled);
+}

src/views/about/license.tsx

@@ -0,0 +1,104 @@
+import style from "./license.module.scss";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { LargeIconOnlyButton } from "components/index";
+import close from "src/icons/close.svg?raw";
+import { createPortal } from "preact/compat";
+
+interface LicenseProps {
+	name: string;
+	explainerHtml: string;
+	action: string;
+	actionLabel: string;
+	image: string;
+}
+
+export function License(props: LicenseProps) {
+	const [isOpen, setOpen] = useState(false);
+
+	const handleOpen = (e: Event) => {
+		e.stopPropagation();
+		setOpen(true);
+	};
+
+	const handleClose = () => {
+		setOpen(false);
+	};
+
+	return (
+		<div class={style.license} onClick={handleOpen}>
+			<img aria-hidden="true" class={style.icon} width="24" height="24" src={props.image} loading="lazy" />
+			<div class={`text-style-button-regular ${style.info}`}>
+				<span>{props.name}</span>
+				<button
+					class={style.viewButton}
+					onClick={handleOpen}
+					aria-label={props.actionLabel}
+				>
+					{props.action}
+				</button>
+			</div>
+			{
+				isOpen ?
+					createPortal(
+						<LicenseDialog
+							image={props.image}
+							name={props.name}
+							explainerHtml={props.explainerHtml}
+							onClose={handleClose}
+						/>,
+						document.body,
+					)
+					: <></>
+			}
+		</div>
+	);
+}
+
+interface LicenseDialogProps {
+	image: string;
+	name: string;
+	explainerHtml: string;
+	onClose: () => void;
+}
+
+export function LicenseDialog({
+	image,
+	name,
+	explainerHtml,
+	onClose,
+}: LicenseDialogProps) {
+	const dialogRef = useRef<HTMLDialogElement>(null);
+
+	useEffect(() => {
+		dialogRef.current?.showModal();
+	}, [dialogRef.current]);
+
+	const handleClick = (e: Event) => {
+		if (e.target === dialogRef.current)
+			onClose();
+	};
+
+	return (
+		<dialog onClose={onClose} onClick={handleClick} class={style.licenseDialog} ref={dialogRef}>
+			<form method="dialog" class={style.form}>
+				<div class={style.titleContainer}>
+					<LargeIconOnlyButton
+						tag="button"
+						class={style.closeButton}
+						aria-label="Close"
+					>
+						<span style="display: flex;" dangerouslySetInnerHTML={{ __html: close }} />
+					</LargeIconOnlyButton>
+					<h1 class={`text-style-headline-4 ${style.title}`}>{name}</h1>
+				</div>
+				<div class={`text-style-body-large ${style.body}`}>
+					<img class={style.iconLarge} width="96" height="96" src={image} loading="lazy" />
+					<div
+						class="post-body"
+						dangerouslySetInnerHTML={{ __html: explainerHtml }}
+					/>
+				</div>
+			</form>
+		</dialog>
+	);
+}

src/views/about/translations-header/about-us-translations-header.astro

@@ -1,26 +0,0 @@
----
-import styles from "./about-us-translations-header.module.scss";
-import { Languages } from "types/index";
-import { languages } from "constants/index";
-
-interface TranslationsHeaderProps {
-	locales: Languages[];
-}
-
-const { locales } = Astro.props as TranslationsHeaderProps;
----
-
-<div class={styles.translationContainer}>
-	Translated by our community into:{" "}
-	{
-		locales.map((currLang, i, arr) => {
-			const href = currLang === "en" ? "/about/" : `/${currLang}/about/`;
-			return (
-				<>
-					<a href={href}>{languages[currLang]}</a>
-					{i !== arr.length - 1 ? <span>, </span> : null}
-				</>
-			);
-		})
-	}
-</div>

src/views/about/translations-header/about-us-translations-header.module.scss

@@ -1,8 +0,0 @@
-.translationContainer {
-	font-weight: bold;
-	border: var(--cardOutlineStyle);
-	border-radius: var(--cardRadius);
-	padding: 0.75rem;
-	background: var(--cardActiveBackground);
-	margin: 1rem 0;
-}

src/views/search/components/search-hero.tsx

@@ -1,8 +1,10 @@
 import { JSXNode } from "components/types";
 import styles from "./search-hero.module.scss";
-import { getStickers } from "utils/get-stickers";
+import tags from "../../../../content/data/tags.json";
 
-const stickers = getStickers().sort(() => 0.5 - Math.random());
+const stickers = Object.values(tags)
+	.filter(tag => !!tag["shownWithBranding"] && !!tag["image"])
+	.sort(() => 0.5 - Math.random()) as { image: string }[];
 
 const stickerTransforms = [
 	styles.sticker1,
@@ -40,7 +42,7 @@ export const SearchHero = ({
 		<div class={styles.container}>
 			{
 				stickerTransforms.map((sticker) => (
-					<img aria-hidden="true" src={sticker.src} class={sticker.className} alt="" />
+					<img aria-hidden="true" src={sticker.image} class={sticker.className} alt="" />
 				))
 			}
 

src/views/unicorn/unicorn-page.astro

@@ -6,7 +6,6 @@ import { ExtendedPostInfo } from "types/index";
 import { UnicornInfo } from "types/UnicornInfo";
 import { getUnicornProfilePicMap } from "utils/get-unicorn-profile-pic-map";
 import { achievements } from "../../../content/data/achievements";
-import { translate } from "../../utils";
 import { Button } from "../../components";
 import styles from "./unicorn-page.module.scss";
 import AchievementCard from "./components/achievement-card.astro";