dynamic socials

src/lib/index.ts

@@ -203,9 +203,11 @@ export default {
             url: "https://hackclub.com/",
         },
     },
-    discord: "882595027132493864",
+    socials: {
-    github: "SX-9",
+        dc: "https://discord.com/users/882595027132493864",
-    reddit: "Frequent_Outside_741",
+        gh: "https://github.com/SX-9",
-    steam: "satr14",
+        rdt: "https://reddit.com/u/Frequent_Outside_741",
+        stm: "https://steamcommunity.com/id/satr14",
         blog: "https://blog.satr14.my.id/",
+    },
 }

src/routes/+page.svelte

@@ -36,7 +36,7 @@
 }}>
     <div class="font-[Stray,_monospace] group whitespace-nowrap text-center text-5xl my-4 cursor-default -rotate-6 leading-10 text-ctp-overlay1 hover:text-ctp-base">
         <span class="inline-block animate-scrolling-text-to-l">{randomStr(charAmount)}</span><br>
-        <span class="block">{randomStr(Math.round(charAmount-data.name.length/2))}<a href={'https://github.com/'+data.github+'/5th-site'} target="_blank" class="group-hover:px-8 no-underline text-ctp-subtext1 group-hover:text-ctp-text">{data.name.toUpperCase()}</a>{randomStr(Math.round(charAmount-data.name.length/2))}</span>
+        <span class="block">{randomStr(Math.round(charAmount-data.name.length/2))}<a href={'https://github.com/SX-9/5th-site'} target="_blank" class="group-hover:px-8 no-underline text-ctp-subtext1 group-hover:text-ctp-text">{data.name.toUpperCase()}</a>{randomStr(Math.round(charAmount-data.name.length/2))}</span>
         <span class="inline-block animate-scrolling-text-to-r">{randomStr(charAmount)}</span><br>
     </div>
 </div>
@@ -66,11 +66,9 @@
         <header>
             <nav class="overflow-hidden flex flex-col-reverse sm:flex-row justify-center sm:justify-between items-center sm:gap-4 text-lg max-w-full w-full px-4 overflow-y-auto text-nowrap">
                 <div class="flex justify-center gap-4">
-                    <a href={'https://github.com/'+data.github} target="_blank">gh</a>
+                    {#each Object.entries(data.socials) as [name, url]}
-                    <a href={'https://discordapp.com/users/'+data.discord} target="_blank">dc</a>
+                        <a href={url} target="_blank">{name}</a>
-                    <a href={'https://www.reddit.com/user/'+data.reddit} target="_blank">rdt</a>
+                    {/each}
-                    <a href={'https://steamcommunity.com/id/'+data.steam} target="_blank">stm</a>
-                    <a href={data.blog} target="_blank">blog</a>
                 </div>
                 <!-- svelte-ignore a11y-autofocus -->
                 <a href="/#abt" id="abt" class="text-center no-underline text-xl font-extrabold" autofocus>&uarr;</a>