feat(wpcarro/blog): Add a blog index page
TL;DR: - Create an index page to list blog posts - Drop blog.wpcarro.dev -> wpcarro.dev/blog - Create fragments directory to host reusable static website components - Consume fragments in wpcarro.dev and wpcarro.dev/blog for brand consistency Change-Id: Ib8440300c008c3c0c5e5a6f207e4ea207dd41b47 Reviewed-on: https://cl.tvl.fyi/c/depot/+/4717 Tested-by: BuildkiteCI Reviewed-by: wpcarro <wpcarro@gmail.com> Autosubmit: wpcarro <wpcarro@gmail.com>
This commit is contained in:
William Carroll
clbot
parent
7ce9277a8e
commit
1d4f88cbde
8 changed files with 173 additions and 17 deletions
|
|
@ -109,12 +109,7 @@ in {
|
|||
"wpcarro.dev" = {
|
||||
addSSL = true;
|
||||
enableACME = true;
|
||||
root = wpcarro.website;
|
||||
};
|
||||
"blog.wpcarro.dev" = {
|
||||
addSSL = true;
|
||||
enableACME = true;
|
||||
root = wpcarro.website.blog.rendered;
|
||||
root = wpcarro.website.root;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,8 +3,10 @@
|
|||
with depot.nix.yants;
|
||||
|
||||
let
|
||||
inherit (builtins) hasAttr filter;
|
||||
inherit (builtins) hasAttr filter readFile;
|
||||
inherit (depot.web.blog) post includePost renderPost;
|
||||
inherit (depot.users) wpcarro;
|
||||
inherit (pkgs) runCommandNoCC;
|
||||
|
||||
config = {
|
||||
name = "wpcarro's blog";
|
||||
|
|
@ -14,7 +16,7 @@ let
|
|||
|
||||
posts = filter includePost (list post (import ./posts.nix));
|
||||
|
||||
rendered = pkgs.runCommandNoCC "wpcarros-blog" {} ''
|
||||
rendered = runCommandNoCC "wpcarros-blog" {} ''
|
||||
mkdir -p $out
|
||||
|
||||
${lib.concatStringsSep "\n" (map (post:
|
||||
|
|
@ -22,6 +24,41 @@ let
|
|||
) posts)}
|
||||
'';
|
||||
|
||||
formatDate = date: readFile (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">> Half-baked musings lossily encoded.</p>
|
||||
<p class="text-gray-500">> - 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>
|
||||
'';
|
||||
in {
|
||||
inherit posts rendered config;
|
||||
|
||||
root = runCommandNoCC "wpcarros-blog" {} ''
|
||||
mkdir -p $out
|
||||
|
||||
cat ${wpcarro.website.header} \
|
||||
${postsList} \
|
||||
${wpcarro.website.addendum} > $out/index.html
|
||||
'';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,27 @@
|
|||
{ pkgs, depot, ... }:
|
||||
|
||||
pkgs.stdenv.mkDerivation {
|
||||
name = "wpcarro.dev";
|
||||
src = builtins.path { path = ./.; name = "website"; };
|
||||
installPhase = ''
|
||||
mkdir -p $out
|
||||
cp $src/index.html $out
|
||||
rec {
|
||||
inherit (depot.users) wpcarro;
|
||||
|
||||
mkdir -p $out/habits
|
||||
cp -r ${depot.users.wpcarro.website.habit-screens} $out/habits/index.html
|
||||
'';
|
||||
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
|
||||
'';
|
||||
};
|
||||
}
|
||||
|
|
|
|||
0
users/wpcarro/website/fragments/.skip-subtree
Normal file
0
users/wpcarro/website/fragments/.skip-subtree
Normal file
13
users/wpcarro/website/fragments/addendum.html
Normal file
13
users/wpcarro/website/fragments/addendum.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
</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>
|
||||
20
users/wpcarro/website/fragments/footer.html
Normal file
20
users/wpcarro/website/fragments/footer.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<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>
|
||||
57
users/wpcarro/website/fragments/header.html
Normal file
57
users/wpcarro/website/fragments/header.html
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>wpcarro.dev</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=JetBrains+Mono">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
mono: ["JetBrains Mono", "normal"]
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body class="font-mono bg-gray-100">
|
||||
<header class="sticky z-10 transition duration-300 bg-gray-100 top-0 py-6">
|
||||
<div class="flex max-w-sm md:max-w-3xl mx-auto">
|
||||
<div class="flex-1 text-center md:text-left text-xl md:text-base">
|
||||
<a href="https://cs.tvl.fyi/depot/-/blob/users/wpcarro/website/index.html">
|
||||
<h1 class="font-bold">
|
||||
<span class="text-black">(</span><a class="text-purple-600 hover:underline" href="https://cs.tvl.fyi/depot/-/blob/users/wpcarro/website/index.html">def</a> <a class="text-green-600 hover:underline text-bold" href="https://wpcarro.dev">"wpcarro.dev"</a><span class="text-black">)</span>
|
||||
</h1>
|
||||
</a>
|
||||
</div>
|
||||
<nav class="flex-1 hidden md:block">
|
||||
<ul class="list-reset flex justify-end space-x-8">
|
||||
<li>
|
||||
<a class="hover:underline" href="https://wpcarro.dev/habits">
|
||||
Habits
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="hover:underline" href="https://wpcarro.dev/blog">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="hover:underline" href="https://github.com/wpcarro">
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="hover:underline" href="https://linkedin.com/in/williampatrickcarroll">
|
||||
LinkedIn
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="max-w-sm px-2 md:px-0 md:max-w-prose mx-auto">
|
||||
20
users/wpcarro/website/fragments/homepage.html
Normal file
20
users/wpcarro/website/fragments/homepage.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<section class="leading-7">
|
||||
<p class="relative text-3xl text-center font-bold pt-6 md:pt-14 pb-10">
|
||||
Hey! I'm William.<span class="pl-10 relative"><span class="block absolute right-0 top-0 transition-transform hover:rotate-90">👋</span></span>
|
||||
</p>
|
||||
<p class="pb-4">
|
||||
I write software. Currently I work as a <b>Site Reliability Engineer</b> for
|
||||
<a class="text-blue-600 font-bold hover:underline" href="https://drive.google.com">Google Drive</a>.
|
||||
</p>
|
||||
<p class="pb-4">
|
||||
I'm <b>wpcarro</b> on
|
||||
<a class="font-bold text-blue-600 hover:underline" href="https://github.com/wpcarro">GitHub</a>
|
||||
(and elsewhere), but if you're looking for code samples, the majority of
|
||||
my open-source work resides in a magical place called the
|
||||
<a class="font-bold text-blue-600 hover:underline" href="https://cs.tvl.fyi/depot/-/tree/users/wpcarro">depot</a>.
|
||||
</p>
|
||||
<p class="pb-4">
|
||||
If I'm not coding, I'm likely meditating, training Jiu Jitsu, or
|
||||
fumbling around on the piano or drums.
|
||||
</p>
|
||||
</section>
|
||||
Loading…
Reference in a new issue