Skip to content

Commit acb11e3

Browse files
actions-useractions-user
committed
chore: build pages
1 parent c59f3b0 commit acb11e3

10 files changed

+1196
-0
lines changed

‎docs/.nojekyll

Whitespace-only changes.

‎docs/CNAME

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
css-inline.org

‎docs/README.md

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# css-inline
2+
3+
## @css-inline/css-inline-wasm
4+
5+
[<img alt="build status" src="https://img.shields.io/github/actions/workflow/status/Stranger6667/css-inline/build.yml?style=flat-square&labelColor=555555&logo=github" height="20">](https://github.com/Stranger6667/css-inline/actions/workflows/build.yml)
6+
[<img alt="npm" src="https://img.shields.io/npm/v/@css-inline/css-inline-wasm.svg?style=flat-square" height="20">](https://www.npmjs.com/package/@css-inline/css-inline-wasm)
7+
[<img alt="codecov.io" src="https://img.shields.io/codecov/c/gh/Stranger6667/css-inline?logo=codecov&style=flat-square&token=tOzvV4kDY0" height="20">](https://app.codecov.io/github/Stranger6667/css-inline)
8+
[<img alt="gitter" src="https://img.shields.io/gitter/room/Stranger6667/css-inline?style=flat-square" height="20">](https://gitter.im/Stranger6667/css-inline)
9+
10+
`css-inline` is a high-performance library for inlining CSS into HTML 'style' attributes.
11+
12+
This is the **WebAssembly** module for [`css-inline`](https://github.com/Stranger6667/css-inline)
13+
14+
## Playground
15+
16+
If you'd like to try `css-inline`, you can check the WebAssembly-powered [playground](https://css-inline.org/) to see the results instantly.
17+
18+
## Restrictions
19+
20+
WASM module currently lacks support for fetching stylesheets from network or filesystem.
21+
22+
## License
23+
24+
This project is licensed under the terms of the [MIT license](https://opensource.org/licenses/MIT).

‎docs/index.d.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// Generated by dts-bundle-generator v9.1.0
2+
3+
/* tslint:disable */
4+
/* eslint-disable */
5+
export interface InlineOptions {
6+
inlineStyleTags?: boolean;
7+
keepStyleTags?: boolean;
8+
keepLinkTags?: boolean;
9+
baseUrl?: string;
10+
loadRemoteStylesheets?: boolean;
11+
extraCss?: string;
12+
preallocateNodeCapacity?: number;
13+
}
14+
export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
15+
/**
16+
* Initialize Wasm module
17+
* @param module_or_path WebAssembly Module or .wasm url
18+
*
19+
*/
20+
export declare const initWasm: (module_or_path: Promise<InitInput> | InitInput) => Promise<void>;
21+
export declare function inline(html: string, options?: InlineOptions): string;
22+
export declare function inlineFragment(html: string, css: string, options?: InlineOptions): string;
23+
export declare function version(): string;
24+
25+
export {};

‎docs/index.html

+224
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta
7+
name="description"
8+
content="Inline CSS directly within HTML tags. Try the WebAssembly-powered playground to see instant results."
9+
/>
10+
<meta
11+
name="keywords"
12+
content="CSS inlining, WebAssembly, browser playground, Rust, Python, Ruby, JavaScript, style attribute, HTML, CSS"
13+
/>
14+
<title>CSS Inline | High-performance CSS inlining</title>
15+
<link
16+
rel="preload"
17+
as="fetch"
18+
type="application/wasm"
19+
href="./index_bg.wasm"
20+
crossorigin
21+
/>
22+
<script src="./index.min.js"></script>
23+
<script src="https://cdn.tailwindcss.com"></script>
24+
<script>
25+
document.addEventListener("DOMContentLoaded", () => {
26+
cssInline.initWasm(fetch("./index_bg.wasm")).then(() => {
27+
const versionElement = document.getElementById(
28+
"css-inline-package-version",
29+
);
30+
if (versionElement) {
31+
versionElement.textContent = `css-inline ${cssInline.version()}`;
32+
}
33+
const submitButton = document.getElementById("css-inline-submit");
34+
const html = document.getElementById("css-inline-html");
35+
const inlinedCodeElement =
36+
document.getElementById("css-inline-result");
37+
const inlinedCodeContainer = document.getElementById(
38+
"css-inline-result-container",
39+
);
40+
const inlinedErrorContainer = document.getElementById(
41+
"css-inline-error-container",
42+
);
43+
const inlinedErrorText = document.getElementById(
44+
"css-inline-error-text",
45+
);
46+
const outputSizeSpan = document.getElementById(
47+
"css-inline-output-size",
48+
);
49+
const callTimeSpan = document.getElementById("css-inline-call-time");
50+
51+
submitButton.addEventListener("click", function () {
52+
try {
53+
const startTime = performance.now();
54+
const inlinedHtml = cssInline.inline(html.value);
55+
const durationMs = (performance.now() - startTime).toFixed(2);
56+
57+
const blob = new Blob([inlinedHtml], { type: "text/html" });
58+
const sizeInBytes = blob.size;
59+
let sizeText;
60+
61+
if (sizeInBytes < 1024) {
62+
sizeText = `${sizeInBytes} bytes`;
63+
} else if (sizeInBytes < 1048576) {
64+
sizeText = `${(sizeInBytes / 1024).toFixed(2)} KB`;
65+
} else {
66+
sizeText = `${(sizeInBytes / 1048576).toFixed(2)} MB`;
67+
}
68+
outputSizeSpan.textContent = sizeText;
69+
callTimeSpan.textContent = `${durationMs} ms`;
70+
inlinedCodeElement.textContent = inlinedHtml;
71+
inlinedErrorContainer.classList.add("hidden");
72+
inlinedCodeContainer.classList.remove("hidden");
73+
} catch (error) {
74+
inlinedCodeContainer.classList.add("hidden");
75+
inlinedErrorContainer.classList.remove("hidden");
76+
inlinedErrorText.textContent = error;
77+
}
78+
});
79+
});
80+
});
81+
</script>
82+
</head>
83+
<body>
84+
<header class="bg-white">
85+
<nav
86+
class="mx-auto flex items-center justify-between p-6"
87+
aria-label="Global"
88+
>
89+
<h1 class="text-4xl font-semibold leading-6 text-gray-900">
90+
CSS-Inline
91+
</h1>
92+
<div>
93+
<a
94+
href="https://github.com/Stranger6667/css-inline"
95+
class="text-gray-400 hover:text-gray-500"
96+
target="_blank"
97+
>
98+
<span class="sr-only">GitHub</span>
99+
<svg
100+
class="h-10 w-10"
101+
fill="currentColor"
102+
viewBox="0 0 24 24"
103+
aria-hidden="true"
104+
>
105+
<path
106+
fill-rule="evenodd"
107+
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
108+
clip-rule="evenodd"
109+
/>
110+
</svg>
111+
</a>
112+
</div>
113+
</nav>
114+
</header>
115+
116+
<div class="mx-6">
117+
<p class="mt-6 text-2xl leading-8 text-gray-800">
118+
High-performance library for inlining CSS into HTML 'style' attributes
119+
</p>
120+
<p class="mt-2 text-md leading-8 text-gray-900">
121+
css-inline leverages Mozilla's Servo project components and works with
122+
Rust, Python, Ruby, JavaScript, and C. The playground below is powered
123+
by WebAssembly allows direct browser interaction with the library. Edit
124+
the HTML in the text area and click "Inline" to view the results
125+
instantly.
126+
</p>
127+
</div>
128+
129+
<div class="mx-6 my-4">
130+
<label
131+
for="css-inline-html"
132+
class="block md font-medium leading-6 text-gray-900"
133+
></label>
134+
<div class="mt-2">
135+
<textarea
136+
rows="8"
137+
name="html"
138+
id="css-inline-html"
139+
class="block bg-gray-100 w-full rounded-md border-0 p-3 text-gray-900 shadow-sm font-mono ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
140+
>
141+
<html>
142+
<head>
143+
<style>h1 { color:blue; }</style>
144+
</head>
145+
<body>
146+
<h1>Big Text</h1>
147+
</body>
148+
</html></textarea
149+
>
150+
</div>
151+
<button
152+
type="submit"
153+
id="css-inline-submit"
154+
class="mt-4 inline-flex items-center rounded-md bg-indigo-600 px-8 py-3 text-md font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
155+
>
156+
Inline
157+
</button>
158+
</div>
159+
160+
<div id="css-inline-error-container" class="hidden">
161+
<div class="mx-6 mb-4 rounded-md bg-red-100 p-4">
162+
<div class="flex">
163+
<div class="ml-3">
164+
<p class="text-md font-medium text-red-800">
165+
<strong>Error!</strong> <span id="css-inline-error-text"></span>
166+
</p>
167+
</div>
168+
</div>
169+
</div>
170+
</div>
171+
172+
<div id="css-inline-result-container" class="hidden">
173+
<div class="mx-6 mb-4 rounded-md bg-green-100 p-4">
174+
<div class="flex">
175+
<div class="ml-3">
176+
<p class="text-md font-medium text-green-800">
177+
<strong>Success!</strong> Below is your HTML with inlined CSS
178+
styles
179+
</p>
180+
</div>
181+
</div>
182+
</div>
183+
<div
184+
class="mx-6 block bg-gray-100 rounded-md border-0 p-3 text-gray-900 shadow-sm font-mono ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
185+
>
186+
<pre
187+
id="css-inline-result"
188+
class="overflow-x-auto whitespace-pre-wrap"
189+
></pre>
190+
</div>
191+
<div class="mx-6 flex justify-end">
192+
<p class="m-2 text-md leading-8 text-black">
193+
<strong><span id="css-inline-output-size">124 Kb</span></strong> in
194+
<strong><span id="css-inline-call-time">2.1 ms</span></strong>
195+
</p>
196+
</div>
197+
</div>
198+
199+
<footer class="bg-white">
200+
<hr />
201+
<div class="px-6 py-6 md:flex md:items-center md:justify-between">
202+
<div class="mt-4 md:order-1 md:mt-0">
203+
<p class="text-center text-md leading-5 text-gray-500">
204+
© css-inline.org by
205+
<a
206+
href="https://github.com/Stranger6667"
207+
class="text-blue-400 hover:text-blue-500"
208+
target="_blank"
209+
>Dmitry Dygalo</a
210+
>
211+
</p>
212+
</div>
213+
<div class="mt-4 md:order-1 md:mt-0">
214+
<p
215+
id="css-inline-package-version"
216+
class="text-center text-md leading-5 text-gray-500"
217+
>
218+
...
219+
</p>
220+
</div>
221+
</div>
222+
</footer>
223+
</body>
224+
</html>

0 commit comments

Comments
 (0)