Skip to content
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

Jump to bottom

feat: search as URL parameter #476

Draft
wants to merge 2 commits into
base: gh-pages
Choose a base branch
from
Draft

feat: search as URL parameter #476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
da54160
feat: search as URL parameters
Malix-Labs Oct 1, 2024
1dae88e
enhance: dry
Malix-Labs Oct 1, 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
23 changes: 1 addition & 22 deletions collections.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ <h1 style="margin-left: auto;margin-right: auto;">Collections</h1>
</p>

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

<br>
<br>

Expand All @@ -42,24 +41,4 @@ <h1 style="margin-left: auto;margin-right: auto;">Collections</h1>
{% 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>
<script src="js/search.js"></script>
26 changes: 3 additions & 23 deletions features.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Featur
<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 %}
Expand All @@ -48,28 +48,8 @@ <h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Featur
</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 (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>
<script src="js/search.js"></script>
44 changes: 44 additions & 0 deletions js/search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
function updateSearchResults(searchValue, rows) {
for (let i = 1; i < rows.length; i++) {
const cells = rows[i].getElementsByTagName('td');
let match = false;
for (let j = 0; j < cells.length; j++) {
if (cells[j].textContent.toLowerCase().includes(searchValue)) {
match = true;
break;
}
}
rows[i].style.display = match ? '' : 'none';
}
}

function getSearchParameter() {
const params = new URLSearchParams(window.location.search);
return params.get('search') || '';
}

function setSearchParameter(value) {
const params = new URLSearchParams(window.location.search);
if (value) {
params.set('search', value);
} else {
params.delete('search');
}
window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
}

document.addEventListener('DOMContentLoaded', function () {
const searchInput = document.getElementById('searchInput');
const collectionTable = document.getElementById('collectionTable');
const rows = collectionTable.getElementsByTagName('tr');

const searchValue = getSearchParameter();
searchInput.value = searchValue;
updateSearchResults(searchValue, rows);

searchInput.addEventListener('input', function () {
const searchValue = searchInput.value.toLowerCase();
setSearchParameter(searchValue);
updateSearchResults(searchValue, rows);
});
});
35 changes: 9 additions & 26 deletions templates.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@

<h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Templates</h1>
<p style="margin-left: auto;margin-right: auto;">
This table contains all official and community-supported <a href="implementors/templates/">Dev Container Templates</a>
known at the time of crawling <a href="collections">each registered collection</a>. This list is continuously
updated with the latest available Template information. See the <a href="https://github.com/devcontainers/template-starter">
Template quick start repository</a> to add your own!
This table contains all official and community-supported <a href="implementors/templates/">Dev Container
Templates</a>
known at the time of crawling <a href="collections">each registered collection</a>. This list is continuously
updated with the latest available Template information. See the <a
href="https://github.com/devcontainers/template-starter">
Template quick start repository</a> to add your own!
<br><br>
Templates listed here will be presented in the UX of <a href="supporting">supporting tools</a>.
<br><br>
Expand All @@ -33,7 +35,7 @@ <h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Templa
<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.templates %}
<tr>
Expand All @@ -44,27 +46,8 @@ <h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Templa
<td class="tg-0lax"><code>{{ f.version | strip_html }}</code></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();

if (name.includes(searchValue) || maintainer.includes(searchValue)) {
rows[i].style.display = '';
} else {
rows[i].style.display = 'none';
}
}
});
</script>
<script src="js/search.js"></script>