headless.tech-playground.com

A sneak peek at headless embedding in tech playground. Below are some examples with NGINX, Caddy 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 the required code blocks in a custom element <headless-tech-playground playground="desired-playground"></headless-tech-playground>

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

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

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

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 %}

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