├── .ruby-version ├── .bundle └── config ├── 404.md ├── assets └── img │ ├── blog │ ├── w3m.png │ ├── resume.png │ ├── 9.1.0-1.png │ ├── 9.1.0-2.png │ ├── 9.1.0-3.png │ ├── hydejack-9.jpg │ ├── jeremy-bishop.jpg │ ├── hydejack-9-dark.jpg │ ├── hydejack-9@0,25x.jpg │ ├── hydejack-9@0,5x.jpg │ ├── example-content-ii.jpg │ ├── example-content-iii.jpg │ ├── jeremy-bishop@0,5x.jpg │ ├── hydejack-9-dark@0,25x.jpg │ ├── hydejack-9-dark@0,5x.jpg │ ├── example-content-iii@0,5x.jpg │ ├── example-content-iii@0,25x.jpg │ ├── pawel-czerwinski-848z7lbCjoo-unsplash.jpg │ ├── pawel-czerwinski-848z7lbCjoo-unsplash@0,25x.jpg │ └── pawel-czerwinski-848z7lbCjoo-unsplash@0,5x.jpg │ └── docs │ ├── chrome-print.png │ ├── google-fonts.png │ ├── pipeline-gh-actions.png │ └── pipeline-gh-pages.png ├── _sass ├── my-inline.scss └── my-style.scss ├── licenses ├── README.md ├── MIT.md ├── W3C-20150513.md ├── PRO.md └── Apache-2.0.md ├── posts.md ├── index.html ├── _data ├── variables.yml ├── authors.yml ├── strings.yml └── social.yml ├── .gitignore ├── _featured_categories └── example.md ├── README.md ├── _includes ├── features.md ├── my-head.html ├── table.md └── my-body.html ├── docs ├── README.md ├── upgrade.md ├── build.md ├── scripts.md ├── migration.md ├── deploy.md ├── install.md ├── advanced.md ├── writing.md ├── config.md └── basics.md ├── Gemfile ├── example └── _posts │ ├── 2017-11-23-example-content-ii.md │ ├── 2024-09-08-x-marks-the-spot-in-hydejack-9-2.md │ ├── 2018-06-01-example-content-iii.md │ ├── 2012-02-07-example-content.md │ └── 2020-07-03-introducing-hydejack-9.md ├── about.md ├── NOTICE.md └── _config.yml /.ruby-version: -------------------------------------------------------------------------------- 1 | 3.2.2 2 | -------------------------------------------------------------------------------- /.bundle/config: -------------------------------------------------------------------------------- 1 | --- 2 | BUNDLE_PATH: "vendor/bundle" 3 | -------------------------------------------------------------------------------- /404.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: not-found 3 | permalink: 404.html 4 | --- 5 | -------------------------------------------------------------------------------- /assets/img/blog/w3m.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/w3m.png -------------------------------------------------------------------------------- /assets/img/blog/resume.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/resume.png -------------------------------------------------------------------------------- /assets/img/blog/9.1.0-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/9.1.0-1.png -------------------------------------------------------------------------------- /assets/img/blog/9.1.0-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/9.1.0-2.png -------------------------------------------------------------------------------- /assets/img/blog/9.1.0-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/9.1.0-3.png -------------------------------------------------------------------------------- /assets/img/blog/hydejack-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/hydejack-9.jpg -------------------------------------------------------------------------------- /assets/img/blog/jeremy-bishop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/jeremy-bishop.jpg -------------------------------------------------------------------------------- /assets/img/docs/chrome-print.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/docs/chrome-print.png -------------------------------------------------------------------------------- /assets/img/docs/google-fonts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/docs/google-fonts.png -------------------------------------------------------------------------------- /assets/img/blog/hydejack-9-dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/hydejack-9-dark.jpg -------------------------------------------------------------------------------- /assets/img/blog/hydejack-9@0,25x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/hydejack-9@0,25x.jpg -------------------------------------------------------------------------------- /assets/img/blog/hydejack-9@0,5x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/hydejack-9@0,5x.jpg -------------------------------------------------------------------------------- /assets/img/blog/example-content-ii.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/example-content-ii.jpg -------------------------------------------------------------------------------- /assets/img/blog/example-content-iii.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/example-content-iii.jpg -------------------------------------------------------------------------------- /assets/img/blog/jeremy-bishop@0,5x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/jeremy-bishop@0,5x.jpg -------------------------------------------------------------------------------- /assets/img/docs/pipeline-gh-actions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/docs/pipeline-gh-actions.png -------------------------------------------------------------------------------- /assets/img/docs/pipeline-gh-pages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/docs/pipeline-gh-pages.png -------------------------------------------------------------------------------- /assets/img/blog/hydejack-9-dark@0,25x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/hydejack-9-dark@0,25x.jpg -------------------------------------------------------------------------------- /assets/img/blog/hydejack-9-dark@0,5x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/hydejack-9-dark@0,5x.jpg -------------------------------------------------------------------------------- /assets/img/blog/example-content-iii@0,5x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/example-content-iii@0,5x.jpg -------------------------------------------------------------------------------- /assets/img/blog/example-content-iii@0,25x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/example-content-iii@0,25x.jpg -------------------------------------------------------------------------------- /assets/img/blog/pawel-czerwinski-848z7lbCjoo-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/pawel-czerwinski-848z7lbCjoo-unsplash.jpg -------------------------------------------------------------------------------- /_sass/my-inline.scss: -------------------------------------------------------------------------------- 1 | // You can add CSS rules here that will be inlined into each document. 2 | // .sidebar a { 3 | // text-shadow: rgba(0, 0, 0, 0.25) 0.1rem 0.1rem 0.15rem; 4 | // } 5 | -------------------------------------------------------------------------------- /assets/img/blog/pawel-czerwinski-848z7lbCjoo-unsplash@0,25x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/pawel-czerwinski-848z7lbCjoo-unsplash@0,25x.jpg -------------------------------------------------------------------------------- /assets/img/blog/pawel-czerwinski-848z7lbCjoo-unsplash@0,5x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydecorp/hydejack-starter-kit/HEAD/assets/img/blog/pawel-czerwinski-848z7lbCjoo-unsplash@0,5x.jpg -------------------------------------------------------------------------------- /licenses/README.md: -------------------------------------------------------------------------------- 1 | # Licenses 2 | 3 | ## Open Source 4 | * [Apache-2.0](./Apache-2.0.md) 5 | * [GPL-3.0](./GPL-3.0.md) 6 | * [MIT](./MIT.md) 7 | * [W3C-20150513](./W3C-20150513.md) 8 | 9 | ## Custom 10 | * [PRO](./PRO.md) 11 | -------------------------------------------------------------------------------- /posts.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: list 3 | title: Posts 4 | description: > 5 | This is the `list` layout for showing blog posts, which shows just the title and groups them by year of publication. 6 | Check out the `blog` layout for comparison. 7 | grouped: true 8 | --- 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: blog 3 | title: Blog 4 | description: > 5 | The official Hydejack blog. Version updates, example content and how-to guides on how to blog with Jekyll. 6 | last_modified_at: 2018-08-03 7 | no_link_title: false 8 | no_excerpt: false 9 | hide_image: false 10 | cover: true 11 | --- 12 | -------------------------------------------------------------------------------- /_sass/my-style.scss: -------------------------------------------------------------------------------- 1 | .dl-table { 2 | a { 3 | @supports ((text-decoration-thickness: initial) and (text-underline-offset: initial)) { 4 | text-underline-offset: .8rem; 5 | } 6 | @supports not ((text-decoration-thickness: initial) and (text-underline-offset: initial)) { 7 | padding-bottom: .45rem; 8 | } 9 | } 10 | 11 | .btn, .gumroad-button { 12 | margin: 1rem 0; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /_data/variables.yml: -------------------------------------------------------------------------------- 1 | --- 2 | root_font_size: 15 #px 3 | root_font_size_medium: 16 #px 4 | root_font_size_large: 17 #px 5 | 6 | root_font_size_print: 8 #pt 7 | 8 | root_line_height: 1.75 9 | 10 | font_weight: 400 #=normal 11 | font_weight_bold: 700 #=bold 12 | font_weight_heading: 900 #=black (heavy) 13 | 14 | content_width: 42 #rem 15 | content_width_2: 48 #rem 16 | content_width_5: 54 #rem 17 | 18 | sidebar_width: 21 #rem 19 | border_radius: 0.5 #rem 20 | 21 | break_point_1: 42 #em 22 | break_point_2: 54 #em 23 | break_point_3: 64 #em 24 | break_point_4: 72 #em 25 | break_point_5: 86 #em 26 | break_point_font_large: 124 #em 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore docs files 2 | _site 3 | _drafts 4 | build 5 | dist 6 | 7 | # Numerous always-ignore extensions 8 | *.diff 9 | *.err 10 | *.orig 11 | *.log 12 | *.rej 13 | *.swo 14 | *.swp 15 | *.vi 16 | *~ 17 | 18 | # OS or Editor folders 19 | .DS_Store 20 | ._* 21 | Thumbs.db 22 | .cache 23 | .project 24 | .settings 25 | .tmproj 26 | *.esproj 27 | nbproject 28 | *.sublime-project 29 | *.sublime-workspace 30 | .idea 31 | 32 | # Folders to ignore 33 | node_modules 34 | package-lock.json 35 | vendor 36 | .sass-cache 37 | .jekyll-metadata 38 | .jekyll-cache 39 | .ruby-lsp 40 | .wrangler 41 | *.gem 42 | Gemfile.lock 43 | _zip 44 | /stats.json 45 | .dev.vars 46 | 47 | /assets/js/*hydejack-* 48 | /_sass/*/__*__/* 49 | -------------------------------------------------------------------------------- /_featured_categories/example.md: -------------------------------------------------------------------------------- 1 | --- 2 | # Featured tags need to have either the `list` or `grid` layout (PRO only). 3 | layout: list 4 | 5 | # The title of the tag's page. 6 | title: Example 7 | 8 | # The name of the tag, used in a post's front matter (e.g. tags: []). 9 | slug: example 10 | 11 | # (Optional) Write a short (~150 characters) description of this featured tag. 12 | description: > 13 | This is a featured category, which have their own page. 14 | Check out `_featured_tags/example.md` to learn how to create your own. 15 | 16 | # (Optional) You can disable grouping posts by date. 17 | # no_groups: true 18 | 19 | # Exclude this example category from the sitemap. 20 | # DON'T USE THIS SETTING IN YOUR CATEGORIES! 21 | sitemap: false 22 | --- 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hydejack Starter Kit 2 | 3 | A quicker, cleaner way to get started blogging with [Hydejack](https://hydejack.com/). 4 | 5 | ## Quick Start 6 | ### Running locally 7 | 1. Clone repository (git users), or [download] and unzip. 8 | 2. Open terminal, `cd` into root directory (where `_config.yml` is located) 9 | 3. Run `bundle install` [^1] 10 | 4. Run `bundle exec jekyll serve` 11 | 5. Open 12 | 13 | ## What's next? 14 | * Open files and read the comments 15 | * Read the [docs](https://hydejack.com/docs/) 16 | * Buy the [PRO version](https://hydejack.com/download/) to get the project and resume layout, newsletter subscription box, custom forms, and more. 17 | 18 | [^1]: Requires Bundler. Install with `gem install bundler`. 19 | 20 | [download]: https://github.com/hydecorp/hydejack-starter-kit/archive/master.zip 21 | -------------------------------------------------------------------------------- /licenses/MIT.md: -------------------------------------------------------------------------------- 1 | # MIT License 2 | 3 | Copyright (c) \ \ 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /_includes/features.md: -------------------------------------------------------------------------------- 1 | An incomplete list of features included in all versions of **Hydejack**: 2 | 3 | * Responsive layout with unique design features for every screen size 4 | * Cover Pages for a stunning first impression. 5 | * Customizable sidebar and touch-enabled drawer menu 6 | * Single Page Web App-style page loading 7 | * Advanced FLIP animations, inspired by Material Design 8 | * Good [Google PageSpeed Score][gpss][^11] 9 | * [Syntax highlighting][syntax], powered by [Rouge] 10 | * [LaTeX math blocks][latex], rendered with ether [KaTeX] or [MathJax] at your choice 11 | * Soft-coded labels: Change wording or translate to other languages via a single file 12 | * Support for categories and tags 13 | * Author section below each article and support for multiple authors 14 | * Built-in icons for many social networks 15 | * Simple and semantic HTML + Structured Data 16 | * Works with GitHub Pages out of the box[^12] 17 | 18 | [^11]: Actual page load speed depends on your hosting provider, location, resolution and format of images, usage of 3rd party plugins, and other factors. 19 | 20 | [^12]: Some limitations apply, most notably the need to use use MathJax instead of KaTeX for math block rendering. 21 | 22 | *[FLIP]: First-Last-Invert-Play. A coding technique to achieve performant page transition animations. -------------------------------------------------------------------------------- /_includes/my-head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 44 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Documentation 4 | description: > 5 | Here you should be able to find everything you need to know to accomplish the most common tasks when blogging with Hydejack. 6 | hide_description: true 7 | sitemap: false 8 | permalink: /docs/ 9 | --- 10 | 11 | Here you should be able to find everything you need to know to accomplish the most common tasks when blogging with Hydejack. 12 | 13 | While this manual tries to be beginner-friendly, as a user of Jekyll it is assumed that you are comfortable running shell commands and editing text files. 14 | {:.note} 15 | 16 | 17 | ## Getting started 18 | * [Install]{:.heading.flip-title} --- How to install and run Hydejack. 19 | * [Upgrade]{:.heading.flip-title} --- You can skip this if you haven't used Hydejack before. 20 | * [Config]{:.heading.flip-title} --- Once Jekyll is running you can start editing your config file. 21 | {:.related-posts.faded} 22 | 23 | ## Using Hydejack 24 | * [Basics]{:.heading.flip-title} --- How to add different types of content. 25 | * [Writing]{:.heading.flip-title} --- Producing markdown content for Hydejack. 26 | * [Scripts]{:.heading.flip-title} --- How to include 3rd party scripts on your site. 27 | * [Build]{:.heading.flip-title} --- How to build the static files for deployment. 28 | * [Deploy]{:.heading.flip-title} --- 🆕 How to deploy to a variety of popular providers. 29 | * [Advanced]{:.heading.flip-title} --- Guides for more advanced tasks. 30 | {:.related-posts.faded} 31 | 32 | ## Other 33 | * [LICENSE]{:.heading.flip-title} --- The license of this project. 34 | * [NOTICE]{:.heading.flip-title} --- Parts of this program are provided under separate licenses. 35 | * [CHANGELOG]{:.heading.flip-title} --- Version history of Hydejack. 36 | {:.related-posts.faded} 37 | 38 | [install]: install.md 39 | [upgrade]: upgrade.md 40 | [config]: config.md 41 | [basics]: basics.md 42 | [writing]: writing.md 43 | [scripts]: scripts.md 44 | [build]: build.md 45 | [deploy]: deploy.md 46 | [advanced]: advanced.md 47 | [LICENSE]: ../LICENSE.md 48 | [NOTICE]: ../NOTICE.md 49 | [CHANGELOG]: ../CHANGELOG.md 50 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | 3 | # Hello! This is where you manage which Jekyll version is used to run. 4 | # When you want to use a different version, change it below, save the 5 | # file and run `bundle install`. Run Jekyll with `bundle exec`, like so: 6 | # 7 | # bundle exec jekyll serve 8 | # 9 | # This will help ensure the proper Jekyll version is running. 10 | # Happy Jekylling! 11 | gem "jekyll", "~> 4.3" 12 | 13 | gem "jekyll-theme-hydejack", "~> 9.1" 14 | 15 | # If you are part of the ["Customers" team](https://github.com/orgs/hydecorp/teams/pro-customers), 16 | # you can fetch the theme from a private repository. 17 | # See [Deploy in the Hydejack Docs](https://hydejack.com/docs/deploy) for details. 18 | 19 | # gem "jekyll-theme-hydejack", git: "https://github.com/hydecorp/hydejack-pro", tag: "pro/v9.2.0" 20 | 21 | # IMPORTANT: The followign gem is used to compile math formulas to 22 | # KaTeX during site building. 23 | # 24 | # There are a couple of things to know about this gem: 25 | # * It is not supported on GitHub Pages. 26 | # You have to build the site on your machine before uploading to GitHub, 27 | # or use a more permissive cloud building tool such as Netlify. 28 | # * You need some kind of JavaScript runtime on your machine. 29 | # Usually installing NodeJS will suffice. 30 | # For details, see 31 | # 32 | # If you're using the MathJax math engine instead, free to remove the line below: 33 | gem "kramdown-math-katex" 34 | 35 | # A JavaScript runtime for Ruby that helps with running the katex gem above. 36 | gem "duktape" 37 | 38 | # Required for `jekyll serve` in Ruby 3 39 | gem "webrick" 40 | 41 | # Uncomment when using the `--lsi` option for `jekyll build` 42 | # gem "classifier-reborn" 43 | 44 | group :jekyll_plugins do 45 | gem "jekyll-default-layout" 46 | gem "jekyll-feed" 47 | gem "jekyll-optional-front-matter" 48 | gem "jekyll-paginate" 49 | gem "jekyll-readme-index" 50 | gem "jekyll-redirect-from" 51 | gem "jekyll-relative-links" 52 | gem "jekyll-seo-tag" 53 | gem "jekyll-sitemap" 54 | gem "jekyll-titles-from-headings" 55 | gem "jekyll-include-cache" 56 | 57 | # Non-Github Pages plugins: 58 | gem "jekyll-last-modified-at" 59 | gem "jekyll-compose" 60 | end 61 | 62 | gem 'wdm' if Gem.win_platform? 63 | gem "tzinfo-data" if Gem.win_platform? 64 | 65 | -------------------------------------------------------------------------------- /licenses/W3C-20150513.md: -------------------------------------------------------------------------------- 1 | # W3C SOFTWARE NOTICE AND LICENSE 2 | 3 | **Status**: This license takes effect 13 May, 2015. 4 | 5 | This work is being provided by the copyright holders under the following license. 6 | 7 | ## License 8 | 9 | By obtaining and/or copying this work, you (the licensee) agree that you have read, understood, and will comply with the following terms and conditions. 10 | 11 | Permission to copy, modify, and distribute this work, with or without modification, for any purpose and without fee or royalty is hereby granted, provided that you include the following on ALL copies of the work or portions thereof, including modifications: 12 | 13 | * The full text of this NOTICE in a location viewable to users of the redistributed or derivative work. 14 | * Any pre-existing intellectual property disclaimers, notices, or terms and conditions. If none exist, the W3C Software and Document Short Notice should be included. 15 | * Notice of any changes or modifications, through a copyright statement on the new code or document such as "This software or document includes material copied from or derived from [title and URI of the W3C document]. Copyright © [YEAR] W3C® (MIT, ERCIM, Keio, Beihang)." 16 | 17 | ## Disclaimers 18 | 19 | THIS WORK IS PROVIDED "AS IS," AND COPYRIGHT HOLDERS MAKE NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO, WARRANTIES OF MERCHANTABILITY OR FITNESS FOR ANY PARTICULAR PURPOSE OR THAT THE USE OF THE SOFTWARE OR DOCUMENT WILL NOT INFRINGE ANY THIRD PARTY PATENTS, COPYRIGHTS, TRADEMARKS OR OTHER RIGHTS. 20 | 21 | COPYRIGHT HOLDERS WILL NOT BE LIABLE FOR ANY DIRECT, INDIRECT, SPECIAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF ANY USE OF THE SOFTWARE OR DOCUMENT. 22 | 23 | The name and trademarks of copyright holders may NOT be used in advertising or publicity pertaining to the work without specific, written prior permission. Title to copyright in this work will at all times remain with copyright holders. 24 | 25 | ## Notes 26 | 27 | This version: 28 | 29 | Previous version: 30 | 31 | This version makes clear that the license is applicable to both software and text, by changing the name and substituting "work" for instances of "software and its documentation." It moves "notice of changes or modifications to the files" to the copyright notice, to make clear that the license is compatible with other liberal licenses. 32 | -------------------------------------------------------------------------------- /_includes/table.md: -------------------------------------------------------------------------------- 1 | There are two versions of **Hydejack**: The *Free Version* includes basic blogging functionality and most of Hydejack's [Features], such as dynamic page loading and advanced animations. 2 | 3 | The *PRO Version* includes additional features for professionals, such as a [portfolio], [resume], [Dark Mode][dark], [Forms], [Built-In Search][search] and customizable cookie banners. 4 | 5 | The table below shows what's included in each version: 6 | 7 | | | Free | PRO | 8 | |:------------------------------|:-------------------:|:-------------------:| 9 | | [Blog] | ✔ | ✔ | 10 | | [Features] | ✔ | ✔ | 11 | | [Documentation][docs] | ✔ | ✔ | 12 | | [Dark Mode][dark] | ✔ | ✔ | 13 | | [Portfolio] | | ✔ | 14 | | Printable [Resume] | | ✔ | 15 | | [Built-In Search][search] | | ✔ | 16 | | [Custom Forms][forms] | | ✔ | 17 | | [Grid layout][grid] | | ✔ | 18 | | [Offline Support][ofln] | | ✔ | 19 | | Table of Contents[^21] | | ✔ | 20 | | Cookie Banner | | ✔ | 21 | | No Hydejack Branding | | ✔ | 22 | | License | [GPL-3.0][lic] | [PRO] | 23 | | Source | [GitHub][src] | Included | 24 | | __Price__ | __Free__ | __$99__{:.price} One-Time Purchase[^xx] | 25 | |===============================+=====================+=====================| 26 | | | [__Download__][kit] | [__Buy PRO__][buy]{:.gumroad-button.no-mark data-gumroad-single-product="true"} | 27 | {:.stretch-table.dl-table} 28 | 29 | [^21]: Large screens (> 1664px width) only. 30 | 31 | [^xx]: 32 | Discounts may apply, check [Gumroad][buy]{:data-gumroad-single-product="true"} for up-to-date pricing. 33 | {:.price-desc} 34 | 35 | 43 | -------------------------------------------------------------------------------- /docs/upgrade.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Upgrade 4 | description: > 5 | This chapter shows how to upgrade Hydejack to a newer version. The method depends on how you've installed Hydejack. 6 | hide_description: true 7 | sitemap: false 8 | --- 9 | 10 | This chapter shows how to upgrade Hydejack to a newer version. The method depends on how you've installed Hydejack. 11 | 12 | 0. this unordered seed list will be replaced by toc as unordered list 13 | {:toc} 14 | 15 | Before upgrading to v7+, make sure you've read the [CHANGELOG](../CHANGELOG.md){:.heading.flip-title}, 16 | especially the part about the [license change](../CHANGELOG.md#license-change)! 17 | {:.note} 18 | 19 | ## Free version 20 | Upgrading the free version of the theme is as easy as running 21 | 22 | ```bash 23 | bundle update jekyll-theme-hydejack 24 | ``` 25 | 26 | ## PRO Version 27 | 28 | In v9, the structure of Hydejack PRO sites has changed. If you're looking to upgrade from v8 or earlier, 29 | check out [Installation for existing sites](./install.md#existing-sites) instead. 30 | {:.note} 31 | 32 | Buyers of the PRO version will find the files necessary for an upgrade in the `#jekyll-theme-hydejack` folder of the downloaded zip archive. 33 | To upgrade, simply overwrite the existing theme folder in the root directory of your site with the new one, then run 34 | 35 | ```bash 36 | bundle update jekyll-theme-hydejack 37 | ``` 38 | 39 | If you've modified any of Hydejack's files in `#jekyll-theme-hydejack`, your changes will most likely be overwritten 40 | and you have to apply them again. Make sure you've made a backup before overwriting any files. 41 | {:.note title="Important"} 42 | 43 | If you've followed the steps to add __Hydejack PRO__ as a git dependency, all you have to do is change the `tag` to the latest version: 44 | 45 | ~~~ruby 46 | # file: `Gemfile` 47 | gem "jekyll-theme-hydejack", git: "https://github.com/hydecorp/hydejack-pro", tag: "pro/v9.2.1" 48 | ~~~ 49 | 50 | Note that you can also define a git dependency based on a branch, which removes the need for manual updates: 51 | 52 | ~~~ruby 53 | # file: `Gemfile` 54 | gem "jekyll-theme-hydejack", git: "https://github.com/hydecorp/hydejack-pro", branch: "pro/v9" 55 | ~~~ 56 | 57 | ## GitHub Pages 58 | When building on GitHub Pages, upgrading Hydejack is as simple as setting the `remote_theme` key in `_config.yml` to the desired version. 59 | 60 | ```yml 61 | remote_theme: hydecorp/hydejack@v9.2.1 62 | ``` 63 | 64 | To use the latest version on the `v9` branch on each build, you can use `hydecorp/hydejack@v9`. 65 | 66 | This setting only works with the Free Version of Hydejack. 67 | **PRO Customers** must carefully merge contents of the `starter-kit-gh-pages` folder in the downloaded zip with their existing files. See [Deploy](./deploy.md){:.heading.flip-title} for a better way to use GitHub Pages, which also works with the PRO version. 68 | {:.note} 69 | 70 | 71 | Continue with [Config](config.md){:.heading.flip-title} 72 | {:.read-more} 73 | -------------------------------------------------------------------------------- /_includes/my-body.html: -------------------------------------------------------------------------------- 1 | 4 | 51 | 52 | {% comment %} 53 | 56 | {% if site.matomo_analytics %} 57 | 92 | {% endif %} 93 | {% endcomment %} 94 | -------------------------------------------------------------------------------- /docs/build.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Build 4 | description: > 5 | This chapters shows how to prepare your Hydejack site for a production build and deployment on 3rd party hosting providers. 6 | hide_description: true 7 | sitemap: false 8 | --- 9 | 10 | This chapters shows how to prepare your Hydejack site for a production build and deployment on 3rd party hosting providers. 11 | 12 | 0. this unordered seed list will be replaced by toc as unordered list 13 | {:toc} 14 | 15 | ## Building locally 16 | When building Hydejack it is important to set the environment variable `JEKYLL_ENV` to `production`. 17 | Otherwise the output will not be minified. Building itself happens via Jekyll's `build` command. 18 | 19 | ~~~bash 20 | $ JEKYLL_ENV=production bundle exec jekyll build 21 | ~~~ 22 | 23 | This will generate the finished static files in `_site`, 24 | which can be deployed using the methods outlined in the [Jekyll Documentation][deploy]. 25 | 26 | 27 | ## Building locally with latent semantic analysis 28 | By default, related posts are simply the most recent posts. 29 | Hydejack modifies this a bit, by showing the most recent posts of the same category or tag. 30 | However, the results are still pretty "unrelated". 31 | To provide better results, Jekyll supports [latent semantic analysis][lsa] via [`classifier-reborn`][crb]'s 32 | [Latent Semantic Indexer][lsi] 33 | 34 | To use the LSI, you first have to disable Hydejack's default behavior, 35 | by setting `use_lsi: true` under the `hydejack` key in your config file. 36 | 37 | ~~~yml 38 | # file: `_config.yml` 39 | hydejack: 40 | use_lsi: true 41 | ~~~ 42 | 43 | Then, you have to run `jekyll build` with the `--lsi` flag: 44 | 45 | ~~~bash 46 | $ JEKYLL_ENV=production bundle exec jekyll build --lsi 47 | ~~~ 48 | 49 | 50 | Note that this may take a long time. 51 | Once it is finished, the generated static files will be located in the `_site` directory, 52 | which can be deployed using the methods outlined in the [Jekyll Documentation][deploy]. 53 | 54 | 55 | ## GitHub Pages 56 | 57 | As of September 2024, you can deploy to GitHub Pages using a custom GitHub Action. 58 | You can read more about it in chapter [Deploy](deploy.md){:.heading.flip-title}. 59 | {:.note} 60 | 61 | If you're using the Starter Kit based on the `gh-pages` branch, or the `starter-kit-gh-pages` folder from the **PRO Version**, 62 | all you have to do is push your repository: 63 | 64 | ```bash 65 | $ git add . 66 | $ git commit "Update content" 67 | $ git push origin gh-pages 68 | ``` 69 | 70 | Make sure _Source_ is set to "Deploy from a branch" in the _Pages_ section of the repository settings, 71 | and that the branch you've pushed to matches the one selected in the dropdown: 72 | 73 | ![GitHub repository settings](../assets/img/docs/pipeline-gh-pages.png) 74 | {:.border} 75 | 76 | Ensure these settings are set to continue using the GitHub Pages legacy pipeline. 77 | {:.figcaption} 78 | 79 | Continue with [Deploy](deploy.md){:.heading.flip-title} 80 | {:.read-more} 81 | 82 | 83 | [deploy]: https://jekyllrb.com/docs/deployment-methods/ 84 | [lsa]: https://en.wikipedia.org/wiki/Latent_semantic_analysis 85 | [crb]: http://www.classifier-reborn.com/ 86 | [lsi]: http://www.classifier-reborn.com/lsi 87 | 88 | *[LSI]: Latent Semantic Indexer 89 | -------------------------------------------------------------------------------- /example/_posts/2017-11-23-example-content-ii.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Example Content II 4 | description: > 5 | A page showing how regular markdown content is styled in Hydejack. 6 | image: /assets/img/blog/example-content-ii.jpg 7 | sitemap: false 8 | --- 9 | 10 | There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project. 11 | 12 | There should be whitespace between paragraphs. 13 | 14 | Text can be **bold**, _italic_, or ~~strikethrough~~. 15 | 16 | [Link to another page](another-page). 17 | 18 | * toc 19 | {:toc .large-only} 20 | 21 | ## Header 2 22 | 23 | This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere. 24 | 25 | ### Header 3 26 | 27 | > This is a blockquote following a header. 28 | > 29 | > When something is important enough, you do it even if the odds are not in your favor. 30 | 31 | ```js 32 | // Javascript code with syntax highlighting. 33 | var fun = function lang(l) { 34 | dateformat.i18n = require('./lang/' + l) 35 | return true; 36 | } 37 | ``` 38 | 39 | ```ruby 40 | # Ruby code with syntax highlighting 41 | GitHubPages::Dependencies.gems.each do |gem, version| 42 | s.add_dependency(gem, "= #{version}") 43 | end 44 | ``` 45 | 46 | #### Header 4 47 | 48 | * This is an unordered list following a header. 49 | * This is an unordered list following a header. 50 | * This is an unordered list following a header. 51 | 52 | ##### Header 5 53 | 54 | 1. This is an ordered list following a header. 55 | 2. This is an ordered list following a header. 56 | 3. This is an ordered list following a header. 57 | 58 | ###### Header 6 59 | 60 | | head1 | head two | three | 61 | |:-------------|:------------------|:------| 62 | | ok | good swedish fish | nice | 63 | | out of stock | good and plenty | nice | 64 | | ok | good `oreos` | hmm | 65 | | ok | good `zoute` drop | yumm | 66 | 67 | ### There's a horizontal rule below this. 68 | 69 | * * * 70 | 71 | ### Here is an unordered list: 72 | 73 | * Item foo 74 | * Item bar 75 | * Item baz 76 | * Item zip 77 | 78 | ### And an ordered list: 79 | 80 | 1. Item one 81 | 1. Item two 82 | 1. Item three 83 | 1. Item four 84 | 85 | ### And a nested list: 86 | 87 | - level 1 item 88 | - level 2 item 89 | - level 2 item 90 | - level 3 item 91 | - level 3 item 92 | - level 1 item 93 | - level 2 item 94 | - level 2 item 95 | - level 2 item 96 | - level 1 item 97 | - level 2 item 98 | - level 2 item 99 | - level 1 item 100 | 101 | ### Small image 102 | 103 | ![](https://assets-cdn.github.com/images/icons/emoji/octocat.png) 104 | 105 | ### Large image 106 | 107 | ![](https://guides.github.com/activities/hello-world/branching.png) 108 | 109 | 110 | ### Definition lists 111 | 112 | Name 113 | : Godzilla 114 | 115 | Born 116 | : 1952 117 | 118 | Birthplace 119 | : Japan 120 | 121 | Color 122 | : Green 123 | 124 | ``` 125 | Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this. Or is it? 126 | ``` 127 | 128 | ``` 129 | The final element. 130 | ``` 131 | -------------------------------------------------------------------------------- /docs/scripts.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Scripts 4 | description: > 5 | There are two ways of adding third party scripts. 6 | Embedding is ideal for one-off scripts, while global scripts are loaded on every page. 7 | hide_description: true 8 | sitemap: false 9 | --- 10 | 11 | There are two ways of adding third party scripts. 12 | [Embedding](#embedding) is ideal for one-off scripts, e.g. `widgets.js` that is part of embedded tweets (see below). 13 | Adding [global scripts](#global-scripts) is for scripts that should be loaded on every page. 14 | 15 | 0. this unordered seed list will be replaced by toc as unordered list 16 | {:toc} 17 | 18 | ## Embedding 19 | Hydejack supports embedding third party scripts directly inside markdown content. This will work in most cases, except when a script can not be loaded on a page more than once (this will occur when a user navigates to the same page twice). 20 | 21 | Example: 22 | 23 | ~~~html 24 | 25 | 33 | ~~~ 34 | 35 | 36 | 37 | 38 | ## Global scripts 39 | If you have scripts that should be included on every page you can add them globally by 40 | opening (or creating) `_includes/my-scripts.html` and adding them like you normally would: 41 | 42 | ```html 43 | 44 | 48 | ``` 49 | 50 | `my-scripts.html` will be included at the end of the `body` tag. 51 | 52 | ## Registering push state event listeners 53 | When embedding scripts globally you might want to run some init code after each page load. However, the problem with push state-based page loads is that the `load` event won't fire again. Luckily, Hydejack's push state component exposes an event that you can listen to instead. 54 | 55 | ```html 56 | 57 | 62 | ``` 63 | 64 | Note that the above code must only run once, so include it in your `my-scripts.html`. 65 | 66 | `hy-push-state-start` 67 | : Occurs after clicking a link. 68 | 69 | `hy-push-state-ready` 70 | : Animation fished and response has been parsed, ready to swap out the content. 71 | 72 | `hy-push-state-after` 73 | : The old content has been replaced with the new content. 74 | 75 | `hy-push-state-progress` 76 | : Special case when animation is finished, but no response from server has arrived yet. 77 | This is when the loading spinner will appear. 78 | 79 | `hy-push-state-load` 80 | : All embedded script tags have been inserted into the document and have finished loading. 81 | 82 | ## If everything else fails 83 | If you can't make an external script work with Hydejack's push state approach to page loading, 84 | you can disable push state by adding to your config file: 85 | 86 | ```yml 87 | # file: `_config.yml` 88 | hydejack: 89 | no_push_state: true 90 | ``` 91 | 92 | 93 | Continue with [Build](build.md){:.heading.flip-title} 94 | {:.read-more} 95 | -------------------------------------------------------------------------------- /_data/authors.yml: -------------------------------------------------------------------------------- 1 | # The primary author of this blog. 2 | # Must be the same as `author` in `_config.yml`. 3 | # Change `author1` to your shortname. 4 | author1: 5 | name: 6 | email: 7 | 8 | # Used at the bottom of each page and at the top of the `about` layout 9 | # Markdown enabled, can use multiple paragraphs (enabled by `|`) 10 | about: | 11 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, 12 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 13 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 14 | 15 | Open `_data/authors.yml` to edit this text. 16 | 17 | # This photo will be used in the about section 18 | picture: 19 | path: https://via.placeholder.com/128x128 20 | # srcset is optional, but can be used to provide higher res versions for retina displays 21 | srcset: 22 | 1x: https://via.placeholder.com/128x128 23 | 2x: https://via.placeholder.com/256x256 24 | 25 | # Social media icons in sidebar 26 | # Comment/uncommet to show/hide 27 | # Rearrange to change the order in which they appear 28 | # You can also provide an absolute URL (starting with https://) instead of usernames 29 | social: 30 | twitter: 31 | github: 32 | # email: 33 | # rss: https:///feed.xml 34 | # facebook: 35 | # google: 36 | # vk: 37 | # youtube: 38 | # vimeo: 39 | # vine: 40 | # spotify: / 41 | # soundcloud: 42 | # lastfm: 43 | # instagram: 44 | # flickr: 45 | # 500px: 46 | # dribbble: 47 | # behance: 48 | # deviantart: 49 | # ello: 50 | # twitch: 51 | # steam: 52 | # reddit: 53 | # tumblr: 54 | # pinterest: 55 | # foursquare: 56 | # yelp: 57 | # stackoverflow: 58 | # npm: 59 | # hackernews: 60 | # trello: 61 | # linkedin: 62 | # xing: 63 | # blogger: 64 | # delicious: 65 | # stumbleupon: 66 | # paypal: 67 | # download: 68 | # keybase: 69 | # signal: 70 | # threads: @ 71 | # playstation: https:// 72 | # messenger: https:// 73 | # stripe: https:// 74 | # slack: https:// 75 | # gitlab: 76 | # line: 77 | # medium: 78 | # xbox: 79 | # wechat: https:// 80 | # discord: 81 | # mastodon: https:// 82 | # x: 83 | 84 | # Another author (optional) 85 | author2: 86 | name: 87 | email: 88 | about: | 89 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, 90 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 91 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 92 | 93 | Open `_data/authors.yml` to edit this text. 94 | 95 | picture: https://placehold.it/128x128 96 | twitter: 97 | github: 98 | -------------------------------------------------------------------------------- /example/_posts/2024-09-08-x-marks-the-spot-in-hydejack-9-2.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | description: > 4 | This feature release adds new social media icons for 2024 and makes dark mode available to everyone. 5 | image: 6 | path: /assets/img/blog/pawel-czerwinski-848z7lbCjoo-unsplash.jpg 7 | srcset: 8 | 1920w: /assets/img/blog/pawel-czerwinski-848z7lbCjoo-unsplash.jpg 9 | 960w: /assets/img/blog/pawel-czerwinski-848z7lbCjoo-unsplash@0,5x.jpg 10 | 480w: /assets/img/blog/pawel-czerwinski-848z7lbCjoo-unsplash@0,25x.jpg 11 | accent_image: /assets/img/blog/pawel-czerwinski-848z7lbCjoo-unsplash.jpg 12 | excerpt_separator: 13 | sitemap: false 14 | --- 15 | 16 | # X Marks the Spot in Hydejack 9.2 17 | ## New Social Media Icons 18 | 19 | Lots of things have changed in the world of social media since the last release. To bring Hydejack up to date, the default logo for Twitter has changed: 20 | 21 | → 22 | {:.larger} 23 | 24 | 25 | 26 | * toc 27 | {:toc .large-only} 28 | 29 | If you prefer the old Twitter logo, you can use it through `twitter-old`. 30 | {:.note.smaller} 31 | 32 | There are also many new social media networks, some of which are now included by default: 33 | 34 | | Name | Icon | Name | Icon | 35 | |:-----|------|:-----|------| 36 | | signal | | threads | | 37 | | playstation | | messenger | | 38 | | stripe | | slack | | 39 | | gitlab | | line | | 40 | | medium | | xbox | | 41 | | wechat | | discord | | 42 | | mastodon | | twitter | | 43 | 44 | If your perferred network is missing, note that you can always [follow the steps to add custom icons](../../docs/advanced.md#adding-a-custom-social-media-icon) from the docs, which is what I did for this release. 45 | 46 | 47 | ## Dark Mode is Now Free 48 | When I first added dark mode to Hydejack it was still considered a novelty. 49 | Unity, a popular game engine, was limiting dark mode to its paid version at the time --- a model that I've adopted for Hydejack. 50 | Today, dark mode is considered a minimal requirement for any new theme and to reflect that reality, 51 | starting with Hydejack 9.2, dark mode is included in all versions of Hydejack. 52 | 53 | 54 | ## Updated Docs 55 | The documentation has been updated with a focus on deployment via GitHub Actions and CI pipelines. 56 | I've added a chapter on how to [Deploy](../../docs/deploy.md){:.heading.flip-title} and updated many of the existing chapters. 57 | 58 | The deployment experience for __PRO customers__ has also been improved. You are now automatically added to a "PRO Customers" team on GitHub if you provide a GitHub username during checkout (existing customers can request an invite through [mail@hydejack.com](mailto:mail@hydejack.com)). 59 | Members of this team have read access to the pro repository, which allows the theme to be fetched during a CI run. 60 | For detail, check out the new [Deploy](../../docs/deploy.md){:.heading.flip-title} chapter. 61 | 62 | 63 | ## Google Fonts Off by Default 64 | Google Fonts are now turned off by default in the starter kits, but remain in use on hydejack.com for visual continuity. All associated options continue to work as they did before. Only new users have to enable them in the config file if they want to match the look of hydejack.com. 65 | 66 | The reason for this change is that sensibilities around privacy have changed in recent years. 67 | No Google product feels appropriate as a default option for an ownership and self-hosting oriented product like Hydejack. 68 | 69 | To restore the old look that matches hydejack.com, add the following to your `_config.yml` file: 70 | 71 | ```yml 72 | google_fonts: Roboto+Slab:700|Noto+Sans:400,400i,700,700i 73 | font: Noto Sans, Helvetica, Arial, sans-serif 74 | font_heading: Roboto Slab, Helvetica, Arial, sans-serif 75 | ``` 76 | 77 | On a related note, I've also decided against updating the included Google Analytics script, in part because the upgrade path is incomprehensible, but also due the the same privacy concerns that make Google Fonts a bad default option. I recommend independent analytics services like 78 | [Plausible](https://plausible.io), [Matomo](https://matomo.org/) or maybe even [Counterscale](https://counterscale.dev) (if you are a Cloudflare customer). 79 | You can include the tracking scripts by [adding them as custom HTML](../../docs/basics.md#adding-custom-html-to-the-head). 80 | 81 | -------------------------------------------------------------------------------- /example/_posts/2018-06-01-example-content-iii.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Example Content III 4 | description: > 5 | A page showing Hydejack-specific markdown content. 6 | image: 7 | path: /assets/img/blog/example-content-iii.jpg 8 | srcset: 9 | 1060w: /assets/img/blog/example-content-iii.jpg 10 | 530w: /assets/img/blog/example-content-iii@0,5x.jpg 11 | 265w: /assets/img/blog/example-content-iii@0,25x.jpg 12 | related_posts: 13 | - example/_posts/2017-11-23-example-content-ii.md 14 | - /example/2012-02-07-example-content/ 15 | sitemap: false 16 | --- 17 | 18 | Hydejack offers a few additional features to markup your markdown. 19 | Don't worry, these are merely CSS classes added with kramdown's `{:...}` syntax, 20 | so that your content remains compatible with other Jekyll themes. 21 | 22 | ## Large Tables 23 | 24 | | Default aligned |Left aligned| Center aligned | Right aligned | Default aligned |Left aligned| Center aligned | Right aligned | Default aligned |Left aligned| Center aligned | Right aligned | Default aligned |Left aligned| Center aligned | Right aligned | 25 | |-----------------|:-----------|:---------------:|---------------:|-----------------|:-----------|:---------------:|---------------:|-----------------|:-----------|:---------------:|---------------:|-----------------|:-----------|:---------------:|---------------:| 26 | | First body part |Second cell | Third cell | fourth cell | First body part |Second cell | Third cell | fourth cell | First body part |Second cell | Third cell | fourth cell | First body part |Second cell | Third cell | fourth cell | 27 | | Second line |foo | **strong** | baz | Second line |foo | **strong** | baz | Second line |foo | **strong** | baz | Second line |foo | **strong** | baz | 28 | | Third line |quux | baz | bar | Third line |quux | baz | bar | Third line |quux | baz | bar | Third line |quux | baz | bar | 29 | | Second body | | | | Second body | | | | Second body | | | | Second body | | | | 30 | | 2 line | | | | 2 line | | | | 2 line | | | | 2 line | | | | 31 | | Footer row | | | | Footer row | | | | Footer row | | | | Footer row | | | | 32 | {:.scroll-table} 33 | 34 | 35 | ## Code blocks 36 | 37 | ~~~js 38 | // Example can be run directly in your JavaScript console 39 | 40 | // Create a function that takes two arguments and returns the sum of those 41 | // arguments 42 | var adder = new Function("a", "b", "return a + b"); 43 | 44 | // Call the function 45 | adder(2, 6); 46 | // > 8 47 | ~~~ 48 | 49 | 50 | ## Math 51 | Lorem ipsum $$ f(x) = x^2 $$. 52 | 53 | $$ 54 | \begin{aligned} 55 | \phi(x,y) &= \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right) \\[2em] 56 | &= \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) \\[2em] 57 | &= (x_1, \ldots, x_n) 58 | \left(\begin{array}{ccc} 59 | \phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \\ 60 | \vdots & \ddots & \vdots \\ 61 | \phi(e_n, e_1) & \cdots & \phi(e_n, e_n) 62 | \end{array}\right) 63 | \left(\begin{array}{c} 64 | y_1 \\ 65 | \vdots \\ 66 | y_n 67 | \end{array}\right) 68 | \end{aligned} 69 | $$ 70 | 71 | 72 | ## Message boxes 73 | **NOTE**: You can add a message box. 74 | {:.message} 75 | 76 | ## Large text 77 | You can add large text. 78 | {:.lead} 79 | 80 | ## Large images 81 | ![Full-width image](https://via.placeholder.com/800x100){:.lead width="800" height="100"} 82 | 83 | ## Captions to images 84 | ![Full-width image](https://via.placeholder.com/800x100){:.lead width="800" height="100"} 85 | A caption to an image. 86 | {:.figure} 87 | 88 | ## Large quotes 89 | > You can make a quote "pop out". 90 | {:.lead} 91 | 92 | ## Faded text 93 | I'm faded, faded, faded. 94 | {:.faded} 95 | 96 | 97 | [mm]: https://guides.github.com/features/mastering-markdown/ 98 | [ksyn]: https://kramdown.gettalong.org/syntax.html 99 | [ksyntab]:https://kramdown.gettalong.org/syntax.html#tables 100 | [ksynmath]: https://kramdown.gettalong.org/syntax.html#math-blocks 101 | [katex]: https://khan.github.io/KaTeX/ 102 | [rtable]: https://dbushell.com/2016/03/04/css-only-responsive-tables/ 103 | -------------------------------------------------------------------------------- /example/_posts/2012-02-07-example-content.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Example Content 4 | description: > 5 | Howdy! This is an example blog post that shows several types of HTML content supported in this theme. 6 | sitemap: false 7 | hide_last_modified: true 8 | --- 9 | 10 | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. *Aenean eu leo quam.* Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. 11 | 12 | > Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. 13 | 14 | Etiam porta **sem malesuada magna** mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. 15 | 16 | ## Inline HTML elements 17 | 18 | HTML defines a long list of available inline tags, a complete list of which can be found on the [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTML/Element). 19 | 20 | - **To bold text**, use `**To bold text**`. 21 | - *To italicize text*, use `*To italicize text*`. 22 | - Abbreviations, like HTML should be defined like this `*[HTML]: HyperText Markup Language`. 23 | - Citations, like — Mark otto, should use ``. 24 | - ~~Deleted~~ text should use `~~deleted~~` and inserted text should use ``. 25 | - Superscript text uses `` and subscript text uses ``. 26 | 27 | Most of these elements are styled by browsers with few modifications on our part. 28 | 29 | ## Heading 2 30 | Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. 31 | 32 | ### Heading 3 33 | Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. 34 | 35 | #### Heading 4 36 | Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. 37 | 38 | ##### Heading 5 39 | Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. 40 | 41 | ###### Heading 6 42 | Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. 43 | 44 | ## Code 45 | 46 | Cum sociis natoque penatibus et magnis dis `code element` montes, nascetur ridiculus mus. 47 | 48 | ~~~js 49 | // Example can be run directly in your JavaScript console 50 | 51 | // Create a function that takes two arguments and returns the sum of those 52 | // arguments 53 | var adder = new Function("a", "b", "return a + b"); 54 | 55 | // Call the function 56 | adder(2, 6); 57 | // > 8 58 | ~~~ 59 | 60 | ## Lists 61 | 62 | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 63 | 64 | * Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 65 | * Donec id elit non mi porta gravida at eget metus. 66 | * Nulla vitae elit libero, a pharetra augue. 67 | 68 | Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. 69 | 70 | 1. Vestibulum id ligula porta felis euismod semper. 71 | 2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 72 | 3. Maecenas sed diam eget risus varius blandit sit amet non magna. 73 | 74 | Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. 75 | 76 | HyperText Markup Language (HTML) 77 | : The language used to describe and define the content of a Web page 78 | 79 | Cascading Style Sheets (CSS) 80 | : Used to describe the appearance of Web content 81 | 82 | JavaScript (JS) 83 | : The programming language used to build advanced Web sites and applications 84 | 85 | Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. 86 | 87 | ## Images 88 | 89 | Quisque consequat sapien eget quam rhoncus, sit amet laoreet diam tempus. Aliquam aliquam metus erat, a pulvinar turpis suscipit at. 90 | 91 | ![800x400](https://via.placeholder.com/800x400 "Large example image") 92 | 93 | ![400x200](https://via.placeholder.com/400x200 "Medium example image") 94 | 95 | ![200x200](https://via.placeholder.com/200x200 "Small example image") 96 | 97 | ## Tables 98 | 99 | Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 100 | 101 | | Name | Upvotes | Downvotes | 102 | |:---------|:----------|:----------| 103 | | Alice | 10 | 11 | 104 | | Bob | 4 | 3 | 105 | | Charlie | 7 | 9 | 106 | |==========|===========|===========| 107 | |Totals | 21 | 23 | 108 | 109 | Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. 110 | 111 | *[HTML]: HyperText Markup Language 112 | *[CSS]: Cascading Style Sheets 113 | *[JS]: JavaScript 114 | -------------------------------------------------------------------------------- /docs/migration.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Migration 4 | description: > 5 | This documents shows how to upgrade Hydejack from previous versions (v5) in a step-by-step manner. 6 | hide_description: true 7 | sitemap: false 8 | --- 9 | 10 | This documents shows how to upgrade Hydejack from previous versions (v5) in a step-by-step manner. 11 | 12 | Unfortunately, upgrading form v5 and earlier is not straightforward. A lot of patterns and names have changed, motivated by a variety of reasons, including better integration with the rest of the Jekyll ecosystem and simplified workflows enabled by Jekyll Collections. 13 | 14 | 0. this unordered seed list will be replaced by toc as unordered list 15 | {:toc} 16 | 17 | ## From v5 18 | ### Updating the folder structure 19 | Copy the following folders and files from Hydejack v6 into your existing repository. Make sure you merge the folder contents. 20 | 21 | * `_data/` 22 | * `_includes/` 23 | * `_layouts/` 24 | * `_sass/` 25 | * `assets/` 26 | * `index.html` (`index.md`\*) 27 | * `Gemfile` 28 | * `Gemfile.lock` 29 | 30 | Note that the `public` folder has been renamed to `assets`. 31 | You'll want to move your static assets there. 32 | 33 | ### Updating the configuration 34 | `_config.yml` has changed considerably. Open it and make the following changes. 35 | 36 | 1. Rename the following keys 37 | 38 | * `font_accent` => `font_heading` 39 | * `load_google_fonts` => `google_fonts` 40 | * `google_analytics_id` => `google_analytics` 41 | 42 | 2. Enable Jekyll Collections for categories and tags by adding 43 | 44 | ~~~yml 45 | collections: 46 | featured_categories: 47 | permalink: /category/:name/ 48 | output: true 49 | featured_tags: 50 | permalink: /tag/:name/ 51 | output: true 52 | ~~~ 53 | 54 | 3. Delete `photo` and `photo2x` form the author key and add a `picture` hash instead that looks like 55 | 56 | ~~~yml 57 | picture: 58 | path: 59 | srcset: 60 | 1x: 61 | 2x: 62 | ~~~ 63 | 64 | If you have only one photo, you can just provide the URL directly, e.g. `picture: `. 65 | 66 | For more information, see [Adding an author](config.md#adding-an-author). 67 | 68 | 4. Rename `gems` to `plugins` and make sure the list contains `jekyll-seo-tag`. 69 | 70 | ~~~yml 71 | plugins: 72 | - jekyll-seo-tag 73 | ~~~ 74 | 75 | 76 | When making changes to `_config.yml`, it is necessary to restart the Jekyll process for the changes to take effect. 77 | {:.note} 78 | 79 | 80 | ### Restoring the tags 81 | 1. Delete the `tag` folder. 82 | 2. Create a top-level folder called `_featured_tags`. 83 | 3. For each entry in `_data/tags.yml`, create a markdown file in `_features_tags` with the name of the tag as filename, 84 | e.g. `hyde.md` for tag "hyde". 85 | 4. For each tag, copy its contents from `_data/tags.yml` into the new file's front matter, e.g. 86 | 87 | ~~~yml 88 | --- 89 | layout: list 90 | name: Hyde 91 | description: > 92 | Hyde is a brazen two-column Jekyll theme... 93 | accent_image: /hydejack/public/img/hyde.jpg 94 | accent_color: '#949667' 95 | --- 96 | ~~~ 97 | 98 | Be aware that `image` has been renamed to `accent_image` and `color` has been renamed to `accent_color`. 99 | 100 | 5. Add `layout: list` to the front matter. 101 | 6. Once you've copied all tags into their own files, delete `_data/tags.yml`. 102 | 103 | ### Restoring the sidebar entries 104 | Hydejack can now link to any kind of page in the sidebar. 105 | 106 | 1. Delete `sidebar_tags` in `_config.yml`. 107 | 2. Open a file who's page you would like to add to the sidebar. If you want to add a tag, open `_featured_tags/.md`. 108 | 3. Add `menu: true` to its front matter. 109 | 4. (Optional) Set `order: `, where `` is the number at which you would like the link to appear. 110 | 111 | ### Restoring the RSS feed 112 | The feed is now provided by the `jekyll-feed` plugin instead of a custom solution. 113 | 114 | 1. Delete `atom.xml` 115 | 2. Add `- jekyll-feed` to `gems` in `_config.yml`, e.g. 116 | 117 | ~~~yml 118 | gems: 119 | - jekyll-seo-tag 120 | - jekyll-feed 121 | ~~~ 122 | 123 | 3. (Optional) Add the following to `_config.yml` to make the feed appear at the same URL as the old `atom.xml`. 124 | 125 | ~~~yml 126 | feed: 127 | path: atom.xml 128 | ~~~ 129 | 130 | ### Restoring the comments 131 | The way comments are enabled has changed slightly. 132 | You now have to enable them per page by adding `comments: true` to the front matter 133 | (this is what the [Disqus integration guide](https://disqus.com/admin/install/platforms/jekyll/) suggests). 134 | To enable them for all posts, add to the config file 135 | 136 | ```yml 137 | defaults: 138 | - scope: 139 | type: posts 140 | values: 141 | comments: true 142 | ``` 143 | 144 | ### Restoring the about page 145 | Hydejack now has a dedicated layout for about pages. 146 | To use it, open `about.md` and change the `layout` in the front matter to `about` 147 | and delete `{% raw %}{% include about-short.html author=site.author %}{% endraw %}`. 148 | -------------------------------------------------------------------------------- /example/_posts/2020-07-03-introducing-hydejack-9.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Introducing Hydejack 9 4 | image: 5 | path: /assets/img/blog/jeremy-bishop@0,5x.jpg 6 | description: > 7 | Version 9 is the most complete version of Hydejack yet. 8 | Modernized design, big headlines, and big new features. 9 | sitemap: false 10 | --- 11 | 12 | Version 9 is the most complete version of Hydejack yet. 13 | {:.lead} 14 | 15 | [Modernized](#linking-in-style) [design](#whats-in-the-cards), [big headlines](#ready-for-the-big-screen), big new features: [Built-In Search](#built-in-search), [Sticky Table of Contents](#sticky-table-of-contents), and [Auto-Hiding Navbar](#auto-hiding-navbar). That [and more](#and-much-more) is Hydejack 9. 16 | 17 | - Table of Contents 18 | {:toc .large-only} 19 | 20 | ## Linking in Style 21 | 22 | Ever since the introduction of Dark Mode, link styles have been a bit of an issue. Specifically, finding an accent color that worked on both light and dark backgrounds was the problem. With Hydejack 9, the [link style](#linking-in-style) has been revamped so that legibility is no longer tied to the choice of accent_color, giving you much more freedom in creating a unique design flavor for your site. 23 | 24 | ## Ready for the Big Screen 25 | 26 | The theme on which Hydejack is based was designed for a different era of the web. Hydejack has inherited many of its limitations, but over time I've made adjustments, such as centering the content column for better reading ergonomics. 27 | 28 | With version 9, Hydejack takes full advantage of large displays. Whether it's design indulgences such as oversized headlines, or quality of life improvements such as a floating table of contents, Hydejack now finds use for all that extra screen real estate[^1]. 29 | 30 | ## What's in the Cards? 31 | 32 | Hydejack 9 now lets you use content cards for both projects and posts. 33 | The cards have been redesigned with a new hover style and drop shadows and they retain their unique transition-to-next-page animations, which now also work on the `blog` layout. The new `grid` layout lets you do that. 34 | 35 | Good images are key to making the most out of content cards. For that reason, a [chapter on images](../../docs/basics.md#adding-images) has been added to the documentation. 36 | 37 | ## Built-In Search 38 | 39 | Hydejack now has Built-In Search. It even works offline. I've been prototyping many approaches and eventually settled on a fully client-side, off-the-main thread solution that perfectly fits the use case of personal sites and shows surprisingly good results[^2]. 40 | 41 | The new search UI is custom made for Hydejack and shows beautiful previews of your posts and pages, right on top of your regular content. 42 | 43 | Together with the Auto-Hiding Navbar, your entire content library is now only a couple of keystrokes away. 44 | 45 | ## Auto-Hiding Navbar 46 | 47 | A navbar that's there when you need it, and disappears when you don't. Simple as that. 48 | 49 | ## Sticky Table of Contents 50 | 51 | Already a staple on so many sites on the web, this pattern is now also available in Hydejack. 52 | What's unique about it is that it simply picks up the table of contents already created by kramdown's `{:toc}` tag and transparently upgrades it to a fully dynamic version. 53 | 54 | ## …and much more 55 | 56 | Other noteworthy changes include: 57 | - Support for Jekyll 4 58 | - Choice between MathJax and KaTeX for math rendering 59 | - Use of `jekyll-include-cache` for drastically improved page building speeds 60 | - New variables configuration file — adjust content width, sidebar width, font size, etc... 61 | - ...and the option to disable grouping projects by year. 62 | 63 | Read the the [CHANGELOG](../../CHANGELOG.md){:.heading.flip-title} for the full scope of features and improvements made in Hydejack 9. 64 | Maybe just glance at it to confirm that it is indeed a pretty long list. 65 | 66 | ## Even More to Come 67 | 68 | New features for 9.1 are already lined up. Code block headers and code line highlights for even better technical blogging, as well as download buttons on the resume page for PDF, vCard, and Resume JSON are just around the corner. 69 | 70 | ## Get It Now 71 | The Free Version of Hydejack is now availabe on [RubyGems](https://rubygems.org/gems/jekyll-theme-hydejack) 72 | and for the first time also on [GitHub Packages](https://github.com/hydecorp/hydejack/packages). 73 | The source code is available on [GitHub](https://github.com/hydecorp/hydejack) as always. 74 | 75 | The PRO Version is scheduled to release on July 7th on Gumroad. Pre-Orders are open now: 76 | 77 |
Loading…
78 | 79 | 80 | 81 | [^1]: If you are a fan of the old two-column layout, or don't like modern design tropes such as mega headlines, Hydejack lets you revert these changes on a case-by-case basis via configuration options. 82 | 83 | [^2]: 84 | Search was mainly tested for English and German. Please let me know about issues in other languages. 85 | While I've tried to find a multi-language solution, most showed drastically worse results for the English base case. 86 | If you're technically inclined, you can adopt the code located in `_includes/js/search-worker.js` to your needs. 87 | 88 | 89 | -------------------------------------------------------------------------------- /_data/strings.yml: -------------------------------------------------------------------------------- 1 | # Strings 2 | # ======================================================================================= 3 | # This file contains all soft-coded strings of the theme. 4 | # You can edit them here if you want to change the wording of certain phrases, 5 | # e.g. maybe you prefer "Fetching…" to "Loading…", etc. 6 | # 7 | # You can also use this to "translate" the theme into different langauges, 8 | # but note that this may not work in all situations, 9 | # especially for languages that differ significantly from English. 10 | 11 | # Free version 12 | # --------------------------------------------------------------------------------------- 13 | home: Home 14 | pages: Pages 15 | posts: Posts 16 | about: About 17 | related_posts: Related Posts 18 | other_projects: Other Projects 19 | comments: Comments 20 | jump_to: Jump to 21 | navigation: Navigation 22 | social: Social 23 | links: Links 24 | links_icon: 'icon-link' 25 | pagination: Pagination 26 | newer: Newer 27 | older: Older 28 | forward: Forward 29 | back: Back 30 | permalink: Permalink 31 | permalink_icon: 'content-hash' 32 | templates: Templates (for web app) 33 | present: present 34 | toc: Table of Contents 35 | note: Note 36 | description: Description 37 | search: Search 38 | search_placeholder: Type something… 39 | 40 | loading: Loading… 41 | redirecting: Redirecting… 42 | 43 | continue_reading: > 44 | Continue reading 45 | 46 | cookies_banner: 47 | text: > 48 | This site uses cookies. [Cookies Policy](/cookies-policy/). 49 | okay: Okay 50 | 51 | not_found: 52 | title: '404: Page Not Found' 53 | message: | 54 | Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. 55 | to try finding it again. 56 | home_link: Head back home 57 | 58 | offline: 59 | title: 'You are Offline' 60 | message: | 61 | Sorry, but you appear to be offline and this page has not been prepared for offline viewing. 62 | to try finding another page. 63 | home_link: Head back home 64 | 65 | error: 66 | title: Error 67 | message: | 68 | Sorry, an error occurred while loading . 69 | 70 | # Separators 71 | # --------------------------------------------------------------------------------------- 72 | posted: 'Posted' 73 | last_modified_at: 'Last modified at' 74 | last_modified_at_icon: 'icon-history' 75 | colon: ':' 76 | separator: '|' 77 | category_start: 'in ' 78 | category_spearator: ' / ' 79 | tag_start: 'on ' 80 | tag_separator: ', ' 81 | from_to_separator: '–' 82 | breadcrumbs_home: 'home' 83 | breadcrumbs_separator: '/' 84 | 85 | # Date formats 86 | # --------------------------------------------------------------------------------------- 87 | date_formats: 88 | post: '%d %b %Y' 89 | last_modified_at: '%Y-%m-%d' 90 | related_post: '%d %b %Y' 91 | list_group_by: '%Y' 92 | list_entry: '%d %b' 93 | project: '%Y' 94 | projects_group_by: '%Y' 95 | resume: '%b %Y' 96 | 97 | 98 | # PRO Version 99 | # --------------------------------------------------------------------------------------- 100 | # If you don't own the PRO version of Hydejack, modifying these will have no effect. 101 | 102 | welcome: 103 | more_projects: See for more 104 | more_posts: See for more 105 | 106 | resume: 107 | location: Location 108 | location_separator: ', ' 109 | email: Email 110 | phone: Phone 111 | website: Website 112 | work: Experience 113 | work_title: at 114 | highlights: Highlights 115 | volunteer: Volunteer 116 | volunteer_title: at 117 | education: Education 118 | education_title: in from with GPA of 119 | courses: Courses 120 | awards: Awards 121 | awards_title: from 122 | publications: Publications 123 | publications_title: by 124 | references: References 125 | languages: Languages 126 | fluency: Fluency 127 | skills: Skills 128 | level: Level 129 | interests: Interests 130 | summary: Summary 131 | keywords: Keywords 132 | print: Print 133 | download_pdf: PDF 134 | download_vcf: vCard 135 | download_json: JSON 136 | icons: 137 | fallback: icon-link 138 | location: icon-location 139 | born: icon-quill 140 | citizenship: icon-flag 141 | maritalStatus: icon-man-woman 142 | email: icon-envelop 143 | phone: icon-phone 144 | website: icon-home3 145 | work: icon-briefcase 146 | volunteer: icon-earth 147 | education: icon-library 148 | awards: icon-trophy 149 | publications: icon-book 150 | references: icon-quotes-right 151 | languages: icon-bubbles 152 | skills: icon-wrench 153 | interests: icon-heart 154 | -------------------------------------------------------------------------------- /about.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: about 3 | image: /assets/img/blog/hydejack-9.jpg 4 | description: > 5 | A boutique Jekyll theme for hackers, nerds, and academics, 6 | with a focus on personal sites that are meant to impress. 7 | hide_description: true 8 | redirect_from: 9 | - /download/ 10 | --- 11 | 12 | # About 13 | 14 | 15 | 16 | ## Hydejack 17 | 18 | A boutique Jekyll theme for hackers, nerds, and academics. 19 | {:.lead} 20 | 21 | 1. this list will be replaced by the toc 22 | {:toc .large-only} 23 | 24 | ![Screenshot](/assets/img/blog/hydejack-9.jpg){:.lead width="1920" height="1080" loading="lazy"} 25 | 26 | Hydejack's cover page on a variety of screen sizes. 27 | {:.figcaption} 28 | 29 | 30 | **Hydejack** is a boutique [Jekyll] theme for hackers, nerds, and academics, with a focus on personal sites that are meant to impress. 31 | 32 | It includes a blog that is suitable for both prose and technical documentation, a portfolio to showcase your projects, and a resume template that looks amazing on the web and in print. 33 | 34 | > Your complete presence on the web — A [blog], [portfolio], and [resume]. 35 | {:.lead} 36 | 37 | 38 | ## A Personal Site That Won't Disappear 39 | 40 | **Hydejack** is 100% built on Open Source software, and is Open Source itself, save for parts of the PRO version. The PRO version is a one-time payment that gives you the right to use it forever. 41 | 42 | Hydejack is all static sites. _HTML_. All you need is a web server — any web server — to have a professional web presence that lasts a lifetime. 43 | 44 | 45 | ## A Free Blogging Theme 46 | **Hydejack** started out as a free blogging theme for Jekyll — and continues to be so. 47 | 48 | 49 | 50 | 51 | ## An Impressive Portfolio 52 | A portfolio that's guaranteed to be impressive — no matter what you put into it. 53 | 54 | 55 | 56 | 57 | ## A Printable Resume 58 | Get a resume that's consistent across the board — whether it's on the web, mobile, print, or [PDF](/assets/Resume.pdf). 59 | 60 | [![Resume PDF](/assets/img/blog/resume.png){:.lead width="884" height="632" loading="lazy"}][resume]{:.no-hover.no-mark} 61 | 62 | Front and center page of a print resume generated by Hydejack. 63 | {:.figcaption} 64 | 65 | 66 | ## Just Markdown 67 | Write all content with Markdown. __Hydejack__ gives you [additional CSS classes](docs/writing.md) to stylize your content, without losing compatibility with other Jekyll themes. 68 | 69 | 70 | ## Just Markup 71 | **Hydejack** boasts a plethora of modern JavaScript, but make no mistake: It's still a _plain old web page_ at its core. It works without JavaScript and you can even view it in a text-based browser like `w3m`: 72 | 73 | ![w3m Screenshot](/assets/img/blog/w3m.png){:.tail width="1920" height="1260" loading="lazy"} 74 | 75 | The Hydejack blog, as seen by the text browser `w3m`. 76 | {:.figcaption} 77 | 78 | 79 | ## Syntax Highlighting 80 | **Hydejack** features syntax highlighting, powered by [Rouge]. 81 | 82 | ```html 83 | 84 | 89 | ``` 90 | 91 | Code blocks can have a filename and a caption. 92 | {:.figcaption} 93 | 94 | 95 | ## Beautiful Math 96 | They say math is beautiful — and with **Hydejack**'s [math support][math] it's guaranteed to also look beautiful: 97 | 98 | $$ 99 | \begin{aligned} 100 | \phi(x,y) &= \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right) \\[2em] 101 | &= \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) \\[2em] 102 | &= (x_1, \ldots, x_n) 103 | \left(\begin{array}{ccc} 104 | \phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \\ 105 | \vdots & \ddots & \vdots \\ 106 | \phi(e_n, e_1) & \cdots & \phi(e_n, e_n) 107 | \end{array}\right) 108 | \left(\begin{array}{c} 109 | y_1 \\ 110 | \vdots \\ 111 | y_n 112 | \end{array}\right) 113 | \end{aligned} 114 | $$ 115 | 116 | Hydejack uses KaTeX to efficiently render math. 117 | {:.figcaption} 118 | 119 | 120 | ## Features 121 | 122 | {% include features.md %} 123 | 124 | 125 | ## Download 126 | 127 | {% include table.md %} 128 | 129 | 130 | ## Get It Now 131 | 132 | Use the the form below to purchase Hydejack PRO: 133 | 134 |
Loading…
135 | 136 | [jekyll]: https://jekyllrb.com 137 | 138 | [blog]: / 139 | [portfolio]: https://hydejack.com/examples/ 140 | [resume]: https://hydejack.com/resume/ 141 | [download]: https://hydejack.com/download/ 142 | [welcome]: https://hydejack.com/ 143 | [forms]: https://hydejack.com/forms-by-example/ 144 | 145 | [features]: #features 146 | [news]: #build-an-audience 147 | [syntax]: #syntax-highlighting 148 | [latex]: #beautiful-math 149 | [dark]: https://hydejack.com/blog/hydejack/2018-09-01-introducing-dark-mode/ 150 | [search]: https://hydejack.com/#_search-input 151 | [grid]: https://hydejack.com/blog/hydejack/ 152 | 153 | [lic]: LICENSE.md 154 | [pro]: licenses/PRO.md 155 | [docs]: docs/README.md 156 | [ofln]: docs/advanced.md#enabling-offline-support 157 | [math]: docs/writing.md#adding-math 158 | 159 | [kit]: https://github.com/hydecorp/hydejack-starter-kit/releases 160 | [src]: https://github.com/hydecorp/hydejack 161 | [gem]: https://rubygems.org/gems/jekyll-theme-hydejack 162 | [buy]: https://gum.co/nuOluY 163 | 164 | [gpss]: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fhydejack.com%2Fdocs%2F 165 | [rouge]: http://rouge.jneen.net 166 | [katex]: https://khan.github.io/KaTeX/ 167 | [mathjax]: https://www.mathjax.org/ 168 | -------------------------------------------------------------------------------- /_data/social.yml: -------------------------------------------------------------------------------- 1 | # This file contains meta data for various social media sites 2 | email: 3 | name: Email 4 | icon: icon-mail 5 | prepend: 'mailto:' 6 | amazon: 7 | name: Amazon 8 | icon: icon-amazon 9 | google: 10 | name: Google 11 | icon: icon-google 12 | google-plus: 13 | name: Google+ 14 | icon: icon-google-plus 15 | prepend: 'https://plus.google.com/' 16 | google-drive: 17 | name: Google Drive 18 | icon: icon-google-drive 19 | facebook: 20 | name: Facebook 21 | icon: icon-facebook 22 | prepend: 'https://facebook.com/' 23 | instagram: 24 | name: Instagram 25 | icon: icon-instagram 26 | prepend: 'https://instagram.com/' 27 | whatsapp: 28 | name: WhatsApp 29 | icon: icon-whatsapp 30 | spotify: 31 | name: Spotify 32 | icon: icon-spotify 33 | prepend: "https://play.spotify.com/" 34 | telegram: 35 | name: Telegram 36 | icon: icon-telegram 37 | twitter: 38 | name: X / Twitter 39 | icon: icon-twitter 40 | prepend: 'https://x.com/' 41 | twitter-old: 42 | name: Twitter 43 | icon: icon-twitter-old 44 | prepend: 'https://twitter.com/' 45 | x: 46 | name: X 47 | icon: icon-twitter 48 | prepend: 'https://x.com/' 49 | vine: 50 | name: Vine 51 | icon: icon-vine 52 | prepend: 'https://vine.com/' 53 | vk: 54 | name: VK 55 | icon: icon-vk 56 | prepend: "https://vk.com/" 57 | renren: 58 | name: 人人网 59 | icon: icon-renren 60 | sina-weibo: 61 | name: Sina Weibo 62 | icon: icon-sina-weibo 63 | rss: 64 | name: RSS 65 | icon: icon-rss2 66 | youtube: 67 | name: YouTube 68 | icon: icon-youtube 69 | prepend: "https://www.youtube.com/channel/" 70 | twitch: 71 | name: Twitch 72 | icon: icon-twitch 73 | prepend: "https://www.twitch.tv/" 74 | vimeo: 75 | name: Vimeo 76 | icon: icon-vimeo 77 | prepend: "https://www.vimeo.com/" 78 | lanyrd: 79 | name: Lanyrd 80 | icon: icon-lanyrd 81 | flickr: 82 | name: Flickr 83 | icon: icon-flickr2 84 | prepend: "https://flickr.com/people/" 85 | dribbble: 86 | name: Dribbble 87 | icon: icon-dribbble 88 | prepend: "https://dribbble.com/" 89 | behance: 90 | name: Behance 91 | icon: icon-behance 92 | prepend: "https://www.behance.net/" 93 | deviantart: 94 | name: DeviantArt 95 | icon: icon-deviantart 96 | prepend: "https://" 97 | append: ".deviantart.com" 98 | 500px: 99 | name: 500px 100 | icon: icon-500px 101 | prepend: "https://500px.com/" 102 | steam: 103 | name: Steam 104 | icon: icon-steam 105 | prepend: "http://steamcommunity.com/profiles/" 106 | dropbox: 107 | name: Dropbox 108 | icon: icon-dropbox 109 | ondrive: 110 | name: OneDrive 111 | icon: icon-ondrive 112 | github: 113 | name: GitHub 114 | icon: icon-github 115 | prepend: "https://github.com/" 116 | npm: 117 | name: npm 118 | icon: icon-npm 119 | prepend: "https://npmjs.com/~" 120 | basecamp: 121 | name: Basecamp 122 | icon: icon-basecamp 123 | trello: 124 | name: Trello 125 | icon: icon-trello 126 | prepend: "https://trello.com/" 127 | wordpress: 128 | name: WordPress 129 | icon: icon-wordpress 130 | joomla: 131 | name: Joomla! 132 | icon: icon-joomla 133 | ello: 134 | name: Ello 135 | icon: icon-ello 136 | prepend: "https://ello.co/" 137 | blogger: 138 | name: Blogger 139 | icon: icon-blogger 140 | prepend: "https://www.blogger.com/profile/" 141 | tumblr: 142 | name: Tumblr 143 | icon: icon-tumblr 144 | prepend: "https://" 145 | append: ".tumblr.com" 146 | yahoo: 147 | name: Yahoo 148 | icon: icon-yahoo 149 | soundcloud: 150 | name: SoundCloud 151 | icon: icon-soundcloud 152 | prepend: "https://soundcloud.com/" 153 | skype: 154 | name: Skype 155 | icon: icon-skype 156 | reddit: 157 | name: reddit 158 | icon: icon-reddit 159 | prepend: "https://www.reddit.com/user/" 160 | hackernews: 161 | name: Hacker News 162 | icon: icon-hackernews 163 | prepend: "https://news.ycombinator.com/user?id=" 164 | wikipedia: 165 | name: Wikipedia 166 | icon: icon-wikipedia 167 | linkedin: 168 | name: LinkedIn 169 | icon: icon-linkedin2 170 | prepend: "https://www.linkedin.com/in/" 171 | lastfm: 172 | name: Last.fm 173 | icon: icon-lastfm 174 | prepend: "http://www.last.fm/user/" 175 | delicious: 176 | name: Delicious 177 | icon: icon-delicious 178 | prepend: "http://del.icio.us/" 179 | stumbleupon: 180 | name: StumbleUpon 181 | icon: icon-stumbleupon 182 | prepend: "http://www.stumbleupon.com/stumbler/" 183 | stackoverflow: 184 | name: Stack Overflow 185 | icon: icon-stackoverflow 186 | prepend: "http://stackoverflow.com/users/" 187 | pinterest: 188 | name: Pinterest 189 | icon: icon-pinterest2 190 | prepend: "https://www.pinterest.com/" 191 | xing: 192 | name: XING 193 | icon: icon-xing2 194 | prepend: "https://www.xing.com/profile/" 195 | flattr: 196 | name: Flattr 197 | icon: icon-flattr 198 | foursquare: 199 | name: Foursquare 200 | icon: icon-foursquare 201 | prepend: "https://foursquare.com/user/" 202 | yelp: 203 | name: Yelp 204 | icon: icon-yelp 205 | prepend: "https://www.yelp.com/user_details?userid=" 206 | paypal: 207 | name: PayPal 208 | icon: icon-paypal 209 | prepend: "https://www.paypal.me/" 210 | keybase: 211 | name: Keybase 212 | icon: icon-key 213 | prepend: "https://keybase.io/" 214 | download: 215 | name: Download 216 | icon: icon-box-add 217 | signal: 218 | name: Signal 219 | icon: icon-signal 220 | prepend: https://signal.group/ 221 | threads: 222 | name: Threads 223 | icon: icon-threads 224 | prepend: https://threads.net/ 225 | playstation: 226 | name: PlayStation 227 | icon: icon-playstation 228 | messenger: 229 | name: Messenger 230 | icon: icon-messenger 231 | prepend: https://messenger.com/ 232 | stripe: 233 | name: Stripe 234 | icon: icon-stripe 235 | slack: 236 | name: Slack 237 | icon: icon-slack 238 | gitlab: 239 | name: GitLab 240 | icon: icon-gitlab 241 | prepend: "https://gitlab.com/" 242 | line: 243 | name: Line 244 | icon: icon-line 245 | prepend: https://line.me/ 246 | medium: 247 | name: Medium 248 | icon: icon-medium 249 | prepend: "https://medium.com/" 250 | xbox: 251 | name: Xbox 252 | icon: icon-xbox 253 | prepend: https://xbox.com/play/user/ 254 | wechat: 255 | name: WeChat 256 | icon: icon-wechat 257 | discord: 258 | name: Discord 259 | icon: icon-discord 260 | prepend: https://discord.com/invite/ 261 | mastodon: 262 | name: Mastodon 263 | icon: icon-mastodon 264 | -------------------------------------------------------------------------------- /docs/deploy.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Deploy 4 | description: > 5 | On how to deploy Hydejack to a variety of popular hosting providers. 6 | hide_description: true 7 | sitemap: false 8 | --- 9 | 10 | This chapter was added in 2024 with my recommendations on how to deploy Hydejack based on recent developments in GitHub Pages and other changes in the world of static site deployment. 11 | 12 | Note that the [Jekyll Documentation on Deployment][deploy] remains the best, most up-to-date resource for all things Jekyll deployment. 13 | These docs are my personal recipes with some extra steps that are mostly relevant to **PRO Customers**. 14 | 15 | 0. this unordered seed list will be replaced by toc as unordered list 16 | {:toc} 17 | 18 | 19 | ## GitHub Actions 20 | You can deploy to GitHub Pages from a custom GitHub Action. It allows you to fully customize the build pipeline, set specific versions for Ruby and Jekyll and use any Jekyll plugin you may wish. 21 | 22 | To opt into the GitHub Actions pipelines, go to the repository's settings, find the *Pages* tab and ensure that the *Source* to "GitHub Actions": 23 | 24 | ![GitHub repository settings](../assets/img/docs/pipeline-gh-actions.png) 25 | {:.border} 26 | 27 | Ensure these settings are set to opt in the GitHub Actions pipeline. 28 | {:.figcaption} 29 | 30 | As with the legacy GitHub Pages pipeline, deployments are triggered by pushing commits to a specific branch. 31 | To set up the pipeline, create a YAML file in `.github/workflows` in the root of your repository with the following content: 32 | 33 | {% raw %} 34 | ~~~yml 35 | # file: ".github/workflows/jekyll.yml" 36 | # Sample workflow for building and deploying a Jekyll site to GitHub Pages 37 | name: Deploy Jekyll site to Pages 38 | 39 | on: 40 | # Runs on pushes targeting the default branch 41 | push: 42 | branches: [$default-branch] # You can change this to a specific branch (without the `$`) 43 | 44 | # Allows you to run this workflow manually from the Actions tab 45 | workflow_dispatch: 46 | 47 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 48 | permissions: 49 | contents: read 50 | pages: write 51 | id-token: write 52 | 53 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 54 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 55 | concurrency: 56 | group: "pages" 57 | cancel-in-progress: false 58 | 59 | jobs: 60 | # Build job 61 | build: 62 | runs-on: ubuntu-latest 63 | steps: 64 | - name: Checkout 65 | uses: actions/checkout@v4 66 | with: 67 | fetch-depth: 0 # Fetch whole history for jekyll-last-modified-at plugin 68 | - name: Setup Ruby 69 | uses: ruby/setup-ruby@8575951200e472d5f2d95c625da0c7bec8217c42 # v1.161.0 70 | with: 71 | ruby-version: '3.1' # Not needed with a .ruby-version file 72 | bundler-cache: true # runs 'bundle install' and caches installed gems automatically 73 | cache-version: 0 # Increment this number if you need to re-download cached gems 74 | - name: Setup Pages 75 | id: pages 76 | uses: actions/configure-pages@v5 77 | - name: Build with Jekyll 78 | # Outputs to the './_site' directory by default 79 | run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}" 80 | env: 81 | JEKYLL_ENV: production 82 | - name: Upload artifact 83 | # Automatically uploads an artifact from the './_site' directory by default 84 | uses: actions/upload-pages-artifact@v3 85 | 86 | # Deployment job 87 | deploy: 88 | environment: 89 | name: github-pages 90 | url: ${{ steps.deployment.outputs.page_url }} 91 | runs-on: ubuntu-latest 92 | needs: build 93 | steps: 94 | - name: Deploy to GitHub Pages 95 | id: deployment 96 | uses: actions/deploy-pages@v4 97 | ~~~ 98 | {% endraw %} 99 | 100 | This example is based on [`actions/starter-workflows` repository](https://github.com/actions/starter-workflows/blob/main/pages/jekyll.yml) 101 | with one Hydejack-specific change applied: 102 | 103 | The checkout step has been modified to pull the entire history of the repository. 104 | This allows the `jekyll-last-modified-at` plugin to generate accurate dates based on git history. 105 | 106 | ```yml 107 | with: 108 | fetch-depth: 0 # Fetch whole history for jekyll-last-modified-at plugin 109 | ``` 110 | 111 | This GitHub Action works with any [Install](./install.md){:.heading.flip-title} of Hydejack that also runs on your local machine. 112 | 113 | ## Private Repo for PRO Customers 114 | If you're a **PRO Customer** and followed the instructions during [Install](./install.md){:.heading.flip-title} to add the theme as a git dependency, your deploy pipeline must be authorized to pull from the private [`hydejack-pro` repository](https://github.com/hydecorp/hydejack-pro). 115 | 116 | ~~~ruby 117 | # file: `Gemfile` 118 | gem "jekyll-theme-hydejack", git: "https://github.com/hydecorp/hydejack-pro", tag: "pro/v9.2.1" 119 | ~~~ 120 | 121 | Make sure you are member of the ["PRO Customers" team](https://github.com/orgs/hydecorp/teams/pro-customers) on GitHub. If you've provided a GitHub handle during checkout you should have been automatically added, otherwise you can request an invite via [mail@hydejack.com](mailto:mail@hydejack.com). 122 | {:.note} 123 | 124 | In order for Bundle to fetch the private repository, an __environment variable__ named __`BUNDLE_GITHUB__COM`__ must be set to __`x-access-token:`__, where you replace `` with a 125 | GitHub [Personal Access Token](https://github.com/settings/tokens) (PAT) that has the "repo" permission. 126 | 127 | If using a git dependency works for you, you can declutter your repository by deleting the `#jekyll-theme-hydejack` folder. 128 | {:.note} 129 | 130 | Most CI providers have a settings page that allows you can set environment variables. In the case of the GitHub Action above, the `BUNDLE_GITHUB__COM` variable is required during the "Setup Ruby" step. The modified step looks as follows: 131 | 132 | {% raw %} 133 | ~~~yml 134 | - name: Setup Ruby 135 | uses: ruby/setup-ruby@8575951200e472d5f2d95c625da0c7bec8217c42 # v1.161.0 136 | with: 137 | ruby-version: '3.1' # Not needed with a .ruby-version file 138 | bundler-cache: true # runs 'bundle install' and caches installed gems automatically 139 | cache-version: 0 # Increment this number if you need to re-download cached gems 140 | env: #!! 141 | BUNDLE_GITHUB__COM: x-access-token:${{ secrets.GH_REPO_PAT }} #!! 142 | ~~~ 143 | {% endraw %} 144 | 145 | 146 | 147 | [deploy]: https://jekyllrb.com/docs/deployment-methods/ 148 | -------------------------------------------------------------------------------- /docs/install.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Install 4 | description: > 5 | How you install Hydejack depends on whether you start a new site, 6 | or change the theme of an existing site. 7 | hide_description: true 8 | sitemap: false 9 | --- 10 | 11 | How you install Hydejack depends on whether you [start a new site](#new-sites), 12 | or change the theme of [an existing site](#existing-sites). 13 | 14 | 0. this unordered seed list will be replaced by toc as unordered list 15 | {:toc} 16 | 17 | ## New sites 18 | For new sites, the best way to get started with Hydejack is via the Starter Kit. 19 | It comes with a documented config file and example content that gets you started quickly. 20 | 21 | If you have a GitHub account, fork the [Hydejack Starter Kit][hsc] repository. 22 | Otherwise [download the Starter Kit][src] and unzip the contents somewhere on your machine. 23 | 24 | If you bought the __PRO Version__ of Hydejack, use the contents of the `starter-kit` folder instead. 25 | 26 | You can now jump to [running locally](#running-locally). 27 | 28 | [hsc]: https://github.com/hydecorp/hydejack-starter-kit 29 | [src]: https://github.com/hydecorp/hydejack-starter-kit/archive/v9.2.1.zip 30 | [nfy]: https://app.netlify.com/start/deploy?repository=https://github.com/hydecorp/hydejack-starter-kit 31 | [dtn]: https://www.netlify.com/img/deploy/button.svg 32 | 33 | 34 | ## Existing sites 35 | If you have an existing site that you'd like to upgrade to Hydejack you can install the theme via bundler. 36 | Add the following to your `Gemfile`: 37 | 38 | ~~~ruby 39 | # file: `Gemfile` 40 | gem "jekyll-theme-hydejack" 41 | ~~~ 42 | 43 | Next, in your config file, change the `theme` to Hydejack: 44 | 45 | ~~~yml 46 | # file: `_config.yml` 47 | theme: jekyll-theme-hydejack 48 | ~~~ 49 | 50 | You can now jump to [running locally](#running-locally). 51 | 52 | ### PRO Customers 53 | If you bought the __PRO Version__ of Hydejack, copy the `#jekyll-theme-hydejack` folder into the root folder of your site, 54 | and add the following to your `Gemfile` instead: 55 | 56 | ~~~ruby 57 | # file: `Gemfile` 58 | gem "jekyll-theme-hydejack", path: "./#jekyll-theme-hydejack" 59 | ~~~ 60 | 61 | The folder is prefixed with a `#` to indicate that this folder is different from regular Jekyll content. 62 | The `#` character was chosen because it is on of the four characters ignored by Jekyll by default (`.`, `_` , `#`, `~`) 63 | {:.note} 64 | 65 | Alternatively, if you've been added to the ["PRO Customers" team](https://github.com/orgs/hydecorp/teams/pro-customers) on GitHub, you can add __Hydejack PRO__ as a git dependency instead: 66 | 67 | ~~~ruby 68 | # file: `Gemfile` 69 | gem "jekyll-theme-hydejack", git: "https://github.com/hydecorp/hydejack-pro", tag: "pro/v9.2.1" 70 | ~~~ 71 | 72 | If you've provided your GitHub username during checkout you should have been automatically added to the team. Otherwise you can request an invite via [mail@hydejack.com](mailto:mail@hydejack.com). 73 | {:.note} 74 | 75 | In order for Bundle to fetch the private repository, an __environment variable__ named __`BUNDLE_GITHUB__COM`__ must be set to __`x-access-token:`__, where you replace `` with a GitHub [Personal Access Token](https://github.com/settings/tokens) (PAT) that has the "repo" permission. 76 | 77 | After you've secured a way to fetch the `jekyll-theme-hydejack` gem, in your config file, change the `theme` to Hydejack: 78 | 79 | ~~~yml 80 | # file: `_config.yml` 81 | theme: jekyll-theme-hydejack 82 | ~~~ 83 | 84 | Hydejack comes with a default configuration file that takes care most of the configuration, 85 | but it pays off to check out the [annotated example config file][config] from the Starter Kit to see what's available. See chapter [Config](./config.md){:.heading.flip-title} for more. 86 | {:.note} 87 | 88 | You can now jump to [running locally](#running-locally). 89 | 90 | ### Troubleshooting 91 | If your existing site combines theme files with your content (as did previous versions of Hydejack/PRO), 92 | make sure to delete the following folders: 93 | 94 | - `_layouts` 95 | - `_includes` 96 | - `_sass` 97 | - `assets` 98 | 99 | The `assets` folder most likely includes theme files as well as your personal/content files. 100 | Make sure to only delete files that belong to the old theme! 101 | 102 | 103 | ## GitHub Pages 104 | As of September 2024, the recommended way of deploying to GitHub Pages is through a custom [GitHub Action][gha], which gives you full control over the build process. 105 | No extra steps are required when using a GH Action and you can jump to [running locally](#running-locally), or learn more in chapter [Deploy](./deploy.md){:.heading.flip-title}. 106 | That being said, Hydejack maintains backwards compatibility with the legacy pipeline and you can continue to use it. 107 | {:.note} 108 | 109 | If you want to build your site using the legacy pipeline, you can build off of the [`gh-pages` branch][gpb] in the Hydejack Starter Kit repo. 110 | 111 | [ghp]: https://jekyllrb.com/docs/github-pages/ 112 | [gpb]: https://github.com/hydecorp/hydejack-starter-kit/tree/gh-pages 113 | [gha]: https://docs.github.com/en/actions 114 | 115 | The main difference to the regular starter kit is the use of `remote_theme` setting in the config file. 116 | 117 | ```yml 118 | # file: `_config.yml` 119 | remote_theme: hydecorp/hydejack@v9.2.1 120 | ``` 121 | 122 | This setting only works with the Free Version of Hydejack. 123 | **PRO Customers** should use the `starter-kit-gh-pages` folder in the downloaded zip file when targeting the GitHub Pages legacy pipeline. 124 | {:.note} 125 | 126 | `starter-kit-gh-pages` is only required when deploying to GitHub Pages through the legacy build pipeline. 127 | When using [a custom GitHub Action](./deploy.md#github-actions), the regular `starter-kit` provides a cleaner, less cluttered folder structure. 128 | {:.note} 129 | 130 | Make sure the `plugins` list contains `jekyll-include-cache` (create if it doesn't exist): 131 | 132 | ```yml 133 | # file: `_config.yml` 134 | plugins: 135 | - jekyll-include-cache 136 | ``` 137 | 138 | To run this configuration locally, make sure the following is part of your `Gemfile`: 139 | 140 | ```ruby 141 | # file: `Gemfile` 142 | gem "github-pages", group: :jekyll_plugins 143 | ``` 144 | 145 | Note that Hydejack has a reduced feature set when built on GitHub Pages. 146 | Specifically, using KaTeX math formulas doesn't work when built in this way. 147 | {:.note} 148 | 149 | 150 | ## Running locally 151 | Make sure you've `cd`ed into the directory where `_config.yml` is located. 152 | Before running for the first time, dependencies need to be fetched from [RubyGems](https://rubygems.org/): 153 | 154 | ~~~bash 155 | $ bundle install 156 | ~~~ 157 | 158 | If you are missing the `bundle` command, you can install Bundler by running `gem install bundler`. 159 | {:.note} 160 | 161 | Now you can run Jekyll on your local machine: 162 | 163 | ~~~bash 164 | $ bundle exec jekyll serve 165 | ~~~ 166 | 167 | and point your browser to to see Hydejack in action. 168 | 169 | 170 | Continue with [Config](config.md){:.heading.flip-title} 171 | {:.read-more} 172 | 173 | [config]: https://github.com/hydecorp/hydejack-starter-kit/blob/v9/_config.yml 174 | [upgrade]: upgrade.md 175 | -------------------------------------------------------------------------------- /licenses/PRO.md: -------------------------------------------------------------------------------- 1 | # PRO License 2 | 3 | * this list will be replaced by the table of contents 4 | {:toc .large-only} 5 | 6 | ## License Summary 7 | * License concerns use of [Hydejack PRO][1] 8 | * License does not expire 9 | * Commercial use allowed 10 | * Can modify source code 11 | * Parts of software are provided under [separate licenses](../NOTICE.md#licenses) 12 | 13 | ## Terms and Conditions 14 | ### 1. Preamble 15 | This Agreement governs the relationship between you (hereinafter: Licensee) and 16 | Florian Klampfer qwtel.com (hereinafter: Licensor). 17 | This Agreement sets the terms, rights, restrictions and obligations on using 18 | Hydejack PRO (hereinafter: The Software) 19 | created and owned by Licensor, as detailed herein. 20 | 21 | ### 2. License Grant 22 | Licensor hereby grants Licensee a Personal, Perpetual, Commercial, Royalty free, 23 | Including the rights to create derivative works, Non-exclusive license, all with accordance with 24 | the terms set forth and other legal restrictions set forth in 3rd party software used while running Software. 25 | 26 | 1. **Limited:** Licensee may use Software for the purpose of: 27 | 28 | 1. Running Software on Licensee’s Website[s] and Server[s]; 29 | 2. Allowing 3rd Parties to run Software on Licensee’s Website[s] and Server[s]; 30 | 3. Publishing Software’s output to Licensee and 3rd Parties; 31 | 4. Modify Software to suit Licensee’s needs and specifications. 32 | 33 | 2. This license is granted perpetually, as long as you do not materially breach it. 34 | 35 | 3. **Commercial, Royalty Free:** Licensee may use Software for any purpose, including paid-services, without any 36 | royalties 37 | 38 | 4. **Including the Right to Create Derivative Works:** Licensee may create derivative works based on Software, 39 | including amending Software’s source code, modifying it, integrating it into a larger work or removing portions of 40 | Software. 41 | 42 | ### 3. Term & Termination: 43 | The Term of this license shall be until terminated. Licensor may terminate this Agreement, 44 | including Licensee’s license in the case where Licensee: 45 | 46 | 1. became insolvent or otherwise entered into any liquidation process; or 47 | 2. exported The Software to any jurisdiction where licensor may not enforce his rights under this agreements in; or 48 | 3. Licensee was in breach of any of this license's terms and conditions and such breach was not cured, immediately 49 | upon notification; or 50 | 4. Licensee in breach of any of the terms of clause 2 to this license; or 51 | 5. Licensee otherwise entered into any arrangement which caused Licensor to be unable to enforce his rights under 52 | this License. 53 | 54 | ### 4. Payment 55 | In consideration of the License granted under clause 2, Licensee shall pay Licensor a fee, via 56 | Credit-Card or any other means which Licensor may deem adequate. Failure to perform payment shall construe as 57 | material breach of this Agreement. 58 | 59 | ### 5. Upgrades, Updates and Fixes 60 | Licensor may provide Licensee, from time to time, with Upgrades, Updates or Fixes, 61 | as detailed herein and according to his sole discretion. Licensee hereby warrants to keep The Software up-to-date 62 | and install all relevant updates and fixes, and may, at his sole discretion, purchase upgrades, according to the 63 | rates set by Licensor. Licensor shall provide any update or Fix free of charge; however, nothing in this Agreement 64 | shall require Licensor to provide Updates or Fixes. 65 | 66 | 1. **Upgrades:** for the purpose of this license, an Upgrade shall be a material amendment in The Software, which 67 | contains new features and or major performance improvements and shall be marked as a new version number. For 68 | example, should Licensee purchase The Software under version 1.X.X, an upgrade shall commence under number 69 | 2.0.0. 70 | 71 | 2. **Updates:** for the purpose of this license, an update shall be a minor amendment in The Software, which may 72 | contain new features or minor improvements and shall be marked as a new sub-version number. For example, should 73 | Licensee purchase The Software under version 1.1.X, an upgrade shall commence under number 1.2.0. 74 | 75 | 3. **Fix:** for the purpose of this license, a fix shall be a minor amendment in The Software, intended to remove 76 | bugs or alter minor features which impair the The Software's functionality. A fix shall be marked as a new 77 | sub-sub-version number. For example, should Licensee purchase Software under version 1.1.1, an upgrade shall 78 | commence under number 1.1.2. 79 | 80 | ### 6. Support 81 | Software is provided under an AS-IS basis and without any support, updates or maintenance. Nothing in 82 | this Agreement shall require Licensor to provide Licensee with support or fixes to any bug, failure, 83 | mis-performance or other defect in The Software. 84 | 85 | 1. **Bug Notification:** Licensee may provide Licensor of details regarding any bug, defect or failure in The 86 | Software promptly and with no delay from such event; Licensee shall comply with Licensor's request for 87 | information regarding bugs, defects or failures and furnish him with information, screenshots and try to 88 | reproduce such bugs, defects or failures. 89 | 90 | 2. **Feature Request:** Licensee may request additional features in Software, provided, however, that: 91 | 92 | 1. Licensee shall waive any claim or right in such feature should feature be developed by Licensor; 93 | 2. Licensee shall be prohibited from developing the feature, or disclose such feature request, or feature, to 94 | any 3rd party directly competing with Licensor or any 3rd party which may be, following the development of 95 | such feature, in direct competition with Licensor; 96 | 3. Licensee warrants that feature does not infringe any 3rd party patent, trademark, trade-secret or any other 97 | intellectual property right; and 98 | 4. Licensee developed, envisioned or created the feature solely by himself. 99 | 100 | ### 7. Liability 101 | To the extent permitted under Law, The Software is provided under an AS-IS basis. Licensor shall 102 | never, and without any limit, be liable for any damage, cost, expense or any other payment incurred by Licensee as 103 | a result of Software’s actions, failure, bugs and/or any other interaction between The Software and Licensee’s 104 | end-equipment, computers, other software or any 3rd party, end-equipment, computer or services. Moreover, Licensor 105 | shall never be liable for any defect in source code written by Licensee when relying on The Software or using The 106 | Software’s source code. 107 | 108 | ### 8. Warranty 109 | 1. **No-Warranty:** The Software is provided without any warranty; Licensor hereby disclaims any warranty that The 110 | Software shall be error free, without defects or code which may cause damage to Licensee’s computers or to 111 | Licensee, and that Software shall be functional. Licensee shall be solely liable to any damage, defect or loss 112 | incurred as a result of operating software and undertake the risks contained in running The Software on 113 | License’s Server[s] and Website[s]. 114 | 115 | 2. **Prior Inspection:** Licensee hereby states that he inspected The Software thoroughly and found it 116 | satisfactory and adequate to his needs, that it does not interfere with his regular operation and that it does 117 | meet the standards and scope of his computer systems and architecture. Licensee found that The Software 118 | interacts with his development, website and server environment and that it does not infringe any of End User 119 | License Agreement of any software Licensee may use in performing his services. Licensee hereby waives any 120 | claims regarding The Software's incompatibility, performance, results and features, and warrants that he 121 | inspected the The Software. 122 | 123 | ### 9. No Refunds 124 | Licensee warrants that he inspected The Software according to clause 8.2 and that it is adequate to 125 | his needs. Accordingly, as The Software is intangible goods, Licensee shall not be, ever, entitled to any refund, 126 | rebate, compensation or restitution for any reason whatsoever, even if The Software contains material flaws. 127 | 128 | ### 10. Indemnification 129 | Licensee hereby warrants to hold Licensor harmless and indemnify Licensor for any lawsuit 130 | brought against it in regards to Licensee’s use of The Software in means that violate, breach or otherwise 131 | circumvent this license, Licensor's intellectual property rights or Licensor's title in The Software. Licensor 132 | shall promptly notify Licensee in case of such legal action and request Licensee’s consent prior to any settlement 133 | in relation to such lawsuit or claim. 134 | 135 | ### 11. Governing Law, Jurisdiction 136 | Licensee hereby agrees not to initiate class-action lawsuits against Licensor in 137 | relation to this license and to compensate Licensor for any legal fees, cost or attorney fees should any claim 138 | brought by Licensee against Licensor be denied, in part or in full. 139 | 140 | [1]: https://hydejack.com/ 141 | -------------------------------------------------------------------------------- /docs/advanced.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Advanced 4 | description: > 5 | This chapter covers advanced topics, such as offline support and custom JS builds. Codings skills are recommended. 6 | hide_description: true 7 | sitemap: false 8 | --- 9 | 10 | This chapter covers advanced topics, such as offline support and custom JS builds. Codings skills are recommended. 11 | 12 | 0. this unordered seed list will be replaced by toc as unordered list 13 | {:toc} 14 | 15 | ## Enabling offline support 16 | Hydejack v8 introduces experimental "cache as you go" offline support. This is implemented via the [Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API), a new browser standard that is now supported in the latest versions of all major browsers. However, it is a very powerful feature and should be used with a lot of care. 17 | 18 | Enabling this feature requires that your content meets the following criteria: 19 | 20 | * Content doesn't change between deploys (e.g. manually adding things to `_site` etc.) 21 | * All assets in `assets` are immutable, i.e. they never change (when changing a file in assets, it needs to have a new name and links need to point to the new file). 22 | * The site is mostly self-contained, i.e. assets are served from the same domain (offline support will not download assets form external sites by default) 23 | * The site is served via HTTPS (this is a Service Worker requirement) 24 | 25 | To enable this feature, create a `sw.js` file in the root of your project and add the following content: 26 | 27 | {% raw %} 28 | ```js 29 | --- 30 | --- 31 | importScripts("{{ '/assets/js/sw.js' | relative_url }}?t={{ site.time | date_to_xmlschema }}"); 32 | ``` 33 | {% endraw %} 34 | 35 | This will load the main service worker script from Hydejack's assets. The `site.time` part is necessary to make the service worker "byte different" every time you create a new build of your site, which triggers an update. 36 | 37 | In your `config.yml` under the `hydejack` key, add the following: 38 | 39 | ```yml 40 | offline: 41 | enabled: true 42 | cache_version: 1 43 | ``` 44 | 45 | The current implementation does not cache resources from external domains. There is now way of knowing if external sites conform to the conditions mentioned above, hence caching can be problematic and result in unexpected behavior. 46 | 47 | For example, Google Analytics uses GET requests to send page views, each of which would be cached by the service worker without this policy. Frequently updating images, such as badges would never change. 48 | 49 | ![Gem Version](https://badge.fury.io/rb/jekyll-theme-hydejack.svg) 50 | 51 | However, if you include resources that are hosted on another domain and don't change, you can add the `sw-cache` query parameter to the URL, e.g. 52 | 53 | https://upload.wikimedia.org/wikipedia/commons/b/b1/57_Chevy_210.jpg?sw-cache 54 | 55 | This will cause them to be cached like resources from the assets folder. 56 | 57 | If you want to serve a file from the `assets` folder but NOT cache it for offline use, add the `no-cache` query parameter instead: 58 | 59 | /assets/lfs/download.bin?no-cache 60 | 61 | 62 | ![57 Chevy](https://upload.wikimedia.org/wikipedia/commons/b/b1/57_Chevy_210.jpg?sw-cache) 63 | 64 | 65 | ### How offline storage works 66 | 67 | Hydejack's custom service worker implementation stores files for offline use on three different levels: 68 | 69 | Shell 70 | : The shell files are the core Hydejack files (CSS, JS) that only change between version updates. 71 | If you made changes to any of these after enabling offline support, you must force an update by bumping the `cache_version` number in the config file. 72 | 73 | Assets 74 | : *These are presumed to be immutable.* In other words, every file is cached indefinitely. E.g.: If you want to update an image after enabling offline support, add the image under a different name and change the link in the content. Alternatively, you can bump the `cache_version`, but this will remove all other cached files from the asset cache. 75 | 76 | Content 77 | : The content cache exploits the fact that your content can't change between builds, so that it can be stored for offline use until you upload a new build. For now, the entire content cache is discarded every time you publish new content (future versions could cache them based on last modified dates). 78 | 79 | Other things to note are that the implementation will always cache the pages listed under `legal`, as well as the `404.html` page, which will be shown when the user is offline. 80 | 81 | 82 | ## Adding a custom social media icon 83 | Hydejack includes a number of social media icons by default (in fact, everything that is provided by [IcoMoon](https://icomoon.io/)), but since the landscape is always changing, it is likely that a platform that is important to you will be missing at some point. 84 | 85 | You can add any platform by simply providing a complete URL. However, a fallback icon will be used. 86 | {:.note} 87 | 88 | ### Creating the icon font 89 | In order to add a custom social media icon you have to use the [IcoMoon App](https://icomoon.io/app/) (free) to create a custom icon webfont. However, it is important that the generated font include all icons already in use by Hydejack. For this purpose, find the `selection.json` in [`assets/icomoon/selection.json`](https://github.com/hydecorp/hydejack/blob/v6/assets/icomoon/selection.json) and upload it to the app via "Import Icons". 90 | Then, use the app to add your icon(s). 91 | Consult the [IcoMoon docs](https://icomoon.io/#docs) for additional help. 92 | 93 | Once you've created and downloaded the icon font form IconMoon, replace the `icomoon` folder in `assets` in its entirety. Keep in mind that future updates of Hydejack will override this folder. 94 | 95 | ### Adding the platform's metadata 96 | For the second step it is necessary to add the network's metadata to `_data/social.yml`. 97 | An entry looks like: 98 | 99 | ~~~yml 100 | deviantart: 101 | name: DeviantArt 102 | icon: icon-deviantart 103 | prepend: "https://" 104 | append: ".deviantart.com" 105 | ~~~ 106 | 107 | `name` 108 | : The name of the network. Used for the title attribute and screen readers. 109 | 110 | `icon` 111 | : The icon CSS class. Can be chosen during the IcoMoon creation process. 112 | 113 | `prepend` 114 | : Optional. A string that is prepended to the username to form the link to the profile. If the final URL should be `https://.deviantart.com`, this would be `https://` 115 | 116 | `append` 117 | : Optional. A string that is appended to the username to form the link to the profile. If the final URL should be `https://.deviantart.com`, this would be `.deviantart.com`. 118 | 119 | 120 | ## How CSS is organized in Hydejack 121 | Hydejack takes a quite unique approach to CSS, which is motivated by the ability to 122 | inline essential CSS rules in a `style` tag in the `` of a page (to increase the loading speed), 123 | while serving the rest in a separate file. 124 | 125 | The styles are written in SCSS and are located in the `_sass` folder, which looks like 126 | 127 | ~~~ 128 | ├── hydejack 129 | │ ├── __inline__ 130 | │ ├── __link__ 131 | │ ├── _base.pre.scss 132 | │ ├── ... 133 | │ └── _social.pre.scss 134 | ├── pooleparty 135 | │ ├── __inline__ 136 | │ ├── __link__ 137 | │ ├── _base.pre.scss 138 | │ ├── ... 139 | │ └── _type.pre.scss 140 | ├── mixins.scss 141 | ├── my-inline.scss 142 | ├── my-style.scss 143 | ├── syntax.scss 144 | └── variables.scss 145 | ~~~ 146 | 147 | The style rules are organized alongside components (or rather, topics) like "sidebar" and "footer". 148 | Further, there are two separate frameworks, "pooleparty" and "hydejack", 149 | which grew out of the original [Poole](http://getpoole.com/) and [Hyde](http://hyde.getpoole.com/) projects. 150 | Poole/party contains more general style rules, while Hyde/jack contains those that more are specific to the theme. 151 | However, this separation has blurred over time. 152 | 153 | Inside those folders, you will notice the `__inline__` and `__link__` folders. 154 | The unfriendly names are intentional, because their contents are generated by a script and shouldn't be modified directly. 155 | The source files are located in the same folder and end with `.pre.scss`. 156 | They are fully valid SCSS files, but contain comments that mark which lines should be inlined and which should be fetched asynchronously. 157 | 158 | The rules are as follows: 159 | * Every line between `// <<< inline ` and `// >>>` will be inlined 160 | * Every line between `// <<< link ` and `// >>>` will be linked 161 | * Every line that isn't contained in a block and ends with `// inline` will be inlined 162 | * Every line that isn't contained in a block and ends with `// link` will be linked 163 | * Every line for which none of the above applies will be included in both. 164 | 165 | The actual splitting happen with the `.scripts/build-css.sh` script (requires node.js 8+). 166 | You can run the script once by using 167 | 168 | ~~~bash 169 | $ npm run build:css 170 | ~~~ 171 | 172 | or rebuild the CSS on every file change 173 | 174 | ~~~bash 175 | $ npm run watch:css 176 | ~~~ 177 | 178 | Note that `my-inline.scss` and `my-style.scss` are not affected by this. 179 | Also, since all files are valid SCSS, the splitting part is entirely optional. 180 | If you would like to build just one regular CSS file, add 181 | 182 | ```yml 183 | hydejack: 184 | no_inline_css: true 185 | ``` 186 | 187 | to your config file. 188 | 189 | 190 | *[FLIP]: First Last Invert Play 191 | -------------------------------------------------------------------------------- /licenses/Apache-2.0.md: -------------------------------------------------------------------------------- 1 | # Apache License 2 | 3 | Version 2.0, January 2004 4 | 5 | 6 | 7 | ## TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 8 | ### 1. Definitions 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | ### 2. Grant of Copyright License 68 | Subject to the terms and conditions of 69 | this License, each Contributor hereby grants to You a perpetual, 70 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 71 | copyright license to reproduce, prepare Derivative Works of, 72 | publicly display, publicly perform, sublicense, and distribute the 73 | Work and such Derivative Works in Source or Object form. 74 | 75 | ### 3. Grant of Patent License 76 | Subject to the terms and conditions of 77 | this License, each Contributor hereby grants to You a perpetual, 78 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 79 | (except as stated in this section) patent license to make, have made, 80 | use, offer to sell, sell, import, and otherwise transfer the Work, 81 | where such license applies only to those patent claims licensable 82 | by such Contributor that are necessarily infringed by their 83 | Contribution(s) alone or by combination of their Contribution(s) 84 | with the Work to which such Contribution(s) was submitted. If You 85 | institute patent litigation against any entity (including a 86 | cross-claim or counterclaim in a lawsuit) alleging that the Work 87 | or a Contribution incorporated within the Work constitutes direct 88 | or contributory patent infringement, then any patent licenses 89 | granted to You under this License for that Work shall terminate 90 | as of the date such litigation is filed. 91 | 92 | ### 4. Redistribution 93 | You may reproduce and distribute copies of the 94 | Work or Derivative Works thereof in any medium, with or without 95 | modifications, and in Source or Object form, provided that You 96 | meet the following conditions: 97 | 98 | {:style="list-style: lower-latin"} 99 | 1. You must give any other recipients of the Work or 100 | Derivative Works a copy of this License; and 101 | 102 | 2. You must cause any modified files to carry prominent notices 103 | stating that You changed the files; and 104 | 105 | 3. You must retain, in the Source form of any Derivative Works 106 | that You distribute, all copyright, patent, trademark, and 107 | attribution notices from the Source form of the Work, 108 | excluding those notices that do not pertain to any part of 109 | the Derivative Works; and 110 | 111 | 4. If the Work includes a "NOTICE" text file as part of its 112 | distribution, then any Derivative Works that You distribute must 113 | include a readable copy of the attribution notices contained 114 | within such NOTICE file, excluding those notices that do not 115 | pertain to any part of the Derivative Works, in at least one 116 | of the following places: within a NOTICE text file distributed 117 | as part of the Derivative Works; within the Source form or 118 | documentation, if provided along with the Derivative Works; or, 119 | within a display generated by the Derivative Works, if and 120 | wherever such third-party notices normally appear. The contents 121 | of the NOTICE file are for informational purposes only and 122 | do not modify the License. You may add Your own attribution 123 | notices within Derivative Works that You distribute, alongside 124 | or as an addendum to the NOTICE text from the Work, provided 125 | that such additional attribution notices cannot be construed 126 | as modifying the License. 127 | 128 | You may add Your own copyright statement to Your modifications and 129 | may provide additional or different license terms and conditions 130 | for use, reproduction, or distribution of Your modifications, or 131 | for any such Derivative Works as a whole, provided Your use, 132 | reproduction, and distribution of the Work otherwise complies with 133 | the conditions stated in this License. 134 | 135 | ### 5. Submission of Contributions 136 | Unless You explicitly state otherwise, 137 | any Contribution intentionally submitted for inclusion in the Work 138 | by You to the Licensor shall be under the terms and conditions of 139 | this License, without any additional terms or conditions. 140 | Notwithstanding the above, nothing herein shall supersede or modify 141 | the terms of any separate license agreement you may have executed 142 | with Licensor regarding such Contributions. 143 | 144 | ### 6. Trademarks 145 | This License does not grant permission to use the trade 146 | names, trademarks, service marks, or product names of the Licensor, 147 | except as required for reasonable and customary use in describing the 148 | origin of the Work and reproducing the content of the NOTICE file. 149 | 150 | ### 7. Disclaimer of Warranty 151 | Unless required by applicable law or 152 | agreed to in writing, Licensor provides the Work (and each 153 | Contributor provides its Contributions) on an "AS IS" BASIS, 154 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 155 | implied, including, without limitation, any warranties or conditions 156 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 157 | PARTICULAR PURPOSE. You are solely responsible for determining the 158 | appropriateness of using or redistributing the Work and assume any 159 | risks associated with Your exercise of permissions under this License. 160 | 161 | ### 8. Limitation of Liability 162 | In no event and under no legal theory, 163 | whether in tort (including negligence), contract, or otherwise, 164 | unless required by applicable law (such as deliberate and grossly 165 | negligent acts) or agreed to in writing, shall any Contributor be 166 | liable to You for damages, including any direct, indirect, special, 167 | incidental, or consequential damages of any character arising as a 168 | result of this License or out of the use or inability to use the 169 | Work (including but not limited to damages for loss of goodwill, 170 | work stoppage, computer failure or malfunction, or any and all 171 | other commercial damages or losses), even if such Contributor 172 | has been advised of the possibility of such damages. 173 | 174 | ### 9. Accepting Warranty or Additional Liability 175 | While redistributing 176 | the Work or Derivative Works thereof, You may choose to offer, 177 | and charge a fee for, acceptance of support, warranty, indemnity, 178 | or other liability obligations and/or rights consistent with this 179 | License. However, in accepting such obligations, You may act only 180 | on Your own behalf and on Your sole responsibility, not on behalf 181 | of any other Contributor, and only if You agree to indemnify, 182 | defend, and hold each Contributor harmless for any liability 183 | 184 | END OF TERMS AND CONDITIONS 185 | 186 | ## APPENDIX: How to apply the Apache License to your work 187 | 188 | To apply the Apache License to your work, attach the following boilerplate 189 | notice, with the fields enclosed by brackets `[]` replaced with your own 190 | identifying information. (Don't include the brackets!) The text should be 191 | enclosed in the appropriate comment syntax for the file format. We also 192 | recommend that a file or class name and description of purpose be included on 193 | the same “printed page” as the copyright notice for easier identification within 194 | third-party archives. 195 | 196 | Copyright [yyyy] [name of copyright owner] 197 | 198 | Licensed under the Apache License, Version 2.0 (the "License"); 199 | you may not use this file except in compliance with the License. 200 | You may obtain a copy of the License at 201 | 202 | http://www.apache.org/licenses/LICENSE-2.0 203 | 204 | Unless required by applicable law or agreed to in writing, software 205 | distributed under the License is distributed on an "AS IS" BASIS, 206 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 207 | See the License for the specific language governing permissions and 208 | limitations under the License. 209 | -------------------------------------------------------------------------------- /NOTICE.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: plain 3 | sitemap: false 4 | --- 5 | 6 | # NOTICE 7 | 8 | * this list will be replaced by the toc 9 | {:toc .large-only} 10 | 11 | Copyright (c) 2020 Florian Klampfer 12 | 13 | This program is free software: you can redistribute it and/or modify 14 | it under the terms of the GNU General Public License as published by 15 | the Free Software Foundation, either version 3 of the License, or 16 | (at your option) any later version. 17 | 18 | This program is distributed in the hope that it will be useful, 19 | but WITHOUT ANY WARRANTY; without even the implied warranty of 20 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 21 | GNU General Public License for more details. 22 | 23 | You should have received a copy of the GNU General Public License 24 | along with this program. If not, see . 25 | 26 | 27 | ## Attributions 28 | Appropriate credit as per Creative Commons licenses. 29 | 30 | | Work | License | Changes 31 | |:-------------------------------------------------------|:---------------|:- 32 | | Photo by [Jeremy Bishop][jb] | [Unsplash] | Liquify filter, blur 33 | | Photo by [Caleb George][cg] | [Unsplash] | Liquify filter, patch tool, blur 34 | | [IcoMoon Icons Free Version][11] by [Keyamoon][12] | [CC-BY-SA-4.0] | None 35 | | [Touch-161562.svg][41] | [CC0-1.0] | Composition 36 | 37 | [jb]: https://unsplash.com/photos/1braZySlEKA 38 | [cg]: https://unsplash.com/photos/AtvuPUenaeI 39 | [11]: https://icomoon.io/#icons-icomoon 40 | [12]: http://keyamoon.com/ 41 | [41]: https://commons.wikimedia.org/wiki/File:Touch-161562.svg 42 | 43 | 44 | ## Licenses 45 | Parts of this software are provided under separate licenses. 46 | 47 | ### Hyde 48 | This software also uses portions of the 49 | `poole/hyde` 50 | project, which is [MIT] licensed with the following copyright: 51 | 52 | > Copyright (c) 2013 Mark Otto. 53 | 54 | 55 | ### hy-drawer 56 | This software also uses portions of the 57 | `hydecorp/hy-drawer` 58 | project, which is [GPL-3.0] licensed with the following copyright: 59 | 60 | > Copyright (c) 2018 Florian Klampfer 61 | 62 | 63 | ### hy-push-state 64 | This software also uses portions of the 65 | `hydecorp/hy-push-state` 66 | project, which is [GPL-3.0] licensed with the following copyright: 67 | 68 | > Copyright (c) 2018 Florian Klampfer 69 | 70 | 71 | ### RxJS 72 | This software also uses portions of the 73 | `ReactiveX/rxjs` 74 | project, which is [Apache-2.0] licensed with the following copyright: 75 | 76 | > Copyright (c) 2015-2017 Google, Inc., Netflix, Inc., Microsoft Corp. and contributors 77 | 78 | No substantial changes to the software were made. 79 | No `NOTICE` file was provided. 80 | 81 | 82 | ### KaTeX 83 | This software also uses portions of the 84 | `Khan/KaTeX` 85 | project, which is [MIT] licensed with the following copyright: 86 | 87 | > Copyright (c) 2015 Khan Academy 88 | 89 | 90 | ### core-js 91 | This software also uses portions of the 92 | `zloirock/core-js` 93 | project, which is [MIT] licensed with the following copyright: 94 | 95 | > Copyright (c) 2014-2016 Denis Pushkarev 96 | 97 | 98 | ### Web Animations 99 | This software also uses portions of the 100 | `web-animations/web-animations-js` 101 | project, which is [Apache-2.0] licensed with the following copyright: 102 | 103 | > Copyright 2014 Google Inc. All rights reserved. 104 | 105 | No substantial changes to the software were made. 106 | No `NOTICE` file was provided. 107 | 108 | 109 | ### Modernizr 110 | This software also uses portions of the 111 | `Modernizr/Modernizr` 112 | project, which is [MIT] licensed with the following copyright: 113 | 114 | > Copyright (c) 115 | > Faruk Ates 116 | > Paul Irish 117 | > Alex Sexton 118 | > Ryan Seddon 119 | > Patrick Kettner 120 | > Stu Cox 121 | > Richard Herrera 122 | 123 | 124 | ### Compress HTML in Jekyll 125 | This software also uses portions of the 126 | `penibelst/jekyll-compress-html` 127 | project, which is [MIT] licensed with the following copyright: 128 | 129 | > Copyright (c) 2014 Anatol Broder 130 | 131 | 132 | ### The HTML5 Shiv 133 | This software also uses portions of the 134 | `aFarkas/html5shiv` 135 | project, which is [MIT] licensed with the following copyright: 136 | 137 | > Copyright (c) 2014 Alexander Farkas (aFarkas). 138 | 139 | 140 | ### DOM4 141 | This software also uses portions of the 142 | `WebReflection/dom4` 143 | project, which is [MIT] licensed with the following copyright: 144 | 145 | > Copyright (C) 2013-2015 by Andrea Giammarchi - @WebReflection 146 | 147 | 148 | ### loadCSS 149 | This software also uses portions of the 150 | `filamentgroup/loadCSS` 151 | project, which is [MIT] licensed with the following copyright: 152 | 153 | > Copyright (c) @scottjehl, 2016 Filament Group 154 | 155 | 156 | ### Ratchet 157 | This software also uses portions of the 158 | `twbs/ratchet` 159 | project, which is [MIT] licensed with the following copyright: 160 | 161 | > Copyright (c) 2015 connors and other contributors 162 | 163 | 164 | ### Swipe 165 | This software also uses portions of the 166 | `thebird/Swipe` 167 | project, which is [MIT] licensed with the following copyright: 168 | 169 | > Copyright (c) 2013 Brad Birdsall 170 | 171 | 172 | ### smoothState 173 | This software also uses portions of the 174 | `miguel-perez/smoothState.js` 175 | project, which is [MIT] licensed with the following copyright: 176 | 177 | > Copyright (c) 2014 Miguel Angel Perez 178 | 179 | 180 | ### Bootstrap 181 | This software also uses portions of the 182 | `twbs/bootstrap` 183 | project, which is [MIT] licensed with the following copyright: 184 | 185 | > Copyright (c) 2011-2018 Twitter, Inc. 186 | > Copyright (c) 2011-2018 The Bootstrap Authors 187 | 188 | 189 | ### Atom One Light Syntax 190 | This software also uses portions of the 191 | `atom/one-light-syntax` 192 | project, which is [MIT] licensed with the following copyright: 193 | 194 | > Copyright (c) 2016 GitHub Inc. 195 | 196 | 197 | ### Atom One Dark Syntax 198 | This software also uses portions of the 199 | `atom/one-dark-syntax` 200 | project, which is [MIT] licensed with the following copyright: 201 | 202 | > Copyright (c) 2016 GitHub Inc. 203 | 204 | 205 | ### MiniSearch 206 | This software also uses portions of the 207 | `lucaong/minisearch` 208 | project, which is [MIT] licensed with the following copyright: 209 | 210 | > Copyright 2018 Luca Ongaro 211 | 212 | 213 | ### window.fetch polyfill 214 | This software also uses portions of the 215 | `github/fetch` 216 | project, which is [MIT] licensed with the following copyright: 217 | 218 | > Copyright (c) 2014-2016 GitHub, Inc. 219 | 220 | 221 | ### AbortController polyfill for abortable fetch() 222 | This software also uses portions of the 223 | `mo/abortcontroller-polyfill` 224 | project, which is [MIT] licensed with the following copyright: 225 | 226 | > Copyright (c) 2017 molsson 227 | 228 | 229 | ### ResizeObserver Polyfill 230 | This software also uses portions of the 231 | `juggle/resize-observer` 232 | project, which is [Apache-2.0] licensed with the following copyright: 233 | 234 | > Copyright 2019 JUGGLE LTD 235 | 236 | 237 | ### kv-storage polyfill 238 | This software also uses portions of the 239 | `GoogleChromeLabs/kv-storage-polyfill` 240 | project, which is [Apache-2.0] licensed with the following copyright: 241 | 242 | > Copyright 2019 Google Inc. 243 | 244 | 245 | ### IntersectionObserver polyfill 246 | This software also uses portions of the 247 | `w3c/IntersectionObserver` 248 | project, which is [W3C-20150513] licensed with the following copyright: 249 | 250 | > Copyright 2016 Google Inc. All Rights Reserved. 251 | 252 | No substantial changes to the software were made. 253 | 254 | 255 | ### Web Components Polyfills 256 | This software also uses portions of the 257 | `webcomponents/webcomponentsjs` 258 | project, which is BSD-style licensed with the following copyright: 259 | 260 | > Copyright (c) 2019 The Polymer Authors. All rights reserved. 261 | 262 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 263 | 264 | * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 265 | * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 266 | * Neither the name of Google Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. 267 | 268 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 269 | 270 | ### lit-html 271 | This software also uses portions of the 272 | `Polymer/lit-html` 273 | project, which is BSD-style licensed with the following copyright: 274 | 275 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 276 | 277 | * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 278 | * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 279 | * Neither the name of Google Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. 280 | 281 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 282 | 283 | 284 | [MIT]: licenses/MIT.md 285 | [GPL-3.0]: licenses/GPL-3.0.md 286 | [Apache-2.0]: licenses/Apache-2.0.md 287 | [W3C-20150513]: licenses/W3C-20150513.md 288 | [CC-BY-SA-4.0]: https://creativecommons.org/licenses/by-sa/4.0/ 289 | [CC-BY-SA-3.0]: https://creativecommons.org/licenses/by-sa/3.0/ 290 | [CC0-1.0]: https://creativecommons.org/publicdomain/zero/1.0/deed.en 291 | [Unsplash]: https://unsplash.com/license 292 | 293 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Config 2 | # ======================================================================================== 3 | 4 | # Uncomment and set the URL of your site (with protocol, e.g. `https://`) 5 | # NOTE: You don't need to provide this property when hosting on GitHub Pages or Netlify. 6 | # url: https://username.github.io 7 | 8 | # Uncomment and set the "base URL" of your site. 9 | # When your site is in a subdirectory, set to `/`, 10 | # with a leading `/` but no trailing `/`. Use the empty string '' otherwise. 11 | # NOTE: You don't need to provide this property when hosting on GitHub Pages or Netlify. 12 | # baseurl: '/hydejack-starter-kit' 13 | 14 | 15 | # General settings 16 | # --------------------------------------------------------------------------------------- 17 | 18 | # Language of your content in 2-letter code, e.g.: en, de. 19 | # You may also provide a location, e.g.: en-us, de_AT. 20 | lang: en 21 | 22 | # The title of your blog. Used in the sidebar and the browser tab. 23 | title: Starter Kit 24 | 25 | # A short description (~150 chars) of the page used for the meta description tag. 26 | # Can use markdown, but no more than one paragraph (enforced by `>`) 27 | description: > 28 | Hydejack is a boutique Jekyll theme for hackers, nerds, and academics, 29 | with a focus on personal sites that are meant to impress. 30 | 31 | # A shorter description for the sidebar. 32 | tagline: Change `tagline` in `_config.yml` 33 | 34 | # A list of keywords for your blog 35 | keywords: [] 36 | 37 | # A (square) logo for your site. 38 | # If provided, it will be shown at the top of the sidebar. 39 | # It also used by the `jekyll-seo-tag` plugin. 40 | logo: /assets/img/logo.png 41 | 42 | # This should be the same author as first entry in `_data/authors.yml`. 43 | author: 44 | # Used by `jekyll-feed`: 45 | name: 46 | email: 47 | # # Used by `jekyll-seo-tag`: 48 | # twitter: 49 | 50 | # Add links to the sidebar. 51 | menu: 52 | - title: Example 53 | url: /example/ 54 | - title: Documentation 55 | url: /docs/ 56 | - title: About 57 | url: /about/ 58 | 59 | # Add links to the footer. 60 | # Typically you'll want to link to your cookie- or privacy policy (if appliable), etc.. 61 | legal: 62 | - title: LICENSE 63 | url: /LICENSE/ 64 | - title: NOTICE 65 | url: /NOTICE/ 66 | - title: CHANGELOG 67 | url: /CHANGELOG/ 68 | 69 | # This text will appear in a `` tag in the footer of every page. 70 | copyright: © 2024. All rights reserved. 71 | 72 | # Format of the permalinks 73 | permalink: /:categories/:year-:month-:day-:title/ 74 | 75 | # Pagination configuration (used by the `blog` layout) 76 | paginate: 10 77 | paginate_path: /:num/ 78 | 79 | 80 | # Theme 81 | # --------------------------------------------------------------------------------------- 82 | 83 | # This will use the gem `jekyll-theme-hydejack`, as defined in the sibling `Gemfile`. 84 | theme: jekyll-theme-hydejack 85 | 86 | # You can uncomment `theme` above and replace it with `remote_theme` here iff you are using the 87 | # `jekyll-remote-theme` plugin (which is the case when using the legacy GitHub Pages pipeline). 88 | # This will fetch the `v9` branch of the public Hydejack repository on GitHub. 89 | # remote_theme: hydecorp/hydejack@v9 90 | 91 | # Customizaton 92 | # ---------------------------------------------------------------------------------------- 93 | 94 | # Sidebar image and theme color of the site. 95 | accent_image: /assets/img/sidebar-bg.jpg 96 | accent_color: rgb(79,177,186) 97 | 98 | # This is used for the `theme-color` meta tag, 99 | # which changes the background color of the browser UI in certain browsers. 100 | # Defaults to `accent_color`. 101 | theme_color: rgb(25,55,71) 102 | 103 | # IMPORTANT: 104 | # As of Hydejack 9.2, Google Fonts are turned off by default due to a stronger focus on privacy. 105 | # Hydejack will use the default font of your visitor's operating system instead. 106 | # If you want to match the look of hydejack.com, remove the following line and uncomment 107 | # the font-related options below: 108 | 109 | # The string encoding which fonts to fetch from Google Fonts. 110 | # See: 111 | # google_fonts: Roboto+Slab:700|Noto+Sans:400,400i,700,700i 112 | 113 | # The text font. Expects a string that is a valid CSS font-family value. 114 | # To change font-weight, see _sass/variables.scss 115 | # font: Noto Sans, Helvetica, Arial, sans-serif 116 | 117 | # The font used for headings. Expects a string that is a valid CSS font-family value. 118 | # To change font-weight, see _sass/variables.scss 119 | # font_heading: Roboto Slab, Helvetica, Arial, sans-serif 120 | 121 | # The font used for code blocks. Expects a string that is a valid CSS font-family value. 122 | # Defaults to the [System Monospace Font Stack](https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/). 123 | # font_code: Fira Code, Menlo, Monaco, Consolas, monospace; 124 | 125 | defaults: 126 | # You can use this to provide a default accent color and background for 127 | # all pages under a given path: 128 | - scope: 129 | path: hyde/ 130 | values: 131 | accent_color: rgb(38,139,210) 132 | theme_color: rgb(32,32,32) 133 | accent_image: 134 | background: rgb(32,32,32) 135 | overlay: false 136 | 137 | # Don't include documents in assets in the sitemap 138 | - scope: 139 | path: assets/ 140 | values: 141 | sitemap: false 142 | 143 | # Don't include licenses in sitemap (feel free to delete) 144 | - scope: 145 | path: licenses/ 146 | values: 147 | layout: plain 148 | sitemap: false 149 | 150 | # # You can use the following to enable comments on all posts. 151 | # - scope: 152 | # type: posts 153 | # values: 154 | # comments: true 155 | 156 | # `jekyll-seo-tag` will mark collection outputs as `BlogPosting`, 157 | # but we want them to be `WebPage`s: 158 | - scope: 159 | type: projects 160 | values: 161 | seo: 162 | type: WebPage 163 | - scope: 164 | type: featured_categories 165 | values: 166 | seo: 167 | type: WebPage 168 | - scope: 169 | type: featured_tags 170 | values: 171 | seo: 172 | type: WebPage 173 | 174 | kramdown: 175 | math_engine: katex 176 | math_engine_opts: {} 177 | footnote_backlink: '↩︎' 178 | 179 | 180 | # Hydejack Settings 181 | # ---------------------------------------------------------------------------------------- 182 | # These settings are specific to Hydejack. 183 | 184 | hydejack: 185 | # Configure the order of complementary content on blog posts 186 | post_addons: [about, newsletter, related, random, comments] 187 | 188 | # Configure the order of complementary content on project pages 189 | project_addons: [about, newsletter, other, comments] 190 | 191 | # Set to `true` if you don't want to show an icon indicating external links 192 | no_mark_external: false 193 | 194 | # Set to `true` if third party plugins fail to work with dynamically loaded pages 195 | no_push_state: false 196 | 197 | # Set to `true` if you want to disable the drawer 198 | no_drawer: false 199 | 200 | # Set to `true` if you don't to use the auto-hiding (JavaScript based) navbar. 201 | # Note that this will not hide the navbar completely, only replace it with a static one. 202 | # Use custom css to hide completely, e.g. `#_navbar { display: none }`. 203 | no_navbar: false 204 | 205 | # Set to true to disable the built-in search functionality. 206 | # Note that search is disabled during local use to save on build time. 207 | # Run Jekyll with the `JEKYLL_ENV` environment variable set to `production` to enable. 208 | no_search: false 209 | 210 | # Set to `true` if you do not want parts of the css inlined in 211 | # This will increase site build speed dramatically! 212 | no_inline_css: false 213 | 214 | # Set to `true` if you don't intend on changing the accent color on a per-page basis. 215 | # This will increase site build speed! 216 | no_page_style: false 217 | 218 | # Code blocks and tables "break" the layout by spanning the full available width. 219 | # Set this to true if you want them to be the same width as other content. 220 | no_break_layout: true 221 | 222 | # Set to `true` to disable the dynamic Table of Contents on large screens. 223 | no_toc: false 224 | 225 | # When set to `true`, will not extend the content in the "third column" on large screens. 226 | # Instead, all content will remains within the center column. 227 | # Note that this will not affect the Table of Contents, use `no_toc` instead. 228 | no_third_column: false 229 | 230 | # Set to `true` if you don't like oversized headlines on large screens. 231 | no_large_headings: false 232 | 233 | # Set to `true` if you do not want to expose your resume and projects 234 | # in machine-readable formats. 235 | no_structured_data: false 236 | 237 | # You can set this to `true` if you don't want to set the `theme-color` meta tag, 238 | # This only affects the meta tag, not the color specified in the app manifest. 239 | no_theme_color: false 240 | 241 | # Disable the breadcrumbs above the title 242 | no_breadcrumbs: false 243 | 244 | # Set to `true` when building with the `--lsi` option. 245 | # The net effect is to use the Jekyll-provided `site.related_posts` variable. 246 | use_lsi: true 247 | 248 | # When using Google Analytics, set to `true` to display a cookie notice banner. 249 | # When enabled, no user-related data will be stored until the user gives consent. 250 | cookies_banner: false 251 | 252 | # Set to `true` if you would like to add a "Powered by Hydejack" link in the footer. 253 | # Note that this setting has no effect when using the free version. 254 | advertise: false 255 | 256 | # Buyers of the PRO version can opt to hide all dates from the theme. 257 | # Frequent consumers of online content will know that nothing devalues a post like 258 | # seeing an old date. 259 | hide_dates: false 260 | 261 | # Similarly, showing last modified date can devalue a post if it is too far in the past. 262 | hide_last_modified: false 263 | 264 | # Note that dark mode only works in the PRO version of Hydejack. 265 | dark_mode: 266 | # Set to `true` to always use the dark theme. 267 | always: false 268 | 269 | # Set to `true` to use the dark theme based on visitors' preference (OS setting). 270 | dynamic: true 271 | 272 | # Set to `true` to allow visitors to switch between light and dark mode. 273 | icon: true 274 | 275 | # ⚡️ DANGER ZONE ⚡️ 276 | # ---------------- 277 | # This is an _experimental_ feature. 278 | # Only use if you know what Service Workers are and how they can impact your site! 279 | offline: 280 | enabled: false 281 | cache_version: 13 282 | precache_assets: 283 | - /assets/img/swipe.svg 284 | 285 | 286 | # Collections 287 | # ---------------------------------------------------------------------------------------- 288 | 289 | collections: 290 | featured_categories: 291 | permalink: /:name/ 292 | output: true 293 | 294 | featured_tags: 295 | permalink: /tag-:name/ 296 | output: true 297 | 298 | projects: 299 | permalink: /projects/:path/ 300 | output: true 301 | 302 | 303 | # File inclusion/exclusion 304 | # ---------------------------------------------------------------------------------------- 305 | 306 | exclude: 307 | - .jekyll-cache 308 | - .sass-cache 309 | - .ruby-lsp 310 | - .wrangler 311 | - '*.toml' 312 | - vendor 313 | - Gemfile 314 | - Gemfile.lock 315 | - functions 316 | include: 317 | - _routes.json 318 | - .well-known 319 | - LICENSE.md 320 | 321 | 322 | # Plugins 323 | # ---------------------------------------------------------------------------------------- 324 | 325 | plugins: 326 | - jekyll-default-layout 327 | - jekyll-feed 328 | - jekyll-optional-front-matter 329 | - jekyll-paginate 330 | - jekyll-readme-index 331 | - jekyll-redirect-from 332 | - jekyll-relative-links 333 | - jekyll-seo-tag 334 | - jekyll-sitemap 335 | - jekyll-titles-from-headings 336 | - jekyll-include-cache 337 | - jekyll-last-modified-at 338 | 339 | 340 | # SEO Tag 341 | # --------------------------------------------------------------------------------------- 342 | 343 | # Where you proof that you own this site (used by jekyll-seo-tag) 344 | # google_site_verification: 345 | # -- or -- 346 | # webmaster_verifications: 347 | # google: 348 | # bing: 349 | # alexa: 350 | # yandex: 351 | 352 | # Used for twitter cards 353 | # twitter: 354 | # username: 355 | 356 | # Used for facebook open graph 357 | # facebook: 358 | # app_id: 359 | # publisher: 360 | # admins: 361 | 362 | # Used on index and about sites 363 | # social: 364 | # name: 365 | # links: 366 | # - https://twitter.com/ 367 | # - https://github.com/ 368 | 369 | 370 | # Plugin Configs 371 | # --------------------------------------------------------------------------------------- 372 | optional_front_matter: 373 | remove_originals: true 374 | 375 | readme_index: 376 | remove_originals: true 377 | with_frontmatter: true 378 | 379 | relative_links: 380 | collections: true 381 | 382 | titles_from_headings: 383 | strip_title: true 384 | collections: true 385 | 386 | compress_html: 387 | comments: [""] 388 | clippings: all 389 | endings: all 390 | ignore: 391 | envs: [development] 392 | 393 | sass: 394 | style: compressed 395 | 396 | # Jekyll Compose Defaults 397 | # --------------------------------------------------------------------------------------- 398 | 399 | jekyll_compose: 400 | default_front_matter: 401 | drafts: 402 | layout: post 403 | description: > 404 | A short ~160 character description of your post for search engines, 405 | social media previews, etc. 406 | image: 407 | path: /assets/img/sidebar-bg.jpg 408 | posts: 409 | layout: post 410 | description: > 411 | A short ~160 character description of your post for search engines, 412 | social media previews, etc. 413 | image: 414 | path: /assets/img/sidebar-bg.jpg 415 | projects: 416 | layout: project 417 | description: > 418 | A short ~160 character description of your post for search engines, 419 | social media previews, etc. 420 | image: 421 | path: /assets/img/sidebar-bg.jpg 422 | links: 423 | - title: Project Link 424 | url: https://example.com 425 | -------------------------------------------------------------------------------- /docs/writing.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Writing 4 | description: > 5 | Hydejack offers a few additional features to markup your content. 6 | Don't worry, these are merely CSS classes added with kramdown's `{:...}` syntax, 7 | so that your content remains compatible with other Jekyll themes. 8 | hide_description: true 9 | sitemap: false 10 | --- 11 | 12 | Hydejack offers a few additional features to markup your content. 13 | Don't worry, these are merely CSS classes added with kramdown's `{:...}` syntax, 14 | so that your content remains compatible with other Jekyll themes. 15 | 16 | 1. this list will be replaced by the table of contents 17 | {:toc} 18 | 19 | For an introduction to markdown in general, see [Mastering Markdown][mm] and [kramdown Syntax][ksyn]. 20 | {:.note} 21 | 22 | ## A word on building speeds 23 | If building speeds are a problem, try using the `--incremental` flag, e.g. 24 | 25 | bundle exec jekyll serve --incremental 26 | 27 | From the [Jekyll docs](https://jekyllrb.com/docs/configuration/#build-command-options) (emphasis mine): 28 | 29 | > Enable the experimental incremental build feature. Incremental build only re-builds posts and pages that have changed, resulting in significant performance improvements for large sites, *but may also break site generation in certain cases*. 30 | 31 | The breakage occurs when you create new files or change filenames. 32 | Also, changing the title, category, tags, etc. of a page or post will not be reflected in pages 33 | other then the page or post itself. 34 | This makes it ideal for writing new posts and previewing changes, but not setting up new content. 35 | 36 | ## Adding a table of contents 37 | You can add a generated table of contents to any page by adding `{:toc}` below a list. 38 | 39 | Markdown: 40 | ~~~md 41 | * this unordered seed list will be replaced by the toc 42 | {:toc} 43 | ~~~ 44 | 45 | You can also create your table of contents as an ordered list (note the `1.` instead of `*`): 46 | 47 | ~~~md 48 | 1. this ordered seed list will be replaced by the toc 49 | {:toc} 50 | ~~~ 51 | 52 | The width of the display has to be larger than 1665px for the ToC to become sticky. 53 | Otherwise, the ToC will appear where the seed list is placed in the document. 54 | To show the table of contents only on large displays (> 1665px) use the following: 55 | 56 | ~~~md 57 | * this unordered seed list will be replaced by the toc 58 | {:toc .large-only} 59 | ~~~ 60 | 61 | A sticky table of contents will reduce the amount of space freed up by the `no_break_layout: false` setting. 62 | This is necessary to ensure large code blocks or tables don't overlap with the ToC. 63 | {:.note} 64 | 65 | 66 | ## Adding notes 67 | You can add a note by adding the `note` class to a paragraph. 68 | 69 | Example: 70 | 71 | You can add a note. 72 | {:.note} 73 | 74 | Markdown: 75 | ~~~markdown 76 | You can add a note. 77 | {:.note} 78 | ~~~ 79 | 80 | Edit the `note` key in `_data/strings.yml` to change the wording of the default label. 81 | To add a note with a specific label, add a `title` attribute: 82 | 83 | ~~~markdown 84 | A custom label. 85 | {:.note title="Attention"} 86 | ~~~ 87 | 88 | A custom label. 89 | {:.note title="Attention"} 90 | 91 | ## Adding large text 92 | You can add large text by adding the `lead` class to the paragraph. 93 | 94 | Example: 95 | 96 | You can add large text. 97 | {:.lead} 98 | 99 | Markdown: 100 | ~~~markdown 101 | You can add large text. 102 | {:.lead} 103 | ~~~ 104 | 105 | ## Adding large images 106 | You can make an image span the full width by adding the `lead` class. 107 | 108 | Example: 109 | 110 | ![Full-width image](https://via.placeholder.com/800x100){:.lead width="800" height="100" loading="lazy"} 111 | 112 | Markdown: 113 | ~~~markdown 114 | ![Full-width image](https://via.placeholder.com/800x100){:.lead width="800" height="100" loading="lazy"} 115 | ~~~ 116 | 117 | It is recommended to provide the dimension of the image via the `width` and `height` attributes, 118 | so that browsers can calculate the layout before the images are loaded. Combining this with the `loading="lazy"` attribute 119 | allows modern browsers to load the images just-in-time as the users scrolls. 120 | 121 | Previous versions of Hydejack shipped with a custom JavaScript-based lazy loading solution, 122 | but it has been removed in v9 in favor of this more standards-based approach. 123 | {:.note} 124 | 125 | ## Adding image captions 126 | You can add captions to large images by adding the `figcaption` class to the paragraph after the image: 127 | 128 | ![Full-width image](https://via.placeholder.com/800x100){:.lead width="800" height="100" loading="lazy"} 129 | 130 | An optional caption for an image. 131 | {:.figcaption} 132 | 133 | Markdown: 134 | ~~~md 135 | ![Full-width image](https://via.placeholder.com/800x100){:.lead width="800" height="100" loading="lazy"} 136 | 137 | A caption for an image. 138 | {:.figcaption} 139 | ~~~ 140 | 141 | 142 | ## Adding large quotes 143 | You can make a quote "pop out" by adding the `lead` class. 144 | 145 | Example: 146 | 147 | > You can make a quote "pop out". 148 | {:.lead} 149 | 150 | Markdown: 151 | ~~~ 152 | > You can make a quote "pop out". 153 | {:.lead} 154 | ~~~ 155 | 156 | ## Adding faded text 157 | You can gray out text by adding the `faded` class. Use this sparingly and for information that is not essential, as it is more difficult to read. 158 | 159 | Example: 160 | 161 | I'm faded, faded, faded. 162 | {:.faded} 163 | 164 | Markdown: 165 | ~~~md 166 | I'm faded, faded, faded. 167 | {:.faded} 168 | ~~~ 169 | 170 | ## Adding tables 171 | Adding tables is straightforward and works just as described in the [kramdown docs][ksyntab], e.g. 172 | 173 | | Default aligned |Left aligned| Center aligned | Right aligned | 174 | |-----------------|:-----------|:---------------:|---------------:| 175 | | First body part |Second cell | Third cell | fourth cell | 176 | 177 | Markdown: 178 | ~~~md 179 | | Default aligned |Left aligned| Center aligned | Right aligned | 180 | |-----------------|:-----------|:---------------:|---------------:| 181 | | First body part |Second cell | Third cell | fourth cell | 182 | ~~~ 183 | 184 | However, it gets tricker when adding large tables. 185 | In this case, Hydejack will break the layout and grant the table the entire available screen width to the right: 186 | 187 | | Default aligned |Left aligned| Center aligned | Right aligned | Default aligned |Left aligned| Center aligned | Right aligned | Default aligned |Left aligned| Center aligned | Right aligned | Default aligned |Left aligned| Center aligned | Right aligned | 188 | |-----------------|:-----------|:---------------:|---------------:|-----------------|:-----------|:---------------:|---------------:|-----------------|:-----------|:---------------:|---------------:|-----------------|:-----------|:---------------:|---------------:| 189 | | First body part |Second cell | Third cell | fourth cell | First body part |Second cell | Third cell | fourth cell | First body part |Second cell | Third cell | fourth cell | First body part |Second cell | Third cell | fourth cell | 190 | | Second line |foo | **strong** | baz | Second line |foo | **strong** | baz | Second line |foo | **strong** | baz | Second line |foo | **strong** | baz | 191 | | Third line |quux | baz | bar | Third line |quux | baz | bar | Third line |quux | baz | bar | Third line |quux | baz | bar | 192 | | Second body | | | | Second body | | | | Second body | | | | Second body | | | | 193 | | 2 line | | | | 2 line | | | | 2 line | | | | 2 line | | | | 194 | |=================|============|=================|================|=================|============|=================|================|=================|============|=================|================|=================|============|=================|================| 195 | | Footer row | | | | Footer row | | | | Footer row | | | | Footer row | | | | 196 | {:.smaller} 197 | 198 | Tables adopts to the font size! You can decrease the size of the table by adding the `smaller` CSS class. Put `{:.smaller}` below the Markdown table, or add `class="smaller"` to a HTML table. 199 | {:.note} 200 | 201 | ### Scroll table 202 | If the extra space still isn't enough, the table will receive a scrollbar. 203 | It is browser default behavior to break the lines inside table cells to fit the content on the screen. 204 | By adding the `scroll-table` class on a table, the behavior is changed to never break lines inside cells, e.g: 205 | 206 | | Default aligned |Left aligned| Center aligned | Right aligned | Default aligned |Left aligned| Center aligned | Right aligned | Default aligned |Left aligned| Center aligned | Right aligned | Default aligned |Left aligned| Center aligned | Right aligned | 207 | |-----------------|:-----------|:---------------:|---------------:|-----------------|:-----------|:---------------:|---------------:|-----------------|:-----------|:---------------:|---------------:|-----------------|:-----------|:---------------:|---------------:| 208 | | First body part |Second cell | Third cell | fourth cell | First body part |Second cell | Third cell | fourth cell | First body part |Second cell | Third cell | fourth cell | First body part |Second cell | Third cell | fourth cell | 209 | | Second line |foo | **strong** | baz | Second line |foo | **strong** | baz | Second line |foo | **strong** | baz | Second line |foo | **strong** | baz | 210 | | Third line |quux | baz | bar | Third line |quux | baz | bar | Third line |quux | baz | bar | Third line |quux | baz | bar | 211 | | Second body | | | | Second body | | | | Second body | | | | Second body | | | | 212 | | 2 line | | | | 2 line | | | | 2 line | | | | 2 line | | | | 213 | |=================|============|=================|================|=================|============|=================|================|=================|============|=================|================|=================|============|=================|================| 214 | | Footer row | | | | Footer row | | | | Footer row | | | | Footer row | | | | 215 | {:.smaller.scroll-table} 216 | 217 | You can add the `scroll-table` class to a markdown table by putting `{:.scroll-table}` in line directly below the table. 218 | To add the class to a HTML table, add the it to the `class` attribute of the `table` tag, e.g. ``. 219 | 220 | 221 | ### Small tables 222 | If a table is small enough to fit the screen even on small screens, you can add the `stretch-table` class 223 | to force a table to use the entire available content width. Note that stretched tables can no longer be scrolled. 224 | 225 | | Default aligned |Left aligned| Center aligned | Right aligned | 226 | |-----------------|:-----------|:---------------:|---------------:| 227 | | First body part |Second cell | Third cell | fourth cell | 228 | {:.stretch-table} 229 | 230 | An optional caption for a table 231 | {:.figcaption} 232 | 233 | You can add the `stretch-table` class to a markdown table by putting `{:.stretch-table}` in line directly below the table. 234 | To add the class to a HTML table, add the it to the `class` attribute of the `table` tag, e.g. `
`. 235 | 236 | Just like images, you can add captions to tables by adding the `figcaption` class to the paragraph after the table. 237 | 238 | ~~~md 239 | An optional caption for a table 240 | {:.figcaption} 241 | ~~~ 242 | 243 | 244 | ## Adding code blocks 245 | To add a code block without syntax highlighting, simply indent 4 spaces (regular markdown). 246 | For code blocks with code highlighting, use `~~~`. This syntax is also supported by GitHub. 247 | For more information and a list of supported languages, see [Rouge](http://rouge.jneen.net/). 248 | 249 | You can give each code block a filename, by making the first line in the block a comment of the form `File: "dir/filename.ext"`. Use either single quotes `'`, double quotes `"`, or backticks ` to surround the filename. 250 | 251 | Example: 252 | 253 | ~~~js 254 | // file: "code-block.js" 255 | // Example can be run directly in your JavaScript console 256 | 257 | // Create a function that takes two arguments and returns the sum of those 258 | // arguments 259 | var adder = new Function("a", "b", "return a + b"); 260 | 261 | // Call the function 262 | adder(2, 6); 263 | // > 8 264 | ~~~ 265 | 266 | An optional caption for a code block 267 | {:.figcaption} 268 | 269 | Markdown: 270 | 271 | ~~~js 272 | // file: "code-block.js" 273 | // Example can be run directly in your JavaScript console 274 | 275 | // Create a function that takes two arguments and returns the sum of those 276 | // arguments 277 | var adder = new Function("a", "b", "return a + b"); 278 | 279 | // Call the function 280 | adder(2, 6); 281 | // > 8 282 | ~~~ 283 | 284 | An optional caption for a code block 285 | {:.figcaption} 286 | 287 | DO NOT use Jekyll's `{ % highlight % } ... { % endhighlight % }` syntax, especially together with the `linenos` option. 288 | The generated `table` to render the line numbers does not have a CSS class or any other way of differentiating it from regular tables, 289 | so that the styles above apply, resulting in a broken page. 290 | What's more, the output from `highlight` tags isn't even valid HTML, nesting `pre` tags inside `pre` tags, 291 | which will in break the site during minification. 292 | You can read more about it [here](https://github.com/penibelst/jekyll-compress-html/issues/71) and 293 | [here](https://github.com/jekyll/jekyll/issues/4432). 294 | {:.note} 295 | 296 | ## Adding math 297 | Before adding math blocks, make sure you've [set up math support](./config.md#enabling-math-blocks). 298 | 299 | ### Inline 300 | Example: 301 | 302 | Lorem ipsum $$ f(x) = x^2 $$. 303 | 304 | Markdown: 305 | ~~~md 306 | Lorem ipsum $$ f(x) = x^2 $$. 307 | ~~~ 308 | 309 | ### Block 310 | Example: 311 | 312 | $$ 313 | \begin{aligned} 314 | \phi(x,y) &= \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right) \\[2em] 315 | &= \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) \\[2em] 316 | &= (x_1, \ldots, x_n) 317 | \left(\begin{array}{ccc} 318 | \phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \\ 319 | \vdots & \ddots & \vdots \\ 320 | \phi(e_n, e_1) & \cdots & \phi(e_n, e_n) 321 | \end{array}\right) 322 | \left(\begin{array}{c} 323 | y_1 \\ 324 | \vdots \\ 325 | y_n 326 | \end{array}\right) 327 | \end{aligned} 328 | $$ 329 | 330 | An optional caption for a math block 331 | {:.figcaption} 332 | 333 | Markdown: 334 | 335 | ~~~latex 336 | $$ 337 | \begin{aligned} %!!15 338 | \phi(x,y) &= \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right) \\[2em] 339 | &= \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) \\[2em] 340 | &= (x_1, \ldots, x_n) 341 | \left(\begin{array}{ccc} 342 | \phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \\ 343 | \vdots & \ddots & \vdots \\ 344 | \phi(e_n, e_1) & \cdots & \phi(e_n, e_n) 345 | \end{array}\right) 346 | \left(\begin{array}{c} 347 | y_1 \\ 348 | \vdots \\ 349 | y_n 350 | \end{array}\right) 351 | \end{aligned} 352 | $$ 353 | 354 | An optional caption for a math block 355 | {:.figcaption} 356 | ~~~ 357 | 358 | KaTeX does not support the `align` and `align*` environments. 359 | Instead, `aligned` should be used, e.g. `\begin{aligned} ... \end{aligned}`. 360 | {:.note} 361 | 362 | Continue with [Scripts](scripts.md){:.heading.flip-title} 363 | {:.read-more} 364 | 365 | 366 | [mm]: https://guides.github.com/features/mastering-markdown/ 367 | [ksyn]: https://kramdown.gettalong.org/syntax.html 368 | [ksyntab]:https://kramdown.gettalong.org/syntax.html#tables 369 | [rtable]: https://dbushell.com/2016/03/04/css-only-responsive-tables/ 370 | -------------------------------------------------------------------------------- /docs/config.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Config 4 | description: > 5 | This chapter covers the many configuration options of Hydejack, allowing you to tailor it to your needs. 6 | hide_description: true 7 | sitemap: false 8 | --- 9 | 10 | Once Jekyll is running, you can start with basic configuration by adding various entries to `_config.yml`. 11 | Besides the documentation here, you can also read the [annotated config file][config]. 12 | 13 | When making changes to `_config.yml`, it is necessary to restart the Jekyll process for changes to take effect. 14 | {:.note} 15 | 16 | 0. this unordered seed list will be replaced by toc as unordered list 17 | {:toc} 18 | 19 | 20 | ## Setting `url` and `baseurl` 21 | The first order of business should be to set the correct `url` and `baseurl` values in `_config.yml`. 22 | 23 | The `url` is the domain of your site, including the protocol (`http` or `https`). For this site, it is 24 | 25 | ~~~yml 26 | # file: `_config.yml` 27 | url: https://qwtel.com 28 | ~~~ 29 | 30 | You don't need to provide this property when hosting on GitHub Pages or Netlify. 31 | {:.note} 32 | 33 | If your entire Jekyll blog is hosted in a subdirectory of your page, provide the path in `baseurl` with a leading `/`, but no trailing `/`, 34 | e.g. 35 | 36 | ~~~yml 37 | # file: `_config.yml` 38 | baseurl: /hydejack 39 | ~~~ 40 | 41 | Otherwise, provide the empty string `''` 42 | 43 | You don't need to provide this property when hosting on GitHub Pages or Netlify. 44 | {:.note} 45 | 46 | ### GitHub Pages 47 | When hosting on [GitHub Pages](https://pages.github.com/) the `url` is `https://.github.io` 48 | (unless you are using a custom domain). 49 | 50 | The `baseurl` depends on the kind of page you are hosting. 51 | 52 | * When hosting a *user or organization page*, use the empty string `''`. 53 | * When hosting *project page*, use `/`. 54 | 55 | For for information on the types of pages you can host on GitHub, see the 56 | [GitHub Help article](https://help.github.com/articles/user-organization-and-project-pages/). 57 | 58 | 59 | ## Changing accent colors and sidebar images 60 | Hydejack allows you to choose the background image of the sidebar, as well as the accent color 61 | (color of the links, selection and focus outline, etc...). 62 | 63 | ~~~yml 64 | # file: `_config.yml` 65 | accent_image: /assets/img/sidebar-bg.jpg 66 | accent_color: rgb(79,177,186) 67 | ~~~ 68 | 69 | I recommend using a blurred image in order for the text to remain readable. 70 | If you save a blurred image as JPG, it will also drastically reduce its file size. 71 | {:.note} 72 | 73 | The `accent_image` property also accepts the special value `none` which will remove the default image. 74 | 75 | If your sidebar image contains bright colors, the white text can be difficult to read. In this case, consider setting 76 | `invert_sidebar: true` in the front matter to invert the text colors in the sidebar. 77 | Use [front matter defaults][fmd] to enable this on all pages (see below). 78 | 79 | Note that these values can be overwritten on a per-page basis, i.e. you can create a unique look for each page. 80 | You can also apply a certain look to all posts in a category via [front matter defaults][fmd], e.g.: 81 | 82 | ```yml 83 | # file: `_config.yml` 84 | defaults: 85 | - scope: 86 | path: hydejack/ 87 | values: 88 | accent_image: /assets/img/hydejack-bg.jpg 89 | accent_color: rgb(38,139,210) 90 | ``` 91 | 92 | ### Theme color 93 | Hydejack also supports the `theme_color` property. When set, it will change the background color of the sidebar, as well as set the `theme_color` property in the [Web App Manifest][wam]. In some browsers, such as Chrome on Android, this will change the color of the browser's UI components. 94 | 95 | ~~~yml 96 | # file: `_config.yml` 97 | theme_color: rgb(25,55,71) 98 | ~~~ 99 | 100 | Just like `accent_*` properties, the theme color can be overridden on a per-page basis by setting it in the front matter. 101 | 102 | [wam]: https://web.dev/add-manifest/#theme-color 103 | 104 | ## Changing fonts 105 | Hydejack lets you configure the font of regular text and headlines, and it has built-in support for Google Fonts. 106 | There are three keys in `_config.yml` associated with this: `font`, `font_heading` and `google_fonts`. 107 | The defaults are: 108 | 109 | ~~~yml 110 | # file: `_config.yml` 111 | font: Noto Sans, Helvetica, Arial, sans-serif 112 | font_heading: Roboto Slab, Helvetica, Arial, sans-serif 113 | google_fonts: Roboto+Slab:700|Noto+Sans:400,400i,700,700i 114 | ~~~ 115 | 116 | `font` and `font_heading` must be valid CSS `font-family` values. When using Google Fonts make sure to provide at least one fallback. 117 | 118 | The `google_fonts` key is the string necessary to fetch the fonts from Google. 119 | You can get it from the download page at [Google Fonts](https://fonts.google.com) after you've selected one or more fonts: 120 | 121 | ![Where to get the google_fonts string](../assets/img/docs/google-fonts.png){:width="600" height="398" loading="lazy"} 122 | 123 | 124 | ### Removing Google Fonts 125 | If you prefer not to use Google Fonts and remove all associated code from the site, 126 | set the `google_fonts` key to `false`. 127 | 128 | The `no_google_fonts` parameter has been removed in v9 and no longer has any effect. 129 | {:.note } 130 | 131 | 132 | ## Choosing a blog layout 133 | Hydejack features three layouts for showing your blog posts. 134 | 135 | * The [`list` layout][posts] only shows the title and groups the posts by year of publication. 136 | * The [`grid` layout][grid]\* is exclusive to the PRO Version and will show a content card (with `image`) for each post. 137 | * The [`blog` layout][blog] is a traditional paginated layout and shows the title and an excerpt of each post. 138 | 139 | [blog]: https://hydejack.com/blog/ 140 | [posts]: https://hydejack.com/posts/ 141 | [grid]: https://hydejack.com/blog/hydejack/ 142 | 143 | In order to use the `list` or `grid` layout add the following front-matter to a new markdown file: 144 | 145 | ~~~yml 146 | --- 147 | layout: list # or `grid` 148 | title: Home 149 | --- 150 | ~~~ 151 | 152 | If you want to use the `blog` layout, you need to add `jekyll-paginate` to your `Gemfile` and to the `plugins` list in your config file: 153 | 154 | ```ruby 155 | # file: `Gemfile` 156 | gem "jekyll-paginate" 157 | ``` 158 | 159 | ```yml 160 | # file: `_config.yml` 161 | plugins: 162 | - jekyll-paginate 163 | ``` 164 | 165 | You also need to add the `paginate` and `paginate_path` keys to your config file, e.g. 166 | 167 | ~~~yml 168 | # file: `_config.yml` 169 | paginate: 10 170 | paginate_path: '/:num/' 171 | ~~~ 172 | 173 | The `blog` layout needs to be applied to a file with the `.html` file extension 174 | and the `paginate_path` needs to match the path to the `index.html` file. 175 | To match the `paginate_path` above, put a `index.html` with the following front matter in the root directory: 176 | 177 | ~~~yml 178 | # file: `index.html` 179 | --- 180 | layout: blog 181 | title: Blog 182 | --- 183 | ~~~ 184 | 185 | For more information see [Pagination](https://jekyllrb.com/docs/pagination/). 186 | 187 | 188 | ### Using the `blog` layout in a subdirectory 189 | If you want to use the blog layout at a URL like `/my-blog/`, create the following folder structure: 190 | 191 | ~~~ 192 | ├── my-blog 193 | │ └── index.html 194 | └── _config.yml 195 | ~~~ 196 | 197 | You can use the same `index.html` as before and place it in the subdirectory. 198 | 199 | ~~~yml 200 | # file: `my-blog/index.html` 201 | --- 202 | layout: blog 203 | title: Blog 204 | --- 205 | ~~~ 206 | 207 | In your config file, make sure the `paginate_path` matches the name of the subdirectory: 208 | 209 | ~~~yml 210 | # file: `_config.yml` 211 | paginate: 10 212 | paginate_path: /my-blog/:num/ #!! 213 | ~~~ 214 | 215 | To add an entry in the sidebar to your blog directory, see [Adding an entry to the sidebar](./basics.md#adding-an-entry-to-the-sidebar). 216 | 217 | 218 | ## Adding an author 219 | At a bare minimum, you should add an `author` key with a `name` and `email` sub-key 220 | (used by the [feed plugin](https://github.com/jekyll/jekyll-feed)) to to your config file: 221 | 222 | ~~~yml 223 | # file: `_config.yml` 224 | author: 225 | name: Florian Klampfer 226 | email: mail@hydejack.com 227 | ~~~ 228 | 229 | If you would like the author to be displayed in the about section below a post or project\*, add an `about` key and provide markdown content. I recommend using the YAML pipe `|` syntax, so you can include multiple paragraphs: 230 | 231 | ~~~yml 232 | # file: `_config.yml` 233 | author: 234 | name: Florian Klampfer 235 | email: mail@hydejack.com 236 | about: | 237 | Hi, I'm Florian or @qwtel... 238 | 239 | This is another paragraph. 240 | ~~~ 241 | 242 | 243 | ### Adding an author's picture 244 | If you'd like for the author's picture to appear in addition the about text (see above), you can either use the [`jekyll-avatar`](https://github.com/benbalter/jekyll-avatar) plugin or provide URLs to images manually. 245 | 246 | To use the plugin, add it to your `Gemfile` and the list of `plugins` in your config file: 247 | 248 | ```ruby 249 | # file: `Gemfile` 250 | gem "jekyll-avatar" 251 | ``` 252 | 253 | ```yml 254 | # file: `_config.yml` 255 | plugins: 256 | - jekyll-avatar 257 | ``` 258 | 259 | Run `bundle install` for the changes to take effect. 260 | 261 | Make sure you have provided a GitHub username in your config file (`github_username`), 262 | or to the author key (`author.social.github`, `author.github.username`, or `author.github`). 263 | See [Adding social media icons](#adding-social-media-icons) for more. 264 | 265 | To set an image manually, you have to provide an URL to the author's `picture` key: 266 | 267 | ~~~yml 268 | # file: `_config.yml` 269 | author: 270 | picture: /assets/img/me.jpg 271 | ~~~ 272 | 273 | If you'd like to provide multiple versions for screens with different pixel densities, 274 | you can provide `path` and `srcset` keys instead: 275 | 276 | ~~~yml 277 | # file: `_config.yml` 278 | author: 279 | picture: 280 | path: /assets/img/me.jpg 281 | srcset: 282 | 1x: /assets/img/me.jpg 283 | 2x: /assets/img/me@2x.jpg 284 | ~~~ 285 | 286 | The keys of the `srcset` hash will be used as image descriptors. For more information on `srcset`, see the [documentation at MDN][mdnsrcset], or [this article from CSS-Tricks][csssrcset]. 287 | 288 | [mdnsrcset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset 289 | [csssrcset]: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ 290 | 291 | 292 | ### Adding social media icons 293 | Hydejack supports a variety of social media icons out of the box. These are defined on a per-author basis, so make sure you've followed the steps in [Adding an author](#adding-an-author). 294 | 295 | If you are using the gem-based version of Hydejack, download [`social.yml`][social] and put it into `_data` in the root directory. This is necessary because gem-based themes do not support including `_data`. 296 | {:.note} 297 | 298 | You can add a link to a social network by adding an entry to the `social` key in to an author. 299 | It consists of the name of the social network as key and your username within that network as value, e.g. 300 | 301 | ~~~yml 302 | # file: `_config.yml` 303 | author: 304 | social: 305 | twitter: qwtel 306 | github: qwtel 307 | ~~~ 308 | 309 | Check out [`authors.yml`][authors] to see which networks are available. 310 | You can also follow the steps [here](advanced.md) to add your own social media icons. 311 | 312 | You can change the order in which the icons appear by moving lines up or down, e.g. 313 | 314 | ~~~yml 315 | # file: `_config.yml` 316 | author: 317 | social: 318 | github: qwtel # now github appears first 319 | twitter: qwtel 320 | ~~~ 321 | 322 | To get an overview of which networks are available and how a typical username in that network looks like, 323 | see the included [`authors.yml`][authors]. 324 | 325 | Should providing a username not produce a correct link for some reason, you can provide a complete URL instead, e.g. 326 | 327 | ~~~yml 328 | # file: `_config.yml` 329 | author: 330 | social: 331 | youtube: https://www.youtube.com/channel/UCu0PYX_kVANdmgIZ4bw6_kA 332 | ~~~ 333 | 334 | You can add any platform, even if it's not defined in [`social.yml`][social], by providing a complete URL. However, a fallback icon will be used when no icon is available. Supplying your own icons is an [advanced topic](advanced.md). 335 | {:.note} 336 | 337 | 338 | ### Adding an email, RSS icon or download icon 339 | If you'd like to add an email , RSS , or download icon to the list, add the `email`, `rss`, or `download` key, e.g.: 340 | 341 | ~~~yml 342 | # file: `_config.yml` 343 | author: 344 | social: 345 | email: mail@hydejack.com 346 | rss: {{ site.url }}{{ site.baseurl }}/feed.xml # make sure you provide an absolute URL 347 | download: https://github.com/hydecorp/hydejack/archive/v9.2.1.zip 348 | ~~~ 349 | 350 | 351 | ## Enabling comments 352 | Hydejack supports comments via [Disqus](https://disqus.com/). Before you can add comments to a page you need to register and add your site to Disqus' admin console. Once you have obtained your "Disqus shortname", you include it in your config file: 353 | 354 | ~~~yml 355 | # file: `_config.yml` 356 | disqus: 357 | ~~~ 358 | 359 | Now comments can be enabled by adding `comments: true` to the front matter. 360 | 361 | ~~~yml 362 | --- 363 | layout: post 364 | title: Hello World 365 | comments: true 366 | --- 367 | ~~~ 368 | 369 | You can enable comments for entire classes of pages by using [front matter defaults][fmd]. 370 | E.g. to enable comments on all posts, add to your config file: 371 | 372 | ~~~yml 373 | # file: `_config.yml` 374 | defaults: 375 | - scope: 376 | type: posts 377 | values: 378 | comments: true 379 | ~~~ 380 | 381 | [fmd]: https://jekyllrb.com/docs/configuration/#front-matter-defaults 382 | 383 | 384 | ## Enabling Google Analytics 385 | Enabling Google Analytics is as simple as setting the `google_analytics` key. 386 | 387 | ~~~yml 388 | # file: `_config.yml` 389 | google_analytics: UA-XXXXXXXX-X 390 | ~~~ 391 | 392 | To remove Google Analytics and all associated code from the site, set the `google_analytics` key to `false`. 393 | 394 | 395 | ### Using a custom analytics provider 396 | If you want to use a different analytics provider such as [Matomo](https://matomo.org/), you can add its code snippet to `_includes/my-body.html` (create if it doesn't exist). 397 | The [default file][mybody] contains an example. 398 | 399 | ## Changing built-in strings 400 | You can change the wording of built-in strings like "Related Posts" or "Read more" in `_data/strings.yml`. 401 | 402 | If you are using the gem-based version the file doesn't exist, but you can get the default file [here][strings]. 403 | 404 | You will frequently find markers like ``. 405 | You can place them freely within your string and they will be replaced with the content they refer to. 406 | 407 | You may also use this feature to translate the theme into different languages. 408 | In this case you should also set the `lang` key to your config file, e.g. 409 | 410 | ```yml 411 | # file: `_config.yml` 412 | lang: cc-ll 413 | ``` 414 | 415 | where `cc` is the 2-letter country code and `ll` specifies a 2-letter location code, e.g.: `de-at`. 416 | 417 | You may also change the strings used for formatting dates and times (look out for the `date_formats` key), but be aware that the values you provide need to be valid Ruby [format directives](http://ruby-doc.org/core-2.4.1/Time.html#method-i-strftime). 418 | 419 | 420 | ## Adding legal documents 421 | If you have pages for contact data, privacy policy, cookie policy, etc. you can add links to them in the footer by listing them under the `legal` key in your config file as follows: 422 | 423 | ```yml 424 | # file: `_config.yml` 425 | legal: 426 | - title: Impress 427 | url: /impress/ 428 | - title: Cookies Policy 429 | url: /cookies-policy/ 430 | ``` 431 | 432 | When using Hydejack's offline feature, the pages listed here will be downloaded and cached when loading the page for the first time. 433 | 434 | ## Enabling math blocks 435 | 436 | Hydejack supports [math blocks][ksynmath] with either [KaTeX] or [MathJax]. 437 | 438 | The _MathJax implementation_ comes with a client-side runtime and works on GitHub Pages. 439 | It is the more heavy-weight of the two and doesn't work without JavaScript enabled. 440 | Due to the size of the complete MathJax package, it only works partially with offline support enabled. 441 | 442 | The _KaTeX implementation_ pre-renders the KaTeX output during site building. 443 | It's more lightweight because it does not ship a client-side runtime and therefore works without JavaScript. 444 | In my opinion, it is the more elegant solution, but it requires a JavaScript runtime on the machine that builds the site, 445 | i.e. it does not work on GitHub Pages. 446 | 447 | You can switch between the two implementations by changing the `kramdown.math_engine` key to either `katex` or `mathjax` in your config file. 448 | 449 | ```yml 450 | # file: `_config.yml` 451 | kramdown: 452 | math_engine: katex 453 | math_engine_opts: {} 454 | ``` 455 | 456 | The KaTeX implementation also requires the `kramdown-math-katex` gem in your `Gemfile`. 457 | If you intend to use MathJax instead, this step is not required. 458 | 459 | ```ruby 460 | # file: `Gemfile` 461 | gem "kramdown-math-katex" 462 | ``` 463 | 464 | There are a couple of things to know about this gem: 465 | * It is not supported on GitHub Pages. 466 | You have to build the site on your machine before uploading to GitHub, 467 | or use a more permissive cloud building tool such as Netlify. 468 | * You need some kind of JavaScript runtime on your machine. 469 | Usually installing [NodeJS](https://nodejs.org/en/download/) will suffice. 470 | Alternatively, adding `gem "duktape"` will also do. 471 | For more, see 472 | 473 | Before you add math content, remember to run `bundle install` and restart Jekyll. 474 | 475 | [ksynmath]: https://kramdown.gettalong.org/syntax.html#math-blocks 476 | [katex]: https://khan.github.io/KaTeX/ 477 | [mathjax]: https://www.mathjax.org/ 478 | 479 | 480 | ## Adding custom Favicons and App Icons 481 | ### Changing the Favicon 482 | By default, Hydejack will use the Favicon from `/assets/icons/favicon.ico` and Apple Touch Icon from `/assets/icons/icon-192x192.png`. 483 | You can either override these files, or override the path in the config file via `favicon` and `app_touch_icon` keys: 484 | 485 | ```yml 486 | # file: "_config.yml" 487 | favicon: /favicon.ico 488 | apple_touch_icon: /assets/img/logo.png 489 | ``` 490 | 491 | ### Changing the App Icons 492 | By default, Hydejack includes its own favicon, as well as app icons in 8 different resolutions. 493 | 494 | | Name | Resolution | 495 | |:-------------------|-----------:| 496 | | `icon-512x512.png` | `512x512` | 497 | | `icon-384x384.png` | `384x384` | 498 | | `icon-192x192.png` | `192x192` | 499 | | `icon-152x152.png` | `152x152` | 500 | | `icon-144x144.png` | `144x144` | 501 | | `icon-128x128.png` | `128x128` | 502 | | `icon-96x96.png` | `96x96` | 503 | | `icon-72x72.png` | `72x72` | 504 | 505 | To change the default icons you have to replce all of them. To make this manageable, I recommend using the following tools: 506 | 507 | First, use the [Maskable.app Editor](https://maskable.app/editor) to confine your logo/picture to the "minimum safe area". More on maskable app icons, see [this article on web.dev](https://web.dev/maskable-icon). 508 | Make sure the base image is at least 512x512 pixels in size. 509 | 510 | Then use the [Web App Manifest Generator](https://app-manifest.firebaseapp.com/) to automatically resize the icons. 511 | Upload the icon downloaded from Maskable.app and then click "Generate .zip". 512 | In the zip, ignore the `manifest.json` and look for the `icons` folder. Copy it into the `assets` folder of your site. 513 | 514 | To change the favicon, place your own `favicon.ico` (32x32, PNG) into `assets/icons`. 515 | 516 | 517 | ## Adding a cookies banner* 518 | 519 | ~~~yml 520 | # file: `_config.yml` 521 | hydejack: 522 | cookies_banner: true 523 | ~~~ 524 | 525 | Enabling this setting will show a notice at the top of the page to new visitors. 526 | You can change the wording of the notice in `_data/strings.yml` 527 | with the `cookies_banner.text` and `cookies_banner.okay` keys: 528 | 529 | ~~~yml 530 | # file: `_data/strings.yml` 531 | cookies_banner: 532 | text: This site uses cookies. [Markdown allowed](/cookies-policy/)! 533 | okay: Okay 534 | ~~~ 535 | 536 | 537 | ## Enabling newsletter boxes* 538 | If want to use a different mailing provider you can build your own form, and insert it into `_includes/my-newsletter.html`. The file includes an example form for MailChimp, where you need to fill in `site.mailchimp.action` and `site.mailchimp.hidden_input` (you can get these from MailChimp). 539 | 540 | To build a completely new from, you can use [the same CSS classes as Bootstrap](https://getbootstrap.com/docs/4.0/components/forms/). Note that only form, grid and utility classes are available. Check out [Forms by Example](../forms-by-example.md){:.heading.flip-title} for more examples. 541 | 542 | 543 | 544 | ## Enabling Dark Mode 545 | Dark mode can be enabled in `config.yml` under the `hydejack` key and has three settings and two adjustments: 546 | 547 | ```yml 548 | # file: `_config.yml` 549 | hydejack: 550 | dark_mode: 551 | dynamic: true 552 | icon: true 553 | always: false 554 | ``` 555 | 556 | Setting `dynamic` will enable dark mode based on the client's device setting, as expressed by the `prefer-color-scheme` CSS media query. 557 | 558 | Setting `icon` will show a switch to alternate between the light and dark mode at the top of the page. 559 | 560 | Finally, setting `always` will cause dark mode to become the default theme at all times (combine with `dynamic: false`). 561 | 562 | Older versions of Hydejack allowed enabling dark mode based on local time. These settings continue to work, but are no longer recommended. 563 | {:.note} 564 | 565 | 566 | Continue with [Basics](basics.md){:.heading.flip-title} 567 | {:.read-more} 568 | 569 | 570 | [config]: https://github.com/hydecorp/hydejack-starter-kit/blob/v9/_config.yml 571 | [social]: https://github.com/hydecorp/hydejack-starter-kit/blob/v9/_data/social.yml 572 | [authors]: https://github.com/hydecorp/hydejack-starter-kit/blob/v9/_data/authors.yml 573 | [strings]: https://github.com/hydecorp/hydejack-starter-kit/blob/v9/_data/strings.yml 574 | [mybody]: https://github.com/hydecorp/hydejack-starter-kit/blob/v9/_includes/my-body.html 575 | 576 | *[FOIT]: Flash of Invisible Text 577 | *[GA]: Google Analytics 578 | -------------------------------------------------------------------------------- /docs/basics.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Basics 4 | description: > 5 | This chapter covers the basics of content creation with Hydejack. 6 | hide_description: true 7 | sitemap: false 8 | --- 9 | 10 | This chapter covers the basics of content creation with Hydejack. 11 | 12 | 0. this unordered seed list will be replaced by toc as unordered list 13 | {:toc} 14 | 15 | 16 | ## Adding images 17 | Adding good images is key to a engaging blog experience. You can provide an `image` attribute in in the front matter of posts, pages, and projects* that will be used by Hydejack in a variety of ways, 18 | such as header image in the `blog` and `post` layout, social media previews, cards in the `gird` and `projects` layout\*, thumbnails in the search dropdown\*, etc. 19 | 20 | The `image` attribute will accept an URL to an image, but it is recommended that you provide a `path` / `srcset` hash instead, e.g. 21 | 22 | ```yml 23 | image: 24 | path: /assets/img/projects/hyde-v2.jpg 25 | srcset: 26 | 1920w: /assets/img/projects/hyde-v2.jpg 27 | 960w: /assets/img/projects/hyde-v2@0,5x.jpg 28 | 480w: /assets/img/projects/hyde-v2@0,25x.jpg 29 | ``` 30 | 31 | Hydejack will show the image in various sizes depending on available screen width so that no specific size will fit all. 32 | Instead, I recommend using a [mipmap]-like approach, providing the image in multiple sizes, each image half the width of the previous one. 33 | Since Hydejack provides an appropriate [`sizes` attribute][mdn-sizes], the browser can chose the best image from the provided source set. 34 | 35 | If you have [ImageMagick] installed, you can use the following commands to create images at 50%, 25%, and 12.5% of the original image. 36 | Other image tools will provide similar capabilities. 37 | 38 | convert your-image.jpg -resize 50% -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace RGB your-image@0,5x.jpg 39 | convert your-image.jpg -resize 25% -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace RGB your-image@0,25x.jpg 40 | convert your-image.jpg -resize 12.5% -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace RGB your-image@0,125x.jpg 41 | 42 | Note that the keys in the `srcset` hash have to be valid "descriptors" (as defined [here][mdn-srcset]). In practice this means the width in pixels followed by `w`. 43 | 44 | The `path` key is a fallback image for browsers that don't support the `srcset` attribute. It's also used by `jekyll-seo-tag` for social media previews. 45 | 46 | For more information on `srcset`, see the [documentation at MDN][mdn-srcset], or [this article from CSS-Tricks][csstricks]. 47 | 48 | [imagemagick]: https://imagemagick.org/index.php 49 | [mipmap]: https://en.wikipedia.org/wiki/Mipmap 50 | [mdn-srcset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset 51 | [mdn-sizes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes 52 | [csstricks]: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ 53 | 54 | 55 | 56 | ## Adding an entry to the sidebar 57 | To add links to the sidebar, populate the `menu` entry in `_config.yml` with a list of `title`-`url` pairs, e.g.: 58 | 59 | ```yml 60 | # file: `_config.yml` 61 | menu: 62 | - title: Blog 63 | url: /blog/ 64 | - title: Projects 65 | url: /projects/ 66 | - title: Resume 67 | url: /resume/ 68 | - title: About 69 | url: /about/ 70 | ``` 71 | 72 | ### Adding a link to an external page to the sidebar 73 | To add links to external sites, simply provide a fully qualified URL, e.g. 74 | 75 | ```yml 76 | menu: 77 | - title: "@qwtel" 78 | url: https://qwtel.com/ 79 | ``` 80 | 81 | ## Adding a category or tag 82 | Hydejack allows you to use the `list` or `grid`\* layout to show all posts of a particular category or tag. 83 | 84 | Before you start, make sure your config files contains the `features_categories` and `featured_tags` collections: 85 | 86 | ~~~yml 87 | # file: `_config.yml` 88 | collections: 89 | featured_categories: 90 | permalink: /:name/ 91 | output: true 92 | featured_tags: 93 | permalink: /tag-:name/ 94 | output: true 95 | ~~~ 96 | 97 | ### Recap: Categories and tags in Jekyll 98 | Posts in Jekyll can belong to one or more categories, as well as one or more tags. They are defined in a post's front matter: 99 | 100 | ~~~yml 101 | --- 102 | layout: post 103 | title: Welcome to Jekyll 104 | categories: [jekyll, update] 105 | tags: [jekyll, update] 106 | --- 107 | ~~~ 108 | 109 | Posts can also be assigned to a category based on their position within the folder structure, e.g. 110 | 111 | ~~~ 112 | ├── jekyll 113 | │ └── update 114 | │ └── _posts 115 | │ └── 2017-04-07-welcome-to-jekyll.markdown 116 | ~~~ 117 | 118 | This will place "Welcome to Jekyll" in the categories `jekyll` and `update`. 119 | 120 | This is now the preferred way of assigning categories in Hydejack, as it makes URLs correspond more naturally to the underlying folder structure. 121 | {:.note} 122 | 123 | Whether you use this method or not, categories will always be part of a posts URL, while tags will not. 124 | 125 | Type | URL 126 | -----------|---- 127 | Categories | `/jekyll/update/2017-04-07-welcome-to-jekyll/` 128 | Tags | `/2017-04-07-welcome-to-jekyll/` 129 | {:.scroll-table-small} 130 | 131 | As far as Jekyll is concerned, this is the only difference. 132 | 133 | ### Categories and tags in Hydejack 134 | Categories and tags are displayed by Hydejack below the title, after the date. Categories are displayed with the preposition "in", while tags are displayed with the preposition "on", e.g. 135 | 136 | Type | Title 137 | -----------|------ 138 | Categories | Welcome to Jekyll¬ 07 Apr 2017 **in** Jekyll / Update 139 | Tags | Welcome to Jekyll¬ 07 Apr 2017 **on** Jekyll, Update 140 | Both | Welcome to Jekyll¬ 07 Apr 2017 **in** Jekyll / Update **on** Jekyll, Update 141 | {:.scroll-table-small} 142 | 143 | You can adjust these in [`_data/string.yml`][strings]. 144 | 145 | ### Creating a new category or tag 146 | By default, categories and tags are rendered as plain text. Further steps are necessary if you want them to link to a page that contains a list of all posts that belong to that category or tag. 147 | 148 | For each featured category or tag, a file called `.md` or `.md` has to be created inside the `_featured_tags` and `_featured_categories` folders, respectively. Each file in these folders is part of a [Jekyll Collection](https://jekyllrb.com/docs/collections/). 149 | 150 | The meta data of a category or tag is set in the files front matter, e.g. 151 | 152 | ~~~yml 153 | # file: `_featured_categories/hyde.md` 154 | --- 155 | layout: list 156 | title: Hyde 157 | slug: hyde 158 | description: > 159 | Hyde is a brazen two-column [Jekyll](http://jekyllrb.com) theme. 160 | It's based on [Poole](http://getpoole.com), the Jekyll butler. 161 | --- 162 | ~~~ 163 | 164 | `layout` 165 | : Must either `list` or `grid`\* 166 | 167 | `title` 168 | : Used as title of the page, as well as name of the category or tag as part of the line below a blog post's title. Can be different from the name of the tag or category, as long as `slug` is identical to the name. 169 | 170 | `slug` 171 | : Must be identical to the key used in the blog's front matter, i.e. if you use `categories: [jekyll]` the `slug` must be `jekyll`. By default, the slug is derived from the title, but here it is recommended that you set it explicitly. 172 | 173 | `description` 174 | : A medium-length description, used on the tag or category's detail page and shown in a message box below the title. 175 | 176 | `menu` 177 | : Set to to `true` if you want the category or tag to appear in the sidebar. For more information, see [Adding an entry to the sidebar](#adding-an-entry-to-the-sidebar). 178 | 179 | Once the file is created, the page can be found at `/category//` or `/tag//`. 180 | 181 | 182 | ## Adding an about page 183 | About pages are a frequent use case, so Hydejack has a special layout for it. It is a slight modification of the `page` layout that allows showing the author information by adding the `` marker somewhere on the page. 184 | 185 | To create an about page, make sure `layout` is set to `about`. 186 | For more on authors, see [Adding an author](config.md#adding-an-author). 187 | 188 | ~~~md 189 | 190 | --- 191 | layout: about 192 | title: About 193 | --- 194 | 195 | Some content 196 | 197 | 198 | ~~~ 199 | 200 | 201 | ## Adding a cover page 202 | Hydejack 8 introduces cover pages, i.e. pages witht he sidebar opened, so that it spans the entire screen. This feature is intended for landing pages. To enable it on a page, simply add `cover: true` to the front matter. 203 | 204 | ![Cover page example](../assets/img/blog/hydejack-8@0,5x.png){:.lead width="960" height="540" loading="lazy"} 205 | 206 | ~~~yml 207 | # file: `index.md` 208 | --- 209 | layout: welcome 210 | title: Welcome 211 | cover: true #!! Add this 212 | --- 213 | ~~~ 214 | 215 | ## Adding related posts to a post 216 | You can choose which posts will appear in the "Related Posts" section below a post by adding the `related_posts` key to the front matter of a post 217 | 218 | ~~~yml 219 | # file: `category/_posts/2020-02-01-some-post.md` 220 | --- 221 | layout: post 222 | related_posts: 223 | # Specify via the path in the file system 224 | - category/_posts/2020-01-01-other-post.md 225 | # Can also use the url of the post, 226 | # but this will break when changing the `permalink` setting! 227 | - /blog/category/2020-01-02-other-other-post/ 228 | --- 229 | ~~~ 230 | 231 | ## Customization 232 | ### Adding custom CSS 233 | The quickest and safest way to add custom CSS to Hydejack is via the `_sass/my-inline.scss` and `_sass/my-style.scss` files (create the folder/the files if they don't exist). 234 | 235 | To add CSS that gets inlined into the page, i.e. is loaded with the first request, put the CSS rules into `my-inline.scss`. This is intended for above-the-fold content. Otherwise put the CSS rules into `my-style.scss`. 236 | Note that this distinction has no effect when `no_inline_css` is enabled. 237 | 238 | 239 | ### Adding custom HTML to the head 240 | To add custom HTML elements to the `` of the document, open `_includes/my-head.html` (create the folder/the files if they don't exist) and add your elements there. 241 | 242 | For example, you can add a custom tracking script via: 243 | 244 | ~~~html 245 | 246 | 247 | ~~~ 248 | 249 | 250 | ### Adding custom HTML to the body 251 | To add custom HTML elements to the `` of the document, open `_includes/my-body.html` (create the folder/the files if they don't exist) and add your elements there. 252 | 253 | An earlier version of Hydejack used the `my-scripts.html` file to accomplish the same goal. 254 | There are still some instances were you might want to prefer `my-scripts.html` over `my-body.html`, as it won't load scrips on redirect pages and will be ignored by browsers < IE10. 255 | {:.note} 256 | 257 | 258 | ## Adding a welcome page* 259 | If you bought the PRO version of Hydejack you have access to the `welcome` layout. 260 | It is intended to showcase your projects and blog posts in a compact way. 261 | Technically, it is a modified version of the `about` layout, so it allows showing the author information where the `` marker is put. [Demo][welcome]. 262 | 263 | You can create a welcome page by creating a new markdown file and setting the layout to `welcome` in the front matter. 264 | 265 | ~~~yml 266 | # file: `index.md` 267 | --- 268 | layout: welcome 269 | title: Welcome 270 | cover: true 271 | --- 272 | ~~~ 273 | 274 | Without further configuration, the welcome page will just look like a regular page. However, it can be enhanced through the use of markers: 275 | - To show the two most recent projects, add the `` marker to the content 276 | - To show the four most recent blog posts, add the `` marker to the content 277 | - (To show the five most recent blog posts in list form, add the `` marker to the content) 278 | 279 | The welcome layout also supports selecting specific projects and posts, by adding to the front matter, e.g.: 280 | 281 | ~~~yml 282 | # file: `index.md` 283 | --- 284 | selected_projects: 285 | - _projects/hydejack-v6.md 286 | - /projects/hyde-v2/ 287 | projects_page: projects.md 288 | selected_posts: 289 | - _posts/2017-05-03-javascripten.md 290 | - /blog/2012-02-07-example-content/ 291 | posts_page: /blog/ 292 | featured: false 293 | --- 294 | ~~~ 295 | 296 | `selected_projects` 297 | : A list of paths to projects that should be featured in the `` marker. 298 | Either provide paths relative to the main directory with no leading `/`, 299 | or URLs according to the schema defined in `permalink`. 300 | 301 | `projects_page` 302 | : The path to the main projects page 303 | Either a path relative to the main directory with no leading `./`, 304 | or a URL according to the schema defined in `permalink`. 305 | 306 | `selected_posts` 307 | : A list of paths to blog posts that should be featured in the `` or `` marker. 308 | Either provide paths relative to the main directory with no leading `/`, 309 | or URLs according to the schema defined in `permalink`. 310 | 311 | `posts_page` 312 | : The path to the main posts page. 313 | Either a path relative to the main directory with no leading `./`, 314 | or a URL according to the schema defined in `permalink`. 315 | 316 | `featured` 317 | : Optional. When `true`, project thumbnails will span the full width instead of half. 318 | This setting takes precedence over the `featured` value of individual projects, 319 | i.e. it will apply to the entire page. 320 | 321 | 322 | ## Projects* 323 | 324 | ### Adding a projects page 325 | The projects page will show all projects of a particular collection. 326 | 327 | First, you need to make sure that you have the `projects` collection defined in `_config.yml`: 328 | 329 | ~~~yml 330 | # file: `_config.yml` 331 | collections: 332 | projects: 333 | permalink: /projects/:path/ 334 | output: true 335 | ~~~ 336 | 337 | Next, add a `projects.md` to in the root (you can adjust the name/location to match the `permalink` of the 338 | collection). 339 | This file has the `projects` layout (mind the "s" at the end) and should have a `show_collection` key, 340 | with the name of the collection as a value, e.g.: 341 | 342 | ~~~yml 343 | # file: `projects.md` 344 | --- 345 | layout: projects 346 | title: Projects* 347 | show_collection: projects 348 | featured: true 349 | --- 350 | ~~~ 351 | 352 | `layout` 353 | : Must be `projects`. 354 | 355 | `title` 356 | : The title of the page. Note that this name is reused as part of each individual project page 357 | (for the link that directs back to the projects page). 358 | 359 | `show_collection` 360 | : The name of the collection you want display on this page. Defaults to `projects`. See [Organizing Projects](#organizing-projects) for detail on how to handle multiple project collections. 361 | 362 | `featured` 363 | : Optional. When `true`, project thumbnails will span the full width, instead of only half. 364 | This setting takes precedence over the `featured` value of individual projects, 365 | i.e. it will apply to the entire page. 366 | 367 | 368 | ### Adding a project 369 | Projects are organized using [Jekyll Collections](https://jekyllrb.com/docs/collections/). 370 | Each project generates an entry on the projects layout ([Demo][projects]) as well as its own detail page ([Demo][project]). 371 | 372 | Each project is defined by a file in the `_projects` directory. 373 | The project's meta information is defined in the file's front matter. You can also add markdown content. 374 | A project's front matter should look like: 375 | 376 | ~~~yml 377 | # file: `_projects/hyde-v2.md` 378 | --- 379 | layout: project 380 | title: Hyde v2* 381 | date: 2 Jan 2014 382 | image: 383 | path: /assets/img/projects/hyde-v2@0,25x.jpg 384 | srcset: 385 | 1920w: /assets/img/projects/hyde-v2.jpg 386 | 960w: /assets/img/projects/hyde-v2@0,5x.jpg 387 | 480w: /assets/img/projects/hyde-v2@0,25x.jpg 388 | caption: Hyde is a brazen two-column Jekyll theme. 389 | description: > 390 | Hyde is a brazen two-column [Jekyll](http://jekyllrb.com) theme. 391 | It's based on [Poole](http://getpoole.com), the Jekyll butler. 392 | links: 393 | - title: Demo 394 | url: http://hyde.getpoole.com 395 | - title: Source 396 | url: https://github.com/poole/hyde 397 | featured: false 398 | --- 399 | ~~~ 400 | 401 | `layout` 402 | : Must be set to `project` 403 | 404 | `date` 405 | : Providing a year is the minimum requirement. Used to sort the projects. 406 | 407 | `image` 408 | : A 16:9 image of the project. See [Adding images](#adding-images) for details. 409 | 410 | `caption` 411 | : A short description, shown as part of each "project card" in the `projects` layout. 412 | 413 | `description` 414 | : A medium-length description, used on the project's detail page as meta description and shown as message box below the image. 415 | 416 | `links` 417 | : A list of `title`-`url` pairs that link to external resources related to this project. 418 | 419 | `author` 420 | : Optional. The author shown below the project, similar to posts. 421 | 422 | `featured` 423 | : Optional. When `true`, the project preview will span the full content width. You can use this for projects that should receive more attention. You can set/override this for an entire page, by setting `featured` in the front matter (applies to the `projects` and `welcome` layout). 424 | 425 | 426 | ### Organizing Projects 427 | If you want to organize your projects using categories or tags, similar to the way you do with posts, the best way is to achieve this is via multiple collections. Categories and tags are reserved for posts, and adding them to collections has no effect. 428 | 429 | The default config file comes with one projects collection predefined, but we can easily add additional collections like so: 430 | 431 | ~~~yml 432 | # file: `_config.yml` 433 | collections: 434 | # The default projects collection 435 | projects: 436 | permalink: /projects/:path/ 437 | output: true 438 | 439 | # Our new projects collection 440 | other_projects: 441 | # Make sure the permalink path is different! 442 | permalink: /other-projects/:path/ 443 | output: true 444 | ~~~ 445 | 446 | Create a new folder in the top level directory that follows the naming convention `_`. In our case the name is `_other_projects`. 447 | In it, create collection items as [shown above](#adding-a-project). 448 | 449 | This is enough to render the project pages. To render them all on a single page, create a projects page as [described above](#adding-a-projects-page) with the `show_collection` key set to our new collection, e.g.: 450 | 451 | ```yaml 452 | # file: "other-collection.md" 453 | --- 454 | layout: projects 455 | title: Other Projects* 456 | show_collection: other_projects #!! 457 | --- 458 | ``` 459 | 460 | Note that the file name matches the `other-projects` path in the `permalink` we've defined above. This is to ensure that the directories match up. 461 | 462 | 463 | ## Adding a resume* 464 | Hydejack's PRO version features a generalized resume layout. 465 | [Demo][resume]. 466 | 467 | It generates the resume page from a valid [JSON Resume](https://jsonresume.org/), which is good news if you already have a JSON resume. Otherwise, there are various ways of obtaining one: 468 | 469 | * You can edit the [example `resume.yml`][resumeyml] in `_data` directly. It contains example entries for each type of entry. 470 | * You can use the visual [JSON Resume Editor](http://registry.jsonresume.org/). 471 | * If you have a LinkedIn profile, you can try [LinkedIn to Json Résumé](https://jmperezperez.com/linkedin-to-json-resume/). 472 | 473 | Once you have a JSON Resume, place it into `_data`. 474 | 475 | To render a resume page, create a new markdown file and set the layout to `resume` in the front matter: 476 | 477 | ~~~yml 478 | # file: `resume.md` 479 | --- 480 | layout: resume 481 | title: Resume 482 | description: > 483 | A short description of the page for search engines (~150 characters long). 484 | hide_description: true 485 | --- 486 | ~~~ 487 | 488 | You can download the final `resume.json` (minified) from the assets folder. When running locally, you can find it at `_site/assets/resume.json`. 489 | {:.note} 490 | 491 | ### Changing the layout 492 | You can customize the layout of the resume by rearranging the entries in the `left_column` and `right_columns` keys in the front matter, e.g. 493 | 494 | ~~~yml 495 | # file: `resume.md` 496 | --- 497 | layout: resume 498 | left_column: 499 | - work 500 | - volunteer 501 | - education 502 | - awards 503 | - publications 504 | - references 505 | right_column: 506 | - languages 507 | - skills 508 | - interests 509 | --- 510 | ~~~ 511 | 512 | ### Skill level icons 513 | By default, the layout will replace certain keywords with star icons. The keywords are as follows: 514 | 515 | | Icon | Skills | Languages | 516 | |--|--|--| 517 | | | 3/3, Master, Expert, Senior, Professional | 5/5, Native or bilingual proficiency, Native speaker | 518 | | | | 4/5, Full professional proficiency | 519 | | | 2/3, Intermediate, Advanced, Amateur | 3/5, Professional working proficiency | 520 | | | | 2/5, Limited working proficiency | 521 | | | 1/3, Beginner, Novice, Junior | 1/5, Elementary proficiency | 522 | | | 0/3 | 0/5, No proficiency | 523 | 524 | If a keyword is not recognized, the provided text will be spelled out instead. To disable icons and always spell out the text, set `no_skill_icons` and/or `no_langauge_icons` to `true`. 525 | 526 | ~~~yml 527 | # file: `resume.md` 528 | no_language_icons: true 529 | no_skill_icons: true 530 | ~~~ 531 | 532 | ### Adding a specialized resume or multiple resumes 533 | You can add a specialized resume or multiple resumes by adding the resume YAML to the front matter under the `resume` key. 534 | E.g.: 535 | 536 | ~~~yml 537 | # file: `resume.md` 538 | --- 539 | layout: resume 540 | title: Resume 541 | description: > 542 | A short description of the page for search engines (~150 characters long). 543 | resume: 544 | basics: 545 | name: "Richard Hendricks" 546 | label: "Programmer" 547 | picture: "/assets/icons/icon.png" 548 | # ... 549 | --- 550 | ~~~ 551 | 552 | ### Downloads 553 | You can add buttons to let readers print or download your resume in various formats. 554 | Add the following to the front matter to add all 4 buttons: 555 | 556 | ```yml 557 | # file: "resume.md" 558 | buttons: 559 | print: true 560 | pdf: /assets/Resume.pdf 561 | vcf: http://h2vx.com/vcf/ 562 | json: /assets/resume.json 563 | ``` 564 | 565 | To remove a button remove the corresponding key from the hash. 566 | 567 | While the `resume.json` is can be generated by Jekyll itself, and the vCard can be generated by an [external service][h2vx], 568 | the PDF needs to be pre-generated by you. 569 | 570 | You can render a PDF from the resume page itself by using your browser's "Print to PDF" feature (Chrome works best). 571 | For best results, check the following options in the print popup: 572 | 573 | [h2vx]: http://h2vx.com/vcf/ 574 | 575 | ![Uncheck Headers and footers, check Background graphics](/assets/img/docs/chrome-print.png){:width="299" height="588" loading="lazy"} 576 | 577 | 578 | Continue with [Writing](writing.md){:.heading.flip-title} 579 | {:.read-more} 580 | 581 | [welcome]: https://hydejack.com/ 582 | [resume]: https://hydejack.com/resume/ 583 | [projects]: https://hydejack.com/projects/ 584 | [project]: https://hydejack.com/projects/default/ 585 | 586 | [strings]: https://github.com/hydecorp/hydejack-site/blob/master/_data/strings.yml 587 | [resumeyml]: https://github.com/hydecorp/hydejack-site/blob/master/_data/resume.yml 588 | --------------------------------------------------------------------------------