microlink preview

Author: thinhphoenix

bun.lock

@@ -46,7 +46,45 @@
   <!-- Requirements Note -->
   <div class="mt-3 flex items-center gap-2 text-xs text-gray-500">
     <i class="ph ph-terminal text-gray-400"></i>
-    <span>Requires <a href="https://cli.github.com/" target="_blank" class="text-blue-400 hover:text-blue-300 underline">GitHub CLI (gh)</a> to be installed</span>
+    <span>Requires 
+      <span class="link-preview-container inline-block relative group">
+        <a href="https://cli.github.com/" target="_blank" class="text-blue-400 hover:text-blue-300 underline">GitHub CLI (gh)</a>
+        <!-- Link Preview Panel -->
+        <div class="link-preview-panel absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-[280px] opacity-0 invisible translate-y-2 transition-all duration-300 ease-out z-50 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 pointer-events-none">
+          <div class="bg-[#1a1a1a] border border-white/10 overflow-hidden shadow-2xl">
+            <!-- Preview Image -->
+            <div class="relative h-[160px] bg-gradient-to-br from-gray-800 to-gray-900 overflow-hidden">
+              <img 
+                src="https://api.microlink.io/?url=https://cli.github.com/&screenshot=true&meta=false&embed=screenshot.url"
+                alt="GitHub CLI Preview" 
+                class="absolute inset-0 w-full h-full object-cover"
+                onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
+              />
+              <!-- Fallback -->
+              <div class="hidden absolute inset-0 items-center justify-center bg-gradient-to-br from-gray-800 to-gray-900">
+                <svg class="w-12 h-12 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
+                </svg>
+              </div>
+              <div class="absolute inset-0 bg-gradient-to-t from-[#1a1a1a] via-transparent to-transparent"></div>
+            </div>
+            <!-- Preview Content -->
+            <div class="p-3">
+              <div class="flex items-center gap-2 mb-1">
+                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
+                </svg>
+                <span class="text-xs text-gray-400">cli.github.com</span>
+              </div>
+              <p class="text-xs text-gray-500 line-clamp-2">Take GitHub to the command line. GitHub CLI brings GitHub to your terminal.</p>
+            </div>
+          </div>
+          <!-- Arrow -->
+          <div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-[#1a1a1a] border-r border-b border-white/10 rotate-45"></div>
+        </div>
+      </span>
+      to be installed
+    </span>
   </div>
 </div>