From 5170463d0b258281642cadfa1ebf20a3fcf9579d Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Wed, 25 Oct 2023 22:11:43 +0200
Subject: [PATCH] chore: McFly CLI commands section in readme

---
 README.md                 | 19 ++++++++-
 package-lock.json         |  2 +-
 packages/cli/README.md    |  9 ++---
 packages/cli/package.json |  2 +-
 site/README.md            | 83 +++++++++++++++++++++++++--------------
 5 files changed, 78 insertions(+), 37 deletions(-)

diff --git a/README.md b/README.md
index c5534b1..926394d 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@
 
 ## Installation
 
-Run the following to generate a McFly starter project:
+Run the following to generate a McFly starter project.
 ```
 npm create mcfly@latest
 ```
@@ -44,6 +44,23 @@ The time has come for vanilla Web tech. 🎉
 - e.g., `./routes/api/users.ts` can be accessed via `http://<domain>/api/users`
 - TypeScript or JavaScript welcome!
 
+## McFly CLI (In-Progress)
+
+The **McFly CLI** can assist further in scaffolding new projects and building blocks:
+
+```
+npm i -g @mcflyjs/cli
+```
+
+Then, you can run the following **McFly CLI** commands:
+
+| Command | Action |
+| --- | --- |
+| `mcfly new` | Creates a new McFly project. |
+| `mcfly generate` | Generates building blocks for a McFly app. |
+
+
+
 ## McFly config
 
 To tell McFly you want to use components, pass the mode (only `"js"` for now) to the `components` prop mcfly.config.ts
diff --git a/package-lock.json b/package-lock.json
index c9793ad..ca0e744 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3124,7 +3124,7 @@
     },
     "packages/cli": {
       "name": "@mcflyjs/cli",
-      "version": "0.0.1",
+      "version": "0.0.2",
       "license": "MIT",
       "dependencies": {
         "citty": "^0.1.4",
diff --git a/packages/cli/README.md b/packages/cli/README.md
index 5447e76..df4ba42 100644
--- a/packages/cli/README.md
+++ b/packages/cli/README.md
@@ -1,6 +1,5 @@
 # McFly CLI
 
-
 The **McFly CLI** is the command-line tooling for [McFly](https://ayco.io/gh/McFly) -- a no-framework framework that assists in leveraging the web platform.
 
 ## Installation
@@ -11,15 +10,15 @@ Install the CLI using npm:
 npm i -g @mcflyjs/cli
 ```
 
-
-
 ## Commands
 
-You can the following commands
+You can run the following **McFly CLI** commands:
 
 | Command | Action |
 | --- | --- |
-| `mcfly prepare` | prepare the development environment |
+| `mcfly prepare` | Prepares the McFly workspace. |
+| `mcfly new` | Creates a new McFly project. |
+| `mcfly generate` | Generates building blocks for a McFly app. |
 
 ---
 *Just keep building*<br />
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 1302736..6a7581b 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mcflyjs/cli",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "McFly CLI tools",
   "main": "index.js",
   "bin": {
diff --git a/site/README.md b/site/README.md
index c35bcf0..c5534b1 100644
--- a/site/README.md
+++ b/site/README.md
@@ -1,42 +1,67 @@
-# Nitro Minimal Starter
+<p align="center">
+  <img width="250" src="https://github.com/ayoayco/McFly/assets/4262489/719a51c6-4858-4e3c-9856-c5af0e9be1bd" alt="rRick & Morty cartoon" />
+</p>
 
-Look at the [Nitro documentation](https://nitro.unjs.io/) to learn more.
+<h1 align="center">McFly</h1>
 
-## Setup
+<p align="center"><strong>McFly</strong> is a no-framework framework<br />that assists in leveraging the web platform</p>
 
-Make sure to install the dependencies:
+<p align="center">
+  <img src="https://img.shields.io/badge/from-the_future-blue?style=flat" />
+  <img src="https://img.shields.io/badge/status-legit-purple?style=flat" />
+  <a href="https://mc-fly.vercel.app/demo" target="_blank"><img src="https://img.shields.io/badge/see-the_demo_↗️-blue?style=flat&colorB=28CF8D" /></a>
+</p>
 
-```bash
-# npm
-npm install
+## Installation
 
-# yarn
-yarn install
-
-# pnpm
-pnpm install
+Run the following to generate a McFly starter project:
+```
+npm create mcfly@latest
 ```
 
-## Development Server
+## Features
+The time has come for vanilla Web tech. 🎉
 
-Start the development server on <http://localhost:3000>
+✅ 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",
+});
 
-```bash
-npm run dev
 ```
 
-## Production
+## More info
+This framework is a result of [an exploration](https://social.ayco.io/@ayo/111195315785886977) for using [**Nitro**](https://nitro.unjs.io) and vanilla JS custom elements using a minimal [**Web Component Base**](https://ayco.io/n/web-component-base) class.
 
-Build the application for production:
+**Nitro** is the same production-grade web server powering [**Nuxt**](https://nuxt.com/)
 
-```bash
-npm run build
-```
-
-Locally preview production build:
-
-```bash
-npm run preview
-```
-
-Check out the [deployment documentation](https://nitro.unjs.io/deploy) for more information.
+---
+*Just keep building*<br />
+*A project by [Ayo Ayco](https://ayco.io)*