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

feat(templates): add content to basic template

Browse source
This commit is contained in:
Ayo 2023-10-21 13:47:02 +02:00
parent d87a4260e3
commit fa4711031c
9 changed files with 97 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package-lock.json generated
View file

@ -11,7 +11,6 @@
"packages/core" "packages/core"
], ],
"dependencies": { "dependencies": {
"@mcflyjs/config": "./packages/config",
"esprima": "^4.0.1", "esprima": "^4.0.1",
"nitropack": "latest", "nitropack": "latest",
"ultrahtml": "^1.5.2" "ultrahtml": "^1.5.2"
@ -3966,6 +3965,7 @@
"devDependencies": {} "devDependencies": {}
}, },
"packages/core": { "packages/core": {
"name": "@mcflyjs/core",
"version": "0.0.1", "version": "0.0.1",
"license": "MIT", "license": "MIT",
"devDependencies": {} "devDependencies": {}
@ -3984,6 +3984,7 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@mcflyjs/config": "^0.0.1", "@mcflyjs/config": "^0.0.1",
"@mcflyjs/core": "^0.0.1",
"nitropack": "latest" "nitropack": "latest"
} }
} }

1
package.json
View file

@ -9,7 +9,6 @@
"build:preview": "npm run build && npm run preview" "build:preview": "npm run build && npm run preview"
}, },
"dependencies": { "dependencies": {
"@mcflyjs/config": "./packages/config",
"esprima": "^4.0.1", "esprima": "^4.0.1",
"nitropack": "latest", "nitropack": "latest",
"ultrahtml": "^1.5.2" "ultrahtml": "^1.5.2"

2
templates/basic/mcfly.config.ts
View file

@ -1,4 +1,4 @@
import defineConfig from "./packages/define-config"; import defineConfig from "@mcflyjs/core/define-config";
export default defineConfig({ export default defineConfig({
components: "js", components: "js",

1
templates/basic/package.json
View file

@ -8,6 +8,7 @@
}, },
"dependencies": { "dependencies": {
"@mcflyjs/config": "^0.0.1", "@mcflyjs/config": "^0.0.1",
"@mcflyjs/core": "^0.0.1",
"nitropack": "latest" "nitropack": "latest"
}, },
"name": "@templates/basic", "name": "@templates/basic",

25
src/components/awesome-header.html → templates/basic/src/components/awesome-header.html
View file

@ -1,18 +1,15 @@
<header> <header
<a href="/"> style="
<h1>McFly</h1>
</a>
<span>Back to the Basics. Into the Future.</span>
</header>
<style>
header {
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; margin-bottom: 1em;
} padding: 1em;
header a { margin: 1em 0;
color: white; "
} >
</style> <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
View 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
View 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
View 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
View 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>