feat: no children tags, use purecss

examples/site/posts/looong.md

@@ -0,0 +1,19 @@
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas nisl quis erat cursus scelerisque. Phasellus eget commodo libero, luctus tincidunt ipsum. Ut feugiat elit in nulla pretium, hendrerit aliquam massa tempor. Duis suscipit eros ut convallis ullamcorper. Duis eget aliquet ante. Nam sit amet posuere est. Sed sodales, quam a ornare semper, elit nisl semper nunc, ac euismod velit quam quis tortor. Aenean finibus, ex sed accumsan commodo, felis nunc ultricies nunc, et molestie mi nulla sit amet nulla. Nulla facilisi. Cras malesuada, lectus tempus tincidunt porttitor, justo mauris sagittis eros, viverra varius felis sapien non eros. Donec nec accumsan neque, id fermentum mi. Nulla tincidunt feugiat dui et lacinia. Phasellus a mauris sit amet ipsum luctus sollicitudin sit amet et enim. Fusce diam nisi, imperdiet quis nulla id, lobortis posuere sapien. Proin mollis enim diam, vitae condimentum metus cursus et. Sed gravida, erat sed feugiat gravida, quam risus condimentum mi, in hendrerit nibh ante nec ipsum.
+
+Quisque sit amet bibendum risus, scelerisque varius nibh. Nunc ac turpis ut orci convallis tempus ut faucibus risus. Aliquam lacinia ultrices consectetur. Cras odio eros, laoreet id purus nec, laoreet congue enim. Ut cursus finibus maximus. Pellentesque et lobortis orci, a malesuada purus. Maecenas rhoncus interdum eleifend.
+
+Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce semper molestie luctus. Sed finibus, augue nec congue eleifend, sapien mi viverra nunc, quis dictum tortor ante at eros. Duis congue dolor ac feugiat malesuada. Phasellus euismod imperdiet velit, vitae venenatis enim fermentum sit amet. Suspendisse neque ex, maximus sit amet tempus sed, lobortis sed mi. Nunc tellus nisl, auctor vitae rutrum vitae, dictum finibus arcu. Cras et lectus consectetur, commodo arcu quis, placerat leo. Vestibulum velit tortor, aliquet quis augue id, tristique fermentum libero. Ut in leo semper ex fermentum porttitor. Sed mollis purus eu ante facilisis, non ultrices odio euismod. Curabitur metus ipsum, tristique vel lacinia quis, aliquet sed nunc. Nulla vehicula sem nec mattis bibendum. In hac habitasse platea dictumst.
+
+Pellentesque vel magna nibh. Aenean id volutpat est, quis bibendum dui. Proin a dui lobortis, euismod lorem quis, blandit ante. Morbi venenatis semper magna eu vehicula. Morbi ac tellus ut nibh consequat iaculis eget quis enim. Proin nibh velit, dapibus at pharetra at, pharetra eu magna. Ut accumsan metus venenatis, mollis nulla sit amet, faucibus lectus. Suspendisse potenti. Pellentesque tincidunt, libero eu ultricies cursus, arcu tortor porta lectus, a congue ex nulla vitae neque.
+
+Nullam scelerisque eros augue, semper maximus erat auctor vitae. Vestibulum malesuada euismod purus sit amet elementum. Nullam mollis eros diam, ut viverra tellus pellentesque vel. Praesent hendrerit gravida fringilla. Cras id bibendum lectus. Fusce a lacinia lacus. In elementum eleifend ante eu ultrices. Morbi volutpat laoreet enim, id dignissim purus laoreet lacinia. Maecenas viverra pretium lacus, ac vulputate dui dapibus a.
+
+Duis quis ullamcorper leo. Nam neque ex, aliquam in ultricies eu, egestas id sapien. Quisque at ligula massa. Mauris eu lectus nec erat bibendum ornare. In hac habitasse platea dictumst. Mauris vitae felis non leo sodales facilisis. In lobortis leo sed massa pulvinar pretium. Ut et posuere ipsum. Aenean eget mi rhoncus, cursus nunc sed, semper dolor.
+
+Nulla iaculis tellus ut lacus facilisis sagittis. Mauris risus enim, ullamcorper ut mauris at, vulputate condimentum neque. Sed at dolor ac lacus laoreet tincidunt at ut dui. Morbi fermentum ligula in est mattis, id pulvinar velit blandit. Nam in neque ut leo blandit scelerisque. Aenean vel libero eget ante elementum eleifend in id est. Praesent viverra urna quis molestie ornare.
+
+Donec justo neque, efficitur id pellentesque non, malesuada sed dui. In sed nunc elementum ex porttitor sollicitudin ut interdum quam. Etiam vitae mattis tortor, vitae feugiat mauris. Donec iaculis placerat nisi porta imperdiet. Nam aliquam, sapien ut elementum maximus, nibh neque tincidunt ligula, id vestibulum diam lacus quis elit. Sed eget facilisis dui, eu dapibus leo. Mauris id commodo diam, at porta lectus. Integer faucibus a urna vel luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer eget est aliquam, vestibulum est ut, aliquet dui. Vivamus lacinia justo quis leo semper, ut bibendum sem volutpat. Phasellus egestas dolor risus, nec tincidunt velit faucibus ac. Mauris eu posuere massa, in semper lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc vel elit et erat fringilla pellentesque eu sit amet sapien.
+
+Suspendisse id libero eget nisl vestibulum euismod. Pellentesque congue, lectus at venenatis pulvinar, tellus lorem convallis eros, eu ornare lorem nibh sit amet mi. Aliquam erat volutpat. Phasellus efficitur metus ac aliquet aliquet. Mauris quis augue in neque tristique accumsan in ut dui. Sed consequat vestibulum arcu sit amet tempus. Nullam interdum nulla neque, ac accumsan metus volutpat at. Curabitur at auctor urna. Quisque nec consectetur mi. Fusce scelerisque tellus purus, cursus pulvinar elit lacinia nec. In hac habitasse platea dictumst.
+
+Vestibulum at ipsum iaculis, mattis nunc fringilla, ornare elit. Sed viverra urna eget sem euismod, vel fermentum tellus dignissim. Fusce interdum pharetra elit nec vestibulum. Sed pulvinar elit at efficitur ornare. Phasellus aliquet nulla metus, et placerat nulla vulputate venenatis. Aenean vel bibendum leo, sit amet cursus dui. Sed vulputate imperdiet aliquet.

tags.nix

@@ -8,12 +8,16 @@ let
     if isAttrs maybeAttrs
     then (children: "<${name}${evalAttrs maybeAttrs}>\n  ${evalChildren children}\n</${name}>\n")
     else tag name { } maybeAttrs;
+  noChildrenTag = name: attrs: "<${name} ${evalAttrs attrs}>";
 
-  tagsToGen = [ "html" "head" "body" "div" "p" "a" "title" "meta" "code" "pre" "link" ] ++ (map (n: "h${toString n}") (range 1 6));
+  tagsToGen = [ "html" "head" "body" "div" "p" "a" "title" "code" "pre" ] ++ (map (n: "h${toString n}") (range 1 6));
   tags = genAttrs tag tagsToGen;
+
+  noChildrenTagsToGen = [ "link" "meta" ];
+  noChildrenTags = genAttrs noChildrenTag noChildrenTagsToGen;
 in
-tags // {
+tags // noChildrenTags // {
   inherit tag;
   mkLink = url: tags.a { href = url; };
-  mkStylesheet = url: "<link rel=\"stylesheet\" href=\"${url}\">";
+  mkStylesheet = url: noChildrenTags.link { rel = "stylesheet"; href = url; };
 }

templaters/basic.nix

@@ -3,13 +3,8 @@ let
   inherit (utils) readFile mapAttrsToList tags fetchGit;
   inherit (pkgs.lib) flatten;
 
-  skeleton = fetchGit {
-    url = "https://github.com/dhg/Skeleton.git";
-    rev = "88f03612b05f093e3f235ced77cf89d3a8fcf846";
-  };
-
   renderPost = name: value: with tags; [
-    (a { href = "#${name}"; class = "postheader"; } (h4 { id = name; } ("## " + name)))
+    (a { href = "#${name}"; class = "postheader"; } (h3 { id = name; } ("## " + name)))
     (readFile value)
   ];
 
@@ -20,36 +15,39 @@ in
     html [
       (head [
         (title config.title)
-        (mkStylesheet "css/normalize.css")
-        (mkStylesheet "css/skeleton.css")
+        (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 [
-        (div { class = "container"; style = "margin-top: 5%; margin-bottom: 5%;"; } [
-          (div { class = "column"; } [
-            (div { class = "twelve columns"; } [
-              (a { href = "#About"; class = "postheader"; } (h1 "# About"))
-              (p config.about)
-            ])
-            (div { class = "twelve columns"; } ([
-              (a { href = "#Posts"; class = "postheader"; } (h1 "# Posts"))
-            ] ++ allPosts))
-          ])
+        (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 = {
-    "normalize.css" = readFile "${skeleton}/css/normalize.css";
-    "skeleton.css" = readFile "${skeleton}/css/skeleton.css";
     "mine.css" = ''
-      a.postheader {
+      a.postheader,a.postheader:hover {
         color: inherit;
         text-decoration: underline;
       }
-      a.postheader:hover {
-        color: inherit;
-        text-decoration: underline;
+      div.posts {
+        margin-top: 5%;
+        margin-bottom: 5%;
+        margin-left: 20%;
+        margin-right: 10%;
+      }
+      div.about {
+        position: -webkit-sticky;
+        position: sticky;
+        top: 0;
+        margin-left: 3%;
       }
     '';
   };