create-arkajs 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-arkajs",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Scaffold tool untuk membuat project ARKAJS — mini framework client-side routing berbasis HTML/CSS/JS murni",
   "type": "module",
   "bin": {
@@ -19,8 +19,16 @@
     "starter",
     "vanilla-js"
   ],
-  "author": "",
+  "author": "azqilana",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/azqilana/arkajs.git"
+  },
+  "homepage": "https://github.com/azqilana/arkajs#readme",
+  "bugs": {
+    "url": "https://github.com/azqilana/arkajs/issues"
+  },
   "engines": {
     "node": ">=14"
   }

package/template/gaya/gaya.css

@@ -143,3 +143,40 @@ main {
 .dok-list {
   padding-left: 20px;
 }
+
+/* Sidebar */
+.sidebar {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px 20px;
+}
+
+.sidebar h4 {
+  margin: 0 0 8px;
+  color: var(--fc);
+}
+
+.sidebar ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 16px;
+}
+
+.sidebar a {
+  color: var(--muted);
+  text-decoration: none;
+}
+
+.sidebar a:hover {
+  color: var(--fc);
+}
+
+/* Footer */
+.footer {
+  border-top: 1px solid var(--border);
+  text-align: center;
+  padding: 20px;
+  color: var(--muted);
+  font-size: 0.9rem;
+}

package/template/rancangan/footer.html

@@ -0,0 +1,3 @@
+<footer class="footer">
+  <p>&copy; 2026 ARKAJS. Dibangun dengan HTML, CSS, dan JavaScript murni.</p>
+</footer>

package/template/rancangan/header.html

@@ -1,12 +1,5 @@
 <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/rancangan/navbar.html

@@ -0,0 +1,7 @@
+<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>

package/template/rancangan/sidebar.html

@@ -0,0 +1,8 @@
+<aside class="sidebar">
+  <h4>Menu</h4>
+  <ul>
+    <li><a href="/">Beranda</a></li>
+    <li><a href="/tentang">Tentang</a></li>
+    <li><a href="/dokumentasi">Dokumentasi</a></li>
+  </ul>
+</aside>

package/template/sistem/kelola.js

@@ -29,4 +29,17 @@ export default class kelolaRute {
       }
     }
   }
+  async cekStatis() {
+    try {
+      const resNavbar = await fetch("./rancangan/navbar.html");
+      const resSidebar = await fetch("./rancangan/sidebar.html");
+      const resFooter = await fetch("./rancangan/footer.html");
+      const navbar = await resNavbar.text();
+      const sidebar = await resSidebar.text();
+      const footer = await resFooter.text();
+      return { navbar, sidebar, footer };
+    } catch (error) {
+      console.log("Error:", error);
+    }
+  }
 }

package/template/sistem/navigasi.js

@@ -5,6 +5,13 @@ const kR = new kelolaRute();
 const R= new Rakit();
 
 export default class kelolaNavigasi {
+  statisDimuat = false
+  async muatStatis(){
+    if(this.statisDimuat) return
+    const statis = await kR.cekStatis()
+    if(statis) R.ambilStatis(statis)
+    this.statisDimuat = true
+  }
  async kelolaKlik(e){
     const el = e.target.closest("a");
   const w_origin = window.location.origin;
@@ -18,6 +25,7 @@ export default class kelolaNavigasi {
     }
   }
  async kelolaW(){
+    await this.muatStatis()
     const hrefnya = window.location.pathname
     const hasil=await this.hasilCekRute(hrefnya)
   }

package/template/sistem/rakit.js

@@ -1,17 +1,33 @@
 
 export class Rakit {
+  constructor(){
+    this.navbarHtml = "";
+    this.statisDipasang = false;
+  }
   ambilHasil(hasil){
     this.pasangJudul(hasil.judul)
     this.pasangHeader(hasil.header)
     this.pasangCss(hasil.css)
     this.pasangMain(hasil.main)
   }
+  ambilStatis(statis){
+    this.navbarHtml = statis.navbar || "";
+    if(!this.statisDipasang){
+      this.pasangSidebar(statis.sidebar)
+      this.pasangFooter(statis.footer)
+      this.statisDipasang = true
+    }
+  }
   pasangJudul(judul){
     document.title=judul
   }
   pasangHeader(header){
     const Header=this.selectEl("#header")
     Header.innerHTML=header
+    if(this.navbarHtml){
+      const target = Header.querySelector(".header__inner") || Header
+      target.insertAdjacentHTML("beforeend", this.navbarHtml)
+    }
   }
   pasangMain(main){
     const Main =this.selectEl("#main")
@@ -21,7 +37,16 @@ export class Rakit {
     const Css=this.selectEl("#gaya")
     Css.innerHTML=css
   }
+  pasangSidebar(sidebar){
+    if(!sidebar) return
+    const Main=this.selectEl("#main")
+    Main.insertAdjacentHTML("afterend", sidebar)
+  }
+  pasangFooter(footer){
+    if(!footer) return
+    document.body.insertAdjacentHTML("beforeend", footer)
+  }
   selectEl(selector){
     return document.querySelector(selector)
   }
-}
+}