Initial development of Gleam playground

.github/workflows/deploy.yml

@@ -0,0 +1,46 @@
+name: deploy
+on:
+  push:
+    branches: ["main"]
+
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: erlef/setup-beam@v1
+        with:
+          otp-version: "26.0.2"
+          gleam-version: "1.1.0"
+          rebar3-version: "3"
+
+      - name: Download WASM version of Gleam compiler
+        run: ./bin/download-compiler
+      - name: Build site
+        run: gleam run
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: 'public'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/test.yml

@@ -11,13 +11,15 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - uses: erlef/setup-beam@v1
         with:
           otp-version: "26.0.2"
+          # Ensure you update the bin/download-compiler Gleam version to match this
           gleam-version: "1.1.0"
           rebar3-version: "3"
-          # elixir-version: "1.15.4"
+      - run: ./bin/download-compiler
       - run: gleam deps download
-      - run: gleam test
       - run: gleam format --check src test
+      - run: gleam test
+      - run: gleam run

.gitignore

@@ -2,3 +2,4 @@
 *.ez
 /build
 erl_crash.dump
+public/

README.md

@@ -1,25 +1,13 @@
-# playground
+# The Gleam Playground
 
-[![Package Version](https://img.shields.io/hexpm/v/playground)](https://hex.pm/packages/playground)
-[![Hex Docs](https://img.shields.io/badge/hex-docs-ffaff3)](https://hexdocs.pm/playground/)
+An interactive playground for the Gleam language.
 
 ```sh
-gleam add playground
-```
-```gleam
-import playground
-
-pub fn main() {
-  // TODO: An example of the project in use
-}
-```
+# Download a wasm version of the Gleam compiler
+./bin/download-compiler
 
-Further documentation can be found at <https://hexdocs.pm/playground>.
+# Build the site
+gleam run
 
-## Development
-
-```sh
-gleam run   # Run the project
-gleam test  # Run the tests
-gleam shell # Run an Erlang shell
+# It's now all the in `public/` directory
 ```

bin/download-compiler

@@ -0,0 +1,12 @@
+#!/bin/sh
+
+set -eu
+
+# Ensure you update the CI Gleam version to match this
+VERSION="v1.1.0"
+
+rm -fr wasm-compiler
+mkdir wasm-compiler
+cd wasm-compiler
+curl -L "https://github.com/gleam-lang/gleam/releases/download/$VERSION/gleam-$VERSION-browser.tar.gz" | tar xz
+cd ..

gleam.toml

@@ -1,5 +1,6 @@
 name = "playground"
 version = "1.0.0"
+target = "javascript"
 
 # Fill out these fields if you intend to generate HTML documentation or publish
 # your project to the Hex package manager.
@@ -14,6 +15,10 @@ version = "1.0.0"
 
 [dependencies]
 gleam_stdlib = ">= 0.34.0 and < 2.0.0"
+simplifile = "~> 1.0"
+snag = "~> 0.2"
+htmb = "~> 1.1"
+filepath = "~> 0.1"
 
 [dev-dependencies]
 gleeunit = ">= 1.0.0 and < 2.0.0"

manifest.toml

@@ -0,0 +1,19 @@
+# This file was generated by Gleam
+# You typically do not need to edit this file
+
+packages = [
+  { name = "filepath", version = "0.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "filepath", source = "hex", outer_checksum = "FC1B1B29438A5BA6C990F8047A011430BEC0C5BA638BFAA62718C4EAEFE00435" },
+  { name = "gleam_stdlib", version = "0.36.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "C0D14D807FEC6F8A08A7C9EF8DFDE6AE5C10E40E21325B2B29365965D82EB3D4" },
+  { name = "gleeunit", version = "1.1.2", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "72CDC3D3F719478F26C4E2C5FED3E657AC81EC14A47D2D2DEBB8693CA3220C3B" },
+  { name = "htmb", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "htmb", source = "hex", outer_checksum = "30D448F0E15DFCF7283AAAC2F351D77B9D54E318219C9FDDB1877572B67C27B7" },
+  { name = "simplifile", version = "1.5.1", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "simplifile", source = "hex", outer_checksum = "C44DB387524F90DC42142699C78C850003289D32C7C99C7D32873792A299CDF7" },
+  { name = "snag", version = "0.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "snag", source = "hex", outer_checksum = "54D32E16E33655346AA3E66CBA7E191DE0A8793D2C05284E3EFB90AD2CE92BCC" },
+]
+
+[requirements]
+filepath = { version = "~> 0.1" }
+gleam_stdlib = { version = ">= 0.34.0 and < 2.0.0" }
+gleeunit = { version = ">= 1.0.0 and < 2.0.0" }
+htmb = { version = "~> 1.1" }
+simplifile = { version = "~> 1.0" }
+snag = { version = "~> 0.2" }

src/pages/en.html

@@ -0,0 +1,53 @@
+<article id="playground-container">
+  <section id="playground">
+    <div id="playground-header">
+      <input
+        id="title-input"
+        type="text"
+        name="title"
+        value="A Gleam Playground project"
+      >
+      <button id="share-button" type="share">Share</button>
+    </div>
+
+    <div id="playground-content">
+      <section id="editor">
+        <div id="editor-target"></div>
+      </section>
+
+      <div id="output-container">
+        <div id="tabs">
+          <label class="tab">
+            <p>Output</p>
+            <input
+              id="output-radio"
+              type="radio"
+              name="output-display"
+              value="output"
+              hidden
+              checked
+            >
+          </label>
+          <!-- TODO: enable Erlang when stdlib is precompiled -->
+          <!-- <label class="tab"> -->
+          <!--   <p>Compiled Erlang</p> -->
+          <!--   <input type="radio" name="output-display" value="erlang" hidden> -->
+          <!-- </label> -->
+          <label class="tab">
+            <p>Compiled JavaScript</p>
+            <input
+              id="compiled-javascript-radio"
+              type="radio"
+              name="output-display"
+              value="javascript"
+              hidden
+            >
+          </label>
+        </div>
+
+        <aside id="output" class="output"></aside>
+        <aside id="compiled-javascript" class="output language-javascript"></aside>
+      </div>
+    </div>
+  </section>
+</article>