diff --git a/crates/cli/src/playground.html b/crates/cli/src/playground.html index ecf7efc4..a52815ac 100644 --- a/crates/cli/src/playground.html +++ b/crates/cli/src/playground.html @@ -84,7 +84,8 @@ gap: 8px; } - .language-name { + .language-name, + #language-version { font-weight: 600; } @@ -151,6 +152,9 @@ font-size: 14px; border-bottom: 1px solid var(--border-color); background-color: var(--panel-bg); + display: flex; + align-items: center; + gap: 8px; } .CodeMirror { @@ -275,6 +279,29 @@ text-decoration: underline; } + #copy-button { + background: none; + border: 1px solid var(--border-color); + border-radius: 4px; + padding: 6px; + cursor: pointer; + color: var(--text-color); + display: inline-flex; + align-items: center; + justify-content: center; + margin-left: 8px; + } + + #copy-button:hover { + background-color: var(--primary-color-alpha); + } + + #copy-button:focus { + outline: none; + border-color: var(--primary-color); + box-shadow: 0 0 0 2px var(--primary-color-alpha); + } + /* Dark Theme Node Colors */ [data-theme="dark"] { & #output-container a { @@ -324,6 +351,7 @@
Language: THE_LANGUAGE_NAME +
diff --git a/docs/src/7-playground.md b/docs/src/7-playground.md index 1d728e98..c0e5d736 100644 --- a/docs/src/7-playground.md +++ b/docs/src/7-playground.md @@ -7,47 +7,52 @@

Code

-
- -
-
Bash
-
C
-
C++
-
C#
-
Go
-
HTML
-
Java
-
JavaScript
-
PHP
-
Python
-
Ruby
-
Rust
-
TOML
-
TypeScript
-
YAML
+
+
+ +
+
Bash
+
C
+
C++
+
C#
+
Go
+
HTML
+
Java
+
JavaScript
+
PHP
+
Python
+
Ruby
+
Rust
+
TOML
+
TypeScript
+
YAML
+
+ +
+ +
-
diff --git a/docs/src/assets/css/playground.css b/docs/src/assets/css/playground.css index 45236937..48228490 100644 --- a/docs/src/assets/css/playground.css +++ b/docs/src/assets/css/playground.css @@ -54,6 +54,23 @@ display: inline-block; } +.language-container { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 16px; +} + +#language-version { + color: var(--light-text); + font-size: 14px; + font-weight: 500; + padding: 4px 8px; + background: var(--light-bg); + border-radius: 4px; + border: 1px solid var(--light-border); +} + #language-select { background-color: var(--light-bg); border: 1px solid var(--light-border); @@ -264,6 +281,7 @@ input[type="checkbox"]:focus { .coal, .navy { + & #language-version, & #language-select, & .select-button { background-color: var(--dark-bg); diff --git a/docs/src/assets/js/playground.js b/docs/src/assets/js/playground.js index 7c4e7bd2..3a8904cc 100644 --- a/docs/src/assets/js/playground.js +++ b/docs/src/assets/js/playground.js @@ -106,6 +106,7 @@ window.initializePlayground = async (opts) => { const codeInput = document.getElementById("code-input"); const languageSelect = document.getElementById("language-select"); + const languageVersion = document.getElementById('language-version'); const loggingCheckbox = document.getElementById("logging-checkbox"); const anonymousNodes = document.getElementById('anonymous-nodes-checkbox'); const outputContainer = document.getElementById("output-container"); @@ -205,6 +206,15 @@ window.initializePlayground = async (opts) => { tree = null; languageName = newLanguageName; + + const metadata = languagesByName[languageName].metadata; + if (metadata) { + languageVersion.textContent = `v${metadata.major_version}.${metadata.minor_version}.${metadata.patch_version}`; + languageVersion.style.visibility = 'visible'; + } else { + languageVersion.style.visibility = 'hidden'; + } + parser.setLanguage(languagesByName[newLanguageName]); handleCodeChange(); handleQueryChange();