commit 4e109676000d7ba2f79247df14e94c4fdf53cc00 Author: Christian Aribaud Date: Fri May 9 10:37:43 2025 +0200 Initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..642709a --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +public +static/Shrines.png +hugo +_gen +*.lock diff --git a/archetypes/default.md b/archetypes/default.md new file mode 100644 index 0000000..25b6752 --- /dev/null +++ b/archetypes/default.md @@ -0,0 +1,5 @@ ++++ +date = '{{ .Date }}' +draft = true +title = '{{ replace .File.ContentBaseName "-" " " | title }}' ++++ diff --git a/assets/css/main.scss b/assets/css/main.scss new file mode 100644 index 0000000..de8eff6 --- /dev/null +++ b/assets/css/main.scss @@ -0,0 +1,220 @@ +:root { + color-scheme: light dark; +} + +* { + box-sizing: border-box; +} + +html { + background-blend-mode: hard-light; + background: + fixed linear-gradient( + 135deg, + rgba(255, 198, 99, .1) 0%, + rgba(130, 130, 130, 0) 25%, + rgba(130, 130, 130, 0) 75%, + rgba(77, 67, 102, .05) 100% + ), + center top fixed url('/silicate_bg.png'); +} + +body { + color: black; + border: 2px solid grey; + font-family: sans-serif; + line-height: 1.5; + margin: 1rem auto; + max-width: 900px; + padding: 1rem 3rem; + border-radius: 5px; + + backdrop-filter: blur(6px) saturate(180%); + background-color: rgba(255, 255, 255, 0.75); +} + +header { + border-bottom: 1px solid #222; + margin-bottom: 1rem; + text-align: center; + + #banner { + display: block; + background-blend-mode: hard-light; + margin: 0.5rem; + padding: .5rem; + color: white; + font-family: sans-serif; + clip-path: polygon( + 1rem 0, + calc(100% - 1rem) 0, + 100% calc(100% - 1rem), + calc(100% - 1rem) 100%, + 1rem 100%, + 0 1rem + ); + + background: + conic-gradient(from -85deg at 100% 20%, #c6f3f420 90deg, #f9eadb00 90deg), + conic-gradient(from 0deg at 0% 40%, #c6f3f420 70deg, #f9eadb00 70deg), + conic-gradient(from 0deg at 0% 100%, #c6f3f408 40deg, #f9eadb00 40deg), + conic-gradient(from -90deg at 10% 100%, #dbe5f908 70deg, #f9eadb00 70deg), + conic-gradient(from -90deg at 30% 100%, #f9eadb08 15deg, #f9eadb00 15deg), + conic-gradient(from -90deg at 25% 100%, #f9eadb08 10deg, #f9eadb00 10deg), + radial-gradient(circle at 40% 40%, #a9fcfc3b, #FFFFFF00), + #2a2a48; + } + + p { + margin: 0; + } + + h1 { + margin: 0rem 1rem; + margin-bottom: .5rem; + font-size: 3rem; + text-transform: uppercase; + letter-spacing: 0.8rem; + border-image: linear-gradient(to left,rgba(212, 212, 212, 0) 0%, rgba(212, 212, 212, 0) 20%, rgba(75, 227, 206, 1) 35%, rgba(248, 235, 63, 1) 40%, rgba(242, 152, 69, 1) 45%, rgba(165, 92, 212, 1) 50%, rgba(242, 152, 69, 1) 55%, rgba(248, 235, 63, 1) 60%, rgba(75, 227, 206, 1) 65%, rgba(212, 212, 212, 0) 80%, rgba(212, 212, 212, 0) 100%) 1 / 0 0 3px; + } + + nav ul { + list-style: none; + padding: 0; + + li { + display: inline-block; + margin: 0 1rem; + } + } +} + +footer { + border-top: 1px solid #222; + margin-top: 1rem; +} + +a { + color: #00e; + text-decoration: none; +} + +ol { + list-style: none; + + ol { + border-left: #00000033 solid 2px; + margin-left: 1rem; + } +} + +.page-nav { + display: grid; + grid-template-columns: 1fr 1fr; + text-align: center; + + * { + border: solid .2rem; + border-radius: 5px; + margin: .5rem; + padding: .5rem 0; + font-weight: bold; + background-color: #00000060; + backdrop-filter: blur(30px) saturate(250%); + color: white; + } + + .next { + grid-column-start: 2; + } + + a:hover { + color: white; + } +} + +blockquote { + margin: 2rem 1rem; + padding: .1rem 0 .1rem 2rem; + border-left: #AAA 3px solid; + position: relative; + font-style: italic; + font-size: 110%; + + &::before { + content: '”'; + position: absolute; + font-size: 60px; + top: -25px; + left: 0.8rem; + color: #AAA + } +} + +hr { + color: white; +} + +h1 { + text-align: center; +} + +pre { + overflow-x: scroll; + + code { + box-shadow: unset; + border: unset; + background-color: unset; + font-size: 100%; + } +} + +code, pre { + background-color: #FFFFFF55; + box-shadow: 0 0 3px -2px black; + border: 1px grey solid; + padding: 0 .1rem; + font-size: 110%; + backdrop-filter: blur(12px) saturate(180%); +} + +.subtitle { + text-align: center; + margin-top: -1rem; + font-size: 75%; +} + +a { + color: #4928e6; + transition: color .7s ease-out; + + &:hover{ + color: #c238ca; + transition: color .5s cubic-bezier(.19,1,.22,1); + } + + &:not([href]), &[href=""]{ + color: grey; + text-decoration: line-through; + } +} + +main img { + max-width: 100%; + border: solid black 1px; +} + +.warning { + color: orangered; + border: solid 2px orangered; + background-color: lightyellow; + + padding: 0.5rem; + + text-align: center; + + p { + margin: 0.5rem 0; + } +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..e2aac52 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1 @@ +console.log('This site was generated by Hugo.'); diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 0000000..b7b9304 --- /dev/null +++ b/content/_index.md @@ -0,0 +1,24 @@ ++++ +title = 'Home page' ++++ + +{{< warning >}} +This website is under construction and is unfinished! + +Some parts and tutorials may be missing or incomplete. + +The website will be progressively updated to completion. + +Downloads will be available once version 1 of Silicate is ready, +so will the Q&A page. +{{< /warning >}} + +# Easily create comics websites! + +Silicate is a system that lets you create static webcomic websites that +you fully own with minimal configuration. +Easily add pages with any chapter structure and any number of +translations! + +Silicate also lets you customise your website, from just adding +your own CSS to fully customising any templates. diff --git a/content/about.md b/content/about.md new file mode 100644 index 0000000..9353c2b --- /dev/null +++ b/content/about.md @@ -0,0 +1,46 @@ ++++ +title = 'About Silicate' +slug = 'about' +weight = 4 ++++ + +## Author & History + +Hi! I'm Christian Aribaud! Some may also now me as "Bohren". + +I've loved webcomic for as long as I can remember! Just imagine -- artists creating +amazing comics, and they put it online for all to see! And *for free*! How cool is that? + +And since they put their work online for free, I wanted to help them. + +There are two things I know well: software development and speaking French. Yes, I know, I'm sorry. + +I helped a few times the webcomic [Pepper & Carrot](https://www.peppercarrot.com/fr/) but nowadays +I'm one of the French translators for [Rising Sand](https://risingsand.glass/)! + +And while I love webcomics, I also saw these past years how things can get dire for the +authors -- platforms degrading, exploiting artists, shutting down, embracing that *freaking +GenAI trend*... + +And then two things happened : I got interested in [Hugo](https://gohugo.io/) and the RS website +ran into trouble with multilingual support. + +I wondered if I could give artists a way to create simple webcomic websites using Hugo without +having to relly on third-party platforms or WordPress. + +Silicate is the result. + + +## Why the name Silicate? + +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. + + +## Contacts + +If you want to send me questions, feature requests or suggestions, you can do so here: + +* [@bhoren](https://bsky.app/profile/bhoren.bsky.social) on Bluesky +* [@bhoren@mastodon.art](https://mastodon.art/@Bhoren) on Mastodon diff --git a/content/tutorials/_index.md b/content/tutorials/_index.md new file mode 100644 index 0000000..1a0d9a5 --- /dev/null +++ b/content/tutorials/_index.md @@ -0,0 +1,21 @@ ++++ +title = 'Tutorials' +weight = 2 ++++ + +{{< warning >}} +The tutorials are under construction and are incomplete. +{{< /warning >}} + +These tutorials will help you learn how to create your websites with this theme, especially +if you've never used Hugo before! + +They don't assume you know anything about Hugo and are made to teach you everything you'll need +to know from scratch. + +Hugo has its [own tutorials](https://gohugo.io/getting-started/), but they are more general +than Silicate's ones and asume you are a software developer -- they can be overwhelming. + +Unlike what the Hugo tutorials tells you, no, you don't need Git -- no, you don't to be comfortable with the command line (although you will use it a little)! + +Silicate's tutorials try to remain as simple as possible. diff --git a/content/tutorials/getting-started/_index.md b/content/tutorials/getting-started/_index.md new file mode 100644 index 0000000..3a22886 --- /dev/null +++ b/content/tutorials/getting-started/_index.md @@ -0,0 +1,11 @@ ++++ +title = 'Getting started' +weight = 10 ++++ + +Alright! The goal is to have a very simple website that shows a simple webcomic. + +This section is there to understand how Silicate and Hugo work! + +This tutorial will use comic pages from [Pepper & Carrot](https://www.peppercarrot.com/fr/) by David Revoy +but if you already have your own comic pages, you can use them too! diff --git a/content/tutorials/getting-started/adding-about.md b/content/tutorials/getting-started/adding-about.md new file mode 100644 index 0000000..1c22abb --- /dev/null +++ b/content/tutorials/getting-started/adding-about.md @@ -0,0 +1,125 @@ ++++ +title = 'Adding an About page' +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. + + + + +## 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 : + + +### Check out Silicate + +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: + +{{< warning >}} +Screenshot will be added soon. +{{< /warning >}} + +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 order 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 >}} diff --git a/content/tutorials/getting-started/basic-configuration.md b/content/tutorials/getting-started/basic-configuration.md new file mode 100644 index 0000000..27a8515 --- /dev/null +++ b/content/tutorials/getting-started/basic-configuration.md @@ -0,0 +1,114 @@ ++++ +title = 'Basic configuration' +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. + +Be sure that you are currently [running the hugo server]({{% relref "tutorials/getting-started/site-creation" %}}#starting-your-site)! + + + + +## Title + +First, let's fix your site's title by changing `title = 'My New Hugo Site'` with +`title = 'Silicate Pepper & Carrot Demo'` -- or your own title -- then save. + +Now, two things should happen if Hugo is still running : + +- Some new lines should appear in your terminal, they should look like this : + +``` +Change of config file detected, rebuilding site (#2). +2025-05-14 13:43:16.453 +0200 +Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) +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 >}} + +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. + +That is what the `Watching for changes in [...]` and +`Watching for config changes in [...]` lines meant when you ran `hugo server`. + +Sometimes, the auto-reloading will fail and you will get `[ERROR]: ...` messages and Hugo +won't be able to work again on its own. If that happens, try to stop the server by typing +`ctrl`-`c` in the terminal then running again the `./hugo server` command. + +If that doesn't work, then you may have to check your configuration files. +Hugo should display a message telling you what it thinks it wrong. + + +## Copyright + +As you may have seen, Silicate puts a default copyright on your website: + +`Copyright 2025. All rights reserved.` + +You may want to change that. Here, since we're doing a demo from Pepper & Carrot's, let's put a proper attribution. +Once again, it's a new line inside `hugo.toml` : `copyright = 'Demo based on Pepper & Carrot - CC-By www.peppercarrot.com'`. + +It will be both shown on the website and in RSS feeds. + +{{< warning >}} +Screenshot will be added soon. +{{< /warning >}} + + +## Author info + +This setting is only used in the RSS feeds. + +This time, we need to add [*tables*](https://toml.io/en/v1.0.0#table) inside `hugo.toml`. +Add the following lines, using your own info: + +``` +[params] + [params.author] + email = 'jdoe@example.org' + name = 'John Doe' +``` + +`[params]` is the table where most configurations for hugo will be placed. + +`[params.author]` is a sub-table table inside `[params]`. + + +## Base URL + +The base URL is the URL where your website will be available online -- where people will be able to access it. +For example, if you rent `www.my-webcomic.com`, then your base URL will most likely be `https://www.my-webcomic.com/`. + +In the case of Silicate, one of the demo uses `https://silicate.aribaud.net/demos/pepper-carrot/`, so we +can change the value of `baseURL` in `hugo.toml` like this: `baseURL = 'https://silicate.aribaud.net/demos/pepper-carrot/'`. + + +## Recap + +Your `hugo.toml` file should now look like this : + +``` +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' + +[params] + [params.author] + email = 'jdoe@example.org' + name = 'John Doe' +``` diff --git a/content/tutorials/getting-started/new-comic-and-pages/index.md b/content/tutorials/getting-started/new-comic-and-pages/index.md new file mode 100644 index 0000000..d28a60a --- /dev/null +++ b/content/tutorials/getting-started/new-comic-and-pages/index.md @@ -0,0 +1,230 @@ ++++ +title = 'Adding a comic and comic pages' +show_toc = true +weight = 30 ++++ + +{{< warning >}} +Page under redaction. +{{< /warning >}} + +Ok! We have a blank site with Silicate installed! + +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. + +{{< warning >}} +Archives will be created soon. +{{< /warning >}} + +But if you have your own comic already, you can use your it too! + + + + +## Setting up the comic + +First off, let's create a `comic/` folder in `my_website/content/`. +It will be where all comic pages will go. + +{{< warning >}} +Information on how to set the comic title and description will be added soon. +{{< /warning >}} + + +## 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). + +This `index.md` file tells Hugo that the `E01P01` folder is a page and that all other +files inside this folder belong to this page. This is what Hugo calls a "Page Bundle". + +### Post content + +Most webcomics will have a small "blog" post associated with a page -- a description, +some lore, etc. + +You can do this by adding the post content to `index.md`. + +Here, for example, we can add the credit of the first Pepper & Carrot page : + +``` ++++ +title = 'Episode 1 - Page 1' +weight = 10 ++++ + +Creative Commons Attribution 4.0 International license + +------ + +Attribution to: + +Art: David Revoy. + +Scenario: David Revoy. + +English (original version) + +Proofreading: Amireeti, Alex Gryson. + +------ + +Credit for the universe of Pepper&Carrot, Hereva: + +Creation: David Revoy. + +Lead Maintainer: Craig Maloney. + +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. + +{{< warning >}} +Full description of Markdown possibilities will be added later. +{{< /warning >}} + +> 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 the page, such as its title. + +The `weight` attribute will be explained in [Page ordering](#page-ordering). + + +### Comic pictures + +Now, all we need are pictures for the comic page. + +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. + +You should now have this (and some other files and/or folders) : + +``` +my_webcomic/ + hugo.toml + content/ + comic/ + E01P01/ + index.md + strips/ + E01P01.jpg +``` + +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 >}} + +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. + +### Page ordering + +Page ordering is important, and can get tricky. + +Imagine you have a naming convention for your pages like so: `P1`, `P2`, ..., `P10`, `P11`, ... + +If you order them by name, then you have a trouble, because they'll get ordered like so: + +1. P1 +2. P10 +3. P11 +3. P2 +4. ... + +It gets even worse if your pages have an actual name and no naming convention. + +> Wait! Why not use a creation or publication date? + +We could use a publication date, but imagine you want to add a new page between two others. +We now have *another* problem because you either can't or have to lie about the date to make it work. + +That's why Silicate relies only on ... + +#### Weight + +The way Silicate handles ordering is by using the [*weight*](https://gohugo.io/methods/page/weight/#article) of the page. + +You can see it like this: pages with a small weight floats up to the top and are first, pages with a big +weight sink to the bottom and are last. + +![Weight schema](weight_schema.png) + +You can set the weight with the line `weight = ...` in the front matter. It **has** to be a positive whole +number, things like `4.7` and `-1` won't work. + +#### Best practice + +What you should probably do is this: + +- Page 1 gets a weight of 10 +- Page 2 gets a weight of 20 +- ... +- Page 50 gets a weight of 500 + +Why? Because starting at 10 then incrementing the weight by 10 each time lets you insert up to nine +pages before or after any page, should the need arise. + + +> Won't I run out of values? My webcomic is very long. + +Even if you have a *lot* of pages -- say 4000 -- you would use +a weight of 40 000, which is _**way**_ below the maximum (which is at least *2 147 483 647*). + + +### Page creation date + +If you want, you can set a [creation date](https://gohugo.io/content-management/front-matter/#date) for the page. +It will be displayed on the website under the page title. + +You can add a `date='...'` field in the front matter. +The date format can be [multiple things](https://gohugo.io/content-management/front-matter/#dates). + +Let's say the date of the page we just created was 9H35 the 2025 / May / 31, then the value to add is : + +`date = '2025-05-31T09:35:00'` + +(If we care only about the day, then we can add: `date = '2025-05-31'`) + +Now, the page should be displayed with a creation date under its title!: + +{{< warning >}} +Screenshot will be added soon. +{{< /warning >}} + +## Recap + +Now you have most of what you need to have a simple webcomic! + +You can just keep adding new pages! + +Here's what to remember: + +* Website configuraiton is in `hugo.toml`. +* Comic pages go inside `content/comic/`. +* Comic pages are folders with an `index.md` file. +* Comic page pictures go into a `strips/` sub-folder. +* `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/weight_schema.png b/content/tutorials/getting-started/new-comic-and-pages/weight_schema.png new file mode 100644 index 0000000..8c5efd9 Binary files /dev/null and b/content/tutorials/getting-started/new-comic-and-pages/weight_schema.png differ diff --git a/content/tutorials/getting-started/site-creation/index.md b/content/tutorials/getting-started/site-creation/index.md new file mode 100644 index 0000000..91d649c --- /dev/null +++ b/content/tutorials/getting-started/site-creation/index.md @@ -0,0 +1,213 @@ ++++ +title = 'Creating a new site' +show_toc = true +weight = 10 ++++ + +The first step to get started is to install Hugo and Silicate then create +a blank website! + +Let's be honest: this will be the most **boring** part of the guides: it's +the most technical one and is mostly settings things up. + +You will have to use the terminal a bit, but it's easy, you'll see! + + + +## Creating a workspace and getting Hugo + +On your computer, create a folder where you'll work on your Hugo websites. +For the rest of the guide, it will be named `hugo_workspace/`. + +Then you need to get Hugo itself. Hugo is a single executable file, it +requires no installation, only that you download it. + +Hugo has its [own guide](https://gohugo.io/installation/) on how to install it, but +this tutorial will give you a simpler version. + +Go to the [Hugo release page](https://github.com/gohugoio/hugo/releases/latest). +Unfold the "Assets" section. From it, you can download Hugo based on your +OS : + +* Linux: download the `hugo_extended_X.XXX.X_linux-64bit.tar.gz` file +* Mac: download the `hugo_extended_X.XXX.X_darwin-universal.tar.gz` file +* Windows: download the `hugo_extended_X.XXX.X_windows-amd64.zip` file + +Once downloaded, extract the `hugo` executable (`hugo.exe` for Windows) from the archive into `hugo_workspace/` + +Now you'll need a terminal, also known as "shell", "command line" or "CLI" -- basically a text window to +send instructions to your computer: + +* Linux: It varies from OS to OS, but you should be able to open one by searching "Terminal" in your applications +* MacOS: [Click on the Launchpad icon then search and click on "Terminal"](https://support.apple.com/en-ca/guide/terminal/apd5265185d-f365-44cb-8b09-71a064a42125/mac) + * You can also navigate to `/Applications/Utilities` and double click on `Terminal` +* Windows: Click on the Windows icon then search and click on "Command Prompt" + +Regardless of you OS, you should have a window open that you can type commands into then +press enter to run them. + +First, we need to tell the terminal we want to run commands from the `hugo_workspace/` directory. + +Get the complete (also known as absolute) path of your `hugo_workspace/` folder. +You can do that by navigating inside this folder with your file explorer then clicking +on the path shown on the top then copying it. + +Then, in the terminal, type the following, replacing `` with the one you just copied: + +* Linux & Mac & Windows: Type `cd ` then press enter + * `cd` stands for "Change Directory"! + +Now, to see if everything is working, you can type `./hugo version` (`hugo.exe version` for Windows) then press enter. + +If everything is OK, you should see a line like this : + +``` +hugo v0.147.2-[...] VendorInfo=gohugoio +``` + +---------- + +## Creating a site + +With the terminal open in the `hugo_workspace/` folder, run the command : + +* Linux & Mac: `./hugo new site my_webcomic` +* Windows: `hugo.exe new site my_webcomic` + +If everything went right, hugo should show you something similar to this: + +``` +Congratulations! Your new Hugo site was created in /.../hugo_workspace/my_webcomic. + +Just a few more steps... + +1. Change the current directory to /.../hugo_workspace/my_webcomic. +2. Create or install a theme: + - Create a new theme with the command "hugo new theme " + - Or, install a theme from https://themes.gohugo.io/ +3. Edit hugo.toml, setting the "theme" property to the theme name. +4. Create new content with the command "hugo new content /.". +5. Start the embedded web server with the command "hugo server --buildDrafts". + +See documentation at https://gohugo.io/. +``` + +Hugo just created a new `my_webcomic/` folder inside `hugo_workspace/`. That's where Hugo will +look for everything it needs to create your website! + +Inside `hugo_workspace/my_webcomic/`, you should now have the following folders and files: + +* `archetypes/` +* `assets/` +* `content/` +* `data/` +* `i18n/` +* `layouts/` +* `resources/` +* `static/` +* `themes/` +* `hugo.toml` + +You don't need to worry about each and every one of them, they will be explained when -- and only if -- nedeed. + +Like Hugo said in its output, you can change the directory to this new one in the Terminal : + +* Linux & Mac & Windows: Type `cd my_webcomic` then press the enter key. + +Move the `hugo` / `hugo.exe` executable directly into the `my_webcomic/` folder using +your file explorer. +It will make things simpler. + +---------- + +## Installing the Silicate theme + +The first thing we need is a theme -- Hugo doesn't know how to create your website +without one. + +All themes go into the `themes/` folder of a Hugo website. + +First, [download the Silicate theme](), then extract it into `my_webcomic/themes/`. + +{{< warning >}} +Downloads will be available when version 1 of Silicate is ready. +{{< /warning >}} + +Now, you should have a `my_webcomic/themes/silicate` folder, but Hugo doesn't +know that it should use that theme. You can let it know by changing your +website configuration. + +Most of a Hugo website configuration is in the `hugo.toml` file. + +It's a simple text file using the [TOML format](https://toml.io/en/). Right now, it should look like this: + +``` +baseURL = 'https://example.org/' +languageCode = 'en-us' +title = 'My New Hugo Site' +``` + +We'll look at `hugo.toml` and how to fully use it later. For now, just add `theme = 'silicate'` +at the end of the file. + +Be careful about the `'` around "silicate", they are necessary! + +And with that done, your website is set up to use Silicate! Now, you only need to do one final check. + +---------- + +## Starting your site + +With the terminal opened in `my_website/`, type `./hugo server` (`hugo.exe server` on Windows) then press the enter key. + +Hugo should say something close to this : + +``` +Watching for changes in /<...>/hugo_workspace/my_webcomic/{archetypes,assets,content,data,i18n,layouts,static,themes} +Watching for config changes in /<...>/hugo_workspace/my_webcomic/hugo.toml, /<...>/hugo_workspace/my_webcomic/themes/silicate/hugo.toml +Start building sites … +hugo v0.147.2-c7feb15d10b29a94d7fb57c31e8bcb2e92718fb7+extended linux/amd64 BuildDate=2025-05-06T11:18:55Z VendorInfo=gohugoio + + + | EN +-------------------+----- + Pages | 7 + Paginator pages | 0 + Non-page files | 0 + Static files | 1 + Processed images | 0 + Aliases | 0 + Cleaned | 0 + +Built in 48 ms +Environment: "development" +Serving pages from disk +Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender +Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) +Press Ctrl+C to stop +``` + +Hugo actually did two separate things : + +* It created your entire website and put it into the `my_webcomic/public/` folder +* It is now running a small web server so you can browse this website + +Keep the terminal open! If you close it, then the web server will close too. + +Open your web browser and go to the URL Hugo gave you in the +`Web Server is available at XXX` line (for this example, `http://localhost:1313`). + +You should see the following page : + +![Newly created site screenshot](new_silicate_site.jpg) + +If you do, then you are done, the new site is created! + +Just so you know, only you can acess your website for now!: + +* `localhost` / `127.0.0.1` is a special internet address, it's your own computer + * By saying `(bind address 127.0.0.1)`, Hugo means "Only let 127.0.0.1 -- that is this computer -- access the website". +* `:1313` (or the other number Hugo gave you) is a [port number](https://en.wikipedia.org/wiki/Port_(computer_networking)). If multiple servers runs at once, they would each have a different port. + * To put it simply: if your computer was a street, then this port would be an street number. + +You can stop this server at any time by pressing `Ctrl`+`C` in the terminal or by closing the terminal window. diff --git a/content/tutorials/getting-started/site-creation/new_silicate_site.jpg b/content/tutorials/getting-started/site-creation/new_silicate_site.jpg new file mode 100644 index 0000000..1f164c0 Binary files /dev/null and b/content/tutorials/getting-started/site-creation/new_silicate_site.jpg differ diff --git a/content/tutorials/more-features/_index.md b/content/tutorials/more-features/_index.md new file mode 100644 index 0000000..919bfe5 --- /dev/null +++ b/content/tutorials/more-features/_index.md @@ -0,0 +1,18 @@ ++++ +title = 'More features' +weight = 20 ++++ + +{{< warning >}} +Most tutorials in this section are still empty but are there regardless +to show you what kind of content to expect once they are done. +{{< /warning >}} + +Let's look at some of the functionalities Silicate provides. + +You should read [Getting started]({{% relref "tutorials/getting-started/" %}}) first! + +And if you are fine with how your website looks already, you can skip to +[publishing your website]({{% relRef "tutorials/publishing-online" %}}). + +We'll continue using [Pepper & Carrot](https://www.peppercarrot.com/fr/) by David Revoy as an example. diff --git a/content/tutorials/more-features/adding-translations.md b/content/tutorials/more-features/adding-translations.md new file mode 100644 index 0000000..f979bb9 --- /dev/null +++ b/content/tutorials/more-features/adding-translations.md @@ -0,0 +1,28 @@ ++++ +title = 'Adding translations' +show_toc = true +weight = 30 ++++ + +{{< warning >}} +Currently under construction. +{{< /warning >}} + + + +## Configuration for multiple languages + +{{< warning >}} +Currently under construction. +{{< /warning >}} + +## Translating the website +{{< warning >}} +Currently under construction. +{{< /warning >}} + +## Translating pages + +{{< warning >}} +Currently under construction. +{{< /warning >}} diff --git a/content/tutorials/more-features/built-in-features.md b/content/tutorials/more-features/built-in-features.md new file mode 100644 index 0000000..ba87815 --- /dev/null +++ b/content/tutorials/more-features/built-in-features.md @@ -0,0 +1,71 @@ ++++ +title = 'Silicate configurations' +show_toc = true +weight = 20 ++++ + +{{< warning >}} +Currently under construction. + +Screenshot will be added to show the result of possible configurations. +{{< /warning >}} + +Silicate has built-in feature that you can configure from +your `hugo.toml` file. + +Most of them are described in the `themes/silicate/hugo.toml` file as +well. You should have a look here to see how they are organised. + +All these configurations go into the `params.silicate` table, so +if you don't have one already, you can copy the one from +`themes/silicate/hugo.toml` or add the following to your config: + +``` +[params] + ... + [params.silicate] + # All configuration will go here +``` + + + +## Global features + +### Disabling Silicate branding + +If you want to remove the "Made with the Silicate Framework!" message +at the bottom of pages, you can simply do so by adding the following configuration: + +`show_notice = false` + +## Comic pages features + +All comic pages configurations go into the `params.silicate.pages` table, like so: + +``` +[params] + ... + [params.silicate] + ... + [params.silicate.pages] + # All pages configuration will go here +``` + +### Navbar location + +By default, Silicate will render a navigation bar below and above +the comic's strips. + +If you want the nav bar to be only below the comic's strips, you can +add the following configuration: + +`nav_above_page = false` + +### Chapter navigation + +By default, if you [group your pages into chapters]({{% relRef "tutorials/more-features/chapters-and-acts" %}}), +Silicate will add a button to navigate to the previous and next chapter of the current page. + +If you want to disable that, you can add the following configuration: + +`show_chapter_nav = false` diff --git a/content/tutorials/more-features/chapters-and-acts.md b/content/tutorials/more-features/chapters-and-acts.md new file mode 100644 index 0000000..3f1c869 --- /dev/null +++ b/content/tutorials/more-features/chapters-and-acts.md @@ -0,0 +1,29 @@ ++++ +title = 'Grouping pages into chapters, acts, etc.' +show_toc = true +weight = 10 ++++ + +{{< warning >}} +Currently under construction. +{{< /warning >}} + + + +## How to group your pages + +{{< warning >}} +Currently under construction. +{{< /warning >}} + +## Ordering groups + +{{< warning >}} +Currently under construction. +{{< /warning >}} + +## Silicate limitations + +{{< warning >}} +Currently under construction. +{{< /warning >}} diff --git a/content/tutorials/more-features/custom-css.md b/content/tutorials/more-features/custom-css.md new file mode 100644 index 0000000..79f0cb2 --- /dev/null +++ b/content/tutorials/more-features/custom-css.md @@ -0,0 +1,33 @@ ++++ +title = 'Using custom CSS' +show_toc = true +weight = 50 ++++ + +{{< warning >}} +Currently under construction. +{{< /warning >}} + +This tutorial assumes you know how CSS and HTML work. + +If you do not, you should probably look up a guide for that first. + + + +## Custom CSS location + +{{< warning >}} +Currently under construction. +{{< /warning >}} + +## CSS vs SCSS + +{{< warning >}} +Currently under construction. +{{< /warning >}} + +## How to customise the website + +{{< warning >}} +Currently under construction. +{{< /warning >}} diff --git a/content/tutorials/more-features/multiple-comics.md b/content/tutorials/more-features/multiple-comics.md new file mode 100644 index 0000000..291d9cc --- /dev/null +++ b/content/tutorials/more-features/multiple-comics.md @@ -0,0 +1,22 @@ ++++ +title = 'Multiples comics in a single website' +show_toc = true +weight = 40 ++++ + +{{< warning >}} +Currently under redaction. +{{< /warning >}} + + + +## It's just like creating a normal comic + +{{< warning >}} +Currently under redaction. +{{< /warning >}} + +## Telling Hugo the type of the pages +{{< warning >}} +Currently under redaction. +{{< /warning >}} diff --git a/content/tutorials/publishing-online.md b/content/tutorials/publishing-online.md new file mode 100644 index 0000000..f861677 --- /dev/null +++ b/content/tutorials/publishing-online.md @@ -0,0 +1,37 @@ ++++ +title = 'Publishing your website online' +show_toc = true +weight = 30 ++++ + +{{< warning >}} +Currently under construction. +{{< /warning >}} + + + +## Choosing a webhost + +{{< warning >}} +Currently under construction. +{{< /warning >}} + +## Building the website *cleanly* + +{{< warning >}} +Currently under construction. +{{< /warning >}} + +## Putting your website online + +### The easy (and *wrong*) way + +{{< warning >}} +Currently under construction. +{{< /warning >}} + +### The efficient way + +{{< warning >}} +Currently under construction. +{{< /warning >}} diff --git a/content/why_silicate.md b/content/why_silicate.md new file mode 100644 index 0000000..20e3d1e --- /dev/null +++ b/content/why_silicate.md @@ -0,0 +1,103 @@ ++++ +title = 'Why should I use Silicate?' +slug = 'why-silicate' +weight = 1 ++++ + +Silicate is a [Hugo](https://gohugo.io/) theme dedicated to creating a comic website! +You can work on your website directly on your computer then publish it on any web host you want! + +This website also provides a [handy guide]({{% relref "tutorials/" %}}) to get started! + +---------- + +> Can't I already host my webcomic on websites like Webtoon, Tapas, DeviantArt, HiveWorks, etc.? + +You could, but they are *for profit* companies, they will not have your best interest +at heart. +What if they bring you into [predatory contracts](https://www.comicsbeat.com/webtoon-originals-contract-draws-criticism-from-creators/)? +Or [fully buy into AI slop](https://news.artnet.com/art-world/deviantart-dreamup-ai-generator-creators-rights-ip-controversy-2210607)? +Or even [pull the plug](https://www.comicsbeat.com/hiveworks-comics-sunsets-publishing-program/) on some features? + +Long story short: you will never truly be in control of your website on these platforms. +And you most likely will be seen as resource. + +Putting your webcomic online *yourself* provides some security and agency, and for very little cost! + +---------- + +> Is Silicate / Hugo like WordPress? + +No, they are very different. + +WordPress is a web server : it needs an actual server running non-stop. When a person asks for a page, WordPress creates the page +on the fly. WordPress provides *dynamic* websites. + +Hugo, on the other hand, is a program that pre-creates all the pages that your +website will need, once, on your own computer. +You can then put them on your server and they will be given to the user directly. Hugo provides *static* websites. + +---------- + +> Why not use WordPress? Lots of people use WordPress! + +WordPress is everywhere, yes. Most web hosting platforms will even pre-install it for you. +But it has its drawbacks. + +WordPress alone isn't enough to host a webcomic properly. You'll need a theme and maybe a plugin. +But sometime plugins gets abandoned, like [ComicPress](https://github.com/Frumph/comicpress) which hasn't +been updated in 3 years. Then you need to change themes or plugins, and it's a *mess*. + +Also, WordPress is an actual web server - it can have [vulnerabilities](https://en.wikipedia.org/wiki/WordPress#Vulnerabilities) and be hacked. +So you need to keep it up to date. +But updates can break your plugins. +Losing hours fixing up your WordPress because it broke down aren't fun. + +And WordPress is its very own [can of worms](https://en.wikipedia.org/wiki/WP_Engine#WordPress_dispute_and_lawsuit). + + +With Hugo and Silicate, you generate a static website. Since there is no web server, there are far fewer security risks! +And there is no problem keeping the same version of Hugo and this theme forever. Even if Hugo disapears -- but why would it? +It's been around for 10 years -- and this theme is no longer updated, you'll still be able to use them forever. + +---------- + +> Come on, you're just trying to sell me Silicate. Since WordPress is still around it must have advantages! + +You are correct! Twice! +Wordpress *does* have some advantages, especially using the Toocheke [theme](#) and [plugin](#), so here's a small comparison : + +| | Silicate / Hugo | WordPress | +| ------------------------------ | ------------------------------ | ------------------------------ | +| ------------------------------ | ------------------------------ | ------------------------------ | +| Setup | Medium | **Often pre-installed by web hosts** | +| Can try without web host | **Easy** | Fairly technical | +| Complexity | **Low** | Medium | +| ------------------------------ | ------------------------------ | ------------------------------ | +| Managing content | **Very easy using text files** | Easy if using plugins only | +| GUI to manage content | Your own PC | **Dedicated GUI in web browser** | +| Multilingual support | **Built-in and easy** | Poor - need plugins | +| RSS Feed | **Built-it and automatic** | Automatic using plugins | +| Private pages for Patreons | No | **Using plugins** | +| ------------------------------ | ------------------------------ | ------------------------------ | +| Can customize styling with CSS | Easy | Easy | +| Can configure pages layout | Yes | **Yes, with visual editor** | +| Can fully customize any layout | **Yes, but technical** | No, some parts can't change | +| ------------------------------ | ------------------------------ | ------------------------------ | +| Publication method | Via file transfer (SFTP, etc.) | **Through web GUI** | +| Can publish page at set date | No (requires manual operation) | **Yes** | +| ------------------------------ | ------------------------------ | ------------------------------ | +| Security | **Secure by design** | Often vulnerable | +| Updates can break your site | **Low risk** | High risk | +| Updates are mandatory | **No** | Yes | +| Can preview update effects | **Yes** | No | +| Backups | **Locally and/or web host** | Through web host | + + +To sum it up: + +- Hugo / Silicate is lighter -- but simpler -- than WordPress +- You can **try it on your own computer without a web host** +- It is way more secure and requires less maintenance than Wordpress +- You can customise **everything** if you don't mind getting you hands dirty +- But you **can't have dynamic pages** like patreon-only and password-protected pages diff --git a/hugo.toml b/hugo.toml new file mode 100644 index 0000000..ce5e138 --- /dev/null +++ b/hugo.toml @@ -0,0 +1,40 @@ +baseURL = 'https://example.org/' +languageCode = 'en-us' +title = 'Silicate' +enableGitInfo = true + +[menus] + [[menus.main]] + name = 'Home' + pageRef = '/' + weight = 10 + + [[menus.main]] + name = 'Tutorials' + pageRef = '/tutorials' + weight = 20 + + [[menus.main]] + name = 'Demos' + pageRef = '/demos' + weight = 30 + + [[menus.main]] + name = 'Downloads' + pageRef = '/downloads' + weight = 40 + + [[menus.main]] + name = 'Q&A' + pageRef = '/q_and_a' + weight = 45 + + [[menus.main]] + name = 'About' + pageRef = '/about' + weight = 50 + +[module] + [module.hugoVersion] + extended = false + min = '0.146.0' diff --git a/layouts/_partials/footer.html b/layouts/_partials/footer.html new file mode 100644 index 0000000..f2eff5a --- /dev/null +++ b/layouts/_partials/footer.html @@ -0,0 +1,2 @@ +

Last modified: {{ .Lastmod | time.Format "January 2, 2006" }}

+

Copyright {{ now.Year }}. All rights reserved

diff --git a/layouts/_partials/head.html b/layouts/_partials/head.html new file mode 100644 index 0000000..cba58b2 --- /dev/null +++ b/layouts/_partials/head.html @@ -0,0 +1,5 @@ + + +{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }} +{{ partialCached "head/css.html" . }} +{{ partialCached "head/js.html" . }} diff --git a/layouts/_partials/head/css.html b/layouts/_partials/head/css.html new file mode 100644 index 0000000..9617855 --- /dev/null +++ b/layouts/_partials/head/css.html @@ -0,0 +1,16 @@ +{{- with resources.Get "css/main.scss" }} + {{ $opts := dict + "enableSourceMap" hugo.IsDevelopment + "outputStyle" (cond hugo.IsDevelopment "expanded" "compressed") + "vars" site.Params.styles + }} + {{ with . | toCSS $opts }} + {{- if hugo.IsDevelopment }} + + {{- else }} + {{- with . | fingerprint }} + + {{- end }} + {{- end }} + {{- end }} +{{- end }} diff --git a/layouts/_partials/head/js.html b/layouts/_partials/head/js.html new file mode 100644 index 0000000..16ffbed --- /dev/null +++ b/layouts/_partials/head/js.html @@ -0,0 +1,16 @@ +{{- with resources.Get "js/main.js" }} + {{- $opts := dict + "minify" (not hugo.IsDevelopment) + "sourceMap" (cond hugo.IsDevelopment "external" "") + "targetPath" "js/main.js" + }} + {{- with . | js.Build $opts }} + {{- if hugo.IsDevelopment }} + + {{- else }} + {{- with . | fingerprint }} + + {{- end }} + {{- end }} + {{- end }} +{{- end }} diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html new file mode 100644 index 0000000..82032c4 --- /dev/null +++ b/layouts/_partials/header.html @@ -0,0 +1,6 @@ +{{ $home := .Site.Home -}} + +{{ partial "menu.html" (dict "menuID" "main" "page" .) }} diff --git a/layouts/_partials/menu.html b/layouts/_partials/menu.html new file mode 100644 index 0000000..14245b5 --- /dev/null +++ b/layouts/_partials/menu.html @@ -0,0 +1,51 @@ +{{- /* +Renders a menu for the given menu ID. + +@context {page} page The current page. +@context {string} menuID The menu ID. + +@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }} +*/}} + +{{- $page := .page }} +{{- $menuID := .menuID }} + +{{- with index site.Menus $menuID }} + +{{- end }} + +{{- define "_partials/inline/menu/walk.html" }} + {{- $page := .page }} + {{- range .menuEntries }} + {{- $attrs := dict "href" .URL }} + {{- if $page.IsMenuCurrent .Menu . }} + {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }} + {{- else if $page.HasMenuCurrent .Menu .}} + {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }} + {{- end }} + {{- $name := .Name }} + {{- with .Identifier }} + {{- with T . }} + {{- $name = . }} + {{- end }} + {{- end }} +
  • + {{ $name }} + {{- with .Children }} +
      + {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }} +
    + {{- end }} +
    • + {{- end }} +{{- end }} diff --git a/layouts/_partials/pagesTOC.html b/layouts/_partials/pagesTOC.html new file mode 100644 index 0000000..aedef1e --- /dev/null +++ b/layouts/_partials/pagesTOC.html @@ -0,0 +1,13 @@ +{{- $page := .page }} +{{- $header_level := .header_level }} +{{- if gt $page.Pages.Len 0 }} +
      +{{ range $page.Pages }} +
    1. + {{ .Title }} + {{- $header_level := add $header_level 1 }} + {{ partial "pagesTOC.html" (dict "page" . "header_level" $header_level) }} +
      2. +{{ end }} +
    +{{ end -}} diff --git a/layouts/_partials/terms.html b/layouts/_partials/terms.html new file mode 100644 index 0000000..8a6ebec --- /dev/null +++ b/layouts/_partials/terms.html @@ -0,0 +1,23 @@ +{{- /* +For a given taxonomy, renders a list of terms assigned to the page. + +@context {page} page The current page. +@context {string} taxonomy The taxonomy. + +@example: {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }} +*/}} + +{{- $page := .page }} +{{- $taxonomy := .taxonomy }} + +{{- with $page.GetTerms $taxonomy }} + {{- $label := (index . 0).Parent.LinkTitle }} +
    +
    {{ $label }}:
    + +
    +{{- end }} diff --git a/layouts/_shortcodes/warning.html b/layouts/_shortcodes/warning.html new file mode 100644 index 0000000..6570240 --- /dev/null +++ b/layouts/_shortcodes/warning.html @@ -0,0 +1,3 @@ +
    + {{ .InnerDeindent | .Page.RenderString }} +
    diff --git a/layouts/baseof.html b/layouts/baseof.html new file mode 100644 index 0000000..39dcbec --- /dev/null +++ b/layouts/baseof.html @@ -0,0 +1,17 @@ + + + + {{ partial "head.html" . }} + + +
    + {{ partial "header.html" . }} +
    +
    + {{ block "main" . }}{{ end }} +
    +
    + {{ partial "footer.html" . }} +
    + + diff --git a/layouts/home.html b/layouts/home.html new file mode 100644 index 0000000..4167cab --- /dev/null +++ b/layouts/home.html @@ -0,0 +1,5 @@ +{{ define "main" }} + {{ .Content }} +
    + {{ partial "pagesTOC.html" (dict "page" . "header_level" 2) }} +{{ end }} diff --git a/layouts/page.html b/layouts/page.html new file mode 100644 index 0000000..9e0317f --- /dev/null +++ b/layouts/page.html @@ -0,0 +1,33 @@ +{{ define "main" }} + {{- $next_page := .CurrentSection.Pages.Prev . }} + {{- $current := . }} + {{- range .Ancestors }} + {{ with .Pages.Prev $current }} + {{ $next_page = . }} + {{ break }} + {{ end }} + {{ $current = . }} + {{- end }} + {{- $prev_page := .CurrentSection.Pages.Next . }} + {{- $prev_section := .Parent }} +

    {{ .Title }}

    +

    Reading time: about {{ .ReadingTime }} min

    +
    + +
    + {{ .Summary }} + {{- if .Params.show_toc -}} +
    + {{ .TableOfContents }} +
    + {{- end }} + {{ .ContentWithoutSummary }} +
    + +{{ end }} diff --git a/layouts/section.html b/layouts/section.html new file mode 100644 index 0000000..f5fff01 --- /dev/null +++ b/layouts/section.html @@ -0,0 +1,50 @@ +{{ define "main" }} + {{- $prev_page := false }} + {{- /* Try to get the previous sibling */}} + {{- with .Parent.Pages.Next . }} + + {{- /* Check if it's a section, if yes, get it's last page */}} + {{- if (and .IsSection (gt .Pages.Len 0 )) }} + {{- $prev_page = index .Pages.Reverse 0 }} + {{ else }} + {{- $prev_page = . }} + {{ end }} + + {{ else }} + + {{- /* No previous sibling, use the parent itself */}} + {{- $prev_page = .Parent }} + + {{ end }} + + {{- $next_page := false }} + + {{- if gt .Pages.Len 0 }} + {{- $next_page = index .Pages 0 }} + {{- else }} + {{- with .Parent.Pages.Prev . }} + {{- $next_page = . }} + {{ end }} + {{- end }} + + {{- $reading_time := 0}} + {{- range .RegularPagesRecursive }} + {{- $reading_time = add $reading_time .ReadingTime}} + {{- end}} +

    {{ .Title }}

    +

    Total reading time: about {{ $reading_time }} min

    +
    + +
    + {{ .Content }} +
    + {{ partial "pagesTOC.html" (dict "page" . "header_level" 2) }} +
    + +{{ end }} diff --git a/layouts/taxonomy.html b/layouts/taxonomy.html new file mode 100644 index 0000000..c2e7875 --- /dev/null +++ b/layouts/taxonomy.html @@ -0,0 +1,7 @@ +{{ define "main" }} +

    {{ .Title }}

    + {{ .Content }} + {{ range .Pages }} +

    {{ .LinkTitle }}

    + {{ end }} +{{ end }} diff --git a/layouts/term.html b/layouts/term.html new file mode 100644 index 0000000..c2e7875 --- /dev/null +++ b/layouts/term.html @@ -0,0 +1,7 @@ +{{ define "main" }} +

    {{ .Title }}

    + {{ .Content }} + {{ range .Pages }} +

    {{ .LinkTitle }}

    + {{ end }} +{{ end }} diff --git a/static/favicon.ico b/static/favicon.ico new file mode 100644 index 0000000..67f8b77 Binary files /dev/null and b/static/favicon.ico differ diff --git a/static/silicate_bg.png b/static/silicate_bg.png new file mode 100644 index 0000000..9cd9e0a Binary files /dev/null and b/static/silicate_bg.png differ