adding browse

samapriya · Nov 2, 2024 · 0640d9d · 0640d9d
1 parent 8f67301
commit 0640d9d
Show file tree

Hide file tree

Showing 2 changed files with 174 additions and 3 deletions.
diff --git a/.github/workflows/search_sync.yml b/.github/workflows/search_sync.yml
@@ -10,6 +10,7 @@ on:
       - master
     paths:
       - search.html
+      - browse.html
 
 jobs:
   deploy:
@@ -38,15 +39,19 @@ jobs:
         run: |
           curl -o search.html https://raw.githubusercontent.com/samapriya/awesome-gee-community-datasets/refs/heads/master/search.html
 
+      - name: Download browse.html
+        run: |
+          curl -o browse.html https://raw.githubusercontent.com/samapriya/awesome-gee-community-datasets/refs/heads/master/browse.html
+
       - name: Configure Git
         run: |
           git config user.name "GitHub Action"
           git config user.email "[email protected]"
 
-      - name: Commit search.html to gh-pages
+      - name: Commit files to gh-pages
         run: |
-          git add search.html
-          git commit -m "Add search.html from external source"
+          git add search.html browse.html
+          git commit -m "Add search.html and browse.html from external source"
 
       - name: Push changes to gh-pages
         env:

diff --git a/browse.html b/browse.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dataset Viewer</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Afacad+Flux:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+        rel="stylesheet">
+    <style>
+        body {
+            font-family: "Afacad Flux", sans-serif;
+        }
+
+        body.dark {
+            background-color: #1a202c;
+            color: #cbd5e0;
+        }
+
+        .dark input[type="search"] {
+            background-color: #2d3748;
+            color: #cbd5e0;
+            border-color: #4a5568;
+        }
+
+        .dark header {
+            background-color: #2d3748;
+        }
+
+        .dark #dataset-count {
+            color: #cbd5e0;
+        }
+
+        #theme-toggle {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #4a5568;
+            color: #fff;
+            border: none;
+            border-radius: 9999px;
+            padding: 0.5rem 1rem;
+            cursor: pointer;
+        }
+
+        .btn {
+            display: inline-block;
+            border-radius: 9999px;
+            padding: 0.5rem 1rem;
+            text-align: center;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+
+        input[type="search"] {
+            border-radius: 9999px;
+            margin-right: 1rem;
+        }
+
+        .grid {
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        }
+
+        .dataset-card .buttons {
+            display: flex;
+            gap: 0.5rem;
+            justify-content: space-between;
+            margin-top: auto;
+        }
+    </style>
+</head>
+
+<body class="min-h-screen">
+    <header class="sticky top-0 z-50 w-full border-b bg-white dark:bg-gray-800">
+        <div class="container mx-auto p-4 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <img src="https://i.imgur.com/FYPcTFF.png" alt="Logo" class="h-8">
+                <h1 class="font-bold">Catalog Browse</h1>
+            </div>
+            <div class="flex items-center">
+                <input type="search" id="search" placeholder="Search datasets..." class="p-2 rounded border w-80">
+                <span id="dataset-count" class="text-gray-700 dark:text-gray-300">0 datasets</span>
+            </div>
+            <button id="theme-toggle" class="p-2">
+                <span id="theme-text">Switch to Dark Mode</span>
+            </button>
+        </div>
+    </header>
+
+    <main class="container mx-auto py-6">
+        <div id="dataset-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            <!-- Datasets will be dynamically loaded here -->
+        </div>
+    </main>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const datasetContainer = document.getElementById('dataset-container');
+            const searchInput = document.getElementById('search');
+            const themeToggle = document.getElementById('theme-toggle');
+            const themeText = document.getElementById('theme-text');
+            const datasetCount = document.getElementById('dataset-count');
+            let datasets = [];
+            let displayedDatasets = [];
+
+            // Fetch dataset data
+            fetch('https://raw.githubusercontent.com/samapriya/awesome-gee-community-datasets/master/community_datasets.json')
+                .then(response => response.json())
+                .then(data => {
+                    datasets = data;
+                    datasetCount.textContent = `${datasets.length} datasets`;
+                    shuffleArray(datasets); // Shuffle datasets initially
+                    loadDatasets();
+                });
+
+            // Function to shuffle the array
+            function shuffleArray(array) {
+                for (let i = array.length - 1; i > 0; i--) {
+                    const j = Math.floor(Math.random() * (i + 1));
+                    [array[i], array[j]] = [array[j], array[i]];
+                }
+            }
+
+            function loadDatasets() {
+                const filteredDatasets = datasets.filter(dataset =>
+                    Object.values(dataset).some(value =>
+                        value.toString().toLowerCase().includes(searchInput.value.toLowerCase())
+                    )
+                );
+
+                datasetCount.textContent = `${filteredDatasets.length} datasets`; // Update dataset count
+
+                datasetContainer.innerHTML = ''; // Clear previous datasets
+                filteredDatasets.forEach(dataset => {
+                    const card = document.createElement('div');
+                    card.classList.add('card', 'p-4', 'border', 'rounded', 'flex', 'flex-col', 'dataset-card');
+                    card.innerHTML = `
+            <h2 class="text-base font-medium mb-2">${dataset.title}</h2>
+            <img src="${dataset.thumbnail}" alt="${dataset.title}" class="object-cover rounded-md mb-2 w-full h-40">
+            <p class="text-sm text-gray-500 mb-2">${dataset.thematic_group}</p>
+            <div class="buttons">
+              ${dataset.docs ? `<a href="${dataset.docs}" target="_blank" class="btn border p-2 flex-1 text-center">Documentation</a>` : ''}
+              ${dataset.sample_code ? `<a href="${dataset.sample_code}" target="_blank" class="btn border p-2 flex-1 text-center">Sample Code</a>` : ''}
+            </div>
+          `;
+                    datasetContainer.appendChild(card);
+                });
+            }
+
+            searchInput.addEventListener('input', () => {
+                loadDatasets();
+            });
+
+            themeToggle.addEventListener('click', () => {
+                document.body.classList.toggle('dark');
+                themeText.textContent = document.body.classList.contains('dark') ? 'Switch to Light Mode' : 'Switch to Dark Mode';
+            });
+        });
+    </script>
+</body>
+
+</html>