Observer theme for Hugo

If you've found this repository by searching Google or GitHub, read this file carefully since it might be not what you expect!

Introduction

This is a port of the Tumbler theme "Observer" by Zack Sultan to Hugo. It's currently used only by some of my personal projects and is not suited to be a drop replacement for any other migrated Tumblr site.

Responsibility and liability

You can use the theme as is. Support requests won't be answered, but I'll accept pull requests.

I am not affiliated with Tumblr or Zack Sultan.

Differences

Disqus integration has been removed
Google Analytics has been removed
Typekit has been removed
Asking functionality has been removed
Submissions functionality has been removed
Tumblr Video player is not available
Most translations missing
PDF viewer integrated - see JavaScript Dependencies section
Tag cloud integrated

Usage

Clone the repository as submodule

git submodule add https://github.com/cmahnke/observer-hugo.git themes/observer-hugo

Edit your config.toml

theme = "observer-hugo"

Parameters

Site (`config.toml`)

copyrightYears - String - Sets the copyright years in the footer
logo - String - Link to the logo in the header
linkTumblr - Boolean - Include a link to Tumbler if the parameter tumblr_url is set in the front matter
hideTitle - Boolean - Hide titles in posts and list view.
widePosts - Boolean - Display posts wide
enableImageViewer - Boolean - Include Lightbox for image resources (see configuration section below)
enablePDFViewer - Boolean - Include PDFObject and PDF.js for inline PDF (see configuration section below)
iconSvg - URL part (string) - Path to a SVG icon
stylesheets - array of URLs (string) - URL(s) to external stylesheets - use this to integrate Google Fonts

Page (front matter)

tumblr_url - String - The link to a Tumblr Page (will be generated by Importer) - can be set to any URL
displayInList - Boolean - Whether the page should appear in listings
metaPage - Boolean - Whether the page should be display without date
disableImageViewer - Boolean - Whether the image viewer should be disabled, use this if you have images in the content

Shortcodes

`figure`

This shortcode replaces the one bundled by Hugo since the original doesn't work reliable with resources from page bundles. This is a known Hugo bug.

Example

{{< figure src="89876235679_0.jpg" alt="Ein verschwommenes Bild" >}}

Arguments

See figure shortcode

`tagcloud`

There are no options, bu you can use CSS to change the appearance, see below.

Example

{{< tagcloud >}}

Arguments

None

`quote`

Inserts a quote

Example

{{< quote quote="This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission." link="https://example.com/" from="Max Mustermann" >}}

Arguments

quote - The text for the quote, markdown is allowed
file - The text taken from a file, will overwrite the contents of the quote parameter, markdown is allowed
link - A link to the source
from - The name to attribute the quote to, , markdown is allowed

`post-image`

Example

{{< post-image section="post" post="some-post" width="250" link="/tags/cool" caption="Cool Image" class="static-content-image" >

Arguments

section - The section to get the post from
post - The name of the post - not tested with subsections
width - The width the image should be scaled to
class - The CSS class to use (for the figure element)
link - A link for the image
caption - A caption for the image (figcaption element)

Partials

The listed partials add some viewer capabilities depending on front matter configuration.

`pdf-viewer`

Configuration

Make sure the required JavaScript libraries can be found (see "JavaScript dependencies" section), add the following to config.toml

    [[module.mounts]]
        source = "node_modules/pdfjs-dist"
        target = "static/js/pdfjs"

Usage

Just add something like the following to the front matter

resources:
- name: pdf-viewer
  src: "some-file.pdf"

Make sure the name is pdf-viewer, currently you can only attach one PDF file to a post, but it can have multiple pages. This partial tries to use the PDF viewer of your browser, if you also have installed PDF.js using yarn (see "JavaScript Dependencies" section). It will fall back to a JavaScript only solution, if the browser can't display PDF on it's own.

`image-viewer`

Configuration

Make sure the required JavaScript libraries can be found (see "JavaScript dependencies" section), add the following to config.toml

    [[module.mounts]]
        source = "node_modules/lightgallery/dist/css"
        target = "assets/css/lightgallery"

    [[module.mounts]]
        source = "node_modules/lightgallery/dist/fonts"
        target = "static/fonts/lightgallery"

    [[module.mounts]]
        source = "node_modules/lightgallery/dist/img"
        target = "static/images/lightgallery"

Usage

Just add something like the following to the front matter, you can also add more or less src entries.

resources:
- src: "image1.jpeg"
- src: "image2.png"
- src: "Bild 3.JPEG"

And make sure that enableImageViewer is set at .Site level.

Styles (SCSS)

The theme uses SCSS to generate CSS. You should add your own SCSS file to assets/scss and mount int in your config.toml:

[module]
    [[module.mounts]]
        source = "assets/scss"
        target = "assets/scss"

Afterwards create a file assets/scss/base.scss and include observer.scss from the theme:

@import "observer";

Afterwards you can overwrite the configuration variables

$color-bg: #fff;
$color-sec-text: #888888;
$color-body-text: #333333;
$color-link-text: #333333;
$color-link-hover: #333333;
$color-link-active: #333333;
$color-header-text: #444444;
$font-header: futura;
$font-title: futura;
$font-body: futura;
$font-sec: futura;
// lightGallery settings
$lg-font-path: /fonts/lightgallery !default;
$lg-image-path: /images/lightgallery !default;

Now you can add your own classes or overwrite existing ones.

Predefined classes

Class name	Description
.tagcloud	Tag cloud wrapper
.tagcloud a	Tag cloud link
.tagcloud .cloud-tag	Tag cloud tag
body.about	About page
.pdf-viewer	PDF viewer wrapper
.pdf-viewer .pdfobject-container	PDF viewer container
.share	Share Links of viewers
figure	`figure` partial wrapper

JavaScript Dependencies

The theme needs some JavaScript dependencies, currently these aren't bundled. To add them you need yarn - npm should work as well.

Just add the required packages:

yarn add jquery

If you also want the viewer functionality run:

yarn add jpdfjs-dist pdfobject

To get the image viewer you should addtionally run

yarn add lightgallery lg-fullscreen

Acknowledgements

This theme was build with the help of some people who are almost certainly not even aware of it. Many thanks go to:

Zack Sultan for creating this theme
Kaushal Modi for the figure shortcode
Johann Oberdorfer for the tag cloud
Philipp Fischbeck for the German date format

Contributing

There are currently some issues that can be easily be solved by Hugo beginners:

Remove project specific stuff
More translations
Reenable integrations
Bundle Javascript dependencies
Make footer configurable

Observer theme for Hugo

Introduction

Responsibility and liability

Differences

Usage

Parameters

Site (config.toml)

Page (front matter)

Shortcodes

figure

Example

Arguments

tagcloud

Example

Arguments

quote

Example

Arguments

post-image

Example

Arguments

Partials

pdf-viewer

Configuration

Usage

image-viewer

Configuration

Usage

Styles (SCSS)

Predefined classes

JavaScript Dependencies

Acknowledgements

Contributing

Site (`config.toml`)

`figure`

`tagcloud`

`quote`

`post-image`

`pdf-viewer`

`image-viewer`