Add social media links to page footer

Also deleted the Places section in the home page since those links are
now in the footer.

_components/footer.tsx

@@ -1,6 +1,23 @@
 export default function({ comp }) {
+  const {
+    Forgejo: ForgejoIcon,
+    Mastodon: MastodonIcon,
+    Mail: MailIcon,
+  } = comp.icons;
+
   return (
     <footer className="page-footer">
+      <div className="social-links">
+        <a href="https://code.fosterhangdaan.com/foster" title="Forgejo" target="_blank">
+          <ForgejoIcon className="icon"/>
+        </a>
+        <a href="https://mastodon.online/@foster" title="Mastodon" target="_blank">
+          <MastodonIcon className="icon"/>
+        </a>
+        <a href="mailto:foster@hangdaan.email" title="eMail">
+          <MailIcon className="icon"/>
+        </a>
+      </div>
       <p>Copyright &copy; 2023 Foster Hangdaan</p>
       <p>Made with <a href="https://deno.land/" target="_blank">Deno</a>, <a href="https://lume.land/" target="_blank">Lume</a>, <a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a> and lots of <span className="heart">{ comp.icons.Heart() }</span>.</p>
     </footer>

_components/icons/Forgejo.tsx

@@ -0,0 +1,10 @@
+// Icon from Simple Icons
+
+export default function() {
+  return (
+    <svg role="img" viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+      <title>Forgejo</title>
+      <path d="M16.7773 0c1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.1175a7.0759 7.0759 0 0 1 4.148-1.4205l.1176-.001 1.3385.0002c.4973-.8827 1.4434-1.4788 2.5288-1.4788 1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.319c.8827.4973 1.4788 1.4434 1.4788 2.5287 0 1.602-1.2986 2.9005-2.9005 2.9005-1.6018 0-2.9004-1.2986-2.9004-2.9005 0-1.0853.596-2.0314 1.4788-2.5287l-.0002-9.9831c0-3.887 3.1195-7.0453 6.9915-7.108l.1176-.001h1.3385C14.7458.5962 15.692 0 16.7773 0ZM7.2227 19.9052c-.6596 0-1.1943.5347-1.1943 1.1943s.5347 1.1943 1.1943 1.1943 1.1944-.5347 1.1944-1.1943-.5348-1.1943-1.1944-1.1943Zm9.5546-10.4644c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Zm0-7.7346c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Z"/>
+    </svg>
+  );
+}

_components/icons/Mastodon.tsx

@@ -0,0 +1,10 @@
+// Icon from Simple Icons
+
+export default function() {
+  return (
+    <svg role="img" viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+      <title>Mastodon</title>
+      <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
+    </svg>
+  );
+}

_components/icons/README.org

@@ -1,5 +1,3 @@
 #+title: Icons
 
-Icons as TSX components.
+Icons as TSX components. Icons are obtained from Tabler Icons and Simple Icons.
-
-All icons are from Tabler Icons.

_includes/styles/components/footer.scss

@@ -4,6 +4,24 @@ .page-footer {
   margin: 0 auto;
   padding: 1rem;
 
+  .social-links {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+
+    a {
+      padding: 0.5rem 0.5rem 0.25rem 0.5rem;
+      color: var(--color-fg);
+      border-radius: 5px;
+      &:hover {
+        background-color: var(--color-bg--layer-01);
+      }
+    }
+  }
+
   .heart {
     color: var(--color-red);
   }

index.tsx

@@ -27,18 +27,6 @@ export default function({ comp }) {
         <p>The primary method of reaching me is through my email: <a href="mailto:foster@hangdaan.email">foster@hangdaan.email</a>.</p>
         <p>If you'd like an encrypted response, you can send me your GPG public key. You can find mine in the <a href="#gpg">GPG Key</a> section of this page.</p>
       </section>
-      <section>
-        <h2 id="places">{comp.icons.GPS()} Places</h2>
-        <p>Other places where you can find me:</p>
-        <ul>
-          <li>
-            <a href="https://code.fosterhangdaan.com/foster" target="_blank">Forgejo</a>
-          </li>
-          <li>
-            <a href="https://mastodon.online/@foster" target="_blank">Mastodon</a>
-          </li>
-        </ul>
-      </section>
       <section>
         <h2 id="gpg">{comp.icons.Key()} GPG Key</h2>
         <p>