feat: enable es version (alura#74)

_api/api.ts

@@ -14,6 +14,7 @@ const defaultTypeDefs = gql`
   enum SiteLocale {
     PT_BR
     EN_US
+    ES
   }
 
   input FieldFilter {

_api/gql_types.ts

@@ -46,8 +46,10 @@ export type BlockContent = {
 };
 
 export enum BlockContentType {
+  Aluraplus = 'ALURAPLUS',
   Article = 'ARTICLE',
   Challenge = 'CHALLENGE',
+  Course = 'COURSE',
   Podcast = 'PODCAST',
   Site = 'SITE',
   Youtube = 'YOUTUBE'
@@ -178,6 +180,7 @@ export type QueryGuidesArgs = {
 
 export enum SiteLocale {
   EnUs = 'EN_US',
+  Es = 'ES',
   PtBr = 'PT_BR'
 }
 

_api/modules/blocks/repository.ts

@@ -13,6 +13,7 @@ const ALLOW_LIST = [];
 const pathToBlocksByLocale = {
   [SiteLocale.PtBr]: path.resolve(".", "_data", "blocks", "pt_BR"),
   [SiteLocale.EnUs]: path.resolve(".", "_data", "blocks", "en_US"),
+  [SiteLocale.Es]: path.resolve(".", "_data", "blocks", "es"),
 };
 
 export function blocksRepository() {

_api/modules/guides/repository.ts

@@ -13,6 +13,7 @@ const ALLOW_LIST = [];
 const pathToGuideByLocale = {
   [SiteLocale.PtBr]: path.resolve(".", "_data", "guides", "pt_BR"),
   [SiteLocale.EnUs]: path.resolve(".", "_data", "guides", "en_US"),
+  [SiteLocale.Es]: path.resolve(".", "_data", "guides", "es"),
 };
 
 export function guidesRepository() {

_data/locale/es.json

@@ -0,0 +1,91 @@
+{
+  "HEAD.TITLE": "Tech Guide: guides for T-shaped Professionals",
+  "HEAD.DESCRIPTION": "Find the perfect guide for your tech career. Tips, hints, priorities and links to content. All of it following the T-professional approach.",
+  "HEAD.SHARE_IMAGE": "https://techguide.sh/assets/image/share-image.jpg",
+  "MENU.LOGO_ALT": "Logo Tech Guide Alura",
+  "MENU.CTA_TEXT": "<Emoji name='fire'/> Build your &lt;T&gt;",
+  "SCREEN_HERO_CONTAINER.PRE_TITLE": "<Emoji name='star'/> Guide your career!",
+  "SCREEN_HERO_CONTAINER.TITLE": "Discover possible paths<br /> to become a <br /><strong>&lt;T&gt;-shaped</strong> professional",
+  "SCREEN_HERO_CONTAINER.SUB_TITLE": "Alura created TechGuide.sh to help you on your learning journey. A mapping of the main technologies demanded by the market, with our suggestions and opinions.",
+
+  "SCREEN_HERO_CONTAINER.FIRST_SECTION.TITLE": "A &ltT&gt;-shaped guide",
+  "SCREEN_HERO_CONTAINER.FIRST_SECTION.SUB_TITLE": "&lt;T&gt;-shaped professionals have deeper knowledge in a specific field, in addition to having generalist knowledge in auxiliary disciplines.",
+  "SCREEN_HERO_CONTAINER.FIRST_SECTION.BTN": "Choose my career!",
+  "SCREEN_HERO_CONTAINER.SECOND_SECTION.TITLE": "Find out what to master at different points in your career",
+  "SCREEN_HERO_CONTAINER.SECOND_SECTION.SUB_TITLE": "Depending on your career and seniority, each technology has a different weight. Learn our market-based opinion of what to study and how deep.",
+  "SCREEN_HERO_CONTAINER.SECOND_SECTION.BTN": "Choose my career!",
+
+  "FEATURE_FLAG.BUILD_YOUR_T": false,
+  "PATH.T_BLOCK_SUGGESTED_CONTENT": "Recommended Content",
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.SITE.LABEL": "WebSite",
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.SITE.BG": "#6DD5EC",
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.SITE.COLOR": "#002A42",
+
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.ARTICLE.LABEL": "Article",
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.ARTICLE.BG": "#FDB9C6",
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.ARTICLE.COLOR": "#670032",
+
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.COURSE.LABEL": "Course",
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.COURSE.BG": "#BEEC6D",
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.COURSE.COLOR": "#043300",
+
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.YOUTUBE.LABEL": "YouTube",
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.YOUTUBE.BG": "#FF0000",
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.YOUTUBE.COLOR": "#FFFFFF",
+
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.PODCAST.LABEL": "Podcast",
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.PODCAST.BG": "#AB7EE4",
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.PODCAST.COLOR": "#300031",
+
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.CONTENT.LABEL": "Content",
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.CONTENT.BG": "#d4d4d4",
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.CONTENT.COLOR": "#494848",
+
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.ALURAPLUS.LABEL": "Alura+",
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.ALURAPLUS.BG": "#d4d4d4",
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.ALURAPLUS.COLOR": "#494848",
+
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.CHALLENGE.LABEL": "Challenge",
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.CHALLENGE.BG": "#162639",
+  "PATH.T_BLOCK_SUGGESTED_CONTENT.CHALLENGE.COLOR": "#FFFFFF",
+
+  "TSHAPE.DEPTH.LEVEL_NAME": "Level",
+  "TSHAPE.DEPTH.LEVEL_SUFIX": "of depth",
+
+  "TSHAPE.BUTTON.BACK_TO_HOME": "<Icon name='arrowLeft' /> Back to career selection",
+  "TSHAPE.BUTTON.DOWNLOAD_T_FILE": "Download guide",
+
+  "FOOTER.DESCRIPTION": "Develop your career in &lt;T&gt; · Version: ",
+  "FOOTER.OPEN_SOURCE_CTA": "Techguide.sh is an open source project, <Link href='https://github.com/alura/techguide' text='check our README' />",
+  "FOOTER.BRING_BY": "Brought to you by",
+
+  "FAQ.GLOBAL": [
+    {
+      "title": "01 - What is TechGuide.sh?",
+      "answer":
+        "TechGuide.sh is Alura's initiative to map the most common needs for different tech professionals, with the goal of guiding both students and the school itself, with new courses, content, podcasts and articles. We were inspired by the equally opensource <a href='http://roadmap.sh'>, but using the T-professional approach, opening more possibilities for paths and study order. We also want to have more descriptions, explaining why one should learn each of those items (cards) and better understanding their scope."
+    },
+    {
+      "title": "02 - What is a T-shaped Professional?",
+      "answer":
+        "They are professionals who, in addition to their specialty (deep part of the T), also have generalist knowledge in other areas (horizontal part of the T) that can facilitate their own work or working in a team."
+    },
+    {
+      "title": "03 - Should I start with the deep or the horizontal part of the T?",
+      "answer":
+        "Our recommendation is that you focus more on the deep part of the T, but don't neglect the horizontal part. The order of when to study what is up to you, but we want to be a guide to help you in these choices."
+    },
+    {
+      "title": "04 - Can I suggest new careers?",
+      "answer":
+        "Yes! Use our repository contribution mechanism on <a href='https://github.com/alura/techguide'>Github</a>. Right now, we are focusing on fixing bugs and improving existing careers."
+    },
+    {
+      "title": "05 - Can I suggest changes or corrections?",
+      "answer":
+        "Yes, contributions are welcome. To do so, use our repository contribution mechanism on <a href='https://github.com/alura/techguide'>Github</a>."
+    }
+  ],
+  "IMAGES.DISCOVER_IMAGE": "/assets/image/discover-illustration-en.svg",
+  "DEMO":"DEMO"
+}

pages/es/index.tsx

@@ -0,0 +1,7 @@
+export { default } from "../index";
+import { SiteLocale } from "@src/gql_types";
+import { getStaticProps as staticProps } from "../index";
+
+export const getStaticProps = async (ctx) => {
+  return staticProps({ ...ctx, locale: SiteLocale.Es });
+};

pages/es/path/[slug]/[activeBlockSlug].tsx

@@ -0,0 +1,12 @@
+export { default } from "../../../pt-BR/path/[slug]/[activeBlockSlug]";
+import { SiteLocale } from "@src/gql_types";
+import { getStaticProps as staticProps } from "../../../pt-BR/path/[slug]/[activeBlockSlug]";
+import { getStaticPaths as staticPaths } from "../../../pt-BR/path/[slug]/[activeBlockSlug]";
+
+export const getStaticProps = async (ctx) => {
+  return staticProps({ ...ctx, locale: SiteLocale.Es });
+};
+
+export const getStaticPaths = async (ctx) => {
+  return staticPaths({ ...ctx, locale: SiteLocale.Es });
+};

pages/es/path/[slug]/index.tsx

@@ -0,0 +1,12 @@
+export { default } from "../../../pt-BR/path/[slug]/index";
+import { SiteLocale } from "@src/gql_types";
+import { getStaticProps as staticProps } from "../../../pt-BR/path/[slug]/index";
+import { getStaticPaths as staticPaths } from "../../../pt-BR/path/[slug]/index";
+
+export const getStaticProps = async (ctx) => {
+  return staticProps({ ...ctx, locale: SiteLocale.Es });
+};
+
+export const getStaticPaths = async (ctx) => {
+  return staticPaths({ ...ctx, locale: SiteLocale.Es });
+};

pages/pt-BR/index.tsx

@@ -0,0 +1,7 @@
+export { default } from "../index";
+import { SiteLocale } from "@src/gql_types";
+import { getStaticProps as staticProps } from "../index";
+
+export const getStaticProps = async (ctx) => {
+  return staticProps({ ...ctx, locale: SiteLocale.PtBr });
+};

pages/pt-BR/path/[slug]/index.tsx

@@ -28,6 +28,7 @@ export const getStaticProps = async ({ params, ...ctx }: any) => {
       props: {
         ...data,
         pageTitle: data?.guide?.name,
+        locale,
       },
     },
     locale

src/components/Link/index.tsx

@@ -9,23 +9,20 @@ import { SiteLocale } from "@src/gql_types";
 const urlLocaleBySiteLocale = {
   [SiteLocale.PtBr]: "pt-BR",
   [SiteLocale.EnUs]: "en-US",
+  [SiteLocale.Es]: "es",
 };
 
 function withLocalePrefix(
   href: string,
   locale: string,
   isExternalURL: boolean
 ) {
-  const urlLocale = urlLocaleBySiteLocale[locale];
   if (isExternalURL) return href;
 
-  if (urlLocale !== "en-US") {
-    if (href === "/") return href;
+  const urlLocale = urlLocaleBySiteLocale[locale];
+  const baseHref = `/${urlLocale}/${href}`.replace("//", "/");
 
-    return `${urlLocale}${href}`;
-  }
-  // TODO: Fix here when i18n fully enabled
-  return `${urlLocale}${href}`;
+  return baseHref;
 }
 
 interface LinkProps {

src/gql_types.ts

@@ -46,8 +46,10 @@ export type BlockContent = {
 };
 
 export enum BlockContentType {
+  Aluraplus = 'ALURAPLUS',
   Article = 'ARTICLE',
   Challenge = 'CHALLENGE',
+  Course = 'COURSE',
   Podcast = 'PODCAST',
   Site = 'SITE',
   Youtube = 'YOUTUBE'
@@ -178,6 +180,7 @@ export type QueryGuidesArgs = {
 
 export enum SiteLocale {
   EnUs = 'EN_US',
+  Es = 'ES',
   PtBr = 'PT_BR'
 }
 

src/infra/i18n/withLocaleContent.ts

@@ -5,6 +5,7 @@ import { SiteLocale } from "@src/gql_types";
 const fileNameByLocale = {
   [SiteLocale.EnUs]: "en-US.json",
   [SiteLocale.PtBr]: "pt-BR.json",
+  [SiteLocale.Es]: "es.json",
 };
 
 export function withLocaleContent<NextContext>(

src/screens/HomeScreen/patterns/GuidesGrid/index.tsx

@@ -45,7 +45,7 @@ interface GuidesGridProps {
 export default function GuidesGrid({ guides }: GuidesGridProps) {
   return (
     <ListOfGuides>
-      {[...guides].map((guide) => (
+      {guides.map((guide) => (
         <Guide key={guide.slug}>
           <Link
             href={`/path/${guide.slug}`}