diff --git a/content/about.md b/content/about/index.md similarity index 96% rename from content/about.md rename to content/about/index.md index 9353c2b..63a7e80 100644 --- a/content/about.md +++ b/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 diff --git a/content/about/silly_cat.png b/content/about/silly_cat.png new file mode 100644 index 0000000..67df451 Binary files /dev/null and b/content/about/silly_cat.png differ diff --git a/content/tutorials/getting-started/adding-about/about_navbar.jpg b/content/tutorials/getting-started/adding-about/about_navbar.jpg new file mode 100644 index 0000000..2ea21aa Binary files /dev/null and b/content/tutorials/getting-started/adding-about/about_navbar.jpg differ diff --git a/content/tutorials/getting-started/adding-about/about_page.jpg b/content/tutorials/getting-started/adding-about/about_page.jpg new file mode 100644 index 0000000..ae84573 Binary files /dev/null and b/content/tutorials/getting-started/adding-about/about_page.jpg differ diff --git a/content/tutorials/getting-started/adding-about.md b/content/tutorials/getting-started/adding-about/index.md similarity index 87% rename from content/tutorials/getting-started/adding-about.md rename to content/tutorials/getting-started/adding-about/index.md index 1c22abb..73d2d6a 100644 --- a/content/tutorials/getting-started/adding-about.md +++ b/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: ``` +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: -{{< warning >}} -Screenshot will be added soon. -{{< /warning >}} +![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 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!: -{{< warning >}} -Screenshot will be added soon. -{{< /warning >}} +![Navigation bar with About page](about_navbar.jpg) diff --git a/content/tutorials/getting-started/basic-configuration/changing_copyright.jpg b/content/tutorials/getting-started/basic-configuration/changing_copyright.jpg new file mode 100644 index 0000000..8147f31 Binary files /dev/null and b/content/tutorials/getting-started/basic-configuration/changing_copyright.jpg differ diff --git a/content/tutorials/getting-started/basic-configuration/changing_title.jpg b/content/tutorials/getting-started/basic-configuration/changing_title.jpg new file mode 100644 index 0000000..629a692 Binary files /dev/null and b/content/tutorials/getting-started/basic-configuration/changing_title.jpg differ diff --git a/content/tutorials/getting-started/basic-configuration.md b/content/tutorials/getting-started/basic-configuration/index.md similarity index 94% rename from content/tutorials/getting-started/basic-configuration.md rename to content/tutorials/getting-started/basic-configuration/index.md index 27a8515..8279cf2 100644 --- a/content/tutorials/getting-started/basic-configuration.md +++ b/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 diff --git a/content/tutorials/getting-started/new-comic-and-pages/archive.jpg b/content/tutorials/getting-started/new-comic-and-pages/archive.jpg new file mode 100644 index 0000000..dcb39c6 Binary files /dev/null and b/content/tutorials/getting-started/new-comic-and-pages/archive.jpg differ diff --git a/content/tutorials/getting-started/new-comic-and-pages/creation_date.jpg b/content/tutorials/getting-started/new-comic-and-pages/creation_date.jpg new file mode 100644 index 0000000..c743cfa Binary files /dev/null and b/content/tutorials/getting-started/new-comic-and-pages/creation_date.jpg differ diff --git a/content/tutorials/getting-started/new-comic-and-pages/index.md b/content/tutorials/getting-started/new-comic-and-pages/index.md index d28a60a..9eff79a 100644 --- a/content/tutorials/getting-started/new-comic-and-pages/index.md +++ b/content/tutorials/getting-started/new-comic-and-pages/index.md @@ -31,23 +31,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 a `_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 there is no problem when building your website +and refuse 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 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 +134,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 is 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!` ### 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/` +That warning is a bit of a mouthful, what it means is: "Silicate want pictures inside +a 'strips/' folder" + +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 +169,7 @@ my_webcomic/ hugo.toml content/ comic/ + _index.md E01P01/ index.md strips/ @@ -132,14 +179,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 +257,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 one to yours 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 lasily 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! -You can just keep adding new pages! +You can just keep adding new pages! The resource archive you downloaded +have what you need to add the first three pages of Pepper & Carrot. Here's what to remember: @@ -226,5 +329,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 transcript 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. diff --git a/content/tutorials/getting-started/new-comic-and-pages/page_with_picture.jpg b/content/tutorials/getting-started/new-comic-and-pages/page_with_picture.jpg new file mode 100644 index 0000000..9db73c3 Binary files /dev/null and b/content/tutorials/getting-started/new-comic-and-pages/page_with_picture.jpg differ diff --git a/content/tutorials/getting-started/new-comic-and-pages/page_without_picture.jpg b/content/tutorials/getting-started/new-comic-and-pages/page_without_picture.jpg new file mode 100644 index 0000000..f113926 Binary files /dev/null and b/content/tutorials/getting-started/new-comic-and-pages/page_without_picture.jpg differ diff --git a/content/tutorials/getting-started/new-comic-and-pages/transcript.jpg b/content/tutorials/getting-started/new-comic-and-pages/transcript.jpg new file mode 100644 index 0000000..6125c30 Binary files /dev/null and b/content/tutorials/getting-started/new-comic-and-pages/transcript.jpg differ diff --git a/content/tutorials/more-features/adding-background-image/.index.md.kate-swp b/content/tutorials/more-features/adding-background-image/.index.md.kate-swp new file mode 100644 index 0000000..85af26a Binary files /dev/null and b/content/tutorials/more-features/adding-background-image/.index.md.kate-swp differ diff --git a/content/tutorials/more-features/adding-background-image/index.md b/content/tutorials/more-features/adding-background-image/index.md new file mode 100644 index 0000000..14abc44 --- /dev/null +++ b/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 it finds. + +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) diff --git a/content/tutorials/more-features/adding-background-image/website_background.jpg b/content/tutorials/more-features/adding-background-image/website_background.jpg new file mode 100644 index 0000000..d6408be Binary files /dev/null and b/content/tutorials/more-features/adding-background-image/website_background.jpg differ diff --git a/layouts/_shortcodes/center-no-frame.html b/layouts/_shortcodes/center-no-frame.html new file mode 100644 index 0000000..64aa2dd --- /dev/null +++ b/layouts/_shortcodes/center-no-frame.html @@ -0,0 +1,3 @@ +
+ {{ .InnerDeindent | .Page.RenderString }} +
diff --git a/layouts/_shortcodes/center.html b/layouts/_shortcodes/center.html new file mode 100644 index 0000000..64aa2dd --- /dev/null +++ b/layouts/_shortcodes/center.html @@ -0,0 +1,3 @@ +
+ {{ .InnerDeindent | .Page.RenderString }} +