Merge pull request podkrepi-bg#11 from daritelska-platforma/integrate…

…-language-switcher

Added locale switcher and common info for the homepage

CODE_OF_CONDUCT.md

@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
 
 ## Our Responsibilities
 

CONTRIBUTING.md

@@ -15,7 +15,6 @@ yarn
 
 ## Development
 
-
 ```shell
 yarn dev
 ```
@@ -53,4 +52,3 @@ yarn type-check
 ## PRs
 
 All PRs must pass all checks before they will be considered for review.
-

public/locales/bg/about.json

@@ -1,3 +1,4 @@
 {
-  "ABOUT":"Относно"
+  "about": "За нас",
+  "content": "Очаквайте скоро"
 }

public/locales/bg/common.json

@@ -1,4 +1,38 @@
 {
-  "ONE": "Едно",
-  "TWO": "Две"
+  "nav": {
+    "home": "Начало",
+    "about": "За нас",
+    "login": "Вход",
+    "register": "Регистрация"
+  },
+  "values": {
+    "voluntary": {
+      "heading": "Доброволно и про-боно",
+      "content": "Строим дарителска платформа в полза на нуждаещите се и организациите, които им помагат, без да търсим финансова или друга облага от това, освен удовлетвореност от осъществените кампании и подкрепените нуждаещи се."
+    },
+    "proactive": {
+      "heading": "Проактивност",
+      "content": "Не чакаш да ти дадат таск, а директно поемаш. Това разбира се важи, като пооправим малко структурата, че в момента не е много ясно кои точно са тасковете. Въпреки това, по-опитните хора без проблем могат да видят какво точно липсва и да генерират сами таскове, които са смислени. Действайте, няма какво да се чудите."
+    },
+    "transparent": {
+      "heading": "Прозрачност",
+      "content": "Дарителите ни се доверяват, защото осигуряваме прозрачност чрез отворен код, отворени данни/транзакции, отворени решения. Нуждаещите ни се доверяват, защото правим кандидатсването честно, лесно и прозрачно, чрез ясни критерии. Обществото ни се доверява, защото всичко е прозрачно, вкл. работния ни процес. Ние си имаме доверие, защото има ясни и прозрачни принципи на работа по между ни."
+    },
+    "respect": {
+      "heading": "Уважение",
+      "content": "Мили и добри сме един към хората около нас, уважаваме ги и ако можеим им помагаме. Мнението на всеки има значение, затова се изслушваме и опитваме да вникнем в това, което казва другия."
+    },
+    "expertise": {
+      "heading": "Експертност",
+      "content": "Когато правим избор или взимаме трудни решения, ги базираме на мненето на експерти с близък опит в конкретната тема."
+    },
+    "privacy": {
+      "heading": "Поверителност",
+      "content": "Уважаваме и пазим личните данни на всеки нуждаещ се, даряващ или помагащ в процеса, все едно са нашите собствени. Ясно дефинираме кой има права за достъп до продукционните данни, като хората, разработващи проекта, няма да имат достъп до личните данни."
+    },
+    "awareness": {
+      "heading": "Осъзнатост",
+      "content": "Търсим най-доброто решение и когато даряваме труда си, го правим с пълното съзнание, че не всичко, което правим, ще влезе в употреба. Ако се случи така, че да не се одобри планът или предложението ти, продължаваш с усмивка към следващата задача. Ако някой друг се справя по-добре в ролята ти, то на драго сърце го/я препоръчваш да я оглави, а ти му/й помагаш с каквото можеш."
+    }
+  }
 }

public/locales/en/about.json

@@ -1,3 +1,4 @@
 {
-  "ABOUT":"About"
+  "about": "About us",
+  "content": "Comming soon"
 }

public/locales/en/common.json

@@ -1,4 +1,38 @@
 {
-  "ONE": "One",
-  "TWO": "Two"
+  "nav": {
+    "home": "Home",
+    "about": "About",
+    "login": "Login",
+    "register": "Register"
+  },
+  "values": {
+    "voluntary": {
+      "heading": "Voluntary and pro-bono",
+      "content": "We are building a donation platform for the benefit of those in need and the organizations that help them, without seeking financial or other benefits from it, apart from satisfaction with the implemented campaigns and the support of those in need."
+    },
+    "proactive": {
+      "heading": "Proactive approach",
+      "content": "You don't wait to be given a task, you take it directly. This, of course, is true by correcting the structure a bit, so that at the moment it is not very clear what exactly the tasks are. However, more experienced people can easily see exactly what is missing and generate tasks that make sense. Take action, do not wonder."
+    },
+    "transparent": {
+      "heading": "Transparency",
+      "content": "Donors trust us because we provide transparency through open source, open data / transactions, open solutions. Those in need trust us because we make applying fair, easy and transparent, through clear criteria. Society trusts us because everything is transparent, incl. our work process. We trust each other because there are clear and transparent principles for working between us."
+    },
+    "respect": {
+      "heading": "Respect",
+      "content": "We are kind and good to the people around us, we respect them and if we can we help them. Everyone's opinion matters, so we listen and try to understand what the other person is saying."
+    },
+    "expertise": {
+      "heading": "Expertise",
+      "content": "When we make choices or make difficult decisions, we base them on the opinion of experts with close experience in the specific topic."
+    },
+    "privacy": {
+      "heading": "Privacy",
+      "content": "We respect and protect the personal data of everyone in need, donating or helping in the process, as if they were our own. We clearly define who has rights to access production data, and the people developing the project will not have access to personal data."
+    },
+    "awareness": {
+      "heading": "Awareness",
+      "content": "We are looking for the best solution and when we donate our work, we do it with the full awareness that not everything we do will come into use. If it so happens that your plan or proposal is not approved, you continue with a smile to the next task. If someone else is doing better in your role, you gladly recommend them to lead it, and you help them as much as you can."
+    }
+  }
 }

src/common/theme.ts

@@ -1,3 +1,4 @@
+import { pink } from '@material-ui/core/colors'
 import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'
 
 // https://material-ui.com/customization/default-theme/#default-theme
@@ -10,6 +11,10 @@ const theme = createMuiTheme({
       disabled: 'rgba(0, 0, 0, 0.38)',
       hint: 'rgba(0, 0, 0, 0.38)',
     },
+    primary: {
+      main: '#F19F25',
+    },
+    secondary: pink,
   },
   shape: {
     borderRadius: 6,

src/common/useNextLocale.ts

@@ -0,0 +1,78 @@
+import i18next from 'i18next'
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+import { initReactI18next } from 'react-i18next'
+
+interface Translation {
+  [key: string]: string
+}
+interface Translations {
+  [namespace: string]: Translation
+}
+interface I18nResources {
+  translations: Translations
+  namespaces: string[]
+}
+
+type LocaleSetupProps = {
+  i18nResources: I18nResources
+  fallback?: string
+}
+
+export default function useNextLocale({
+  i18nResources = { translations: {}, namespaces: ['common'] },
+}: LocaleSetupProps) {
+  const router = useRouter()
+  const { translations, namespaces } = i18nResources
+  const locale = router.locale || router.defaultLocale
+  if (!i18next.isInitialized) {
+    i18next.use(initReactI18next).init({
+      lng: locale,
+      preload: locale ? [locale] : [],
+      ns: namespaces,
+      supportedLngs: router.locales,
+      fallbackLng: router.defaultLocale,
+      react: { useSuspense: false },
+    })
+  }
+
+  i18next.setDefaultNamespace(namespaces[0])
+
+  if (locale) {
+    // Initialize language
+    if (!i18next.language) {
+      i18next.changeLanguage(locale)
+    }
+
+    for (const ns of namespaces) {
+      if (!i18next.hasResourceBundle(locale, ns)) {
+        i18next.addResourceBundle(locale, ns, translations[ns])
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (!i18next.language) return
+    if (!router.locale) return
+
+    // Handle router locale updates
+    if (i18next.language !== router.locale) {
+      i18next.changeLanguage(router.locale)
+    }
+  }, [i18next.language, router.locale])
+
+  return { locale }
+}
+
+export async function serverSideTranslations(locale: string | undefined, namespaces: string[]) {
+  const translations: Translations = {}
+
+  for (const ns of namespaces) {
+    const { default: data = {} }: { default: Translation } = await import(
+      `../../public/locales/${locale}/${ns}.json`
+    )
+    translations[ns] = data
+  }
+
+  return { translations, namespaces }
+}

src/components/IndexPage.tsx

@@ -1,14 +1,33 @@
+import { Grid, Typography } from '@material-ui/core'
 import Layout from 'components/layout/Layout'
+import { useTranslation } from 'react-i18next'
+
+const points = [
+  'voluntary',
+  'proactive',
+  'transparent',
+  'respect',
+  'expertise',
+  'privacy',
+  'awareness',
+]
 
 export default function IndexPage() {
+  const { t } = useTranslation()
   return (
     <Layout title="Podkrepi.bg">
-      <div>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis viverra velit.
-        Cras eros justo, ultricies vel pretium auctor, congue vitae nisl. Nulla vitae maximus velit.
-        Cras eu suscipit felis. Sed auctor sodales mauris ut vestibulum. Maecenas condimentum semper
-        tempor. Pellentesque odio nisi, pharetra quis mauris vitae, ullamcorper aliquam sapien.
-      </div>
+      <Grid container direction="column" justify="center" alignItems="stretch">
+        {points.map((point, index) => (
+          <Grid item key={index}>
+            <Typography variant="h4" component="h2" paragraph>
+              {t(`values.${point}.heading`)}
+            </Typography>
+            <Typography variant="subtitle2" paragraph>
+              {t(`values.${point}.content`)}
+            </Typography>
+          </Grid>
+        ))}
+      </Grid>
     </Layout>
   )
 }

src/components/about/AboutPage.tsx

@@ -1,3 +1,4 @@
+import { Typography } from '@material-ui/core'
 import Layout from 'components/layout/Layout'
 import { useTranslation } from 'react-i18next'
 
@@ -7,18 +8,10 @@ export default function AboutPage() {
   const { t } = useTranslation()
 
   return (
-    <Layout title={t('about:ABOUT')}>
-      <div className={styles.page}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod feugiat fringilla.
-        Mauris sed elit facilisis, consequat nisi quis, sagittis diam. Morbi tincidunt sollicitudin
-        odio, vel pharetra metus efficitur at. Vestibulum venenatis ut purus at laoreet. Integer ac
-        neque nec nibh sollicitudin imperdiet a et arcu. Nam et diam eget orci auctor rhoncus. Ut
-        fermentum pellentesque mauris, bibendum scelerisque lorem accumsan cursus. Maecenas
-        hendrerit purus vel pulvinar pellentesque. Donec non mi aliquet purus sollicitudin iaculis.
-        Cras nec urna commodo, ullamcorper diam ac, vestibulum lacus. Sed imperdiet augue vel turpis
-        luctus accumsan. In hac habitasse platea dictumst. In interdum nunc nec mi eleifend
-        consectetur.
-      </div>
+    <Layout title={t('about:about')}>
+      <Typography variant="body1" className={styles.page}>
+        {t('about:content')}
+      </Typography>
     </Layout>
   )
 }

src/components/layout/Footer.tsx

@@ -0,0 +1,23 @@
+import { createStyles, makeStyles } from '@material-ui/core'
+import LocaleSwitcher from './LocaleSwitcher'
+
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    footer: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      padding: theme.spacing(3, 0),
+    },
+  }),
+)
+
+export default function Footer() {
+  const styles = useStyles()
+  return (
+    <footer className={styles.footer}>
+      <LocaleSwitcher />
+    </footer>
+  )
+}

src/components/layout/Layout.tsx

@@ -1,24 +1,44 @@
 import Head from 'next/head'
-import Footer from './footer/Footer'
-import { Box, Container, Typography } from '@material-ui/core'
+import { Box, Container, createStyles, makeStyles, Typography } from '@material-ui/core'
 
 import Nav from 'components/layout/Nav'
+import Footer from 'components/layout/Footer'
 
 type LayoutProps = React.PropsWithChildren<{
   title?: string
 }>
 
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    layout: {
+      position: 'relative',
+      minHeight: '100vh',
+    },
+    pageTitle: {
+      padding: theme.spacing(4),
+    },
+  }),
+)
+
 export default function Layout({ title, children }: LayoutProps) {
+  const styles = useStyles()
   return (
-    <Container maxWidth="md">
+    <Container maxWidth="md" className={styles.layout}>
       <Head>
         <title>{title}</title>
       </Head>
-      <Box my={4}>
+      <Box py={4} pb={8}>
         <Nav />
-        <Typography variant="h4" component="h1" gutterBottom>
-          {title}
-        </Typography>
+        {title && (
+          <Typography
+            className={styles.pageTitle}
+            variant="h3"
+            component="h1"
+            align="center"
+            paragraph>
+            {title}
+          </Typography>
+        )}
         {children}
       </Box>
       <Footer />