mini-ssg-zen

v0.9.3

Published

4 years ago

Simple static site generator, to prevent you write DRY HTML files.

0High
0Medium
0Low

mzaini30

ssg

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}"
      }
    }
  }
}