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

feat: add examples of using static fragments

Browse source
This commit is contained in:
Ayo 2023-10-19 12:17:02 +02:00
parent 655debf193
commit e190a9733c
5 changed files with 83 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/components/awesome-header.html
View file

@ -1,6 +1,45 @@
<header> <header>
<a href="https://ayco.io/gh/mcfly"> <a href="/">
<h1>McFly</h1> <h1>McFly</h1>
</a> </a>
<span>Back to the Basics. Into the Future.</span> <span>Back to the Basics. Into the Future.</span>
</header> </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
View 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
View 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>

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

@ -1,9 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <my-head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello {{name}} :)</title>
<script server:setup> <script server:setup>
const name = "AYOs"; const name = "AYOs";
let greeting = "hello"; let greeting = "hello";
@ -17,15 +14,19 @@
return x + y; return x + y;
} }
</script> </script>
</head> </my-head>
<body> <body>
<a href="/demo/about">{{ count }}</a> <awesome-header></awesome-header>
<div> <main>
<hello-world name="{{name }}"></hello-world> <a href="/demo/about">{{ count }}</a>
</div> <div>
<p>some text: {{greeting}}</p> <hello-world name="{{name }}"></hello-world>
{{greeting}} hey<br /> </div>
<clickable-text></clickable-text> <p>some text: {{greeting}}</p>
{{greeting}} hey<br />
<clickable-text></clickable-text>
</main>
<my-footer></my-footer>
<script> <script>
const helloWorld = document.querySelector("hello-world"); const helloWorld = document.querySelector("hello-world");
setTimeout(() => { setTimeout(() => {

61
src/pages/index.html
View file

@ -1,58 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <my-head></my-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>
<body> <body>
<awesome-header></awesome-header> <awesome-header></awesome-header>
<main> <main>
<p> <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>
<p> <p>
Start at the very basic of Start at the very basic of writing HTML files and enhance with standard
writing HTML files and enhance with standard web technologies or go web technologies or go advanced as you like, at your own pace.
advanced as you like, at your own pace.
</p> </p>
<ul> <ul>
<li>HTML pages</li> <li>HTML pages</li>
@ -62,12 +20,11 @@
<li>Deploy Anywhere</li> <li>Deploy Anywhere</li>
</ul> </ul>
<p>...all in the same project.</p> <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> <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> </p>
</footer> </main>
<my-footer></my-footer>
</body> </body>
</html> </html>