Nathan Knowler knowler

## shadow.pug
mixin shadow
	template(shadowrootmode="open")
		block
	script.
		{
			const element = document.currentScript.parentElement;
			if (!element.shadowRoot) {
				element.attachShadow({ mode: "open"})
				const template = element.querySelector(":scope > template[shadowrootmode=open]");
				if (template) element.shadowRoot.appendChild(template.content.cloneNode(true));

## main.css
/*
 * Modern CSS crash course:
 *
 * - Leverage flexibility for everything. The web is magic paper that adapts to whatever viewport it’s in.
 *   - This means using `display` values like `flex` and `grid`.
 *   - Avoid using `@media` for setting sizes: use fluid type and spacing (i.e. `clamp()`, `min()`, `max()` math functions).
 * - Use logical properties for sizing and spacing. This helps with internationalization.
 *   - Think in axes: block (vertical: top is start, bottom is end), inline (horizontal: left is start, right is end).
 *     - Those are the left-to-right/top-to-bottom equivalances, but for other writing modes/directions you’ll be setting the correct direction (e.g. in RTL, inline-start is right and inline-end is left).
 *     - For flexbox and grid: “align” properties apply to the block axis and “justify” properties apply to the inline axis.

## restart-animations-element.js
export class RestartAnimationsElement extends HTMLElement {
	#controller;

	get #buttonElement() { return this.shadowRoot.querySelector(':host > button'); }

	connectedCallback() {
		if (!this.shadowRoot) {
			this.attachShadow({mode: 'open'});
			this.shadowRoot.innerHTML = `<button type="button" part="button"><slot>Restart Animations</slot></button>`;
			this.#controller = new AbortController();

## custom-element-expander.js
import {parseHTML} from "https://esm.sh/linkedom";

// This is just so IDEs use HTML syntax highlighting.
const html = String.raw;

const { window, document, customElements, HTMLElement } = parseHTML(html`
	<!doctype html>
	<html lang="en-ca">
		<head>
			<meta charset="utf-8">

## fontsource-with-remix.md

      
              1 file
            
          
              0 forks
            
          
              13 comments
            
          
              8 stars
            
          
                knowler
                / fontsource-with-remix.md
            
            
              Last active
              February 21, 2024 17:03
            
              
                Fontsource with Remix (pre-1.7.3)
              
          
    Fontsource with Remix

Fontsource is designed to work with projects that bundle their CSS. You import their stylesheet and the bundler will place the fonts in your build directory and the CSS file will have the correct URL for the @font-face src.
Remix doesn’t bundle CSS and so while you can import their CSS file and add it to your links, the URL to font will be incorrect. It is still possible to use Fontsource with Remix. We just need to create our own @font-face declaration with the correct URL to the font (ideally, one that benefits from Remix’s asset fingerprinting). There’s a bit of manual set up, but once that’s done, you can serve the font on your site and benefit from updates for the font.

Install your font:
npm install --save @fontsource/montserrat


## app.css
main fancy-article::part(header) {
  color: red;
}

aside fancy-article::part(header) {
  color: blue;
}

## app.css
main fancy-article::part(header) {
  color: red;
}

aside fancy-article::part(header) {
  color: blue;
}

## regolith.sh
#!/bin/bash

# Regolith aka Un-Bedrock
# "But what if we need to hand it off to another agency?" No more!
# This script converts a Bedrock site to a normal WordPress structure.
# Run it from the root of a Bedrock project.
# Created by Nathan Knowler and Daniel Roe

echo "Converting Bedrock to a normal WordPress file structure..."

## wp-active-theme.sh
theme() { cd $(wp theme path)/$(wp option get stylesheet | cut -d/ -f1) }

## mp3these.sh
mp3these () {
  mkdir -p mp3-320
  for input in "$@"
    do sox -S $input -C 320 "mp3-320/${input%.*}.mp3"
  done
}
	mixin shadow
	template(shadowrootmode="open")
	block
	script.
	{
	const element = document.currentScript.parentElement;
	if (!element.shadowRoot) {
	element.attachShadow({ mode: "open"})
	const template = element.querySelector(":scope > template[shadowrootmode=open]");
	if (template) element.shadowRoot.appendChild(template.content.cloneNode(true));
	/*
	* Modern CSS crash course:
	*
	* - Leverage flexibility for everything. The web is magic paper that adapts to whatever viewport it’s in.
	* - This means using `display` values like `flex` and `grid`.
	* - Avoid using `@media` for setting sizes: use fluid type and spacing (i.e. `clamp()`, `min()`, `max()` math functions).
	* - Use logical properties for sizing and spacing. This helps with internationalization.
	* - Think in axes: block (vertical: top is start, bottom is end), inline (horizontal: left is start, right is end).
	* - Those are the left-to-right/top-to-bottom equivalances, but for other writing modes/directions you’ll be setting the correct direction (e.g. in RTL, inline-start is right and inline-end is left).
	* - For flexbox and grid: “align” properties apply to the block axis and “justify” properties apply to the inline axis.
	export class RestartAnimationsElement extends HTMLElement {
	#controller;

	get #buttonElement() { return this.shadowRoot.querySelector(':host > button'); }

	connectedCallback() {
	if (!this.shadowRoot) {
	this.attachShadow({mode: 'open'});
	this.shadowRoot.innerHTML = `<button type="button" part="button"><slot>Restart Animations</slot></button>`;
	this.#controller = new AbortController();
	import {parseHTML} from "https://esm.sh/linkedom";

	// This is just so IDEs use HTML syntax highlighting.
	const html = String.raw;

	const { window, document, customElements, HTMLElement } = parseHTML(html`
	<!doctype html>
	<html lang="en-ca">
	<head>
	<meta charset="utf-8">
	main fancy-article::part(header) {
	color: red;
	}

	aside fancy-article::part(header) {
	color: blue;
	}
	#!/bin/bash

	# Regolith aka Un-Bedrock
	# "But what if we need to hand it off to another agency?" No more!
	# This script converts a Bedrock site to a normal WordPress structure.
	# Run it from the root of a Bedrock project.
	# Created by Nathan Knowler and Daniel Roe

	echo "Converting Bedrock to a normal WordPress file structure..."
	mp3these () {
	mkdir -p mp3-320
	for input in "$@"
	do sox -S $input -C 320 "mp3-320/${input%.*}.mp3"
	done
	}