deploy: 7c5879f24936d71b9b928197272d72e544cbf482

index.html

@@ -21,7 +21,7 @@
 {"@context":"https://schema.org","@type":"WebSite","description":"This repo includes ChatGPT prompt curation to use ChatGPT and other LLM tools better.","headline":"Awesome ChatGPT Prompts","name":"Awesome ChatGPT Prompts","url":"/"}</script>
 <!-- End Jekyll SEO tag -->
 
-    <link rel="stylesheet" href="/assets/css/style.css?v=c1285c06319565949744562d376e5f06bdac20da">
+    <link rel="stylesheet" href="/assets/css/style.css?v=7c5879f24936d71b9b928197272d72e544cbf482">
     <style>
       :root {
         --bg-color-light: #ffffff;
@@ -383,16 +383,6 @@
         .github-link span {
           display: none;
         }
-
-        .star-count {
-          display: flex;
-          font-size: 0.8rem;
-        }
-
-        .star-count svg {
-          width: 14px;
-          height: 14px;
-        }
       }
 
       .site-title:hover {
@@ -1801,6 +1791,54 @@
           margin-bottom: 4px;
         }
       }
+
+      .platform-tag-container {
+        position: relative;
+        display: inline-block;
+      }
+
+      .grok-mode-dropdown {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 1000;
+        min-width: 160px;
+        margin-top: 4px;
+        background: var(--bg-color-light);
+        border: 1px solid var(--accent-color);
+        border-radius: 6px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        font-size: 0.8rem;
+        overflow: hidden;
+        padding: 4px;
+      }
+
+      .dark-mode .grok-mode-dropdown {
+        background: var(--bg-color-dark);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+      }
+
+      .grok-mode-option {
+        padding: 4px 8px;
+        cursor: pointer;
+        color: var(--text-color-light);
+        transition: all 0.2s ease;
+        border-radius: 4px;
+        white-space: nowrap;
+      }
+
+      .dark-mode .grok-mode-option {
+        color: var(--text-color-dark);
+      }
+
+      .grok-mode-option:hover {
+        background: rgba(16, 185, 129, 0.1);
+        color: var(--accent-color);
+      }
+
+      .dark-mode .grok-mode-option:hover {
+        background: rgba(16, 185, 129, 0.2);
+      }
     </style>
     <!-- start custom head snippets, customize with your own _includes/head-custom.html file -->
 
@@ -1844,7 +1882,14 @@
             <div class="platform-pills">
               <button class="platform-tag" data-platform="github-copilot" data-url="https://github.com/copilot">GitHub Copilot</button>
               <button class="platform-tag" data-platform="chatgpt" data-url="https://chat.openai.com">ChatGPT</button>
+              <div class="platform-tag-container">
                 <button class="platform-tag" data-platform="grok" data-url="https://grok.com/chat">Grok</button>
+                <div class="grok-mode-dropdown" style="display: none;">
+                  <div class="grok-mode-option" data-url="https://grok.com/chat">Grok</div>
+                  <div class="grok-mode-option" data-url="https://grok.com/chat?reasoningMode=deepsearch">Grok Deep Search</div>
+                  <div class="grok-mode-option" data-url="https://grok.com/chat?reasoningMode=thinking">Grok Thinking</div>
+                </div>
+              </div>
               <button class="platform-tag" data-platform="claude" data-url="https://claude.ai/new">Claude</button>
               <button class="platform-tag" data-platform="perplexity" data-url="https://perplexity.ai">Perplexity</button>
               <button class="platform-tag" data-platform="mistral" data-url="https://chat.mistral.ai/chat">Mistral</button>
@@ -5126,6 +5171,41 @@ scaling solutions.</p>
       // Initialize audience selector
       const audienceSelect = document.getElementById('audienceSelect');
       
+      // Handle Grok platform selection
+      document.addEventListener('DOMContentLoaded', () => {
+        const grokButton = document.querySelector('[data-platform="grok"]');
+        const grokDropdown = document.querySelector('.grok-mode-dropdown');
+        const grokOptions = document.querySelectorAll('.grok-mode-option');
+        let isGrokDropdownVisible = false;
+
+        // Hide dropdown when clicking outside
+        document.addEventListener('click', (e) => {
+          if (!e.target.closest('.platform-tag-container')) {
+            grokDropdown.style.display = 'none';
+            isGrokDropdownVisible = false;
+          }
+        });
+
+        // Toggle dropdown
+        grokButton.addEventListener('click', (e) => {
+          e.stopPropagation();
+          isGrokDropdownVisible = !isGrokDropdownVisible;
+          grokDropdown.style.display = isGrokDropdownVisible ? 'block' : 'none';
+        });
+
+        // Handle option selection
+        grokOptions.forEach(option => {
+          option.addEventListener('click', (e) => {
+            const selectedUrl = option.dataset.url;
+            const selectedText = option.textContent;
+            grokButton.dataset.url = selectedUrl;
+            grokButton.textContent = selectedText;
+            grokDropdown.style.display = 'none';
+            isGrokDropdownVisible = false;
+          });
+        });
+      });
+      
       // Set initial state based on URL params or default
       const urlParams = new URLSearchParams(window.location.search);
       const initialAudience = urlParams.get('audience') || 'everyone';

script.js

@@ -906,6 +906,7 @@ function openInChat(button, encodedPrompt) {
   if (!platform) return;
 
   const baseUrl = platform.dataset.url;
+  console.log(baseUrl);
   let url;
 
   switch (platform.dataset.platform) {
@@ -915,6 +916,9 @@ function openInChat(button, encodedPrompt) {
     case "chatgpt":
       url = `${baseUrl}?prompt=${encodeURIComponent(promptText)}`;
       break;
+    case "grok":
+      url = `${baseUrl}&q=${encodeURIComponent(promptText)}`;
+      break;
     case "claude":
       url = `${baseUrl}?q=${encodeURIComponent(promptText)}`;
       break;