gesquive/slate

a single-page speed-dial theme for Hugo

slate theme for hugo

slate is a single-page speed dial theme for Hugo. Supports using image logos or url text for the contents of the tiles.

Examples

You can visit a live demo at https://gesquive.github.io/hugo-slate-demo/ or view screen shots of the Image and Text tile display modes.

Features

• Rotating image background
• Image and Text tile display mode
• Tag based navigation/filtering

Installation

Installing this theme

mkdir themes
cd themes
git clone https://github.com/gesquive/slate

Build with this theme

hugo server -t slate

Configuration

The following configuration site params are available:

• BackgroundImages: (optional) specifies a list of backgrounds to rotate through, if not provided, then the specified background style will be used
• BackgroundStyle: (optional) The background CSS style to use. (default value is radial-gradient(ellipse farthest-side at center top, #FCFCFC 0%, #657383 100%))
• OpenLinksInNewWindow: (optional) boolean to set if tile links open in a new window/tab. (default values is false)
• Favicon: (optional) path to the favicon

config.toml

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "slate"

[ params ]
BackgroundImages = [
  "bg/b1920-000.jpg",
  "bg/b1920-001.jpg",
  "bg/b1920-002.jpg",
  "bg/b1920-003.jpg",
  "bg/b1920-004.jpg"
]
BackgroundStyle = "#000000;"
OpenLinksInNewWindow = true
Favicon = "favicon.ico"

# list of nav tags
[[ params.nav ]]
name = "favorites"
tag = "favorite"
icon = "star"

Example : config.toml

Links

All links are defined in the data/links.yml data file. Valid attributes are:

• name: the name displayed below the tile, also used as tile text if javascript is disabled in the client browser.
• url: the url href, also used for text when no img is specified
• tags: (optional) list of tags to apply to this tile
• img: (optional) path to tile image, this will replace any text in the tile
• txt_color: (optional) css used to set the color of a tile, a random value is chosen if none is specified
• bg_color: (optional) css used to set the background-color of a tile.

Example of link definitions in the data file.

tiles:
-
  name: 'google'
  url: 'https://google.com'
  img: 'google.svg'
  tags: ['favorite', 'search']
-
  name: 'bing'
  url: 'https://bing.com'
  img: 'bing.svg'
  txt_color: '#ffffff'
  bg_color: '#ffb900'
  tags: ['search']
-
  name: 'amazon'
  url: 'https://amazon.com'
  img: 'amazon.svg'
  bg_color: '#ffffff'
  txt_color: '#ff9900'
  tags: ['favorite', 'shopping']
-
  name: 'reddit'
  url: 'https://reddit.com'
  img: 'reddit.svg'
  bg_color: '#5f99cf'
  txt_color: '#ffffff'
-
  name: 'spotify'
  url: 'https://web.spotify.com'
  img: 'spotify.svg'
  bg_color: '#191414'
  txt_color: '#1db954'
  tags: ['favorite', 'music']
-
  name: 'google music'
  url: 'https://play.google.com/music/listen'
  img: 'google-music.png'
  bg_color: '#ffffff'
  txt_color: '#ff5722'
  tags: ['music']
-
  name: 'pandora'
  url: 'https://pandora.com'
  img: 'pandora.svg'
  bg_color: '#005483'
  txt_color: '#ffffff'
  tags: ['music']

Navigation

Along the left side of the screen is a navigation bar that can be used to filter the links. The filtering occurs on the tag attribute of the links. For example, when the 'favorite' tag is selected, only the links with the 'favorite' tag attribute will be shown.

A nav filter is defined as:

• name: The name displayed in the UI
• tag: the tag name to filter links with
• icon: the font-awesome name of the icon to display

Example of a menu definition in main config file.

[[ params.nav ]]
name = "favorites"
tag = "favorite"
icon = "star"

[[ params.nav ]]
name = "search"
tag = "search"
icon = "search"

[[ params.nav ]]
name = "shopping"
tag = "shopping"
icon = "shopping-basket"

[[ params.nav ]]
name = "music"
tag = "music"
icon = "headphones"

slate's Issues

Linking a section shows "All" instead of the elements in the section

If you provide a link to a specific section like Music on the demo page it shows all items. You have to click first on a different section like "Video" and then back to "Music" to see just the elements in the section "Music".

Abandonware

There's been no updates to this project for five years...
Is there another project similar to this alive?

Cheers

Use slate within another theme

I love the tiles view and I would like to include this into another theme.
Essentially just the grid in a usual hugo page. Would that be possible?

how do you update the font awesome?

looks like the font awesome version is old and font awesome changed the format and wording of it. So I was wondering how you update it?

Text mode used name not url

Hi,

README says that

url: the url href, also used for text when no img is specified

However, it is the name field in the YAML that is used, url. In partial/tile_slate.html, it .Link.name as seen below

{{ if .Link.img }}<img class="logo" src="{{ .Link.img }}"></img>{{ else }}{{ .Link.name }}{{ end }}</div>

I think it is a good choice to have name used rather than url. We should update the readme.

Suggest to increase search function

Suggest to increase search function

bg_color and txt_color not working in text mode

Hi,

When I use image mode (providing img in links.yml), background color is working. However, in text mode (not providing any img link), bg_color & txt_color are not working.

Not sure where to search for a solution. Will try to understand how your theme work but if you any idea...

editing with a cms

I'm wondering how we can edit the data file with a CMS such as netlify. Usually its used to editing the content/posts content which of course slate doesnt use. Has anyone done a version of this that uses content/somefile.md with frontmatter detailing the logo, background color etc - instead of using the data file??

background-size options

Love the theme! Is it possible to change the background-size value from "cover" to either "contain" or "auto"? I'm having trouble with a background I'd like to use. I've tried doing it manually in a couple spots where I saw it on the code (the js and scss files) but that didn't help. Thanks in advance!

Responsive mobile friendly feature

The theme is currently not mobile friendly.
Any plans to add that feature?

Another issue with bg_color

name: 'wallabag'
 img: 'logos/wallabag.png'
 bg_color: '#ffffff'
 tags: ['favorite']

With the above snippet, i see the background of the wallabag slate go white, and then go back to the default slate bg_color when the page has finished loading.

Create tiles that do not appear in the category "all"

Hello, I wanted to know if tiles can be created without appearing in the "all" category and appearing only in the categories that I want and not on the main page.

Text is cut off for certain letters in title of each tile

E.g., in "Google", the bottom of the g is cut off. Please see the attached image.

any help

@gesquive hey there, congrats by the awesome theme, however, I have tried making some changes to links.yml (putting new windows more than 15 for example 20) and slate.css (changing the color and size of the windows my logos are in png all of them and I would like that it takes the complete space on the window for the logo looks big) and it hasn't been possible the theme has some key or . I'm going to continue trying to figure out it :( any would be appreciated thank you.