diff --git a/conf.nix b/conf.nix
index c243f94..f95b1df 100644
--- a/conf.nix
+++ b/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 @mdo. Originally made for Jekyll.
+ '';
};
# Set the color theme
diff --git a/example/conf.nix b/example/conf.nix
index bea59a3..e409376 100644
--- a/example/conf.nix
+++ b/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
diff --git a/example/data/drafts/2016-09-11-drafts.md b/example/data/drafts/2016-09-11-drafts.md
index 78f8edf..7f6c2b0 100644
--- a/example/data/drafts/2016-09-11-drafts.md
+++ b/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; });
diff --git a/example/data/posts/2016-09-13-multipages.md b/example/data/posts/2016-09-13-multipages.md
index 1b920c0..6e76aa7 100644
--- a/example/data/posts/2016-09-13-multipages.md
+++ b/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.
diff --git a/example/data/posts/2016-09-14-pages.md b/example/data/posts/2016-09-14-pages.md
index 600dc20..b1febc3 100644
--- a/example/data/posts/2016-09-14-pages.md
+++ b/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.
diff --git a/example/data/posts/2016-09-16-themes.md b/example/data/posts/2016-09-16-themes.md
index 1c488bd..70b5725 100644
--- a/example/data/posts/2016-09-16-themes.md
+++ b/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 '')/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,14 +46,14 @@ 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";
}
```
@@ -55,24 +61,30 @@ Let's say that the theme exposes a `site.title` option to change the site title.
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.
diff --git a/example/data/posts/2016-09-18-basics.md b/example/data/posts/2016-09-18-basics.md
index 4bd0858..934bd4d 100644
--- a/example/data/posts/2016-09-18-basics.md
+++ b/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.
diff --git a/example/site.nix b/example/site.nix
index 936a1a9..1334a90 100644
--- a/example/site.nix
+++ b/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) ];
};
diff --git a/readme.md b/readme.md
index 64b71fd..18f1723 100644
--- a/readme.md
+++ b/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
+
+
diff --git a/screen.png b/screen.png
new file mode 100644
index 0000000..9a85405
Binary files /dev/null and b/screen.png differ
diff --git a/templates/e404.nix b/templates/e404.nix
index 738e811..0e2f3bb 100644
--- a/templates/e404.nix
+++ b/templates/e404.nix
@@ -1,9 +1,8 @@
-{ conf, ... }:
-page:
-let content =
-''
-
404: Page not found
-
Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. Head back home to try finding it again.
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.