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.

1. Agency

Port of the Agency theme for Styx.

Originally made by digitalcraftsman.

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.



Agency

1.1. Documentation

This theme is a single page website. For more flexibility it split each section of the main page into dedicated blocks.

1.1.1. Blocks

A block define a single part of a page, that can be ordered or manipulated independently.

The index page is using the templates.block-page.full special template that accept a special block argument.
The block argument accept a list of blocks.

Example of block page declaration
  index = {
    title    = "Home";
    path     = "/index.html";
    template = templates.block-page.full;
    layout   = templates.layout;
    blocks   = [
      (template.blocks.banner data.main-banner)
      (templates.block.team   data.team)
    ];
  };
templates.block-page.full is applying the library processBlocks function to the list of blocks, merging the blocks data into a single data attribute set.
Anatomy of a block

The library processBlocks function expects a block attribute set to define:

  • content: The block content as a string.

  • extraJS: List of javascript files to load when the block is used, optional.

  • extraCSS: List of CSS files to load when the block is used, optional.

Simple block
{
  content = "Hello world!";
}
Block declaring resources
{
  content  = "Hello world!";
  extraCSS = [ "/js/hello.js" ];
  extraJS  = [ "/css/hello.css" ];
}

Usually, blocks are generated by applying a template to a data set like done in the example site.

Blocks are meant to be flexible. For custom needs it is possible to use a custom block format and merge them with a custom processBlocks function.

1.2. Configuration interface


theme.footer.copyright

Description

Footer copyright text.

Type

string

Default
"Published under the Apache License 2.0."

Description

Footer links.

Type

list of attribute sets

Default
[  ]
Example
[ {
  link = "#";
  text = "Privacy Policy";
} {
  link = "#";
  text = "Terms of Use";
} ]

theme.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 = "#";
} ]

theme.lib.bootstrap.enable

Default
true

theme.lib.font-awesome.enable

Default
true

theme.lib.googlefonts

Default
[ "Montserrat:400,700" "Kaushan Script" "Droid Serif:400,700,400italic,700italic" "Roboto Slab:400,100,300,700" ]

theme.lib.jquery.enable

Default
true

theme.site.author

Description

Content of the author meta tag.

Type

string

Default
"Your name"

theme.site.description

Description

Content of the description meta tag.

Type

string

Default
"Your description"

theme.site.title

Description

Title of the site.

Type

string

Default
"The Agency"

1.3. Templates


templates.blocks.banner


templates.blocks.basic


templates.blocks.clients


templates.blocks.contact


templates.blocks.portfolio


templates.blocks.services


templates.blocks.team


templates.blocks.timeline


templates.partials.content-post


templates.partials.content-pre


templates.partials.head.css-custom


templates.partials.js-custom


1.4. Example site source

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

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

rec {

  /* Importing styx library
  */
  styxLib = import styx.lib styx;


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

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

  /* Importing styx themes from styx
  */
  styx-themes = import styx.themes;

  /* 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;
    extraEnv  = { inherit data pages; };
    extraConf = [ ./conf.nix extraConf ];
  };

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


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

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

  data = with lib; {

    /* Menu using blocks
    */
    menu = let
      mkBlockSet = blocks:
        map (id:
          (lib.find { inherit id; } blocks) // { navbarClass = "page-scroll"; url = "/#${id}"; }
        );
    in
      (mkBlockSet pages.index.blocks [ "services" "portfolio" "about" "team" "contact" ])
      ++ [
        { title = "Styx"; url = "https://styx-static.github.io/styx-site/"; }
      ];

  } // (lib.loadDir { dir = ./data; inherit env; asAttrs = true; });


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

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

  pages = rec {
    index = {
      title    = "Home";
      path     = "/index.html";
      template = templates.block-page.full;
      layout   = templates.layout;
      blocks   = let
        darken = d: d // { class = "bg-light-gray"; };
      in with templates.blocks; [
        (banner            data.main-banner)
        (services          data.services)
        (portfolio (darken data.portfolio))
        (timeline          data.about)
        (team      (darken data.team))
        (clients           data.clients)
        (contact           data.contact)
      ];
    };
  };


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

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

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

  site = lib.mkSite { inherit files pageList; };

}

2. Generic templates

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



Generic templates

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 themes 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 a theme can be overriden to fit needs.

To override a template, just copy it to a custom theme and change it to your liking:

Overriding the partials.content template
$ styx new theme foo --in ./themes (1)
$ mkdir -p themes/foo/templates/partials/ (2)
$ cp $(styx theme-path generic-templates)/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 the generic-templates bundled with styx, to use another version clone the generic-templates repo, select the desired version, and copy the file from there.
Every template of this theme use the documentedTemplate function that allow to generate template documentation.
Combining generic-templates and my-theme
themes = [
  styx-themes.generic-templates
  ./themes/my-theme
];

2.2. Configuration interface


theme.html.doctype

Description

Doctype declaration to use.

Type

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

Default
"html5"

theme.html.lang

Description

An ISO 639-1 language code to set to the html tag.

Type

string

Default
"en"

theme.lib.bootstrap.enable

Description

Whether to enable bootstrap.

Type

boolean

Default
false
Example
true

theme.lib.bootstrap.version

Description

Selects bootstrap version to use.

Type

Concatenated string

Default
"3.3.7"

theme.lib.font-awesome.enable

Description

Whether to enable font awesome.

Type

boolean

Default
false
Example
true

theme.lib.font-awesome.version

Description

Selects font-awesome version to use.

Type

Concatenated string

Default
"4.7.0"

theme.lib.googlefonts

Description

Google Fonts to load, for available fonts see https://fonts.google.com/.

Type

list of strings

Default
[  ]
Example
[ "Barrio" "Fjalla One" ]

theme.lib.highlightjs.enable

Description

Whether to enable highlightjs.

Type

boolean

Default
false
Example
true

theme.lib.highlightjs.extraLanguages

Description

Extra languages to highlight, for available languages see https://highlightjs.org/static/demo/.

Type

list of strings

Default
[  ]
Example
[ "nix" ]

theme.lib.highlightjs.style

Description

Style used by highlight.js, for available styles see https://highlightjs.org/static/demo/.

Type

Concatenated string

Default
"default"
Example
"agate"

theme.lib.highlightjs.version

Description

Selects highlightjs version to use.

Type

Concatenated string

Default
"9.9.0"

theme.lib.jquery.enable

Description

Whether to enable jQuery.

Type

boolean

Default
false
Example
true

theme.lib.jquery.version

Description

Selects jQuery version to use.

Type

Concatenated string

Default
"3.1.1"

theme.lib.mathjax.enable

Description

Whether to enable mathjax.

Type

boolean

Default
false
Example
true

theme.services.disqus.shortname

Description

Disqus service shortname. See What’s a shortname? page for details.

Type

null or string

Default
null

theme.services.google-analytics.trackingID

Description

Google analytics service tracker ID, Google analytics is disabled if set to null.

Type

null or string

Default
null

theme.services.piwik.IDsite

Description

idsite of the website you are tracking in Piwik.

Type

string


theme.services.piwik.enable

Description

Whether to enable Piwik.

Type

boolean

Default
false
Example
true

theme.services.piwik.url

Description

Piwik url.

Type

string


theme.site.title

Description

Site title.

Type

string

Default
"Generic Templates"

2.3. Templates


templates.block-page.full


templates.bootstrap.alert

Description

Generate a bootstrap alert.

Arguments (Attribute Set)
content

Content of the alert.
Type: String.

type

Type of the alert.
Type: "success" | "info" | "warning" | "danger".

Example
Code
templates.bootstrap.alert { type = "success"; content = "alert"; }
Result
<div class="alert alert-success" role="alert">
alert
</div>

templates.bootstrap.badge

Description

Generate a bootstrap badge.

Arguments (Standard)
content

Content of the badge.
Type: String.

Example
Code
templates.bootstrap.badge 42
Result
<span class="badge">42</span>

templates.bootstrap.breadcrumbs

Description

Generate a page breadcrumbs; takes a page attribute with a breadcrumbs attribute containing a list of pages.

Arguments (Standard)
page

The page to generate breadcrumbs from.
Type: Page.

Example
Code
templates.bootstrap.breadcrumbs {
  path = "/about.html";
  title = "About";
  breadcrumbs = [ { path = "/"; breadcrumbTitle = "Home"; title = "My site"; } ];
}
Result
<ol class="breadcrumb">
  <li><a href="http://domain.org/">Home</a></li>
  <li class="active">About</li>
</ol>

templates.bootstrap.label

Description

Generate a bootstrap label.

Arguments (Attribute Set)
content

Content of the label.
Type: String.

type

Type of the label.
Type: "default" | "primary" | "success" | "info" | "warning" | "danger".
Optional, defaults to "default".

Example
Code
templates.bootstrap.label { content = "my label"; type = "primary"; }
Result
<span class="label label-primary">my label</span>

templates.bootstrap.navbar.brand

Description

Template used by default as the navbar brand, can be overriden to fit needs.


templates.bootstrap.navbar.default

Description

Generates a navbar.

Arguments (Attribute Set)
brand

HTML code of the brand section.
Type: String.
Optional, defaults to templates.bootstrap.navbar.brand.

content

Content of the navbar, usually a list of templates.bootstrap.navbar.* templates calls.
Type: String.

extraClasses

Extra CSS classes to add to the navbar.
Type: [ String ].
Optional, defaults to [ ].

id

HTML id used by the navbar.
Type: String.
Optional, defaults to "navbar".

inverted

Whether to make navbar inverted.
Type: Boolean.
Optional, defaults to false.

Example
Code
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"; }
      ];
      currentPage = { title = "Home"; path = "/#"; };
    })
  ];
}
Result
<nav class="navbar navbar-inverse" id="navbar">
<div class="container">
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" 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-collapse">
<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.navbar.head

Description

Template used by bootstrap.navbar.default, not meant to be used directly.


templates.bootstrap.navbar.nav

Description

Template to generate a navbar navigation list. Meant to be used in bootstrap.navbar.default content parameter.

Arguments (Attribute Set)
align

Alignment of the navigation.
Type: "right", "left" or null.
Optional, defaults to null.

currentPage

Current page viewed, used to make active the menu corresponding to the current page.
Type: Page or null.
Optional, defaults to null.

items

Items of the navbar.
Type: [ Pages ].

Example
Code
templates.bootstrap.navbar.nav {
  items = [
  { title = "Home";    path = "/#"; }
  { title = "About";   path = "/#about"; }
  { title = "Contact"; path = "/#contact"; }
  ];
  currentPage = { title = "Home"; path = "/#"; };
}
Result
<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>

templates.bootstrap.navbar.nav_dropdown

Description

Generate a navbar nav dropdown menu. Meant to be used in bootstrap.navbar.nav context

Arguments (Standard)
title

Title
Type: String.

items

Items of the dropdown menu
Type: [ Page ].

caret

Code added after the dropdown title
Type: String.
Optional, defaults to "<span class=\"caret\"></span>".

Example
Code
templates.bootstrap.navbar.nav_dropdown { title = "Languages"; items = [ { title = "English"; path = "/eng"; } { title = "French"; path = "/fre"; } ]; }
Result
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Languages<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="http://domain.org/eng">English</a></li>
<li><a href="http://domain.org/fre">French</a></li>
</ul>
</li>

templates.bootstrap.navbar.nav_item

Description

Generate a navbar nav item. Used internally by bootstrap.navbar.nav.

Arguments (Standard)
item

Item
Type: Page.

currentPage

Current page displayed.
Type: [ Page ].

Example
Code
templates.bootstrap.navbar.nav_item { item = { title = "Home"; path = "/"; }; }
Result
<li><a href="http://domain.org/">Home</a></li>

templates.bootstrap.navbar.text

Description

Template to generate a navbar text. Meant to be used in bootstrap.navbar.default content parameter.

Arguments (Attribute Set)
align

Alignment of the text.
Type: "right", "left" or null.
Optional, defaults to null.

content

Text content.
Type: String.

extraClasses

Extra classes to add to the text.
Type: [ String ].
Optional, defaults to [ ].

Example
Code
templates.bootstrap.navbar.text {
  content = "Hello world!";
  align = "right";
}
Result
<p class="navbar-text navbar-right">Hello world!</p>

templates.bootstrap.pager

Description

Generate a pager

Arguments (Attribute Set)
index

Index of the current page.
Type: Integer.

pages

List of pages.
Type: [ Page ].

Example
Code
templates.bootstrap.pager {
  pages = genList (x: { path = "/#${toString (x + 1)}"; }) 10;
  index = 5;
}
Result
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="http://domain.org/#4"><span aria-hidden="true">&larr;</span> Previous</a></li>
<li class="next"><a href="http://domain.org/#6">Next <span aria-hidden="true">&rarr;</span></a></li>
</ul>
</nav>

templates.bootstrap.pagination

Description

Generate a pagination

Arguments (Attribute Set)
index

Index of the current page.
Type: Integer.

pages

List of pages.
Type: [ Page ].

pagesLimit

Maximum number of pages to show in the pagination, if set to null all pages are in the pagination.
Type: Null | Int.
Optional, defaults to null.

Example
Code
templates.bootstrap.pagination {
  pages = genList (x: { path = "/#${toString (x + 1)}"; }) 10;
  index = 5;
}
Result
<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

Description

Generate a bootstrap panel.

Arguments (Attribute Set)
body

Content of the panel body, set to null to disable the body.
Type: null | String.
Optional, defaults to null.

footer

Content of the panel footer, set to null to disable the footer.
Type: null | String.
Optional, defaults to null.

heading

Content of the panel heading, set to null to disable the heading.
Type: null | String.
Optional, defaults to null.

listGroup

Content of the panel list group, set to null to disable the body.
Type: null | String.
Optional, defaults to null.

type

Type of the panel.
Type: "default" | "primary" | "success" | "info" | "warning" | "danger".
Optional, defaults to "default".

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

templates.bootstrap.progress-bar

Description

Generate a bootstrap progress bar.

Arguments (Attribute Set)
type

Type of the progress bar.
Type: "success" | "info" | "warning" | "danger".

value

Value of the progress bar as percentage.
Type: Integer.

Example
Code
templates.bootstrap.progress-bar { value = 60; }
Result
<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>

templates.e404

Description

Basic template for error 404 page, can be overriden to fit needs.


templates.examples.basic

Description

Template for the example site, internal use only.


templates.examples.starter

Description

Template for the example site, internal use only.


templates.examples.theme

Description

Template for the example site, internal use only.


templates.feed.atom

Description

Template generating an Atom feed.
Take a page as argument. The page set can define extra attributes:

  • subtitle: If set, will be used as the feed subtitle.

  • author.name: If set, will be used as the feed author.

  • author.email: If set, will be used as the feed author.

  • icon: If set, will be used as the feed icon.

  • logo: If set, will be used as the feed logo.

  • items: The items to include in the feed as a list of pages.


templates.feed.atom-list

Description

Template generating an Atom feed entry.
Used in templates.feed.atom.


templates.icon.bootstrap

Description

Generate a bootstrap glyphicon markup from a glyphicon code.

Arguments (Standard)
icon

The icon code to use without the leading glyphicon-. See http://getbootstrap.com/components/#glyphicons for available icons.
Type: String.

Example
Code
templates.icon.bootstrap "picture"
Result
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>

templates.icon.font-awesome

Description

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

Arguments (Standard)
icon

The icon code to use without the leading fa-. See http://fontawesome.io/icons/ for available icons.
Type: String.

Example
Code
templates.icon.font-awesome "code"
Result
<i class="fa fa-code" aria-hidden="true"></i>

templates.layout

Description

Generic layout template, includes [templates.partials.doctype] and [templates.partials.html].


templates.lib.css.bootstrap

Description

Template loading the bootstrap css library. Controlled by conf.theme.lib.bootstrap.* configuration options.


templates.lib.css.font-awesome

Description

Template loading font-awesome css library. Controlled by conf.theme.lib.font-awesome.* configuration options.


templates.lib.css.googlefonts

Description

Template loading google fonts fonts. Controlled by conf.theme.lib.googlefonts.* configuration options.


templates.lib.css.highlightjs

Description

Template loading highlightjs required css. Controlled by conf.theme.lib.highlightjs.* configuration options.


templates.lib.js.bootstrap

Description

Template loading the bootstrap javascript library. Controlled by conf.theme.lib.jquery.* configuration options.


templates.lib.js.highlightjs

Description

Template loading the highlightjs javascript library. Controlled by conf.theme.lib.highlightjs.* configuration options.


templates.lib.js.jquery

Description

Template loading the jQuery javascript library. Controlled by conf.theme.lib.jquery.* configuration options.


templates.lib.js.mathjax

Description

Template loading the MathJax javascript library. Controlled by conf.theme.lib.mathjax.* configuration options.


templates.media.giphy

Description

Template to embed a Giphy gif.

Arguments (Attribute Set)
height

Embedded gif height.
Type: Int.

id

Giphy id.
Type: String.

width

Embedded gif width.
Type: Int.


templates.media.gist

Description

Template to embed a github gist.

Arguments (Attribute Set)
file

Gist file.
Type: Null | String.
Optional, defaults to null.

id

Gist id.
Type: String.

user

Gist owner.
Type: String.


templates.media.slideshare

Description

Template to embed a slideshare presentation.

Arguments (Attribute Set)
embedCode

Slides embed code.
Type: String.

height

Embedded video height.
Type: Int.
Optional, defaults to 315.

width

Embedded video width.
Type: Int.
Optional, defaults to 560.


templates.media.speakerdeck

Description

Template to embed a speakerdeck presentation.

Arguments (Attribute Set)
id

Presentation id.
Type: String.

slide

Slide to display.
Type: Null | Int.
Optional, defaults to null.


templates.media.twitter

Description

Template to embed a twitter timeline.

Arguments (Attribute Set)
height

Embedded timeline height.
Type: Int.

user

Twitter user.
Type: String.

width

Embedded timeline width.
Type: Int.


templates.media.vimeo

Description

Template to embed a Vimeo video.

Arguments (Attribute Set)
height

Embedded video height.
Type: Int.
Optional, defaults to 360.

id

Video id.
Type: String.

width

Embedded video width.
Type: Int.
Optional, defaults to 640.


templates.media.youtube

Description

Template to embed a Youtube video.

Arguments (Attribute Set)
height

Embedded video height.
Type: Int.
Optional, defaults to 315.

id

Video id.
Type: String.

width

Embedded video width.
Type: Int.
Optional, defaults to 560.


templates.page.full

Description

Normal template for rendering a page.


templates.page.list

Description

Normal template for rendering a page as a list entry (li tag).


templates.page.split

Description

Normal template for rendering splitted pages.


templates.partials.content

Description

Template rendering the page content.


templates.partials.content-post

Description

Template rendering the page post-contents, usually used to render the footer. Empty by default.


templates.partials.content-pre

Description

Template rendering the page pre-contents, usually used to render navigations. Empty by default.


templates.partials.doctype

Description

Template declaring the doctype, controlled by conf.theme.html.doctype.


templates.partials.head.css-custom

Description

Template to load custom css files, empty by default. Should be overridden to fit needs.


templates.partials.head.css-extra

Description

Template responsible for loading page specific css files.
To be used, the Page should define an extraCSS attribute containing a list of attribute sets.

Example
Code
pages.index = {
  layout   = templates.layout;
  template = templates.pages.full;
  path     = "/index.html";
  extraCSS = [ { href = "/css/index.css"; } ];
};

templates.partials.head.feed

Description

Template that will automaticly load pages.feed if defined as an atom feed.


templates.partials.head.meta

Description

Generic meta tags, should be overriden to fit needs.
Default contents:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

templates.partials.head.title

Description

Template rendering the page head title tag.


templates.partials.head.title-post

Description

Template loading head tag contents after title.
Includes [templates.partials.head.feed], [templates.partials.head.css] and [templates.partials.head.title-post-extra].


templates.partials.head.title-post-extra

Description

Template to add custom extra content in head. Empty by default, should be overriden to fit needs.


templates.partials.head.title-pre

Description

Template loading head tag contents before title.
Includes [templates.partials.head.meta].


templates.partials.html

Description

Template responsible for generating the html tag, includes [templates.partials.head.default] and [templates.partials.body].


templates.partials.js-custom

Description

Template to load custom javascript files, empty by default. Should be overridden to fit needs.


templates.partials.js-extra

Description

Template responsible for loading page specific javascript files.
To be used, the page should define an extraJS attribute containing a list of attribute sets that will be passed to templates.tag.script.

Example
Code
pages.index = {
  layout   = templates.layout;
  template = templates.pages.full;
  path     = "/index.html";
  extraJS = [ { src = "/index.js"; }  ];
};

templates.services.disqus

Description

Template managing disqus integration.
Before using disqus, conf.theme.services.disqus.shortname configuration option should be set.
Page unique identifier will be automatically generated, but can be set by adding a disqusID attribute to the page.

Example
Code
templates.services.disqus page

Code
templates.services.disqus (page // { disqusID = "main-thread"; })

templates.services.google-analytics

Description

Template managing google analytics integration. Controlled with conf.theme.services.google-analytics.trackingID configuration option.


templates.services.piwik

Description

Template managing Piwik integration. Controlled with conf.theme.services.piwik.* configuration options.


templates.sitemap

Description

Template generating a sitemap file.
Take a page with a pages attribute containing the list of pages to include in the sitemap.
Pages in the list can define a changefreq attribute, else monthly will be used.

Example
Code
sitemap = {
  path     = "/sitemap.xml";
  template = templates.sitemap;
  layout   = lib.id;
  pages    = lib.pagesToList { inherit pages; };
};

templates.tag.codeblock

Description

Template generating a code block, automatically escape HTML characters.

Arguments (Attribute Set)
content

Codeblock content.
Type: String.

Example
Code
templates.tag.codeblock {
  content = "<p>some html</p>";
}
Result
<pre><code>&lt;p&gt;some html&lt;/p&gt;</pre></code>

templates.tag.generic

Description

Template generating a generic html tag.

Arguments (Attribute Set)
content

Type: String.

tag

HTML tag to render.
Type: String.

Example
Code
templates.tag.generic { tag = "div"; content = "hello world!"; class = "foo"; }
Result
<div class="foo">hello world!</div>

Code
templates.tag.generic {
  tag = "div";
  content = templates.tag.generic { tag = "p"; content = "hello world!"; };
}
Result
<div><p>hello world!</p></div>

Any extra argument passed will be added as tag attributes.


Description

Generate an internal link.

Arguments (Attribute Set)
to

Link target, can be a string or a page.
Type: String | Page.

Example
Code
templates.tag.ilink { to = { path = "/about.html"; }; content = "about"; }
Result
<a href="http://domain.org/about.html">about</a>

Code
templates.tag.ilink { to = "/files/manual.pdf"; content = "Download manual"; class = "download"; }
Result
<a class="download" href="http://domain.org/files/manual.pdf">Download manual</a>

Any extra argument passed will be added as tag attributes.


Description

Template generating a link tag.

Example
Code
templates.tag.link { href = "/feed.atom"; rel = "alternate"; type = "application/atom+xml"; }
Result
<link href="/feed.atom" rel="alternate" type="application/atom+xml" />

Description

Generate a link tag for an atom feed.

Example
Code
templates.tag.link-atom { href = "/feed.atom"; }
Result
<link href="/feed.atom" rel="alternate" type="application/atom+xml" />

Description

Generate a link tag for a css file.

Example
Code
templates.tag.link-css { href = "/css/style.css"; }
Result
<link href="/css/style.css" rel="stylesheet" type="text/css" />

templates.tag.script

Description

Template generating a script tag.

Arguments (Attribute Set)
src

Script source.
Type: String.

Example
Code
templates.tag.script {
  src = "/script.js";
}
Result
<script src="/script.js"></script>

templates.taxonomy.full

Description

Template displaying a taxonomy information.

Arguments (Attribute Set)
page

Taxonomy page generated with mkTaxonomyPages function.
Type: page.

Example
Code
pages.taxonomies = mkTaxonomyPages {
  data             = data.taxonomies.posts;
  taxonomyTemplate = templates.taxonomy.full;
  termTemplate     = templates.taxonomy.term.full;
};

Code
templates.taxonomy.full (getProp "tags" (mkTaxonomyData {
  data = [
    { tags = [ "foo" "bar" ]; path = "/a.html"; }
    { tags = [ "foo" ];       path = "/b.html"; }
    { category = [ "baz" ];   path = "/c.html"; }
  ];
  taxonomies = [ "tags" "category" ];
}))
Result
<h1>tags</h1>
<ul>
<li><a href="http://domain.org/tags/foo/index.html">foo</a> (2)</li>
<li><a href="http://domain.org/tags/bar/index.html">bar</a> (1)</li>
</ul>

templates.taxonomy.term.full

Description

Template displaying a taxonomy term information.

Arguments (Attribute Set)
page

Taxonomy term page generated with mkTaxonomyPages function.
Type: page.

Example
Code
pages.taxonomies = mkTaxonomyPages {
  data             = data.taxonomies.posts;
  taxonomyTemplate = templates.taxonomy.full;
  termTemplate     = templates.taxonomy.term.full;
};

Code
templates.taxonomy.term.full {
  taxonomy = "tags";
  term = "foo";
  values = getValue "foo" (getValue "tags" (mkTaxonomyData {
    data = [
      { tags = [ "foo" "bar" ]; path = "/a.html"; title = "a"; }
      { tags = [ "foo" ];       path = "/b.html"; title = "b";}
      { category = [ "baz" ];   path = "/c.html"; title = "c";}
    ];
    taxonomies = [ "tags" "category" ];
  }));
}
Result
<h1>tags: foo</h1>
<ul>
<li><a href="http://domain.org/b.html">b</a></li>
<li><a href="http://domain.org/a.html">a</a></li>
</ul>

templates.taxonomy.term-list

Description

Template transforming raw taxonomy data.

Arguments (Standard)
taxonomyData

Taxonomy data.
Type: Taxonomy.

Example
Code
templates.taxonomy.term-list (getProp "tags" (mkTaxonomyData {
  data = [
    { tags = [ "foo" "bar" ]; path = "/a.html"; }
    { tags = [ "foo" ];       path = "/b.html"; }
    { category = [ "baz" ];   path = "/c.html"; }
  ];
  taxonomies = [ "tags" "category" ];
}))
Result
[ {
  count = 2;
  path = "/tags/foo/index.html";
  taxonomy = "tags";
  term = "foo";
  values = [ {
    path = "/b.html";
    tags = [ "foo" ];
  } {
    path = "/a.html";
    tags = [ "foo" "bar" ];
  } ];
} {
  count = 1;
  path = "/tags/bar/index.html";
  taxonomy = "tags";
  term = "bar";
  values = [ {
    path = "/a.html";
    tags = [ "foo" "bar" ];
  } ];
} ]

templates.taxonomy.value.term-list

Description

Template generating a list of taxonomy terms data for a taxonomy value (page).

Arguments (Attribute Set)
page

Page attribute set.
Type: Page.

taxonomy

Taxonomy name.
Type: String.

Example
Code
templates.taxonomy.value.term-list {
  taxonomy = "tags";
  page = {
    tags = [ "foo" "bar" ];
  };
}
Result
[ {
  path = "/tags/foo/index.html";
  taxonomy = "tags";
  term = "foo";
} {
  path = "/tags/bar/index.html";
  taxonomy = "tags";
  term = "bar";
} ]

templates.url

Description

Generate a full url from a path or a page by using conf.siteUrl.

Arguments (Standard)
arg

Path or Page to generate the url.
Type: String | Page.

Example
Code
templates.url "/foo.html"
Result
http://domain.org/foo.html

Code
templates.url { title = "About"; path = "/about.html"; }
Result
http://domain.org/about.html

2.4. Example site source

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

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

rec {

  /* Importing styx library
  */
  styxLib = import styx.lib styx;


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

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

  /* Importing styx themes from styx
  */
  styx-themes = import styx.themes;

  /* 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;
    extraEnv  = { inherit data pages; };
    extraConf = [ ./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
  */
  pageList = lib.pagesToList { inherit pages; };

  /* Generating the site
  */
  site = lib.mkSite { inherit files pageList; };

}

3. Ghostwriter

Port of the Ghostwriter theme.
Use the generic-templates theme.



Ghostwriter

3.1. Documentation

3.1.1. Setting a navigation

Main navigation will be automatically created with the contents of site.nix data.menu contents. data.menu should be a list of pages or equivalent attributes sets defining at least the title and url attribute.

Declaring a menu
  data = {
    menu = [
      (head pages.index)
      pages.about
      { title = "Foo"; url = "/foo.html"; }
    ];
  };

3.1.2. Adding author information to posts

An author is an attribute set consisting of a name and url attribute. (The url attribute is optional). It is possible to set the author per post using markup file metadata:

Setting author via metadata
{---
title = "My post";
author = {
  name = "John Doe";
};
---}

# Lorem ipsum

It is also possible to create author data defined in site.nix. For example, if there is the following declaration in site.nix:

Declaring author in site.nix
data = rec {
  authors.john = {
    name = "John Doe";
  };

  posts  = sortBy "date" "dsc" (loadDir { dir = ./posts; env = (env // { inherit authors; }); });
};
authors must be passed to the env of the function responsible of loading the posts.

Then authors.john can be used in the metadata:

Setting author via metadata
{---
title = "My post";
author = authors.john;
---}

# Lorem ipsum

In case of a single author, it is possible to automatically set the same author to every post in site.nix during the posts pages creation.

Setting author during pages creation
posts = mkPageList {
  data        = data.posts;
  pathPrefix  = "/posts/";
  template    = templates.post.full;
  author      = { name = "John Doe"; };
};

3.2. Configuration interface


theme.itemsPerPage

Description

Number of posts per page.

Type

signed integer

Default
3

theme.lib.font-awesome.enable

Default
true

theme.lib.googlefonts

Default
[ "Open Sans:300italic,400italic,600italic,700italic,400,600,700,300&subset=latin,cyrillic-ext,latin-ext,cyrillic" ]

theme.lib.jquery.enable

Default
true

theme.site.copyright

Description

Site copyright.

Type

string

Default
"&copy; 2017. All rights reserved.
"

theme.site.description

Description

Site description.

Type

string

Default
"Ghostwriter blog description
"

theme.site.title

Description

Site title.

Type

string

Default
"Ghostwriter Blog"

theme.social.email

Description

GitHub link

Type

null or Concatenated string

Default
null

theme.social.github

Description

GitHub link

Type

null or Concatenated string

Default
null

theme.social.gitlab

Description

GitHub link

Type

null or Concatenated string

Default
null

theme.social.google-plus

Description

Google plus link

Type

null or Concatenated string

Default
null

theme.social.linked-in

Description

Linked in link

Type

null or Concatenated string

Default
null

theme.social.stack-overflow

Description

Stack overflow link

Type

null or Concatenated string

Default
null

theme.social.twitter

Description

Twitter link

Type

null or Concatenated string

Default
null

3.3. Templates


templates.index


templates.page.full


templates.partials.content


templates.partials.content-post


templates.partials.content-pre


templates.partials.head.css-custom


templates.partials.head.title-post-extra


templates.partials.html


templates.partials.pager


templates.post.full


templates.post.list


3.4. Example site source

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

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

rec {

  /* Importing styx library
  */
  styxLib = import styx.lib styx;


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

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

  /* Importing styx themes from styx
  */
  styx-themes = import styx.themes;

  /* 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;
    extraEnv  = { inherit data pages; };
    extraConf = [ ./conf.nix extraConf ];
  };

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


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

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

  data = with lib; {
    # loading a single page
    about  = loadFile { file = "${styx}/share/styx/scaffold/sample-data/pages/about.md"; inherit env; };

    # loading a list of contents
    posts  = sortBy "date" "dsc" (loadDir { dir = "${styx}/share/styx/scaffold/sample-data/posts"; inherit env; });

    menu = [
      (head pages.index)
      pages.about
    ];

    # Create an author data
    author = {
      name = "John Doe";
      # It is possible to set a link to the author
      # url = "http://john-doe.org/";
    };
  };


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

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

  pages = with lib; rec {
    index = mkSplit {
      title        = "Home";
      basePath     = "/index";
      itemsPerPage = conf.theme.itemsPerPage;
      template     = templates.index;
      data         = posts.list;
    };

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

    about = {
      path     = "/about.html";
      template = templates.page.full;
    } // data.about;

    posts = mkPageList {
      data        = data.posts;
      pathPrefix  = "/posts/";
      template    = templates.post.full;
      # Attach the author to every blog post
      author      = data.author;
    };
  };


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

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

  /* Converting the pages attribute set to a list
  */
  pageList = lib.pagesToList {
    inherit pages;
    default = { layout = templates.layout; };
  };

  /* Generating the site
  */
  site =  (lib.mkSite { inherit files pageList; });

}

4. Hyde

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



Hyde

4.1. Configuration interface


theme.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"

Default
null

theme.itemsPerPage

Description

Number of posts per page.

Type

signed integer

Default
3

theme.layout.reverse

Description

Whether to enable reverse layout.

Type

boolean

Default
false
Example
true

theme.site.copyright

Description

Site copyright.

Type

string

Default
"&copy; 2017. All rights reserved.
"

theme.site.description

Description

Site description.

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.
"

theme.site.title

Description

Site title.

Type

string

Default
"Hyde"

4.2. Templates


templates.e404


templates.index


templates.partials.body


templates.partials.content


templates.partials.content-pre


templates.partials.head.css-custom


templates.partials.head.title-post-extra


templates.partials.pager


templates.post.full


templates.post.list


4.3. Example site source

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

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

rec {

  /* Importing styx library
  */
  styxLib = import styx.lib styx;


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

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

  /* Importing styx themes from styx
  */
  styx-themes = import styx.themes;

  /* 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;
    extraEnv  = { inherit data pages; };
    extraConf = [ ./conf.nix extraConf ];
  };

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


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

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

  data = with lib; {
    # loading a single page
    about  = loadFile { file = "${styx}/share/styx/scaffold/sample-data//pages/about.md"; inherit env; };

    # loading a list of contents
    posts  = sortBy "date" "dsc" (loadDir { dir = "${styx}/share/styx/scaffold/sample-data/posts"; inherit env; });

    # menu declaration
    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.list;
    };

    /* 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.list;
    };

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

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

  };


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

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

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

  site = lib.mkSite { inherit files pageList; };

}

5. Nix

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



Nix

5.1. Configuration interface


theme.lib.bootstrap.enable

Default
true

theme.lib.font-awesome.enable

Default
true

theme.lib.googlefonts

Default
[ "Inconsolata" "Open+Sans" "Roboto" "Montserrat" "Concert One" ]

theme.lib.jquery.enable

Default
true

theme.site.copyright

Description

Site copyright.

Type

string

Default
"&copy; 2017. All rights reserved.
"

theme.site.description

Description

Site description.

Type

string

Default
"Nix blog description
"

theme.site.title

Description

Site title.

Type

string

Default
"styx@styx ~ $"

5.2. Templates


templates.page.full


templates.partials.content


templates.partials.content-post


templates.partials.content-pre


templates.partials.head.css-custom


templates.post.full


templates.post.list


templates.posts-list


5.3. Example site source

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

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

rec {

  /* Importing styx library
  */
  styxLib = import styx.lib styx;


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

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

  /* Importing styx themes from styx
  */
  styx-themes = import styx.themes;

  /* 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;
    extraEnv  = { inherit data pages; };
    extraConf = [ ./conf.nix extraConf ];
  };

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


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

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

  data = with lib; {
    # Loading the index page data
    index = loadFile { file = ./data/index.nix; inherit env; };

    # loading a single page
    about  = loadFile { file = "${styx}/share/styx/scaffold/sample-data/pages/about.md"; inherit env; };

    # loading a list of contents
    posts  = sortBy "date" "dsc" (loadDir { dir = "${styx}/share/styx/scaffold/sample-data/posts"; inherit env; });

    # menu declaration
    menu = with pages; [
      (about // { navbarTitle = "~/about"; })
      ((head postsList) // { navbarTitle = "~/posts"; })
    ];
  };


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

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

  pages = with lib; rec {

    /* Custom index page
       See data/index.nix for the details
    */
    index = {
      title    = "styx@styx ~ $";
      path     = "/index.html";
      template = id;
    } // data.index;

    /* 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.list;
    };

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

    /* Posts lists
    */
    postsList = mkSplit {
      title        = "Posts";
      basePath     = "/posts/index";
      itemsPerPage = 3;
      template     = templates.posts-list;
      data         = posts.list;
    };

    /* Posts pages
    */
    posts = mkPageList {
      data        = data.posts;
      pathPrefix  = "/posts/";
      template    = templates.post.full;
    };

  };


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

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

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

  site = lib.mkSite {
    inherit pageList;
    # Loading custom files
    files = files ++ [ ./files ];
  };

}

6. Orbit

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



Orbit

6.1. Configuration interface


theme.colorScheme

Description

Theme color scheme.

Type

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

Default
1

theme.contact.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";
} ]

theme.copyright

Description

Footer copyright text.

Type

string

Default
"copyright"

theme.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";
} ]

theme.education.title

Description

Title of the education section.

Type

string

Default
"Education"

theme.experiences.icon

Description

Code of the font awesome icon of the experience title.

Type

string

Default
"briefcase"

theme.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";
} ]

theme.experiences.title

Description

Title of the experiences section

Type

string

Default
"Experiences"

theme.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" ]

theme.interests.title

Description

Title of the interests section.

Type

string

Default
"Interests"

theme.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";
} ]

theme.languages.title

Description

Title of the languages section.

Type

string

Default
"Languages"

theme.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";
}

theme.projects.icon

Description

Code of the font awesome icon of the projects title.

Type

string

Default
"archive"

theme.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";
} ]

theme.projects.title

Description

Title of the projects section

Type

string

Default
"Projects"

theme.site.author

Description

Content of the author meta tag.

Type

string

Default
"John Doe"

theme.site.description

Description

Content of the description meta tag.

Type

string

Default
"Lorem ipsum..."

theme.site.title

Description

Title of the site.

Type

string

Default
"Orbit theme"

theme.skills.icon

Description

Code of the font awesome icon of the skills title.

Type

string

Default
"rocket"

theme.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";
} ]

theme.skills.title

Description

Title of the skills section.

Type

string

Default
"Skills & Proficiency"

theme.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

Default
null

theme.summary.icon

Description

Code of the font awesome icon of the summary title.

Type

string

Default
"user"

theme.summary.title

Description

Title of the summary section

Type

string

Default
"Career profile"

6.2. Templates


templates.icon.fa


templates.index


templates.partials.contact


templates.partials.education


templates.partials.experiences


templates.partials.footer


templates.partials.head


templates.partials.interests


templates.partials.js


templates.partials.languages


templates.partials.profile


templates.partials.projects


templates.partials.sidebar


templates.partials.skills


templates.partials.summary


6.3. Example site source

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

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

rec {

  /* Importing styx library
  */
  styxLib = import styx.lib styx;


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

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

  /* Importing styx themes from styx
  */
  styx-themes = import styx.themes;

  /* 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;
    extraEnv  = { inherit data pages; };
    extraConf = [ ./conf.nix extraConf ];
  };

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


/*-----------------------------------------------------------------------------
   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;
    };
  };


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

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

  site = lib.mkSite { inherit files;  pageList = [ pages.index ]; };

}

7. 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



Showcase

7.1. Configuration interface


theme.archives.itemsPerPage

Description

Number of posts on the archive page.

Type

signed integer

Default
15

theme.index.itemsPerPage

Description

Number of posts on the index page.

Type

signed integer

Default
4

theme.site.copyright

Description

Site copyright, added in the footer.

Type

Concatenated string

Default
"&copy; 2017"

theme.site.description

Description

Site description, added in the footer.

Type

Concatenated string

Default
"Write a description for your new site here."

7.2. Templates


templates.archive


templates.index


templates.partials.content


templates.partials.content-post


templates.partials.content-pre


templates.partials.head.css-custom


templates.partials.sidebar


templates.post.draft-icon


templates.post.full


templates.post.list


templates.post.preview


templates.post.tags-inline


templates.taxonomy.full-section


7.3. Example site source

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

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

rec {

  /* Importing styx library
  */
  styxLib = import styx.lib styx;


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

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

  /* Importing styx themes from styx
  */
  styx-themes = import styx.themes;

  /* 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;
    extraEnv  = { inherit data pages; };
    extraConf = [ ./conf.nix extraConf ];
  };

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


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

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

  data = with lib; {

    # loading a single page
    about  = loadFile { file = "${styx}/share/styx/scaffold/sample-data/pages/about.md"; inherit env; };

    # loading a list of contents
    posts  = sortBy "date" "dsc" (loadDir { dir = "${styx}/share/styx/scaffold/sample-data/posts"; inherit env; });

    # 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.list;
      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.list;
      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.list;
    };

    /* 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 index) ];
    };

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

    /* 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    = pageList;
  };

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

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

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

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

  site = lib.mkSite {
    inherit files substitutions;
    pageList = pageList ++ [ sitemap ];
    meta = (import ./meta.nix) { inherit lib; };
  };

}