Komponen Artikel Sitemas dengan Material Design 3

Halaman ini berisi dokumentasi lengkap semua komponen yang tersedia untuk menulis artikel di Sitemas. Komponen-komponen ini menggunakan token Material Design 3 seperti --md-sys-shape-corner-*, --md-sys-color-*, dan motion tokens untuk animasi yang smooth.

InfoBox

Komponen untuk menampilkan pesan penting dengan berbagai tipe.

Penggunaan

<InfoBox type="info" title="Judul">
  Konten di sini...
</InfoBox>

Badge

Label inline untuk menandai status atau versi.

Tersedia dalam beberapa variasi: Default Info Sukses Peringatan Error

Ukuran kecil: v2.0.0

Penggunaan

<Badge variant="success">Stabil</Badge>
<Badge size="sm" variant="info">v2.0</Badge>

Tabs

Komponen untuk menampilkan konten dalam tab yang bisa diklik.

function hello() {
  console.log("Hello from JavaScript!");
}

function hello(): void {
  console.log("Hello from TypeScript!");
}

def hello():
    print("Hello from Python!")

Penggunaan

<Tabs tabs={["Tab 1", "Tab 2"]}>
  <TabPanel index={0}>Konten tab 1</TabPanel>
  <TabPanel index={1}>Konten tab 2</TabPanel>
</Tabs>

Accordion

Komponen collapsible untuk menyembunyikan/menampilkan konten.

Penggunaan

<Accordion title="Judul Section">
  Konten yang bisa di-collapse...
</Accordion>

CodeBlock

Komponen untuk menampilkan blok kode dengan fitur tambahan seperti judul file, label bahasa, dan line numbers.

const greeting = "Hello World!";
console.log(greeting);

function add(a, b) {
  return a + b;
}

Penggunaan

<CodeBlock title="filename.ts" lang="typescript" showLineNumbers={true}>
  ```typescript
  // Kode di sini...
  ```
</CodeBlock>

Props:

• title (optional): Menampilkan nama file atau judul.
• lang (optional): Menampilkan label bahasa (misal: JS, TS, PY).
• showLineNumbers (optional): Menampilkan nomor baris (true/false).

Steps

Komponen untuk menampilkan langkah-langkah tutorial dengan timeline.

npm install

export default {
  site: 'https://example.com'
}

npm run dev

Penggunaan

<Steps>
  <Step title="Langkah 1">Konten langkah 1</Step>
  <Step title="Langkah 2">Konten langkah 2</Step>
</Steps>

LinkCard

Komponen untuk menampilkan link sebagai card dengan preview.

Penggunaan

<LinkCard 
  href="https://example.com" 
  title="Judul Link" 
  description="Deskripsi singkat"
/>

CardGrid

Grid layout untuk menampilkan beberapa card.

Penggunaan

<CardGrid cols={2}>
  <Card title="Card 1">Konten card 1</Card>
  <Card title="Card 2">Konten card 2</Card>
</CardGrid>

CompareTable

Tabel perbandingan dua opsi secara side-by-side.

Penggunaan

<CompareTable 
  headers={["Opsi A", "Opsi B"]}
  rows={[
    ["Fitur 1A", "Fitur 1B"],
    ["Fitur 2A", "Fitur 2B"],
  ]}
  highlightWinner="left"
/>

FileTree

Komponen untuk menampilkan struktur direktori project.

Penggunaan

<FileTree tree={[
  { name: "src", children: [
    { name: "components", children: [
      { name: "Button.astro", highlight: true }
    ]}
  ]},
  { name: "package.json" }
]} />

Figure

Komponen untuk menampilkan gambar dengan lightbox dan caption opsional di bawah gambar.

Penggunaan

import Figure from '@/components/mdx/Figure.astro';
import gambar from './gambar.png';

<Figure 
  src={gambar} 
  alt="Deskripsi gambar" 
  caption="Caption opsional"
/>

Gallery

Komponen untuk menampilkan galeri gambar dengan scroll horizontal dan lightbox navigasi.

Penggunaan

import Gallery from '@/components/mdx/Gallery.astro';
import gambar1 from './gambar1.png';
import gambar2 from './gambar2.png';

<Gallery 
  id="unique-gallery-id"
  images={[
    { src: gambar1, alt: "Gambar pertama" },
    { src: gambar2, alt: "Gambar kedua" },
  ]}
/>

VideoEmbed

Komponen untuk embed video YouTube secara responsive.

Penggunaan

<VideoEmbed 
  url="https://youtube.com/watch?v=xxxxx" 
  title="Judul Video"
/>

Typography Bawaan

Selain komponen di atas, artikel juga mendukung styling typography bawaan:

Headings

Heading level 2, 3, dan 4 otomatis di-style dengan aksen teal.

Lists

Unordered list:

• Item pertama dengan bullet teal
• Item kedua
• Item ketiga

Ordered list:

1. Langkah pertama dengan badge nomor
2. Langkah kedua
3. Langkah ketiga

Blockquote

Ini adalah contoh blockquote dengan styling premium. Quote akan ditampilkan dengan border accent dan ikon kutip.

— Nama Penulis

Inline Code

Gunakan inline code untuk menampilkan kode dalam teks.

Keyboard Shortcuts

Tekan Ctrl + S untuk menyimpan.

Highlighted Text

Gunakan tag <mark> untuk menandai teks penting dalam paragraf.

Abbreviations

Hover pada HTML atau CSS untuk melihat kepanjangannya.

Definition Lists

Astro

Framework web modern untuk membangun website cepat dengan island architecture.

MDX

Format yang menggabungkan Markdown dengan komponen JSX.

Tables

Button

Komponen Call to Action (CTA) dengan berbagai varian styling premium.

Penggunaan

<Button href="https://example.com" variant="gradient" size="lg">
  Download Sekarang
</Button>

Props:

• variant: primary (default), secondary, outline, gradient, danger.
• size: sm, md (default), lg.
• icon: SVG string untuk icon (opsional).
• fullWidth: true untuk lebar penuh.

ProsCons

Komponen untuk menampilkan perbandingan Kelebihan (Pros) dan Kekurangan (Cons), cocok untuk artikel review.

Penggunaan

<ProsCons>
  <ul slot="pros">
    <li>Kelebihan 1</li>
    <li>Kelebihan 2</li>
  </ul>
  <ul slot="cons">
    <li>Kekurangan 1</li>
    <li>Kekurangan 2</li>
  </ul>
</ProsCons>

Timeline

Komponen untuk menampilkan roadmap, changelog, atau sejarah dalam format vertical timeline.

Penggunaan

<Timeline>
  <TimelineItem date="Q1 2024" title="Milestone A">
    Deskripsi pencapaian...
  </TimelineItem>
  
  <TimelineItem date="Q2 2024" title="Milestone B">
    Deskripsi pencapaian...
  </TimelineItem>
</Timeline>

AudioPlayer

Komponen untuk memutar audio (podcast atau rekaman artikel) dengan tampilan custom.

Penggunaan

<AudioPlayer 
  src="/path/to/audio.mp3" 
  title="Judul Audio" 
  description="Deskripsi singkat" 
/>

FAQ

Komponen Accordion khusus untuk Frequently Asked Questions yang otomatis menghasilkan JSON-LD Schema Markup untuk SEO (agar muncul di Google Search Result).

Penggunaan

<FAQ
  items={[
    {
      q: "Pertanyaan 1",
      a: "Jawaban 1"
    },
    {
      q: "Pertanyaan 2",
      a: "Jawaban 2"
    }
  ]}
/>

AuthorSignature

Komponen profil penulis yang menarik untuk diletakkan di akhir artikel.

Penggunaan

<AuthorSignature
  name="Nama Penulis"
  role="Role / Jabatan"
  bio="Bio singkat penulis..."
  avatar="7.ico"
  twitter="#"
  github="#"
/>

Changelog

Komponen Riwayat Perubahan dengan desain MD3 premium. Menggunakan card-based layout dengan badge icons dan visual hierarchy yang jelas. Cocok untuk dokumentasi software atau update log.

Penggunaan

<Changelog
  title="Update Log"
  versions={[
    {
      version: "v2.0",
      date: "2024-03-20",
      changes: [
        { type: "added", content: "Fitur Baru" },
        { type: "fixed", content: "Perbaikan Bug" }
      ]
    }
  ]}
/>

Tipe Perubahan: added, fixed, changed, removed, deprecated.

Highlight

Komponen untuk menandai/highlight teks dengan berbagai variasi warna.

Tersedia warna: Default Yellow Green Blue Pink

Penggunaan

<Highlight color="yellow">Teks yang di-highlight</Highlight>

Props:

• color: default, yellow, green, blue, pink, accent

Tooltip

Komponen inline untuk menampilkan informasi tambahan saat hover.

Ini adalah teks dengan tooltip yang bisa diklik. Kamu juga bisa menggunakan posisi bawah .

Penggunaan

<Tooltip text="Informasi tambahan" position="top">
  Teks yang di-hover
</Tooltip>

Props:

• text: Konten tooltip yang akan ditampilkan
• position: top (default), bottom

Spoiler

Komponen untuk menyembunyikan konten yang bisa dibuka dengan klik.

Penggunaan

<Spoiler label="Klik untuk membuka">
  Konten tersembunyi di sini...
</Spoiler>

Props:

• label: Label tombol (default: “Klik untuk membuka”)

KeyboardShortcut

Komponen untuk menampilkan kombinasi keyboard dengan styling visual.

Untuk menyimpan file, tekan Ctrl + S . Untuk membuka terminal, gunakan Ctrl + Shift + T .

Shortcut lainnya: ⌘ + K atau Alt + F4

Penggunaan

<KeyboardShortcut keys={["Ctrl", "Alt", "Del"]} />

Props:

• keys: Array string untuk setiap tombol keyboard

Lightbox

Gambar yang bisa di-zoom dengan overlay fullscreen.

Penggunaan

<Lightbox 
    src="/path/to/image.jpg" 
    alt="Deskripsi gambar"
    caption="Caption opsional"
/>

Props:

• src: URL gambar (required)
• alt: Alt text untuk aksesibilitas
• caption: Caption di bawah gambar

Footnote

Catatan kaki dengan popup hover untuk referensi akademis.

Ini adalah contoh teks dengan footnote ¹ Ini adalah penjelasan dari footnote pertama yang muncul saat hover. yang bisa dihover untuk melihat detailnya.

Kamu juga bisa menambahkan ² Footnote kedua dengan informasi tambahan yang relevan untuk pembaca. lebih dari satu footnote dalam satu paragraf.

Penggunaan

Teks dengan footnote<Footnote id="1">Isi footnote di sini.</Footnote> yang bisa dihover.

Props:

• id: ID unik untuk footnote (required)
• Konten footnote diletakkan di dalam tag

MermaidDiagram

Diagram flowchart/sequence menggunakan Mermaid.js.

graph LR
  A[Develop] --> B[Test]
  B --> C{Pass?}
  C -->|Yes| D[Deploy]
  C -->|No| A
  D --> E[Monitor]

Penggunaan

<MermaidDiagram title="Judul Diagram">
graph TD
    A[Start] --> B[Process]
    B --> C[End]
</MermaidDiagram>

Props:

• title: Judul diagram (opsional)
• Konten diagram menggunakan sintaks Mermaid.js

Quiz

Komponen quiz interaktif untuk engagement pembaca.

Penggunaan

<Quiz 
    title="Judul Quiz"
    questions={[
        {
            question: "Pertanyaan?",
            options: ["A", "B", "C", "D"],
            correct: 0,
            explanation: "Penjelasan jawaban"
        }
    ]}
/>

Props:

• title: Judul quiz
• questions: Array objek dengan question, options, correct (index), explanation

CodeHighlight

Code block dengan line highlighting dan nomor baris.

function greet(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
  return message;
}

Penggunaan

<CodeHighlight 
    language="javascript" 
    filename="file.js" 
    highlight="1,3-5"
    showLineNumbers={true}
>
// kode di sini
</CodeHighlight>

Props:

• language: Bahasa pemrograman
• filename: Nama file (opsional)
• highlight: Baris yang di-highlight (misal: “1,3-5,8”)
• showLineNumbers: Tampilkan nomor baris (default: true)

Terminal

Mockup terminal untuk tutorial command line yang lebih otentik.

Penggunaan

<Terminal title="Terminal Title">
    <p class="command">echo "Hello World"</p>
    <p class="output">Hello World</p>
</Terminal>

Team

Menampilkan profil tim atau kontributor dengan gaya kartu filled.

Alexander

Lead Developer

Building performant web experiences.

Twitter

Sarah Doe

UI/UX Designer

Crafting beautiful interfaces.

Penggunaan

<Team
    members={[
        {
            name: "Nama",
            role: "Role",
            avatar: "/path/to/image.jpg",
            bio: "Deskripsi singkat",
            socials: [{ name: "Twitter", url: "#" }]
        }
    ]}
/>

Pricing

Tabel harga dengan desain card filled tanpa border outline.

Penggunaan

<Pricing
    plans={[
        {
            name: "Plan Name",
            price: "$99",
            description: "Desc",
            buttonText: "Buy",
            buttonLink: "#",
            featured: true, // Highlight featured plan
            features: [
                { text: "Feature 1", included: true },
                { text: "Feature 2", included: false }
            ]
        }
    ]}
/>

BeforeAfter

Slider interaktif untuk membandingkan dua gambar.

Original Redesign

Penggunaan

import imgBefore from './before.jpg';
import imgAfter from './after.jpg';

<BeforeAfter
    beforeImage={imgBefore.src}
    afterImage={imgAfter.src}
    beforeLabel="Sebelum"
    afterLabel="Sesudah"
/>

Download Card

Kartu download yang menonjol untuk lead magnet atau resource file.

Penggunaan

<DownloadCard
    title="Judul File"
    subtitle="Deskripsi singkat"
    filename="nama-file.zip"
    filesize="10 MB"
    format="ZIP" // ZIP, PDF, DOC, XLS
    link="/downloads/file.zip"
/>

Call To Action (CTA)

Box promosi yang persuasif untuk konversi.

Penggunaan

<CallToAction
    title="Judul CTA"
    description="Deskripsi penawaran yang menarik."
    buttonText="Tombol Aksi"
    buttonLink="#"
    type="accent" // default, accent, warning
/>

SeriesNavigation

Komponen untuk navigasi antar bagian dalam seri artikel multi-part. Menampilkan daftar semua artikel dalam seri dan navigasi prev/next.

Contoh Frontmatter

---
title: "Docker Mastery Part 1: Dasar Container"
series: "Docker Mastery"
---

Penggunaan

import SeriesNavigation from '@/components/mdx/SeriesNavigation.astro';

<SeriesNavigation series="Docker Mastery" />

Props

Fitur

• Menampilkan navigasi Sebelumnya dan Selanjutnya
• Daftar semua bagian dalam seri dengan highlight bagian aktif
• Link ke halaman index seri (/series/[slug])
• Progress indicator (Bagian X dari Y)

Kesimpulan

Dengan menggunakan 34+ komponen Material Design 3 di atas, kamu bisa membuat artikel yang lebih menarik, interaktif, dan profesional di Sitemas. Setiap komponen mengikuti prinsip desain M3:

• Extreme Rounded Corners — Menggunakan --md-sys-shape-corner-extra-large (40px) untuk feel premium
• Surface Hierarchy — Menggunakan container levels untuk depth tanpa shadow berlebihan
• M3 Motion — Animasi dengan emphasized easing untuk transisi yang natural
• Pure CSS — Performa maksimal tanpa framework CSS eksternal

Citation

Menampilkan daftar referensi atau sumber bacaan dengan gaya yang bersih tanpa outline.

Penggunaan

<Citation
    items={[
        {
            url: "https://example.com",
            title: "Judul Artikel",
            author: "Nama Penulis",
            year: "2024",
            publication: "Nama Website"
        }
    ]}
/>