From fa4711031ce7c85ca642e1f003ea626a654e0d2b Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sat, 21 Oct 2023 13:47:02 +0200
Subject: [PATCH] feat(templates): add content to basic template

---
 package-lock.json                             |  3 +-
 package.json                                  |  1 -
 templates/basic/mcfly.config.ts               |  2 +-
 templates/basic/package.json                  |  1 +
 .../basic/src}/components/awesome-header.html | 25 ++++++------
 templates/basic/src/components/my-footer.html |  6 +++
 .../basic/src/components/my-hello-world.js    | 19 +++++++++
 .../src/components/vanilla-hello-world.js     | 18 +++++++++
 templates/basic/src/pages/index.html          | 39 +++++++++++++++++++
 9 files changed, 97 insertions(+), 17 deletions(-)
 rename {src => templates/basic/src}/components/awesome-header.html (68%)
 create mode 100644 templates/basic/src/components/my-footer.html
 create mode 100644 templates/basic/src/components/my-hello-world.js
 create mode 100644 templates/basic/src/components/vanilla-hello-world.js
 create mode 100644 templates/basic/src/pages/index.html

diff --git a/package-lock.json b/package-lock.json
index de0a168..af49adb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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"
       }
     }
diff --git a/package.json b/package.json
index b8e3677..371b463 100644
--- a/package.json
+++ b/package.json
@@ -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"
diff --git a/templates/basic/mcfly.config.ts b/templates/basic/mcfly.config.ts
index 54487ef..45b89fb 100644
--- a/templates/basic/mcfly.config.ts
+++ b/templates/basic/mcfly.config.ts
@@ -1,4 +1,4 @@
-import defineConfig from "./packages/define-config";
+import defineConfig from "@mcflyjs/core/define-config";
 
 export default defineConfig({
   components: "js",
diff --git a/templates/basic/package.json b/templates/basic/package.json
index 9b66974..f162089 100644
--- a/templates/basic/package.json
+++ b/templates/basic/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@mcflyjs/config": "^0.0.1",
+    "@mcflyjs/core": "^0.0.1",
     "nitropack": "latest"
   },
   "name": "@templates/basic",
diff --git a/src/components/awesome-header.html b/templates/basic/src/components/awesome-header.html
similarity index 68%
rename from src/components/awesome-header.html
rename to templates/basic/src/components/awesome-header.html
index 5b69e62..82943b2 100644
--- a/src/components/awesome-header.html
+++ b/templates/basic/src/components/awesome-header.html
@@ -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>
diff --git a/templates/basic/src/components/my-footer.html b/templates/basic/src/components/my-footer.html
new file mode 100644
index 0000000..24d7f28
--- /dev/null
+++ b/templates/basic/src/components/my-footer.html
@@ -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>
diff --git a/templates/basic/src/components/my-hello-world.js b/templates/basic/src/components/my-hello-world.js
new file mode 100644
index 0000000..6a0c1eb
--- /dev/null
+++ b/templates/basic/src/components/my-hello-world.js
@@ -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>`;
+  }
+}
diff --git a/templates/basic/src/components/vanilla-hello-world.js b/templates/basic/src/components/vanilla-hello-world.js
new file mode 100644
index 0000000..12a1564
--- /dev/null
+++ b/templates/basic/src/components/vanilla-hello-world.js
@@ -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>`;
+    }
+  }
+}
diff --git a/templates/basic/src/pages/index.html b/templates/basic/src/pages/index.html
new file mode 100644
index 0000000..4bbd4c0
--- /dev/null
+++ b/templates/basic/src/pages/index.html
@@ -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>