|
1 | 1 | {{- $githubApiBase := "https://api.github.com/repos/" -}} |
| 2 | +{{- $cardsPerRow := .Get "cardsPerRow" | default 3 -}} {{/* Get the desired number of cards per row from shortcode parameters, default to 3 */}} |
| 3 | +{{- $cardsPerRowClass := "" -}} |
| 4 | + |
| 5 | +{{- if eq $cardsPerRow 1 -}} |
| 6 | + {{- $cardsPerRowClass = "grid-cols-1" -}} |
| 7 | +{{- else if eq $cardsPerRow 2 -}} |
| 8 | + {{- $cardsPerRowClass = "grid-cols-1 md:grid-cols-2" -}} |
| 9 | +{{- else if eq $cardsPerRow 3 -}} |
| 10 | + {{- $cardsPerRowClass = "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" -}} |
| 11 | +{{- else if eq $cardsPerRow 4 -}} |
| 12 | + {{- $cardsPerRowClass = "grid-cols-1 md:grid-cols-2 lg:grid-cols-4" -}} |
| 13 | +{{- else if eq $cardsPerRow 5 -}} |
| 14 | + {{- $cardsPerRowClass = "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5" -}} |
| 15 | +{{- else -}} |
| 16 | + {{- $cardsPerRowClass = "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" -}} {{/* Default to 3 if an invalid number is provided */}} |
| 17 | +{{- end -}} |
| 18 | + |
2 | 19 | <div class="mb-8"> |
3 | | - <input type="text" id="categorySearch" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Search by category..."> |
| 20 | + <input type="text" id="categorySearch" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Search by category or tool name..."> |
4 | 21 | </div> |
5 | 22 | <div id="categoryGrid"> |
6 | | -{{- range $index, $categoryData := .Site.Data.tools }} |
| 23 | + {{- range $index, $categoryData := .Site.Data.tools }} |
7 | 24 | <h2 class="text-2xl font-bold mt-8 mb-4 category-title">{{ $categoryData.category }}</h2> |
8 | | - <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 category-grid"> |
9 | | - {{ range $index, $element := $categoryData.tools }} |
10 | | - {{- $isGithubRepo := false -}} |
11 | | - {{- $stars := 0 -}} |
12 | | - {{- $repoPath := "" -}} |
13 | | - |
14 | | - {{- if strings.Contains $element.url "github.com" -}} |
15 | | - {{- $isGithubRepo = true -}} |
16 | | - {{- $repoPath = replace $element.url "https://github.com/" "" -}} |
17 | | - {{- if strings.Contains $repoPath "/" -}} |
18 | | - {{- $apiURL := printf "%s%s" $githubApiBase $repoPath -}} |
19 | | - {{- $tryResponse := try (resources.GetRemote $apiURL) -}} |
20 | | - {{- if $tryResponse -}} |
21 | | - {{- $response := $tryResponse.Value -}} |
22 | | - {{- if eq $response.MediaType.SubType "json" -}} |
23 | | - {{- $jsonData := $response | transform.Unmarshal -}} |
24 | | - {{- $stars = $jsonData.stargazers_count -}} |
25 | | - {{- end -}} |
26 | | - {{- end -}} |
27 | | - {{- else -}} |
28 | | - {{- $isGithubRepo = false -}} |
29 | | - {{- end -}} |
30 | | - {{- end -}} |
31 | | - |
32 | | - {{- $cardParams := dict "link" $element.url "title" $element.name "subtitle" $element.description "isGithubRepo" $isGithubRepo "stars" $stars -}} |
33 | | - {{- partial "shortcodes/card.html" $cardParams -}} |
| 25 | + <div class="grid {{ $cardsPerRowClass }} gap-6 category-grid"> |
| 26 | + {{ range $index, $tool := $categoryData.tools }} |
| 27 | + {{- $isGithubRepo := false -}} |
| 28 | + {{- $stars := 0 -}} |
| 29 | + {{- $repoPath := "" -}} |
| 30 | + |
| 31 | + {{- if strings.Contains $tool.url "github.com" -}} |
| 32 | + {{- $isGithubRepo = true -}} |
| 33 | + {{- $repoPath = replace $tool.url "https://github.com/" "" -}} |
| 34 | + {{- if strings.Contains $repoPath "/" -}} |
| 35 | + {{- $apiURL := printf "%s%s" $githubApiBase $repoPath -}} |
| 36 | + {{- $tryResponse := try (resources.GetRemote $apiURL) -}} |
| 37 | + {{- if $tryResponse -}} |
| 38 | + {{- $response := $tryResponse.Value -}} |
| 39 | + {{- if eq $response.MediaType.SubType "json" -}} |
| 40 | + {{- $jsonData := $response | transform.Unmarshal -}} |
| 41 | + {{- $stars = $jsonData.stargazers_count -}} |
| 42 | + {{- end -}} |
| 43 | + {{- end -}} |
| 44 | + {{- else -}} |
| 45 | + {{- $isGithubRepo = false -}} |
| 46 | + {{- end -}} |
| 47 | + {{- end -}} |
| 48 | + |
| 49 | + {{- $cardParams := dict "link" $tool.url "title" $tool.name "subtitle" $tool.description "isGithubRepo" $isGithubRepo "stars" $stars -}} |
| 50 | + {{- partial "shortcodes/card.html" $cardParams -}} |
34 | 51 | {{ end }} |
35 | 52 | </div> |
36 | | -{{ end }} |
| 53 | + {{ end }} |
37 | 54 | </div> |
38 | 55 | <script> |
39 | 56 | const searchInput = document.getElementById('categorySearch'); |
40 | 57 | const categoryTitles = document.querySelectorAll('.category-title'); |
41 | 58 | const categoryGrids = document.querySelectorAll('.category-grid'); |
| 59 | + const cards = document.querySelectorAll('.hextra-card'); |
42 | 60 |
|
43 | 61 | searchInput.addEventListener('input', () => { |
44 | 62 | const searchTerm = searchInput.value.toLowerCase(); |
45 | 63 |
|
46 | 64 | categoryTitles.forEach((title, index) => { |
47 | 65 | const categoryName = title.textContent.toLowerCase(); |
48 | 66 | const grid = categoryGrids[index]; |
| 67 | + let categoryVisible = false; |
49 | 68 |
|
| 69 | + // Check if the category name matches the search term |
50 | 70 | if (categoryName.includes(searchTerm)) { |
| 71 | + categoryVisible = true; |
| 72 | + } |
| 73 | + |
| 74 | + // Check if any card in the category matches the search term |
| 75 | + const categoryCards = grid.querySelectorAll('.hextra-card'); |
| 76 | + categoryCards.forEach(card => { |
| 77 | + const cardTitle = card.querySelector('.font-semibold').textContent.toLowerCase(); |
| 78 | + if (cardTitle.includes(searchTerm)) { |
| 79 | + categoryVisible = true; |
| 80 | + card.style.display = 'block'; |
| 81 | + } else { |
| 82 | + card.style.display = 'none'; |
| 83 | + } |
| 84 | + }); |
| 85 | + |
| 86 | + // Show/hide the category based on visibility |
| 87 | + if (categoryVisible) { |
51 | 88 | title.style.display = 'block'; |
52 | 89 | grid.style.display = 'grid'; |
53 | 90 | } else { |
|
0 commit comments