feat: even better css for basic templatet

examples/site/config.toml

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

examples/site/posts/Testing more.md

@@ -1,3 +1,3 @@
 ###### another document
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum felis risus, ac tempor eros mollis ac. Curabitur dictum justo magna, a tristique nibh euismod at. Nullam at laoreet quam, a facilisis massa. Vestibulum iaculis euismod lorem non consequat. Quisque elementum pharetra egestas. Mauris in enim facilisis, pretium lacus vitae, accumsan diam. Praesent ut finibus mauris, eget iaculis lorem. Cras pharetra lectus varius, volutpat odio sit amet, pulvinar lectus. Aliquam malesuada erat a enim rutrum viverra. Nullam blandit nec enim eu egestas. Duis venenatis aliquet cursus. Phasellus non posuere lectus, sed rhoncus mi. Quisque ut ornare dui. Ut eget elit ac leo aliquam aliquam.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum felis risus, ac tempor eros mollis ac. Curabitur dictum justo magna, a tristique nibh euismod at. Nullam at laoreet quam, a facilisis massa. Vestibulum iaculis euismod lorem non consequat. Quisque elementum pharetra egestas. Mauris in enim facilisis, pretium lacus vitae, accumsan diam. Praesent ut finibus mauris, eget iaculis lorem. Cras pharetra lectus varius, volutpat odio sit amet, pulvinar lectus. Aliquam malesuada erat a enim rutrum viverra. Nullam blandit nec enim eu egestas. Duis venenatis aliquet cursus. Phasellus non posuere lectus, sed rhoncus mi. Quisque ut ornare dui. Ut eget elit ac leo aliquam aliquam.

flake.nix

@@ -24,7 +24,9 @@
         pkgs = import nixpkgs { inherit system; overlays = [ pkgsLib ]; };
       in
       {
-        inherit lib;
+        lib = lib // {
+          pkgsLib = import ./pkgs-lib.nix { inherit pkgs; utils = utils // { inherit (lib) tags; }; };
+        };
 
         overlays = {
           inherit pkgsLib;

tags.nix

@@ -10,7 +10,7 @@ let
     else tag name { } maybeAttrs;
   noChildrenTag = name: attrs: "<${name} ${evalAttrs attrs}>";
 
-  tagsToGen = [ "html" "head" "body" "div" "p" "a" "title" "code" "pre" ] ++ (map (n: "h${toString n}") (range 1 6));
+  tagsToGen = [ "html" "head" "body" "div" "p" "a" "title" "code" "pre" "nav" "article" ] ++ (map (n: "h${toString n}") (range 1 6));
   tags = genAttrs tag tagsToGen;
 
   noChildrenTagsToGen = [ "link" "meta" ];

templaters/basic.nix

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