John F Morton johnfmorton

## video-allowed-htmlpurifier.json
{
  "HTML.SafeIframe": true,
  "URI.SafeIframeRegexp": "%^(https?:)?//(www.youtube.com/|youtube.com/|youtu.be/|player.vimeo.com/)%"
}

## ck-editor-video-embed-youtube.ts
document.addEventListener('DOMContentLoaded', (event) => {
    // Find all oembed elements
    const oembedElements = document.querySelectorAll('oembed[url]');

    oembedElements.forEach(element => {
        const url = element.getAttribute('url');
        let videoId: string | null;
        if (!url) return;
        videoId = extractYouTubeId(url);

## standard-plus-ck-editor-config.json
{
  "alignment": {
    "options": [
      "left",
      "center",
      "right"
    ]
  },
  "code": {
    "indentSequence": "  "

## gist:639451fea75d84a5b89b5bcacb6ae8bb
<script>
document.addEventListener('DOMContentLoaded', (event) => {
    // Find all oembed elements
    const oembedElements = document.querySelectorAll('oembed[url]');

    oembedElements.forEach(element => {
        const url = element.getAttribute('url');
        const videoId = extractYouTubeId(url);

        if (videoId) {

## dontiframeme.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Don't iFrame Me, Bro.</title>
	<style type="text/css">
		body {
			background: white;
			font-size: 2rem;

## better-img-tag-reset.css
/*

References for this reset

Video explanation:
https://youtu.be/345V2MU3E_w?si=DCYNR9sQjp-cirs9

The Ultimate Low-Quality Image Placeholder Technique:
https://csswizardry.com/2023/09/the-ultimate-lqip-lcp-technique/

## doxter-cp-sticky-header-position.js
// This is a small fix for the sticky header position for Doxter, https://github.com/verbb/doxter
// I've included it in the Craft CMS control panel with another plugin, https://github.com/doublesecretagency/craft-cpjs
// but it could also be included in a custom module.

let resizeTimeout
let styleTag
let ruleIndex

window.addEventListener('resize', () => {
	clearTimeout(resizeTimeout)

## docker-compose-plausible-analytics.yml
version: "3.3"
services:
  mail:
    image: bytemark/smtp
    networks:
      - default
    restart: always

  plausible_db:
    # supported versions are 12, 13, and 14

## docker-compose-traefik.yml
# In my deployment script, I create the 'proxy' network that Traefik uses
# # Check for the network 'proxy', and, if it does not already exist, create it
# docker network ls | grep proxy || docker network create proxy

version: "3.7"
networks:
  proxy:
    external: true

services:

## fm-proxy-pdf-viewer.php
<?php
// Referenced in blog post, Learning the FileMaker Data API by trial and error.
// https://supergeekery.com/blog/learning-the-filemaker-data-api-by-trial-and-error
// Sample URL hitting this proxy:
// https://my-proxy-server.com/api/fm-proxy-pdf-viewer.php?token=123&pdfUrl=https%3A%2F%2Fexample-filemaker-server.com%2FStreaming_SSL%2FMainDB%abc.pdf%3FRCType%3DEmbeddedRCFileProcessor

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS' && isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) {
  // This is a preflight request, so send the CORS headers
  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
	{
	"HTML.SafeIframe": true,
	"URI.SafeIframeRegexp": "%^(https?:)?//(www.youtube.com/\|youtube.com/\|youtu.be/\|player.vimeo.com/)%"
	}
	document.addEventListener('DOMContentLoaded', (event) => {
	// Find all oembed elements
	const oembedElements = document.querySelectorAll('oembed[url]');

	oembedElements.forEach(element => {
	const url = element.getAttribute('url');
	let videoId: string \| null;
	if (!url) return;
	videoId = extractYouTubeId(url);
	{
	"alignment": {
	"options": [
	"left",
	"center",
	"right"
	]
	},
	"code": {
	"indentSequence": " "
	<script>
	document.addEventListener('DOMContentLoaded', (event) => {
	// Find all oembed elements
	const oembedElements = document.querySelectorAll('oembed[url]');

	oembedElements.forEach(element => {
	const url = element.getAttribute('url');
	const videoId = extractYouTubeId(url);

	if (videoId) {
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Don't iFrame Me, Bro.</title>
	<style type="text/css">
	body {
	background: white;
	font-size: 2rem;
	/*

	References for this reset

	Video explanation:
	https://youtu.be/345V2MU3E_w?si=DCYNR9sQjp-cirs9

	The Ultimate Low-Quality Image Placeholder Technique:
	https://csswizardry.com/2023/09/the-ultimate-lqip-lcp-technique/
	version: "3.3"
	services:
	mail:
	image: bytemark/smtp
	networks:
	- default
	restart: always

	plausible_db:
	# supported versions are 12, 13, and 14
	# In my deployment script, I create the 'proxy' network that Traefik uses
	# # Check for the network 'proxy', and, if it does not already exist, create it
	# docker network ls \| grep proxy \|\| docker network create proxy

	version: "3.7"
	networks:
	proxy:
	external: true

	services:
	<?php
	// Referenced in blog post, Learning the FileMaker Data API by trial and error.
	// https://supergeekery.com/blog/learning-the-filemaker-data-api-by-trial-and-error
	// Sample URL hitting this proxy:
	// https://my-proxy-server.com/api/fm-proxy-pdf-viewer.php?token=123&pdfUrl=https%3A%2F%2Fexample-filemaker-server.com%2FStreaming_SSL%2FMainDB%abc.pdf%3FRCType%3DEmbeddedRCFileProcessor

	if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS' && isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) {
	// This is a preflight request, so send the CORS headers
	header('Access-Control-Allow-Origin: *');
	header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');