Uwe Uwe

A minimalist theme that helps you build fully responsive documentation websites for small projects.

Introduction

Uwe Uwe (u²) is a minimalist theme that helps you build fully responsive documentation websites for small projects.

It will create a very simple website by merging all your markdown and/or html pages to one single index.html page.

No other kinds of webpages or files in other output formats are created.

warning icon

Please note

The Uwe Uwe (u²) theme is most likely not for you if you need a website with a more sophisticated structure.

Features

Besides the default markdown features and shortcodes that are provided by Hugo out-of-the-box, the Uwe Uwe (u²) theme ships with the following additional features:

Prerequisites

You need at least version 0.71.0 of Hugo to use the Uwe Uwe (u²) theme due to the fact that it is using Markdown Render Hooks to alter the HTML output of images, links and headings.

info icon

Hugo latest release

https://github.com/gohugoio/hugo/releases/latest

Installation

Independently of the installation methods described below you have to specify in the configuration file of your website-project that you want to built your site using the Uwe Uwe (u²) theme.

JSON Yaml Toml 
{
    baseURL: "<Base Url of your website>",
    languageCode: "<Language of your website >",
    title: "<Title of your website >",
    theme: "uwe-uwe",

    ...
}

Manual download

You can download the latest version of the Uwe Uwe (u²) theme directly to the /themes directory of your website-project.

Git submodule

Should you use Git to track changes within your website-project you can also add the Uwe Uwe (u²) theme as a git submodule by cloning it directly to the /themes directory of your website-project using the following command:

git submodule add https://github.com/mbrt-yeah/uwe-uwe-hugo.git themes/uwe-uwe

Hugo Configuration

The recommended Hugo configuration when you are using the Uwe Uwe (u²) theme.

Disable creation of contents

In order not to clutter the build-result with unnecessary files you can disable the creation of section, taxonomy, term and RSS contents using the disableKinds option in your project configuration file.

JSON Yaml Toml 
{
    disableKinds: ["section", "taxonomy", "term", "RSS"]
}

For markdown in notifications and sidenotes to be correctly displayed you have to set the markup.goldmark.renderer.unsafe flag to true.

JSON Yaml Toml 
{
    markup: {
        goldmark: {
            renderer: {
                unsafe: true
            }
        }
    }
}

Furthermore, it has been found that the igor style of Hugo’s internal syntax highlighter works best with the design of the Uwe Uwe (u²) theme.

JSON Yaml Toml 
{
    markup: {
        goldmark: {
            highlight: {
                style: "igor"
            }
        }
    }
}

Theme Configuration

All custom configuration parameters have to be set in the params.uweuwe section of the configuration file of your website-project.

JSON Yaml Toml 
{
    baseURL: "<Base Url of your website>",
    languageCode: "<Language of your website >",
    title: "<Title of your website >",
    theme: "uwe-uwe",

    ...

    params: {
        uweuwe: {
            ...
        }
    }
}

Metadata

You can specify different information that serve as metadata for your website.

JSON Yaml Toml 
{
    params: {
        uweuwe: {
            metadata: {
                author: "<WEBSITE_AUTHOR_NAME>"
            }
        }
    }
}

The logo is displayed at the top of the website.

If you don’t want to display the logo just set the value of the logo.display parameter to false.

JSON Yaml Toml 
{
    params: {
        uweuwe: {
            logo: {
                display: true,
                src: "<PATH_TO_LOGO_FILE>"
            }
        }
    }
}

Short Description

The short description is displayed below the title of your website.

If you don’t want to display the short description just set the value of the shortDesc.display parameter to false.

JSON Yaml Toml 
{
    params: {
        uweuwe: {
            shortDesc: {
                display: true,
                value: "<WEBSITE_SHORT_DESCRIPTION>"
            }
        }
    }
}

The platform links are displayed below the short description of the website.

You can choose between the following display modes:

If you don’t want to display the platform links just set the value of the platformLinks.display parameter to false.

You can specify an unlimited number of platform links simply by adding entries to the platformLinks.platforms array/set. Every entry is composed of the following fields:

JSON Yaml Toml 
{
    params: {
        uweuwe: {
            platformLinks: {
                display: true,
                displayMode: "as-icons-and-text" 

                platforms: [
                    {
                        name: "<PLAFTORM_NAME>",
                        display: true,
                        iconSrc: "<PATH_TO_PLATFORM_ICON>",
                        target: "<LINK_TARGET>",
                        text: "<LINK_TEXT>",
                        title: "<LINK_TITLE>"
                    },

                    ...
                ]
            }
        }
    }
}

Table of Contents

info icon
The table of contents is created automatically based upon the title attribute in the front-matter of your content pages.

The table of contents is displayed below the platform links of your website.

If you don’t want to display the table of contents just set the value of the toc.display parameter to false.

JSON Yaml Toml 
{
    params: {
        uweuwe: {
            toc: {
                display: true
            }
        }
    }
}

Markdown Render Hooks

Per default the Uwe Uwe (u²) theme uses Markdown Render Hooks to alter the HTML output of images, links and headings.

However, you can deactivate their usage in the following way:

JSON Yaml Toml 
{
    params: {
        uweuwe: {
            renderHooks: {
                image: {
                    use: false,
                },
                link: {
                    use: false,
                },
                heading: {
                    use: false,
                }
            }
        }
    }
}

Syntax Highlighting via Prism.js

Instead of Hugo’s custom syntax highlighter you can also choose the Javascript-based syntax highlighter Prism.js .

JSON Yaml Toml 
{
    params: {
        uweuwe: {
            syntaxHiglighingCustom: {
                use: true,
            }
        }
    }
}

Please note that activating the Prism.js based syntax higlighting will cause the loading of additional Javascript and CSS files.

License

The Uwe Uwe (u²) theme is licensed under the MIT License.