-
Notifications
You must be signed in to change notification settings - Fork 3
/
demo.html
103 lines (101 loc) · 3.35 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!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" defer></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" my-name="{{ name }}"></my-hello-world>
<input
placeholder="Type your name here"
onkeyup="document.getElementById('my-hello').setAttribute('my-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">
<!DOCTYPE html>
<html lang="en">
<my-head>
<script server:setup>
const name = "Nitro";
let greeting = {
url: "https://www.google.com",
message: "hello"
};
var count = sum(1, 247);
greeting.message = "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" my-name="{{name}}"></my-hello-world>
<input
placeholder="Type your name here"
onkeyup="document.getElementById('my-hello').setAttribute('my-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>
</body>
</html>
</code-block>
</section>
</main>
<my-footer></my-footer>
</body>
</html>