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