summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAdam Whitlock <adam@adamwhitlock.com>2021-12-30 09:05:03 -0600
committerAdam Whitlock <adam@adamwhitlock.com>2021-12-30 09:21:22 -0600
commitd80b25f9593681d9eb6c405c185b6bd08fc08abb (patch)
tree3fbe0028e9301d5e75c407954d4f5e12fff47acd
parentb4b02a5240c5503a66072cd2725a9d6ea76f985a (diff)
Updates to README, general fixes
Added clearer verbiage for the Huey README, including where to make modifications and expected behavior. footer.html now checks if Font Awesome enabled in configuration. head.html now displays the correct description Updated theme description in theme.toml
-rw-r--r--README.md201
-rw-r--r--layouts/partials/footer.html10
-rw-r--r--layouts/partials/head.html4
-rw-r--r--theme.toml6
4 files changed, 197 insertions, 24 deletions
diff --git a/README.md b/README.md
index a4e9135..d1ffdf1 100644
--- a/README.md
+++ b/README.md
@@ -1,40 +1,207 @@
# Huey
-Hugo theme
+The Hugo theme Huey
## Why is it named Huey?
-The name "Huey" was taken from the musician "Baby Huey". The record was on the mantle when the theme author was trying to come up with a name.
+The name "Huey" was taken from the musician "Baby Huey". The record was on the mantle when the theme author was trying to come up with a name. The album cover for "The Baby Huey Story: The Living Legend" is used as the default `favicon.ico` for this theme.
-## Todo
+## TODO
+This is the author's current TODO list for Huey. It won't impact your use of Huey. If you run into an issue and it's in the list, be assurred it's being looked into.
+
- Current page in navigaiton
- Current title + main page title
-- Add back the subtitle
- RSS (index.xml)
-## Configuration
+## Theme Configuration
+
+Huey comes with a number of configuration options. Read through this section for more details, along with a boilerplate configuration that can be used to get started.
+
+### Font Awesome
+Font Awesome icons are included as part of the Bulma CSS framework, though their use is optional. Using the icons in Huey is also optional. If you want to have icons next to page titles or social media icons in your page footer it's necessary to enable Font Awesome. To use Font Awesome, you will first need to [register with Font Awesome](https://fontawesome.com/start) and get a token. Once you have a token, add it to the `[Params]` table as `fontawesomeToken`. Example configuration is provided below (with additional keys/values removed):
+
+```
+[params]
+ fontawesomeToken = "018de52a07"
+```
+
+### Subtitle
+This theme doesn't use a subtitle. To add a subtitle, edit `layouts/partials/header.html` to include a {{ .Params.Subtitle }} along with adding `subtitle` to your `config.toml` `[params]` table.
+
+### Social Media Icons and Links
-### Subtitle and Description
-If you set a "subtitle" in your config.toml in [params], this will be used as the default subtitle. If you prefer, you can use the "description" used in your site instead, which is also used in your header for search engines. If neither a "subtitle" or "description" are set, nothing will be displayed
+If you want to use social media icons in your page footer, you can add them through the `[[menu.social]]` table array. The example below shows a full configuration, where three social media locations are set. Any link and icon can be used, though if you don't use Font Awesome it will show the name specified instead of an icon.
-### Using FontAwesome
-Font Awesome is a configuration option, though you will need to specify your own token. Additionally, the rest is up to you! This was added as a convenience for people who prefer to modify themes without knowing about how most of it works.
+```
+[[ menu.social]]
+ identifier = 'linkedin'
+ name = 'LinkedIn'
+ pre = "<i class='fab fa-linkedin fa-lg'></i>"
+ url = "https://linkedin.com/in/yourlinkedinprofile"
+ weight = 10
+[[ menu.social]]
+ identifier = 'github'
+ name = 'Github'
+ pre = "<i class='fab fa-github fa-lg'></i>"
+ url = "https://github.com/yourgithubname"
+ weight = 20
+[[ menu.social]]
+ identifier = 'twitter'
+ name = 'Twitter'
+ pre = "<i class='fab fa-twitter fa-lg'></i>"
+ url = "https://twitter.com/yourtwittername"
+ weight = 30
+```
-### Configuration Params Needed
+The `pre` key defines the Font Awesome icon code you would use. If you do a search on Font Awesome, you should be able to paste the icon code as the value. You can also use this to specify a location for an icon, if you don't want to use Font Awesome.
+The `weight` key is used to determine the location of icons. Adjusting the weight from low-to-high will order left-to-right.
+
+
+### Configuration Example
+
+This is a configuration boilerplate you can use with minimal changes.
+
+```
+baseURL = "https://www.yourbaseurl.com"
+languageCode = "en-us"
+title = "Put a site title here"
+theme = "huey"
+canonifyurls = true
+
+[params]
+ author = "Author's name goes here"
dateFormat = "January 2, 2006"
- description = "Leader and Coffee Drinker"
- subtitle = ""
+ description = "This is a description of your site. This is also used in your site header metadata."
keywords = ""
+ email = "adam@adamwhitlock.com"
+
+ # Use your Font Awesome token here. Example token is fake, so please get your own.
+ fontawesomeToken = "018de52a07"
+
+ favicon = "favicon.ico"
+ staticDir = ['static']
+
+[menu]
+
+# Top Navigation
+[[menu.nav]]
+ identifier = 'home'
+ name = 'Home'
+ title = 'Home'
+ url = '/'
+ weight = 10
+
+[[menu.nav]]
+ identifier = 'archive'
+ name = 'Archive'
+ title = "Archive"
+ url = '/archive/'
+ weight = 20
+
+[[menu.nav]]
+ identifier = 'contact'
+ name = 'Contact'
+ title = "Contact"
+ url = '/contact/'
+ weight = 30
+
+# Contacts
+
+[[ menu.social]]
+ identifier = 'linkedin'
+ name = 'LinkedIn'
+ pre = "<i class='fab fa-linkedin fa-lg'></i>"
+ url = "https://linkedin.com/in/yourlinkedinprofile"
+ weight = 10
+
+[[ menu.social]]
+ identifier = 'github'
+ name = 'Github'
+ pre = "<i class='fab fa-github fa-lg'></i>"
+ url = "https://github.com/yourgithubname"
+ weight = 20
+
+[[ menu.social]]
+ identifier = 'twitter'
+ name = 'Twitter'
+ pre = "<i class='fab fa-twitter fa-lg'></i>"
+ url = "https://twitter.com/yourtwittername"
+ weight = 30
+
+[outputs]
+ home = ['HTML', 'RSS']
+ pages = ['HTML']
+
+```
+
+## Page Configuration
+
+
+### Layout for Individual Pages
+
+Huey pages require that you specify a `type: pages` and `layout: page` for any page that's standalone (Examples: Contact, About Me). This will remove the "date" field from those pages, along with letting you specify an optional Font Awesome icon next to the page title. Unlike how Font Awesome icons are used in the configuration, you only need to put the short Font Awesome codes on your page front matter (the metadata at the top of a post).
+
+
+Example Layout for Individual Page
+
+```
+---
+title: "About"
+date: 2021-12-22T22:31:55-06:00
+draft: false
+url: /about/
+type: pages
+layout: page
+fa_icon: "fas fa-user"
+
+---
+
+Content text goes here...
+
+```
+
+
+### Layout for Blog Posts
+
+Blog posts only need the type `blog` specified in a page front matter, which allows new posts to appear on the main home page. If you don't want a post to appear on the home page, it's possible to hide them by ignoring the type or setting it to another (Example: post).
+
+Use the `lastmod` key in your page front matter to specify the last modified date. This is useful if you make changes to a post and want to highlight something new is present.
+
+`archive` is used throughout Huey as the blog post location, but you can specify your own. Rename `layouts/pages/archive.html` file accordingly.
+
+
+Example Layout for Blog Posts:
+
+```
+---
+title: "Example Post"
+date: 2021-12-30
+# lastmod: 2021-12-29
+draft: false
+url: /archive/examplepost
+type: blog
+description: "Every post should have a great description!"
+---
+
+Content text goes here...
+```
+
+
+There is not an option for Font Awesome codes with blog posts. If you need/want this functionality please create a new issue on Github in the Huey project.
+
+
+## Site Local Assets and Online Dependencies
+
+Bulma CSS is stored as part of the project theme, in `assets/css/bulma`. This ensures you can move your site around without needing network access. If a newer version of Bulma is necessary, either replace the Bulma CSS directory completely or use a public Bulma CSS location. The location is specified in `layouts/partials/head.html`.
- # Use your Font Awesome token here
- # fontawesomeToken = "018de52a07"
+Font Awesome is not stored within the theme, so network access to the Font Awesome CDN is required. If you need local icons, store them in the `static` folder (Example: `static/icons`) and reference their location directly. This may require theme modification depending on where you are adding or needing icons.
-## Using Local Assets
+## Theme Customization
-Assets, such as Bulma CSS, are stored as part of the project theme. This ensures you can move your site around without needing network access. However, other assets like Font Awesome are not local. They are instead pulled from Font Awesome CDN (Content Delivery Network).
+If you want to change the colors that Huey uses, the best location is `assets/css/base/base.scss`. Huey uses Bulma, which itself uses Sass for generating CSS. This file will apply changes to Bulma CSS and generate what is ultimately created in your `public` folder.
-If you need to have Font Awesome icons readily available, download them to the `/static` folder in a dedicated `icons` folder. Link to the static icon assets directly whenever needed. \ No newline at end of file
+If you want to add new CSS definitions that don't exist in Bulma, add them to `assets/css/extra/extra.css` or copy CSS files to the `assets/css/extra` folder. Huey will read any CSS files in that folder. \ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 1e509f3..80ff82c 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -2,8 +2,14 @@
<div class="content has-text-centered">
<layer>
{{ if .Site.Menus.social }}
- {{ range .Site.Menus.social }}
- <a class="footer-social" href="{{ .URL }}">{{ .Pre }}</a>
+ {{ if .Site.Params.fontawesomeToken }}
+ {{ range .Site.Menus.social }}
+ <a class="footer-social" href="{{ .URL }}">{{ .Pre }}</a>
+ {{ end }}
+ {{ else }}
+ {{ range .Site.Menus.social }}
+ <a class="footer-social" href="{{ .URL }}">{{ .Name }}</a>
+ {{ end }}
{{ end }}
{{ end }}
</layer>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 1bd36be..4d0668c 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,8 +1,8 @@
<head>
{{- /* metadata */}}
- <title>{{ if .IsHome }}Home : {{ else }}{{ if .Page.Title }}{{ .Page.Title }} : {{ end }}{{ end }}{{ .Site.Title }}</title>
+ <title>{{ if .IsHome }}{{ else }}{{ if .Page.Title }}{{ .Page.Title }} : {{ end }}{{ end }}{{ .Site.Title }}</title>
<meta charset="utf-8">
- <meta name="description" content="{{ .Params.Description }}" />
+ <meta name="description" content="{{ .Site.Params.Description }}" />
<meta name="dc.relation" content="{{ .Site.BaseURL }}" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
diff --git a/theme.toml b/theme.toml
index 1c6f9e8..e534a9b 100644
--- a/theme.toml
+++ b/theme.toml
@@ -4,12 +4,12 @@
name = "Huey"
license = "MIT"
-licenselink = "https://github.com/yourname/yourtheme/blob/master/LICENSE"
-description = ""
+licenselink = "https://github.com/alloydwhitlock/huey/blob/master/LICENSE"
+description = "Huey is a minimal theme which uses the Bulma CSS framework"
homepage = "https://www.adamwhitlock.com/"
tags = ["blog", "personal", "light", "minimal"]
features = []
-min_version = "0.41.0"
+min_version = "0.80.0" # Only tested with Hugo 0.80.0
[author]
name = "Adam Whitlock"