--~~~ - - -- The next version of Hydejack (v6.3.0) will allow embedding 3rd party scripts, - like the one that comes with this tweet for example. -
- — Florian Klampfer (@qwtel) - June 3, 2017 -
- -## Global scripts -If you have scripts that should be included on every page you can add them globally by -opening (or creating) `_includes/my-scripts.html` and adding them like you normally would: - -```html - - -``` - -`my-scripts.html` will be included at the end of the `body` tag. - -## Registering push state event listeners -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. - -```html - - -``` - -Note that the above code must only run once, so include it in your `my-scripts.html`. - -`hy-push-state-start` -: Occurs after clicking a link. - -`hy-push-state-ready` -: Animation fished and response has been parsed, ready to swap out the content. - -`hy-push-state-after` -: The old content has been replaced with the new content. - -`hy-push-state-progress` -: Special case when animation is finished, but no response from server has arrived yet. - This is when the loading spinner will appear. - -`hy-push-state-load` -: All embedded script tags have been inserted into the document and have finished loading. - -## If everything else fails -If you can't make an external script work with Hydejack's push state approach to page loading, -you can disable push state by adding to your config file: - -```yml -# file: `_config.yml` -hydejack: - no_push_state: true -``` - - -Continue with [Build](build.md){:.heading.flip-title} -{:.read-more} diff --git a/docs/upgrade.md b/docs/upgrade.md deleted file mode 100644 index 4c27ca3d67..0000000000 --- a/docs/upgrade.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -layout: page -title: Upgrade -description: > - This chapter shows how to upgrade Hydejack to a newer version. The method depends on how you've installed Hydejack. -hide_description: true -sitemap: false ---- - -This chapter shows how to upgrade Hydejack to a newer version. The method depends on how you've installed Hydejack. - -0. this unordered seed list will be replaced by toc as unordered list -{:toc} - -Before upgrading to v7+, make sure you've read the [CHANGELOG](../CHANGELOG.md){:.heading.flip-title}, -especially the part about the [license change](../CHANGELOG.md#license-change)! -{:.note} - -## Free version -Upgrading the free version of the theme is as easy as running - -```bash -bundle update jekyll-theme-hydejack -``` - -## PRO Version - -In v9, the structure of Hydejack PRO sites has changed. If you're looking to upgrade from v8 or earlier, -check out [Installation for existing sites](./install.md#existing-sites) instead. -{:.note} - -Buyers of the PRO version will find the files necessary for an upgrade in the `#jekyll-theme-hydejack` folder of the downloaded zip archive. -To upgrade, simply overwrite the existing theme folder in the root directory of your site with the new one, then run - -```bash -bundle update jekyll-theme-hydejack -``` - -If you've modified any of Hydejack's files in `#jekyll-theme-hydejack`, your changes will most likely be overwritten -and you have to apply them again. Make sure you've made a backup before overwriting any files. -{:.note} - -## GitHub Pages -When building on GitHub Pages, upgrading Hydejack is as simple as setting the `remote_theme` key in `_config.yml` to the desired version. - -```yml -remote_theme: hydecorp/hydejack@v9.1.6 -``` - -To use the latest version on the `v9` branch on each build, you can use `hydecorp/hydejack@v9`. - - -Continue with [Config](config.md){:.heading.flip-title} -{:.read-more} diff --git a/docs/writing.md b/docs/writing.md deleted file mode 100644 index ffc4a42414..0000000000 --- a/docs/writing.md +++ /dev/null @@ -1,369 +0,0 @@ ---- -layout: page -title: Writing -description: > - Hydejack offers a few additional features to markup your content. - Don't worry, these are merely CSS classes added with kramdown's `{:...}` syntax, - so that your content remains compatible with other Jekyll themes. -hide_description: true -sitemap: false ---- - -Hydejack offers a few additional features to markup your content. -Don't worry, these are merely CSS classes added with kramdown's `{:...}` syntax, -so that your content remains compatible with other Jekyll themes. - -1. this list will be replaced by the table of contents -{:toc} - -For an introduction to markdown in general, see [Mastering Markdown][mm] and [kramdown Syntax][ksyn]. -{:.note} - -## A word on building speeds -If building speeds are a problem, try using the `--incremental` flag, e.g. - - bundle exec jekyll serve --incremental - -From the [Jekyll docs](https://jekyllrb.com/docs/configuration/#build-command-options) (emphasis mine): - -> 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*. - -The breakage occurs when you create new files or change filenames. -Also, changing the title, category, tags, etc. of a page or post will not be reflected in pages -other then the page or post itself. -This makes it ideal for writing new posts and previewing changes, but not setting up new content. - -## Adding a table of contents -You can add a generated table of contents to any page by adding `{:toc}` below a list. - -Markdown: -~~~md -* this unordered seed list will be replaced by the toc -{:toc} -~~~ - -You can also create your table of contents as an ordered list (note the `1.` instead of `*`): - -~~~md -1. this ordered seed list will be replaced by the toc -{:toc} -~~~ - -The width of the display has to be larger than 1665px for the ToC to become sticky. -Otherwise, the ToC will appear where the seed list is placed in the document. -To show the table of contents only on large displays (> 1665px) use the following: - -~~~md -* this unordered seed list will be replaced by the toc -{:toc .large-only} -~~~ - -A sticky table of contents will reduce the amount of space freed up by the `no_break_layout: false` setting. -This is necessary to ensure large code blocks or tables don't overlap with the ToC. -{:.note} - - -## Adding notes -You can add a note by adding the `note` class to a paragraph. - -Example: - -You can add a note. -{:.note} - -Markdown: -~~~markdown -You can add a note. -{:.note} -~~~ - -Edit the `note` key in `_data/strings.yml` to change the wording of the default label. -To add a note with a specific label, add a `title` attribute: - -~~~markdown -A custom label. -{:.note title="Attention"} -~~~ - -A custom label. -{:.note title="Attention"} - -## Adding large text -You can add large text by adding the `lead` class to the paragraph. - -Example: - -You can add large text. -{:.lead} - -Markdown: -~~~markdown -You can add large text. -{:.lead} -~~~ - -## Adding large images -You can make an image span the full width by adding the `lead` class. - -Example: - -{:.lead width="800" height="100" loading="lazy"} - -Markdown: -~~~markdown -{:.lead width="800" height="100" loading="lazy"} -~~~ - -It is recommended to provide the dimension of the image via the `width` and `height` attributes, -so that browsers can calculate the layout before the images are loaded. Combining this with the `loading="lazy"` attribute -allows modern browsers to load the images just-in-time as the users scrolls. - -Previous versions of Hydejack shipped with a custom JavaScript-based lazy loading solution, -but it has been removed in v9 in favor of this more standards-based approach. -{:.note} - -## Adding image captions -You can add captions to large images by adding the `figcaption` class to the paragraph after the image: - -{:.lead width="800" height="100" loading="lazy"} - -An optional caption for an image. -{:.figcaption} - -Markdown: -~~~md -{:.lead width="800" height="100" loading="lazy"} - -A caption for an image. -{:.figcaption} -~~~ - - -## Adding large quotes -You can make a quote "pop out" by adding the `lead` class. - -Example: - -> You can make a quote "pop out". -{:.lead} - -Markdown: -~~~ -> You can make a quote "pop out". -{:.lead} -~~~ - -## Adding faded text -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. - -Example: - -I'm faded, faded, faded. -{:.faded} - -Markdown: -~~~md -I'm faded, faded, faded. -{:.faded} -~~~ - -## Adding tables -Adding tables is straightforward and works just as described in the [kramdown docs][ksyntab], e.g. - -| Default aligned |Left aligned| Center aligned | Right aligned | -|-----------------|:-----------|:---------------:|---------------:| -| First body part |Second cell | Third cell | fourth cell | - -Markdown: -~~~md -| Default aligned |Left aligned| Center aligned | Right aligned | -|-----------------|:-----------|:---------------:|---------------:| -| First body part |Second cell | Third cell | fourth cell | -~~~ - -However, it gets tricker when adding large tables. -In this case, Hydejack will break the layout and grant the table the entire available screen width to the right: - -| 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 | -|-----------------|:-----------|:---------------:|---------------:|-----------------|:-----------|:---------------:|---------------:|-----------------|:-----------|:---------------:|---------------:|-----------------|:-----------|:---------------:|---------------:| -| 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 | -| Second line |foo | **strong** | baz | Second line |foo | **strong** | baz | Second line |foo | **strong** | baz | Second line |foo | **strong** | baz | -| Third line |quux | baz | bar | Third line |quux | baz | bar | Third line |quux | baz | bar | Third line |quux | baz | bar | -| Second body | | | | Second body | | | | Second body | | | | Second body | | | | -| 2 line | | | | 2 line | | | | 2 line | | | | 2 line | | | | -|=================|============|=================|================|=================|============|=================|================|=================|============|=================|================|=================|============|=================|================| -| Footer row | | | | Footer row | | | | Footer row | | | | Footer row | | | | -{:.smaller} - -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. -{:.note} - -### Scroll table -If the extra space still isn't enough, the table will receive a scrollbar. -It is browser default behavior to break the lines inside table cells to fit the content on the screen. -By adding the `scroll-table` class on a table, the behavior is changed to never break lines inside cells, e.g: - -| 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 | -|-----------------|:-----------|:---------------:|---------------:|-----------------|:-----------|:---------------:|---------------:|-----------------|:-----------|:---------------:|---------------:|-----------------|:-----------|:---------------:|---------------:| -| 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 | -| Second line |foo | **strong** | baz | Second line |foo | **strong** | baz | Second line |foo | **strong** | baz | Second line |foo | **strong** | baz | -| Third line |quux | baz | bar | Third line |quux | baz | bar | Third line |quux | baz | bar | Third line |quux | baz | bar | -| Second body | | | | Second body | | | | Second body | | | | Second body | | | | -| 2 line | | | | 2 line | | | | 2 line | | | | 2 line | | | | -|=================|============|=================|================|=================|============|=================|================|=================|============|=================|================|=================|============|=================|================| -| Footer row | | | | Footer row | | | | Footer row | | | | Footer row | | | | -{:.smaller.scroll-table} - -You can add the `scroll-table` class to a markdown table by putting `{:.scroll-table}` in line directly below the table. -To add the class to a HTML table, add the it to the `class` attribute of the `table` tag, e.g. `The next version of Hydejack (v6.3.0) will allow embedding 3rd party scripts, like the one that comes with this tweet for example.
— Florian Klampfer (@qwtel) June 3, 2017