Jekyll2021-02-03T13:58:56+00:00https://pasinit.github.io/feed.xmlTommaso PasiniTommaso Pasinipasini@di.uniroma1.itService Release 8.52019-07-31T00:00:00+00:002019-07-31T00:00:00+00:00https://pasinit.github.io/hydejack/8.5.0<p>Service release 8.5 includes a number of obvious improvements made possible by changes in the way the web works.</p>
<h2 id="better-dark-mode">Better Dark Mode</h2>
<p>This service release includes a major improvement to dark mode, which is now matching the operating system’s default. This is already possible in Safari, and just this week a new version of Chrome shipped with this feature as well.</p>
<h2 id="better-cover-pages">Better Cover Pages</h2>
<p>Scrolling on a cover page will now close the drawer. This makes the cover page much more useable since it will no longer confuse to new visitors. This is especially true for desktops, where swiping horizontally isn’t a typical interaction pattern.
A future version of Hydejack could link the extension of the drawer the the scroll position, similar to how many marketing sites work these days.</p>
<h2 id="better-font-loading">Better Font Loading</h2>
<p>The awkward JS-based font loading mechanism is gone and now replaced by <code class="language-plaintext highlighter-rouge">font-display: swap</code>. Support for this in Google Fonts landed earlier this year and is now used by Hydejack. As a side effect, fonts are now properly displayed in IE11 again, greatly improving backwards compatibility of the theme.</p>
<p>There are many more smaller changes and bugfixes. As always, yo can read the full patch notes in the <a href="../../CHANGELOG.md" class="heading flip-title">CHANGELOG</a>.</p>
<h2 id="whats-next">What’s Next?</h2>
<p>8.6 will include a rewrite of the drawer, dynamic page loading, and image lazy-loading components. These are new written with TypeScript and <a href="https://lit-element.polymer-project.org">LitElement</a> for better code quality, browser integration, and future-proofness. The rewrites also include many bug fixes and performance improvements.</p>
<p>While I would also like to do a v9 (and accompanying price hike), most of the work I’ve done on it is now on the 8.5 and 8.6 tracks.</p>Tommaso Pasinipasini@di.uniroma1.itService release 8.5 includes a number of obvious improvements made possible by changes in the way the web works.Improving Hydejack’s Build Speed2019-02-18T00:00:00+00:002019-02-18T00:00:00+00:00https://pasinit.github.io/hydejack/improving-site-build-speed<p>Hydejack was designed with personal sites in mind, i.e. sites with around 100 pages. Because of this, build speed hasn’t been a major concern during its development. When attempting to use Hydejack with thousands of pages this becomes very apparent, as build times go from seconds, to minutes, to hours.</p>
<p>Before we get started, if you are primarily concerned with build times during writing/previewing new articles, try using the <code class="language-plaintext highlighter-rouge">--incremental</code> flag, e.g.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle exec jekyll serve --incremental
</code></pre></div></div>
<p>For more, see the <a href="https://jekyllrb.com/docs/configuration/#build-command-options">Jekyll docs</a> .</p>
<p>With that out of the way, here are three ways to improve Hydejack’s production build speed:</p>
<h2 id="disable-inline-css">Disable Inline CSS</h2>
<p>Inlining critial CSS into each page increases page load speed in the browser, but it also introduces a <em>significant</em> build time increase. This is due to <code class="language-plaintext highlighter-rouge">scssify</code> being called for every single page with a large chunk of Hydejack’s SCSS as input.</p>
<p>To disable this optimization, set <code class="language-plaintext highlighter-rouge">no_inline_css</code> to <code class="language-plaintext highlighter-rouge">true</code> in the config file.</p>
<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">hydejack</span><span class="pi">:</span>
<span class="na">no_inline_css</span><span class="pi">:</span> <span class="no">true</span>
</code></pre></div></div>
<h2 id="disable-per-page-styles">Disable Per-Page Styles</h2>
<p>Hydejack allows you to change the accent color on a per-page basis. While this is a neat feature, it’s certainly not necessary and many sites don’t use it. Similar to inline CSS, it involves a call to <code class="language-plaintext highlighter-rouge">scssify</code> per page, which increases build time (though to a lesser extent).</p>
<p>To disable this feature, set <code class="language-plaintext highlighter-rouge">no_page_style</code> to <code class="language-plaintext highlighter-rouge">true</code> in the config file.</p>
<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">hydejack</span><span class="pi">:</span>
<span class="na">no_page_style</span><span class="pi">:</span> <span class="no">true</span>
</code></pre></div></div>
<h2 id="use-simpler-related-posts">Use Simpler Related Posts</h2>
<p>Hydejack does some clever things to show more related “Related Posts” on the bottom of blog posts. However, clever things (implemented within the liquid templating engine) take time, and this becomes apparent when trying to build a site with 10,000 posts.</p>
<p>To speed up buidling further, set the (admittedly poorly named) <code class="language-plaintext highlighter-rouge">use_lsi</code> option to <code class="language-plaintext highlighter-rouge">true</code>:</p>
<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">hydejack</span><span class="pi">:</span>
<span class="na">use_lsi</span><span class="pi">:</span> <span class="no">true</span>
</code></pre></div></div>
<h2 id="define-sidebar-entries-in-the-config-file">Define Sidebar Entries in the Config File</h2>
<p>In previous versions of Hydejack adding entries to the sidebar was done by setting <code class="language-plaintext highlighter-rouge">menu</code> to <code class="language-plaintext highlighter-rouge">true</code> in the front matter of a page. This meant that finding the sidebar entries required checking every page for the <code class="language-plaintext highlighter-rouge">menu</code> flag, once per page. This was slow and the time increased quadratically with the number of pages.
Staring with version 8.3, you can define sidebar entries in the config file under the <code class="language-plaintext highlighter-rouge">menu</code> key like so:</p>
<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">menu</span><span class="pi">:</span>
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Blog</span>
<span class="na">url</span><span class="pi">:</span> <span class="s">/blog/</span>
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Projects</span>
<span class="na">url</span><span class="pi">:</span> <span class="s">/projects/</span>
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Resume</span>
<span class="na">url</span><span class="pi">:</span> <span class="s">/resume/</span>
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">About</span>
<span class="na">url</span><span class="pi">:</span> <span class="s">/about/</span>
</code></pre></div></div>
<p class="message">Note that the old way of doing things still works if you upgrade to 8.3. Only when you set the <code class="language-plaintext highlighter-rouge">menu</code> key will Hydejack switch to the new behavior.</p>
<h2 id="conclusion">Conclusion</h2>
<p>Hydejack’s default settings are fine for small personal blogs of around 100 pages. However, when building large sites with 1,000 pages or more, build time becomes an issue. The following settings will help, but can’t overcome the inherent limitations of Jekyll.</p>
<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># file: _config.yml</span>
<span class="na">hydejack</span><span class="pi">:</span>
<span class="na">no_inline_css</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">no_page_style</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">use_lsi</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">menu</span><span class="pi">:</span>
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Blog</span>
<span class="na">url</span><span class="pi">:</span> <span class="s">/blog/</span>
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Projects</span>
<span class="na">url</span><span class="pi">:</span> <span class="s">/projects/</span>
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Resume</span>
<span class="na">url</span><span class="pi">:</span> <span class="s">/resume/</span>
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">About</span>
<span class="na">url</span><span class="pi">:</span> <span class="s">/about/</span>
</code></pre></div></div>Tommaso Pasinipasini@di.uniroma1.itHydejack was designed with personal sites in mind, i.e. sites with around 100 pages. Because of this, build speed hasn’t been a major concern during its development. When attempting to use Hydejack with thousands of pages this becomes very apparent, as build times go from seconds, to minutes, to hours.Introducing Dark Mode2018-09-01T00:00:00+00:002018-09-01T00:00:00+00:00https://pasinit.github.io/hydejack/introducing-dark-mode<p>Like many people, I’m a sucker for is dark UI themes, whether it’s Twitter, macOS, or code editors. I even <a href="https://atom.io/packages/theme-flux-solar">built an addon for Atom</a> that automatically switches between light and dark based on sunset and sunrise.</p>
<p>When I was playing around with Unity, I even considered a subscription just so I could use the dark theme, which is exclusive to subscribers. Following this line of thought, I’ve added a Dark Mode to the PRO version of Hydejack.</p>
<p class="figure"><img src="/assets/img/blog/dark-mode.jpg" alt="Dark Mode" data-width="1440" data-height="836" />
<em>This is what it looks like!</em></p>
<p>A unique challenge with regards to Hydejack was its color customization feature. As it turns out, a generic gray does not look good when combined with many accent colors, while a slightly tinted gray only looks good with a small range of accent colors.</p>
<p>To solve the problem, Hydejack’s Dark Mode adjusts the background based on the <code class="language-plaintext highlighter-rouge">theme_color</code>. This property can be set for the entire site, or individual pages just like <code class="language-plaintext highlighter-rouge">accent_color</code>. It also adjusts the UI of many browsers that support the Web App Manifest API, making the whole experience even more seamless.</p>
<p class="figure"><img src="/assets/img/blog/dark-mode-ii.jpg" alt="Adaptive Dark Mode Example" data-width="1440" data-height="836" />
Dark Mode adjusts to a different accent colors.</p>
<p>While it’s not feasible to enable Dark Mode based on a visitor’s exact sunrise and sunset times<sup id="fnref:1" role="doc-noteref"><a href="#fn:1" class="footnote">1</a></sup>, site authors can opt-in to enable Dark Mode based on a visitor’s local time.</p>
<p>Site authors can also enable Dark Mode by default and/or hide the light switch:</p>
<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">hydejack</span><span class="pi">:</span>
<span class="na">dark_mode</span><span class="pi">:</span>
<span class="c1"># Set to `true` to always use the dark theme.</span>
<span class="na">always</span><span class="pi">:</span> <span class="no">false</span>
<span class="c1"># Set to `true` to use the dark theme based on visitors' local time.</span>
<span class="na">dynamic</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">sunrise</span><span class="pi">:</span> <span class="m">6</span>
<span class="na">sunset</span><span class="pi">:</span> <span class="m">18</span>
<span class="c1"># Set to `true` to allow visitors to switch between light and dark mode.</span>
<span class="na">icon</span><span class="pi">:</span> <span class="no">true</span>
</code></pre></div></div>
<p>Dark Mode is now available for buyers of the <a href="https://app.simplegoods.co/i/NATYVLYT">PRO version</a>.</p>
<div class="footnotes" role="doc-endnotes">
<ol>
<li id="fn:1" role="doc-endnote">
<p>This would require visitors’ permission to read their geolocation, which is not reasonable or practical for this use case. <a href="#fnref:1" class="reversefootnote" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>Tommaso Pasinipasini@di.uniroma1.itLike many people, I’m a sucker for is dark UI themes, whether it’s Twitter, macOS, or code editors. I even built an addon for Atom that automatically switches between light and dark based on sunset and sunrise.Introducing Hydejack 82018-06-30T00:00:00+00:002018-06-30T00:00:00+00:00https://pasinit.github.io/hydejack/introducing-hydejack-8<p>After a long wait, Hydejack 8 finally sees the day of its release. It makes Hydejack look more elegant (no more super bold headings) and introduces features that make your site more impressive to first time visitors, while loading faster for repeat visitors.</p>
<h3 id="cover-pages">Cover Pages</h3>
<p>The new design doubles down on Hydejack as your personal site. The new Cover Pages let visitors know what you’re about at a glance, showing your logo or profile picture, tagline or description, and selection of social media icons.</p>
<p class="figure"><img src="/assets/img/blog/cover-page.jpg" alt="Cover page slide animation" data-width="1440" data-height="836" />
Sliding over a cover page will reveal the content below.</p>
<h3 id="lazy-loading-images">Lazy-Loading Images</h3>
<p>Using lots of images can severely impact the performance of a site. It can also cause layout quirks when images pop into existence.
In Hydejack 8 you have the option to provide <code class="language-plaintext highlighter-rouge">width</code> and <code class="language-plaintext highlighter-rouge">height</code> information for your images and let Hydejack lazy-load them as readers scroll the page.</p>
<p class="figure"><img src="/assets/img/blog/lazy-images.jpg" alt="Lazy loading demo" data-width="1440" data-height="836" />
Images are loaded as they are scrolled into view.</p>
<h3 id="better-blog-layout">Better Blog Layout</h3>
<p>The <code class="language-plaintext highlighter-rouge">blog</code> layout finally catches up to modern design standards and renders a posts’s <code class="language-plaintext highlighter-rouge">image</code> as part of the preview, giving it a tastier look that makes visitors more likely to engage.</p>
<p class="figure"><img src="/assets/img/blog/blog-layout.jpg" alt="Scrolling through the blog layout" data-width="1440" data-height="836" />
Hydejack’s improved blog layout renders each post’s image.</p>
<h3 id="dark-mode--coming-soon">Dark Mode 🌗 (coming soon)</h3>
<p>In 8.1, buyers of the PRO version will have access to Dark Mode. At your choosing, it will be enabled by default, enabled based on visitors’ local time, or flipped on by a switch.</p>
<p class="figure"><img src="/assets/img/blog/dark-mode.jpg" alt="Dark Mode Teaser" data-width="1440" data-height="836" />
Hydejack switches between light and dark mode fluidly.</p>
<h3 id="offline-support-️">Offline Support ⚡️</h3>
<p>Version 8 introduces experimental offline support. This allows visitors to navigate your site while offline and continue reading articles when connectivity is lost. It also improves loading times for repeat visitors dramatically.</p>Tommaso Pasinipasini@di.uniroma1.itAfter a long wait, Hydejack 8 finally sees the day of its release. It makes Hydejack look more elegant (no more super bold headings) and introduces features that make your site more impressive to first time visitors, while loading faster for repeat visitors.Example Content III2018-06-01T00:00:00+00:002018-06-01T00:00:00+00:00https://pasinit.github.io/hydejack/example-content-iii<p>Hydejack offers a few additional features to markup your markdown.
Don’t worry, these are merely CSS classes added with kramdown’s <code class="language-plaintext highlighter-rouge">{:...}</code> syntax,
so that your content remains compatible with other Jekyll themes.</p>
<h2 id="large-tables">Large Tables</h2>
<table class="scroll-table">
<thead>
<tr>
<th>Default aligned</th>
<th style="text-align: left">Left aligned</th>
<th style="text-align: center">Center aligned</th>
<th style="text-align: right">Right aligned</th>
<th>Default aligned</th>
<th style="text-align: left">Left aligned</th>
<th style="text-align: center">Center aligned</th>
<th style="text-align: right">Right aligned</th>
<th>Default aligned</th>
<th style="text-align: left">Left aligned</th>
<th style="text-align: center">Center aligned</th>
<th style="text-align: right">Right aligned</th>
<th>Default aligned</th>
<th style="text-align: left">Left aligned</th>
<th style="text-align: center">Center aligned</th>
<th style="text-align: right">Right aligned</th>
</tr>
</thead>
<tbody>
<tr>
<td>First body part</td>
<td style="text-align: left">Second cell</td>
<td style="text-align: center">Third cell</td>
<td style="text-align: right">fourth cell</td>
<td>First body part</td>
<td style="text-align: left">Second cell</td>
<td style="text-align: center">Third cell</td>
<td style="text-align: right">fourth cell</td>
<td>First body part</td>
<td style="text-align: left">Second cell</td>
<td style="text-align: center">Third cell</td>
<td style="text-align: right">fourth cell</td>
<td>First body part</td>
<td style="text-align: left">Second cell</td>
<td style="text-align: center">Third cell</td>
<td style="text-align: right">fourth cell</td>
</tr>
<tr>
<td>Second line</td>
<td style="text-align: left">foo</td>
<td style="text-align: center"><strong>strong</strong></td>
<td style="text-align: right">baz</td>
<td>Second line</td>
<td style="text-align: left">foo</td>
<td style="text-align: center"><strong>strong</strong></td>
<td style="text-align: right">baz</td>
<td>Second line</td>
<td style="text-align: left">foo</td>
<td style="text-align: center"><strong>strong</strong></td>
<td style="text-align: right">baz</td>
<td>Second line</td>
<td style="text-align: left">foo</td>
<td style="text-align: center"><strong>strong</strong></td>
<td style="text-align: right">baz</td>
</tr>
<tr>
<td>Third line</td>
<td style="text-align: left">quux</td>
<td style="text-align: center">baz</td>
<td style="text-align: right">bar</td>
<td>Third line</td>
<td style="text-align: left">quux</td>
<td style="text-align: center">baz</td>
<td style="text-align: right">bar</td>
<td>Third line</td>
<td style="text-align: left">quux</td>
<td style="text-align: center">baz</td>
<td style="text-align: right">bar</td>
<td>Third line</td>
<td style="text-align: left">quux</td>
<td style="text-align: center">baz</td>
<td style="text-align: right">bar</td>
</tr>
<tr>
<td>Second body</td>
<td style="text-align: left"> </td>
<td style="text-align: center"> </td>
<td style="text-align: right"> </td>
<td>Second body</td>
<td style="text-align: left"> </td>
<td style="text-align: center"> </td>
<td style="text-align: right"> </td>
<td>Second body</td>
<td style="text-align: left"> </td>
<td style="text-align: center"> </td>
<td style="text-align: right"> </td>
<td>Second body</td>
<td style="text-align: left"> </td>
<td style="text-align: center"> </td>
<td style="text-align: right"> </td>
</tr>
<tr>
<td>2 line</td>
<td style="text-align: left"> </td>
<td style="text-align: center"> </td>
<td style="text-align: right"> </td>
<td>2 line</td>
<td style="text-align: left"> </td>
<td style="text-align: center"> </td>
<td style="text-align: right"> </td>
<td>2 line</td>
<td style="text-align: left"> </td>
<td style="text-align: center"> </td>
<td style="text-align: right"> </td>
<td>2 line</td>
<td style="text-align: left"> </td>
<td style="text-align: center"> </td>
<td style="text-align: right"> </td>
</tr>
<tr>
<td>Footer row</td>
<td style="text-align: left"> </td>
<td style="text-align: center"> </td>
<td style="text-align: right"> </td>
<td>Footer row</td>
<td style="text-align: left"> </td>
<td style="text-align: center"> </td>
<td style="text-align: right"> </td>
<td>Footer row</td>
<td style="text-align: left"> </td>
<td style="text-align: center"> </td>
<td style="text-align: right"> </td>
<td>Footer row</td>
<td style="text-align: left"> </td>
<td style="text-align: center"> </td>
<td style="text-align: right"> </td>
</tr>
</tbody>
</table>
<h2 id="code-blocks">Code blocks</h2>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Example can be run directly in your JavaScript console</span>
<span class="c1">// Create a function that takes two arguments and returns the sum of those</span>
<span class="c1">// arguments</span>
<span class="kd">var</span> <span class="nx">adder</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Function</span><span class="p">(</span><span class="dl">"</span><span class="s2">a</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">b</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">return a + b</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">// Call the function</span>
<span class="nx">adder</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">6</span><span class="p">);</span>
<span class="c1">// > 8</span>
</code></pre></div></div>
<h2 id="math">Math</h2>
<p>Lorem ipsum \(f(x) = x^2\).</p>
\[\begin{aligned}
\phi(x,y) &= \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right) \\[2em]
&= \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) \\[2em]
&= (x_1, \ldots, x_n)
\left(\begin{array}{ccc}
\phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \\
\vdots & \ddots & \vdots \\
\phi(e_n, e_1) & \cdots & \phi(e_n, e_n)
\end{array}\right)
\left(\begin{array}{c}
y_1 \\
\vdots \\
y_n
\end{array}\right)
\end{aligned}\]
<h2 id="message-boxes">Message boxes</h2>
<p class="message"><strong>NOTE</strong>: You can add a message box.</p>
<h2 id="large-text">Large text</h2>
<p class="lead">You can add large text.</p>
<h2 id="large-images">Large images</h2>
<p><img src="https://placehold.it/800x100" alt="Full-width image" class="lead" data-width="800" data-height="100" /></p>
<h2 id="captions-to-images">Captions to images</h2>
<p class="figure"><img src="https://placehold.it/800x100" alt="Full-width image" class="lead" data-width="800" data-height="100" />
A caption to an image.</p>
<h2 id="large-quotes">Large quotes</h2>
<blockquote class="lead">
<p>You can make a quote “pop out”.</p>
</blockquote>
<h2 id="faded-text">Faded text</h2>
<p class="faded">I’m faded, faded, faded.</p>Tommaso Pasinipasini@di.uniroma1.itHydejack offers a few additional features to markup your markdown. Don’t worry, these are merely CSS classes added with kramdown’s {:...} syntax, so that your content remains compatible with other Jekyll themes.Example Content II2017-11-23T00:00:00+00:002017-11-23T00:00:00+00:00https://pasinit.github.io/hydejack/example-content-ii<p>There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.</p>
<p>There should be whitespace between paragraphs.</p>
<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>.</p>
<p><a href="/hydejack/2018-06-01-example-content-iii/">Link to another page</a>.</p>
<h2 id="header-2">Header 2</h2>
<p>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.</p>
<h3 id="header-3">Header 3</h3>
<blockquote>
<p>This is a blockquote following a header.</p>
<p>When something is important enough, you do it even if the odds are not in your favor.</p>
</blockquote>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Javascript code with syntax highlighting.</span>
<span class="kd">var</span> <span class="nx">fun</span> <span class="o">=</span> <span class="kd">function</span> <span class="nx">lang</span><span class="p">(</span><span class="nx">l</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">dateformat</span><span class="p">.</span><span class="nx">i18n</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">./lang/</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">l</span><span class="p">)</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># Ruby code with syntax highlighting</span>
<span class="no">GitHubPages</span><span class="o">::</span><span class="no">Dependencies</span><span class="p">.</span><span class="nf">gems</span><span class="p">.</span><span class="nf">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">gem</span><span class="p">,</span> <span class="n">version</span><span class="o">|</span>
<span class="n">s</span><span class="p">.</span><span class="nf">add_dependency</span><span class="p">(</span><span class="n">gem</span><span class="p">,</span> <span class="s2">"= </span><span class="si">#{</span><span class="n">version</span><span class="si">}</span><span class="s2">"</span><span class="p">)</span>
<span class="k">end</span>
</code></pre></div></div>
<h4 id="header-4">Header 4</h4>
<ul>
<li>This is an unordered list following a header.</li>
<li>This is an unordered list following a header.</li>
<li>This is an unordered list following a header.</li>
</ul>
<h5 id="header-5">Header 5</h5>
<ol>
<li>This is an ordered list following a header.</li>
<li>This is an ordered list following a header.</li>
<li>This is an ordered list following a header.</li>
</ol>
<h6 id="header-6">Header 6</h6>
<table>
<thead>
<tr>
<th style="text-align: left">head1</th>
<th style="text-align: left">head two</th>
<th style="text-align: left">three</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">ok</td>
<td style="text-align: left">good swedish fish</td>
<td style="text-align: left">nice</td>
</tr>
<tr>
<td style="text-align: left">out of stock</td>
<td style="text-align: left">good and plenty</td>
<td style="text-align: left">nice</td>
</tr>
<tr>
<td style="text-align: left">ok</td>
<td style="text-align: left">good <code class="language-plaintext highlighter-rouge">oreos</code></td>
<td style="text-align: left">hmm</td>
</tr>
<tr>
<td style="text-align: left">ok</td>
<td style="text-align: left">good <code class="language-plaintext highlighter-rouge">zoute</code> drop</td>
<td style="text-align: left">yumm</td>
</tr>
</tbody>
</table>
<h3 id="theres-a-horizontal-rule-below-this">There’s a horizontal rule below this.</h3>
<hr />
<h3 id="here-is-an-unordered-list">Here is an unordered list:</h3>
<ul>
<li>Item foo</li>
<li>Item bar</li>
<li>Item baz</li>
<li>Item zip</li>
</ul>
<h3 id="and-an-ordered-list">And an ordered list:</h3>
<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
</ol>
<h3 id="and-a-nested-list">And a nested list:</h3>
<ul>
<li>level 1 item
<ul>
<li>level 2 item</li>
<li>level 2 item
<ul>
<li>level 3 item</li>
<li>level 3 item</li>
</ul>
</li>
</ul>
</li>
<li>level 1 item
<ul>
<li>level 2 item</li>
<li>level 2 item</li>
<li>level 2 item</li>
</ul>
</li>
<li>level 1 item
<ul>
<li>level 2 item</li>
<li>level 2 item</li>
</ul>
</li>
<li>level 1 item</li>
</ul>
<h3 id="small-image">Small image</h3>
<p><img src="https://assets-cdn.github.com/images/icons/emoji/octocat.png" alt="" /></p>
<h3 id="large-image">Large image</h3>
<p><img src="https://guides.github.com/activities/hello-world/branching.png" alt="" /></p>
<h3 id="definition-lists">Definition lists</h3>
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>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?
</code></pre></div></div>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>The final element.
</code></pre></div></div>Tommaso Pasinipasini@di.uniroma1.itThere should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.Hydejack’s New Design2017-11-17T00:00:00+00:002017-11-17T00:00:00+00:00https://pasinit.github.io/hydejack/hydejacks-new-design<p>While v7 brings an <a href="/CHANGELOG/#v700">insane amount of new stuff</a>, the most notable change is the new background image.
It is no longer <em>anti-selling</em> the theme.
The old image was a blurred version of Napoleon Bonaparte, which was just… weird. I could tell the story of how this came to be,
but I’d rather show you the new and improved background image.</p>
<h2 id="new-background-image">New background image</h2>
<p>Yes, it’s an aerial shot of a beach (<a href="https://duckduckgo.com/?q=ios+11+background&t=ffab&iax=images&ia=images">so hot right now</a>).</p>
<p class="figure"><img src="/assets/img/blog/caleb-george.jpg" alt="Hydejack's background image" data-width="1920" data-height="1200" />
Hydejack’s new background image.</p>
<p>Q: What has this picture to do with Hydejack?
Nothing really, I just like how it looks.
However: Boat → Pirates → Hijacking → Hydejack (illuminati confirmed)</p>
<p>Even though it is a free image from <a href="https://unsplash.com/">Unsplash</a> (…), it’s unique in the sense that
I’ve modified it so it looks better inside the sidebar.
Specifically, I’ve straightened out the beach and rotated the boat so that it sits at a nice 90 degree angle.</p>
<p>For comparison, here is the non-euclidean mess the <a href="https://unsplash.com/photos/AtvuPUenaeI">original photo</a> was. Pretty OCD, I know.</p>
<p class="figure"><img src="/assets/img/blog/caleb-george-old.jpg" alt="Original photo" data-width="1920" data-height="1200" />
The original photo before it was “straightened out” by applying Photoshop magic.</p>
<h2 id="new-color-palette">New color palette</h2>
<p>I’ve extracted the major colors from the background image, which now form Hydejack’s color palette:</p>
<p><img src="/assets/img/blog/COLOURlovers.com-Hydejack.png" alt="Hydejacks's color palette" style="border: 1px solid var(--border-color)" data-width="1024" data-height="200" /></p>
<h2 id="new-logo">New logo</h2>
<p>Hydejack also has a new logo, which is based on the new color palette.
It also features the best font on Google Fonts, and probably the world: <a href="https://fonts.google.com/specimen/Roboto+Slab">Roboto Slab</a>
(which is to say, I like it a lot).</p>
<p><img src="/assets/icons/icon.png" alt="Hydejack's logo" data-width="192" data-height="192" /></p>Tommaso Pasinipasini@di.uniroma1.itWhile v7 brings an insane amount of new stuff, the most notable change is the new background image. It is no longer anti-selling the theme. The old image was a blurred version of Napoleon Bonaparte, which was just… weird. I could tell the story of how this came to be, but I’d rather show you the new and improved background image.Better Gem Support (v6.5)2017-07-27T00:00:00+00:002017-07-27T00:00:00+00:00https://pasinit.github.io/hydejack/better-gem-support<p>This maintenance release includes various quality-of-life improvements,
especially when using the gem-based version of the theme.
These changes come in handy when using Hydejack for a quick (project-) page:
The <code class="language-plaintext highlighter-rouge">home</code> layout, which is used when using <code class="language-plaintext highlighter-rouge">jekyll new</code>,
is now a proper layout that displays a few posts/pages below the regular content,
and it is again possible to define an author in <code class="language-plaintext highlighter-rouge">_config.yml</code>
without setting up a <code class="language-plaintext highlighter-rouge">_data</code> directory (for more, see blow).</p>
<p>Version 6.5 also includes smaller design adjustments.
Most notably, the default font is now Noto Sans.
With the benefit of hindsight,
using a serif font in combination with the slab headings feels more like a bug in the design than anything else.
However, should you be happy with Noto Serif (the previous default font), there is no need to worry
— this only effects the default setting.</p>
<p>For the full patch notes, read on.</p>
<h2 id="patch-notes">Patch Notes</h2>
<h3 id="added">Added</h3>
<ul>
<li>
<p>Hydejack now uses additional Jekyll plugins by default, which make working with GitHub more convenient.
They have been added to the <code class="language-plaintext highlighter-rouge">Gemfile</code> and <code class="language-plaintext highlighter-rouge">_config.yml</code>.
Note that existing users need to update their <code class="language-plaintext highlighter-rouge">_config.yml</code>:</p>
<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">gems</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">jekyll-default-layout</span> <span class="c1"># new</span>
<span class="pi">-</span> <span class="s">jekyll-feed</span>
<span class="pi">-</span> <span class="s">jekyll-optional-front-matter</span> <span class="c1"># new</span>
<span class="pi">-</span> <span class="s">jekyll-paginate</span>
<span class="pi">-</span> <span class="s">jekyll-redirect-from</span>
<span class="pi">-</span> <span class="s">jekyll-relative-links</span> <span class="c1"># new</span>
<span class="pi">-</span> <span class="s">jekyll-sitemap</span>
</code></pre></div> </div>
</li>
<li>Added <code class="language-plaintext highlighter-rouge">licenses</code> folder that includes the full license texts of licenses mentioned in <code class="language-plaintext highlighter-rouge">NOTICE.md</code>.</li>
<li>
<p>You can, once again, define the author in <code class="language-plaintext highlighter-rouge">_config.yml</code>.
Using <code class="language-plaintext highlighter-rouge">_data/authors.yml</code> is still recommended (and takes precedence),
but this option is more convenient when setting up a quick (project-) page using the gem-based theme.
Also, a mini-version of <code class="language-plaintext highlighter-rouge">_data/social.yml</code> can be provided as part <code class="language-plaintext highlighter-rouge">_config.yml</code>, e.g.:</p>
<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">author</span><span class="pi">:</span>
<span class="na">social</span><span class="pi">:</span>
<span class="na">github</span><span class="pi">:</span> <span class="s">https://github.com/hydecorp/hydejack</span>
<span class="na">npm</span><span class="pi">:</span> <span class="s">https://www.npmjs.com/package/hydejack</span>
<span class="na">download</span><span class="pi">:</span> <span class="s">https://github.com/hydecorp/hydejack/archive/v8.5.2.zip</span>
<span class="na">data_social</span><span class="pi">:</span>
<span class="na">github</span><span class="pi">:</span>
<span class="na">name</span><span class="pi">:</span> <span class="s">GitHub</span>
<span class="na">icon</span><span class="pi">:</span> <span class="s">icon-github</span>
<span class="na">npm</span><span class="pi">:</span>
<span class="na">name</span><span class="pi">:</span> <span class="s">npm</span>
<span class="na">icon</span><span class="pi">:</span> <span class="s">icon-npm</span>
<span class="na">download</span><span class="pi">:</span>
<span class="na">name</span><span class="pi">:</span> <span class="s">Download</span>
<span class="na">icon</span><span class="pi">:</span> <span class="s">icon-box-add</span>
</code></pre></div> </div>
</li>
<li>A download icon has been added to the default icon font and <code class="language-plaintext highlighter-rouge">_data/social.yml</code> has been updated.</li>
<li>Added <code class="language-plaintext highlighter-rouge">_includes/my-scripts.html</code>, <code class="language-plaintext highlighter-rouge">_sass/my-inline.scss</code> and <code class="language-plaintext highlighter-rouge">_sass/my-style.scss</code> to make it easier to add custom scripts and styles without modifying the source. This is especially handy when using the gem-based version of the theme.</li>
</ul>
<h3 id="changed">Changed</h3>
<ul>
<li>Loading web fonts now starts earlier and content download no longer blocks
swapping out the fallback font for the new font.
Previously, a page containing lots of images could have delayed displaying the web fonts significantly.</li>
<li>The <code class="language-plaintext highlighter-rouge">home</code> layout no longer contains a message suggesting that you don’t use it.</li>
<li>The <code class="language-plaintext highlighter-rouge">home</code> layout now shows up to 5 blog posts and up to 5 pages blow the regular content.</li>
<li>The version history has been moved from <code class="language-plaintext highlighter-rouge">docs/<version>/versions.md</code> to <code class="language-plaintext highlighter-rouge">CHANGELOG.md</code>.</li>
<li>The license notices have been moved from <code class="language-plaintext highlighter-rouge">docs/<version>/licenses.md</code> to <code class="language-plaintext highlighter-rouge">NOTICE.md</code>.</li>
<li>Updated gem and npm dependencies</li>
</ul>
<h3 id="design">Design</h3>
<ul>
<li>The default font has been changed from “Noto Serif” to “Noto Sans”.
If you have a <code class="language-plaintext highlighter-rouge">font</code> entry in <code class="language-plaintext highlighter-rouge">_config.yml</code>, this will have no effect.</li>
<li><code class="language-plaintext highlighter-rouge">nap.jpg</code> is no longer used as default background image in the gem-based theme.</li>
<li>The sidebar content width is now limited to the width of the sidebar (this only effects large screens).</li>
<li>Project cards and pagination buttons now have slightly rounded borders for a less “rigid” look.</li>
</ul>
<h4 id="how-to-restore-the-old-styles">How to restore the old styles</h4>
<p>If you would like to use the old font, add the following to <code class="language-plaintext highlighter-rouge">_config.yml</code>:</p>
<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">font_heading</span><span class="pi">:</span> <span class="s2">"</span><span class="s">'Roboto</span><span class="nv"> </span><span class="s">Slab',</span><span class="nv"> </span><span class="s">Helvetica,</span><span class="nv"> </span><span class="s">Arial,</span><span class="nv"> </span><span class="s">sans-serif"</span>
<span class="na">font</span><span class="pi">:</span> <span class="s2">"</span><span class="s">'Noto</span><span class="nv"> </span><span class="s">Serif',</span><span class="nv"> </span><span class="s">Georgia,</span><span class="nv"> </span><span class="s">serif"</span>
<span class="na">google_fonts</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Roboto+Slab:700|Noto+Serif:400,400i,700,700i"</span>
</code></pre></div></div>
<p>If you were relying on the default setting for the background image, add the following to <code class="language-plaintext highlighter-rouge">_config.yml</code>:</p>
<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">image</span><span class="pi">:</span> <span class="s">/hydejack/assets/img/nap.jpg</span>
</code></pre></div></div>
<p>Note that you have to replace <code class="language-plaintext highlighter-rouge">/hydejack</code> with your <code class="language-plaintext highlighter-rouge">baseurl</code>.</p>
<p>To restore the old sidebar, open (or create) <code class="language-plaintext highlighter-rouge">_sass/my-inline.scss</code> and add the following:</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@media</span> <span class="n">screen</span> <span class="p">{</span> <span class="nc">.sidebar-sticky</span> <span class="p">{</span> <span class="nl">left</span><span class="p">:</span> <span class="m">2rem</span><span class="p">;</span> <span class="nl">max-width</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span>
</code></pre></div></div>
<p>To remove the border radius, open (or create) <code class="language-plaintext highlighter-rouge">_sass/my-inline.scss</code> and add the following:</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.card</span><span class="o">,</span> <span class="nc">.pagination-item</span> <span class="p">{</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">0</span><span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
</code></pre></div></div>Tommaso Pasinipasini@di.uniroma1.itThis maintenance release includes various quality-of-life improvements, especially when using the gem-based version of the theme. These changes come in handy when using Hydejack for a quick (project-) page: The home layout, which is used when using jekyll new, is now a proper layout that displays a few posts/pages below the regular content, and it is again possible to define an author in _config.yml without setting up a _data directory (for more, see blow).Related Projects and Data Tables (v6.4)2017-06-21T00:00:00+00:002017-06-21T00:00:00+00:00https://pasinit.github.io/hydejack/related-projects-and-data-tables<p>In this release I’ve added a “Other Projects” section to the bottom of each project page,
making it easier for users to navigate through your collection and discover other projects.
Also, it’s now possible to display larger (data-) tables that were previously cut off (especially on mobile devices).</p>
<p>For more on how to add tables, see the new section in <a href="/docs/writing/">docs/writing</a>.</p>
<p>Smaller changes include a reduced usage of horizontal lines and a more “semantic” use of <code class="language-plaintext highlighter-rouge">hr</code> elements.
Specifically, the semantics of the resume layout have been improved.
This is best visualized when viewing the page with a text browser like <code class="language-plaintext highlighter-rouge">w3m</code>.
For example, before 6.4 the skills section looked like</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Skills
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Web Development | Level: Master
Keywords:
• HTML
• CSS
• Javascript
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Compression | Level: Master
Keywords:
• Mpeg
• MP4
• GIF
</code></pre></div></div>
<p>(lots of <code class="language-plaintext highlighter-rouge">hr</code>s, skill level as part of the headline 😕)</p>
<p>Now it looks like</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Skills
Web Development
Level: Master
Keywords:
□ HTML
□ CSS
□ Javascript
Compression
Level: Master
Keywords:
□ Mpeg
□ MP4
□ GIF
</code></pre></div></div>
<p>(using a <code class="language-plaintext highlighter-rouge">dl</code>, so that <code class="language-plaintext highlighter-rouge">Level -> "Master"</code>, <code class="language-plaintext highlighter-rouge">Keywords -> ul</code>, …)</p>
<p>There’s many more minor changes and fixes that you can read below.</p>
<h2 id="patch-notes">Patch Notes</h2>
<h3 id="minor">Minor</h3>
<ul>
<li>Added “Other Projects” section to the bottom of the project layout (similar to “Related Posts”)</li>
<li>Added CSS classes that make viewing larger (data-) tables possible</li>
<li>Added section on tables to <a href="/docs/writing/">docs/writing</a></li>
<li>Reduced use of <code class="language-plaintext highlighter-rouge"><hr/></code> elements, using CSS borders instead.</li>
<li>Improved semantic HTML of resume</li>
<li>Follow favicon best practices and include example icons</li>
<li>Added <code class="language-plaintext highlighter-rouge">no_google_fonts</code> option</li>
</ul>
<h3 id="design">Design</h3>
<ul>
<li>Reduced number of horizontal lines, making many layouts feel less “cluttered” (esp. <code class="language-plaintext highlighter-rouge">blog</code> layout)</li>
<li>Made link hover styles consistent across the board</li>
<li>Visually separated <code class="language-plaintext highlighter-rouge">thead</code> and <code class="language-plaintext highlighter-rouge">tbody</code> and <code class="language-plaintext highlighter-rouge">tfoot</code> within tables.</li>
<li>Changed RSS and email icons</li>
<li>Removed top margin for consecutive headings, e.g. when using <code class="language-plaintext highlighter-rouge">h3</code> immediately after <code class="language-plaintext highlighter-rouge">h2</code>.</li>
</ul>
<h3 id="fixes">Fixes</h3>
<ul>
<li>Fixed bug that caused inline math to be moved to the end of a paragraph when dynamically loading a page.</li>
<li>Fixed bug that caused layout to break in IE11.</li>
<li>Fixed bug that caused the project animation to “jump” when using long project titles.</li>
<li>No more empty attributes on <code class="language-plaintext highlighter-rouge">img</code> tags.</li>
</ul>Tommaso Pasinipasini@di.uniroma1.itIn this release I’ve added a “Other Projects” section to the bottom of each project page, making it easier for users to navigate through your collection and discover other projects. Also, it’s now possible to display larger (data-) tables that were previously cut off (especially on mobile devices).Third Party Scripts (v6.3)2017-06-06T00:00:00+00:002017-06-06T00:00:00+00:00https://pasinit.github.io/hydejack/third-party-scripts<p>This release makes including third party plugins easier.
Until now, the push state approach to loading new pages has been interfering with embedded <code class="language-plaintext highlighter-rouge">script</code> tags.
This version changes this by simulating the sequential loading of script tags on a fresh page load.</p>
<p>This approach should work in a majority of cases, but can still cause problems with scripts that can’t be added more than once per page.
If an issue can’t be resolved, there’s now the option to disable push state by setting <code class="language-plaintext highlighter-rouge">disable_push_state: true</code> in <code class="language-plaintext highlighter-rouge">config.yml</code>.</p>
<h2 id="whats-happening">What’s happening?</h2>
<p>The problem is as follows:
When the browser encounters a <code class="language-plaintext highlighter-rouge">script</code> tag while parsing a HTML page it will stop (possibly to make a request to fetch
an external script) and then execute the code before continuing parsing the page
(it’s easy to how this can make your page really slow, but that’s a different topic).</p>
<p>In any case, due of this behavior you can do things like include jQuery,
then run code that depends on jQuery in the next script tag:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><script </span><span class="na">src=</span><span class="s">".../jquery.js"</span><span class="nt">></script></span>
<span class="nt"><script></span>
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#tabs</span><span class="dl">'</span><span class="p">).</span><span class="nx">someJQueryFunction</span><span class="p">();</span> <span class="c1">// works</span>
<span class="nt"></script></span>
</code></pre></div></div>
<p>I’d consider this an anti-pattern for the reason mentioned above,
but it remains common and has the advantage of being easy to understand.</p>
<p>However, things break when Hydejack dynamically inserts new content into the page.
It works fine for standard markdown content like <code class="language-plaintext highlighter-rouge">p</code> tags,
but when inserting <code class="language-plaintext highlighter-rouge">script</code> tags the browser will execute them immediately and in parallel,
because in most cases this is what you’d want.
However, this means that <code class="language-plaintext highlighter-rouge">$('#tabs').someJQueryFunction();</code> will run while the HTTP request for jQuery is still
in progress — and we get an error that <code class="language-plaintext highlighter-rouge">$</code> isn’t defined, or similar.</p>
<p>From this description the solution should be obvious: Insert the <code class="language-plaintext highlighter-rouge">script</code> tags one-by-one,
to simulate how they would get executed if it was a fresh page request.
In fact this is how Hydejack is now handling things (and thanks to rxjs’ <code class="language-plaintext highlighter-rouge">concatMap</code> it was easy to implement),
but unfortunately this is not a magic solution that can fix all problems:</p>
<ul>
<li>Some scripts may throw when running on the same page twice</li>
<li>Some scripts rely on the document’s <code class="language-plaintext highlighter-rouge">load</code> event, which has fired long before the script was inserted</li>
<li>unkown-unkowns</li>
</ul>
<p>But what will “magically” solve all third party script problems, is disabling dynamic page loading altogether,
for which there’s now an option.
To make this a slightly less bitter pill to swallow,
there’s now a CSS-only “intro” animation that looks similar to the dynamic one.
Maybe you won’t even notice the difference.</p>
<h2 id="patch-notes">Patch Notes</h2>
<h3 id="minor">Minor</h3>
<ul>
<li>Support embedding <code class="language-plaintext highlighter-rouge">script</code> tags in markdown content</li>
<li>Add <code class="language-plaintext highlighter-rouge">disable_push_state</code> option to <code class="language-plaintext highlighter-rouge">_config.yml</code></li>
<li>Add <code class="language-plaintext highlighter-rouge">disable_drawer</code> option to <code class="language-plaintext highlighter-rouge">_config.yml</code></li>
<li>Rename syntax highlighting file to <code class="language-plaintext highlighter-rouge">syntax.scss</code></li>
<li>Added <a href="/docs/scripts/">chapter on third party scripts</a> to documentation</li>
</ul>
<h3 id="design">Design</h3>
<ul>
<li>Add subtle intro animation</li>
<li>Rename “Check out X for more” to “See X for more” on welcome* page</li>
<li>Replace “»” with “→” in “read more”-type of links</li>
</ul>
<h3 id="fixes">Fixes</h3>
<ul>
<li>Fix default color in gem-based theme</li>
</ul>Tommaso Pasinipasini@di.uniroma1.itThis release makes including third party plugins easier. Until now, the push state approach to loading new pages has been interfering with embedded script tags. This version changes this by simulating the sequential loading of script tags on a fresh page load.