Migrate to servable

2025-11-27 20:25:30 -08:00
parent b6de727883
commit bfa6d2c8d9
59 changed files with 559 additions and 3162 deletions
--- a/crates/service/service-webpage/Cargo.toml
+++ b/crates/service/service-webpage/Cargo.toml
@@ -9,13 +9,11 @@ workspace = true

 [dependencies]
 libservice = { workspace = true }
-macro-sass = { workspace = true }
-toolbox = { workspace = true }
-page = { workspace = true }

 md-footnote = { workspace = true }

 markdown-it = { workspace = true }
+grass = { workspace = true }
 axum = { workspace = true }
 tracing = { workspace = true }
 maud = { workspace = true }
@@ -29,3 +27,4 @@ serde = { workspace = true }
 reqwest = { workspace = true }
 tokio = { workspace = true }
 tower-http = { workspace = true }
+servable = { workspace = true }
--- a/crates/service/service-webpage/assets/lockhart.pdf
+++ b/crates/service/service-webpage/assets/lockhart.pdf
--- a/crates/service/service-webpage/css/blocks.scss
+++ b/crates/service/service-webpage/css/blocks.scss
@@ -1,145 +0,0 @@
-ul {
-	list-style: none;
-	margin-top: 0.5rem;
-	margin-bottom: 0.5rem;
-}
-
-li {
-	margin-bottom: 0.25rem;
-}
-
-li p {
-	margin-bottom: 0.2rem;
-}
-
-/* Bonus space after last li */
-//li:last-child {
-//	margin-bottom: 3rem;
-//}
-
-ul li::marker {
-	content: "> ";
-	color: var(--metaColor);
-}
-
-ul li:hover::marker {
-	content: ">> ";
-	font-weight: 1000;
-	color: var(--linkColor);
-	transition: 100ms;
-}
-
-
-.titleList li {
-	margin-bottom: .75rem;
-}
-
-
-blockquote {
-	border-left: .5rem solid var(--metaColor);
-	margin: 1rem;
-	padding: 0 0 0 1rem
-}
-
-
-textarea {
-	border: 2px dotted;
-	outline: 0;
-	resize: none;
-	overflow: auto;
-	background-color: var(--bgColor)
-}
-
-
-
-pre .wrap {
-	overflow: hidden;
-	overflow-wrap: break-word;
-	word-break: break-all;
-	white-space: pre-wrap;
-}
-
-pre :not(.wrap) {
-	padding: 1rem;
-	font-style: monospace;
-	white-space: pre;
-	overflow: scroll;
-	display: block;
-	border: solid .2rem transparent;
-	transition: 150ms;
-	counter-reset: line;
-}
-
-pre:hover {
-	border: solid .2rem var(--lightBgColor);
-}
-
-pre span:first-of-type:before {
-	border-top: 1px dashed var(--lightBgColor);
-}
-
-pre span:before {
-	counter-increment: line;
-	content: counter(line, decimal-leading-zero);
-	display: inline-block;
-	border-right: 1px solid var(--lightBgColor);
-	border-bottom: 1px dashed var(--lightBgColor);
-	padding: 0 .5em;
-	margin-right: .5em;
-	color: #888
-}
-
-p code,
-li code,
-div code {
-	padding: .2rem .4rem .2rem .4rem;
-	font-size: 85%;
-	border-radius: .3rem;
-	color: var(--codeFgColor);
-	background-color: var(--codeBgColor);
-}
-
-pre code {
-	padding: 0;
-	border-radius: 0;
-	color: inherit;
-	background-color: inherit;
-}
-
-
-table {
-	table-layout: fixed;
-	width: 100%;
-	border-collapse: collapse;
-	border: none;
-	margin-left: auto;
-	margin-right: auto;
-	margin-bottom: 1rem;
-	line-height: 1.1
-}
-
-thead th:first-child {
-	width: 20%
-}
-
-td,
-th {
-	text-align: left
-}
-
-th {
-	font-weight: 400
-}
-
-
-td,
-th {
-	padding: .5rem;
-	border: dashed .1rem var(--metaColor)
-}
-
-.metaData,
-hr,
-textarea {
-	color: var(--metaColor)
-}
--- a/crates/service/service-webpage/css/fontawesome/_animated.scss
+++ b/crates/service/service-webpage/css/fontawesome/_animated.scss
@@ -1,152 +0,0 @@
-// animating icons
-// --------------------------
-
-.#{$fa-css-prefix}-beat {
-  animation-name: #{$fa-css-prefix}-beat;
-  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
-  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
-  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
-  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
-}
-
-.#{$fa-css-prefix}-bounce {
-  animation-name: #{$fa-css-prefix}-bounce;
-  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
-  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
-  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
-  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1));
-}
-
-.#{$fa-css-prefix}-fade {
-  animation-name: #{$fa-css-prefix}-fade;
-  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
-  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
-  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
-  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
-}
-
-.#{$fa-css-prefix}-beat-fade {
-  animation-name: #{$fa-css-prefix}-beat-fade;
-  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
-  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
-  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
-  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
-}
-
-.#{$fa-css-prefix}-flip {
-  animation-name: #{$fa-css-prefix}-flip;
-  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
-  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
-  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
-  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
-}
-
-.#{$fa-css-prefix}-shake {
-  animation-name: #{$fa-css-prefix}-shake;
-  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
-  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
-  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
-  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
-}
-
-.#{$fa-css-prefix}-spin {
-  animation-name: #{$fa-css-prefix}-spin;
-  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
-  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
-  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 2s);
-  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
-}
-
-.#{$fa-css-prefix}-spin-reverse {
-  --#{$fa-css-prefix}-animation-direction: reverse;
-}
-
-.#{$fa-css-prefix}-pulse,
-.#{$fa-css-prefix}-spin-pulse {
-  animation-name: #{$fa-css-prefix}-spin;
-  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
-  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
-  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
-  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, steps(8));
-}
-
-// if agent or operating system prefers reduced motion, disable animations
-// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
-// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
-@media (prefers-reduced-motion: reduce) {
-  .#{$fa-css-prefix}-beat,
-  .#{$fa-css-prefix}-bounce,
-  .#{$fa-css-prefix}-fade,
-  .#{$fa-css-prefix}-beat-fade,
-  .#{$fa-css-prefix}-flip,
-  .#{$fa-css-prefix}-pulse,
-  .#{$fa-css-prefix}-shake,
-  .#{$fa-css-prefix}-spin,
-  .#{$fa-css-prefix}-spin-pulse {
-    animation-delay: -1ms;
-    animation-duration: 1ms;
-    animation-iteration-count: 1;
-    transition-delay: 0s;
-    transition-duration: 0s;
-  }
-}
-
-@keyframes #{$fa-css-prefix}-beat {
-  0%, 90% { transform: scale(1); }
-  45% { transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25)); }
-}
-
-@keyframes #{$fa-css-prefix}-bounce {
-  0%   { transform: scale(1,1) translateY(0); }
-  10%  { transform: scale(var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); }
-  30%  { transform: scale(var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em)); }
-  50%  { transform: scale(var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); }
-  57%  { transform: scale(1,1) translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em)); }
-  64%  { transform: scale(1,1) translateY(0); }
-  100% { transform: scale(1,1) translateY(0); }
-}
-
-@keyframes #{$fa-css-prefix}-fade {
-  50% { opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4); }
-}
-
-@keyframes #{$fa-css-prefix}-beat-fade {
-  0%, 100% {
-    opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4);
-    transform: scale(1);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(var(--#{$fa-css-prefix}-beat-fade-scale, 1.125));
-  }
-}
-
-@keyframes #{$fa-css-prefix}-flip {
-  50% {
-    transform: rotate3d(var(--#{$fa-css-prefix}-flip-x, 0), var(--#{$fa-css-prefix}-flip-y, 1), var(--#{$fa-css-prefix}-flip-z, 0), var(--#{$fa-css-prefix}-flip-angle, -180deg));
-  }
-}
-
-@keyframes #{$fa-css-prefix}-shake {
-  0% { transform: rotate(-15deg); }
-  4% { transform: rotate(15deg); }
-  8%, 24% { transform: rotate(-18deg); }
-  12%, 28% { transform: rotate(18deg); }
-  16% { transform: rotate(-22deg); }
-  20% { transform: rotate(22deg); }
-  32% { transform: rotate(-12deg); }
-  36% { transform: rotate(12deg); }
-  40%, 100% { transform: rotate(0deg); }
-}
-
-@keyframes #{$fa-css-prefix}-spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
--- a/crates/service/service-webpage/css/fontawesome/_bordered-pulled.scss
+++ b/crates/service/service-webpage/css/fontawesome/_bordered-pulled.scss
@@ -1,20 +0,0 @@
-// bordered + pulled icons
-// -------------------------
-
-.#{$fa-css-prefix}-border {
-  border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color});
-  border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius});
-  border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style});
-  border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width});
-  padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding});
-}
-
-.#{$fa-css-prefix}-pull-left {
-  float: left;
-  margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin}); 
-}
-
-.#{$fa-css-prefix}-pull-right {
-  float: right;
-  margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin}); 
-}
--- a/crates/service/service-webpage/css/fontawesome/_core.scss
+++ b/crates/service/service-webpage/css/fontawesome/_core.scss
@@ -1,43 +0,0 @@
-// base icon class definition
-// -------------------------
-
-.#{$fa-css-prefix} {
-  font-family: var(--#{$fa-css-prefix}-style-family, '#{$fa-style-family}');
-  font-weight: var(--#{$fa-css-prefix}-style, #{$fa-style});
-}
-
-.#{$fa-css-prefix},
-.#{$fa-css-prefix}-classic,
-.#{$fa-css-prefix}-sharp,
-.fas,
-.#{$fa-css-prefix}-solid,
-.far,
-.#{$fa-css-prefix}-regular,
-.fab,
-.#{$fa-css-prefix}-brands {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  display: var(--#{$fa-css-prefix}-display, #{$fa-display});
-  font-style: normal;
-  font-variant: normal;
-  line-height: 1;
-  text-rendering: auto;
-}
-
-.fas,
-.#{$fa-css-prefix}-classic,
-.#{$fa-css-prefix}-solid,
-.far,
-.#{$fa-css-prefix}-regular {
-  font-family: 'Font Awesome 6 Free';
-}
-
-.fab,
-.#{$fa-css-prefix}-brands {
-  font-family: 'Font Awesome 6 Brands';
-}
-
-
-%fa-icon {
-  @include fa-icon;
-}
--- a/crates/service/service-webpage/css/fontawesome/_fixed-width.scss
+++ b/crates/service/service-webpage/css/fontawesome/_fixed-width.scss
@@ -1,7 +0,0 @@
-// fixed-width icons
-// -------------------------
-
-.#{$fa-css-prefix}-fw {
-  text-align: center;
-  width: $fa-fw-width;
-}
--- a/crates/service/service-webpage/css/fontawesome/_functions.scss
+++ b/crates/service/service-webpage/css/fontawesome/_functions.scss
@@ -1,57 +0,0 @@
-// functions
-// --------------------------
-
-// fa-content: convenience function used to set content property
-@function fa-content($fa-var) {
-  @return unquote("\"#{ $fa-var }\"");
-}
-
-// fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
-//
-// Licensed under: The MIT License (MIT)
-//
-// Copyright (c) 2011-2021 Twitter, Inc.
-// Copyright (c) 2011-2021 The Bootstrap Authors
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-@function fa-divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0, 1, -1);
-  $dividend: abs($dividend);
-  $divisor: abs($divisor);
-  $quotient: 0;
-  $remainder: $dividend;
-  @if $dividend == 0 {
-    @return 0;
-  }
-  @if $divisor == 0 {
-    @error "Cannot divide by 0";
-  }
-  @if $divisor == 1 {
-    @return $dividend;
-  }
-  @while $remainder >= $divisor {
-    $quotient: $quotient + 1;
-    $remainder: $remainder - $divisor;
-  }
-  @if $remainder > 0 and $precision > 0 {
-    $remainder: fa-divide($remainder * 10, $divisor, $precision - 1) * .1;
-  }
-  @return ($quotient + $remainder) * $sign;
-}
--- a/crates/service/service-webpage/css/fontawesome/_icons.scss
+++ b/crates/service/service-webpage/css/fontawesome/_icons.scss
@@ -1,10 +0,0 @@
-// specific icon class definition
-// -------------------------
-
-/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
-readers do not read off random characters that represent icons */
-
-@each $name, $icon in $fa-icons {
-  .#{$fa-css-prefix}-#{$name}::before { content: unquote("\"#{ $icon }\""); }
-}
-
--- a/crates/service/service-webpage/css/fontawesome/_list.scss
+++ b/crates/service/service-webpage/css/fontawesome/_list.scss
@@ -1,18 +0,0 @@
-// icons in a list
-// -------------------------
-
-.#{$fa-css-prefix}-ul {
-  list-style-type: none;
-  margin-left: var(--#{$fa-css-prefix}-li-margin, #{$fa-li-margin});
-  padding-left: 0;
-
-  > li { position: relative; }
-}
-
-.#{$fa-css-prefix}-li {
-  left: calc(var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}) * -1);
-  position: absolute;
-  text-align: center;
-  width: var(--#{$fa-css-prefix}-li-width, #{$fa-li-width});
-  line-height: inherit;
-}
--- a/crates/service/service-webpage/css/fontawesome/_mixins.scss
+++ b/crates/service/service-webpage/css/fontawesome/_mixins.scss
@@ -1,72 +0,0 @@
-// mixins
-// --------------------------
-
-// base rendering for an icon
-@mixin fa-icon {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  display: inline-block;
-  font-style: normal;
-  font-variant: normal;
-  font-weight: normal;
-  line-height: 1;
-}
-
-// sets relative font-sizing and alignment (in _sizing)
-@mixin fa-size ($font-size) {
-  font-size: fa-divide($font-size, $fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base
-  line-height: fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
-  vertical-align: (fa-divide(6, $font-size) - fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
-}
-
-// only display content to screen readers
-// see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
-// see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
-@mixin fa-sr-only() {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-// use in conjunction with .sr-only to only display content when it's focused
-@mixin fa-sr-only-focusable() {
-  &:not(:focus) {
-    @include fa-sr-only();
-  }
-}
-
-// sets a specific icon family to use alongside style + icon mixins
-
-// convenience mixins for declaring pseudo-elements by CSS variable,
-// including all style-specific font properties, and both the ::before
-// and ::after elements in the duotone case.
-@mixin fa-icon-solid($fa-var) {
-  @extend %fa-icon;
-  @extend .fa-solid;
-
-  &::before {
-    content: unquote("\"#{ $fa-var }\"");
-  }
-}
-@mixin fa-icon-regular($fa-var) {
-  @extend %fa-icon;
-  @extend .fa-regular;
-
-  &::before {
-    content: unquote("\"#{ $fa-var }\"");
-  }
-}
-@mixin fa-icon-brands($fa-var) {
-  @extend %fa-icon;
-  @extend .fa-brands;
-
-  &::before {
-    content: unquote("\"#{ $fa-var }\"");
-  }
-}
--- a/crates/service/service-webpage/css/fontawesome/_rotated-flipped.scss
+++ b/crates/service/service-webpage/css/fontawesome/_rotated-flipped.scss
@@ -1,31 +0,0 @@
-// rotating + flipping icons
-// -------------------------
-
-.#{$fa-css-prefix}-rotate-90 {
-  transform: rotate(90deg);
-}
-
-.#{$fa-css-prefix}-rotate-180 {
-  transform: rotate(180deg);
-}
-
-.#{$fa-css-prefix}-rotate-270 {
-  transform: rotate(270deg);
-}
-
-.#{$fa-css-prefix}-flip-horizontal {
-  transform: scale(-1, 1);
-}
-
-.#{$fa-css-prefix}-flip-vertical {
-  transform: scale(1, -1);
-}
-
-.#{$fa-css-prefix}-flip-both,
-.#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical {
-  transform: scale(-1, -1);
-}
-
-.#{$fa-css-prefix}-rotate-by {
-  transform: rotate(var(--#{$fa-css-prefix}-rotate-angle, 0));
-}
--- a/crates/service/service-webpage/css/fontawesome/_screen-reader.scss
+++ b/crates/service/service-webpage/css/fontawesome/_screen-reader.scss
@@ -1,14 +0,0 @@
-// screen-reader utilities
-// -------------------------
-
-// only display content to screen readers
-.sr-only,
-.#{$fa-css-prefix}-sr-only {
-  @include fa-sr-only;
-}
-
-// use in conjunction with .sr-only to only display content when it's focused
-.sr-only-focusable,
-.#{$fa-css-prefix}-sr-only-focusable {
-  @include fa-sr-only-focusable;
-}
--- a/crates/service/service-webpage/css/fontawesome/_shims.scss
+++ b/crates/service/service-webpage/css/fontawesome/_shims.scss
--- a/crates/service/service-webpage/css/fontawesome/_sizing.scss
+++ b/crates/service/service-webpage/css/fontawesome/_sizing.scss
@@ -1,16 +0,0 @@
-// sizing icons
-// -------------------------
-
-// literal magnification scale
-@for $i from 1 through 10 {
-  .#{$fa-css-prefix}-#{$i}x {
-    font-size: $i * 1em;
-  }
-}
-
-// step-based scale (with alignment)
-@each $size, $value in $fa-sizes {
-  .#{$fa-css-prefix}-#{$size} {
-     @include fa-size($value);
-  }
-}
--- a/crates/service/service-webpage/css/fontawesome/_stacked.scss
+++ b/crates/service/service-webpage/css/fontawesome/_stacked.scss
@@ -1,32 +0,0 @@
-// stacking icons
-// -------------------------
-
-.#{$fa-css-prefix}-stack {
-  display: inline-block;
-  height: 2em;
-  line-height: 2em;
-  position: relative;
-  vertical-align: $fa-stack-vertical-align;
-  width: $fa-stack-width;
-}
-
-.#{$fa-css-prefix}-stack-1x,
-.#{$fa-css-prefix}-stack-2x {
-  left: 0;
-  position: absolute;
-  text-align: center;
-  width: 100%;
-  z-index: var(--#{$fa-css-prefix}-stack-z-index, #{$fa-stack-z-index});
-}
-
-.#{$fa-css-prefix}-stack-1x {
-  line-height: inherit;
-}
-
-.#{$fa-css-prefix}-stack-2x {
-  font-size: 2em;
-}
-
-.#{$fa-css-prefix}-inverse {
-  color: var(--#{$fa-css-prefix}-inverse, #{$fa-inverse});
-}
--- a/crates/service/service-webpage/css/fontawesome/_variables.scss
+++ b/crates/service/service-webpage/css/fontawesome/_variables.scss
--- a/crates/service/service-webpage/css/fontawesome/brands.scss
+++ b/crates/service/service-webpage/css/fontawesome/brands.scss
@@ -1,30 +0,0 @@
-/*!
- * Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2024 Fonticons, Inc.
- */
-@import 'functions';
-@import 'variables';
-
-:root, :host {
-  --#{$fa-css-prefix}-style-family-brands: 'Font Awesome 6 Brands';
-  --#{$fa-css-prefix}-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
-}
-
-@font-face {
-  font-family: 'Font Awesome 6 Brands';
-  font-style: normal;
-  font-weight: 400;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
-    url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype');
-}
-
-.fab,
-.#{$fa-css-prefix}-brands {
-  font-weight: 400;
-}
-
-@each $name, $icon in $fa-brand-icons {
-  .#{$fa-css-prefix}-#{$name}:before { content: unquote("\"#{ $icon }\""); }
-}
--- a/crates/service/service-webpage/css/fontawesome/fontawesome.scss
+++ b/crates/service/service-webpage/css/fontawesome/fontawesome.scss
@@ -1,21 +0,0 @@
-/*!
- * Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2024 Fonticons, Inc.
- */
-// Font Awesome core compile (Web Fonts-based)
-// -------------------------
-
-@import 'functions';
-@import 'variables';
-@import 'mixins';
-@import 'core';
-@import 'sizing';
-@import 'fixed-width';
-@import 'list';
-@import 'bordered-pulled';
-@import 'animated';
-@import 'rotated-flipped';
-@import 'stacked';
-@import 'icons';
-@import 'screen-reader';
--- a/crates/service/service-webpage/css/fontawesome/regular.scss
+++ b/crates/service/service-webpage/css/fontawesome/regular.scss
@@ -1,26 +0,0 @@
-/*!
- * Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2024 Fonticons, Inc.
- */
-@import 'functions';
-@import 'variables';
-
-:root, :host {
-  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
-  --#{$fa-css-prefix}-font-regular: normal 400 1em/1 '#{ $fa-style-family }';
-}
-
-@font-face {
-  font-family: 'Font Awesome 6 Free';
-  font-style: normal;
-  font-weight: 400;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
-    url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype');
-}
-
-.far,
-.#{$fa-css-prefix}-regular {
-  font-weight: 400;
-}
--- a/crates/service/service-webpage/css/fontawesome/solid.scss
+++ b/crates/service/service-webpage/css/fontawesome/solid.scss
@@ -1,26 +0,0 @@
-/*!
- * Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2024 Fonticons, Inc.
- */
-@import 'functions';
-@import 'variables';
-
-:root, :host {
-  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
-  --#{$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ $fa-style-family }';
-}
-
-@font-face {
-  font-family: 'Font Awesome 6 Free';
-  font-style: normal;
-  font-weight: 900;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
-    url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype');
-}
-
-.fas,
-.#{$fa-css-prefix}-solid {
-  font-weight: 900;
-}
--- a/crates/service/service-webpage/css/fontawesome/v4-shims.scss
+++ b/crates/service/service-webpage/css/fontawesome/v4-shims.scss
@@ -1,11 +0,0 @@
-/*!
- * Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2024 Fonticons, Inc.
- */
-// V4 shims compile (Web Fonts-based)
-// -------------------------
-
-@import 'functions';
-@import 'variables';
-@import 'shims';
--- a/crates/service/service-webpage/css/images.scss
+++ b/crates/service/service-webpage/css/images.scss
@@ -1,32 +0,0 @@
-img {
-	max-width: 90%;
-	height: auto;
-	margin: .2rem;
-	padding: .2rem;
-	border-radius: 15px;
-	border: solid .2rem transparent;
-	transition: 150ms;
-	image-rendering: pixelated;
-}
-
-img:hover {
-	border: solid .2rem var(--metaColor);
-	transform: scale(1.02);
-}
-
-
-.icons {
-	width: 2.0rem;
-	height: 2.0rem;
-	aspect-ratio: 1/1;
-	display: inline-block;
-	vertical-align: middle;
-	color: var(--fgColor);
-	fill: var(--fgColor);
-	background-color: transparent;
-}
-
-.icons__background:hover {
-	background-color: transparent;
-	color: var(--metaColor);
-}
--- a/crates/service/service-webpage/css/main.scss
+++ b/crates/service/service-webpage/css/main.scss
@@ -1,117 +0,0 @@
-@import "text";
-@import "blocks";
-@import "images";
-@import "special";
-
-@import "fontawesome/fontawesome";
-@import "fontawesome/brands";
-@import "fontawesome/regular";
-@import "fontawesome/solid";
-
-
-@font-face {
-	font-family: "Fira";
-	src: url("/assets/fonts/FiraCode-Bold.woff2") format("woff2");
-	font-weight: bold;
-}
-
-@font-face {
-	font-family: "Fira";
-	src: url("/assets/fonts/FiraCode-Light.woff2") format("woff2");
-	font-weight: light;
-}
-
-@font-face {
-	font-family: "Fira";
-	src: url("/assets/fonts/FiraCode-Medium.woff2") format("woff2");
-	font-weight: medium;
-}
-
-@font-face {
-	font-family: "Fira";
-	src: url("/assets/fonts/FiraCode-Regular.woff2") format("woff2");
-	font-weight: normal;
-}
-
-:root {
-	// Misc colors
-	--bgColor: #121212;
-	--lightBgColor: #3a3f46;
-	--fgColor: #ebebeb;
-	--metaColor: #6199bb;
-	--lightMetaColor: #638c86;
-	--linkColor: #e4dab3;
-	--codeBgColor: #292929;
-	--codeFgColor: var(--fgColor);
-
-	// Main colors
-	--grey: #696969;
-
-	// Accent colors, used only manally
-	--green: #a2c579;
-	--magenta: #ad79c5;
-	--orange: #e86a33;
-	--yellow: #e8bc00;
-	--pink: #fa9f83;
-}
-
-::selection,
-::-moz-selection {
-	color: var(--bgColor);
-	background: var(--metaColor);
-}
-
-html {
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	font-size: 62.5%;
-	scrollbar-color: var(--metaColor) var(--bgColor);
-	scrollbar-width: auto;
-	background: var(--bgColor);
-}
-
-body {
-	font-family: "Fira";
-	font-size: 1.6rem;
-	line-height: 1.35;
-	max-width: 64rem;
-	margin: auto;
-	overflow-wrap: break-word;
-	background: var(--bgColor);
-	color: var(--fgColor);
-}
-
-div.wrapper {
-	min-height: 100vh;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-}
-
-hr.footline {
-	border: 1pt solid;
-}
-
-hr {
-	border: 1pt dashed;
-
-	width: 100%;
-}
-
-iframe {
-	max-width: 90%;
-}
-
-
-.footContainer {
-	padding-top: 0;
-	padding-bottom: 1em;
-	padding-left: 1em;
-	padding-right: 1em;
-}
-
-@media (max-width: 650px) {
-	.wrapper {
-		margin: 1rem;
-	}
-}
--- a/crates/service/service-webpage/css/special.scss
+++ b/crates/service/service-webpage/css/special.scss
@@ -1,88 +0,0 @@
-.handout-li-links {
-	color: var(--grey);
-}
-
-.handout-li-links a {
-	@extend a;
-	text-decoration: underline;
-	text-underline-offset: 1.5pt;
-	padding-left: 1ex;
-	padding-right: 1ex;
-}
-
-// Only do hover magic on mouse devices
-@media(hover: hover) and (pointer: fine) {
-	.handout-ul li:hover {
-		margin-left: 1ex;
-		transition: 50ms;
-	}
-
-	.handout-ul li {
-		transition: 50ms;
-		transition-delay: 50ms;
-	}
-
-	.handout-ul li:hover .handout-li-links {
-		display: inline-block;
-		opacity: 1;
-		transition: 100ms;
-	}
-
-	.handout-ul li .handout-li-links {
-		transition-delay: 50ms;
-		transition: 100ms;
-		opacity: 0;
-		display: none;
-	}
-}
-
-
-
-// Email obfuscation
-// Works with "{{ email_*() }}" shortcodes.
-.eobf {
-	@extend a;
-}
-
-.eobf:hover {
-	@extend a, :hover;
-}
-
-// Change icon on hover
-.eobf #eobf-kb,
-.eobf:hover #eobf-en {
-	display: none;
-}
-
-.eobf #eobf-en,
-.eobf:hover #eobf-kb {
-	display: inline;
-}
-
-// Hover text
-.eobf:hover span:before {
-	unicode-bidi: bidi-override;
-	direction: ltr;
-	content: attr(data-h);
-}
-
-
-
-// Text for email_beta
-.eobf-beta span:before {
-	content: "mo" attr(data-a) "teb" "\0040" attr(data-b) "m";
-	unicode-bidi: bidi-override;
-	direction: rtl;
-}
-
-// Text for email_goog
-.eobf-goog span:before {
-	content: "mo" attr(data-a) "mg" "\0040" attr(data-b) "p." attr(data-c) "m";
-	unicode-bidi: bidi-override;
-	direction: rtl;
-}
-
-// Text for email_this
-.eobf-this span:before {
-	content: attr(data-a);
-}
--- a/crates/service/service-webpage/css/text.scss
+++ b/crates/service/service-webpage/css/text.scss
@@ -1,87 +0,0 @@
-h1 {
-	font-size: 3.5rem;
-	margin-top: 1ex;
-	margin-bottom: 1ex;
-}
-
-h2 {
-	font-size: 2.5rem;
-	margin-top: 1ex;
-	margin-bottom: 0.5ex;
-}
-
-h3 {
-	font-size: 2rem;
-}
-
-h3::before {
-	color: var(--lightMetaColor);
-	content: '## '
-}
-
-h1::before,
-h2::before,
-h4::before,
-h5::before,
-h6::before {
-	color: var(--metaColor);
-	content: '# '
-}
-
-
-a {
-	text-decoration: none;
-	border-radius: .3rem;
-	padding: 0 .2ex 0 .2ex;
-	color: var(--linkColor);
-	transition: 150ms;
-}
-
-a:hover {
-	background-color: var(--linkColor);
-	color: var(--bgColor);
-	transition: 150ms;
-}
-
-footer {
-	font-size: 1.4rem;
-	clear: both;
-	opacity: 0.5;
-}
-
-footer {
-	text-align: left
-}
-
-.footnote-item p {
-	display: inline;
-	padding: 0 0 0 1rem;
-}
-
-hr.footnotes-sep {
-	margin: 5rem 0 0 0;
-}
-
-.footnote-ref > a {
-	padding: 0 2pt 0.8rem 2pt !important;
-}
-
-a.footnote-backref, .footnote-ref > a
-{
-	color: var(--metaColor);
-	padding: 0 2pt 0 2pt;
-}
-
-a.footnote-backref:hover,
-.footnote-ref > a:hover
-{
-	color: var(--bgColor);
-	background-color: var(--metaColor);
-}
-
-.footContainer {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	align-items: center;
-}
--- a/crates/service/service-webpage/src/components/md/mod.rs
+++ b/crates/service/service-webpage/src/components/md/mod.rs
@@ -2,7 +2,7 @@ use lazy_static::lazy_static;
 use markdown_it::generics::inline::full_link;
 use markdown_it::{MarkdownIt, Node};
 use maud::{Markup, PreEscaped, Render};
-use page::servable::PageMetadata;
+use servable::PageMetadata;

 use crate::components::md::emote::InlineEmote;
 use crate::components::md::frontmatter::{TomlFrontMatter, YamlFrontMatter};
--- a/crates/service/service-webpage/src/pages/handouts.rs
+++ b/crates/service/service-webpage/src/pages/handouts.rs
@@ -1,14 +1,14 @@
 use std::{
 	pin::Pin,
-	sync::Arc,
+	sync::{Arc, LazyLock},
 	time::{Duration, Instant},
 };

 use chrono::{DateTime, TimeDelta, Utc};
 use maud::{Markup, PreEscaped, html};
-use page::{DeviceType, RenderContext, servable::Page};
 use parking_lot::Mutex;
 use serde::Deserialize;
+use servable::{DeviceType, HtmlPage, RenderContext};
 use tracing::{debug, warn};

 use crate::{
@@ -16,7 +16,8 @@ use crate::{
 		md::{Markdown, meta_from_markdown},
 		misc::FarLink,
 	},
-	pages::{MAIN_TEMPLATE, backlinks, footer},
+	pages::{LAZY_IMAGE_JS, backlinks, footer},
+	routes::{IMG_ICON, MAIN_CSS},
 };

 #[derive(Debug, Deserialize)]
@@ -174,7 +175,7 @@ fn build_list_for_group(handouts: &[HandoutEntry], group: &str, req_ctx: &Render
 // MARK: page
 //

-pub fn handouts() -> Page {
+pub static HANDOUTS: LazyLock<HtmlPage> = LazyLock::new(|| {
 	let md = Markdown::parse(include_str!("handouts.md"));

 	let index = CachedRequest::new(
@@ -188,24 +189,27 @@ pub fn handouts() -> Page {
 	let mut meta = meta_from_markdown(&md).unwrap().unwrap();

 	if meta.image.is_none() {
-		meta.image = Some("/assets/img/icon.png".to_owned());
+		meta.image = Some(IMG_ICON.route().into());
 	}

 	let html = PreEscaped(md.render());

-	MAIN_TEMPLATE
-		.derive(meta, move |page, ctx| {
+	HtmlPage::default()
+		.with_style_linked(MAIN_CSS.route())
+		.with_script_inline(LAZY_IMAGE_JS)
+		.with_meta(meta)
+		.with_render(move |page, ctx| {
 			let html = html.clone();
 			let index = index.clone();
 			render(html, index, page, ctx)
 		})
-		.html_ttl(Some(TimeDelta::seconds(300)))
-}
+		.with_ttl(Some(TimeDelta::seconds(300)))
+});

 fn render<'a>(
 	html: Markup,
 	index: Arc<CachedRequest<Result<Vec<HandoutEntry>, reqwest::Error>>>,
-	_page: &'a Page,
+	_page: &'a HtmlPage,
 	ctx: &'a RenderContext,
 ) -> Pin<Box<dyn Future<Output = Markup> + Send + Sync + 'a>> {
 	Box::pin(async move {
--- a/crates/service/service-webpage/src/pages/index.rs
+++ b/crates/service/service-webpage/src/pages/index.rs
@@ -1,9 +1,6 @@
 use maud::{Markup, html};
-use page::{
-	RenderContext,
-	servable::{Page, PageMetadata},
-};
-use std::pin::Pin;
+use servable::{HtmlPage, PageMetadata, RenderContext};
+use std::{pin::Pin, sync::LazyLock};

 use crate::{
 	components::{
@@ -12,23 +9,25 @@ use crate::{
 		md::Markdown,
 		misc::FarLink,
 	},
-	pages::{MAIN_TEMPLATE, footer},
+	pages::{LAZY_IMAGE_JS, footer},
+	routes::{IMG_ICON, MAIN_CSS},
 };

-pub fn index() -> Page {
-	MAIN_TEMPLATE.derive(
-		PageMetadata {
+pub static INDEX: LazyLock<HtmlPage> = LazyLock::new(|| {
+	HtmlPage::default()
+		.with_style_linked(MAIN_CSS.route())
+		.with_script_inline(LAZY_IMAGE_JS)
+		.with_meta(PageMetadata {
 			title: "Betalupi: About".into(),
 			author: Some("Mark".into()),
 			description: None,
-			image: Some("/assets/img/icon.png".to_owned()),
-		},
-		render,
-	)
-}
+			image: Some(IMG_ICON.route().into()),
+		})
+		.with_render(render)
+});

 fn render<'a>(
-	_page: &'a Page,
+	_page: &'a HtmlPage,
 	_ctx: &'a RenderContext,
 ) -> Pin<Box<dyn Future<Output = Markup> + Send + Sync + 'a>> {
 	Box::pin(async {
--- a/crates/service/service-webpage/src/pages/mod.rs
+++ b/crates/service/service-webpage/src/pages/mod.rs
@@ -1,57 +1,29 @@
 use chrono::TimeDelta;
 use maud::{Markup, PreEscaped, html};
-use page::{
-	RenderContext,
-	servable::{Page, PageMetadata, PageTemplate},
-};
+use reqwest::StatusCode;
+use servable::{HtmlPage, PageMetadata, RenderContext};
+use std::sync::LazyLock;

-use crate::components::{
-	fa::FAIcon,
-	md::{Markdown, meta_from_markdown},
-	misc::FarLink,
+use crate::{
+	components::{
+		fa::FAIcon,
+		md::{Markdown, meta_from_markdown},
+		misc::FarLink,
+	},
+	routes::{IMG_ICON, MAIN_CSS},
 };

 mod handouts;
 mod index;
-mod notfound;

-pub use handouts::handouts;
-pub use index::index;
-pub use notfound::notfound;
-
-pub fn links() -> Page {
-	/*
-	Dead links:
-
-	https://www.commitstrip.com/en/
-	http://www.3dprintmath.com/
-	*/
-
-	page_from_markdown(
-		include_str!("links.md"),
-		Some("/assets/img/icon.png".to_owned()),
-	)
-}
-
-pub fn betalupi() -> Page {
-	page_from_markdown(
-		include_str!("betalupi.md"),
-		Some("/assets/img/icon.png".to_owned()),
-	)
-}
-
-pub fn htwah_typesetting() -> Page {
-	page_from_markdown(
-		include_str!("htwah-typesetting.md"),
-		Some("/assets/img/icon.png".to_owned()),
-	)
-}
+pub use handouts::HANDOUTS;
+pub use index::INDEX;

 //
 // MARK: md
 //

-fn page_from_markdown(md: impl Into<String>, default_image: Option<String>) -> Page {
+fn page_from_markdown(md: impl Into<String>, default_image: Option<String>) -> HtmlPage {
 	let md: String = md.into();
 	let md = Markdown::parse(&md);

@@ -68,8 +40,11 @@ fn page_from_markdown(md: impl Into<String>, default_image: Option<String>) -> P

 	let html = PreEscaped(md.render());

-	MAIN_TEMPLATE
-		.derive(meta, move |_page, ctx| {
+	HtmlPage::default()
+		.with_script_inline(LAZY_IMAGE_JS)
+		.with_style_linked(MAIN_CSS.route())
+		.with_meta(meta)
+		.with_render(move |_page, ctx| {
 			let html = html.clone();

 			Box::pin(async move {
@@ -86,48 +61,46 @@ fn page_from_markdown(md: impl Into<String>, default_image: Option<String>) -> P
 				}
 			})
 		})
-		.html_ttl(Some(TimeDelta::days(1)))
-		.immutable(true)
+		.with_ttl(Some(TimeDelta::days(1)))
 }

 //
 // MARK: components
 //

+const LAZY_IMAGE_JS: &str = "
+	window.onload = function() {
+		var imgs = document.querySelectorAll('.img-placeholder');
+
+		imgs.forEach(img => {
+			img.style.border = 'none';
+			img.style.filter = 'blur(10px)';
+			img.style.transition = 'filter 0.3s';
+
+			var lg = new Image();
+			lg.src = img.dataset.large;
+			lg.onload = function () {
+				img.src = img.dataset.large;
+				img.style.filter = 'blur(0px)';
+			};
+		})
+	}
+	";
+
+/*
 const MAIN_TEMPLATE: PageTemplate = PageTemplate {
 	// Order matters, base htmx goes first
-	scripts_linked: &["/assets/htmx.js", "/assets/htmx-json.js"],
-
-	// TODO: use htmx for this
-	scripts_inline: &["
-		window.onload = function() {
-			var imgs = document.querySelectorAll('.img-placeholder');
-
-			imgs.forEach(img => {
-				img.style.border = 'none';
-				img.style.filter = 'blur(10px)';
-				img.style.transition = 'filter 0.3s';
-
-				var lg = new Image();
-				lg.src = img.dataset.large;
-				lg.onload = function () {
-					img.src = img.dataset.large;
-					img.style.filter = 'blur(0px)';
-				};
-			})
-		}
-	"],
-
-	styles_inline: &[],
-	styles_linked: &["/assets/css/main.css"],
+	scripts: &[
+		ScriptSource::Linked(&"/assets/htmx-2.0.8.js"),
+		ScriptSource::Linked(&"/assets/htmx-json-1.19.12.js"),
+	],

 	extra_meta: &[(
 		"viewport",
 		"width=device-width,initial-scale=1,user-scalable=no",
 	)],
-
-	..PageTemplate::const_default()
 };
+*/

 pub fn backlinks(ctx: &RenderContext) -> Option<Markup> {
 	let mut backlinks = vec![("/", "home")];
@@ -184,3 +157,56 @@ pub fn footer() -> Markup {
 		}
 	)
 }
+
+//
+// MARK: pages
+//
+
+pub const LINKS: LazyLock<HtmlPage> = LazyLock::new(|| {
+	/*
+	Dead links:
+
+	https://www.commitstrip.com/en/
+	http://www.3dprintmath.com/
+	*/
+
+	page_from_markdown(include_str!("links.md"), Some(IMG_ICON.route().into()))
+});
+
+pub const BETALUPI: LazyLock<HtmlPage> = LazyLock::new(|| {
+	page_from_markdown(include_str!("betalupi.md"), Some(IMG_ICON.route().into()))
+});
+
+pub const HTWAH_TYPESETTING: LazyLock<HtmlPage> = LazyLock::new(|| {
+	page_from_markdown(
+		include_str!("htwah-typesetting.md"),
+		Some(IMG_ICON.route().into()),
+	)
+});
+
+pub static NOT_FOUND: LazyLock<HtmlPage> = LazyLock::new(|| {
+	HtmlPage::default()
+		.with_style_linked(MAIN_CSS.route())
+		.with_meta(PageMetadata {
+			title: "Page not found".into(),
+			author: None,
+			description: None,
+			image: Some(IMG_ICON.route().into()),
+		})
+		.with_render(
+			move |_page, _ctx| {
+				Box::pin(async {
+					html! {
+						div class="wrapper" {
+							div style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh" {
+								p style="font-weight:bold;font-size:50pt;margin:0;" { "404" }
+								p style="font-size:13pt;margin:0;color:var(--grey);" { "(page not found)" }
+								a style="font-size:12pt;margin:10pt;padding:5px;" href="/" {"<- Back to site"}
+							}
+						}
+					}
+				})
+			}
+		)
+		.with_code(StatusCode::NOT_FOUND)
+});
--- a/crates/service/service-webpage/src/pages/notfound.rs
+++ b/crates/service/service-webpage/src/pages/notfound.rs
@@ -1,29 +0,0 @@
-use maud::html;
-use page::servable::{Page, PageMetadata};
-use reqwest::StatusCode;
-
-use crate::pages::MAIN_TEMPLATE;
-
-pub fn notfound() -> Page {
-	MAIN_TEMPLATE.derive(
-		PageMetadata {
-			title: "Page not found".into(),
-			author:None,
-			description: None,
-			image: Some("/assets/img/icon.png".to_owned()),
-		},
-		move |_page, _ctx| {
-			Box::pin(async {
-				html! {
-					div class="wrapper" {
-						div style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh" {
-							p style="font-weight:bold;font-size:50pt;margin:0;" { "404" }
-							p style="font-size:13pt;margin:0;color:var(--grey);" { "(page not found)" }
-							a style="font-size:12pt;margin:10pt;padding:5px;" href="/" {"<- Back to site"}
-						}
-					}
-				}
-			})
-		},
-	).response_code(StatusCode::NOT_FOUND)
-}
--- a/crates/service/service-webpage/src/routes/mod.rs
+++ b/crates/service/service-webpage/src/routes/mod.rs
@@ -1,10 +1,7 @@
 use axum::Router;
-use macro_sass::sass;
-use page::{
-	ServableRoute,
-	servable::{Redirect, StaticAsset},
+use servable::{
+	CACHE_BUST_STR, Redirect, ServableRouter, ServableWithRoute, StaticAsset, mime::MimeType,
 };
-use toolbox::mime::MimeType;
 use tower_http::compression::{CompressionLayer, DefaultPredicate};

 use crate::pages;
@@ -20,184 +17,270 @@ pub(super) fn router() -> Router<()> {
 	build_server().into_router().layer(compression)
 }

-fn build_server() -> ServableRoute {
-	ServableRoute::new()
-		.with_404(pages::notfound())
-		.add_page("/", pages::index())
-		.add_page("/links", pages::links())
-		.add_page("/whats-a-betalupi", pages::betalupi())
-		.add_page("/handouts", pages::handouts())
+pub static HTMX: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/htmx-2.0.8.js".into(),
+	servable::HTMX_2_0_8.with_ttl(None),
+);
+
+pub static HTMX_JSON: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/htmx-json-1.19.12.js".into(),
+	servable::EXT_JSON_1_19_12,
+);
+
+pub static MAIN_CSS: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| format!("/assets/{}/css/main.css", *CACHE_BUST_STR),
+	StaticAsset {
+		bytes: grass::include!("css/main.scss").as_bytes(),
+		mime: MimeType::Css,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+pub static IMG_COVER_SMALL: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/img/cover-small.jpg".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/images/cover-small.jpg"),
+		mime: MimeType::Jpg,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+pub static IMG_BETALUPI: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/img/betalupi.png".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/images/betalupi-map.png"),
+		mime: MimeType::Png,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+pub static IMG_ICON: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/img/icon.png".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/images/icon.png"),
+		mime: MimeType::Png,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+//
+// MARK: fonts
+//
+
+pub static FONT_FIRACODE_BOLD: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/fonts/FiraCode-Bold.woff2".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/fonts/fira/FiraCode-Bold.woff2"),
+		mime: MimeType::Woff2,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+pub static FONT_FIRACODE_LIGHT: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/fonts/FiraCode-Light.woff2".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/fonts/fira/FiraCode-Light.woff2"),
+		mime: MimeType::Woff2,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+pub static FONT_FIRACODE_MEDIUM: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/fonts/FiraCode-Medium.woff2".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/fonts/fira/FiraCode-Medium.woff2"),
+		mime: MimeType::Woff2,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+pub static FONT_FIRACODE_REGULAR: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/fonts/FiraCode-Regular.woff2".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/fonts/fira/FiraCode-Regular.woff2"),
+		mime: MimeType::Woff2,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+pub static FONT_FIRACODE_SEMIBOLD: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/fonts/FiraCode-SemiBold.woff2".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/fonts/fira/FiraCode-SemiBold.woff2"),
+		mime: MimeType::Woff2,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+pub static FONT_FIRACODE_VF: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/fonts/FiraCode-VF.woff2".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/fonts/fira/FiraCode-VF.woff2"),
+		mime: MimeType::Woff2,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+//
+// MARK: icons
+//
+pub static FONT_FA_BRANDS_WOFF2: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/fonts/fa/fa-brands-400.woff2".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/fonts/fa/fa-brands-400.woff2"),
+		mime: MimeType::Woff2,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+pub static FONT_FA_REGULAR_WOFF2: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/fonts/fa/fa-regular-400.woff2".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/fonts/fa/fa-regular-400.woff2"),
+		mime: MimeType::Woff2,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+pub static FONT_FA_SOLID_WOFF2: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/fonts/fa/fa-solid-900.woff2".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/fonts/fa/fa-solid-900.woff2"),
+		mime: MimeType::Woff2,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+pub static FONT_FA_BRANDS_TTF: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/fonts/fa/fa-brands-400.ttf".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/fonts/fa/fa-brands-400.ttf"),
+		mime: MimeType::Ttf,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+pub static FONT_FA_REGULAR_TTF: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/fonts/fa/fa-regular-400.ttf".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/fonts/fa/fa-regular-400.ttf"),
+		mime: MimeType::Ttf,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+pub static FONT_FA_SOLID_TTF: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/fonts/fa/fa-solid-900.ttf".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/fonts/fa/fa-solid-900.ttf"),
+		mime: MimeType::Ttf,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+//
+// MARK: htwah
+//
+pub static HTWAH_DEFINITIONS: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/htwah/definitions.pdf".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/htwah/definitions.pdf"),
+		mime: MimeType::Pdf,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+pub static HTWAH_NUMBERING: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/htwah/numbering.pdf".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/htwah/numbering.pdf"),
+		mime: MimeType::Pdf,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+pub static HTWAH_SOLS_A: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/htwah/sols-a.pdf".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/htwah/sols-a.pdf"),
+		mime: MimeType::Pdf,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+pub static HTWAH_SOLS_B: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/htwah/sols-b.pdf".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/htwah/sols-b.pdf"),
+		mime: MimeType::Pdf,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+pub static HTWAH_SPACING_A: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/htwah/spacing-a.pdf".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/htwah/spacing-a.pdf"),
+		mime: MimeType::Pdf,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+pub static HTWAH_SPACING_B: ServableWithRoute<StaticAsset> = ServableWithRoute::new(
+	|| "/assets/htwah/spacing-b.pdf".into(),
+	StaticAsset {
+		bytes: include_bytes!("../../assets/htwah/spacing-b.pdf"),
+		mime: MimeType::Pdf,
+		ttl: StaticAsset::DEFAULT_TTL,
+	},
+);
+
+fn build_server() -> ServableRouter {
+	ServableRouter::new()
+		.with_404(&pages::NOT_FOUND)
+		.add_page("/", &pages::INDEX)
+		.add_page("/links", pages::LINKS)
+		.add_page("/whats-a-betalupi", pages::BETALUPI)
+		.add_page("/handouts", &pages::HANDOUTS)
 		.add_page("/htwah", {
 			#[expect(clippy::unwrap_used)]
 			Redirect::new("/handouts").unwrap()
 		})
-		.add_page("/htwah/typesetting", pages::htwah_typesetting())
-		.add_page("/assets/htmx.js", page::HTMX_2_0_8)
-		.add_page("/assets/htmx-json.js", page::EXT_JSON_1_19_12)
+		.add_page("/htwah/typesetting", pages::HTWAH_TYPESETTING)
+		.add_page_with_route(&HTMX)
+		.add_page_with_route(&HTMX_JSON)
 		//
-		.add_page(
-			"/assets/css/main.css",
-			StaticAsset {
-				bytes: sass!("css/main.scss").as_bytes(),
-				mime: MimeType::Css,
-			},
-		)
-		.add_page(
-			"/assets/img/cover-small.jpg",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/images/cover-small.jpg"),
-				mime: MimeType::Jpg,
-			},
-		)
-		.add_page(
-			"/assets/img/betalupi.png",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/images/betalupi-map.png"),
-				mime: MimeType::Png,
-			},
-		)
-		.add_page(
-			"/assets/img/icon.png",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/images/icon.png"),
-				mime: MimeType::Png,
-			},
-		)
+		.add_page_with_route(&MAIN_CSS)
+		.add_page_with_route(&IMG_COVER_SMALL)
+		.add_page_with_route(&IMG_BETALUPI)
+		.add_page_with_route(&IMG_ICON)
 		//
 		// MARK: fonts
 		//
-		.add_page(
-			"/assets/fonts/FiraCode-Bold.woff2",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/fonts/fira/FiraCode-Bold.woff2"),
-				mime: MimeType::Woff2,
-			},
-		)
-		.add_page(
-			"/assets/fonts/FiraCode-Light.woff2",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/fonts/fira/FiraCode-Light.woff2"),
-				mime: MimeType::Woff2,
-			},
-		)
-		.add_page(
-			"/assets/fonts/FiraCode-Medium.woff2",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/fonts/fira/FiraCode-Medium.woff2"),
-				mime: MimeType::Woff2,
-			},
-		)
-		.add_page(
-			"/assets/fonts/FiraCode-Regular.woff2",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/fonts/fira/FiraCode-Regular.woff2"),
-				mime: MimeType::Woff2,
-			},
-		)
-		.add_page(
-			"/assets/fonts/FiraCode-SemiBold.woff2",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/fonts/fira/FiraCode-SemiBold.woff2"),
-				mime: MimeType::Woff2,
-			},
-		)
-		.add_page(
-			"/assets/fonts/FiraCode-VF.woff2",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/fonts/fira/FiraCode-VF.woff2"),
-				mime: MimeType::Woff2,
-			},
-		)
+		.add_page_with_route(&FONT_FIRACODE_BOLD)
+		.add_page_with_route(&FONT_FIRACODE_LIGHT)
+		.add_page_with_route(&FONT_FIRACODE_MEDIUM)
+		.add_page_with_route(&FONT_FIRACODE_REGULAR)
+		.add_page_with_route(&FONT_FIRACODE_SEMIBOLD)
+		.add_page_with_route(&FONT_FIRACODE_VF)
 		//
 		// MARK: icons
 		//
-		.add_page(
-			"/assets/fonts/fa/fa-brands-400.woff2",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/fonts/fa/fa-brands-400.woff2"),
-				mime: MimeType::Woff2,
-			},
-		)
-		.add_page(
-			"/assets/fonts/fa/fa-regular-400.woff2",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/fonts/fa/fa-regular-400.woff2"),
-				mime: MimeType::Woff2,
-			},
-		)
-		.add_page(
-			"/assets/fonts/fa/fa-solid-900.woff2",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/fonts/fa/fa-solid-900.woff2"),
-				mime: MimeType::Woff2,
-			},
-		)
-		.add_page(
-			"/assets/fonts/fa/fa-brands-400.ttf",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/fonts/fa/fa-brands-400.ttf"),
-				mime: MimeType::Ttf,
-			},
-		)
-		.add_page(
-			"/assets/fonts/fa/fa-regular-400.ttf",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/fonts/fa/fa-regular-400.ttf"),
-				mime: MimeType::Ttf,
-			},
-		)
-		.add_page(
-			"/assets/fonts/fa/fa-solid-900.ttf",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/fonts/fa/fa-solid-900.ttf"),
-				mime: MimeType::Ttf,
-			},
-		)
+		.add_page_with_route(&FONT_FA_BRANDS_WOFF2)
+		.add_page_with_route(&FONT_FA_REGULAR_WOFF2)
+		.add_page_with_route(&FONT_FA_SOLID_WOFF2)
+		.add_page_with_route(&FONT_FA_BRANDS_TTF)
+		.add_page_with_route(&FONT_FA_REGULAR_TTF)
+		.add_page_with_route(&FONT_FA_SOLID_TTF)
 		//
 		// MARK: htwah
 		//
-		.add_page(
-			"/assets/htwah/definitions.pdf",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/htwah/definitions.pdf"),
-				mime: MimeType::Pdf,
-			},
-		)
-		.add_page(
-			"/assets/htwah/numbering.pdf",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/htwah/numbering.pdf"),
-				mime: MimeType::Pdf,
-			},
-		)
-		.add_page(
-			"/assets/htwah/sols-a.pdf",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/htwah/sols-a.pdf"),
-				mime: MimeType::Pdf,
-			},
-		)
-		.add_page(
-			"/assets/htwah/sols-b.pdf",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/htwah/sols-b.pdf"),
-				mime: MimeType::Pdf,
-			},
-		)
-		.add_page(
-			"/assets/htwah/spacing-a.pdf",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/htwah/spacing-a.pdf"),
-				mime: MimeType::Pdf,
-			},
-		)
-		.add_page(
-			"/assets/htwah/spacing-b.pdf",
-			StaticAsset {
-				bytes: include_bytes!("../../assets/htwah/spacing-b.pdf"),
-				mime: MimeType::Pdf,
-			},
-		)
+		.add_page_with_route(&HTWAH_DEFINITIONS)
+		.add_page_with_route(&HTWAH_NUMBERING)
+		.add_page_with_route(&HTWAH_SOLS_A)
+		.add_page_with_route(&HTWAH_SOLS_B)
+		.add_page_with_route(&HTWAH_SPACING_A)
+		.add_page_with_route(&HTWAH_SPACING_B)
 }

 #[test]