mcfly/site/src/pages/demo.html

<!DOCTYPE html>
<html lang="en">
  <my-head>
    <title>Demo | McFly: Back to the Basics. Into the Future.</title>
    <link rel="stylesheet" href="/prism.css" />
    <script src="/prism.js"></script>
    <script server:setup>
      const name = "Nitro";
      let greeting = {
        url: 'https://www.google.com',
        message: "hello"
      };

      greeting.message = "nope";
      var count = sum(1, 247);

      function sum(x, y) {
        return x + y;
      }
    </script>
  </my-head>
  <body>
    <awesome-header>
      <span>Back to the Basics. Into the Future.</span>
    </awesome-header>
    <main>
      <section id="intro">
        <h1>McFly Demo</h1>
        <warning-block
          ><span>This page is in-progress. See the
          <a
            href="https://github.com/ayoayco/McFly/blob/main/site/src/pages/demo.html"
            >source code</a
          >.</span></warning-block
        >
        <p>In this demo, there are several things happening.</p>
        <p>
          Imagine the grey box here is a page where everything is working, and
          we will go through the code in the
          <a href="#breakdown">Breakdown</a> section below.
        </p>
      </section>
      <section
        id="demo"
        style="
          padding: 1em;
          margin: 2em 1em;
          box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15);
          border: 1px solid rgba(34, 34, 34, 0.15);
          border-radius: 5px;
        "
      >
        <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>
      </section>
      <section id="breakdown">
        <h2>Let's Break it Down</h2>
        <code-block language="html" line-numbers="true">
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;my-head&gt;
    &lt;script server:setup&gt;
      const name = &quot;Nitro&quot;;
      let greeting = {
        url: &quot;https://www.google.com&quot;,
        message: &quot;hello&quot;
      };
      var count = sum(1, 247);
      greeting.message = &quot;nope&quot;;
      function sum(x, y) {
          return x + y;
      }
    &lt;/script&gt;
  &lt;/my-head&gt;
  &lt;body&gt;
    &lt;a href=&quot;/demo/about&quot;&gt;&#123;&#123; count &#125;&#125;&lt;/a&gt;
    &lt;div&gt;
      &lt;my-hello-world id=&quot;my-hello&quot; data-name=&quot;&#123;&#123;name &#125;&#125;&quot;&gt;&lt;/my-hello-world&gt;
      &lt;input
        placeholder=&quot;Type your name here&quot;
        onkeyup=&quot;document.getElementById(&#39;my-hello&#39;).setAttribute(&#39;data-name&#39;, this.value)&quot;
      /&gt;
    &lt;/div&gt;
    &lt;code-block language=&quot;js&quot;&gt;const name = &quot;Nitro&quot;&lt;/code-block&gt;
    &lt;p&gt;&lt;a href="&#123;&#123;greeting.url&#125;&#125;"&gt;some text: &#123;&#123;greeting.message&#125;&#125;&lt;/a&gt;&lt;/p&gt;
    &lt;clickable-text&gt;&lt;/clickable-text&gt;
  &lt;/body&gt;
&lt;/html&gt;
        </code-block>
      </section>
    </main>
    <my-footer></my-footer>
  </body>
</html>