Skip to content

Commit 628e1ad

Browse files
bamurtaughbamurtaugh
bamurtaugh
and
bamurtaugh
authored
Add search functionality on collections, Features, Templates (devcontainers#325)
* Initial changes * Borders * Revert changes * Add search functionality and styling to collection table * Add GHPRI * Restore original file * Add search functionality and style to collection table * Revert * Add search functionality to collection table * Revert * Add search functionality and improve table layout in collections.html * Revert change * Add search functionality to collection table * Revert * Add search functionality and style table in collections.html * Refactor collections.html table layout * Add search functionality to collection table * Initial updates * Update search logic and format --------- Co-authored-by: bamurtaugh <[email protected]>
1 parent 6c8d915 commit 628e1ad

File tree

3 files changed

+130
-45
lines changed

3 files changed

+130
-45
lines changed

Diff for: ‎collections.html

+46-14
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,49 @@ <h1 style="margin-left: auto;margin-right: auto;">Collections</h1>
1717
href="https://github.com/devcontainers/devcontainers.github.io/blob/gh-pages/_data/collection-index.yml">this
1818
yaml file</a>.
1919
</p>
20-
<tr>
21-
<td class="tg-0lax"><b>Name</b></b></td>
22-
<td class="tg-0lax"><b>Maintainer</b></td>
23-
<td class="tg-0lax"><b>Repository</b></td>
24-
</tr>
25-
26-
{% for c in site.data.collection-index %}
27-
<tr>
28-
<td class="tg-0lax">{{ c.name }}</td>
29-
<td class="tg-0lax"><a rel="nofollow" href="{{ c.contact | strip_html }}">{{ c.maintainer | strip_html }}</a></td>
30-
<td class="tg-0lax"><a rel="nofollow" href="{{ c.repository | strip_html }}">{{ c.repository | strip_html }}</a>
31-
</td>
32-
</tr>
33-
{% endfor %}
20+
21+
<input type="text" id="searchInput" placeholder="Search">
22+
23+
<br>
24+
<br>
25+
26+
<table id="collectionTable" class="tg">
27+
<tr>
28+
<td class="tg-0lax"><b>Name</b></td>
29+
<td class="tg-0lax"><b>Maintainer</b></td>
30+
<td class="tg-0lax"><b>Repository</b></td>
31+
</tr>
32+
33+
{% for c in site.data.collection-index %}
34+
<tr>
35+
<td class="tg-0lax">{{ c.name }}</td>
36+
<td class="tg-0lax"><a rel="nofollow" href="{{ c.contact | strip_html }}">{{ c.maintainer | strip_html }}</a>
37+
</td>
38+
<td class="tg-0lax"><a rel="nofollow" href="{{ c.repository | strip_html }}">{{ c.repository | strip_html
39+
}}</a>
40+
</td>
41+
</tr>
42+
{% endfor %}
43+
</table>
44+
45+
<script>
46+
const searchInput = document.getElementById('searchInput');
47+
const collectionTable = document.getElementById('collectionTable');
48+
const rows = collectionTable.getElementsByTagName('tr');
49+
50+
searchInput.addEventListener('input', function () {
51+
const searchValue = searchInput.value.toLowerCase();
52+
53+
for (let i = 1; i < rows.length; i++) {
54+
const name = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
55+
const maintainer = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase();
56+
const repository = rows[i].getElementsByTagName('td')[2].textContent.toLowerCase();
57+
58+
if (name.includes(searchValue) || maintainer.includes(searchValue) || repository.includes(searchValue)) {
59+
rows[i].style.display = '';
60+
} else {
61+
rows[i].style.display = 'none';
62+
}
63+
}
64+
});
65+
</script>

Diff for: ‎features.html

+47-21
Original file line numberDiff line numberDiff line change
@@ -18,26 +18,52 @@ <h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Featur
1818
Please note that if you need to report a Feature, you should do so through the registry hosting the Feature.
1919
</p>
2020

21-
<p>
22-
</p>
23-
<tr>
24-
<td class="tg-0lax"><b>Feature Name</b></b></td>
25-
<td class="tg-0lax"><b>Maintainer</b></td>
26-
<td class="tg-0lax"><b>Reference</b></td>
27-
<td class="tg-0lax"><b>Latest Version</b></td>
28-
</tr>
21+
<input type="text" id="searchInput" placeholder="Search">
22+
<br>
23+
<br>
24+
25+
<table id="collectionTable" class="tg">
26+
<tr>
27+
<td class="tg-0lax"><b>Feature Name</b></b></td>
28+
<td class="tg-0lax"><b>Maintainer</b></td>
29+
<td class="tg-0lax"><b>Reference</b></td>
30+
<td class="tg-0lax"><b>Latest Version</b></td>
31+
</tr>
32+
33+
{% for c in site.data.devcontainer-index.collections %}
34+
{% for f in c.features %}
35+
{% if f.deprecated != true %}
36+
<tr>
37+
<td class="tg-0lax"><a rel="nofollow" href="{{ f.documentationURL | strip_html }}">{{ f.name | strip_html }}</a>
38+
</td>
39+
<td class="tg-0lax">{{ c.sourceInformation.maintainer | strip_html }}</td>
40+
<td class="tg-0lax"><code>{{ f.id | strip_html }}:{{ f.majorVersion | strip_html }}</code></td>
41+
<td class="tg-0lax"><code>{{ f.version | strip_html }}</code></td>
42+
</tr>
43+
{% endif %}
44+
{% endfor %}
45+
46+
{% endfor %}
47+
</table>
48+
49+
<script>
50+
const searchInput = document.getElementById('searchInput');
51+
const collectionTable = document.getElementById('collectionTable');
52+
const rows = collectionTable.getElementsByTagName('tr');
53+
54+
searchInput.addEventListener('input', function () {
55+
const searchValue = searchInput.value.toLowerCase();
2956

30-
{% for c in site.data.devcontainer-index.collections %}
31-
{% for f in c.features %}
32-
{% if f.deprecated != true %}
33-
<tr>
34-
<td class="tg-0lax"><a rel="nofollow" href="{{ f.documentationURL | strip_html }}">{{ f.name | strip_html }}</a>
35-
</td>
36-
<td class="tg-0lax">{{ c.sourceInformation.maintainer | strip_html }}</td>
37-
<td class="tg-0lax"><code>{{ f.id | strip_html }}:{{ f.majorVersion | strip_html }}</code></td>
38-
<td class="tg-0lax"><code>{{ f.version | strip_html }}</code></td>
39-
</tr>
40-
{% endif %}
41-
{% endfor %}
57+
for (let i = 1; i < rows.length; i++) {
58+
const name = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
59+
const maintainer = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase();
60+
const repository = rows[i].getElementsByTagName('td')[2].textContent.toLowerCase();
4261

43-
{% endfor %}
62+
if (name.includes(searchValue) || maintainer.includes(searchValue) || repository.includes(searchValue)) {
63+
rows[i].style.display = '';
64+
} else {
65+
rows[i].style.display = 'none';
66+
}
67+
}
68+
});
69+
</script>

Diff for: ‎templates.html

+37-10
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,46 @@ <h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Templa
1616
Please note that if you need to report a Template, you should do so through the registry hosting the Template.
1717
</p>
1818

19-
<p>
20-
</p>
21-
<tr>
22-
<td class="tg-0lax"><b>Template Name</b></b></td>
23-
<td class="tg-0lax"><b>Maintainer</b></td>
24-
</tr>
19+
<input type="text" id="searchInput" placeholder="Search">
20+
<br>
21+
<br>
2522

26-
{% for c in site.data.devcontainer-index.collections %}
23+
<table id="collectionTable" class="tg">
24+
<tr>
25+
<td class="tg-0lax"><b>Template Name</b></b></td>
26+
<td class="tg-0lax"><b>Maintainer</b></td>
27+
</tr>
28+
29+
{% for c in site.data.devcontainer-index.collections %}
2730
{% for f in c.templates %}
2831
<tr>
29-
<td class="tg-0lax"><a rel="nofollow" href="{{ f.documentationURL | strip_html }}">{{ f.name | strip_html }}</a></td>
30-
<td class="tg-0lax">{{ c.sourceInformation.maintainer | strip_html }}</td>
32+
<td class="tg-0lax"><a rel="nofollow" href="{{ f.documentationURL | strip_html }}">{{ f.name | strip_html }}</a>
33+
</td>
34+
<td class="tg-0lax">{{ c.sourceInformation.maintainer | strip_html }}</td>
3135
</tr>
3236
{% endfor %}
37+
38+
{% endfor %}
39+
</table>
40+
41+
<script>
42+
const searchInput = document.getElementById('searchInput');
43+
const collectionTable = document.getElementById('collectionTable');
44+
const rows = collectionTable.getElementsByTagName('tr');
45+
46+
searchInput.addEventListener('input', function () {
47+
const searchValue = searchInput.value.toLowerCase();
48+
49+
for (let i = 1; i < rows.length; i++) {
50+
const name = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
51+
const maintainer = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase();
52+
const repository = rows[i].getElementsByTagName('td')[2].textContent.toLowerCase();
3353

34-
{% endfor %}
54+
if (name.includes(searchValue) || maintainer.includes(searchValue) || repository.includes(searchValue)) {
55+
rows[i].style.display = '';
56+
} else {
57+
rows[i].style.display = 'none';
58+
}
59+
}
60+
});
61+
</script>

0 commit comments

Comments
 (0)