create-arkajs 1.0.0

package/README.md

@@ -0,0 +1,69 @@
+# create-arkajs
+
+Scaffold tool untuk membuat project **ARKAJS** — mini framework client-side routing menggunakan HTML, CSS, dan JavaScript murni (tanpa dependency lain).
+
+## Cara pakai
+
+```bash
+npx create-arkajs nama-project
+```
+
+atau
+
+```bash
+npm create arkajs nama-project
+```
+
+Ini akan membuat folder `nama-project` berisi struktur lengkap ARKAJS, siap dijalankan.
+
+Kalau tidak diberi nama folder, project akan dibuat di folder aktif:
+
+```bash
+npx create-arkajs
+```
+
+## Setelah itu
+
+Masuk ke folder project lalu jalankan lewat live server (karena pakai `fetch`, butuh HTTP server, tidak bisa dibuka langsung dari `file://`):
+
+```bash
+npx serve
+```
+
+Lalu buka `index.html` lewat browser.
+
+## Struktur project
+
+```
+nama-project/
+├── gaya/           → file CSS
+├── halaman/         → konten halaman (beranda.html, tentang.html, dst)
+├── rancangan/        → komponen layout (header, footer, navbar, sidebar)
+├── logika/          → script tambahan
+├── sistem/          → engine routing (app.js, navigasi.js, kelola.js, rakit.js, rute.json)
+└── index.html
+```
+
+## Menambah rute baru
+
+1. Tambah file HTML baru di folder `halaman/`
+2. Daftarkan di `sistem/rute.json`, contoh:
+
+```json
+"/kontak": {
+  "judul": "Kontak",
+  "header": "header.html",
+  "main": "kontak.html",
+  "css": "gaya.css"
+}
+```
+
+3. Tambahkan link `<a href="/kontak">Kontak</a>` di halaman manapun — routing akan otomatis tertangani.
+
+## Catatan penting
+
+Project ini menggunakan `history.pushState` untuk routing, sehingga saat di-deploy ke hosting statis (misalnya Cloudflare Pages, Netlify, Vercel), pastikan hosting tersebut mendukung **SPA fallback** (semua path tanpa file fisik tetap mengarah ke `index.html`). Beberapa hosting seperti Cloudflare Pages sudah mendukung ini secara otomatis.
+
+## Lisensi
+
+MIT

package/bin/cli.js

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const templateDir = path.join(__dirname, "..", "template");
+const targetArg = process.argv[2];
+const targetDir = targetArg ? path.join(process.cwd(), targetArg) : process.cwd();
+
+function copyFolderSync(src, dest) {
+  if (!fs.existsSync(dest)) fs.mkdirSync(dest, { recursive: true });
+  for (const item of fs.readdirSync(src)) {
+    const srcPath = path.join(src, item);
+    const destPath = path.join(dest, item);
+    if (fs.statSync(srcPath).isDirectory()) {
+      copyFolderSync(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+console.log(`Membuat project ARKAJS di: ${targetDir}`);
+copyFolderSync(templateDir, targetDir);
+console.log("Selesai! Project ARKAJS sudah siap dipakai.");
+console.log("Jalankan dengan live server (misal: npx serve) lalu buka index.html");

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "create-arkajs",
+  "version": "1.0.0",
+  "description": "Scaffold tool untuk membuat project ARKAJS — mini framework client-side routing berbasis HTML/CSS/JS murni",
+  "type": "module",
+  "bin": {
+    "create-arkajs": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "template"
+  ],
+  "keywords": [
+    "arkajs",
+    "router",
+    "spa",
+    "framework",
+    "scaffold",
+    "starter",
+    "vanilla-js"
+  ],
+  "author": "",
+  "license": "MIT",
+  "engines": {
+    "node": ">=14"
+  }
+}

package/template/gaya/gaya.css

@@ -0,0 +1,145 @@
+:root {
+  --bg: #0a8120;
+  --fc: #0b53ae;
+  --dark: #0f172a;
+  --light: #f8fafc;
+  --muted: #64748b;
+  --border: #e2e8f0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: var(--dark);
+  background: var(--light);
+  line-height: 1.6;
+}
+
+/* Header & Navbar */
+.header {
+  background: var(--dark);
+  color: #fff;
+}
+
+.header__inner {
+  max-width: 960px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+}
+
+.logo {
+  color: #fff;
+  font-weight: 700;
+  font-size: 1.3rem;
+  text-decoration: none;
+}
+
+.logo span {
+  color: var(--bg);
+}
+
+.navbar__list {
+  display: flex;
+  gap: 24px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.navbar__list a {
+  color: #cbd5e1;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s;
+}
+
+.navbar__list a:hover {
+  color: #fff;
+}
+
+/* Main content */
+main {
+  display: block;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 40px 20px;
+  min-height: 60vh;
+}
+
+.hero {
+  text-align: center;
+  padding: 40px 0;
+}
+
+.hero h1 {
+  font-size: 2.2rem;
+  margin-bottom: 12px;
+}
+
+.hero p {
+  color: var(--muted);
+  font-size: 1.1rem;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.fitur {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 20px;
+  margin-top: 40px;
+}
+
+.fitur__item {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 20px;
+  background: #fff;
+}
+
+.fitur__item h3 {
+  margin-top: 0;
+  color: var(--fc);
+}
+
+.konten h1 {
+  font-size: 1.8rem;
+}
+
+.konten h2 {
+  font-size: 1.3rem;
+  margin-top: 32px;
+  color: var(--fc);
+}
+
+.konten code {
+  background: #eef2f7;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 0.9em;
+}
+
+.konten pre {
+  background: var(--dark);
+  color: #f8fafc;
+  padding: 16px;
+  border-radius: 8px;
+  overflow-x: auto;
+}
+
+.konten pre code {
+  background: none;
+  color: inherit;
+  padding: 0;
+}
+
+.dok-list {
+  padding-left: 20px;
+}

package/template/halaman/beranda.html

@@ -0,0 +1,19 @@
+<section class="hero">
+  <h1>Selamat Datang di ARKAJS</h1>
+  <p>Mini framework client-side routing yang ringan, tanpa dependency, dan dibangun murni dengan HTML, CSS, dan JavaScript.</p>
+</section>
+
+<section class="fitur">
+  <div class="fitur__item">
+    <h3>Ringan</h3>
+    <p>Tanpa build tool, tanpa dependency tambahan. Tinggal jalan langsung di browser.</p>
+  </div>
+  <div class="fitur__item">
+    <h3>Routing Sederhana</h3>
+    <p>Atur semua rute aplikasi cukup lewat satu file <code>rute.json</code>.</p>
+  </div>
+  <div class="fitur__item">
+    <h3>Modular</h3>
+    <p>Header, footer, navbar, dan halaman dipisah rapi di folder masing-masing.</p>
+  </div>
+</section>

package/template/halaman/dokumentasi.html

@@ -0,0 +1,26 @@
+<section class="konten">
+  <h1>Dokumentasi</h1>
+
+  <h2>Struktur Folder</h2>
+  <ul class="dok-list">
+    <li><strong>gaya/</strong> — file CSS</li>
+    <li><strong>halaman/</strong> — konten setiap halaman</li>
+    <li><strong>rancangan/</strong> — komponen layout (header, footer, navbar, sidebar)</li>
+    <li><strong>sistem/</strong> — engine routing (app.js, navigasi.js, kelola.js, rakit.js, rute.json)</li>
+  </ul>
+
+  <h2>Menambah Halaman Baru</h2>
+  <p>1. Buat file HTML baru di folder <code>halaman/</code>, misalnya <code>kontak.html</code>.</p>
+  <p>2. Daftarkan rutenya di <code>sistem/rute.json</code>:</p>
+  <pre><code>"/kontak": {
+  "judul": "Kontak",
+  "header": "header.html",
+  "main": "kontak.html",
+  "css": "gaya.css"
+}</code></pre>
+  <p>3. Tambahkan link navigasi di header atau halaman manapun:</p>
+  <pre><code>&lt;a href="/kontak"&gt;Kontak&lt;/a&gt;</code></pre>
+
+  <h2>Catatan Deploy</h2>
+  <p>Karena ARKAJS menggunakan <code>history.pushState</code>, pastikan hosting yang digunakan mendukung fallback ke <code>index.html</code> untuk semua path (misalnya Cloudflare Pages, Netlify, atau Vercel).</p>
+</section>

package/template/halaman/tentang.html

@@ -0,0 +1,7 @@
+<section class="konten">
+  <h1>Tentang ARKAJS</h1>
+  <p>ARKAJS dibuat untuk siapa saja yang ingin membangun website dengan routing client-side tanpa perlu belajar framework besar seperti React atau Vue terlebih dahulu.</p>
+  <p>Cukup pahami HTML, CSS, dan JavaScript dasar, dan kamu sudah bisa membangun aplikasi web dengan navigasi antar halaman tanpa reload.</p>
+  <h2>Bagaimana cara kerjanya?</h2>
+  <p>Setiap klik pada link akan dicegat oleh JavaScript, lalu konten halaman akan diganti secara dinamis berdasarkan rute yang terdaftar di <code>rute.json</code> — tanpa perlu memuat ulang halaman dari server.</p>
+</section>

package/template/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="id">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <meta name="description" content="" />
+    <meta name="keywords" content="" />
+    <meta name="robots" content="index,follow" />
+    <meta name="author" content="azqilana" />
+    <meta property="og:title" content="" />
+    <meta property="og:description" content="" />
+    <meta property="og:image" content="" />
+    <title></title>
+    <style id="gaya"></style>
+  </head>
+  <body>
+    <header id="header"></header>
+    <main id="main"></main>
+    <script type="module" src="sistem/app.js"></script>
+  </body>
+</html>

package/template/logika/script.js

@@ -0,0 +1,5 @@
+const h1=document.querySelector('h1')
+h1.addEventListener('click',(e)=>{
+  e.stopPropagation();
+  h1.textContent='Header Nya kan ini'
+  })

package/template/rancangan/header.html

@@ -0,0 +1,12 @@
+<header class="header">
+  <div class="header__inner">
+    <a href="/" class="logo">ARKA<span>JS</span></a>
+    <nav class="navbar">
+      <ul class="navbar__list">
+        <li><a href="/">Beranda</a></li>
+        <li><a href="/tentang">Tentang</a></li>
+        <li><a href="/dokumentasi">Dokumentasi</a></li>
+      </ul>
+    </nav>
+  </div>
+</header>

package/template/sistem/app.js

@@ -0,0 +1,8 @@
+import kelolaNavigasi from "./navigasi.js"
+
+const kelNav=new kelolaNavigasi();
+
+window.addEventListener('DOMContentLoaded',async ()=> kelNav.kelolaW())
+document.addEventListener('click', async (e)=> await kelNav.kelolaKlik(e))
+window.addEventListener('popstate',async ()=>kelNav.kelolaW())
+console.log(window.location.pathname)

package/template/sistem/kelola.js

@@ -0,0 +1,32 @@
+export default class kelolaRute {
+  async cekIsiDataRute() {
+    try {
+      const response = await fetch("sistem/rute.json");
+      const dataRute = await response.json();
+      return dataRute;
+    } catch (error) {
+      console.log("Error:", error);
+    }
+  }
+  async cekRute(rute) {
+    if (rute) {
+      const dataIsiRute = await this.cekIsiDataRute();
+      if (dataIsiRute[rute]) {
+        const dIR=dataIsiRute[rute];
+        const resMain = await fetch(`./halaman/${dIR.main}`);
+        const resHeader = await fetch(`./rancangan/${dIR.header}`);
+        const resCss = await fetch(`./gaya/${dIR.css}`);
+        const isiHeader = await resHeader.text();
+        const isiMain=await resMain.text()
+        const isiCss= await resCss.text()
+        const isiRute={
+          judul:dIR.judul,
+          css: isiCss,
+          header: isiHeader,
+          main: isiMain
+        }
+        return isiRute;
+      }
+    }
+  }
+}

package/template/sistem/navigasi.js

@@ -0,0 +1,29 @@
+import kelolaRute from "./kelola.js";
+import {Rakit} from "./rakit.js"
+
+const kR = new kelolaRute();
+const R= new Rakit();
+
+export default class kelolaNavigasi {
+ async kelolaKlik(e){
+    const el = e.target.closest("a");
+  const w_origin = window.location.origin;
+  if ( el &&el.hasAttribute("href") &&
+    el.getAttribute("href") &&
+    el.origin === w_origin) {
+    const hrefnya = el.getAttribute("href");
+    e.preventDefault();
+    history.pushState(null, "", hrefnya);
+    const hasil=await this.hasilCekRute(hrefnya)
+    }
+  }
+ async kelolaW(){
+    const hrefnya = window.location.pathname
+    const hasil=await this.hasilCekRute(hrefnya)
+  }
+  async hasilCekRute(rute){
+    const hasilRute = await kR.cekRute(rute)
+    R.ambilHasil(hasilRute)
+  }
+  
+}

package/template/sistem/rakit.js

@@ -0,0 +1,27 @@
+
+export class Rakit {
+  ambilHasil(hasil){
+    this.pasangJudul(hasil.judul)
+    this.pasangHeader(hasil.header)
+    this.pasangCss(hasil.css)
+    this.pasangMain(hasil.main)
+  }
+  pasangJudul(judul){
+    document.title=judul
+  }
+  pasangHeader(header){
+    const Header=this.selectEl("#header")
+    Header.innerHTML=header
+  }
+  pasangMain(main){
+    const Main =this.selectEl("#main")
+    Main.innerHTML=main
+  }
+  pasangCss(css){
+    const Css=this.selectEl("#gaya")
+    Css.innerHTML=css
+  }
+  selectEl(selector){
+    return document.querySelector(selector)
+  }
+}

package/template/sistem/rute.json

@@ -0,0 +1,26 @@
+{
+  "/index.html": {
+    "judul": "Dashboard",
+    "header": "header.html",
+    "main": "beranda.html",
+    "css": "gaya.css"
+  },
+  "/": {
+    "judul": "Dashboard",
+    "header": "header.html",
+    "main": "beranda.html",
+    "css": "gaya.css"
+  },
+  "/tentang": {
+    "judul": "Tentang",
+    "header": "header.html",
+    "main": "tentang.html",
+    "css": "gaya.css"
+  },
+  "/dokumentasi": {
+    "judul": "Dokumentasi",
+    "header": "header.html",
+    "main": "dokumentasi.html",
+    "css": "gaya.css"
+  }
+}