dencold / hasper Goto Github PK

View Code? Open in Web Editor NEW

22.0 3.0 7.0 2.31 MB

a port of Ghost's casper theme for Hugo

License: MIT License

HTML 26.82% CSS 70.54% JavaScript 2.64%

hugo theme-hugo casper-theme

hasper's People

Contributors

Stargazers

Watchers

Forkers

ryanwalls zzantares beltegeuse jerray kaligule thefury greenelab

hasper's Issues

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.

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.

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.

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.

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.

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:

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

`-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?

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.

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).

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.

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.

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.

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.

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>

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.

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.

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.

[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?

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:

If an author key is set on the content, we try to index it in the Site.Author configuration.
if it exists, we pull out the metadata required for the template
if it doesn't exist we don't display anything
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.
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.

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.

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.

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

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.

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)

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/

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

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 ;)

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.

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

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:

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 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}}

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.