johnfmorton

#!/usr/bin/env node

/**
 * Critical CSS Generator using Beasties
 *
 * This script fetches HTML from configured URLs and extracts critical CSS
 * using Beasties (a pure Node.js solution, no browser required).
 *
 * Usage:
 *   node scripts/generate-critical-css.mjs

johnfmorton

# Set up Beasties Critical CSS on this Craft + Vite project

You are an AI coding agent (Claude Code, Codex, Cursor, etc.) being asked to add Beasties-based Critical CSS generation to the Craft CMS + Vite repository you are currently running inside.

**Do not start changing files immediately.** This guide is interactive. You must first inspect the repository, then ask the developer the questions in the "Confirm With the Developer" section, then make the changes. If something does not match the assumptions in this document, surface it and ask before doing anything destructive.

Your goal at the end of this process:

1. Beasties generates one critical CSS file per unique template layout.
2. The files are written to `web/dist/criticalcss/` (or the project's equivalent webroot path).

johnfmorton

# the following function goes in your .zshrc file to add "gemma" to your command line
# see https://supergeekery.ddev.site/blog/running-googles-gemma-4-locally-on-macos-with-ollama
# and https://supergeekery.com/blog/upgrading-your-local-gemma-setup
# for more details
gemma() {
    setopt local_options no_monitor no_notify
    if ! curl -sf http://localhost:11434/ > /dev/null 2>&1; then
        echo "Starting Ollama service..."
        brew services start ollama
        while ! curl -sf http://localhost:11434/ > /dev/null 2>&1; do

johnfmorton

#!/bin/bash
# Usage: ./warm_cache.sh [SITEMAP_INDEX_URL] [DELAY_SECONDS]
# Example: ./warm_cache.sh "https://example.com/sitemap.xml" 1
#
# If no sitemap index URL is provided, a default is used.
DEFAULT_SITEMAP_INDEX_URL="https://example.com/sitemap.xml"
SITEMAP_INDEX_URL="${1:-$DEFAULT_SITEMAP_INDEX_URL}"

# Delay (in seconds) between each request. Default is 0 seconds if not provided.
DELAY="${2:-0}"

johnfmorton

/*
* Add hover effect showing alt tag of images
* with Squarespace 7.1 fluid image containers
* John F Morton - https://supergeekery.com
*/

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const imageContainers = document.querySelectorAll('.fluid-image-container.sqs-image-content')

johnfmorton

webimage_extra_packages:
  [
    gconf-service,
    libasound2,
    libatk1.0-0,
    libcairo2,
    libgconf-2-4,
    libgdk-pixbuf2.0-0,
    libgtk-3-0,
    libnspr4,

johnfmorton

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

johnfmorton

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

{
  "alignment": {
    "options": [
      "left",
      "center",
      "right"
    ]
  },
  "code": {
    "indentSequence": "  "

johnfmorton

<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) {