feat(templates): add content to basic template
This commit is contained in:
Ayo
parent
d87a4260e3
commit
fa4711031c
9 changed files with 97 additions and 17 deletions
3
package-lock.json
generated
3
package-lock.json
generated
|
|
@ -11,7 +11,6 @@
|
|||
"packages/core"
|
||||
],
|
||||
"dependencies": {
|
||||
"@mcflyjs/config": "./packages/config",
|
||||
"esprima": "^4.0.1",
|
||||
"nitropack": "latest",
|
||||
"ultrahtml": "^1.5.2"
|
||||
|
|
@ -3966,6 +3965,7 @@
|
|||
"devDependencies": {}
|
||||
},
|
||||
"packages/core": {
|
||||
"name": "@mcflyjs/core",
|
||||
"version": "0.0.1",
|
||||
"license": "MIT",
|
||||
"devDependencies": {}
|
||||
|
|
@ -3984,6 +3984,7 @@
|
|||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@mcflyjs/config": "^0.0.1",
|
||||
"@mcflyjs/core": "^0.0.1",
|
||||
"nitropack": "latest"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
"build:preview": "npm run build && npm run preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mcflyjs/config": "./packages/config",
|
||||
"esprima": "^4.0.1",
|
||||
"nitropack": "latest",
|
||||
"ultrahtml": "^1.5.2"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import defineConfig from "./packages/define-config";
|
||||
import defineConfig from "@mcflyjs/core/define-config";
|
||||
|
||||
export default defineConfig({
|
||||
components: "js",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@mcflyjs/config": "^0.0.1",
|
||||
"@mcflyjs/core": "^0.0.1",
|
||||
"nitropack": "latest"
|
||||
},
|
||||
"name": "@templates/basic",
|
||||
|
|
|
|||
|
|
@ -1,18 +1,15 @@
|
|||
<header>
|
||||
<a href="/">
|
||||
<h1>McFly</h1>
|
||||
</a>
|
||||
<span>Back to the Basics. Into the Future.</span>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
<header
|
||||
style="
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(45deg, #3054bf, #416fff);
|
||||
color: white;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
header a {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
padding: 1em;
|
||||
margin: 1em 0;
|
||||
"
|
||||
>
|
||||
<a style="color: white" href="/">
|
||||
<h1>McFly</h1>
|
||||
</a>
|
||||
<span>Back to the Basics. Into the Future.</span>
|
||||
</header>
|
||||
6
templates/basic/src/components/my-footer.html
Normal file
6
templates/basic/src/components/my-footer.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<footer style="text-align: right; font-style: italic; padding: 0.5em 1em">
|
||||
<p>
|
||||
<small>A project by vanilla web tech lovers.</small>
|
||||
<small>See on <a href="https://ayco.io/gh/McFly">GitHub</a></small>
|
||||
</p>
|
||||
</footer>
|
||||
19
templates/basic/src/components/my-hello-world.js
Normal file
19
templates/basic/src/components/my-hello-world.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* Custom element using a minimal Web Component Base class
|
||||
* @see https://ayco.io/n/web-component-base
|
||||
*/
|
||||
class HelloWorld extends WebComponent {
|
||||
static properties = ["data-name"];
|
||||
|
||||
onInit() {
|
||||
let count = 0;
|
||||
this.onclick = () => {
|
||||
this.setAttribute("data-name", `Clicked ${++count}x`);
|
||||
};
|
||||
this.setAttribute("title", "Click me please");
|
||||
}
|
||||
|
||||
get template() {
|
||||
return `<button style="cursor:pointer">Hello ${this.dataName}!</button>`;
|
||||
}
|
||||
}
|
||||
18
templates/basic/src/components/vanilla-hello-world.js
Normal file
18
templates/basic/src/components/vanilla-hello-world.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
class HelloWorld extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ["data-name"];
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
let count = 0;
|
||||
this.onclick = () => {
|
||||
this.setAttribute("data-name", `Clicked ${++count}x`);
|
||||
};
|
||||
}
|
||||
|
||||
attributeChangedCallback(property, previousValue, currentValue) {
|
||||
if (property === "data-name" && previousValue !== currentValue) {
|
||||
this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
39
templates/basic/src/pages/index.html
Normal file
39
templates/basic/src/pages/index.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!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>
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
<awesome-header></awesome-header>
|
||||
<main>
|
||||
Here's a vanilla custom element:
|
||||
<vanilla-hello-world data-name="McFly"></vanilla-hello-world>
|
||||
</main>
|
||||
<my-footer></my-footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue