Skip to content

Instantly share code, notes, and snippets.

View RickCogley's full-sized avatar
👻
Slowly but surely implementing ISO 27001 ISMS

Rick Cogley RickCogley

👻
Slowly but surely implementing ISO 27001 ISMS
70 followers · 245 following
View GitHub Profile
@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
@RickCogley
RickCogley / index.html
Created April 21, 2025 01:47
Blog nav test
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - eSolia Pro Blog</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)">
@RickCogley
RickCogley / body-start-and-top-nav.html
Created April 4, 2025 08:49
Top nav test
<body class="flex h-full bg-zinc-50 dark:bg-black">
<!-- Container start -->
<div class="flex w-full">
<div class="fixed inset-0 flex justify-center sm:px-8">
<div class="flex w-full max-w-7xl lg:px-8">
<div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20"></div>
</div>
</div>
<div class="relative flex w-full flex-col">
<!-- ===== top-nav.vto TEMPLATE START ===== -->