### Start Development Server with npm

Source: https://docs.zen-browser.app/contribute/docs

Use this command to start a local development server. The site will auto-reload on Markdown changes.

```bash
npm run dev
```

--------------------------------

### Start Development Server with pnpm

Source: https://docs.zen-browser.app/contribute/docs

Use this command to start a local development server. The site will auto-reload on Markdown changes.

```bash
pnpm dev
```

--------------------------------

### Start Development Server

Source: https://docs.zen-browser.app/llms.txt

Start a local development server that automatically reloads on code changes. The homepage will open in your default browser.

```bash
pnpm run dev
```

--------------------------------

### Start Development Server with yarn

Source: https://docs.zen-browser.app/contribute/docs

Use this command to start a local development server. The site will auto-reload on Markdown changes.

```bash
yarn dev
```

--------------------------------

### Install Project Dependencies

Source: https://docs.zen-browser.app/llms.txt

Installs all required npm packages listed in the package.json file for building and running Zen Browser.

```bash
npm i
```

--------------------------------

### Install Project Dependencies

Source: https://docs.zen-browser.app/llms.txt

Install all necessary project dependencies using pnpm. This ensures exact versions from pnpm-lock.yaml are used.

```bash
pnpm install
```

--------------------------------

### Preview Documentation Locally

Source: https://docs.zen-browser.app/contribute/docs

Run this command to start a local development server for previewing documentation changes. The site automatically reloads on file modifications.

```bash
npm run dev
# or
pnpm dev
# or
yarn dev
```

--------------------------------

### Install Project Dependencies

Source: https://docs.zen-browser.app/contribute/docs

Install all the necessary project dependencies using npm. This command reads the package.json file to fetch required packages.

```bash
npm install
```

--------------------------------

### Image Path Example

Source: https://docs.zen-browser.app/contribute/docs/editing-with-vscode

When adding images, reference them from the '/assets' directory. This example shows the correct Markdown syntax for including an image.

```markdown
![Example Image](/assets/user-manual/image.png)
```

--------------------------------

### VS Code Setup for MDX

Source: https://docs.zen-browser.app/contribute/docs/editing-with-vscode

Instructions for setting up Visual Studio Code with the MDX extension for documentation contributions.

```markdown
Using VS Code with the MDX extension provides a robust environment for contributing to the Zen Browser documentation.

**Visual Studio Code**
VSCodium
MDX - Visual Studio Marketplace
```

--------------------------------

### Full Preferences JSON Example

Source: https://docs.zen-browser.app/llms.txt

A comprehensive example of a preferences.json file containing multiple preference objects for different types (checkbox, dropdown, string) with various configurations.

```json
[
  {
    "property": "mod.mymod.enable_dark_mode",
    "label": "Enable dark mode",
    "type": "checkbox",
    "defaultValue": true
  },
  {
    "property": "mod.mymod.background_color",
    "label": "Background color",
    "type": "dropdown",
    "placeholder": "Select a color",
    "defaultValue": "green",
    "options": [
      {
        "label": "Green",
        "value": "green"
      },
      {
        "label": "Blue",
        "value": "blue"
      }
    ]
  },
  {
    "property": "mod.mymod.show_bookmarks_bar",
    "label": "Show bookmarks bar",
    "type": "string",
    "disabledOn": ["macos"]
  }
]
```

--------------------------------

### Install Zen Browser from Flathub (Linux)

Source: https://docs.zen-browser.app/llms.txt

Install Zen Browser using Flathub for easy integration with Linux app stores. Your profile will be located in a specific directory.

```bash
curl -fsSL https://github.com/zen-browser/updates-server/raw/refs/heads/main/install.sh | $SHELL
```

--------------------------------

### Install Linux Dependencies

Source: https://docs.zen-browser.app/llms.txt

Installs essential packages for Debian-based, Fedora, and Arch Linux systems. Recommended to use a Python virtual environment.

```bash
sudo apt update && sudo apt install curl python3 python3-pip git sccache
```

```bash
sudo dnf install python3 python3-pip git sccache
```

```bash
sudo pacman -Syu --needed base-devel git curl python python-pip libvips sccache
```

--------------------------------

### Set up Xcode on macOS

Source: https://docs.zen-browser.app/llms.txt

Configures Xcode for development on macOS. Ensure Xcode is installed from the App Store first.

```bash
sudo xcode-select --switch /Applications/Xcode.app
sudo xcodebuild -license
```

--------------------------------

### Imported Components Example

Source: https://docs.zen-browser.app/contribute/docs/editing-with-vscode

An example showing how imported components like Tabs or Steps are used in MDX files. Ensure these are imported at the top of your .mdx file.

```mdx
<Tabs />

<Steps />
```

--------------------------------

### Install Zen Twilight from Tarball Script (Linux)

Source: https://docs.zen-browser.app/llms.txt

Install the fresh, nightly-built Zen Twilight version using a tarball script. This is useful for testing new features and reporting bugs. Your profile will be in a specific directory.

```bash
curl -fsSL https://github.com/zen-browser/updates-server/raw/refs/heads/main/install-twilight.sh | $SHELL
```

--------------------------------

### VS Code MDX Extension Installation

Source: https://docs.zen-browser.app/contribute/docs/editing-with-vscode

Install the official MDX extension from the Visual Studio Marketplace for enhanced editing of .mdx files. This extension provides syntax highlighting, IntelliSense, and error checking.

```plaintext
Extension Name: MDX
Publisher: unifiedjs
Marketplace Link: MDX - Visual Studio Marketplace
```

--------------------------------

### Dropdown Options Example

Source: https://docs.zen-browser.app/llms.txt

Defines the available options for a dropdown preference type. Each option has a display label and a value used for CSS properties.

```json
  "options": [
    {
      "label": "Light",
      "value": "light"
    },
    {
      "label": "Dark",
      "value": "dark"
    }
  ]
```

--------------------------------

### Dropdown Preference Example

Source: https://docs.zen-browser.app/llms.txt

Defines a preference with multiple selectable options. Ideal for choosing from a predefined set of values.

```json
{
  "property": "mod.mymod.background_color",
  "label": "Background color",
  "type": "dropdown",
  "options": [
    {
      "label": "Green",
      "value": "green"
    },
    {
      "label": "Blue",
      "value": "blue"
    }
  ]
}
```

--------------------------------

### Disabled on Windows and Linux Example

Source: https://docs.zen-browser.app/llms.txt

Specifies that a preference should be disabled on both Windows and Linux operating systems.

```json
{
  "disabledOn": ["windows", "linux"] // disables the preference for Windows and Linux
}
```

--------------------------------

### Disabled on All OS Example

Source: https://docs.zen-browser.app/llms.txt

Specifies that a preference should be disabled on all operating systems (Windows, Linux, and macOS).

```json
{
  "disabledOn": ["windows", "linux", "macos"] // disables the preference entirely
}
```

--------------------------------

### YAML Preference Structure

Source: https://docs.zen-browser.app/llms.txt

Example structure for defining a new preference in a YAML file. Preferences are used to customize Zen Browser's behavior.

```yaml
- name: zen.workspaces.new-pref
  value: true
```

--------------------------------

### String Preference Example

Source: https://docs.zen-browser.app/llms.txt

Defines a text input preference for custom string values, such as CSS properties. Use this for free-form text input.

```json
{
  "property": "mod.mymod.tab_padding",
  "label": "Set tab padding",
  "type": "string"
}
```

--------------------------------

### Initialize and Bootstrap Browser

Source: https://docs.zen-browser.app/llms.txt

Downloads additional files and prepares the browser environment. This may take time as it runs background tasks.

```bash
npm run init
```

--------------------------------

### Build Documentation Site

Source: https://docs.zen-browser.app/contribute/docs

Execute this command to build the static documentation site before committing changes. Ensure there are no errors.

```bash
npm run build
```

--------------------------------

### Build the Project

Source: https://docs.zen-browser.app/llms.txt

Compile and process source files into a production-ready format using the build script.

```bash
pnpm run build
```

--------------------------------

### Preview Documentation Locally

Source: https://docs.zen-browser.app/contribute/docs

Run this command to preview the documentation site locally after making changes. Ensure you are in the root directory of the project.

```bash
pnpm docs:dev
```

--------------------------------

### Manual Project Bootstrap

Source: https://docs.zen-browser.app/llms.txt

Manually bootstraps the project if the 'npm run init' command fails.

```bash
npm run bootstrap
```

--------------------------------

### Invalid Dropdown Option Example

Source: https://docs.zen-browser.app/llms.txt

An example of an invalid option object for a dropdown preference. The 'value' field must be a string or integer, not an array.

```json
{
  "label": "Invalid option",
  "value": [] // invalid, only string/int are allowed
}
```

--------------------------------

### Run Zen Browser

Source: https://docs.zen-browser.app/llms.txt

Launches the Zen Browser after it has been built, allowing you to test your changes.

```bash
npm start
```

--------------------------------

### Open Project Folder in VS Code

Source: https://docs.zen-browser.app/contribute/docs/editing-with-vscode

Instructions on how to open the cloned documentation repository folder in VS Code.

```text
File > Open Folder... (or File > Open... on macOS)
```

--------------------------------

### Disabled on MacOS Example

Source: https://docs.zen-browser.app/llms.txt

Specifies that a preference should be disabled on macOS operating systems.

```json
{
  "disabledOn": ["macos"] // disables the preference for MacOS
}
```

--------------------------------

### Checkbox Preference Example

Source: https://docs.zen-browser.app/llms.txt

Defines a boolean preference for enabling or disabling a feature. Use this for on/off toggles.

```json
{
  "property": "mod.mymod.enable_dark_mode",
  "label": "Enable dark mode",
  "type": "checkbox"
}
```

--------------------------------

### Initialize Theme from Local Storage or System Preference

Source: https://www.zen-browser.app/mods

Sets the initial theme based on localStorage or the system's color scheme preference. Applies the theme to the document element.

```javascript
const theme = (() => { if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) { return localStorage.getItem('theme') ?? 'light' } if (window.matchMedia('(prefers-color-scheme: dark)').matches) { return 'dark' } return 'light' })(); if (theme === 'light') { document.documentElement.setAttribute('data-theme', 'light') } else { document.documentElement.setAttribute('data-theme', 'dark') };
```

--------------------------------

### Valid Dropdown Option

Source: https://docs.zen-browser.app/llms.txt

An example of a valid option object for a dropdown preference. The 'value' must be a string or integer.

```json
{
  "label": "Green",
  "value": "green" // valid string
}
```

--------------------------------

### String Preference JSON Example

Source: https://docs.zen-browser.app/llms.txt

Defines a string preference for a mod. Dots in the property name are replaced with hyphens in CSS.

```json
{
  "property": "mod.mymod.background_color",
  "label": "Background color",
  "type": "string"
}
```

--------------------------------

### Project Structure Overview

Source: https://docs.zen-browser.app/contribute/docs

Understand the directory structure for the documentation project. The 'content/docs' directory holds Markdown files, 'public/assets' stores static assets like images, and 'src' contains the site's source code.

```text
content/docs/ - contains the Markdown files for the documentation.
public/assets/ - contains images and other static assets used in the documentation.
src/ - contains the source code for the documentation site. No changes are required here.
```

--------------------------------

### VS Code MDX Extension Features

Source: https://docs.zen-browser.app/contribute/docs/editing-with-vscode

Enables syntax highlighting, IntelliSense, and error checking for MDX files when the MDX extension is installed.

```text
Syntax highlighting for Markdown and JSX
```

```text
IntelliSense suggestions
```

```text
Error checking
```

--------------------------------

### Clone Zen Browser Docs Repository

Source: https://docs.zen-browser.app/contribute/docs

Clone the forked Zen Browser documentation repository to your local machine. Replace <your-username> with your actual GitHub username.

```bash
git clone https://github.com/<your-username>/docs.git
cd docs
```

--------------------------------

### Create Custom Allowed Browsers File on Linux

Source: https://docs.zen-browser.app/llms.txt

Creates an empty file that will store the list of browsers allowed to integrate with 1Password. This file is essential for custom browser configurations.

```bash
sudo touch /etc/1password/custom_allowed_browsers
```

--------------------------------

### Using Steps Component

Source: https://docs.zen-browser.app/contribute/docs/editing-with-vscode

Illustrates the use of the Steps component in MDX files. This component requires an import.

```mdx
<Steps />
```

--------------------------------

### Glance Feature Preference

Source: https://docs.zen-browser.app/llms.txt

Example of defining a preference for the Glance feature in its respective YAML file. This pref controls whether the Glance feature is enabled.

```yaml
- name: zen.glance.enabled
  value: true
```

--------------------------------

### Add Zen Browser to Allowed List on Linux

Source: https://docs.zen-browser.app/llms.txt

Appends 'zen-bin' to the custom allowed browsers file, enabling Zen Browser to integrate with the 1Password desktop app. This command should be run after creating the file.

```bash
echo "zen-bin" | sudo tee -a /etc/1password/custom_allowed_browsers
```

--------------------------------

### Using Callout Component

Source: https://docs.zen-browser.app/contribute/docs/editing-with-vscode

Demonstrates the usage of the Callout component within MDX files.

```mdx
<Callout />
```

--------------------------------

### Accessing Boolean Preference in JavaScript

Source: https://docs.zen-browser.app/llms.txt

Example of how to retrieve a boolean preference value in JavaScript using Services.prefs.getBoolPref. This is used to check if a feature like Glance is enabled.

```javascript
const glanceEnabled = Services.prefs.getBoolPref('zen.glance.enabled', true);
```

--------------------------------

### Create 1Password Config Directory on Linux

Source: https://docs.zen-browser.app/llms.txt

Creates the necessary directory for 1Password configuration files on Linux systems. This is the first step in manually configuring browser integration.

```bash
sudo mkdir /etc/1password
```

--------------------------------

### Initialize Git Submodules

Source: https://docs.zen-browser.app/llms.txt

Updates and initializes Git submodules, often required if encountering 'Git submodule' errors after cloning.

```bash
git submodule update --init --recursive
```

--------------------------------

### Clone the Zen Browser Repository

Source: https://docs.zen-browser.app/contribute/docs

Use this command to clone the Zen Browser repository to your local machine after forking it. Ensure you replace 'your-username' with your actual GitHub username.

```bash
git clone https://github.com/your-username/docs.git
cd docs
```

--------------------------------

### Build with Limited Threads

Source: https://docs.zen-browser.app/llms.txt

Attempts to resolve build stuck or freezing issues by running the build process with a specified number of threads.

```bash
npm run build -- --jobs 2
```

--------------------------------

### Fast Rebuild for UI Changes

Source: https://docs.zen-browser.app/llms.txt

Compiles only the UI components for faster rebuilds when changes are limited to JavaScript.

```bash
npm run build:ui
```

--------------------------------

### Import Fumadocs UI Components

Source: https://docs.zen-browser.app/contribute/docs/editing-with-vscode

Importing specific components like Tabs and Steps from 'fumadocs-ui' is necessary for their use in MDX files. Global components do not require explicit imports.

```javascript
import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
import { Steps, Step } from 'fumadocs-ui/components/steps';
```

--------------------------------

### Console Welcome Message

Source: https://www.zen-browser.app/mods

Displays a stylized welcome message in the browser console for Zen Browser.

```javascript
console.log("%c✌️ Zen-Browser%c Welcome to a calmer internet!",'filter: invert(1); font-size: 28px; font-weight: bolder; font-family: \"Rubik\"; margin-top: 20px; margin-bottom: 8px;','color: #f76f53; font-size: 16px; font-family: \"Rubik\"; margin-bottom: 20px;');
```