McFly Demo

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

In this page, there are several things happening.

In the grey box here everything is working, and we will breakdown the code in the Breakdown section below the page.

Demo Page

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 name="{{name }}"></my-hello-world>
      </div>
      <p>some text: {{greeting}}</p>
      {{greeting}} hey<br />
      <clickable-text></clickable-text>
    </main>
    <my-footer></my-footer>
  </body>
</html>