switch to generic-templates

conf.nix

@@ -3,6 +3,9 @@
     # Site title, used in the site header and the atom feed
     title = "Styx Hyde Theme";
     languageCode = "en";
+    description = ''
+      An elegant open source and mobile first theme for styx made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.
+    '';
   };
 
   # Set the color theme

example/conf.nix

@@ -1,6 +1,6 @@
 {
   # URL of the site, must be set to the url of the domain the site will be deployed
-  siteUrl = "http://yourdomain.com";
+  siteUrl = "https://styx-static.github.io/styx-theme-hyde";
 
   # Theme specific settings
   # it is possible to override any of the theme configuration settings in the 'theme' set

example/data/drafts/2016-09-11-drafts.md

@@ -9,7 +9,7 @@ Example of a draft page.
 
 This page will only be rendered if the `--drafts` flag is passed to styx.
 
-From a data perspective, drafts are similar to posts. The only difference is that a `extraConf.renderDrafts` flag is set when fetching drafts.
+From a data perspective, drafts are similar to posts. The only difference is that `extraConf.renderDrafts` flag is set to true when drafts are enabled.
 
 ```
 data.drafts = optionals (conf ? renderDrafts) (loadDir { dir = ./data/drafts; isDraft = true; });

example/data/posts/2016-09-13-multipages.md

@@ -18,4 +18,4 @@ From a data point of view, a multipage data is automatically generated by `lib.d
 
 From a page point of view, it is important to use templates supporting multipage data and generate the pages using `lib.pages.mkPagesList` or `lib.pages.mkMultiTail` functions.
 
-For more details refer to the [pages](https://styx-static.github.io/styx-site/documentation.html#Pages) chapter of the styx documentation.
+For more details refer to the [pages](https://styx-static.github.io/styx-site/documentation.html#Pages) chapter of styx documentation.

example/data/posts/2016-09-14-pages.md

@@ -8,14 +8,14 @@ Styx can generate a various type of pages. Page generation is handled in the `pa
 
 >>>
 
-## What are pages
+## Styx pages
 
-Pages are attribute sets with a `template`, `layout` and `href` attribute.
+A styx page is an attribute sets with at least a `template`, `layout` and `path` attribute.
 
-- `href`: determines the path of the page.
+- `path`: determines the path of the page.
 - `template` and `layout` are the templates used to render the page.
 
-Page attribute set is first passed to the template, and that result is passed to the `layout` and output in `href`.
+Page attribute set is first passed to the template, and that result is passed to the `layout` and output in `path`.
 
 Pages can be created from data, or from plain templates.
 
@@ -25,3 +25,5 @@ The standard library provide helper functions to generate different types of pag
 - `mkPageList`: to generate a list of pages from a list of data.
 - `mkMultipages`: to split a single data piece between multiple pages.
 - `mkTaxonomyPages`: to generate taxonomy pages from taxonomy data.
+
+For more details refer to the [pages](https://styx-static.github.io/styx-site/documentation.html#Pages) chapter of styx documentation.

example/data/posts/2016-09-16-themes.md

@@ -2,36 +2,42 @@
 title = "Themes";
 tags = [ "themes" ];
 level = [ "★★" ];
-banner = "post-banners/chalk.jpg";
+banner = "/post-banners/chalk.jpg";
 ---}
 
 Themes are the main way to customize Styx sites. This post introduce themes basics.
 
 >>>
 
-Themes provides the following:
+Themes can provide the following:
 
 - Template files
 - Static files
 - A configuration interface
 - An example site
+- A function library
 
-## Using a theme
-
-Using a theme is as easy as downloading it in themes directory and adding it to the `site.nix` themes list. The recommended way to download themes is `git`.
+## Previewing a theme
 
-To install the showcase theme just run the following command from the site root:
+Previewing a theme fom the `styx-themes` package set is very easy, the following will launch the preview site for the showcase theme.
 
 ```
-git clone https://github.com/styx-static/styx-theme-showcase.git themes/showcase
+$ styx preview --in $(nix-build -A styx-themes.showcase '<nixpkgs>')/example
 ```
 
-The example site of a theme is located in the `example` directory.
+## Using a theme
 
-It is possible to preview the eample site with the styx `preview` command, from the site root:
+It just require to add the theme to `site.nix` `themes` list to use a theme.  
+Themes from the `styx-themes` package or local themes can be used and combined.
 
 ```
-styx preview --target themes/showcase/example
+  /* 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
+    ./themes/my-theme
+  ];
 ```
 
 ## Customizing themes
@@ -40,39 +46,45 @@ styx preview --target themes/showcase/example
 
 The main way to customize a theme is by using the configuration interface.
 
-Every theme expose some of its functionality to various degrees in the `themes/THEME/theme.conf` file.
-`theme.conf` is usually commented or theme documentation is available in another site like `themes/THEME/readme.md`.
+Every theme expose some of its functionality to various degrees in the `themes/THEME/conf.nix` file.
+A theme `conf.nix` is usually commented or theme documentation is available in another file such as `themes/THEME/readme.md`.
 
-Let's say that the theme exposes a `site.title` option to change the site title. To change this option you need edit the `conf.nix` file in the site root in the following manner:
+Let's say that the theme exposes a `site.title` option to change the site title. To change this option you need edit the *site* `conf.nix` file (in the site root) in the following manner:
 
 ```
 {
-  theme.site.title = "My Super Site!";
+  theme.site.title = "My Site";
 }
 ```
 
 ### Extending themes
 
 To change a template or a file provided by a theme, you do not need to edit it! You can just "extend" the theme.
 
-Exntending a theme consist in creating a new theme with only the files you want to extend.
+Extending a theme consist in creating a new theme with only the files you want to override from an other theme.
 
-Let's say you want to extend the showcase theme `layout.nix` template. First we need to create a new theme, the `new theme` command can create a theme folder structure:
+Let's say you want to extend the `generic-templates` theme `templates.partials.head.css-custom` template to load `themes/my-theme/files/css/style.css`.  
+First we need to create a new theme, the `new theme` command can create a theme folder structure:
 
 ```
-styx new theme my-showcase --in ./themes
+$ styx new theme my-theme --in ./themes
 ```
 
-Next we just need to add `my-showcase` to the themes list in `site.nix`:
+Next we just need to add `my-theme` to the themes list in `site.nix`:
 
 ```
-  themes = [ "my-showcase" "showcase" ]; 
+  themes = [
+    styx-themes.generic-templates
+    ./themes/my-theme
+  ]; 
 ```
 
-Then copy `layout.nix` in `my-showcase` templates and modify it will be all required to change it.
+Then create a `themes/my-theme/templates/partials/head/css-custom.nix` with the following code to load `themes/my-theme/files/css/style.css`.
 
-Extending themes have many benefits:
-
-- No modification to the base themes, so they can be easily updated.
-- Multiple themes layers can be created and combined.
+```
+{ templates, ... }:
+args:
+templates.tag.link-css { href = templates.url "/css/style.css"; }
+```
 
+For more details refer to the [themes](https://styx-static.github.io/styx-site/documentation.html#Themes) chapter of styx documentation.

example/data/posts/2016-09-18-basics.md

@@ -44,3 +44,4 @@ Styx does not enforce any data or site structure. You are totally free to do wha
 
 Also, the site generation function provides hooks that allow even more use cases, Styx site use the `postGen` to generate every styx version documentation.
 
+For more details refer to the [basics](https://styx-static.github.io/styx-site/documentation.html#_basics) chapter of styx documentation.

example/site.nix

@@ -24,6 +24,7 @@ rec {
      items at the end of the list have higher priority
   */
   themes = [
+    styx-themes.generic-templates
     ../.
   ];
 
@@ -54,7 +55,7 @@ rec {
       postsList = loadDir { dir = ./data/posts; };
       draftsList = optionals (extraConf ? renderDrafts) (loadDir { dir = ./data/drafts; isDraft = true; });
     in sortBy "date" "dsc" (postsList ++ draftsList);
-    menus = [ pages.about ];
+    menu = [ pages.about ];
   };
 
 
@@ -71,51 +72,53 @@ rec {
        For more complex needs, mkSplitCustom is available
     */
     index = mkSplit {
-      title = "Home";
-      baseHref = "index";
+      title        = "Home";
+      basePath     = "/index";
       itemsPerPage = conf.theme.index.itemsPerPage;
-      template = templates.index;
-      data = posts;
+      template     = templates.index;
+      data         = posts;
     };
 
     /* About page
        Example of generating a page from imported data
     */
     about = {
-      href = "about.html";
-      template = templates.generic.full;
+      path     = "/about.html";
+      template = templates.page.full;
     } // data.about;
 
-    /* RSS feed page
+    /* Feed page
     */
     feed = {
-      href = "feed.xml";
-      template = templates.feed;
-      # Show the 10 most recent posts
-      posts = take 10 posts;
+      path     = "/feed.xml";
+      template = templates.feed.atom;
       # Bypassing the layout
-      layout = id;
+      layout   = id;
+      items    = take 10 posts;
     };
 
     /* 404 error page
     */
-    e404 = { href = "404.html"; template = templates.e404; title = "404"; };
+    e404 = {
+      path     = "/404.html";
+      template = templates.e404;
+    };
 
     /* Posts pages (as a list of pages)
     */
     posts = mkPageList {
-      data = data.posts;
-      hrefPrefix = "posts/";
-      template = templates.post.full;
+      data        = data.posts;
+      pathPrefix  = "/posts/";
+      template    = templates.post.full;
       breadcrumbs = [ (head pages.index) ];
     };
 
     /* Multipages handling
     */
     postsMultiTail = mkMultiTail {
-      data = data.posts;
-      hrefPrefix = "posts/";
-      template = templates.post.full;
+      data        = data.posts;
+      pathPrefix  = "/posts/";
+      template    = templates.post.full;
       breadcrumbs = [ (head pages.index) ];
     };
 

readme.md

@@ -22,3 +22,7 @@ Look at the example site to see how to use.
 Open sourced under the [MIT license](LICENSE.md).
 
 <3
+
+## Preview
+
+![Preview](/screen.png)

templates/e404.nix

@@ -1,9 +1,8 @@
-{ conf, ... }:
-page:
-let content =
-''
-  <h1>404: Page not found</h1>
-  <p class="lead">Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. <a href="${conf.siteUrl}">Head back home</a> to try finding it again.</p>
-'';
-in
-  page // { inherit content; }
+{ lib, templates, ... }:
+lib.normalTemplate { 
+  content = ''
+    <h1>404: Page not found</h1>
+    <p class="lead">Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. ${templates.tag.ilink { path = "/"; content = "Head back home"; }} to try finding it again.</p>
+  '';
+  title = "404";
+}

templates/index.nix

@@ -1,13 +1,9 @@
 { conf, lib, templates, data, ... }:
-page:
 with lib;
-let content =
-  ''
+normalTemplate (page: ''
   <div class="posts">
     ${mapTemplate templates.post.list (page.items or [])}
   </div>
 
-  ${templates.partials.pagination { pages = (page.pages or []); index = page.index; }} 
-  '';
-in
- page // { inherit content; }
+  ${optionalString (page ? pages) (templates.partials.pager { inherit (page) pages index; })} 
+'')

templates/partials/body.nix

@@ -0,0 +1,17 @@
+{ templates, lib, conf, ... }:
+args:
+with lib;
+let 
+  class = htmlAttr "class" (
+       (optional (conf.theme ? color) conf.theme.color)
+    ++ (optional (conf.theme.layout-reverse) "layout-reverse")
+  );
+in
+''
+<body ${class}>
+${(templates.partials.content-pre  args)
++ (templates.partials.content      args)
++ (templates.partials.content-post args)
++ (templates.partials.js args)
+}</body>
+''