refactor(wpcarro/website): Prefer substituteAll

`substituteAll` supports templating with @variables@, which I think really
cleans things up.

Change-Id: Icfad15ac9e174495ba02260d817f7330f1616c6f
Reviewed-on: https://cl.tvl.fyi/c/depot/+/4722
Reviewed-by: wpcarro <wpcarro@gmail.com>
Autosubmit: wpcarro <wpcarro@gmail.com>
Tested-by: BuildkiteCI
This commit is contained in:
William Carroll 2021-12-27 20:06:08 -04:00 committed by clbot
parent 52369a11e3
commit e107311cb8
8 changed files with 94 additions and 85 deletions

View file

@ -6,16 +6,16 @@ let
inherit (builtins) hasAttr filter readFile;
inherit (depot.web.blog) post includePost renderPost;
inherit (depot.users) wpcarro;
inherit (pkgs) runCommandNoCC;
config = {
name = "wpcarro's blog";
baseUrl = "https://wpcarro.dev/blog";
footer = "";
};
posts = filter includePost (list post (import ./posts.nix));
rendered = runCommandNoCC "wpcarros-blog" {} ''
rendered = pkgs.runCommandNoCC "wpcarros-blog-posts" {} ''
mkdir -p $out
${lib.concatStringsSep "\n" (map (post:
@ -23,41 +23,26 @@ let
) posts)}
'';
formatDate = date: readFile (runCommandNoCC "date" {} ''
formatDate = date: readFile (pkgs.runCommandNoCC "date" {} ''
date --date='@${toString date}' '+%B %e, %Y' > $out
'');
postsList = pkgs.writeText "index.html" ''
<div class="max-w-sm md:max-w-prose mx-auto">
<section class="pt-8 pb-14">
<p class="font-bold pb-4">Personal blog by <a class="font-bold text-blue-600 hover:underline" href="https://wpcarro.dev">wpcarro</a>.</p>
<p class="text-gray-500">&gt; Half-baked musings lossily encoded.</p>
<p class="text-gray-500">&gt; - misc reviewer</p>
</section>
<ul>
${lib.concatStringsSep "\n" (map (post: ''
<li class="pb-10">
<h2 class="text-bold font-2xl ">
<a class="font-bold text-blue-600 hover:underline" href="${config.baseUrl}/${post.key}.html">
${post.title}
</a>
</h2>
<p class="text-gray-500">
${formatDate post.date}
</p>
</li>
'') posts)}
</ul>
</div>
'';
postsHtml = readFile (pkgs.substituteAll {
src = ./fragments/posts.html;
postsHtml = lib.concatStringsSep "\n" (map toPostHtml posts);
});
toPostHtml = post: readFile (pkgs.substituteAll {
src = ./fragments/post.html;
postUrl = "${config.baseUrl}/${post.key}.html";
postTitle = post.title;
postDate = formatDate post.date;
});
in {
inherit posts rendered config;
root = runCommandNoCC "wpcarros-blog" {} ''
root = pkgs.runCommandNoCC "wpcarros-blog" {} ''
mkdir -p $out
cat ${wpcarro.website.header} \
${postsList} \
${wpcarro.website.addendum} > $out/index.html
cp ${wpcarro.website.render postsHtml} $out/index.html
'';
}

View file

@ -0,0 +1,8 @@
<li class="pb-6 md:pb-10">
<h2 class="text-bold text-xl">
<a class="font-bold text-blue-600 hover:underline" href="@postUrl@">
@postTitle@
</a>
</h2>
<p class="text-gray-500">@postDate@</p>
</li>

View file

@ -0,0 +1,10 @@
<div class="max-w-sm md:max-w-prose mx-auto">
<section class="pt-8 pb-14">
<p class="font-bold pb-3 text-xl">
Personal blog by <a class="font-bold text-blue-600 hover:underline" href="https://wpcarro.dev">wpcarro</a>.
</p>
<p class="text-gray-500">&gt; Half-baked musings lossily encoded.</p>
<p class="text-gray-500">&gt; - misc reviewer</p>
</section>
<ul>@postsHtml@</ul>
</div>

View file

@ -1,27 +1,27 @@
{ pkgs, depot, ... }:
rec {
let
inherit (builtins) readFile;
inherit (depot.users) wpcarro;
header = "${./fragments/header.html}";
footer = "${./fragments/footer.html}";
addendum = "${./fragments/addendum.html}";
root = pkgs.stdenv.mkDerivation {
name = "wpcarro.dev";
src = builtins.path { path = ./.; name = "website"; };
installPhase = ''
mkdir -p $out
cat ${header} \
${./fragments/homepage.html} \
${footer} \
${addendum} > $out/index.html
mkdir -p $out/habits
cp -r ${wpcarro.website.habit-screens} $out/habits/index.html
cp -r ${wpcarro.website.blog.root} $out/blog
'';
render = contentHtml: pkgs.substituteAll {
inherit contentHtml;
src = ./fragments/template.html;
};
in {
inherit render;
root = pkgs.runCommandNoCC "wpcarro.dev" {} ''
mkdir -p $out
# /
cp ${render (readFile ./fragments/homepage.html)} $out/index.html
# /habits
mkdir -p $out/habits
cp -r ${wpcarro.website.habit-screens} $out/habits/index.html
# /blog
cp -r ${wpcarro.website.blog.root} $out/blog
'';
}

View file

@ -1,13 +0,0 @@
</div>
<script>
const $header = document.querySelector("header");
const dropShadow = "drop-shadow-md";
const update = () => window.scrollY !== 0 ?
$header.classList.add(dropShadow) :
$header.classList.remove(dropShadow);
update();
document.addEventListener("scroll", update);
</script>
</body>
</html>

View file

@ -1,20 +0,0 @@
<footer class="md:hidden pb-6">
<h2 class="text-2xl font-bold pt-4 pb-6">Other Links</h2>
<ul>
<li class="pb-6">
<a class="text-blue-600 font-bold" href="https://wpcarro.dev/blog">
Blog <span class="text-blue-300">-></span>
</a>
</li>
<li class="pb-6">
<a class="text-blue-600 font-bold" href="https://github.com/wpcarro">
GitHub <span class="text-blue-300">-></span>
</a>
</li>
<li class="pb-6">
<a class="text-blue-600 font-bold" href="https://linkedin.com/in/williampatrickcarroll">
LinkedIn <span class="text-blue-300">-></span>
</a>
</li>
</ul>
</footer>

View file

@ -55,3 +55,42 @@
</div>
</header>
<div class="max-w-sm px-2 md:px-0 md:max-w-prose mx-auto">
@contentHtml@
<footer class="md:hidden pb-6">
<h2 class="text-xl font-bold py-4">More wpcarro?</h2>
<ul>
<li class="pb-6">
<a class="text-blue-600 font-bold" href="https://wpcarro.dev">
Home <span class="text-blue-300">-></span>
</a>
</li>
<li class="pb-6">
<a class="text-blue-600 font-bold" href="https://wpcarro.dev/blog">
Blog <span class="text-blue-300">-></span>
</a>
</li>
<li class="pb-6">
<a class="text-blue-600 font-bold" href="https://github.com/wpcarro">
GitHub <span class="text-blue-300">-></span>
</a>
</li>
<li class="pb-6">
<a class="text-blue-600 font-bold" href="https://linkedin.com/in/williampatrickcarroll">
LinkedIn <span class="text-blue-300">-></span>
</a>
</li>
</ul>
</footer>
</div>
<script>
const $header = document.querySelector("header");
const dropShadow = "drop-shadow-md";
const update = () => window.scrollY !== 0 ?
$header.classList.add(dropShadow) :
$header.classList.remove(dropShadow);
update();
document.addEventListener("scroll", update);
</script>
</body>
</html>