Giter VIP home page Giter VIP logo

osprey's Introduction

Logo

Osprey

Osprey is a simple, clean, and fast one-page Hugo portfolio accompanied by a blog.

Features

  • Minimalist, clean, and uncluttered theme
  • Portfolio display gallery
  • Disqus comments
  • Formspree AJAX contact form (with Formspree Gold)
  • Basin AJAX contact form (free)
  • Responsive Flexbox Grid
  • SASS styling
  • Minimized/compressed CSS and JavaScript files with cachebusting hash setup
  • Syntax highlighting with Highlight.js
  • SEO-friendly construction
  • Google Analytics and Google Tag Manager integration
  • OpenGraph and Twitter Cards integration
  • Quick loading speeds
  • Custom CSS option

Screenshot

Screenshot

Installation

Option 1: Clone Repository

In the root of your Hugo site directory run:

$ cd themes
$ git clone https://github.com/tomanistor/osprey.git

Option 2: Create Submodule

Create a submodule linked directly to the theme's GitHub repository in order to receive updates:

$ git submodule add https://github.com/tomanistor/osprey.git themes/osprey

Then run:

$ git submodule update --init --recursive --remote

Configuration

Osprey comes with several configuration options to aid in site customization. This is an example config.toml file:

title = "Osprey Example Site"
baseURL = "https://tomanistor.com"
tags = ["portfolio", "web design", "blog"]
languageCode = "en-US"
config = "config.toml"
theme = "osprey"
canonifyURLS = true
googleAnalytics = ""
disqusShortname = "tomanistor"
disableKinds = ["taxonomy", "taxonomyTerm"] # This theme does not currently use "tag" and "category" taxonomies

[Params]
  tagline = "Osprey Example Site"
  author = "Toma Nistor"
  description = "Full-stack web developer and UI/UX enthusiast based in San Diego, CA."
  logoBig = "/images/osprey-logo.png"
  logoSmall = "/images/osprey-logo.png"
  favicon = "favicon.ico"
  opengraphImage = "/images/osprey.png"
  email = ""
  googleTagManager = ""
  customCSS = false

  # Social media links in footer
  twitter = "TomaNistor"
  linkedin = "tomanistor"
  github = "tomanistor"
  facebook = ""

  # Copyright and theme author credit in footer
  copyright = false
  credit = false

  # Cache busting of static resources (additional set up required)
  cacheBustCSS = true
  cacheBustJS = true

  # Code highlighting with highlight.js
  highlightJS = true
  highlightJSStyle = "" # For custom highlight.js styles, add your /path/to/styles/default.css
  highlightJSScript = "" # For custom highlight.js languages config, add your /path/to/highlight.pack.js

  # Choose either Formspree contact form or Basin contact form
  ajaxFormspree = false
  ajaxFormspreeGold = false
  ajaxBasin = "https://usebasin.com/f/0eae7044d4c2"

  # Lazy loading with lazysizes
  lazyloading = true

[[menu.main]]
  name = "About"
  url  = "/#about"
  weight = 1
[[menu.main]]
  name = "Work"
  url  = "/#work"
  weight = 2
[[menu.main]]
  name = "Blog"
  url  = "/#blog"
  weight = 3
[[menu.main]]
  name = "Contact"
  url  = "/#contact"
  weight = 4

Using Osprey

The two main content types are blog posts and gallery images.

About Section

To create an about section that renders on the home page, run:

$ hugo new about.md

Blog Posts

To create a new blog post, run:

$ hugo new blog/post-title.md

Gallery Images

To add a new image to your portfolio, run:

$ hugo new gallery/image-title.md

The gallery archetype comes with its own configuration. Here is an example:

+++
date = "2017-05-10T21:35:17-07:00"
title = "Image Title"
image = "image-file.png"
alt = "This is a description of the image"
color = "#7ac143"
link1 = "https://tomanistor.com"
link2 = "https://github.com/tomanistor"
+++

Contact Form

Two contact forms services are offered as options: Formspree and Basin.

Formspree

Update 4/15/18 - Formspree no longer offers newly set up AJAX contact forms for free. This is now a Formspree Gold feature. You can either use the non-AJAX version of Formspree (which redirects to a Captcha page on form submit) by setting the config.toml parameter ajaxFormspreeGold to false, sign up for Formspree Gold and set the parameter to true, or sign up for Basin and use their contact form service for free.

The email address specified in the config.toml file will be the one receiving messages sent through the contact form. The contact form is operated by Formspree and requires that the form must be submitted once initially to confirm the email address being used. See instruction here.

Basin

Basin is an alternative, free AJAX contact form service. To use Basin, sign up for a free account and create a form. Copy and paste your form's URL endpoint to the ajaxBasin config.toml parameter. Select the Submit this form via AJAX option on your Basin dashboard.

Basin AJAX setup

Custom CSS

To implement custom CSS sitewide, change the config.toml parameter customCSS from false to true and then create a css.html file in your layouts/partials/ folder like the example below:

<style>
  <!-- This will remove the shadow on the navbar -->
  nav {
    box-shadow: none;
  }
</style>

This will render inline CSS in the head of your site and without adding an extra HTTP request.

Cache Busting

As of v2.1.0, this theme uses native Hugo Pipes for cache busting of assets. Generated assets will be served from the resources folder and will no longer require any additional setup with Gulp.

Contributions

If you'd like to help with the development of this theme, I encourage you to submit a pull request or create an issue if you find a bug. All help is appreciated.

License

This theme is released under the Apache 2.0 license. For more information read the license.

osprey's People

Contributors

bangfalse avatar chinkung avatar gam-phon avatar globetrotter avatar gustavotero7 avatar joeraut avatar kdevo avatar krombel avatar ntrossat avatar tomanistor 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

osprey's Issues

Adding SVG icon at the bottom of the Footer

Hey All,

I was wondering how one would put a svg icon at the bottom of the footer for this portfolio since icons are bit more universally recognized. I really enjoy the feel of this project , and I am hoping anybody could help out.

When building/serving, "error calling index: index of untyped nil"

Attempting to build/serve site and receive this error. Osprey version 1.3.0, Hugo version 0.52/extended windows/amd64.

Building sites … ERROR 2018/12/19 08:57:13 render of "page" failed: execute of template failed: template: _default/single.html:3:5: executing "_default/single.html" at <partial " header.html...>: error calling partial: "C:\Hugo\Sites\site\git\themes\osprey\layouts\partials\header.html:79:95": execute of template failed: template: partials/header.html :79:95: executing "partials/header.html" at <index .Site.Data.cac...>: error calling index: index of untyped nil

ERROR 2018/12/19 08:57:13 render of "page" failed: execute of template failed: template: _default/single.html:3:5: executing "_default/single.html" at <partial "header.html...>: error calling partial: "C:\Hugo\Sites\site\git\themes\osprey\layouts\partials\header.html:79:95": execute of template failed: template: partials/header.html:79:95: executing "partials/header.html" at <index .Site.Data.cac...>: error calling index: index of untyped nil

ERROR 2018/12/19 08:57:13 render of "page" failed: execute of template failed: template: _default/single.html:3:5: executing "_default/single.html" at <partial "header.html...>: error calling partial: "C:\Hugo\Sites\site\git\themes\osprey\layouts\partials\header.html:79:95": execute of template failed: template: partials/header.html:79:95: executing "partials/header.html" at <index .Site.Data.cac...>: error calling index: index of untyped nil Total in 175 ms

Error: Error building site: failed to render pages: render of "home" failed: execute of template failed: template: index.html:3:5: executing "index.html" at <partial "header.html ...>: error calling partial: "C:\Hugo\Sites\site\git\themes\osprey\layouts\partials\header.html:79:95": execute of template failed: template: partials/header.html:79:95: exe cuting "partials/header.html" at <index .Site.Data.cac...>: error calling index: index of untyped nil

Custom font

Nice work!

One question though: is it possible to use a custom (Google) font? In that case how?
Except for fiddling with the generated html of course.

generate project lists via Github Data Template

Hey! I love this template. I think I saw you mention somewhere an idea about automatically pulling data from user Github repos to display as projects. I was toying around with doing something similar; I have some ideas and am curious as to how you think this could be approached?

Adding smooth scrolling to the anchor tags

When clicking on a menu there seem to drastically jump into the anchor link. I think a better user experience will be adding a smooth scroll instead of jumping right of away.

jump

I have not look at the code of this page yet. However, this is an example using jQuery of smooth scrolling.
http://jsfiddle.net/9SDLw/

Param for og:image/twitter card in front-matter

First of all I like this template a lot. I was wondering if adding an optional front-matter parameter on blog posts for og:image / or twitter summary image would be a good idea. Something like .FeaturedImage. so you wouldn't end up sharing links with the same preview image.
What do you think. I would be glad to help. :)

More loyal open source license?

Nice work. Users of your theme should publish their websites under GPL3 license too. It is not appropriate for my case, but I like your theme. Would you be able to change it to MIT or Apache 2?

main.min.css but not looking for that in head.html

head.html:

  <link rel="stylesheet" href="{{ .Site.BaseURL }}/styles/{{ if .Site.Params.cacheBustCSS }}{{ index .Site.Data.cachedAssets "main.css" }}{{ else }}main.css{{ end }}" type="text/css">

Yet, there is main.min.css under static/styles

Navbar drawing over homepage

Clicking the homepage image when the navbar is open on mobile devices leads to both being drawn onscreen at the same time. Will try to fix later.
Steps to recreate: F12 + select mobile view, click hamburger icon, click homepage icon

Contact form, isn't working (even in demo)

Hi, I have a little problem,

I have done the verification with formspree.io, and I have tested it and works (outside the Hugo site)

But when I try it in my site it doesn't work, nothing happen. the site I'm testing is www.chimera.digital

How can I make it work?

PD: email field is set in the config.toml file, I have verified the HTML result and the output it's right
<form id="form-contact" action="https://formspree.io/[email protected]" method="POST">

PD2: In the demo site the form neither works. But in the tomanistor site it works well, I can see email sent message (sorry for the blank email)

Theme demo broken on Hugo Themes Showcase

Hello @tomanistor

Currently your theme's demo does not generate as mentioned in gohugoio/hugoThemes#669 (comment)

To fix you need to change line 8 of theme.toml to: min_version = "0.24.1"

The min_version needs to be a string

Furthermore after testing the above change I noticed the your theme's stylesheet is 404.

In line 83 of layouts/partials/head.html you reference a main.css file that does not exist in the repo.

Instead under static/styles/ there is a main.min.css

Feel free to close this issue once you do the above

Also note that once gohugoio/hugoThemes#668 is addressed you will need to keep an eye on whether the Osprey theme demo generates on the Hugo website.

We are a very small team and we just cannot keep up opening issues in the various theme repositories. Whenever a theme demo breaks and remains broken then at some point it will be removed from the list without prior warning.

Thank you.

cc: @digitalcraftsman

How did you compile the CSS?

I'm trying to update the SCSS file and recompile it using the scss tool, but I can't seem to output the same type of CSS file as is included in the theme. How did you compile your SCSS file into CSS?

Cheers,
Aaron (insp3ctre)

hugo server onlocal host not see blog

thank you for your job ,your themes is very beautiful

i push it to github pages it work good

but when i start it with hugo server on mylocal host i found the blog not see

on local host see:

111111111

222222

on github pages see:
3333333

Question about gallery

So I ran the sample gallery hugo new gallery/image-title.md

Inside the file I added

---
title: "Image Title"
date: 2017-10-07T14:38:42+02:00
draft: false
---

+++
date = "2017-05-10T21:35:17-07:00"
title = "Image Title"
image = "osprey-logo.png"
alt = "This is a description of the image"
color = "#7ac143"
link1 = "https://tomanistor.com"
link2 = "https://github.com/tomanistor"
+++

But it keeps loading as

afbeelding

Notice the broken link symbol. So I am wondering how to get the gallery running, which is the final part I need right now.

I am not able to generate index.html for anything but about page

I am using Hugo Osprey Theme and only my about page is rendering

Site Code: https://github.com/nehiljain/nehil-site-v2

Currently:
https://nehiljain.com/about - Works
https://nehiljain.com/lists - Doesn’t work

Hugo env:
Hugo Static Site Generator v0.69.0/extended darwin/amd64 BuildDate: unknown
GOOS=“darwin”
GOARCH=“amd64”
GOVERSION=“go1.14.2”

I checked the public folder and the folder ‘lists’ was not present so my guess is that something is wrong in the generation process.

No CSS on Gitlab Pages

I wanted to host the website on Gitlab Pages, but the CSS is missing. For the CI, I used the default config from the Hugo example:

# All available Hugo versions are listed here: https://gitlab.com/pages/hugo/container_registry
image: registry.gitlab.com/pages/hugo:latest

variables:
  GIT_SUBMODULE_STRATEGY: recursive

test:
  script:
  - hugo
  except:
  - master

pages:
  script:
  - hugo
  artifacts:
    paths:
    - public
  only:
  - master

The file is avaialbe on the example page and my project is availabe here.

link underlines not showing on chrome

Hi Toma,

I am using your theme for my website which I'm hosting on github pages. When viewing the website locally I can see the link underlines which I understand is created using a combination of a background image and text shadow. The strange thing is that the underlines do not show up on chrome when I view the online version of my website. They show fine on Safari and on my iphone. They also show fine when I view my website on chrome locally.

If you visit "Future of Work" post on my website for example and search for "Whitebox Consulting", that should be a link. If you hover over it, it'll get highlighted. But the underline should not show up if you are viewing on chrome. I'm using the most recent version of chorme : 68.0.3440.106

So I started inspecting and figured out that if I change the .content a css and instead of background-size: 1px 2px I set it to background-size: 2px 3px then the underline starts showing up! It seems like the image has been too small and 1 pixel has been lost somewhere.

Do you have any idea why this is happening?

Local Gallery Item Pop-up Functionality

When viewing the site https://tomanistor.com/ it looks like the site is using a modified version of the Osprey theme, because the gallery functionality I see with the GitHub theme allows for links that head elsewhere while the tomanistor site has a window pop-up with expanded information per gallery item, not merely links.

Is this an existing feature I'm not understanding the implementation of, or is this something that hasn't been introduced into the theme?

Unable to resolve "styles.main.css"

When using the baseURL of "/" (as recommended in a number of places, including here), the main.css file is attempting to be loaded from http://styles/main.css, which obviously doesn't resolve anywhere.

Here's the relevant line of code: https://github.com/tomanistor/osprey/blob/master/layouts/partials/header.html#L74

I fixed this by changing it to the following:

<link rel="stylesheet" href="{{ .Site.BaseURL }}styles/{{ if .Site.Params.cacheBustCSS }}{{ index .Site.Data.styles.hash "main.css" }}{{ else }}main.css{{ end }}" type="text/css">

I simply removed the leading / before styles/, so it would load from [baseUrl]/styles/main.css.

Cheers,
Aaron (insp3ctre)

Page's Now is deprecated

Running Hugo 0.26 I get this message:

11:11:36 AM: ERROR 2017/08/22 10:11:35 Page's Now is deprecated and will be removed in Hugo 0.27. Use now (the template func).

The theme will need to be updated to avoid this error.

Sort gallery pages

Is there a way to sort gallery pages in a custom order?

I see that the gallery.html file bases its order on .Site.RegularPages, but I was wondering if there was a field (or workaround) that could determine the list order of this array, aside from creating content in a specific chronological order, which may not be ideal if I want to feature a mixture of older and newer posts.

Thanks!

FormSpree- requires verifying email on first submission

It might be worthwhile to include in the README that to use the form element, you need to confirm your email with formspree.io the first time it gets used. I don't believe it will actually work until you've confirmed your email, so someone may miss out on an important form submission.

formspree setup

Cheers,
Aaron (insp3ctre)

One-liners to re-generate the various min files (js and css)?

I'm curious what one-liners you use to re-generate the various min files and test if the changes you made work or not. I'd like to use them to be sure I mimic the exact steps you take and don't commit something weird in a future PR.

I'm new to Hugo, so maybe I'm missing something dead simple that does it for me.

Thanks Toma!

Don't steal jQuery $

I'm loving Osprey but I was trying to add some gallery support to my site which uses jQuery and had a heck of time trying to figure out why it didn't work only to finally realize that Osprey completely steals the $ jQuery shortcut: https://github.com/tomanistor/osprey/blob/master/static/scripts/src/main.js#L1-L2
To get things to work I had to rename $ and $$ in the Osprey files so they didn't conflict with standard jQuery.
I totally appreciate leaving out jQuery from your theme and but wanting the convenience of the $ and $$ shortcuts, but it would be great if it didn't preclude you from using Osprey and something else that uses jQuery.

Thanks!

Menu is not centered until user scrolls

Steps to reproduce

  • Reload demo website with wide enough viewport that menu items are visible, but not much wider

Expected behavior

  • Menu items are centered

Actual behavior

  • Menu items are not centered until user scrolls, because the logo is taking up space even though it is not displayed

Great theme though! Good work! I'm using your theme at www.twiddlebit.se, my personal website.

Adding pages and posts

So I generated a site, added some extra buttons, extra content, ...

Then I do hugo server -D and all extra md files are processed properly (by providing an extra .html file in the theme templates). However if I run hugo without server and copy contents from public folder to my ftp, all the extra pages are not rendered.

Am I missing something?

Size of the frontal page image

is it possible to somehow quickly change the allowed dimensions of the image that is rendered on the front page? I would like to add a larger one but cannot find where the dimensions of this object are defined...

Use fontawesome in footer (and elsewhere)

This is more of an improvement suggestion, and while I would love to do a PR I could sort out how to put the final touch to it (I really have no understanding of css/scss).
Basically, replacing the link texts by fontawesome logos in the footer would be (I think) pretty slick. I'm not to keen on loading a full set of icons so I figured I'd try the method outline here: https://www.client9.com/using-font-awesome-icons-in-hugo/

Steps

  1. created a content/fontawesome/ directory where I put svgs of the most likely to be used icons

  2. created a fontawesome.html in layout/partial and layout/shortcode with:

{{- $fname:=print "fontawesome/" . ".svg" -}} 2 {{- $path:="<path" -}} 3 {{- $fill:="<path fill=\"currentColor\"" -}} 4 {{ replace (readFile $fname) $path $fill | safeHTML }}

  1. copied footer.html in layout/partials

The issue is that there is no styling (size) of the svg and that it therefore messes the display. I have tried to inject some custom css (like .svg { } ) but to no avail. Tried to fiddle with the scss too, but with no results either.

PS: thanks for the theme, really. I wish I could contribute a bit more, but that's beyond my abilities :-)

Gallery image resize

Hi Tom,

When you select an image for the gallery, it automatically gets resized and creates a border with the color that you choose.

+++
date = "2017-05-15T21:52:57-07:00"
title = "Banff Campsite Scheduler"
image = "banff-header.png"
alt = "Sample"
color = "#53c9db"
link1 = "https://google.com"
link2 = ""
+++

I would like to be able to have the image take up the entire allotted space (no color surrounding it). Is there a way to do this? I tried setting color = "" but it still gets resized.

Thank you for the excellent theme!

Cryptic error when building sites

Hi,

Followed the basic tutorial from your themes page. hugo server -D and hugo throws this error message which I cannot resolve:

Started building sites ...
ERROR 2017/07/30 22:35:27 Error while rendering "home": template: theme/index.html:3:3: executing "theme/index.html" at <partial "gallery.htm...>: error calling partial: template: theme/partials/gallery.html:27:17: executing "theme/partials/gallery.html" at <after 3 (where .Site...>: error calling after: no items left

go version: go version go1.8.3 darwin/amd64
hugo version: Hugo Static Site Generator v0.25.1 darwin/amd64 BuildDate: 2017-07-30T19:27:07+02:00

adding a carousel

I was wondering if there was a way to add a carousel to the theme? I tried to add an image carousel using instructions form the Hugo universal theme. (with owl.js) I couldn't figure out how to do it. I was wondering how I would go about adding a small image carousel under the main logo. Or maybe creating a separate partial for it. I'm new to Hugo

Template fails a wercker based Hugo build

i've been trying to use osprey as the theme for a hugo site hosted on github pages, using wercker to automatically build the site based on a push. The following is a list of errors that cause the wercker hugo build to fail
ERROR: 2017/07/04 template: theme/_default/list.html:6: function "humanize" not defined
ERROR: 2017/07/04 template: theme/_default/single.html:8: function "default" not defined
ERROR: 2017/07/04 template: theme/partials/about.html:3: function "readDir" not defined
ERROR: 2017/07/04 template: theme/partials/blog.html:12: function "default" not defined
ERROR: 2017/07/04 Error while rendering section : html/template: "theme/_default/list.html" is an incomplete template

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.