refactor: Migrate documentation content, rebuild UI components, and update core architecture.

styles/algolia.css

@@ -1,14 +1,3 @@
-/*
-================================================================================
- DocSearch Component Styling (Refactored Version)
-================================================================================
-*/
-
-/* -- LANGKAH 1: Definisi Variabel Global --
-  Variabel tema DocSearch sekarang didefinisikan secara global di :root.
-  Ini menyederhanakan pewarisan tema dan memastikan konsistensi.
-  Mode gelap secara otomatis menimpa variabel ini karena .dark di globals.css.
-*/
 :root {
   --docsearch-primary-color: hsl(var(--primary));
   --docsearch-text-color: hsl(var(--muted-foreground));
@@ -18,47 +7,43 @@
   --docsearch-muted-color: hsl(var(--muted-foreground));
   --docsearch-container-background: rgba(0, 0, 0, 0.7);
   --docsearch-logo-color: hsl(var(--primary-foreground));
-  
+
   /* Modal */
   --docsearch-modal-width: 560px;
   --docsearch-modal-height: 600px;
   --docsearch-modal-background: hsl(var(--background));
   --docsearch-modal-shadow: 0 0 0 1px hsl(var(--border)), 0 8px 20px rgba(0, 0, 0, 0.2);
-  
+
   /* SearchBox */
   --docsearch-searchbox-height: 56px;
   --docsearch-searchbox-background: hsl(var(--input));
   --docsearch-searchbox-focus-background: hsl(var(--card));
   --docsearch-searchbox-shadow: none;
-  
-  /* Hit (Hasil Pencarian) */
+
+  /* Hit (Search Result) */
   --docsearch-hit-height: 56px;
   --docsearch-hit-color: hsl(var(--foreground));
   --docsearch-hit-active-color: hsl(var(--primary-foreground));
   --docsearch-hit-background: hsl(var(--card));
   --docsearch-hit-shadow: none;
-  
+
   /* Keys */
   --docsearch-key-gradient: none;
   --docsearch-key-shadow: none;
   --docsearch-key-pressed-shadow: none;
-  
+
   /* Footer */
   --docsearch-footer-height: 44px;
   --docsearch-footer-background: hsl(var(--background));
   --docsearch-footer-shadow: none;
 }
 
-/* -- LANGKAH 2: Gaya untuk Tombol Awal --
-  Gaya ini spesifik untuk tombol yang ada di Navbar, 
-  yang dibungkus oleh <div class="docsearch">.
-*/
 .docsearch .DocSearch-Button {
   background-color: hsl(var(--secondary));
   border: 1px solid hsl(var(--border));
   border-radius: 9999px;
-  width: 160px;
-  height: 40px;
+  width: 250px;
+  height: 35px;
   color: hsl(var(--muted-foreground));
   transition: width 0.3s ease;
   margin: 0;
@@ -71,8 +56,8 @@
 
 .docsearch .DocSearch-Search-Icon {
   color: var(--docsearch-muted-color);
-  width: 1rem;
-  height: 1rem;
+  width: 1.2rem;
+  height: 1.2rem;
 }
 
 .docsearch .DocSearch-Button-Placeholder {
@@ -85,7 +70,7 @@
 
 .docsearch .DocSearch-Button-Key {
   background: var(--docsearch-primary-color);
-  color: var(--docsearch-logo-color); /* Menggunakan variabel yg relevan */
+  color: var(--docsearch-logo-color);
   border-radius: 6px;
   font-size: 14px;
   font-weight: 500;
@@ -96,10 +81,6 @@
   top: 0;
 }
 
-/* -- LANGKAH 3: Gaya untuk Modal dan Isinya --
-  Gaya ini menargetkan elemen-elemen modal yang dirender terpisah.
-  Karena variabel sudah global, kita hanya perlu menata elemennya.
-*/
 .DocSearch-Container .DocSearch-Modal {
   backdrop-filter: blur(8px);
 }
@@ -117,7 +98,6 @@
   border-top: 1px solid hsl(var(--border));
 }
 
-/* Gaya untuk tombol keyboard di footer */
 .DocSearch-Footer--commands kbd {
   background-color: hsl(var(--secondary));
   border: 1px solid hsl(var(--border));
@@ -130,7 +110,6 @@
   justify-content: center;
 }
 
-/* Menghilangkan gaya default dari ikon di dalam tombol footer */
 .DocSearch-Commands-Key {
   background: none;
   color: hsl(var(--muted-foreground));
@@ -143,9 +122,6 @@
   border-radius: 6px;
 }
 
-/* -- LANGKAH 4: Gaya Responsif --
-  Tidak ada perubahan, hanya mempertahankan fungsionalitas mobile.
-*/
 @media (max-width: 768px) {
   .docsearch .DocSearch-Button {
     width: 40px;
@@ -155,6 +131,7 @@
     background: none;
     border: none;
   }
+
   .docsearch .DocSearch-Button-Placeholder,
   .docsearch .DocSearch-Button-Key {
     display: none;

styles/globals.css

@@ -185,7 +185,6 @@
   }
 }
 
-
 @layer base {
   * {
     @apply border-border;

styles/override.css

@@ -1,19 +1,24 @@
-/* Modern Blue Theme */
+/* Fresh Lime Theme - Syntax Highlighting */
+
 /* Light Mode */
 .keyword {
-  color: #1d4ed8; /* Darker blue for better contrast */
+  color: hsl(85 70% 30%);
+  /* Dark lime green */
 }
 
 .function {
-  color: #0369a1; /* Deep blue */
+  color: hsl(85 65% 35%);
+  /* Slightly lighter lime */
 }
 
 .punctuation {
-  color: #4b5563; /* Slate gray */
+  color: hsl(85 15% 50%);
+  /* Muted green-gray */
 }
 
 .comment {
-  color: #6b7280; /* Muted gray */
+  color: hsl(85 15% 50%);
+  /* Muted green-gray */
   font-style: italic;
 }
 
@@ -22,28 +27,34 @@
 .annotation,
 .boolean,
 .number {
-  color: #0d9488; /* Teal for better distinction */
+  color: hsl(85 50% 35%);
+  /* Medium lime green */
 }
 
 .tag {
-  color: #1d4ed8; /* Matching keyword color */
+  color: hsl(85 70% 25%);
+  /* Darker lime */
 }
 
 .attr-name {
-  color: #0284c7; /* Sky blue */
+  color: hsl(85 60% 35%);
+  /* Lime green */
 }
 
 .attr-value {
-  color: #2563eb; /* Primary blue */
+  color: hsl(85 70% 30%);
+  /* Dark lime green */
 }
 
 /* Dark Mode */
 .dark .keyword {
-  color: #60a5fa; /* Soft blue */
+  color: hsl(85 75% 65%);
+  /* Bright lime */
 }
 
 .dark .function {
-  color: #38bdf8; /* Sky blue */
+  color: hsl(85 75% 60%);
+  /* Slightly less bright lime */
 }
 
 .dark .string,
@@ -51,52 +62,36 @@
 .dark .annotation,
 .dark .boolean,
 .dark .number {
-  color: #2dd4bf; /* Teal */
+  color: hsl(85 60% 70%);
+  /* Light lime */
 }
 
 .dark .tag {
-  color: #60a5fa; /* Matching keyword color */
+  color: hsl(85 70% 70%);
+  /* Bright lime */
 }
 
 .dark .attr-name {
-  color: #7dd3fc; /* Lighter blue */
+  color: hsl(85 65% 70%);
+  /* Light lime */
 }
 
 .dark .attr-value {
-  color: #3b82f6; /* Brighter blue */
+  color: hsl(85 75% 65%);
+  /* Bright lime */
 }
 
 .dark .comment {
-  color: #9ca3af; /* Lighter gray for dark mode */
+  color: hsl(85 15% 60%);
+  /* Light gray-green */
 }
 
 .dark .punctuation {
-  color: #9ca3af; /* Lighter gray for dark mode */
+  color: hsl(85 20% 70%);
+  /* Light gray-green */
 }
 
-.youtube {
-  position: relative;
-  padding-bottom: 56.25%; /* Rasio aspek 16:9 */
-  height: 0;
-  overflow: hidden;
-  background: #000; /* Latar belakang hitam untuk memadukan player */
-  border-radius: 8px; /* Sudut melengkung */
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Bayangan lembut */
-}
-
-.youtube iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: none;
-  border-radius: 8px; /* Sudut melengkung pada iframe */
-}
-
-/* ======================================================================== */
 /* Custom styling for code blocks */
-/* ======================================================================== */
 
 .code-block-container {
   position: relative;
@@ -111,7 +106,7 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  background-color: hsl(var(--muted)); 
+  background-color: hsl(var(--muted));
   padding: 0.5rem 1rem;
   border-bottom: 1px solid hsl(var(--border));
   color: hsl(var(--muted-foreground));
@@ -125,10 +120,12 @@
   right: 0.75rem;
   z-index: 10;
 }
+
 .code-block-actions button {
   color: hsl(var(--muted-foreground));
   transition: color 0.2s ease-in-out;
 }
+
 .code-block-actions button:hover {
   color: hsl(var(--foreground));
 }
@@ -147,7 +144,7 @@
   width: 3rem;
   padding-top: 1rem;
   text-align: right;
-  color: var(--line-number-color); 
+  color: var(--line-number-color);
   user-select: none;
 }
 
@@ -155,7 +152,7 @@
   position: absolute;
   left: 0;
   right: 0;
-  background: hsl(var(--primary) / 0.1); 
+  background: hsl(var(--primary) / 0.1);
   border-left: 2px solid hsl(var(--primary));
   pointer-events: none;
 }
@@ -167,13 +164,56 @@
 .code-block-body::-webkit-scrollbar {
   height: 8px;
 }
+
 .code-block-body::-webkit-scrollbar-track {
   background: transparent;
 }
+
 .code-block-body::-webkit-scrollbar-thumb {
   background: hsl(var(--border));
   border-radius: 4px;
 }
+
 .code-block-body::-webkit-scrollbar-thumb:hover {
   background: hsl(var(--muted));
+}
+
+/* Custom styling for youtube blocks */
+.youtube {
+  position: relative;
+  padding-bottom: 56.25%;
+  /* Aspect Ratio 16:9 */
+  height: 0;
+  overflow: hidden;
+  background: #000;
+  /* Black background to blend the player */
+  border-radius: 8px;
+  /* Rounded corners */
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  /* Soft shadow */
+}
+
+.youtube iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 8px;
+  /* Rounded corners on iframe */
+}
+
+/* Hide main navbar and footer when docs layout is active */
+body:has(.docs-layout) #main-navbar,
+body:has(.docs-layout) #main-footer {
+  display: none;
+}
+
+/* Remove container constraints for docs pages */
+body:has(.docs-layout) #main-content {
+  max-width: none;
+  width: 100%;
+  padding: 0;
+  margin: 0;
 }