From 4ac1edf168b9cf969d5e12b304db7248a954112c Mon Sep 17 00:00:00 2001 From: Yusuf Bera Ertan Date: Sun, 16 May 2021 00:43:38 +0300 Subject: [PATCH] feat: even better css for basic templatet --- examples/site/config.toml | 5 +- examples/site/posts/Testing more.md | 2 +- flake.nix | 4 +- tags.nix | 2 +- templaters/basic.nix | 71 ++++++++++++++++++++--------- 5 files changed, 59 insertions(+), 25 deletions(-) diff --git a/examples/site/config.toml b/examples/site/config.toml index fd1d483..4494163 100644 --- a/examples/site/config.toml +++ b/examples/site/config.toml @@ -1,2 +1,5 @@ title = "test site" -about = "Simple test site" \ No newline at end of file + +[pages] +about = "about.html" +test = "404.html" \ No newline at end of file diff --git a/examples/site/posts/Testing more.md b/examples/site/posts/Testing more.md index 78dfa6a..f51c4c0 100644 --- a/examples/site/posts/Testing more.md +++ b/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. \ No newline at end of file +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. diff --git a/flake.nix b/flake.nix index d47c4d2..dbec502 100644 --- a/flake.nix +++ b/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; diff --git a/tags.nix b/tags.nix index 375ec28..ed937b4 100644 --- a/tags.nix +++ b/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" ]; diff --git a/templaters/basic.nix b/templaters/basic.nix index b4679ea..6d18e83 100644 --- a/templaters/basic.nix +++ b/templaters/basic.nix @@ -1,40 +1,56 @@ { utils, posts, pkgs, config, ... }@context: let - inherit (utils) readFile mapAttrsToList tags fetchGit; - inherit (pkgs.lib) flatten; + inherit (utils) readFile mapAttrsToList tags fetchGit map; + 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 [ - (div { class = "about"; } [ - (a { href = "#About"; class = "postheader"; } (h1 "# About")) - (p config.about) - ]) - (div { class = "posts"; } ([ - (a { href = "#Posts"; class = "postheader"; } (h1 "# Posts")) - ] ++ allPosts)) - ]) + ])) + (body (sidebarSection ++ [ postsSection ])) ]; 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 { - position: -webkit-sticky; - position: sticky; + nav.sidebar { + position: fixed; 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; + } } ''; };