petrosh commented 9 years ago

Build Time Articles

Liquid

https://shopify.github.io/liquid/

Kill jekyll process

Jekyll usage

ps aux | grep jekyll
kill -9 :process_number

Links

I still like to use Compass for stylesheets, because it has so many other benefits. Because Compass can handle bundling, the plugin only needs to copy the file and add a fingerprint to the filename.

parsing of yaml with liquid

Files

*`data-inhead` tag**

<head data-owner="{{ site.github.owner_name }}" data-project="{{ site.github.project_title }}" data-repo="{{ site.github.repository_url }}">

Canonical URL

Use canonical URLs

  <link rel="canonical" href="{{ site.github.url }}{{ page.url }}" />

What's new in GitHub Pages with Jekyll 3.3

Use {{ "/about/" | absolute_url }}

User and Organizazion pages

baseurl: 
page URL: http://user-org.github.io = {{ site.github.url }}
Repository name: user-org.github.io = {{ site.github.project_title }}
Project pages
baseurl: /project
page URL: http://user-org.github.io/project = {{ site.github.url }}
Repository name: project = {{ site.github.project_title }}
Selectors

{% if page.type === 'post' %} ... {% endif %}
{% if page.path contains '_posts' %} ... {% endif %}

Check current environment

There are a couple of ways to do this. If you’re hosting your site on GitHub then the best way is to wrap your code or HTML inside:

{% if jekyll.environment == 'production' %}

{% endif %}

GitHub creates this environment variable on its servers.

Code highlight syntax

works with liquid

petrosh commented 8 years ago

Test tags and Filters

http://jekyll.pygmeeweb.com/tests/

{% assign posts_by_lang = site.posts | group_by: "lang" %}

Filters

http://jekyllrb.com/docs/templates/

Inspect {{ some_var | inspect }} Convert an object into its String representation for debugging.

Jsonify {{ some_object | jsonify }}
Convert Hash or Array to JSON.
Convert only first var {% if forloop.index0 == 0 %}{{ r | jsonify }}{% endif %}

Operations

Liquid filters

{{ product.price | minus: 15 }}
{{ product.price | plus: 15 }}
{{ product.price | times: 1.15 }}
{{ product.price | divided_by: 10.1 }}

The result is rounded down to the nearest integer (that is, the floor) if the divisor is an integer.

Modulo

Returns the remainder of a division operation.

{{ 0 | modulo: 2 }}
{{ 1 | modulo: 2 }}
{{ 2 | modulo: 2 }}
{{ 3 | modulo: 2 }}

Return 0 1 0 1

petrosh commented 8 years ago

Snippets

Switch/case

{% case d %}
  {% when '1' or '21' or '31' %}vai
  {% else %}zio
  {% endcase %}

Titlecase string

{% assign words = include.string | split: ' ' %}
{% capture titlecase %}{% for word in words %}{{ word | capitalize }} {% endfor %}{% endcapture %}
{{ titlecase }}

Page scripts Load page script if exist on /assets/javascript/pagescripts/

{% capture pagescript_url %}/assets/javascript/pagescripts/{{ page.title }}.js{% endcapture %}
{% for static_file in site.static_files %}
  {% if static_file.path == pagescript_url %}
<script src="{{ pagescript_url | absolute_url }}" defer></script>
  {% endif %}
{% endfor %}

Table of contents

* U need some text here
{:toc}

Default value {{ nil | default: "hello" }} Set a fallback in case a value doesn’t exist.

Loop real pages html_pages

A subset of site.pages listing those which end in .html (you will not see collections here)

{% for p in site.html_pages %}
  {{ p.path }}
{% endfor %}

Main navigation with active class

<nav>
    {% assign navigation_pages = site.html_pages | sort: 'navigation_weight' %}
    {% for p in navigation_pages %}
        {% if p.navigation_weight %}
            <a href="{{ p.url | absolute_url }}" {% if p.url == page.url %}class="active"{% endif %}>{{ p.title | upcase }}</a>
        {% endif %}
    {% endfor %}
    <a href="" class="float-right">Login</a>
</nav>

Escape entity {{ "<p>Jekyll</p>" | escape }} Returns an escaped version of html.

Breadcrumb

Easy

{% if page.excerpt %}
  {{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}
{% else %}
  {{ site.description }}
{% endif %}

Not shown on root page.

{% unless site.show_breadcrumb == false %}
  {% unless page.url == '/' %}
    <nav><a href="{{ site.baseurl }}/">Home</a> &blacktriangleright; 
    {% if page.path contains '_posts' %}
      <a href="{{ site.baseurl }}/blog/">Blog</a> &blacktriangleright; 
    {% endif %}
    {% if page.parent %}
      {% for p in site.pages %}
        {% if p.title == page.parent %}
          <a href="{{ site.baseurl }}{{ p.url }}">{{ p.title }}</a> &blacktriangleright;
        {% endif %}
      {% endfor %}
    {% endif %}
    {{ page.title }}</nav>
  {% endunless %}
{% endunless %}

Collection folder hierarchy menu

Creating Dynamic Menus in Jekyll

{% assign url_parts = page.url | split: '/' %}
{% assign url_parts_size = url_parts | size %}
{% assign rm = url_parts | last %}
{% assign base_url = page.url | replace: rm %}

<ul>
{% for node in site.pages %}
  {% if node.url contains base_url %}
    {% assign node_url_parts = node.url | split: '/' %}
    {% assign node_url_parts_size = node_url_parts | size %}
    {% assign filename = node_url_parts | last %}
    {% if url_parts_size == node_url_parts_size and filename != 'index.html' %}
      <li><a href='{{node.url}}'>{{node.title}}</a></li>
    {% endif %}
  {% endif %}
{% endfor %}
</ul>

page object

{
    "layout": "default",
    "title": "Loop for i in (1..10) with forloop.",
    "content": "...",
    "dir": "/jekyll/loops/",
    "name": "loops.md",
    "path": "jekyll/loops.md",
    "url": "/jekyll/loops/"
}

petrosh commented 8 years ago

Arrays

Operators

https://gattiecani.github.io/renderizer/jekyll/array/

Add as first: {{ array | unshift: element }}
Add as last: {{ array | push: element }}
Take the last: {{ array | pop }}
Take the first: {{ array | shift }}

Check if array

{% if item.first %}
  Array
{% else %}
  String or empty Array
{% endif %}

var1 = "a" is a string

{% var1.first %} // return `nil`

var2 = [a,b,c] is array

{% var2.first %} // return a

Array size

{{ array.size }}

Define and populate an Array ^{talk.jekyllrb, stackoverflow}

{% assign myarray = "" | split: "" | push: "toto" %}

petrosh commented 8 years ago

Configuration

Example: https://github.com/djoepramono/djoepramono.github.io/blob/master/_config.yml

Do not use tabs in configuration files

This will either lead to parsing errors, or Jekyll will revert to the default settings.
Use spaces instead.

_config.yaml

# for repository
url: //username.github.io/repository
# or url:
# empty
baseurl: /repository
# for orgs and personal both empty

# gems
# Feed: <head>{% feed_meta %}</head>
# Github: Expose {{ site.github }} array: {% assign cosa = site.github.public_repositories[8] %}
repository: username/repository
gems:
  - jekyll-feed
  - jekyll-sitemap
  - jekyll-coffeescript
  - jekyll-github-metadata
  - jekyll-titles-from-headings # A Jekyll plugin to pull the page title from the first Markdown heading when none is specified.
  - jekyll-default-layout # Silently sets default layouts for Jekyll pages and posts
  - jekyll-readme-index # A Jekyll plugin to render a project's README as the site's index
  - jekyll-optional-front-matter #Any Markdown file in your site's source will be treated as a Page and rendered as HTML, even if it doesn't have YAML front matter.
  - jekyll-mentions # @mentionable support for your Jekyll site

# Timezone
# Expose {{ site.time }} at compile
timezone: Europe/Rome

permalink: pretty # or permalink: /:categories/:title/
markdown: kramdown
kramdown:
  auto_ids: true
sass:
  sass_dir: _sass
  # style: compressed

Default values with scope

defaults:
    -
        scope:
            path: "pages" # an empty string here means all files in the project
        values:
            layout: "default"
            navigation_weight: 0 # for navigation
            comments: false # for parliamone

petrosh commented 7 years ago

Jekyll GitHub metadata

gem:
  - jekyll-github-metadata

Repository metadata on GitHub Pages

Available repository metadata

"NWO" stands for "name with owner." It is GitHub lingo for the username of the owner of the repository plus a forward slash plus the name of the repository, e.g. 'parkr/blog', where 'parkr' is the owner and 'blog' is the repository name.

{
    "versions": {
        "jekyll": <version>,
        "kramdown": <version>,
        "liquid": <version>,
        "maruku": <version>,
        "rdiscount": <version>,
        "redcarpet": <version>,
        "RedCloth": <version>,
        "jemoji": <version>,
        "jekyll-mentions": <version>,
        "jekyll-redirect-from": <version>,
        "jekyll-sitemap": <version>,
        "github-pages": <version>,
        "ruby": <version>"
    },
    "hostname": "github.com",
    "pages_hostname": "github.io",
    "api_url": "https://api.github.com",
    "environment": "dotcom",
    "public_repositories": [ Repository Objects ],
    "organization_members": [ User Objects ],
    "build_revision": "cbd866ebf142088896cbe71422b949de7f864bce",
    "project_title": "metadata-example",
    "project_tagline": "A GitHub Pages site to showcase repository metadata",
    "owner_name": "github",
    "owner_url": "https://github.com/github",
    "owner_gravatar_url": "https://github.com/github.png",
    "repository_url": "https://github.com/github/metadata-example",
    "repository_nwo": "github/metadata-example",
    "repository_name": "metadata-example",
    "zip_url": "https://github.com/github/metadata-example/zipball/gh-pages",
    "tar_url": "https://github.com/github/metadata-example/tarball/gh-pages",
    "clone_url": "https://github.com/github/metadata-example.git",
    "releases_url": "https://github.com/github/metadata-example/releases",
    "issues_url": "https://github.com/github/metadata-example/issues",
    "wiki_url": "https://github.com/github/metadata-example/wiki",
    "language": null,
    "is_user_page": false,
    "is_project_page": true,
    "show_downloads": true,
    "url": "http://username.github.io/metadata-example", // (or the CNAME)
    "contributors": [ User Object ],
    "releases": [ Release Objects ]
}

User Object

{
  "login": "petrosh",
  "id": 4997583,
  "avatar_url": "https://avatars.githubusercontent.com/u/4997583?v=3",
  "gravatar_id": "",
  "url": "https://api.github.com/users/petrosh",
  "html_url": "https://github.com/petrosh",
  "followers_url": "https://api.github.com/users/petrosh/followers",
  "following_url": "https://api.github.com/users/petrosh/following{/other_user}",
  "gists_url": "https://api.github.com/users/petrosh/gists{/gist_id}",
  "starred_url": "https://api.github.com/users/petrosh/starred{/owner}{/repo}",
  "subscriptions_url": "https://api.github.com/users/petrosh/subscriptions",
  "organizations_url": "https://api.github.com/users/petrosh/orgs",
  "repos_url": "https://api.github.com/users/petrosh/repos",
  "events_url": "https://api.github.com/users/petrosh/events{/privacy}",
  "received_events_url": "https://api.github.com/users/petrosh/received_events",
  "type": "User",
  "site_admin": false,
  "contributions": 1
}

Repository Object

{
  "id": 77236282,
  "name": "basic",
  "full_name": "fork-n-play/basic",
  "owner": {
    "login": "fork-n-play",
    "id": 13919820,
    "avatar_url": "https://avatars.githubusercontent.com/u/13919820?v=3",
    "gravatar_id": "",
    "url": "https://api.github.com/users/fork-n-play",
    "html_url": "https://github.com/fork-n-play",
    "followers_url": "https://api.github.com/users/fork-n-play/followers",
    "following_url": "https://api.github.com/users/fork-n-play/following{/other_user}",
    "gists_url": "https://api.github.com/users/fork-n-play/gists{/gist_id}",
    "starred_url": "https://api.github.com/users/fork-n-play/starred{/owner}{/repo}",
    "subscriptions_url": "https://api.github.com/users/fork-n-play/subscriptions",
    "organizations_url": "https://api.github.com/users/fork-n-play/orgs",
    "repos_url": "https://api.github.com/users/fork-n-play/repos",
    "events_url": "https://api.github.com/users/fork-n-play/events{/privacy}",
    "received_events_url": "https://api.github.com/users/fork-n-play/received_events",
    "type": "Organization",
    "site_admin": false
  },
  "private": false,
  "html_url": "https://github.com/fork-n-play/basic",
  "description": "Basic framework for development.",
  "fork": false,
  "url": "https://api.github.com/repos/fork-n-play/basic",
  "forks_url": "https://api.github.com/repos/fork-n-play/basic/forks",
  "keys_url": "https://api.github.com/repos/fork-n-play/basic/keys{/key_id}",
  "collaborators_url": "https://api.github.com/repos/fork-n-play/basic/collaborators{/collaborator}",
  "teams_url": "https://api.github.com/repos/fork-n-play/basic/teams",
  "hooks_url": "https://api.github.com/repos/fork-n-play/basic/hooks",
  "issue_events_url": "https://api.github.com/repos/fork-n-play/basic/issues/events{/number}",
  "events_url": "https://api.github.com/repos/fork-n-play/basic/events",
  "assignees_url": "https://api.github.com/repos/fork-n-play/basic/assignees{/user}",
  "branches_url": "https://api.github.com/repos/fork-n-play/basic/branches{/branch}",
  "tags_url": "https://api.github.com/repos/fork-n-play/basic/tags",
  "blobs_url": "https://api.github.com/repos/fork-n-play/basic/git/blobs{/sha}",
  "git_tags_url": "https://api.github.com/repos/fork-n-play/basic/git/tags{/sha}",
  "git_refs_url": "https://api.github.com/repos/fork-n-play/basic/git/refs{/sha}",
  "trees_url": "https://api.github.com/repos/fork-n-play/basic/git/trees{/sha}",
  "statuses_url": "https://api.github.com/repos/fork-n-play/basic/statuses/{sha}",
  "languages_url": "https://api.github.com/repos/fork-n-play/basic/languages",
  "stargazers_url": "https://api.github.com/repos/fork-n-play/basic/stargazers",
  "contributors_url": "https://api.github.com/repos/fork-n-play/basic/contributors",
  "subscribers_url": "https://api.github.com/repos/fork-n-play/basic/subscribers",
  "subscription_url": "https://api.github.com/repos/fork-n-play/basic/subscription",
  "commits_url": "https://api.github.com/repos/fork-n-play/basic/commits{/sha}",
  "git_commits_url": "https://api.github.com/repos/fork-n-play/basic/git/commits{/sha}",
  "comments_url": "https://api.github.com/repos/fork-n-play/basic/comments{/number}",
  "issue_comment_url": "https://api.github.com/repos/fork-n-play/basic/issues/comments{/number}",
  "contents_url": "https://api.github.com/repos/fork-n-play/basic/contents/{+path}",
  "compare_url": "https://api.github.com/repos/fork-n-play/basic/compare/{base}…{head}",
  "merges_url": "https://api.github.com/repos/fork-n-play/basic/merges",
  "archive_url": "https://api.github.com/repos/fork-n-play/basic/{archive_format}{/ref}",
  "downloads_url": "https://api.github.com/repos/fork-n-play/basic/downloads",
  "issues_url": "https://api.github.com/repos/fork-n-play/basic/issues{/number}",
  "pulls_url": "https://api.github.com/repos/fork-n-play/basic/pulls{/number}",
  "milestones_url": "https://api.github.com/repos/fork-n-play/basic/milestones{/number}",
  "notifications_url": "https://api.github.com/repos/fork-n-play/basic/notifications{?since,all,participating}",
  "labels_url": "https://api.github.com/repos/fork-n-play/basic/labels{/name}",
  "releases_url": "https://api.github.com/repos/fork-n-play/basic/releases{/id}",
  "deployments_url": "https://api.github.com/repos/fork-n-play/basic/deployments",
  "created_at": "2016-12-23 16:06:38 UTC",
  "updated_at": "2016-12-23 16:06:38 UTC",
  "pushed_at": "2016-12-23 16:06:39 UTC",
  "git_url": "git://github.com/fork-n-play/basic.git",
  "ssh_url": "git@github.com:fork-n-play/basic.git",
  "clone_url": "https://github.com/fork-n-play/basic.git",
  "svn_url": "https://github.com/fork-n-play/basic",
  "homepage": null,
  "size": 0,
  "stargazers_count": 0,
  "watchers_count": 0,
  "language": null,
  "has_issues": true,
  "has_downloads": true,
  "has_wiki": true,
  "has_pages": true,
  "forks_count": 0,
  "mirror_url": null,
  "open_issues_count": 0,
  "forks": 0,
  "open_issues": 0,
  "watchers": 0,
  "default_branch": "master"
}

Release object

{
  "url": "https://api.github.com/repos/fork-n-play/basic/releases/5043998",
  "assets_url": "https://api.github.com/repos/fork-n-play/basic/releases/5043998/assets",
  "upload_url": "https://uploads.github.com/repos/fork-n-play/basic/releases/5043998/assets{?name,label}",
  "html_url": "https://github.com/fork-n-play/basic/releases/tag/v0.1",
  "id": 5043998,
  "tag_name": "v0.1",
  "target_commitish": "master",
  "name": "Login and Fork updates working",
  "draft": false,
  "author": {
    "login": "petrosh",
    "id": 4997583,
    "avatar_url": "https://avatars.githubusercontent.com/u/4997583?v=3",
    "gravatar_id": "",
    "url": "https://api.github.com/users/petrosh",
    "html_url": "https://github.com/petrosh",
    "followers_url": "https://api.github.com/users/petrosh/followers",
    "following_url": "https://api.github.com/users/petrosh/following{/other_user}",
    "gists_url": "https://api.github.com/users/petrosh/gists{/gist_id}",
    "starred_url": "https://api.github.com/users/petrosh/starred{/owner}{/repo}",
    "subscriptions_url": "https://api.github.com/users/petrosh/subscriptions",
    "organizations_url": "https://api.github.com/users/petrosh/orgs",
    "repos_url": "https://api.github.com/users/petrosh/repos",
    "events_url": "https://api.github.com/users/petrosh/events{/privacy}",
    "received_events_url": "https://api.github.com/users/petrosh/received_events",
    "type": "User",
    "site_admin": false
  },
  "prerelease": true,
  "created_at": "2016-12-31 17:00:42 UTC",
  "published_at": "2016-12-31 17:08:27 UTC",
  "assets": [],
  "tarball_url": "https://api.github.com/repos/fork-n-play/basic/tarball/v0.1",
  "zipball_url": "https://api.github.com/repos/fork-n-play/basic/zipball/v0.1",
  "body": ""
}

petrosh commented 7 years ago

Images

Extract the first image from a post ^{Max Glenister}

{% assign images = post.content | split:"<img " %}
{% for image in images %}
  {% if image contains 'src=' %}
    {% assign imageMarkup = image | split:">" | first %}
    <img {{ imageMarkup }}>
    {% break %}
  {% endif %}
{% endfor %}

Images ^{talk.jekyllrb}

{% include image.html file="filename" type="jpg" url="image-url" alt="alt-text" caption="the-caption" border="true" %}

Parameters:

file: The name of the file (without the file extension)
type: The type of file (png, svg, and so on)
url: Whether to link the image to a URL
alt: Alternative image text for accessibility and SEO
caption: A caption for the image
border: A border around the image. If you want the border, set this equal to true. Otherwise omit the parameter.

<figure>
  {% if {{include.url}} %}<a target="_blank" href="{{include.url}}">{% endif %}
  <img class="docimage {% if {{include.border}} == "true" %}border{% endif %}" src="{{site.image_path}}{{include.file}}.{{include.type}}" alt="{{include.alt}}" />
  {% if {{include.url}} %}</a>{% endif %}
  <figcaption>{{include.caption}}</figcaption>
</figure>

Then add two classes to your stylesheet: img.docimage and img.border

Also, in your configuration file, image_path should define the basepath to your image assets folder.

For translated images, store your images in a different folder and change the basepath to that translated image folder appropriately in the translated project's config file.

petrosh commented 7 years ago

Tags and categories

Scan all pges for tags and cats

{% assign every_page = '' | split: '' %}
{% for p in site.html_pages %}{% assign every_page = every_page | push: p %}{% endfor %}
{% for d in site.documents %}{% assign every_page = every_page | push: d %}{% endfor %}

`group_by: 'tags'`

{% assign tags = every_page | group_by: 'tags' %}
{% for t in tags %}- {{t.name|remove:'['|remove:']'|remove:'"'|remove:' '|split:','|inspect}} {% for d in t.items %}
  - title: {{d.title}}, url: {{d.url}}, collection: {{d.collection}}, cat: {{d.categories}}{% endfor %}
{% endfor %}

`group_by: 'categories'`
{% assign categories = every_page | group_by: 'categories' %}
{% for c in categories %}- {{c.name|remove:'['|remove:']'|remove:'"'|remove:' '|split:','|inspect}}{% for d in c.items %}
  - title: {{d.title}}, url: {{d.url}}, collection: {{d.collection}}, tags: {{d.tags}}
{% endfor %}
{% endfor %}

Articles by tags

<h1>Articles by tag: {{ page.tag }}</h1>
<div>
    {% if site.tags[page.tag] %}
        {% for post in site.tags[page.tag] %}
            <a href="{{ post.url }}/">{{ post.title }}</a>
        {% endfor %}
    {% else %}
        <p>There are no posts for this tag.</p>
    {% endif %}
</div>

Search categories

{% for category in site.categories %}
  {% assign nposts = category | last | size %}
  <div class="collection" data-name="{{ category | first | escape }}" hidden>
    <h1>{{ category | first }}</h1>
    <h2>{{ nposts }} post{% if nposts != 1 %}s{% endif %}</h2>
    <ul>
      {% for posts in category %}
        {% for post in posts %}
          {% if post.title %}
            <li><a href="{{ post.url }}">{{ post.title }}</a></li>
          {% endif %}
        {% endfor %}
      {% endfor %}
    </ul>
  </div>
{% endfor %}

The user searches for something, visiting /search.html?tag=foo for example;
Some JavaScript parses the GET parameters for either a tag or a category parameter, storing the value;
The list of .collection containers is searched, and a container is showed (remove hidden attribute) if it’s data-name property match the value of the search parameter.

petrosh commented 7 years ago

Submodules

Git Tools - Submodules

Examples

git submodule add https://github.com/petrosh/submodules-posts _posts
git submodule update --remote --merge
git commit -am "ok" && git push

petrosh commented 7 years ago

For loops

Reverse loop

{% assign array = include.file_name | split: '/' | reverse %}

Indexes

https://gattiecani.github.io/renderizer/jekyll/loops/

{% for i in (1..10) %}
- `i` – {{ i }}
- `length` – {{ forloop.length }}
- `index` – {{ forloop.index }}
- `index0` – {{ forloop.index0 }}
- `rindex` – {{ forloop.rindex }}
- `rindex0` – {{ forloop.rindex0 }}
- `first` – {{ forloop.first }}
- `last` – {{ forloop.last }}
{% endfor %}

Display unless last item

{% unless forloop.last %}something{% endunless %}

Optionals arguments

limit:<INTEGER> lets you restrict how many items you get.
offset:<INTEGER> lets you start the collection with the nth item.
reversed iterates over the collection from last to first.

Index for nested loops

{% assign marker_index = 0 %}
{% for m in markers %}
    {% for l in m.locations %}
    {% capture marker_index %}{{ marker_index | plus: 1 }}{% endcapture %}
    {% endfor %}
{% endfor %}

No items

{% for item in items %}
  {{ item.title }}
{% else %}
  There are no items!
{% endfor %}

petrosh commented 7 years ago

Dates

Updated page date and time

Updated {{ site.time | date_to_rfc822 }}

timezone: Europe/Rome

Updated Thu, 05 Apr 2018 12:58:55 +0200

Updated repository

{% assign updated = site.github.public_repositories | where: "html_url", site.github.repository_url | first | map: "updated_at" | first | date_to_xmlschema %}
{{ updated }}

2020-04-13T11:51:25+00:00

Assign a date

{% assign default_date = 'now' | date: '%FT%X' %}

Jekyll Date Formatting

site.time

The current time (when you run the jekyll command).

online: 2017-01-20 13:30:33 +0000
local: 2017-01-20 14:30:33 +0100

jekyll-liquid-date-formatting-examples

<!-- Whitespace added for readability -->
{% assign d = page.date | date: "%-d"  %}
{{ page.date | date: "%B" }} 
{% case d %}
  {% when '1' or '21' or '31' %}{{ d }}st
  {% when '2' or '22' %}{{ d }}nd
  {% when '3' or '23' %}{{ d }}rd
  {% else %}{{ d }}th
  {% endcase %}, 
{{ page.date | date: "%Y" }}

Article minutes read

{{ content | number_of_words | divided_by: 225 | round }} minute read

Date format

%a - Abbreviated weekday Sun
%A - Full weekday name Sunday
%b - Abbreviated month name Jan
%B - Full month name January
%c - Preferred local date and time representation Fri Jan 29 11:16:09 2016
%d - Day of the month, zero-padded 05
%-d - Day of the month 5
%D - Formats the date 29/01/16
%e - Day of the month 3
%F - Returns the date in ISO 8601 format 2016-01-29
%H - Hour of the day, 24-hour clock 07
%I - Hour of the day, 12-hour clock 04
%j - Day of the year 017
%k - Hour of the day, 24-hour clock 7
%m - Month of the year 04
%M - Minute of the hour 09
%p - Meridian indicator uppercase AM
%P - Meridian indicator lowercase pm
%r - 12-hour time 01:31:43 PM
%R - 24-hour time 18:09
%T - 24-hour time with seconds 18:09:13
%s - Number of seconds since 1970-01-01 00:00:00 UTC 1452355261
%S - Second of the minute 05
%U - Week number of the current year, starting with the first Sunday as the first day of the first - week 03
%W - Week number of the current year, starting with the first Monday as the first day of the first - week 09
%w - Day of the week. Sunday is 0 4
%x - Preferred representation for the date 05/11/15
%X - Preferred representation for the time 17:15:31
%y - Year without a century 16
%Y - Year with a century 2016
%Z - Time zone name PST
%% - Literal - % character %

petrosh commented 7 years ago

CSS

Inline SCSS with Jekyll and GitHub Pages

<style media="screen" type="text/css">
  {%- capture inline_css -%}{% include page/inline.sass %}{%- endcapture -%}
  {{ inline_css | sassify }}
</style>

Set CSS styles in configuration

_config.yaml

colors:
  - link_color: "#4078c0"

style.sass


---

---
$links_color: {% for c in site.colors %}{{c.link_color}}{% endfor %}

Include and sassify

<!--
    Include SASS from _inculdes and sassify to CSS
-->
<style type="text/css">
{% capture include_to_sassify %}{% include maps/2d.sass %}{% endcapture %}
{{ include_to_sassify | sassify }}
</style>

petrosh commented 7 years ago

Themes

Remote theme

Remote themes in the form of OWNER/REPOSITORY must represent a GitHub-hosted, Gem-based Jekyll theme.

Use any theme with GitHub Pages build your site with any public, GitHub-hosted theme Repository tags: https://github.com/topics/jekyll-theme jekyll, jekyll-theme, theme, github-pages. ruby-gem
Bare minimum: https://github.com/petrosh/try-jekyll-any-theme/tree/v0.1.0
- _config.yml with remote_theme: tool-of-lore/jekyll-any-theme@v0.1.1a
- .gitignore with _site/, .sass-cache/, .jekyll-metadata
https://github.com/benbalter/jekyll-remote-theme

Options

If you don't specify a Git ref, the master branch will be used.
You may also optionally specify the Git ref to use by appending an @.

branch
tag
commit

Examples

benbalter/retlab@v1.0.0
benbalter/retlab@develop

Issues

No _data folder
- navbar: No navbar and no login use collections or _config
- examples like calendars or objects: use front matter?
assets/pages is present
- Use collections? But in config you need collections and defaults
- README.md has permalink: / but still see assets/pages/index.md
Theme switcher seems not working
- Can't find http://petrosh.it/assets/css/basic_light_serif.css
_config is bloated
- Can we find another place for assets-versions?

remote_theme: owner/name

Create new

https://jekyllrb.com/docs/themes/#creating-a-gem-based-theme

jekyll new-theme jekyll-any-theme

Css

_sass
├── jekyll-theme-awesome.scss

@import "{{ site.theme }}";

Screenshot

/screenshot.png You can also include this screenshot within your theme’s documentation where it can be retrieved programmatically.

Push

Push on GitHub to preview

gem build jekyll-any-theme.gemspec and got

WARNING:  no description specified
WARNING:  See http://guides.rubygems.org/specification-reference/ for help
Successfully built RubyGem
Name: jekyll-any-theme
Version: 0.1.0
File: jekyll-any-theme-0.1.0.gem

then added spec.description = "Jekyll any theme – Customizable Bootstrap 4" Just wow

WARNING:  description and summary are identical
WARNING:  See http://guides.rubygems.org/specification-reference/ for help
Successfully built RubyGem
Name: jekyll-any-theme
Version: 0.1.1
File: jekyll-any-theme-0.1.1.gem

gem push jekyll-any-theme-*.gem and got

Signed in.
Pushing gem to https://rubygems.org...
Successfully registered gem: jekyll-any-theme (0.1.0)

and then gem push jekyll-any-theme-0.1.1.gem and got

Pushing gem to https://rubygems.org...
Successfully registered gem: jekyll-any-theme (0.1.1)

because description = "Much longer explanation of the example!" with %q{ ... } too.

To release a new version of your theme, update the version number in the gemspec file jekyll-any-theme.gemspec

Links

https://rubygems.org/gems/jekyll-any-theme
Homepage: https://tool-of-lore.github.io/jekyll-any-theme/
Documentation: http://www.rubydoc.info/gems/jekyll-any-theme/0.1.1

Examples

minima
minimal mistake

whiteglass

[ ] Need mobile check

.wrapper { max-width: calc(1200px - (30px * 2)); }
site-header, .site-footer {
background: antiquewhite;
}
aside.sidebar {
overflow: hidden;
width: 260px;
padding: 1.2em 20px 20px;
background: none;
clear: none;
float: right;
margin: 0 0 0 -100%;
}
article.post {
margin-right: 300px;
overflow: visible;
}

<div class="wrapper">
<aside class="sidebar"></aside>
<article class="post"></article>
</div>

schermata 2017-08-26 alle 16 37 03

marat
bootstrap
octopress flat

petrosh commented 6 years ago

JSONIFY

---
layout: nil
---
[
{% for post in site.posts %}
  {
    "title"    : "{{ post.title }}",
    "url"     : "{{ post.url }}",
    "date"     : "{{ post.date | date: "%B %d, %Y" }}",
    "content"  : "{{ post.content | escape }}"
  }{% unless forloop.last %},{% endunless %}
{% endfor %}
]

API

List

<h1 class="page-heading">Products</h1>
<ul class="post-list">
    {% for p in site.data.products %}
    <li>{{ p.name }} at {{p.price}}</li>
    {% endfor %}      
</ul>

products.json

---
layout: null
---
{{ site.data.products | jsonify }}

Filter

products.qty.json supports a sorted by qty list, with highest first:

---
layout: null
---
{{ site.data.products | sort: "qty" | reverse | jsonify }}

petrosh commented 6 years ago

Update

If you aren’t running the latest version, run this command gem update jekyll.

Today

Update rvm rvm get stable
Update all gemsrvm rvm gemset update > Error ruby_dep requires Ruby version >= 2.2.5, ~> 2.2
Update Ruby rvm upgrade 2.5.0 > Are you sure you wish to upgrade from ruby-2.1.0 to ruby-2.4.1? (Y/n): y 😴
Back to point 2.
sudo gem update

Then the golden moment

rvm use ruby-2.4.1
bundle install
jekyll s

Autoprefixer drama

Add gem 'jekyll-autoprefixer' in Gemfile
Run bundle
Add plugins: jekyll-autoprefixer in _config
jekyll s

trasparente commented 2 years ago

CSV and Tables

Table from CSV data files.

{%- if include.file == nil or include.file == '' -%}
Missing `file="..."`
{%- else -%}
{%- if site.data[include.file].first == nil -%}
`{{ include.file }}` is not CSV
{%- else -%}
{% for item in site.data[include.file] %}{% if forloop.first %}|{% for head in item %}{{ head[0] }}|{% endfor %}
|{% for head in item %}:---|{% endfor %}
{% endif %}|{% for value in item %}{{ value[1] }}|{% endfor %}
{% endfor %}
{%- endif -%}
{%- endif -%}

Table from Page Front Matter

---
title: Home
table:
  -
    date: 2020-01-02
    header: value
    num: 3
    "%": 3
  -
    date: 2023-01-02
    header: ciro
    num: 54
    "%": 54
---

trasparente commented 1 year ago

Posts properties

site.posts:
  "date": "2023-01-13 00:00:00 +0100",
  "id / url": "/2023/01/13/colors",
  "title": "Colors",
  "slug": "colors",
  "ext": ".md",
  "collection": "posts",
  "layout": "default",
  "categories": [],
  "tags": [],
  "draft": false,
  "excerpt": "{html}",
  "content": "{html}"
  "relative_path / path": "_posts/2023-01-13-colors.md"

petrosh / snippetrosh

JEKYLL #5

Liquid

Kill jekyll process

Links

Files

URL

User and Organizazion pages

Project pages

Selectors

Check current environment

Code highlight syntax

Test tags and Filters

Filters

Snippets

Arrays

Configuration

Do not use tabs in configuration files

Jekyll GitHub metadata

Images

Tags and categories

Submodules

For loops

Dates

CSS

Themes

Remote theme

Create new

Examples

JSONIFY

API

Update

CSV and Tables

Posts properties