create-medan-app 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +3 -2
- package/dist/templates.js +126 -30
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
2
|
import { existsSync, mkdirSync, readdirSync, writeFileSync } from "node:fs";
|
|
3
3
|
import { resolve } from "node:path";
|
|
4
|
-
import { GITIGNORE,
|
|
4
|
+
import { GITIGNORE, mainMedan, packageJson, readme } from "./templates.js";
|
|
5
5
|
function isValidPackageName(name) {
|
|
6
6
|
return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(name);
|
|
7
7
|
}
|
|
@@ -22,7 +22,7 @@ function main() {
|
|
|
22
22
|
}
|
|
23
23
|
mkdirSync(targetDir, { recursive: true });
|
|
24
24
|
writeFileSync(resolve(targetDir, "package.json"), packageJson(rawName));
|
|
25
|
-
writeFileSync(resolve(targetDir, "main.medan"),
|
|
25
|
+
writeFileSync(resolve(targetDir, "main.medan"), mainMedan(rawName));
|
|
26
26
|
writeFileSync(resolve(targetDir, "README.md"), readme(rawName));
|
|
27
27
|
writeFileSync(resolve(targetDir, ".gitignore"), GITIGNORE);
|
|
28
28
|
console.log(`mantap kali! project '${rawName}' udah jadi.\n`);
|
|
@@ -30,5 +30,6 @@ function main() {
|
|
|
30
30
|
console.log(` cd ${rawName}`);
|
|
31
31
|
console.log(" npm install");
|
|
32
32
|
console.log(" npm start");
|
|
33
|
+
console.log(" # terus buka landing.html di browser");
|
|
33
34
|
}
|
|
34
35
|
main();
|
package/dist/templates.js
CHANGED
|
@@ -12,46 +12,137 @@ export function packageJson(name) {
|
|
|
12
12
|
}
|
|
13
13
|
`;
|
|
14
14
|
}
|
|
15
|
-
export
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
//
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
15
|
+
export function mainMedan(name) {
|
|
16
|
+
return `// main.medan
|
|
17
|
+
// Ini titik masuk project "${name}" kamu.
|
|
18
|
+
// "npm start" jalanin file ini, yang nge-generate landing.html.
|
|
19
|
+
// Edit di bawah, jalanin lagi "npm start", terus refresh landing.html di browser.
|
|
20
|
+
|
|
21
|
+
bikin css()
|
|
22
|
+
balikin "
|
|
23
|
+
<style>
|
|
24
|
+
:root {
|
|
25
|
+
--bg: #1B120D;
|
|
26
|
+
--bg-2: #241A13;
|
|
27
|
+
--bg-3: #2E2117;
|
|
28
|
+
--ink: #F5EDE2;
|
|
29
|
+
--ink-dim: #C9B8A6;
|
|
30
|
+
--chili: #E4402A;
|
|
31
|
+
--chili-ink: #FFEDE9;
|
|
32
|
+
--turmeric: #F2B705;
|
|
33
|
+
--daun: #7FAE84;
|
|
34
|
+
--line: rgba(245,237,226,0.14);
|
|
35
|
+
--shadow: rgba(10,6,3,0.5);
|
|
36
|
+
}
|
|
37
|
+
@media (prefers-color-scheme: light) {
|
|
38
|
+
:root:not([data-theme='dark']) {
|
|
39
|
+
--bg: #F7EEDD; --bg-2: #FFFAF0; --bg-3: #FDF1DA;
|
|
40
|
+
--ink: #2A1B12; --ink-dim: #6B5645;
|
|
41
|
+
--chili: #C7301C; --chili-ink: #FFF6F4; --turmeric: #93690A; --daun: #3E6B45;
|
|
42
|
+
--line: rgba(42,27,18,0.14); --shadow: rgba(42,27,18,0.16);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
:root[data-theme='light'] {
|
|
46
|
+
--bg: #F7EEDD; --bg-2: #FFFAF0; --bg-3: #FDF1DA;
|
|
47
|
+
--ink: #2A1B12; --ink-dim: #6B5645;
|
|
48
|
+
--chili: #C7301C; --chili-ink: #FFF6F4; --turmeric: #93690A; --daun: #3E6B45;
|
|
49
|
+
--line: rgba(42,27,18,0.14); --shadow: rgba(42,27,18,0.16);
|
|
50
|
+
}
|
|
51
|
+
* { box-sizing: border-box; }
|
|
52
|
+
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
|
|
53
|
+
.page { max-width: 880px; margin: 0 auto; padding: 0 24px 80px; }
|
|
54
|
+
code, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
|
|
55
|
+
h1, h2 { font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; text-wrap: balance; margin: 0; }
|
|
56
|
+
.eyebrow { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: var(--turmeric); margin: 0 0 12px; }
|
|
57
|
+
.hero { padding: 72px 0 40px; }
|
|
58
|
+
h1.headline { font-size: clamp(34px, 6vw, 58px); line-height: 1.02; text-shadow: 3px 3px 0 var(--shadow); }
|
|
59
|
+
h1.headline span { color: var(--chili); }
|
|
60
|
+
.lede { max-width: 60ch; font-size: 17px; line-height: 1.6; color: var(--ink-dim); margin: 18px 0 0; }
|
|
61
|
+
section { padding: 44px 0; border-top: 1px solid var(--line); }
|
|
62
|
+
section h2 { font-size: clamp(22px, 3.4vw, 30px); margin-bottom: 20px; }
|
|
63
|
+
.step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
|
|
64
|
+
.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; }
|
|
65
|
+
.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; }
|
|
66
|
+
.step-list strong { display: block; margin-bottom: 4px; font-size: 14.5px; }
|
|
67
|
+
.step-list code { display: inline-block; background: var(--bg-3); padding: 3px 7px; border-radius: 5px; font-size: 12.5px; }
|
|
68
|
+
.kw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
|
|
69
|
+
.kw-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
|
|
70
|
+
.kw-card h3 { font-family: 'JetBrains Mono', monospace; color: var(--chili); font-size: 15px; margin: 0 0 6px; }
|
|
71
|
+
.kw-card p { margin: 0; color: var(--ink-dim); font-size: 13px; }
|
|
72
|
+
.footer { color: var(--ink-dim); font-size: 13.5px; font-family: 'JetBrains Mono', monospace; }
|
|
73
|
+
.footer a { color: var(--turmeric); }
|
|
74
|
+
</style>
|
|
75
|
+
"
|
|
28
76
|
siap
|
|
29
77
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
78
|
+
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'>"
|
|
79
|
+
|
|
80
|
+
bikin hero()
|
|
81
|
+
balikin "
|
|
82
|
+
<header class='hero'>
|
|
83
|
+
<p class='eyebrow'>project baru, rasa Medan</p>
|
|
84
|
+
<h1 class='headline'>SELAMAT DATANG DI<br><span>${name}</span></h1>
|
|
85
|
+
<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>
|
|
86
|
+
</header>
|
|
87
|
+
"
|
|
88
|
+
siap
|
|
89
|
+
|
|
90
|
+
bikin stepItem(nomor, judul, kode)
|
|
91
|
+
balikin "<li><span class='step-no'>" + nomor + "</span><div><strong>" + judul + "</strong><code>" + kode + "</code></div></li>"
|
|
33
92
|
siap
|
|
34
93
|
|
|
35
|
-
|
|
94
|
+
bikin stepsSection()
|
|
95
|
+
modal items = []
|
|
96
|
+
tambahin(items, stepItem(1, "Edit kode kamu", "main.medan"))
|
|
97
|
+
tambahin(items, stepItem(2, "Generate ulang", "npm start"))
|
|
98
|
+
tambahin(items, stepItem(3, "Liat hasilnya", "buka landing.html di browser"))
|
|
36
99
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
100
|
+
balikin "
|
|
101
|
+
<section>
|
|
102
|
+
<h2>Mulai Dari Sini</h2>
|
|
103
|
+
<ol class='step-list'>" + gabung(items, "") + "</ol>
|
|
104
|
+
</section>
|
|
105
|
+
"
|
|
42
106
|
siap
|
|
43
107
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
bilang "mantap kali!"
|
|
108
|
+
bikin kwCard(nama, arti)
|
|
109
|
+
balikin "<div class='kw-card'><h3>" + nama + "</h3><p>" + arti + "</p></div>"
|
|
47
110
|
siap
|
|
48
111
|
|
|
49
|
-
|
|
50
|
-
modal
|
|
51
|
-
tambahin(
|
|
52
|
-
bilang
|
|
53
|
-
|
|
112
|
+
bikin cheatsheetSection()
|
|
113
|
+
modal cards = []
|
|
114
|
+
tambahin(cards, kwCard("modal", "deklarasi variabel"))
|
|
115
|
+
tambahin(cards, kwCard("bilang", "cetak / print"))
|
|
116
|
+
tambahin(cards, kwCard("kalo / kalo gak", "if / else"))
|
|
117
|
+
tambahin(cards, kwCard("gas", "while"))
|
|
118
|
+
tambahin(cards, kwCard("ulang ... kali", "repeat N kali"))
|
|
119
|
+
tambahin(cards, kwCard("bikin / balikin", "fungsi / return"))
|
|
120
|
+
tambahin(cards, kwCard("mantap / lembek", "true / false"))
|
|
121
|
+
tambahin(cards, kwCard("kosong", "null"))
|
|
122
|
+
tambahin(cards, kwCard("[ ... ]", "array / list"))
|
|
123
|
+
|
|
124
|
+
balikin "
|
|
125
|
+
<section>
|
|
126
|
+
<h2>Contekan Keyword</h2>
|
|
127
|
+
<div class='kw-grid'>" + gabung(cards, "") + "</div>
|
|
128
|
+
</section>
|
|
129
|
+
"
|
|
130
|
+
siap
|
|
131
|
+
|
|
132
|
+
bikin footerSection()
|
|
133
|
+
balikin "
|
|
134
|
+
<footer class='footer'>
|
|
135
|
+
<p>Dibuat pake <a href='https://www.npmjs.com/package/create-medan-app'>create-medan-app</a> · powered by <a href='https://www.npmjs.com/package/medan-language'>medan-language</a></p>
|
|
136
|
+
</footer>
|
|
137
|
+
"
|
|
138
|
+
siap
|
|
139
|
+
|
|
140
|
+
modal halaman = "<title>${name}</title>" + fontLink + css() + "<div class='page'>" + hero() + stepsSection() + cheatsheetSection() + footerSection() + "</div>"
|
|
141
|
+
|
|
142
|
+
tulis("landing.html", halaman)
|
|
143
|
+
bilang "landing.html kelar digenerate. buka file itu di browser lu."
|
|
54
144
|
`;
|
|
145
|
+
}
|
|
55
146
|
export function readme(name) {
|
|
56
147
|
return `# ${name}
|
|
57
148
|
|
|
@@ -64,6 +155,10 @@ npm install
|
|
|
64
155
|
npm start
|
|
65
156
|
\`\`\`
|
|
66
157
|
|
|
158
|
+
\`npm start\` jalanin \`main.medan\`, yang bakal nge-generate \`landing.html\`.
|
|
159
|
+
Buka file itu di browser buat liat hasilnya. Edit \`main.medan\`, jalanin
|
|
160
|
+
\`npm start\` lagi, refresh browser-nya.
|
|
161
|
+
|
|
67
162
|
## Belajar lebih lanjut
|
|
68
163
|
|
|
69
164
|
Referensi lengkap bahasa Medan-lang (semua keyword, tipe data, contoh) ada
|
|
@@ -71,4 +166,5 @@ di: https://www.npmjs.com/package/medan-language
|
|
|
71
166
|
`;
|
|
72
167
|
}
|
|
73
168
|
export const GITIGNORE = `node_modules/
|
|
169
|
+
landing.html
|
|
74
170
|
`;
|