Generate fonts and styles from nix build

pull/1/head
mat ess 2022-08-25 03:32:34 -04:00
parent 829f26441a
commit 8b0ad26d66
11 changed files with 180 additions and 37 deletions

6
.gitignore vendored
View File

@ -1,5 +1,9 @@
.nvimlog
.direnv/
themes/
public/
result
# ignore folders where we link in files from the nix store
themes/
static/font/
static/style/fonts.css

View File

@ -24,7 +24,7 @@ external_links_no_referrer = true
favicon = "/image/favicon.svg"
stylesheets = []
use_cdn = true
use_cdn = false
# include hashes for SRI
cdns = [
{ url = "https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.min.css", hash = "sWIpcFPnJFfPqQU7FWn8H9+Xax/h5ihI8hVjQTBa5WmUde6CZZLw9DUAaIyA6j5u" },

Binary file not shown.

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 61 KiB

View File

@ -168,11 +168,17 @@ error: failed to push some refs to 'git.mat.services:mat/fly-apps.git'
Uh. Hm. I just got an email saying a Fly.io instance ran out of memory and crashed. Let's peek at our Fly.io dashboards:
![Fly.io memory dashboard](fly-io-memory-dashboard.png)
<figure>
<img alt="Fly.io memory dashboard" src=fly-io-memory-dashboard.png />
<figcaption class=meta>Fly.io memory dashboard</figcaption>
</figure>
That doesn't look so great. It seems like Gitea idles just under the amount of memory we have with a default instance size, and operations like `git push` can bump it over the threshold to an out-of-memory error. Let's check out the "Scale" section of the dashboard, and increase the memory allotment for this VM:
![Fly.io VM scale interface](fly-io-scale-vm.png)
<figure>
<img alt="Fly.io VM scaling interface" src=fly-io-scale-vm.png />
<figcaption class=meta>Fly.io VM scaling interface</figcaption>
</figure>
I have been running my Gitea install on a 512MB instance since the first day I started using it, which seems to be plenty of headroom for personal use. If you open up your Gitea installation to the public and it starts to get popular, you might end up needing to scale up further.

View File

@ -6,6 +6,7 @@
flake-parts.url = "github:hercules-ci/flake-parts";
flake-parts.inputs.nixpkgs.follows = "nixpkgs";
# theme
apollo.url = "github:not-matthias/apollo";
apollo.flake = false;
};
@ -26,30 +27,52 @@
for image in content/**/_*.png static/image/**/_*.png; do
path=$(dirname $image)
file=$(basename $image)
${pkgs.pngquant}/bin/pngquant --quality 90-99 -f -o "$path/''${file:1}" $image
newimage=$path/''${file:1}
echo "optimizing $image"
${pkgs.pngquant}/bin/pngquant --quality 80-90 -f -o $newimage $image
oldsize=$(stat --format=%s $image)
newsize=$(stat --format=%s $newimage)
pct=$(${pkgs.bc}/bin/bc <<< "scale=1; $newsize * 100 / $oldsize")
echo "size went from "$(($oldsize / 1024))"KB to "$(($newsize / 1024))"KB ("$pct"% as large as original)"
done
'';
inherit (pkgs.callPackage ./fonts.nix { }) copyFonts linkFonts;
in
{
packages.default = pkgs.stdenv.mkDerivation {
packages.default = with pkgs; stdenv.mkDerivation {
pname = "personal-site";
version = "2022-08-13";
version = "2022-08-21";
src = ./.;
nativeBuildInputs = with pkgs; [ optimize-images zola ];
nativeBuildInputs = [ optimize-images zola ];
configurePhase = ''
mkdir -p "themes/${themeName}"
cp -r ${theme}/* "themes/${themeName}"
mkdir -p themes/${themeName}
cp -r ${theme}/* themes/${themeName}
'' + copyFonts;
buildPhase = ''
optimize-images
zola build
'';
buildPhase = "zola build";
installPhase = "cp -r public $out";
};
devShells.default = with pkgs; mkShell {
packages = [ optimize-images flyctl zola ];
packages = [ flyctl optimize-images zola ];
shellHook = ''
mkdir -p themes
ln -snf "${theme}" "themes/${themeName}"
'';
'' + linkFonts;
};
packages.docker =
let
site = self'.packages.default;
in
pkgs.dockerTools.buildLayeredImage {
name = site.pname;
tag = site.version;
contents = [ site pkgs.caddy ];
config = {
Cmd = [ "caddy" ];
};
};
};
};

122
fonts.nix Normal file
View File

@ -0,0 +1,122 @@
{ fetchFromGitHub
, lib
, stdenv
, woff2
, writeShellScriptBin
, writeText
}:
let
pathName = name: with lib; replaceStrings [ " " ] [ "-" ] (toLower name);
in
rec {
fontSrcs = [
{
name = "Inria Sans";
fileName = "InriaSans";
owner = "BlackFoundryCom";
repo = "InriaFonts";
rev = "v1.200";
path = "fonts/InriaSans/Web";
sha256 = "+YK03VnMXytTtHHgGYe2uARaTThaqrhpnhxPASBV9k0=";
cssVar = "header-font";
}
{
name = "iA Writer Quattro";
fileName = "iAWriterQuattroS";
owner = "iaolo";
repo = "iA-Fonts";
rev = "ba31f88a1e71f413f97bbd23a99e21b29d4c3a28";
path = "iA\ Writer\ Quattro/Webfonts";
sha256 = "8r06oRA+XA8mPjG3DJxzIVpaqptSqzraOWVvebbnMWE=";
cssVar = "text-font";
}
{
name = "IBM Plex Mono";
fileName = "IBMPlexMono";
owner = "IBM";
repo = "plex";
rev = "v6.1.0";
path = "IBM-Plex-Mono/fonts/complete/woff2";
sha256 = "SpH4+ldQJl58w5onxr7faDS6uVJKT8ZeLmE6712GFhw=";
cssVar = "code-font";
}
];
fontDerivation = { name, owner, repo, rev, sha256, path, ... }: stdenv.mkDerivation {
name = "font-${pathName name}";
src = fetchFromGitHub {
inherit owner repo rev sha256;
sparseCheckout = path;
};
nativeBuildInputs = [ woff2 ];
buildPhase = ''
find . -name '*.ttf' -exec woff2_compress {} \;
'';
installPhase = ''
mkdir -p $out
find . -name '*.woff2' -exec cp {} $out \;
'';
};
fetchFont = fontSrc: {
inherit (fontSrc) name fileName cssVar;
font = fontDerivation fontSrc;
};
fonts = map fetchFont fontSrcs;
copyFont = { font, name, ... }: ''
mkdir -p static/font/${name}
cp -r ${font}/* static/font/${pathName name}
'';
linkFont = { font, name, ... }: ''
ln -snf "${font}" static/font/${pathName name}
'';
mkFontCss = { font, name, fileName, cssVar }:
let path = pathName name; in ''
@font-face {
font-family: '${name}';
font-style: normal;
font-weight: normal;
src: url('../font/${path}/${fileName}-Regular.woff2'), local('woff2');
font-display: swap;
}
@font-face {
font-family: '${name}';
font-style: normal;
font-weight: bold;
src: url('../font/${path}/${fileName}-Bold.woff2'), local('woff2');
font-display: swap;
}
@font-face {
font-family: '${name}';
font-style: italic;
font-weight: normal;
src: url('../font/${path}/${fileName}-Italic.woff2'), local('woff2');
font-display: swap;
}
@font-face {
font-family: '${name}';
font-style: italic;
font-weight: bold;
src: url('../font/${path}/${fileName}-BoldItalic.woff2'), local('woff2');
font-display: swap;
}
:root {
--${cssVar}: '${name}'
}
'';
fontCss = lib.concatMapStrings mkFontCss fonts;
fontCssFile = writeText "fonts.css" fontCss;
copyFonts = (lib.concatMapStrings copyFont fonts) + ''
mkdir -p static/style
cp ${fontCssFile} static/style/fonts.css
'';
linkFonts = ''
mkdir -p static/font
'' + (lib.concatMapStrings linkFont fonts) + ''
mkdir -p static/style
ln -sf ${fontCssFile} static/style/fonts.css
'';
}

View File

@ -9,18 +9,7 @@
/* Used for: block comment, hr, ... */
--border-color: var(--bg-1);
/* Fonts */
--text-font: 'iA Writer Quattro';
--header-font: 'Pretendard Std';
--code-font: 'Fira Code';
// Disabling variable fonts to bring site weight down
// @supports(font-variation-settings: normal) {
// /* Variable fonts */
// --text-font: 'iA Writer Quattro var';
// --header-font: 'Pretendard Std Variable';
// --code-font: 'Fira Code VF';
// }
// Fonts defined via fonts.nix
}
html {

View File

@ -1,3 +1,3 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" baseProfile="full" width="512px" height="512px" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet" id="svg_document" style="zoom: 1;"><!-- Created with macSVG - https://macsvg.org/ - https://github.com/dsward2/macsvg/ --><title id="svg_document_title">Untitled.svg</title><defs id="svg_document_defs"><clipPath id="halfCircle"><rect y="0%" id="rect1" width="50%" height="100%" x="50%"></rect></clipPath><clipPath id="smallHalfCircle"><rect y="50%" id="rect2" width="100%" height="100%" x="0%"></rect></clipPath></defs><g id="main_group"><rect stroke="lightcoral" id="background_rect" stroke-width="16" x="8" rx="64" width="496px" y="8" fill="none" stroke-linejoin="round" ry="64" height="496px"></rect><circle clip-path="url(#halfCircle)" id="circle1" cy="256px" fill="lightcoral" r="40%" cx="256px" visibility="visible"></circle><circle clip-path="url(#smallHalfCircle)" id="circle2" cy="256px" fill="lightcoral" r="40%" cx="256px" visibility="visible"></circle></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" baseProfile="full" width="512px" height="512px" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet" id="svg_document" style="zoom: 1;"><!-- Created with macSVG - https://macsvg.org/ - https://github.com/dsward2/macsvg/ --><title id="svg_document_title">Untitled.svg</title><defs id="svg_document_defs"><clipPath id="halfCircle"><rect y="0%" id="rect1" width="50%" height="100%" x="50%"></rect></clipPath><clipPath id="smallHalfCircle"><rect y="50%" id="rect2" width="100%" height="100%" x="0%"></rect></clipPath></defs><g id="main_group"><rect stroke="lightcoral" id="background_rect" stroke-width="20" x="10px" rx="64" width="496px" y="10px" fill="none" stroke-linejoin="round" ry="64" height="496px"></rect><circle clip-path="url(#halfCircle)" id="circle1" cy="256px" fill="lightcoral" r="40%" cx="256px" visibility="visible"></circle><circle clip-path="url(#smallHalfCircle)" id="circle2" cy="256px" fill="lightcoral" r="40%" cx="256px" visibility="visible"></circle></g></svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -12,7 +12,7 @@
</clipPath>
</defs>
<g id="main_group">
<rect id="background_rect" x="8" y="8" width="496px" height="496px" rx="64" ry="64" fill="none" stroke="#f08080" stroke-linejoin="round" stroke-width="16"/>
<rect id="background_rect" x="10px" y="10px" width="496px" height="496px" rx="64" ry="64" fill="none" stroke="#f08080" stroke-linejoin="round" stroke-width="20"/>
<circle id="circle1" cx="256px" cy="256px" r="40%" clip-path="url(#halfCircle)" fill="#f08080"/>
<circle id="circle2" cx="256px" cy="256px" r="40%" clip-path="url(#smallHalfCircle)" fill="#f08080"/>
</g>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -42,7 +42,6 @@
<link rel="stylesheet" type="text/css" media="screen" href="{{ get_url(path='style/main.css', cachebust=true) }}" />
{% if config.extra.stylesheets %}
{% for stylesheet in config.extra.stylesheets %}
<link rel="stylesheet" href="{{ get_url(path=stylesheet, cachebust=true) }}">