Skip to content

Add search functionality on collections, Features, Templates #325

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bamurtaugh merged 19 commits into from
Feb 22, 2024
Merged

Add search functionality on collections, Features, Templates #325

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
c0250f7
Initial changes
Oct 25, 2023
5ddc04d
Borders
Oct 25, 2023
a5deec8
Revert changes
Oct 25, 2023
efe800d
Add search functionality and styling to collection
Oct 25, 2023
871e9d2
Add GHPRI
Oct 25, 2023
f78de69
Restore original file
Oct 26, 2023
fe27d0d
Add search functionality and style to collection
Oct 26, 2023
d45d3ad
Revert
Oct 27, 2023
84620ab
Add search functionality to collection table
Oct 31, 2023
74ae15b
Revert
Oct 31, 2023
7f6ae1c
Add search functionality and improve table layout
Nov 7, 2023
c192424
Revert change
Nov 7, 2023
805a133
Add search functionality to collection table
Nov 7, 2023
fff4991
Revert
Nov 7, 2023
da14ffc
Add search functionality and style table in
bamurtaugh Nov 15, 2023
e9b6821
Refactor collections.html table layout
bamurtaugh Nov 15, 2023
f6b1f35
Add search functionality to collection table
bamurtaugh Nov 17, 2023
5f5fb6f
Initial updates
Feb 17, 2024
a0ad285
Update search logic and format
Feb 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 46 additions & 14 deletions collections.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,49 @@ <h1 style="margin-left: auto;margin-right: auto;">Collections</h1>
href="https://github.com/devcontainers/devcontainers.github.io/blob/gh-pages/_data/collection-index.yml">this
yaml file</a>.
</p>
<tr>
<td class="tg-0lax"><b>Name</b></b></td>
<td class="tg-0lax"><b>Maintainer</b></td>
<td class="tg-0lax"><b>Repository</b></td>
</tr>

{% for c in site.data.collection-index %}
<tr>
<td class="tg-0lax">{{ c.name }}</td>
<td class="tg-0lax"><a rel="nofollow" href="{{ c.contact | strip_html }}">{{ c.maintainer | strip_html }}</a></td>
<td class="tg-0lax"><a rel="nofollow" href="{{ c.repository | strip_html }}">{{ c.repository | strip_html }}</a>
</td>
</tr>
{% endfor %}

<input type="text" id="searchInput" placeholder="Search">

<br>
<br>

<table id="collectionTable" class="tg">
<tr>
<td class="tg-0lax"><b>Name</b></td>
<td class="tg-0lax"><b>Maintainer</b></td>
<td class="tg-0lax"><b>Repository</b></td>
</tr>

{% for c in site.data.collection-index %}
<tr>
<td class="tg-0lax">{{ c.name }}</td>
<td class="tg-0lax"><a rel="nofollow" href="{{ c.contact | strip_html }}">{{ c.maintainer | strip_html }}</a>
</td>
<td class="tg-0lax"><a rel="nofollow" href="{{ c.repository | strip_html }}">{{ c.repository | strip_html
}}</a>
</td>
</tr>
{% endfor %}
</table>

<script>
const searchInput = document.getElementById('searchInput');
const collectionTable = document.getElementById('collectionTable');
const rows = collectionTable.getElementsByTagName('tr');

searchInput.addEventListener('input', function () {
const searchValue = searchInput.value.toLowerCase();

for (let i = 1; i < rows.length; i++) {
const name = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
const maintainer = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase();
const repository = rows[i].getElementsByTagName('td')[2].textContent.toLowerCase();

if (name.includes(searchValue) || maintainer.includes(searchValue) || repository.includes(searchValue)) {
rows[i].style.display = '';
} else {
rows[i].style.display = 'none';
}
}
});
</script>
68 changes: 47 additions & 21 deletions features.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,26 +18,52 @@ <h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Featur
Please note that if you need to report a Feature, you should do so through the registry hosting the Feature.
</p>

<p>
</p>
<tr>
<td class="tg-0lax"><b>Feature Name</b></b></td>
<td class="tg-0lax"><b>Maintainer</b></td>
<td class="tg-0lax"><b>Reference</b></td>
<td class="tg-0lax"><b>Latest Version</b></td>
</tr>
<input type="text" id="searchInput" placeholder="Search">
<br>
<br>

<table id="collectionTable" class="tg">
<tr>
<td class="tg-0lax"><b>Feature Name</b></b></td>
<td class="tg-0lax"><b>Maintainer</b></td>
<td class="tg-0lax"><b>Reference</b></td>
<td class="tg-0lax"><b>Latest Version</b></td>
</tr>

{% for c in site.data.devcontainer-index.collections %}
{% for f in c.features %}
{% if f.deprecated != true %}
<tr>
<td class="tg-0lax"><a rel="nofollow" href="{{ f.documentationURL | strip_html }}">{{ f.name | strip_html }}</a>
</td>
<td class="tg-0lax">{{ c.sourceInformation.maintainer | strip_html }}</td>
<td class="tg-0lax"><code>{{ f.id | strip_html }}:{{ f.majorVersion | strip_html }}</code></td>
<td class="tg-0lax"><code>{{ f.version | strip_html }}</code></td>
</tr>
{% endif %}
{% endfor %}

{% endfor %}
</table>

<script>
const searchInput = document.getElementById('searchInput');
const collectionTable = document.getElementById('collectionTable');
const rows = collectionTable.getElementsByTagName('tr');

searchInput.addEventListener('input', function () {
const searchValue = searchInput.value.toLowerCase();

{% for c in site.data.devcontainer-index.collections %}
{% for f in c.features %}
{% if f.deprecated != true %}
<tr>
<td class="tg-0lax"><a rel="nofollow" href="{{ f.documentationURL | strip_html }}">{{ f.name | strip_html }}</a>
</td>
<td class="tg-0lax">{{ c.sourceInformation.maintainer | strip_html }}</td>
<td class="tg-0lax"><code>{{ f.id | strip_html }}:{{ f.majorVersion | strip_html }}</code></td>
<td class="tg-0lax"><code>{{ f.version | strip_html }}</code></td>
</tr>
{% endif %}
{% endfor %}
for (let i = 1; i < rows.length; i++) {
const name = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
const maintainer = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase();
const repository = rows[i].getElementsByTagName('td')[2].textContent.toLowerCase();

{% endfor %}
if (name.includes(searchValue) || maintainer.includes(searchValue) || repository.includes(searchValue)) {
rows[i].style.display = '';
} else {
rows[i].style.display = 'none';
}
}
});
</script>
47 changes: 37 additions & 10 deletions templates.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,46 @@ <h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Templa
Please note that if you need to report a Template, you should do so through the registry hosting the Template.
</p>

<p>
</p>
<tr>
<td class="tg-0lax"><b>Template Name</b></b></td>
<td class="tg-0lax"><b>Maintainer</b></td>
</tr>
<input type="text" id="searchInput" placeholder="Search">
<br>
<br>

{% for c in site.data.devcontainer-index.collections %}
<table id="collectionTable" class="tg">
<tr>
<td class="tg-0lax"><b>Template Name</b></b></td>
<td class="tg-0lax"><b>Maintainer</b></td>
</tr>

{% for c in site.data.devcontainer-index.collections %}
{% for f in c.templates %}
<tr>
<td class="tg-0lax"><a rel="nofollow" href="{{ f.documentationURL | strip_html }}">{{ f.name | strip_html }}</a></td>
<td class="tg-0lax">{{ c.sourceInformation.maintainer | strip_html }}</td>
<td class="tg-0lax"><a rel="nofollow" href="{{ f.documentationURL | strip_html }}">{{ f.name | strip_html }}</a>
</td>
<td class="tg-0lax">{{ c.sourceInformation.maintainer | strip_html }}</td>
</tr>
{% endfor %}

{% endfor %}
</table>

<script>
const searchInput = document.getElementById('searchInput');
const collectionTable = document.getElementById('collectionTable');
const rows = collectionTable.getElementsByTagName('tr');

searchInput.addEventListener('input', function () {
const searchValue = searchInput.value.toLowerCase();

for (let i = 1; i < rows.length; i++) {
const name = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
const maintainer = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase();
const repository = rows[i].getElementsByTagName('td')[2].textContent.toLowerCase();

{% endfor %}
if (name.includes(searchValue) || maintainer.includes(searchValue) || repository.includes(searchValue)) {
rows[i].style.display = '';
} else {
rows[i].style.display = 'none';
}
}
});
</script>