Playground (#8)

* added ISL playground on railway app
* improved docs and styles
* added Run in Playground button

Author: corneliutusnea

.dockerignore

@@ -0,0 +1,63 @@
+# Git
+.git
+.gitignore
+.github
+
+# IDE
+.idea
+.vscode
+*.iml
+*.swp
+*.swo
+
+# Build artifacts (we'll rebuild inside Docker)
+**/build/
+**/dist/
+**/node_modules/
+**/target/
+
+# Keep only what's needed for playground
+!playground/
+
+# Documentation (not needed for runtime)
+docs/
+*.md
+!playground/**/*.md
+
+# Test files
+**/test/
+**/*test*/
+**/*.test.*
+
+# CI/CD
+.github/
+codecov.yml
+
+# Other modules (not needed for playground)
+isl-cmd/
+isl-validation/
+plugin/
+
+# Keep isl-transform as it's needed
+!isl-transform/
+
+# Gradle cache
+.gradle/
+**/build/
+
+# Logs
+*.log
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Frontend dev files
+playground/frontend/.env
+playground/frontend/.env.*
+playground/frontend/coverage/
+
+# Backend dev files
+playground/backend/.env
+playground/backend/logs/
+

Dockerfile

@@ -0,0 +1,56 @@
+# Build stage
+FROM eclipse-temurin:21-jdk AS build
+
+# Install Node.js for frontend build
+RUN apt-get update && \
+    apt-get install -y curl && \
+    curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \
+    apt-get install -y nodejs && \
+    rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Copy the playground directory
+COPY playground playground
+
+# Copy gradle wrapper and build files from root
+COPY gradlew .
+COPY gradlew.bat .
+COPY gradle gradle
+COPY settings.gradle.kts .
+COPY build.gradle.kts .
+COPY gradle.properties .
+
+# Copy ISL transform library (needed for backend build)
+COPY isl-transform isl-transform
+
+# Build frontend
+WORKDIR /app/playground/frontend
+RUN if [ -f "package.json" ]; then \
+      echo "Building frontend..."; \
+      npm install && npm run build && \
+      mkdir -p ../backend/src/main/resources/static && \
+      cp -r dist/* ../backend/src/main/resources/static/ && \
+      echo "Frontend built successfully"; \
+    else \
+      echo "No frontend package.json found, skipping frontend build"; \
+    fi
+
+# Build backend
+WORKDIR /app/playground/backend
+RUN chmod +x ../../gradlew && ../../gradlew clean build -x test --no-daemon
+
+# Runtime stage - Use Java 21 JRE
+FROM eclipse-temurin:21-jre
+
+WORKDIR /app
+
+# Copy the built JAR
+COPY --from=build /app/playground/backend/build/libs/isl-playground-1.0.0.jar /app/app.jar
+
+# Expose port
+EXPOSE 8080
+
+# Run with Java 21
+CMD ["java", "-jar", "/app/app.jar"]
+

docs/_data/navigation.yml

@@ -88,6 +88,8 @@ docs:
         url: /dev/release
       - title: "Contributing"
         url: /dev/contributing
+      - title: "Playground Integration"
+        url: /dev/playground-integration
 
   - title: More
     children:

docs/_includes/footer/custom.html

@@ -10,6 +10,10 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script>
 <!-- Load custom ISL language definition -->
 <script src="{{ '/assets/js/prism-isl.js' | relative_url }}"></script>
+<!-- Load copy code button script -->
+<script src="{{ '/assets/js/copy-code-button.js' | relative_url }}"></script>
+<!-- Load playground auto-buttons script -->
+<script src="{{ '/assets/js/playground-auto-buttons.js' | relative_url }}"></script>
 
 <!-- Load Lunr.js library if not already loaded by theme -->
 <script>

docs/_includes/head/custom.html

@@ -25,6 +25,11 @@
 <meta property="og:image:width" content="600" />
 <meta property="og:image:height" content="315" />
 
+<!-- Favicon -->
+<link rel="icon" type="image/svg+xml" href="{{ '/img/favicon.svg' | relative_url }}" />
+<link rel="alternate icon" href="{{ '/img/isl_small.png' | relative_url }}" />
+<link rel="apple-touch-icon" href="{{ '/img/isl_small.png' | relative_url }}" />
+
 <!-- Prism.js for syntax highlighting with VS Code Dark+ theme -->
 <link rel="stylesheet" href="https://unpkg.com/prism-themes/themes/prism-vsc-dark-plus.css" />
 

docs/assets/css/main.scss

@@ -68,16 +68,39 @@ span.comment::after {
   display: inline !important;
   margin: 0 !important;
   padding: 0 !important;
+  text-decoration: none !important; /* Remove underline from comments */
+  border-bottom: 0;
+}
+
+/* Remove underline from all comment-related classes */
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata,
+code .c,
+code .c1,
+code .cm,
+span.comment {
+  text-decoration: none !important;
+  border-bottom: 0;
 }
 
 /* Ensure ISL syntax highlighting looks clean */
 code[class*="language-"],
 pre[class*="language-"] {
   .token.comment {
     line-height: inherit;
+    text-decoration: none !important;
+    border-bottom: 0;
   }
 }
 
+/* Override Prism colors - change from #db4c69 to #9cdcfe */
+code.highlighter-rouge.languange-plaintext,
+body :not(pre) > code[class*="language-"] {
+  color: #9cdcfe !important;
+}
+
 /* Increase main content area width */
 #main {
   @include breakpoint($large) {
@@ -131,3 +154,100 @@ pre[class*="language-"] {
 }
 
 
+/* Playground Button Styles - Overlay on code blocks */
+.btn-playground {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  display: inline-block;
+  padding: 6px 12px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white !important;
+  text-decoration: none !important;
+  border-radius: 4px;
+  font-weight: 600;
+  font-size: 1em;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  border: none;
+  cursor: pointer;
+  opacity: 0.9;
+  
+  &:hover {
+    opacity: 1;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.5);
+    text-decoration: none !important;
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+/* Copy Button Styles - Overlay on code blocks */
+.btn-copy {
+  position: absolute;
+  bottom: 10px;
+  right: 8px;
+  z-index: 10;
+  display: inline-block;
+  padding: 4px 10px;
+  background: #3c3c3c;
+  color: #cccccc !important;
+  text-decoration: none !important;
+  border-radius: 4px;
+  font-weight: 600;
+  font-size: 0.75em;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  border: 1px solid #555;
+  cursor: pointer;
+  opacity: 0.7;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
+  
+  &:hover {
+    opacity: 1;
+    background: #4c4c4c;
+    border-color: #777;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+  
+  &.copied {
+    background: #22c55e;
+    border-color: #22c55e;
+    color: white !important;
+  }
+  
+  &.error {
+    background: #ef4444;
+    border-color: #ef4444;
+    color: white !important;
+  }
+}
+
+/* Ensure pre blocks have relative positioning for absolute button */
+pre {
+  position: relative;
+  
+  /* Add padding to top-right to prevent code from hiding behind button */
+  &:has(.btn-playground) {
+    padding-top: 2.5em !important;
+  }
+  
+  &:has(.btn-copy):not(:has(.btn-playground)) {
+    padding-top: 2.5em !important;
+  }
+}
+
+/* Remove old container styles - no longer needed */
+.playground-button-container {
+  display: none;
+}
+