McFly Demo

This page is in-progress. See the source code.

In this demo, there are several things happening.

Imagine the grey box here is a page where everything is working, and we will go through the code in the Breakdown section below.

const name = "Nitro"

some text: {{greeting.message}}

Let's Break it Down

<!DOCTYPE html>
<html lang="en">
  <my-head>
    <script server:setup>
      const name = "Nitro";
      let greeting = {
        url: "https://www.google.com",
        message: "hello"
      };
      var count = sum(1, 247);
      greeting.message = "nope";
      function sum(x, y) {
          return x + y;
      }
    </script>
  </my-head>
  <body>
    <a href="/demo/about">{{ count }}</a>
    <div>
      <my-hello-world id="my-hello" data-name="{{name }}"></my-hello-world>
      <input
        placeholder="Type your name here"
        onkeyup="document.getElementById('my-hello').setAttribute('data-name', this.value)"
      />
    </div>
    <code-block language="js">const name = "Nitro"</code-block>
    <p><a href="{{greeting.url}}">some text: {{greeting.message}}</a></p>
    <clickable-text></clickable-text>
  </body>
</html>