Lab

Code snippets I would like to save.

Wavy Hero from Aceternity

Vue port of a Aceternity React component.

Tailwind to UnoCSS

Bun script to convert TailwindUI classes to UnoCSS 'Windy' preset.

import { $ } from "bun";

// get the arguments passed to the script
const args = process.argv.slice(2);
// read in a file in the first argument
const fileContents = await $`cat ${args[0]}`.text();

const result = addTWToAllClassesAfterColon(fileContents);
// write the file to the same file with a TW before the extension
const filename = args[0].replace(/(\.[^/.]+)+$/, "") + "TW.vue";
await $`echo ${result} > ${filename}`;

// await $`echo ${result}`;
// to stdout:
await $`echo ${filename}`;

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const pseudoClasses = [
  "hover",
  "focus",
  "active",
  "visited",
  "link",
  "disabled",
  "checked",
  "first",
  "last",
  "odd",
  "even",
  "focus-visible",
  "focus-within",
];

function prependTW(className) {
  if (!className.trim()) {
    return className;
  }
  if (className.startsWith("-z-")) {
    return "tw-" + className.replace("-z-", "z--"); // change -z-10 to z--10
  }
  if (className.includes(":")) {
    const parts = className.split(":");
    return parts[0] + ":" + "tw-" + parts[1];
  }
  return "tw-" + className;
}

function transformClassString(classString) {
  const transformed = classString.split(/\s+/).map(prependTW).join(" ");
  return transformed.replace(/tw-''/g, "''"); // remove 'tw-' from empty strings
}

function transformVueDynamicClasses(classString) {
  const result = classString.replace(/'([^']*)'/g, function (match, group) {
    return `'${transformClassString(group)}'`; // Add quotes back
  });
  return `:class="[${result}]"`;
}

function addTWToAllClassesAfterColon(fileContents) {
  const result = fileContents.replace(
    /(class|:class)="([^"]*)"/g,
    function (match, attr, group) {
      if (attr === ":class" && group.includes("[") && group.includes("]")) {
        return transformVueDynamicClasses(group);
      } else {
        return `${attr}="${transformClassString(group)}"`;
      }
    }
  );
  return result;
}

Staggered List Transition

A Vue component for staggered list transitions using custom direction, duration, and start position.

Stagger
this
list