git.stevedylan.dev

chore: updated to use tailwindcss for site bfacbcd5

Steve · 2025-09-20 15:45 8 file(s) · +51 −191

.gitignore +1 −0

# output
out
dist
site-dist
*.tgz

# code coverage

bun.lock +6 −0

      "name": "idunn",
      "devDependencies": {
        "@types/bun": "latest",
        "bun-plugin-tailwind": "^0.0.15",
        "tailwindcss": "^4.1.13",
      },
      "peerDependencies": {
        "typescript": "^5",


    "@types/react": ["@types/react@19.1.13", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ=="],

    "bun-plugin-tailwind": ["bun-plugin-tailwind@0.0.15", "", { "peerDependencies": { "typescript": "^5.0.0" } }, "sha512-qtAXMNGG4R0UGGI8zWrqm2B7BdXqx48vunJXBPzfDOHPA5WkRUZdTSbE7TFwO4jLhYqSE23YMWsM9NhE6ovobw=="],

    "bun-types": ["bun-types@1.2.22", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-hwaAu8tct/Zn6Zft4U9BsZcXkYomzpHJX28ofvx7k0Zz2HNz54n1n+tDgxoWFGB4PcFvJXJQloPhaV2eP3Q6EA=="],

    "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],

    "tailwindcss": ["tailwindcss@4.1.13", "", {}, "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w=="],

    "typescript": ["typescript@5.9.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A=="],


bunfig.toml (added) +2 −0

	1	+	[serve.static]
	2	+	plugins = ["bun-plugin-tailwind"]

package.json +3 −1

		"components"
	],
	"devDependencies": {
		"@types/bun": "latest"
		"@types/bun": "latest",
		"bun-plugin-tailwind": "^0.0.15",
		"tailwindcss": "^4.1.13"
	},
	"peerDependencies": {
		"typescript": "^5"

scripts/deploy-site.ts +24 −21

import { $ } from "bun";
// Copy components folder from src to site
await $`cp -r src/components site/components`;

// Update script tag in HTML file to use local components path
const htmlContent = await Bun.file("site/index.html").text();
const updatedHtml = htmlContent.replace(
	`<script src="../src/components/connect-wallet.js"></script>`,
	`<script src="components/connect-wallet.js"></script>`,
);
await Bun.write("site/index.html", updatedHtml);
// Clean up old dist
await $`rm -rf site-dist`;
// Create new dist
await $`cp -r site site-dist`;
// Compile tailwindcss
await $`bunx @tailwindcss/cli -i ./site/input.css -o ./site-dist/output.css `;
// Copy components over
await $`cp -r src/components site-dist/components`;

// Read index file
const htmlContent = await Bun.file("site-dist/index.html").text();
// Update script tags and css link
const updatedHtml = htmlContent
	.replace(
		`<script src="../src/components/connect-wallet.js"></script>`,
		`<script src="components/connect-wallet.js"></script>`,
	)
	.replace(
		`<link rel="stylesheet" href="tailwindcss" />`,
		`<link rel="stylesheet" href="output.css" />`,
	);
// Write file
await Bun.write("site-dist/index.html", updatedHtml);

// Run orbiter update
await $`orbiter update -d norns site`;

// Remove components folder from site
await $`rm -rf site/components`;

// Change script tag back to original path
const finalHtmlContent = await Bun.file("site/index.html").text();
const restoredHtml = finalHtmlContent.replace(
	`<script src="components/connect-wallet.js"></script>`,
	`<script src="../src/components/connect-wallet.js"></script>`,
);
await Bun.write("site/index.html", restoredHtml);
await $`orbiter update -d norns site-dist`;

site/index.html +14 −14

<!DOCTYPE html>
<html lang="en">
<html lang="en" class="bg-[#121113]">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" type="image/png" sizes="32x32" href="https://norns.so/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="https://norns.so/favicon-16x16.png">
    <link rel="manifest" href="https://norns.so/site.webmanifest">
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="tailwindcss" />
    <meta name="theme-color" content="#121113">
    <meta name="description" content="Interoperable web components for decentralized apps">


    <meta name="twitter:description" content="Interoperable web components for decentralized apps">
    <meta name="twitter:image" content="/og.png">
</head>
<body>
  <main>
  <div class="header">
    <img src="logo.svg" alt="norns logo" />
    <h1>norns</h1>
    <p>Interopable web components for decentralized applications</p>
    <a href="https://github.com/stevedylandev/norns" target="_blank" class="github-button">
      <svg class="github-icon" viewBox="0 0 24 24">
<body class="bg-[#121113] text-white font-mono min-h-screen w-full flex flex-col items-center justify-start">
  <main class="flex items-center flex-col py-8">
  <div class="flex flex-col items-center gap-4 mb-8 max-w-[300px]">
    <img src="logo.svg" alt="norns logo" class="w-40 h-40" />
    <h1 class="text-5xl">norns</h1>
    <p class="text-sm text-center">Interopable web components for decentralized applications</p>
    <a href="https://github.com/stevedylandev/norns" target="_blank" class="inline-flex items-center gap-2 bg-[#1e1e1e] text-white no-underline py-3 px-5 rounded-md text-sm mt-4 transition-colors duration-200 hover:bg-[#444]">
      <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
      </svg>
      stevedylandev/norns
    </a>
  </div>
  <div class="component-showcase">
    <div class="container">
  <div class="flex flex-col items-start gap-4">
    <div class="border border-white rounded-md sm:w-[400px] sm:h-[400px] h-[300px] w-[300px] flex items-center justify-center">
      <connect-wallet></connect-wallet>
    </div>
    <div class="component-label">connect-wallet</div>
    <div class="code-snippet">
    <div class="text-xl text-[#ccc]">connect-wallet</div>
    <div class="bg-[#1e1e1e] border border-[#333] rounded-sm p-2 text-xs text-[#888] mt-2 text-center">
      npx norns-ui@latest add connect-wallet
    </div>
  </div>

site/input.css (added) +1 −0

@import "tailwindcss";

site/styles.css (deleted) +0 −155

html {
	background: #121113;
}

body {
	color: white;
	font-family:
		ui-monospace, "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
		"Courier New", monospace;
	min-height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	padding: 0;
	margin: 0;
}

main {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 2rem 0 0 0;
}

.container {
	border: 1px solid white;
	border-radius: 5px;
	width: 400px;
	height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.component-showcase {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 1rem;
}

.component-label {
	font-size: 1.2rem;
	color: #ccc;
}

.code-snippet {
	background: #1e1e1e;
	border: 1px solid #333;
	border-radius: 3px;
	padding: 0.5rem;
	font-size: 0.8rem;
	color: #888;
	margin-top: 0.5rem;
	text-align: center;
}

.header {
	text-align: center;
	margin-bottom: 2rem;
	max-width: 300px;
}

.header h1 {
	font-size: 48px;
	margin-bottom: -10px;
}

.header img {
	width: 150px;
	height: 150px;
	margin-bottom: -35px;
}

.header p {
	font-size: 14px;
}

.github-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #1e1e1e;
	color: white;
	text-decoration: none;
	padding: 0.75rem 1.25rem;
	border-radius: 5px;
	font-size: 0.9rem;
	margin-top: 1rem;
	transition: background 0.2s;
}

.github-button:hover {
	background: #444;
}

.github-icon {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

@media (max-width: 768px) {
	.container {
		width: 300px;
		height: 300px;
	}

	.header h1 {
		font-size: 42px;
	}

	.header img {
		width: 120px;
		height: 120px;
		margin-bottom: -30px;
	}

	.header p {
		font-size: 12px;
	}

	.component-label {
		font-size: 1rem;
	}
}

@media (max-width: 480px) {
	.container {
		width: 300px;
		height: 300px;
	}

	.header {
		max-width: 250px;
	}

	.header h1 {
		margin-bottom: -5px;
	}

	.header img {
		margin-bottom: -25px;
	}

	.component-label {
		font-size: 0.9rem;
	}

	.code-snippet {
		font-size: 0.7rem;
	}
}

5	5		"name": "idunn",
6	6		"devDependencies": {
7	7		"@types/bun": "latest",
	8	+	"bun-plugin-tailwind": "^0.0.15",
	9	+	"tailwindcss": "^4.1.13",
8	10		},
9	11		"peerDependencies": {
10	12		"typescript": "^5",

18	20
19	21		"@types/react": ["@types/react@19.1.13", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ=="],
20	22
	23	+	"bun-plugin-tailwind": ["bun-plugin-tailwind@0.0.15", "", { "peerDependencies": { "typescript": "^5.0.0" } }, "sha512-qtAXMNGG4R0UGGI8zWrqm2B7BdXqx48vunJXBPzfDOHPA5WkRUZdTSbE7TFwO4jLhYqSE23YMWsM9NhE6ovobw=="],
	24	+
21	25		"bun-types": ["bun-types@1.2.22", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-hwaAu8tct/Zn6Zft4U9BsZcXkYomzpHJX28ofvx7k0Zz2HNz54n1n+tDgxoWFGB4PcFvJXJQloPhaV2eP3Q6EA=="],
22	26
23	27		"csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
	28	+
	29	+	"tailwindcss": ["tailwindcss@4.1.13", "", {}, "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w=="],
24	30
25	31		"typescript": ["typescript@5.9.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A=="],
26	32

22	22		"components"
23	23		],
24	24		"devDependencies": {
25		-	"@types/bun": "latest"
	25	+	"@types/bun": "latest",
	26	+	"bun-plugin-tailwind": "^0.0.15",
	27	+	"tailwindcss": "^4.1.13"
26	28		},
27	29		"peerDependencies": {
28	30		"typescript": "^5"

1	1		import { $ } from "bun";
2		-	// Copy components folder from src to site
3		-	await $`cp -r src/components site/components`;
4	2
5		-	// Update script tag in HTML file to use local components path
6		-	const htmlContent = await Bun.file("site/index.html").text();
7		-	const updatedHtml = htmlContent.replace(
8		-	`<script src="../src/components/connect-wallet.js"></script>`,
9		-	`<script src="components/connect-wallet.js"></script>`,
10		-	);
11		-	await Bun.write("site/index.html", updatedHtml);
	3	+	// Clean up old dist
	4	+	await $`rm -rf site-dist`;
	5	+	// Create new dist
	6	+	await $`cp -r site site-dist`;
	7	+	// Compile tailwindcss
	8	+	await $`bunx @tailwindcss/cli -i ./site/input.css -o ./site-dist/output.css `;
	9	+	// Copy components over
	10	+	await $`cp -r src/components site-dist/components`;
	11	+
	12	+	// Read index file
	13	+	const htmlContent = await Bun.file("site-dist/index.html").text();
	14	+	// Update script tags and css link
	15	+	const updatedHtml = htmlContent
	16	+	.replace(
	17	+	`<script src="../src/components/connect-wallet.js"></script>`,
	18	+	`<script src="components/connect-wallet.js"></script>`,
	19	+	)
	20	+	.replace(
	21	+	`<link rel="stylesheet" href="tailwindcss" />`,
	22	+	`<link rel="stylesheet" href="output.css" />`,
	23	+	);
	24	+	// Write file
	25	+	await Bun.write("site-dist/index.html", updatedHtml);
12	26
13	27		// Run orbiter update
14		-	await $`orbiter update -d norns site`;
15		-
16		-	// Remove components folder from site
17		-	await $`rm -rf site/components`;
18		-
19		-	// Change script tag back to original path
20		-	const finalHtmlContent = await Bun.file("site/index.html").text();
21		-	const restoredHtml = finalHtmlContent.replace(
22		-	`<script src="components/connect-wallet.js"></script>`,
23		-	`<script src="../src/components/connect-wallet.js"></script>`,
24		-	);
25		-	await Bun.write("site/index.html", restoredHtml);
	28	+	await $`orbiter update -d norns site-dist`;

1	1		<!DOCTYPE html>
2		-	<html lang="en">
	2	+	<html lang="en" class="bg-[#121113]">
3	3		<head>
4	4		<meta charset="UTF-8">
5	5		<meta name="viewport" content="width=device-width, initial-scale=1.0">

8	8		<link rel="icon" type="image/png" sizes="32x32" href="https://norns.so/favicon-32x32.png">
9	9		<link rel="icon" type="image/png" sizes="16x16" href="https://norns.so/favicon-16x16.png">
10	10		<link rel="manifest" href="https://norns.so/site.webmanifest">
11		-	<link rel="stylesheet" href="styles.css" />
	11	+	<link rel="stylesheet" href="tailwindcss" />
12	12		<meta name="theme-color" content="#121113">
13	13		<meta name="description" content="Interoperable web components for decentralized apps">
14	14

27	27		<meta name="twitter:description" content="Interoperable web components for decentralized apps">
28	28		<meta name="twitter:image" content="/og.png">
29	29		</head>
30		-	<body>
31		-	<main>
32		-	<div class="header">
33		-	<img src="logo.svg" alt="norns logo" />
34		-	<h1>norns</h1>
35		-	<p>Interopable web components for decentralized applications</p>
36		-	<a href="https://github.com/stevedylandev/norns" target="_blank" class="github-button">
37		-	<svg class="github-icon" viewBox="0 0 24 24">
	30	+	<body class="bg-[#121113] text-white font-mono min-h-screen w-full flex flex-col items-center justify-start">
	31	+	<main class="flex items-center flex-col py-8">
	32	+	<div class="flex flex-col items-center gap-4 mb-8 max-w-[300px]">
	33	+	<img src="logo.svg" alt="norns logo" class="w-40 h-40" />
	34	+	<h1 class="text-5xl">norns</h1>
	35	+	<p class="text-sm text-center">Interopable web components for decentralized applications</p>
	36	+	<a href="https://github.com/stevedylandev/norns" target="_blank" class="inline-flex items-center gap-2 bg-[#1e1e1e] text-white no-underline py-3 px-5 rounded-md text-sm mt-4 transition-colors duration-200 hover:bg-[#444]">
	37	+	<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
38	38		<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
39	39		</svg>
40	40		stevedylandev/norns
41	41		</a>
42	42		</div>
43		-	<div class="component-showcase">
44		-	<div class="container">
	43	+	<div class="flex flex-col items-start gap-4">
	44	+	<div class="border border-white rounded-md sm:w-[400px] sm:h-[400px] h-[300px] w-[300px] flex items-center justify-center">
45	45		<connect-wallet></connect-wallet>
46	46		</div>
47		-	<div class="component-label">connect-wallet</div>
48		-	<div class="code-snippet">
	47	+	<div class="text-xl text-[#ccc]">connect-wallet</div>
	48	+	<div class="bg-[#1e1e1e] border border-[#333] rounded-sm p-2 text-xs text-[#888] mt-2 text-center">
49	49		npx norns-ui@latest add connect-wallet
50	50		</div>
51	51		</div>

1	-	html {
2	-	background: #121113;
3	-	}
4	-
5	-	body {
6	-	color: white;
7	-	font-family:
8	-	ui-monospace, "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
9	-	"Courier New", monospace;
10	-	min-height: 100vh;
11	-	width: 100%;
12	-	display: flex;
13	-	flex-direction: column;
14	-	align-items: center;
15	-	justify-content: start;
16	-	padding: 0;
17	-	margin: 0;
18	-	}
19	-
20	-	main {
21	-	display: flex;
22	-	align-items: center;
23	-	flex-direction: column;
24	-	padding: 2rem 0 0 0;
25	-	}
26	-
27	-	.container {
28	-	border: 1px solid white;
29	-	border-radius: 5px;
30	-	width: 400px;
31	-	height: 400px;
32	-	display: flex;
33	-	align-items: center;
34	-	justify-content: center;
35	-	}
36	-
37	-	.component-showcase {
38	-	display: flex;
39	-	flex-direction: column;
40	-	align-items: start;
41	-	gap: 1rem;
42	-	}
43	-
44	-	.component-label {
45	-	font-size: 1.2rem;
46	-	color: #ccc;
47	-	}
48	-
49	-	.code-snippet {
50	-	background: #1e1e1e;
51	-	border: 1px solid #333;
52	-	border-radius: 3px;
53	-	padding: 0.5rem;
54	-	font-size: 0.8rem;
55	-	color: #888;
56	-	margin-top: 0.5rem;
57	-	text-align: center;
58	-	}
59	-
60	-	.header {
61	-	text-align: center;
62	-	margin-bottom: 2rem;
63	-	max-width: 300px;
64	-	}
65	-
66	-	.header h1 {
67	-	font-size: 48px;
68	-	margin-bottom: -10px;
69	-	}
70	-
71	-	.header img {
72	-	width: 150px;
73	-	height: 150px;
74	-	margin-bottom: -35px;
75	-	}
76	-
77	-	.header p {
78	-	font-size: 14px;
79	-	}
80	-
81	-	.github-button {
82	-	display: inline-flex;
83	-	align-items: center;
84	-	gap: 0.5rem;
85	-	background: #1e1e1e;
86	-	color: white;
87	-	text-decoration: none;
88	-	padding: 0.75rem 1.25rem;
89	-	border-radius: 5px;
90	-	font-size: 0.9rem;
91	-	margin-top: 1rem;
92	-	transition: background 0.2s;
93	-	}
94	-
95	-	.github-button:hover {
96	-	background: #444;
97	-	}
98	-
99	-	.github-icon {
100	-	width: 16px;
101	-	height: 16px;
102	-	fill: currentColor;
103	-	}
104	-
105	-	@media (max-width: 768px) {
106	-	.container {
107	-	width: 300px;
108	-	height: 300px;
109	-	}
110	-
111	-	.header h1 {
112	-	font-size: 42px;
113	-	}
114	-
115	-	.header img {
116	-	width: 120px;
117	-	height: 120px;
118	-	margin-bottom: -30px;
119	-	}
120	-
121	-	.header p {
122	-	font-size: 12px;
123	-	}
124	-
125	-	.component-label {
126	-	font-size: 1rem;
127	-	}
128	-	}
129	-
130	-	@media (max-width: 480px) {
131	-	.container {
132	-	width: 300px;
133	-	height: 300px;
134	-	}
135	-
136	-	.header {
137	-	max-width: 250px;
138	-	}
139	-
140	-	.header h1 {
141	-	margin-bottom: -5px;
142	-	}
143	-
144	-	.header img {
145	-	margin-bottom: -25px;
146	-	}
147	-
148	-	.component-label {
149	-	font-size: 0.9rem;
150	-	}
151	-
152	-	.code-snippet {
153	-	font-size: 0.7rem;
154	-	}
155	-	}