From 8e56e05d1b2872f2466d102d853d10bfd14baeb4 Mon Sep 17 00:00:00 2001 From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com> Date: Wed, 24 Jun 2026 14:18:43 +0700 Subject: [PATCH] feat: redesign documentation landing page with custom theme and updated site navigation --- apps/docs-dev/src/.vitepress/config.mts | 46 +++++----- apps/docs-dev/src/.vitepress/theme/custom.css | 87 +++++++++++++++++++ apps/docs-dev/src/.vitepress/theme/index.ts | 6 ++ apps/docs-dev/src/index.md | 62 +++++++++---- 4 files changed, 163 insertions(+), 38 deletions(-) create mode 100644 apps/docs-dev/src/.vitepress/theme/custom.css create mode 100644 apps/docs-dev/src/.vitepress/theme/index.ts diff --git a/apps/docs-dev/src/.vitepress/config.mts b/apps/docs-dev/src/.vitepress/config.mts index 3d93be0..8b2d764 100644 --- a/apps/docs-dev/src/.vitepress/config.mts +++ b/apps/docs-dev/src/.vitepress/config.mts @@ -3,7 +3,7 @@ import { withMermaid } from 'vitepress-plugin-mermaid' const config = withMermaid( defineConfig({ - title: "Frontend Monorepo Docs", + title: "Frontend Monorepo", description: "Centralized documentation for the Enterprise Frontend Monorepo", themeConfig: { @@ -13,39 +13,39 @@ const config = withMermaid( sidebar: [ { - text: 'Introduction', + text: 'Getting Started', items: [ - { text: 'Overview', link: '/overview' }, - { text: 'Local Setup', link: '/setup' }, + { text: 'Project Overview', link: '/overview' }, + { text: 'Development Setup', link: '/setup' }, ], }, { - text: 'Core Architecture & State', + text: 'Core Architecture', collapsed: false, items: [ - { text: 'Core API Engine', link: '/packages/core-api/' }, - { text: 'Core Events', link: '/packages/core-events/' }, - { text: 'Core Storage', link: '/packages/core-storage/' }, - { text: 'Core Internationalization', link: '/packages/core-i18n/' }, - { text: 'IPC Architecture', link: '/apps/desktop/IPC_ARCHITECTURE' }, + { text: 'API & Domain Logic', link: '/packages/core-api/' }, + { text: 'Event Bus System', link: '/packages/core-events/' }, + { text: 'Storage & Persistence', link: '/packages/core-storage/' }, + { text: 'I18n & Localization', link: '/packages/core-i18n/' }, + ], + }, + { + text: 'UI System', + collapsed: false, + items: [ + { text: 'Overview', link: '/packages/ui/' }, + { text: 'App Layout', link: '/packages/ui/CORE-APP-SHELL' }, + { text: 'Form Primitives', link: '/packages/ui/FORM-COMPONENTS' }, ], }, { - text: 'UI System & Layouts', + text: 'Desktop Ecosystem', collapsed: false, items: [ - { text: 'UI Components Overview', link: '/packages/ui/' }, - { text: 'Core App Shell', link: '/packages/ui/CORE-APP-SHELL' }, - { text: 'Form Components', link: '/packages/ui/FORM-COMPONENTS' }, - ], - }, - { - text: 'Applications & Configuration', - collapsed: false, - items: [ - { text: 'Desktop Application', link: '/apps/desktop/' }, - { text: 'Desktop Configuration', link: '/apps/desktop/CONFIGURATION' }, - { text: 'Desktop Auto Updater', link: '/apps/desktop/AUTO_UPDATER' }, + { text: 'Overview', link: '/apps/desktop/' }, + { text: 'Lifecycle & Configuration', link: '/apps/desktop/CONFIGURATION' }, + { text: 'IPC & Bridge Architecture', link: '/apps/desktop/IPC_ARCHITECTURE' }, + { text: 'Distribution & Auto-Update', link: '/apps/desktop/AUTO_UPDATER' }, ], }, ], diff --git a/apps/docs-dev/src/.vitepress/theme/custom.css b/apps/docs-dev/src/.vitepress/theme/custom.css new file mode 100644 index 0000000..ebaa726 --- /dev/null +++ b/apps/docs-dev/src/.vitepress/theme/custom.css @@ -0,0 +1,87 @@ +/** + * VitePress Custom Theme CSS + * Applying brand color #652ed9 and its variants + */ + +:root { + /* Brand color #652ed9 */ + --vp-c-brand-1: #652ed9; + --vp-c-brand-2: #804aea; + --vp-c-brand-3: #9b6ff8; + --vp-c-brand-soft: rgba(101, 46, 217, 0.16); + + /* Hover states */ + --vp-button-brand-hover-bg: var(--vp-c-brand-2); + --vp-button-brand-hover-text: var(--vp-c-white); + --vp-button-brand-active-bg: var(--vp-c-brand-1); + + /* Focus states */ + --vp-custom-block-brand-border: var(--vp-c-brand-1); +} + +.dark { + /* Slightly adjusted variants for dark mode, keeping the primary brand color consistent */ + --vp-c-brand-1: #8a57f3; + --vp-c-brand-2: #7a42ec; + --vp-c-brand-3: #652ed9; + --vp-c-brand-soft: rgba(101, 46, 217, 0.25); +} + +/* Custom Enterprise Section Styles */ +.enterprise-section { + max-width: 1152px; + margin: 0 auto; + padding: 64px 24px; +} +.enterprise-section h2 { + font-size: 2.2em; + font-weight: 700; + margin-bottom: 0.5em; + letter-spacing: -0.02em; + line-height: 1.2; +} +.enterprise-section > p { + font-size: 1.2em; + color: var(--vp-c-text-2); + margin-bottom: 2.5em; + max-width: 700px; +} +.enterprise-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 24px; +} +.enterprise-card { + padding: 32px 24px; + border-radius: 12px; + background-color: var(--vp-c-bg-soft); + border: 1px solid var(--vp-c-divider); + transition: border-color 0.25s, background-color 0.25s, transform 0.25s; +} +.enterprise-card:hover { + border-color: var(--vp-c-brand-1); + transform: translateY(-2px); +} +.enterprise-card h3 { + font-size: 1.25em; + font-weight: 600; + margin-bottom: 0.75em; + color: var(--vp-c-text-1); + display: flex; + align-items: center; + gap: 8px; +} +.enterprise-card h3::before { + content: ''; + display: inline-block; + width: 8px; + height: 8px; + border-radius: 50%; + background-color: var(--vp-c-brand-1); +} +.enterprise-card p { + font-size: 1em; + color: var(--vp-c-text-2); + line-height: 1.6; + margin: 0; +} diff --git a/apps/docs-dev/src/.vitepress/theme/index.ts b/apps/docs-dev/src/.vitepress/theme/index.ts new file mode 100644 index 0000000..15492a8 --- /dev/null +++ b/apps/docs-dev/src/.vitepress/theme/index.ts @@ -0,0 +1,6 @@ +import DefaultTheme from 'vitepress/theme' +import './custom.css' + +export default { + extends: DefaultTheme, +} diff --git a/apps/docs-dev/src/index.md b/apps/docs-dev/src/index.md index 93268af..15eed87 100644 --- a/apps/docs-dev/src/index.md +++ b/apps/docs-dev/src/index.md @@ -1,24 +1,56 @@ --- layout: home + hero: - name: "Frontend Monorepo Template Docs" - text: "Centralized Documentation Engine" - tagline: "Enterprise-ready Web & Desktop architecture documentation." + name: "Frontend Architecture" + text: "Enterprise Monorepo" + tagline: "A scalable, standardized foundation for Web & Desktop applications. Built for performance, consistency, and velocity." actions: - theme: brand text: Get Started - link: /packages/core-api/ + link: /setup - theme: alt - text: UI Components - link: /packages/ui/ - - theme: alt - text: View on Git - link: https://git.eigen.co.id/eigen/fe-monorepo-template + text: View Architecture + link: /overview + features: - - title: Centralized Source of Truth - details: All documentation for apps and packages is unified here. - - title: Markdown Powered - details: Simple to maintain and read. - - title: Built with VitePress - details: Fast, responsive, and reliable documentation engine. + - title: 🧩 Component Library + details: A centralized, highly accessible UI component library built for scale. + link: /packages/ui/ + linkText: Explore Components + - title: 🔌 Core API Engine + details: Robust state management and data fetching patterns across all applications. + link: /packages/core-api/ + linkText: View API Engine + - title: 🌐 Internationalization + details: First-class i18n support built into the core for global reach. + link: /packages/core-i18n/ + linkText: Read i18n Docs + - title: 🖥️ Desktop IPC + details: Secure and performant Inter-Process Communication architecture for desktop apps. + link: /apps/desktop/IPC_ARCHITECTURE + linkText: Explore IPC --- + +
+

Why this Monorepo Exists

+

Building high-end enterprise applications requires strict consistency, shared tooling, and well-defined boundaries. This monorepo serves as the absolute source of truth for our frontend ecosystem.

+ +
+
+

Unified Tooling

+

By enforcing strict linting, formatting, and building patterns at the root, we ensure that every application in the ecosystem adheres to our high standards without duplicate configuration.

+
+ +
+

Shared Domain Logic

+

The separation of UI and Core logic means our web, desktop, and potential mobile applications all share the same state management and event-driven architecture, reducing cognitive load.

+
+ +
+

Accelerated Velocity

+

Stop reinventing the wheel. With a rich library of primitive components and pre-configured Vite/TypeScript environments, teams can start building product features on day one.

+
+
+
+