add support page

src/components/IconList.svelte

@@ -2,16 +2,29 @@
   import Icon from './Icon.svelte'
 
   export let links = []
+
+  function isExternal(link) {
+    return /^https?\:\/\//.test(link)
+  }
+
+  $: list = links.map((link) => ({
+    ...link,
+    external: isExternal(link.href),
+  }))
 </script>
 
 <ul>
-  {#each links as { href, name, icon }}
+  {#each list as { href, name, icon, external }}
-    <li>
+    <a
-      <a rel="noopener noreferrer" {href} target="_blank">
+      rel={external ? 'noopener noreferrer' : ''}
+      {href}
+      target={external ? '_blank' : ''}
+    >
+      <li>
         <Icon class="icon" {icon} />
         {name}
-      </a>
+      </li>
-    </li>
+    </a>
   {/each}
 </ul>
 
@@ -22,19 +35,20 @@
     padding: 0;
   }
 
-  li {
+  a {
     transition: transform 200ms ease;
     padding: 0.75em 0.5em;
     cursor: pointer;
     border-radius: 0.5em;
+    display: block;
   }
 
-  li:hover {
+  a:hover {
     box-shadow: 0px 6px 6px -3px #00000012;
     transform: translateY(0.25em) translateX(0.15em) scale(1.05);
   }
 
-  li :global(.icon) {
+  a :global(.icon) {
     transform: translateY(0.3em);
     font-size: 2em;
     margin-right: 0.5rem;

src/routes/contact.svelte

@@ -15,6 +15,7 @@
       icon: 'logo-github',
     },
     { href: '/privacy', name: 'Privacy Policy', icon: 'finger-print-outline' },
+    { href: '/support', name: 'Support', icon: 'heart-sharp' },
   ]
 </script>
 

static/icons/heart-sharp.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Heart</title><path d='M256 448l-9-6c-42.78-28.57-96.91-60.86-137-108.32-42.25-50-62.52-101.35-62-157C48.63 114.54 98.46 64 159.08 64c48.11 0 80.1 28 96.92 48.21C272.82 92 304.81 64 352.92 64c60.62 0 110.45 50.54 111.08 112.65.56 55.68-19.71 107-62 157-40.09 47.49-94.22 79.78-137 108.35z'/></svg>