ayo/mcfly
ayo/mcfly
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: power overwhelming

Browse source 
- publish initial demo page
- create warning block fragment
This commit is contained in:
Ayo 2023-10-20 09:50:29 +02:00
parent 8815cbc51a
commit 68c1e2df0f
3 changed files with 82 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/warning-block.html Normal file
View file

@ -0,0 +1,12 @@
<quote
style="
background-color: beige;
border-radius: 5px;
border: 1px solid gray;
padding: 1em;
margin: 1em 0;
display: block;
"
>
<span id="icon">⚠️</span> <slot />
</quote>

73
src/pages/demo/index.html
View file

@ -4,12 +4,10 @@
<link rel="stylesheet" href="/prism.css" /> <link rel="stylesheet" href="/prism.css" />
<script src="/prism.js"></script> <script src="/prism.js"></script>
<script server:setup> <script server:setup>
const name = "AYOs"; const name = "Nitro";
let greeting = "hello"; let greeting = "hello";
var count = sum(1, 247); var count = sum(1, 247);
// comment
greeting = "nope"; greeting = "nope";
function sum(x, y) { function sum(x, y) {
@ -20,27 +18,76 @@
<body> <body>
<awesome-header><span>heyyy</span></awesome-header> <awesome-header><span>heyyy</span></awesome-header>
<main> <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> <a href="/demo/about">{{ count }}</a>
<div> <div>
<my-hello-world name="{{name }}"></my-hello-world> <my-hello-world name="{{name }}"></my-hello-world>
</div> </div>
<code-block language="js">const name = "Nitro"</code-block>
<p>some text: {{greeting}}</p> <p>some text: {{greeting}}</p>
{{greeting}} hey<br /> {{greeting}} hey<br />
<clickable-text></clickable-text> <clickable-text></clickable-text>
<code-block language="js" line-numbers="true"> </section>
<section id="breakdown">
<h2>Let's Break it Down</h2>
<code-block language="html" line-numbers="true">
<pre> <pre>
const hey = "AYO"; &lt;!DOCTYPE html&gt;
console.log(hey)</pre &lt;html lang=&quot;en&quot;&gt;
&lt;my-head&gt;
&lt;script server:setup&gt;
const name = &quot;Nitro&quot;;
let greeting = &quot;hello&quot;;
var count = sum(1, 247);
greeting = &quot;nope&quot;;
function sum(x, y) {
return x + y;
}
&lt;/script&gt;
&lt;/my-head&gt;
&lt;body&gt;
&lt;awesome-header&gt;&lt;span&gt;heyyy&lt;/span&gt;&lt;/awesome-header&gt;
&lt;main&gt;
&lt;a href=&quot;/demo/about&quot;&gt;&#123;&#123; count &#125;&#125;&lt;/a&gt;
&lt;div&gt;
&lt;my-hello-world name=&quot;&#123;&#123;name &#125;&#125;&quot;&gt;&lt;/my-hello-world&gt;
&lt;/div&gt;
&lt;p&gt;some text: &#123;&#123;greeting&#125;&#125;&lt;/p&gt;
&#123;&#123;greeting&#125;&#125; hey&lt;br /&gt;
&lt;clickable-text&gt;&lt;/clickable-text&gt;
&lt;/main&gt;
&lt;my-footer&gt;&lt;/my-footer&gt;
&lt;/body&gt;
&lt;/html&gt;</pre
> >
</code-block> </code-block>
</section>
</main> </main>
<my-footer></my-footer> <my-footer></my-footer>
<script>
const helloWorld = document.querySelector("my-hello-world");
setTimeout(() => {
helloWorld.setAttribute("name", "Nitro");
}, 2000);
</script>
</body> </body>
</html> </html>

2
src/pages/index.html
View file

@ -46,7 +46,7 @@
<li>Deploy anywhere</li> <li>Deploy anywhere</li>
</ul> </ul>
<p> <p>
Read more on Visit our in-progress <a href="/demo">Demo Page</a> or read more on
<a href="https://github.com/ayoayco/mcfly#readme">GitHub</a>. <a href="https://github.com/ayoayco/mcfly#readme">GitHub</a>.
</p> </p>
</section> </section>