Mini-ssg-zen NPM

Mini SSG Zen

Perbedaannya dengan Mini SSG

Hasil build, minified HTML
Sudah include dengan Windi CSS
Bisa main Markdown
Auto generate sitemap
Bisa nested/deep partial HTML

Instalasi

Install dengan:

npm i mini-ssg-zen

Lalu, pada package.json, tambahkan kode berikut:

"scripts": {
  "dev": "ssg --watch",
  "build": "ssg"
}

Terus, kalau ingin menjalankan mode dev, tinggal jalankan npm run dev. Untuk build, jalankan aja npm run build.

Struktur Folder

.
├── dev
│   ├── components
│   ├── imports
│   ├── layouts
│   ├── pages
│   └── static
└── public

File-file utama terletak di folder pages.

Contoh:

pages/index.html menjadi index.html
pages/about.html menjadi about.html
pages/kelas/satu.html menjadi kelas/satu.html

Folder layouts berfungsi untuk meletakkan layout-layout yang akan kita gunakan. Bentuknya adalah HTML.

Folder components dan imports berfungsi untuk meletakkan partial HTML. Bentuknya juga HTML.

Folder static berisi dengan file-file selain file HTML. Jadi, nanti langsung disalin ke folder public, nggak diolah.

Folder public adalah hasilnya.

Partial HTML

Memanggil Component

Isi dari dev/components/sidebar.html:

<div>
  @attach(isi)
</div>

Isi dari dev/pages/index.html:

@component(sidebar)
  @slot(isi)
    <img src="hello.jpg" alt="">
  @endslot
@endcomponent

Memanggil Import

Isi dari dev/imports/head.html:

<script src="adsense.js"></script>

Isi dari dev/pages/about.html:

<html>
  <head>
    @import(head)
  </head>
  <body>
    <p>Halo</p>
  </body>
</html>

Memanggil Layout

Isi dari dev/layouts/blog.html:

<h1>@attach(judul)</h1>
@attach(isi)

Isi dari dev/pages/baca.html:

@layout(blog)

@section(judul)
  Ini adalah Judul
@endsection

@section(isi)
  <p>Hello World...</p>
  <p>Bagaimana kabarnya?</p>
@endsection

Menggunakan Markdown (plus Shiki)

@markdown
  # Judul

  Ini adalah isi. _Tulisan miring_ **tebal**
@endmarkdown

Menggunakan Windi

Panggil dulu dengan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="windi.css">
</head>
<body>
	
</body>
</html>

Inline

<p class="bg-green-500 text-violet-800">Hai...</p>

Apply

<p class="judulnya">Ini adalah Judul</p>

<style lang="windi">
  .judulnya {
    @apply px-5 py-1 bg-red-300
  }
</style>

Buat class yang unik karena dia cuma generate satu biji file windi.css

Generate Sitemap

Buat dulu file mini.json yang isinya seperti ini:

{
  "situs": "https://kucing.com"
}

Lalu, build dengan npm run build.

Snippet dengan Emmet

{
  "config": {
    "markup": {
      "snippets": {
        "attach": "{@attach()}",
        "import": "{@import()}",
        "layout": "{@layout()\n\n@section()\n\t\n@endsection}",
        "section": "{@section()\n\t\n@endsection}",
        "markdown": "{@markdown\n\t\n@endmarkdown}",
        "component": "{@component()\n\t@slot()\n\t\t\n\t@endslot\n@endcomponent}",
        "slot": "{@slot()\n\t\n@endslot}",
        "windi": "style[lang=windi]",
        "petite": "script>{PetiteVue.createApp({}).mount()\n}"
      }
    }
  }
}

ssg

chokidar fs-extra html-minifier live-server markdown-it markdown-it-github-headings markdown-it-shiki read-json-sync recursive-readdir-sync sitemap-manager windicss

@infinitebrahmanuniverse/nolb-mini-@everything-registry/sub-chunk-2173

4 years ago

4 years ago

4 years ago

4 years ago