From 0ef2cb9cdc9ac9bf66bb9e0a49213b44bd126e99 Mon Sep 17 00:00:00 2001
From: Muhammad Fakhri Imaduddin <fakhriimaduddin19@gmail.com>
Date: Sat, 10 Sep 2022 12:42:13 +0700
Subject: [PATCH 1/2] feat: add docs & discord button

---
 i18n/locales/en/common.json      |  2 +
 i18n/locales/id/common.json      |  2 +
 next.config.js                   |  6 ++
 src/uikit/Home/HomeContainer.tsx | 98 +++++++++++++++++++-------------
 4 files changed, 68 insertions(+), 40 deletions(-)

diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json
index 69570c1..c4ce82d 100644
--- a/i18n/locales/en/common.json
+++ b/i18n/locales/en/common.json
@@ -7,6 +7,8 @@
     "description": "Mocha is a bot for multi-chat cross-server, This bot allows you to send messages to multiple channels at once. You can create a private or public channel and send messages to it. The bot also filters out messages from prohibits mentions",
     "invite_button_label": "Taste a Mocha",
     "invite_button_arrow_label": "Click me",
+    "docs_button_label": "Docs",
+    "discord_button_label": "Discord",
     "supported_by": "Supported by"
   }
 }
diff --git a/i18n/locales/id/common.json b/i18n/locales/id/common.json
index 8005e46..d11646f 100644
--- a/i18n/locales/id/common.json
+++ b/i18n/locales/id/common.json
@@ -7,6 +7,8 @@
     "description": "Mocha adalah bot untuk multi-chat lintas server, Bot ini memungkinkan Anda mengirim pesan ke beberapa saluran sekaligus. Anda dapat membuat saluran pribadi atau publik dan mengirim pesan ke sana. Bot ini juga akan menyaring pesan dari mentions yang berbahaya",
     "invite_button_label": "Cicipi Mocha",
     "invite_button_arrow_label": "Klik aku",
+    "docs_button_label": "Dokumentasi",
+    "discord_button_label": "Discord",
     "supported_by": "Didukung oleh"
   }
 }
diff --git a/next.config.js b/next.config.js
index dbc127c..b1801ef 100644
--- a/next.config.js
+++ b/next.config.js
@@ -5,6 +5,12 @@ const nextConfig = {
     showVersion: process.env.SHOW_VERSION === 'TRUE',
     clientVersion: process.env.COMMIT_HASH || 'local-0.0.1',
     isProduction: process.env.NODE_ENV === 'production',
+    botInvitationUrl:
+      process.env.BOT_INVITATION_URL ||
+      'https://discord.com/api/oauth2/authorize?client_id=987974524140146728&permissions=414465853504&scope=applications.commands%20bot',
+    docsUrl: process.env.DOCS_URL || 'https://mocha-docs.chroma-gaming.xyz/',
+    discordServerUrl:
+      process.env.DISCORD_SERVER_URL || 'https://discord.gg/PQnkPABkbd',
   },
 };
 
diff --git a/src/uikit/Home/HomeContainer.tsx b/src/uikit/Home/HomeContainer.tsx
index eb41484..bc93fba 100644
--- a/src/uikit/Home/HomeContainer.tsx
+++ b/src/uikit/Home/HomeContainer.tsx
@@ -7,6 +7,7 @@ import {
   Heading,
   Icon,
   Image,
+  SimpleGrid,
   Stack,
   Text,
   useColorModeValue,
@@ -51,47 +52,64 @@ export function HomeContainer() {
           </Text>
         </Heading>
         <Text color='gray.500'>{t('common.home.description')}</Text>
-        <Stack
-          direction='column'
-          spacing={3}
-          align='center'
-          alignSelf='center'
-          position='relative'>
-          <a
-            href='https://discord.com/api/oauth2/authorize?client_id=987974524140146728&permissions=414465853504&scope=applications.commands%20bot'
-            target='_blank'
-            rel='noreferrer'>
-            <Button
-              bg='yellow.700'
-              color='white'
-              rounded='full'
-              px={6}
-              _hover={{
-                bg: 'yellow.800',
-              }}
-              _focus={{ bg: 'yellow.900' }}>
-              {t('common.home.invite_button_label')}
-            </Button>
-          </a>
-          <Box display={{ base: 'none', md: 'block' }}>
-            <Icon
-              as={Arrow}
-              color={useColorModeValue('gray.800', 'gray.300')}
-              w={71}
-              position='absolute'
-              right={-71}
-              top='10px'
-            />
-            <Text
-              fontSize='lg'
-              fontFamily='Caveat'
-              position='absolute'
-              right='-90px'
-              top='-15px'
-              transform='rotate(10deg)'>
-              {t('common.home.invite_button_arrow_label')}
-            </Text>
+        <Stack direction='column' spacing={2} alignSelf='center'>
+          <Box position='relative'>
+            <a
+              href={publicRuntimeConfig.botInvitationUrl}
+              target='_blank'
+              rel='noreferrer'>
+              <Button
+                w='100%'
+                bg='yellow.700'
+                color='white'
+                rounded='full'
+                px={6}
+                _hover={{
+                  bg: 'yellow.800',
+                }}
+                _focus={{ bg: 'yellow.900' }}>
+                {t('common.home.invite_button_label')}
+              </Button>
+            </a>
+            <Box display={{ base: 'none', md: 'block' }}>
+              <Icon
+                as={Arrow}
+                color={useColorModeValue('gray.800', 'gray.300')}
+                w={71}
+                position='absolute'
+                right={-71}
+                top='10px'
+              />
+              <Text
+                fontSize='lg'
+                fontFamily='Caveat'
+                position='absolute'
+                right='-90px'
+                top='-15px'
+                transform='rotate(10deg)'>
+                {t('common.home.invite_button_arrow_label')}
+              </Text>
+            </Box>
           </Box>
+          <SimpleGrid columns={{ base: 1, md: 2 }} spacing={2}>
+            <a
+              href={publicRuntimeConfig.docsUrl}
+              target='_blank'
+              rel='noreferrer'
+              style={{ width: '100%' }}>
+              <Button w='100%' variant='outline' rounded='full' px={6}>
+                {t('common.home.docs_button_label')}
+              </Button>
+            </a>
+            <a
+              href={publicRuntimeConfig.discordServerUrl}
+              target='_blank'
+              rel='noreferrer'>
+              <Button w='100%' variant='outline' rounded='full' px={6}>
+                {t('common.home.discord_button_label')}
+              </Button>
+            </a>
+          </SimpleGrid>
         </Stack>
       </Stack>
       <Box

From 8c98c8ca4c5d3785f0d4ff0fe6f9ae10fe910361 Mon Sep 17 00:00:00 2001
From: Muhammad Fakhri Imaduddin <fakhriimaduddin19@gmail.com>
Date: Mon, 12 Sep 2022 20:26:48 +0700
Subject: [PATCH 2/2] feat: update to use Chakra component

---
 src/uikit/Home/HomeContainer.tsx | 41 ++++++++++++++++----------------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/uikit/Home/HomeContainer.tsx b/src/uikit/Home/HomeContainer.tsx
index bc93fba..8991da1 100644
--- a/src/uikit/Home/HomeContainer.tsx
+++ b/src/uikit/Home/HomeContainer.tsx
@@ -7,10 +7,12 @@ import {
   Heading,
   Icon,
   Image,
+  Link,
   SimpleGrid,
   Stack,
   Text,
   useColorModeValue,
+  VStack,
 } from '@chakra-ui/react';
 import { useTranslation } from 'next-export-i18n';
 import getConfig from 'next/config';
@@ -52,12 +54,12 @@ export function HomeContainer() {
           </Text>
         </Heading>
         <Text color='gray.500'>{t('common.home.description')}</Text>
-        <Stack direction='column' spacing={2} alignSelf='center'>
-          <Box position='relative'>
-            <a
+        <VStack spacing={2} alignSelf='center'>
+          <Box position='relative' w='100%'>
+            <Link
               href={publicRuntimeConfig.botInvitationUrl}
-              target='_blank'
-              rel='noreferrer'>
+              isExternal
+              _hover={{ textDecoration: 'none' }}>
               <Button
                 w='100%'
                 bg='yellow.700'
@@ -70,7 +72,7 @@ export function HomeContainer() {
                 _focus={{ bg: 'yellow.900' }}>
                 {t('common.home.invite_button_label')}
               </Button>
-            </a>
+            </Link>
             <Box display={{ base: 'none', md: 'block' }}>
               <Icon
                 as={Arrow}
@@ -92,25 +94,24 @@ export function HomeContainer() {
             </Box>
           </Box>
           <SimpleGrid columns={{ base: 1, md: 2 }} spacing={2}>
-            <a
+            <Link
               href={publicRuntimeConfig.docsUrl}
-              target='_blank'
-              rel='noreferrer'
-              style={{ width: '100%' }}>
+              isExternal
+              _hover={{ textDecoration: 'none' }}>
               <Button w='100%' variant='outline' rounded='full' px={6}>
                 {t('common.home.docs_button_label')}
               </Button>
-            </a>
-            <a
+            </Link>
+            <Link
               href={publicRuntimeConfig.discordServerUrl}
-              target='_blank'
-              rel='noreferrer'>
+              isExternal
+              _hover={{ textDecoration: 'none' }}>
               <Button w='100%' variant='outline' rounded='full' px={6}>
                 {t('common.home.discord_button_label')}
               </Button>
-            </a>
+            </Link>
           </SimpleGrid>
-        </Stack>
+        </VStack>
       </Stack>
       <Box
         position='absolute'
@@ -134,12 +135,12 @@ export function HomeContainer() {
             color='blue.400'
             borderBottomWidth='1px'
             borderBottomColor='blue.500'>
-            <a
+            <Link
               href='https://discord.chroma-gaming.xyz'
-              target='_blank'
-              rel='noreferrer'>
+              isExternal
+              _hover={{ textDecoration: 'none' }}>
               {t('common.chroma_developer')}
-            </a>
+            </Link>
           </Text>
         </Flex>
         {publicRuntimeConfig.showVersion && (