traxys/tree-sitter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs(playground): add version information in playground

Browse source 
Co-authored-by: Will Lillis <will.lillis24@gmail.com>
This commit is contained in:
Amaan Qureshi 2025-09-09 01:41:18 -04:00 • committed by Amaan Qureshi
parent 40a8678989
commit 907c7bc80b
4 changed files with 102 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

30
crates/cli/src/playground.html
View file

@ -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 @@
<header>
<div class="header-item">
<span class="language-name">Language: THE_LANGUAGE_NAME</span>
<span id="language-version"></span>
</div>
<div class="header-item">

85
docs/src/7-playground.md
View file

@ -7,47 +7,52 @@
<h2>Code</h2>
<div class="custom-select">
<button id="language-button" class="select-button">
<span class="selected-value">JavaScript</span>
<svg class="arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<div class="select-dropdown">
<div class="option" data-value="bash">Bash</div>
<div class="option" data-value="c">C</div>
<div class="option" data-value="cpp">C++</div>
<div class="option" data-value="c_sharp">C#</div>
<div class="option" data-value="go">Go</div>
<div class="option" data-value="html">HTML</div>
<div class="option" data-value="java">Java</div>
<div class="option" data-value="javascript">JavaScript</div>
<div class="option" data-value="php">PHP</div>
<div class="option" data-value="python">Python</div>
<div class="option" data-value="ruby">Ruby</div>
<div class="option" data-value="rust">Rust</div>
<div class="option" data-value="toml">TOML</div>
<div class="option" data-value="typescript">TypeScript</div>
<div class="option" data-value="yaml">YAML</div>
<div class="language-container">
<div class="custom-select">
<button id="language-button" class="select-button">
<span class="selected-value">JavaScript</span>
<svg class="arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<div class="select-dropdown">
<div class="option" data-value="bash">Bash</div>
<div class="option" data-value="c">C</div>
<div class="option" data-value="cpp">C++</div>
<div class="option" data-value="c_sharp">C#</div>
<div class="option" data-value="go">Go</div>
<div class="option" data-value="html">HTML</div>
<div class="option" data-value="java">Java</div>
<div class="option" data-value="javascript">JavaScript</div>
<div class="option" data-value="php">PHP</div>
<div class="option" data-value="python">Python</div>
<div class="option" data-value="ruby">Ruby</div>
<div class="option" data-value="rust">Rust</div>
<div class="option" data-value="toml">TOML</div>
<div class="option" data-value="typescript">TypeScript</div>
<div class="option" data-value="yaml">YAML</div>
</div>
<select id="language-select" style="display: none;">
<option value="bash">Bash</option>
<option value="c">C</option>
<option value="cpp">C++</option>
<option value="c_sharp">C#</option>
<option value="go">Go</option>
<option value="html">HTML</option>
<option value="java">Java</option>
<option value="javascript" selected="selected">JavaScript</option>
<option value="php">PHP</option>
<option value="python">Python</option>
<option value="ruby">Ruby</option>
<option value="rust">Rust</option>
<option value="toml">TOML</option>
<option value="typescript">TypeScript</option>
<option value="yaml">YAML</option>
</select>
</div>
<div id="language-version">
</div>
<select id="language-select" style="display: none;">
<option value="bash">Bash</option>
<option value="c">C</option>
<option value="cpp">C++</option>
<option value="c_sharp">C#</option>
<option value="go">Go</option>
<option value="html">HTML</option>
<option value="java">Java</option>
<option value="javascript" selected="selected">JavaScript</option>
<option value="php">PHP</option>
<option value="python">Python</option>
<option value="ruby">Ruby</option>
<option value="rust">Rust</option>
<option value="toml">TOML</option>
<option value="typescript">TypeScript</option>
<option value="yaml">YAML</option>
</select>
</div>
<input id="logging-checkbox" type="checkbox"></input>

18
docs/src/assets/css/playground.css
View file

@ -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);

10
docs/src/assets/js/playground.js
View file

@ -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();