tech playground: headless embedding sneak peak

A sneak peek at headless embedding in tech playground. Below are some examples with NGINX, Caddy, Static Web Server and Jinja, though this already works with all playgrounds available on the site.

As a principal this is fully compatible with any kind of CMS or SSG, as you simply have to wrap code blocks in a custom element: <headless-tech-playground playground="desired-playground"></headless-tech-playground>
The code blocks also stay visible if tech playground is temporarily unavailable.

There is also some configuration options already:

version: let's you select a specific version, defaults to the latest available
controls: placement of the controls element (top|bottom), defaults to bottom
output: placement of the output element (top|bottom), defaults to bottom
show-file-names: render nice file names on the code blocks (true|false), defaults to true

Things I'm still actively working on:

Loading states
Optional CSS to make the element look good in standard use cases (The work in progress is used on this page)
Loading one (or both) files from either a element by ID or a URL, so you don't have to copy and paste the code multiple times for slight variations

If you have any feedback or suggestions I'm happy to hear about it!
PS: Feel free to share privately with others that are interested.

NGINX Example

playground="nginx"
version="stable"
controls="top"
output="bottom"

                
worker_processes  1;
worker_rlimit_nofile 8192;

events {
  worker_connections  4096;
}

http {
  include    /etc/nginx/mime.types;
  index    index.html index.htm index.php;

  server {
    listen          80;
    server_name     basic;
    access_log      /dev/stdout;

    location / {
      proxy_pass      http://httpbin.org;
    }
    location /deny {
        deny all;
    }
  }
}

                
curl http://127.0.0.1/headers
curl http://127.0.0.1/deny

Caddy Example

playground="caddy"

                
:80 {
    respond /deny* "Permission denied" 403
    reverse_proxy httpbin.org:80
}

                
curl http://127.0.0.1/headers
curl http://127.0.0.1/deny

Static Web Server Example

playground="static-web-server"

                
[general]

root = "/var/www/html"

directory-listing = true
directory-listing-format = "json"

                
curl http://127.0.0.1/ | jq

Jinja Example

playground="jinja"

                
{%- if greet_user and username -%}
Hello {{ username }}!
{% endif -%}
Here is a list of your things:
{% for thing in things %}
- {{ thing }}
{%- endfor %}

                
username: Marco
greet_user: True
things:
  - one
  - two
  - three

Jinja Example 2

playground="jinja"
show-file-names="false"

Some custom text along my code block, for example this is my template:

                
{%- if greet_user and username -%}
Hello {{ username }}!
{% endif -%}
Here is a list of your things:
{% for thing in things %}
- {{ thing }}
{%- endfor %}

And this is the data used to render it:

                
username: Marco
greet_user: True
things:
  - one
  - two
  - three