automatically switch to linux/mac if detected

astro.config.mjs

@@ -6,6 +6,7 @@ import starlightUtils from "@lorenzo_lewis/starlight-utils";
 import wasm from "vite-plugin-wasm";
 
 import shikiConfig from "./src/utils/shiki";
+import remarkVersionBadges from "./src/remark-plugins/version-badges";
 
 const playgroundSidebarEntry = {
     label: 'Playground',
@@ -28,9 +29,9 @@ export default defineConfig({
 			},
 			favicon: '/favicon.ico',
 			description: 'A simple and powerful scripting language for Minecraft datapacks.',
-			social: {
-				email: 'mailto:shulkerscript@hoelting.dev',
-			},
+			social: [
+				{ icon: 'email', label: 'E-Mail', href: 'mailto:shulkerscript@hoelting.dev' },
+			],
 			tableOfContents: { minHeadingLevel: 1, maxHeadingLevel: 3 },
 			defaultLocale: 'root',
 			locales: {
@@ -67,6 +68,9 @@ export default defineConfig({
                 Pagination: "./src/components/override/Pagination.astro",
 				SocialIcons: './src/components/override/SocialIcons.astro',
 			},
+			customCss: [
+				'./src/remark-plugins/version-badges.css',
+			],
 			sidebar: [
                 {
                     label: "leadingNavLinks",
@@ -131,5 +135,10 @@ export default defineConfig({
         plugins: [
             wasm(),
         ],
-    }
+    },
+	markdown: {
+		remarkPlugins: [
+			remarkVersionBadges,
+		],
+	},
 });

package.json

@@ -11,32 +11,36 @@
         "astro": "astro"
     },
     "dependencies": {
-        "@astrojs/check": "^0.9.3",
-        "@astrojs/react": "^3.6.0",
-        "@astrojs/starlight": "^0.28.2",
-        "@emotion/react": "^11.11.4",
-        "@emotion/styled": "^11.11.5",
-        "@lorenzo_lewis/starlight-utils": "^0.1.1",
-        "@monaco-editor/react": "^4.6.0",
-        "@mui/icons-material": "^6.1.1",
-        "@mui/material": "^6.1.1",
-        "@shikijs/monaco": "^1.7.0",
-        "@types/react": "^18.3.3",
-        "@types/react-dom": "^18.3.0",
-        "astro": "^4.15.9",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "react-icons": "^5.2.1",
-        "sharp": "^0.33.5",
-        "shiki": "^1.7.0",
-        "starlight-links-validator": "^0.12.1",
-        "tm-themes": "^1.4.3",
-        "typescript": "^5.4.5",
-        "use-immer": "^0.10.0",
-        "vite-plugin-wasm": "^3.3.0"
+        "@astrojs/check": "^0.9.4",
+        "@astrojs/react": "^4.3.0",
+        "@astrojs/starlight": "^0.35.2",
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.1",
+        "@lorenzo_lewis/starlight-utils": "^0.3.2",
+        "@monaco-editor/react": "^4.7.0",
+        "@mui/icons-material": "^7.3.0",
+        "@mui/material": "^7.3.0",
+        "@shikijs/monaco": "^3.9.2",
+        "@types/mdast": "^4.0.4",
+        "@types/react": "^19.1.9",
+        "@types/react-dom": "^19.1.7",
+        "@types/unist": "^3.0.3",
+        "astro": "^5.12.8",
+        "react": "^19.1.1",
+        "react-dom": "^19.1.1",
+        "react-icons": "^5.5.0",
+        "sharp": "^0.34.3",
+        "shiki": "^3.9.2",
+        "starlight-links-validator": "^0.17.0",
+        "tm-themes": "^1.10.7",
+        "typescript": "^5.9.2",
+        "unified": "^11.0.5",
+        "unist-util-visit": "^5.0.0",
+        "use-immer": "^0.11.0",
+        "vite-plugin-wasm": "^3.5.0"
     },
     "devDependencies": {
-        "sass": "^1.77.6"
+        "sass": "^1.90.0"
     },
     "packageManager": "pnpm@9.7.0"
 }

src/components/OsTabSwitcher.astro

@@ -0,0 +1,31 @@
+<script defer>
+    const isLinux = /Linux/.test(window.navigator.platform) || ["Macintosh", "MacIntel", "MacPOC", "Mac68K"].indexOf(window.navigator.platform) !== -1;
+    if (isLinux) {
+        (async () => {
+            function waitForElements(selector) {
+                return new Promise(resolve => {
+                    if (document.querySelectorAll(selector).length > 0) {
+                        return resolve(document.querySelectorAll(selector));
+                    }
+
+                    const observer = new MutationObserver(mutations => {
+                        if (document.querySelector(selector)) {
+                            observer.disconnect();
+                            resolve(document.querySelectorAll(selector));
+                        }
+                    });
+
+                    observer.observe(document.body, {
+                        childList: true,
+                        subtree: true
+                    });
+                });
+            }
+            waitForElements("starlight-tabs a").then(() => {
+                setTimeout(() => {
+                    document.querySelectorAll("starlight-tabs a").values().filter(el => el.innerText === "Linux / macOS").forEach(el => el.click());
+                }, 1000);
+            });
+        })()
+    }
+</script>

src/components/Playground.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useMonaco, type Monaco } from "@monaco-editor/react";
 import { useImmer, type Updater } from "use-immer";
-import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import { ThemeProvider } from "@mui/material/styles";
 import ErrorDisplay from "./playground/ErrorDisplay";
 import FileView from "./playground/FileView";
 import Editor from "./playground/Editor";

src/components/playground/Editor.tsx

@@ -1,6 +1,6 @@
 import type { File } from "@utils/playground";
 import MonacoEditor, { useMonaco } from "@monaco-editor/react";
-import { getHighlighter, type Highlighter } from "shiki";
+import { createHighlighter, type Highlighter } from "shiki";
 import { shikiToMonaco } from "@shikijs/monaco";
 import { useEffect, useState } from "react";
 import darkPlus from "tm-themes/themes/dark-plus.json";
@@ -24,7 +24,7 @@ export default function Editor({
     useEffect(() => {
         if (monaco) {
             if (highlighter == null) {
-                getHighlighter({
+                createHighlighter({
                     themes: [darkPlus as any, lightPlus],
                     langs: ["toml", shulkerscriptGrammar, mcfunctionGrammar],
                 }).then((highlighter) => {

src/content/docs/guides/getting-started.mdx

@@ -3,10 +3,10 @@ title: Getting Started
 description: Get started with Shulkerscript
 ---
 import { Steps, FileTree, Tabs, TabItem } from '@astrojs/starlight/components';
+import OsTabSwitcher from '../../../components/OsTabSwitcher.astro';
 
 ## Installation
 
-
 To get started with Shulkerscript, you need to install the Shulkerscript CLI.
 You can either [download](#download-from-github) the latest release from the GitHub releases page or [build it from source](#building-from-source).
 
@@ -15,6 +15,7 @@ If you want to try out Shulkerscript without installing anything, you can use th
 :::
 
 ### Quickinstall script *(recommended)*
+<OsTabSwitcher />
 <Steps>
 1. <Tabs>
         <TabItem label="Windows" icon="seti:windows">

src/remark-plugins/version-badges.css

@@ -0,0 +1,55 @@
+.version-badges {
+    display: flex;
+    gap: 0.5rem;
+    margin: 0.5em 0 !important;
+    margin-bottom: 0 !important;
+    flex-wrap: wrap;
+}
+
+.version-badges + p {
+    margin-top: 0.5rem !important;
+}
+
+.version-badges span {
+    font-size: 0.75rem;
+    padding: 2px 6px;
+    border-radius: 4px;
+    white-space: nowrap;
+    border: 1px solid transparent;
+}
+
+html[data-theme='light'] .version-badges .since-badge {
+    background-color: #e0f7fa;
+    color: #00796b;
+    border-color: #b2ebf2;
+}
+
+html[data-theme='light'] .version-badges .changed-badge {
+    background-color: #fff8e1;
+    color: #795548;
+    border-color: #ffe082;
+}
+
+html[data-theme='light'] .version-badges .deprecated-badge {
+    background-color: #ffebee;
+    color: #b71c1c;
+    border-color: #ffcdd2;
+}
+
+html[data-theme='dark'] .version-badges .since-badge {
+    background-color: #004d40;
+    color: #b2dfdb;
+    border-color: #00695c;
+}
+
+html[data-theme='dark'] .version-badges .changed-badge {
+    background-color: #3e2723;
+    color: #ffe0b2;
+    border-color: #6d5037;
+}
+
+html[data-theme='dark'] .version-badges .deprecated-badge {
+    background-color: #4a0000;
+    color: #ffcdd2;
+    border-color: #b71c1c;
+}

src/remark-plugins/version-badges.ts

@@ -0,0 +1,64 @@
+import { visit } from 'unist-util-visit';
+import type { Plugin } from 'unified';
+import type { Parent } from 'unist';
+import type { Paragraph } from 'mdast';
+
+const INLINE_REGEX = /!(since|changed|deprecated)\[([^\]]+)\]/g;
+
+const remarkVersionBadges: Plugin = () => {
+    return (tree) => {
+        visit(tree, 'paragraph', (node, index, parent) => {
+            const paragraph = node as Paragraph;
+            const parentNode = parent as Parent;
+
+            if (!paragraph.children || paragraph.children.length !== 1) return;
+
+            const child = paragraph.children[0];
+            if(child.type !== 'text') return;
+
+            const value = child.value;
+
+            const matches = [...value.matchAll(INLINE_REGEX)];
+            if(matches.length === 0) return;
+
+            const isOnlyBadges = matches.reduce((allMatched, match) => {
+                return allMatched && match[0] === value.slice(match.index!, match.index! + match[0].length)
+            }, true);
+
+            if (!isOnlyBadges) return;
+
+            const badges: string[] = matches.map(([_, type, version]) => {
+                let label = '';
+                let className = '';
+                let title = '';
+                switch(type) {
+                    case 'since': 
+                        label = `Since v${version}`;
+                        className = 'since-badge';
+                        title = `This feature was added in v${version}`;
+                        break;
+                    case 'changed':
+                        label = `Changed in v${version}`;
+                        className = 'changed-badge';
+                        title = `This feature was changed in v${version}`;
+                        break;
+                    case 'deprecated':
+                        label = `Deprecated since v${version}`;
+                        className = 'deprecated-badge'
+                        title = `This feature is deprecated since v${version}`;
+                        break;
+                }
+                return `<span class="${className}" title="${title}">${label}</span>`;
+            });
+
+            const htmlNode = {
+                type: 'html',
+                value: `<div class="version-badges">${badges.join('')}</div>`,
+            } as const;
+
+            parentNode.children.splice(index!, 1, htmlNode);
+        });
+    }
+}
+
+export default remarkVersionBadges;