tailwind-hyperclay 0.1.0 → 0.1.1

package/PLAN.md

@@ -0,0 +1,86 @@
+# Plan: Integrate tailwind-hyperclay into ./hyperclay
+
+## Overview
+When a user saves an HTML file that references `https://hyperclay.com/tailwindcss/{siteName}.css`, automatically generate the CSS file using Tailwind v4.
+
+## Steps
+
+### 1. Install dependency
+```bash
+cd ./hyperclay
+npm install tailwind-hyperclay
+```
+
+### 2. Add static route for generated CSS
+In `hey.js`, add static serving for tailwind CSS files:
+```js
+'/tailwindcss' → public-assets/tailwindcss
+```
+
+### 3. Create the directory
+```bash
+mkdir -p ./hyperclay/public-assets/tailwindcss
+```
+
+### 4. Hook into saveHTML
+In `server-lib/state-actions.js`, after HTML is saved (~line 703):
+
+```js
+import { compileTailwind, hasTailwindLink } from 'tailwind-hyperclay';
+
+// After successful save...
+if (hasTailwindLink(formattedHtml, node.name)) {
+  const css = await compileTailwind(formattedHtml);
+  await dx('public-assets/tailwindcss').createFileOverwrite(`${node.name}.css`, css);
+}
+```
+
+### 5. Hook into uploadSyncFile
+In `server-lib/sync-actions.js`, after file is written (~line 311):
+
+```js
+import { compileTailwind, hasTailwindLink } from 'tailwind-hyperclay';
+
+// After file write...
+if (hasTailwindLink(content, siteName)) {
+  const css = await compileTailwind(content);
+  await dx('public-assets/tailwindcss').createFileOverwrite(`${siteName}.css`, css);
+}
+```
+
+### 6. Hook into restoreBackup
+In `server-lib/state-actions.js`, after backup is restored (~line 909):
+
+```js
+// After restore...
+if (hasTailwindLink(html, siteName)) {
+  const css = await compileTailwind(html);
+  await dx('public-assets/tailwindcss').createFileOverwrite(`${siteName}.css`, css);
+}
+```
+
+### 7. Hook into copySite
+In `server-lib/state-actions.js`, modify the copy logic (~line 399):
+
+```js
+import { compileTailwind, hasAnyTailwindLink, replaceTailwindLink } from 'tailwind-hyperclay';
+
+// Before writing the file, update the tailwind link to use new name
+let contentToWrite = siteContent;
+if (hasAnyTailwindLink(siteContent)) {
+  contentToWrite = replaceTailwindLink(siteContent, newSiteName);
+  const css = await compileTailwind(contentToWrite);
+  await dx('public-assets/tailwindcss').createFileOverwrite(`${newSiteName}.css`, css);
+}
+
+await dx('sites').createFileOverwrite(`${newSiteName}.html`, contentToWrite);
+```
+
+## Files to modify
+1. `hyperclay/package.json` - add dependency
+2. `hyperclay/hey.js` - add static route (~line 185)
+3. `hyperclay/server-lib/state-actions.js` - hooks at:
+   - `saveHTML` (~line 703)
+   - `copySite` (~line 399)
+   - `restoreBackup` (~line 909)
+4. `hyperclay/server-lib/sync-actions.js` - add post-sync hook (~line 311)

package/index.js

@@ -84,3 +84,14 @@ export function hasTailwindLink(html, appName) {
   const pattern = new RegExp(`https://hyperclay\\.com/tailwindcss/${appName}\\.css`);
   return pattern.test(html);
 }
+
+export function hasAnyTailwindLink(html) {
+  return /https:\/\/hyperclay\.com\/tailwindcss\/[^"']+\.css/.test(html);
+}
+
+export function replaceTailwindLink(html, newName) {
+  return html.replace(
+    /https:\/\/hyperclay\.com\/tailwindcss\/[^"']+\.css/g,
+    `https://hyperclay.com/tailwindcss/${newName}.css`
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-hyperclay",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "On-save Tailwind CSS generator for Hyperclay",
   "type": "module",
   "main": "index.js",
@@ -11,7 +11,11 @@
     "test": "node test/test.js",
     "release": "./scripts/release.sh"
   },
-  "keywords": ["tailwind", "hyperclay", "css"],
+  "keywords": [
+    "tailwind",
+    "hyperclay",
+    "css"
+  ],
   "author": "",
   "license": "MIT",
   "dependencies": {