feat: css utils, refactor site
This commit is contained in:
parent
4ac1edf168
commit
5dab512a5d
@ -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
20
css.nix
Normal 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
19
examples/site.nix
Normal 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")
|
||||
];
|
||||
};
|
||||
})
|
||||
];
|
||||
})
|
@ -1,5 +1,6 @@
|
||||
title = "test site"
|
||||
|
||||
[pages]
|
||||
index = "index.html"
|
||||
about = "about.html"
|
||||
test = "404.html"
|
@ -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 {
|
||||
|
@ -53,5 +53,5 @@ in
|
||||
posts = postsRendered;
|
||||
};
|
||||
in
|
||||
templater context;
|
||||
(templater context).site;
|
||||
}
|
||||
|
@ -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;
|
||||
};
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user