Standardize all playground pages to consistent interactive format#70
Merged
Conversation
Convert from static code blocks to the standard interactive playground template with editable textareas, run/reset buttons, loading overlay, dark theme, and playground-runtime.js integration. All 6 code examples are self-contained with proper imports and console.log() output. The API reference section is kept as a non-interactive reference block. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
Convert all 8 example sections from static <pre><code> blocks to interactive <div class='playground-block'> with editable <textarea> elements. Adopt the standard playground template: dark theme with CSS variables, loading overlay, ▶ Run / ↺ Reset buttons, Ctrl+Enter support, and API reference section. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
Convert from static pre/code blocks with light theme to the proper interactive playground template matching value_counts.html: - Dark theme with CSS variables - Loading overlay with spinner - playground-block structure with textarea editors - Run/Reset buttons and Ctrl+Enter hint - API reference section - Footer with back link All 8 original example sections preserved with self-contained, runnable code blocks. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
Convert from static pre/code blocks to interactive playground-block structure with dark theme, CSS variables, editable textareas, Run/Reset buttons, loading overlay, and proper footer matching the value_counts.html template. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
Convert static <pre><code> blocks to interactive <textarea> editors with the standard playground template: dark theme CSS variables, loading overlay, playground-block structure with Run/Reset buttons, Ctrl+Enter hints, and API reference section. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
Convert from static <pre><code> blocks to interactive playground with: - Dark theme with CSS variables matching other playground pages - Loading overlay with spinner - 8 interactive playground-block sections with textarea editors - Run/Reset buttons and Ctrl+Enter support - Self-contained code blocks with proper imports - API reference section - Footer with project links Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
Convert from static pre/code blocks with light theme to the proper interactive playground template matching value_counts.html: - Dark theme with CSS variables - Loading overlay with spinner - playground-block structure with textarea editors - Run/Reset buttons and Ctrl+Enter hint - Self-contained code examples with console.log output - API reference section and footer Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
Convert from static pre/code blocks with light theme to the standard dark-themed interactive playground template with: - CSS variables and dark theme matching other playground pages - Loading overlay with spinner - playground-block structure with textarea editors - Run/Reset buttons and Ctrl+Enter hint per block - Self-contained code examples with proper imports - API reference section and footer Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
Convert from static <pre><code> blocks with light theme to the proper interactive playground format matching value_counts.html: - Dark theme with CSS variables - Loading overlay with spinner - Interactive playground-block with textarea editors - Run/Reset buttons per code block - playground-output and hint elements - API Reference section - Footer with navigation - Script loaded as ES module Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
Convert from static light-theme pre/code blocks to the standard dark-theme interactive playground template with: - CSS variables and dark theme matching other playground pages - Loading overlay with spinner - playground-block structure with textarea editors - Run/Reset buttons per code block - playground-runtime.js loaded as module - API reference section and footer Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
Convert all 6 code examples from static <pre><code> blocks to interactive <div class="playground-block"> with <textarea class="playground-editor"> elements. Adopts the standard playground template: dark theme with CSS variables, loading overlay, Run/Reset buttons, Ctrl+Enter hint, API reference section, and footer. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
Convert static pre/code blocks to interactive playground-block sections with textarea editors, run/reset buttons, and output panels. Add loading overlay, CSS variables, playground-runtime.js script tag, and footer matching the standard playground template (value_counts.html). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
Convert all static <pre><code> blocks to interactive playground-block structure with textarea editors, matching the standard playground template (CSS variables, loading overlay, playground-runtime.js). Removed inline <script> runtime, TypeScript-only syntax (as casts, type annotations), and made all 8 code blocks self-contained. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
Convert from old style.css/contenteditable structure to the standard
dark-theme template with CSS variables, loading overlay, playground-block
structure with textarea editors, Run/Reset buttons, and proper
import { ... } from 'tsb' statements in all code blocks.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
…ormat Convert from legacy style.css/contenteditable structure to the standard dark-theme playground format with CSS variables, loading overlay, playground-block/textarea structure, Run/Reset buttons, and proper import statements. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
…en pages to interactive format Agent-Logs-Url: https://github.com/githubnext/tsessebe/sessions/6e45fe33-bdb3-45cd-a0c8-647b5aa3a99f Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Fix inconsistencies in interactive playgrounds
Standardize all playground pages to consistent interactive format
Apr 8, 2026
mrjf
marked this pull request as ready for review
April 8, 2026 14:54
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Playground pages were a mix of working interactive editors, static
<pre><code>docs, broken script references (runtime.js, missingtype="module"), light themes, and externalstyle.cssthat doesn't exist. The index page had inconsistent "Interactive Playground" / "interactive tutorial" link text scattered in card descriptions.Changes
index.html— Feature card<h3>headers are now the links to playground pages; removed inline "Interactive Playground" / "interactive tutorial" text from<p>descriptionsseries.html,dataframe.html, etc.):.playground-block/.playground-editor/.playground-outputstructure<script type="module" src="playground-runtime.js"></script>(fixes pages that had<script src="runtime.js">, missingtype="module", or no script tag at all)import { ... } from "tsb"andconsole.log()outputPages fixed:
value_counts,cat_accessor,cum_ops,elem_ops,melt,multi_index,nlargest,pivot,rank,rolling,stack_unstack,ewm,datetime_accessor,csv,json,describe,string_accessor.