Merge pull request #98: Fix: tldr, svgicons 1mb js file, svg & png pages

Fix: tldr, svgicons 1mb js file, svg & png pages

Author: lovestaco

.github/workflows/buid_deploy.yml

@@ -8,9 +8,9 @@ on:
 jobs:
   build-and-deploy:
     # Prod
-    runs-on: ubuntu-latest
+    # runs-on: ubuntu-latest
     # Self hosted
-    # runs-on: self-hosted
+    runs-on: self-hosted
     environment: production # This tells GitHub to use the production environment secrets
 
     steps:

frontend/astro.config.mjs

@@ -2,7 +2,6 @@
 import react from "@astrojs/react";
 import tailwind from "@astrojs/tailwind";
 import compressor from "astro-compressor";
-import icon from "astro-icon";
 import { defineConfig } from "astro/config";
 import path from "path";
 
@@ -20,7 +19,6 @@ export default defineConfig({
     react(),
     tailwind(),
     compressor({ gzip: { level: 9 }, brotli: true }),
-    icon()
     // sitemap({
     //   filter: (page) => !page.includes('404') && !page.includes('_astro'),
     //   changefreq: 'daily',

frontend/package-lock.json

@@ -31,6 +31,7 @@
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.7",
@@ -74,8 +75,6 @@
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
-    "@iconify-icon/react": "^3.0.3",
-    "@iconify-json/ic": "^1.2.4",
     "@tailwindcss/typography": "^0.5.19",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",

frontend/package.json

@@ -1,5 +1,5 @@
 import { toast } from '@/components/ToastProvider';
-import { IconSvg } from '@/components/ui/IconSvg';
+import { ClipboardCopyIcon } from '@radix-ui/react-icons';
 import Konva from 'konva';
 import React, { useCallback } from 'react';
 
@@ -198,8 +198,7 @@ const CopyPngButton: React.FC<CopyPngButtonProps> = ({
       onClick={copyAsPNG}
       className="inline-flex items-center justify-center px-4 py-3 text-sm font-medium text-slate-700 dark:text-slate-300 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 rounded transition-colors"
     >
-      <IconSvg
-        iconName="baseline-content-copy"
+      <ClipboardCopyIcon
         width="16"
         height="16"
         className="mr-2"

frontend/src/components/buttons/CopyPngButton.tsx

@@ -1,5 +1,5 @@
 import { toast } from '@/components/ToastProvider';
-import { IconSvg } from '@/components/ui/IconSvg';
+import { ClipboardCopyIcon } from '@radix-ui/react-icons';
 import React, { useCallback } from 'react';
 
 interface CopySvgButtonProps {
@@ -54,8 +54,7 @@ const CopySvgButton: React.FC<CopySvgButtonProps> = ({ iconData }) => {
       onClick={copyAsSVG}
       className="inline-flex items-center justify-center px-4 py-3 text-sm font-medium text-slate-700 dark:text-slate-300 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 rounded transition-colors"
     >
-      <IconSvg
-        iconName="baseline-content-copy"
+      <ClipboardCopyIcon
         width="16"
         height="16"
         className="mr-2"

frontend/src/components/buttons/CopySvgButton.tsx

@@ -1,5 +1,5 @@
+import { DownloadIcon } from '@radix-ui/react-icons';
 import React, { useCallback } from 'react';
-import { IconSvg } from '@/components/ui/IconSvg';
 
 interface DownloadSvgButtonProps {
   iconData: {
@@ -45,8 +45,7 @@ const DownloadSvgButton: React.FC<DownloadSvgButtonProps> = ({ iconData }) => {
       onClick={downloadAsSVG}
       className="inline-flex items-center justify-center px-4 py-3 text-sm font-medium text-black bg-yellow-300 hover:bg-yellow-400 rounded transition-colors"
     >
-      <IconSvg
-        iconName="outline-file-download"
+      <DownloadIcon
         width="16"
         height="16"
         className="mr-2"

frontend/src/components/buttons/DownloadSvgButton.tsx

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon/components';
+import { MagnifyingGlassIcon, Cross2Icon } from '@radix-ui/react-icons';
 ---
 
 <div id="searchbar-container" class="relative md:flex-1 md:max-w-sm md:mx-4">
@@ -9,9 +9,9 @@ import { Icon } from 'astro-icon/components';
     class="md:hidden p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
     aria-label="Open search"
   >
-    <Icon
-      name="ic:baseline-search"
-      class="w-6 h-6 text-gray-700 dark:text-gray-300"
+    <MagnifyingGlassIcon
+      client:load
+      className="w-6 h-6 text-gray-700 dark:text-gray-300"
     />
   </button>
 
@@ -25,9 +25,9 @@ import { Icon } from 'astro-icon/components';
       class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors flex-shrink-0"
       aria-label="Close search"
     >
-      <Icon
-        name="ic:baseline-close"
-        class="w-6 h-6 text-gray-700 dark:text-gray-300"
+      <Cross2Icon
+        client:load
+        className="w-6 h-6 text-gray-700 dark:text-gray-300"
       />
     </button>
     <input

frontend/src/components/search/SearchBar.astro

@@ -1,5 +1,4 @@
-import { IconSvg } from '@/components/ui/IconSvg';
-import { Icon } from '@iconify-icon/react';
+import { Cross2Icon, FileIcon, FileTextIcon, GearIcon, ImageIcon, ModulzLogoIcon, RocketIcon } from '@radix-ui/react-icons';
 import React, { useCallback, useEffect, useState } from 'react';
 
 // Types
@@ -534,17 +533,45 @@ const SearchPage: React.FC = () => {
     return null;
   }
 
+  const getCategoryIcon = (key: string) => {
+    switch (key) {
+      case 'tools':
+        return <GearIcon className="hidden md:block w-4 h-4 mr-1 flex-shrink-0" />;
+      case 'tldr':
+        return <FileIcon className="hidden md:block w-4 h-4 mr-1 flex-shrink-0" />;
+      case 'cheatsheets':
+        return <FileTextIcon className="hidden md:block w-4 h-4 mr-1 flex-shrink-0" />;
+      case 'png_icons':
+      case 'svg_icons':
+        return <ImageIcon className="hidden md:block w-4 h-4 mr-1 flex-shrink-0" />;
+      case 'emoji':
+        return <RocketIcon className="hidden md:block w-4 h-4 mr-1 flex-shrink-0" />;
+      case 'mcp':
+        return <ModulzLogoIcon className="hidden md:block w-4 h-4 mr-1 flex-shrink-0" />;
+      default:
+        return null;
+    }
+  };
+
   const categories = [
-    { key: 'all', icon: null, label: 'All' },
-    { key: 'tools', icon: 'ph:wrench', label: 'Tools' },
-    { key: 'tldr', icon: 'ic:baseline-menu-book', label: 'TLDR' },
-    { key: 'cheatsheets', icon: 'pepicons-pencil:file', label: 'Cheatsheets' },
-    { key: 'png_icons', icon: 'ph:file-png', label: 'PNG Icons' },
-    { key: 'svg_icons', icon: 'ph:file-svg', label: 'SVG Icons' },
-    { key: 'emoji', icon: 'ic:outline-emoji-emotions', label: 'Emojis' },
-    { key: 'mcp', icon: 'ic:outline-settings-suggest', label: 'MCP' },
+    { key: 'all', label: 'All' },
+    { key: 'tools', label: 'Tools' },
+    { key: 'tldr', label: 'TLDR' },
+    { key: 'cheatsheets', label: 'Cheatsheets' },
+    { key: 'png_icons', label: 'PNG Icons' },
+    { key: 'svg_icons', label: 'SVG Icons' },
+    { key: 'emoji', label: 'Emojis' },
+    { key: 'mcp', label: 'MCP' },
   ];
 
+  const formatCount = (count: number | undefined): string => {
+    if (count === undefined) return '';
+    if (count > 999) {
+      return `${Math.floor(count / 1000)}k+`;
+    }
+    return count.toString();
+  };
+
   const getAllCount = () => {
     if (Object.keys(availableCategories).length === 0) return undefined;
     return Object.values(availableCategories).reduce(
@@ -579,7 +606,7 @@ const SearchPage: React.FC = () => {
               Esc
             </kbd>
             <span className="text-sm">Clear results</span>
-            <IconSvg iconName="round-close" className="h-4 w-4" />
+            <Cross2Icon className="h-4 w-4" />
           </button>
         </div>
 
@@ -588,16 +615,15 @@ const SearchPage: React.FC = () => {
           <button
             onClick={() => handleCategoryClick('all')}
             onContextMenu={(e) => handleCategoryRightClick(e, 'all')}
-            className={`text-xs lg:text-sm w-full flex items-center justify-center gap-1 px-2 h-9 rounded-md whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${
-              activeCategory === 'all'
-                ? 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-md shadow-blue-500/50'
-                : 'border border-input bg-background hover:bg-accent hover:text-accent-foreground'
-            }`}
+            className={`text-xs lg:text-sm w-full flex items-center justify-center gap-1 px-2 h-9 rounded-md whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${activeCategory === 'all'
+              ? 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-md shadow-blue-500/50'
+              : 'border border-input bg-background hover:bg-accent hover:text-accent-foreground'
+              }`}
           >
             All{' '}
             {activeCategory === 'all' &&
               Object.keys(availableCategories).length > 0 &&
-              `(${getAllCount()})`}
+              `(${formatCount(getAllCount())})`}
           </button>
 
           {categories
@@ -612,30 +638,23 @@ const SearchPage: React.FC = () => {
                   ? availableCategories[category.key]
                   : undefined);
 
-              if (!category.icon) return null;
 
               const buttonContent = (
                 <>
-                  <Icon
-                    icon={category.icon}
-                    width="18"
-                    height="16"
-                    className="lg:w-4 lg:h-4 flex-shrink-0"
-                  />
+                  {getCategoryIcon(category.key)}
                   <span className="truncate">{category.label}</span>
                   {count !== undefined && (
                     <span className="flex-shrink-0 ml-0.5">
-                      ({count.toLocaleString()})
+                      ({formatCount(count)})
                     </span>
                   )}
                 </>
               );
 
-              const buttonClassName = `text-xs lg:text-sm w-full flex items-center gap-1 px-2 h-9 rounded-md whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${
-                isActive || selectedCategories.includes(category.key)
-                  ? 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-md shadow-blue-500/50'
-                  : 'border border-input bg-background hover:bg-accent hover:text-accent-foreground hover:shadow-md hover:shadow-gray-500/30 dark:hover:bg-slate-900 dark:hover:shadow-slate-900/50'
-              }`;
+              const buttonClassName = `text-xs lg:text-sm w-full flex items-center gap-1 px-2 h-9 rounded-md whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${isActive || selectedCategories.includes(category.key)
+                ? 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-md shadow-blue-500/50'
+                : 'border border-input bg-background hover:bg-accent hover:text-accent-foreground hover:shadow-md hover:shadow-gray-500/30 dark:hover:bg-slate-900 dark:hover:shadow-slate-900/50'
+                }`;
 
               if (isActive || selectedCategories.includes(category.key)) {
                 return (
@@ -754,4 +773,4 @@ const SearchPage: React.FC = () => {
   );
 };
 
-export default SearchPage;
+export default SearchPage;