Merge pull request #215 from zen-browser/better-docs

Author: mr-cheffy

content/docs/contribute/desktop.mdx renamed to content/docs/contribute/desktop/building.mdx

@@ -1,7 +1,7 @@
 ---
-title: Browser
+title: Building Zen
 ---
-import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
+import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
 
 We've taken the time to make building Zen Browser as easy as possible, independent of your operating system or technical knowledge.
 
@@ -13,8 +13,6 @@ The following resources are essential for a successful build. Without them, you
 - Git ([Download here](https://git-scm.com/downloads)) – Required for version control and managing source code.  
 - Python 3 ([Download here](https://www.python.org/downloads/)) – Needed for running build scripts and automation tools.   
 - Node.js 21+ ([Download here](https://nodejs.org/)) – Required for managing dependencies and running JavaScript-based tools.    
-- MozillaBuild ([Download here](https://wiki.mozilla.org/MozillaBuild)) – Required for `mach` and Gecko compilation.  
-- 7-Zip ([Download here](https://www.7-zip.org/download.html)) – Used to extract Firefox source archives.  
 - sccache ([Download here](https://github.com/mozilla/sccache/releases)) – A caching tool that speeds up rebuilds by storing compiled objects.    
 
 <Callout>
@@ -25,16 +23,45 @@ If you're using Windows, ensure that all the basic software requirements are add
 We cannot provide support if a build fails. Please understand this before proceeding with the following steps.
 </Callout>
 
-## Step 1: Clone the Project
-
-First, you need to clone the Zen Browser repository to your local machine. This will create a local copy of the project that you can work on.
+## Step 1: Getting Started & Clone the Project
+
+First, let's get your system ready for building Zen.
+
+<Tabs groupId="toolbar" items={['Windows', 'Linux', 'macOS']} persist>
+  <Tab value="Windows">
+      <p>Follow the steps below to set up your Windows environment for building Zen Browser:</p>
+      <ol>
+        <li>Install [MozillaBuild](https://wiki.mozilla.org/MozillaBuild) and add it to your `PATH`.</li>
+        <li>Install [7-Zip](https://www.7-zip.org/) and add it to your `PATH`.</li>
+        <li>Ensure you have Visual Studio with the "Desktop development with C++" workload installed.</li>
+      </ol>
+  </Tab>
+  <Tab value="Linux">
+      <p>Follow the steps below to set up your Linux environment for building Zen Browser:</p>
+      <ol>
+        <li>For Debian-based Linux (such as Ubuntu): `sudo apt update && sudo apt install curl python3 python3-pip git`</li>
+        <li>`For Fedora Linux: sudo dnf install python3 python3-pip git`</li>
+      </ol>
+  </Tab>
+  <Tab value="macOS">
+      <p>Follow the steps below to set up your macOS environment for building Zen Browser:</p>
+      <ol>
+        <li>Install Xcode from the App Store, after that run the following command in your terminal:</li>
+        ```
+sudo xcode-select --switch /Applications/Xcode.app
+sudo xcodebuild -license
+      ```
+      </ol>
+  </Tab>
+</Tabs>
+
+After having everything set up, you need to clone the Zen Browser repository to your local machine. This will create a local copy of the project that you can work on.
 
 ```bash
-git clone https://github.com/zen-browser/desktop.git --recurse-submodules --depth 10
+git clone https://github.com/zen-browser/desktop.git --depth 10
 cd desktop
 ```
 
-- **`--recurse-submodules`**: This flag ensures that all submodules are cloned along with the main project. Zen Browser relies on several submodules, so this step is essential.
 - **`--depth 10`**: This makes sure you dont download the entire git history, it would take a long time otherwise due to that we used to store compiled binaries on the repository.
 
 ## Step 2: Install Dependencies

content/docs/contribute/desktop/code-structure-and-prefs.mdx

@@ -0,0 +1,56 @@
+---
+title: Code Structure
+description: Zen Browser Code Structure and Preference Management
+---
+
+The Zen Browser is a fork of Firefox with custom features like vertical tabs, workspaces, and themes. The source code is organized in the `src/` directory, with patches and custom implementations for Zen-specific features.
+
+## Main Directories
+- **src/zen/**: Contains Zen-specific features.
+  - `workspaces/`: Implements workspace functionality (e.g., ZenWorkspaces.mjs, ZenWorkspace.mjs).
+  - `compact-mode/`: Handles compact mode UI.
+  - `glance/`: Quick tab preview feature.
+  - `common/`: Shared utilities like ZenUIManager.mjs and ZenStartup.mjs.
+  - `tabs/`: Tab management, including pinned tabs.
+- **src/browser/**: Browser components with patches (e.g., browser.xhtml patches).
+- **prefs/**: Preference files in YAML format for various features (e.g., zen.yaml for general prefs, glance.yaml for glance feature).
+
+## How to Add New Preferences
+Preferences in Zen Browser are defined in YAML files under `prefs/`. These are loaded and applied to customize behavior.
+
+### Steps to Add a New Pref
+1. **Choose or Create a YAML File**: 
+  - For workspace-related prefs, edit `prefs/zen.yaml` or create a new one like `workspaces.yaml` if needed.
+  - Example structure in YAML:
+    ```yaml
+    - name: zen.workspaces.new-pref
+      value: true
+    ```
+
+2. **Define the Pref**:
+  - `name`: The preference key (e.g., 'zen.workspaces.enable-feature').
+  - `value`: Default value (bool, string, int).
+  - *`condition`: Optional*
+
+3. **Integrate in Code**:
+  - Use `Services.prefs.getBoolPref('zen.workspaces.new-pref', defaultValue)` in JavaScript files (e.g., ZenWorkspaces.mjs).
+
+4. **Build and Test**:
+  - Rebuild the browser.
+
+
+### Glance Example
+To add a pref for enabling/disabling the Glance feature:
+- In `prefs/glance.yaml`:
+  ```yaml
+  - name: zen.glance.enabled
+    value: true
+  ```
+- In `src/zen/glance/ZenGlanceManager.mjs`:
+  ```javascript
+  const glanceEnabled = Services.prefs.getBoolPref('zen.glance.enabled', true);
+  ```
+
+<Callout type="info" title="Tip">
+  For more details, refer to existing preference definitions in the `prefs/` directory and their corresponding code implementations in `src/zen/`.
+</Callout>

content/docs/contribute/desktop/index.mdx

@@ -0,0 +1,10 @@
+---
+title: Contributing To Desktop
+---
+
+import { BookIcon, HammerIcon } from 'lucide-react'
+
+<Cards>
+  <Card title="Building Zen" icon={<BookIcon />} description="Getting Started with Zen Browser Development" href="/contribute/desktop/building" />
+  <Card title="Working on Zen" icon={<HammerIcon />} description="Getting Started with Zen's Homepage Development" href="/contribute/desktop/working" />
+</Cards>

content/docs/contribute/desktop/meta.json

@@ -0,0 +1,6 @@
+{
+  "title": "Desktop",
+  "pages": [
+    "..."
+  ]
+}