create-medan-app 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import { existsSync, mkdirSync, readdirSync, writeFileSync } from "node:fs";
 import { resolve } from "node:path";
-import { GITIGNORE, MAIN_MEDAN, packageJson, readme } from "./templates.js";
+import { DEV_MJS, GITIGNORE, mainMedan, packageJson, readme } from "./templates.js";
 function isValidPackageName(name) {
     return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(name);
 }
@@ -22,13 +22,16 @@ function main() {
     }
     mkdirSync(targetDir, { recursive: true });
     writeFileSync(resolve(targetDir, "package.json"), packageJson(rawName));
-    writeFileSync(resolve(targetDir, "main.medan"), MAIN_MEDAN);
+    writeFileSync(resolve(targetDir, "main.medan"), mainMedan(rawName));
+    writeFileSync(resolve(targetDir, "dev.mjs"), DEV_MJS);
     writeFileSync(resolve(targetDir, "README.md"), readme(rawName));
     writeFileSync(resolve(targetDir, ".gitignore"), GITIGNORE);
     console.log(`mantap kali! project '${rawName}' udah jadi.\n`);
     console.log("langkah selanjutnya:\n");
     console.log(`  cd ${rawName}`);
     console.log("  npm install");
-    console.log("  npm start");
+    console.log("  npm run dev   # auto-regenerate tiap main.medan disave");
+    console.log("  # atau: npm start   # generate sekali doang");
+    console.log("  # terus buka landing.html di browser");
 }
 main();

package/dist/templates.js

@@ -4,54 +4,170 @@ export function packageJson(name) {
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "medan main.medan"
+    "start": "medan main.medan",
+    "dev": "node dev.mjs"
   },
   "dependencies": {
-    "medan-language": "^0.1.2"
+    "medan-language": "^0.1.3"
   }
 }
 `;
 }
-export const MAIN_MEDAN = `// selamat datang di Medan-lang!
-// jalanin dengan: npm start
-
-// variabel
-modal nama = "Medan"
-bilang "Horas, " + nama + "!"
-
-// percabangan
-modal umur = 21
-kalo umur > 17
-  bilang "Udah gede kali umur lu"
-kalo gak
-  bilang "Masih bocil"
+export const DEV_MJS = `// dev.mjs
+// "npm run dev" jalanin file ini: generate landing.html sekali, terus
+// nungguin main.medan berubah dan regenerate otomatis tiap disave.
+
+import { spawnSync } from "node:child_process";
+import { watch } from "node:fs";
+
+function build() {
+  console.log("\\n[medan] generate landing.html ...");
+  const result = spawnSync("medan", ["main.medan"], { stdio: "inherit" });
+  if (result.status !== 0) {
+    console.error("[medan] ada error di atas, benerin dulu terus save lagi.");
+  }
+}
+
+build();
+console.log("[medan] mantau main.medan, ctrl+c buat berhenti...");
+
+let timer;
+watch("main.medan", () => {
+  clearTimeout(timer);
+  timer = setTimeout(build, 100);
+});
+`;
+export function mainMedan(name) {
+    return `// main.medan
+// Ini titik masuk project "${name}" kamu.
+// "npm start" jalanin file ini, yang nge-generate landing.html.
+// Edit di bawah, jalanin lagi "npm start", terus refresh landing.html di browser.
+
+bikin css()
+  balikin "
+<style>
+  :root {
+    --bg: #1B120D;
+    --bg-2: #241A13;
+    --bg-3: #2E2117;
+    --ink: #F5EDE2;
+    --ink-dim: #C9B8A6;
+    --chili: #E4402A;
+    --chili-ink: #FFEDE9;
+    --turmeric: #F2B705;
+    --daun: #7FAE84;
+    --line: rgba(245,237,226,0.14);
+    --shadow: rgba(10,6,3,0.5);
+  }
+  @media (prefers-color-scheme: light) {
+    :root:not([data-theme='dark']) {
+      --bg: #F7EEDD; --bg-2: #FFFAF0; --bg-3: #FDF1DA;
+      --ink: #2A1B12; --ink-dim: #6B5645;
+      --chili: #C7301C; --chili-ink: #FFF6F4; --turmeric: #93690A; --daun: #3E6B45;
+      --line: rgba(42,27,18,0.14); --shadow: rgba(42,27,18,0.16);
+    }
+  }
+  :root[data-theme='light'] {
+    --bg: #F7EEDD; --bg-2: #FFFAF0; --bg-3: #FDF1DA;
+    --ink: #2A1B12; --ink-dim: #6B5645;
+    --chili: #C7301C; --chili-ink: #FFF6F4; --turmeric: #93690A; --daun: #3E6B45;
+    --line: rgba(42,27,18,0.14); --shadow: rgba(42,27,18,0.16);
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
+  .page { max-width: 880px; margin: 0 auto; padding: 0 24px 80px; }
+  code, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
+  h1, h2 { font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; text-wrap: balance; margin: 0; }
+  .eyebrow { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: var(--turmeric); margin: 0 0 12px; }
+  .hero { padding: 72px 0 40px; }
+  h1.headline { font-size: clamp(34px, 6vw, 58px); line-height: 1.02; text-shadow: 3px 3px 0 var(--shadow); }
+  h1.headline span { color: var(--chili); }
+  .lede { max-width: 60ch; font-size: 17px; line-height: 1.6; color: var(--ink-dim); margin: 18px 0 0; }
+  section { padding: 44px 0; border-top: 1px solid var(--line); }
+  section h2 { font-size: clamp(22px, 3.4vw, 30px); margin-bottom: 20px; }
+  .step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
+  .step-list li { display: flex; gap: 16px; align-items: flex-start; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
+  .step-no { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--turmeric); color: var(--bg); font-family: 'JetBrains Mono', monospace; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; }
+  .step-list strong { display: block; margin-bottom: 4px; font-size: 14.5px; }
+  .step-list code { display: inline-block; background: var(--bg-3); padding: 3px 7px; border-radius: 5px; font-size: 12.5px; }
+  .kw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
+  .kw-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
+  .kw-card h3 { font-family: 'JetBrains Mono', monospace; color: var(--chili); font-size: 15px; margin: 0 0 6px; }
+  .kw-card p { margin: 0; color: var(--ink-dim); font-size: 13px; }
+  .footer { color: var(--ink-dim); font-size: 13.5px; font-family: 'JetBrains Mono', monospace; }
+  .footer a { color: var(--turmeric); }
+</style>
+"
 siap
 
-// fungsi
-bikin tambah(a, b)
-  balikin a + b
+modal fontLink = "<link rel='preconnect' href='https://fonts.googleapis.com'><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'>"
+
+bikin hero()
+  balikin "
+<header class='hero'>
+  <p class='eyebrow'>project baru, rasa Medan</p>
+  <h1 class='headline'>SELAMAT DATANG DI<br><span>${name}</span></h1>
+  <p class='lede'>Halaman ini di-generate langsung oleh main.medan pake Medan-lang. Edit file itu, jalanin \\"npm start\\" lagi, terus refresh halaman ini.</p>
+</header>
+"
 siap
 
-bilang "5 + 7 = " + tambah(5, 7)
+bikin stepItem(nomor, judul, kode)
+  balikin "<li><span class='step-no'>" + nomor + "</span><div><strong>" + judul + "</strong><code>" + kode + "</code></div></li>"
+siap
+
+bikin stepsSection()
+  modal items = []
+  tambahin(items, stepItem(1, "Edit kode kamu", "main.medan"))
+  tambahin(items, stepItem(2, "Generate ulang", "npm start"))
+  tambahin(items, stepItem(3, "Liat hasilnya", "buka landing.html di browser"))
+
+  balikin "
+<section>
+  <h2>Mulai Dari Sini</h2>
+  <ol class='step-list'>" + gabung(items, "") + "</ol>
+</section>
+"
+siap
 
-// while (gas)
-modal i = 0
-gas i < 3
-  bilang "gas ke " + i
-  i = i + 1
+bikin kwCard(nama, arti)
+  balikin "<div class='kw-card'><h3>" + nama + "</h3><p>" + arti + "</p></div>"
 siap
 
-// ulang N kali
-ulang 3 kali
-  bilang "mantap kali!"
+bikin cheatsheetSection()
+  modal cards = []
+  tambahin(cards, kwCard("modal", "deklarasi variabel"))
+  tambahin(cards, kwCard("bilang", "cetak / print"))
+  tambahin(cards, kwCard("kalo / kalo gak", "if / else"))
+  tambahin(cards, kwCard("gas", "while"))
+  tambahin(cards, kwCard("ulang ... kali", "repeat N kali"))
+  tambahin(cards, kwCard("bikin / balikin", "fungsi / return"))
+  tambahin(cards, kwCard("mantap / lembek", "true / false"))
+  tambahin(cards, kwCard("kosong", "null"))
+  tambahin(cards, kwCard("[ ... ]", "array / list"))
+
+  balikin "
+<section>
+  <h2>Contekan Keyword</h2>
+  <div class='kw-grid'>" + gabung(cards, "") + "</div>
+</section>
+"
 siap
 
-// array/list
-modal buah = ["mangga", "jeruk", "apel"]
-tambahin(buah, "duren")
-bilang buah
-bilang "panjang buah: " + panjang(buah)
+bikin footerSection()
+  balikin "
+<footer class='footer'>
+  <p>Dibuat pake <a href='https://www.npmjs.com/package/create-medan-app'>create-medan-app</a> &middot; powered by <a href='https://www.npmjs.com/package/medan-language'>medan-language</a></p>
+</footer>
+"
+siap
+
+modal halaman = "<title>${name}</title>" + fontLink + css() + "<div class='page'>" + hero() + stepsSection() + cheatsheetSection() + footerSection() + "</div>"
+
+tulis("landing.html", halaman)
+bilang "landing.html kelar digenerate. buka file itu di browser lu."
 `;
+}
 export function readme(name) {
     return `# ${name}
 
@@ -61,9 +177,15 @@ Project Medan-lang, di-scaffold pakai \`create-medan-app\`.
 
 \`\`\`bash
 npm install
-npm start
+npm run dev
 \`\`\`
 
+\`npm run dev\` generate \`landing.html\` terus mantau \`main.medan\` — tiap kamu
+save, otomatis di-generate ulang. Buka \`landing.html\` di browser, refresh
+manual tiap abis edit & save.
+
+Mau generate sekali doang tanpa watch mode, pakai \`npm start\`.
+
 ## Belajar lebih lanjut
 
 Referensi lengkap bahasa Medan-lang (semua keyword, tipe data, contoh) ada
@@ -71,4 +193,5 @@ di: https://www.npmjs.com/package/medan-language
 `;
 }
 export const GITIGNORE = `node_modules/
+landing.html
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-medan-app",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Scaffold project Medan-lang baru, kayak 'npx create-next-app'.",
   "author": "Wilbert Law",
   "license": "MIT",