web/about/community: add community links

web/i18n/en/about.json

@@ -6,5 +6,11 @@
 
     "page.privacy": "privacy policy",
     "page.terms": "terms and ethics",
-    "page.credits": "thanks & licenses"
+    "page.credits": "thanks & licenses",
+
+    "community.discord": "community discord server",
+    "community.twitter": "news account on twitter",
+    "community.github": "github repo",
+    "community.email": "support email",
+    "community.telegram": "news channel on telegram"
 }

web/i18n/en/donate.json

@@ -32,5 +32,5 @@
     "alternative.title": "alternative ways to donate",
 
     "alt.copy": "{{ value }}. crypto wallet address. press to copy.",
-    "alt.open": "{{ value }}. donation link, press to open."
+    "alt.open": "{{ value }}. press to open."
 }

web/src/components/donate/DonateAltItem.svelte

@@ -8,6 +8,7 @@
     export let type: "copy" | "open";
     export let name: string;
     export let address: string;
+    export let title = "";
 
     let copied = false;
 
@@ -44,7 +45,9 @@
         <div class="wallet-text">
             <div class="wallet-name">{name}</div>
             <span class="wallet-address">
-                {#if type === "copy"}
+                {#if title}
+                    {title}
+                {:else if type === "copy"}
                     {address}
                 {:else}
                     {address.split("//", 2)[1]}

web/src/lib/env.ts

@@ -18,9 +18,11 @@ const variables = {
 }
 
 const contacts = {
-    github: "https://github.com/imputnet/cobalt",
+    discord: "https://discord.gg/pQPt8HBUPu",
     twitter: "https://x.com/justusecobalt",
-    bluesky: "https://bsky.app/profile/cobalt.tools",
+    github: "https://github.com/imputnet/cobalt",
+    email: "support@cobalt.tools",
+    telegram_ru: "https://t.me/justusecobalt_ru",
 }
 
 const partners = {

web/src/routes/about/community/+page.svelte

@@ -1 +1,64 @@
-<div>community links</div>
+<script lang="ts">
+    import locale from "$lib/i18n/locale";
+
+    import { contacts } from "$lib/env";
+    import { t } from "$lib/i18n/translations";
+
+    import DonateAltItem from "$components/donate/DonateAltItem.svelte";
+</script>
+
+<!--
+    this page is not final and is more of a quick mockup. this is why donate alt item is used for links.
+-->
+<div id="community-body">
+    {#if $locale !== "ru"}
+        <DonateAltItem
+            type="open"
+            name={$t("about.community.discord")}
+            address={contacts.discord}
+        />
+
+        <DonateAltItem
+            type="open"
+            name={$t("about.community.twitter")}
+            address={contacts.twitter}
+            title="@justusecobalt"
+        />
+    {/if}
+
+    <DonateAltItem
+        type="open"
+        name={$t("about.community.github")}
+        address={contacts.github}
+    />
+
+    <DonateAltItem
+        type="open"
+        name={$t("about.community.email")}
+        address="mailto:{contacts.email}"
+        title="{contacts.email}"
+    />
+
+    {#if $locale === "ru"}
+        <DonateAltItem
+            type="open"
+            name={$t("about.community.telegram")}
+            address={contacts.telegram_ru}
+            title="@justusecobalt_ru"
+        />
+    {/if}
+</div>
+
+<style>
+    #community-body {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+    }
+
+    @media screen and (max-width: 1030px) {
+        #community-body {
+            grid-template-columns: 1fr;
+        }
+    }
+</style>