You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Contributions are welcome! Fork this repo and create a merge request if you implemented a feature or a bug fix that everyone can profit from.
4
+
5
+
The necessary requirements for merge requests are:
6
+
1. Theme should be kept leightweight
7
+
2. Keep it modular: New features should be made optional if possible or if they influence performance in any way
8
+
3. Document your changes; most importantly your config changes in **config.toml** (if there are any)
9
+
10
+
## License
11
+
12
+
This theme is released under the Apache 2.0 license, just like its predecessor. For more information read the [license](https://github.com/kdevo/osprey-delight/blob/master/LICENSE.md).
Osprey Delight makes heavy use of various Hugo features, e.g. directly benefits from Hugo's virtual file system and [directory structure](https://gohugo.io/getting-started/directory-structure/), [partials](https://gohugo.io/templates/partials/), as well as using the awesome [Hugo Pipes](https://gohugo.io/hugo-pipes/) whenever it makes sense.
4
+
5
+
This also means that you normally do not need to maintain a separate fork. If you have built something nice, don't be afraid to share the customization via [PR](https://github.com/kdevo/osprey-delight/pulls), so that others can profit from it, too. :rocket:
6
+
7
+
## Custom SCSS
8
+
9
+
Place a file named `_custom.scss` in your `assets/sass/` folder (create the directories if needed). This will override the theme's `_custom.scss` which is loaded in the internal main SCSS.
10
+
11
+
> The theme's built-in `_custom.scss` contains useful customization examples, so don't be afraid to copy, override and experiment with it.
12
+
13
+
### Theming
14
+
15
+
Coming soon.
16
+
Take a look at [the themes directory](themes/osprey-delight/assets/sass/themes) for a sneak peek!
17
+
18
+
### Syntax Highlighting (for Blog)
19
+
20
+
Limiting external dependencies is important when it comes performance, therefore only Hugo's internal [Chroma Syntax Highlighting](https://gohugo.io/content-management/syntax-highlighting/) is supported. Here's how to use it:
21
+
22
+
1. Generate a Chromastyle of your choice (in this case `solarized-dark`) as `_custom.scss` in project root: `hugo gen chromastyles --style=solarized-dark > _custom.scss`
23
+
2. Move the file to `assets/sass/` folder
24
+
3. Add `pygmentsUseClasses = true` to your config.yaml
25
+
26
+
> Refer to [the official Hugo documentation](https://gohugo.io/content-management/syntax-highlighting/) for more info.
27
+
28
+
## Custom templates
29
+
30
+
### Extent the head
31
+
32
+
In case you want to load custom HTML for additional scripts etc. inside the page's `head`: Place a file named `head-extended.html` in your `layouts/partials/` folder (create the directories if needed). This file can e.g. contain additional `<script>` or `<link>` tags.
Osprey **De**light is a sugar-free version of the [awesome Osprey theme](https://github.com/tomanistor/osprey) by [Toma Nistor](https://tomanistor.com/) for [Hugo](https://gohugo.io/), a fast static site generator.
17
-
18
-
It's a [blazingly fast](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fkdevo.github.io%2F) minimalistic single page portfolio perfectly suited to show off your awesome work!
19
-
20
-
> 💡 The theme tastes a bit different than the original (hence the *light* in the name) but also adds great new functionality - hopefully to your ***delight***. Read more about the motivation and differences of the fork [here](./MOTIVATION.md), but also check out the feature summary below!
21
-
22
-
## Features
23
-
24
-
- Gallery items with different types
25
-
-`normal`: Just as you are used to with the original Osprey theme
26
-
-`github`: Magic GitHub API integration
27
-
- Gallery images can optionally be normalized with Hugo's [amazing image processing](https://gohugo.io/content-management/image-processing/)
28
-
- Blazingly fast loading speeds
29
-
- Minified JS/CSS/icon bundles using Hugo Pipes
30
-
- Lazy-loading of images using lazysizes
31
-
- Contact form using Basin with Honeypot protection
32
-
- Fancy UX
33
-
- Smooth scrolling plus scroll-spy
34
-
- Nice CSS animations
35
-
- Awesome icons in the footer
36
-
- Modular theme, enable features as you want
37
-
- Intelli-404: Automatically searches for suitable matches - never loose the link to your content
38
-
- SEO-optimized
39
-
- High PageSpeed Insights score
40
-
- Automatically generated structured data ensures that everyone finds you
41
-
42
-
In general, many [open issues](https://github.com/tomanistor/osprey/issues) of the original theme have been resolved.
13
+
## Overview
43
14
15
+
Osprey Delight is the free-minded artist's choice for a clutter-free and blazingly fast single-page portfolio.
44
16
45
-
## Keep it up
17
+
It's perfectly suited to show off your awesome work!
46
18
47
-
There are multiple ways to show your support if you like this project:
48
-
- Start [contributing](#Contributing) if you are familiar with Hugo themes/templating
49
-
-[Donate anything to my non-profit organization](https://pyotek.dev/donate) via various options
50
-
- Push the  button - a small gesture with huge effect
19
+
> It tastes a bit different than [the original great Osprey theme](https://github.com/tomanistor/osprey) and adds awesome new functionality to your **delight**.
51
20
52
-
##Screenshots
21
+
### Showcase
53
22
54
-
Osprey Delight works with gallery items which are organized in a Flexbox grid:
23
+
Check out how Osprey Delight performs in the real-world:
55
24
56
-
25
+
-[Protonaut Music](https://protonautmusic.com/) - Musician and top contributor whose highly individualized site got kickstarted by Osprey Delight.
26
+
-[KDEVO](https://kdevo.github.io/) - The maintainer's site. It wouldn't be me if I would not run this theme personally. It's basically in the vanilla version.
57
27
28
+
### Features
58
29
59
-
The items can be opened and a modal will show up:
30
+
- Single page made out of extensible section building blocks
31
+
- About: Introduce yourself
32
+
- Gallery: Show your work using a grid-based gallery with interactive modal boxes
33
+
- Blog: Lightweight blog features
34
+
- Contact: Contact form with Basin support and built-in spambot protection
35
+
- Images are [asset-driven](https://gohugo.io/categories/asset-management). Use your high-quality images without the hassle of manually resizing them!
36
+
- Image lazy-loading via [lazySizes](https://github.com/aFarkas/lazysizes)
37
+
- Blur-up technique using automatic low-quality image placeholders (LQIP)
38
+
- SEO-optimized
39
+
-[Score 100 at PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fkdevo.github.io%2F). Every bit is fine-tuned for performance
40
+
- Auto-generated structured ensures that everyone finds you
41
+
- Delightful UX
42
+
- Smooth scrolling plus scroll-spy
43
+
- Awesome social icons in footer
44
+
- Automatically fetches GitHub repo data for you
45
+
- Sane fallbacks for No-Script/No-JS users
46
+
- Intelli-404: Automatically searches for suitable matches - never loose the link to your content
47
+
- Heavily [customizable](#customize-it) - no need to maintain a fork!
60
48
61
-
49
+
In general, many [open issues](https://github.com/tomanistor/osprey/issues) of the original theme have been resolved.
62
50
51
+
### Contribute
63
52
64
-
> If you've used the original Osprey theme before, this looks pretty familiar, right?
65
-
> To taste the differences, it's best to simply try Osprey Delight out!
53
+
There are multiple ways to show your support if you like this project:
- Become a sponsor or [donate anything to my non-profit organization](https://pyotek.dev/donate) via various options
56
+
- Push the [](https://github.com/kdevo/osprey-delight/stargazers) button - a small gesture with huge effect
66
57
67
58
## Quickstart
68
59
@@ -92,9 +83,23 @@ git pull
92
83
93
84
## Configuration and Usage
94
85
95
-
It's best if you simply check out the commented **[exampleSite/config.toml](/exampleSite/config.toml)**!
86
+
It's best if you simply check out the fully commented [config file](/exampleSite/config.yaml).
96
87
This theme follows a learning-by-doing approach.
97
88
89
+
### Images
90
+
91
+
This theme is asset-driven! It "knows" how to handle your precious assets, and there usually is no need for manual resizing.
92
+
Therefore, the recommended approach for images is to provide high-res images in the [`assets` directory](https://gohugo.io/hugo-pipes/introduction/#asset-directory).
93
+
94
+
The following table shows some guidelines regarding the assets:
Navbar-Logo | `logoSmall` (config.yaml) | 96px | Transparent, small margin top/bottom, prefer square format
100
+
Gallery | `image` (content/gallery/*) | 400px | Transparent, medium margin top/bottom/left/right, prefer square format
101
+
Background | `background` (config.yaml) | 1200px | Optional, use a high-quality JPG
102
+
98
103
### Content files
99
104
100
105
#### About section
@@ -117,53 +122,26 @@ This is very helpful for the first time since you will get a fully documented fi
117
122
118
123
> ⚠️ Please make sure that `item-name` is unique on the whole page because it will be used as an anchor/identifier!
119
124
125
+
### Contact form
120
126
121
-
### Custom (S)CSS
122
-
123
-
Place a file named `_custom.scss` in your local `assets/sass/` folder (create the directories). This will override the theme's (empty) `_custom.scss` which is loaded in the internal main SCSS.
124
-
125
-
#### Syntax Highlighting
126
-
127
-
Limiting external dependencies is important when it comes to privacy as well as performance, therefore only Hugo's internal [Chroma Syntax Highlighting](https://gohugo.io/content-management/syntax-highlighting/) is supported. Here's how to use it:
128
-
129
-
1. Generate a Chromastyle of your choice (in this case `solarized-dark`) as `_custom.scss` in project root: `hugo gen chromastyles --style=solarized-dark > _custom.scss`
130
-
2. Move the file to `assets/sass/` folder
131
-
3. Add `pygmentsUseClasses = true` to your config.toml
132
-
133
-
> Refer to [the official Hugo documentation](https://gohugo.io/content-management/syntax-highlighting/) for more info.
134
-
135
-
### Data directory (optional)
136
-
137
-
Optionally, Osprey Delight makes use of the [Hugo's data folder](https://gohugo.io/templates/data-templates/#the-data-folder).
138
-
Currently, the following files can be used to configure the theme in more detail:
139
-
140
-
-**terminal.json**: Configure several parameters for optional Termynal (see **config.toml** for an explanation)
141
-
142
-
### Contact form: Basin
143
-
144
-
Basin is a free AJAX contact form service. To use Basin, [sign up for a free account](https://usebasin.com/users/sign_up) 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.
127
+
Basin is a free AJAX contact form service that is used by this theme. To use set it up, [sign up for a free account](https://usebasin.com/users/sign_up) and create a form. Copy and paste your form's URL endpoint to the `ajaxBasin` config.yaml parameter. Select the `Submit this form via AJAX` option on your Basin dashboard.
Under Setup/"Set a Custom Honeypot Field", enter `_anti_spam_honeypot`.
151
-
Basin will [ignore all messages that contain this specific field](https://usebasin.com/docs/features/spam-filtering). This will work since there is a hidden field that users normally do not use, but spambots will blindly input their data.
134
+
Basin will [ignore all messages that contain this specific field](https://usebasin.com/docs/features/spam-filtering). This should work since there is a hidden field that users normally do not use, but spambots will blindly input their data.
152
135
153
136
154
137
155
-
Feel free to open an issue if the protection did not work for you.
156
-
157
-
158
-
## Contributing
138
+
## Next
159
139
160
-
Contributions are welcome! Fork this repo and create a merge request if you implemented a feature or a bug fix that everyone can profit from.
140
+
### Help wanted
161
141
162
-
The necessary requirements for merge requests are:
163
-
1. Theme should be kept leightweight
164
-
2. Keep it modular: New features should be made optional if possible or if they influence performance in any way
165
-
3. Document your changes; most importantly your config changes in **config.toml** (if there are any)
142
+
This README probably needs some documentation improvements for the latest features.
143
+
Any PR regarding this is welcome and please also check out [how to contribute](CONTRIBUTING.md)!
166
144
167
-
##License
145
+
### Customize it
168
146
169
-
This theme is released under the Apache 2.0 license, just like its predecessor. For more information read the [license](https://github.com/kdevo/osprey-delight/blob/master/LICENSE.md).
147
+
Want to have full control over appearance? Check out [how to customize the theme more granularly](https://github.com/kdevo/osprey-delight/blob/master/CUSTOMIZING.md).
0 commit comments