added constants for localization and added community menu

src/common/constants.ts

@@ -1,10 +1,7 @@
 export const SIDEBAR_WIDTH = 208;
 export const TOC_WIDTH = 208;
 export const CONTENT_MAX_WIDTH = 860;
-
 export const SHIKI_THEME = 'Material-Theme-Default';
 export const THEME_STORAGE_KEY = 'theme';
-
 export const STATUS_CHECKER_URL = 'https://status.test-blockstack.com';
-
 export const SUPPORTED_LANGUAGES = ['en'];

src/common/constants_that_require_translations.ts

@@ -0,0 +1,8 @@
+// Constants that will require translations into different languages should go here
+export const EDIT_PAGE_IN_GITHUB = 'Edit this page on GitHub';
+export const COMMUNITY = 'Community';
+export const LANGUAGES = 'Languages';
+export const LEARNING_RESOURCES = 'Learning Resources';
+export const SEARCH_DOCS = 'Search docs';
+export const TUTORIALS = 'Tutorials';
+export const HOME = 'Home';

src/components/feedback.tsx

@@ -20,6 +20,7 @@ import { getHeadingStyles } from '@components/mdx/typography';
 import { css } from '@stacks/ui-core';
 import { StatusCheck } from '@components/status-check';
 import { useColorMode } from '@common/hooks/use-color-mode';
+import { EDIT_PAGE_IN_GITHUB } from '@common/constants_that_require_translations';
 
 const Icon: React.FC<BoxProps & { icon: React.FC<any> }> = ({ icon: IconComponent, ...props }) => {
   const { bind, hover, active } = useTouchable();
@@ -129,7 +130,7 @@ export const FeedbackSection: React.FC<BoxProps> = props => {
           rel="nofollow noopener noreferrer"
           fontSize="14px"
         >
-          Edit this page on GitHub
+          {EDIT_PAGE_IN_GITHUB}
         </Link>
         <StatusCheck mt={space('base-loose')} />
       </Flex>

src/components/header.tsx

@@ -26,6 +26,11 @@ import { border, transition } from '@common/utils';
 import { getCapsizeStyles } from '@components/mdx/typography';
 import { useTouchable } from '@common/hooks/use-touchable';
 import { useRouter } from 'next/router';
+import {
+  COMMUNITY,
+  LANGUAGES,
+  LEARNING_RESOURCES,
+} from '@common/constants_that_require_translations';
 
 const MenuButton = ({ ...rest }: any) => {
   const { isOpen, handleOpen, handleClose } = useMobileMenuState();
@@ -73,9 +78,15 @@ const nav: NavItem[] = [
         href: 'https://github.com/stacks-network',
       },
       {
-        label: 'Resources',
+        label: LEARNING_RESOURCES,
         href: 'https://www.stacks.co/learn/learning-resources',
       },
+    ],
+  },
+  {
+    label: COMMUNITY,
+    href: '',
+    children: [
       {
         label: 'Discord',
         href: 'https://discord.gg/5DJaBrf',
@@ -87,6 +98,20 @@ const nav: NavItem[] = [
     ],
   },
   { label: 'Discover apps', href: 'https://www.stacks.co/explore/discover-apps' },
+  {
+    label: LANGUAGES,
+    href: '',
+    children: [
+      {
+        label: 'English',
+        href: '/en',
+      },
+      {
+        label: 'Spanish',
+        href: '/es',
+      },
+    ],
+  },
 ];
 
 const HeaderTextItem: ForwardRefExoticComponentWithAs<BoxProps & LinkProps, 'a'> = forwardRefWithAs<

src/components/search-button.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef, Ref } from 'react';
 import { IconButton } from '@stacks/ui';
 import { LinkProps } from '@components/typography';
-
 import { useAppState } from '@common/hooks/use-app-state';
 import { MagnifyingGlass } from './icons/magnifying-glass';
+import { SEARCH_DOCS } from '@common/constants_that_require_translations';
 
 export const SearchButton = forwardRef((props: LinkProps, ref: Ref<HTMLDivElement>) => {
   const { setState } = useAppState();
@@ -12,7 +12,7 @@ export const SearchButton = forwardRef((props: LinkProps, ref: Ref<HTMLDivElemen
     <IconButton
       display={['grid', 'grid', 'none']}
       onClick={() => setState(state => ({ ...state, searchModal: 'open' }))}
-      title="Search docs"
+      title={SEARCH_DOCS}
       ref={ref}
       iconSize="18px"
       icon={MagnifyingGlass}

src/components/search.tsx

@@ -19,6 +19,7 @@ import Link from 'next/link';
 import { getCapsizeStyles } from '@components/mdx/typography';
 import { useAppState } from '@common/hooks/use-app-state';
 import { css, Theme } from '@stacks/ui-core';
+import { SEARCH_DOCS } from '@common/constants_that_require_translations';
 
 const getLocalUrl = href => {
   const _url = new URL(href);
@@ -189,7 +190,7 @@ export const SearchBox: React.FC<BoxProps> = React.memo(props => {
                 ...getCapsizeStyles(14, 28),
               }}
             >
-              Search docs
+              {SEARCH_DOCS}
             </Text>
           </Flex>
           <Stack isInline spacing="3px" pr="base">

src/components/side-nav.tsx

@@ -14,6 +14,7 @@ import { css } from '@stacks/ui-core';
 import { SmartLink } from '@components/mdx';
 import { useMobileMenuState } from '@common/hooks/use-mobile-menu';
 import { useTheme } from '@emotion/react';
+import { HOME } from '@common/constants_that_require_translations';
 
 const Wrapper: React.FC<BoxProps & { containerProps?: BoxProps }> = ({
   width = `${SIDEBAR_WIDTH}px`,
@@ -44,7 +45,7 @@ const capitalize = s => {
 };
 
 const convertToTitle = (path: string) =>
-  !path ? null : path === '/' ? 'Home' : capitalize(path.replace('/', '').replace(/-/g, ' '));
+  !path ? null : path === '/' ? HOME : capitalize(path.replace('/', '').replace(/-/g, ' '));
 
 const PageItem = React.forwardRef(
   (