initial to gitea

2025-02-23 10:43:08 +07:00
commit d6e3946296
183 changed files with 22627 additions and 0 deletions
--- a/contents/blogs/file-rec.mdx
+++ b/contents/blogs/file-rec.mdx
@@ -0,0 +1,170 @@
+---
+title: "Building a Recursive File System with React: A Deep Dive"
+description: "Explore how to create a recursive file system in React. This blog post provides a comprehensive guide on building a file system where folders and files can be nested, added, renamed, and deleted."
+date: 02-09-2024
+authors:
+  - avatar: "https://ui.shadcn.com/avatars/02.png"
+    handle: nisabmohd
+    username: Nisab Mohd
+    handleUrl: "https://github.com/nisabmohd"
+cover: "https://img.freepik.com/premium-vector/many-monsters-various-colors-doodle-come-bless-birthday-happy_577083-84.jpg?w=826"
+---
+
+## Introduction: Crafting a Recursive File System in React
+
+In modern web development, creating interactive and dynamic file systems is a common requirement. Whether for managing documents, organizing projects, or building complex data structures, having a robust file system is crucial. In this blog post, we’ll explore how to build a recursive file system in React, focusing on nested folders and files that can be added, renamed, or deleted.
+
+Check out the project on [GitHub](https://github.com/nisabmohd/recursive-file-system-react) for a complete implementation.
+
+## Project Overview
+
+The Recursive File System project is designed to simulate a file management system where users can interact with folders and files dynamically. It supports the following features:
+
+- **Adding New Folders and Files**: Create new folders and files within any existing folder.
+- **Renaming Items**: Change the name of folders and files.
+- **Deleting Items**: Remove folders and files from the file system.
+- **Nested Structure**: Handle nested folders and files to create a hierarchical view.
+
+## Key Features and Implementation
+
+### 1. Recursive Data Structure
+
+The core of the project is a recursive data structure that represents the file system. Each folder can contain other folders or files, and each file or folder has properties such as `id`, `name`, and `children` (for folders).
+
+Here’s a basic structure for a folder:
+
+```jsx
+const folder = {
+  id: "1",
+  name: "Documents",
+  type: "folder",
+  children: [
+    { id: "2", name: "Resume.pdf", type: "file" },
+    { id: "3", name: "CoverLetter.docx", type: "file" },
+  ],
+};
+```
+
+### 2. Components
+
+The project includes several key components to handle different aspects of the file system:
+
+- **FileExplorer**: Displays the entire file system and handles rendering folders and files.
+
+```jsx
+// src/components/FileExplorer.js
+import React, { useState } from "react";
+import Folder from "./Folder";
+import File from "./File";
+
+const FileExplorer = () => {
+  const [files, setFiles] = useState(initialData); // initialData is your recursive data structure
+
+  const addItem = (parentId, type) => {
+    // Logic to add a folder or file
+  };
+
+  const renameItem = (id, newName) => {
+    // Logic to rename a folder or file
+  };
+
+  const deleteItem = (id) => {
+    // Logic to delete a folder or file
+  };
+
+  return (
+    <div>
+      {files.map((file) =>
+        file.type === "folder" ? (
+          <Folder
+            key={file.id}
+            folder={file}
+            onAdd={addItem}
+            onRename={renameItem}
+            onDelete={deleteItem}
+          />
+        ) : (
+          <File
+            key={file.id}
+            file={file}
+            onRename={renameItem}
+            onDelete={deleteItem}
+          />
+        )
+      )}
+    </div>
+  );
+};
+
+export default FileExplorer;
+```
+
+- **Folder**: Renders folders and handles nested items.
+
+```jsx
+// src/components/Folder.js
+import React from "react";
+import FileExplorer from "./FileExplorer";
+
+const Folder = ({ folder, onAdd, onRename, onDelete }) => {
+  return (
+    <div>
+      <h3>{folder.name}</h3>
+      <button onClick={() => onAdd(folder.id, "folder")}>Add Folder</button>
+      <button onClick={() => onAdd(folder.id, "file")}>Add File</button>
+      <button onClick={() => onRename(folder.id, "New Name")}>Rename</button>
+      <button onClick={() => onDelete(folder.id)}>Delete</button>
+      {folder.children && <FileExplorer files={folder.children} />}
+    </div>
+  );
+};
+
+export default Folder;
+```
+
+- **File**: Renders individual files with options to rename and delete.
+
+```jsx
+// src/components/File.js
+import React from "react";
+
+const File = ({ file, onRename, onDelete }) => {
+  return (
+    <div>
+      <p>{file.name}</p>
+      <button onClick={() => onRename(file.id, "New Name")}>Rename</button>
+      <button onClick={() => onDelete(file.id)}>Delete</button>
+    </div>
+  );
+};
+
+export default File;
+```
+
+### 3. Handling State and Actions
+
+State management is handled using React hooks like `useState` to manage the file system data. Actions such as adding, renaming, and deleting items update the state accordingly.
+
+```jsx
+const [files, setFiles] = useState(initialData);
+
+const addItem = (parentId, type) => {
+  // Logic to add a new item to the file system
+};
+
+const renameItem = (id, newName) => {
+  // Logic to rename an existing item
+};
+
+const deleteItem = (id) => {
+  // Logic to delete an item
+};
+```
+
+## Conclusion: Building a Dynamic File System with React
+
+Creating a recursive file system in React is a powerful way to manage hierarchical data and provide a dynamic user experience. By leveraging React's component-based architecture and state management, you can build interactive file systems that handle complex nested structures efficiently.
+
+Check out the full implementation on [GitHub](https://github.com/nisabmohd/recursive-file-system-react) and explore how these concepts can be applied to your own projects. Happy coding!
+
+🚀📁
--- a/contents/blogs/next-react.mdx
+++ b/contents/blogs/next-react.mdx
@@ -0,0 +1,121 @@
+---
+title: "Using React Server Components and Server Actions in Next.js"
+description: "Explore how to leverage React Server Components and Server Actions in Next.js to build modern, efficient web applications. Learn how these features enhance performance and simplify server-side logic."
+date: 05-09-2024
+authors:
+  - avatar: "https://ui.shadcn.com/avatars/02.png"
+    handle: reactdev
+    username: React Dev
+    handleUrl: "https://github.com/reactdev"
+  - avatar: "https://ui.shadcn.com/avatars/01.png"
+    handle: nextjsguru
+    username: Next.js Guru
+    handleUrl: "https://github.com/nextjsguru"
+cover: "https://img.freepik.com/premium-vector/many-monsters-various-colors-doodle-come-bless-birthday-happy_577083-85.jpg?w=826"
+---
+
+## Introduction: Enhancing Next.js with React Server Components
+
+Next.js has evolved to include powerful features like React Server Components and Server Actions, which offer a new way to handle server-side rendering and logic. These features provide a more efficient and streamlined approach to building web applications, allowing you to fetch data and render components on the server without compromising performance.
+
+In this blog post, we'll explore how to use React Server Components and Server Actions in Next.js with practical examples and code snippets.
+
+## What Are React Server Components?
+
+React Server Components (RSC) are a new type of component introduced by React that allows you to render components on the server. This approach helps reduce the amount of JavaScript sent to the client and enhances performance by offloading rendering work to the server.
+
+### Benefits of React Server Components
+
+- **Improved Performance**: By rendering on the server, you reduce the amount of client-side JavaScript and improve load times.
+- **Enhanced User Experience**: Faster initial page loads and smoother interactions.
+- **Simplified Data Fetching**: Fetch data on the server and pass it directly to components.
+
+### Example: Creating a Server Component
+
+Here’s a basic example of a React Server Component in a Next.js application:
+
+```jsx
+// app/components/UserProfile.server.js
+import { getUserData } from "../lib/api";
+
+export default async function UserProfile() {
+  const user = await getUserData();
+
+  return (
+    <div>
+      <h1>{user.name}</h1>
+      <p>{user.email}</p>
+    </div>
+  );
+}
+```
+
+In this example, `UserProfile` is a server component that fetches user data on the server and renders it.
+
+## What Are Server Actions?
+
+Server Actions are functions that run on the server in response to user interactions or other events. They allow you to handle server-side logic, such as form submissions or API requests, directly from your React components.
+
+### Benefits of Server Actions
+
+- **Simplified Server Logic**: Write server-side code directly in your components.
+- **Enhanced Security**: Handle sensitive operations on the server rather than the client.
+- **Improved Performance**: Reduce client-side JavaScript and offload tasks to the server.
+
+### Example: Using Server Actions
+
+Here’s how you can use Server Actions in a Next.js application to handle form submissions:
+
+```jsx
+// app/actions/submitForm.js
+import { saveFormData } from "../lib/api";
+
+export async function submitForm(data) {
+  await saveFormData(data);
+  return { success: true };
+}
+```
+
+```jsx
+// app/components/ContactForm.js
+"use client";
+
+import { submitForm } from "../actions/submitForm";
+
+export default function ContactForm() {
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    const result = await submitForm(Object.fromEntries(formData));
+    if (result.success) {
+      alert("Form submitted successfully!");
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        Name:
+        <input type="text" name="name" required />
+      </label>
+      <label>
+        Email:
+        <input type="email" name="email" required />
+      </label>
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+In this example, `submitForm` is a server action that processes form data on the server, and `ContactForm` is a client component that uses this action to handle form submissions.
+
+## Conclusion: Leveraging Modern Features for Better Web Apps
+
+React Server Components and Server Actions in Next.js provide powerful tools for building efficient, modern web applications. By leveraging these features, you can improve performance, simplify server-side logic, and create a more responsive user experience.
+
+As you build your Next.js applications, consider incorporating React Server Components and Server Actions to take full advantage of the latest advancements in web development.
+
+Happy coding!
+
+🚀✨
--- a/contents/docs/getting-started/activate-license/index.mdx
+++ b/contents/docs/getting-started/activate-license/index.mdx
@@ -0,0 +1,24 @@
+---
+title: Aktivasi Lisensi
+description: Aktivasi lisensi plugin Addon Sejoli Pro.
+date: 30-11-2024
+---
+
+Untuk mengetahui lisensi yang anda miliki dan memanage lisensi aktif pada domain navigasi ke [member.dwindi.com](https://member.dwindi.com/member-area/license/)
+
+<Stepper>
+  <StepperItem title="Step 1: Navigasi ke menu `lisensi`">
+    Halaman member-area/lisensi untuk melihat daftar lisensi.
+  </StepperItem>
+  <StepperItem title="Step 2: Klik `icon` copy">
+    Untuk menyalin lisensi untuk kebutuhan aktivasi lisensi.
+  </StepperItem>
+  <StepperItem title="Step 3: Navigasi ke tombol `manage domain`">
+    Untuk melihat daftar lisensi yang aktif di domain, anda bisa revoke jika
+    ingin melepas lisensi pada domain.
+  </StepperItem>
+</Stepper>
+
+> Ikuti video tutorial dibawah ini untuk aktivasi lisensi plugin addon sejoli
+
+<Youtube videoId="CMKWQ9b2q6c" />
--- a/contents/docs/getting-started/installation/index.mdx
+++ b/contents/docs/getting-started/installation/index.mdx
@@ -0,0 +1,62 @@
+---
+title: Installasi Plugin
+description: Install Plugin upload manual & melalui menu plugin wp-admin.
+date: 30-11-2024
+---
+
+Persiapkan unduhan file `.zip` dari plugin yang akan anda instal di wordpress, untuk mendapatkan file plugin silahkan download melalui [https://member.dwindi.com](https://member.dwindi.com/member-area/assets/).
+
+## Melalui wp-admin
+
+langkah-langkah install plugin melalui wp-admin.
+
+<Stepper>
+  <StepperItem title="Step 1: Menu Plugin">
+    Pada halaman wp-admin ke menu `plugin`
+  </StepperItem>
+  <StepperItem title="Step 2: Add New">
+    Klik `add new` untuk menambahkan/menginstal plugin baru.
+  </StepperItem>
+  <StepperItem title="Step 3: Upload">
+    Klik `upload` pilih dari media penyimpanan local dengan extension `.zip`
+  </StepperItem>
+  <StepperItem title="Step 4: Activate Plugin">
+    Klik `activate` setelah proses instal selesai
+  </StepperItem>
+</Stepper>
+
+<Note type="note" title="Note">
+  Kecepatan proses instalasi tergantung koneksi internet dan spesifikasi hosting
+  yang anda gunakan.
+</Note>
+
+## Melalui File Manager
+
+Untuk instal plugin melalui metode upload ke `file manager` berikut struktur folder
+
+```bash
+public_html              // root folder
+├── subdomain            // folder subdomain
+├── domain               // folder domain utama
+│   └── wp-content       // directory content untuk plugin dan theme
+│       └── plugin       // upload file .zip plugin ke directory ini
+```
+
+<Note type="warning" title="Perhatian">
+  extract file `.zip` plugin yang telah anda upload kemudian ke `wp-admin` -->
+  `plugin` --> `activate`
+</Note>
+
+## Video Tutorial
+
+### Instal melalui Hpanel
+
+> Jika anda pengguna hpanel bisa dengan cara ini;
+
+<Youtube videoId="EMtsK4o5Dbo" />
+
+### Instal melalui Cpanel
+
+> Jika anda pengguna cpanel bisa dengan cara ini;
+
+<Youtube videoId="ea-1RbPb0EU" />
--- a/contents/docs/getting-started/introduction/index.mdx
+++ b/contents/docs/getting-started/introduction/index.mdx
@@ -0,0 +1,42 @@
+---
+title: Introduction
+description: Latar Belakang dan Pengenalan Plugin.
+date: 30-11-2024
+---
+
+Selamat datang di **AddonSejoliPro** penyedia produk Add-On plugin Sejoli yang siap membantu anda dalam memaksimalkan fitur Membership.
+
+## Plugin Unggulan
+
+> Beberapa plugin yang sering digunakan oleh pengguna untuk membuat tampilan custom member area, custom halaman checkout hanya dengan Elementor Page Builder.
+
+<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+  <Card>
+    <Card.Title title="Sejoli Member Area UI" icon="LayoutPanelLeft" />
+    <Card.Description description="Untuk mengubah desain tampilan member area hanya drag and drop." />
+  </Card>
+  <Card>
+    <Card.Title title="Sejoli Shortcodes" icon="Brackets" />
+    <Card.Description description="Plugin ini merupakan depedensi dari Member Area UI." />
+  </Card>
+  <Card>
+    <Card.Title title="Sejoli Checkout UI" icon="ReceiptText" />
+    <Card.Description description="Mengubah halaman checkout sepenuhnya dengan widget Elementor." />
+  </Card>
+  <Card>
+    <Card.Title title="Sejoli LMS Pro" icon="GraduationCap" />
+    <Card.Description description="Plugin yang digunakan untuk membuat kursus online based on Sejoli." />
+  </Card>
+</div>
+
+## Depedensi
+
+AddonSejoliPro memerlukan depedensi plugin untuk bisa menggunakannya :
+
+- **Sejoli** - Core Plugin yang wajib anda install sebelum menggunakan plugin-plugin Addon Sejoli Pro.
+- **Elementor** - Untuk saat ini builder yang digunakan untuk membuat desain hanya dengan drag and drop (pro maupun free)
+
+<Note title="Kesimpulan">
+  Plugin **AddonSejoliPro** dibuat terkait banyak nya permintaan fungsi custom
+  pada web membership Sejoli.
+</Note>
--- a/contents/docs/getting-started/system-requirements/index.mdx
+++ b/contents/docs/getting-started/system-requirements/index.mdx
@@ -0,0 +1,21 @@
+---
+title: System Requirements
+description: Persyaratan sistem untuk menggunakan plugin addon sejoli pro
+date: 30-11-2024
+---
+
+Untuk dapat menggunakan plugin **Addon Sejoli Pro** anda perlu menyewa hosting untuk menjalankan wordpress self hosted [wordpress.org](https://wordpress.org/).
+
+## Minimum Requirements
+
+- **wordpress.org** - versi 6.0.0 atau terbaru.
+- **elementor** - versi 3.0.0 atau terbaru.
+- **php** - versi 8.0.0 disarankan karena lebih stabil.
+- **sejoli** - versi 1.13.14 tested.
+- **RAM** - 1GB sudah cukup untuk menjalankan plugin.
+- **Storage** - 20GB tergantung kebutuhan konten.
+
+<Note type="note" title="Note">
+  Untuk bisa menggunakan seluruh addon plugin sejoli pastikan anda menginstal
+  wordpress.org dan terinstal plugin **sejoli** sebagai core plugin
+</Note>
--- a/contents/docs/plugins/affiliate-extra/as-admin/index.mdx
+++ b/contents/docs/plugins/affiliate-extra/as-admin/index.mdx
@@ -0,0 +1,7 @@
+---
+title: As Admin
+description: Pengaturan sebagai admin
+date: 13-12-2024
+---
+
+<Youtube videoId="sAXGL-HWZPk" />
--- a/contents/docs/plugins/affiliate-extra/as-affiliate/index.mdx
+++ b/contents/docs/plugins/affiliate-extra/as-affiliate/index.mdx
@@ -0,0 +1,7 @@
+---
+title: As Affiliate
+description: Pengaturan sebagai affiliasi
+date: 13-12-2024
+---
+
+<Youtube videoId="-QpQ9Ipzsbg" />
--- a/contents/docs/plugins/affiliate-extra/flyer-editor/index.mdx
+++ b/contents/docs/plugins/affiliate-extra/flyer-editor/index.mdx
@@ -0,0 +1,22 @@
+---
+title: Flyer Editor
+description: Contoh penggunaan banner untuk affiliasi
+date: 13-12-2024
+---
+
+<Youtube videoId="mvaLMS24YBo" />
+
+## HTML
+
+```html showLineNumbers {2}
+<a href="affiliate_link" target="_blank">
+  <img src="url_banner_image" />
+</a>
+```
+
+## Penggunaan
+
+<Note type="note" title="Note">
+  `"affiliate_link"` ganti dengan URL affiliasi, `"url_banner_image"` ganti
+  dengan URL gambar.
+</Note>
--- a/contents/docs/plugins/affiliate-extra/index.mdx
+++ b/contents/docs/plugins/affiliate-extra/index.mdx
@@ -0,0 +1,16 @@
+---
+title: Sejoli Affiliate Extra
+description: Panduan penggunaan Sejoli Affiliate Extra
+date: 30-11-2024
+---
+
+<Button
+  text="Lihat Sales Page"
+  href="https://addonsejoli.pro/produk/sejoli-affiliate-extra/"
+  icon="ArrowUpRight"
+  size="md"
+  target="_blank"
+  variation="primary"
+/>
+
+<Outlet path="plugins/affiliate-extra" />
--- a/contents/docs/plugins/checkout-ui/activate-feature/index.mdx
+++ b/contents/docs/plugins/checkout-ui/activate-feature/index.mdx
@@ -0,0 +1,33 @@
+---
+title: Aktifkan Fitur
+description: Aktifkan Checkout UI untuk halaman checkout produk
+date: 14-12-2024
+---
+
+<Youtube videoId="f7zxTE2S8TY" />
+
+## Langkah - Aktifkan Fitur
+
+<Stepper>
+  <StepperItem title="Step 1: Navigasi ke Product">
+    Pada halaman wp-admin navigasi ke menu `product` akan muncul daftar produk
+    kemudian sorot dan klik `edit`.
+    ![edit](https://addonsejoli.pro/cdn_asp/images/scui-edit-product.png)
+  </StepperItem>
+  <StepperItem title="Step 2: Tab Checkout UI">
+    Pada halaman pengaturan produk akan anda temukan section `Sejoli Setup` ->
+    tab `Checkout UI` centang opsi **Aktifkan Checkout UI**.
+    ![activate](https://addonsejoli.pro/cdn_asp/images/scui-activate.png)
+  </StepperItem>
+  <StepperItem title="Step 3: Edit With Elementor">
+    Klik tombol **Edit With Elementor** untuk membuat desain halaman checkout
+    dengan widget-widget dari plugin Checkout UI.
+    ![activate](https://addonsejoli.pro/cdn_asp/images/scui-edit-elementor.png)
+  </StepperItem>
+</Stepper>
+
+<Note type="note" title="Penting!">
+  Jika tombol **Edit With Elementor** tidak muncul di halaman pengaturan produk,
+  navigasi ke menu `Elementor` -> `Settings` lalu centang opsi `Products` pada
+  **Post Types**.
+</Note>
--- a/contents/docs/plugins/checkout-ui/checkout-button/index.mdx
+++ b/contents/docs/plugins/checkout-ui/checkout-button/index.mdx
@@ -0,0 +1,20 @@
+---
+title: Checkout Button
+description: Widget Sejoli Checkout UI untuk kolom tombol pembayaran
+date: 14-12-2024
+---
+<Youtube videoId="T-Lpd1FRSQY" />
+
+![checkout button](https://addonsejoli.pro/cdn_asp/images/scui-checkout-button.png)
+
+## Tab - Content
+
+Opsi untuk menyesuaikan konten tombol pembayaran pada halaman checkout produk dengan widget **Checkout Button**.
+
+![tab content](https://addonsejoli.pro/cdn_asp/images/scui-cb-content.png)
+
+## Tab - Style
+
+Mengubah dan menyesuaikan warna background, text maupun tombol pada konten tombol pembayaran.
+
+![tab style](https://addonsejoli.pro/cdn_asp/images/scui-cb-style.png)
--- a/contents/docs/plugins/checkout-ui/coupon-input/index.mdx
+++ b/contents/docs/plugins/checkout-ui/coupon-input/index.mdx
@@ -0,0 +1,21 @@
+---
+title: Coupon Input
+description: Widget Sejoli Checkout UI untuk kolom kupon
+date: 14-12-2024
+---
+
+<Youtube videoId="R_67XFGxlb8" />
+
+![coupon input](https://addonsejoli.pro/cdn_asp/images/scui-kupon-input.png)
+
+## Tab - Content
+
+Mengubah text konten kolom kupon pada halaman checkout produk dengan widget **Coupon Input**.
+
+![tab content](https://addonsejoli.pro/cdn_asp/images/scui-kupon-konten.png)
+
+## Tab - Style
+
+Mengubah warna background maupun text untuk konten kolom kupon.
+
+![tab style](https://addonsejoli.pro/cdn_asp/images/scui-kupon-style.png)
--- a/contents/docs/plugins/checkout-ui/index.mdx
+++ b/contents/docs/plugins/checkout-ui/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Sejoli Checkout UI
+description: Panduan penggunaan Sejoli Checkout UI
+date: 14-12-2024
+---
+
+<Outlet path="plugins/checkout-ui" />
--- a/contents/docs/plugins/checkout-ui/login-form/index.mdx
+++ b/contents/docs/plugins/checkout-ui/login-form/index.mdx
@@ -0,0 +1,21 @@
+---
+title: Login Form
+description: Widget Sejoli Checkout UI untuk kolom form login
+date: 14-12-2024
+---
+
+<Youtube videoId="yQbUxfXTr7o" />
+
+![login form](https://addonsejoli.pro/cdn_asp/images/scui-login-form.png)
+
+## Tab - Content
+
+Mengubah text konten kolom login form pada halaman checkout produk dengan widget **Login Form**.
+
+![tab content](https://addonsejoli.pro/cdn_asp/images/scui-lf-content.png)
+
+## Tab - Style
+
+Mengubah warna background dari text, field maupun tombol untuk konten form login.
+
+![tab style](https://addonsejoli.pro/cdn_asp/images/scui-lf-style.png)
--- a/contents/docs/plugins/checkout-ui/payment-options/index.mdx
+++ b/contents/docs/plugins/checkout-ui/payment-options/index.mdx
@@ -0,0 +1,21 @@
+---
+title: Payment Options
+description: Widget Sejoli Checkout UI untuk kolom metode pembayaran
+date: 14-12-2024
+---
+
+<Youtube videoId="31W35Q85_fA" />
+
+![payment option](https://addonsejoli.pro/cdn_asp/images/scui-payment-option.png)
+
+## Tab - Content
+
+Opsi untuk menyesuaikan konten metod pembayaran pada halaman checkout produk dengan widget **Payment Options**.
+
+![tab content](https://addonsejoli.pro/cdn_asp/images/scui-po-content.png)
+
+## Tab - Style
+
+Mengubah dan menyesuaikan desain card, judul dan warna pada konten metode pembayaran.
+
+![tab style](https://addonsejoli.pro/cdn_asp/images/scui-po-style.png)
--- a/contents/docs/plugins/checkout-ui/personal-information/index.mdx
+++ b/contents/docs/plugins/checkout-ui/personal-information/index.mdx
@@ -0,0 +1,20 @@
+---
+title: Personal Information
+description: Widget Sejoli Checkout UI untuk kolom personal information
+date: 14-12-2024
+---
+<Youtube videoId="qA-S4O530B4" />
+
+![personal info](https://addonsejoli.pro/cdn_asp/images/scui-persona-info.png)
+
+## Tab - Content
+
+Opsi untuk menyesuaikan konten personal information pada halaman checkout produk denga widget **Personal Information**.
+
+![tab content](https://addonsejoli.pro/cdn_asp/images/scui-pi-content.png)
+
+## Tab - Style
+
+Mengubah dan menyesuaikan desain card, title, label, deskripsi dan input baik warna text maupun background.
+
+![tab style](https://addonsejoli.pro/cdn_asp/images/scui-pi-style.png)
--- a/contents/docs/plugins/checkout-ui/product-table/index.mdx
+++ b/contents/docs/plugins/checkout-ui/product-table/index.mdx
@@ -0,0 +1,24 @@
+---
+title: Product Table
+description: Widget Sejoli Checkout UI untuk tabel produk
+date: 14-12-2024
+---
+
+<Youtube videoId="ORS_s3cHWa0" />
+
+![product table](https://addonsejoli.pro/cdn_asp/images/scui-product-table.png)
+
+<Note type="note" title="Note">
+  Gambar di atas adalah tampilan default tabel produk pada halaman checkout
+  produk **Sejoli**.
+</Note>
+
+## Tab - Content
+
+Opsi untuk menampilkan/menyembunyikan konten tabel produk pada halaman checkout produk dengan widget **Product Table**.
+![tab content](https://addonsejoli.pro/cdn_asp/images/scui-pt-content.png)
+
+## Tab - Style
+
+Mengubah warna background maupun text untuk konten tabel produk dengan desain yang anda mau.
+![tab stylet](https://addonsejoli.pro/cdn_asp/images/scui-pt-style.png)
--- a/contents/docs/plugins/checkout-ui/widget-elementor/index.mdx
+++ b/contents/docs/plugins/checkout-ui/widget-elementor/index.mdx
@@ -0,0 +1,34 @@
+---
+title: Widget Elementor
+description: Membuat desain halaman checkout produk dengan widget plugin Checkout UI
+date: 14-12-2024
+---
+
+<Youtube videoId="j9g1vliHfsY" />
+
+## Widget
+
+<Stepper>
+  <StepperItem title="Step 1: Tambahkan Layout">
+    Tambahkan salahsatu layout `Container` maupun `Grid` sesuai dengan selera
+    desain yang anda mau. ![tambahkan
+    layout](https://addonsejoli.pro/cdn_asp/images/scui-widget-elementor.png)
+  </StepperItem>
+  <StepperItem title="Step 2: Tambahkan Widget">
+    Tambahkan widget **Sejoli Checkout UI** ke dalam layout dan susun urutan
+    komponen-komponen yang ada dalam halaman checkout Sejoli menggunakan widget.
+    ![tambahkan
+    widget](https://addonsejoli.pro/cdn_asp/images/scui-widget-cui.png)
+  </StepperItem>
+  <StepperItem title="Step 3: Publish">
+    Klik tombol **Publish** untuk menerbitkan sekaligus menerapkan halaman
+    checkout dengan desain yang anda buat.
+    ![publish](https://addonsejoli.pro/cdn_asp/images/scui-publish-template.png)
+  </StepperItem>
+</Stepper>
+
+<Note type="note" title="Note">
+  Perlu diperhatikan seluruh komponen-komponen checkout Sejoli pada halaman
+  checkout produk harus anda tambahkan keseluruhannya untuk memastikan proses
+  checkout berjalan dan berfungsi dengan baik.
+</Note>
--- a/contents/docs/plugins/conditional-payment/berdasarkan-devices/index.mdx
+++ b/contents/docs/plugins/conditional-payment/berdasarkan-devices/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Berdasarkan Devices
+description: Pengaturan pembayaran berdasarkan devices
+date: 13-12-2024
+---
+
+<Youtube videoId="CpQdApEOn0g" />
--- a/contents/docs/plugins/conditional-payment/berdasarkan-product/index.mdx
+++ b/contents/docs/plugins/conditional-payment/berdasarkan-product/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Berdasarkan Product
+description: Pengaturan pembayaran berdasarkan produk
+date: 13-12-2024
+---
+
+<Youtube videoId="KzwK--MDxao" />
--- a/contents/docs/plugins/conditional-payment/index.mdx
+++ b/contents/docs/plugins/conditional-payment/index.mdx
@@ -0,0 +1,16 @@
+---
+title: Sejoli Conditional Payment
+description: Panduan penggunaan Sejoli Conditional Payment
+date: 30-11-2024
+---
+
+<Button
+  text="Lihat Sales Page"
+  href="https://addonsejoli.pro/produk/sejoli-conditional-payment/"
+  icon="ArrowUpRight"
+  size="md"
+  target="_blank"
+  variation="primary"
+/>
+
+<Outlet path="plugins/conditional-payment" />
--- a/contents/docs/plugins/conditional-payment/payment-categori/index.mdx
+++ b/contents/docs/plugins/conditional-payment/payment-categori/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Payment Categori
+description: Membuat kategori untuk jenis metode pembayaran
+date: 13-12-2024
+---
+
+<Youtube videoId="eZhgNl_9oM4" />
--- a/contents/docs/plugins/conditional-payment/payment-setting/index.mdx
+++ b/contents/docs/plugins/conditional-payment/payment-setting/index.mdx
@@ -0,0 +1,24 @@
+---
+title: Payment Setting
+description: Menambahkan daftar metode pembayaran (manual, moota, gateway)
+date: 13-12-2024
+---
+
+![addon pro tutorial image](https://addonsejoli.pro/cdn_asp/images/SCR-20241213-oyaz.png)
+
+## Setting
+
+<Stepper>
+  <StepperItem title="Step 1: Navigasi ke Sejoli">
+    Pada halaman wp-admin navigasi ke menu `Sejoli` --> `Settings`.
+  </StepperItem>
+  <StepperItem title="Step 2: Tab Manual Transaction">
+    Untuk menambahkan bank akun dengan tipe pembayaran manual.
+  </StepperItem>
+  <StepperItem title="Step 3: Tab Moota">
+    Untuk menambahkan tipe pembayaran dengan Moota (konfirmasi otomatis).
+  </StepperItem>
+  <StepperItem title="Step 4: Tab Duitku">
+    Untuk menambahkan tipe pembayaran dengan payment gateway Duitku.
+  </StepperItem>
+</Stepper>
--- a/contents/docs/plugins/donasi-extra/global-setting/index.mdx
+++ b/contents/docs/plugins/donasi-extra/global-setting/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Global Setting
+description: Pengaturan global untuk plugin donasi extra
+date: 13-12-2024
+---
+
+<Youtube videoId="BQRIXBilLTI" />
--- a/contents/docs/plugins/donasi-extra/index.mdx
+++ b/contents/docs/plugins/donasi-extra/index.mdx
@@ -0,0 +1,16 @@
+---
+title: Sejoli Donasi Extra
+description: Panduan penggunaan Sejoli Donasi Extra
+date: 30-11-2024
+---
+
+<Button
+  text="Lihat Sales Page"
+  href="https://addonsejoli.pro/produk/sejoli-donasi-extra/"
+  icon="ArrowUpRight"
+  size="md"
+  target="_blank"
+  variation="primary"
+/>
+
+<Outlet path="plugins/donasi-extra" />
--- a/contents/docs/plugins/donasi-extra/listing/index.mdx
+++ b/contents/docs/plugins/donasi-extra/listing/index.mdx
@@ -0,0 +1,12 @@
+---
+title: Donasi Listing
+description: Menampilkan listing donasi dengan shortcode
+date: 13-12-2024
+---
+
+<Youtube videoId="oPuQ0Q56uZU" />
+
+<Note type="note" title="Shortcode">
+  `[donation_loop]` menggunakan attribute `[donation_loop col_desktop=”3″
+  col_mobile=”1″]`
+</Note>
--- a/contents/docs/plugins/donasi-extra/product-donasi/index.mdx
+++ b/contents/docs/plugins/donasi-extra/product-donasi/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Product Mode Donasi
+description: Membuat produk dengan tipe donasi
+date: 13-12-2024
+---
+
+<Youtube videoId="aEVgq7Poecw" />
--- a/contents/docs/plugins/donasi-extra/product-traktir/index.mdx
+++ b/contents/docs/plugins/donasi-extra/product-traktir/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Product Mode Traktir
+description: Membuat produk dengan tipe traktir
+date: 13-12-2024
+---
+
+<Youtube videoId="bQ0btlqEkCM" />
--- a/contents/docs/plugins/donasi-extra/product-zakat/index.mdx
+++ b/contents/docs/plugins/donasi-extra/product-zakat/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Product Mode Zakat
+description: Membuat produk dengan tipe zakat
+date: 13-12-2024
+---
+
+<Youtube videoId="WBe6YEwi_eE" />
--- a/contents/docs/plugins/index.mdx
+++ b/contents/docs/plugins/index.mdx
@@ -0,0 +1,7 @@
+---
+title: All Plugins Addon
+description: Daftar plugin Addon Sejoli Pro yang tersedia saat ini
+date: 30-11-2024
+---
+
+<Outlet path="plugins" />
--- a/contents/docs/plugins/lms-pro/add-access/index.mdx
+++ b/contents/docs/plugins/lms-pro/add-access/index.mdx
@@ -0,0 +1,37 @@
+---
+title: Add Access - Template course page
+description: Membuat akses untuk produk ecourse
+date: 12-12-2024
+---
+
+<Youtube videoId="vKS9w7badRI" />
+
+<Note type="note" title="Note">
+  Untuk menambahkan akses pada ecourse dan menautkannya pada produk, pastikan
+  anda memilih template **sejoli course page** pada post attributes.
+</Note>
+
+## Add New Access
+
+![Your Image Alt Text](https://addonsejoli.pro/cdn_asp/images/SCR-20241212-qsxw.png)
+
+<Stepper>
+  <StepperItem title="Step 1: Navigasi ke Access">
+    Pada halaman wp-admin ke menu `Access` --> `Add New Access`.
+  </StepperItem>
+  <StepperItem title="Step 2: Submenu Add New Access">
+    Pada halaman editor untuk pengaturan akses isi kolom yang diperlukan.
+  </StepperItem>
+  <StepperItem title="Step 3: Setup Access">
+    Pada tab restriction di kolom produk ketikan dan pilih produk yang akan
+    ditautkan ke akses.
+  </StepperItem>
+  <StepperItem title="Step 4: Post Attributes">
+    Pilih template **sejoli course page** untuk membuat akses dengan jenis
+    ecourse.
+  </StepperItem>
+  <StepperItem title="Step 5: Publish">
+    Klik tombol `publish` untuk menerbitkan akses dengan template sejoli course
+    page.
+  </StepperItem>
+</Stepper>
--- a/contents/docs/plugins/lms-pro/add-product/index.mdx
+++ b/contents/docs/plugins/lms-pro/add-product/index.mdx
@@ -0,0 +1,27 @@
+---
+title: Add Product
+description: Menambahkan produk untuk ecourse
+date: 12-12-2024
+---
+
+<Youtube videoId="N3bGaVzu4oc" />
+
+## Add New Product
+
+![Your Image Alt Text](https://addonsejoli.pro/cdn_asp/images/SCR-20241212-qnlr.png)
+
+<Stepper>
+  <StepperItem title="Step 1: Navigasi ke Product">
+    Pada halaman wp-admin ke menu `Product` --> `Add New Product`.
+  </StepperItem>
+  <StepperItem title="Step 2: Submenu Add New Product">
+    Pada halaman editor untuk pengaturan produk isi kolom yang diperlukan.
+  </StepperItem>
+  <StepperItem title="Step 3: Pengaturan Produk">
+    Ada beberapa pengaturan untuk melengkapi keterangan pada produk sebelum di
+    publish.
+  </StepperItem>
+  <StepperItem title="Step 4: Publish">
+    Klik tombol `publish` untuk menerbitkan produk dengan tipe digital.
+  </StepperItem>
+</Stepper>
--- a/contents/docs/plugins/lms-pro/bab-materi/index.mdx
+++ b/contents/docs/plugins/lms-pro/bab-materi/index.mdx
@@ -0,0 +1,30 @@
+---
+title: Menambahkan Bab & Materi
+description: Menyusun bab dan silabus untuk ecourse
+date: 12-12-2024
+---
+
+<Youtube videoId="z1__JYtc920" />
+
+![addon sejoli tutorial](https://addonsejoli.pro/cdn_asp/images/SCR-20241212-rauf.png)
+
+## Bab & Materi
+
+<Stepper>
+  <StepperItem title="Step 1: Navigasi ke LMS">
+    Pada halaman wp-admin ke menu `LMS` --> `Kursus`.
+  </StepperItem>
+  <StepperItem title="Step 2: Edit">
+    Sorot dengan mouse pada kursus yang akan anda tambahkan bab dan materi
+    dengan cara klik `edit`.
+  </StepperItem>
+  <StepperItem title="Step 3: Menambahkan Bab">
+    Pada halaman editor di bagian `course` --> tab `Silabus` klik tombol `add
+    entry` untuk menambahkan bab.
+  </StepperItem>
+  <StepperItem title="Step 4: Menambahkan Materi">
+    Klik tombol `add entry` di bagian **pelajaran** untuk menambahkan materi.
+  </StepperItem>
+</Stepper>
+
+![addon sejoli tutorial](https://addonsejoli.pro/cdn_asp/images/SCR-20241212-rhgu.png)
--- a/contents/docs/plugins/lms-pro/certificate-builder/index.mdx
+++ b/contents/docs/plugins/lms-pro/certificate-builder/index.mdx
@@ -0,0 +1,12 @@
+---
+title: Certificate Builder
+description: Membuat desain sertifikat dengan fitur sertifikat builder
+date: 12-12-2024
+---
+
+<Youtube videoId="mvP58eBkUt4" />
+
+<Note type="note" title="Note">
+  Untuk membuat tanda tangan online
+  [https://signaturely.com/online-signature/draw](https://signaturely.com/online-signature/draw)
+</Note>
--- a/contents/docs/plugins/lms-pro/course-preview/index.mdx
+++ b/contents/docs/plugins/lms-pro/course-preview/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Course Preview
+description: Membuat dan menampilkan preview materi dari ecourse
+date: 12-12-2024
+---
+
+<Youtube videoId="jaCKaewlARU" />
--- a/contents/docs/plugins/lms-pro/design-course-page/index.mdx
+++ b/contents/docs/plugins/lms-pro/design-course-page/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Design Course Page
+description: Membuat desain untuk halaman ecourse
+date: 12-12-2024
+---
+
+<Youtube videoId="vDiIEAXYCU4" />
--- a/contents/docs/plugins/lms-pro/drip-content/index.mdx
+++ b/contents/docs/plugins/lms-pro/drip-content/index.mdx
@@ -0,0 +1,32 @@
+---
+title: Drip Content Course
+description: Menunda penayangan konten dari silabus
+date: 12-12-2024
+---
+
+<Youtube videoId="w-zDtuXR2rE" />
+
+<Note type="note" title="Note">
+  Fitur Drip Content merupakan fitur baru dari plugin Sejoli LMS Pro, jika anda
+  sedang mempersiapkan Bab baru dari ecourse yang telah dibuat sebelumnya dan
+  ingin menunda waktu penayangan Materi courses mari kita coba membuatnya.
+</Note>
+
+![addon sejoli tutorial](https://addonsejoli.pro/cdn_asp/images/SCR-20241212-tsrw.png)
+
+## Setting Delay
+
+<Stepper>
+  <StepperItem title="Step 1: Navigasi ke LMS">
+    Pada halaman wp-admin ke menu `LMS` --> `Kursus`.
+  </StepperItem>
+  <StepperItem title="Step 2: Edit">
+    Sorot dengan mouse pada kursus yang akan anda tambahkan silabus dengan cara
+    klik `edit`.
+  </StepperItem>
+  <StepperItem title="Step 3: Silabus">
+    Pada halaman editor di bagian `course` --> tab `Silabus` di bagian `bab`
+    atur waktu delay (satuan angka) dan durasi delay
+    (jam/hari/minggu/bulan/tahun).
+  </StepperItem>
+</Stepper>
--- a/contents/docs/plugins/lms-pro/global-settings/index.mdx
+++ b/contents/docs/plugins/lms-pro/global-settings/index.mdx
@@ -0,0 +1,46 @@
+---
+title: Global Settings - LMS Pro
+description: Pengaturan global pada LMS Pro versi terbaru
+date: 12-12-2024
+---
+
+![addon sejoli tutorial](https://addonsejoli.pro/cdn_asp/images/SCR-20241212-uatv.png)
+
+## Pengaturan
+
+<Stepper>
+  <StepperItem title="Step 1: Navigasi ke LMS">
+    Pada halaman wp-admin ke menu `LMS` --> `Pengaturan`.
+  </StepperItem>
+  <StepperItem title="Step 2: General">
+    Untuk pengaturan notifikasi dan opsi skip cover page untuk direct ke lesson
+    pertama pada ecourse.
+  </StepperItem>
+  <StepperItem title="Step 3: Focus Page">
+    Untuk pengaturan tampilan template focus page `udemy like` atau `basic`.
+  </StepperItem>
+  <StepperItem title="Step 4: Tutor">
+    Untuk pengaturan tutor atau teacher pada ecourse, untuk menggunakan fitur
+    ini anda perlu mengaktifkannya di tab `extras`.
+  </StepperItem>
+  <StepperItem title="Step 5: Menu">
+    Untuk menampilkan menu kursus pada member area.
+  </StepperItem>
+  <StepperItem title="Step 6: Warna">
+    Untuk pengaturan penyesuaian warna terkait branding halaman course.
+  </StepperItem>
+  <StepperItem title="Step 7: Listing">
+    Untuk pengaturan card listing mulai dari warna, tab, daftar materi dan video
+    preview.
+  </StepperItem>
+  <StepperItem title="Step 8: Certificate">
+    Untuk pengaturan halaman sertifikat yg dapat di akses oleh public.
+  </StepperItem>
+  <StepperItem title="Step 9: Youtube">
+    Untuk pengaturan dan styling player youtube pada konten yang ada di halaman
+    materi.
+  </StepperItem>
+  <StepperItem title="Step 10: Extras">
+    Untuk mengaktifkan fitur tambahan dari LMS Pro seperti fitur `tutor`.
+  </StepperItem>
+</Stepper>
--- a/contents/docs/plugins/lms-pro/index.mdx
+++ b/contents/docs/plugins/lms-pro/index.mdx
@@ -0,0 +1,16 @@
+---
+title: Sejoli LMS Pro
+description: Panduan penggunaan Sejoli LMS Pro
+date: 30-11-2024
+---
+
+<Button
+  text="Lihat Sales Page"
+  href="https://addonsejoli.pro/produk/sejoli-lms-pro/"
+  icon="ArrowUpRight"
+  size="md"
+  target="_blank"
+  variation="primary"
+/>
+
+<Outlet path="plugins/lms-pro" />
--- a/contents/docs/plugins/lms-pro/listing-public-page/index.mdx
+++ b/contents/docs/plugins/lms-pro/listing-public-page/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Listing Public Page
+description: Membuat halaman listing untuk daftar kursus dengan display grid.
+date: 13-12-2024
+---
+
+<Youtube videoId="X4gwjO57iso" />
--- a/contents/docs/plugins/lms-pro/prerequisite/index.mdx
+++ b/contents/docs/plugins/lms-pro/prerequisite/index.mdx
@@ -0,0 +1,30 @@
+---
+title: Prerequisite
+description: Membuat prasyarat untuk melanjutkan kursus.
+date: 12-12-2024
+---
+
+<Youtube videoId="c2gQfThoWCw" />
+
+Fitur prerequisite pada plugin Sejoli LMS Pro contoh penerapan kelas online sebagai
+kelas lanjutan dari ecourse yang anda miliki, dimana hanya siswa yang sudah menyelesaikan
+kelas online `A` untuk bisa mengikuti kelas online `B`.
+
+![addon sejoli tutorial](https://addonsejoli.pro/cdn_asp/images/SCR-20241212-tmbv.png)
+
+## Aktifkan Prasyarat
+
+<Stepper>
+  <StepperItem title="Step 1: Navigasi ke LMS">
+    Pada halaman wp-admin ke menu `LMS` --> `Kursus`.
+  </StepperItem>
+  <StepperItem title="Step 2: Edit">
+    Sorot dengan mouse pada kursus yang akan anda aktifkan prasyarat dengan cara
+    klik `edit`.
+  </StepperItem>
+  <StepperItem title="Step 3: Prasyarat">
+    Pada halaman editor di bagian `course` --> tab `Prasyarat` centang opsi
+    **Aktifkan Prasyarat** kemudian pilih kursus yang harus diselesaikan untuk
+    mengikuti kelas ini.
+  </StepperItem>
+</Stepper>
--- a/contents/docs/plugins/member-area-ui/bottombar/index.mdx
+++ b/contents/docs/plugins/member-area-ui/bottombar/index.mdx
@@ -0,0 +1,6 @@
+---
+title : Membuat Bottom Bar
+description : Cara Implementasi Bottom Bar Pada Member Area UI
+date : 25-01-2025
+---
+<Youtube videoId="_6wxWAOjWNY" />
--- a/contents/docs/plugins/member-area-ui/custom-member-page/index.mdx
+++ b/contents/docs/plugins/member-area-ui/custom-member-page/index.mdx
@@ -0,0 +1,26 @@
+---
+title : Custom Member Page
+description : Membuat Member Page Dengan End Point URL /member-area
+date : 27-01-2025
+---
+
+<Youtube videoId="VprO48CKqbU" />
+
+<Note type="warning" title="Perhatian!">
+  Dengan membuat custom end point pada custom member page, pastikan anda memilih role dan mapping sesuai pada halaman yang dibuat.
+</Note>
+
+<Stepper>
+  <StepperItem title="Step 1: Custom Member Pages">
+    Ke menu -> **Settings** pada Member Area UI lalu ke tab **Custom Member Pages** tambahkan halaman kustom untuk membuat end point.
+  </StepperItem>
+  <StepperItem title="Step 2: Menu Builder">
+    Lalu pindah ke tab **Template Setup** tambahkan menu navigasi di menu builder pilih halaman **Custom - Nama Halaman** sesuaikan icon lalu klik tombol `save changes`.
+  </StepperItem>
+  <StepperItem title="Step 3: Buat Template Page">
+    Ke menu -> **Template Kit** klik tombol **Buat Template page** centang template kit, pilih page role **Custom - Halaman anda** kemudian klik tombol `publish`.
+  </StepperItem>
+  <StepperItem title="Step 4: Template Map">
+    Setelah membuat desain Template Page kita perlu melakukan mapping template pada menu **Template Kit**.
+  </StepperItem>
+</Stepper>
--- a/contents/docs/plugins/member-area-ui/dashboard/index.mdx
+++ b/contents/docs/plugins/member-area-ui/dashboard/index.mdx
@@ -0,0 +1,6 @@
+---
+title : Custom Halaman Dashboard
+description : Cara Membuat Custom Halaman Dashboard Member Area Sejoli
+date : 25-01-2025
+---
+<Youtube videoId="ZpeiuxwbC-E" />
--- a/contents/docs/plugins/member-area-ui/index.mdx
+++ b/contents/docs/plugins/member-area-ui/index.mdx
@@ -0,0 +1,16 @@
+---
+title: Sejoli Member Area UI
+description: Panduan penggunaan Sejoli Member Area UI
+date: 30-11-2024
+---
+
+<Button
+  text="Lihat Sales Page"
+  href="https://addonsejoli.pro/produk/sejoli-member-area-ui/"
+  icon="ArrowUpRight"
+  size="md"
+  target="_blank"
+  variation="primary"
+/>
+
+<Outlet path="plugins/member-area-ui" />
--- a/contents/docs/plugins/member-area-ui/master-layout/index.mdx
+++ b/contents/docs/plugins/member-area-ui/master-layout/index.mdx
@@ -0,0 +1,6 @@
+---
+title : Membuat Master Layout
+description : Membuat Template Page Untuk Master Layout
+date : 25-01-2025
+---
+<Youtube videoId="_qYGCsW9uzY" />
--- a/contents/docs/plugins/member-area-ui/menu-builder/index.mdx
+++ b/contents/docs/plugins/member-area-ui/menu-builder/index.mdx
@@ -0,0 +1,6 @@
+---
+title : Menu Builder
+description : Membuat Menu Untuk Sidebar Dengan Menu Builder
+date : 25-01-2025
+---
+<Youtube videoId="YE68hV-Iifw" />
--- a/contents/docs/plugins/member-area-ui/setting-page-builder/index.mdx
+++ b/contents/docs/plugins/member-area-ui/setting-page-builder/index.mdx
@@ -0,0 +1,10 @@
+---
+title : Setting Page Builder
+description : Aktifkan Fitur Container dan Post Type Member Area Templates
+date : 25-01-2025
+---
+<Youtube videoId="oulfnjV3g9Y" />
+
+<Note type="note" title="Note">
+  Sebagai contoh pada video menggunakan elementor. Hal yang sama berlaku juga di page builder lain jika belum support ke post type Member Area Template.
+</Note>
--- a/contents/docs/plugins/member-area-ui/template-kit/index.mdx
+++ b/contents/docs/plugins/member-area-ui/template-kit/index.mdx
@@ -0,0 +1,6 @@
+---
+title : Membuat Template Kits
+description : Cara Membuat Template Kit Untuk Member Area UI
+date :  25-01-2025
+---
+<Youtube videoId="X-7YzzcXpLs" />
--- a/contents/docs/plugins/member-area-ui/topbar/index.mdx
+++ b/contents/docs/plugins/member-area-ui/topbar/index.mdx
@@ -0,0 +1,6 @@
+---
+title : Membuat Topbar
+description : Cara Implementasi Untuk Topbar Pada Member Area UI
+date : 25-01-2025
+---
+<Youtube videoId="xfwBCBNHcM8" />
--- a/contents/docs/plugins/order-manager/data-order/index.mdx
+++ b/contents/docs/plugins/order-manager/data-order/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Pengelolaan Data Order
+description: Cara mengelola data order (create, update, delete)
+date: 13-12-2024
+---
+
+<Youtube videoId="QrTMHprt60g" />
--- a/contents/docs/plugins/order-manager/index.mdx
+++ b/contents/docs/plugins/order-manager/index.mdx
@@ -0,0 +1,16 @@
+---
+title: Sejoli Order Manager
+description: Panduan penggunaan Sejoli Order Manager
+date: 30-11-2024
+---
+
+<Button
+  text="Lihat Sales Page"
+  href="https://addonsejoli.pro/produk/sejoli-order-manager/"
+  icon="ArrowUpRight"
+  size="md"
+  target="_blank"
+  variation="primary"
+/>
+
+<Outlet path="plugins/order-manager" />
--- a/contents/docs/plugins/order-manager/non-subscription/index.mdx
+++ b/contents/docs/plugins/order-manager/non-subscription/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Order non Subscription
+description: Membuat data order untuk produk tanpa berlangganan
+date: 13-12-2024
+---
+
+<Youtube videoId="grUxNZnquIU" />
--- a/contents/docs/plugins/order-manager/subscription/index.mdx
+++ b/contents/docs/plugins/order-manager/subscription/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Oder Subscription
+description: Membuat order untuk produk berlangganan
+date: 13-12-2024
+---
+
+<Youtube videoId="GXu5VRAqoEY" />
--- a/contents/docs/plugins/order-sheet/app-script/index.mdx
+++ b/contents/docs/plugins/order-sheet/app-script/index.mdx
@@ -0,0 +1,7 @@
+---
+title: App Script Update Status
+description: Membuat App Script pada spreadsheet untuk update status order
+date: 13-12-2024
+---
+
+<Youtube videoId="im1CS7fdW5s" />
--- a/contents/docs/plugins/order-sheet/buat-salinan/index.mdx
+++ b/contents/docs/plugins/order-sheet/buat-salinan/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Membuat Salinan Spreadsheet
+description: Membuat salinan file spreadsheet untuk mendapatkan spreadsheet ID
+date: 13-12-2024
+---
+
+<Youtube videoId="tm11eSt7-lo" />
--- a/contents/docs/plugins/order-sheet/credential-sync/index.mdx
+++ b/contents/docs/plugins/order-sheet/credential-sync/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Credential Sync Data
+description: Membuat credential dan mengunduh json untuk sinkronisasi data
+date: 13-12-2024
+---
+
+<Youtube videoId="SAvkVTOkiB0" />
--- a/contents/docs/plugins/order-sheet/data-order-sheet/index.mdx
+++ b/contents/docs/plugins/order-sheet/data-order-sheet/index.mdx
@@ -0,0 +1,10 @@
+---
+title: Pengelolaan Data Order
+description: Mengelola data penjualan hingga komisi affiliate
+date: 13-12-2024
+---
+
+<Youtube videoId="K4zU5m0izbA" />
+
+Mengelola data penjualan hingga komisi affiliate, produk terlaris dan data-data yang ada di dalam Spreadsheet
+untuk di olah maupun merubahnya secara langsung oleh admin atau secara bersamaan (team) dalam satu file spreadsheet.
--- a/contents/docs/plugins/order-sheet/index.mdx
+++ b/contents/docs/plugins/order-sheet/index.mdx
@@ -0,0 +1,16 @@
+---
+title: Sejoli Order Sheet
+description: Panduan penggunaan Sejoli Order Sheet
+date: 30-11-2024
+---
+
+<Button
+  text="Lihat Sales Page"
+  href="https://addonsejoli.pro/produk/sejoli-ordersheet/"
+  icon="ArrowUpRight"
+  size="md"
+  target="_blank"
+  variation="primary"
+/>
+
+<Outlet path="plugins/order-sheet" />
--- a/contents/docs/plugins/order-sheet/sync-data-affiliate/index.mdx
+++ b/contents/docs/plugins/order-sheet/sync-data-affiliate/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Sync Data Affiliate
+description: Membuat App Script untuk sinkronisasi data affiliate
+date: 13-12-2024
+---
+
+<Youtube videoId="YE69wdgdBXg" />
--- a/contents/docs/plugins/order-sheet/ubah-status-komisi/index.mdx
+++ b/contents/docs/plugins/order-sheet/ubah-status-komisi/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Ubah Status Komisi
+description: Mengubah dan memanage status komisi melalui spreadsheet
+date: 13-12-2024
+---
+
+<Youtube videoId="yK3GlD5oX8s" />
--- a/contents/docs/plugins/register-form-builder/custom-fields/index.mdx
+++ b/contents/docs/plugins/register-form-builder/custom-fields/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Custom Fields
+description: Menambahkan custom fields untuk di halaman register maupun checkout
+date: 13-12-2024
+---
+
+<Youtube videoId="1xzaxGT2Ub0" />
--- a/contents/docs/plugins/register-form-builder/dynamic-list/index.mdx
+++ b/contents/docs/plugins/register-form-builder/dynamic-list/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Dynamic List - Usergroup
+description: Menampilkan dynamic list dari usergroup
+date: 13-12-2024
+---
+
+<Youtube videoId="a5vEiObLerI" />
--- a/contents/docs/plugins/register-form-builder/general-setting/index.mdx
+++ b/contents/docs/plugins/register-form-builder/general-setting/index.mdx
@@ -0,0 +1,7 @@
+---
+title: General Setting
+description: Pengaturan umum untuk plugin register form builder
+date: 13-12-2024
+---
+
+<Youtube videoId="VuOT478pC1A" />
--- a/contents/docs/plugins/register-form-builder/index.mdx
+++ b/contents/docs/plugins/register-form-builder/index.mdx
@@ -0,0 +1,16 @@
+---
+title: Sejoli Register Form Builder
+description: Panduan penggunaan Sejoli Register Form Builder
+date: 30-11-2024
+---
+
+<Button
+  text="Lihat Sales Page"
+  href="https://addonsejoli.pro/produk/sejoli-register-form-builder/"
+  icon="ArrowUpRight"
+  size="md"
+  target="_blank"
+  variation="primary"
+/>
+
+<Outlet path="plugins/register-form-builder" />
--- a/contents/docs/plugins/shortcodes/implementation-card/index.mdx
+++ b/contents/docs/plugins/shortcodes/implementation-card/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Implementations Card Donation
+description: Contoh penggunaan shortcode untuk card donasi
+date: 11-12-2024
+---
+
+<Youtube videoId="OrNpDFpPdAw" />
--- a/contents/docs/plugins/shortcodes/index.mdx
+++ b/contents/docs/plugins/shortcodes/index.mdx
@@ -0,0 +1,16 @@
+---
+title: Sejoli Shortcodes
+description: Panduan penggunaan Sejoli Shortcodes
+date: 30-11-2024
+---
+
+<Button
+  text="Lihat Sales Page"
+  href="https://addonsejoli.pro/produk/sejoli-shortcode/"
+  icon="ArrowUpRight"
+  size="md"
+  target="_blank"
+  variation="primary"
+/>
+
+<Outlet path="plugins/shortcodes" />
--- a/contents/docs/plugins/shortcodes/shortcode-preference/index.mdx
+++ b/contents/docs/plugins/shortcodes/shortcode-preference/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Shortcode Preference
+description: Contoh penggunaan shortcode
+date: 1-12-2024
+---
+
+<Youtube videoId="I-HoDQrJe2Y" />
--- a/contents/docs/plugins/simple-lead-magnet/free-access/index.mdx
+++ b/contents/docs/plugins/simple-lead-magnet/free-access/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Menambahkan Akses Produk
+description: Membuat akses untuk produk gratis
+date: 13-12-2024
+---
+
+<Youtube videoId="4Be5pRV-Nx4" />
--- a/contents/docs/plugins/simple-lead-magnet/free-product/index.mdx
+++ b/contents/docs/plugins/simple-lead-magnet/free-product/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Membuat Produk Gratis
+description: Cara membuat produk untuk leadmagnet dengan harga NOL rupiah
+date: 13-12-2024
+---
+
+<Youtube videoId="pvWd2LxBOMI" />
--- a/contents/docs/plugins/simple-lead-magnet/global-settings/index.mdx
+++ b/contents/docs/plugins/simple-lead-magnet/global-settings/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Global Setting
+description: Pengaturan secara global untuk plugin simple lead magnet
+date: 13-12-2024
+---
+
+<Youtube videoId="i8ptvf_3qRg" />
--- a/contents/docs/plugins/simple-lead-magnet/index.mdx
+++ b/contents/docs/plugins/simple-lead-magnet/index.mdx
@@ -0,0 +1,16 @@
+---
+title: Sejoli Simple Lead Magnet
+description: Panduan penggunaan Sejoli Simple Lead Magnet
+date: 30-11-2024
+---
+
+<Button
+  text="Lihat Sales Page"
+  href="https://addonsejoli.pro/produk/sejoli-simple-lead-magnet/"
+  icon="ArrowUpRight"
+  size="md"
+  target="_blank"
+  variation="primary"
+/>
+
+<Outlet path="plugins/simple-lead-magnet" />
--- a/contents/docs/plugins/utm-tracking/campaign-email/index.mdx
+++ b/contents/docs/plugins/utm-tracking/campaign-email/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Campaign Email
+description: Contoh campaign dengan parameter email
+date: 13-12-2024
+---
+
+<Youtube videoId="uN_mUN_qwQY" />
--- a/contents/docs/plugins/utm-tracking/campaign-url/index.mdx
+++ b/contents/docs/plugins/utm-tracking/campaign-url/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Campaign URL Builder
+description: Membuat campaign dengan fitur URL builder
+date: 13-12-2024
+---
+
+<Youtube videoId="B-MRbcy0UdE" />
--- a/contents/docs/plugins/utm-tracking/index.mdx
+++ b/contents/docs/plugins/utm-tracking/index.mdx
@@ -0,0 +1,16 @@
+---
+title: Sejoli UTM Tracking
+description: Panduan penggunaan Sejoli UTM Tracking
+date: 30-11-2024
+---
+
+<Button
+  text="Lihat Sales Page"
+  href="https://addonsejoli.pro/produk/sejoli-utm-tracking/"
+  icon="ArrowUpRight"
+  size="md"
+  target="_blank"
+  variation="primary"
+/>
+
+<Outlet path="plugins/utm-tracking" />
--- a/contents/docs/plugins/utm-tracking/view-statistics/index.mdx
+++ b/contents/docs/plugins/utm-tracking/view-statistics/index.mdx
@@ -0,0 +1,7 @@
+---
+title: View Statistics
+description: Membaca data statistik untuk menganalisa sumber trafik pengunjung
+date: 13-12-2024
+---
+
+<Youtube videoId="-Fx89gb2UXU" />