socials

Author: Essential Randomness

astro.config.mjs

@@ -1,4 +1,7 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
+import icon from "astro-icon";
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  integrations: [icon()],
+});

package.json

@@ -10,8 +10,12 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.4.8",
     "@astrojs/check": "^0.5.6",
+    "astro": "^4.4.8",
+    "astro-icon": "^1.1.0",
     "typescript": "^5.3.3"
+  },
+  "devDependencies": {
+    "@iconify-json/simple-icons": "^1.1.93"
   }
-}
+}

public/dreamwidth.png

@@ -1,6 +1,7 @@
 ---
 import ComingSoon from "../images/coming-soon.png";
 import { Image } from "astro:assets";
+import { Icon } from "astro-icon/components";
 
 const title = "FujoCoded – Coming April 1st, 2024";
 const description = "Not a joke. (Well, ok, a tad bit of a joke.)";
@@ -76,6 +77,23 @@ const preview = "http://fujocoded.com/og-preview.png";
       />
       <input type="submit" value="Subscribe" />
     </form>
+    <div class="socials">
+      <a href="https://www.tumblr.com/fujocoded"
+        ><Icon name="simple-icons:tumblr" /></a
+      >
+      <a href="https://twitter.com/fujoc0ded"
+        ><Icon name="simple-icons:twitter" /></a
+      >
+      <a href="https://blorbo.social/@fujocoded"
+        ><Icon name="simple-icons:mastodon" /></a
+      >
+      <a href="https://bsky.app/profile/fujocoded.bsky.social"
+        ><Icon name="simple-icons:bluesky" /></a
+      >
+      <a href="https://fujocoded.dreamwidth.org/"
+        ><img src="/dreamwidth.png" /></a
+      >
+    </div>
   </body>
 </html>
 <style>
@@ -119,10 +137,52 @@ const preview = "http://fujocoded.com/og-preview.png";
     background-color: #f0ae28;
   }
 
+  .socials {
+    margin-top: 25px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+  }
+
+  .socials a {
+    flex-shrink: 0;
+    display: flex;
+  }
+
+  .socials img,
+  .socials svg {
+    display: block;
+    height: 50px;
+    width: 50px;
+    aspect-ratio: 1;
+    border: 3px solid black;
+    border-radius: 100%;
+    color: black;
+    flex-shrink: 0;
+    padding: 5px;
+    max-width: 100%;
+  }
+
+  .socials img:hover,
+  .socials svg:hover {
+    cursor: pointer;
+    background-color: #f0ae28;
+  }
+
   @media (max-width: 400px) {
     form {
       flex-direction: column;
     }
+
+    .socials {
+      gap: 15px;
+    }
+    .socials img,
+    .socials svg {
+      height: 40px;
+      width: 40px;
+    }
   }
 
   body img {