prasmussen/code-sandbox.conf

## code-sandbox.conf
server {
  listen 8000;
  server_name _;

  root /home/glot/www;

  index index.html;

  location / {
    try_files $uri $uri/ =404;
  }

  # Proxy requests to docker-run
  location /run {
    proxy_pass http://localhost:8088/run;
  }
}

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Code sandbox</title>
    <style>
      textarea {
        width: 80vw;
        height: 30vh;
        display: block;
        margin-bottom: 20px;
      }

      button {
        padding: 10px;
        width: 100px;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <textarea id="code" placeholder="Code">print("Hello World")</textarea>
      <textarea id="result" placeholder="Output"></textarea>
      <button id="run" type="button">Run</button>
    </div>

    <script>
      const runElem = document.getElementById('run');
      const codeElem = document.getElementById('code');
      const resultElem = document.getElementById('result');

      runElem.addEventListener('click', async () => {
        const runRequest = {
          image: 'glot/python:latest',
          payload: {
            language: 'python',
            files: [
              {
                name: 'main.py',
                content: codeElem.value,
              }
            ]
          }
        };

        const runResult = await runCode(runRequest);
        resultElem.value = runResult.stdout
      });

      async function runCode(data) {
        const result = await fetch('/run', {
          method: 'POST',
          headers: {
            "Content-Type": "application/json",
            "X-Access-Token": "access-token-from-systemd",
          },
          body: JSON.stringify(data)
        });

        return result.json();
      }
    </script>
  </body>
</html>
	server {
	listen 8000;
	server_name _;

	root /home/glot/www;

	index index.html;

	location / {
	try_files $uri $uri/ =404;
	}

	# Proxy requests to docker-run
	location /run {
	proxy_pass http://localhost:8088/run;
	}
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Code sandbox</title>
	<style>
	textarea {
	width: 80vw;
	height: 30vh;
	display: block;
	margin-bottom: 20px;
	}

	button {
	padding: 10px;
	width: 100px;
	margin: auto;
	}
	</style>
	</head>
	<body>
	<div class="content">
	<textarea id="code" placeholder="Code">print("Hello World")</textarea>
	<textarea id="result" placeholder="Output"></textarea>
	<button id="run" type="button">Run</button>
	</div>

	<script>
	const runElem = document.getElementById('run');
	const codeElem = document.getElementById('code');
	const resultElem = document.getElementById('result');

	runElem.addEventListener('click', async () => {
	const runRequest = {
	image: 'glot/python:latest',
	payload: {
	language: 'python',
	files: [
	{
	name: 'main.py',
	content: codeElem.value,
	}
	]
	}
	};

	const runResult = await runCode(runRequest);
	resultElem.value = runResult.stdout
	});

	async function runCode(data) {
	const result = await fetch('/run', {
	method: 'POST',
	headers: {
	"Content-Type": "application/json",
	"X-Access-Token": "access-token-from-systemd",
	},
	body: JSON.stringify(data)
	});

	return result.json();
	}
	</script>
	</body>
	</html>