feat: add docs & discord button (#27)

* feat: add docs & discord button * feat: update to use Chakra component
mocha-bot · Sep 14, 2022 · ebc8f18 · ebc8f18
1 parent 5a20064
commit ebc8f18
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 45 deletions.
diff --git 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
@@ -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
@@ -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
@@ -7,9 +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';
@@ -51,48 +54,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>
+        <VStack spacing={2} alignSelf='center'>
+          <Box position='relative' w='100%'>
+            <Link
+              href={publicRuntimeConfig.botInvitationUrl}
+              isExternal
+              _hover={{ textDecoration: 'none' }}>
+              <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>
+            </Link>
+            <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>
-        </Stack>
+          <SimpleGrid columns={{ base: 1, md: 2 }} spacing={2}>
+            <Link
+              href={publicRuntimeConfig.docsUrl}
+              isExternal
+              _hover={{ textDecoration: 'none' }}>
+              <Button w='100%' variant='outline' rounded='full' px={6}>
+                {t('common.home.docs_button_label')}
+              </Button>
+            </Link>
+            <Link
+              href={publicRuntimeConfig.discordServerUrl}
+              isExternal
+              _hover={{ textDecoration: 'none' }}>
+              <Button w='100%' variant='outline' rounded='full' px={6}>
+                {t('common.home.discord_button_label')}
+              </Button>
+            </Link>
+          </SimpleGrid>
+        </VStack>
       </Stack>
       <Box
         position='absolute'
@@ -116,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 && (