Giter VIP home page Giter VIP logo

harbor's Introduction

harbor - Simple Hugo Theme

Quality Gate Status FOSSA Status

Simple and minimal personal blog theme for Hugo.

screenshot

screenshot-dark

DEMO is built from exampleSite.

Features

  • Support tags, categories and archives
  • Analytics integration (Google, Goatcounter or Matomo)
  • Responsive
  • Dark mode
  • Syntax Highlight (see Hugo doc)
  • Search entire blog posts
  • Table Of Contents
  • Disqus
  • Most social media

Installation & Update

$ # install
$ cd themes
$ git submodule add https://github.com/matsuyoshi30/harbor.git harbor

$ # update
$ git submodule update --remote --merge

If you want to know more information, see Hugo doc.

Usage

config.toml example

theme = "harbor"
baseurl = "https://example.com/"
title = "Hugo Themes"
paginate = 3
languageCode = "en"
DefaultContentLanguage = "en"
enableInlineShortcodes = true
footnoteReturnLinkContents = "^"

# Optional
# If you use googleAnalytics, you set top-level options in config.toml to the beginning of the config file like other top-level options.
googleAnalytics = "UA-XXXXXXXX-XX"
# and disqus too.
disqusShortName = "yourdisqusshortname"

[params.goatcounter]
  domain="stats.domain.com"

[params.matomo]
  domain="stats.domain.com"
  id="123"

[Author]
  name = "Hugo Author"

[outputs]
  section = ["JSON", "HTML"]

[[params.nav]]
  identifier = "about"
  name = "About"
  icon = "fas fa-user fa-lg"
  url = "/about/"
  weight = 3

[[params.nav]]
  identifier = "tags"
  name = "Tags"
  icon = "fas fa-tag fa-lg"
  url = "tags"
  weight = 3

[[params.nav]]
  identifier = "categories"
  name = "Category"
  icon = "fas fa-folder-open fa-lg"
  url = "categories"
  weight = 3

[[params.nav]]
  identifier = "search"
  name = "Search"
  icon = "fas fa-search fa-lg"
  url = "search"
  weight = 3

[[params.nav]]
  identifier = "archives"
  name = "Archives"
  icon = "fas fa-archive fa-lg"
  url = "archives"
  weight = 3

# copy paste this block and change for each social media to add how many ever social media
# acounts/links you want
[[params.social]]
  name="name of social media"
  url="link to social media"
  icon="A icon from https://fontawesome.com/"

[params.logo]
  url = "icon.png" # static/images/icon.png
  width = 50
  height = 50
  alt = "Logo"

Before you user my theme, don't remember to change favicon (static/favicon.ico) and icon (static/images/icon.png)!

If you don't change them, your favicon and icon are my face :)

Search entire blog posts

You should make search.md in the content directory.

---
title: "Search"
layout: "search"
---

TOC

If you want to use TableOfContent, you need to write words greater than 400, and set true of the frontmatter toc.

Back To Top Button

If you want to use Back To Top Button, you need to write words greater than 400, and set true of the frontmatter backtotop.

Archives

If you want archive page, generate archives.md file in the content directory.

$ hugo new archives.md
---
title: "Archive page"
type: archives
---

Override CSS

If you want to override CSS, add customCSS param which is path to CSS file to your config.toml.

[params]
  customCSS = ["/css/custom.css"] # in case you use `/static/css/custom.css`

Enable Google Analytics when running as server

If you want to enable google analytics when running hugo as server, add enableGoogleAnalytics param to your config.toml.

[params]
  enableGoogleAnalytics = true

Enable UglyURLs

If you want to enable "Ugly URLs" (e.g. exmaple.com/urls.html), add uglyurls = true to top level and [params] of your config.toml.

uglyurls = true

[params]
  uglyurls = true

Enable Bottom Navigation

If you want to enable bottom navigation in , add enableBottomNavigation = true params to your config.toml.

[params]
  enableBottomNavigation = true

Frontmatter example

+++
title = "Article title here"
date = 2020-02-15T20:00:00+09:00
tags = ["tags here"]
draft = false
toc = false
backtotop = false
disable_comments = true <!-- disable disqus -->
+++

# Title

<!-- when toc is true and post wordcounts is greater than 400 -->

## Contents

Contribution

Issues and PRs are very welcome!

Development

If you touch CSS or JavaScript file, you need to build to add your changes following below steps.

  1. Install Node.js and npm (Node.js package manager).

  2. The package.json file in your new sub-theme contains the versions of all the Node.js software you need. To install them run:

    $ npm install
    
  3. After fixing files, you can format like below. (Auto format before commit using husky)

    $ npm run format
    

LICENSE

MIT.

FOSSA Status

Author

matsuyoshi30

harbor's People

Contributors

0x5fc3 avatar anemology avatar brunogeronimo avatar chaspy avatar dakatsuka avatar dependabot[bot] avatar dictor avatar famished-programmer avatar fossabot avatar graves501 avatar h2kyaw avatar hirokisakabe avatar jcrd avatar kaakaa avatar kudaliar032 avatar lomion0815 avatar lunarequest avatar matsuyoshi30 avatar mkalus avatar nypd avatar pdostal avatar sunary avatar utsavgupta avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

harbor's Issues

Disable disqus on some pages

I added this to single.html which disabled disqus on some pages. if disable_comments: true is in the params

 {{ if  (not (isset .Params "disable_comments")) }}
    {{ partial "disqus.html" . }}
  {{ end }}

It would be nice if this was part of the theme. If you feel this is not required i understand and you can close this issue

Self hosted icons

I would like to use a self-hosted icon since the one I require (for Matrix ) is not availbe at fontawesome.com. Can this be done?

Pages loading slow.

I use your theme in my blog. Recently I moved to self hosting my blog. One thing a lot of people were saying is that the page was loading very slowly. After doing some research its because data is read in from json on the client side. Is there a simple way to fix this like using a program to assemble the page client side or do changes need to be made to the theme? currently I am sending all the files via nginx.

if you want to see what I mean go to https://nullrequest.com it takes 5~6 seconds to load.

Search on Demo site not working

Hi

love the theme - but wondering if you can make search work on the demo?

I tried typing in tags like CSS or Emoji and pressing enter - but nothing happens

Set Dark/Light Mode Default?

Hi all,

Apologize if the wrong place. Trying to set light mode the default but obviously still allow dark mode switching.

I was looking at this thread for a different theme but didn't seem to have a similar file structure.

Here is the code I was looking at in bundle.js:

{var e=document.getElementById("dark-mode-toggle"),t=document.getElementById("dark-mode-theme");function n(n){localStorage.setItem("dark-mode-storage",n),"dark"===n?(t.disabled=!1,e.className="fas fa-sun"):"light"===n&&(t.disabled=!0,e.className="fas fa-moon")}window.matchMedia("(prefers-color-scheme: light)").matches?n(localStorage.getItem("dark-mode-storage")||"dark"):n(localStorage.getItem("dark-mode-storage")||"light"),e.addEventListener("click",()=>{"fas fa-moon"===e.className?n("dark"):"fas fa-sun"===e.className&&n("light")})}}])

Something in here?

Love the theme btw

Can't switch to light mode

I can't seem to switch to light mode in my settings. Are the light mode and dark mode versions two different projects?

render problem

I follow the quick start which tell me use the command to create my post:

hugo new posts/my-post.md

but I found that the rendering of the page is not correct. After few hours searching, I found I should use:

hugo new post/my-post.md

to get the correct rendering.

I think maybe someone will encounter this problem too, so I hope you can point out this in the guide.

By the way, I love this concise theme, thank you for your work!

override CSS in harbor theme

I like the harbor theme and am using it on my blog (https://l10systems.com). Thanks for the nice work.

A question: some themes have a parameter that allow you to override css. It's typically something like css = ["css/custom.css"] and you then add that file to the static/css directory with your overrides.

I don't see this feature in harbor. How can I override css? In my case, I just want to change some font colors? I can probably hack it in but wanted to check if I was missing something.

Upload theme Vercel or Netlify problem

Hi, how can I upload the site to Netlify / Vercel? It is not the first time I load a site on those platforms but this time styles and all elements of the static folder are not recognized.

Thanks and congratulations for the work on this theme.

404 ERR_ABORTED | CSS and JS files

Getting there 404's when deployed on Digital Ocean.
Seems to work fine locally, not sure if this is a issue with the theme

nyasaki.dev/:27 GET https://nyasaki.dev/fontawesome/css/all.min.css net::ERR_ABORTED 404
nyasaki.dev/:33 GET https://nyasaki.dev/css/dark.css net::ERR_ABORTED 404
nyasaki.dev/:45 GET https://nyasaki.dev/js/main.bundle.js net::ERR_ABORTED 404
nyasaki.dev/:46 GET https://nyasaki.dev/js/instantpage.min.js net::ERR_ABORTED 404
nyasaki.dev/:45 GET https://nyasaki.dev/js/main.bundle.js net::ERR_ABORTED 404
nyasaki.dev/:46 GET https://nyasaki.dev/js/instantpage.min.js net::ERR_ABORTED 404

Dark Mode broken on Safari

On my iPhone and on my iPad, both on Safari using the latest iOS 13.4 version, dark mode is broken. By that, I mean I have white space on top of the page, and white background again from some point on the page.

Pictures will tell more than words :

D8BE3A81-9FCC-4295-A3AF-522F00BC4481

42A2355D-F8BB-4388-A934-35D2270AAB65

I can check tomorrow if it’s the same on desktop browsers, but I suppose it is.

I’m using the theme as a Hugo submodule, with the latest commit. Let me know if you need more information.

And thanks for your work ! πŸ‘

Why google analytic disabled when hugo as server?

As first, I'm using this theme well and thank you very much for your efforts.

{{ if not .Site.IsServer }}

By this line, google analytic is disabled when Hugo run as server. There is any special reason for this?
In my opinion server log and analytic has their own role each other. And there would exist some case that use both like me.
Could you make analytic is just controlled through googleAnalytics valiable in config.toml by removing this line?

Running with Hugo throws warnings for Page.URL's future deprecation

Exact warning (personal/timing details emitted):

$ hugo server -D
Building sites … WARN YYYY/MM/DD HH:MM:SS Page.URL is deprecated and will be removed in a future release. Use .Permalink or .RelPermalink. If what you want is the front matter URL value, use .Params.url

Not sure what's causing this--I've messed around with removing url from [[params.*]] in the config.toml file, but the error still gets thrown.

In looking through the source code my (uneducated) guess is that it could be layouts/partials/nav.html's use of {{ .url | relLangURL }}, but I haven't figured out how to rebuild with those parts changed.

index.json Not found

I got Error "Failed to load resource: the server responded with a status of 404 (Not Found) :1313/2021/post/index.json:1" at Inspect Window.

My Config.toml

[permalinks]
post = "/:year/:filename/"
page = "/:filename/"

[outputs]
section = ["JSON", "HTML", "RSS"]

Search doesn't work

I don't know if I'm doing something wrong but search doesn't work for me. I got the page and I can type in the box but I get no results.

Fonts don't download

I'm creating a website on GitHub Pages with Harbor theme, but the individual article pages fail to download the fonts (e.g., this page)

CleanShot 2021-03-18 at 17 02 30@2x

By the way, the above error does not appear in the index page.

The settings I am using are as follows:

theme = "harbor"
baseURL = "https://yasuhito.github.io/"
title = "Notes"
paginate = 10
languageCode = "ja"
DefaultContentLanguage = "ja"
enableInlineShortcodes = true
footnoteReturnLinkContents = "^"
publishDir = "docs"

Sorry in advance if I've made a fundamental mistake.

Google Analytics Not Working

I set my tracking key using googleAnalytics = "<key>" in the config.toml file.

However, there's no google analytics <script> in the generated index.html.

If I add this in config.toml:

[params]
	googleAnalytics = "<key>"

And change analytics.html to:

{{ if not .Site.IsServer }}
  {{ with .Site.Params.googleAnalytics }}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '{{ . }}');
  </script>
  {{ end }}
{{ end }}

The google analytics <script> is added correctly.

How does bundle.js gets generated?

Hi,

Thanks for the great theme. I want to change some things but it seems to always end up in bundle.js javascript file.
How does this file gets generated?
How can I edit it in human readable language and regenerate it?

The thing I want to do is to remove Roboto font and replace it with Helvetica for example.

Best Regards

Duplicated web fonts

You're copying the same web fonts to /fonts with their original names and to /js with minified names from. It would be great to use these fonts just from one place.

Render Issues

Hi, I really like your theme but unfortunately it renders inappropriately recently. Please have a look on the attachment. It did work when I was using blowdown::server_site() but not with blogdown::hugo_build(). I hope it will be sorted out soon.
image

Theme randomly switches

There is a strange bug where the theme will switch from dark to light when the webpage loads with out the user changing the theme.

Do not use fontawesome

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" integrity="sha384-v8BU367qNbs/aIZIxuivaU55N5GPF89WBerHoGA4QTcbUjYiLQtKdrfXnqAcXyTv" crossorigin="anonymous" />

This is huge and not great regarding GDPR.

Using fontawesome brands icons

Hi,

I am having trouble using brands icons. Is there anything special to do (solid and general icons are working fine) ?

In my config.toml, I added:

[[params.nav]]
  identifier = "linux"
  name = "Linux"
  icon = "fas fa-linux fa-lg"
  url = "/linux/"
  weight = 3

Sorry, if I missed anything here.

Thanks,
Best regards,

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.