From 93ca553fb2f05ef5bda4fa42ae82b74cb9c5d826 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 9 Sep 2024 21:19:43 +0600
Subject: [PATCH] web/about/community: add community links

---
 web/i18n/en/about.json                        |  8 ++-
 web/i18n/en/donate.json                       |  2 +-
 .../components/donate/DonateAltItem.svelte    |  5 +-
 web/src/lib/env.ts                            |  6 +-
 web/src/routes/about/community/+page.svelte   | 65 ++++++++++++++++++-
 5 files changed, 80 insertions(+), 6 deletions(-)

diff --git a/web/i18n/en/about.json b/web/i18n/en/about.json
index 35e93f03..e566faaa 100644
--- a/web/i18n/en/about.json
+++ b/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"
 }
diff --git a/web/i18n/en/donate.json b/web/i18n/en/donate.json
index 33d47384..bf99eb80 100644
--- a/web/i18n/en/donate.json
+++ b/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."
 }
diff --git a/web/src/components/donate/DonateAltItem.svelte b/web/src/components/donate/DonateAltItem.svelte
index c82f987e..0bc45789 100644
--- a/web/src/components/donate/DonateAltItem.svelte
+++ b/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]}
diff --git a/web/src/lib/env.ts b/web/src/lib/env.ts
index 43dc98df..c921c7ca 100644
--- a/web/src/lib/env.ts
+++ b/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 = {
diff --git a/web/src/routes/about/community/+page.svelte b/web/src/routes/about/community/+page.svelte
index 07d06ff0..e0638015 100644
--- a/web/src/routes/about/community/+page.svelte
+++ b/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>