docs: Translating ascendia-himarpl section to Bahasa Indonesia (#4)

himarplupi · Dec 3, 2024 · 6533c7d · 6533c7d
1 parent 8377287
commit 6533c7d
Show file tree

Hide file tree

Showing 15 changed files with 738 additions and 82 deletions.
diff --git a/src/content/docs/id/ascendia-himarpl/01-overview.mdx b/src/content/docs/id/ascendia-himarpl/01-overview.mdx
@@ -0,0 +1,67 @@
+---
+title: Pengantar
+description: Pengantar untuk Website Kabinet Ascendia milik HIMARPL 
+---
+
+{/* ! When translating this file, please add ../ to the image path ! */}
+![Ascendia-himarpl preview taken November 2024](../../../../assets/preview/ascendia-himarpl.png)
+
+[ascendia.himarpl.com](https://ascendia.himarpl.com) adalah situs web resmi untuk Kabinet Ascendia pada Himpunan Mahasiswa Rekayasa Perangkat Lunak (HIMARPL) di Universitas Pendidikan Indonesia. Situs web ini dibangun menggunakan Next.js dengan T3 Stack dan di-_deploy_ di Vercel.
+
+## Fitur Utama
+
+- Informasi Penting tentang Dedikasi
+- Visualisasi Struktur Organisasi
+- Integrasi Berita & Pembaruan
+- Halaman Informasi Departemen
+- Komponen UI Interaktif
+- Desain Responsif
+- Animasi yang Halus
+
+## Library yang Digunakan
+
+**Dependensi Inti**
+  - Next.js (^14.1.4)
+  - React (18.2.0)
+  - React DOM (18.2.0)
+  - TypeScript (^5.4.2)
+
+**Basis Data & API**
+  - Prisma (@prisma/client ^5.22.0)
+  - tRPC (@trpc/client, @trpc/next, @trpc/react-query, @trpc/server)
+  - Axios (^1.7.2)
+
+**UI & Styling**
+  - Radix UI Components (berbagai paket @radix-ui/*)
+  - Tailwind CSS (^3.4.1)
+  - Tailwind Typography Plugin (@tailwindcss/typography ^0.5.12)
+  - Framer Motion (^11.2.12)
+  - Embla Carousel (embla-carousel-react ^8.1.5)
+  - Auto Animate (@formkit/auto-animate ^0.8.2)
+  - React Simple Icons (@icons-pack/react-simple-icons ^9.4.0)
+  - Lucide React Icons (^0.363.0)
+
+**Utilitas**
+  - Zod (^3.23.8)
+  - Moment (^2.30.1)
+  - Sharp (^0.33.3)
+  - Superjson (^2.2.1)
+  - PostHog (posthog-js ^1.144.2)
+  - Next Themes (^0.3.0)
+
+**Alat Pengembangan**
+  - ESLint (^8.57.0)
+  - Prettier (^3.2.5)
+  - Berbagai plugin dan konfigurasi ESLint
+
+## Dukungan
+
+Untuk pertanyaan atau masalah:
+
+- Kunjungi GitHub Issues
+- Hubungi Departemen Kominfo
+- Kunjungi [himarpl.com](https://www.himarpl.com)
+
+## Lisensi
+
+Proyek ini dilisensikan di bawah Lisensi MIT - lihat _file_ [LICENSE](https://github.com/himarplupi/ascendia-himarpl/blob/main/LICENSE) untuk detailnya.
diff --git a/src/content/docs/id/ascendia-himarpl/02-setup.mdx b/src/content/docs/id/ascendia-himarpl/02-setup.mdx
@@ -0,0 +1,146 @@
+---
+title: Konfigurasi Pengembangan Lokal
+description: Bagaimana cara untuk melakukan konfigurasi website Kabinet Ascendia HIMARPL untuk pengembangan lokal
+---
+
+import { Tabs, TabItem } from "@astrojs/starlight/components";
+import { Steps } from "@astrojs/starlight/components";
+import { Code } from "@astrojs/starlight/components";
+
+Panduan ini akan memandu Anda melalui pengaturan _environment_ pengembangan lokal untuk situs web Ascendia Cabinet HIMARPL.
+
+## Prasyarat
+
+Sebelum menginstal aplikasi, pastikan Anda memiliki:
+
+1. [Node.js](https://nodejs.org/en) dan [npm](https://www.npmjs.com/) terinstal
+2. [Git](https://git-scm.com/) terinstal
+3. Akses ke layanan berikut:
+  - Akun CockroachDB
+  - Akun PostHog (opsional)
+
+## Detail Pengaturan Lingkungan
+
+Proyek ini memerlukan beberapa _environment variable_ yang harus diatur dalam _file_ `.env` agar berfungsi dengan baik.
+
+### Pengaturan CockroachDB
+
+Ikuti [Panduan Cepat CockroachDB](https://www.cockroachlabs.com/docs/cockroachcloud/quickstart) untuk mendapatkan `DATABASE_URL` Anda.
+
+## Langkah-langkah Pengaturan
+
+<Steps>
+
+1. _Fork_ dan _clone_ repositorinya:
+
+   <Tabs>
+     <TabItem label="HTTPS">
+       <Code
+         code={`git clone https://github.com/himarplupi/ascendia-himarpl.git`}
+         lang="bash"
+         title="HTTPS"
+       />
+     </TabItem>
+     <TabItem label="SSH">
+       <Code
+         code={`git clone git@github.com:himarplupi/ascendia-himarpl.git`}
+         lang="bash"
+         title="SSH"
+       />
+     </TabItem>
+     <TabItem label="GitHub CLI">
+       <Code
+         code={`gh repo clone himarplupi/ascendia-himarpl`}
+         lang="bash"
+         title="GitHub CLI"
+       />
+     </TabItem>
+   </Tabs>
+
+2. Lakukan navigasi ke direktori proyek:
+
+   ```bash
+   cd ascendia-himarpl
+   ```
+
+3. Buat _file_ _environment variables_:
+   Buat file `.env` pada direktori utama dengan _variables_ berikut:
+
+   ```bash
+   DATABASE_URL=
+   NEXT_PUBLIC_BASE_URL="http://localhost:3000"
+   NEXT_PUBLIC_BASE_PATH=""
+   NEXT_BASE_URL="http://localhost:3000"
+   NEXT_PUBLIC_POSTHOG_KEY=
+   NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+   ```
+
+4. Atur _remote_ _upstream_:
+
+   <Tabs>
+     <TabItem label="HTTPS">
+       <Code
+         code={`git remote add upstream https://github.com/himarplupi/ascendia-himarpl.git`}
+         lang="bash"
+         title="HTTPS"
+       />
+     </TabItem>
+     <TabItem label="SSH">
+       <Code
+         code={`git remote add upstream git@github.com:himarplupi/ascendia-himarpl.git`}
+         lang="bash"
+         title="SSH"
+       />
+     </TabItem>
+     <TabItem label="GitHub CLI">
+       <Code
+         code={`gh repo sync himarplupi/ascendia-himarpl`}
+         lang="bash"
+         title="GitHub CLI"
+       />
+     </TabItem>
+   </Tabs>
+
+5. Unduh dependensi dan mulai server pengembangannya:
+
+   ```bash
+   npm ci              # Install dependencies
+   npm run db:push     # Push database schema to CockroachDB
+   npm run dev         # Start development server
+   ```
+
+   Sekarang, aplikasinya seharusnya berjalan pada `http://localhost:3000`.
+
+6. Buat _branch_ baru untuk perubahan yang Anda lakukan
+
+   ```bash
+   git checkout -b my-feature-branch
+   ```
+
+
+7. Setelah Anda puas dengan perubahannya, _add_ dan _commit_ perubahan tersebut pada _branch_ Anda, kemudian _push_ _branch_ Anda ke repositori _fork_.
+
+   ```bash
+   git add .
+   git commit # Please follow the commit guidelines below   
+   git push -u origin my-feature-branch
+   ```
+
+   :::note[IMPORTANT]
+    Sebelum melakukan _commit_ dan membuka _Pull Request_, tolong baca [Commit Guidelines](/getting-started/05-contribution-guide/#commit-guidelines) dan [Pull Request Policy](/getting-started/05-contribution-guide/#pull-request-policy) berikut.
+   :::
+
+8. Buat _Pull Request_.
+   :::note[NOTE]
+    Kami mengimbau kepada pembuat PR untuk menghindari _rebasing_/memperbarui PR Anda dengan `main` _branch_ secara tidak perlu.
+   :::
+</Steps>
+
+## Perintah yang tersedia
+
+- `npm run dev` - Memulai server pengembangan dengan _hot reload_
+- `npm run build` - Membuat _build_ produksi
+- `npm run start` - Memulai server produksi
+- `npm run db:push` - Mendorong skema basis data ke CockroachDB
+- `npm run db:studio` - Membuka Prisma Studio untuk manajemen basis data
+- `npm run lint` - Menjalankan pemeriksaan _linting_
diff --git a/src/content/docs/id/ascendia-himarpl/03-folder-structure.mdx b/src/content/docs/id/ascendia-himarpl/03-folder-structure.mdx
@@ -0,0 +1,178 @@
+---
+title: Struktur Folder
+description: Struktur Folder Situs Web Ascendia Kabinet HIMARPL
+---
+
+import { FileTree } from '@astrojs/starlight/components';
+
+<FileTree>
+- prisma/ # Database management (Prisma ORM)
+  - schema.prisma # Database schema definitions and relationships
+- public/ # Static assets (images, fonts, etc.)
+- src/ # Main source code directory
+  - app/ # Next.js 13+ App Router directory
+    - api/ # API routes
+      - trpc/ # tRPC API configuration
+        - [trpc]/ # tRPC dynamic routes
+    - contact/ # Contact page feature
+      - page.tsx # Contact page component
+    - about/ # About section with dynamic routing
+      - [type]/ # Dynamic route for different types
+        - [department]/ # Nested dynamic route for departments
+          - page.tsx
+      - logo-philosophy/ # Logo philosophy section
+        - page.tsx
+    - dedication/ # Dedication page feature
+      - page.tsx
+    - news/ # News feature
+      - page.tsx
+    - page.tsx # Homepage
+    - layout.tsx # Root layout
+  - components/ # React components organized by feature
+    - about/ # About page components
+    - brand/ # Branding related components
+    - contact/ # Contact page components
+    - common/ # Shared components across features
+      - global-footer.tsx # Footer component
+    - dedication/ # Dedication page components
+    - logo-philosophy/ # Logo philosophy components
+    - motion/ # Animation components
+    - news/ # News feature components
+    - ui/ # Reusable UI components (shadcn/ui)
+  - hooks/ # Custom React hooks
+  - lib/ # Utility functions and shared logic
+    - utils.ts # General utility functions
+  - styles/ # Styling files
+    - globals.css # Global CSS styles
+  - server/ # Server-side code
+    - api/ # Server-side API implementations
+  - trpc/ # tRPC configurations and routers
+  - env.js # Environment variable validation (t3-env)
+</FileTree>
+
+## Penjelasan Struktur Direktori
+
+Proyek ini mengikuti arsitektur [T3 Stack](https://create.t3.gg/), yang menekankan _type-safety_ dan modularitas. Struktur dri atas menunjukkan susunan folder kami yang berbasis fitur, pemisahan kode klien/server yang jelas, dan mengikuti ketentuan Next.js App Router.
+
+### Direktori Utama
+
+- **prisma/**: Berisi _file_ yang berkaitan dengan basis data menggunakan Prisma ORM
+  - `schema.prisma`: Mendefinisikan model basis data, hubungan, dan konfigurasi
+- **public/**: Aset statis yang disajikan langsung
+  - Gambar, _font_, dan _resources_ publik lainnya
+- **src/**: Direktori _source code_ utama yang berisi semua kode aplikasi
+
+### Direktori Aplikasi (Next.js App Router)
+
+Direktori `app/` mengikuti ketentuan Next.js 13+ App Router:
+
+- **api/**: Rute API back-end
+  - `trpc/`: Konfigurasi dan _endpoint_ API tRPC
+- **Halaman berbasis fitur**: Setiap fitur utama memiliki direktori sendiri
+  - `about/`, `contact/`, `news/`, dll.
+  - Masing-masing berisi `page.tsx` untuk _view_ utama
+- **Rute Dinamis**: Menggunakan _routing_ berbasis _file_ Next.js
+  - `[type]/`: Rute dinamis untuk berbagai jenis departemen
+  - `[department]/`: Rute dinamis yang bersifat _nested_ untuk halaman departemen
+
+### Direktori Komponen
+
+Komponen disusun berdasarkan fitur dan tanggung jawab:
+
+- **Komponen Fitur**: Dikelompokkan berdasarkan fitur
+  - `about/`: Komponen khusus halaman _about_
+  - `contact/`: Komponen halaman _contact_
+  - `news/`: Komponen fitur _news_
+
+- **Komponen Umum**: Dipakai pada seluruh fitur
+  - `common/`: Komponen global seperti _header_ dan _footer_
+  - `motion/`: Komponen animasi dan transisi
+  - `ui/`: Komponen UI yang dapat digunakan kembali (menggunakan shadcn/ui)
+    - Tombol, formulir, modal, dll.
+    - Konfigurasi tema dan komponen dasar
+
+### Direktori Inti
+
+- **hooks/**: _Custom React hooks_ untuk logika bersama
+- **lib/**: Utilitas inti dan logika bersama
+  - Pembantu otentikasi
+  - Utilitas umum
+  - Definisi dari _type_
+- **server/**: Kode khusus pada sisi server
+  - Implementasi API
+  - Utilitas server
+- **trpc/**: Konfigurasi dan _router_ tRPC
+  - Definisi rute API
+  - Prosedur _type-safe_
+
+### Styles
+
+- **styles/**: Konfigurasi _styling_ global
+  - `globals.css`: _Style_ CSS global, konfigurasi Tailwind, dan konfigurasi tema Shadcn/UI
+
+
+## Mengimpor File
+
+Untuk mengimpor _file_, Anda dapat menggunakan alias `@/`. Alias ini dikonfigurasi secara otomatis dalam proyek.
+
+```tsx title="src/app/news/page.tsx"
+import { FadeIn } from "@/components/motion/fade-in";
+import { MotionText } from "@/components/motion/motion-text";
+import { UnderlineHover } from "@/components/motion/underline-hover";
+import { NewsCard } from "@/components/news/news-card";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { buttonVariants } from "@/components/ui/button";
+import { abbreviation, cn, momentId } from "@/lib/utils";
+import { api } from "@/trpc/server";
+```
+
+Pendekatan ini sangat berguna ketika Anda bekerja pada proyek besar dengan banyak _file_ dan _folder_ dan dapat dilakukan dengan memperbarui _file_ tsconfig.json menjadi berikut:
+
+<details> 
+<summary>Konfigurasi Typescript</summary>
+
+```diff lang="json" title="tsconfig.json" 
+{
+  "compilerOptions": {
+    /* Base Options: */
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "es2022",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+
+    /* Strictness */
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "checkJs": true,
+
+    /* Bundled projects */
+    "lib": ["dom", "dom.iterable", "ES2022"],
+    "noEmit": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "preserve",
+    "plugins": [{ "name": "next" }],
+    "incremental": true,
+
+    /* Path Aliases */
+    "baseUrl": ".",
++    "paths": {
++      "@/*": ["./src/*"]
++    }
+  },
+  "include": [
+    ".eslintrc.cjs",
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.cjs",
+    "**/*.js",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules", "lint-staged.config.js", "commitlint.config.js"]
+}
+```
+</details>