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

sprinkle with fairy dust (it's science)

Browse source
This commit is contained in:
Ayo 2023-10-20 00:49:45 +02:00
parent a452e1c386
commit b8b0fd162f
5 changed files with 137 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -18,9 +18,9 @@
We want a way to: We want a way to:
1. create web apps with vanilla custom elements 1. create web apps with vanilla custom elements
1. write real .HTML files 1. write real .HTML files
1. no frameworks or reactivity libraries on the browser 1. have no frameworks or reactivity libraries on the browser
1. server-side pre-rendering 1. use server-side rendering
1. control on when and where JS is downloaded for interactive elements 1. control when and where JS is downloaded for interactive elements
## Special directories ## Special directories
**1. `src/pages`** **1. `src/pages`**

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

@ -7,39 +7,12 @@
<style> <style>
header { header {
margin: 0.5em 0;
border-radius: 5px; border-radius: 5px;
background: linear-gradient(45deg, #3054bf, #416fff); background: linear-gradient(45deg, #3054bf, #416fff);
color: white; color: white;
margin-bottom: 1em;
} }
header a { header a {
color: white; 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> </style>

23
src/components/my-head.html
View file

@ -23,5 +23,28 @@
property="og:description" property="og:description"
content="McFly is a full-stack no-framework framework that assists developers in leveraging the web platform." content="McFly is a full-stack no-framework framework that assists developers in leveraging the web platform."
/> />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
max-width: 750px;
margin: 0 auto;
padding: 1em;
}
body > * {
padding: 0.5em 1em;
}
h1 {
padding: 0;
margin: 0;
}
h2,
p,
ul,
ol {
margin-bottom: 1em;
}
</style>
<slot /> <slot />
</head> </head>

8
src/components/vanilla-hello-world.js
View file

@ -8,17 +8,11 @@ class HelloWorld extends HTMLElement {
this.onclick = () => { this.onclick = () => {
this.setAttribute("name", `Clicked ${++count}x`); this.setAttribute("name", `Clicked ${++count}x`);
}; };
this.setAttribute("title", "Click me please");
} }
attributeChangedCallback(property, previousValue, currentValue) { attributeChangedCallback(property, previousValue, currentValue) {
if (previousValue !== currentValue) { if (previousValue !== currentValue) {
this[property] = currentValue; this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
this.render();
} }
} }
render() {
this.innerHTML = `<button style="cursor:pointer">Hello ${this.name}!</button>`;
}
} }

106
src/pages/index.html
View file

@ -1,33 +1,117 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<my-head></my-head> <my-head>
<link rel="stylesheet" href="/prism.css" />
<script src="/prism.js"></script>
<style>
@counter-style publish-icons {
system: cyclic;
symbols: "️✅";
suffix: " ";
}
ul {
list-style: publish-icons;
}
header,
footer,
main {
max-width: 35em;
margin: 0 auto;
}
</style>
</my-head>
<body> <body>
<awesome-header></awesome-header> <awesome-header></awesome-header>
<main> <main>
<section>
<p> <p>
<strong>McFly</strong> is a full-stack no-framework framework that <strong style="font-size: large">McFly</strong> is a full-stack
assists developers in leveraging the web platform. no-framework framework that assists developers in leveraging the web
platform.
</p> </p>
<p> <p>
Here's a sample interactive custom element: Here's a sample interactive custom element:
<vanilla-hello-world name="McFly"></vanilla-hello-world> <vanilla-hello-world name="McFly"></vanilla-hello-world>
</p> </p>
<p> <p>
Start at the very basic of writing HTML files and enhance with standard Start at the very basic of writing HTML files and enhance with
web technologies or go advanced as you like, at your own pace. standard web technologies or go advanced as you like, at your own
pace.
</p> </p>
<ul> <ul>
<li>HTML pages & fragments</li> <li>Create web apps with vanilla custom elements</li>
<li>Server-Side Rendering logic</li> <li>Write real .HTML files</li>
<li>Custom Elements</li> <li>Have no frameworks or reactivity libraries on the browser</li>
<li>REST APIs</li> <li>Use server-side rendering</li>
<li>Deploy Anywhere</li> <li>Deploy anywhere</li>
</ul> </ul>
<p>...all in the same project.</p>
<p> <p>
Read more on 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>
<h2>HTML pages w/ server setup</h2>
<ul>
<li>
directly use custom elements & static fragments (no imports or
registry maintenance needed)
</li>
<li>
use
<code class="language-html">&lt;script server:setup&gt;</code>
to define logic that runs on the server, which then gets stripped
away
</li>
</ul>
</section>
<section>
<h2>Custom Elements & Static Fragments</h2>
<ul>
<li>
all components are automatically registered using their file names;
a
<code class="language-unknown">hello-world.js</code> component can
be used as
<code class="language-unknown">&lt;hello-world&gt;</code>
</li>
<li>
static <code class="language-unknown">.html</code> fragments; a
<code class="language-unknown">my-header.html</code> fragment can be
directly used as
<code class="language-unknown">&lt;my-header&gt;</code>
</li>
</ul>
</section>
<section>
<h2>Using the Browser's built-in reactivity</h2>
<p>
Here's a sample interactive custom element:
<vanilla-hello-world name="McFly"></vanilla-hello-world>
</p>
<code-block language="js" line-numbers="true">
<pre>
class HelloWorld extends HTMLElement {
static get observedAttributes() {
return ["name"];
}
connectedCallback() {
let count = 0;
this.onclick = () => {
this.setAttribute("name", `Clicked ${++count}x`);
};
}
attributeChangedCallback(property, previousValue, currentValue) {
if (previousValue !== currentValue) {
this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
}
}
}</pre>
</code-block>
</section> -->
</main> </main>
<my-footer></my-footer> <my-footer></my-footer>
</body> </body>