Skip to content

Instantly share code, notes, and snippets.

View croxton's full-sized avatar
💭
Up to my elbows, as usual

Mark Croxton croxton

💭
Up to my elbows, as usual
View GitHub Profile
@croxton
croxton / example.html
Last active May 5, 2024 23:02
Adds a `hx-history-preserve` attribute to preserve the initial dom state of an element's children for history (before it has been manipulated by JS).
<div id="my-unique-id" hx-history-preserve>
<p>Markup here wil be returned to it's original state on history restore.</p>
</div>
@croxton
croxton / craft-5-control-panel.css
Last active April 11, 2024 07:54
Faux nested matrix blocks (Craft 5 version)
.matrixblock[data-type="sectionBlock"] > .titlebar > .blocktype {
color: var(--text-color);
font-weight: 600;
}
.matrixblock[data-type="sectionBlock"] ~ .matrixblock:not([data-type="sectionBlock"]) {
margin-left: 15px;
}
.matrixblock + .matrixblock[data-type="sectionBlock"] {
margin-top: 30px;
@croxton
croxton / SSL-certs-OSX.md
Last active March 3, 2024 18:58 — forked from leevigraham/Generate ssl certificates with Subject Alt Names on OSX.md
Generate ssl certificates with Subject Alt Names

Generate ssl certificates with Subject Alt Names on OSX

Open ssl.conf in a text editor.

Edit the domain(s) listed under the [alt_names] section so that they match the local domain name you want to use for your project, e.g.

DNS.1   = my-project.dev

Additional FQDNs can be added if required:

@croxton
croxton / control-panel.css
Created January 18, 2024 12:10
Faux nested matrix blocks
.matrixblock[data-type="sectionBlock"] ~ .matrixblock:not([data-type="sectionBlock"]) {
margin-left: 14px;
}
.matrixblock + .matrixblock[data-type="sectionBlock"] {
margin-top: 30px;
}
.matrixblock[data-type="sectionBlock"] ~ .matrixblock:not([data-type="sectionBlock"])::before {
background: #DFE5EA;
@croxton
croxton / circle.svg
Last active December 13, 2023 01:10
Passing parameters to a SVG when used as an object, while still being able to use as an image.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@croxton
croxton / base.twig
Last active December 4, 2023 02:35
Sprig / htmx full page transitions
{# _layouts/base.twig #}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ entry.title }}</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
@croxton
croxton / components.js
Last active November 30, 2023 18:36
htmx components extension
/**
* htmx components extension
*
* @author Mark Croxton, Hallmark Design
*
* How to use:
*
* 1. Include this script in your page, after htmx.js
* <script src="/path/to/ext/components.js" defer></script>
*
@croxton
croxton / uk-mainland-postcodes-regex.txt
Last active November 13, 2023 11:44
Regex to match UK mainland postcodes (i.e. excluding UK Highlands and Islands postcodes)
Exclude UK Highland and Islands Regex:
^ # Start of line
(?! # Exclude the following
IV([1-9]|[1-4][0-9]|5[0-6])[\s]*([\d][A-Za-z]{2}) # Inverness IV1 - IV56
| # or
BT[0-9]{1,2}[\s]*([\d][A-Za-z]{2}) # Belfast BT
|
GY[0-9]{1,2}[\s]*([\d][A-Za-z]{2}) # Guernsey GY
|
@croxton
croxton / htmx-metadata.js
Created October 13, 2022 13:46
Htmx swapping metadata
htmx.on('htmx:beforeSwap', (htmxEvent) => {
let incomingDOM = new DOMParser().parseFromString(htmxEvent.detail.xhr.response, "text/html");
// Transpose <meta> data, page-specific <link> tags and JSON-LD structured data
// Note that hx-boost automatically swaps the <title> tag
let selector = "head > meta:not([data-revision]), head *[rel=\"canonical\"], head *[rel=\"alternate\"], body script[type=\"application/ld+json\"]";
document.querySelectorAll(selector).forEach((e) => {
e.parentNode.removeChild(e);
});
incomingDOM.querySelectorAll(selector).forEach((e) => {
if (e.tagName === 'SCRIPT') {
@croxton
croxton / pipeline.yml
Last active July 13, 2023 01:00
Buddy.works Craft 3 Atomic deployments
- pipeline: "Build and deploy to [environment]"
trigger_mode: "MANUAL"
ref_name: "master"
actions:
- action: "Execute: gulp build"
type: "BUILD"
docker_image_name: "library/node"
docker_image_tag: "6"
execute_commands:
- "npm install"