Merge branch 'main' into main

.vscode/settings.json

@@ -4,5 +4,12 @@
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "tailwindCSS.experimental.classRegex": [["[\"'`]([^\"'`]*).*?[\"'`]"]]
+  "tailwindCSS.experimental.classRegex": [
+    [
+      "[\"'`]([^\"'`]*).*?[\"'`]"
+    ]
+  ],
+  "[svelte]": {
+    "editor.defaultFormatter": "svelte.svelte-vscode"
+  }
 }

src/data/index.ts

@@ -0,0 +1,7 @@
+import type { iSVG } from '@/types/svg';
+import { svgs } from './svgs';
+
+export const svgsData = svgs.map((svg: iSVG, index: number) => {
+    svg.id = index;
+    return svg;
+});

src/data/svgs.ts

@@ -1805,42 +1805,36 @@ export const svgs: iSVG[] = [
     url: 'https://www.linux.org/'
   },
   {
-    id: 5876149632,
     title: 'XD',
     category: 'Design',
     route: '/library/adobe-xd.svg',
     url: 'https://helpx.adobe.com/xd/get-started.html'
   },
   {
-    id: 5882201288,
     title: 'Axure',
     category: 'Design',
     route: '/library/axure.svg',
     url: 'https://www.axure.com/'
   },
   {
-    id: 6841462408,
     title: 'Penpot',
     category: 'Design',
     route: '/library/penpot.svg',
     url: 'https://penpot.app/'
   },
   {
-    id: 6481118154,
     title: 'Sketch',
     category: 'Design',
     route: '/library/sketch.svg',
     url: 'https://www.sketch.com/'
   },
   {
-    id: 5822536555,
     title: 'Gimp',
     category: 'Design',
     route: '/library/gimp.svg',
     url: 'https://www.gimp.org/'
   },
   {
-    id: 253,
     title: 'Ubuntu',
     category: 'Software',
     route: '/library/ubuntu.svg',

src/routes/+page.svelte

@@ -2,8 +2,8 @@
   import type { iSVG } from '@/types/svg';
 
   // Get all svgs:
-  import { svgs } from '@/data/svgs';
+  import { svgsData } from '@/data';
-  const allSvgs = JSON.parse(JSON.stringify(svgs));
+  const allSvgs = JSON.parse(JSON.stringify(svgsData));
 
   // Components:
   import Search from '@/components/search.svelte';
@@ -12,13 +12,17 @@
   import Grid from '@/components/grid.svelte';
   import NotFound from '@/components/notFound.svelte';
 
+  // Icons:
+  import ArrowsClockWise from 'phosphor-svelte/lib/ArrowsClockwise';
+  import ArrowSquareOut from 'phosphor-svelte/lib/ArrowSquareOut';
+
   // Search:
   let searchTerm = '';
   let filteredSvgs: iSVG[] = [];
 
   if (searchTerm.length === 0) {
     filteredSvgs = allSvgs.sort((a: iSVG, b: iSVG) => {
-      return a.title.localeCompare(b.title);
+      return b.id! - a.id!;
     });
   }
 
@@ -33,6 +37,32 @@
     searchTerm = '';
     searchSvgs();
   };
+
+  // Sort:
+  let sorted: boolean = false;
+
+  const sort = () => {
+    if (sorted) {
+      sortByLatest();
+    } else {
+      sortAlphabetically();
+    }
+    sorted = !sorted;
+  };
+
+  // Sort alphabetically:
+  const sortAlphabetically = () => {
+    filteredSvgs = filteredSvgs.sort((a: iSVG, b: iSVG) => {
+      return a.title.localeCompare(b.title);
+    });
+  };
+
+  // Sort by latest:
+  const sortByLatest = () => {
+    filteredSvgs = filteredSvgs.sort((a: iSVG, b: iSVG) => {
+      return b.id! - a.id!;
+    });
+  };
 </script>
 
 <svelte:head>
@@ -46,6 +76,23 @@
     clearSearch={() => clearSearch()}
     placeholder={`Search ${filteredSvgs.length} logos...`}
   />
+  <div class={`flex items-center justify-between my-4 ${filteredSvgs.length === 0 && 'hidden'}`}>
+    <button
+      class="flex items-center justify-center space-x-2 rounded-md py-1.5 text-sm font-medium text-neutral-500 dark:text-neutral-400 hover:text-dark dark:hover:text-white duration-100 transition-colors"
+      on:click={() => sort()}
+    >
+      <ArrowsClockWise size={14} />
+      <span>{sorted ? 'Sort by latest' : 'Sort alphabetically'}</span>
+    </button>
+    <a
+      class="flex items-center justify-center space-x-2 rounded-md py-1.5 text-sm font-medium text-neutral-500 dark:text-neutral-400 hover:text-dark dark:hover:text-white duration-100 transition-colors"
+      href="https://github.com/pheralb/svgl?tab=readme-ov-file#-getting-started"
+      target="_blank"
+    >
+      <span>Submit SVG</span>
+      <ArrowSquareOut size={14} />
+    </a>
+  </div>
   <Grid>
     {#each filteredSvgs as svg}
       <SvgCard svgInfo={svg} />

src/types/svg.ts

@@ -1,6 +1,7 @@
 import type { tCategory } from './categories';
 
 export interface iSVG {
+  id?: number;
   title: string;
   category: tCategory;
   route: