akaqi/starter-blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

chore: first total translation

Browse source
This commit is contained in:
Gautier Arcin 2021-08-06 22:09:15 +02:00
parent 01a50c5f48
commit f860b91142
8 changed files with 64 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
data/projectsData.js
View file

@ -1,20 +1,40 @@
const projectsData = [
{
title: 'A Search Engine',
description: `What if you could look up any information in the world? Webpages, images, videos
and more. Google has many features to help you find exactly what you're looking
for.`,
imgSrc: '/static/images/google.png',
href: 'https://www.google.com',
},
{
title: 'The Time Machine',
description: `Imagine being able to travel back in time or to the future. Simple turn the knob
to the desired date and press "Go". No more worrying about lost keys or
forgotten handphones with this simple yet affordable solution.`,
imgSrc: '/static/images/time-machine.jpg',
href: '/blog/the-time-machine',
},
]
const projectsData = {
en: [
{
title: 'A Search Engine',
description: `What if you could look up any information in the world? Webpages, images, videos
and more. Google has many features to help you find exactly what you're looking
for.`,
imgSrc: '/static/images/google.png',
href: 'https://www.google.com',
},
{
title: 'The Time Machine',
description: `Imagine being able to travel back in time or to the future. Simple turn the knob
to the desired date and press "Go". No more worrying about lost keys or
forgotten handphones with this simple yet affordable solution.`,
imgSrc: '/static/images/time-machine.jpg',
href: '/blog/the-time-machine',
},
],
fr: [
{
title: 'Un moteur de recherche',
description: `Et si vous pouviez rechercher n'importe quelle information dans le monde ? Pages web, images, vidéos
et bien d'autres choses encore. Google propose de nombreuses fonctionnalités pour vous aider à trouver exactement ce que vous recherchez.
pour.`,
imgSrc: '/static/images/google.png',
href: 'https://www.google.com',
},
{
title: 'La machine à remonter le temps',
description: `Imaginez que vous puissiez voyager dans le passé ou dans le futur. Il suffit de tourner le bouton
sur la date souhaitée et d'appuyer sur "Go". Plus besoin de se soucier des clés perdues ou des téléphones portables oubliés avec cette solution simple et abordable.
ou de téléphones portables oubliés grâce à cette solution simple et abordable.`,
imgSrc: '/static/images/time-machine.jpg',
href: '/blog/the-time-machine',
},
],
}
export default projectsData

5
layouts/ListLayout.js
View file

@ -4,6 +4,7 @@ import siteMetadata from '@/data/siteMetadata'
import { useState } from 'react'
import Pagination from '@/components/Pagination'
import formatDate from '@/lib/utils/formatDate'
import useTranslation from 'next-translate/useTranslation'
export default function ListLayout({ posts, title, initialDisplayPosts = [], pagination }) {
const [searchValue, setSearchValue] = useState('')
@ -12,6 +13,8 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
return searchContent.toLowerCase().includes(searchValue.toLowerCase())
})
const { t } = useTranslation()
// If initialDisplayPosts exist, display it if no searchValue is specified
const displayPosts =
initialDisplayPosts.length > 0 && !searchValue ? initialDisplayPosts : filteredBlogPosts
@ -28,7 +31,7 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
aria-label="Search articles"
type="text"
onChange={(e) => setSearchValue(e.target.value)}
placeholder="Search articles"
placeholder={t('common:search')}
className="block w-full px-4 py-2 text-gray-900 bg-white border border-gray-300 rounded-md dark:border-gray-900 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-800 dark:text-gray-100"
/>
<svg

5
locales/en/common.json
View file

@ -1,4 +1,7 @@
{
"greeting": "Latest",
"description": "A blog created with Next.js and Tailwind.css"
"description": "A blog created with Next.js and Tailwind.css",
"more": "Read more",
"all": "All Posts",
"search": "Search articles"
}

5
locales/fr/common.json
View file

@ -1,4 +1,7 @@
{
"greeting": "Les plus récents",
"description": "Un blog créé avec Next.js et Tailwind.css"
"description": "Un blog créé avec Next.js et Tailwind.css",
"more": "Lire la suite",
"all": "Tous Les Articles",
"search": "Recherche"
}

5
pages/blog.js
View file

@ -3,6 +3,8 @@ import siteMetadata from '@/data/siteMetadata'
import ListLayout from '@/layouts/ListLayout'
import { PageSeo } from '@/components/SEO'
import useTranslation from 'next-translate/useTranslation'
export const POSTS_PER_PAGE = 5
export async function getStaticProps({ locale, defaultLocale }) {
@ -18,6 +20,7 @@ export async function getStaticProps({ locale, defaultLocale }) {
}
export default function Blog({ posts, initialDisplayPosts, pagination }) {
const { t } = useTranslation()
return (
<>
<PageSeo title={`Blog - ${siteMetadata.author}`} description={siteMetadata.description} />
@ -25,7 +28,7 @@ export default function Blog({ posts, initialDisplayPosts, pagination }) {
posts={posts}
initialDisplayPosts={initialDisplayPosts}
pagination={pagination}
title="All Posts"
title={t('common:all')}
/>
</>
)

5
pages/blog/page/[page].js
View file

@ -4,6 +4,8 @@ import { getAllFilesFrontMatter } from '@/lib/mdx'
import ListLayout from '@/layouts/ListLayout'
import { POSTS_PER_PAGE } from '../../blog'
import useTranslation from 'next-translate/useTranslation'
export async function getStaticPaths({ locales }) {
const totalPosts = await getAllFilesFrontMatter('blog') // don't forget to useotherLocale
const totalPages = Math.ceil(totalPosts.length / POSTS_PER_PAGE)
@ -48,6 +50,7 @@ export async function getStaticProps(context) {
}
export default function PostPage({ posts, initialDisplayPosts, pagination }) {
const { t } = useTranslation()
return (
<>
<PageSeo title={siteMetadata.title} description={siteMetadata.description} />
@ -55,7 +58,7 @@ export default function PostPage({ posts, initialDisplayPosts, pagination }) {
posts={posts}
initialDisplayPosts={initialDisplayPosts}
pagination={pagination}
title="All Posts"
title={t('common:all')}
/>
</>
)

4
pages/index.js
View file

@ -71,7 +71,7 @@ export default function Home({ posts }) {
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
aria-label={`Read "${title}"`}
>
Read more &rarr;
{t('common:more')} &rarr;
</Link>
</div>
</div>
@ -89,7 +89,7 @@ export default function Home({ posts }) {
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
aria-label="all posts"
>
All Posts &rarr;
{t('common:all')} &rarr;
</Link>
</div>
)}

5
pages/projects.js
View file

@ -6,8 +6,11 @@ import Card from '@/components/Card'
import { PageSeo } from '@/components/SEO'
import useTranslation from 'next-translate/useTranslation'
import { useRouter } from 'next/router'
export default function Projects() {
const { t } = useTranslation()
const { locale } = useRouter()
return (
<>
<PageSeo title={`Projects - ${siteMetadata.author}`} description={siteMetadata.description} />
@ -22,7 +25,7 @@ export default function Projects() {
</div>
<div className="container py-12">
<div className="flex flex-wrap -m-4">
{projectsData.map((d) => (
{projectsData[locale]?.map((d) => (
<Card
key={d.title}
title={d.title}