feat(site): initial website for webcomponent.io

.gitignore

@@ -6,3 +6,9 @@ dist/
 *swo
 *swp
 
+# nitro site
+*.log*
+.nitro
+.cache
+.output
+.env

package.json

@@ -6,6 +6,8 @@
   "type": "module",
   "scripts": {
     "start": "npx simple-server .",
+    "demo": "npx simple-server .",
+    "site": "npm start -w site",
     "build": "npm run clean && npm run generate:types && npm run copy:meta && npm run copy:source && npm run minify",
     "clean": "rm -rf dist",
     "minify": "npx uglifyjs ./dist/WebComponent.js -o ./dist/WebComponent.min.js",
@@ -34,5 +36,8 @@
     "@size-limit/preset-small-lib": "^11.0.0",
     "typescript": "^5.2.2",
     "uglify-js": "^3.17.4"
-  }
+  },
+  "workspaces": [
+    "site"
+  ]
 }

site/.eslintignore

@@ -0,0 +1,3 @@
+dist
+node-modules
+.output

site/.gitignore

@@ -0,0 +1,10 @@
+dist
+node_modules
+*.log*
+.nitro
+.cache
+.output
+.env
+*~
+*swp
+*swo

site/.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

site/README.md

@@ -0,0 +1,63 @@
+# McFly Starter Project
+
+
+
+## Background
+This project was generated from the basic template for **McFly** -- a no-framework framework that assists in leveraging the web platform.
+
+![template-basic](https://raw.githubusercontent.com/ayoayco/McFly/main/assets/template-basic.png)
+
+It contains example files to get you started using vanilla web technologies in a modern way. See the [Special Directories](#special-directories) section for more information.
+
+## Features
+The time has come for vanilla Web tech. 🎉
+
+✅ Create web apps with vanilla custom elements<br>
+✅ Write real .HTML files<br>
+✅ Have no frameworks or reactivity libraries on the browser<br>
+✅ Use server-side rendering<br>
+✅ Deploy anywhere<br>
+
+## Special directories
+**1. `./src/pages/`**
+- file-based routing for `.html` files
+- directly use custom elements & static fragments (no imports or registry maintenance needed)
+- use `<script server:setup>` to define logic that runs on the server, which then gets stripped away
+
+**2. `./src/components/`**
+- custom element constructor files (only `.js` files for now)
+- all components are automatically registered using their file names; a `hello-world.js` component can be used as `<hello-world>`
+- static `.html` fragments; a `my-header.html` fragment can be directly used as `<my-header>`
+
+**3. `./routes/api/`**
+- file-based routing for REST API endpoints
+- e.g., `./routes/api/users.ts` can be accessed via `http://<domain>/api/users`
+- TypeScript or JavaScript welcome!
+
+## McFly config
+
+To tell McFly you want to use components, pass the mode (only `"js"` for now) to the `components` prop mcfly.config.ts
+
+```js
+import defineConfig from "./packages/define-config";
+
+export default defineConfig({
+  components: "js",
+});
+
+```
+## Commands
+
+The following commands are available to you on this project. Add more, or modify them as needed in your `./package.json` file.
+
+| Command | Action |
+| --- | --- |
+| npm start | Start the development server |
+| npm run prepare | Prepare the workspace |
+| npm run build | Locally generate the app's build files to `./output` |
+| npm run preview | Preview the built app locally |
+
+
+---
+*Just keep building*<br />
+*A project by [Ayo Ayco](https://ayco.io)*

site/mcfly.config.mjs

@@ -0,0 +1,4 @@
+import { defineMcFlyConfig } from "#imports";
+export default defineMcFlyConfig({
+  components: "js",
+});

site/nitro.config.mjs

@@ -0,0 +1,2 @@
+import McFly from "@mcflyjs/config";
+export default defineNitroConfig({ ...McFly() });

site/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "site",
+  "description": "McFly starter project; see more on https://ayco.io/gh/McFly",
+  "scripts": {
+    "start": "mcfly serve",
+    "prepare": "mcfly prepare",
+    "dev": "mcfly serve",
+    "build": "mcfly build",
+    "preview": "node .output/server/index.mjs",
+    "build:preview": "npm run build && npm run preview"
+  },
+  "dependencies": {
+    "@mcflyjs/cli": "latest",
+    "@mcflyjs/config": "latest",
+    "@mcflyjs/core": "latest",
+    "nitropack": "latest"
+  },
+  "version": "0.0.1",
+  "main": "index.js",
+  "author": "Ayo Ayco",
+  "license": "MIT",
+  "devDependencies": {}
+}

site/public/reset.css

@@ -0,0 +1,76 @@
+/**
+THANKS TO JOSH COMEAU FOR HIS CUSTOM CSS RESET
+👉 https://www.joshwcomeau.com/css/custom-css-reset/
+**/
+
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+/*
+    2. Remove default margin
+  */
+* {
+  margin: 0;
+}
+/*
+    3. Allow percentage-based heights in the application
+  */
+html,
+body {
+  height: 100%;
+}
+/*
+    Typographic tweaks!
+    4. Add accessible line-height
+    5. Improve text rendering
+  */
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+    6. Improve media defaults
+  */
+img,
+picture,
+video,
+canvas,
+svg,
+iframe {
+  display: block;
+  max-width: 100%;
+  margin: 0 auto;
+}
+/*
+    7. Remove built-in form typography styles
+  */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+/*
+    8. Avoid text overflows
+  */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+/*
+    9. Create a root stacking context
+  */
+#root,
+#__next {
+  isolation: isolate;
+}

site/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

site/routes/[...index].js

@@ -0,0 +1,9 @@
+/**
+ * McFly SSR logic
+ * 👋 this is not the route you're looking for
+ * ...pages are in ./src/pages
+ * ...reusable code are in ./src/components
+ * @see https://ayco.io/gh/McFly#special-directories
+ */
+import config from "../mcfly.config.mjs";
+export default useMcFlyRoute({ config, storage: useStorage() });

site/routes/api/user.js

@@ -0,0 +1,11 @@
+/**
+ * `./routes/api/`
+ * ...is where we put file-based REST API endpoints
+ * this one is accessible via https://<domain>/api/user
+ */
+export default eventHandler(() => {
+  return {
+    user: "AYO",
+    date: new Date(),
+  };
+});

site/src/components/awesome-header.html

@@ -0,0 +1,14 @@
+<header
+  style="
+    border-radius: 5px;
+    background: linear-gradient(45deg, #3054bf, #416fff);
+    color: white;
+    margin: 1em 0;
+    padding: 1em;
+  "
+>
+  <a style="color: white" href="/">
+    <h1><slot /></h1>
+  </a>
+  <slot name="description" />
+</header>

site/src/components/code-block.js

@@ -0,0 +1,41 @@
+class CodeBlockComponent extends HTMLElement {
+  connectedCallback() {
+    const trimmed = this.innerHTML.trim();
+    const lang = this.getAttribute("language");
+    const inline = this.getAttribute("inline") !== null;
+
+    this.innerHTML = `
+        <pre id="pre"><code id="code">${trimmed}</code></pre>
+    `;
+
+    /**
+     * @type {HTMLPreElement}
+     */
+    const pre = this.querySelector("#pre");
+
+    if (lang) {
+      pre.className = `language-${lang}`;
+    }
+
+    /**
+     * @type {Partial<CSSStyleDeclaration>}
+     */
+    const style = {
+      background: "#f5f2f0",
+      padding: "1em",
+      margin: "1em 0",
+      fontSize: "large",
+      overflow: "auto",
+      borderRadius: '5px'
+    };
+
+    if (inline) {
+      style.display = 'inline';
+      style.padding = '0.3em';
+    }
+
+    Object.keys(style).forEach((rule) => {
+      pre.style[rule] = style[rule];
+    });
+  }
+}

site/src/components/my-footer.html

@@ -0,0 +1,9 @@
+<footer style="text-align: right; font-style: italic; padding: 0.5em 1em">
+  <p>
+    <small
+      >✨ Star on <a href="https://github.com/ayoayco/McFly">GitHub</a> to
+      support!</small
+    ><br />
+    <slot />
+  </p>
+</footer>

site/src/components/my-head.html

@@ -0,0 +1,50 @@
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="/reset.css" />
+  <meta name="generator" content="McFly v0.0.1" />
+  <meta name="theme-color" content="#3054bf" />
+  <meta
+    name="description"
+    content="McFly is a no-framework framework that assists in leveraging the web platform."
+  />
+  <meta name="author" content="McFly" />
+  <meta name="origin" content="https://mc-fly.vercel.app/" />
+  <!-- Open Graph data -->
+  <meta property="og:site_name" content="McFly" />
+  <meta property="og:type" content="website" />
+  <meta property="og:image" content="/morty.png" />
+  <meta
+    property="og:title"
+    content="McFly: Back to the Basics. Into the Future. 😱"
+  />
+  <meta
+    property="og:description"
+    content="McFly is a no-framework framework that assists in leveraging the web platform."
+  />
+  <style>
+    body {
+      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+      max-width: 40em;
+      margin: 0 auto;
+      padding: 1em;
+    }
+    body > * {
+      padding: 0.5em 1em;
+    }
+
+    h1 {
+      padding: 0;
+      margin: 0;
+    }
+
+    h2,
+    p,
+    ul,
+    ol {
+      margin-bottom: 1em;
+    }
+  </style>
+
+  <slot />
+</head>

site/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 MyHelloWorld extends WebComponent {
+  // tell browser which props to cause render
+  static properties = ["my-name"];
+
+  // Triggered when the component is connected to the DOM
+  onInit() {
+    let count = 0;
+    this.onclick = () => this.props.myName = `Clicked ${++count}x`
+  }
+
+  // give readonly template
+  get template() {
+    return `<button style="cursor:pointer">Hello ${this.props.myName ?? 'World'}!</button>`;
+  }
+}

site/src/components/vanilla-hello-world.js

@@ -0,0 +1,22 @@
+class HelloWorld extends HTMLElement {
+  static get observedAttributes() {
+    return ["my-name"];
+  }
+
+  connectedCallback() {
+    let count = 0;
+    const currentName = this.getAttribute('my-name');
+
+    if (!currentName) {
+      this.setAttribute('my-name', 'World')
+    }
+
+    this.onclick = () => this.setAttribute("my-name", `Clicked ${++count}x`);
+  }
+
+  attributeChangedCallback(property, previousValue, currentValue) {
+    if (property === "my-name" && previousValue !== currentValue) {
+      this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
+    }
+  }
+}

site/src/pages/index.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+  <!--
+    Hello! This page is an example McFly page.
+    See more on https://ayco.io/gh/McFly
+  -->
+  <my-head>
+    <title>McFly: Back to the Basics. Into the Future.</title>
+    <script server:setup>
+      const project = {
+        name: "McFly",
+        description: "Back to the Basics. Into the Future."
+      };
+      const author = {
+        name: "Ayo Ayco",
+        url: "https://ayco.io"
+      }
+    </script>
+  </my-head>
+  <body>
+    <awesome-header>
+      <span>{{ project.name }}</span>
+      <span slot="description">{{ project.description }}</span>
+    </awesome-header>
+    <main>
+      <h2>Welcome to {{ project.name }}</h2>
+      <p>
+        Here's a vanilla custom element: <vanilla-hello-world />
+      </p>
+      <code-block language="js">
+class HelloWorld extends HTMLElement {
+  static get observedAttributes() {
+    return [&quot;my-name&quot;];
+  }
+
+  connectedCallback() {
+    let count = 0;
+    const currentName = this.getAttribute(&quot;my-name&quot;);
+
+    if (!currentName) {
+      this.setAttribute(&quot;my-name&quot;, &quot;World&quot;)
+    }
+
+    this.onclick = () => {
+      this.setAttribute(&quot;my-name&quot;, `Clicked ${++count}x`);
+    };
+  }
+
+  attributeChangedCallback(property, previousValue, currentValue) {
+    if (property === &quot;my-name&quot; && previousValue !== currentValue) {
+      this.innerHTML = `&lt;button style=&quot;cursor:pointer&quot;&gt;Hello ${currentValue}!&lt;/button&gt;`;
+    }
+  }
+}
+      </code-block>
+    </main>
+    <my-footer>
+      <small>A project by <a href="{{ author.url }}">{{ author.name }}</a></small>
+    </my-footer>
+  </body>
+</html>

site/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nitro/types/tsconfig.json"
+}