Add UI

Author: dyazincahya

.github/workflows/deploy-pages.yml

@@ -0,0 +1,46 @@
+name: Deploy Svelte UI to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ui
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+          cache-dependency-path: ui/package-lock.json
+      - run: npm ci
+      - run: npm run build
+      - uses: actions/configure-pages@v5
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: ui/dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -9,4 +9,9 @@ Thumbs.db
 $RECYCLE.BIN/
 
 # Windows shortcuts
-*.lnk
+*.lnk
+
+### Svelte UI
+ui/node_modules/
+ui/dist/
+ui/public/data/

README.md

@@ -9,6 +9,7 @@
 </p>
 
 <p align="center">
+  <a href="#data-explorer">Data Explorer</a> •
   <a href="#ikhtisar-direktori-data">Ikhtisar Data</a> •
   <a href="#integrasi-api">Integrasi API</a> •
   <a href="#contoh-aplikasi">Contoh Aplikasi</a> •
@@ -17,6 +18,24 @@
 
 ---
 
+## Data Explorer
+
+Antarmuka berbasis Svelte tersedia di direktori [`ui`](ui/) untuk menjelajahi
+kamus utama, kata baku dan nonbaku, sinonim, serta antonim secara interaktif.
+Data kamus yang besar diproses menjadi indeks pencarian dan shard per huruf
+agar tidak membebani pemuatan awal.
+
+```bash
+cd ui
+npm install
+npm run dev
+```
+
+Gunakan `npm run build` untuk menyiapkan data dan membuat build produksi.
+Workflow `.github/workflows/deploy-pages.yml` akan menerbitkan UI ke GitHub
+Pages setiap kali branch `main` diperbarui. Aktifkan **Pages → Source → GitHub
+Actions** pada pengaturan repositori.
+
 ## Ringkasan Data
 
 Repositori ini menyimpan total data bahasa Indonesia dengan rincian sebagai berikut:

ui/index.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="id">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Jelajahi dataset open-source berisi entri KBBI, kata baku dan nonbaku, sinonim, serta antonim. Bukan layanan resmi KBBI."
+    />
+    <meta name="theme-color" content="#111111" />
+    <meta name="robots" content="index, follow, max-image-preview:large" />
+    <link
+      rel="canonical"
+      href="https://dyazincahya.github.io/KBBI-SQL-database/"
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="KBBI Data Explorer" />
+    <meta
+      property="og:description"
+      content="Explorer dataset Bahasa Indonesia open-source untuk mencari arti, kata baku, sinonim, dan antonim. Bukan layanan resmi KBBI."
+    />
+    <meta
+      property="og:url"
+      content="https://dyazincahya.github.io/KBBI-SQL-database/"
+    />
+    <meta name="twitter:card" content="summary" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap"
+      rel="stylesheet"
+    />
+    <title>KBBI Data Explorer</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <noscript
+      >Aplikasi penjelajah KBBI memerlukan JavaScript untuk memuat
+      dataset.</noscript
+    >
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>