ZenBrowserMirrors/docs
1
0
Fork 0
mirror of https://github.com/zen-browser/docs.git synced 2025-07-07 08:55:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

Formatted the project

Browse source
This commit is contained in:
mr. m 2025-03-07 23:35:24 +00:00
parent 41e24452ab
commit 6a232aafbd
52 changed files with 117210 additions and 111887 deletions
Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -7,13 +7,13 @@
Zen Browser Docs website
</h1>
Welcome to **Zen Browser’s Documentation Repo!**
Welcome to **Zen Browser’s Documentation Repo!**
[![Status badge](https://img.shields.io/endpoint?url=https%3A%2F%2Fuptime.zen-browser.app%2Fshield-badges%2Fstatus.json&style=for-the-badge)](https://uptime.zen-browser.app)
## Contributing
This site is built with [Quartz 4.0](https://quartz.jzhao.xyz/). Site content is written in Markdown format located in `content`.
This site is built with [Quartz 4.0](https://quartz.jzhao.xyz/). Site content is written in Markdown format located in `content`.
If you would like to contribute see: [Getting Started with Documentation Contributions](https://docs.zen-browser.app/contribute/docs)
For local preview:

2
content/.obsidian/app.json vendored
View file

@ -1,4 +1,4 @@
{
"livePreview": false,
"alwaysUpdateLinks": true
}
}

2
content/.obsidian/appearance.json vendored
View file

@ -1,3 +1,3 @@
{
"cssTheme": "Catppuccin"
}
}

7
content/.obsidian/community-plugins.json vendored
View file

@ -1,6 +1 @@
[
"obsidian-style-settings",
"emoji-shortcodes",
"callout-manager",
"obsidian-emoji-toolbar"
]
["obsidian-style-settings", "emoji-shortcodes", "callout-manager", "obsidian-emoji-toolbar"]

2
content/.obsidian/core-plugins-migration.json vendored
View file

@ -27,4 +27,4 @@
"file-recovery": true,
"publish": false,
"sync": false
}
}

2
content/.obsidian/graph.json vendored
View file

@ -19,4 +19,4 @@
"linkDistance": 250,
"scale": 1.942784106682881,
"close": false
}
}

7
content/.obsidian/hotkeys.json vendored
View file

@ -1,11 +1,8 @@
{
"callout-manager:manage-callouts": [
{
"modifiers": [
"Mod",
"Shift"
],
"modifiers": ["Mod", "Shift"],
"key": "C"
}
]
}
}

2
content/.obsidian/plugins/callout-manager/data.json vendored
View file

@ -8,4 +8,4 @@
"theme": true,
"snippet": true
}
}
}

4334
content/.obsidian/plugins/callout-manager/main.js vendored
View file

File diff suppressed because it is too large Load diff

18
content/.obsidian/plugins/callout-manager/manifest.json vendored
View file

@ -1,10 +1,10 @@
{
"id": "callout-manager",
"version": "1.1.0",
"description": "Easily create and customize callouts.",
"author": "eth-p",
"authorUrl": "https://github.com/eth-p",
"name": "Callout Manager",
"minAppVersion": "1.0.0",
"isDesktopOnly": false
}
"id": "callout-manager",
"version": "1.1.0",
"description": "Easily create and customize callouts.",
"author": "eth-p",
"authorUrl": "https://github.com/eth-p",
"name": "Callout Manager",
"minAppVersion": "1.0.0",
"isDesktopOnly": false
}

389
content/.obsidian/plugins/callout-manager/styles.css vendored
View file

File diff suppressed because one or more lines are too long

2
content/.obsidian/plugins/emoji-shortcodes/data.json vendored
View file

@ -13,4 +13,4 @@
":rocket:",
":closed_lock_with_key:"
]
}
}

375
content/.obsidian/plugins/emoji-shortcodes/main.js vendored
View file

File diff suppressed because one or more lines are too long

18
content/.obsidian/plugins/emoji-shortcodes/manifest.json vendored
View file

@ -1,11 +1,11 @@
{
"id": "emoji-shortcodes",
"name": "Emoji Shortcodes",
"version": "2.2.0",
"minAppVersion": "1.0.0",
"description": "This Plugin enables the use of Markdown Emoji Shortcodes :smile:",
"author": "phibr0",
"authorUrl": "https://github.com/phibr0",
"isDesktopOnly": false,
"fundingUrl": "https://ko-fi.com/phibr0"
"id": "emoji-shortcodes",
"name": "Emoji Shortcodes",
"version": "2.2.0",
"minAppVersion": "1.0.0",
"description": "This Plugin enables the use of Markdown Emoji Shortcodes :smile:",
"author": "phibr0",
"authorUrl": "https://github.com/phibr0",
"isDesktopOnly": false,
"fundingUrl": "https://ko-fi.com/phibr0"
}

205507
content/.obsidian/plugins/obsidian-emoji-toolbar/main.js vendored
View file

File diff suppressed because one or more lines are too long

109
content/.obsidian/plugins/obsidian-emoji-toolbar/styles.css vendored
View file

@ -56,13 +56,15 @@ img.emoji {
text-align: center;
padding: 12px 4px !important;
overflow: hidden;
transition: color .1s ease-out;
margin: 0 !important;
transition: color 0.1s ease-out;
margin: 0 !important;
box-shadow: none !important;
background: none !important;
border: none !important;
border: none !important;
}
.emoji-mart-anchor:focus {
outline: 0;
}
.emoji-mart-anchor:focus { outline: 0 }
.emoji-mart-anchor:hover,
.emoji-mart-anchor:focus,
.emoji-mart-anchor-selected {
@ -75,8 +77,10 @@ img.emoji {
.emoji-mart-anchor-bar {
position: absolute;
bottom: -3px; left: 0;
width: 100%; height: 3px;
bottom: -3px;
left: 0;
width: 100%;
height: 3px;
background-color: #464646;
}
@ -145,15 +149,19 @@ img.emoji {
cursor: default;
}
.emoji-mart-category .emoji-mart-emoji:focus { outline: 0 }
.emoji-mart-category .emoji-mart-emoji:focus {
outline: 0;
}
.emoji-mart-category .emoji-mart-emoji:hover:before,
.emoji-mart-category .emoji-mart-emoji:hover:before,
.emoji-mart-category .emoji-mart-emoji:focus:before {
z-index: 0;
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #c5c5c5;
border-radius: 100%;
}
@ -172,7 +180,7 @@ img.emoji {
font-weight: 500;
padding: 5px 6px;
background-color: #fff;
background-color: rgba(255, 255, 255, .95);
background-color: rgba(255, 255, 255, 0.95);
}
.emoji-mart-category-list {
@ -198,7 +206,9 @@ img.emoji {
}
.emoji-mart-emoji-native {
font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
font-family:
"Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla",
"Noto Color Emoji", "Android Emoji";
}
.emoji-mart-no-results {
@ -217,7 +227,7 @@ img.emoji {
display: none;
}
.emoji-mart-no-results .emoji-mart-no-results-label {
margin-top: .2em;
margin-top: 0.2em;
}
.emoji-mart-no-results .emoji-mart-emoji:hover:before {
content: none;
@ -241,7 +251,8 @@ img.emoji {
}
.emoji-mart-preview-data {
left: 68px; right: 12px;
left: 68px;
right: 12px;
word-break: break-all;
}
@ -266,7 +277,7 @@ img.emoji {
.emoji-mart-preview-shortname + .emoji-mart-preview-shortname,
.emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,
.emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {
margin-left: .5em;
margin-left: 0.5em;
}
.emoji-mart-preview-emoticon {
@ -284,7 +295,7 @@ img.emoji {
}
.emoji-mart-title-label {
color: #999A9C;
color: #999a9c;
font-size: 26px;
font-weight: 300;
}
@ -309,7 +320,7 @@ img.emoji {
}
.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected:after {
opacity: .75;
opacity: 0.75;
}
.emoji-mart-skin-swatch {
@ -317,16 +328,28 @@ img.emoji {
width: 0;
vertical-align: middle;
transition-property: width, padding;
transition-duration: .125s;
transition-duration: 0.125s;
transition-timing-function: ease-out;
}
.emoji-mart-skin-swatch:nth-child(1) { transition-delay: 0s }
.emoji-mart-skin-swatch:nth-child(2) { transition-delay: .03s }
.emoji-mart-skin-swatch:nth-child(3) { transition-delay: .06s }
.emoji-mart-skin-swatch:nth-child(4) { transition-delay: .09s }
.emoji-mart-skin-swatch:nth-child(5) { transition-delay: .12s }
.emoji-mart-skin-swatch:nth-child(6) { transition-delay: .15s }
.emoji-mart-skin-swatch:nth-child(1) {
transition-delay: 0s;
}
.emoji-mart-skin-swatch:nth-child(2) {
transition-delay: 0.03s;
}
.emoji-mart-skin-swatch:nth-child(3) {
transition-delay: 0.06s;
}
.emoji-mart-skin-swatch:nth-child(4) {
transition-delay: 0.09s;
}
.emoji-mart-skin-swatch:nth-child(5) {
transition-delay: 0.12s;
}
.emoji-mart-skin-swatch:nth-child(6) {
transition-delay: 0.15s;
}
.emoji-mart-skin-swatch.selected {
position: relative;
@ -337,14 +360,16 @@ img.emoji {
.emoji-mart-skin-swatch.selected:after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 4px; height: 4px;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
margin: -2px 0 0 -2px;
background-color: #fff;
border-radius: 100%;
pointer-events: none;
opacity: 0;
transition: opacity .2s ease-out;
transition: opacity 0.2s ease-out;
}
.emoji-mart-skin-swatch.custom {
@ -354,7 +379,7 @@ img.emoji {
overflow: hidden;
vertical-align: middle;
transition-property: width, height;
transition-duration: .125s;
transition-duration: 0.125s;
transition-timing-function: ease-out;
cursor: default;
}
@ -384,7 +409,7 @@ img.emoji {
}
.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected:after {
opacity: .75;
opacity: 0.75;
}
.emoji-mart-skin-text.opened {
@ -408,12 +433,24 @@ img.emoji {
border-radius: 100%;
}
.emoji-mart-skin-tone-1 { background-color: #ffc93a }
.emoji-mart-skin-tone-2 { background-color: #fadcbc }
.emoji-mart-skin-tone-3 { background-color: #e0bb95 }
.emoji-mart-skin-tone-4 { background-color: #bf8f68 }
.emoji-mart-skin-tone-5 { background-color: #9b643d }
.emoji-mart-skin-tone-6 { background-color: #594539 }
.emoji-mart-skin-tone-1 {
background-color: #ffc93a;
}
.emoji-mart-skin-tone-2 {
background-color: #fadcbc;
}
.emoji-mart-skin-tone-3 {
background-color: #e0bb95;
}
.emoji-mart-skin-tone-4 {
background-color: #bf8f68;
}
.emoji-mart-skin-tone-5 {
background-color: #9b643d;
}
.emoji-mart-skin-tone-6 {
background-color: #594539;
}
/* For screenreaders only, via https://stackoverflow.com/a/19758620 */
.emoji-mart-sr-only {
@ -502,4 +539,4 @@ img.emoji {
#emoji-modal > .modal-close-button {
visibility: hidden;
}
}

2
content/.obsidian/plugins/obsidian-style-settings/data.json vendored
View file

@ -1,3 +1,3 @@
{
"minimal-advanced@@styled-scrollbars": true
}
}

16102
content/.obsidian/plugins/obsidian-style-settings/main.js vendored
View file

File diff suppressed because one or more lines are too long

16
content/.obsidian/plugins/obsidian-style-settings/manifest.json vendored
View file

@ -1,10 +1,10 @@
{
"id": "obsidian-style-settings",
"name": "Style Settings",
"version": "1.0.8",
"minAppVersion": "0.11.5",
"description": "Offers controls for adjusting theme, plugin, and snippet CSS variables.",
"author": "mgmeyers",
"authorUrl": "https://github.com/mgmeyers/obsidian-style-settings",
"isDesktopOnly": false
"id": "obsidian-style-settings",
"name": "Style Settings",
"version": "1.0.8",
"minAppVersion": "0.11.5",
"description": "Offers controls for adjusting theme, plugin, and snippet CSS variables.",
"author": "mgmeyers",
"authorUrl": "https://github.com/mgmeyers/obsidian-style-settings",
"isDesktopOnly": false
}

625
content/.obsidian/plugins/obsidian-style-settings/styles.css vendored
View file

File diff suppressed because one or more lines are too long

864
content/.obsidian/themes/Catppuccin/theme.css vendored
View file

File diff suppressed because one or more lines are too long

2
content/.obsidian/types.json vendored
View file

@ -9,4 +9,4 @@
"created": "date",
"lastmod": "date"
}
}
}

109
content/benchmarks.md
View file

@ -4,8 +4,9 @@ lastmod: 2024-10-15
---
These benchmarks were performed on a device with the following specifications:
* Windows 11
* Intel® Core i5-13600K Processor
- Windows 11
- Intel® Core i5-13600K Processor
> [!warning]
> These benchmarks only focus on specific performance aspects of a browser, and your personal results may vary drastically depending on your hardware.
@ -18,23 +19,23 @@ These benchmarks were performed on a device with the following specifications:
### [Speedometer 3.0](https://browserbench.org/Speedometer3.0/)
| Version | Score |
|-----------|-----|
| 1.0.1-a.10-opt | 25.4 |
| 1.0.1-a.4-opt | 25.6 |
| 1.0.1-a.2-opt | 25.4 |
| 1.0.0-a.39-opt | 25.6 |
| 1.0.0-a.37-opt | 25.5 |
| 1.0.0-a.34-opt | 21.6 |
| 1.0.0-a.33-opt | 21.7 |
| 1.0.0-a.32-opt | 21.8 |
| 1.0.0-a.13-opt | 21.1 |
| 1.0.0-a.12-opt | 21.5 |
| 1.0.0-a.11-opt | 20.8 |
| 1.0.0-a.10 | 21.2 |
| Vivaldi 6.7.3329.39| 27.8 |
| FF nightly 130.0a1 | 27.0 |
| Librewolf 128.0-2 | 20.2 |
| Version | Score |
| ------------------- | ----- |
| 1.0.1-a.10-opt | 25.4 |
| 1.0.1-a.4-opt | 25.6 |
| 1.0.1-a.2-opt | 25.4 |
| 1.0.0-a.39-opt | 25.6 |
| 1.0.0-a.37-opt | 25.5 |
| 1.0.0-a.34-opt | 21.6 |
| 1.0.0-a.33-opt | 21.7 |
| 1.0.0-a.32-opt | 21.8 |
| 1.0.0-a.13-opt | 21.1 |
| 1.0.0-a.12-opt | 21.5 |
| 1.0.0-a.11-opt | 20.8 |
| 1.0.0-a.10 | 21.2 |
| Vivaldi 6.7.3329.39 | 27.8 |
| FF nightly 130.0a1 | 27.0 |
| Librewolf 128.0-2 | 20.2 |
```mermaid
xychart-beta
@ -47,13 +48,13 @@ xychart-beta
### [JetStream 2.2](https://browserbench.org/JetStream/)
| Version | Score |
|-----------|-----|
| 1.0.1-a.4-opt | 240 |
| 1.0.1-a.2-opt | 237 |
| 1.0.0-a.39-opt | 238 |
| 1.0.0-a.37-opt | 239 |
| 1.0.0-a.34-opt | 228 |
| Version | Score |
| -------------- | ----- |
| 1.0.1-a.4-opt | 240 |
| 1.0.1-a.2-opt | 237 |
| 1.0.0-a.39-opt | 238 |
| 1.0.0-a.37-opt | 239 |
| 1.0.0-a.34-opt | 228 |
```mermaid
xychart-beta
@ -66,13 +67,13 @@ xychart-beta
### [MotionMark](https://browserbench.org/MotionMark1.3.1/)
| Version | Score |
|-----------|-----|
| 1.0.1-a.4-opt | 1515 |
| 1.0.1-a.2-opt | 1527 |
| 1.0.0-a.39-opt | 1538 |
| 1.0.0-a.37-opt | 1562 |
| 1.0.0-a.34-opt | 1464 |
| Version | Score |
| -------------- | ----- |
| 1.0.1-a.4-opt | 1515 |
| 1.0.1-a.2-opt | 1527 |
| 1.0.0-a.39-opt | 1538 |
| 1.0.0-a.37-opt | 1562 |
| 1.0.0-a.34-opt | 1464 |
```mermaid
xychart-beta
@ -83,7 +84,6 @@ xychart-beta
line [1464,1562,1538,1527,1515]
```
<style>
/* Add spacing between each details section */
details {
@ -108,26 +108,25 @@ details > summary + * {
## [Basemark Web 3.0](https://web.basemark.com/)
| Version | Score |CSS | HTML5 | Page Responsiveness |
|-----------|-----|-----|-------|------------------------------|
| 1.0.0-a.X| --- | --- | --- | --- | --- |
| 1.0.0-a.34-opt | 1920 | 59% | 91% | 91% | 76% |
| 1.0.0-a.33-opt | 1957 | 59% | 91% | 91% | 76% |
| 1.0.0-a.32-opt | 1732 | 59% | 91% | 90% | 76% |
| 1.0.0-a.15-opt | 2141 | 59% | 91% | 90% | 76% |
| 1.0.0-a.13-opt | 1658 | 59% | 91% | 90% | 76% |
| 1.0.0-a.12-opt | 1874 | 59% | 91% | 91% | 76% |
| 1.0.0-a.11-opt | 1678 | 59% | 91% | 91% | 76% |
| 1.0.0-a.10 | 1660 | 59% | 91% | 91% | 76% |
| 1.0.0-a.9 | 470 | --- | --- | --- | --- |
| 1.0.0-a.8 | 446.74 | 59% | 91% | 96% |
| 1.0.0-a.7 | 1964.43 | 59% | 91% | 91% |
| 1.0.0-a.6 | 1747.98 | 59% | 91% | 91% |
| 1.0.0-a.4 | 470.49 | 59% | 91% | 97% |
| 1.0.0-a.3 | 475.52 |59% | 91% | 97% |
| Librewolf 128.0-2 | 1953.65 | 59.66% | 89.01% | 91.72% |
| FF nightly 130.0a1 | 1912.77 | 59.66% | 90.91% | 91.72% |
| Version | Score | CSS | HTML5 | Page Responsiveness |
| ------------------ | ------- | ------ | ------ | ------------------- | --- |
| 1.0.0-a.X | --- | --- | --- | --- | --- |
| 1.0.0-a.34-opt | 1920 | 59% | 91% | 91% | 76% |
| 1.0.0-a.33-opt | 1957 | 59% | 91% | 91% | 76% |
| 1.0.0-a.32-opt | 1732 | 59% | 91% | 90% | 76% |
| 1.0.0-a.15-opt | 2141 | 59% | 91% | 90% | 76% |
| 1.0.0-a.13-opt | 1658 | 59% | 91% | 90% | 76% |
| 1.0.0-a.12-opt | 1874 | 59% | 91% | 91% | 76% |
| 1.0.0-a.11-opt | 1678 | 59% | 91% | 91% | 76% |
| 1.0.0-a.10 | 1660 | 59% | 91% | 91% | 76% |
| 1.0.0-a.9 | 470 | --- | --- | --- | --- |
| 1.0.0-a.8 | 446.74 | 59% | 91% | 96% |
| 1.0.0-a.7 | 1964.43 | 59% | 91% | 91% |
| 1.0.0-a.6 | 1747.98 | 59% | 91% | 91% |
| 1.0.0-a.4 | 470.49 | 59% | 91% | 97% |
| 1.0.0-a.3 | 475.52 | 59% | 91% | 97% |
| Librewolf 128.0-2 | 1953.65 | 59.66% | 89.01% | 91.72% |
| FF nightly 130.0a1 | 1912.77 | 59.66% | 90.91% | 91.72% |
```mermaid
xychart-beta
@ -139,5 +138,3 @@ xychart-beta
```
</details>

4
content/building.md
View file

@ -3,7 +3,7 @@ title: Building Zen Browser 📦
lastmod: 2024-09-25
---
We've taken the time to make building Zen Browser as easy as possible, independent of your operating system or technical knowledge.
We've taken the time to make building Zen Browser as easy as possible, independent of your operating system or technical knowledge.
> [!failure]
> We cannot provide support if a build fails. Please understand this before proceeding with the following steps.
@ -39,7 +39,7 @@ pnpm run init
This command handles all the necessary bootstrapping tasks, such as setting up configuration files and downloading essential resources.
## Step 4: Update Language Packs
## Step 4: Update Language Packs
Before building the browser, it’s recommended to update the American English language packs to ensure that all localization files are up-to-date:

5
content/contribute/CODE_OF_CONDUCT.md
View file

@ -3,6 +3,7 @@ title: Code of Conduct
draft: false
lastmod: 2024-08-24
---
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
@ -48,18 +49,22 @@ All community leaders are obligated to respect the privacy and security of the r
Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series of actions.
**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within the community.

15
content/contribute/CONTRIBUTING.md
View file

@ -30,19 +30,20 @@ Please follow the appropriate guide based on the repository you want to contribu
If you find a bug, please open an issue and describe the problem in detail. Include steps to reproduce the bug, the expected behavior, and any relevant information about your environment. Please verify that the bug has not been reported already.
>[!important]
>Open the issue in it's corresponding GitHub repository:
>- [Desktop Browser App](https://github.com/zen-browser/desktop/issues)
>- [Zen's Custom Mods](https://github.com/zen-browser/theme-store)
>- [Zen's Homepage Website](https://github.com/zen-browser/www)
>- [This documentation Website](https://github.com/zen-browser/docs)
> [!important]
> Open the issue in it's corresponding GitHub repository:
>
> - [Desktop Browser App](https://github.com/zen-browser/desktop/issues)
> - [Zen's Custom Mods](https://github.com/zen-browser/theme-store)
> - [Zen's Homepage Website](https://github.com/zen-browser/www)
> - [This documentation Website](https://github.com/zen-browser/docs)
### Suggesting Features
![[discuss.png]]
We welcome suggestions for new features or improvements to existing ones. To suggest a feature, please start a new Github discussion in the Ideas category.
*Use the correct Github Repository based on the list above*
_Use the correct Github Repository based on the list above_
---

5
content/contribute/docs.md
View file

@ -4,7 +4,6 @@ draft: false
lastmod: 2024-08-26
---
This guide will help you get started with contributing to the documentation for Zen Browser. The documentation is crucial for helping users and developers understand and use the project effectively. We use Quartz v4 for generating the static documentation site, and we recommend using Obsidian as your Markdown editor for making contributions.
## Prerequisites
@ -14,7 +13,7 @@ Before you begin, ensure you have the following tools installed:
- [**Git**](https://git-scm.com/): Version control system to clone the repository and manage your code.
- [**Node.js**](https://nodejs.org/): Required for building the Quartz v4 site.
- [**npm**](https://www.npmjs.com/): Node package manager, which comes with Node.js.
- [**Obsidian**](https://obsidian.md/): A powerful Markdown editor recommended for editing and organizing documentation. *(Optional)*
- [**Obsidian**](https://obsidian.md/): A powerful Markdown editor recommended for editing and organizing documentation. _(Optional)_
## 1. Fork the Repository
@ -111,4 +110,4 @@ Your pull request will be reviewed by the maintainers, and you may be asked to m
---
Thank you for contributing to Zen Browser's documentation! Your contributions help users and developers understand and effectively use the project.
Thank you for contributing to Zen Browser's documentation! Your contributions help users and developers understand and effectively use the project.

10
content/contribute/translation.md
View file

@ -4,12 +4,10 @@ draft: false
lastmod: 2024-08-24
---
Thank you for your interest in contributing to the translations for Zen Browser! Ensuring that Zen Browser is accessible to users around the world is a key priority, and your contributions help make this possible. This guide will walk you through the process of getting started with translating Zen Browser using Crowdin.
>[!note]
>If you want to translate a language that is not currently available in the Crowdin project, please reach out to the developers on Discord. We’ll be happy to add it for you!
> [!note]
> If you want to translate a language that is not currently available in the Crowdin project, please reach out to the developers on Discord. We’ll be happy to add it for you!
## Prerequisites
@ -37,7 +35,7 @@ Once you have joined the project and selected your language, you can start trans
In addition to translating, you can also review translations made by others:
1. Go to your selected language.
1. Go to your selected language.
2. Review the translations and suggest improvements if necessary.
3. Approve translations that are correct and meet the quality standards.
@ -64,4 +62,4 @@ Crowdin allows you to track the progress of the translation project and stay upd
---
Thank you for helping to make Zen Browser accessible to a global audience! Your contributions are invaluable.
Thank you for helping to make Zen Browser accessible to a global audience! Your contributions are invaluable.

2
content/contribute/www.md
View file

@ -4,7 +4,6 @@ draft: false
lastmod: 2024-08-24
---
This guide will walk you through the steps required to set up and contribute to the development of Zen Browser's homepage. Whether you're fixing bugs, adding new features, or enhancing the design, this guide will help you get started.
## Prerequisites
@ -108,7 +107,6 @@ Your pull request will be reviewed by the maintainers, and you may be asked to m
- [[CONTRIBUTING| Contribution Guidelines]]
- [[CODE_OF_CONDUCT | Code of Conduct]]
---
Thank you for contributing to Zen Browser's homepage! Your contributions help make the project better for everyone.

36
content/faq.md
View file

@ -2,39 +2,45 @@
title: Frequently Asked Questions ❓
lastmod: 2025-01-10
---
Welcome to the Zen Browser FAQ section! Here, you'll find answers to common questions and helpful tips to enhance your experience with Zen Browser. If your question isn't covered here, feel free to explore our community forums [r/zen_browser](https://www.reddit.com/r/zen_browser) or reach out to the support team.
## How can I use horizontal tabs?
Zen Browser will not support horizontal tabs in the near future. The decision to focus on **Vertical Tabs** is a core design choice, with the entire Zen Browser experience built around this concept. This approach is intended to maximize screen space and improve navigation, making vertical tabs an essential part of Zen's philosophy.
## Will there be mobile version for Zen Browser?
At the moment, our team does not have the time or resources to develop Android or iOS versions of Zen Browser. Additionally, we believe that Zen’s unique features, particularly its design around vertical tabs, do not translate well to the mobile form factor. As such, we do not currently have plans to develop a mobile version of Zen Browser.
## Why can't Zen Browser play DRM-protected content?
> [!important] This only affects Microsoft Windows and MacOS
> [!question]- What is DRM?
> [Digital Rights Management](https://wikipedia.org/wiki/Digital_rights_management) (DRM) is a technology used to control how digital content, such as videos and music, can be accessed and used. DRM is commonly used by streaming services to protect copyrighted content. When you try to play DRM-protected content, the website verifies if the necessary DRM software is available on your browser. Most browsers use [**Widevine**](https://www.widevine.com), a DRM technology developed by Google, to facilitate this.
Zen Browser currently lacks DRM-support, because it does not have a Widevine license. Acquiring such a license requires the payment of large fees (at least $5,000). Acquiring this license is financially unresponsible for the developer of Zen. This means that DRM-protected media cannot be played in Zen Browser for the foreseeable future.
Zen Browser currently lacks DRM-support, because it does not have a Widevine license. Acquiring such a license requires the payment of large fees (at least $5,000). Acquiring this license is financially unresponsible for the developer of Zen. This means that DRM-protected media cannot be played in Zen Browser for the foreseeable future.
We have to also consider that in order to be able to apply for this license, Zen must be a part of a company with size at least as big as Mozilla or Brave.
Feel free to support the funding of a Widevine license for Zen on [Ko-Fi](https://ko-fi.com/zen_browser) or [Patreon](https://www.patreon.com/zen_browser)!
> [!question]- Which Services Are Affected?
>Due to the lack of DRM support, you will not be able to stream content from the following services in Zen Browser:
>- **HBO Max**
>- **Netflix**
>- **Spotify**
>- **Disney+**
>- **Amazon Prime Video**
>- **Apple Music**
>- **Google Play Movies & TV**
>- **And possible other services that use DRM not listed here**
> Due to the lack of DRM support, you will not be able to stream content from the following services in Zen Browser:
>
> - **HBO Max**
> - **Netflix**
> - **Spotify**
> - **Disney+**
> - **Amazon Prime Video**
> - **Apple Music**
> - **Google Play Movies & TV**
> - **And possible other services that use DRM not listed here**
> [!info] Alternative solutions
> * Use a browser that has a Widevine license, such as [**Mozilla Firefox**](https://www.mozilla.org/firefox/), when streaming DRM-protected content.
> * Use the native desktop app for the service you want to use
>
> - Use a browser that has a Widevine license, such as [**Mozilla Firefox**](https://www.mozilla.org/firefox/), when streaming DRM-protected content.
> - Use the native desktop app for the service you want to use
## How do I know Zen is safe?
@ -58,6 +64,7 @@ Your support helps the team maintain and enhance Zen Browser for everyone!
3. Change the view mode by pressing the `[|]` button in the top address bar
## How to switch tabs by scrolling?
You can enable this feature by changing a setting in the browser's configuration. Here's how:
1. Open the `about:config` page. This page contains advanced settings for the browser.
@ -68,7 +75,7 @@ Once this setting is enabled, you can hover your mouse over the tab bar and use
## Where do report problems and bugs?
>[!caution] New features are not bugs. Please see [Where do I recommend features?](#where-do-i-recommend-features) below
> [!caution] New features are not bugs. Please see [Where do I recommend features?](#where-do-i-recommend-features) below
If you want report an issue or a bug with the browser, you can do so on the browser's GitHub page. Before submitting your request, it's mandatory to check if the issue has already been reported. You can do this by searching through existing issues on the [GitHub issues page](https://github.com/zen-browser/desktop/issues).
@ -94,6 +101,7 @@ After signing in and selecting your preferences, your data will be synced across
## How do I use RTX Video Super Resolution?
To enable Zen Browser to use the feature
1. **Open 'about:config'**
2. **Search for 'gfx.webrender.dcomp-video-hw-overlay-win-force-enabled'**
3. **Double click the flag to toggle it to 'true'**
@ -104,8 +112,8 @@ Refer to [Nvidia's RTX Video FAQ](https://nvidia.custhelp.com/app/answers/detail
## Transparency bug
Some users encounter the bug where websites are partialy transparent, to resolve it follow bellow:
1. **Url `about:config`**
2. Search for `browser.tabs.allow_transparent_browser`
3. Set the flag to `false`
4. **Restart the browser**

17
content/guides/1password.md
View file

@ -4,13 +4,13 @@ draft: false
lastmod: 2024-10-27
---
This [[guides/index|guide]] is designed to help you integrate [1Password Desktop App](https://1password.com/downloads) with Zen Browser, for a more **straight forward workflow** when accessing your credentials using this password manager browser extension.
This [[guides/index|guide]] is designed to help you integrate [1Password Desktop App](https://1password.com/downloads) with Zen Browser, for a more **straight forward workflow** when accessing your credentials using this password manager browser extension.
> [!important]
> This guide only applies for **Linux** and **MacOS** users.
>
>
> **Windows** users can still use the Browser Extension without integration with the Desktop App
>
>
> See: [Adding another trusted browser - 1Password](https://support.1password.com/1password-browser-connection-security/#adding-another-trusted-browser)
1Password browser integrations follows a [list of well-known/trusted browser](https://support.1password.com/1password-browser-connection-security/), with this integration account information and encryption keys are transferred using this connection to allow the 1Password app and browser extension to share your vaults and lock state and allowing you to unlock your Browser Extension Vault with [bio-metric](https://en.wikipedia.org/wiki/Biometrics) data.
@ -19,17 +19,20 @@ Since Zen Browser is still under development and [under the usage threshold](htt
## Workarounds
That being said, there are workaround methods to add Zen Browser to this *Trusted Browsers* list for **Linux** and **MacOS**.
That being said, there are workaround methods to add Zen Browser to this _Trusted Browsers_ list for **Linux** and **MacOS**.
### Linux
You can create a *Custom Allowed Browsers* file that 1Password will use to allow Zen Browser -- or other non-officially supported browser-- to integrate with 1Password's desktop app.
You can create a _Custom Allowed Browsers_ file that 1Password will use to allow Zen Browser -- or other non-officially supported browser-- to integrate with 1Password's desktop app.
#### 1. Create 1Password's config directory
```bash
sudo mkdir /etc/1password
```
#### 2. Create the Custom Allowed Browsers file
```bash
sudo touch /etc/1password/custom_allowed_browsers
```
@ -41,14 +44,18 @@ echo "zen-bin" | sudo tee -a /etc/1password/custom_allowed_browsers
```
---
Special thanks to [u/xmansyx](https://www.reddit.com/user/xmansyx/) and [u/feelspeaceman](https://www.reddit.com/user/feelspeaceman/)
Sources:
- [1Password Integration fix (Linux) - Reddit](https://www.reddit.com/r/zen_browser/comments/1gcm33v/1password_integration_fix_linux/)
- [1Password Extension fix for other Browsers on Linux - edb tools!](https://edb.tools/posts/1password-extension-fix/)
---
### MacOS
In MacOS you can use the Graphical Interface of the Desktop app to add Zen Browser to the trusted browsers list.
#### 1. Go into the 1Password desktop app and open Settings.

61
content/guides/downloads.md
View file

@ -17,77 +17,68 @@ This [[guides/index|guide]] is designed to help you easily find and download the
- ### x86_64 💽
- [Installer 🚀](https://github.com/zen-browser/desktop/releases/latest/download/zen.installer.exe)
- [Installer 🚀](https://github.com/zen-browser/desktop/releases/latest/download/zen.installer.exe)
- ### arm64 💻
- [Installer 🚀](https://github.com/zen-browser/desktop/releases/latest/download/zen.installer-arm64.exe)
- [Installer 🚀](https://github.com/zen-browser/desktop/releases/latest/download/zen.installer-arm64.exe)
## Linux 🐧
- ### x86_64 💽
- [AppImage 🚀](https://github.com/zen-browser/desktop/releases/latest/download/zen-x86_64.AppImage)
- [Portable 📦 `tar.bz2`](https://github.com/zen-browser/desktop/releases/latest/download/zen.linux-x86_64.tar.bz2)
- [AppImage 🚀](https://github.com/zen-browser/desktop/releases/latest/download/zen-x86_64.AppImage)
- [Portable 📦 `tar.bz2`](https://github.com/zen-browser/desktop/releases/latest/download/zen.linux-x86_64.tar.bz2)
- ### aarch64 💻
- [AppImage 🚀](https://github.com/zen-browser/desktop/releases/latest/download/zen-aarch64.AppImage)
- [Portable 📦 `tar.bz2`](https://github.com/zen-browser/desktop/releases/latest/download/zen.linux-aarch64.tar.bz2)
- [AppImage 🚀](https://github.com/zen-browser/desktop/releases/latest/download/zen-aarch64.AppImage)
- [Portable 📦 `tar.bz2`](https://github.com/zen-browser/desktop/releases/latest/download/zen.linux-aarch64.tar.bz2)
- ### Package Managers
- [Arch User Repository 📂 `AUR`](https://aur.archlinux.org/packages/zen-browser-bin)
- [Pacstall `comunity`](https://pacstall.dev/packages/zen-browser-bin)
- [Flatpak 🌐](https://flathub.org/apps/io.github.zen_browser.zen)
```bash
flatpak install flathub app.zen_browser.zen
```
- [Arch User Repository 📂 `AUR`](https://aur.archlinux.org/packages/zen-browser-bin)
- [Pacstall `comunity`](https://pacstall.dev/packages/zen-browser-bin)
- [Flatpak 🌐](https://flathub.org/apps/io.github.zen_browser.zen)
```bash
flatpak install flathub app.zen_browser.zen
```
## MacOS 🍎
- ### aarch64 (M-series chips) 💻
- [DMG File 🗂️](https://github.com/zen-browser/desktop/releases/latest/download/zen.macos-aarch64.dmg)
- [DMG File 🗂️](https://github.com/zen-browser/desktop/releases/latest/download/zen.macos-aarch64.dmg)
- ### x86_64 (Intel chips) 💽
- [DMG File 🗂️](https://github.com/zen-browser/desktop/releases/latest/download/zen.macos-x86_64.dmg)
- [DMG File 🗂️](https://github.com/zen-browser/desktop/releases/latest/download/zen.macos-x86_64.dmg)
# Twilight
>[!caution] This is an automated daily build for testing purposes, so expect some bugs on this version.
> [!caution] This is an automated daily build for testing purposes, so expect some bugs on this version.
## Windows 🪟
- ### x86_64 💽
- [Installer 🚀](https://github.com/zen-browser/desktop/releases/download/twilight/zen.installer.exe)
- [Portable 📦 `zip`](https://github.com/zen-browser/desktop/releases/download/twilight/zen.win-x86_64.zip)
- [Installer 🚀](https://github.com/zen-browser/desktop/releases/download/twilight/zen.installer.exe)
- [Portable 📦 `zip`](https://github.com/zen-browser/desktop/releases/download/twilight/zen.win-x86_64.zip)
- ### arm64 💻
- [Installer 🚀](https://github.com/zen-browser/desktop/releases/download/twilight/zen.installer-arm64.exe)
- [Portable 📦 `zip`](https://github.com/zen-browser/desktop/releases/download/twilight/zen.win-arm64.zip)
- [Installer 🚀](https://github.com/zen-browser/desktop/releases/download/twilight/zen.installer-arm64.exe)
- [Portable 📦 `zip`](https://github.com/zen-browser/desktop/releases/download/twilight/zen.win-arm64.zip)
## Linux 🐧
- ### x86_64 💽
- [AppImage 🚀](https://github.com/zen-browser/desktop/releases/download/twilight/zen-x86_64.AppImage)
- [Portable 📦 `tar.bz2`](https://github.com/zen-browser/desktop/releases/download/twilight/zen.linux-x86_64.tar.bz2)
- [AppImage 🚀](https://github.com/zen-browser/desktop/releases/download/twilight/zen-x86_64.AppImage)
- [Portable 📦 `tar.bz2`](https://github.com/zen-browser/desktop/releases/download/twilight/zen.linux-x86_64.tar.bz2)
- ### aarch64 💻
- [AppImage 🚀](https://github.com/zen-browser/desktop/releases/download/twilight/zen-aarch64.AppImage)
- [Portable 📦 `tar.bz2`](https://github.com/zen-browser/desktop/releases/download/twilight/zen.linux-aarch64.tar.bz2)
- [AppImage 🚀](https://github.com/zen-browser/desktop/releases/download/twilight/zen-aarch64.AppImage)
- [Portable 📦 `tar.bz2`](https://github.com/zen-browser/desktop/releases/download/twilight/zen.linux-aarch64.tar.bz2)
## MacOS 🍎
- ### aarch64 (M-series chips) 💻
- [DMG File 🗂️](https://github.com/zen-browser/desktop/releases/download/twilight/zen.macos-aarch64.dmg)
- [DMG File 🗂️](https://github.com/zen-browser/desktop/releases/download/twilight/zen.macos-aarch64.dmg)
- ### x86_64 (Intel chips) 💽
- [DMG File 🗂️](https://github.com/zen-browser/desktop/releases/download/twilight/zen.macos-x86_64.dmg)
- [DMG File 🗂️](https://github.com/zen-browser/desktop/releases/download/twilight/zen.macos-x86_64.dmg)

2
content/guides/generic-optimized.md
View file

@ -15,4 +15,4 @@ In conclusion, having optimized builds is not really worth it, especially if we
P.S. all optimized builds will be automatically updated to generic starting from version `1.0.2-b.4`.
View original [here](https://github.com/zen-browser/desktop/wiki/Why-have-optimized-builds-been-removed%3F)
View original [here](https://github.com/zen-browser/desktop/wiki/Why-have-optimized-builds-been-removed%3F)

24
content/guides/live-editing.md
View file

@ -12,7 +12,7 @@ This [[guides/index|guide]] will help you customize the appearance of Zen Browse
3. Look for the **Application Basics** section.
4. Click on **Open Profile Folder**. This will open the folder where Zen Browser stores your user data.
>[!warning]
> [!warning]
> On the Flatpak version of Zen, the profile folder will be located at `~/.var/app/app.zen_browser.zen/.zen`.
## Step 2: Create the `chrome` Folder
@ -27,25 +27,25 @@ This [[guides/index|guide]] will help you customize the appearance of Zen Browse
2. Navigate to the **Style Editor** tab.
3. In the filter/search bar, type `userChrome` to locate the `userChrome.css` file you created earlier.
>[!warning] How do I enable the Browser Developer Tools?
>After Zen Browser version `1.0.0-a.31` the Browser Developer Tools is **disabled** by default for security.
>1. Open the `about:config` page. This page contains advanced settings for the browser.
>2. Search for `devtools.debugger.remote-enabled`
>3. Toggle the setting to `true` by double-clicking on it
> [!warning] How do I enable the Browser Developer Tools?
> After Zen Browser version `1.0.0-a.31` the Browser Developer Tools is **disabled** by default for security.
>
> 1. Open the `about:config` page. This page contains advanced settings for the browser.
> 2. Search for `devtools.debugger.remote-enabled`
> 3. Toggle the setting to `true` by double-clicking on it
## Step 4: Edit the `userChrome.css` File
1. The `userChrome.css` file should now be visible in the Style Editor.
2. You can start editing the file directly within the Style Editor.
- **Note:** You can use the **Inspect** button ![[inspect.png]] to hover over and select elements on the page. This allows you to learn about the `id`, `class`, or other attributes of elements, which you can then target in your `userChrome.css` file.
1. To apply your changes, save the file by clicking **Save** or by pressing `Ctrl + S`.
- **Note:** You can use the **Inspect** button ![[inspect.png]] to hover over and select elements on the page. This allows you to learn about the `id`, `class`, or other attributes of elements, which you can then target in your `userChrome.css` file.
3. To apply your changes, save the file by clicking **Save** or by pressing `Ctrl + S`.
> [!warning]
> If a style does not apply as expected, try adding the `!important` keyword at the end of the CSS rule. This forces the browser to apply the style regardless of any other existing styles.
> If a style does not apply as expected, try adding the `!important` keyword at the end of the CSS rule. This forces the browser to apply the style regardless of any other existing styles.
> [!tip]
> If you wish to edit pop-ups or menus that automatically hide, be sure to enable the `Disable Popup Auto-Hide` option from the *Browser Toolbox* settings menu ( ⋯ button )
> [!tip]
> If you wish to edit pop-ups or menus that automatically hide, be sure to enable the `Disable Popup Auto-Hide` option from the _Browser Toolbox_ settings menu ( ⋯ button )
Any changes you make to the `userChrome.css` file will be applied immediately to Zen Browser.
Use this file to customize various UI elements, such as colors, fonts, and the layout.

9
content/guides/manage-profiles.md
View file

@ -3,7 +3,7 @@ title: Managing Firefox Profiles
lastmod: 2024-08-23
---
This [[guides/index|guide]] will give you a comprehensive understanding of Firefox profiles, helping you manage them effectively even in the most challenging situations. By following this guide, you'll learn how to preserve key elements of your browsing experience, including bookmarks, history, passwords, and more.
This [[guides/index|guide]] will give you a comprehensive understanding of Firefox profiles, helping you manage them effectively even in the most challenging situations. By following this guide, you'll learn how to preserve key elements of your browsing experience, including bookmarks, history, passwords, and more.
## Goal
@ -21,7 +21,6 @@ This guide will help you:
### 1. Open Your Current Profile Folder
1. Go to `about:support` in Firefox.
2. Under the "Application Basics" section, click on "Open Folder" next to "Profile Folder."
@ -41,7 +40,7 @@ After turning off Firefox, copy the following files from your profile folder:
- **prefs.js**: Contains your `about:config` settings.
> [!NOTE] **Optional Files**
>
>
> - **storage folder**: If you want to keep add-on customizations (this may not work 100% of the time).
> - **chrome folder**: If you want to retain your interface customizations.
@ -56,11 +55,11 @@ After turning off Firefox, copy the following files from your profile folder:
7. Paste the files you copied earlier into the new profile folder.
> [!WARNING] **Incompatibility Error**
>
>
> If Firefox opens with an incompatibility error after pasting the files, go to the new profile folder and move the `compatibility.ini` file somewhere else.
### 4. Final Step: Set as Default Profile
After ensuring everything works correctly, go back to `about:profiles` and set the newly created profile as the default. This will make it your main profile moving forward.
After ensuring everything works correctly, go back to `about:profiles` and set the newly created profile as the default. This will make it your main profile moving forward.
By following these steps, you'll maintain a consistent and personalized browsing experience across different Firefox profiles.

19
content/index.md
View file

@ -3,14 +3,15 @@ title: Welcome to Zen Browser's Documentation
lastmod: 2024-09-11
---
Welcome to **Zen Browser's Documentation!** Here, you'll find everything you need to get the most out of your browsing experience. Dive in to explore how Zen can make your browsing more secure, private, and efficient.
Welcome to **Zen Browser's Documentation!** Here, you'll find everything you need to get the most out of your browsing experience. Dive in to explore how Zen can make your browsing more secure, private, and efficient.
## Index
* #### [[building|Building Zen Browser 📦]]
* #### [[user-manual/index|User Manual 📖]]
* #### [[guides/index|Guides 🛠️]]
* #### [[themes-store/index|Mods Registry 🎨]]
* #### [[faq | Frequently Asked Questions ❓]]
* #### [[benchmarks | Performance Benchmarks 📊]]
* #### [[contribute/index | Contribution Guides 🌟]]
* #### [[security|Security 🔐]]
- #### [[building|Building Zen Browser 📦]]
- #### [[user-manual/index|User Manual 📖]]
- #### [[guides/index|Guides 🛠️]]
- #### [[themes-store/index|Mods Registry 🎨]]
- #### [[faq | Frequently Asked Questions ❓]]
- #### [[benchmarks | Performance Benchmarks 📊]]
- #### [[contribute/index | Contribution Guides 🌟]]
- #### [[security|Security 🔐]]

11
content/security.md
View file

@ -5,9 +5,11 @@ aliases:
description: At Zen Browser, your online safety and privacy are our top priorities. We've implemented a range of security features to ensure you're protected while browsing.
lastmod: 2024-09-18
---
> [!important] Password, Cookies, and Cache Management
> [!important] Password, Cookies, and Cache Management
> All passwords, cookies, and cache in Zen Browser are **managed by Firefox**. This means your saved passwords are **automatically encrypted**, providing an extra layer of security to keep your login credentials safe. Cookies and cache are also handled according to Firefox's strict privacy policies, ensuring your data is stored securely and only accessible to you.
> For more information visit [Firefox Privacy and Security](https://support.mozilla.org/es/products/firefox/privacy-and-security)
## Adjusting Security Settings
Zen Browser lets you customize privacy and security settings to improve your browsing safety. If you want to adjust or change these settings:
@ -16,10 +18,12 @@ Zen Browser lets you customize privacy and security settings to improve your bro
2. On the sidebar, go to the `Privacy & Security` section.
---
## Security settings
> [!success] Latest Firefox Version
> Zen Browser is built on the **latest version of Firefox**, one of the most secure browsers available today. This means you benefit from all of Firefox's security patches and updates as soon as they are released, keeping you safe from known vulnerabilities.
### 1. OCSP Enabled
Zen Browser uses **OCSP (Online Certificate Status Protocol)** to check the validity of a website’s security certificate. This ensures that you only connect to safe websites with up-to-date and valid certificates, protecting you from malicious sites that may have expired or revoked certificates.
@ -31,16 +35,19 @@ Zen Browser uses **OCSP (Online Certificate Status Protocol)** to check the vali
> [!info] You can enable HTTPS-Only Mode in **all windows** or **private windows only**.
For more information visit [HTTPS-Only Mode in Firefox](https://support.mozilla.org/en-US/kb/https-only-prefs)
### 3. Deceptive Content and Dangerous Software Protection
Zen Browser helps protect you from **phishing, malware, and fraudulent websites**. It uses URL filters and real-time checks to block harmful content, making your browsing experience safer.
To learn more, visit [Block deceptive content and dangerous downloads in Firefox](https://support.mozilla.org/en-US/kb/block-deceptive-content-and-dangerous-downloads-firefox)
### 4. SSL – Treat Unsafe Negotiation as Broken by Default
Zen Browser treats insecure SSL connections (those that don't meet modern security standards) as broken by default. This means that if a **website is not properly secured**, Zen Browser will alert you and **block the unsafe connection**, preventing potential security risks.
---
## Privacy settings
### 1. Tracking Protection
@ -57,4 +64,4 @@ Zen Browser allows the users to enable DNS over HTTPS, which **sends your reques
---
These security features work behind the scenes to provide a safe and private browsing experience. With Zen Browser, you can browse with confidence knowing that your security is always a top priority.
These security features work behind the scenes to provide a safe and private browsing experience. With Zen Browser, you can browse with confidence knowing that your security is always a top priority.

31
content/themes-store/themes-marketplace-preferences.md
View file

@ -13,7 +13,6 @@ The `property` field is a string that should follow Firefox's preference naming
For example: `mod.mymod.background_color`
### Field: `label` - Label
The `label` field is the description that will be visible to users in the Zen Mods settings page.
@ -63,11 +62,10 @@ The `dropdown` type allows to select a single choice on multiple options.
}
```
#### Type: `string`
#### Type: `string`
The `string` type is a text input that allows to insert valid css values without being a selection.
```json title="String Example"
{
"property": "mod.mymod.tab_padding",
@ -76,7 +74,6 @@ The `string` type is a text input that allows to insert valid css values without
}
```
### Field: `options` - Options (only for `type`: `dropdown`)
The `options` field is an array of option objects, only available for the `dropdown` type. This field must be an array containing one or more option objects.
@ -96,13 +93,13 @@ The `options` field is an array of option objects, only available for the `dropd
Each option object defines a possible value for the dropdown menu. It contains two fields: `label` and `value`.
* The `label` is the description that will be displayed in the dropdown menu. This field accepts a string and allows white space.
* The `value` field contains the value that will be assigned as a CSS property. Only `string` or `int` values are valid. Strings may not contain white space or special characters.
- The `label` is the description that will be displayed in the dropdown menu. This field accepts a string and allows white space.
- The `value` field contains the value that will be assigned as a CSS property. Only `string` or `int` values are valid. Strings may not contain white space or special characters.
```json title="Example"
{
"label": "Green",
"value": "green" // valid string
"label": "Green",
"value": "green" // valid string
}
```
@ -131,6 +128,7 @@ Some CSS modifications may not function properly on all operating systems. You c
This field accepts an array of the following values: `macos`, `linux` or/and `windows`.
For example:
```json title="Disabled on MacOS" {2}
{
"disabledOn": ["macos"] // disables the preference for MacOS
@ -198,6 +196,7 @@ Below is a full example of what a `preferences.json` file might look like with m
```
In this example:
- The `preferences.json` file contains a list of three preference objects.
- Each object defines a `property`, `label`, and `type`.
- Optionally, each object defines either a `defaultValue`, `disabledOn` or `placeholder`.
@ -237,15 +236,14 @@ You can use the following CSS to change the background color when the dark mode
```
You can also have negative conditions
```css {1}
@media not (-moz-bool-pref: "mod.mymod.enable_dark_mode")
```
```css {1}
@media not (-moz-bool-pref: "mod.mymod.enable_dark_mode");
```
### Dropdown Preferences
> [!attention]
> `property` fields defined in `preferences.json` using the `"dropdown"` type will have one key difference when used in your mod’s CSS: **dots (`.`) in the `property` name are replaced with hyphens (`-`)**.
> [!attention] > `property` fields defined in `preferences.json` using the `"dropdown"` type will have one key difference when used in your mod’s CSS: **dots (`.`) in the `property` name are replaced with hyphens (`-`)**.
>
> E.g. `mod.mymod.background_color` becomes `mod-mymod-background_color` in the CSS file.
> This transformation ensures that the property can be used as an attribute selector or inside a media query.
@ -289,6 +287,7 @@ body:has(#mod-mymod[mod-mymod-background_color="blue"]) {
```
In this example:
- The background color and text color change based on the value selected in the `background_color` dropdown.
- The selector `body:has(#mod-mymod[background_color="value"]){:css}` checks the `background_color` attribute and applies the relevant styles based on the selected option.
@ -348,6 +347,7 @@ body:has(#mod-mymod[mod-mymod-background_color="blue"]) {
```
This allows users to:
- Toggle dark mode on/off using the checkbox.
- Select a background color from the dropdown, which dynamically changes the background and text colors based on the user's choice.
@ -357,8 +357,7 @@ This allows users to:
String preferences can be detected in your CSS using the `var(--property)` operator. The preference property is saved at `:root` level.
> [!attention]
> `property` fields defined in `preferences.json` using the `"string"` type will have one key difference when used in your mod’s CSS: **dots (`.`) in the `property` name are replaced with hyphens (`-`)**.
> [!attention] > `property` fields defined in `preferences.json` using the `"string"` type will have one key difference when used in your mod’s CSS: **dots (`.`) in the `property` name are replaced with hyphens (`-`)**.
>
> E.g. `mod.mymod.background_color` becomes `mod-mymod-background_color` in the CSS file.
> This transformation ensures that the property can be used as an attribute selector or inside a media query.
@ -377,6 +376,6 @@ You can use the following CSS to change the background color when the dark mode
```css {2}
.myClass {
background-color: var(--mod-mymod-background_color)
background-color: var(--mod-mymod-background_color);
}
```

35
content/themes-store/themes-marketplace-submission-guidelines.md
View file

@ -6,28 +6,31 @@ lastmod: 2025-02-07
If you are a [mod developer] and would like to submit your mod, please follow these guidelines:
1. **Mod requirements**:
- Your mod must be compatible with Zen Browser.
- Your mod must be open-source.
- Your mod must not contain any malicious code.
- Your mod must not violate any copyright laws.
- Your mod must be compatible with Zen Browser.
- Your mod must be open-source.
- Your mod must not contain any malicious code.
- Your mod must not violate any copyright laws.
2. **Mod Validation**:
- Your mod's name must be unique and less than `25` characters.
- Your mod's description must be less than `100` characters.
- Your mod's screenshot must be a `PNG` with a size of `600x400` (it can be resized after upload).
- Your mod must contain a valid `README` describing the mod and how to use it.
- If your mod has any preferences values, they must be set in the `preferences` text area as a `JSON` object.
- See how preferences work [here](themes-store/themes-marketplace-preferences.md).
- Your mod's name must be unique and less than `25` characters.
- Your mod's description must be less than `100` characters.
- Your mod's screenshot must be a `PNG` with a size of `600x400` (it can be resized after upload).
- Your mod must contain a valid `README` describing the mod and how to use it.
- If your mod has any preferences values, they must be set in the `preferences` text area as a `JSON` object.
- See how preferences work [here](themes-store/themes-marketplace-preferences.md).
3. **Mod Submission**:
- To submit your mod, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new?assignees=&labels=new-theme&projects=&template=create-theme.yml&title=%5Bcreate-theme%5D%3A+)
- Fill out the template with the required information.
- Once you have submitted your mod, it will be analyzed by a bot and a pull request will be created.
- If your mod is approved, it will be added to the Mods Registry.
- To submit your mod, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new?assignees=&labels=new-theme&projects=&template=create-theme.yml&title=%5Bcreate-theme%5D%3A+)
- Fill out the template with the required information.
- Once you have submitted your mod, it will be analyzed by a bot and a pull request will be created.
- If your mod is approved, it will be added to the Mods Registry.
4. **Mod Update**:
- If you would like to update your mod, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new)
- Please explain the changes you have made.
- If you would like to update your mod, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new)
- Please explain the changes you have made.
> [!info]
> Mods are automatically updated and generated by the bot. If your mod is not approved, you will receive a message with the reason why it was not approved.

2
content/user-manual/index.md
View file

@ -15,4 +15,4 @@ Welcome to the Zen Browser User Manual! This guide is designed to provide you wi
Thank you for using Zen Browser, and happy browsing!
# Manuals
# Manuals

3
content/user-manual/profiles/index.md
View file

@ -14,6 +14,3 @@ Switching profiles gives you a “fresh” browsing instance each time, letting
> [!note]
> If you'd like separate environments inside a single browser instance, try **[[Workspaces + Containers]]** for a flexible, organized setup within the same profile.

9
content/user-manual/urlbar/index.md
View file

@ -15,11 +15,10 @@ aliases:
Zen Browser’s **URL bar** is a powerful tool that helps you navigate the web quickly and efficiently. There's no need to open a new tab or window to search the web—simply type your query into the URL bar and hit Enter to search. The URL bar also supports direct navigation to websites, so you can type a URL and press Enter to visit the site directly.
* Can be disabled in settings or `about:config` (`zen.urlbar.replace-newtab`)
- Can be disabled in settings or `about:config` (`zen.urlbar.replace-newtab`)
### How does it work?
* When trying to open a new tab, the search bar will appear. This allows you to navigate faster and more efficiently by being able to type out the address or getting auto-completed without having a change in the view.
* If the newtab urlbar is closed but you've typed something. The text is remembered unless the URL or tab has been changed.
* Otherwise, the functionality is basically the same as before, only when focusing the urlbar either by clicking on with the shortcut
- When trying to open a new tab, the search bar will appear. This allows you to navigate faster and more efficiently by being able to type out the address or getting auto-completed without having a change in the view.
- If the newtab urlbar is closed but you've typed something. The text is remembered unless the URL or tab has been changed.
- Otherwise, the functionality is basically the same as before, only when focusing the urlbar either by clicking on with the shortcut

3
content/user-manual/webpanel/index.md
View file

@ -11,6 +11,3 @@ aliases:
The **Zen Web Panel** brings your favorite web apps—like chats, notes, or to-do lists—right into your browser window for quick, side-by-side multitasking. Instead of switching tabs, you can keep essentials within reach, making it easy to reference or interact without losing focus on your main task.
With options to float or pin these panels alongside your browsing tabs, the Sidebar is perfect for keeping tools like messaging or music accessible. Planned upgrades will even add notification badges for real-time updates, creating a streamlined and productive workspace within Zen.

182
package-lock.json generated
View file

@ -41,6 +41,7 @@
"rehype-citation": "^2.2.1",
"rehype-katex": "^7.0.1",
"rehype-mathjax": "^6.0.0",
"rehype-pretty-code": "^0.14.0",
"rehype-raw": "^7.0.0",
"rehype-slug": "^6.0.0",
"remark": "^15.0.1",
@ -1361,6 +1362,82 @@
"node": ">=0.10"
}
},
"node_modules/@shikijs/core": {
"version": "1.29.2",
"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.29.2.tgz",
"integrity": "sha512-vju0lY9r27jJfOY4Z7+Rt/nIOjzJpZ3y+nYpqtUZInVoXQ/TJZcfGnNOGnKjFdVZb8qexiCuSlZRKcGfhhTTZQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@shikijs/engine-javascript": "1.29.2",
"@shikijs/engine-oniguruma": "1.29.2",
"@shikijs/types": "1.29.2",
"@shikijs/vscode-textmate": "^10.0.1",
"@types/hast": "^3.0.4",
"hast-util-to-html": "^9.0.4"
}
},
"node_modules/@shikijs/engine-javascript": {
"version": "1.29.2",
"resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.29.2.tgz",
"integrity": "sha512-iNEZv4IrLYPv64Q6k7EPpOCE/nuvGiKl7zxdq0WFuRPF5PAE9PRo2JGq/d8crLusM59BRemJ4eOqrFrC4wiQ+A==",
"license": "MIT",
"peer": true,
"dependencies": {
"@shikijs/types": "1.29.2",
"@shikijs/vscode-textmate": "^10.0.1",
"oniguruma-to-es": "^2.2.0"
}
},
"node_modules/@shikijs/engine-oniguruma": {
"version": "1.29.2",
"resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.29.2.tgz",
"integrity": "sha512-7iiOx3SG8+g1MnlzZVDYiaeHe7Ez2Kf2HrJzdmGwkRisT7r4rak0e655AcM/tF9JG/kg5fMNYlLLKglbN7gBqA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@shikijs/types": "1.29.2",
"@shikijs/vscode-textmate": "^10.0.1"
}
},
"node_modules/@shikijs/langs": {
"version": "1.29.2",
"resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-1.29.2.tgz",
"integrity": "sha512-FIBA7N3LZ+223U7cJDUYd5shmciFQlYkFXlkKVaHsCPgfVLiO+e12FmQE6Tf9vuyEsFe3dIl8qGWKXgEHL9wmQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@shikijs/types": "1.29.2"
}
},
"node_modules/@shikijs/themes": {
"version": "1.29.2",
"resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-1.29.2.tgz",
"integrity": "sha512-i9TNZlsq4uoyqSbluIcZkmPL9Bfi3djVxRnofUHwvx/h6SRW3cwgBC5SML7vsDcWyukY0eCzVN980rqP6qNl9g==",
"license": "MIT",
"peer": true,
"dependencies": {
"@shikijs/types": "1.29.2"
}
},
"node_modules/@shikijs/types": {
"version": "1.29.2",
"resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.29.2.tgz",
"integrity": "sha512-VJjK0eIijTZf0QSTODEXCqinjBn0joAHQ+aPSBzrv4O2d/QSbsMw+ZeSRx03kV34Hy7NzUvV/7NqfYGRLrASmw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@shikijs/vscode-textmate": "^10.0.1",
"@types/hast": "^3.0.4"
}
},
"node_modules/@shikijs/vscode-textmate": {
"version": "10.0.2",
"resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz",
"integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
"license": "MIT",
"peer": true
},
"node_modules/@sindresorhus/merge-streams": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
@ -2846,6 +2923,13 @@
"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
"license": "MIT"
},
"node_modules/emoji-regex-xs": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/emoji-regex-xs/-/emoji-regex-xs-1.0.0.tgz",
"integrity": "sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==",
"license": "MIT",
"peer": true
},
"node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@ -5368,6 +5452,18 @@
}
}
},
"node_modules/oniguruma-to-es": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-2.3.0.tgz",
"integrity": "sha512-bwALDxriqfKGfUufKGGepCzu9x7nJQuoRoAFp4AnwehhC2crqrDIAP/uN2qdlsAvSMpeRC3+Yzhqc7hLmle5+g==",
"license": "MIT",
"peer": true,
"dependencies": {
"emoji-regex-xs": "^1.0.0",
"regex": "^5.1.1",
"regex-recursion": "^5.1.1"
}
},
"node_modules/package-json-from-dist": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
@ -5417,6 +5513,12 @@
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/parse-numeric-range": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz",
"integrity": "sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==",
"license": "ISC"
},
"node_modules/parse5": {
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
@ -5652,6 +5754,34 @@
"integrity": "sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==",
"license": "MIT"
},
"node_modules/regex": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/regex/-/regex-5.1.1.tgz",
"integrity": "sha512-dN5I359AVGPnwzJm2jN1k0W9LPZ+ePvoOeVMMfqIMFz53sSwXkxaJoxr50ptnsC771lK95BnTrVSZxq0b9yCGw==",
"license": "MIT",
"peer": true,
"dependencies": {
"regex-utilities": "^2.3.0"
}
},
"node_modules/regex-recursion": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-5.1.1.tgz",
"integrity": "sha512-ae7SBCbzVNrIjgSbh7wMznPcQel1DNlDtzensnFxpiNpXt1U2ju/bHugH422r+4LAVS1FpW1YCwilmnNsjum9w==",
"license": "MIT",
"peer": true,
"dependencies": {
"regex": "^5.1.1",
"regex-utilities": "^2.3.0"
}
},
"node_modules/regex-utilities": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz",
"integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==",
"license": "MIT",
"peer": true
},
"node_modules/rehype-autolink-headings": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/rehype-autolink-headings/-/rehype-autolink-headings-7.1.0.tgz",
@ -5731,6 +5861,41 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/rehype-parse": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/rehype-parse/-/rehype-parse-9.0.1.tgz",
"integrity": "sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==",
"license": "MIT",
"dependencies": {
"@types/hast": "^3.0.0",
"hast-util-from-html": "^2.0.0",
"unified": "^11.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/rehype-pretty-code": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.14.0.tgz",
"integrity": "sha512-hBeKF/Wkkf3zyUS8lal9RCUuhypDWLQc+h9UrP9Pav25FUm/AQAVh4m5gdvJxh4Oz+U+xKvdsV01p1LdvsZTiQ==",
"license": "MIT",
"dependencies": {
"@types/hast": "^3.0.4",
"hast-util-to-string": "^3.0.0",
"parse-numeric-range": "^1.3.0",
"rehype-parse": "^9.0.0",
"unified": "^11.0.5",
"unist-util-visit": "^5.0.0"
},
"engines": {
"node": ">=18"
},
"peerDependencies": {
"shiki": "^1.3.0"
}
},
"node_modules/rehype-raw": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
@ -6228,6 +6393,23 @@
"node": ">=8"
}
},
"node_modules/shiki": {
"version": "1.29.2",
"resolved": "https://registry.npmjs.org/shiki/-/shiki-1.29.2.tgz",
"integrity": "sha512-njXuliz/cP+67jU2hukkxCNuH1yUi4QfdZZY+sMr5PPrIyXSu5iTb/qYC4BiWWB0vZ+7TbdvYUCeL23zpwCfbg==",
"license": "MIT",
"peer": true,
"dependencies": {
"@shikijs/core": "1.29.2",
"@shikijs/engine-javascript": "1.29.2",
"@shikijs/engine-oniguruma": "1.29.2",
"@shikijs/langs": "1.29.2",
"@shikijs/themes": "1.29.2",
"@shikijs/types": "1.29.2",
"@shikijs/vscode-textmate": "^10.0.1",
"@types/hast": "^3.0.4"
}
},
"node_modules/signal-exit": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",

1
package.json
View file

@ -67,6 +67,7 @@
"rehype-citation": "^2.2.1",
"rehype-katex": "^7.0.1",
"rehype-mathjax": "^6.0.0",
"rehype-pretty-code": "^0.14.0",
"rehype-raw": "^7.0.0",
"rehype-slug": "^6.0.0",
"remark": "^15.0.1",

18
quartz.layout.ts
View file

@ -23,13 +23,15 @@ export const defaultContentPageLayout: PageLayout = {
Component.ArticleTitle(),
Component.ContentMeta(),
Component.TagList(),
],
],
left: [
Component.PageTitle(),
Component.MobileOnly(Component.Spacer()),
Component.MobileOnly(ExtraComponent.OverlayExplorer(
{filterFn: (node) => (node.name !== "tags" && node.name !== "License")},
)),
Component.MobileOnly(
ExtraComponent.OverlayExplorer({
filterFn: (node) => node.name !== "tags" && node.name !== "License",
}),
),
Component.Search(),
Component.Darkmode(),
Component.DesktopOnly(Component.Explorer()),
@ -47,9 +49,11 @@ export const defaultListPageLayout: PageLayout = {
left: [
Component.PageTitle(),
Component.MobileOnly(Component.Spacer()),
Component.MobileOnly(ExtraComponent.OverlayExplorer(
{filterFn: (node) => (node.name !== "tags" && node.name !== "License")},
)),
Component.MobileOnly(
ExtraComponent.OverlayExplorer({
filterFn: (node) => node.name !== "tags" && node.name !== "License",
}),
),
Component.Search(),
Component.Darkmode(),
Component.DesktopOnly(Component.Explorer()),

62
quartz/extra/OverlayExplorer.tsx
View file

@ -1,5 +1,9 @@
// Nothing yet
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../components/types"
import {
QuartzComponent,
QuartzComponentConstructor,
QuartzComponentProps,
} from "../components/types"
import overlayexplorerStyle from "./styles/overlayexplorer.scss"
// @ts-ignore
@ -49,8 +53,7 @@ type OlExplorerNodeProps = {
fullPath?: string
}
function OverlayExplorerNode({node, opts, fullPath, fileData}: OlExplorerNodeProps) {
function OverlayExplorerNode({ node, opts, fullPath, fileData }: OlExplorerNodeProps) {
// Calculate current folderPath
const folderPath = node.name !== "" ? joinSegments(fullPath ?? "", node.name) : ""
const href = resolveRelative(fileData.slug!, folderPath as SimpleSlug) + "/"
@ -59,9 +62,7 @@ function OverlayExplorerNode({node, opts, fullPath, fileData}: OlExplorerNodePro
<>
{node.file ? (
<li key={node.file.slug}>
<a href={resolveRelative(fileData.slug!, node.file.slug!)}>
{node.displayName}
</a>
<a href={resolveRelative(fileData.slug!, node.file.slug!)}>{node.displayName}</a>
</li>
) : (
<li>
@ -87,33 +88,36 @@ function OverlayExplorerNode({node, opts, fullPath, fileData}: OlExplorerNodePro
</a>
) : (
<>
<button class="ol-folder-button">
<span class="ol-folder-title">{node.displayName}</span>
</button>
{opts.folderClickBehavior === "mixed" && (
<a href={href}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="12"
viewBox="0 4 21 15"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="0 9 18 9"></polyline>
<polyline points="0 15 18 15"></polyline>
<polyline points="15 6 21 12 15 18"></polyline>
</svg>
</a>
)}
<button class="ol-folder-button">
<span class="ol-folder-title">{node.displayName}</span>
</button>
{opts.folderClickBehavior === "mixed" && (
<a href={href}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="12"
viewBox="0 4 21 15"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="0 9 18 9"></polyline>
<polyline points="0 15 18 15"></polyline>
<polyline points="15 6 21 12 15 18"></polyline>
</svg>
</a>
)}
</>
)}
</div>
)}
<div data-ol-children-for={folderPath} class={`ol-folder-outer ${(node.depth === 0 || opts.folderDefaultState === "open") && "open"}`}>
<div
data-ol-children-for={folderPath}
class={`ol-folder-outer ${(node.depth === 0 || opts.folderDefaultState === "open") && "open"}`}
>
<ul
style={{
paddingLeft: node.name !== "" ? "1.4rem" : "0",

4
quartz/extra/index.ts
View file

@ -1,5 +1,3 @@
import OverlayExplorer from "./OverlayExplorer"
export {
OverlayExplorer,
}
export { OverlayExplorer }

21
quartz/extra/scripts/overlayexplorer.inline.ts
View file

@ -1,4 +1,4 @@
// Nothing yet
// Nothing yet
import { registerEscapeHandler } from "../../components/scripts/util"
@ -6,18 +6,16 @@ type MaybeHTMLElement = HTMLElement | undefined
function setFolder(folderPath: string, open: boolean) {
const childrenList = document.querySelector(
`[data-ol-children-for='${folderPath}']`
`[data-ol-children-for='${folderPath}']`,
) as MaybeHTMLElement
if (!childrenList) return
const folderEntry = document.querySelector(
`[data-ol-selector-for='${folderPath}']`
`[data-ol-selector-for='${folderPath}']`,
) as MaybeHTMLElement
if (!folderEntry) return
const collapseIcon = folderEntry.getElementsByTagName(
"svg"
)[0] as MaybeHTMLElement
const collapseIcon = folderEntry.getElementsByTagName("svg")[0] as MaybeHTMLElement
if (!collapseIcon) return
if (open) {
@ -61,13 +59,11 @@ function setupOverlayExplorer() {
const folderPath = target.parentNode.getAttribute("data-ol-selector-for")
const childrenList = document.querySelector(
`[data-ol-children-for='${folderPath}']`
`[data-ol-children-for='${folderPath}']`,
) as MaybeHTMLElement
if (!childrenList) return
const collapseIcon = target.parentNode.getElementsByTagName(
"svg"
)[0] as MaybeHTMLElement
const collapseIcon = target.parentNode.getElementsByTagName("svg")[0] as MaybeHTMLElement
if (!collapseIcon) return
childrenList.classList.toggle("open")
@ -75,10 +71,7 @@ function setupOverlayExplorer() {
if (useSaveState) {
folderOpenMap.set(folderPath, collapseIcon.classList.contains("open"))
localStorage.setItem(
"olFileTree",
JSON.stringify(Array.from(folderOpenMap.entries()))
)
localStorage.setItem("olFileTree", JSON.stringify(Array.from(folderOpenMap.entries())))
}
}

3
quartz/extra/styles/overlayexplorer.scss
View file

@ -101,7 +101,7 @@ svg {
}
}
& >#overlay-explorer-container {
& > #overlay-explorer-container {
position: fixed;
contain: layout;
z-index: 999;
@ -159,6 +159,5 @@ svg {
}
}
}
}
}

2
quartz/static/status.json
View file

@ -1 +1 @@
{ "ZenBot": 200 }
{ "ZenBot": 200 }

1
tsconfig.tsbuildinfo Normal file
View file

File diff suppressed because one or more lines are too long