dencold / hasper

a port of Ghost's casper theme for Hugo

hasper

Hasper is a port of Ghost's casper theme for the Hugo static-site generator. It hopes to get you from zero to beautiful with minimal effort. Here's what it looks like:

The theme strives for good design, is responsive out of the box, and has great support for images and media. Additional features include Disqus comments, configurable author details, and social network support.

Installing Hugo

If you don't have Hugo installed, I recommend reading these instructions first. Here's a quick summary to get Hugo working on your system:

0. Go to Hugo's release page and grab the tar file that matches your OS and architecture. For example, if you are on a Mac, you'd want hugo_0.16_osx-64bit.tgz.
1. Unzip the tar file and copy the hugo binary into your path:

$ mkdir hugo_0.16; tar xzvf hugo_0.16_osx-64bit.tgz -C hugo_0.16
$ cp hugo_0.16/hugo ~/bin

Now you should have Hugo installed and see its version:

$ hugo version
Hugo Static Site Generator v0.16 BuildDate: 2016-06-06T05:37:59-07:00

Creating a new site

Hugo has a helper command to scaffold a new site together. It creates the initial directory structure and files you need to start writing content. Let's do this for the example site I am working on, bayactive.org:

$ hugo new site bayactive -f yaml

When you run ls on the site's directory you should see output like the following:

$ ls -1 bayactive
archetypes
config.yaml
content
data
layouts
static
themes

That's all the organization you'll need to get your site going.

Installing the theme

Hugo is installed and the scaffolding for your site is in place, let's start using the hasper theme! All you'll need to do is add the hasper repository into your theme directory as a git submodule and you're done! We're using the example site, bayactive, to make it easy to follow along. Feel free to substitute your own site in the examples below if you wish.

$ cd bayactive
$ git submodule add [email protected]:dencold/hasper.git themes/hasper

At this point, you could spin up Hugo's server and take a look at the site on your browser. But, you don't have any content to view, let's fix that...

Creating your first post

We'll use another Hugo helper command to create a file that represents a new post on your site:

$ hugo new post/welcome.md -f yaml

That command creates a new file located at content/post/welcome.md. Also, a quick note on the -f yaml option I have been using. Hugo defaults to toml for metadata, which I'm not a fan of. I prefer to use yaml as my format for these settings.

Open the welcome.md file in your favorite editor and you should see this:

---
date: 2016-06-27T17:09:17-07:00
draft: true
title: welcome
---

Let's add an actual welcome message here & make sure people know what the site is all about:

---
date: 2016-06-27T17:09:17-07:00
draft: true
title: welcome
---

Thanks for visiting BayActive! We hope to be a helpful resource for finding hiking/biking/running routes in the bay area.

Save that file, and spin up hugo's internal webserver, using the hasper theme:

$ hugo serve -D --theme hasper

You should see Hugo spit out the following logs:

Started building site
1 of 1 draft rendered
0 future content
0 expired content
1 pages created
0 non-page files copied
2 paginator pages created
0 tags created
0 categories created
in 28 ms
Watching for changes in /home/coldwd/src/github.com/dencold/bayactive/{data,content,layouts,static,themes}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

If you point your web browser to http://localhost:1313, you'll see the following view:

Which is...pretty boring. Let's fix that.

Configuring your site

In the new site creation section, you generated a config.yaml. This file handles configuration for all the fun features of the hasper theme. Open it up in your editor of choice and you'll see:

---
baseurl: http://replace-this-with-your-hugo-site.com/
languageCode: en-us
title: My New Hugo Site
...

This was auto-generated when you ran the hugo new site command. It explains why we were seeing the generic text when we served up the site. Let's change this to match what we expect for bayactive.

---
baseurl: http://www.bayactive.org
languageCode: en-us
title: BayActive
...

So far we've been modifying the root config settings which apply to all Hugo sites. But, there is also the params mapping section which lets us do some theme-specific setup. Let's start using this section of the config to add a description, logo, and a nice cover picture. This will help make bayactive look like a real site.

---
baseurl: http://www.bayactive.org
languageCode: en-us
title: BayActive
params:
  cover: /img/cover.jpg
  logo: /img/logo.svg
  description: Hikes, bikes & rides in the bay
...

Note that the cover & logo assets need to be under the static directory that we created above. Your directory structure should look something like this:

$ tree
.
├── archetypes
├── config.yaml
├── content
│   └── post
│       └── welcome.md
├── data
├── layouts
├── static
│   └── img
│       ├── cover.jpg
│       └── logo.svg

A better looking site

Now that we have a proper cover image and logo in place, the page is starting to feel like a real site. If you make another call to hugo serve and refresh your browser state, this is what things should now look like:

Much better!! Now, try to switch to your own cover image and logo. Update the config.yaml and rename the site/update the description.

You now have everything you need to start producing your own content. Go back and edit your welcome.md post and make a more personal welcome note.

To create additional posts, use the Hugo command we introduced above:

$ hugo new post/post-name.md -f yaml

Start writing some content and sharing with the world!

Next steps

If you're comfortable with the basics of hasper, there is a lot more to explore. Your next step is to check out the config-example.yaml file. This file is fully documented and tries its best to explain each setting available in Hasper. You can pull any of the settings into your own config.yaml file to incorporate on your own site.

Author configuration

Hasper supports multiple authors out of the box. So far, we haven't set any author details, but a small update to the site's config.yaml will change all of that. Here is an example from BayActive's config.yaml, which defines two authors, Dennis & Greg:

author:
  dennis:
    id: "dennis"                            # author's id/short name
    firstName: "Dennis"                     # author's first name
    lastName: "Coldwell"                    # author's last name
    displayName: "dennis"                   # author's prefered display name
    location: "Berkeley, CA"                # author's whereabouts
    bio: "trying to leave things better than I found them."  # short bio, appears below author details on post
    thumbnail: "/img/avatar.jpg"            # author's avatar
  lemond:                                   # you can configure multiple authors
    id: "lemond"
    firstName: "Greg"
    lastName: "LeMond"
    location: "Lakewood, CA"
    bio: "It never gets easier, you just go faster."
    thumbnail: "/img/lemond.jpg"

Now that you have the metadata for your author defined, you can start using it in posts via the author attribute of a post's front-matter. Here's an example:

---
date: 2016-06-27T17:09:17-07:00
draft: true
title: welcome
author: dennis
---

Thanks for visiting BayActive! We hope to be a helpful resource for finding hiking/biking/running routes in the bay area.

Here's how that visually changes things:

Even better...look what happens when you go to the full posting:

We now have a nice section for author details at the bottom which pulls in a lot of the metadata you created earlier in the site's config.yml. Looking good!!

Attribution

Hasper was originally a fork of the hugo-theme-casper. However, the original author has not been responding to pull requests. Hasper now lives as its own separate repository, for a full list of changes from the original theme, consult the CHANGELOG.

hasper's Issues

Upgrade to hugo v0.18

There are some breaking changes in the newest Hugo release. The way that pages are handled/classified has changed and when I did a quick upgrade on my local machine, I found that a lot of the categorization logic that hasper uses was broken.

• identify all areas that are broken using the newest release
• fix them ;)

Add CHANGELOG

I've kept a small list of changes/enhancements over the original fork in the attribution section of the README.md file. The better way to handle this is to create a proper CHANGELOG file that keeps a chronological log of everything that has changed in the repo. Once we have a 1.0 release ready with a stable guide for others to use the theme, this will become extremely handy for users to keep track of what is going on.

A very helpful resource is this guide to maintaining changelogs:
http://keepachangelog.com/

Fix pagination on homepage

Current behavior for pagination off of the homepage is to present the full screen cover image every time someone clicks on "older posts". This is confusing and mildly annoying, as you need to scroll a full page to see the older post listing you were expecting.

Additionally, the original code has some confusing logic in index.html:

    {{ range .Data.Pages }}
        {{if eq .Type "index" }}
        <div class="index-content post">
        {{.Content}}
        </div>
        {{end}}
    {{ end }}

    {{ if not ($.Scratch.Get "paginatedSections") }}
        {{ if isset .Site.Params "paginatedSections" }}
            {{ $.Scratch.Set "paginatedSections" .Site.Params.paginatedSections }}
        {{ else }}
            {{ $.Scratch.Set "paginatedSections" "post" }}
        {{ end }}
    {{ end }}

    {{ $list := where .Data.Pages "Section" "in" ($.Scratch.Get "paginatedSections") }}
    {{ $list := where $list "Section" "!=" "" }}
    {{ $paginator := .Paginate ( $list ) }}

    <div class="extra-pagination inner">
        {{ partial "pagination.html" $paginator }}
    </div>

    {{ range $index, $page := $paginator.Pages }}
        {{ partial "li.html" . }}
    {{ end }}

    {{ partial "pagination.html" $paginator }}

This is mostly unnecessary and can be simplified greatly.

Tasks for this issue:

• make pagination work with a "banner" cover rather than the full screen image
• cleanup pagination code and simplify implementation
• create a better "landing" for general pagination, potentially broken down by all valid tags that have recent content (nice to have, but low priority)

`-f yaml` isn't supported by hugo

In the Readme I read

hugo new post/post-name.md -f yaml

But running this gives me

Error: unknown shorthand flag: 'f' in -f

And indeed I can't find it in the hugo help pages (like hugo new --help). Perhaps this was valid once and is now depricated?

Prevent code fences to break lines

Code fencing currently line-breaks when text is too long to fit within its margins:

Prevent line breaking and add a scroller instead. But make sure:

• we don't break mobile (can still scroll inside)
• think about better ways to display this (maybe an expanded code section on hover/touch?)

Fix template tag spacing inconsistency

There is an inconsistency in the Hugo docs which give examples like this:

and official Go docs which give examples like this:

There are no spaces between brackets and the respective template action in the canonical Go references, however Hugo docs seem to prefer them. This unfortunately has made it very inconsistent in the Hasper theme. Some parts of the theme include spaces, some leave them out.

Let's make this consistent and adopt to official Go format, axe the spaces.

Clean up footer.html partial

Currently the footer partial looks like this:

<footer class="site-footer clearfix">
  {{if ne .Site.Params.hideCopyright true}}
  <section class="copyright">
    <a href="">{{.Site.Title}}</a> {{.Site.Copyright}}
  </section>
  {{end}}

  {{if ne .Site.Params.hideHUGOSupport true}}
  <section class="poweredby">
    Proudly generated by <a class="icon-hugo" href="http://gohugo.io">HUGO</a>, with <a class="icon-theme" href="https://github.com/dencold/hasper">Hasper</a> theme.
  </section>
  {{end}}
</footer>

</div>

<script type="text/javascript" src="{{.Site.BaseURL}}js/jquery.js"></script>
<script type="text/javascript" src="{{.Site.BaseURL}}js/jquery.fitvids.js"></script>
<script type="text/javascript" src="{{.Site.BaseURL}}js/index.js"></script>

{{if .Site.Params.customFooterPartial}}
{{partial .Site.Params.customFooterPartial .}}
{{end}}

</body>
</html>

When this partial is used in templates, it ends up looking something like this:

<!DOCTYPE html>
<html lang="{{.Site.LanguageCode}}">
<head>
  {{partial "head/includes.html" .}}
</head>
<body class="nav-closed">

  {{partial "navigation.html" .}}

 <div class="site-wrapper">

{{$baseurl := .Site.BaseURL}}
{{partial "covers/paging.html" .}}

<main class="content" role="main">
  {{$paginator := .Paginator}}

    {{range $index, $page := $paginator.Pages}}
       {{partial "li.html" .}}
    {{end}}

    {{partial "pagination.html" $paginator}}
</main>

{{partial "footer.html" .}}

Which I am really not a fan of. I like seeing the overall structure of a template and having proper matched closing tags on things like <html> and <body>. What's worse is the <div class="site-wrapper"> depends on a closing </div> tag that is in the footer.html. When you look at that partial, you have no idea what the closing div corresponds to.

Todos:

• Pull out the "hanging" closing tags and move them up into the actual templates.
• look into replacing the jquery script calls etc. that are at the bottom of the footer
• see how the custom script section works from a theme user's perspective.

Post Image Size

Is there a way to control the image size for each post header (banner)? Currently, the rendered image is zoomed in and cuts off much of the image.

Improve default 404

We currently have a 404 page configured, but it could use some help. This is the current look & feel (along with commentary):

We can do better. There is this reference from hugo to help guide us along.

Example configuration has misnamed "shares" parameter

Example config from README:

params:
  description: "David Hasselhoff loves telling you about Baywatch."
  cover: "images/cover.jpg"
  author: "david"
  logo: "images/logo.png"
  googleAnalyticsUserID: ""
  RSSLink: "http://feeds.feedburner.com/..."
  githubName: "thehoff"
  twitterName: "thehoff"
  hideHUGOSupport: false
  highlightjsTheme: "tomorrow-night-eighties"
  shares:
    twitter: false
    facebook: true
    google-plus: true

The actual parameter name for showing sharing options is "sharing". See share.html.

displayName is never used

In the Readme and the example project there is a variable "displayName" for every author. I would expect that one to be displayed everywhere where the author is mentioned. Looking at the code and my example project though, it seems that the variable is never actually used.

Looking at the code

The variable exists only in the documentation:
https://github.com/dencold/hasper/search?q=displayName&unscoped_q=displayName

Looking at an example project

I would expect the displayed name to be Batman (displayName), but it is sandra (id).

Single tags produce a comma separator

The majority of my posts only have one tag, but currently the template always appends a comma on the list view:

Note that this doesn't happen on the detail view:

Should be an easy fix. Super low priority.

Consolidate html head includes

We have a common pattern that is reproduced several times in our templates, it looks something like this:

<!DOCTYPE html>
<html lang="{{.Site.LanguageCode}}">
<head>
  {{partial "meta_includes.html" .}}
  <title>
    {{if ne .URL "/"}} {{.Title}} &middot; {{end}} {{.Site.Title}}
  </title>
  {{partial "head_includes.html" .}}
</head>

I'd like to simplify the head section into one head_includes.html, this will require consolidating the meta_includes.html as well as working out a simple way to configure the page title across the site.

We should end up with something that looks like this:

<!DOCTYPE html>
<html lang="{{.Site.LanguageCode}}">
<head>
  {{partial "head_includes.html" .}}
</head>

Add attribution logic for photos on site

One of the great things about hasper is the beautiful cover photo for each of your posts. Sometimes users may want to use images that are not their own and provide proper attribution (for photos that are cc licensed, for example). I'd like to set this up as an additional attribute in the post's meta data. If they'd like to provide attribution, they'd just set a field like attribution and provide a link and possibly some text that we can slurp in and provide a nice style either on the image itself, or on the bottom of the post's content.

These should be a helpful resources:

• http://foter.com/blog/how-to-attribute-creative-commons-photos/
• http://www.wikihow.com/Attribute-a-Creative-Commons-Licensed-Work

can't get the author avatars working

I can't get the avatars from the Readmes "Authors configuration" working.

This is my setup (on Arch linux with hugo installed):

# blog setup
hugo new site bayactive -f yaml
cd bayactive
git init
git submodule add [email protected]:dencold/hasper.git themes/hasper

# use the config-example (since this is an example)
cp themes/hasper/config-example.yaml config.yaml

# first post
hugo new post/welcome.md
echo "Lorem ipsum" >> content/post/welcome.md

# place images
mkdir static/img
curl "https://images.unsplash.com/photo-1464658824763-547203e5a4a1?auto=format&fit=crop&w=1350&q=80" > static/img/cover.jpg
curl "http://identicon.net/img/identicon.png" > static/img/avatar.jpg

# run site
hugo server -D

From what I can see this /should/ give me a fully functional site with author avatars, but I don't see them there. The site looks nice and everything else seems to work.

Fix author links

Currently all links to author mentions just go to back to the the homepage of the site:

On our example site "dennis" is an author that has a profile page defined, however when you click on the name, it just goes to back to the homepage.

Now that we have good support for Author listings/profile pages, we should properly link to the actual author profile if it exists.

Things to consider:

• how do we detect if an author has a profile filled out?
• what should we do if author does not have profile? my guess is we should just not have a link at all.
• we should probably move this into its own partial so that we can just reuse this little author linking logic.

Add .Site.BaseURL into all theme paths

This is a reversal from my thinking on #18, where I was planning to axe all references to .Site.BaseURL. Here was my followup from that ticket:

I've revisited this and have decided my original intuition is not correct. The .Site.BaseURL parameter can be very helpful for users who use hugo for serving content from a specific location that isn't at the server root. A common example is http://mywebsite.com/blog.

Without using BaseURL the user would be forced to locate all resources (like css/js/etc.) at the root directory, but maybe they have an application running there and that has its own set of assets. If we use BaseURL we can encapsulate everything we need in the static site. Much better approach.

I'll go through all template files and make sure we reference this site variable correctly. It will make the lives of those users who use a separate directory for deployment much easier.

Update README with author configuration

Right now we have a pretty bare-bones explanation of how author information is added into the site, and it is using some old examples. Update this and provide some visuals for new users to understand how they can use the various author config settings to add author metadata to their site.

Create better overview/screengrab for introduction

The README goes right into installation instructions without giving the user a concrete reason for using the theme in the first place. I'd like to change this and give a little overview of the benefits of Hasper:

• good design
• responsive
• nice use of pictures/media
• author details
• etc.

Start with a screenshot and then head into the benefits. THEN follow with installation instructions. If the user likes what they see, they can follow along.

Cleanup old banner templates

In 61da5f4 we consolidated & simplified our "banner" templates into the new cover template logic. However we still have the old files hanging around:

• banner.html
• banner_full.html

I believe that there are still some templates that depend on the banner.html partial.

• check through theme for any dependencies
• remove and switch to cover partials where needed
• remove the two files above

Recommended image size for "full page" cover image?

My cover image is 1600 x 1200. At all resolutions I have tried, the cover image is not taking the full screen. i.e. The break is showing.

The original repo demo page: http://vjeantet.fr, is full screen for me when it first loads. But when I use his exact image as my cover, it doesn't show up full screen. Which leads me to believe I need to configure something.

Any ideas?

And thanks for creating a fork and continuing on with the project. I'm an experience golang developer, but this is my first foray into Hugo. Will hopefully be able to contribute back to your theme as I gain more experience.

Drop "{{.Site.BaseURL}}" from templates

Holdover from the original theme. All assets use a template variable that gets expanded with the actual site name. This isn't necessary and can just be linked with the root version instead.

For example:

<link rel="stylesheet" type="text/css" href="{{.Site.BaseURL}}css/screen.css" />

can become:

<link rel="stylesheet" type="text/css" href="/css/screen.css" />

Here is a link to one file that is in violation:

hasper/layouts/partials/head_includes.html

Line 1 in 7f2f0cc

<link rel="shortcut icon" href="{{.Site.BaseURL}}images/favicon.ico">

Fix RSS config variables

The theme hasper was forked from defined a variable RSSLink in the .Site.Params section, however, Hugo has its own Site variable with the same name. This makes it confusing for theme consumers. Which variable is the correct one to set??

Simplify this configuration by using the canonical path: .Site.RSSLink and remove all references to .Site.Params.RSSLink.

Here are references within Hasper:

./layouts/partials/head/links.html:{{if .Site.Params.RSSLink}}
./layouts/partials/head/links.html:<link href="{{.Site.Params.RSSLink}}" rel="alternate"
./layouts/partials/head/links.html:<link href="{{.RSSLink}}" rel="alternate" type="application/rss+xml"
./layouts/partials/nav.html:{{$rss_link := or .Site.Params.RSSLink .RSSLink}}
./layouts/partials/navigation.html:{{$rss_link := or .Site.Params.RSSLink .RSSLink}}

Remove jquery/scripts from hasper

Linked into every page on the hasper theme is this partial include:

  {{partial "scripts.html" .}}

Which comprises of these three script tags:

<script type="text/javascript" src="{{.Site.BaseURL}}js/jquery.js"></script>
<script type="text/javascript" src="{{.Site.BaseURL}}js/jquery.fitvids.js"></script>
<script type="text/javascript" src="{{.Site.BaseURL}}js/index.js"></script>

Adding around 200ms of load time to the page on a 4g device:

The only thing we use all the jquery code for is some smooth scrolling to jump from the cover page down to the content:

hasper/static/js/index.js

Line 27 in 23c4aed

$.fn.arctic_scroll = function (options) {

Definitely not worth all that load.

Look to replace this with a simple function that achieves the same functionality and drops the jquery requirement.

Show a peek of blog posts on frontpage

We currently use a full screen background when a user visits the site:

Would rather have the background image take up 80% or so of the screen so the user can clearly see that there is content after the fold.

Enable a configurable copyright that uses CreativeCommons

Right now copyright is a very simply defined via the Site.Copyright param and is visible if the Site.Params.hideCopyright param is set to false.

Let's make this simpler and add some features:

• switch copyright detail into its own top-level section
• have a standard param to handle vanilla copyright
• have a way to configure a more descriptive license from creative commons
• make sure that either configuration looks pretty on the site
• make a single easy flag to enable/disable in Site.Params
• maybe think about having copyright be configurable to specific page/tag/or whole site.

reflect.Value.Type

Hi!

Love the theme, and your port.. I am new to hugo, and I get the below when loading up the site, everything seems to work fine, and I have little XP with GO.. I checked out share.html but it all looks valid - any ideas?

$ hugo server watch -t hasper
ERROR: 2016/04/19 reflect: call of reflect.Value.Type on zero Value in theme/partials/share.html
ERROR: 2016/04/19 reflect: call of reflect.Value.Type on zero Value in theme/partials/share.html
ERROR: 2016/04/19 reflect: call of reflect.Value.Type on zero Value in theme/partials/share.html
ERROR: 2016/04/19 reflect: call of reflect.Value.Type on zero Value in theme/partials/share.html
ERROR: 2016/04/19 reflect: call of reflect.Value.Type on zero Value in theme/partials/share.html
ERROR: 2016/04/19 reflect: call of reflect.Value.Type on zero Value in theme/partials/share.html
ERROR: 2016/04/19 reflect: call of reflect.Value.Type on zero Value in theme/partials/share.html
ERROR: 2016/04/19 reflect: call of reflect.Value.Type on zero Value in theme/partials/share.html
ERROR: 2016/04/19 reflect: call of reflect.Value.Type on zero Value in theme/partials/share.html
ERROR: 2016/04/19 reflect: call of reflect.Value.Type on zero Value in theme/partials/share.html
ERROR: 2016/04/19 reflect: call of reflect.Value.Type on zero Value in theme/partials/share.html
ERROR: 2016/04/19 reflect: call of reflect.Value.Type on zero Value in theme/partials/share.html
ERROR: 2016/04/19 reflect: call of reflect.Value.Type on zero Value in theme/partials/share.html
ERROR: 2016/04/19 reflect: call of reflect.Value.Type on zero Value in theme/partials/share.html
ERROR: 2016/04/19 reflect: call of reflect.Value.Type on zero Value in theme/partials/share.html
0 draft content
0 future content
15 pages created
27 paginator pages created
21 tags created
0 categories created
in 61 ms
Watching for changes in /redacted/fullpath/{data,content,layouts,static,themes}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Author key is used on article listing page instead of the author name

My site is configured for multiple authors.

e.g.

author:
  david:
    name: "David Hasselhoff"
    bio: "Don't Hassle the Hoff"
    location: "Baltimore, MD"
    thumbnail: "images/avatar.jpg"
  pamela:
    name: "Pamela Anderson"
    bio: "Little known fact, I am vegan"
    location: "Canada"
    thumbnail: "images/pamela.jpg"

On the home page with all the articles listed, the key for the author shows beside the date. E.g. david | 27 May 2016 instead of the full name David Hasselhoff | 27 May 2016

Hasper errors when the author parameter is not set

If there is no author set in the params section of the config file the following errors are raised by Hugo when trying to serve the site:

ERROR: 2016/07/26 16:00:57 template.go:131: template: theme/partials/post_meta.html:7:19: executing "theme/partials/post_meta.html" at <index .Site.Author $...>: error calling index: value is nil; should be of type string in theme/partials/post_meta.html
ERROR: 2016/07/26 16:00:57 general.go:212: Error while rendering page post/welcome.md: template: theme/_default/single.html:2:13: executing "theme/_default/single.html" at <index .Site.Author (...>: error calling index: value is nil; should be of type string
ERROR: 2016/07/26 16:00:57 template.go:131: template: theme/partials/post_meta.html:7:19: executing "theme/partials/post_meta.html" at <index .Site.Author $...>: error calling index: value is nil; should be of type string in theme/partials/post_meta.html

This looks to be very similar to #6 where we were always assuming a value when performing an index operation.

Fix this so that we can handle the situation when a user doesn't provide an author parameter.

Redo author configuration

Right now we configure author in two places:

• the Site.Params section where there is a single author param. This serves two functions: it sets the "default" author for posts when no author is set in a piece of content and, when no details are set (see below) it also is what is used for the text of the author on posts.
• the Site.Author map. This serves as a lookup for all available authors on the site and allows us to provide more detail about authors. We can set their location/bio/thumbnail, etc. here. We try to lookup this detail based on the author key that is set on any contnent, and if not set, we use whatever is set in Site.Params

This setup makes it very confusing for the templates to figure out what is going on with a configuration. Every time we want to show some author data, we have to go thru the following process:

1. If an author key is set on the content, we try to index it in the Site.Author configuration.
2. if it exists, we pull out the metadata required for the template
3. if it doesn't exist we don't display anything
4. if author key is not set on content, we check if Site.Params.Author is set. If so we use that as the key and repeat steps 1-2.
5. if this author key can't be indexed in the Site.Author map, we then fallback to using the key value as the "name" parameter in the templates.

That's a lot for templates to have to manage.

I'd like to simplify this considerably by introducing a template function that can encapsulate all the logic of figuring out author metadata and just return it back to the caller. If anything is not set, it defaults to the empty string. This will remove all the safety checks we currently have to write in individual templates and move it to a place where it can be reused.

I'm not sure if Hugo allows themes to write custom functions, but I'm going to try.

Needs better README

We should spice up the README to show better guide on using hasper as a theme as well as some screencaps to give readers an idea on the visual look & feel of the theme.

I'd like to have a complete "example" blog which has a full set of metadata, etc. that the user can clone and start using right away. I think it's the best way to get up and started quickly.

[Suggestion] Additional pages

Hi there :D Love the work that you're doing..

I haven't had a lot of time to explore the theme, but I have some ideas about additional pages that I would like to have\add to my blog. Would you like to look at those with me? Let's check together what already exists or is completed.

• an "author" page, linked from the auto footer, with author's details and a paginated list of his articles
• a tag list page, linkable from the menu
• the tag page exists already, but it needs a clearer title (maybe Tag: #tagname) and a way to link them from the menu (would like to link them below the Tags List menu voice)

What do you think?

Improve author styling

Right now, the cover for single author content looks something like this:

Which is...not great. The font weight is too thick and I don't like the white border around the avatar pic. Work on making this a little nicer.