Add Mastodon links

dguo · Mar 21, 2024 · b4cb5df · b4cb5df
1 parent 59fca23
commit b4cb5df
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 4 deletions.
diff --git a/.env b/.env
@@ -1,6 +1,7 @@
 PUBLIC_AUTHOR_EMAIL="[email protected]"
 PUBLIC_AUTHOR_NAME="Danny Guo"
 PUBLIC_AUTHOR_GITHUB_NAME="dguo"
+PUBLIC_AUTHOR_MASTODON_HANDLE="[email protected]"
 PUBLIC_AUTHOR_TWITTER_NAME="dannyguo"
 PUBLIC_DISQUS_NAME="dannyguo"
 PUBLIC_DOMAIN="https://www.dannyguo.com"

diff --git a/public/css/general.css b/public/css/general.css
@@ -255,6 +255,14 @@ button:hover {
   background-color: #0c85d0;
 }
 
+.mastodon {
+  background-color: #6364ff;
+}
+
+.mastodon:hover {
+  background-color: #563acc;
+}
+
 .github {
   background-color: #24292e;
 }

diff --git a/public/images/icons.svg b/public/images/icons.svg
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -119,6 +119,16 @@ const title = props.title || import.meta.env.PUBLIC_AUTHOR_NAME;
                         </svg>
                         Twitter
                     </a>
+                    <a
+                        rel="me"
+                        href={`https://${import.meta.env.PUBLIC_AUTHOR_MASTODON_HANDLE.split('@')[1]}/@${import.meta.env.PUBLIC_AUTHOR_MASTODON_HANDLE.split("@")[0]}`}
+                        class="link-button mastodon"
+                    >
+                        <svg class="icon icon-mastodon">
+                            <use xlink:href="/images/icons.svg#icon-mastodon"></use>
+                        </svg>
+                        Mastodon
+                    </a>
                     <a
                         href={`https://github.com/${
                             import.meta.env.PUBLIC_AUTHOR_GITHUB_NAME

diff --git a/src/layouts/BlogPostLayout.astro b/src/layouts/BlogPostLayout.astro
@@ -125,10 +125,8 @@ const nextPost = posts[postIndex - 1] ?? null;
         Follow me on <a
             href={`https://twitter.com/${
                 import.meta.env.PUBLIC_AUTHOR_TWITTER_NAME
-            }`}>Twitter</a
-        > or subscribe to my <a href="/newsletter">free newsletter</a> or <a
-            href="/blog/feed.xml"
-            type="application/rss+xml">RSS feed</a
+            }`}>Twitter</a> or <a href={`https://${import.meta.env.PUBLIC_AUTHOR_MASTODON_HANDLE.split('@')[1]}/@${import.meta.env.PUBLIC_AUTHOR_MASTODON_HANDLE.split('@')[0]}`}>Mastodon</a> or subscribe to my <a href="/newsletter">newsletter</a> or <a
+            href="/blog/feed.xml" type="application/rss+xml">RSS feed</a
         > for future posts.
     </p>