Styx-themes documentation

Preface

This document contains automatically generated documentation for themes included in the styx-themes package set.

It is generated with a nix expression using each theme metadata and configuration interface.

Styx documentation

1. Agency

Port of the Agency theme for Styx.

Agency Theme is a one page portfolio for companies and freelancers based on the original Bootstrap theme by David Miller. This Hugo theme features several content sections, a responsive portfolio grid with hover effects, full page portfolio item modals, a timeline, and a contact form.

1.1. Configuration interface

about.endpoint

Description

Last about bubble text.

Type

string

Default

"Be part<br>of our<br>story!"

about.items

Description

List of about events as attribute sets, requires img, date, title, and content. If set to the empty list [], the about area will not be displayed.

Type

list of attribute sets

Default

[]

Example

[{"content":"Lorem ipsum dolor sit amet consectetur.","date":"2009-2011","img":"1.jpg","title":"Our Humble Beginnings"}]

about.subtitle

Description

Subtitle of the about area.

Type

string

Default

"Lorem ipsum dolor sit amet consectetur."

about.title

Description

Title of the about area.

Type

string

Default

"About"

clients

Description

List of clients as attribute sets, requires logo and link. If set to the empty list [], the clients area will not be displayed.";

Type

list of attribute sets

Default

[]

Example

[{"link":"#","logo":"envato.jpg"},{"link":"#","logo":"designmodo.jpg"}]

contact.buttonText

Description

Text of the contact area button.

Type

string

Default

"Send message"

contact.enable

Description

Whether to enable contact area.

Type

boolean

Default

false

Example

true

contact.form.email

Description

Contact form email input label

Type

attribute set

Default

{"text":"Your Email *","warning":"Please enter your email address."}

contact.form.message

Description

Contact form message input label

Type

attribute set

Default

{"text":"Your Message *","warning":"Please enter a message."}

contact.form.name

Description

Contact form name input label

Type

attribute set

Default

{"text":"Your Name *","warning":"Please enter your name."}

contact.form.phone

Description

Contact form phone input label

Type

attribute set

Default

{"text":"Your Phone *","warning":"Please enter your phone number."}

contact.form.receiver

Description

Contact area from receiver mail address.

Type

string

Default

"your@email.com"

contact.subtitle

Description

Subtitle of the contact area.

Type

string

Default

"Lorem ipsum dolor sit amet consectetur."

contact.title

Description

Title of the contact area.

Type

string

Default

"Lorem ipsum dolor sit amet consectetur."

footer.copyright

Description

Footer copyright text.

Type

string

Default

"Published under the Apache License 2.0."

footer.quicklinks

Description

Footer links.

Type

list of attribute sets

Default

[]

Example

[{"link":"#","text":"Privacy Policy"},{"link":"#","text":"Terms of Use"}]

footer.social

Description

Social media links to display in the footer.

Type

list of attribute sets

Default

[]

Example

[{"icon":"fa-twitter","link":"#"},{"icon":"fa-facebook","link":"#"},{"icon":"fa-linkedin","link":"#"}]

hero.buttonText

Description

Button text of the hero area.

Type

string

Default

"Tell me more"

hero.subtitle

Description

Subtitle of the hero area.

Type

string

Default

"It's nice to meet you"

hero.title

Description

Title of the hero area.

Type

string

Default

"Welcome To Our Studio!"

menu.append

Description

Menu items to add at the end of the navigation.

Type

list of attribute sets

Default

[]

Example

[{"name":"Styx","url":"https://styx-static.github.io/styx-site/"}]

menu.prepend

Description

Menu items to add at the beginning of the navigation.

Type

list of attribute sets

Default

[]

Example

[{"name":"Styx","url":"https://styx-static.github.io/styx-site/"}]

portfolio.items

Description

List of portfolio projects as attribute sets, requires title, subtitle, img, preview, client, clientLink, category and content. If set to the empty list [], the portfolio area will not be displayed.

Type

list of attribute sets

Default

[]

Example

[{"category":"Graphic Design","client":"Start Bootstrap","clientLink":"#","content":"Lorem ipsum dolor sit amet consectetur.","date":"2014-07-05","img":"roundicons.png","preview":"roundicons-preview.png","subtitle":"Lorem ipsum dolor sit amet consectetur.","title":"Round Icons"}]

portfolio.subtitle

Description

Subtitle of the portgolio area.

Type

string

Default

"Lorem ipsum dolor sit amet consectetur."

portfolio.title

Description

Title of the portfolio area.

Type

string

Default

"Services"

services.items

Description

List of services as attribute sets, requires title, icon and content attributes. If set to the empty list [], the services area will not be displayed.

Type

list of attribute sets

Default

[]

Example

[{"content":"Lorem ipsum dolor sit amet consectetur.","icon":"fa-shopping-cart","title":"E-Commerce"}]

services.subtitle

Description

Subtitle of the services area.

Type

string

Default

"Lorem ipsum dolor sit amet consectetur."

services.title

Description

Title of the services area.

Type

string

Default

"Services"

site.author

Description

Content of the author meta tag.

Type

string

Default

"Your name"

site.description

Description

Content of the description meta tag.

Type

string

Default

"Your description"

site.title

Description

Title of the site.

Type

string

Default

"The Agency"

team.description

Description

Description of the team

Type

string

Default

"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde."

team.members

Description

List of team members as attribute sets, requires img, name, position, and social. social have the same format to footer.social. If set to the empty list [], the team area will not be displayed.";

Type

list of attribute sets

Default

[]

Example

[{"img":"1.jpg","name":"Kay Garland","position":"Lead Designer","social":[{"link":"#","type":"twitter"},{"link":"#","type":"facebook"},{"link":"#","type":"linkedin"}]}]

team.subtitle

Description

Subtitle of the team area.

Type

string

Default

"Lorem ipsum dolor sit amet consectetur."

team.title

Description

Title of the team area.

Type

string

Default

"About"

1.2. Example site source

/*-----------------------------------------------------------------------------
   Init

   Initialization of Styx, should not be edited
-----------------------------------------------------------------------------*/
{ lib, styx, runCommand, writeText
, styx-themes
, extraConf ? {}
}@args:

rec {

  /* Library loading
  */
  styxLib = import styx.lib args;


/*-----------------------------------------------------------------------------
   Themes setup

-----------------------------------------------------------------------------*/

  /* list the themes to load, paths or packages can be used
     items at the end of the list have higher priority
  */
  themes = [
    ../.
  ];

  /* Loading the themes data
  */
  themesData = styxLib.themes.load {
    inherit styxLib themes;
    templates.extraEnv = { inherit data pages; };
    conf.extra = [ ./conf.nix extraConf ];
  };

  /* Bringing the themes data to the scope
  */
  inherit (themesData) conf lib files templates;


/*-----------------------------------------------------------------------------
   Data

   This section declares the data used by the site
-----------------------------------------------------------------------------*/

  data = {

  };


/*-----------------------------------------------------------------------------
   Pages

   This section declares the pages that will be generated
-----------------------------------------------------------------------------*/

  pages = rec {
    index = {
      path     = "/index.html";
      template = templates.index;
      layout   = lib.id;
    };
  };


/*-----------------------------------------------------------------------------
   Site rendering

-----------------------------------------------------------------------------*/

  pagesList = [ pages.index ];

  site = lib.generateSite { inherit files pagesList; };

}

2. Generic templates

Generic theme providing a template framework and templates for bootstrap components.

2.1. Documentation

Generic-templates is a special theme providing a template framework and meant to be used as a base for other themes.

Its main purpose is to be composed with other theme to reduce the amount of boilerplate code.

Showcase and Hyde themes take advantage of generic-templates.

This theme also provide templates for some bootstrap components.

2.1.1. Layout structure

Generic templates provide a templates.layout template, divided in many partials that allow to quickly start or adapt a design to styx.

layout
- partials.doctype: The doctype can be changed via the configuration interface theme.html.doctype.
- partials.html
  - partials.head.default: See below for head templates division.
  - partials.body
    
    partials.content-pre: Pre content template, usually holds navigation bar, empty by default.
    
    partials.content: Main content template, should be overriden to needs.
    
    partials.content-post: Post content template, usually holds footer, empty by default.
    
    partials.js
    
    lib.js.jquery: Loading jquery javascript, controlled by conf.theme.lib.jquery.enable.
    
    lib.js.bootstrap: Loading bootstrap javascript, controlled by theme.lib.bootstrap.enable.
    
    partials.js-custom: Should be overriden to load custom javascript files, empty by default.
    
    partials.js-extra: Add custom javascript that are set in the page attribute set extraJS attribute, allow to have custom javascript per page.

Head templates division:

partials.head.default
- partials.head.title-pre
  - partials.head.meta: Include a few default meta tags, can be overriden to fit needs.
- partials.head.title
- partials.head.title-post
  - partials.head.feed: Create a link for pages.feed if it exists by default, can be overriden to fit needs.
  - partials.head.css
    
    lib.css.bootstrap: Loading bootstrap css, controlled by conf.theme.lib.bootstrap.enable.
    
    lib.css.font-awesome: Loading font-awesome css, controlled by conf.theme.lib.font-awesome.enable.
    
    partials.head.css-custom: Should be overriden to load custom css files, empty by default.
    
    partials.head.css-extra: Add custom css that are set in the page attribute set extraCSS attribute, allow to have custom css per page.
  - partials.head.title-post-extra: Can be overriden to fit needs, empty by default.

2.1.2. Overriding a template

Any template from any theme can be overriden to fit needs.

To override a template, just copy it to a custom theme and edit it:

Overriding the partials.content template

$ styx new theme foo --in ./themes (1)
$ mkdir -p themes/foo/templates/partials/ (2)
$ cp $(nix-build -A --no-out-link styx-themes.generic-templates '<nixpkgs>')/templates/partials/content.nix themes/foo/templates/partials/content.nix (3)

1	Creating a new `foo` theme.
2	Create the `themes/foo/templates/partials/` directory.
3	Copy the generic-templates `templates/partials/content.nix` to the foo theme. This code use nix-build to directly access the generic-templates source from the nix store.

Combining generic-templates and my-theme

themes = [
  styx-themes.generic-templates
  ./themes/my-theme
];

2.1.3. Useful templates

Examples in this section use conf.siteUrl as http://domain.org.

templates.url

Convert a path starting with / to a full url, default implemetation use conf.siteUrl.

Example

templates.url "/foo.html"

Results in

http://domain.org/foo.html

templates.purl

purl is for page url, convert a page to its full url, default implementation use templates.url.

Example

templates.purl pages.about

Results in

http://domain.org/about.html

templates.tag.ilink

ilink is for internal link, takes a content and a page or a path and generate a link (a tag).

Example

templates.tag.ilink { page = pages.about; content = "about"; }

Results in

<a href="http://domain.org/about.html">about</a>

Example 2

templates.tag.ilink { path = "/foo"; content = "foo"; }

Results in

<a href="http://domain.org/foo">foo</a>

templates.tag.link-atom

Generate a link tag for an atom feed.

Example

templates.tag.link-atom { href = "/feed.atom"; }

Results in

<link href="http://domain.org/feed.atom" rel="alternate" type="application/atom+xml" />

templates.tag.link-css

Generate a link tag for an css file.

Example

templates.tag.link-css { href = "/css/style.css"; }

Results in

<link href="http://domain.org/css/style.css" rel="stylesheet" type="text/css" />

templates.icon.bootstrap

Generate a bootstrap glyphicon markup from a glyphicon code.

Example

templates.icon.bootstrap "picture"

Results in

<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>

templates.icon.font-awesome

Generate a font-awesome icon markup from an icon code.

templates.icon.font-awesome "code"

Results in

<i class="fa fa-code" aria-hidden="true"></i>

2.1.4. Bootstrap components

templates.bootstrap.alert

Generate a bootstrap alert.

Example

templates.bootstrap.alert { type = "success"; content = "alert"; }

Results in

<div class="alert alert-success" role="alert">alert</div>

templates.bootstrap.badge

Generate a bootstrap badge.

Example

templates.bootstrap.badge 42

Results in

<span class="badge">42</span>

templates.bootstrap.breadcrumbs

Generate a page breadcrumbs, page page attribute set should have a breadcrumbs attribute containing a list of pages.

Example

templates.bootstrap.breadcrumbs page.about

Results in

<ol class="breadcrumb">
<li><a href="http://domain.org/index.html">Home</a></li>
<li class="active">About</li>
</ol>

templates.bootstrap.label

Generate a bootstrap label.

Example

templates.bootstrap.label { content = "default"; type = "default"; }

Results in

<span class="label label-default">default</span>

templates.bootstrap.navbar.default

Generates navbar, meant to be flexible it is divided in multiple parts.

Example

templates.bootstrap.navbar.default {
  inverted = true;
  brand = ''<a class="navbar-brand" href="#">Project Name</a>'';
  content = [
    (templates.bootstrap.navbar.nav {
      items = [
        { title = "Home";    path = "/#"; }
        { title = "About";   path = "/#about"; }
        { title = "Contact"; path = "/#contact"; }
      ];
      # Hack for demonstration purposes, the current page attribute set should be passed
      currentPage = { title = "Home"; path = "/#"; };
    })
  ];
}

Results in

<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Project Name</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="http://domain.org/#">Home</a></li>
<li><a href="http://domain.org/#about">About</a></li>
<li><a href="http://domain.org/#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>

templates.bootstrap.pager

Generate a pager. pages should be a list of pages.

Example

templates.bootstrap.pager {
  pages = genList (x: { path = "/#${toString (x + 1)}"; }) 10;
  index = 5;
}

Results in

<nav aria-label="...">
<ul class="pager">
<li><a href="http://domain.org/#4">Previous</a></li>
<li><a href="http://domain.org/#6">Next</a></li>
</ul>
</nav>

templates.bootstrap.pagination

generate a pagination. pages should be a list of pages.

Example

templates.bootstrap.pagination {
  pages = genList (x: { path = "/#${toString (x + 1)}"; }) 10;
  index = 5;
}

Results in

<nav aria-label="Page navigation" class="pagination">
<ul class="pagination">
<li>
<a href="http://domain.org/#4" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li><a href="http://domain.org/#1">1</a></li>
<li><a href="http://domain.org/#2">2</a></li>
<li><a href="http://domain.org/#3">3</a></li>
<li><a href="http://domain.org/#4">4</a></li>
<li class="active"><a href="http://domain.org/#5">5</a></li>
<li><a href="http://domain.org/#6">6</a></li>
<li><a href="http://domain.org/#7">7</a></li>
<li><a href="http://domain.org/#8">8</a></li>
<li><a href="http://domain.org/#9">9</a></li>
<li><a href="http://domain.org/#10">10</a></li>
<li>
<a href="http://domain.org/#6" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

templates.bootstrap.panel

Generate a bootstrap panel.

Example

templates.bootstrap.panel {
  type    = "danger";
  heading = ''<h3 class="panel-title">Panel title</h3>'';
  body    = "Panel content"; }

Results in

<div class="panel panel-danger">
<div class="panel-heading"><h3 class="panel-title">Panel title</h3></div>
<div class="panel-body"><h3 class="panel-title">Panel title</h3></div>
</div>

templates.bootstrap.progressbar

Generate a bootstrap progress bar.

Example

templates.bootstrap.progress-bar { value = 60; }

Results in

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete</span></div>
</div>

2.2. Configuration interface

html.doctype

Description

Doctype declaration to use.

Type

one of "html5", "html4", "xhtml1"

Default

"html5"

lib.bootstrap.enable

Description

Whether to enable bootstrap.

Type

boolean

Default

false

Example

true

lib.bootstrap.version

Description

Selects bootstrap version to use.

Type

string

Default

"3.3.7"

lib.font-awesome.enable

Description

Whether to enable font awesome.

Type

boolean

Default

false

Example

true

lib.font-awesome.version

Description

Selects font-awesome version to use.

Type

string

Default

"4.7.0"

lib.jquery.enable

Description

Whether to enable jQuery.

Type

boolean

Default

false

Example

true

lib.jquery.version

Description

Selects jQuery version to use.

Type

string

Default

"3.1.1"

site.title

Description

String to append to the site title tag contents.

Type

string

Default

"Generic Templates"

2.3. Example site source

/*-----------------------------------------------------------------------------
   Init

   Initialization of Styx, should not be edited
-----------------------------------------------------------------------------*/
{ lib, styx, runCommand, writeText
, styx-themes
, extraConf ? {}
}@args:

rec {

  /* Library loading
  */
  styxLib = import styx.lib args;


/*-----------------------------------------------------------------------------
   Themes setup

-----------------------------------------------------------------------------*/

  /* list the themes to load, paths or packages can be used
     items at the end of the list have higher priority
  */
  themes = [ ../. ];

  /* Loading the themes data
  */
  themesData = styxLib.themes.load {
    inherit styxLib themes;
    templates.extraEnv = { inherit data pages; };
    conf.extra = [ ./conf.nix extraConf ];
  };

  /* Bringing the themes data to the scope
  */
  inherit (themesData) conf lib files templates;


/*-----------------------------------------------------------------------------
   Data

   This section declares the data used by the site
-----------------------------------------------------------------------------*/

  data = {
    navbar = with pages; [ theme basic starter ];
  };


/*-----------------------------------------------------------------------------
   Pages

   This section declares the pages that will be generated
-----------------------------------------------------------------------------*/

  /* http://getbootstrap.com/getting-started/#examples
  */

  pages = rec {

    basic = {
      layout   = templates.layout;
      template = templates.examples.basic;
      path     = "/basic.html";
      # example of adding extra css / js to a page
      #extraJS  = [ { src = "/pop.js"; crossorigin = "anonymous"; } ];
      #extraCSS = [ { href = "/pop.css"; } ];
      title    = "Bootstrap 101 Template";
      navbarTitle = "Basic";
    };

    starter = {
      layout   = templates.layout;
      template = templates.examples.starter;
      path     = "/starter.html";
      title    = "Starter Template for Bootstrap";
      navbarTitle = "Starter";
    };

    theme = {
      layout   = templates.layout;
      template = templates.examples.theme;
      path     = "/index.html";
      title    = "Theme Template for Bootstrap";
      navbarTitle = "Theme";
    };

  };


/*-----------------------------------------------------------------------------
   Site

-----------------------------------------------------------------------------*/

  /* Converting the pages attribute set to a list
  */
  pagesList = lib.pagesToList { inherit pages; };

  /* Generating the site
  */
  site = lib.generateSite { inherit files pagesList; };

}

3. Hyde

Port of the Hyde theme.
Requires the generic-templates theme.

3.1. Configuration interface

colorScheme

Description: Selects the color scheme. Set to null for default black scheme.
Type: null or one of "08", "09", "0a", "0b", "0c", "0d", "0e", "0f"

description

Description

Content of the description meta tag.

Type

string

Default

"An elegant open source and mobile first theme for styx made by <a href=\"http://twitter.com/mdo\">@mdo</a>. Originally made for Jekyll.\n"

itemsPerPage

Description

Number of posts per page.

Type

integer

Default

layout.reverse

Description

Whether to enable reverse layout.

Type

boolean

Default

false

Example

true

3.2. Example site source

/*-----------------------------------------------------------------------------
   Init

   Initialization of Styx, should not be edited
-----------------------------------------------------------------------------*/
{ lib, styx, runCommand, writeText
, styx-themes
, extraConf ? {}
}@args:

rec {

  /* Library loading
  */
  styxLib = import styx.lib args;


/*-----------------------------------------------------------------------------
   Themes setup

-----------------------------------------------------------------------------*/

  /* list the themes to load, paths or packages can be used
     items at the end of the list have higher priority
  */
  themes = [
    styx-themes.generic-templates
    ../.
  ];

  /* Loading the themes data
  */
  themesData = styxLib.themes.load {
    inherit styxLib themes;
    templates.extraEnv = { inherit data pages; };
    conf.extra = [ ./conf.nix extraConf ];
  };

  /* Bringing the themes data to the scope
  */
  inherit (themesData) conf lib files templates;


/*-----------------------------------------------------------------------------
   Data

   This section declares the data used by the site
-----------------------------------------------------------------------------*/

  data = with lib; {
    # loading a single page
    about  = loadFile { dir = ./data/pages; file = "about.md"; };
    # loading a list of contents
    posts  = let
      postsList = loadDir { dir = ./data/posts; };
      draftsList = optionals (extraConf ? renderDrafts) (loadDir { dir = ./data/drafts; isDraft = true; });
    in sortBy "date" "dsc" (postsList ++ draftsList);
    menu = [ pages.about ];
  };


/*-----------------------------------------------------------------------------
   Pages

   This section declares the pages that will be generated
-----------------------------------------------------------------------------*/

  pages = with lib; rec {

    /* Index page
       Splitting a list of items through multiple pages
       For more complex needs, mkSplitCustom is available
    */
    index = mkSplit {
      title        = "Home";
      basePath     = "/index";
      itemsPerPage = conf.theme.itemsPerPage;
      template     = templates.index;
      data         = posts;
    };

    /* About page
       Example of generating a page from imported data
    */
    about = {
      path     = "/about.html";
      template = templates.page.full;
    } // data.about;

    /* Feed page
    */
    feed = {
      path     = "/feed.xml";
      template = templates.feed.atom;
      # Bypassing the layout
      layout   = id;
      items    = take 10 posts;
    };

    /* 404 error page
    */
    e404 = {
      path     = "/404.html";
      template = templates.e404;
    };

    /* Posts pages (as a list of pages)
    */
    posts = mkPageList {
      data        = data.posts;
      pathPrefix  = "/posts/";
      template    = templates.post.full;
      breadcrumbs = [ (head pages.index) ];
    };

    /* Multipages handling
    */
    postsMultiTail = mkMultiTail {
      data        = data.posts;
      pathPrefix  = "/posts/";
      template    = templates.post.full;
      breadcrumbs = [ (head pages.index) ];
    };

  };


/*-----------------------------------------------------------------------------
   Site rendering

-----------------------------------------------------------------------------*/

  # converting pages attribute set to a list
  pagesList = lib.pagesToList {
    inherit pages;
    default = { layout = templates.layout; };
  };

  site = lib.generateSite { inherit files pagesList; };

}

4. Orbit

Orbit theme port - great looking resume/CV template designed for developers by Xiaoying Riley.

4.1. Configuration interface

colorScheme

Description

Theme color scheme.

Type

one of 1, 2, 3, 4, 5, 6

Default

contact.items.items

Description

List of contact link as attribute sets, requires type, icon, url and title. If set to the empty list [], the skills area will not be displayed.

Type

list of attribute sets

Default

[]

Example

[{"icon":"envelope","title":"john.doe@website.com","type":"email","url":"mailto: yourname@email.com"}]

copyright

Description

Footer copyright text.

Type

string

Default

"copyright"

education.items

Description

List of education items as attribute sets, requires degree, college and dates. If set to the empty list [], the education area will not be displayed.

Type

list of attribute sets

Default

[]

Example

[{"college":"University of London","dates":"2006 - 2010","degree":"MSc in Computer Science"}]

education.title

Description

Title of the education section.

Type

string

Default

"Education"

experiences.icon

Description

Code of the font awesome icon of the experience title.

Type

string

Default

"briefcase"

experiences.items

Description

List of experiences as attribute sets, requires position, dates, company and content. If set to the empty list [], the experiences area will not be displayed.

Type

list of attribute sets

Default

[]

Example

[{"company":"Startup Hubs, San Francisco","content":"lorem ipsum","dates":"2015 - Present","position":"Lead Developer"}]

experiences.title

Description

Title of the experiences section

Type

string

Default

"Experiences"

interests.items

Description

List of interests. If set to the empty list [], the interests area will not be displayed.

Type

list of strings

Default

[]

Example

["Climbing","Snowboarding","Cooking"]

interests.title

Description

Title of the interests section.

Type

string

Default

"Interests"

languages.items

Description

List of languages as attribute sets, requires language, and level. If set to the empty list [], the languages area will not be displayed.

Type

list of attribute sets

Default

[]

Example

[{"language":"English","level":"Native"}]

languages.title

Description

Title of the languages section.

Type

string

Default

"Languages"

profile

Description

Profile information, must have name, tagline and image attributes.

Type

attribute set

Default

{"image":"profile.png","name":"John Doe","tagline":"Full Stack Developer"}

projects.icon

Description

Code of the font awesome icon of the projects title.

Type

string

Default

"archive"

projects.items

Description

List of projects as attribute sets, requires title, url and content. If set to the empty list [], the projects area will not be displayed.

Type

list of attribute sets

Default

[]

Example

[{"content":"lorem ipsum","title":"Simple FAQ Theme for Hugo","url":"https://github.com/aerohub/hugo-faq-theme"}]

projects.title

Description

Title of the projects section

Type

string

Default

"Projects"

site.author

Description

Content of the author meta tag.

Type

string

Default

"John Doe"

site.description

Description

Content of the description meta tag.

Type

string

Default

"Lorem ipsum..."

site.title

Description

Title of the site.

Type

string

Default

"Orbit theme"

skills.icon

Description

Code of the font awesome icon of the skills title.

Type

string

Default

"rocket"

skills.items

Description

List of skills as attribute sets, requires title and level. If set to the empty list [], the skills area will not be displayed.

Type

list of attribute sets

Default

[]

Example

[{"level":"98%","skill":"Python & Django"},{"level":"50%","skill":"Javascript & jQuery"}]

skills.title

Description

Title of the skills section.

Type

string

Default

"Skills & Proficiency"

summary.content

Description: content of the profile area as HTML text. if set to null, the summary area will not be displayed.
Type: null or string

summary.icon

Description

Code of the font awesome icon of the summary title.

Type

string

Default

"user"

summary.title

Description

Title of the summary section

Type

string

Default

"Career profile"

4.2. Example site source

/*-----------------------------------------------------------------------------
   Init

   Initialization of Styx, should not be edited
-----------------------------------------------------------------------------*/
{ lib, styx, runCommand, writeText
, styx-themes
, extraConf ? {}
}@args:

rec {

  /* Library loading
  */
  styxLib = import styx.lib args;


/*-----------------------------------------------------------------------------
   Themes setup

-----------------------------------------------------------------------------*/

  /* list the themes to load, paths or packages can be used
     items at the end of the list have higher priority
  */
  themes = [
    ../.
  ];

  /* Loading the themes data
  */
  themesData = styxLib.themes.load {
    inherit styxLib themes;
    templates.extraEnv = { inherit data pages; };
    conf.extra = [ ./conf.nix extraConf ];
  };

  /* Bringing the themes data to the scope
  */
  inherit (themesData) conf lib files templates;


/*-----------------------------------------------------------------------------
   Data

   This section declares the data used by the site
-----------------------------------------------------------------------------*/

  data = {
  };


/*-----------------------------------------------------------------------------
   Pages

   This section declares the pages that will be generated
-----------------------------------------------------------------------------*/

  pages = {
    index = {
      path     = "/index.html";
      template = templates.index;
      layout   = lib.id;
    };
  };


/*-----------------------------------------------------------------------------
   generateSite arguments preparation

-----------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------
   Site rendering

-----------------------------------------------------------------------------*/

  pagesList = [ pages.index ];

  site = lib.generateSite { inherit files pagesList; };

}

5. Showcase

A theme to show Styx main functionalities. This theme example site includes:

navigation bar
Split pages
Multipages
Taxonomies
Atom feed
Sitemap
Breadcrumbs
Archives page

5.1. Configuration interface

archives.itemsPerPage

Description

Number of posts on the archive page.

Type

integer

Default

index.itemsPerPage

Description

Number of posts on the index page.

Type

integer

Default

site.copyright

Description

Site copyright, added in the footer.

Type

string

Default

"&copy; 2017"

site.description

Description

Site description, added in the footer.

Type

string

Default

"Write a description for your new site here."

5.2. Example site source

/*-----------------------------------------------------------------------------
   Init

   Initialization of Styx, should not be edited
-----------------------------------------------------------------------------*/
{ lib, styx, runCommand, writeText
, styx-themes
, extraConf ? {}
}@args:

rec {

  /* Library loading
  */
  styxLib = import styx.lib args;


/*-----------------------------------------------------------------------------
   Themes setup

-----------------------------------------------------------------------------*/

  /* list the themes to load, paths or packages can be used
     items at the end of the list have higher priority
  */
  themes = [
    styx-themes.generic-templates
    ../.
  ];

  /* Loading the themes data
  */
  themesData = styxLib.themes.load {
    inherit styxLib themes;
    templates.extraEnv = { inherit data pages; };
    conf.extra = [ ./conf.nix extraConf ];
  };

  /* Bringing the themes data to the scope
  */
  inherit (themesData) conf lib files templates;


/*-----------------------------------------------------------------------------
   Data

   This section declares the data used by the site
-----------------------------------------------------------------------------*/

  data = with lib; {

    # loading a single page
    about  = loadFile { dir = ./data/pages; file = "about.md"; };

    # loading a list of contents
    posts  = let
      postsList = loadDir { dir = ./data/posts; };
      # include drafts only when renderDrafts is true
      draftsList = optionals (conf ? renderDrafts) (loadDir { dir = ./data/drafts; isDraft = true; });
    in sortBy "date" "dsc" (postsList ++ draftsList);

    # Navbar data
    navbar = [
      pages.about
      (head pages.postsArchive)
      (pages.feed // { navbarTitle = "RSS"; })
      { title = "Styx"; url = "https://styx-static.github.io/styx-site/"; }
    ];

    # posts taxonomies
    taxonomies.posts = mkTaxonomyData {
      data = pages.posts;
      taxonomies = [ "tags" "level" ];
    };

  };


/*-----------------------------------------------------------------------------
   Pages

   This section declares the pages that will be generated
-----------------------------------------------------------------------------*/

  pages = with lib.pages; rec {

    /* Index page
       Example of splitting a list of items through multiple pages
       For more complex needs, mkSplitCustom is available
    */
    index = mkSplit {
      title           = conf.theme.site.title;
      basePath        = "/index";
      itemsPerPage    = conf.theme.index.itemsPerPage;
      template        = templates.index;
      data            = pages.posts;
      breadcrumbTitle = templates.icon.font-awesome "home";
    };

    /* About page
       Example of generating a page from a piece of data
    */
    about = {
      path        = "/about.html";
      template    = templates.page.full;
      # setting breadcrumbs
      breadcrumbs = [ (lib.head index) ];
    } // data.about;

    /* RSS feed page
    */
    feed = {
      path     = "/feed.xml";
      template = templates.feed.atom;
      # Bypassing the layout
      layout   = lib.id;
      items    = lib.take 10 pages.posts;
    };

    /* 404 error page
    */
    e404 = {
      path     = "/404.html";
      template = templates.e404;
      title    = "404";
    };

    /* Posts pages (as a list of pages)

       mkPageList is a convenience function to generate a list of page from a
       list of data
    */
    posts = mkPageList {
      data        = data.posts;
      pathPrefix  = "/posts/";
      template    = templates.post.full;
      breadcrumbs = [ (lib.head pages.index) ];
    };

    postsArchive = mkSplit {
      title        = "Archives";
      basePath     = "/archive/post";
      template     = templates.archive;
      breadcrumbs  = [ (lib.head index) ];
      itemsPerPage = conf.theme.archives.itemsPerPage;
      data         = pages.posts;
    };

    /* Subpages of multi-pages posts

       subpages are not included in posts because we do not want to have the
       subpages in the rss feed or posts list
    */
    postsMultiTail = mkMultiTail {
      data        = data.posts;
      pathPrefix  = "/posts/";
      template    = templates.post.full;
      breadcrumbs = [ (lib.head pages.index) ];
    };

    /* Taxonomy related pages
    */
    taxonomies = mkTaxonomyPages {
      data             = data.taxonomies.posts;
      taxonomyTemplate = templates.taxonomy.full;
      termTemplate     = templates.taxonomy.term.full;
    };

  };

  /* Sitemap
     The sitemap is out of the pages attribute set because it has to loop
     through all the pages
  */
  sitemap = {
    path     = "/sitemap.xml";
    template = templates.sitemap;
    layout   = lib.id;
    pages    = lib.pagesToList { inherit pages; };
  };

/*-----------------------------------------------------------------------------
   Site rendering

-----------------------------------------------------------------------------*/

  pagesList =
    # converting pages attribute set to a list
    (lib.pagesToList {
      inherit pages;
      default.layout = templates.layout;
    })
    ++ [ sitemap ];

  /* Substitutions
  */
  substitutions = {
    siteUrl = conf.siteUrl;
  };

  site = lib.generateSite {
    inherit files pagesList substitutions;
    meta = (import ./meta.nix) { inherit lib; };
  };

}