+
A blog theme for [zola](https://www.getzola.org), simple and clean @@ -50,6 +50,5 @@ A blog theme for [zola](https://www.getzola.org), simple and clean ## Contributing - Before you make any non-trivial changes, you may want to open an issue so we can discuss -- If you got any idea inspired by another blog theme or website and want to have that in serene, I'd like to hear about it \ No newline at end of file diff --git a/docs/content/themes/serene/screenshot.png b/docs/content/themes/serene/screenshot.png index 0d3b1f8264..0c7e33d670 100644 Binary files a/docs/content/themes/serene/screenshot.png and b/docs/content/themes/serene/screenshot.png differ diff --git a/docs/content/themes/shadharon/index.md b/docs/content/themes/shadharon/index.md index dc3ebb3d2c..0a8f6ef047 100644 --- a/docs/content/themes/shadharon/index.md +++ b/docs/content/themes/shadharon/index.md @@ -3,11 +3,11 @@ title = "shadharon" description = "Simple blog theme powered by Zola" template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/syedzayyan/shadharon" homepage = "https://github.com/syedzayyan/shadharon" minimum_version = "0.4.0" diff --git a/docs/content/themes/simple-dev-blog/index.md b/docs/content/themes/simple-dev-blog/index.md index 9aae2eab13..52bcdb8b72 100644 --- a/docs/content/themes/simple-dev-blog/index.md +++ b/docs/content/themes/simple-dev-blog/index.md @@ -3,11 +3,11 @@ title = "simple-dev-blog" description = "A simple dev blog theme with no javascript, prerendered linked pages and SEO tags." template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/bennetthardwick/simple-dev-blog-zola-starter.git" homepage = "https://github.com/bennetthardwick/simple-dev-blog-zola-starter" minimum_version = "0.4.0" diff --git a/docs/content/themes/slim/index.md b/docs/content/themes/slim/index.md index 579342d89d..9044e45b4d 100644 --- a/docs/content/themes/slim/index.md +++ b/docs/content/themes/slim/index.md @@ -3,11 +3,11 @@ title = "Slim" description = "Slim is a minimal, clean and beautiful theme for Zola." template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/jameshclrk/zola-slim.git" homepage = "https://github.com/jameshclrk/zola-slim" minimum_version = "0.8.0" diff --git a/docs/content/themes/soapstone/index.md b/docs/content/themes/soapstone/index.md index 20f599c975..5b45ed65d2 100644 --- a/docs/content/themes/soapstone/index.md +++ b/docs/content/themes/soapstone/index.md @@ -3,11 +3,11 @@ title = "Soapstone" description = "A bare bones dark theme with some color tweakability" template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/MattyRad/soapstone.git" homepage = "https://github.com/MattyRad/soapstone" minimum_version = "0.4.0" diff --git a/docs/content/themes/solar-theme-zola/index.md b/docs/content/themes/solar-theme-zola/index.md index dd0166152b..385c470613 100644 --- a/docs/content/themes/solar-theme-zola/index.md +++ b/docs/content/themes/solar-theme-zola/index.md @@ -3,11 +3,11 @@ title = "solar-theme-zola" description = "A port of solar-theme-hugo for zola" template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/hulufei/solar-theme-zola.git" homepage = "https://github.com/hulufei/solar-theme-zola" minimum_version = "0.4.0" diff --git a/docs/content/themes/tabi/index.md b/docs/content/themes/tabi/index.md index 190461de1e..8e478950f3 100644 --- a/docs/content/themes/tabi/index.md +++ b/docs/content/themes/tabi/index.md @@ -1,57 +1,63 @@ +++ title = "tabi" -description = "A fast, lightweight, and modern Zola theme with optional JavaScript, and a perfect Lighthouse score." +description = "A fast, lightweight, and modern Zola theme with multi-language support, optional JavaScript, and a perfect Lighthouse score" template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/welpo/tabi.git" homepage = "https://github.com/welpo/tabi" -minimum_version = "0.9.0" +minimum_version = "0.17.0" license = "MIT" demo = "https://welpo.github.io/tabi" [extra.author] name = "Óscar Fernández" -homepage = "https://welpo.ooo" +homepage = "https://osc.garden" +++ # tabi -A fast, lightweight, and modern [Zola](https://getzola.org) theme. It aims to be a personal page and home to blog posts. +A fast, lightweight, and modern [Zola](https://getzola.org) theme with multi-language support. It aims to be a personal page and home to blog posts. -See a live preview [here](https://welpo.github.io/tabi). +See a live preview (and the theme's documentation) [here](https://welpo.github.io/tabi). > tabi (旅): Journey. - + tabi has a perfect score on Google's Lighthouse audit: - + ## Features +- [X] [Comprehensive multi-language support](https://welpo.github.io/tabi/blog/faq-languages/#how-does-tabi-handle-multilingual-support). Add as many languages as you wish. +- [X] [Set any language as default](https://welpo.github.io/tabi/blog/faq-languages/#how-do-i-set-a-default-language-for-my-site). Set your base site to Chinese, Spanish, French, Hindi… or any [other supported language](/i18n). The theme's interface will be translated accordingly. - [X] Dark and light themes. Defaults to the OS setting, with a switcher in the navigation bar. +- [X] Support for [comments using giscus, utterances, Hyvor Talk, or Isso](https://welpo.github.io/tabi/blog/comments/). - [X] Perfect Lighthouse score (Performance, Accessibility, Best Practices and SEO). - [X] [KaTeX](https://katex.org/) support. -- [X] All JavaScript (theme switcher and KaTeX) can be fully disabled. -- [X] Responsive design. -- [X] Projects page. -- [X] Archive page. +- [X] All JavaScript can be [fully disabled](https://welpo.github.io/tabi/blog/javascript/). +- [X] [Customizable skins](https://welpo.github.io/tabi/blog/customise-tabi/). +- [X] [Stylized feed](https://welpo.github.io/tabi/atom.xml). +- [X] [Projects page](https://welpo.github.io/tabi/projects/). +- [X] [Archive page](https://welpo.github.io/tabi/archive/). +- [x] [Table of Contents](https://welpo.github.io/tabi/blog/toc/). - [x] Tags. - [x] Social links. +- [X] Responsive design. - [X] Code syntax highlighting. -- [X] [Custom shortcodes](./templates/shortcodes/). -- [X] Customizable secure headers. - -See the project's roadmap [here](https://github.com/users/welpo/projects/1). +- [X] [Customizable secure headers](https://welpo.github.io/tabi/blog/security/). +- [X] [Custom shortcodes](https://welpo.github.io/tabi/blog/shortcodes/). ## Quick start +Once you have installed Zola 0.17.0 or newer: + ```bash git clone https://github.com/welpo/tabi.git cd tabi @@ -117,22 +123,40 @@ section_path = "blog/_index.md" ``` [extra] -header = {title = "Hello! I'm tabi~", img = "$BASE_URL/img/main.webp" } +header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Your Name" } ``` The content outside the front matter will be rendered between the header title and the posts listing. In the screenshot above, it's the text that reads "tabi is a fast, lightweight, and modern Zola theme…". +6. If you want a multilingual site, you will need to set up each language. In `config.toml`, set the title and taxonomies for each language, like: + +```toml +[languages.es] +title = "~/tabi" +taxonomies = [{name = "tags", feed = true}] +``` + +You will need an `_index.{language_code}.md` per language for each section (e.g. /blog or /projects) that you want to enable in that language. + +The same is true for individual posts, which should have the exact same name as the default language, with an extra `.{code}` before the extension (e.g. the Spanish version of `security.md` would be `security.es.md`). + +This configuration allows the language switcher to take the user to the translation of the current URL. If a translation doesn't exist, the 404 page will be displayed, with an explanation in each language set in the config. + +To learn more about multilingual support, see the [Frequently Asked Questions](https://welpo.github.io/tabi/blog/faq-languages/). + ## Inspiration This theme was inspired by: -- [shadharon](https://github.com/syedzayyan/shadharon). tabi started as a fork of [syedzayyan](https://github.com/syedzayyan)'s theme. -- [tailwind-nextjs-starter-blog](https://github.com/timlrx/tailwind-nextjs-starter-blog) -- [tale-zola](https://github.com/aaranxu/tale-zola) -- [internetVin's blog](https://internetvin.ghost.io) +- [shadharon](https://github.com/syedzayyan/shadharon) — tabi started as a fork of [syedzayyan](https://github.com/syedzayyan)'s theme; +- [tailwind-nextjs-starter-blog](https://github.com/timlrx/tailwind-nextjs-starter-blog); +- [abridge](https://github.com/Jieiku/abridge); +- [internetVin's blog](https://internetvin.ghost.io). ## Contributing -Please do! Take a look at the [Contributing Guidelines](/CONTRIBUTING.md) to learn more. +Please do! We appreciate bug reports, improvements to translations or documentation (however minor), feature requests… + +Take a look at the [Contributing Guidelines](/CONTRIBUTING.md) to learn more. ## License diff --git a/docs/content/themes/tabi/screenshot.png b/docs/content/themes/tabi/screenshot.png index 564f6b1b97..2ac8034abd 100644 Binary files a/docs/content/themes/tabi/screenshot.png and b/docs/content/themes/tabi/screenshot.png differ diff --git a/docs/content/themes/tale-zola/index.md b/docs/content/themes/tale-zola/index.md index 36044c0e82..090e561725 100644 --- a/docs/content/themes/tale-zola/index.md +++ b/docs/content/themes/tale-zola/index.md @@ -3,11 +3,11 @@ title = "tale-zola" description = "Tala-Zola is a minimal Zola theme helping you to build a nice and seo-ready blog." template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/aaranxu/tale-zola.git" homepage = "https://github.com/aaranxu/tale-zola" minimum_version = "0.13.0" diff --git a/docs/content/themes/tilde/index.md b/docs/content/themes/tilde/index.md index fe2872d939..66f9448f1b 100644 --- a/docs/content/themes/tilde/index.md +++ b/docs/content/themes/tilde/index.md @@ -3,11 +3,11 @@ title = "tilde" description = "Simple theme to match the dracula tilde css" template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://git.sr.ht/~savoy/tilde" homepage = "https://git.sr.ht/~savoy/tilde" minimum_version = "0.4.0" diff --git a/docs/content/themes/toucan/index.md b/docs/content/themes/toucan/index.md index ec9a1c3453..1584339b64 100644 --- a/docs/content/themes/toucan/index.md +++ b/docs/content/themes/toucan/index.md @@ -3,11 +3,11 @@ title = "Toucan" description = "Inspired from Pelican default theme" template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://git.42l.fr/HugoTrentesaux/toucan.git" homepage = "https://git.42l.fr/HugoTrentesaux/toucan" minimum_version = "0.8.0" diff --git a/docs/content/themes/zerm/index.md b/docs/content/themes/zerm/index.md index c6070be2f1..3ee1e912cd 100644 --- a/docs/content/themes/zerm/index.md +++ b/docs/content/themes/zerm/index.md @@ -3,11 +3,11 @@ title = "zerm" description = "A minimalistic and dark theme based on Radek Kozieł's theme for Hugo" template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/ejmg/zerm.git" homepage = "https://github.com/ejmg/zerm" minimum_version = "0.8.0" diff --git a/docs/content/themes/zhuia/index.md b/docs/content/themes/zhuia/index.md index 0f33db706b..1be7f5b4dd 100644 --- a/docs/content/themes/zhuia/index.md +++ b/docs/content/themes/zhuia/index.md @@ -3,11 +3,11 @@ title = "Zhuia" description = "An elegant but still playful theme for Zola." template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/gicrisf/zhuia.git" homepage = "https://github.com/gicrisf/zhuia" minimum_version = "0.15.0" diff --git a/docs/content/themes/zola-henry/index.md b/docs/content/themes/zola-henry/index.md index ad85038e0a..13d48a0907 100644 --- a/docs/content/themes/zola-henry/index.md +++ b/docs/content/themes/zola-henry/index.md @@ -3,11 +3,11 @@ title = "henry" description = "A timeless blog theme" template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/sirodoht/zola-henry.git" homepage = "https://github.com/sirodoht/zola-henry" minimum_version = "0.4.0" diff --git a/docs/content/themes/zola-paper/index.md b/docs/content/themes/zola-paper/index.md index b2179b3d35..fc5ff0b540 100644 --- a/docs/content/themes/zola-paper/index.md +++ b/docs/content/themes/zola-paper/index.md @@ -3,11 +3,11 @@ title = "zola-paper" description = "A clean theme inspired from hugo-paper." template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/schoenenberg/zola-paper.git" homepage = "https://github.com/schoenenberg/zola-paper" minimum_version = "0.11.0" diff --git a/docs/content/themes/zola-pickles/index.md b/docs/content/themes/zola-pickles/index.md index 85b0584ea6..384a5b5d52 100644 --- a/docs/content/themes/zola-pickles/index.md +++ b/docs/content/themes/zola-pickles/index.md @@ -3,11 +3,11 @@ title = "pickles" description = "A modern, simple, clean blog theme for Zola." template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/lukehsiao/zola-pickles.git" homepage = "https://github.com/lukehsiao/zola-pickles" minimum_version = "0.13.0" @@ -19,10 +19,24 @@ name = "Luke Hsiao" homepage = "https://luke.hsiao.dev" +++ -# Pickles -Pickles is a clean, responsive blog theme for [Zola](https://www.getzola.org/) based on the Hugo theme with the same name featuring pagination. - - +
+ 🥒
+ zola-pickes
+
+
+ Pickles is a clean, responsive blog theme for Zola based on the Hugo theme with the same name.
+
++ +
+ + + ## Installation First download this theme to your `themes` directory: @@ -37,8 +51,7 @@ and then enable it in your `config.toml`: theme = "zola-pickles" ``` -The theme requires putting the posts in the root of the `content` folder and to -enable pagination, for example in `content/_index.md`: +The theme requires putting the posts in the root of the `content` folder and to enable pagination, for example in `content/_index.md`. ``` +++ @@ -72,14 +85,11 @@ instantpage_enable = false A full example configuration is included in config.toml. -Note how pickles also expects `title` and `description` to also be set in the -Zola configuration. +Note how pickles also expects `title` and `description` to also be set in the Zola configuration. ### KaTeX math formula support -This theme contains math formula support using [KaTeX](https://katex.org/), -which can be enabled by setting `katex_enable = true` in the `extra` section -of `config.toml`. +This theme contains math formula support using [KaTeX](https://katex.org/), which can be enabled by setting `katex_enable = true` in the `extra` section of `config.toml`. After enabling this extension, the `katex` short code can be used in documents: * `{%/* katex(block=true) */%}\KaTeX{%/* end */%}` to typeset a block of math formulas, @@ -87,7 +97,7 @@ After enabling this extension, the `katex` short code can be used in documents: ### Figure Shortcode -This them also includes a figure shortcode for convenience in captioning figures. +The figure shortcode is convenient for captioning figures. ``` {%/* figure(link="https://www.example.com/", src="https://www.example.com/img.jpeg", alt="sample alt text") */%} @@ -95,21 +105,30 @@ Your caption here. {%/* end */%} ``` +### Table Shortcode + +The table shortcode is convenient for making mobile-friendly tables (centered with overflow scrollbar). + +``` +{%/* table() */%} +| Item | Price | # In stock | +| :----------- | ----: | ---------: | +| Juicy Apples | 1.99 | 739 | +| Bananas | 1.89 | 6 | +{%/* end */%} +``` + ### Fontawesome This theme includes fontawesome, so that fontawesome icons can be directly used. ### Instant.page -The theme contains instant.page prefetching. This can be enabled by setting -`instantpage_enable = true` in the `extra` section of `config.toml`. +The theme contains instant.page prefetching. This can be enabled by setting `instantpage_enable = true` in the `extra` section of `config.toml`. ## Showing article summaries -By default, the theme will use the first 280 characters of your post as a -summary, if a proper [page -summary](https://www.getzola.org/documentation/content/page/#summary) using -`` is not provided. For more sensible summaries, we recommend using -the manual more indicator. +By default, the theme will use the first 280 characters of your post as a summary, if a proper [page summary](https://www.getzola.org/documentation/content/page/#summary) using `` is not provided. +For more sensible summaries, we recommend using the manual more indicator. \ No newline at end of file diff --git a/docs/content/themes/zola-pickles/screenshot.png b/docs/content/themes/zola-pickles/screenshot.png index 0e35c36cde..a5613da1b8 100644 Binary files a/docs/content/themes/zola-pickles/screenshot.png and b/docs/content/themes/zola-pickles/screenshot.png differ diff --git a/docs/content/themes/zola-theme-course/index.md b/docs/content/themes/zola-theme-course/index.md index 03dc27ca56..0a00c93514 100644 --- a/docs/content/themes/zola-theme-course/index.md +++ b/docs/content/themes/zola-theme-course/index.md @@ -3,11 +3,11 @@ title = "Course" description = "A zola theme designed for online courses or tutorials" template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/elegaanz/zola-theme-course.git" homepage = "https://github.com/elegaanz/zola-theme-course" minimum_version = "0.17.1" diff --git a/docs/content/themes/zola-theme-hikari/index.md b/docs/content/themes/zola-theme-hikari/index.md index 0b5fa96644..6937993d22 100644 --- a/docs/content/themes/zola-theme-hikari/index.md +++ b/docs/content/themes/zola-theme-hikari/index.md @@ -3,11 +3,11 @@ title = "Hikari" description = "Fluid, responsive blog theme for Zola" template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/waynee95/zola-theme-hikari.git" homepage = "https://github.com/waynee95/zola-theme-hikari" minimum_version = "0.5.1" diff --git a/docs/content/themes/zola-theme-terminimal/index.md b/docs/content/themes/zola-theme-terminimal/index.md index 4a7056efd0..88ecd81870 100644 --- a/docs/content/themes/zola-theme-terminimal/index.md +++ b/docs/content/themes/zola-theme-terminimal/index.md @@ -3,11 +3,11 @@ title = "terminimal" description = "A simple, minimal retro theme" template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/pawroman/zola-theme-terminimal.git" homepage = "https://github.com/pawroman/zola-theme-terminimal" minimum_version = "0.11.0" diff --git a/docs/content/themes/zola.386/index.md b/docs/content/themes/zola.386/index.md index ca2e6570cb..1b54a91ef8 100644 --- a/docs/content/themes/zola.386/index.md +++ b/docs/content/themes/zola.386/index.md @@ -3,11 +3,11 @@ title = "zola.386" description = "Zola port of the BOOTSTRA.386 theme." template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/lopes/zola.386.git" homepage = "https://github.com/lopes/zola.386" minimum_version = "0.10.1" diff --git a/docs/content/themes/zola_easydocs_theme/index.md b/docs/content/themes/zola_easydocs_theme/index.md index 82c7bb17c7..9b3f087a07 100644 --- a/docs/content/themes/zola_easydocs_theme/index.md +++ b/docs/content/themes/zola_easydocs_theme/index.md @@ -3,11 +3,11 @@ title = "EasyDocs" description = "An easy way to create docs for your project" template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/codeandmedia/zola_easydocs_theme.git" homepage = "https://github.com/codeandmedia/zola_easydocs_theme" minimum_version = "0.13.0" diff --git a/docs/content/themes/zolarwind/index.md b/docs/content/themes/zolarwind/index.md new file mode 100644 index 0000000000..ebce06a0de --- /dev/null +++ b/docs/content/themes/zolarwind/index.md @@ -0,0 +1,397 @@ + ++++ +title = "Zolarwind" +description = "A localizable blog theme using Tailwind CSS for styling and KaTex for math" +template = "theme.html" +date = 2023-09-15T21:56:17+02:00 + +[extra] +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 +repository = "https://github.com/thomasweitzel/zolarwind.git" +homepage = "https://github.com/thomasweitzel/zolarwind" +minimum_version = "0.17.0" +license = "MIT" +demo = "https://pureandroid.com" + +[extra.author] +name = "Thomas Weitzel" +homepage = "https://weitzel.dev" ++++ + + + +# The Zolarwind Theme for Zola + +Welcome to Zolarwind, the simple Zola blog theme with Tailwind CSS and KaTex support. +This theme is for Zola users aiming to have a nice blog design powered by Tailwind CSS. +Additionally, the theme smoothly integrates math formulas using [KaTex](https://katex.org). +Most importantly, while the theme is designed to be easily localizable, you can choose your preferred language setting for a consistent blog experience. + +--- + +## Features: + +- **Tailwind CSS**: Utilize the utility-first CSS framework for rapid UI development. + +- **KaTex Integration**: Integrate and display math formulas seamlessly in your blog posts. + +- **Localization Support**: All theme-specific strings are available in multiple languages; choose the one that's right for you. + If your language isn't supported yet, just create the resource file with your translations. + +--- + +## Table of Contents: +- Demo Website +- Prerequisites +- Installation +- Configuration +- Front Matter +- Localization +- Integrating in theme folder +- Development +- Remarks +- Contributing +- License + +--- + +## Demo Website + +You can see the theme in action on my [personal website](https://pureandroid.com). +The site uses the German language. + +--- + +## Prerequisites + +In order to use the theme, you need some software pre-installed: + +- [Git](https://git-scm.com/downloads), Required for version control. + +- [Node](https://nodejs.org/en/download), an open-source, cross-platform JavaScript runtime environment. + +- [Zola](https://github.com/getzola/zola/releases), a fast static site generator. + +- an editor or integrated development environment of your choice - I use [JetBrains IDEA](https://www.jetbrains.com/idea/download), + an IDE that makes development a more productive and enjoyable experience. + +--- + +## Installation + +1. Clone this theme repository with e.g. `git@github.com:thomasweitzel/zolarwind.git`. + Or download it from `https://github.com/thomasweitzel/zolarwind`. + +2. Make adjustments to the `config.toml` file as needed. + In order to run the theme as a standalone site, you need to adjust the `base_url` to your domain. + If you want to try it out on your local machine, you can leave it as is. + Just run `zola serve` from the theme's root directory. + +--- + +## Configuration + +Your `config.toml` file is crucial in customizing the Zola site. +Here's a breakdown of the configuration settings tailored for this theme: + +### Basic Configuration: + +- **base_url**: Specifies the URL the site will be built for. + In this case, the site will be built for `https://example.org`. + Adjust this to your own domain. + +- **compile_sass**: Determines whether to automatically compile all Sass files present in the `sass` directory. + Here, it's set to `false`, meaning Sass files won't be automatically compiled for this theme. + +- **default_language**: Sets the default language for the site. + The provided config uses English (`en`) as the default language. + As of now, German (`de`) is available in the `i18n` directory. + +- **theme**: The theme used for the site. + The provided line is commented out, indicating that the themes files are taken from the `template` directory. + If you move the theme to the `themes/zolarwind` directory, use `zolarwind` for this entry. + +- **build_search_index**: If set to `true`, a search index will be built from the pages and section content for the `default_language`. + In this configuration and for this theme, it's disabled (`false`). + +- **generate_feed**: Determines if an Atom feed (file `atom.xml`) is automatically generated. + It's set to `true`, meaning a feed will be generated. + +- **taxonomies**: An array of taxonomies (classification systems) used for the site. + Here, a taxonomy for `tags` is defined, with a pagination limit of 6 and an enabled feed. + +### Markdown Configuration: + +- **highlight_code**: Indicates whether code snippets in Markdown files should be highlighted. Here, it's set to `true`. + +- **highlight_theme**: Specifies the theme to be used for code highlighting. The chosen theme in this configuration is `1337`. + +### Extra Configuration: + +The `[extra]` section is where you can place any custom variables you want to be accessible in your templates. + +- **title**: The title of the site. + Here, it's set to "Zolarwind". + +- **generator**: Optional. + Specifies the generator used for creating the static website. + This site is generated using `Zola v0.17.2`. + +- **path_language_resources**: The path to the directory containing language resource files. + In this config, it's set to `i18n/`. + If you move the theme to the `themes/zolarwind` directory, use `themes/zolarwind/i18n/` for this entry. + +- **favicon_svg**: Provides a path to the site's favicon in SVG format. + The provided path points to `/img/yin-yang.svg`. + +- **copyright**: A template for the copyright notice. + It includes a placeholder `{year}` which is dynamically replaced with the current year of your `zola build` run. + +- **site_description**: A brief description displayed on the site's banner. + +- **quote**: A structure defining a quote and its author. + This quote is from Yoda. + +- **menu_pages**: An array of main navigation menu items. + Each item has a `title` and a `url`. + +- **footer_pages**: An array of pages that will appear in the site's footer. + Each item has a `title` and a `url`. + +- **social_links**: An array of social media links. + Each link has a name, a boolean indicating if it's enabled, a URL, and an SVG icon. + +--- + +## Front matter + +For blog posts (Markdown files in folder `content/blog`), this theme uses a directory structure where each post has its own folder. +This way, I have all resources for a post in one place. +It can include images, videos, and other files. + +Each post is associated with an image, that is displayed on the blog's main page and on the posts detail page. +If you do not provide an image under `extra.image`, a default image is used instead. + +- **date**: the date of the blog posts, e.g. `2020-06-11`. + +- **title**: the title of the blog posts, e.g. `The Game of Fifteen`. + +- **description**: the description of the blog posts. It is used as a summary on the blog's main page. + +- **authors**: an optional array of all the posts authors, e.g. `["Thomas Weitzel"]`. + You can leave it empty, but then the first author will show up as `Unknown` in the feed (`atom.xml`). + +- **taxonomies**: only the optional `tags` taxonomy is used by this theme. + I tend to list programming languages used in the post, e.g. `["rust", "javascript"]`. + You can omit it, but then the post will not show up under `tags`. + +- **extra.math**: either `false` (default) or `true`. + If set to `true`, the post will be rendered with KaTex support for displaying math formulas. + If the entry is omitted or set to `false`, the post will not have KaTex support. + +- **extra.image**: an optional image for the post. + If omitted, a default image is used instead. + The image is displayed on the blog's main page and on the posts detail page. + +--- + +## Localization + +Consider this text on a page where a blog post is published as an example: `Published on July 04, 2023; 1,234 words`. +If your blog is in the German language, you want to have `Veröffentlicht am 04. Juli 2023; 1.234 Wörter` instead. +Not only the text should be translated, but also the date and number formats are different. +And you want a text like `1 word` or `1 Wort`, because the singular form should be used where applicable. +This theme takes care of that. + +To localize your blog with this theme: + +1. Pick your desired language by setting the `default_language` in `config.toml`. + As of now, English (`en`) and German (`de`) have language resources available in the `i18n` directory. + If your language is not supported yet, just create a new resource file with your translations. + Use the file `en.toml` as a template for your own translations. + Use the correct language code for the file name, e.g. `eo.toml` for Esperanto. + Only languages that read from left-to-right (ltr) are supported by this theme. + +2. The theme will automatically display all theme-specific string resources in the chosen language. + +3. The content that you provide should match this language. + But that is your responsibility. + The theme will not translate your content. + +If you need to define your own date format, look [here](https://docs.rs/chrono/latest/chrono/format/strftime/index.html) for supported specifiers. + +--- + +## Integrating in theme folder + +This project is structured as a stand-alone Zola site. +This section is for those who might want to integrate the theme into an existing Zola website. +You can do so by moving the relevant theme files to the `themes/zolarwind` directory. +All other files stay in the root directory. +If you have your own files there, you need to merge them with the ones from this theme. +You also need to adjust the `config.toml` and `package.json` files in the root accordingly. + +I will only show you the relevant directories that need to be moved. +This is the directory structure of the stand-alone site, where the theme is in the root directory: + +``` +/ +├── css +├── i18n +├── static +│ ├── css +│ ├── img +│ └── js +├── templates +└── theme.toml +``` + +Create a new directory `themes/zolarwind` and move the following files and directories there: + +``` +/ +├── static +│ └── css +└── themes + └── zolarwind + ├── css + ├── i18n + ├── static + │ ├── img + │ └── js + ├── templates + └── theme.toml +``` + +The `static/css` directory is a special case. +It contains the generated Tailwind CSS file with the name `generated.css`. +It will stay in its original location. +This file is generated from the file `css/main.css`, which is the input for the CSS generation. +The generation process can be triggered with a script in the `package.json` file. +**You only need to adjust and run the script** in `package.json` if you make changes to the theme's template files or use new Tailwind CSS classes directly in your content files. +Since the source file `css/main.css` has moved to the directory `themes/zolarwind/css/main.css`, we need to adjust the script in `package.json` accordingly. + +This is how the relevant part of it looks like for the stand-alone site: + +```json +"scripts": { + "css:build": "npx tailwindcss -i ./css/main.css -o ./static/css/generated.css --minify", + "css:watch": "npx tailwindcss -i ./css/main.css -o ./static/css/generated.css --watch", + "server": "zola serve" +} +``` + +Now change it so that the input file `css/main.css` will be the file `themes/zolarwind/css/main.css`: + +```json +"scripts": { + "css:build": "npx tailwindcss -i ./themes/zolarwind/css/main.css -o ./static/css/generated.css --minify", + "css:watch": "npx tailwindcss -i ./themes/zolarwind/css/main.css -o ./static/css/generated.css --watch", + "server": "zola serve" +} +``` + +Since you now use Zolarwind as a theme, you need to declare it in the `config.toml` file. +The theme's files have moved to the directory `themes/zolarwind`, so you need to adjust the only reference to the theme's files in the `config.toml` file accordingly by changing the `path_language_resources` entry: + +```toml +# The site theme to use +theme = "zolarwind" + +# ... + +# Path to the language resource files +path_language_resources = "themes/zolarwind/i18n/" +``` + +--- + +## Development + +If you want to adjust the CSS of the theme to your needs, you will need to edit the files in the `templates` and `css` directories. +While you do this, you should make sure that the CSS file `static/css/generated.css` is up-to-date. +This file is generated from the file `css/main.css`, and all the files that are configured as a pattern in `tailwind.config.js`: + +- `css/main.css` + +- `themes/**/*.html` + +- `templates/**/*.html` + +- `content/**/*.md` + +So whenever one of these files changes, you need to run the script `css:build` from the `package.json` file. +To accomplish this, you need to have `Node.js` and all dependencies from `package.json` installed (with `npm install`). +Then you can run the script with `npm run css:watch`. +It monitors all files mentioned above and triggers the CSS generation whenever a relevant file changes. +This ensures, that the file `static/css/generated.css` is always up-to-date. + +I recommend to have two terminals open. +In one terminal, run `zola serve` to start the Zola server. +In the other terminal, run `npm run css:watch` to start the CSS generation whenever a relevant file changes. + +That way, your local web browser will automatically reload the page with the updated CSS whenever you change a file. + +--- + +## Remarks + +### Typography for markdown + +I'm not using `@tailwindcss/typography` for styling of markdown files. +I don't like how it looks. +Instead, I use `@apply` in the `css/main.css` file. +The `@apply` directive in Tailwind CSS enables you to compose utility classes into custom CSS classes. +This makes it possible to apply multiple utility styles within a single class, making it efficient to style markdown content. + +This approach has pros and cons. +But it gives me fine-grained control over how the end result looks like. +While it is time-consuming, I prefer this solution over the `@tailwindcss/typography` plugin. + +Yes, I'm reinventing the wheel here, because for common typographic patterns, I'm just recreating what's already provided by the typography plugin. + +### Serve KaTex files locally + +All KaTex files are included in the `static` directory for this theme. +Using KaTeX (or any other library) by serving it from a Content Delivery Network (CDN) has implications concerning the General Data Protection Regulation (GDPR) and the use of cookies: + +- **Third-Party Requests & Data Privacy**: When you load resources from a CDN, it triggers third-party requests to the CDN's servers. + These servers might log your IP address, user agent, and other request-related metadata. + Under GDPR, IP addresses can be considered personal data. + By serving KaTeX from your domain, you reduce third-party data transfers, limiting the amount of personal data you expose to external entities. + +- **Cookies**: Many CDNs set cookies for various reasons, including analytics or performance optimizations. + These cookies can track users across different websites that use the same CDN, potentially infringing on their privacy rights. + By hosting KaTeX on your domain, you have full control over the cookies set and can ensure compliance with GDPR. + +- **Consent**: If you're using a CDN that sets cookies or collects data, you might need to get explicit user consent before loading resources from that CDN. + This can complicate user experience and lead to a reduced site performance for users who opt-out. + By self-hosting, you circumvent this issue. + +- **Transparency & Control**: By self-hosting, you know exactly which version of KaTeX you're using and can ensure there are no modifications or unexpected behaviors. + With CDNs, there's a minor risk of the library being compromised, which could affect all sites using that resource. + +- **Data Transfer Outside the EU**: If the CDN servers are located outside the European Union, you might be transferring data out of the EU, + which adds another layer of GDPR compliance requirements. + By self-hosting, you ensure that user data doesn't leave the region unless you specifically choose a hosting solution outside the EU. + +--- + +## Contributing + +Contributions are always welcome! +If you see areas of improvement or want to add features, please submit a PR. + +I'm especially interested in more translations. +See folder `i18n` for what's available and what is not. +Just use the file `en.toml` as a template for your own translations. + +--- + +## License + +This theme is under the MIT License. +For details, please refer to the LICENSE file. + + \ No newline at end of file diff --git a/docs/content/themes/zolarwind/screenshot.png b/docs/content/themes/zolarwind/screenshot.png new file mode 100644 index 0000000000..0f3ac42035 Binary files /dev/null and b/docs/content/themes/zolarwind/screenshot.png differ diff --git a/docs/content/themes/zolastrap/index.md b/docs/content/themes/zolastrap/index.md index a8e0f37afc..ccb2e9cfce 100644 --- a/docs/content/themes/zolastrap/index.md +++ b/docs/content/themes/zolastrap/index.md @@ -3,11 +3,11 @@ title = "zolastrap" description = "A bootstrap theme for zola" template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/marcodpt/zolastrap.git" homepage = "https://github.com/marcodpt/zolastrap" minimum_version = "0.14.1" diff --git a/docs/content/themes/zplit/index.md b/docs/content/themes/zplit/index.md index e50594c843..8f40aba17f 100644 --- a/docs/content/themes/zplit/index.md +++ b/docs/content/themes/zplit/index.md @@ -3,11 +3,11 @@ title = "Zplit" description = "A single page theme for a professional online presence." template = "theme.html" -date = 2023-08-20T14:37:38+02:00 +date = 2023-09-15T21:56:17+02:00 [extra] -created = 2023-08-20T14:37:38+02:00 -updated = 2023-08-20T14:37:38+02:00 +created = 2023-09-15T21:56:17+02:00 +updated = 2023-09-15T21:56:17+02:00 repository = "https://github.com/gicrisf/zplit" homepage = "https://github.com/gicrisf/zplit" minimum_version = "0.15.0"