Merge pull request 'Pre-publication pass' (#3) from pre-publication into main

Reviewed-on: caribaud/silicate_guide#3
Reviewed-by: Albert ARIBAUD <albert+fj2@aribaud.net>

.gitignore

@@ -3,3 +3,4 @@ static/Shrines.png
 hugo
 _gen
 *.lock
+*.kate-swp

content/about/index.md

@@ -37,6 +37,9 @@ I chose Silicate as an homage to Rising Sand, because it's what got me started!
 
 Also, "Silicate" is pronounced like "Silly Cat" in french, which I find very funny.
 
+{{< center >}}
+![A silly cat](silly_cat.png)
+{{< /center >}}
 
 ## Contacts
 

content/demos.md

@@ -0,0 +1,22 @@
++++
+title = 'Demos'
+weight = 3
++++
+
+All public demos are available at <https://silicate.aribaud.net/demos/> and their
+respectives sources at <https://silicate.aribaud.net/demos-sources/>.
+
+## Pepper & Carrot demo
+
+This demo showcase Silicate using the first three episodes
+of [Pepper & Carrot](https://www.peppercarrot.com/).
+
+It display the following features:
+
+- Long vertical comic strips made out of multiple smaller ones
+- Multilingual support
+- Transcript (First english page)
+- Custom background image
+
+You can check out the demo [here](https://silicate.aribaud.net/demos/pepper-carrot/)
+and browse its sources [here](https://silicate.aribaud.net/demos-sources/pepper-carrot/).

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

@@ -4,10 +4,6 @@ show_toc = true
 weight = 40
 +++
 
-{{< warning >}}
-Page under redaction.
-{{< /warning >}}
-
 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.
@@ -57,11 +53,25 @@ You can learn more about Silicate on its main website:
 <https://silicate.aribaud.net/>
 ```
 
-Now, you can navigate to `https://localhost:1313/about/` and you should see the about page:
+Now, your website's files should look like this:
 
-{{< warning >}}
-Screenshot will be added soon.
-{{< /warning >}}
+```
+my_webcomic/
+    hugo.toml
+    content/
+        about.md
+        comic/
+            _index.md
+            E01P01/
+                index.md
+                transcript.md
+                strips/
+                    E01P01.jpg
+```
+
+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.
@@ -113,13 +123,11 @@ Now, we can add our own About page entry inside the `[menus]` table:
 * `name` is what is displayed in the nav
 * `pageRef` is what page should be displayed, relative to the
   `content/` folder
-* `weight` is the sorting order just like we saw for pages
+* `weight` is for 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!:
 
-{{< warning >}}
-Screenshot will be added soon.
-{{< /warning >}}
+![Navigation bar with About page](about_navbar.jpg)

content/tutorials/getting-started/basic-configuration/index.md

@@ -4,10 +4,6 @@ show_toc = true
 weight = 20
 +++
 
-{{< warning >}}
-Page under construction.
-{{< /warning >}}
-
 Still a bit boring, but let's add some more information about your webcomic into `hugo.toml`!
 
 Except for the title, all of them are optional.
@@ -35,9 +31,7 @@ Total in 11 ms
 
 - If your broswer is still open, then the page should have automatically reloaded and the title should be fixed!
 
-{{< warning >}}
-Screenshot will be added soon.
-{{< /warning >}}
+![Home page with changed title](changing_title.jpg)
 
 That is because when Hugo is running, it automatically checks for changes in your files, and when it finds some, it
 updates the website in your browser.
@@ -64,9 +58,7 @@ Once again, it's a new line inside `hugo.toml` : `copyright = 'Demo based on Pep
 
 It will be both shown on the website and in RSS feeds.
 
-{{< warning >}}
-Screenshot will be added soon.
-{{< /warning >}}
+![Home page with changed copyright](changing_copyright.jpg)
 
 
 ## Author info

content/tutorials/getting-started/new-comic-and-pages/index.md

@@ -5,7 +5,7 @@ weight = 30
 +++
 
 {{< warning >}}
-Page under redaction.
+Page under construction.
 {{< /warning >}}
 
 Ok! We have a blank site with Silicate installed!
@@ -15,11 +15,9 @@ Now, we can start the insteresting part: adding actual comic pages!
 For this tutorial, we'll use [Pepper & Carrot](https://www.peppercarrot.com/) pages.
 
 This guide has a premade archive with everything you'll need.
-You can download it as a [tar.gz]() archive for Linux/Mac or a [zip]() for Windows.
+You can download it as a [tar.gz](silicate-pepper-carrot-demo-resources.tar.gz)
+archive for Linux/Mac or a [zip](silicate-pepper-carrot-demo-resources.zip) for Windows.
 
-{{< warning >}}
-Archives will be created soon.
-{{< /warning >}}
 
 But if you have your own comic already, you can use your it too!
 
@@ -31,23 +29,65 @@ But if you have your own comic already, you can use your it too!
 First off, let's create a `comic/` folder in `my_website/content/`.
 It will be where all comic pages will go.
 
+Now, we need to tell Silicate the title of the comic and give it a description.
+
+It will be used in the archive.
+
+Let's create an `_index.md` (notice the leading `_`) file inside `my_website/content/` with the following content:
+
+```
++++
+title = 'Pepper & Carrot'
++++
+
+Comic [Pepper & Carrot webcomic](https://www.peppercarrot.com/en/) by David Revoy.
+
+Licensed under Creative Commons Attribution 4.0 - www.peppercarrot.com.
+```
+
+This content uses the [Markdown](https://daringfireball.net/projects/markdown/) syntax,
+so you can have some simple styling, like *\*italic text\**, **\*\*bold text\*\***, etc.
+
 {{< warning >}}
-Information on how to set the comic title and description will be added soon.
+Full description of Markdown possibilities will be added later.
 {{< /warning >}}
 
+This `_index.md` file tells Hugo that this folder is a *section*, that is, a group of pages.
+
+Now, you should have this:
+
+```
+my_webcomic/
+    hugo.toml
+    content/
+        comic/
+            _index.md
+```
+
+> What is the weird text block with the "+++"?
+
+This block is called a [*front matter*](https://gohugo.io/content-management/front-matter/#article),
+it is used to add attributes to a page or a section, such as its title.
+
+> The terminal just told me `ERROR Section '/comic' contains no pages!`!
+
+That's normal: Silicate tries to check if there are problems when building your website
+and refuses to do so when there is an obious problem.
+
+To fix it, let's add the first page from Pepper & Carrot!
 
 ## Adding a new comic page
 
-Now we'll add page 01 from episode 01 from Pepper & Carrot!
-
 Create a `E01P01/` folder inside `comic/`. If you use your own webcomic,
 you can use your own page title as a folder name (just avoid spaces and specials characters
 because this folder name will be used as a URL for this page).
 
-Then create a text file named `index.md` (If you are on Windows, make sure the file created isn't
-`index.md.txt`; Windows likes to hide file extensions from you may need to force windows to display them).
+Then create a text file named `index.md`, without a leading `_` this time.
 
-This `index.md` file tells Hugo that the `E01P01` folder is a page and that all other
+If you are on Windows, make sure the file created isn't
+`index.md.txt`; Windows likes to hide file extensions from you, and you may need to force windows to display them.
+
+This `index.md` file tells Hugo that the `E01P01` folder is a page -- not a section -- and that all other
 files inside this folder belong to this page. This is what Hugo calls a "Page Bundle".
 
 ### Post content
@@ -92,26 +132,30 @@ Writers: Craig Maloney, Nicolas Artance, Scribblemaniac, Valvin.
 Correctors: Alex Gryson, CGand, Hali, Marno van der Maas, Moini, Willem Sonke.
 ```
 
-This content uses the [Markdown](https://daringfireball.net/projects/markdown/) syntax,
-so you can have some simple styling, like *\*italic text\**, **\*\*bold text\*\***, etc.
+This file also uses Markdown syntax and you can do the same formating as before!
 
-{{< warning >}}
-Full description of Markdown possibilities will be added later.
-{{< /warning >}}
+> What is this "weight" in the front matter?
 
-> What is the weird text block with the "+++"?
+Don't worry about it yet, it's used for ordering.
 
-This block is called a [*front matter*](https://gohugo.io/content-management/front-matter/#article),
-it is used to add attributes to the page, such as its title.
+And now, if we look at the website, we see this!:
 
-The `weight` attribute will be explained in [Page ordering](#page-ordering).
+![Page without picture](page_without_picture.jpg)
 
+That's a start, but that's... not great, because there are no pictures yet.
+
+The terminal also warned us about that:
+
+`WARN  The comic page '/comic/e01p01' has no image matching the strips/**.{png,jpg,webp,PNG,JPG,WEBP} pattern!`
+
+That warning is a bit of a mouthful, what it means is: "Silicate want pictures inside
+a 'strips/' folder"
 
 ### Comic pictures
 
-Now, all we need are pictures for the comic page.
+To fix this, all we need are pictures for the comic page.
 
-Create a `strips/` folder inside `E01P01/`
+So let's create a `strips/` folder inside `E01P01/`
 
 Get the `pages/E01P01.jpg` file from the resources you downloaded -- or your
 own comic page -- and add it inside the `strips/` folder.
@@ -123,6 +167,7 @@ my_webcomic/
     hugo.toml
     content/
         comic/
+            _index.md
             E01P01/
                 index.md
                 strips/
@@ -132,14 +177,14 @@ my_webcomic/
 If your [website is running]({{% relref "tutorials/getting-started/site-creation" %}}#starting-your-site),
 then the home page should display the page you just added like so!:
 
-{{< warning >}}
-Screenshot will be added soon.
-{{< /warning >}}
+![Page with picture](page_with_picture.jpg)
 
 Also, you can add multiple pictures inside `strips/`, Silicate will look for everything that is
 a PNG, JPG or WEBP. On the website, they'll be ordered top to bottom by name, so you can make
 a Webtoon-style long comic strip from many smaller strips.
 
+Before we can add other pages, we need to take a look at some other topics first.
+
 ### Page ordering
 
 Page ordering is important, and can get tricky.
@@ -210,15 +255,71 @@ Let's say the date of the page we just created was 9H35 the 2025 / May / 31, the
 
 Now, the page should be displayed with a creation date under its title!:
 
-{{< warning >}}
-Screenshot will be added soon.
-{{< /warning >}}
+![Creation date](creation_date.jpg)
+
+### Transcript
+
+Some webcomics provides transcripts of their pages. Adding a transcript to a comic page
+in Silicate is very simple: add a `transcript.md` text file next to your `index.md` and
+Silicate will automatically add a "Transcript" button to display or
+hide the content of `transcript.md` under your page.
+
+Like for `index.md`, you can use any Markdown syntax to format your
+transcript.
+
+For the first page, let's write a small transcript:
+
+```
+Pepper the witch prepares a potion in a cauldron
+while her cat Carrot lazily looks at her.
+
+She sprinkles some powder in the cauldron.
+
+
+**Pepper:**
+
+> ...and the last touch.
+
+> ...mmm probably not strong enough
+
+
+She closes her eyes and dumps the whole powder box
+into the mix while the cauldron bubbles with *Plop* sounds.
+```
+
+Now, you should have this file structure:
+
+```
+my_webcomic/
+    hugo.toml
+    content/
+        comic/
+            _index.md
+            E01P01/
+                index.md
+                transcript.md
+                strips/
+                    E01P01.jpg
+```
+
+And the transcript should appear on the page!:
+
+![Page with transcript](transcript.jpg)
+
+## Automatic Archive page
+
+The "Archive" page will automatically be kept up to date with the pages you add:
+
+![Archive page](archive.jpg)
+
+It will show the comic title and its description.
 
 ## Recap
 
-Now you have most of what you need to have a simple webcomic!
+Now you have most of what you need for a simple webcomic!
 
-You can just keep adding new pages!
+You can just keep adding new pages! The resource archive you downloaded
+has what you need to add the first three pages of Pepper & Carrot.
 
 Here's what to remember:
 
@@ -226,5 +327,6 @@ Here's what to remember:
 * Comic pages go inside `content/comic/`.
 * Comic pages are folders with an `index.md` file.
 * Comic page pictures go into a `strips/` sub-folder.
+* Comic page transcripts go into a `transcript.md` file next to `index.md`.
 * `index.md` has a *front matter* to set its title, ordering and creation date.
 * Ordering is done through weights. Light/Small = first, heavy/big = last.

content/tutorials/more-features/adding-background-image/index.md

@@ -0,0 +1,44 @@
++++
+title = 'Adding a background image'
+show_toc = false
+weight = 5
++++
+
+Adding a background image for your website is *very* easy.
+
+Inside your website folder, there is an `assets/` folder.
+
+Simply create a `background/` folder inside that and put
+in there any JPG, PNG or WEBP you want!
+
+Note that if you put multiple pictures in there,
+Silicate will take the first one in alphabetical order.
+
+For example, if you downloaded the resource archive
+from the [Getting started tutorials]({{% relRef "tutorials/getting-started/new-comic-and-pages/" %}}),
+there is a background image in `background/`: `bg_ep7.jpg`.
+
+Just put the picture inside `assets/background/`.
+
+Your files should now be like this:
+
+```
+my_webcomic/
+    hugo.toml
+    assets/
+        background/
+            bg_ep7.jpg
+    content/
+        about.md
+        comic/
+            _index.md
+            E01P01/
+                index.md
+                transcript.md
+                strips/
+                    E01P01.jpg
+```
+
+And now, the website should look a lot better!:
+
+![Website with background](website_background.jpg)

content/tutorials/more-features/multiple-comics.md

@@ -5,7 +5,7 @@ weight = 40
 +++
 
 {{< warning >}}
-Currently under redaction.
+Currently under construction.
 {{< /warning >}}
 
 <!--more-->
@@ -13,10 +13,10 @@ Currently under redaction.
 ## It's just like creating a normal comic
 
 {{< warning >}}
-Currently under redaction.
+Currently under construction.
 {{< /warning >}}
 
 ## Telling Hugo the type of the pages
 {{< warning >}}
-Currently under redaction.
+Currently under construction.
 {{< /warning >}}

layouts/_shortcodes/center.html

@@ -0,0 +1,3 @@
+<div style="text-align:center">
+    {{ .InnerDeindent | .Page.RenderString }}
+</div>