YPYM Icon YPYM ID
Staging QC Mode Verifikasi Fitur CMS

Katalog Komponen Ghost CMS (Front-End Verification)

Halaman ini dibuat khusus untuk memverifikasi tampilan dan interaktivitas dari seluruh komponen bawaan Ghost CMS (Koenig Editor) sebelum diterbitkan ke lingkungan produksi.

📖 Lihat versi artikel blog penuh di: /id-id/blog/showcase-komponen-ghost-cms →

1. Tipografi Dasar & Elemen Artikel

Ini adalah paragraf pengantar standar dalam sistem bacaan YPYM. Setiap paragraf menggunakan font Plus Jakarta Sans dengan keterbacaan tinggi, ukuran 17px, line-height 1.8, dan warna teks netral yang nyaman untuk mata.

Tautan di dalam konten otomatis memiliki garis bawah elegan yang berubah warna saat disentuh kursor. Untuk kata atau terminologi penting, kami menerapkan efek stabilo transparan kuning limau yang modern.

Infrastruktur arsitektur pencarian modern bukan sekadar menyusun kata kunci, melainkan membangun pondasi web yang dapat diindeks, dicache, dan dipercayai oleh sistem kecerdasan buatan dan mesin pencari dunia.

2. Komponen Signup Card (Fitur Berlangganan Newsletter)

Di bawah ini adalah kartu pendaftaran newsletter Ghost CMS yang telah diperbaiki secara tuntas. Form ini terhubung langsung ke API live /api/newsletter. Uji coba dengan memasukkan alamat email Anda untuk melihat transisi status loading spinner dan pesan konfirmasi sukses.

Varian Split Layout dengan Gambar:

3. Komponen Audio Card (Podcast & Voice Recording)

Mendukung pemutar audio HTML5 responsif dengan judul episode, thumbnail, slider timeline waktu, display durasi, serta slider volume:

Episode Thumbnail
YPYM Audio Briefing: Mengapa LLM Scraper Membutuhkan Latensi Edge <100ms
0:00 --:--

4. Komponen File Card (Lampiran Unduhan Dokumen & PDF)

Menampilkan kartu file download yang elegan untuk lampiran whitepaper, lembar riset, atau laporan audit teknis:

5. Komponen Header Card

KEMITRAAN STRATEGIS

Transformasikan Visibilitas Organik Perusahaan Skala Multinasional

Dari optimasi Answer Engine (AEO) hingga Generative Engine Optimization (GEO), YPYM mengamankan posisi merek Anda di seluruh kanvas jawaban AI masa depan.

Konsultasi dengan Arsitek Pencarian →

6. Komponen Toggle Card (Akordeon FAQ Interaktif)

Komponen FAQ collapsible yang dapat dibuka dan ditutup dengan animasi rotasi panah halus:

Bagaimana sistem caching edge YPYM mempercepat perayapan bot Google?

Dengan mendistribusikan salinan HTML semantik statis ke lebih dari 300 titik kehadiran (PoP) Cloudflare di seluruh dunia, bot pencari menerima halaman dalam hitungan milidetik (TTFB < 80ms), memaksimalkan pemanfaatan crawl budget tanpa membebani origin database Anda.

Apakah Ghost CMS aman untuk penerbitan berskala enterprise? (State: Terbuka)

Sangat aman. Ghost digunakan sebagai headless CMS murni yang berada di balik jaringan privat atau kontainer Docker terisolasi. Pengunjung umum hanya berinteraksi dengan SSR Astro yang cepat dan tidak memiliki akses langsung ke admin Ghost.

7. Komponen Callout Card

💡
Catatan Analis: Schema markup JSON-LD tipe TechArticle telah disematkan secara otomatis pada setiap halaman detail artikel untuk meningkatkan rasio keterpilihan Rich Snippets.
⚠️
Peringatan Algoritma: Pembelian backlink massal non-organik telah terdeteksi secara otomatis oleh sistem SpamBrain Google terbaru dan dapat memicu penalti manual pada ranking domain.
Audit Selesai: Seluruh 1.240 endpoint halaman berhasil lolos uji Core Web Vitals dengan skor LCP di bawah 1,2 detik.

Galeri foto Ghost dengan wadah flexbox kg-gallery-container dan baris kg-gallery-row:

9. Komponen Product Review Card

YPYM Enterprise Search Suite

YPYM Enterprise Autonomous Search Suite

5.0 / 5.0 (Review Terverifikasi)

Platform terpadu untuk orkestrasi sitemap dinamis, sanitasi backlink AI, dan distribusi konten edge transnasional dengan SLA ketersediaan 99,99%.

10. Komponen Button Cards (Posisi Kiri, Tengah, Kanan)

11. Komponen Bookmark Card (Rich Link Preview)

Solusi Pertumbuhan Organik & Arsitektur Mesin Pencari | YPYM ID
Pelajari metodologi komprehensif kami dalam membangun ekosistem pemasaran organik tingkat korporat, pemulihan trafik, dan ekspansi pasar regional.
YPYM Solutions

12. Komponen Video Card (Custom Ghost HTML5 Player)

0:00 --:--
Video demonstrasi latensi respons arsitektur edge node YPYM.

13. Komponen Public Preview / Paywall Card

Konten Eksklusif Anggota YPYM

Daftar sekarang untuk membuka akses penuh ke metodologi, data teknis, dan analisis komprehensif.

14. Komponen Code Block (Syntax & Copy Button)

// Inisialisasi edge worker untuk routing perayap Google
export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const userAgent = request.headers.get('user-agent') || '';
    const isBot = /Googlebot|bingbot|Baiduspider/i.test(userAgent);

    if (isBot) {
      return fetch(`https://cache.ypym.app${new URL(request.url).pathname}`, {
        headers: { 'X-Bot-Accelerated': '1' }
      });
    }

    return fetch(request);
  }
};

15. Komponen Embeds (Video, Musik, & Audio Player)

Wadah responsif untuk embed pihak ketiga seperti YouTube, Spotify, dan SoundCloud:

A. YouTube Embed (Rasio 16:9 Otomatis):

Contoh sematan YouTube dengan border-radius 12px dan rasio 16:9 responsif.

B. Spotify Player Embed:

Pemutar Spotify terintegrasi langsung di dalam konten artikel.

Status Verifikasi Staging: Semua komponen di halaman ini siap digunakan oleh para penulis dan editor di Ghost CMS. Jika ditemukan komponen baru di masa mendatang, cukup tambahkan markup-nya di halaman ini untuk diverifikasi sebelum rilis publik.