Memahami Struktur Folder Proyek Sitemas

Memahami struktur folder adalah kunci untuk bekerja secara efektif dengan Sitemas. Artikel ini akan menjelaskan setiap direktori dan file penting, sehingga Anda tahu persis di mana harus melakukan perubahan untuk kebutuhan tertentu.

Overview Struktur

Berikut adalah struktur folder lengkap Sitemas:

sitemas/
├── .agent/              # Konfigurasi AI agent (opsional)
├── .astro/              # Cache Astro (auto-generated)
├── .git/                # Git repository data
├── .vscode/             # VS Code workspace settings
├── dist/                # Build output
├── docs/                # Dokumentasi tambahan
├── node_modules/        # Dependencies (auto-generated)
├── public/              # Static assets
├── src/                 # ⭐ Source code utama
│   ├── assets/          # Gambar & media yang di-optimize
│   ├── components/      # Komponen UI reusable
│   ├── content/         # Konten blog (artikel)
│   ├── layouts/         # Template layout halaman
│   ├── pages/           # Route & halaman
│   ├── styles/          # CSS global & tokens
│   ├── templates/       # Template artikel (referensi)
│   └── utils/           # Helper functions & constants
├── .env.example         # Contoh environment variables
├── .gitignore           # File yang diabaikan Git
├── astro.config.mjs     # Konfigurasi Astro
├── package.json         # Metadata & dependencies
├── README.md            # Dokumentasi proyek
└── tsconfig.json        # TypeScript configuration

Folder Root

public/ - Static Assets

Folder ini berisi file yang akan disalin langsung ke output tanpa processing:

public/
├── _redirects          # Redirect rules (Cloudflare/Netlify)
├── ads.txt             # Google AdSense verification
├── assets/             # Asset statis tambahan
├── favicon.svg         # Icon website
├── fonts/              # Web fonts (Google Sans)
│   ├── GoogleSans-Regular.woff2
│   ├── GoogleSans-Medium.woff2
│   └── GoogleSans-Bold.woff2
├── images/             # Gambar statis
└── robots.txt          # Instruksi untuk crawler

Kapan menggunakan public/:

• File yang tidak perlu di-optimize (sudah optimal)
• File yang harus tersedia di URL exact (favicon, robots.txt)
• Font files
• File verifikasi (ads.txt, site verification)

File Konfigurasi Root

Folder src/ - Source Code Utama

src/assets/ - Optimized Assets

src/assets/
├── illustrations/       # SVG ilustrasi
├── icons/               # Icon SVG
└── images/              # Gambar yang perlu di-optimize

Perbedaan dengan public/:

• File di sini akan di-optimize oleh Astro
• Gambar akan di-resize dan convert ke format modern (WebP/AVIF)
• Gunakan dengan import statement:

---
import heroImage from '@/assets/images/hero.png';
---
<img src={heroImage.src} alt="Hero" />

src/components/ - Komponen UI

Ini adalah folder terbesar yang berisi semua komponen reusable:

src/components/
├── ads/                 # Komponen iklan
│   ├── AdBanner.astro
│   ├── AdSlot.astro
│   └── StickyAd.astro
├── article/             # Komponen artikel
│   ├── ArticleCard.astro
│   ├── ArticleNavigation.astro
│   ├── Feedback.astro
│   └── ...
├── global/              # Komponen global (layout)
│   ├── Breadcrumbs.astro
│   ├── CookieBanner.astro
│   ├── Footer.astro
│   ├── LeftSidebar.astro
│   ├── Logo.astro
│   ├── Navbar.astro
│   ├── RightSidebar.astro
│   └── ...
├── home/                # Komponen homepage
│   ├── FeaturedSection.astro
│   ├── HeroSection.astro
│   ├── LatestSection.astro
│   └── ...
├── icons/               # Icon components (72+ icons)
│   ├── IconArrow.astro
│   ├── IconCode.astro
│   ├── IconGitHub.astro
│   └── ...
├── mdx/                 # Komponen untuk artikel MDX
│   ├── Accordion.astro
│   ├── CodeBlock.astro
│   ├── InfoBox.astro
│   ├── Steps.astro
│   ├── Tabs.astro
│   └── ... (34+ komponen)
├── seo/                 # Komponen SEO
│   └── Schema.astro
└── PageHero.astro       # Hero section untuk halaman

src/content/ - Konten Blog

Folder ini berisi semua artikel blog dalam format MDX:

src/content/
├── blog/                        # Koleksi artikel
│   ├── artikel-pertama/
│   │   ├── index.mdx            # Konten artikel
│   │   └── gambar.png           # Gambar dalam artikel
│   ├── artikel-kedua/
│   │   └── index.mdx
│   └── ...
└── config.ts                    # Schema definisi

Penting:

• Setiap artikel dalam folder sendiri
• Nama folder = slug URL (contoh: artikel-pertama → /blog/artikel-pertama)
• Gambar artikel bisa disimpan di folder yang sama
• config.ts mendefinisikan field yang valid di frontmatter

src/content/blog/panduan-instalasi-sitemas/
├── index.mdx           # Konten utama
├── screenshot-1.png    # Gambar (opsional)
├── screenshot-2.png    
└── diagram.svg         

import Figure from '@/components/mdx/Figure.astro';
import screenshot from './screenshot-1.png';

<Figure src={screenshot} alt="Screenshot" />

src/layouts/ - Template Layout

Layout adalah wrapper yang membungkus konten halaman:

src/layouts/
├── ArticleLayout.astro  # Layout untuk artikel blog
├── BaseLayout.astro     # Layout dasar (head, navbar, footer)
└── DocsLayout.astro     # Layout untuk halaman dokumentasi/kategori

Hierarki Layout:

BaseLayout
├── ArticleLayout (extends BaseLayout)
└── DocsLayout (extends BaseLayout)

• BaseLayout — Berisi <html>, <head>, meta tags, navbar, footer
• ArticleLayout — Menambahkan sidebar, TOC, article header
• DocsLayout — Untuk halaman listing (kategori, tag, blog index)

src/pages/ - Routes & Halaman

Folder ini menentukan URL routing website:

src/pages/
├── 404.astro                    # Halaman error 404
├── blog/
│   ├── index.astro              # /blog
│   └── [slug].astro             # /blog/judul-artikel (dynamic)
├── kategori/
│   ├── index.astro              # /kategori
│   └── [slug].astro             # /kategori/tutorial (dynamic)
├── tag/
│   ├── index.astro              # /tag
│   └── [slug].astro             # /tag/astro (dynamic)
├── og/
│   └── [slug].astro             # /og/slug (OG image generator)
├── index.astro                  # Homepage (/)
├── tentang.astro                # /tentang
├── kontak.astro                 # /kontak
├── privacy-policy.astro         # /privacy-policy
├── terms.astro                  # /terms
├── rss.xml.js                   # /rss.xml (RSS feed)
└── ... (halaman lain)

Konvensi Penamaan:

• index.astro → Route utama folder (/)
• [slug].astro → Dynamic route (parameter dari URL)
• nama-halaman.astro → Static route (/nama-halaman)
• .js atau .ts → API endpoint (non-HTML)

src/styles/ - CSS Global

src/styles/
├── fonts.css            # @font-face declarations
├── global.css           # CSS reset & utilities
├── m3-tokens.css        # Material Design 3 tokens
└── article.css          # Styles untuk konten artikel

System Design:

• m3-tokens.css — CSS Variables untuk warna, typography, spacing, dll.
• global.css — Import tokens + base styles
• fonts.css — Deklarasi font (Google Sans)
• article.css — Typography untuk prose/konten artikel

src/templates/ - Template Referensi

src/templates/
├── dokumentasi-template.mdx
├── insight-template.mdx
├── tips-template.mdx
└── tutorial-template.mdx

Folder ini berisi template artikel untuk setiap kategori. Gunakan sebagai referensi struktur dan komponen yang biasa digunakan.

src/utils/ - Helper Functions

src/utils/
├── ads-config.ts        # Konfigurasi iklan
├── constants.ts         # Site metadata, navigation, social links
└── helpers.ts           # Utility functions

constants.ts adalah file yang paling sering diedit untuk kustomisasi branding dan konfigurasi.

File Konfigurasi Detail

astro.config.mjs

export default defineConfig({
    site: 'https://sitemas.com',     // Domain production
    output: 'static',                 // Static site generation
    integrations: [
        sitemap({ /* options */ }),   // Auto-generate sitemap
        mdx(),                        // Enable MDX support
    ],
    markdown: {
        shikiConfig: {                // Syntax highlighting
            theme: 'github-dark',
            wrap: true,
        },
    },
});

tsconfig.json Path Aliases

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Ini memungkinkan import seperti @/components/... alih-alih relative path ../../components/....

Folder yang Tidak Perlu Diedit

Quick Reference: Di Mana Mengedit Apa?

Langkah Selanjutnya

Sekarang Anda memahami struktur folder Sitemas. Lanjutkan dengan mengkustomisasi branding:

Kesimpulan

Struktur folder Sitemas dirancang untuk kejelasan dan kemudahan maintenance:

• src/content/ — Tempat menulis konten
• src/components/ — UI building blocks
• src/pages/ — Routing dan halaman
• src/utils/ — Konfigurasi dan helpers
• src/styles/ — Styling global

Dengan memahami organisasi ini, Anda bisa navigasi codebase dengan percaya diri dan melakukan modifikasi dengan efektif.