Skip to content
/ mercury Public

Modern and minimalistic blog theme.

License

Apache-2.0, MIT licenses found

Licenses found

Apache-2.0
LICENSE-APACHE
MIT
LICENSE-MIT
Notifications You must be signed in to change notification settings

flxzt/mercury

Repository files navigation

Mercury

Modern and minimalistic blog theme powered by Zola.
See a live preview here.

Fork of the Apollo theme.

Named after the greek god of trickery and thieves

screenshot

Installation

  • Download the theme
git submodule add https://github.com/flxzt/mercury themes/mercury
  • Add theme = "mercury" to your config.toml

  • Copy the example content

cp -r themes/mercury/content content

Features

Site configuration

Enable analytics with Goatcounter:

[extra.analytics]
enabled = true
goatcounter_user = "your_user"
goatcounter_host = "goatcounter.com"    # default: goatcounter.com

Add a website favicon:

[extra]
favicon = "/images/favicon.png"

Set a color scheme:

[extra]
theme = "auto"      # either `auto`, `dark` or `light`

Use CDN for fonts:

[extra]
use_cdn = true

Enable math rendering inline with $ and blocks with $$ pairs through Temml:

[extra]
temml = true

Enable the elevator:

[extra]
elevator = true

Social buttons can be added. The available icon names are the file names without .svg in static/social_icons/.

[extra]
socials = [
    { name = "rss", url = "https://mercury.flxzt.net/atom.xml", icon = "rss" },
    { name = "github", url = "https://github.com/flxzt/mercury", icon = "github" },
]

Add stylesheets to override the theme. The file paths are from the root of the generated site. In this example, the two CSS files would be in the static folder.

[extra]
stylesheets = [
    "override.css",
    "something_else.css"
]

Add a footer:

[extra.footer]
enabled = true
# You can either set the footer text here or overwrite the footer.html template for custom html
text = "John Doe - © 2022"

Pages

To enable a table of contents, add this to the page frontmatter:

[extra]
toc = true

Or a tldr at the start:

[extra]
tldr = "This page is way too long!"

Pages can have a banner image:

[extra]
banner_image = "/absolute/path/to/image.png"

Specify that a page is an URL link instead of content.

[extra]
link_to = "https://project.page.com"

Sections

Specify that a section is a direct child of the index and its pages should appear there:

[extra]
show_in_index = true

If this is set, it is possible to specify how many pages should be shown:

[extra]
index_n_pages = 7

To display the subsection as cards instead of a pages list, use:

index_cards = true

The order of the subsections is determined by the weight specified in the subsection:

weight = 0

Templates

Use custom templates by adding this: template = "<name>.html to the page or section frontmatter.

cards

The cards.html section template to display projects with cards.

When using this template pages can have a card image with:

template = "cards.html"
[extra]
card_image = "/absolute/path/to/image.png"

webapps

There is a webapp.html page template for embedding web apps in an iframe.

Specify the path to the webapp in the page frontmatter:

template = "webapp.html"
[extra]
webapp = "/path/to/webapp/index.html

Shortcodes

To be able to write pages in raw HTML, use the raw shortcode:

{% raw() %}
<ul>
    <li>Write</li>
    <li>raw</li>
    <li>HTML</li>
</ul>
{% end %}

There is a gallery shortcode which searches the page directory for images and displays them as a foto gallery:

{{ gallery() }}

To display a right-aligned floating text, use the aside(width="<value>") shortcode. Any valid css width value with its unit can be passed as a parameter. The shortcode has a body, so it has to be terminated with {% end %}. Usage:

{% aside(width="50%") %}
Some related info
{% end %}

It can be useful to then break the flowing text manually. For this there is the clear() shortcode:

{{ clear() }}

To help with alignment, any content can be resized to be a specific width with with_width(width="<value>"):

{% with_width(width="50%") %}
Content is maximum 50 percent!
{% end %}

Write a caption with:

{{ caption(text="This is the caption text") }}

Update NPM dependencies

Run the following from the root theme directory:

npm install
npm run post-update

License

Licensed under either of Apache License, Version 2.0 or MIT license at your option.

Contribution

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in this crate by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.

About

Modern and minimalistic blog theme.

Resources

License

Apache-2.0, MIT licenses found

Licenses found

Apache-2.0
LICENSE-APACHE
MIT
LICENSE-MIT

Stars

Watchers

Forks

Contributors 4

  •  
  •  
  •  
  •