commit 5f26eb7576b2d224006f6f376c5699d9282c01f7 · bretton.dev/socialmeshes-app

+2 -2

index.html

···

       2
       2
        
       <html lang="en">

     

       3
       3
        
         <head>

     

       4
       4
        
           <meta charset="UTF-8" />

     

       5
       5
       -
           <link rel="icon" type="image/svg+xml" href="/vite.svg" />

     

       5
       5
       +
           <link rel="icon" type="image/svg+xml" href="/lightning.svg" />

     

       6
       6
        
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     

       7
       7
       -
           <title>Vite + React + TS</title>

     

       7
       7
       +
           <title>Social Meshes</title>

     

       8
       8
        
         </head>

     

       9
       9
        
         <body>

     

       10
       10
        
           <div id="root"></div>

+3

public/lightning.svg

···

       1
       1
       +
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3b82f6">

     

       2
       2
       +
         <path d="M13 10V3L4 14h7v7l9-11h-7z" fill="#3b82f6" stroke="#3b82f6" stroke-width="1" stroke-linejoin="round" stroke-linecap="round"/>

     

       3
       3
       +
       </svg>

+1 -1

src/App.tsx

···

       12
       12
        
           network: 'atproto',

     

       13
       13
        
           query: '',

     

       14
       14
        
           tags: [],

     

       15
       15
       -
           sort: 'relevance'

     

       15
       15
       +
           sort: 'stars'

     

       16
       16
        
         });

     

       17
       17
        
       

     

       18
       18
        
         useEffect(() => {

-2

src/components/FilterToolbar.tsx

···

       13
       13
        
       }

     

       14
       14
        
       

     

       15
       15
        
       const sortOptions: { value: FilterState['sort']; label: string }[] = [

     

       16
       16
       -
         { value: 'relevance', label: 'Relevance' },

     

       17
       17
       -
         { value: 'updated', label: 'Recently Updated' },

     

       18
       16
        
         { value: 'stars', label: 'Most Stars' },

     

       19
       17
        
         { value: 'alphabetical', label: 'Alphabetical' }

     

       20
       18
        
       ];

+23 -7

src/components/ProjectCard.tsx

···

       34
       34
        
                 </svg>

     

       35
       35
        
               );

     

       36
       36
        
             case 'repo':

     

       37
       37
       -
               return (

     

       38
       38
       -
                 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">

     

       39
       39
       -
                   <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>

     

       40
       40
       -
                 </svg>

     

       41
       41
       -
               );

     

       37
       37
       +
               // Use GitHub icon only for GitHub URLs, otherwise use code icon

     

       38
       38
       +
               if (url?.includes('github.com')) {

     

       39
       39
       +
                 return (

     

       40
       40
       +
                   <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">

     

       41
       41
       +
                     <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>

     

       42
       42
       +
                   </svg>

     

       43
       43
       +
                 );

     

       44
       44
       +
               } else {

     

       45
       45
       +
                 return (

     

       46
       46
       +
                   <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">

     

       47
       47
       +
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />

     

       48
       48
       +
                   </svg>

     

       49
       49
       +
                 );

     

       50
       50
       +
               }

     

       42
       51
        
             case 'docs':

     

       43
       52
        
               return (

     

       44
       53
        
                 <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">

     
···

       78
       87
        
           activitypub: 'bg-purple-900 text-purple-200'

     

       79
       88
        
         };

     

       80
       89
        
       

     

       90
       90
       +
         const homepageLink = project.links?.find(link => link.kind === 'homepage')?.url;

     

       91
       91
       +
       

     

       81
       92
        
         return (

     

       82
       93
        
           <div className="bg-gray-800 rounded-lg overflow-hidden border border-gray-700 hover:border-gray-600 transition-colors h-full flex flex-col">

     

       83
       94
        
             <div className="p-4 flex flex-col flex-grow space-y-3">

     

       84
       95
        
               <div className="flex items-start justify-between">

     

       85
       85
       -
                 <div className="flex items-center space-x-3">

     

       96
       96
       +
                 <a

     

       97
       97
       +
                   href={homepageLink}

     

       98
       98
       +
                   target="_blank"

     

       99
       99
       +
                   rel="noopener noreferrer"

     

       100
       100
       +
                   className="flex items-center space-x-3 hover:opacity-80 transition-opacity cursor-pointer"

     

       101
       101
       +
                 >

     

       86
       102
        
                   {project.logoUrl ? (

     

       87
       103
        
                     <img

     

       88
       104
        
                       src={project.logoUrl}

     
···

       105
       121
        
                       </p>

     

       106
       122
        
                     )}

     

       107
       123
        
                   </div>

     

       108
       108
       -
                 </div>

     

       124
       124
       +
                 </a>

     

       109
       125
        
                 {project.type === 'semi-platform' && (

     

       110
       126
        
                   <div className="relative group">

     

       111
       127
        
                     <svg

+4 -3

src/components/TopBar.tsx

···

       43
       43
        
                 </div>

     

       44
       44
        
       

     

       45
       45
        
                 <a

     

       46
       46
       -
                   href="https://github.com/socialmeshes"

     

       46
       46
       +
                   href="https://tangled.sh/@bretton.dev/socialmeshes-app"

     

       47
       47
        
                   target="_blank"

     

       48
       48
        
                   rel="noopener noreferrer"

     

       49
       49
        
                   className="text-gray-400 hover:text-white transition-colors"

     

       50
       50
       +
                   title="View source code"

     

       50
       51
        
                 >

     

       51
       51
       -
                   <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">

     

       52
       52
       -
                     <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>

     

       52
       52
       +
                   <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">

     

       53
       53
       +
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />

     

       53
       54
        
                   </svg>

     

       54
       55
        
                 </a>

     

       55
       56
        
               </div>

+1 -1

src/types/project.ts

···

       26
       26
        
         network: Network;

     

       27
       27
        
         query: string;

     

       28
       28
        
         tags: string[];

     

       29
       29
       -
         sort: "relevance" | "updated" | "stars" | "alphabetical";

     

       29
       29
       +
         sort: "stars" | "alphabetical";

     

       30
       30
        
       };

+2 -10

src/utils/projectUtils.ts

···

       32
       32
        
         }

     

       33
       33
        
       

     

       34
       34
        
         switch (filters.sort) {

     

       35
       35
       -
           case 'updated':

     

       36
       36
       -
             return [...filtered].sort((a, b) => {

     

       37
       37
       -
               const dateA = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;

     

       38
       38
       -
               const dateB = b.updatedAt ? new Date(b.updatedAt).getTime() : 0;

     

       39
       39
       -
               return dateB - dateA;

     

       40
       40
       -
             });

     

       41
       41
       -
           

     

       42
       35
        
           case 'stars':

     

       43
       36
        
             return [...filtered].sort((a, b) => (b.stars || 0) - (a.stars || 0));

     

       44
       44
       -
           

     

       37
       37
       +
       

     

       45
       38
        
           case 'alphabetical':

     

       46
       39
        
             return [...filtered].sort((a, b) => a.name.localeCompare(b.name));

     

       47
       47
       -
           

     

       48
       48
       -
           case 'relevance':

     

       40
       40
       +
       

     

       49
       41
        
           default:

     

       50
       42
        
             return filtered;

     

       51
       43
        
         }