Update Mastodon links (#36)

public/.well-known/webfinger

@@ -1,23 +1,23 @@
 {
-  "subject": "acct:iansu@mas.to",
+  "subject": "acct:iansu@cosocial.ca",
   "aliases": [
-    "https://mas.to/@iansu",
-    "https://mas.to/users/iansu"
+    "https://cosocial.ca/@iansu",
+    "https://cosocial.ca/users/iansu"
   ],
   "links": [
     {
       "rel": "http://webfinger.net/rel/profile-page",
       "type": "text/html",
-      "href": "https://mas.to/@iansu"
+      "href": "https://cosocial.ca/@iansu"
     },
     {
       "rel": "self",
       "type": "application/activity+json",
-      "href": "https://mas.to/users/iansu"
+      "href": "https://cosocial.ca/users/iansu"
     },
     {
       "rel": "http://ostatus.org/schema/1.0/subscribe",
-      "template": "https://mas.to/authorize_interaction?uri={uri}"
+      "template": "https://cosocial.ca/authorize_interaction?uri={uri}"
     }
   ]
 }

src/components/footer.astro

@@ -5,15 +5,18 @@ const currentYear = new Date().getFullYear();
 ---
 
 <div
-  class="mt-16 mb-8 flex justify-between border-t pt-4 text-xs text-gray-500 dark:border-gray-600 dark:text-gray-500 md:text-sm"
+  class="mt-16 mb-8 flex justify-between border-t pt-4 text-xs text-gray-500 dark:border-gray-800 dark:text-gray-500 md:text-sm"
 >
   <div>
     &copy; {currentYear}
     <a href="/" class="hover:text-black hover:underline dark:hover:text-gray-400">Ian Sutherland</a>. All Rights
     Reserved.
   </div>
   <div class="mt-1 space-x-2">
-    <a href="https://mas.to/@iansu" class="inline-block h-3 w-3 hover:text-black dark:hover:text-white md:h-4 md:w-4">
+    <a
+      href="https://cosocial.ca/@iansu"
+      class="inline-block h-3 w-3 hover:text-black dark:hover:text-white md:h-4 md:w-4"
+    >
       <MastodonIcon />
     </a>
     <a

src/components/navigation-toggle.astro

@@ -1,7 +1,7 @@
 ---
 ---
 
-<a id="navigation-toggle" href="/navigation">
+<a id="navigation-toggle" href="/navigation" title="Navigation menu (cmd+k)">
   <div class="h-10 w-10 cursor-pointer px-2 pt-3">
     <svg
       class="navigation-icon"

src/layouts/default.astro

@@ -40,7 +40,7 @@ const noFollow = Astro.props.noFollow === undefined ? false : Astro.props.noFoll
     <meta name="twitter:card" content="summary" />
     <meta name="twitter:site" content="iansu" />
     <link rel="canonical" href={canonicalURL} />
-    <link rel="me" href="https://mas.to/@iansu" />
+    <link rel="me" href="https://cosocial.ca/@iansu" />
     <link rel="icon" href="/favicon.ico" />
     <title>{title}</title>
     <GoogleAnalytics id="UA-156492295-1" />

src/pages/about.astro

@@ -25,7 +25,7 @@ import {
     <p>
       If you&rsquo;re interested in my open source work take a look at my
       <a href="https://github.com/iansu">GitHub</a> profile or follow me on
-      <a href="https://twitter.com/iansu">Twitter</a>. If you&rsquo;re interested in my professional work you can
+      <a href="https://cosocial.ca/@iansu">Mastodon</a>. If you&rsquo;re interested in my professional work you can
       connect with me on
       <a href="https://www.linkedin.com/in/iansu">LinkedIn</a>.
     </p>
@@ -48,7 +48,7 @@ import {
     <h3 class="mb-3 mt-12 text-lg font-bold">Elsewhere</h3>
     <ul class="flex list-none flex-wrap">
       <li class="mr-6 mb-2">
-        <a href="https://mas.to/@iansu" class="inline-block h-6 w-6">
+        <a href="https://cosocial.ca/@iansu" class="inline-block h-6 w-6">
           <MastodonIcon />
         </a>
       </li>
@@ -63,7 +63,7 @@ import {
         </a>
       </li>
       <li class="mr-6 mb-2">
-        <a href="https://discordapp.com/users/iansu#7006" class="inline-block h-6 w-6">
+        <a href="https://discordapp.com/users/iansutherland" class="inline-block h-6 w-6">
           <DiscordIcon />
         </a>
       </li>
@@ -95,10 +95,17 @@ import {
       <h3 class="mb-3 text-lg font-bold">Get In Touch</h3>
       <p>
         Got something to say? Want to take over the world? Send me a message on{' '}
-        <a href="https://twitter.com/iansu">Twitter</a> or, if you&rsquo;re not into the whole brevity thing, <a
-          href="mailto:hello@iansutherland.ca">send me an email</a
+        <a href="https://cosocial.ca/@iansu">Mastodon</a> or, if you&rsquo;re not into the whole brevity thing, <a
+          id="about-contact-info"
+          href="#">send me an email</a
         >.
       </p>
     </div>
   </div>
 </Layout>
+
+<script>
+  document
+    .getElementById('about-contact-info')
+    ?.setAttribute('href', ['mailto', ':', 'hello', '@', 'iansutherland.ca'].join(''));
+</script>

src/pages/index.astro

@@ -21,7 +21,7 @@ import { MastodonIcon, GitHubIcon } from '@components/icons.astro';
         </div>
         <div>
           <div class="mt-8 flex justify-center space-x-5 text-black dark:text-white">
-            <a href="https://mas.to/@iansu" class="inline-block h-8 w-8">
+            <a href="https://cosocial.ca/@iansu" class="inline-block h-8 w-8">
               <MastodonIcon />
             </a>
             <a href="https://github.com/iansu" class="inline-block h-8 w-8">

src/pages/links.astro

@@ -18,7 +18,7 @@ import {
     <LinkBox href="/" title="IanSutherland.ca" description="Read my bio or my blog">
       <ProfilePicture slot="icon" size={48} borderSize="border-0" />
     </LinkBox>
-    <LinkBox href="https://mas.to/@iansu" title="Mastodon" description="Follow me on Mastodon">
+    <LinkBox href="https://cosocial.ca/@iansu" title="Mastodon" description="Follow me on Mastodon">
       <MastodonIcon slot="icon" />
     </LinkBox>
     <LinkBox href="https://github.com/iansu" title="GitHub" description="Follow my work on GitHub">
@@ -27,7 +27,7 @@ import {
     <LinkBox href="https://twitter.com/iansu" title="Twitter" description="Follow me on Twitter">
       <TwitterIcon slot="icon" />
     </LinkBox>
-    <LinkBox href="https://discordapp.com/users/iansu#7006" title="Discord" description="Message me on Discord">
+    <LinkBox href="https://discordapp.com/users/iansutherland" title="Discord" description="Message me on Discord">
       <DiscordIcon slot="icon" />
     </LinkBox>
     <LinkBox href="https://www.linkedin.com/in/iansu" title="LinkedIn" description="Connect with me on LinkedIn">

src/styles/global.css

@@ -7,38 +7,38 @@ code {
     monospace;
 }
 
-.content-links a,
-.content-links a:visited {
+.content-links a {
   color: black;
   border-bottom: 2px solid rgba(177, 229, 251, 0.6);
   box-shadow: inset 0 -8px 0 rgba(177, 229, 251, 0.6);
   text-decoration: none;
 }
 
+.content-links a:visited {
+  border-bottom: 2px solid rgba(80, 203, 255, 0.6);
+  text-decoration: none;
+}
+
 .content-links a:hover {
   background-color: rgba(177, 229, 251, 0.6);
   border-bottom: 2px solid rgba(177, 229, 251, 0.6);
   text-decoration: none;
 }
 
-.content-links a:active {
-  color: black;
-}
-
-html.dark .content-links a,
-html.dark .content-links a:visited {
+html.dark .content-links a {
   color: rgba(229, 231, 235, 1);
   border-bottom: 2px solid rgb(45, 98, 121);
   box-shadow: inset 0 -8px 0 rgb(45, 98, 121);
   text-decoration: none;
 }
 
+html.dark .content-links a:visited {
+  border-bottom: 2px solid rgb(105, 151, 171);
+  text-decoration: none;
+}
+
 html.dark .content-links a:hover {
   background-color: rgb(45, 98, 121);
   border-bottom: 2px solid rgb(45, 98, 121);
   text-decoration: none;
 }
-
-html.dark .content-links a:active {
-  color: rgba(229, 231, 235, 1);
-}