<!DOCTYPE html> <html lang=β€œ{{ page.lang | default: site.lang | default: ”enβ€œ }}”>

{% include head_blockly.html %}

<body>

  {% include header.html %}

  <main class="page-content" aria-label="Content">
    <div class="wrapper">
      {{ content }}
    </div>
    <div id="blocklyArea"></div>
  </main>

  <div id="blocklyDiv" style="position: absolute"></div>

  {% include footer.html %}

</body>

<script>
  var blocklyArea = document.getElementById('blocklyArea');
  var blocklyDiv = document.getElementById('blocklyDiv');
  var workspace = Blockly.inject(blocklyDiv,
       {media: "{{ '/assets/media/' | relative_url }}",
       toolbox: document.getElementById('toolbox')});
  var onresize = function(e) {
    // Compute the absolute coordinates and dimensions of blocklyArea.
    var element = blocklyArea;
    var x = 0;
    var y = 0;
    do {
      x += element.offsetLeft;
      y += element.offsetTop;
      element = element.offsetParent;
    } while (element);
    // Position blocklyDiv over blocklyArea.
    blocklyDiv.style.left = x + 'px';
    blocklyDiv.style.top = y + 'px';
    blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
    blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
  };
  window.addEventListener('resize', onresize, false);
  onresize();
  Blockly.svgResize(workspace);
</script>

</html>