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

{{greeting}} hey

Let's Break it Down

<!DOCTYPE html>
<html lang="en">
  <my-head>
    <script server:setup>
      const name = "Nitro";
      let greeting = "hello";
      var count = sum(1, 247);
      greeting = "nope";
      function sum(x, y) {
          return x + y;
      }
    </script>
  </my-head>
  <body>
    <awesome-header><span>heyyy</span></awesome-header>
    <main>
      <a href="/demo/about">{{ count }}</a>
      <div>
        <my-hello-world data-name="{{name }}"></my-hello-world>
      </div>
      <code-block language="js">const name = "Nitro"</code-block>
      <p>some text: {{greeting}}</p>
      {{greeting}} hey<br />
      <clickable-text></clickable-text>
    </main>
    <my-footer></my-footer>
  </body>
</html>