Netdev 0x17

A port of the current layout of netdevconf.info/0x16 to Jekyll.

Built upon the Centrarium theme.

Instructions

Just download this project and add all the files to your project. Add news to the news/_posts/ directory, and sessions to sessions/<type>/_drafts. Create your pages with the proper Jekyll front matter (see posts bellow for an example).

You can run the page locally without installing the environment by running a docker image:

export JEKYLL_VERSION=3.8
docker run --rm \
  --volume="$PWD:/srv/jekyll:Z" \
  -it -p 4000:4000 \
  jekyll/jekyll:$JEKYLL_VERSION \
  jekyll serve

This project uses Github Actions for build and deployment of both staging and production. It used to listen for pushes/merges to the branches following the format 0x17-staging for staging and 0x17 for production. The master branch will also deploy to github-pages.

During the staging integration the hotCPR instance will be curl'd for session information. In case of differences a new commit will be made on the staging branch with the new information.

Github Secrets

The CI/CD pipeline makes use of some sensitive information that must be secured with Github secrets. The following secrets are required:

HOTCRP_URL: ip and port of the 0x16 hotCPR instance
HOTCRP_USER: the email of an user with admin privileges
HOTCRP_PASSWORD: the user password

HOTCRP_0x17_URL: ip and port of the 0x17 hotCPR instance
HOTCRP_0x17_USER: the email of an user with admin privileges
HOTCRP_0x17_PASSWORD: the user password

DEPLOY_HOST: the VPS ip address / domain name for production deploy
DEPLOY_PATH: the VPS location for production deploy
DEPLOY_PORT: the VPS ssh port (usually 22) for production deploy
DEPLOY_USER: the VPS user with for production deploy
DEPLOY_PRIV_KEY: the private key used for deploy (the user must have this key authorized)

STAGING_HOST: the VPS ip address / domain name for staging deploy
STAGING_PATH: the VPS location for staging deploy
STAGING_PORT: the VPS ssh port (usually 22) for staging deploy
STAGING_USER: the VPS user with for staging deploy
STAGING_PRIV_KEY: the private key used for deploy (the user must have this key authorized)

The VPS credentials are used only for scp transfer.

Posts

The netdevconf site presents two types of post: news and sessions. The former follows the idea of a blog post, with a defined date and title. The latter, however, does not benefit from date information and may be listed in order of creation, being closer to the concept of a draft in Jekyll.

news

To add a news post, simply add a file in the news/_posts directory following the convention YYYY-MM-DD-name-of-news.md and include the necessary front matter. Take a look at the source examples to get an idea about how it works.

---
title: Post Sample
---

{% comment %}
  # news/_posts/2022-09-20-post-example.md
  This block is a comment and will not be rendered in the final page.
{% endcomment %}

Your news content goes here

sessions

Sessions may be created as drafts. Just create a file in sessions/<type>/_drafts where <type> is the session type (singular lowercase).

---
title: The session title
label: The session label
authors:
  - Author 1
  - Author 2
  - Author 3
contents:
  - type: video | paper | report | slides
    href: url1
  - type: video | paper | report | slides
    href: url2
---

{% comment %}
  # session/type/_drafts/name-of-your-file.md
{% endcomment %}

The description goes here.

Categories

You can, alternatively, place your files in a _posts or _drafts folder in the root directory of the project. In that case, the front matter of each file must define the categories accordingly:

# news:
category: news

# sessions
categories: sessions <type>

Not doing so will lead to Jekyll not rendering your content.

Important Variables

Here are the important variables from _sass/base/_variables.scss you can tweak to customize the theme to your liking:

• $base-font-family: The font-family of the body text. Make sure to @import any new fonts!
• $heading-font-family: The font-family of the headers. Make sure to @import any new fonts!
• $base-font-size: The base font-size. Defaults to $em-base from Bourbon (bourbon/settings/_px-to-em.scss).
• $base-font-color: The color for the body text.
• $action-color: The color for links in the body text.
• $highlight-color: The color for the footer and page headers (when no cover image provided).

Configuration

Most configuration options can be found in _config.yml.

Site Settings

• title: The title for the site. Displayed in the navigation menu, the index.html header, and the footer.
• subtitle: The subtitle of the site. Displayed in the index.html header.
• description: The description of the site. Used for search engine results and displayed in the footer.
• baseurl: The subpath of the site (e.g. /blog/).
• url: The base hostname and protocol for the site.
• cover: The relative path to the site's cover image.

Build Settings

• markdown: Markdown parsing engine. Default is kramdown.

Syntax Highlighting Settings

Inside of a post, you can enable syntax highlighting with the {% highlight <language> %} Liquid tag. For example:

{% highlight javascript %}
function demo(string, times) {
  for (var i = 0; i < times; i++) {
    console.log(string);
  }
}
demo("hello, world!", 10);
{% endhighlight %}

You can change the HighlightJS theme in _config.yml:

highlightjs_theme: "monokai_sublime"

Category Descriptions

Session types are identified as a second category to sessions. They should be defined alongside the news and sessions categories with desc: "session type". Session files tagged with a type not correctly defined in descriptions will not be displayed at the Sessions page.

# Category descriptions
descriptions:
  - cat: news
    desc: "Netdev News"

  - cat: sessions
    desc: "NetdevConf Sessions"

  # Session types
  - cat: talk
    desc: "session type"

  - cat: tutorial
    desc: "session type"

  - cat: workshop
    desc: "session type"

Sponsors

Sponsors are described in the sponsors list. The grouping is not strictly necessary, i.e. you can add definitions in any given order, but be aware that Jekyll will try to group sponsors in the order of definition. If you define a silver sponsor before any gold one the resulting page will show silver sponsors before gold sponsors.

sponsors:
  - type: platinum | gold | silver | bronze | media
    url: Sponsor's site URL
    img: The logo location relative to assets/sponsors/ folder
    alt: The logo alt

Custom Page-Specific Javascript

You can add page-specific javascript files by adding them to the top-level /js directory and including the filename in the custom_js page's configuration file:

# Custom js (for individual pages)
---
layout: post
title:  "Dummy Post"
date:   2015-04-18 08:43:59
author: Ben Centra
categories: Dummy
custom_js:
- Popmotion
- Vue
---

The /js/ directory would contain the corresponding files:

$ ls js/
Popmotion.js Vue.js

License

MIT. See LICENSE.MD.