feat: css utils, refactor site

This commit is contained in:
dusk 2021-05-16 02:56:54 +03:00
parent 4ac1edf168
commit 5dab512a5d
Signed by: dusk
GPG Key ID: 1D8F8FAF2294D6EA
7 changed files with 105 additions and 56 deletions

View File

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

20
css.nix Normal file
View File

@ -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}
}
'';
}

19
examples/site.nix Normal file
View File

@ -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")
];
};
})
];
})

View File

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

View File

@ -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
htmlNix.mkServeFromSite (htmlNix.mkSiteFrom { src = ./examples/site; templater = lib.templaters.basic; });
drv = import ./examples/site.nix { inherit lib pkgs; };
name = "serve";
};
basicServe = mkApp {

View File

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

View File

@ -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
{
"index.html" = with tags;
mkPage = content: 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 = {
"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 {
margin-top: 5%;
margin-bottom: 5%;
margin-left: 20%;
margin-right: 10%;
}
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;
}
}
'';
stylesheet =
with utils.css;
css [
(css {
body = {
font-family = [ "Raleway" "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.content" = {
margin-top = "5%";
margin-bottom = "5%";
margin-left = "20%";
margin-right = "10%";
};
"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 = "3%";
margin-right = "3%";
};
"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;
};
}