How

• Widgets
  • API
  • GitHub link
  • GitHub URL
  • Image
  • Login
  • Favicon
• Scripts
  • Tables
  • Time
  • Cookies
  • Details
  • Update
• Kramdown
  • Colors and Shades
  • Inline elements
  • Code blocks
  • Forms

Widgets

API

Capture, markdownify and render the liquid api variabile of an include file.

{% include widgets/api.html include='folder/file' %}

Includes

• include: target include file in the form folder/file.
  Extension .html can be omitted.

Format

...code...

{%- capture api -%}
### Title

Description

- Options
- Code Example
- Live example
{%- endcapture -%}

File: _includes/widgets/api.html

GitHub link

Render a link to a file in this GitHub repository given the file path.

{% include widgets/github_link.html path='folder/file.ext' %}

Includes

• path: required (path) path of the file on the repository.
  Default to the repository URL.
• text: optional (string) text for the link, defaults to path.
  With no path default to the repository URL.

File: _includes/widgets/github_link.html

GitHub URL

Render the GitHub URL of a file given a path.

{% include widgets/github_url.html path='folder/file.ext' %}

Includes

• path: path of the file on the repository.
  Default to the repository URL.

File: _includes/widgets/github_url.html

Image

Description

{% include widgets/image.html %}

Includes

• url: image URL
• alt: image alternative text
• caption: image caption markdown text
• height: optional height to reserve space
• width: optional width to reserve space
• figure-class: optional class list for the <figure>
• image-class: optional class list for the <image>
• caption-class: optional class list for the <figcaption>
• link: url for image click event, default nil

File: _includes/widgets/image.html

Login

Render two links with href="#login" and href="#logout". Needs the login script.

{% include widgets/login.html %}

Render

<p>
  <a href="#login" class="unlogged prevent">Login</a>
  <a href="#logout" class="logged prevent">Logout</a>
</p>

File: _includes/widgets/login.html

Favicon

Include favicon.ico and favicon.png wherever they are in site.static_files. For different filenames use liquid options site.favicon.ico and site.favicon.png.

<link rel='icon' href='{{ favicon_ico_path | absolute_url }}'>
<link rel='apple-touch-icon' href='{{ favicon_png_path | absolute_url }}'>
<link rel='icon' type='image/png' href='{{ favicon_png_path | absolute_url }}'>

File: _includes/page/favicon.html

Scripts

Tables

Every table:not(.no-search) has a searchbox injected.

<table>
  <div class="search-container">
    <input type="search" placeholder="Search" class="search-input">
  </div>
  <!-- ... -->
</table>

Example

File: _includes/scripts/table.coffee

Time

Elements <time datetime='...'>Text</time> have injected a <span> element with human time:
For past events: x {seconds/minutes/hours/days/weeks/months/years} ago
For future events: in x {seconds/minutes/hours/days/weeks/months/years}

Elements <time class='time-classes' datetime='...'>Text</time> have updated classes: .past .future .today .tomorrow.

Reference date is passed with datetime attribute value, or as the text content.

<time class='time-classes' datetime='{{ site.time | date_to_rfc822 }}'>Event </time>

File: _includes/scripts/time.coffee

Cookies

SET

cookie.set(key, value, option) return cookie for chaining

key (string) cookie name

value (string/object/array) cookie value, [] and {} will remove the cookie

options (object)

• expires (undefined/date/number/false) expiration: session/date/max-age(sec)/never
• path (string) default to root_path

GET

cookie.get(key) return cookie value (string/array/object), or document.cookie if no key

key (string) cookie name

REMOVE

cookie.remove(key [, path]) return cookie object for chaining

key (string/array) cookie name or array of names

path (string) cookie path to remove

Many web browsers have a session restore feature that will save all tabs and restore them the next time the browser is used. Session cookies will also be restored, as if the browser was never closed.

File: _includes/scripts/cookie.coffee

Details

File: _includes/scripts/details.coffee

Update

Updates are checked every minute, only if rate_limit is more than 25.

Compare Jekyll site.time with GitHub latest built created_at (or latest commit author.date if user is not admin). If they are different and the browser tab is blurred, refresh the page with a search string like ?latest=YYYY-MM-DDTHH:MM:SSZ&sha=xxxxxxx.

If the repository is a fork and logged user is admin, compare branch SHA with upstream and sync if different.

File: _includes/scripts/update.coffee

Kramdown

Colors and Shades

Inline elements

**Bold** *Italic* <del>Del</del> <ins>Ins</ins> Sup<sup>sup</sup> Sub<sub>sub</sub>
<mark>Mark</mark> <s>Strikethrough</s> <abbr title="Multi&#13;Line">Abbr[title]</abbr>
<cite cite='citation'>Cite[cite]</cite> <q cite="citation">Quote[cite]</q>
Footnotes[^footnote-name]

Bold Italic Del Ins Sup^sup Sub_sub Mark Strikethrough
Abbr[title] Cite[cite] Quote[cite] Footnotes¹

Code blocks

• Fenced: ```lang ... ```
• Tilded: ~~~ lang ... ~~~
• Indented: 4 spaces code, end with {:.language-lang}
• Liquid: {%- highlight lang -%} ... {%- endhighlight -%}

Forms