Skip to content

Commit 9ccbcde

Browse files
javierbytejavierbyte
committed
Fix title typo, remove unused .css, upgrade dependencies
1 parent a1c00c3 commit 9ccbcde

File tree

6 files changed

+727
-748
lines changed

6 files changed

+727
-748
lines changed

‎package-lock.json‎

Lines changed: 560 additions & 541 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,13 @@
2525
"author": "Javier Bórquez <hi@javier.xyz> (http://github.com/javierbyte)",
2626
"license": "CC0-1.0",
2727
"devDependencies": {
28-
"eslint": "^7.11.0",
28+
"eslint": "^7.32.0",
2929
"eslint-plugin-react": "^7.21.4",
3030
"gh-pages": "^3.2.3"
3131
},
3232
"dependencies": {
3333
"canvas-image-utils": "^2.0.2",
34-
"capsize": "^1.1.0",
34+
"capsize": "^2.0.0",
3535
"jbx": "^1.0.0",
3636
"lodash": "^4.17.20",
3737
"react": "^17.0.2",

‎public/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@
1010

1111
<meta
1212
name="description"
13-
content="This is a tool that can convert any image into a pure css image."
13+
content="Tool that can convert any image into a pure CSS image."
1414
/>
1515
<meta
1616
property="og:description"
17-
content="This is a tool that can convert any image into a pure css image."
17+
content="Tool that can convert any image into a pure CSS image."
1818
/>
1919

2020
<meta property="og:url" content="https://javier.xyz/img2css/" />

‎src/app.jsx‎

Lines changed: 163 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import tinycolor from "tinycolor2";
33
import _ from "lodash";
44

55
import {
6+
JBX,
67
HeaderH1,
78
Text,
89
Space,
9-
Box,
1010
A,
1111
Container,
1212
Dropzone,
@@ -132,185 +132,180 @@ function App() {
132132

133133
return (
134134
<Container>
135-
<Box padding={2}>
136-
<Space h={1} />
137-
138-
<HeaderH1
139-
style={{
140-
fontWeight: 900,
141-
display: "inline-block",
142-
width: "auto",
143-
padding: "6px",
144-
backgroundColor: "var(--accent-color)",
145-
}}>
146-
img2css
147-
</HeaderH1>
148-
149-
<Space h={1} />
150-
<Text>
151-
This is a tool that can convert any image into a pure css image.
152-
</Text>
153-
<Space h={2} />
154-
155-
<Dropzone
156-
onDrop={onFileSelected}
157-
onDragOver={onDragOver}
158-
onDragEnter={onDragOver}>
159-
{loadingImage ? (
160-
<Text>Processing...</Text>
161-
) : (
162-
<div>
163-
<Text>Drop an image here</Text>
164-
<Text>or click to select</Text>
165-
</div>
166-
)}
167-
<input
168-
type="file"
169-
onChange={onFileSelected}
170-
multiple
171-
accept="image/*"
172-
aria-label="Drop an image here, or click to select"
173-
/>
174-
</Dropzone>
175-
176-
<Space h={2} />
177-
<Text>
178-
I also made a per-pixel animation experiment, see{" "}
179-
<A href="https://javier.xyz/morphin/">morphin</A>.
180-
</Text>
181-
182-
{rgbMatrix && (
183-
<Fragment>
184-
<Space h={2} />
185-
<Tabs>
186-
<Inline>
187-
<Tab
188-
active={outputType === "SHADOW"}
189-
key={"SHADOW"}
190-
onClick={() => {
191-
outputTypeSet("SHADOW");
192-
}}>
193-
<Text>{"Pure CSS"}</Text>
194-
</Tab>
195-
<Tab
196-
active={outputType === "BASE64"}
197-
key={"BASE64"}
198-
onClick={() => {
199-
outputTypeSet("BASE64");
200-
}}>
201-
<Text>{"Base64"}</Text>
202-
</Tab>
203-
</Inline>
204-
</Tabs>
205-
<Space h={1} />
206-
207-
{outputType === "BASE64" && (
208-
<Fragment>
209-
<Text>
210-
<strong>The result (base64).</strong>{" "}
211-
{
212-
"This is your image tag a base64 output. The entire image file is embedded inside the `<img>` tag using base64, so no need external hosting is needed."
213-
}
214-
</Text>
215-
<Space h={1} />
216-
217-
<img
218-
src={base64Data}
219-
style={{ maxWidth: "100%", height: "auto", display: "block" }}
220-
/>
221-
222-
<Space h={1} />
223-
224-
<Textarea
225-
onFocus={handleFocus}
226-
onChange={() => {}}
227-
className="code"
228-
value={`<img src="${base64Data}" />`}
229-
/>
230-
<Space h={1} />
231-
<Text>
232-
Output size (resized): {base64Data.length.toLocaleString()}b
233-
</Text>
234-
<Text>
235-
Original size: {Number(originalSize).toLocaleString()}b
236-
</Text>
237-
</Fragment>
238-
)}
239-
240-
{outputType === "SHADOW" && (
241-
<Fragment>
242-
<Text>
243-
<strong>The result (pure CSS).</strong> This is your pure CSS
244-
(and single div) image, enjoy! This output was created by
245-
resizing and setting each pixel as a box-shadow of a single pixel div, so
246-
no `img` tag or `background-image` is needed. This can result
247-
in huge outputs, and the use of this output is not recommended
248-
for production unless there is no other option.
249-
</Text>
250-
<Space h={1} />
251-
<div
252-
style={{
253-
height: 1,
254-
width: 1,
255-
boxShadow: masterShadow,
256-
marginBottom: rgbMatrix[0].length * scale,
257-
marginRight: rgbMatrix.length * scale,
258-
}}
259-
/>
260-
<Space h={1} />
261-
<Textarea
262-
onFocus={handleFocus}
263-
onChange={() => {}}
264-
className="code"
265-
value={`<div style="margin-right: ${
266-
rgbMatrix[0].length * scale
267-
}px; margin-bottom: ${
268-
rgbMatrix.length * scale
269-
}px; height: 1px; width: 1px; box-shadow: ${masterShadow}"></div>`}
270-
/>
271-
<Space h={1} />
272-
<Text>
273-
Output size (resized): {masterShadow.length.toLocaleString()}b
274-
</Text>
275-
<Text>
276-
Original size: {Number(originalSize).toLocaleString()}b
277-
</Text>
278-
</Fragment>
279-
)}
280-
</Fragment>
135+
<JBX accent={"#f1c40f"} />
136+
<Space h={1} />
137+
138+
<HeaderH1
139+
style={{
140+
fontWeight: 900,
141+
display: "inline-block",
142+
width: "auto",
143+
padding: "6px",
144+
backgroundColor: "var(--accent-color)",
145+
}}>
146+
img2css
147+
</HeaderH1>
148+
149+
<Space h={1} />
150+
<Text>
151+
This is a tool that can convert any image into a pure css image.
152+
</Text>
153+
<Space h={2} />
154+
155+
<Dropzone
156+
onDrop={onFileSelected}
157+
onDragOver={onDragOver}
158+
onDragEnter={onDragOver}>
159+
{loadingImage ? (
160+
<Text>Processing...</Text>
161+
) : (
162+
<div>
163+
<Text>Drop an image here</Text>
164+
<Text>or click to select</Text>
165+
</div>
281166
)}
167+
<input
168+
type="file"
169+
onChange={onFileSelected}
170+
multiple
171+
accept="image/*"
172+
aria-label="Drop an image here, or click to select"
173+
/>
174+
</Dropzone>
175+
176+
<Space h={2} />
177+
<Text>
178+
I also made a per-pixel animation experiment, see{" "}
179+
<A href="https://javier.xyz/morphin/">morphin</A>.
180+
</Text>
181+
182+
{rgbMatrix && (
183+
<Fragment>
184+
<Space h={2} />
185+
<Tabs>
186+
<Inline>
187+
<Tab
188+
active={outputType === "SHADOW"}
189+
key={"SHADOW"}
190+
onClick={() => {
191+
outputTypeSet("SHADOW");
192+
}}>
193+
<Text>{"Pure CSS"}</Text>
194+
</Tab>
195+
<Tab
196+
active={outputType === "BASE64"}
197+
key={"BASE64"}
198+
onClick={() => {
199+
outputTypeSet("BASE64");
200+
}}>
201+
<Text>{"Base64"}</Text>
202+
</Tab>
203+
</Inline>
204+
</Tabs>
205+
<Space h={1} />
206+
207+
{outputType === "BASE64" && (
208+
<Fragment>
209+
<Text>
210+
<strong>The result (base64).</strong>{" "}
211+
{
212+
"This is your image tag a base64 output. The entire image file is embedded inside the `<img>` tag using base64, so no need external hosting is needed."
213+
}
214+
</Text>
215+
<Space h={1} />
216+
217+
<img
218+
src={base64Data}
219+
style={{ maxWidth: "100%", height: "auto", display: "block" }}
220+
/>
221+
222+
<Space h={1} />
223+
224+
<Textarea
225+
onFocus={handleFocus}
226+
onChange={() => {}}
227+
className="code"
228+
value={`<img src="${base64Data}" />`}
229+
/>
230+
<Space h={1} />
231+
<Text>
232+
Output size (resized): {base64Data.length.toLocaleString()}b
233+
</Text>
234+
<Text>
235+
Original size: {Number(originalSize).toLocaleString()}b
236+
</Text>
237+
</Fragment>
238+
)}
239+
240+
{outputType === "SHADOW" && (
241+
<Fragment>
242+
<Text>
243+
<strong>The result (pure CSS).</strong> This is your pure CSS
244+
(and single div) image, enjoy! This output was created by
245+
resizing and setting each pixel as a box-shadow of a single
246+
pixel div, so no `img` tag or `background-image` is needed. This
247+
can result in huge outputs, and the use of this output is not
248+
recommended for production unless there is no other option.
249+
</Text>
250+
<Space h={1} />
251+
<div
252+
style={{
253+
height: 1,
254+
width: 1,
255+
boxShadow: masterShadow,
256+
marginBottom: rgbMatrix[0].length * scale,
257+
marginRight: rgbMatrix.length * scale,
258+
}}
259+
/>
260+
<Space h={1} />
261+
<Textarea
262+
onFocus={handleFocus}
263+
onChange={() => {}}
264+
className="code"
265+
value={`<div style="margin-right: ${
266+
rgbMatrix[0].length * scale
267+
}px; margin-bottom: ${
268+
rgbMatrix.length * scale
269+
}px; height: 1px; width: 1px; box-shadow: ${masterShadow}"></div>`}
270+
/>
271+
<Space h={1} />
272+
<Text>
273+
Output size (resized): {masterShadow.length.toLocaleString()}b
274+
</Text>
275+
<Text>
276+
Original size: {Number(originalSize).toLocaleString()}b
277+
</Text>
278+
</Fragment>
279+
)}
280+
</Fragment>
281+
)}
282282

283-
<Space h={2} />
283+
<Space h={2} />
284284

285-
<Text>More unrelated experiments</Text>
286-
<Space h={0.5} />
285+
<Text>More unrelated experiments</Text>
286+
<Space h={0.5} />
287+
<Text>
287288
<Ul>
288289
<Li>
289-
<Text>
290-
Create single line SVG illustrations from your pictures,{" "}
291-
<A href="https://javier.xyz/pintr/">PINTR</A>.
292-
</Text>
290+
Create single line SVG illustrations from your pictures,{" "}
291+
<A href="https://javier.xyz/pintr/">PINTR</A>.
293292
</Li>
294293
<Li>
295-
<Text>
296-
Play with 3D and shadows,{" "}
297-
<A href="https://sombras.app/">sombras.app</A>.
298-
</Text>
294+
Play with 3D and shadows,{" "}
295+
<A href="https://sombras.app/">sombras.app</A>.
299296
</Li>
300297
<Li>
301-
<Text>
302-
Find the visual center in your images / logos,{" "}
303-
<A href="https://javier.xyz/visual-center/">visual-center</A>.
304-
</Text>
298+
Find the visual center in your images / logos,{" "}
299+
<A href="https://javier.xyz/visual-center/">visual-center</A>.
305300
</Li>
306301
</Ul>
302+
</Text>
307303

308-
<Space h={2} />
309-
<Text>
310-
Made by <A href="https://twitter.com/javierbyte">javierbyte</A>.
311-
</Text>
312-
<Space h={3} />
313-
</Box>
304+
<Space h={2} />
305+
<Text>
306+
Made by <A href="https://twitter.com/javierbyte">javierbyte</A>.
307+
</Text>
308+
<Space h={3} />
314309
</Container>
315310
);
316311
}

0 commit comments

Comments
 (0)