Skip to content

Instantly share code, notes, and snippets.

View RickCogley's full-sized avatar
😤
Standardizing internal documentation format

Rick Cogley RickCogley

😤
Standardizing internal documentation format
82 followers · 260 following
View GitHub Profile
@RickCogley
RickCogley / 1. lume-cms-cloudflare-tunnel-alternative.md
Last active June 25, 2026 08:41
Hosting Lume CMS behind Cloudflare Access + Tunnel (a Cloudflare-native alternative)

Hosting Lume CMS behind Cloudflare Access + Tunnel (a Cloudflare-native alternative)

A community write-up of an alternative way to expose Lume CMS on a VPS, for teams already using Cloudflare.

The official guide (Lume CMS → Deployment → VPS, lumeland/cms-deploy) sets up Caddy as a public HTTPS reverse proxy (ports 80/443), a DNS A record → your server IP, the CMS as a systemd service, and username/password basic auth in

@RickCogley
RickCogley / 00. Readme.md
Last active June 17, 2025 01:26
Awesome .gitmessage templates!

Awesome .gitmessage Templates!

In trying to figure out my own template for a .gitmessage template, I've collected up a couple of examples here.

It can be set with:

git config --global commit.template ~/.gitmessage

... and many git clients will pick it up and use it.

@RickCogley
RickCogley / 1. Readme.md
Last active May 26, 2025 11:43
Tailwind v4.x Component Layer and Design Tokens

In tailwindcss v4, instead of using @apply in @layer components, the recommendation is to use tailwind variables like:

@layer components {
  .card {
    background-color: var(--color-white);
    border-radius: var(--rounded-lg);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-xl);
 }
@RickCogley
RickCogley / main.js
Last active May 22, 2025 06:48
eSolia new site main.js for refactoring
// Load this first
(function() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (/windows phone/i.test(userAgent)) {
document.body.classList.add('os-windows-phone');
} else if (/android/i.test(userAgent)) {
document.body.classList.add('os-android');
} else if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
document.body.classList.add('os-ios');
@RickCogley
RickCogley / 1. index.html
Last active May 21, 2025 05:30
Pagefind subsection search test
<!DOCTYPE html>
<html lang="en" class="bg-sky-600"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Top - Comp. Overview Top</title>
<meta name="supported-color-schemes" content="light dark">
<meta name="theme-color" content="hsl(33.38 100% 70%)" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="hsl(237.79 38% 28.000000000000004%)" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="/pagefind/pagefind-ui.css"><link rel="stylesheet" href="/styles.css?cb=1747793055952" type="text/css">
@RickCogley
RickCogley / 1. readme.md
Last active May 15, 2025 00:15
Lume v3 default tags exploration

If I add a default keywords string to the metas settings, say in src/_data.yml like this:

...
metas:
    lang: en
    ...
    default_keywords: [aaaaa,bbbbb,ccccc]
    keywords: "=tags || =default_keywords"
 ...
@RickCogley
RickCogley / 1. readme.md
Last active May 13, 2025 17:22
Vento test - random image from a list of images in yml data

This Vento template engine partial works as of Lume v3.0.1. Vento allows you to use javascript code by adding a greater-than sign after the opening curly brackets, like {{> code here}}.

  • An index.yml is calling home.vto, which is in turn calling this top-top-hero-ticker-image.vto partial among others. The index.yml has an array of images hero.images which is referenced here. The site is bilingual, so there is a Japanese (default lang) src/index.yml and an English src/en/index.yml.
  • The {{> ... const randomIndex sets up a random index number based on the length of the hero.images array.
  • The randomImage is then used as the index number to get the info from that image, so it can be referenced directly.
  • Defaults are set as fallbacks.
  • The img tag references the src and alt from the data, of the selected random image.

Every build of Lume, a different image is thus used, adding a little dynamism to the site.

@RickCogley
RickCogley / 1. readme.md
Last active May 8, 2025 23:50
Vento test - randomize gradient

This Vento template engine partial works in Lume v3.0.0. Vento allows you to use javascript code by adding a greater-than sign after the opening curly brackets, like {{> code here}}.

  • An index.yml is calling home.vto, which is in turn calling this top-projects.vto partial among others. The index.yml has the data like {{ recentprojects.subtitle }} which is referenced here.
  • The {{> ... const gradientOptions sets up an object that is picked from randomly in the code under it.
  • The for loop is referencing projectslast which is fetched from an API, and stored in src/_data/projectslast.json. This is a list of completed projects and dates.
  • The for loop uses a custom shuffle function loaded in _config.ts. This randomizes the order of cards. Some people might hate that they become slightly out of chrolological order, but I like the idea of randomly listing the last three projects, in any order, every site build.
  • The for loop checks lang, picking appropriate keys based on the page langua
@RickCogley
RickCogley / cheatsheet.md
Created May 4, 2025 00:53 — forked from t-mart/cheatsheet.md
Tailwind v4 Syntax Cheatsheet

Tailwind v4 Syntax Cheatsheet

Tailwind v4 has new syntax for arbitrary values, variants, properties, and more. Here's the cheatsheet that I would have wanted when I first started using it.

Terms Primer

  • Property: Indicates an aspect of the appearance or layout of an element, such as margin or color. Are set to a value.
  • Custom Property (or CSS Variables): A property that is user-defined
@RickCogley
RickCogley / tw-background-hex.md
Created April 29, 2025 01:49 — forked from guvener/tw-background-hex.md
Tailwind background colors HEX codes