feat: add examples of using static fragments
This commit is contained in:
Ayo
parent
655debf193
commit
e190a9733c
5 changed files with 83 additions and 65 deletions
|
|
@ -1,6 +1,45 @@
|
|||
<header>
|
||||
<a href="https://ayco.io/gh/mcfly">
|
||||
<a href="/">
|
||||
<h1>McFly</h1>
|
||||
</a>
|
||||
<span>Back to the Basics. Into the Future.</span>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
margin: 0.5em 0;
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(45deg, #3054bf, #416fff);
|
||||
color: white;
|
||||
}
|
||||
header a {
|
||||
color: white;
|
||||
}
|
||||
header,
|
||||
main {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
body {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
max-width: 750px;
|
||||
margin: 0 auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2,
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 35em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
15
src/components/my-footer.html
Normal file
15
src/components/my-footer.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<footer>
|
||||
<p>
|
||||
<small>A project by <a href="https://ayco.io">Ayo Ayco</a></small
|
||||
><br />
|
||||
<small>See <a href="/demo">demo</a> pages</small>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
text-align: right;
|
||||
font-style: italic;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
</style>
|
||||
6
src/components/my-head.html
Normal file
6
src/components/my-head.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>McFly: Back to the Basics. Into the Future.</title>
|
||||
<link rel="stylesheet" href="./reset.css"></style>
|
||||
</head>
|
||||
|
|
@ -1,9 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Hello {{name}} :)</title>
|
||||
<my-head>
|
||||
<script server:setup>
|
||||
const name = "AYOs";
|
||||
let greeting = "hello";
|
||||
|
|
@ -17,15 +14,19 @@
|
|||
return x + y;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
</my-head>
|
||||
<body>
|
||||
<a href="/demo/about">{{ count }}</a>
|
||||
<div>
|
||||
<hello-world name="{{name }}"></hello-world>
|
||||
</div>
|
||||
<p>some text: {{greeting}}</p>
|
||||
{{greeting}} hey<br />
|
||||
<clickable-text></clickable-text>
|
||||
<awesome-header></awesome-header>
|
||||
<main>
|
||||
<a href="/demo/about">{{ count }}</a>
|
||||
<div>
|
||||
<hello-world name="{{name }}"></hello-world>
|
||||
</div>
|
||||
<p>some text: {{greeting}}</p>
|
||||
{{greeting}} hey<br />
|
||||
<clickable-text></clickable-text>
|
||||
</main>
|
||||
<my-footer></my-footer>
|
||||
<script>
|
||||
const helloWorld = document.querySelector("hello-world");
|
||||
setTimeout(() => {
|
||||
|
|
|
|||
|
|
@ -1,58 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>McFly: Back to the Basics. Into the Future.</title>
|
||||
<link rel="stylesheet" href="./reset.css"></style>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
max-width: 750px;
|
||||
margin: 0 auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2, p, ul, ol {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
footer {
|
||||
text-align: right;
|
||||
font-style: italic;
|
||||
}
|
||||
header {
|
||||
margin: 0.5em 0;
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(45deg, #3054bf, #416fff);
|
||||
color: white;
|
||||
}
|
||||
header a {
|
||||
color: white
|
||||
}
|
||||
header, main, footer {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
main {
|
||||
max-width: 35em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<my-head></my-head>
|
||||
<body>
|
||||
<awesome-header></awesome-header>
|
||||
<main>
|
||||
<p>
|
||||
<strong>McFly</strong> is a full-stack no-framework framework that assists developers in leveraging the web platform.
|
||||
<strong>McFly</strong> is a full-stack no-framework framework that
|
||||
assists developers in leveraging the web platform.
|
||||
</p>
|
||||
<p>
|
||||
Start at the very basic of
|
||||
writing HTML files and enhance with standard web technologies or go
|
||||
advanced as you like, at your own pace.
|
||||
Start at the very basic of writing HTML files and enhance with standard
|
||||
web technologies or go advanced as you like, at your own pace.
|
||||
</p>
|
||||
<ul>
|
||||
<li>HTML pages</li>
|
||||
|
|
@ -62,12 +20,11 @@
|
|||
<li>Deploy Anywhere</li>
|
||||
</ul>
|
||||
<p>...all in the same project.</p>
|
||||
<p>Read more on <a href="https://github.com/ayoayco/mcfly#readme">GitHub</a>.</p>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
<small>A project by <a href="https://ayco.io">Ayo Ayco</a></small>
|
||||
Read more on
|
||||
<a href="https://github.com/ayoayco/mcfly#readme">GitHub</a>.
|
||||
</p>
|
||||
</footer>
|
||||
</main>
|
||||
<my-footer></my-footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue