@@ -7,50 +7,48 @@ Operations are used to describe changes to make to systems in the inventory. Use
7
7
8
8
.. raw :: html
9
9
10
- <h3 >Popular operations by category</h3 >
11
-
12
- .. admonition :: Basics
13
- :class: note inline
14
-
15
- :doc: `operations/files `, :doc: `operations/server `, :doc: `operations/git `, :doc: `operations/systemd `
16
-
17
- .. admonition :: System Packages
18
- :class: note inline
19
-
20
- :doc: `operations/apt `, :doc: `operations/apk `, :doc: `operations/brew `, :doc: `operations/dnf `, :doc: `operations/yum `
21
-
22
- .. admonition :: Language Packages
23
- :class: note inline
24
-
25
- :doc: `operations/gem `, :doc: `operations/npm `, :doc: `operations/pip `
26
-
27
- .. admonition :: Databases
28
- :class: note inline
29
-
30
- :doc: `operations/postgresql `, :doc: `operations/mysql `
31
-
32
- .. raw :: html
33
-
34
- <h3 >All operations alphabetically</h3 >
35
-
36
- .. raw :: html
37
-
38
- <style type =" text/css" >
39
- #operations-index .toctree-wrapper > ul {
40
- padding : 0 ;
41
- }
42
- #operations-index .toctree-wrapper > ul > li {
43
- padding : 0 ;
44
- list-style : none ;
45
- margin : 20px 0 ;
46
- }
47
- #operations-index .toctree-wrapper > ul > li > ul > li {
48
- display : inline-block ;
49
- }
50
- </style >
51
-
52
- .. toctree ::
53
- :maxdepth: 2
54
- :glob:
55
-
56
- operations/*
10
+ <div class =" container my-4" >
11
+ <!-- Dropdown Filter -->
12
+ <div class =" mb-4" >
13
+ <label for =" tag-dropdown" class =" form-label" >Filter by Tag:</label >
14
+ <select class =" form-select" id =" tag-dropdown" >
15
+ <option value =" All" >All</option >
16
+ {% for tag in tags %}
17
+ <option value="{{ tag.title_case }}">{{ tag.title_case }}</option>
18
+ {% endfor %}
19
+ </select>
20
+ </div>
21
+
22
+ <!-- Cards Grid -->
23
+ <div class="row" id="card-container">
24
+ {% for plugin in operation_plugins %}
25
+ <div class="col-md-4 mb-4 card-item">
26
+ <div class="card h-100">
27
+ <div class="card-body">
28
+ <h5 class="card-title">{{ plugin.name }}</h5>
29
+ <p class="card-text">{{ plugin.description }}</p>
30
+ {% for tag in plugin.tags %}
31
+ <span class="badge bg-secondary">{{ tag.title_case }}</span>
32
+ {% endfor %}
33
+ </div>
34
+ </div>
35
+ </div>
36
+ {% endfor %}
37
+ </div>
38
+ </div>
39
+ <script>
40
+ document.getElementById('tag-dropdown').addEventListener('change', function () {
41
+ const selectedTag = this.value;
42
+ const cards = document.querySelectorAll('.card-item');
43
+
44
+ cards.forEach(card => {
45
+ const tags = Array.from(card.querySelectorAll('.badge')).map(badge => badge.textContent.trim());
46
+
47
+ if (selectedTag === 'All' || tags.includes(selectedTag)) {
48
+ card.style.display = 'block';
49
+ } else {
50
+ card.style.display = 'none';
51
+ }
52
+ });
53
+ });
54
+ </script>
0 commit comments