feat: contextual social icons

Author: zlataovce

CONTRIBUTING.md

@@ -128,11 +128,13 @@ There are quite a few constants you may want to use in your pages, such as the l
 These constants can be imported and used in MDX, like so:
 
 ```mdxjs
-import { LATEST_MC_RELEASE, LATEST_PAPER_RELEASE, LATEST_VELOCITY_RELEASE } from "/src/utils/versions";
+import { LATEST_MC_RELEASE, LATEST_PAPER_RELEASE, LATEST_VELOCITY_RELEASE, LATEST_FOLIA_RELEASE, LATEST_WATERFALL_RELEASE } from "/src/utils/versions";
 
 Latest Paper version is {LATEST_PAPER_RELEASE}.
 Latest Velocity version is {LATEST_VELOCITY_RELEASE}.
 Latest Minecraft version is {LATEST_MC_RELEASE}.
+Latest Folia version is {LATEST_FOLIA_RELEASE}.
+Latest Waterfall version is {LATEST_WATERFALL_RELEASE}.
 ```
 
 If you want to perform these replacements in code blocks, you need to use a special `replace` meta property.

astro.config.ts

@@ -41,6 +41,7 @@ export default defineConfig({
         Banner: "./src/components/overrides/Banner.astro",
         TableOfContents: "./src/components/overrides/TableOfContents.astro",
         MobileTableOfContents: "./src/components/overrides/MobileTableOfContents.astro",
+        SocialIcons: "./src/components/overrides/SocialIcons.astro",
       },
       plugins: [
         starlightLinksValidator({

src/components/overrides/SocialIcons.astro

@@ -0,0 +1,52 @@
+---
+import config from "virtual:starlight/user-config";
+import { Icon } from "@astrojs/starlight/components";
+import { LATEST_RELEASES } from "../../utils/versions";
+
+const { isPageWithTopic, topics } = Astro.locals.starlightSidebarTopics;
+const currentTopic = isPageWithTopic ? topics.find((t) => t.isCurrent) : null;
+
+const links = (config.social || []).map((link) => {
+  const project = currentTopic?.label?.toLowerCase();
+  if (!project) {
+    return link;
+  }
+
+  const version = LATEST_RELEASES[project];
+  if (!version) {
+    return link;
+  }
+
+  switch (link.label) {
+    case "Javadoc":
+      return { ...link, href: `${link.href}/${project}/${version}` };
+    case "GitHub":
+      return { ...link, href: `${link.href}/${project}` };
+  }
+  return link;
+});
+---
+
+{
+  links.length > 0 && (
+    <>
+      {links.map(({ label, href, icon }) => (
+        <a {href} rel="me" class="sl-flex">
+          <span class="sr-only">{label}</span>
+          <Icon name={icon} />
+        </a>
+      ))}
+    </>
+  )
+}
+
+<style>
+  a {
+    color: var(--sl-color-text-accent);
+    padding: 0.5em;
+    margin: -0.5em;
+  }
+  a:hover {
+    opacity: 0.66;
+  }
+</style>

src/utils/versions.ts

@@ -35,3 +35,18 @@ export const LATEST_PAPER_RELEASE = paperProject.versions[paperProject.versions.
 const velocityProject: Project = await fetch("https://api.papermc.io/v2/projects/velocity").then((r) => r.json());
 
 export const LATEST_VELOCITY_RELEASE = velocityProject.versions[velocityProject.versions.length - 1];
+
+const foliaProject: Project = await fetch("https://api.papermc.io/v2/projects/folia").then((r) => r.json());
+
+export const LATEST_FOLIA_RELEASE = foliaProject.versions[foliaProject.versions.length - 1];
+
+const waterfallProject: Project = await fetch("https://api.papermc.io/v2/projects/waterfall").then((r) => r.json());
+
+export const LATEST_WATERFALL_RELEASE = waterfallProject.versions[waterfallProject.versions.length - 1];
+
+export const LATEST_RELEASES: Record<string, string> = {
+  paper: LATEST_PAPER_RELEASE,
+  velocity: LATEST_VELOCITY_RELEASE,
+  folia: LATEST_FOLIA_RELEASE,
+  waterfall: LATEST_WATERFALL_RELEASE,
+};