Skip to content

Instantly share code, notes, and snippets.

View johnfmorton's full-sized avatar
⌨️
Making stuff

John F Morton johnfmorton

⌨️
Making stuff
View GitHub Profile
@johnfmorton
johnfmorton / config.applesilicon.yaml
Last active July 25, 2024 20:51
DDEV config file to add chromium to an Apple Silicon machine. Useful when creating Critical CSS. See: https://nystudio107.com/docs/vite/#using-ddev
webimage_extra_packages:
[
gconf-service,
libasound2,
libatk1.0-0,
libcairo2,
libgconf-2-4,
libgdk-pixbuf2.0-0,
libgtk-3-0,
libnspr4,
@johnfmorton
johnfmorton / video-allowed-htmlpurifier.json
Last active June 12, 2024 18:03
Sample HTMLPurifier config to allow YouTube and Vimeo embeds - used with CKEditor in Craft CMS
{
"HTML.SafeIframe": true,
"URI.SafeIframeRegexp": "%^(https?:)?//(www.youtube.com/|youtube.com/|youtu.be/|player.vimeo.com/)%"
}
@johnfmorton
johnfmorton / ck-editor-video-embed-youtube.ts
Last active May 17, 2024 15:51
Sample Typescript used in conjunction with CKEditor to convert video embeds into video tags on frontend
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);
@johnfmorton
johnfmorton / standard-plus-ck-editor-config.json
Last active May 17, 2024 17:09
CKEditor config with helpful additions - custom fonts, an addition font size example, and open links in new window option
{
"alignment": {
"options": [
"left",
"center",
"right"
]
},
"code": {
"indentSequence": " "
@johnfmorton
johnfmorton / gist:639451fea75d84a5b89b5bcacb6ae8bb
Created May 16, 2024 17:52
Example script to get a YouTube video to display on a page that has an embed
<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) {
@johnfmorton
johnfmorton / dontiframeme.html
Last active November 27, 2023 19:35
Don't allow your page to be rendered in an iframe.
<!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;
@johnfmorton
johnfmorton / better-img-tag-reset.css
Last active November 8, 2023 12:22
A better img reset for 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/
@johnfmorton
johnfmorton / doxter-cp-sticky-header-position.js
Created August 2, 2023 15:29
Doxter CP sticky header position tweak for Craft CMS
// 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)
@johnfmorton
johnfmorton / docker-compose-plausible-analytics.yml
Created July 17, 2023 20:16
Plausible Analytics Docker Compose file for Laravel Forge using Traefik for routing traffic
version: "3.3"
services:
mail:
image: bytemark/smtp
networks:
- default
restart: always
plausible_db:
# supported versions are 12, 13, and 14
@johnfmorton
johnfmorton / docker-compose-traefik.yml
Last active July 17, 2023 20:39
Traefik Docker Compose file - used on Laravel Forge
# 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: