dencold / hasper Goto Github PK
View Code? Open in Web Editor NEWa port of Ghost's casper theme for Hugo
License: MIT License
a port of Ghost's casper theme for Hugo
License: MIT License
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/
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
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.
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.
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:
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:
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:
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.
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:
Line 27 in 23c4aed
Definitely not worth all that load.
Look to replace this with a simple function that achieves the same functionality and drops the jquery requirement.
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:
Right now we configure author
in two places:
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.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:
Site.Author
configuration.Site.Params.Author
is set. If so we use that as the key and repeat steps 1-2.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.
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.
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}} · {{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>
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.
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.
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:
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.
The variable exists only in the documentation:
https://github.com/dencold/hasper/search?q=displayName&unscoped_q=displayName
I would expect the displayed name to be Batman (displayName
), but it is sandra (id
).
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.
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?
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.
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.
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.
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
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.
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?
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.
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:
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:
Site.Params
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}}
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.