101 lines
3.2 KiB
HTML
101 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<my-head>
|
|
<link rel="stylesheet" href="/prism.css" />
|
|
<script src="/prism.js"></script>
|
|
<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>Back to the Basics. Into the Future.</span>
|
|
<span slot="title-postfix">- This is strong!</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>some text: {{greeting}}</p>
|
|
{{greeting}} hey<br />
|
|
<clickable-text></clickable-text>
|
|
</section>
|
|
<section id="breakdown">
|
|
<h2>Let's Break it Down</h2>
|
|
<code-block language="html" line-numbers="true">
|
|
<pre>
|
|
<!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>
|
|
<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>some text: {{greeting}}</p>
|
|
{{greeting}} hey<br />
|
|
<clickable-text></clickable-text>
|
|
</body>
|
|
</html></pre
|
|
>
|
|
</code-block>
|
|
</section>
|
|
</main>
|
|
<my-footer></my-footer>
|
|
</body>
|
|
</html>
|