dactl

Welcome to dactl!

Wed, 22 Mar 2017 00:00:00 +0100

You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve.

<!–-break-–> This launches a web server and auto-regenerates your site when a file is updated.
To add new posts, simply add a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll also offers powerful support for code snippets:

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll’s dedicated Help repository.

Notice blocks

Mon, 20 Mar 2017 00:00:00 +0100

By default dactl has a couple of special classes which will turn a paragraph into a notice block when added to it. Read on for information on how to use it.

How to create a notice block

Creating notices from your paragraphs works the same way as creating leading post paragraphs.
You need to add a correct class after the paragraph: <!–-break-–>

Sea otters [hold each other’s paws](https://www.youtube.com/watch?v=eTvX-CkfqRo) when they sleep so they don’t drift apart.  
That is a fact, look it up on Wikipedia if you don't believe me.
{: .notice}

Available options

Regular notice block

{: .notice}

Sea otters hold each other’s paws when they sleep so they don’t drift apart.
That is a fact, look it up on Wikipedia if you don’t believe me.

Alert notice block

{: .notice-alert}

If one examines the capitalist paradigm of context, one is faced with a choice: either accept textual narrative or conclude that reality serves to exploit the Other.

Success notice block

{: .notice-success}

If one examines the capitalist paradigm of context, one is faced with a choice: either accept textual narrative or conclude that reality serves to exploit the Other.

Multi-paragraph notice blocks

The easiest solution I found to wrapping more than paragraph into a notice is just inserting it into a markdown-enabled div tag, like this:

<div class="notice" markdown="1">
If one examines the capitalist paradigm of context, one is faced with a
choice: either accept textual narrative or conclude that reality serves to
exploit the Other.

A number of dematerialisms concerning textual objectivism
exist. However, if textual narrative holds, we have to choose between
precultural theory and the conceptual paradigm of consensus.
</div>

Which, when processed by kramdown, shows up like this:

If one examines the capitalist paradigm of context, one is faced with a choice: either accept textual narrative or conclude that reality serves to exploit the Other.

A number of dematerialisms concerning textual objectivism exist. However, if textual narrative holds, we have to choose between precultural theory and the conceptual paradigm of consensus.

Layout settings and more in _config.yml

Mon, 20 Mar 2017 00:00:00 +0100

All of the dactl’s configurations has to be set in _config.yml file. Read on for explanation of all of the features that you can toggle, including configuring the layout.

I’ve split dactl’s _config.yml into two parts. First part should be configured by you, second contains important Jekyll & build settings and you should leave it alone, unless you know what you are doing. <!–-break-–>

Let’s go through each line in the first, configurable part:

# Base blog settings
blog:
  title                      : dactl
  description                : >
                               this should contain a proper description
# Layout configuration
  logo_path                  : "assets/img/dactl.svg" # path to logo file
  search_path                : # "yourgitusername.github.io"
                               # needed for searchbox in archive page
  hero_layout                : true # turn on hero layout for blog and posts
  hero_placeholder           : "assets/img/generic_hero.jpg" # placeholder for hero
  excerpts                   : true # show excerpts instead of full post content on blog page
  inline_footnotes           : true # enable/disable barefoot inline footnotes
  titles_only                : false # titles only on main blog page

# Fonts
font                         : '"Rubik", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif'
load_google_fonts            : 'Rubik:400,400italic,700,700italic'

# Author info
author:
  fullname                  : Your Name
  rss                       : true # generate RSS feed and show it's icon in header
  mail                      : your@email.com # change to your e-mail address
  twitter                   : twitter-user-name
  github                    : github-user-name
  youtube                   : youtube-user-name
  stackoverflow             : stackoverflow-user-name
  disqus                    : dactl # your disqus site name
  google_analytics          : # 'UA-XXXXXXXX-X'
  photo                     : "uploads/me2.png"
  photo2x                   : "uploads/me.png"

baseurl                      : "/dactl/" # the subpath of your site, e.g. /blog/, set to '' in case of hosting on GitHub pages
                                  # i.e. `http://<username>.github.io`
url                          : "" # the base hostname & protocol for your site

Base blog settings

title - title of your blog, both in <title> tag and in the header.
description - descriptionof your blog, shown in the footer

Layout settings

logo_path - Path to an .svg image used as logo
search_path - Path to your blog, needed for the DuckDuckGo’s searchbar found in Archive page.
hero_layout - true / false - Turn the hero image layout on or off. When turned off you don’t need to supply images and overlays in post’s YAML front matter and the layout gets slightly adjusted.
hero_placeholder - Path to an image which will be used as a placeholder when there is no hero set for post, optional.
excerpts - true or false - Turn post excerpts on or off. When set to false you will see full text content for each post on blog page.
inline_footnotes - true or false - When set to false you will turn off Barefoot.js inline footnotes.
titles_only - true or false - When set to true Jekyll will generate blog layout with post titles only. hero_layout and excerpts are overidden by titles_only when it’s set to true.

Fonts

font - Name of the font family used for theme’s typography.
load_google_fonts - Choose what font family should be loaded, served by google fonts. In order to change the font you need to supply it’s name and variants - font weight of 400 and 700 are required.

Author info

fullname - Your name and surname or nick, used throughout the blog.
rss - true or false - Turn the RSS feeds on or off.
mail - Your e-mail address.
twitter - Your twitter username
github - Your Github username
youtube - Your YouTube username
stackoverflow - Your Stackoverflow username
disqus - Your Disqus site name.
photo - Avatar or photo of you, used on About page.
photo2x - Same as above but in higher resolution.

Google Analytics

google_analytics - Supply your Google Analytics ID here, if you want to use it.
baseurl - Subpath of your blog, e.g. /blog, leave it empty in case of hosting on Github pages - yourusername.github.io

YAML front matter in posts

Sun, 19 Mar 2017 00:00:00 +0100

In order to use dactl’s post images with overlays you’ll need to learn how to set them. You do that in post’s YAML frontmatter and I’ll show you how.

YAML Front matter

Each Jekyll post starts with YAML Front ¹. For example, this is how this post would look like if I wanted to use all of the options: <!–-break-–>

---
layout: post
title: 'How do I write posts in dactl Jekyll theme?'
tags:
  - jekyll
  - dactl
hero: /assets/hero.jpg
overlay: purple
link: https://link-to-some-page.com
---

As you can see it has a couple of options, some of them are required by Jekyll (layout, title), some are required by dactl theme when set to default hero layout (hero) and some are completely optional (overlay, link).
I’ll go through what each option means, what it affects and how to use it.

Layout

This just tells Jekyll to use post layout.

1	layout: post

Title

Title of the post as seen at the top of this post.

title: 'How do I write posts in dactl Jekyll theme?'

Hero image

See that nice picture from unsplash at the top of this page? This is how you set it’s source.

hero: /assets/hero.jpg

Hero overlay

You can choose the color of the image overlay here. Currently you can choose from five colors: purple, red, green, blue, orange. If you don’t choose a color it will default to a light black.

overlay: purple

Link post

I’ve included link post functionality (a’la Daring Fireball) in dactl.
If you put webpage’s address in that field then that post becomes a link post.
Title of that post (on blog page only) becomes a link to the webpage you set the address to. To access the content of the post you need to click on ‘Read more’ link. To access a link post content in layout with titles only you need to click a meta link which shows up between date and tags.

link: https://link-to-some-page.com

Everything in between those two --- ↩

Tags in dactl

Sat, 18 Mar 2017 00:00:00 +0100

Tags are built using Jekyll’s native categories functionality and you need to add them manually as files before using them in posts. Read on to learn how.

How to add a new tag

Please make sure to do the following for each tag: <!–-break-–>

Create a .md file within _my_tags folder with the name of your category, e.g. cool-stuff.md. This file needs to look like this:

---
slug: cool-stuff
name: Cool Stuff
description: >
             This is an awesome description of my cool stuff tag which will be display underneath the title of this tag's page.
---

slug is a mandatory field and defines tag’s slug, accessible at yourblog.com/tag/dactl/, use - instead of spaces here.
name is a mandatory field and defines tag’s name, e.g. Cool Stuff.
description is an optional field, it’s visible on tag’s page.
Click here and here to see the difference.

Optional

You can configure the Archive page to show ‘Tag box’ underneath the search box - this box will contain all of your blog’s tags with links to them.

Post excerpts and leading paragraphs

Fri, 17 Mar 2017 00:00:00 +0100

By default, dactl’s blog layout displays post excerpts which are leading paragraphs as well. This requires some manual work on your part when writing a post but don’t worry - it’s really easy. Read on for more info.

Post excerpts

First, let’s see how this and the above paragraph looks like in markdown: <!–-break-–>

By default, dactl's blog layout displays post excerpts which are leading paragraphs as well. This requires some manual work on your part when writing a post but don't worry - it's really easy. Read on for more info.
{: .lead}

## Post excerpts
First, let's see how this and the above paragraph looks like in markdown:
<!–-break-–>

As you can see above there are two things which are visible only in the post’s markdown version. You won’t see them here because they got processed by Jekyll and ‘thrown out’ while generating html version of this post.

{: .lead} inserted on a new line after a paragraphtells Jekyll’s markdown processor (dactl uses kramdown) to add class .lead to the above <p> tag which results in a leading paragraph.

, inserted on a new line after {: .lead}, tells Jekyll that it should ‘break’ the post content at this point, so everything above it will become a post excerpt.

The order is important here -  comes after {: .lead} and because of that the leading paragraph/ post excerpt has it’s font enlarged both on blog and post pages.

Footnotes

Thu, 16 Mar 2017 00:00:00 +0100

dactl uses Barefoot plugin to create nice looking inline footnotes from those generated by kramdown, daktl’s markdown processor. Read on for more information about how to add footnotes to your posts and how to enable/disable Barefoot plugin.

What is Barefoot.js

I really like the look of inline-footnotes created by Bigfoot.js but it requires jQuery and loading whole library just to have footnotes seems excessive. <!–-break-–>

I found Barefoot.js when looking for an alternative an it does exactly what it says:

Barefoot is a lightweight Bigfoot.js alternative written in vanilla Javascript to create beautiful inline footnotes.
Barefoot grabs the common markup used for footnotes on the web, mostly generated by Markdown processors, and transform it into beautiful and meaningful footnotes.

For dactl’s purposes I have modified Barefoot’s default stylesheet:

Adjusted the visuals a bit
Footnote buttons show an icon, not a number
Necessary changes to make it work with theme switcher

How to add footnotes to your posts

Adding footnotes to your posts is really easy.¹
First, you need to insert a numbered footnote mark in your post to define where it should show up - it looks like this:

Adding footnotes to your posts is really easy.[^1]

Then, to put some content in those those numbered footnotes, you need to define it at the bottom of your post, like this:

[^1]: Here's one for example

How to turn off Barefoot plugin

Open _config.yml file and change value in blog.footnotes_inline from true to false.
Restart your jekyll server and see the change in this post.

Here’s one for example ↩

Example content

Fri, 20 Jan 2017 00:00:00 +0100

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. <!–-break-–>

Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

Inline HTML elements

HTML defines a long list of available inline tags, a complete list of which can be found on the Mozilla Developer Network.

To bold text, use **To bold text**.
To italicize text, use *To italicize text*.
Abbreviations, like HTML should be defined like this *[HTML]: HyperText Markup Language.
Citations, like — Mark otto, should use <cite>.
~~Deleted~~ text should use ~~deleted~~ and inserted text should use <ins>.
Superscript ^text uses <sup> and subscript _text uses <sub>¹.

Most of these elements are styled by browsers with few modifications on our part.

Heading

Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Code

Cum sociis natoque penatibus et magnis dis code element montes, nascetur ridiculus mus.

// Example can be run directly in your JavaScript console

// Create a function that takes two arguments and returns the sum of those
// arguments
var adder = new Function("a", "b", "return a + b");

// Call the function
adder(2, 6);
// > 8

Lists

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Donec id elit non mi porta gravida at eget metus.
Nulla vitae elit libero, a pharetra augue.

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.

Vestibulum id ligula porta felis euismod semper.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas sed diam eget risus varius blandit sit amet non magna.

Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.

HyperText Markup Language (HTML): The language used to describe and define the content of a Web page
Cascading Style Sheets (CSS): Used to describe the appearance of Web content
JavaScript (JS): The programming language used to build advanced Web sites and applications

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.

Images

Quisque consequat sapien eget quam rhoncus, sit amet laoreet diam tempus. Aliquam aliquam metus erat, a pulvinar turpis suscipit at.

Tables

Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Name	Upvotes	Downvotes
Alice	10	11
Bob	4	3
Charlie	7	9
Totals	21	23

Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo.

Math

Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id ² dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo.

You can insert footnote marks using [^1], [^2], etc and write the footnote text at the bottom of your file like this: [^1]: You can also insert footnote marks... ↩
Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. ↩