knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[usecase][m]: experiment i18n on homeage

Browse Source
This commit is contained in:
steveoni
2020-11-25 16:04:52 +01:00
parent e22805bc77
commit 55c6a85180
1 changed files with 43 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
packages/portal/pages/index.tsx
View File

@@ -5,36 +5,48 @@ import Nav from '../components/home/Nav';
import Recent from '../components/home/Recent'; import Recent from '../components/home/Recent';
import Form from '../components/search/Form'; import Form from '../components/search/Form';
import { SEARCH_QUERY } from '../graphql/queries'; import { SEARCH_QUERY } from '../graphql/queries';
import { loadNamespaces } from './_app';
import useTranslation from 'next-translate/useTranslation';
const Home: React.FC = () => ( const Home: React.FC<{ locale: any; locales: any }> = ({
<div className="container mx-auto"> locale,
<Head> locales,
<title>Portal</title> }) => {
<link rel="icon" href="/favicon.ico" /> const { t } = useTranslation();
</Head>
<Nav />
<section className="flex justify-center items-center flex-col mt-8 mx-4 lg:flex-row">
<div>
<h1 className="text-4xl mb-3 font-thin">
Find, Share and Publish <br /> Quality Data with{' '}
<span className="text-orange-500">Datahub</span>
</h1>
<p className="text-md font-light mb-3 w-4/5">
At Datahub, we have over thousands of datasets for free and a Premium
Data Service for additional or customised data with guaranteed
updates.
</p>
<Form />
</div>
<div className="mt-4">
<img src="/images/banner.svg" className="w-4/5" alt="banner_img" />
</div>
</section>
<Recent />
</div>
);
export const getServerSideProps: GetServerSideProps = async () => { return (
<>
<div className="container mx-auto">
<Head>
<title>{t`common:title`}</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Nav />
<section className="flex justify-center items-center flex-col mt-8 mx-4 lg:flex-row">
<div>
<h1 className="text-4xl mb-3 font-thin">
Find, Share and Publish <br /> Quality Data with{' '}
<span className="text-orange-500">Datahub</span>
</h1>
<p className="text-md font-light mb-3 w-4/5">
{t`common:description`}
</p>
<Form />
</div>
<div className="mt-4">
<img src="/images/banner.svg" className="w-4/5" alt="banner_img" />
</div>
</section>
<Recent />
</div>
</>
);
};
export const getServerSideProps: GetServerSideProps = async ({
locale,
locales,
}) => {
const apolloClient = initializeApollo(); const apolloClient = initializeApollo();
await apolloClient.query({ await apolloClient.query({
@@ -48,6 +60,9 @@ export const getServerSideProps: GetServerSideProps = async () => {
return { return {
props: { props: {
initialApolloState: apolloClient.cache.extract(), initialApolloState: apolloClient.cache.extract(),
_ns: await loadNamespaces(['common'], locale),
locale,
locales,
}, },
}; };
}; };