Skip to content

Commit

Permalink
refactor translation related code
Browse files Browse the repository at this point in the history
  • Loading branch information
Kaltsoon committed Dec 9, 2020
1 parent b897797 commit 9adb9b0
Show file tree
Hide file tree
Showing 35 changed files with 605 additions and 853 deletions.
20 changes: 7 additions & 13 deletions gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ exports.createPages = ({ actions, graphql }) => {
}
}
}
`).then((result) => {
`).then(result => {
if (result.errors) {
return Promise.reject(result.errors);
}
Expand All @@ -38,11 +38,9 @@ exports.createPages = ({ actions, graphql }) => {
if (!frontmatter.letter) {
createPage({
path:
lang === 'en'
? `/en/part${part.toString()}`
: lang === 'zh'
? `/zh/part${part.toString()}`
: `/osa${part.toString()}`,
lang === 'fi'
? `/osa${part.toString()}`
: `/${lang}/part${part.toString()}`,
component: partIntroTemplate,
context: {
part: part,
Expand All @@ -52,15 +50,11 @@ exports.createPages = ({ actions, graphql }) => {
} else if (!isEmpty(navigation[lang][part]) && frontmatter.letter) {
createPage({
path:
lang === 'en'
? `/en/part${part}/${snakeCase(
lang === 'fi'
? `/osa${part}/${snakeCase(
navigation[lang][part][frontmatter.letter]
)}`
: lang === 'zh'
? `/zh/part${part}/${snakeCase(
navigation[lang][part][frontmatter.letter]
)}`
: `/osa${part}/${snakeCase(
: `/${lang}/part${part}/${snakeCase(
navigation[lang][part][frontmatter.letter]
)}`,
component: contentTemplate,
Expand Down
75 changes: 75 additions & 0 deletions src/components/AboutPage/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import React from 'react';
import { useTranslation } from 'react-i18next';

import { Banner } from '../Banner/Banner';
import { BodyText } from '../BodyText/BodyText';
import Element from '../Element/Element';
import Footer from '../Footer/Footer';
import { Image } from './../Image/Image';
import Layout from '../layout';
import { PartBanner } from '../PartBanner/PartBanner';
import SEO from '../seo';
import content from '../../content/pages/about.json';
import landingImage from '../../images/landing.svg';
import mainSEOdescription from '../../content/seo/mainSEOdescription';
import mainSEOtags from '../../content/seo/mainSEOtags';

const AboutPage = ({ title, lang }) => {
const { t } = useTranslation();
const { intro } = content[lang] || content.en;
const seoDescription = mainSEOdescription[lang] || mainSEOdescription.en;

return (
<Layout>
<SEO
lang={lang}
title={title}
description={seoDescription}
keywords={[
...mainSEOtags,
'Avoin yliopisto',
'Full stack harjoitustyö',
]}
/>

<Banner style={{ paddingBottom: 0, overflow: 'hidden' }}>
<div
style={{
display: 'flex',
justifyContent: 'center',
marginBottom: '-70px',
}}
className="container"
>
<Image
className="col-4 push-right-2"
contain
style={{ margin: 0 }}
alt="Stacked cubes with React logo and JavaScript text"
src={landingImage}
/>
</div>
</Banner>

<Element className="container spacing spacing--mobile--large">
<Element className="col-8 push-right-1">
<BodyText
heading={{ level: 'h1', title: t('aboutPage:generalTitle') }}
headingFontSize="2.3rem"
/>

<Element flex spaceBetween>
<div className="col-10 spacing--after">
<BodyText text={intro} className="link" headingFont />
</div>
</Element>
</Element>
</Element>

<PartBanner lang={lang} />
<Footer lang={lang} />
</Layout>
);
};

export default AboutPage;
92 changes: 92 additions & 0 deletions src/components/ChallengePage/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import React from 'react';
import { useTranslation } from 'react-i18next';

import { Banner } from '../Banner/Banner';
import { BodyText } from '../BodyText/BodyText';
import { CompaniesBanner } from '../CompaniesBanner/CompaniesBanner';
import Element from '../Element/Element';
import Form from '../Form/Form';
import { Image } from '../Image/Image';
import Layout from '../layout';
import SEO from '../seo';
import { SubHeader } from '../SubHeader/SubHeader';
import landingImage from '../../images/haaste.svg';
import mainSEOtags from '../../content/seo/mainSEOtags';

const ChallengePage = ({
lang,
title,
seoDescription,
aboutContent,
joinContent,
}) => {
const { t } = useTranslation();

return (
<Layout>
<SEO
lang={lang}
title={title}
description={seoDescription}
keywords={[
...mainSEOtags,
'fullstackhaaste',
'full stack haaste',
'elisa',
'terveystalo',
'sympa',
'konecranes',
'unity technologies',
'täydennyskoulutus',
'koodari',
'haaste',
]}
/>

<Banner style={{ paddingBottom: 0, overflow: 'hidden' }}>
<div className="container challenge__banner">
<Image
contain
className="col-10"
alt="Stacked cubes with React logo and JavaScript text"
src={landingImage}
/>
</div>
</Banner>

<Element className="container spacing">
<SubHeader
className="col-10col-8 push-right-1"
text={t('challengePage:aboutTitle')}
headingLevel="h1"
/>

<Element className="spacing--after col-6 push-right-2">
<BodyText headingFont text={aboutContent} />

<BodyText
className="spacing"
headingFont
heading={{
level: 'h2',
title: t('challengePage:joinTitle'),
}}
text={joinContent}
/>

<Form lang={lang} />
</Element>
</Element>

<CompaniesBanner lang={lang} />

<SubHeader
className="col-10 spacing--after centered"
text="#fullstackchallenge"
headingLevel="h3"
/>
</Layout>
);
};

export default ChallengePage;
5 changes: 2 additions & 3 deletions src/components/CompaniesBanner/CompaniesBanner.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { PropTypes } from 'prop-types';
import React from 'react';
import snakeCase from 'lodash/fp/snakeCase';
import { useTranslation } from 'react-i18next';
import getTranslationPath from '../../utils/getTranslationPath';

const partners = [
{
Expand Down Expand Up @@ -169,9 +170,7 @@ export const CompaniesBanner = ({ isFrontPage, lang }) => {
<Element flex spaceAround className="col-10 spacing">
<Link
className="about__challenge-button"
to={`${
lang === 'en' ? '/en' : lang === 'zh' ? '/zh' : ''
}/challenge`}
to={getTranslationPath(lang, '/challenge')}
>
{t('challengePage:infoButton')}
</Link>
Expand Down
66 changes: 66 additions & 0 deletions src/components/CompaniesPage/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import React from 'react';
import { useTranslation } from 'react-i18next';

import Layout from '../layout';
import { BodyText } from '../BodyText/BodyText';
import { DeveloperStory } from '../DeveloperStory/DeveloperStory';
import Element from '../Element/Element';
import Footer from '../Footer/Footer';
import SEO from '../seo';
import mainSEOtags from '../../content/seo/mainSEOtags';
import stories from '../../content/pages/stories.json';

const CompaniesPage = ({ lang, title, seoDescription }) => {
const { t } = useTranslation();
const langStories = stories[lang] || [];

return (
<Layout>
<SEO
lang={lang}
title={title}
description={seoDescription}
keywords={[
...mainSEOtags,
'houston',
'houston inc',
'software development',
'frontend',
'elisa',
'terveystalo',
'konecranes',
'k-ryhmä',
'unity technologies',
'unity',
'kesko',
'sympa',
'funktionaalinen ohjelmointi',
'functional programming',
'mikropalveluarkkitehtuuri',
'micro service architecture',
'micro service',
]}
/>

<Element className="container">
<BodyText
className="col-10 spacing"
heading={{
title: t('companiesPage:storiesTitle'),
level: 'h1',
}}
/>

{langStories.map(story => (
<DeveloperStory key={story.name} {...story} lang={lang} />
))}

<Element className="spacing" />
</Element>

<Footer lang={lang} />
</Layout>
);
};

export default CompaniesPage;
55 changes: 55 additions & 0 deletions src/components/FaqPage/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import React from 'react';
import { useTranslation } from 'react-i18next';

import Accordion from '../Accordion/Accordion';
import Element from '../Element/Element';
import Footer from '../Footer/Footer';
import Layout from '../layout';
import SEO from '../seo';
import { SubHeader } from '../SubHeader/SubHeader';
import content from '../../content/pages/faq.json';
import mainSEOtags from '../../content/seo/mainSEOtags';

const FaqPage = ({ lang, title, seoDescription }) => {
const { t } = useTranslation();
const langContent = content[lang] || [];

return (
<Layout>
<SEO
lang={lang}
title={title}
description={seoDescription}
keywords={[
...mainSEOtags,
'faq',
'frequently asked questions',
'ukk',
'usein kysytyt kysymykset',
]}
/>

<Element className="container link spacing spacing--after">
<SubHeader
className="spacing--after-small"
headingLevel="h1"
text={t('faqPage:faqTitle')}
/>
{langContent.map(item => {
return (
<Accordion
track
key={item.title}
title={item.title}
content={item.text}
/>
);
})}
</Element>

<Footer lang={lang} />
</Layout>
);
};

export default FaqPage;
8 changes: 3 additions & 5 deletions src/components/Header/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import React, { Component } from 'react';
import { Link } from 'gatsby';
import Navigation from '../Navigation/Navigation';
import { TripleBorder } from '../TripleBorder/TripleBorder';
import getTranslationPath from '../../utils/getTranslationPath';

class Header extends Component {
constructor(props) {
Expand Down Expand Up @@ -38,7 +39,7 @@ class Header extends Component {
render() {
const { headerClass } = this.state;
const { lang } = this.props;

const isSmallHeader = headerClass === 'header--small';

return (
Expand All @@ -53,10 +54,7 @@ class Header extends Component {
className="container"
style={{ alignItems: 'center', justifyContent: 'flex-start' }}
>
<Link
to={lang === 'en' ? '/en' : lang === 'zh' ? '/zh' : '/'}
className="header__logo"
>
<Link to={getTranslationPath(lang, '/')} className="header__logo">
{headerClass === '' ? (
<TripleBorder
className="nav-item-hover"
Expand Down
Loading

0 comments on commit 9adb9b0

Please sign in to comment.