93 lines
2.8 KiB
HTML
93 lines
2.8 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>heyyy</span></awesome-header>
|
|
<main>
|
|
<section id="intro">
|
|
<h1>McFly Demo</h1>
|
|
<warning-block
|
|
>This page is in-progress. See the
|
|
<a
|
|
href="https://github.com/ayoayco/McFly/blob/main/src/pages/demo/index.html"
|
|
>source code</a
|
|
>.</warning-block
|
|
>
|
|
<p>In this page, there are several things happening.</p>
|
|
<p>
|
|
In the grey box here everything is working, and we will breakdown the
|
|
code in the <a href="#breakdown">Breakdown</a> section below the page.
|
|
</p>
|
|
</section>
|
|
<section
|
|
id="demo"
|
|
style="
|
|
padding: 1em;
|
|
margin: 3em 0;
|
|
box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15);
|
|
border: 1px solid rgba(34, 34, 34, 0.15);
|
|
border-radius: 5px;
|
|
"
|
|
>
|
|
<h2>Demo Page</h2>
|
|
<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>
|
|
</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>
|
|
<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></pre
|
|
>
|
|
</code-block>
|
|
</section>
|
|
</main>
|
|
<my-footer></my-footer>
|
|
</body>
|
|
</html>
|