Chauncey McAskill mcaskill

name	explain-diff-html
description	Use when the user asks for a rich explanation of a code change, diff, branch, or PR. Produces HTML output.

Explain Diff

Please make me a rich, interactive explanation of the specified code change.

It should have these sections:

Lutra Lutra
<span class="name">Lutra lutra</span>
Source: NBN Atlas
Bombus ruderarius
<em>Bombus ruderarius</em>
Source: Biological Records Centre

	class ButtonInstall extends HTMLElement {
	init () {
	this.button = this.querySelector('button');
	if (window.matchMedia('(display-mode: standalone)').matches) {
	this.button.remove();
	return;
	}
	if (!navigator.install) {
	this.button.remove();
	return;

	// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
	// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
	(() => {
	const SHOW_SIDES = false; // color sides of DOM nodes?
	const COLOR_SURFACE = true; // color tops of DOM nodes?
	const COLOR_RANDOM = false; // randomise color?
	const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
	const MAX_ROTATION = 180; // set to 360 to rotate all the way round
	const THICKNESS = 20; // thickness of layers
	const DISTANCE = 10000; // ¯\\_(ツ)_/¯

	customElements.define(
	"i-frame",
	class extends HTMLElement {
	#shadow = this.attachShadow({ mode: "closed" });

	constructor() {
	super();
	this.#shadow.innerHTML = `
	<slot></slot>
	<iframe part="frame" srcdoc=""></iframe>

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Code Sandbox</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	body {

	(function (win, doc) {
	'use strict';
	if (!doc.querySelectorAll \|\| !win.Intl \|\| !win.Intl.RelativeTimeFormat) {
	// doesn't cut the mustard.
	return;
	}
	var rtf = new Intl.RelativeTimeFormat('en', {
	localeMatcher: 'best fit',
	numeric: 'always',
	style: 'long'

	import { UserConfig } from "@11ty/eleventy";
	import { DOMParser } from "@xmldom/xmldom";
	import { transform } from "esbuild";
	import { minify } from "html-minifier";

	/** cache for content of script tags with an ID */
	const scriptCache = new Map<string, string>();

	/** DOM parser for navigating the rendered document; warnings are ignored */
	const parser = new DOMParser({ errorHandler: { warning: () => {} } });

	<?php

	/**
	*
	* @link https://www.spacedmonkey.co.uk
	* @since 1.0.0
	* @package Style_Splitter
	*
	* @wordpress-plugin
	* Plugin Name: Block style splitter

	<?php

	/**
	* Locomotive Bedrock Valet Driver
	*
	* Supported Valet Version: 4
	*/

	namespace Valet\Drivers\Custom;