Panduan Menambahkan Konten

Panduan lengkap untuk menambahkan dan mengelola konten di website portfolio ini, baik untuk Dokumentasi (Docs) maupun Blog.

---

📁 Struktur Folder

portfolio/
├── docs/                          # Folder dokumentasi
│   ├── intro.md                   # Halaman intro
│   ├── hello.md                   # Dokumen contoh
│   ├── panduan-konten.md          # File ini
│   ├── tutorial-basics/           # Kategori: Tutorial Basics
│   │   ├── _category_.json        # Konfigurasi kategori
│   │   └── *.md                   # File dokumentasi
│   └── tutorial-extras/           # Kategori: Tutorial Extras
│       ├── _category_.json
│       └── *.md
│
├── blog/                          # Folder blog
│   ├── authors.yml                # Data penulis
│   └── YYYY-MM-DD-judul.md        # File artikel blog
│
└── static/
    └── img/                       # Folder gambar

---

📝 Menambahkan Dokumentasi (Docs)

Langkah 1: Buat File Markdown

Buat file .md atau .mdx di folder docs/:

# Contoh nama file
docs/nama-dokumen.md
docs/tutorial-basics/topik-baru.md

Langkah 2: Tambahkan Front Matter

Setiap file dokumentasi WAJIB memiliki front matter di bagian atas:

---
id: nama-dokumen
sidebar_label: 'Label di Sidebar'
sidebar_position: 1
---

# Judul Dokumen

Konten dokumen Anda di sini...

Penjelasan Front Matter:

Property	Wajib	Deskripsi
id	✅ Ya	ID unik dokumen (tanpa spasi, gunakan dash)
sidebar_label	Tidak	Label yang tampil di sidebar (default: judul)
sidebar_position	Tidak	Urutan di sidebar (angka kecil = lebih atas)
title	Tidak	Judul halaman (default: heading pertama)
description	Tidak	Deskripsi untuk SEO
slug	Tidak	Custom URL path
tags	Tidak	Tag untuk kategorisasi
hide_title	Tidak	Sembunyikan judul (true/false)
hide_table_of_contents	Tidak	Sembunyikan daftar isi

Langkah 3: Tulis Konten

Gunakan Markdown standar:

# Heading 1
## Heading 2
### Heading 3

Paragraf biasa dengan **bold**, *italic*, dan `inline code`.

- Item list 1
- Item list 2
  - Sub item

1. Numbered list
2. Item kedua

> Blockquote untuk kutipan

[Link teks](https://example.com)

![Alt text](/img/gambar.png)

Langkah 4: Tambahkan Code Block

```javascript title="contoh.js"
function helloWorld() {
  console.log('Hello World!');
}
```

```python title="script.py"
def hello():
    print("Hello World!")
```

Langkah 5: Membuat Kategori Baru

1. Buat folder baru di docs/:

docs/kategori-baru/

2. Buat file _category_.json:

{
  "label": "Nama Kategori",
  "position": 4,
  "link": {
    "type": "generated-index",
    "description": "Deskripsi kategori ini"
  }
}

3. Tambahkan file dokumentasi di dalam folder tersebut.

Menyembunyikan Konten (Hidden)

Ada beberapa cara untuk menyembunyikan konten dari tampilan:

1. Menyembunyikan Kategori dari Sidebar

Edit file _category_.json dalam folder kategori:

{
  "label": "Nama Kategori",
  "position": 2,
  "className": "hidden-category",
  "link": null
}

Pastikan CSS berikut ada di src/css/custom.css:

.hidden-category {
  display: none !important;
}

2. Menyembunyikan Dokumen Individual

Tambahkan sidebar_class_name di front matter dokumen:

---
id: dokumen-rahasia
sidebar_label: 'Dokumen Rahasia'
sidebar_position: 99
sidebar_class_name: hidden-category
---

3. Exclude dari Sidebar (Tetap Bisa Diakses via URL)

Edit file sidebars.js untuk exclude file/folder tertentu:

export default {
  tutorialSidebar: [
    {
      type: 'autogenerated',
      dirName: '.',
    },
  ],
};

Atau exclude secara spesifik dengan membuat sidebar manual:

export default {
  tutorialSidebar: [
    'intro',
    'panduan-konten',
    'hello',
    // Tidak menyertakan 'tutorial-basics' dan 'tutorial-extras'
  ],
};

4. Menyembunyikan Artikel Blog (Draft)

Tambahkan draft: true di front matter artikel blog:

---
slug: artikel-draft
title: Artikel yang Belum Selesai
authors: [veven]
tags: [draft]
draft: true
---

Artikel dengan draft: true tidak akan tampil di production, tetapi tetap bisa dilihat di development mode (npm start).

5. Menyembunyikan Halaman dari Navigasi Tapi Tetap Bisa Diakses

Gunakan unlisted: true:

---
id: halaman-tersembunyi
unlisted: true
---

Halaman tidak akan muncul di sidebar atau pencarian, tapi bisa diakses langsung via URL.

---

📰 Menambahkan Artikel Blog

Langkah 1: Buat File dengan Format Nama yang Benar

Format nama file: YYYY-MM-DD-judul-artikel.md

# Contoh
blog/2026-03-04-tutorial-react-hooks.md
blog/2026-03-05-tips-produktivitas.md

Langkah 2: Tambahkan Front Matter Blog

---
slug: tutorial-react-hooks
title: Tutorial React Hooks untuk Pemula
authors: [veven]
tags: [react, javascript, tutorial]
---

Paragraf pertama akan menjadi excerpt/ringkasan.

<!--truncate-->

Konten lengkap artikel di sini...

Penjelasan Front Matter Blog:

Property	Wajib	Deskripsi
slug	✅ Ya	URL path artikel (misal: /blog/tutorial-react-hooks)
title	✅ Ya	Judul artikel
authors	✅ Ya	Array nama author dari authors.yml
tags	Tidak	Array tag untuk kategorisasi
date	Tidak	Override tanggal (format: YYYY-MM-DD)
description	Tidak	Deskripsi untuk SEO
image	Tidak	Gambar thumbnail untuk social sharing
hide_table_of_contents	Tidak	Sembunyikan daftar isi
draft	Tidak	Set true untuk menyembunyikan artikel

Langkah 3: Gunakan Truncate Marker

Tambahkan <!--truncate--> untuk memisahkan excerpt dan konten lengkap:

---
slug: contoh-artikel
title: Contoh Artikel
authors: [veven]
tags: [contoh]
---

Ini adalah ringkasan artikel yang akan tampil di halaman daftar blog.
Paragraf ini akan menjadi preview.

<!--truncate-->

## Konten Lengkap

Semua konten di bawah truncate marker hanya tampil di halaman artikel.

Langkah 4: Menambahkan Author Baru

Edit file blog/authors.yml:

veven:
  name: Muh Veven
  title: Lecturer & Learner
  url: https://github.com/mhvvn
  image_url: https://avatars.githubusercontent.com/u/YOUR_ID

# Tambahkan author baru:
nama-author:
  name: Nama Lengkap
  title: Jabatan/Profesi
  url: https://website-atau-github.com
  image_url: https://link-ke-foto.jpg

---

🖼️ Menambahkan Gambar

Langkah 1: Simpan Gambar

Letakkan gambar di folder static/img/:

static/img/artikel/gambar-saya.png
static/img/tutorial/screenshot.jpg

Langkah 2: Gunakan di Markdown

# Menggunakan path absolut (dari root)
![Deskripsi gambar](/img/artikel/gambar-saya.png)

# Dengan ukuran (MDX)
<img src="/img/gambar.png" width="500" alt="Deskripsi" />

---

🔗 Membuat Link Antar Dokumen

Link ke Dokumen Lain

# Menggunakan path relatif
[Lihat Tutorial Intro](./intro.md)
[Baca Panduan](../tutorial-basics/create-a-page.md)

# Menggunakan ID dokumen
[Link ke Hello](/docs/hello)

Link ke Blog

[Baca artikel terbaru](/blog/nama-slug-artikel)
[Lihat semua artikel](/blog)

---

⚙️ Fitur Markdown Tambahan

Admonitions (Callout Box)

:::note[Catatan]
Ini adalah catatan biasa.
:::

:::tip[Tips]
Ini adalah tips berguna!
:::

:::info[Informasi]
Informasi tambahan di sini.
:::

:::warning[Peringatan]
Hati-hati dengan hal ini!
:::

:::danger[Bahaya]
Ini sangat penting untuk diperhatikan!
:::

Tabs

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
  <TabItem value="npm" label="npm" default>
    npm install package-name
  </TabItem>
  <TabItem value="yarn" label="Yarn">
    yarn add package-name
  </TabItem>
</Tabs>

Code Block dengan Highlight

```javascript {2,4-6}
function contoh() {
  // Baris ini di-highlight
  const a = 1;
  // Baris 4-6
  // juga di-highlight
  return a;
}
```

---

✅ Checklist Sebelum Publish

Untuk Dokumentasi:

• File memiliki front matter dengan id
• sidebar_position sudah diatur
• Semua link internal berfungsi
• Gambar sudah ada di folder static/img/
• Code block memiliki bahasa yang benar

Untuk Blog:

• Nama file sesuai format YYYY-MM-DD-slug.md
• Front matter lengkap (slug, title, authors, tags)
• Author terdaftar di authors.yml
• Ada <!--truncate--> untuk memisahkan excerpt
• Gambar dan link berfungsi

---

🚀 Preview Perubahan

Setelah menambahkan atau mengubah konten:

# Jalankan development server
npm start
# atau
yarn start

Buka http://localhost:3000 untuk melihat preview.

---

📚 Referensi Tambahan

• Docusaurus Docs Guide
• Docusaurus Blog Guide
• Markdown Features