@bookklik/senangstart-css 0.1.2 → 0.1.4

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.
Files changed (200) hide show
  1. package/.github/workflows/deploy-docs.yml +1 -1
  2. package/LICENSE.md +21 -0
  3. package/README.md +17 -189
  4. package/dist/senangstart-css.js +40 -10
  5. package/dist/senangstart-css.min.js +24 -3
  6. package/docs/.vitepress/cache/deps/_metadata.json +7 -28
  7. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +9432 -284
  8. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +4 -4
  9. package/docs/.vitepress/config.js +183 -91
  10. package/docs/.vitepress/dist/404.html +5 -5
  11. package/docs/.vitepress/dist/assets/{app.BTYj1wZj.js → app.DBXoyO4w.js} +1 -1
  12. package/docs/.vitepress/dist/assets/chunks/framework.I305HrzY.js +19 -0
  13. package/docs/.vitepress/dist/assets/chunks/theme.CaXH1t3X.js +1 -0
  14. package/docs/.vitepress/dist/assets/{examples_cards.md.D4i0phvj.js → examples_cards.md.BCzaqSD6.js} +1 -1
  15. package/docs/.vitepress/dist/assets/{examples_cards.md.D4i0phvj.lean.js → examples_cards.md.BCzaqSD6.lean.js} +1 -1
  16. package/docs/.vitepress/dist/assets/{examples_forms.md.BnsjqHST.js → examples_forms.md.DOjr9LrG.js} +1 -1
  17. package/docs/.vitepress/dist/assets/{examples_forms.md.BnsjqHST.lean.js → examples_forms.md.DOjr9LrG.lean.js} +1 -1
  18. package/docs/.vitepress/dist/assets/{examples_hero.md.CCcb2x8Y.js → examples_hero.md.CAorji-Y.js} +1 -1
  19. package/docs/.vitepress/dist/assets/{examples_hero.md.CCcb2x8Y.lean.js → examples_hero.md.CAorji-Y.lean.js} +1 -1
  20. package/docs/.vitepress/dist/assets/{examples_index.md.CcyXbirn.js → examples_index.md.BjUNsTob.js} +2 -2
  21. package/docs/.vitepress/dist/assets/{examples_index.md.CcyXbirn.lean.js → examples_index.md.BjUNsTob.lean.js} +1 -1
  22. package/docs/.vitepress/dist/assets/{examples_navigation.md.CppyHbnP.js → examples_navigation.md.DvL-Yv_5.js} +1 -1
  23. package/docs/.vitepress/dist/assets/{examples_navigation.md.CppyHbnP.lean.js → examples_navigation.md.DvL-Yv_5.lean.js} +1 -1
  24. package/docs/.vitepress/dist/assets/{guide_cdn.md.CANCjnm5.js → guide_cdn.md.Bbb7-icp.js} +3 -3
  25. package/docs/.vitepress/dist/assets/{guide_cdn.md.CANCjnm5.lean.js → guide_cdn.md.Bbb7-icp.lean.js} +1 -1
  26. package/docs/.vitepress/dist/assets/{guide_cli.md.zXEKk-bu.js → guide_cli.md.yLsOZ7NL.js} +1 -1
  27. package/docs/.vitepress/dist/assets/{guide_cli.md.zXEKk-bu.lean.js → guide_cli.md.yLsOZ7NL.lean.js} +1 -1
  28. package/docs/.vitepress/dist/assets/{guide_configuration.md.D2JZzhKm.js → guide_configuration.md.DN4FfKw4.js} +1 -1
  29. package/docs/.vitepress/dist/assets/{guide_configuration.md.D2JZzhKm.lean.js → guide_configuration.md.DN4FfKw4.lean.js} +1 -1
  30. package/docs/.vitepress/dist/assets/guide_dark-mode.md.D6UJvQtM.js +69 -0
  31. package/docs/.vitepress/dist/assets/guide_dark-mode.md.D6UJvQtM.lean.js +1 -0
  32. package/docs/.vitepress/dist/assets/{guide_getting-started.md.tO7bvmZd.js → guide_getting-started.md.K5nA8wXY.js} +4 -4
  33. package/docs/.vitepress/dist/assets/{guide_getting-started.md.tO7bvmZd.lean.js → guide_getting-started.md.K5nA8wXY.lean.js} +1 -1
  34. package/docs/.vitepress/dist/assets/{guide_index.md.C1xk2lBl.js → guide_index.md.B0lRU150.js} +1 -1
  35. package/docs/.vitepress/dist/assets/{guide_index.md.C1xk2lBl.lean.js → guide_index.md.B0lRU150.lean.js} +1 -1
  36. package/docs/.vitepress/dist/assets/{guide_natural-scale.md.D1oVRN5V.js → guide_natural-scale.md.vvauT7U1.js} +1 -1
  37. package/docs/.vitepress/dist/assets/{guide_natural-scale.md.D1oVRN5V.lean.js → guide_natural-scale.md.vvauT7U1.lean.js} +1 -1
  38. package/docs/.vitepress/dist/assets/{guide_philosophy.md.DPyyMH8d.js → guide_philosophy.md.mOb9kp32.js} +1 -1
  39. package/docs/.vitepress/dist/assets/{guide_philosophy.md.DPyyMH8d.lean.js → guide_philosophy.md.mOb9kp32.lean.js} +1 -1
  40. package/docs/.vitepress/dist/assets/{guide_responsive.md.wksOAMT5.js → guide_responsive.md.C7cF-4cR.js} +1 -1
  41. package/docs/.vitepress/dist/assets/{guide_responsive.md.wksOAMT5.lean.js → guide_responsive.md.C7cF-4cR.lean.js} +1 -1
  42. package/docs/.vitepress/dist/assets/{guide_states.md.DRjYOZDJ.js → guide_states.md.CwtGEGHB.js} +1 -1
  43. package/docs/.vitepress/dist/assets/{guide_states.md.DRjYOZDJ.lean.js → guide_states.md.CwtGEGHB.lean.js} +1 -1
  44. package/docs/.vitepress/dist/assets/{guide_tri-attribute.md.CoFqfmPZ.js → guide_tri-attribute.md.CpjJLEMP.js} +1 -1
  45. package/docs/.vitepress/dist/assets/{guide_tri-attribute.md.CoFqfmPZ.lean.js → guide_tri-attribute.md.CpjJLEMP.lean.js} +1 -1
  46. package/docs/.vitepress/dist/assets/{index.md.CUZJzNzP.js → index.md.mYp6_S5X.js} +1 -1
  47. package/docs/.vitepress/dist/assets/{index.md.CUZJzNzP.lean.js → index.md.mYp6_S5X.lean.js} +1 -1
  48. package/docs/.vitepress/dist/assets/ms_examples_cards.md.CaE5JNAs.js +84 -0
  49. package/docs/.vitepress/dist/assets/ms_examples_cards.md.CaE5JNAs.lean.js +1 -0
  50. package/docs/.vitepress/dist/assets/ms_examples_forms.md.VvDzMzxF.js +169 -0
  51. package/docs/.vitepress/dist/assets/ms_examples_forms.md.VvDzMzxF.lean.js +1 -0
  52. package/docs/.vitepress/dist/assets/ms_examples_hero.md.DC4c3kKW.js +118 -0
  53. package/docs/.vitepress/dist/assets/ms_examples_hero.md.DC4c3kKW.lean.js +1 -0
  54. package/docs/.vitepress/dist/assets/ms_examples_index.md.C13ShcjA.js +52 -0
  55. package/docs/.vitepress/dist/assets/ms_examples_index.md.C13ShcjA.lean.js +1 -0
  56. package/docs/.vitepress/dist/assets/ms_examples_navigation.md.BPtVjKbk.js +106 -0
  57. package/docs/.vitepress/dist/assets/ms_examples_navigation.md.BPtVjKbk.lean.js +1 -0
  58. package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.js +30 -0
  59. package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.lean.js +1 -0
  60. package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.js +44 -0
  61. package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.lean.js +1 -0
  62. package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.js +79 -0
  63. package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.lean.js +1 -0
  64. package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.js +69 -0
  65. package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.lean.js +1 -0
  66. package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.js +47 -0
  67. package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.lean.js +1 -0
  68. package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.js +3 -0
  69. package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.lean.js +1 -0
  70. package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.js +22 -0
  71. package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.lean.js +1 -0
  72. package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.js +7 -0
  73. package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.lean.js +1 -0
  74. package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.js +57 -0
  75. package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.lean.js +1 -0
  76. package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.js +77 -0
  77. package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.lean.js +1 -0
  78. package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.js +45 -0
  79. package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.lean.js +1 -0
  80. package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.js +7 -0
  81. package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.lean.js +1 -0
  82. package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.js +48 -0
  83. package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.lean.js +1 -0
  84. package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.js +17 -0
  85. package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.lean.js +1 -0
  86. package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.js +13 -0
  87. package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.lean.js +1 -0
  88. package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.js +24 -0
  89. package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.lean.js +1 -0
  90. package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.js +32 -0
  91. package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.lean.js +1 -0
  92. package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.js +22 -0
  93. package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.lean.js +1 -0
  94. package/docs/.vitepress/dist/assets/{reference_breakpoints.md.BEhuwXBS.js → reference_breakpoints.md.BRbG8Fzi.js} +1 -1
  95. package/docs/.vitepress/dist/assets/{reference_breakpoints.md.BEhuwXBS.lean.js → reference_breakpoints.md.BRbG8Fzi.lean.js} +1 -1
  96. package/docs/.vitepress/dist/assets/reference_colors.md.C7j7dSO1.js +17 -0
  97. package/docs/.vitepress/dist/assets/reference_colors.md.C7j7dSO1.lean.js +1 -0
  98. package/docs/.vitepress/dist/assets/{reference_layout.md.DqSoofMZ.js → reference_layout.md.BWJ5NxSp.js} +1 -1
  99. package/docs/.vitepress/dist/assets/{reference_layout.md.DqSoofMZ.lean.js → reference_layout.md.BWJ5NxSp.lean.js} +1 -1
  100. package/docs/.vitepress/dist/assets/{reference_space.md.luOYAfQg.js → reference_space.md.DCsqfTWb.js} +1 -1
  101. package/docs/.vitepress/dist/assets/{reference_space.md.luOYAfQg.lean.js → reference_space.md.DCsqfTWb.lean.js} +1 -1
  102. package/docs/.vitepress/dist/assets/{reference_spacing.md.DdsDhDhS.js → reference_spacing.md.BInFD8gd.js} +1 -1
  103. package/docs/.vitepress/dist/assets/{reference_spacing.md.DdsDhDhS.lean.js → reference_spacing.md.BInFD8gd.lean.js} +1 -1
  104. package/docs/.vitepress/dist/assets/{reference_visual.md.DZFvxgPk.js → reference_visual.md.BRK7S9T1.js} +1 -1
  105. package/docs/.vitepress/dist/assets/{reference_visual.md.DZFvxgPk.lean.js → reference_visual.md.BRK7S9T1.lean.js} +1 -1
  106. package/docs/.vitepress/dist/assets/{style.BuMqNgkb.css → style.D82StYDI.css} +1 -1
  107. package/docs/.vitepress/dist/examples/cards.html +9 -9
  108. package/docs/.vitepress/dist/examples/forms.html +9 -9
  109. package/docs/.vitepress/dist/examples/hero.html +9 -9
  110. package/docs/.vitepress/dist/examples/index.html +10 -10
  111. package/docs/.vitepress/dist/examples/navigation.html +9 -9
  112. package/docs/.vitepress/dist/guide/cdn.html +12 -12
  113. package/docs/.vitepress/dist/guide/cli.html +9 -9
  114. package/docs/.vitepress/dist/guide/configuration.html +9 -9
  115. package/docs/.vitepress/dist/guide/dark-mode.html +93 -0
  116. package/docs/.vitepress/dist/guide/getting-started.html +11 -11
  117. package/docs/.vitepress/dist/guide/index.html +9 -9
  118. package/docs/.vitepress/dist/guide/natural-scale.html +9 -9
  119. package/docs/.vitepress/dist/guide/philosophy.html +9 -9
  120. package/docs/.vitepress/dist/guide/responsive.html +9 -9
  121. package/docs/.vitepress/dist/guide/states.html +10 -10
  122. package/docs/.vitepress/dist/guide/tri-attribute.html +9 -9
  123. package/docs/.vitepress/dist/hashmap.json +1 -1
  124. package/docs/.vitepress/dist/index.html +9 -9
  125. package/docs/.vitepress/dist/ms/examples/cards.html +108 -0
  126. package/docs/.vitepress/dist/ms/examples/forms.html +193 -0
  127. package/docs/.vitepress/dist/ms/examples/hero.html +142 -0
  128. package/docs/.vitepress/dist/ms/examples/index.html +76 -0
  129. package/docs/.vitepress/dist/ms/examples/navigation.html +130 -0
  130. package/docs/.vitepress/dist/ms/guide/cdn.html +54 -0
  131. package/docs/.vitepress/dist/ms/guide/cli.html +68 -0
  132. package/docs/.vitepress/dist/ms/guide/configuration.html +103 -0
  133. package/docs/.vitepress/dist/ms/guide/dark-mode.html +93 -0
  134. package/docs/.vitepress/dist/ms/guide/getting-started.html +71 -0
  135. package/docs/.vitepress/dist/ms/guide/index.html +27 -0
  136. package/docs/.vitepress/dist/ms/guide/natural-scale.html +46 -0
  137. package/docs/.vitepress/dist/ms/guide/philosophy.html +31 -0
  138. package/docs/.vitepress/dist/ms/guide/responsive.html +81 -0
  139. package/docs/.vitepress/dist/ms/guide/states.html +101 -0
  140. package/docs/.vitepress/dist/ms/guide/tri-attribute.html +69 -0
  141. package/docs/.vitepress/dist/ms/index.html +31 -0
  142. package/docs/.vitepress/dist/ms/reference/breakpoints.html +72 -0
  143. package/docs/.vitepress/dist/ms/reference/colors.html +41 -0
  144. package/docs/.vitepress/dist/ms/reference/layout.html +37 -0
  145. package/docs/.vitepress/dist/ms/reference/space.html +48 -0
  146. package/docs/.vitepress/dist/ms/reference/spacing.html +56 -0
  147. package/docs/.vitepress/dist/ms/reference/visual.html +46 -0
  148. package/docs/.vitepress/dist/reference/breakpoints.html +9 -9
  149. package/docs/.vitepress/dist/reference/colors.html +15 -27
  150. package/docs/.vitepress/dist/reference/layout.html +9 -9
  151. package/docs/.vitepress/dist/reference/space.html +9 -9
  152. package/docs/.vitepress/dist/reference/spacing.html +9 -9
  153. package/docs/.vitepress/dist/reference/visual.html +9 -9
  154. package/docs/examples/index.md +1 -1
  155. package/docs/guide/cdn.md +2 -2
  156. package/docs/guide/dark-mode.md +152 -0
  157. package/docs/guide/getting-started.md +2 -2
  158. package/docs/ms/examples/cards.md +116 -0
  159. package/docs/ms/examples/forms.md +207 -0
  160. package/docs/ms/examples/hero.md +150 -0
  161. package/docs/ms/examples/index.md +87 -0
  162. package/docs/ms/examples/navigation.md +144 -0
  163. package/docs/ms/guide/cdn.md +110 -0
  164. package/docs/ms/guide/cli.md +174 -0
  165. package/docs/ms/guide/configuration.md +152 -0
  166. package/docs/ms/guide/dark-mode.md +152 -0
  167. package/docs/ms/guide/getting-started.md +130 -0
  168. package/docs/ms/guide/index.md +64 -0
  169. package/docs/ms/guide/natural-scale.md +123 -0
  170. package/docs/ms/guide/philosophy.md +103 -0
  171. package/docs/ms/guide/responsive.md +129 -0
  172. package/docs/ms/guide/states.md +162 -0
  173. package/docs/ms/guide/tri-attribute.md +187 -0
  174. package/docs/ms/index.md +64 -0
  175. package/docs/ms/reference/breakpoints.md +131 -0
  176. package/docs/ms/reference/colors.md +126 -0
  177. package/docs/ms/reference/layout.md +115 -0
  178. package/docs/ms/reference/space.md +121 -0
  179. package/docs/ms/reference/spacing.md +74 -0
  180. package/docs/ms/reference/visual.md +160 -0
  181. package/docs/reference/colors.md +52 -32
  182. package/package.json +1 -1
  183. package/src/cdn/jit.js +40 -10
  184. package/src/compiler/generators/css.js +57 -5
  185. package/src/compiler/tokenizer.js +1 -1
  186. package/src/config/defaults.js +297 -2
  187. package/docs/.vitepress/cache/deps/chunk-2CLQ7TTZ.js +0 -9719
  188. package/docs/.vitepress/cache/deps/chunk-2CLQ7TTZ.js.map +0 -7
  189. package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js +0 -1333
  190. package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js.map +0 -7
  191. package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js +0 -1665
  192. package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js.map +0 -7
  193. package/docs/.vitepress/cache/deps/vitepress___minisearch.js +0 -1813
  194. package/docs/.vitepress/cache/deps/vitepress___minisearch.js.map +0 -7
  195. package/docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.DmMP4oUp.js +0 -1
  196. package/docs/.vitepress/dist/assets/chunks/VPLocalSearchBox.jxQ0k_uL.js +0 -9
  197. package/docs/.vitepress/dist/assets/chunks/framework.qISVh_QZ.js +0 -19
  198. package/docs/.vitepress/dist/assets/chunks/theme.B9Wtbwgj.js +0 -2
  199. package/docs/.vitepress/dist/assets/reference_colors.md.Do4abjs1.js +0 -29
  200. package/docs/.vitepress/dist/assets/reference_colors.md.Do4abjs1.lean.js +0 -1
package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.lean.js ADDED
@@ -0,0 +1 @@
1
+ import{_ as a,c as i,o as n,ae as t}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"CDN (Tanpa Bina)","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/cdn.md","filePath":"ms/guide/cdn.md"}'),l={name:"ms/guide/cdn.md"};function e(p,s,h,k,r,E){return n(),i("div",null,[...s[0]||(s[0]=[t("",28)])])}const o=a(l,[["render",e]]);export{g as __pageData,o as default};
package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.js ADDED
@@ -0,0 +1,44 @@
1
+ import{_ as a,c as i,o as n,ae as t}from"./chunks/framework.I305HrzY.js";const o=JSON.parse('{"title":"Bina CLI","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/cli.md","filePath":"ms/guide/cli.md"}'),e={name:"ms/guide/cli.md"};function l(h,s,p,k,d,r){return n(),i("div",null,[...s[0]||(s[0]=[t(`<h1 id="bina-cli" tabindex="-1">Bina CLI <a class="header-anchor" href="#bina-cli" aria-label="Permalink to &quot;Bina CLI&quot;">​</a></h1><p>Guna CLI untuk bina sedia produksi dengan output teroptimum.</p><h2 id="pemasangan" tabindex="-1">Pemasangan <a class="header-anchor" href="#pemasangan" aria-label="Permalink to &quot;Pemasangan&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Pasang secara global</span></span>
2
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -g</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @bookklik/senangstart-css</span></span>
3
+ <span class="line"></span>
4
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Atau guna npx (tanpa pasang)</span></span>
5
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @bookklik/senangstart-css</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><h2 id="arahan" tabindex="-1">Arahan <a class="header-anchor" href="#arahan" aria-label="Permalink to &quot;Arahan&quot;">​</a></h2><h3 id="senangstart-init" tabindex="-1"><code>senangstart init</code> <a class="header-anchor" href="#senangstart-init" aria-label="Permalink to &quot;\`senangstart init\`&quot;">​</a></h3><p>Cipta fail konfigurasi:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><p>Ini mencipta <code>senangstart.config.js</code> dalam root projek anda dengan lalai yang baik.</p><h3 id="senangstart-build" tabindex="-1"><code>senangstart build</code> <a class="header-anchor" href="#senangstart-build" aria-label="Permalink to &quot;\`senangstart build\`&quot;">​</a></h3><p>Kompil CSS dari fail sumber anda:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span></span></code></pre></div><p><strong>Pilihan:</strong></p><table tabindex="0"><thead><tr><th>Pilihan</th><th>Penerangan</th></tr></thead><tbody><tr><td><code>--minify</code></td><td>Minify output CSS</td></tr><tr><td><code>--config &lt;path&gt;</code></td><td>Laluan ke fail config</td></tr></tbody></table><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Build produksi dengan minification</span></span>
6
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --minify</span></span>
7
+ <span class="line"></span>
8
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Guna config tersuai</span></span>
9
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --config</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ./custom.config.js</span></span></code></pre></div><h3 id="senangstart-dev" tabindex="-1"><code>senangstart dev</code> <a class="header-anchor" href="#senangstart-dev" aria-label="Permalink to &quot;\`senangstart dev\`&quot;">​</a></h3><p>Mod watch untuk pembangunan:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><p>Ini memantau fail sumber anda dan membina semula secara automatik apabila ada perubahan.</p><h2 id="fail-output" tabindex="-1">Fail Output <a class="header-anchor" href="#fail-output" aria-label="Permalink to &quot;Fail Output&quot;">​</a></h2><p>CLI menghasilkan tiga fail:</p><table tabindex="0"><thead><tr><th>Fail</th><th>Penerangan</th></tr></thead><tbody><tr><td><code>public/senangstart.css</code></td><td>Stylesheet terkompil</td></tr><tr><td><code>.cursorrules</code></td><td>Fail konteks AI untuk LLM</td></tr><tr><td><code>types/senang.d.ts</code></td><td>Definisi TypeScript</td></tr></tbody></table><h2 id="persediaan-projek" tabindex="-1">Persediaan Projek <a class="header-anchor" href="#persediaan-projek" aria-label="Permalink to &quot;Persediaan Projek&quot;">​</a></h2><h3 id="_1-mulakan" tabindex="-1">1. Mulakan <a class="header-anchor" href="#_1-mulakan" aria-label="Permalink to &quot;1. Mulakan&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">cd</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> projek-anda</span></span>
10
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -y</span></span>
11
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @bookklik/senangstart-css</span></span>
12
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><h3 id="_2-tambah-html" tabindex="-1">2. Tambah HTML <a class="header-anchor" href="#_2-tambah-html" aria-label="Permalink to &quot;2. Tambah HTML&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
13
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
14
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
15
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">link</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;stylesheet&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;./public/senangstart.css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
16
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
17
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
18
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
19
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col center&quot;</span></span>
20
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:big&quot;</span></span>
21
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:primary text:white rounded:big&quot;</span></span>
22
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
23
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hello SenangStart!</span></span>
24
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
25
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
26
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="_3-bina" tabindex="-1">3. Bina <a class="header-anchor" href="#_3-bina" aria-label="Permalink to &quot;3. Bina&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span></span></code></pre></div><h3 id="_4-pembangunan" tabindex="-1">4. Pembangunan <a class="header-anchor" href="#_4-pembangunan" aria-label="Permalink to &quot;4. Pembangunan&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><h2 id="skrip-package-json" tabindex="-1">Skrip Package.json <a class="header-anchor" href="#skrip-package-json" aria-label="Permalink to &quot;Skrip Package.json&quot;">​</a></h2><p>Tambah skrip ini ke <code>package.json</code> anda:</p><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
27
+ <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;scripts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
28
+ <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;build:css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;senangstart build --minify&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
29
+ <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;dev:css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;senangstart dev&quot;</span></span>
30
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
31
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="integrasi-dengan-framework" tabindex="-1">Integrasi dengan Framework <a class="header-anchor" href="#integrasi-dengan-framework" aria-label="Permalink to &quot;Integrasi dengan Framework&quot;">​</a></h2><h3 id="vite-react-vue" tabindex="-1">Vite / React / Vue <a class="header-anchor" href="#vite-react-vue" aria-label="Permalink to &quot;Vite / React / Vue&quot;">​</a></h3><p>Tambah ke proses bina anda:</p><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
32
+ <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;scripts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
33
+ <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;dev&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;concurrently </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\\&quot;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">vite</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\\&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> \\&quot;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">senangstart dev</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\\&quot;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
34
+ <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;build&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;senangstart build --minify &amp;&amp; vite build&quot;</span></span>
35
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
36
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="next-js" tabindex="-1">Next.js <a class="header-anchor" href="#next-js" aria-label="Permalink to &quot;Next.js&quot;">​</a></h3><p>Import CSS yang dijana dalam <code>_app.js</code>:</p><div class="language-jsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;../public/senangstart.css&#39;</span></span>
37
+ <span class="line"></span>
38
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MyApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">Component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">pageProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
39
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">pageProps} /&gt;</span></span>
40
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
41
+ <span class="line"></span>
42
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MyApp</span></span></code></pre></div><h2 id="integrasi-ci-cd" tabindex="-1">Integrasi CI/CD <a class="header-anchor" href="#integrasi-ci-cd" aria-label="Permalink to &quot;Integrasi CI/CD&quot;">​</a></h2><p>Tambah ke pipeline bina anda:</p><div class="language-yaml vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">yaml</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Contoh GitHub Actions</span></span>
43
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">- </span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">Build CSS</span></span>
44
+ <span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> run</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">npx senangstart build --minify</span></span></code></pre></div><h2 id="perbandingan-cdn-vs-cli" tabindex="-1">Perbandingan CDN vs CLI <a class="header-anchor" href="#perbandingan-cdn-vs-cli" aria-label="Permalink to &quot;Perbandingan CDN vs CLI&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Ciri</th><th>CDN JIT</th><th>CLI Build</th></tr></thead><tbody><tr><td>Persediaan</td><td>Tanpa config</td><td>Memerlukan npm</td></tr><tr><td>Langkah Bina</td><td>Tiada</td><td>Diperlukan</td></tr><tr><td>Prestasi</td><td>Overhead runtime</td><td>Pra-kompil</td></tr><tr><td>Saiz Fail</td><td>~15KB JS</td><td>Hanya CSS yang digunakan</td></tr><tr><td>Kes Penggunaan</td><td>Prototaip</td><td>Produksi</td></tr><tr><td>Kandungan Dinamik</td><td>✅ Automatik</td><td>Perlu rebuild</td></tr></tbody></table>`,46)])])}const c=a(e,[["render",l]]);export{o as __pageData,c as default};
package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.lean.js ADDED
@@ -0,0 +1 @@
1
+ import{_ as a,c as i,o as n,ae as t}from"./chunks/framework.I305HrzY.js";const o=JSON.parse('{"title":"Bina CLI","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/cli.md","filePath":"ms/guide/cli.md"}'),e={name:"ms/guide/cli.md"};function l(h,s,p,k,d,r){return n(),i("div",null,[...s[0]||(s[0]=[t("",46)])])}const c=a(e,[["render",l]]);export{o as __pageData,c as default};
package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.js ADDED
@@ -0,0 +1,79 @@
1
+ import{_ as i,c as a,o as n,ae as t}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Konfigurasi","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/configuration.md","filePath":"ms/guide/configuration.md"}'),l={name:"ms/guide/configuration.md"};function h(p,s,e,k,E,r){return n(),a("div",null,[...s[0]||(s[0]=[t(`<h1 id="konfigurasi" tabindex="-1">Konfigurasi <a class="header-anchor" href="#konfigurasi" aria-label="Permalink to &quot;Konfigurasi&quot;">​</a></h1><p>Sesuaikan SenangStart CSS dengan <code>senangstart.config.js</code>.</p><h2 id="mencipta-fail-config" tabindex="-1">Mencipta Fail Config <a class="header-anchor" href="#mencipta-fail-config" aria-label="Permalink to &quot;Mencipta Fail Config&quot;">​</a></h2><p>Jalankan arahan init untuk mencipta fail config:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><p>Atau cipta secara manual:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// senangstart.config.js</span></span>
2
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
3
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Fail untuk diimbas untuk atribusi SenangStart</span></span>
4
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> content: [</span></span>
5
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./**/*.html&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
6
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./src/**/*.{html,jsx,tsx,vue,svelte}&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
7
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./components/**/*.{html,jsx,tsx}&#39;</span></span>
8
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
9
+ <span class="line"></span>
10
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Konfigurasi output</span></span>
11
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> output: {</span></span>
12
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> css: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./public/senangstart.css&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
13
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> minify: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
14
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> aiContext: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./.cursorrules&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
15
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> typescript: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./types/senang.d.ts&#39;</span></span>
16
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
17
+ <span class="line"></span>
18
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Penyesuaian tema</span></span>
19
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme: {</span></span>
20
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Tindih ganti anda di sini</span></span>
21
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
22
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="corak-kandungan" tabindex="-1">Corak Kandungan <a class="header-anchor" href="#corak-kandungan" aria-label="Permalink to &quot;Corak Kandungan&quot;">​</a></h2><p>Tentukan fail mana untuk diimbas:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
23
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./**/*.html&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Semua fail HTML</span></span>
24
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./src/**/*.jsx&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Komponen React</span></span>
25
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./pages/**/*.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Halaman Vue</span></span>
26
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./components/**/*.svelte&#39;</span></span>
27
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre></div><h2 id="pilihan-output" tabindex="-1">Pilihan Output <a class="header-anchor" href="#pilihan-output" aria-label="Permalink to &quot;Pilihan Output&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Pilihan</th><th>Penerangan</th><th>Lalai</th></tr></thead><tbody><tr><td><code>css</code></td><td>Laluan output CSS</td><td><code>./public/senangstart.css</code></td></tr><tr><td><code>minify</code></td><td>Minify output</td><td><code>false</code></td></tr><tr><td><code>aiContext</code></td><td>Laluan fail konteks AI</td><td><code>./.cursorrules</code></td></tr><tr><td><code>typescript</code></td><td>Laluan definisi TypeScript</td><td><code>./types/senang.d.ts</code></td></tr></tbody></table><h2 id="penyesuaian-tema" tabindex="-1">Penyesuaian Tema <a class="header-anchor" href="#penyesuaian-tema" aria-label="Permalink to &quot;Penyesuaian Tema&quot;">​</a></h2><h3 id="spacing-tersuai" tabindex="-1">Spacing Tersuai <a class="header-anchor" href="#spacing-tersuai" aria-label="Permalink to &quot;Spacing Tersuai&quot;">​</a></h3><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
28
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> spacing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
29
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;tiny&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;2px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Tindih ganti sedia ada</span></span>
30
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;huge&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;256px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Tambah skala baru</span></span>
31
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;massive&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;512px&#39;</span></span>
32
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
33
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="warna-tersuai" tabindex="-1">Warna Tersuai <a class="header-anchor" href="#warna-tersuai" aria-label="Permalink to &quot;Warna Tersuai&quot;">​</a></h3><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
34
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> colors</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
35
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;brand&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#8B5CF6&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
36
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;accent&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#EC4899&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
37
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;custom&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#FF5733&#39;</span></span>
38
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
39
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="titik-henti-tersuai" tabindex="-1">Titik Henti Tersuai <a class="header-anchor" href="#titik-henti-tersuai" aria-label="Permalink to &quot;Titik Henti Tersuai&quot;">​</a></h3><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
40
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> screens</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
41
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;mob&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;480px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
42
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;tab&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;768px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
43
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;lap&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1024px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
44
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;desk&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1280px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
45
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;wide&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1536px&#39;</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Tambah breakpoint lebih lebar</span></span>
46
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
47
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="bayang-tersuai" tabindex="-1">Bayang Tersuai <a class="header-anchor" href="#bayang-tersuai" aria-label="Permalink to &quot;Bayang Tersuai&quot;">​</a></h3><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
48
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> shadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
49
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;glow&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;0 0 20px rgba(59, 130, 246, 0.5)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
50
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;inset&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;inset 0 2px 4px rgba(0,0,0,0.1)&#39;</span></span>
51
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
52
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="contoh-penuh" tabindex="-1">Contoh Penuh <a class="header-anchor" href="#contoh-penuh" aria-label="Permalink to &quot;Contoh Penuh&quot;">​</a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
53
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> content: [</span></span>
54
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./src/**/*.{html,jsx,tsx}&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
55
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./components/**/*.vue&#39;</span></span>
56
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
57
+ <span class="line"></span>
58
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> output: {</span></span>
59
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> css: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./dist/styles.css&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
60
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> minify: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
61
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> aiContext: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./.cursorrules&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
62
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> typescript: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./src/types/senang.d.ts&#39;</span></span>
63
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
64
+ <span class="line"></span>
65
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme: {</span></span>
66
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> spacing: {</span></span>
67
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;huge&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;256px&#39;</span></span>
68
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
69
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> colors: {</span></span>
70
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;brand&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#8B5CF6&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
71
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;accent&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#EC4899&#39;</span></span>
72
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
73
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> screens: {</span></span>
74
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;wide&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1536px&#39;</span></span>
75
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
76
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
77
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="menggunakan-nilai-tersuai" tabindex="-1">Menggunakan Nilai Tersuai <a class="header-anchor" href="#menggunakan-nilai-tersuai" aria-label="Permalink to &quot;Menggunakan Nilai Tersuai&quot;">​</a></h2><p>Selepas mengkonfigurasi, guna skala tersuai anda:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:huge&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Padding huge tersuai&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
78
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:brand text:accent&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Warna tersuai&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
79
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tab:p:big wide:p:huge&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Titik Henti tersuai&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div>`,26)])])}const c=i(l,[["render",h]]);export{g as __pageData,c as default};
package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.lean.js ADDED
@@ -0,0 +1 @@
1
+ import{_ as i,c as a,o as n,ae as t}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Konfigurasi","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/configuration.md","filePath":"ms/guide/configuration.md"}'),l={name:"ms/guide/configuration.md"};function h(p,s,e,k,E,r){return n(),a("div",null,[...s[0]||(s[0]=[t("",26)])])}const c=i(l,[["render",h]]);export{g as __pageData,c as default};
package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.js ADDED
@@ -0,0 +1,69 @@
1
+ import{_ as a,c as i,o as n,ae as t}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Mod Gelap","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/dark-mode.md","filePath":"ms/guide/dark-mode.md"}'),l={name:"ms/guide/dark-mode.md"};function h(k,s,e,p,d,E){return n(),i("div",null,[...s[0]||(s[0]=[t(`<h1 id="mod-gelap" tabindex="-1">Mod Gelap <a class="header-anchor" href="#mod-gelap" aria-label="Permalink to &quot;Mod Gelap&quot;">​</a></h1><p>Tambah gaya mod gelap dengan awalan <code>dark:</code>, serupa dengan Tailwind CSS.</p><h2 id="konfigurasi" tabindex="-1">Konfigurasi <a class="header-anchor" href="#konfigurasi" aria-label="Permalink to &quot;Konfigurasi&quot;">​</a></h2><p>Secara lalai, mod gelap menggunakan strategi <code>media</code> berdasarkan keutamaan sistem. Anda boleh mengubah ini dalam konfigurasi:</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// senangstart.config.js</span></span>
2
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
3
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Pilihan 1: Keutamaan sistem (lalai)</span></span>
4
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> darkMode: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;media&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
5
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
6
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Pilihan 2: Toggle berasaskan kelas</span></span>
7
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> darkMode: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;selector&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Guna kelas .dark</span></span>
8
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
9
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Pilihan 3: Pemilih kustom</span></span>
10
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> darkMode: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;selector&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;[data-theme=&quot;dark&quot;]&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
11
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Untuk penggunaan CDN:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;senangstart/config&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
12
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
13
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;darkMode&quot;: &quot;selector&quot;</span></span>
14
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
15
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="penggunaan-asas" tabindex="-1">Penggunaan Asas <a class="header-anchor" href="#penggunaan-asas" aria-label="Permalink to &quot;Penggunaan Asas&quot;">​</a></h2><p>Tambah gaya mod gelap menggunakan awalan <code>dark:</code>:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:white dark:bg:slate-900 text:dark dark:text:white&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
16
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Ini menyesuaikan dengan mod gelap</span></span>
17
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="perbandingan-strategi" tabindex="-1">Perbandingan Strategi <a class="header-anchor" href="#perbandingan-strategi" aria-label="Permalink to &quot;Perbandingan Strategi&quot;">​</a></h2><h3 id="strategi-media-lalai" tabindex="-1">Strategi Media (Lalai) <a class="header-anchor" href="#strategi-media-lalai" aria-label="Permalink to &quot;Strategi Media (Lalai)&quot;">​</a></h3><p>Mengikuti keutamaan OS pengguna secara automatik:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* CSS yang dijana */</span></span>
18
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (prefers-color-scheme: dark) {</span></span>
19
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">visual</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">~=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark:bg:slate-900&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--c-slate-900</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); }</span></span>
20
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Tiada JavaScript diperlukan. Menghormati tetapan sistem secara automatik.</p><h3 id="strategi-selector" tabindex="-1">Strategi Selector <a class="header-anchor" href="#strategi-selector" aria-label="Permalink to &quot;Strategi Selector&quot;">​</a></h3><p>Kawalan manual melalui kelas <code>.dark</code>:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* CSS yang dijana */</span></span>
21
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.dark</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">visual</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">~=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark:bg:slate-900&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--c-slate-900</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); }</span></span></code></pre></div><p>Toggle dengan JavaScript:</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">document.documentElement.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toggle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;dark&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h2 id="corak-biasa" tabindex="-1">Corak Biasa <a class="header-anchor" href="#corak-biasa" aria-label="Permalink to &quot;Corak Biasa&quot;">​</a></h2><h3 id="kad-dengan-mod-gelap" tabindex="-1">Kad dengan Mod Gelap <a class="header-anchor" href="#kad-dengan-mod-gelap" aria-label="Permalink to &quot;Kad dengan Mod Gelap&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
22
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col&quot;</span></span>
23
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:medium g:small&quot;</span></span>
24
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
25
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bg:white dark:bg:slate-800</span></span>
26
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> rounded:big</span></span>
27
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> shadow:medium dark:shadow:none</span></span>
28
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> border:gray-200 dark:border:slate-700</span></span>
29
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> border-w:[1px]</span></span>
30
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;</span></span>
31
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
32
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:dark dark:text:white font:bold&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Tajuk Kad&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
33
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey dark:text:gray-400&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Teks penerangan&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
34
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="butang-dengan-mod-gelap" tabindex="-1">Butang dengan Mod Gelap <a class="header-anchor" href="#butang-dengan-mod-gelap" aria-label="Permalink to &quot;Butang dengan Mod Gelap&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span></span>
35
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-x:big p-y:small&quot;</span></span>
36
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
37
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bg:primary dark:bg:blue-500</span></span>
38
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> text:white</span></span>
39
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> rounded:medium</span></span>
40
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hover:bg:blue-700 dark:hover:bg:blue-400</span></span>
41
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;</span></span>
42
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
43
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hantar</span></span>
44
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="navigasi" tabindex="-1">Navigasi <a class="header-anchor" href="#navigasi" aria-label="Permalink to &quot;Navigasi&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
45
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex between&quot;</span></span>
46
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:medium&quot;</span></span>
47
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:white dark:bg:slate-900&quot;</span></span>
48
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
49
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:dark dark:text:white hover:text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Laman Utama&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
50
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey dark:text:gray-400 hover:text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Tentang&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
51
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="pelaksanaan-toggle" tabindex="-1">Pelaksanaan Toggle <a class="header-anchor" href="#pelaksanaan-toggle" aria-label="Permalink to &quot;Pelaksanaan Toggle&quot;">​</a></h2><p>Untuk strategi selector, laksanakan toggle:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toggleDarkMode</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
52
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark:hidden&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;🌙&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
53
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden dark:inline&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;☀️&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
54
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
55
+ <span class="line"></span>
56
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
57
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> toggleDarkMode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
58
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.documentElement.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toggle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;dark&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
59
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Simpan keutamaan (pilihan)</span></span>
60
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> localStorage.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;theme&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
61
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.documentElement.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">contains</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;dark&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;</span></span>
62
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span>
63
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
64
+ <span class="line"></span>
65
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Muat keutamaan tersimpan</span></span>
66
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (localStorage.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;theme&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
67
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.documentElement.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;dark&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
68
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
69
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="petua" tabindex="-1">Petua <a class="header-anchor" href="#petua" aria-label="Permalink to &quot;Petua&quot;">​</a></h2><ul><li>Gunakan nama warna semantik seperti <code>slate</code>, <code>gray</code>, <code>zinc</code> untuk latar gelap</li><li>Teks gelap pada terang, teks terang pada gelap: <code>text:dark dark:text:white</code></li><li>Kurangkan bayangan dalam mod gelap: <code>shadow:medium dark:shadow:none</code></li><li>Sempadan halus selalunya lebih cantik dalam mod gelap</li></ul>`,32)])])}const o=a(l,[["render",h]]);export{g as __pageData,o as default};
package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.lean.js ADDED
@@ -0,0 +1 @@
1
+ import{_ as a,c as i,o as n,ae as t}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Mod Gelap","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/dark-mode.md","filePath":"ms/guide/dark-mode.md"}'),l={name:"ms/guide/dark-mode.md"};function h(k,s,e,p,d,E){return n(),i("div",null,[...s[0]||(s[0]=[t("",32)])])}const o=a(l,[["render",h]]);export{g as __pageData,o as default};
package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.js ADDED
@@ -0,0 +1,47 @@
1
+ import{_ as h,C as k,c as p,o as e,j as i,ae as t,a,G as l}from"./chunks/framework.I305HrzY.js";const b=JSON.parse('{"title":"Bermula","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/getting-started.md","filePath":"ms/guide/getting-started.md"}'),E={name:"ms/guide/getting-started.md"},r={id:"cdn-tanpa-bina",tabindex:"-1"},d={id:"cli-produksi",tabindex:"-1"};function g(o,s,u,y,c,m){const n=k("Badge");return e(),p("div",null,[s[6]||(s[6]=i("h1",{id:"bermula",tabindex:"-1"},[a("Bermula "),i("a",{class:"header-anchor",href:"#bermula","aria-label":'Permalink to "Bermula"'},"​")],-1)),s[7]||(s[7]=i("p",null,"Mulakan dengan SenangStart CSS dalam beberapa minit.",-1)),i("h2",r,[s[0]||(s[0]=a("CDN (Tanpa Bina) ",-1)),l(n,{type:"tip",text:"Disyorkan untuk prototaip"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#cdn-tanpa-bina","aria-label":'Permalink to "CDN (Tanpa Bina) <Badge type="tip" text="Disyorkan untuk prototaip" />"'},"​",-1))]),s[8]||(s[8]=t(`<p>Cara terpantas untuk cuba SenangStart — tiada langkah bina diperlukan:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
2
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
3
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
4
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Aplikasi Saya&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
5
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> &lt;!-- Hanya tambah skrip ini --&gt;</span></span>
6
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
7
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
8
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
9
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
10
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col center&quot;</span></span>
11
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:big&quot;</span></span>
12
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:primary text:white rounded:big&quot;</span></span>
13
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
14
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text-size:giant font:bold&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Hello SenangStart!&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
15
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m-t:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Tanpa konfigurasi, stail serta-merta.&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
16
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
17
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
18
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="bagaimana-cdn-jit-berfungsi" tabindex="-1">Bagaimana CDN JIT Berfungsi <a class="header-anchor" href="#bagaimana-cdn-jit-berfungsi" aria-label="Permalink to &quot;Bagaimana CDN JIT Berfungsi&quot;">​</a></h3><ol><li><strong>Imbas DOM</strong> — Cari semua atribusi <code>layout</code>, <code>space</code>, dan <code>visual</code></li><li><strong>Jana CSS</strong> — Kompil style secara on-the-fly dalam pelayar</li><li><strong>Suntik Styles</strong> — Cipta tag <code>&lt;style&gt;</code> dengan CSS terkompil</li><li><strong>Pantau Perubahan</strong> — Guna MutationObserver untuk kemas kini dinamik</li></ol><h3 id="konfigurasi-cdn-tersuai" tabindex="-1">Konfigurasi CDN Tersuai <a class="header-anchor" href="#konfigurasi-cdn-tersuai" aria-label="Permalink to &quot;Konfigurasi CDN Tersuai&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;senangstart/config&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
19
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
20
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;theme&quot;: {</span></span>
21
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;colors&quot;: {</span></span>
22
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;brand&quot;: &quot;#8B5CF6&quot;,</span></span>
23
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;accent&quot;: &quot;#EC4899&quot;</span></span>
24
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
25
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
26
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
27
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
28
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>CDN JIT sesuai untuk prototaip dan pembelajaran. Untuk produksi, guna CLI build untuk prestasi lebih baik.</p></div>`,7)),i("h2",d,[s[3]||(s[3]=a("CLI (Produksi) ",-1)),l(n,{type:"info",text:"Disyorkan untuk produksi"}),s[4]||(s[4]=a()),s[5]||(s[5]=i("a",{class:"header-anchor",href:"#cli-produksi","aria-label":'Permalink to "CLI (Produksi) <Badge type="info" text="Disyorkan untuk produksi" />"'},"​",-1))]),s[9]||(s[9]=t(`<h3 id="pemasangan" tabindex="-1">Pemasangan <a class="header-anchor" href="#pemasangan" aria-label="Permalink to &quot;Pemasangan&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Pasang secara global</span></span>
29
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -g</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @bookklik/senangstart-css</span></span>
30
+ <span class="line"></span>
31
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Atau guna npx</span></span>
32
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @bookklik/senangstart-css</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><h3 id="mulakan-konfigurasi" tabindex="-1">Mulakan Konfigurasi <a class="header-anchor" href="#mulakan-konfigurasi" aria-label="Permalink to &quot;Mulakan Konfigurasi&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><p>Ini mencipta <code>senangstart.config.js</code> dalam root projek anda.</p><h3 id="tambah-ke-html" tabindex="-1">Tambah ke HTML <a class="header-anchor" href="#tambah-ke-html" aria-label="Permalink to &quot;Tambah ke HTML&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
33
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">link</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;stylesheet&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;./public/senangstart.css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
34
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="mula-pembangunan" tabindex="-1">Mula Pembangunan <a class="header-anchor" href="#mula-pembangunan" aria-label="Permalink to &quot;Mula Pembangunan&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><p>Ini memantau fail anda dan membina semula apabila ada perubahan.</p><h3 id="bina-untuk-produksi" tabindex="-1">Bina untuk Produksi <a class="header-anchor" href="#bina-untuk-produksi" aria-label="Permalink to &quot;Bina untuk Produksi&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --minify</span></span></code></pre></div><h2 id="komponen-pertama-anda" tabindex="-1">Komponen Pertama Anda <a class="header-anchor" href="#komponen-pertama-anda" aria-label="Permalink to &quot;Komponen Pertama Anda&quot;">​</a></h2><p>Mari cipta kad ringkas:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
35
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col&quot;</span></span>
36
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;w:[320px] p:medium&quot;</span></span>
37
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:white rounded:big shadow:medium&quot;</span></span>
38
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
39
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex between&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m-b:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
40
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;font:bold text-size:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Profil&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
41
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Edit&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
42
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
43
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
44
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey text-size:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Nama Pengguna&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
45
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;@senang_dev&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
46
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
47
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p><strong>Apa yang berlaku:</strong></p><ul><li><code>layout=&quot;flex col&quot;</code> — Flexbox, arah menegak</li><li><code>space=&quot;w:[320px] p:medium&quot;</code> — Lebar 320px, padding medium</li><li><code>visual=&quot;bg:white rounded:big shadow:medium&quot;</code> — Latar putih, sudut bulat, bayang</li></ul><h2 id="langkah-seterusnya" tabindex="-1">Langkah Seterusnya <a class="header-anchor" href="#langkah-seterusnya" aria-label="Permalink to &quot;Langkah Seterusnya&quot;">​</a></h2><ul><li><a href="/senangstart-css/ms/guide/tri-attribute.html">Sintaksis Tri-Atribusi</a> — Selami layout, space, visual</li><li><a href="/senangstart-css/ms/guide/natural-scale.html">Skala Semula Jadi</a> — Fahami falsafah jarak</li><li><a href="/senangstart-css/ms/guide/configuration.html">Konfigurasi</a> — Sesuaikan tema</li></ul>`,19))])}const C=h(E,[["render",g]]);export{b as __pageData,C as default};
package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.lean.js ADDED
@@ -0,0 +1 @@
1
+ import{_ as h,C as k,c as p,o as e,j as i,ae as t,a,G as l}from"./chunks/framework.I305HrzY.js";const b=JSON.parse('{"title":"Bermula","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/getting-started.md","filePath":"ms/guide/getting-started.md"}'),E={name:"ms/guide/getting-started.md"},r={id:"cdn-tanpa-bina",tabindex:"-1"},d={id:"cli-produksi",tabindex:"-1"};function g(o,s,u,y,c,m){const n=k("Badge");return e(),p("div",null,[s[6]||(s[6]=i("h1",{id:"bermula",tabindex:"-1"},[a("Bermula "),i("a",{class:"header-anchor",href:"#bermula","aria-label":'Permalink to "Bermula"'},"​")],-1)),s[7]||(s[7]=i("p",null,"Mulakan dengan SenangStart CSS dalam beberapa minit.",-1)),i("h2",r,[s[0]||(s[0]=a("CDN (Tanpa Bina) ",-1)),l(n,{type:"tip",text:"Disyorkan untuk prototaip"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#cdn-tanpa-bina","aria-label":'Permalink to "CDN (Tanpa Bina) <Badge type="tip" text="Disyorkan untuk prototaip" />"'},"​",-1))]),s[8]||(s[8]=t("",7)),i("h2",d,[s[3]||(s[3]=a("CLI (Produksi) ",-1)),l(n,{type:"info",text:"Disyorkan untuk produksi"}),s[4]||(s[4]=a()),s[5]||(s[5]=i("a",{class:"header-anchor",href:"#cli-produksi","aria-label":'Permalink to "CLI (Produksi) <Badge type="info" text="Disyorkan untuk produksi" />"'},"​",-1))]),s[9]||(s[9]=t("",19))])}const C=h(E,[["render",g]]);export{b as __pageData,C as default};
package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.js ADDED
@@ -0,0 +1,3 @@
1
+ import{_ as t,c as e,o as s,ae as i}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Apa itu SenangStart CSS?","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/index.md","filePath":"ms/guide/index.md"}'),n={name:"ms/guide/index.md"};function d(r,a,l,h,o,p){return s(),e("div",null,[...a[0]||(a[0]=[i(`<h1 id="apa-itu-senangstart-css" tabindex="-1">Apa itu SenangStart CSS? <a class="header-anchor" href="#apa-itu-senangstart-css" aria-label="Permalink to &quot;Apa itu SenangStart CSS?&quot;">​</a></h1><p>SenangStart CSS ialah rangka kerja CSS utility-first yang menggantikan konvensyen penamaan abstrak dengan <strong>Adjektif Semula Jadi</strong>.</p><h2 id="masalahnya" tabindex="-1">Masalahnya <a class="header-anchor" href="#masalahnya" aria-label="Permalink to &quot;Masalahnya&quot;">​</a></h2><p>Rangka kerja utiliti tradisional memaksa anda menghafal skala arbitrari:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Apa maksud px-4? --&gt;</span></span>
2
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;px-4 py-8 mt-16 mb-32&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;...&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>Adakah <code>px-4</code> pixel? Adakah <code>mt-16</code> lebih besar daripada <code>mb-32</code>? Anda perlu sentiasa merujuk dokumentasi.</p><h2 id="penyelesaiannya" tabindex="-1">Penyelesaiannya <a class="header-anchor" href="#penyelesaiannya" aria-label="Permalink to &quot;Penyelesaiannya&quot;">​</a></h2><p>SenangStart menggunakan perkataan yang anda sudah faham:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Terus difahami --&gt;</span></span>
3
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-x:small p-y:medium m-t:big m-b:giant&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;...&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p><strong>Tiada kiraan mental. Tiada jadual rujukan. Hanya terangkan apa yang anda mahu.</strong></p><h2 id="prinsip-teras" tabindex="-1">Prinsip Teras <a class="header-anchor" href="#prinsip-teras" aria-label="Permalink to &quot;Prinsip Teras&quot;">​</a></h2><h3 id="_1-bahasa-semula-jadi-dahulu" tabindex="-1">1. Bahasa Semula Jadi Dahulu <a class="header-anchor" href="#_1-bahasa-semula-jadi-dahulu" aria-label="Permalink to &quot;1. Bahasa Semula Jadi Dahulu&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Daripada...</th><th>Guna...</th></tr></thead><tbody><tr><td><code>px-4</code></td><td><code>tiny</code></td></tr><tr><td><code>px-8</code></td><td><code>small</code></td></tr><tr><td><code>px-16</code></td><td><code>medium</code></td></tr><tr><td><code>px-32</code></td><td><code>big</code></td></tr><tr><td><code>px-64</code></td><td><code>giant</code></td></tr><tr><td><code>px-128</code></td><td><code>vast</code></td></tr></tbody></table><h3 id="_2-pengasingan-tanggungjawab" tabindex="-1">2. Pengasingan Tanggungjawab <a class="header-anchor" href="#_2-pengasingan-tanggungjawab" aria-label="Permalink to &quot;2. Pengasingan Tanggungjawab&quot;">​</a></h3><p>Tiga atribusi, tiga tanggungjawab:</p><table tabindex="0"><thead><tr><th>Atribusi</th><th>Tujuan</th><th>Contoh</th></tr></thead><tbody><tr><td><code>layout</code></td><td>Struktur &amp; aliran</td><td><code>layout=&quot;flex col center&quot;</code></td></tr><tr><td><code>space</code></td><td>Jarak &amp; saiz</td><td><code>space=&quot;p:medium g:small&quot;</code></td></tr><tr><td><code>visual</code></td><td>Warna &amp; penampilan</td><td><code>visual=&quot;bg:white rounded:big&quot;</code></td></tr></tbody></table><h3 id="_3-mesra-ai" tabindex="-1">3. Mesra AI <a class="header-anchor" href="#_3-mesra-ai" aria-label="Permalink to &quot;3. Mesra AI&quot;">​</a></h3><p>SenangStart menghasilkan fail konteks yang membantu pembantu AI memahami sistem reka bentuk anda:</p><blockquote><p><strong>Bila pengguna cakap:</strong> &quot;ketatkan&quot;<br><strong>AI tahu untuk:</strong> Kurangkan jarak (medium → small → tiny)</p></blockquote><blockquote><p><strong>Bila pengguna cakap:</strong> &quot;bagi ruang&quot;<br><strong>AI tahu untuk:</strong> Besarkan jarak (medium → big → giant)</p></blockquote><h2 id="langkah-seterusnya" tabindex="-1">Langkah Seterusnya <a class="header-anchor" href="#langkah-seterusnya" aria-label="Permalink to &quot;Langkah Seterusnya&quot;">​</a></h2><ul><li><a href="/senangstart-css/ms/guide/getting-started.html">Bermula</a> — Pasang dan guna SenangStart</li><li><a href="/senangstart-css/ms/guide/natural-scale.html">Skala Semula Jadi</a> — Fahami falsafah jarak</li><li><a href="/senangstart-css/ms/guide/tri-attribute.html">Sintaksis Tri-Atribusi</a> — Pelajari layout, space, dan visual</li></ul>`,22)])])}const k=t(n,[["render",d]]);export{g as __pageData,k as default};
package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.lean.js ADDED
@@ -0,0 +1 @@
1
+ import{_ as t,c as e,o as s,ae as i}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Apa itu SenangStart CSS?","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/index.md","filePath":"ms/guide/index.md"}'),n={name:"ms/guide/index.md"};function d(r,a,l,h,o,p){return s(),e("div",null,[...a[0]||(a[0]=[i("",22)])])}const k=t(n,[["render",d]]);export{g as __pageData,k as default};