Skip to content

Commit adb6360

Browse files
committed
19.0 RC1
[webutils] - new template that autoloads scripts and styles - minor style tweaks [img] - drag and drop zone - important script fixes [index] - fix small clipping issues with images - small style tweaks [general] - lighthouse and w3c validation fixes
1 parent ba0f654 commit adb6360

15 files changed

Lines changed: 120 additions & 77 deletions

File tree

package.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/content/collections/webutils/base64.njk

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,12 @@ eleventyNavigation:
66
key: base64
77
---
88

9-
{% addScript 'base64' %}
10-
{% addStyle 'webutils' %}
11-
12-
<div id="decoded">
9+
<div class="decoded">
1310
<textarea class="input" id="decoded-text" placeholder="plain text"></textarea>
1411
{# <span class="button" id="decoded-copy">⎘</span> #}
1512
</div>
16-
<span><=></span>
17-
<div id="encoded">
13+
<span>&lt;=></span>
14+
<div class="encoded">
1815
<textarea class="output" id="encoded-text" placeholder="encoded text"></textarea>
1916
{# <span class="button" id="encoded-copy">⎘</span> #}
2017
</div>

src/content/collections/webutils/img.njk

Lines changed: 45 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -6,51 +6,52 @@ eleventyNavigation:
66
key: img
77
---
88

9-
{% addScript 'img' %}
10-
{% addStyle 'webutils' %}
11-
12-
<label for="img-input" class="info">convert </label>
13-
<input type="file" id="img-input" accept="image/png, image/jpeg, image/svg+xml, image/webp, image/ico, image/bmp" />
14-
<label for="img-format" class="info"> to </label>
15-
<select id="img-format">
16-
<option value="png">png</option>
17-
<option value="jpeg">jpg</option>
18-
<option value="webp">webp</option>
19-
<option value="ico">ico</option>
20-
<option value="bmp">bmp</option>
21-
</select>
22-
<span id="img-formatInfo" class="warning hidden" title="not supported by all browsers & platforms">⚠️</span>
23-
<br> <br>
24-
<table id="img-options" class="disabled">
25-
<caption>options</caption>
26-
<thead hidden>
27-
<tr>
28-
<th>option</th>
29-
<th>value</th>
9+
<span style="color: lightgreen; font-weight: bold;">NEW: drag and drop below!</span>
10+
<div id="img-drop">
11+
<div id="img-convert">
12+
<label for="img-input" class="info">convert </label>
13+
<input type="file" id="img-input" accept="image/png, image/jpeg, image/svg+xml, image/webp, image/ico, image/bmp">
14+
<label for="img-format" class="info"> to </label>
15+
<select id="img-format">
16+
<option value="png">png</option>
17+
<option value="jpeg">jpg</option>
18+
<option value="webp">webp</option>
19+
<option value="ico">ico</option>
20+
<option value="bmp">bmp</option>
21+
</select>
22+
<span id="img-formatInfo" class="warning hidden" title="not supported by all browsers & platforms">⚠️</span>
23+
</div>
24+
<table id="img-options" class="disabled">
25+
<caption><h3>options</h3></caption>
26+
<thead hidden>
27+
<tr>
28+
<th>option</th>
29+
<th>value</th>
30+
</tr>
31+
</thead>
32+
<tr id="quality">
33+
<td><label for="qualitySlider" class="info">quality</label></td>
34+
<td>
35+
<input type="range" min="0" max="100" value="100" step="10" id="qualitySlider" disabled>
36+
<span id="qualityValue">loseless</span>
37+
</td>
38+
</tr>
39+
<tr id="width">
40+
<td><label for="widthInput" class="info">width</label></td>
41+
<td><input type="number" min="0" max="5000" value="0" id="widthInput" disabled> px</td>
42+
</tr>
43+
<tr id="height">
44+
<td><label for="heightInput" class="info">height</label></td>
45+
<td><input type="number" min="0" max="5000" value="0" id="heightInput" disabled> px</td>
46+
</tr>
47+
<tr id="keepRatioRow">
48+
<td><label for="keepRatio" class="info">keep ratio</label></td>
49+
<td><input type="checkbox" id="keepRatio" checked disabled /></td>
3050
</tr>
31-
</thead>
32-
<tr id="quality">
33-
<td><label for="qualitySlider" class="info">quality</label></td>
34-
<td>
35-
<input type="range" min="0" max="100" value="100" step="10" id="qualitySlider" disabled />
36-
<span id="qualityValue">loseless</span>
37-
</td>
38-
</tr>
39-
<tr id="width">
40-
<td><label for="widthInput" class="info">width</label></td>
41-
<td><input type="number" min="0" max="5000" value="0" id="widthInput" disabled /> px</td>
42-
</tr>
43-
<tr id="height">
44-
<td><label for="heightInput" class="info">height</label></td>
45-
<td><input type="number" min="0" max="5000" value="0" id="heightInput" disabled /> px</td>
46-
</tr>
47-
<tr id="keepRatioRow">
48-
<td><label for="keepRatio" class="info">keep ratio</label></td>
49-
<td><input type="checkbox" id="keepRatio" checked disabled /></td>
50-
</tr>
51-
</table>
52-
<br>
53-
<span class="button disabled" id="img-convert">convert</span>
51+
</table>
52+
<br>
53+
</div>
54+
<span class="button disabled" id="img-button">convert</span>
5455
<hr>
5556
<a class="button hidden" id="img-download"><img src="/assets/icons/misc/download.svg" class="icon invert" alt=""> download</a> <br>
5657
<span class="info" id="img-filename"></span><br>

src/content/collections/webutils/md5.njk

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ eleventyNavigation:
77
---
88

99
{% addScript 'md5.min' %} {# MD5 function library #}
10-
{% addScript 'md5' %}
11-
{% addStyle 'webutils' %}
1210

1311
<input id="md5-input" class="input" type="text" placeholder="string to hash using MD5">
1412
<span id="md5-output" class="output"></span>

src/content/collections/webutils/qp.njk

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,10 @@ eleventyNavigation:
88
title: quoted-printable
99
---
1010

11-
{% addScript 'qp' %}
12-
{% addStyle 'webutils' %}
13-
14-
<div id="decoded">
11+
<div class="decoded">
1512
<textarea class="input" id="qp-decoded-text" placeholder="plain text"></textarea>
1613
</div>
1714
<span><=></span>
18-
<div id="encoded">
15+
<div class="encoded">
1916
<textarea class="output" id="qp-encoded-text" placeholder="encoded text"></textarea>
2017
</div>

src/content/collections/webutils/tiny.njk

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@ eleventyNavigation:
66
key: tiny
77
---
88

9-
{% addScript 'tiny' %}
10-
{% addStyle 'webutils' %}
11-
129
<div id="options">
1310
<input type="checkbox" id="tiny-ignore">
1411
<label for="tiny-ignore">Ignore untinifyable content</label>

src/content/collections/webutils/url.njk

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@ eleventyNavigation:
66
key: url
77
---
88

9-
{% addStyle 'webutils' %}
10-
{% addScript 'url' %}
11-
12-
<textarea class="input" id="url-decoded" type="text" placeholder="decoded URL"></textarea>
9+
<textarea class="input" id="url-decoded" placeholder="decoded URL"></textarea>
1310
<span><=></span>
14-
<textarea class="output" id="url-encoded" type="text" placeholder="encoded URL"></textarea>
11+
<textarea class="output" id="url-encoded" placeholder="encoded URL"></textarea>

src/content/collections/webutils/webutils.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"tags": "webutils",
3-
"layout": "project.njk",
3+
"layout": "webutils.njk",
44
"permalink": "/{{ page.fileSlug }}/",
55
"eleventyNavigation": {
66
"parent": "webutils"

src/index.njk

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@ js: index
6161
{% endif %}
6262
{% endfor %}
6363
</div>
64+
<hr>
6465
<div id="project-list">
65-
<h2>full works list</h2>
6666
<ul>
6767
{% for project in collections.project %}
6868
<li class="project {{ project.data.star }}" id="{{ project.data.title | slug }}">

src/static/css/app/webutils.sass

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,11 @@ table td:nth-child(2) input
4040
#img-canvas
4141
width: 70%
4242
height: auto
43+
44+
#img-convert
45+
text-align: center
46+
margin: 1em
47+
font-size: 1.5em
48+
49+
label
50+
margin: 1em

0 commit comments

Comments
 (0)