huhu/juice

🍹 An intuitive, elegant, and responsive Zola theme for product sites.

Juice

Juice is an intuitive, elegant, and responsive Zola theme for product sites.

• Build for product sites
• Simple and intuitive structure
• Clean and elegant design
• Responsive and mobile device compatible
• Customize and extend friendly

https://juice.huhu.io

Installation

First download this theme to your themes directory:

$ cd themes
$ git clone https://github.com/huhu/juice.git

or add as a submodule

$ git submodule add https://github.com/huhu/juice  themes/juice

and then enable it in your config.toml:

theme = "juice"

Structure

Hero

Juice is designed for product websites, hence we let hero part fills whole of screen. You can customize your hero by using hero block in the templates/index.html.

{% extends "juice/templates/index.html" %}
{% block hero %}
    <div>
        Your cool hero html...
    </div>
{% endblock hero %}

Page

Every markdown file located in content directory will become a Page. There also will display as a navigate link on the top-right corner. You can change the frontmatter's weight value to sort the order (ascending order).

+++
title = "Changelog"
description = "Changelog"
weight = 2
+++

CSS variables

You can override theme variable by creating a file named _variables.html in your templates directory.

See the default value here

Favicon

The same way as changing the hero block in the templates/index.html, you can change the favicon.

{% extends "juice/templates/index.html" %}
{% block favicon %}
    <link rel="icon" type="image/png" href="/favicon.ico">
{% endblock favicon %}

Fonts

If you changed the --xy-font-family-variable in _variables.html, you have to load the mentioned fonts in the templates/index.html.

{% extends "juice/templates/index.html" %}
{% block fonts %}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/fork-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Babylonica&display=swap" rel="stylesheet">
{% endblock fonts %}

Configuration

You can customize some builtin property in config.toml file:

[extra]
juice_logo_name = "Juice"
juice_logo_path = "juice.svg"
juice_extra_menu = [
    { title = "Github", link = "https://github.com/huhu/juice"}
]
juice_exclude_menu = [
    "exclude_from_nav"
]
repository_url = "https://github.com/huhu/juice"

Shortcodes

Juice have some builtin shortcodes available in templates/shortcodes directory.

• issue(id) - A shortcode to render issue url, e.g. issue(id=1) would render to the link https://github.com/huhu/juice/issue/1.

The repository_url is required.

Showcases

Please see the showcases page.

Contributing

Thank you very much for considering contributing to this project!

We appreciate any form of contribution:

• New issues (feature requests, bug reports, questions, ideas, ...)
• Pull requests (documentation improvements, code improvements, new features, ...)

juice's Issues

How to modify the background color of table of contents and code

How to change the font?

Table of content highlight don't work properly when you scroll

Table of content highlight don't highlight the few last content you scroll to the bottom of the website, highlight match the first item visible on the screen.

It is visible when you scroll down on your home website, Contributing will never be highlighted.

Error when installing and running theme

I get errors below when calling "zola serve" after installing theme

Error: Reason: Failed to render 'index.html': error while rendering macro macros::render_header (error happened in a parent template)
Error: Reason: Function call 'get_url' failed
Error: Reason: Variable config.extra.juice_logo_path not found in context while rendering '_macros.html'

Invalid weight setting

add a `md` file in `content` and meet compile error

Error: Reason: Failed to render 'page.html'
Error: Reason: Test call 'containing' failed
Error: Reason: Tester `containing` was called on an undefined variable

Setting favicon

It seems currently it's not possible to set a favicon without modifying a default layout

Dark mode

Would be nice to be able to switch between light and dark version of the product site with a button, and to default to the local system setting.

Makes the markdown directory optional for each page

Markdown quotes don't match the dark theme

Example from the juice preview:

Not sure what style it should have, probably sth similar to code blocks, but with some visually distinguishing feature.

Allow excluding links from nav section in header

Currently, all pages create a link in the nav section in the header. I think it would be useful to allow the user to specify pages they do not wish to add to the nav section in the header.