diff options
Diffstat (limited to 'web/homepage')
20 files changed, 356 insertions, 0 deletions
diff --git a/web/homepage/default.nix b/web/homepage/default.nix new file mode 100644 index 000000000000..22380fdea700 --- /dev/null +++ b/web/homepage/default.nix @@ -0,0 +1,72 @@ +# Assembles the website index and configures an nginx instance to +# serve it. +# +# The website is made up of a simple header&footer and content +# elements for things such as blog posts and projects. +# +# Content for the blog is in //web/blog instead of here. +{ depot, lib, ... }: + +with depot; +with nix.yants; + +let + inherit (builtins) readFile replaceStrings sort; + inherit (third_party) writeFile runCommandNoCC; + + # The different types of entries on the homepage. + entryClass = enum "entryClass" [ "blog" "project" "misc" ]; + + # The definition of a single entry. + entry = struct "entry" { + class = entryClass; + title = string; + url = string; + date = int; # epoch + description = option string; + }; + + escape = replaceStrings [ "<" ">" "&" "'" ] [ "<" ">" "&" "'" ]; + + postToEntry = defun [ web.blog.post entry ] (post: { + class = "blog"; + title = post.title; + url = "/blog/${post.key}"; + date = post.date; + }); + + formatDate = defun [ int string ] (date: readFile (runCommandNoCC "date" {} '' + date --date='@${toString date}' '+%Y-%m-%d' > $out + '')); + + formatEntryDate = defun [ entry string ] (entry: entryClass.match entry.class { + blog = "Blog post from ${formatDate entry.date}"; + project = "Project from ${formatDate entry.date}"; + misc = "Posted on ${formatDate entry.date}"; + }); + + entryToDiv = defun [ entry string ] (entry: '' + <a href="${entry.url}" class="entry ${entry.class}"> + <div> + <p class="entry-title">${escape entry.title}</p> + ${ + lib.optionalString ((entry ? description) && (entry.description != null)) + "<p class=\"entry-description\">${escape entry.description}</p>" + } + <p class="entry-date">${formatEntryDate entry}</p> + </div> + </a> + ''); + + index = entries: third_party.writeText "index.html" (lib.concatStrings ( + [ (builtins.readFile ./header.html) ] + ++ (map entryToDiv (sort (a: b: a.date > b.date) entries)) + ++ [ (builtins.readFile ./footer.html) ] + )); + + homepage = index ((map postToEntry web.blog.posts) ++ (import ./entries.nix)); +in runCommandNoCC "website" {} '' + mkdir $out + cp ${homepage} $out/index.html + cp -r ${./static} $out/static +'' diff --git a/web/homepage/entries.nix b/web/homepage/entries.nix new file mode 100644 index 000000000000..9c7d04187b11 --- /dev/null +++ b/web/homepage/entries.nix @@ -0,0 +1,64 @@ +[ + { + class = "misc"; + title = "The Virus Lounge"; + url = "https://tvl.fyi"; + date = 1587435629; + description = "A daily social video call in these trying pandemic times. Join us!"; + } + { + class = "project"; + title = "depot"; + url = "https://git.tazj.in/about"; + date = 1576800000; + description = "Merging all of my projects into a single, Nix-based monorepo"; + } + { + class = "project"; + title = "Nixery"; + url = "https://github.com/google/nixery"; + date = 1565132400; + description = "A Nix-backed container registry that builds container images on demand"; + } + { + class = "project"; + title = "kontemplate"; + url = "https://git.tazj.in/about/ops/kontemplate"; + date = 1486550940; + description = "Simple file templating tool built for Kubernetes resources"; + } + { + class = "misc"; + title = "dottime"; + url = "https://dotti.me/"; + date = 1560898800; + description = "A universal convention for conveying time (by edef <3)"; + } + { + class = "project"; + title = "journaldriver"; + url = "https://git.tazj.in/about/ops/journaldriver"; + date = 1527375600; + description = "Small daemon to forward logs from journald to Stackdriver Logging"; + } + { + class = "misc"; + title = "Principia Discordia"; + url = "https://principiadiscordia.com/book/1.php"; + date = 1495494000; + description = '' + The Principia is a short book I read as a child, and didn't + understand until much later. It shaped much of my world view. + ''; + } + { + class = "misc"; + title = "This Week in Virology"; + url = "http://www.microbe.tv/twiv/"; + date = 1585517557; + description = '' + Podcast with high-quality information about virology, + epidemiology and so on. Highly relevant to COVID19. + ''; + } +] diff --git a/web/homepage/footer.html b/web/homepage/footer.html new file mode 100644 index 000000000000..2f17135066e8 --- /dev/null +++ b/web/homepage/footer.html @@ -0,0 +1,2 @@ + </div> +</body> diff --git a/web/homepage/header.html b/web/homepage/header.html new file mode 100644 index 000000000000..ec81fa04dc05 --- /dev/null +++ b/web/homepage/header.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<head><meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="description" content="tazjin's blog"> + <link rel="stylesheet" type="text/css" href="static/tazjin.css" media="all"> + <link rel="icon" type="image/webp" href="/static/favicon.webp"> + <title>tazjin's interblag</title> +</head> +<body class="dark"> + <header> + <h1> + <a class="interblag-title" href="/">tazjin's interblag</a> + </h1> + <hr> + </header> + <div class="introduction"> + <p>Hello, illuminated visitor.</p> + <p> + I'm tazjin. Usually you can find + me <a class="dark-link" href="https://git.tazj.in/about">programming computers</a> + using tools such as <a class="dark-link" href="https://nixos.org/nix">Nix</a> + and <a class="dark-link" href="https://www.gnu.org/software/emacs/">Emacs</a>, + cuddling <a class="dark-link" href="https://twitter.com/edefic">people I love</a> + or posting nonsense <a class="dark-link" href="https://twitter.com/tazjin">on the + internet</a>. + </p> + <p> + Below is a collection of + my <span class="project">projects</span>, <span class="blog">blog + posts</span> and some <span class="misc">random things</span> by + me or others. If you'd like to get in touch about anything, send + me a mail at mail@[this domain] or ping me on IRC or Twitter. + </p> + </div> + <div class="entry-container"> diff --git a/web/homepage/static/favicon.webp b/web/homepage/static/favicon.webp new file mode 100644 index 000000000000..f99c9085340b --- /dev/null +++ b/web/homepage/static/favicon.webp Binary files differdiff --git a/web/homepage/static/img/nixery/dominator.webp b/web/homepage/static/img/nixery/dominator.webp new file mode 100644 index 000000000000..2d8569a6ca21 --- /dev/null +++ b/web/homepage/static/img/nixery/dominator.webp Binary files differdiff --git a/web/homepage/static/img/nixery/example_extra.webp b/web/homepage/static/img/nixery/example_extra.webp new file mode 100644 index 000000000000..101f0f633aef --- /dev/null +++ b/web/homepage/static/img/nixery/example_extra.webp Binary files differdiff --git a/web/homepage/static/img/nixery/example_plain.webp b/web/homepage/static/img/nixery/example_plain.webp new file mode 100644 index 000000000000..a2b90b3e21d5 --- /dev/null +++ b/web/homepage/static/img/nixery/example_plain.webp Binary files differdiff --git a/web/homepage/static/img/nixery/ideal_layout.webp b/web/homepage/static/img/nixery/ideal_layout.webp new file mode 100644 index 000000000000..0e9f74556682 --- /dev/null +++ b/web/homepage/static/img/nixery/ideal_layout.webp Binary files differdiff --git a/web/homepage/static/img/watchblob_1.webp b/web/homepage/static/img/watchblob_1.webp new file mode 100644 index 000000000000..27e588e1a145 --- /dev/null +++ b/web/homepage/static/img/watchblob_1.webp Binary files differdiff --git a/web/homepage/static/img/watchblob_2.webp b/web/homepage/static/img/watchblob_2.webp new file mode 100644 index 000000000000..b2dea98b4fb4 --- /dev/null +++ b/web/homepage/static/img/watchblob_2.webp Binary files differdiff --git a/web/homepage/static/img/watchblob_3.webp b/web/homepage/static/img/watchblob_3.webp new file mode 100644 index 000000000000..99b49373b5b4 --- /dev/null +++ b/web/homepage/static/img/watchblob_3.webp Binary files differdiff --git a/web/homepage/static/img/watchblob_4.webp b/web/homepage/static/img/watchblob_4.webp new file mode 100644 index 000000000000..41dbdb6be1cf --- /dev/null +++ b/web/homepage/static/img/watchblob_4.webp Binary files differdiff --git a/web/homepage/static/img/watchblob_5.webp b/web/homepage/static/img/watchblob_5.webp new file mode 100644 index 000000000000..c42a4ce1bc0f --- /dev/null +++ b/web/homepage/static/img/watchblob_5.webp Binary files differdiff --git a/web/homepage/static/img/watchblob_6.webp b/web/homepage/static/img/watchblob_6.webp new file mode 100644 index 000000000000..1440761859dd --- /dev/null +++ b/web/homepage/static/img/watchblob_6.webp Binary files differdiff --git a/web/homepage/static/jetbrains-mono-bold-italic.woff2 b/web/homepage/static/jetbrains-mono-bold-italic.woff2 new file mode 100644 index 000000000000..34b5c69ae1cf --- /dev/null +++ b/web/homepage/static/jetbrains-mono-bold-italic.woff2 Binary files differdiff --git a/web/homepage/static/jetbrains-mono-bold.woff2 b/web/homepage/static/jetbrains-mono-bold.woff2 new file mode 100644 index 000000000000..84a008af7edb --- /dev/null +++ b/web/homepage/static/jetbrains-mono-bold.woff2 Binary files differdiff --git a/web/homepage/static/jetbrains-mono-italic.woff2 b/web/homepage/static/jetbrains-mono-italic.woff2 new file mode 100644 index 000000000000..85fd4687891e --- /dev/null +++ b/web/homepage/static/jetbrains-mono-italic.woff2 Binary files differdiff --git a/web/homepage/static/jetbrains-mono.woff2 b/web/homepage/static/jetbrains-mono.woff2 new file mode 100644 index 000000000000..d5b94cb9e7db --- /dev/null +++ b/web/homepage/static/jetbrains-mono.woff2 Binary files differdiff --git a/web/homepage/static/tazjin.css b/web/homepage/static/tazjin.css new file mode 100644 index 000000000000..aea4d426eac3 --- /dev/null +++ b/web/homepage/static/tazjin.css @@ -0,0 +1,183 @@ +/* Jetbrains Mono font from https://www.jetbrains.com/lp/mono/ + licensed under Apache 2.0. Thanks, Jetbrains! */ +@font-face { + font-family: jetbrains-mono; + src: url(jetbrains-mono.woff2); +} + +@font-face { + font-family: jetbrains-mono; + font-weight: bold; + src: url(jetbrains-mono-bold.woff2); +} + +@font-face { + font-family: jetbrains-mono; + font-style: italic; + src: url(jetbrains-mono-italic.woff2); +} + +@font-face { + font-family: jetbrains-mono; + font-weight: bold; + font-style: italic; + src: url(jetbrains-mono-bold-italic.woff2); +} + +/* Generic-purpose styling */ + +body { + max-width: 800px; + margin: 40px auto; + line-height: 1.6; + font-size: 18px; + padding: 0 10px; + font-family: jetbrains-mono, monospace; +} + +p, a :not(.uncoloured-link) { + color: inherit; +} + +h1, h2, h3 { + line-height: 1.2 +} + +/* Homepage styling */ + +.dark { + background-color: #181818; + color: #e4e4ef; +} + +.dark-link, .interblag-title { + color: #96a6c8; +} + +.entry-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; +} + +.interblag-title { + text-decoration: none; +} + +.entry { + width: 42%; + margin: 5px; + padding-left: 7px; + padding-right: 5px; + border: 2px solid; + border-radius: 5px; + flex-grow: 1; + text-decoration: none; +} + +.misc { + color: #73c936; + border-color: #73c936; +} + +.blog { + color: #268bd2; + border-color: #268bd2; +} + +.project { + color: #ff4f58; + border-color: #ff4f58; +} + +.entry-title { + color: inherit !important; + font-weight: bold; + text-decoration: none; +} + +.entry-date { + font-style: italic; +} + +/* Blog styling */ + +.light { + color: #383838; +} + +.blog-title { + color: inherit; + text-decoration: none; +} + +.footer { + text-align: right; +} + +.date { + text-align: right; + font-style: italic; + float: right; +} + +.inline { + display: inline; +} + +.lod { + text-align: center; +} + +.uncoloured-link { + color: inherit; +} + +pre { + width: 100%; + overflow: auto; +} + +img { + max-width: 100%; +} + +.cheddar-callout { + display: block; + padding: 10px; +} + +.cheddar-question { + color: #3367d6; + background-color: #e8f0fe; +} + +.cheddar-todo { + color: #616161; + background-color: #eeeeee; +} + +.cheddar-tip { + color: #00796b; + background-color: #e0f2f1; +} + +.cheddar-warning { + color: #a52714; + background-color: #fbe9e7; +} + +kbd { + background-color: #eee; + border-radius: 3px; + border: 1px solid #b4b4b4; + box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset; + color: #333; + display: inline-block; + font-size: .85em; + font-weight: 700; + line-height: 1; + padding: 2px 4px; + white-space: nowrap; +} |
