Pre-publication pass

Adding entry about transcripts
Adding entry about background picture
Adding many missing screenshots

content/tutorials/getting-started/adding-about/index.md

@@ -0,0 +1,133 @@
++++
+title = 'Adding an About page'
+show_toc = true
+weight = 40
++++
+
+For the finishing touch, let's add an "About" page to talk a bit about your webcomic.
+
+Once again, this will be a page under the `content/` folder.
+
+<!--more-->
+
+
+## What is and is not a *comic* page
+
+Hugo knows the type of a page by looking at the *first* folder after `content/`.
+For example, `content/comic/E01P01/` is a `comic` page.
+
+The type can be anything, so `content/animal/insect/ant/` would be of type `animal`.
+But Silicate doesn't not know what to do with that type, so it will a "normal" or "default" page.
+
+So, simply put: anything under `content/comic/` will be a comic page, and everything
+*outside* will be a "normal" page.
+
+
+## Creating the About page
+
+Here's the twist: since we don't care about type for the "about" page, we don't
+need a folder.
+
+Just like `index.md`, create a `content/about.md` text file.
+
+Then, you just need to add a front matter and some content! In the case of the Pepper & Carrot demo:
+
+```
++++
+title = 'About'
++++
+
+### Silicate Pepper & Carrot demo
+
+This website is a demo for Silicate using [Pepper & Carrot webcomic](https://www.peppercarrot.com/)
+comic pages as an example.
+
+### Browse the source
+
+You can see the source used to create this website here :
+<https://silicate.aribaud.net/demos-sources/pepper-carrot>
+
+### Check out Silicate
+
+You can learn more about Silicate on its main website:
+<https://silicate.aribaud.net/>
+```
+
+Now, your website's files should look like this:
+
+```
+my_webcomic/
+    hugo.toml
+    content/
+        about.md
+        comic/
+            _index.md
+            E01P01/
+                index.md
+                transcript.md
+                strips/
+                    E01P01.jpg
+```
+
+Now, you can navigate to `https://localhost:1313/about/` and you should see the about page:
+
+![About page](about_page.jpg)
+
+Unlike the comic pages, we have no folder with a `index.md` file, directly a `.md` file because we
+need no other resources. This is what Hugo calls a "regular page", as opposed to a "page bundle" like before.
+
+## Adding the About page to the header navigation bar
+
+Right now the header navigation bar only shows "Home" and "Archive"; we want to add our new "About" page to it.
+
+The header is configured through `hugo.toml`.
+Since nothing is set yet for the main menu, it uses defaults values from `themes/silicate/hugo.toml`.
+
+First, let's open `themes/silicate/hugo.toml` and copy-paste the whole `[menus]` table into
+our own `hugo.toml`.
+
+We should have something like this now:
+
+```
+title = 'Silicate Pepper & Carrot Demo'
+baseURL = 'https://silicate.aribaud.net/demos/pepper-carrot/'
+theme = 'silicate'
+copyright = 'Demo based on Pepper & Carrot - CC-By www.peppercarrot.com'
+
+[menus]
+  [[menus.main]]
+    name = 'Home'
+    pageRef = '/'
+    weight = 10
+
+  [[menus.main]]
+    name = 'Archive'
+    pageRef = '/comic'
+    weight = 20
+
+[params]
+  [params.author]
+    email = 'jdoe@example.org'
+    name = 'John Doe'
+```
+
+Now, we can add our own About page entry inside the `[menus]` table:
+
+```
+[[menus.main]]
+  name = 'About'
+  pageRef = '/about'
+  weight = 30
+```
+
+* `name` is what is displayed in the nav
+* `pageRef` is what page should be displayed, relative to the
+  `content/` folder
+* `weight` is the sorting the menu entries just like we saw for pages
+
+Be careful, we need `[[menus.main]]` and **not** `[menus.main]`.
+
+Now, if we look at the home page, we should have a working `About` link
+leading to the corresponding page!:
+
+![Navigation bar with About page](about_navbar.jpg)