Dan Klammer danklammer

Download the image builder

modify /config/rpi4/default.nix to increase size of boot partition
- this step is optional but I ran out of space in /boot pretty quickly with the default setting since I'm still learning and rebuilding a lot. Let's leave some room for trial & error.
- sdImage.firmwareSize = 1024;
modify /config/sd-image.nix
./rpi3 becomes ./rpi4

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	.editor { font-family: 'Roboto Mono', monospace; font-size: 12px; outline: none; overflow-y: auto; padding-left: 48px; counter-reset: line; }
	.editor div { display: block; position: relative; white-space: pre-wrap; }
	.editor div::before { content: counter(line); counter-increment: line; position: absolute; right: calc(100% + 16px); opacity: 0.5; }
	</style>
	</head>

	<form action="/cart/add" method="post">
	{% if product.variants.size > 1 %}
	{% if product.options[0] %}
	<label for="select-one">{{ product.options[0] }}</label>
	<select id="select-one" onchange="letsDoThis()">
	{% for value in product.options_with_values[0].values %}
	<option value="{{ value }}" {% if product.options_with_values[0].selected_value == value %}selected{% endif %}>
	{{ value }}
	</option>
	{% endfor %}

	const { PurgeCSS } = require('purgecss');

	/**
	* Remove any CSS not used on the page and inline the remaining CSS in the
	* <head>.
	*
	* @see {@link https://github.com/FullHuman/purgecss}
	*/
	eleventyConfig.addTransform('purge-and-inline-css', async (content, outputPath) => {
	if (process.env.ELEVENTY_ENV !== 'production' \|\| !outputPath.endsWith('.html')) {

	<!DOCTYPE html>
	<meta charset="utf-8" />
	<body
	style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; overflow: hidden; margin: 0; padding: 0;"
	>
	<canvas
	id="canvas"
	style="width: 100%; height: 100%; padding: 0;margin: 0;"
	></canvas>
	<script>

	// create a bookmark and use this code as the URL, you can now toggle the css on/off
	// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
	javascript: (function() {
	var elements = document.body.getElementsByTagName('*');
	var items = [];
	for (var i = 0; i < elements.length; i++) {
	if (elements[i].innerHTML.indexOf('* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }') != -1) {
	items.push(elements[i]);
	}
	}

	<img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/>

	<script>
	// Select all images with the class "lazyload"
	const images = document.querySelectorAll("img.lazyload");
	// Check if the browser supports the "loading" attribute
	if ('loading' in HTMLImageElement.prototype) {
	// If so, we'll update all <img src> to point to the data-src instead
	images.forEach(img => {
	img.src = img.dataset.src;

	(function (context, trackingId, options) {
	const history = context.history;
	const doc = document;
	const nav = navigator \|\| {};
	const storage = localStorage;
	const encode = encodeURIComponent;
	const pushState = history.pushState;
	const typeException = 'exception';
	const generateId = () => Math.random().toString(36);
	const getId = () => {

	:root {
	--system-sans-serif:
	system-ui, /* detect system font automatically */
	-apple-system, /* Safari (Mac OS X and iOS) and Older Mac OS X */
	BlinkMacSystemFont, /* Chrome<56 (Mac OS X) */
	"Segoe UI", /* Windows and Windows Phone */
	"Roboto", /* Android and Chrome OS */
	"Oxygen", /* KDE - Linux environment */
	"Ubuntu", /* Ubuntu - Linux distribution */
	"Cantarell", /* GNOME - Linux environment */