diff --git a/.gitignore b/.gitignore index 642709a..41b9385 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ static/Shrines.png hugo _gen *.lock +*.kate-swp 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/demos.md b/content/demos.md new file mode 100644 index 0000000..31a0e5a --- /dev/null +++ b/content/demos.md @@ -0,0 +1,22 @@ ++++ +title = 'Demos' +weight = 3 ++++ + +All public demos are available at and their +respectives sources at . + +## 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/). 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 85% rename from content/tutorials/getting-started/adding-about.md rename to content/tutorials/getting-started/adding-about/index.md index 1c22abb..fa1f0d0 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, 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) 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..b371695 100644 --- a/content/tutorials/getting-started/new-comic-and-pages/index.md +++ b/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. 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/silicate-pepper-carrot-demo-resources.tar.gz b/content/tutorials/getting-started/new-comic-and-pages/silicate-pepper-carrot-demo-resources.tar.gz new file mode 100644 index 0000000..4c24d1e Binary files /dev/null and b/content/tutorials/getting-started/new-comic-and-pages/silicate-pepper-carrot-demo-resources.tar.gz differ diff --git a/content/tutorials/getting-started/new-comic-and-pages/silicate-pepper-carrot-demo-resources.zip b/content/tutorials/getting-started/new-comic-and-pages/silicate-pepper-carrot-demo-resources.zip new file mode 100644 index 0000000..d4b14e8 Binary files /dev/null and b/content/tutorials/getting-started/new-comic-and-pages/silicate-pepper-carrot-demo-resources.zip 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 b/content/tutorials/more-features/adding-background-image/index.md new file mode 100644 index 0000000..116a25d --- /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 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) 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/content/tutorials/more-features/multiple-comics.md b/content/tutorials/more-features/multiple-comics.md index 291d9cc..a894f68 100644 --- a/content/tutorials/more-features/multiple-comics.md +++ b/content/tutorials/more-features/multiple-comics.md @@ -5,7 +5,7 @@ weight = 40 +++ {{< warning >}} -Currently under redaction. +Currently under construction. {{< /warning >}} @@ -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 >}} 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 }} +