@marcos_aurelio/lumepress 1.0.0

package/README.md

@@ -0,0 +1,294 @@
+# 🚀 LumePress
+
+![npm](https://img.shields.io/npm/v/lumepress)
+![license](https://img.shields.io/npm/l/lumepress)
+![node](https://img.shields.io/node/v/lumepress)
+![status](https://img.shields.io/badge/status-active-success)
+
+**LumePress** é um framework leve para criação de sites estáticos com HTML, componentes reutilizáveis e dados dinâmicos via JSON.
+
+Inspirado em ferramentas modernas como Astro e Next.js (modo estático), o LumePress foca em simplicidade e produtividade.
+
+---
+
+# ✨ Features
+
+* ⚡ Zero configuração
+* 🧩 Componentes HTML (`<lume-*>`)
+* 📄 Sistema de páginas automático
+* 🔥 Hot Reload
+* 📦 Build estático (SSG)
+* 🎯 Estrutura simples e organizada
+
+---
+
+# 📦 Instalação
+
+## Global (recomendado)
+
+```bash
+npm install -g lumepress
+```
+
+## Desenvolvimento local
+
+```bash
+git clone <seu-repo>
+cd lume
+npm link
+```
+
+---
+
+# 🚀 Criando um Projeto
+
+```bash
+lumepress create meu-site
+```
+
+Com template:
+
+```bash
+lumepress create meu-site --template landing
+```
+
+---
+
+# ▶️ Rodando o Projeto
+
+```bash
+cd meu-site
+lumepress dev
+```
+
+Acesse:
+
+```
+http://localhost:3000
+```
+
+---
+
+# 🔥 Hot Reload
+
+O projeto recarrega automaticamente ao salvar:
+
+* pages/
+* components/
+* data/
+* assets/
+
+---
+
+# 🏗️ Estrutura do Projeto
+
+```
+meu-site/
+├── pages/
+│   └── index.html
+├── components/
+│   ├── navbar.html
+│   ├── hero.html
+│   └── footer.html
+├── data/
+│   └── site.json
+├── assets/
+│   └── css/
+```
+
+---
+
+# 📄 Sistema de Páginas
+
+Cada arquivo em `pages/` vira uma rota:
+
+| Arquivo         | URL    |
+| --------------- | ------ |
+| index.html      | /      |
+| sobre.html      | /sobre |
+| blog/index.html | /blog  |
+
+---
+
+# 🧩 Componentes
+
+Crie componentes em:
+
+```
+components/
+```
+
+Exemplo:
+
+```html
+<!-- components/hero.html -->
+<section>
+  <h1>{{hero.title}}</h1>
+</section>
+```
+
+Uso:
+
+```html
+<lume-hero></lume-hero>
+```
+
+---
+
+# 📊 Dados Dinâmicos
+
+Arquivo:
+
+```
+data/site.json
+```
+
+Exemplo:
+
+```json
+{
+  "site": {
+    "name": "Minha Empresa",
+    "footer": "Todos os direitos reservados"
+  },
+  "hero": {
+    "title": "Bem-vindo",
+    "subtitle": "Meu site com LumePress",
+    "cta": "Começar"
+  }
+}
+```
+
+Uso:
+
+```html
+<h1>{{hero.title}}</h1>
+<p>{{hero.subtitle}}</p>
+```
+
+---
+
+# ⚙️ Como Funciona
+
+No modo **dev**:
+
+* HTML é servido
+* Componentes são carregados via JS
+* Dados são aplicados em runtime
+
+No **build**:
+
+* HTML final é gerado
+* Sem dependência de JS
+* Pronto para produção
+
+---
+
+# 📦 Build para Produção
+
+```bash
+lumepress build
+```
+
+Gera:
+
+```
+dist/
+```
+
+---
+
+# 🌐 Preview
+
+```bash
+lumepress preview
+```
+
+Acesse:
+
+```
+http://localhost:4173
+```
+
+---
+
+# 🧠 Dev vs Build
+
+| Ambiente | Comportamento         |
+| -------- | --------------------- |
+| dev      | renderização dinâmica |
+| build    | HTML estático final   |
+
+---
+
+# 🎨 Templates
+
+Templates disponíveis:
+
+* default
+* landing
+
+Criar com template:
+
+```bash
+lumepress create site --template landing
+```
+
+---
+
+# 🛠️ Comandos
+
+```bash
+lumepress create <nome>
+lumepress dev <pasta>
+lumepress build <pasta>
+lumepress preview <pasta>
+```
+
+---
+
+# ⚠️ Boas práticas
+
+✔ Sempre manter `data/site.json`
+✔ Usar paths diretos:
+
+```html
+{{hero.title}}
+{{site.name}}
+```
+
+❌ Evitar:
+
+```html
+{{content.hero.title}}
+```
+
+---
+
+# 🚀 Roadmap
+
+* Layouts globais
+* Props em componentes
+* Plugins
+* CLI avançado
+* Marketplace de templates
+
+---
+
+# 🤝 Contribuição
+
+Pull requests são bem-vindos.
+
+---
+
+# 📄 Licença
+
+MIT
+
+---
+
+# 👨‍💻 Autor
+
+Marcos Aurelio 🚀
+
+---

package/build.js

@@ -0,0 +1,80 @@
+import fs from "fs";
+import path from "path";
+
+function resolvePath(obj, pathStr) {
+    return pathStr.split(".").reduce((o, k) => o?.[k], obj);
+}
+
+function renderData(html, data) {
+    return html.replace(/\{\{(.*?)\}\}/g, (_, key) => {
+        const value = resolvePath(data, key.trim());
+        return value ?? "";
+    });
+}
+
+async function renderComponents(html, componentsPath) {
+    const regex = /<lume-(.*?)><\/lume-\1>/g;
+
+    let match;
+
+    while ((match = regex.exec(html)) !== null) {
+        const componentName = match[1];
+        const componentFile = path.join(componentsPath, `${componentName}.html`);
+
+        if (fs.existsSync(componentFile)) {
+            const componentHtml = fs.readFileSync(componentFile, "utf-8");
+            html = html.replace(match[0], componentHtml);
+        }
+    }
+
+    return html;
+}
+
+function removeDevScripts(html) {
+    html = html.replace(/\n?\s*<!--\s*Engine do Framework\s*-->\s*\n?\s*<script[^>]*src="\/engine\/core\.js"[^>]*><\/script>\s*\n?/g, "\n")
+    html = html.replace(/\n?\s*<!--\s*Hot reload\s*-->\s*\n?\s*<script[^>]*src="\/engine\/hotreload\.js"[^>]*><\/script>\s*\n?/g, "\n")
+
+    return html;
+}
+
+export async function build(sitePath) {
+    const pagesPath = path.join(sitePath, "pages");
+    const componentsPath = path.join(sitePath, "components");
+    const dataPath = path.join(sitePath, "data", "site.json");
+    const distPath = path.join(sitePath, "dist");
+
+    if (fs.existsSync(distPath)) {
+        fs.rmSync(distPath, {
+            recursive: true,
+            force: true
+        });
+    }
+
+    fs.mkdirSync(distPath);
+
+    const data = JSON.parse(fs.readFileSync(dataPath, "utf-8"));
+    const pages = fs.readdirSync(pagesPath);
+
+    for (const page of pages) {
+        const pagePath = path.join(pagesPath, page);
+
+        if (!page.endsWith(".html")) continue;
+
+        let html = fs.readFileSync(pagePath, "utf-8");
+
+        html = await renderComponents(html, componentsPath);
+        html = renderData(html, data);
+        html = removeDevScripts(html);
+
+        fs.writeFileSync(path.join(distPath, page), html);
+    }
+
+    const assetsSrc = path.join(sitePath, "assets");
+    const assetsDest = path.join(distPath, "assets");
+
+    if (fs.existsSync(assetsSrc)) {
+        fs.cpSync(assetsSrc, assetsDest, { recursive: true });
+    }
+
+    console.log("Build concluído!");
+}

package/cli.js

@@ -0,0 +1,137 @@
+#!/usr/bin/env node
+import fs from "fs";
+import path from "path";
+import readline from "readline";
+import { fileURLToPath } from "url";
+import { startPreview } from "./preview.js";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const command = process.argv[2];
+const projectName = process.argv[3];
+
+let templateName = "default";
+
+const templateIndex = process.argv.indexOf("--template");
+if (templateIndex !== -1) {
+    templateName = process.argv[templateIndex + 1];
+}
+
+// ================= CREATE =================
+function createProject() {
+    if (!projectName) {
+        console.log("Uso: lumepress create <nome-do-projeto>");
+        process.exit();
+    }
+
+    const rl = readline.createInterface({
+        input: process.stdin,
+        output: process.stdout
+    });
+
+    rl.question("Nome da Empresa: ", (companyName) => {
+
+        const templatePath = path.join(__dirname, "templates", templateName);
+        const projectPath = path.join(process.cwd(), projectName);
+
+        if (!fs.existsSync(templatePath)) {
+            console.log(`Template "${templateName}" não encontrado.`);
+            process.exit();
+        }
+
+        if (fs.existsSync(projectPath)) {
+            console.log("A pasta já existe.");
+            process.exit();
+        }
+
+        fs.cpSync(templatePath, projectPath, { recursive: true });
+
+        const dataPath = path.join(projectPath, "data", "site.json");
+
+        if (fs.existsSync(dataPath)) {
+            const data = JSON.parse(fs.readFileSync(dataPath, "utf-8"));
+
+            data.seo = data.seo || {};
+            data.site = data.site || {};
+            data.hero = data.hero || {};
+
+            data.seo.title = companyName;
+            data.site.name = companyName;
+            data.hero.title = `Bem vindo à ${companyName}`;
+
+            fs.writeFileSync(dataPath, JSON.stringify(data, null, 2));
+        }
+
+        console.log(`Projeto ${projectName} criado com sucesso 🚀`);
+
+        rl.close();
+    });
+}
+
+// ================= DEV =================
+async function startDev() {
+    const sitePath = projectName
+        ? path.resolve(process.cwd(), projectName)
+        : process.cwd();
+
+    const dev = await import("./dev.js");
+
+    dev.start(sitePath);
+}
+
+// ================= BUILD =================
+async function buildProject() {
+    const sitePath = projectName
+        ? path.resolve(process.cwd(), projectName)
+        : process.cwd();
+
+    const builder = await import("./build.js");
+
+    await builder.build(sitePath);
+}
+
+// ================= PREVIEW =================
+async function previewProject() {
+    const sitePath = projectName
+        ? path.resolve(process.cwd(), projectName)
+        : process.cwd();
+
+    const builder = await import("./build.js");
+
+    await builder.build(sitePath);
+
+    const distPath = path.join(sitePath, "dist");
+
+    startPreview(distPath);
+}
+
+// ================= ROUTER =================
+if (command === "create") {
+    createProject();
+}
+else if (command === "dev") {
+    startDev();
+}
+else if (command === "build") {
+    buildProject();
+}
+else if (command === "preview") {
+    previewProject();
+}
+else {
+    console.log(`
+        LumePress CLI
+
+        Comandos:
+
+        lumepress create <nome>
+        lumepress dev <pasta>
+        lumepress build <pasta>
+        lumepress preview <pasta>
+
+        Ex:
+        lumepress create meu-site
+        lumepress dev meu-site
+`);
+}

package/dev.js

@@ -0,0 +1,90 @@
+import express from "express";
+import { WebSocketServer } from "ws";
+import chokidar from "chokidar";
+import http from "http";
+import path from "path";
+import fs from "fs";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export function start(sitePath) {
+
+    const app = express();
+    const server = http.createServer(app);
+
+    let PORT = 3000;
+
+    const pagesPath = path.join(sitePath, "pages");
+
+    const enginePath = path.join(__dirname, "engine");
+
+    app.use("/assets", express.static(path.join(sitePath, "assets")));
+    app.use("/components", express.static(path.join(sitePath, "components")));
+    app.use("/data", express.static(path.join(sitePath, "data")));
+
+    app.use("/engine", express.static(enginePath));
+
+    // ================= ROUTING =================
+    app.get("*", (req, res) => {
+
+        let route = req.path;
+
+        if (route === "/") {
+            route = "/index";
+        }
+
+        // 1️⃣ /pages/sobre.html
+        let filePath = path.join(pagesPath, `${route}.html`);
+
+        // 2️⃣ /pages/sobre/index.html
+        if (!fs.existsSync(filePath)) {
+            filePath = path.join(pagesPath, route, "index.html");
+        }
+
+        // 3️⃣ fallback index
+        if (!fs.existsSync(filePath)) {
+            const fallback = path.join(pagesPath, "index.html");
+
+            if (fs.existsSync(fallback)) {
+                return res.sendFile(fallback);
+            }
+
+            return res.status(404).send("Página não encontrada");
+        }
+
+        res.sendFile(filePath);
+    });
+
+    // ================= HOT RELOAD =================
+    const wss = new WebSocketServer({ server });
+
+    const watcher = chokidar.watch(sitePath, {
+        ignoreInitial: true
+    });
+
+    watcher.on("change", () => {
+        console.log("🔥 Reload");
+
+        wss.clients.forEach(client => {
+            client.send("reload");
+        });
+    });
+
+    // ================= START =================
+    function startServer(port) {
+        server.listen(port, () => {
+            console.log("🚀 LumePress Dev Server");
+            console.log(`👉 http://localhost:${port}`);
+        })
+            .on("error", (err) => {
+                if (err.code === "EADDRINUSE") {
+                    console.log(`Porta ${port} ocupada, tentando ${port + 1}`);
+                    startServer(port + 1);
+                }
+            });
+    }
+
+    startServer(PORT);
+}

package/engine/core.js

@@ -0,0 +1,51 @@
+async function loadComponents() {
+    const elements = document.querySelectorAll("*");
+
+    for (const element of elements) {
+        const tag = element.tagName.toLocaleLowerCase();
+
+        if (tag.startsWith("lume-")) {
+            const component = tag.replace("lume-", "");
+            const response = await fetch(`/components/${component}.html`);
+
+            if (!response.ok) continue;
+
+            const html = await response.text();
+
+            element.innerHTML = html;
+        }
+    }
+}
+
+async function loadData() {
+    const response = await fetch("/data/site.json");
+    return await response.json();
+}
+
+function resolvePath(obj, path) {
+    return path.split(".").reduce((o, k) => o?.[k], obj);
+}
+
+function renderData(data) {
+    const walker = document.createTreeWalker(
+        document.documentElement,
+        NodeFilter.SHOW_TEXT
+    );
+
+    let node;
+
+    while (node = walker.nextNode()) {
+        node.textContent = node.textContent.replace(/\{\{(.*?)\}\}/g, (match, key) => {
+            const value = resolvePath(data, key.trim());
+            return value ?? "";
+        });
+    }
+}
+
+async function init() {
+    await loadComponents();
+    const data = await loadData();
+    renderData(data);
+}
+
+document.addEventListener("DOMContentLoaded", init);

package/engine/hotreload.js

@@ -0,0 +1,7 @@
+const socket = new WebSocket(`ws://${location.host}`);
+
+socket.addEventListener("message", (event) => {
+    if (event.data === "reload") {
+        location.reload();
+    }
+});

package/engine/renderer.js

@@ -0,0 +1,23 @@
+export function renderContent(data) {
+    let html = document.body.innerHTML;
+    const matches = html.match(/{{(.*?)}}/g);
+
+    if (!matches) return;
+
+    matches.forEach(tag => {
+        const path = tag.replace("{{", "").replace("}}", "").trim();
+        const value = getValueFromPath(data, path);
+
+        if (value) {
+            html = html.replaceAll(tag, value);
+        }
+    });
+
+    document.body.innerHTML = html;
+}
+
+function getValueFromPath(obj, path) {
+    return path.split(".").reduce((acc, part) => {
+        return acc ? acc[part] : undefined;
+    }, obj);
+}

package/engine/seo.js

@@ -0,0 +1,13 @@
+export function applySEO(data) {
+    if (!data.seo) return;
+
+    if (data.seo.title) {
+        document.title = data.seo.title;
+    }
+
+    const description = document.querySelector('meta[name="description"]');
+
+    if (description && data.seo.description) {
+        description.setAttribute("content", data.seo.description);
+    }
+}