feat: css utils, refactor site

README.md

@@ -1,4 +1,4 @@
-HTML utilities and SSG in Nix. Checkout [examples](./examples).
+CSS, HTML utilities and SSG in Nix. Checkout [examples](./examples).
 
 ## Examples
 

css.nix

@@ -0,0 +1,20 @@
+{ utils }:
+let
+  inherit (utils) mapAttrsToList concatStringsSep isList toString map;
+
+  evalCssValue = value: if isList value then concatStringsSep ", " (map toString value) else toString value;
+  evalInner = inner: concatStringsSep "\n" (mapAttrsToList (name: value: "${name}: ${evalCssValue value};") inner);
+  css = maybeAttrs:
+    if isList maybeAttrs
+    then concatStringsSep "\n" maybeAttrs
+    else concatStringsSep "\n" (mapAttrsToList (name: inner: "${name} {\n${evalInner inner}\n}") maybeAttrs);
+in
+{
+  inherit css;
+
+  media = rule: inner: ''
+    @media (${rule}) {
+        ${css inner}
+    }
+  '';
+}

examples/site.nix

@@ -0,0 +1,19 @@
+{ pkgs, lib }:
+let
+  inherit (pkgs) htmlNix;
+  src = ./site;
+in
+htmlNix.mkServeFromSite (htmlNix.mkSiteFrom {
+  inherit src;
+  templater = context: pkgs.lib.pipe context [
+    lib.templaters.basic
+    ({ site, mkPage, ... }@result: {
+      site = site // {
+        "about.html" = with lib.tags; mkPage [
+          (h1 "About")
+          (p "testy test test")
+        ];
+      };
+    })
+  ];
+})

examples/site/config.toml

@@ -1,5 +1,6 @@
 title = "test site"
 
 [pages]
+index = "index.html"
 about = "about.html"
 test = "404.html"

flake.nix

@@ -11,6 +11,7 @@
 
         lib = {
           tags = import ./tags.nix { inherit utils; };
+          css = import ./css.nix { inherit utils; };
 
           templaters = {
             basic = import ./templaters/basic.nix;
@@ -18,14 +19,14 @@
         };
 
         pkgsLib = (final: prev: {
-          htmlNix = import ./pkgs-lib.nix { pkgs = prev; utils = utils // { inherit (lib) tags; }; };
+          htmlNix = import ./pkgs-lib.nix { pkgs = prev; utils = utils // { inherit (lib) tags css; }; };
         });
 
         pkgs = import nixpkgs { inherit system; overlays = [ pkgsLib ]; };
       in
       {
         lib = lib // {
-          pkgsLib = import ./pkgs-lib.nix { inherit pkgs; utils = utils // { inherit (lib) tags; }; };
+          pkgsLib = import ./pkgs-lib.nix { inherit pkgs; utils = utils // { inherit (lib) tags css; }; };
         };
 
         overlays = {
@@ -34,8 +35,7 @@
 
         apps = with flakeUtils.lib; {
           site = mkApp {
-            drv = let inherit (pkgs) htmlNix; in
+            drv = import ./examples/site.nix { inherit lib pkgs; };
-              htmlNix.mkServeFromSite (htmlNix.mkSiteFrom { src = ./examples/site; templater = lib.templaters.basic; });
             name = "serve";
           };
           basicServe = mkApp {

pkgs-lib.nix

@@ -53,5 +53,5 @@ in
         posts = postsRendered;
       };
     in
-    templater context;
+    (templater context).site;
 }

templaters/basic.nix

@@ -3,7 +3,7 @@ let
   inherit (utils) readFile mapAttrsToList tags fetchGit map;
   inherit (pkgs.lib) flatten optional length;
 
-  stylesheets = map tags.mkStylesheet [ "https://unpkg.com/purecss@2.0.6/build/pure-min.css" "https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css" "css/mine.css" ];
+  stylesheets = map tags.mkStylesheet [ "https://unpkg.com/purecss@2.0.6/build/pure-min.css" "https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css" "mine.css" ];
 
   renderPost = name: value: with tags; article [
     (a { href = "#${name}"; class = "postheader"; } (h3 { id = name; } ("## " + name)))
@@ -15,9 +15,9 @@ let
       (name: relPath: tags.div { class = "pure-u-1"; } (tags.a { href = "./${relPath}"; class = "postheader"; } name))
       (config.pages or { });
 
-  postsSection = with tags; div { class = "posts"; } ([
+  postsSectionContent = with tags; [
     (a { href = "#posts"; class = "postheader"; } (h1 "# posts"))
-  ] ++ allPosts);
+  ] ++ allPosts;
 
   sidebarSection = optional ((length pages) > 0) (
     with tags; nav { class = "sidebar"; } ([
@@ -25,59 +25,68 @@ let
       (div { class = "pure-g"; } pages)
     ])
   );
-in
+
-{
+  mkPage = content: with tags;
-  "index.html" = with tags;
     html [
       (head (stylesheets ++ [
         (title config.title)
         (meta { name = "viewport"; content = "width=device-width, initial-scale=1"; })
       ]))
-      (body (sidebarSection ++ [ postsSection ]))
+      (body (sidebarSection ++ [ (div { class = "content"; } content) ]))
     ];
 
-  css = {
+  stylesheet =
-    "mine.css" = ''
+    with utils.css;
-      body {
+    css [
-        font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+      (css {
-      }
+        body = {
-      code {
+          font-family = [ "Raleway" "Helvetica" "Arial" "sans-serif" ];
-        font-family: "Iosevka Term", "Iosevka", monospace;
+        };
-        background: #000000cc;
+        code = {
-        color: #eeeeee;
+          font-family = [ "Iosevka Term" "Iosevka" "monospace" ];
-      }
+          background = "#000000cc";
-      a.postheader,a.postheader:hover {
+          color = "#eeeeee";
-        color: inherit;
+        };
-        text-decoration: none;
+        "a.postheader,a.postheader:hover" = {
-      }
+          color = "inherit";
-      a.postheader:hover {
+          text-decoration = "none";
-        text-decoration: underline;
+        };
-      }
+        "a.postheader:hover" = {
-      div.posts {
+          text-decoration = "underline";
-        margin-top: 5%;
+        };
-        margin-bottom: 5%;
+        "div.content" = {
-        margin-left: 20%;
+          margin-top = "5%";
-        margin-right: 10%;
+          margin-bottom = "5%";
-      }
+          margin-left = "20%";
-      nav.sidebar {
+          margin-right = "10%";
-        position: fixed;
+        };
-        top: 0;
+        "nav.sidebar" = {
-        margin-left: 3%;
+          position = "fixed";
-        z-index: 1000;
+          top = 0;
-      }
+          margin-left = "3%";
-      @media (max-width: 48em) {
+          z-index = 1000;
-          nav.sidebar {
+        };
-            position: relative;
+      })
-            margin-top: 5%;
+      (media "max-width: 48em" {
-            margin-left: 0;
+        "nav.sidebar" = {
-            margin-right: 0;
+          position = "relative";
-          }
+          margin-top = "5%";
-          div.posts {
+          margin-left = "3%";
-            margin-top: 0;
+          margin-right = "3%";
-            margin-left: 0;
+        };
-            margin-right: 0;
+        "div.content" = {
-          }
+          margin-top = 0;
-      }
+          margin-left = "3%";
-    '';
+          margin-right = "3%";
+        };
+      })
+    ];
+in
+{
+  inherit stylesheets sidebarSection mkPage stylesheet;
+
+  site = {
+    "index.html" = mkPage postsSectionContent;
+    "mine.css" = stylesheet;
   };
 }