devcontainers.github.io/templates.html at gh-pages · JasonTheDeveloper/devcontainers.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
---
title: Templates
layout: table
sectionid: collection-index-templates
---

<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!
    <br><br>
    Templates listed here will be presented in the UX of <a href="supporting">supporting tools</a>.
    <br><br>
    Please note that if you need to report a Template, you should do so through the registry hosting the Template.
</p>

<p>
    To add your own collection to this list, please create a PR editing <a
        href="https://github.com/devcontainers/devcontainers.github.io/blob/gh-pages/_data/collection-index.yml">this
        yaml file</a>.
</p>

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

<table id="collectionTable" class="tg">
    <tr>
        <td class="tg-0lax"><b>Template 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.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"><code>{{ f.id | strip_html  }}:{{ f.version | strip_html }}</code></td>
        <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');

    function performSearch() {
        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';
            }
        }
    }

    searchInput.addEventListener('input', function () {
        performSearch();
        const url = new URL(window.location);
        if (searchInput.value) {
            url.searchParams.set('search', searchInput.value);
        } else {
            url.searchParams.delete('search');
        }
        window.history.replaceState({}, '', url);
    });

    // Read search parameter from URL on page load
    const urlParams = new URLSearchParams(window.location.search);
    const searchParam = urlParams.get('search');
    if (searchParam) {
        searchInput.value = searchParam;
        performSearch();
    }
</script>