feat: add free code execution page

_includes/footer.njk

@@ -22,6 +22,9 @@
                 <li class="cs-nav-li">
                     <a class="cs-nav-link" href="/diff-editor/">Diff editor</a>
                 </li>
+                <li class="cs-nav-li">
+                    <a class="cs-nav-link" href="/code-execution/">Run your code</a>
+                </li>
             </ul>
             <ul class="mb-6">
                 <li class="cs-nav-li">

_includes/layouts/lesson.njk

@@ -11,6 +11,7 @@ layout: layouts/base.njk
     </button>
     <div class="py-6 px-4 bg-gray-50 dark:bg-zinc-900 min-h-screen">
         <div class="grid md:flex gap-4 md:justify-center">
+            {% if not hide_content %}
             <div class="md:flex-1 max-w-prose overflow-y-hidden">
                 <div class="mb-6 mx-auto bg-white dark:bg-zinc-950 p-4 {% if not code_editor %}max-w-prose{% endif %}">
                     <p class="text-gray-500 dark:text-slate-300 text-xs font-light mb-2">
@@ -48,6 +49,7 @@ layout: layouts/base.njk
                     </div>
                 </div>
             </div>
+            {% endif %}
             {% if code_editor %}
                 <div class="relative flex-1">
                     <div class="sticky top-4">

eleventy.config.js

@@ -54,7 +54,7 @@ module.exports = function (eleventyConfig) {
 	// https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets
 
 	// Watch content images for the image pipeline.
-	eleventyConfig.addWatchTarget("src/**/*.{svg,webp,png,jpeg,py}");
+	eleventyConfig.addWatchTarget("src/**/*.{svg,webp,png,jpeg,py,txt,sql,ts}");
 
 	// App plugins
 	eleventyConfig.addPlugin(pluginDrafts);

src/code-execution/files/index.js

@@ -0,0 +1 @@
+console.log("index");

src/code-execution/files/index.ts

@@ -0,0 +1 @@
+console.log("index.ts");

src/code-execution/files/main.py

@@ -0,0 +1 @@
+print("This is from main")

src/code-execution/index.md

@@ -0,0 +1,67 @@
+---
+lesson_name: Code execution
+layout: layouts/lesson.njk
+code_editor: true
+code_execution: true
+adding_file_allowed: true
+hide_content: true
+file_groups:
+  - common: true
+    id: 0
+    name: Common files
+    files:
+      - file_name: text.txt
+        file_type: plaintext
+        id: 423
+        is_closable: true
+        is_edit_focus: false
+        is_editable: true
+        is_hidden: false
+        is_main: false
+        is_test_file: false
+        source: content.txt
+  - common: false
+    files:
+      - file_name: main.py
+        file_type: python
+        id: 424
+        is_closable: false
+        is_edit_focus: true
+        is_editable: true
+        is_hidden: false
+        is_main: true
+        is_test_file: false
+        source: main.py
+    id: 1
+    name: Python
+  - common: false
+    files:
+      - file_name: index.js
+        file_type: javascript
+        id: 425
+        is_closable: false
+        is_edit_focus: true
+        is_editable: true
+        is_hidden: false
+        is_main: true
+        is_test_file: false
+        source: index.js
+    id: 2
+    name: Javascript
+  - common: false
+    files:
+      - file_name: index.ts
+        file_type: typescript
+        id: 426
+        is_closable: false
+        is_edit_focus: true
+        is_editable: true
+        is_hidden: false
+        is_main: true
+        is_test_file: false
+        source: index.ts
+    id: 4
+    name: TypeScript
+---
+
+This is a free code execution environment that allows you to run code in the browser. It's a great way to test code snippets and experiment with different programming languages.