Giter Club home page Giter Club logo

hugo-gruvbox-theme's Introduction

Hugo-Gruvbox-Theme

Simple personal blog/portfolio theme for Hugo.

Inspired by the Ezhil theme and with the colors from Gruvbox.

Features

  • Gruvbox theme
  • Minimal
  • Responsive
  • Supports tags
  • Social Media Links
  • Syntax highlighting (Gruvbox)
  • Twitter cards + opengraph support
  • Hugo RSS feed
  • Reading Time of Posts
  • Google Analytics (+ Simple Cookie Banner)
  • Post Sharing Button
  • Utterances Comments Feature support
  • TableOfContents styled

Demo

View Website Screenshot

Erik Zaadis Blog is now also using this theme.

Installation

  • clone From the Hugo-Site folder
    cd themes
    git clone https://github.com/MayADevBe/Hugo-Gruvbox-Theme.git
    
  • download Unzip into the 'themes' folder

For more information checkout the Hugo Installation Guide

Configuration

  • Put a favicon in 'static\ico\favicon.svg'
  • 'config.toml' example:
baseURL = "http://example.com/"
languageCode = "en-us"
title = "Website Name"
theme = "Hugo-Gruvbox-Theme"

copyright = "© Copyright Notice"

[author]
  name = "Author Name"

#Number of posts shown on index page
paginate = 5

[params]
    # Blog subtitle + For Twitter cards
    description = "A Blog about ..."
    #Google Analytics Tracking ID
    googleAnalytics = "UA-xxxxxxxxx-x"
    # Related Posts
    enableRelatedPosts = true
    relatedPostsNumber = 2
    #For Utterances Comments Feature - need to add repo
    commentRepo = "GithubName/PublicRepoName"

#Main Menu (below header)
[[menu.main]]
name = "Home"
url = "/"
weight = 1

[[menu.main]]
name = "All Posts"
url = "/posts"
weight = 2

[[menu.main]]
name = "Tags"
url = "/tags"
weight = 3

[[menu.main]]
name = "About"
url = "/about"
weight = 4

#Footer Menu
[[menu.footer]]
name = "Imprint"
url = "/imprint"
weight = 1

[[menu.footer]]
name = "PrivacyPolicy"
url = "/privacypolicy"
weight = 2

# Social Media Links (in header)
# Uses feather icons (search icon names on the site)
[[params.social]]
name = "Github"
icon = "github"
url = "https://github.com/MayADevBe"

[[params.social]]
name = "Twitter"
icon = "twitter"
url = "https://twitter.com/MayADevBe"

#enable tags
[taxonomies]
  tag = "tags"

# allow raw HTML
[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

# Syntax Highlighting
pygmentsUseClasses = true
pygmentsCodefences = true
[markup.highlight]
    codeFences = true
    guessSyntax = true
    hl_Lines = ""
    lineNoStart = 1
    lineNos = true
    lineNumbersInTable = true
    tabWidth = 4
    noClasses = false

# Table of content depth and list type
[markup.tableOfContents]
  endLevel = 4
  ordered = false
  startLevel = 2

#related config
[related]
  includeNewer = true
  threshold = 80
  toLower = true

  [[related.indices]]
    name = "tags"
    weight = 100

  [[related.indices]]
    name = "date"
    weight = 10

Simple Cookie Banner

  • shows up when Google Analytics is used
  • because of DSGVO
  • contains link to privacy policy (BaseURL/privacypolicy)
    • can be change in static/js/purecookie.js line 4: purecookieLink
    • adds google analytics consent in head.html

Credits

hugo-gruvbox-theme's People

Contributors

mayadevbe avatar darrieng avatar erikzaadi avatar

Stargazers

Fadhil Radhian avatar  avatar  avatar  avatar Alberto Merino Risueño avatar Chen Shi avatar

Watchers

James Cloos avatar  avatar

hugo-gruvbox-theme's Issues

Code fenced blocks do not contain all text when lineNos or lineNumbersInTable are set to false

Code fenced blocks should probably have text inside them scroll rather than letting it overflow. This is pretty easily reproducible if you make your browser a little thin and you'll see the text start to overflow but only when lineNumbersInTable or lineNos are set to false:

Code block:
Screen Shot 2022-03-05 at 9 14 37 PM

Overflowed text going past the block:
Screen Shot 2022-03-05 at 9 14 45 PM

This is a lot more noticeable on mobile because the screen width is so small:

IMG_1483

When either lineNos or lineNumbersInTable are set to true though, the scrolling behavior works as expected.

Screen Shot 2022-03-05 at 9 26 56 PM

Also sorry for all of the issues, I'll stop making them if they're bothering you 😅

Footnotes are missing post name in the link to the footnote and the backref

Sorry I'm back 😅

Footnotes point back to the proper anchor, but do not include the post name in the link, so they all go back to the home page. Examples for to and from:

Screen Shot 2022-03-07 at 5 59 53 PM
Screen Shot 2022-03-07 at 6 00 32 PM

Properly formed the link for each would be:

  • to -> ${SITE}/{POST_PATH}/${POST}#fn:${REF}
  • from -> ${SITE}/${POST_PATH}/${POST}#fnref:${REF}

Screen Shot 2022-03-07 at 6 12 58 PM

e.g. this: #fn:4
should be this: posts/you-dont-know-gif#fn:4

But both appear to be missing the post part.

Example post with footnotes (can go to the bottom of the page for a direct link to some): https://blog.darrien.dev/posts/you-dont-know-gif/

Currently investigating, I'll post a PR if I figure it out. But just posting in the meantime in case you had any ideas.

On mobile: Code text size is rather large and line numbers do not match up

This gruvbox theme is great! I've been searching around for one for a while that doesn't require using npm to initialize and that works with newer hugo versions. Overall I love this one :)

I noticed however text size is rather large on mobile compared to on desktop (proportionally at least).

Desktop:

Screen Shot 2022-03-05 at 8 14 47 PM

Mobile:

IMG_1482

It's a little jarring how large the size difference is. Is there a configuration parameter I could tweak to decrease the code text size on mobile? It looks good on Desktop :)

Full blog site if you need for testing: https://blog.darrien.dev

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.