Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/dldx/hpstr-hugo-theme.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDurand D'souza <durand1@gmail.com>2016-10-23 08:15:34 +0300
committerDurand D'souza <durand1@gmail.com>2016-10-23 08:15:34 +0300
commit3ef4dda7043db239872ba9b96268505f24965b6a (patch)
tree5172c704f593865ba68a460b3983f9b5d8ed2723
parente5668c2ec3b6cc5ac164c48b09a56974218142f5 (diff)
Added sample Gruntfile
Added support for site-wide backgrounds Share links now open in a new window Navigation menu links now use relative urls where appropriate On the post list and on individual posts, the date is now hidden if not set. Updated documentation. Added a README file
-rw-r--r--README.md25
-rw-r--r--exampleSite/config.toml9
-rw-r--r--exampleSite/content/about.md21
-rw-r--r--exampleSite/content/posts/background-image.md5
-rw-r--r--exampleSite/content/posts/code-highlighting-post.md16
-rw-r--r--exampleSite/content/posts/sample-post-images.md32
-rw-r--r--exampleSite/content/posts/sample-post.md6
-rw-r--r--exampleSite/content/theme-setup.md187
-rw-r--r--layouts/_default/list.html2
-rw-r--r--layouts/_default/single.html2
-rw-r--r--layouts/partials/head.html4
-rw-r--r--layouts/partials/navigation.html2
-rw-r--r--layouts/partials/share.html6
-rw-r--r--static/Gruntfile.js84
14 files changed, 223 insertions, 178 deletions
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..5f7fbdc
--- /dev/null
+++ b/README.md
@@ -0,0 +1,25 @@
+# HPSTR
+
+This is a port of the **HPSTR** theme to [Hugo](https://gohugo.io). All the original features are intact and described below. Credit for the theme goes entirely to [Michael Rose](http://github.com/mmistakes).
+
+---
+They say three times the charm, so here is another free responsive Jekyll blog theme for you. I've learned a ton since open sourcing my first two themes [on Github](http://github.com/mmistakes), and wanted to try a few new things this time around.
+
+If you've used any of [my other themes](http://mademistakes.com/work/jekyll-themes/) most of this should be familiar territory...
+
+## HPSTR Features:
+
+* Responsive templates for post, page, and post index `layouts`. Looks great on mobile, tablet, and desktop devices.
+* Gracefully degrades in older browsers. Compatible with Internet Explorer 8+ and all modern browsers.
+* Sweet animated menu.
+* Background image support.
+* Support for large images to call out your favorite posts.
+* Optional [Disqus](http://disqus.com) comments.
+* Simple and clear permalink structure[^1].
+* [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) support for a better social sharing experience.
+* [Custom 404 page](/404.html) to get you started.
+* [Syntax highlighting]({{< relref "posts/code-highlighting-post.md" >}}) stylesheets to make your code examples look snazzy.
+
+[Get Started!](https://dldx.github.io/hpstr-hugo-theme/theme-setup/)
+
+[^1]: Example: *domain.com/category-name/post-title*
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 1a3b0bd..73c3ad3 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -1,4 +1,4 @@
-baseurl = ""
+baseurl = "https://dldx.github.io/hpstr-hugo-theme"
languageCode = "en-gb"
title = "HPSTR"
theme = "hpstr"
@@ -6,15 +6,14 @@ pluralizelisttitles = false
PygmentsCodeFences = true
Paginate = 5
disqusShortname = "hpstrhugo"
-relativeurls = true
[params]
subtitle = "An elegant, responsive theme for Hugo"
[params.author]
- name = "Hugo"
+ name = "HPSTR"
avatar = "/images/avatar.jpg"
- bio = "A static site generator written in Go"
- github = "spf13/hugo"
+ bio = "An elegant, responsive theme for Hugo"
+ github = "dldx/hpstr-hugo-theme"
[params.image]
feature = "/images/abstract-1.jpg"
credit = "dargadgetz"
diff --git a/exampleSite/content/about.md b/exampleSite/content/about.md
index b7e017b..e1e4e8d 100644
--- a/exampleSite/content/about.md
+++ b/exampleSite/content/about.md
@@ -1,22 +1,19 @@
---
-layout: page
-title: About the Jekyll Theme
-image:
- feature: /images/abstract-5.jpg
- credit: dargadgetz
- creditlink: http://www.dargadgetz.com/ios-7-abstract-wallpaper-pack-for-iphone-5-and-ipod-touch-retina/
+title: About this theme
comments: false
-modified: 2016-02-01
+weight: -1
+type: post
---
+This is a port of the **HPSTR** theme to [Hugo](https://gohugo.io). All the original features are intact and described below. Credit for the theme goes entirely to [Michael Rose](http://github.com/mmistakes).
+---
They say three times the charm, so here is another free responsive Jekyll blog theme for you. I've learned a ton since open sourcing my first two themes [on Github](http://github.com/mmistakes), and wanted to try a few new things this time around.
If you've used any of [my other themes](http://mademistakes.com/work/jekyll-themes/) most of this should be familiar territory...
## HPSTR Features:
-* Compatible with Jekyll 3 and GitHub Pages.
-* Responsive templates for post, page, and post index `_layouts`. Looks great on mobile, tablet, and desktop devices.
+* Responsive templates for post, page, and post index `layouts`. Looks great on mobile, tablet, and desktop devices.
* Gracefully degrades in older browsers. Compatible with Internet Explorer 8+ and all modern browsers.
* Sweet animated menu.
* Background image support.
@@ -24,9 +21,9 @@ If you've used any of [my other themes](http://mademistakes.com/work/jekyll-them
* Optional [Disqus](http://disqus.com) comments.
* Simple and clear permalink structure[^1].
* [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) support for a better social sharing experience.
-* [Custom 404 page]({{ site.url }}/404.html) to get you started.
-* [Syntax highlighting]({{ site.url }}/code-highlighting-post/) stylesheets to make your code examples look snazzy.
+* [Custom 404 page](/404.html) to get you started.
+* [Syntax highlighting]({{< relref "posts/code-highlighting-post.md" >}}) stylesheets to make your code examples look snazzy.
-<div markdown="0"><a href="{{ site.url }}/theme-setup/" class="btn btn-info">Theme Setup</a> <a href="https://github.com/mmistakes/hpstr-jekyll-theme" class="btn btn-success">Download HPSTR</a></div>
+<div markdown="0"><a href="{{< relref "theme-setup.md" >}}" class="btn btn-info">Theme Setup</a> <a href="https://github.com/dldx/hpstr-hugo-theme" class="btn btn-success">Download HPSTR</a></div>
[^1]: Example: *domain.com/category-name/post-title*
diff --git a/exampleSite/content/posts/background-image.md b/exampleSite/content/posts/background-image.md
index fa77211..ee87c66 100644
--- a/exampleSite/content/posts/background-image.md
+++ b/exampleSite/content/posts/background-image.md
@@ -10,12 +10,11 @@ background: /images/triangular.png
Here be a sample post with a custom background image. To utilize this "feature" just add the following YAML to a post's front matter.
```yaml
-image:
- background: filename.png
+background: /images/filename.png
```
This little bit of YAML makes the assumption that your background image asset is in the `/images` folder. If you place it somewhere else or are hotlinking from the web, just include the full http(s):// URL. Either way you should have a background image that is tiled.
-If you want to set a background image for the entire site just add `background: filename.png` to your `_config.yml` and BOOM --- background images on every page!
+If you want to set a background image for the entire site just add `background: /images/filename.png` as a [param](https://gohugo.io/overview/configuration/#examples) in your config and BOOM --- background images on every page!
<div xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/" about="http://subtlepatterns.com" class="notice">Background images from <span property="dct:title">Subtle Patterns</span> (<a rel="cc:attributionURL" property="cc:attributionName" href="http://subtlepatterns.com">Subtle Patterns</a>) / <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">CC BY-SA 3.0</a></div>
diff --git a/exampleSite/content/posts/code-highlighting-post.md b/exampleSite/content/posts/code-highlighting-post.md
index b3388f3..1c11200 100644
--- a/exampleSite/content/posts/code-highlighting-post.md
+++ b/exampleSite/content/posts/code-highlighting-post.md
@@ -17,7 +17,7 @@ Syntax highlighting is a feature that displays source code, in different colors
### Highlighted Code Blocks
-To modify styling and highlight colors edit `/_sass/_syntax.scss`.
+To modify styling and highlight colors edit `/static/css/_sass/_syntax.scss`.
```css
#container {
@@ -28,14 +28,14 @@ To modify styling and highlight colors edit `/_sass/_syntax.scss`.
```
```html
-{% raw %}<nav class="pagination" role="navigation">
+<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
-</nav><!-- /.pagination -->{% endraw %}
+</nav><!-- /.pagination -->
```
```ruby
@@ -61,19 +61,19 @@ end
### Standard Code Block
- {% raw %}<nav class="pagination" role="navigation">
+ <nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
- </nav><!-- /.pagination -->{% endraw %}
+ </nav><!-- /.pagination -->
### Fenced Code Blocks
-To modify styling and highlight colors edit `/_sass/_coderay.scss`. Line numbers and a few other things can be lastmod in `_config.yml`. Consult [Jekyll's documentation](http://jekyllrb.com/docs/configuration/) for more information.
+To modify styling and highlight colors edit `/static/css/_sass/_coderay.scss`.
~~~ css
#container {
@@ -84,14 +84,14 @@ To modify styling and highlight colors edit `/_sass/_coderay.scss`. Line numbers
~~~
~~~ html
-{% raw %}<nav class="pagination" role="navigation">
+<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
-</nav><!-- /.pagination -->{% endraw %}
+</nav><!-- /.pagination -->
~~~
~~~ ruby
diff --git a/exampleSite/content/posts/sample-post-images.md b/exampleSite/content/posts/sample-post-images.md
index de7b31a..5690c11 100644
--- a/exampleSite/content/posts/sample-post-images.md
+++ b/exampleSite/content/posts/sample-post-images.md
@@ -63,35 +63,3 @@ And you'll get something that looks like this:
<a href="//placehold.it/1200x600.jpg"><img src="//placehold.it/600x300.jpg" alt=""></a>
<figcaption>Three images.</figcaption>
</figure>
-
-### Alternative way
-
-Another way to achieve the same result is to include `gallery` Liquid template. In this case you
-don't have to write any HTML tags – just copy a small block of code, adjust the parameters (see below)
-and fill the block with any number of links to images. You can mix relative and external links.
-
-Here is the block you might want to use:
-
-```liquid
-{% raw %}{% capture images %}
- /images/abstract-10.jpg
- /images/abstract-11.jpg
- //upload.wikimedia.org/wikipedia/en/2/24/Lenna.png
-{% endcapture %}
-{% include gallery images=images caption="Test images" cols=3 %}{% endraw %}
-```
-
-Parameters:
-
-- `caption`: Sets the caption under the gallery (see `figcaption` HTML tag above);
-- `cols`: Sets the number of columns of the gallery.
-Available values: [1..3].
-
-It will look something like this:
-
-{% capture images %}
- /images/abstract-10.jpg
- /images/abstract-11.jpg
- //upload.wikimedia.org/wikipedia/en/2/24/Lenna.png
-{% endcapture %}
-{% include gallery images=images caption="Test images" cols=3 %}
diff --git a/exampleSite/content/posts/sample-post.md b/exampleSite/content/posts/sample-post.md
index c8c55ac..1df0bdd 100644
--- a/exampleSite/content/posts/sample-post.md
+++ b/exampleSite/content/posts/sample-post.md
@@ -28,8 +28,7 @@ Below is just about everything you'll need to style in the theme. Check the sour
Lorem ipsum dolor sit amet, test link adipiscing elit. **This is strong**. Nullam dignissim convallis est. Quisque aliquam.
-![Smithsonian Image](/images/3953273590_704e3899d5_m.jpg)
-{: .image-right}
+<img alt="Smithsonian Image" src="/images/3953273590_704e3899d5_m.jpg" style="float: right;"/>
*This is emphasized*. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H<sub>2</sub>O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times <cite>(That’s a citation)</cite>. <u>Underline</u>. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
@@ -61,12 +60,9 @@ HTML and <abbr title="cascading stylesheets">CSS<abbr> are our tools. Mauris a a
|:--------|:-------:|--------:|
| cell1 | cell2 | cell3 |
| cell4 | cell5 | cell6 |
-|----
| cell1 | cell2 | cell3 |
| cell4 | cell5 | cell6 |
-|=====
| Foot1 | Foot2 | Foot3
-{: rules="groups"}
## Code Snippets
diff --git a/exampleSite/content/theme-setup.md b/exampleSite/content/theme-setup.md
index b40e7fd..58f9733 100644
--- a/exampleSite/content/theme-setup.md
+++ b/exampleSite/content/theme-setup.md
@@ -7,93 +7,71 @@ image:
credit: dargadgetz
creditlink: http://www.dargadgetz.com/ios-7-abstract-wallpaper-pack-for-iphone-5-and-ipod-touch-retina/
share: true
-modified: 2016-06-01T15:14:43-04:00
---
-General notes and suggestions for customizing **HPSTR**.
+This is a port of the **HPSTR** theme to [Hugo](https://gohugo.io). This theme is perfect for bloggers.
-HPSTR now requires [Jekyll](http://jekyllrb.com/) 3.0. Make sure to run `bundle update` if you aren't on the latest version to update all gem dependencies.
+## Get the theme
+With Git installed, run the following commands inside the Hugo site folder. If Hugo has not yet been installed, read the setup guide [here](https://gohugo.io/overview/installing/).
-## Basic Setup for a new Jekyll site
-
-1. [Install Bundler](http://bundler.io) `gem install bundler` and then install [Jekyll](http://jekyllrb.com) and all dependencies `bundle install`.
-2. Fork the [HPSTR Jekyll Theme repo](https://github.com/mmistakes/hpstr-jekyll-theme/fork).
-3. Clone the repo you just forked and rename it.
-4. Edit `_config.yml` to personalize your site.
-5. Check out the sample posts in `_posts` to see examples for pulling in large feature images, assigning categories and tags, and other YAML data.
-6. Read the documentation below for further customization pointers and documentation.
-
-<div markdown="0"><a href="https://github.com/mmistakes/hpstr-jekyll-theme/archive/master.zip" class="btn">Download the Theme</a></div>
-
-**Pro-tip:** Delete the `gh-pages` branch after cloning and start fresh by branching off `master`. There is a bunch of garbage in `gh-pages` used for the theme's demo site that I'm guessing you don't want on your site.
-{: .notice}
-
----
-
-## Setup for an Existing Jekyll site
-
-1. Clone the following folders: `_includes`, `_layouts`, `_sass`, `assets`, and `images`.
-2. Clone the following folders/files and personalize content as need: `about/`, `posts/`, `tags/`, `feed.xml` and `index.html`.
-3. Edit `_config.yml` to personalize your site.
-
----
-
-## Running Jekyll
-
-The preferred method for running Jekyll is with `bundle exec`, but if you're willing to deal gem conflicts feel free to go cowboy with a `jekyll build` or `jekyll serve`.
+```
+$ mkdir themes
+$ cd themes
+$ git clone https://github.com/dldx/hpstr-hugo-theme.git hpstr
+```
-> In some cases, running executables without bundle exec may work, if the executable happens to be installed in your system and does not pull in any gems that conflict with your bundle.
->
->However, this is unreliable and is the source of considerable pain. Even if it looks like it works, it may not work in the future or on another machine.
+You can get a zip of the latest version of the theme from the [home page](https://github.com/dldx/hpstr-hugo-theme) and extract it to the themes folder.
-```bash
-bundle exec jekyll build
+## Setup
+Next, you need to configure your site and add some content. We provide a complete example site under the folder `exampleSite`. All you need to do is copy the contents of that folder into the main hugo site folder so that it looks something like this:
+```
+hugo-website
+├── config.toml
+├── content
+│   └── posts
+├── data
+├── static
+│   ├── assets
+│   │   ├── css
+│   │   ├── fonts
+│   │   └── js
+│   │   ├── plugins
+│   │   └── vendor
+│   └── images
+└── themes
+ └── hpstr
+ ├── archetypes
+ ├── layouts
+ │   ├── _default
+ │   └── partials
+ └── static
+ ├── css
+ │   └── _sass
+ │   └── vendor
+ │   ├── font-awesome
+ │   └── magnific-popup
+ ├── fonts
+ └── js
+ ├── plugins
+ └── vendor
-bundle exec jekyll serve
```
+This should be enough to get a working website!
+
---
-## Folder Structure
+## Running Hugo
-```bash
-hpstr-jekyll-theme/
-├── _includes
-| ├── browser-upgrade.html # prompt to upgrade browser on < IE8
-| ├── footer.html # site footer
-| ├── head.html # site head
-| ├── navigation.html # site navigation
-| └── scripts.html # jQuery, plugins, GA, etc
-├── _layouts
-| ├── page.html # page layout
-| ├── page.html # post-index layout used on home page
-| └── post.html # post layout
-├── _posts
-├── _sass # Sass partials
-├── assets
-| ├── css # compiled stylesheets
-| ├── js
-| | ├── _main.js # plugin options
-| | ├── scripts.min.js # concatenated and minifed site scripts
-| | ├── plugins # plugin scripts
-| └── └── vendor # jQuery and Modernizr scripts
-├── images # images for posts and pages
-├── _config.yml # Jekyll options
-├── about/ # about page
-├── posts/ # all posts
-├── tags/ # all posts grouped by tag
-└── index.html # home page with pagination
-```
+To serve the site while you write posts, simply run `hugo server` in the base folder. You can now edit and make new posts, which will show up instantly. To render a permanent site, run `hugo` on its own.
---
-## Customization
-
-Most of the variables found here are used in the .html files found in `_includes` if you need to add or remove anything. A good place to start would be to add the `title`, `description`, and `url` for your site. Links are absolute and prefixed with `{{ "{{ site.url " }}}}` in the various `_includes` and `_layouts`, so remember to properly set `url`[^1] to `http://localhost:4000` when developing locally.
+## Configuration
### Disqus Comments
-Create a [Disqus](http://disqus.com) account and change `disqus_shortname` in `_config.yml` to the Disqus *shortname* you just setup. By default comments appear on all post and pages if you assigned a shortname. To disable commenting on a post or page, add the following to its YAML Front Matter:
+Create a [Disqus](http://disqus.com) account and change `disqusShortname` in `config.toml` to the Disqus *shortname* you just setup. By default comments appear on all post and pages if you assigned a shortname. Note that comments won't generally load when you are running the server locally. To disable commenting on a post or page, add the following to its YAML Front Matter:
```yaml
comments: false
@@ -109,51 +87,50 @@ share: false
### Owner/Author Information
-Change your name, and avatar photo (200x200 pixels or larger), email, and social networking URLs. If you want to link to an external image on Gravatar or something similar you'll need to edit the path in `navigation.html` since it assumes it is located in `/images`.
+Change your name, and avatar photo (200x200 pixels or larger), email, and social networking URLs in `config.toml`.
+
+To add a copyright string to the footer, add `copyright = "(c) Blah"` to `config.toml`
### Google Analytics and Webmaster Tools
-Your Google Analytics ID goes here along with meta tags for [Google Webmaster Tools](http://support.google.com/webmasters/bin/answer.py?hl=en&answer=35179) and [Bing Webmaster Tools](https://ssl.bing.com/webmaster/configure/verify/ownershi) site verification.
+To add Google Analytics, you may add your tracking id to `config.toml`:
+```
+googleAnalytics = "UA-123-45"
+```
### Navigation Links
-To add additional links in the drop down menu edit `_data/navigation.yml`. Use the following format to set the URL and title for as many links as you'd like. *External links will open in a new window.*
+To add additional links in the drop down menu edit `data/navigation.toml`. Use the following format to set the URL and title for as many links as you'd like. *External links will open in a new window.*
-```yaml
-- title: Portfolio
- url: /portfolio/
+```
+[[links]]
+title = "Theme Setup"
+url = "/theme-setup/"
-- title: Made Mistakes
- url: http://mademistakes.com
+[[links]]
+title = "External Link"
+url = "http://mademistakes.com"
```
---
## Adding New Content
-Posts are stored in the `_posts` directory and named according to the `YEAR-MONTH-DAY-title.MARKUP` format as per [the usual](https://jekyllrb.com/docs/posts/).
+Posts are stored in the `content` directory. By default, only content in the `content/posts` will show up in the `All Posts` section, however, you can link to other sections manually. For example, if you create a post at `gallery/photo1.md`, your post will appear both under the home page and under `/gallery`.
-To streamline the creation of posts and pages, [Jekyll::Compose](https://github.com/jekyll/jekyll-compose) and [Octopress](https://github.com/octopress/octopress) are great plugins you can install to automate this process.
+By the way, Hugo has a shortcut for creating new posts: `hugo new gallery/photo1.md`. See `hugo new --help` for more details.
---
-### Jekyll _includes
-
-For the most part you can leave these as is since the author/owner details are pulled from `_config.yml`. That said you'll probably want to customize the copyright stuff in `footer.html` to your liking.
-
-### Reading Time
-
-On by default. To turn off remove `reading_time` from `_config.yml`. Default words per minute is set at 200 and can changed by updating `words_per_minute` in `_config.yml`.
-
### Feature Images
-A good rule of thumb is to keep feature images nice and wide so you don't push the body text too far down. An image cropped around around 1024 x 256 pixels will keep file size down with an acceptable resolution for most devices. If you want to serve these images responsively I'd suggest looking at the [Jekyll Picture Tag](https://github.com/scottjehl/picturefill)[^2] plugin.
+A good rule of thumb is to keep feature images nice and wide so you don't push the body text too far down. An image cropped around around 1024 x 256 pixels will keep file size down with an acceptable resolution for most devices.
-The two layouts make the assumption that the feature images live in the *images* folder. To add a feature image to a post or page just include the filename in the front matter like so.
+To add a feature image to a post or page just include the filename in the front matter like so.
```yaml
image:
- feature: feature-image-filename.jpg
+ feature: /images/feature-image-filename.jpg
thumb: thumbnail-image.jpg #keep it square 200x200 px is good
```
@@ -166,7 +143,7 @@ image:
creditlink: http://mademistakes.com #url to their site or licensing
```
-By default the `<div>` containing feature images is set to have a minimum height of 400px with CSS. Anything taller is hidden with an `overflow: hidden` declaration. You can customize the height of the homepage feature image and those appearing on posts/pages by modifying the following variables in `/_sass/_variables.scss`.
+By default the `<div>` containing feature images is set to have a minimum height of 400px with CSS. Anything taller is hidden with an `overflow: hidden` declaration. You can customize the height of the homepage feature image and those appearing on posts/pages by modifying the following variables in `/static/css/_sass/_variables.scss`.
```scss
$feature-image-height: 400px; // min 150px recommended
@@ -175,34 +152,36 @@ $front-page-feature-image-height: 400px; // min 150px recommended
#### Post/Page Thumbnails for OG and Twitter Cards
-Post and page thumbnails work the same way. These are used by [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) meta tags found in `head.html`. If you don't assign a thumbnail the image you assigned to `site.owner.avatar` in `_config.yml` will be used.
+Post and page thumbnails work the same way. These are used by [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) meta tags found in `partials/twitter-og-cards.html`. If you don't assign a thumbnail the image you assigned to `params.author.avatar` in `config.toml` will be used.
Here's an example of what a tweet to your site could look like if you activate Twitter Cards and include all the metas in your post's YAML.
-![Twitter Card summary large image screenshot]({{ site.url }}/images/twitter-card-summary-large-image.jpg)
+![Twitter Card summary large image screenshot](/images/twitter-card-summary-large-image.jpg)
+
+Twitter cards make it possible to attach images and post summaries to Tweets that link to your content. Summary Card meta tags have been added to `head.html` to support this, you just need to [validate and apply your domain](https://dev.twitter.com/docs/cards) to turn it on.
### Videos
Video embeds are responsive and scale with the width of the main content block with the help of [FitVids](http://fitvidsjs.com/).
-### Twitter Cards
-
-Twitter cards make it possible to attach images and post summaries to Tweets that link to your content. Summary Card meta tags have been added to `head.html` to support this, you just need to [validate and apply your domain](https://dev.twitter.com/docs/cards) to turn it on.
### Link Post Type
-Link blog like a champ by adding `link: http://url-you-want-linked` to a post's YAML front matter. Arrow glyph links to the post's permalink and the the `post-title` links to the source URL. Here's an [example of a link post]({{ site.url }}/sample-link-post/) if you need a visual.
+Link blog like a champ by adding `link: http://url-you-want-linked` to a post's YAML front matter. Arrow glyph links to the post's permalink and the the `post-title` links to the source URL. Here's an [example of a link post]({{< relref "posts/sample-link-post.md" >}}) if you need a visual.
---
## Further Customization
-Jekyll 2.x added support for Sass files making it much easier to modify a theme's fonts and colors. By editing values found in `_sass/variables.scss` you can fine tune the site's colors and typography.
+By editing values found in `static/css/_sass/variables.scss` you can fine tune the site's colors and typography. You will need a [sass processor](http://sass-lang.com) to render the files to css.
For example if you wanted a red background instead of white you'd change `$bodycolor: #fff;` to `$bodycolor: $cc0033;`.
+*Note from dldx: I haven't changed the Gruntfile to work for hugo yet. If anyone would like to submit a PR, feel free! :) The following is just the original documentation for this theme*
+
To modify the site's JavaScript files I setup a Grunt build script to lint/concatenate/minify all scripts into `scripts.min.js`. [Install Node.js](http://nodejs.org/), then [install Grunt](http://gruntjs.com/getting-started), and then finally install the dependencies for the theme contained in `package.json`:
+
```bash
npm install
```
@@ -211,20 +190,16 @@ From the theme's root, use `grunt` to concatenate JavaScript files and optimize
You can also use `grunt dev` in combination with `bundle exec jekyll serve` to watch for updates in JS files that Grunt will then automatically re-build as you write your code, which will in turn auto-generate your Jekyll site when developing locally.
+For more information on how to configure Hugo or content, check out the [Hugo documentation](https://gohugo.io/overview/introduction/).
+
---
## Questions?
-Having a problem getting something to work or want to know why I setup something in a certain way? Ping me on Twitter [@mmistakes](http://twitter.com/mmistakes) or [file a GitHub Issue](https://github.com/mmistakes/hpstr-jekyll-theme/issues/new). And if you make something cool with this theme feel free to let me know.
+Having a problem getting something to work or want to know why I setup something in a certain way? You can contact me on [github](https://github.com/dldx) or [file a GitHub Issue](https://github.com/dldx/hpstr-hugo-theme/issues/new). And if you make something cool with this theme feel free to let me know.
---
## License
-This theme is free and open source software, distributed under the [MIT License]({{ site.url }}/LICENSE) version 2 or later. So feel free to to modify this theme to suit your needs.
-
----
-
-[^1]: Used to generate absolute URLs in `feed.xml`, and for canonical URLs in `head.html`. Don't include a trailing `/` in your base url ie: http://mademistakes.com. When developing locally I suggest using http://localhost:4000 or whatever localhost you're using to properly load all theme stylesheets, scripts, and image assets. If you leave this variable blank all links will resolve correctly except those pointing to home.
-
-[^2]: If you're using GitHub Pages to host your site be aware that plugins are disabled. So you'll need to build your site locally and then manually deploy if you want to use this sweet plugin.
+This theme is free and open source software, distributed under the [MIT License](https://github.com/dldx/hpstr-hugo-theme/blob/master/LICENSE.md) version 2 or later. So feel free to to modify this theme to suit your needs.
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 1748449..a4d18f4 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -38,7 +38,9 @@
</div><!-- /.entry-image -->
{{ end }}
<div class="entry-meta">
+ {{ if gt .Date 0001 }} <!-- If Date is set (greater than year 0001) -->
<span class="entry-date date published updated"><time datetime="{{ .Date }}"><a href="{{ .RelPermalink }}">{{ .Date.Format "Jan 2, 2006" }}</a></time></span>
+ {{ end }}
<span class="entry-reading-time">
<i class="fa fa-clock-o"></i>
Reading time ~{{ if le .ReadingTime 1 }}1 minute{{ else }}{{ .ReadingTime }} minutes{{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index f665763..75442a9 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -20,7 +20,7 @@
{{ else }}
<h1 class="entry-title"><a href="{{ .RelPermalink }}" rel="bookmark" title="{{ .Title }}">{{ .Title }}</a></h1>
{{ end }}
- {{ if ne .Type "page" }}
+ {{ if and (ne .Type "page") (gt .Date 0001) }} <!-- If Date is set (greater than year 0001) -->
<h2><span class="entry-date date published"><time datetime="{{ .Date }}">{{ .Date.Format "January 2, 2006" }}</time></span></h2>
{{ end }}
<p class="entry-reading-time">
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 31ddbd6..7742efc 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -46,7 +46,7 @@
<!-- Icons -->
<link rel="shortcut icon" href="{{ "/favicon.png" | relURL }}">
-{{ with .Params.background }}
-<style type="text/css">body {background-image:url({{ . | relURL }});}</style>
+{{ with $.Param "background" }}
+<style type="text/css">body {background-image:url({{ . }});}</style>
{{ end }}
</head>
diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html
index b053235..3bceadc 100644
--- a/layouts/partials/navigation.html
+++ b/layouts/partials/navigation.html
@@ -55,7 +55,7 @@
</ul>
</li>
{{ range .Site.Data.navigation.links }}
- <li><a href="{{ .url }}" {{ if in .url "http" }}target="_blank"{{ end }}>{{ .title }}</a></li>
+ <li><a href="{{ .url | relURL }}" {{ if in .url "http" }}target="_blank"{{ end }}>{{ .title }}</a></li>
{{ end }}
</ul><!-- /.dl-menu -->
</nav><!-- /.dl-menuwrapper -->
diff --git a/layouts/partials/share.html b/layouts/partials/share.html
index 0e01dc7..d891d98 100644
--- a/layouts/partials/share.html
+++ b/layouts/partials/share.html
@@ -1,7 +1,7 @@
<div class="social-share">
<ul class="socialcount socialcount-small inline-list">
- <li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}" title="Share on Facebook"><span class="count"><i class="fa fa-facebook-square"></i> Like</span></a></li>
- <li class="twitter"><a href="https://twitter.com/intent/tweet?text={{ .Permalink }}" title="Share on Twitter"><span class="count"><i class="fa fa-twitter-square"></i> Tweet</span></a></li>
- <li class="googleplus"><a href="https://plus.google.com/share?url={{ .Permalink }}" title="Share on Google Plus"><span class="count"><i class="fa fa-google-plus-square"></i> +1</span></a></li>
+ <li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}" target="_blank" title="Share on Facebook"><span class="count"><i class="fa fa-facebook-square"></i> Like</span></a></li>
+ <li class="twitter"><a href="https://twitter.com/intent/tweet?text={{ .Permalink }}" target="_blank" title="Share on Twitter"><span class="count"><i class="fa fa-twitter-square"></i> Tweet</span></a></li>
+ <li class="googleplus"><a href="https://plus.google.com/share?url={{ .Permalink }}" target="_blank" title="Share on Google Plus"><span class="count"><i class="fa fa-google-plus-square"></i> +1</span></a></li>
</ul>
</div><!-- /.social-share -->
diff --git a/static/Gruntfile.js b/static/Gruntfile.js
new file mode 100644
index 0000000..ad93726
--- /dev/null
+++ b/static/Gruntfile.js
@@ -0,0 +1,84 @@
+'use strict';
+module.exports = function(grunt) {
+
+ grunt.initConfig({
+ jshint: {
+ options: {
+ jshintrc: '.jshintrc'
+ },
+ all: [
+ 'Gruntfile.js',
+ '!assets/js/*.js',
+ '!assets/js/plugins/*.js',
+ '!assets/js/scripts.min.js'
+ ]
+ },
+ uglify: {
+ dist: {
+ files: {
+ 'assets/js/scripts.min.js': [
+ 'assets/js/plugins/*.js',
+ 'assets/js/_*.js'
+ ]
+ }
+ }
+ },
+ imagemin: {
+ dist: {
+ options: {
+ optimizationLevel: 7,
+ progressive: true
+ },
+ files: [{
+ expand: true,
+ cwd: 'images/',
+ src: '{,*/}*.{png,jpg,jpeg}',
+ dest: 'images/'
+ }]
+ }
+ },
+ svgmin: {
+ dist: {
+ files: [{
+ expand: true,
+ cwd: 'images/',
+ src: '{,*/}*.svg',
+ dest: 'images/'
+ }]
+ }
+ },
+ watch: {
+ js: {
+ files: [
+ '<%= jshint.all %>'
+ ],
+ tasks: ['jshint','uglify']
+ }
+ },
+ clean: {
+ dist: [
+ 'assets/js/scripts.min.js'
+ ]
+ }
+ });
+
+ // Load tasks
+ grunt.loadNpmTasks('grunt-contrib-clean');
+ grunt.loadNpmTasks('grunt-contrib-jshint');
+ grunt.loadNpmTasks('grunt-contrib-uglify');
+ grunt.loadNpmTasks('grunt-contrib-watch');
+ grunt.loadNpmTasks('grunt-contrib-imagemin');
+ grunt.loadNpmTasks('grunt-svgmin');
+
+ // Register tasks
+ grunt.registerTask('default', [
+ 'clean',
+ 'uglify',
+ 'imagemin',
+ 'svgmin'
+ ]);
+ grunt.registerTask('dev', [
+ 'watch'
+ ]);
+
+}; \ No newline at end of file