tomanistor / osprey Goto Github PK
View Code? Open in Web Editor NEWSimple, clean, and fast one-page Hugo portfolio theme accompanied by a blog
Home Page: https://tomanistor.com
License: Apache License 2.0
Simple, clean, and fast one-page Hugo portfolio theme accompanied by a blog
Home Page: https://tomanistor.com
License: Apache License 2.0
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?
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
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 new to Hugo and love the theme. I couldn't figure out how to change font with sass variables. It should be fairly easy but I don't see any docs or configs on it.
When I scroll down the page, the image in the top left corner gets trimmed down to 50x13! That's so tiny, you can't see any part of it. Is there some way to make that bigger?
Relevant line: https://github.com/tomanistor/osprey/blob/master/layouts/partials/header.html#L103
Cheers,
Aaron (insp3ctre)
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.
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.
Any chance you could add a table of contents to the theme? There's a guide here: https://gohugo.io/content-management/toc/.
Cheers,
Aaron (insp3ctre)
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!
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!
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
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
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. :)
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)
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?
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
created a content/fontawesome/ directory where I put svgs of the most likely to be used icons
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 }}
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 :-)
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.
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.
Steps to reproduce
Expected behavior
Actual behavior
Great theme though! Good work! I'm using your theme at www.twiddlebit.se, my personal website.
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
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...
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?
Hi, I have found a little bug in the mobile version, If you open the menu and scroll up the page, the logo will appear and the close button will disappear until you scroll down again.
See this https://youtu.be/SIhmHpV_iFA
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?
Hello @tomanistor I found a new problem, if you open the page in iPad (I have tested with iPad 2017 model, safari and chrome) you can't click the portfolio items.
Any idea what is happening here?
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.
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/
I think it would be great to support permalinks
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)
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.
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
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!
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)
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
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!
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
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.
Cheers,
Aaron (insp3ctre)
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?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.