📝 Fix up docs

docs/content/getting-started/_index.md

@@ -0,0 +1,5 @@
++++
+title = "Getting Started"
+weight = 1
+sort_by = "weight"
++++

docs/content/getting-started/overview.md

@@ -0,0 +1,77 @@
++++
+title = "Overview"
+weight = 5
++++
+
+## Getting started with melon
+
+### What is melon
+
+Melon is a build tool and documentation for creating firefox-based browsers. Its goal is to simplify the process of creating web browsers to encourage competition and development within the space.
+
+### Getting help
+
+If you are having problems with following these instructions, or with melon in general, please contact us. You can [create a discussion on github](https://github.com/dothq/melon/discussions/new), ping @trickypr on the [Dot HQ discord](https://dothq.link/dsc), or [join our Matrix chat](https://dothq.link/matrix).
+
+### System requirements
+
+- **OS**: Linux, Windows, MacOS (We only have active contributors on linux, so other platforms might be a touch buggy)
+- **Melon dependencies**: NodeJS and npm
+- **Browser dependencies**: TODO: find out what firefox's build dependencies are
+
+### Getting started
+
+The first thing you are going to need to do is to install melon. As it is a nodejs program it can be installed through npm or yarn.
+
+```sh
+npm install -g melon-build
+# or
+yarn global add melon-build
+
+# Note: Linux and mac users may have to run the above command with sudo
+```
+
+Now create a git repo and clone it to your local machine. Then run `melon setup-project` inside of that repo. This will ask you a variety of questions in relation to your project setup. Firstly, the release of the browser you want to bind to.
+
+- `Firefox nightly`: Updates every 12 hours, making it almost impossible to keep up to date **(not recommended)**
+- `Firefox beta`: Updates every 4 weeks. It will have unresolved bugs **(not recommended)**
+- `Firefox developer edition`: Tracks firefox beta **(not recommended)**
+- `Firefox stable`: Releases around every 4 weeks, however has most of the bugs from beta fixed
+- `Firefox extended support release (newer)`: The latest extended support release. Releases around once every 8 stable cycles (mozilla isn't clear on this). Receives regular small security patches and bug fixes, but no large breaking changes (e.g. [proton](https://www.omgubuntu.co.uk/2021/02/try-firefox-proton-redesign-ubuntu)) between releases.
+- `Firefox extended support release (newer)`: The oldest supported extended support release. Maximum security and stability, but will lose support sooner than the newer extended support release.
+
+Dot browser currently uses the stable releases, and keeping up to date can be a struggle with a small development team.
+
+Then next is the version of the browser you want to use. By default melon will populate this with the latest version available, which we recommend using.
+
+Next it will ask for the name of your browser. Avoid references to firefox or other mozilla brands if you can.
+
+Vendor is the company (or solo developer) who is creating the browser.
+
+The appid follows reverse dns naming conventions. For example, DotHQ owns the domain `dothq.co`, so our browser is `co.dothq.browser`. If you do not have a domain, you can use your username / psudomim as the appid, e.g. `trickypr.watermelon`.
+
+Next you need to chose a starting template for your browser. You can go with userchrome, where you apply css changes to firefox or custom html, where you have to write everything (tabs, navigation, search boxes) yourself. We generally recommend userchrome for new users, as it has the lowest learning curve. Additionally, you can chose to use no template.
+
+Now you have created the directory structure for your project, you can build it for the first time. First, ask melon to download the firefox source.
+
+```sh
+melon download
+```
+
+After the source code has been downloaded, the changes to firefox described in the source code must be applied.
+
+```sh
+melon import
+```
+
+Finally, you can start building the firefox source code. This takes around an hour and a half on my computer, but the binary output will be cached, making later builds faster
+
+```sh
+melon build
+```
+
+Now you can finally start the browser!
+
+```sh
+melon run
+```

docs/content/getting-started/userchrome.md

@@ -0,0 +1,73 @@
++++
+title = "Userchrome"
+weight = 10
++++
+
+This page will explain the process for applying custom css (or userchrome) to your new browser. I expect you to have already setup melon as described in the overview and have something that looks like the following on your screen.
+
+![Firefox build without branding](https://cdn.statically.io/img/dothq.github.io/f=auto/melon/images/userchrome/css-basic.png)
+
+The firefox window shown above is constructed from (x)html, styled with css and made dynamic with javascript. This means that the entire browser can be styled with custom css, called userchrome.
+
+If you selected the userchrome option when setting up the project, melon will have already created the theme files for you. `src/browser/themes/custom/shared/shared.inc.css` will be included on all platforms, whilst platform specific styles will be included from similar files in `src/browser/themes/custom`.
+
+Additionally, firefox has an equivalent to "inspect element", but for the browser. Click on the hamburger menu, select "More tools", then "Browser toolbox" to open it.
+
+![Browser toolbox](https://cdn.statically.io/img/dothq.github.io/f=auto/melon/images/userchrome/browser-toolbox.png)
+
+## A touch of design
+
+This tutorial will attempt to replicate the design of [SimpleFox by Miguel R. Ávila](https://github.com/migueravila/SimpleFox), without copying its code. I would recommend creating your own visual identity for your browser.
+
+## Squaring the tabs
+
+Firefox's proton made the tabs hover, with mixed reception. Let's reverse that.
+
+Using the select tool (top left of the browser toolbox) select the active tab and look for what element provides the background. In this case it is the `.tab-background` element.
+
+You can scroll down to find the code where the border radius is set. In firefox 91, this is:
+
+```css
+.tab-background {
+  border-radius: var(--tab-border-radius);
+  margin-block: var(--tab-block-margin);
+}
+```
+
+Firefox uses css variables for a lot of its properties, meaning we can make the tabs square by setting the border radius to 0. Here, the margin, which makes the tabs "float is set", so setting it to zero will cause them to stop floating. This can be done by adding the following line to `src/browser/themes/custom/shared/shared.inc.css`:
+
+```css
+:root {
+  --tab-border-radius: 0 !important;
+  --tab-block-margin: 0 !important;
+}
+```
+
+Rebuilding the browser, the tabs are now slightly closer to how we want them.
+
+![Squared tabs](https://cdn.statically.io/img/dothq.github.io/f=auto/melon/images/userchrome/css-square-tabs.png)
+
+There is this weird padding to the left of the active tab. This is caused by the following css:
+
+```css
+.tabbrowser-tab {
+  min-height: var(--tab-min-height);
+  padding-inline: 2px !important;
+}
+```
+
+As mozilla are using `!important` here, we have to use [css priority](https://marksheet.io/css-priority.html) to override it, rather than simply creating our own style with `!important`.
+
+```css
+#tabbrowser-arrowscrollbox .tabbrowser-tab {
+  padding-inline: 0 !important;
+}
+```
+
+Now, I want to remove the "Nightly" pill in the search bar, along with the background of it. Using the browser toolbox, we can figure out that we have to hide `#identity-icon-box`, remove the border on `#urlbar-background` and set `--toolbar-field-background-color` to the value of `--toolbar-bgcolor`.
+
+![Final browser](https://cdn.statically.io/img/dothq.github.io/f=auto/melon/images/userchrome/css-final.png)
+
+I encourage you to experiment and customize your browser to fit what you want your browser to be.
+
+The source code for this tutorial can be found [here](https://github.com/trickypr/watermelon)