feat: redesign documentation landing page with custom theme and updated site navigation
This commit is contained in:
Firman Ramdhani
@@ -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' },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import './custom.css'
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
}
|
||||
+47
-15
@@ -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
|
||||
---
|
||||
|
||||
<div class="enterprise-section" >
|
||||
<h2>Why this Monorepo Exists</h2>
|
||||
<p>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.</p>
|
||||
|
||||
<div class="enterprise-grid">
|
||||
<div class="enterprise-card">
|
||||
<h3>Unified Tooling</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<div class="enterprise-card">
|
||||
<h3>Shared Domain Logic</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<div class="enterprise-card">
|
||||
<h3>Accelerated Velocity</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user