feat: add projects

thedaviddias · Jul 17, 2023 · 4a25abd · 4a25abd
1 parent 0a66e3e
commit 4a25abd
Show file tree

Hide file tree

Showing 15 changed files with 175 additions and 20 deletions.
diff --git a/data/projects.json b/data/projects.json
@@ -0,0 +1,20 @@
+[
+  {
+    "title": "Front-End Checklist V1",
+    "url": "https://frontendchecklist.io/",
+    "status": "active",
+    "description_en": "The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page to production.",
+    "description_fr": "",
+    "category_en": "",
+    "category_fr": ""
+  },
+  {
+    "title": "UI Patterns for developers",
+    "url": "https://ui-patterns-dev.vercel.app/fr",
+    "status": "work in progress",
+    "description_en": "A full guide on all UI Patterns, practices, pitfalls and gotchas for front-end developers.",
+    "description_fr": "",
+    "category_en": "",
+    "category_fr": ""
+  }
+]
diff --git a/locales/en/common.json b/locales/en/common.json
@@ -125,7 +125,22 @@
       "popular": "Popular Github Projects",
       "popular_description": "My most popular open-source projects. Feel free to take a look and contribute!",
       "viewAll": "→ View all my projects",
-      "latest-projects": "Latest updated projects"
+      "latest-projects": "Current projects"
+    }
+  },
+  "openProjects": {
+    "path": "/projects",
+    "seo": {
+      "url": "projects",
+      "title": "My Projects",
+      "description": "Discover all the projects I've worked on or I'm currently working on."
+    },
+    "updated": "Updated {{date}} ago",
+    "sections": {
+      "popular": "Popular Github Projects",
+      "popular_description": "My most popular open-source projects. Feel free to take a look and contribute!",
+      "viewAll": "→ View all my projects",
+      "latest-projects": "Updated Open-Source projects"
     }
   },
   "tags": {

diff --git a/locales/fr/common.json b/locales/fr/common.json
@@ -120,6 +120,21 @@
       "latest-projects": "Derniers projets MàJ"
     }
   },
+  "openProjects": {
+    "path": "/projects",
+    "seo": {
+      "url": "projects",
+      "title": "Mes Projets",
+      "description": "Découvrez l'ensemble des projets sur lesquels j'ai travaillé et ceux sur lequel je suis toujours en train de travailler."
+    },
+    "updated": "MàJ il y a {{date}}",
+    "sections": {
+      "popular": "Projets populaires sur Github",
+      "popular_description": "Mes projets Open Source les plus populaires. N'hésitez pas à y jeter un coup d'œil et à y participer!",
+      "viewAll": "→ Voir tous mes projets",
+      "latest-projects": "Derniers projets MàJ"
+    }
+  },
   "tags": {
     "path": "/tags",
     "seo": {

diff --git a/public/rss/feed.xml b/public/rss/feed.xml
@@ -4,7 +4,7 @@
         <title>The David Dias | Front-End Developer, podcaster &amp; content creator</title>
         <link>https://thedaviddias.dev</link>
         <description>Hey, I'm David Dias! Front-End Developer based in Toronto/Canada. I love talking about code, technology, expatriation and life.</description>
-        <lastBuildDate>Mon, 17 Jul 2023 01:48:12 GMT</lastBuildDate>
+        <lastBuildDate>Mon, 17 Jul 2023 03:35:00 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>en-US</language>

diff --git a/public/rss/fr/feed.xml b/public/rss/fr/feed.xml
@@ -4,7 +4,7 @@
         <title>The David Dias | Développeur Front-End, podcasteur &amp; créateur de contenu</title>
         <link>https://thedaviddias.dev</link>
         <description>Salut toi! Je m'appele David Dias. Je suis développeur Front-End, podcasteur, créateur de contenu numérique passioné pour résoudre les problèmes digitaux et humains! J'aime rencontrer de nouvelles personnes, bâtir des communautées et parler de tech, d'expatriation et de web.</description>
-        <lastBuildDate>Mon, 17 Jul 2023 01:48:12 GMT</lastBuildDate>
+        <lastBuildDate>Mon, 17 Jul 2023 03:35:00 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>fr</language>

diff --git a/src/components/LatestGithubSection/LatestGithubSection.tsx b/src/components/LatestGithubSection/LatestGithubSection.tsx
@@ -16,7 +16,7 @@ export const LatestGithubSection: React.FC<LatestGithubSectionProps> = ({ projec
   return (
     <section className="border-none mb-5 md:mb-10">
       <header className="mb-5">
-        <H5 as="h2">{t('projects.sections.latest-projects')}</H5>
+        <H5 as="h2">{t('openProjects.sections.latest-projects')}</H5>
       </header>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2 max-w-5xl">
         {projects?.map((project, i) => (
@@ -25,7 +25,7 @@ export const LatestGithubSection: React.FC<LatestGithubSectionProps> = ({ projec
       </div>
       {projects.length ? (
         <footer className="mt-5 text-right">
-          <CustomLink href="/projects">{t('projects.sections.viewAll')}</CustomLink>
+          <CustomLink href="/projects">{t('openProjects.sections.viewAll')}</CustomLink>
         </footer>
       ) : null}
     </section>

diff --git a/src/components/LatestProjectsSection/LatestProjectsSection.tsx b/src/components/LatestProjectsSection/LatestProjectsSection.tsx
@@ -0,0 +1,33 @@
+import useTranslation from 'next-translate/useTranslation'
+
+import { CustomLink } from '../CustomLink'
+import { H5 } from '../Headings'
+import { Projects } from '../Projects'
+
+export type LatestProjectsSectionProps = {
+  projects: any[]
+}
+
+export const LatestProjectsSection: React.FC<LatestProjectsSectionProps> = ({ projects }) => {
+  const { t } = useTranslation('common')
+
+  return (
+    <section className="border-none mb-5 md:mb-10">
+      <header className="mb-5">
+        <H5 as="h2">{t('projects.sections.latest-projects')}</H5>
+      </header>
+
+      <div className="flex flex-col gap-3">
+        {projects?.map((project, i) => (
+          <Projects key={i} project={project} />
+        ))}
+      </div>
+
+      {projects.length ? (
+        <footer className="mt-5 text-right">
+          <CustomLink href="/projects">{t('projects.sections.viewAll')}</CustomLink>
+        </footer>
+      ) : null}
+    </section>
+  )
+}
diff --git a/src/components/LatestProjectsSection/index.ts b/src/components/LatestProjectsSection/index.ts
@@ -0,0 +1 @@
+export * from './LatestProjectsSection'
diff --git a/src/components/ProjectCard/ProjectCard.tsx b/src/components/ProjectCard/ProjectCard.tsx
@@ -0,0 +1,52 @@
+import Image from 'next/image'
+import useTranslation from 'next-translate/useTranslation'
+
+import { CustomLink } from '@/components/CustomLink'
+import { H5 } from '@/components/Headings'
+import { Paragraph } from '@/components/Paragraph'
+
+import { UsesType } from '@/types'
+
+type ProjectCardProps = {
+  tool: UsesType
+}
+
+export const ProjectCard: React.FC<ProjectCardProps> = ({ tool }) => {
+  const { lang } = useTranslation('common')
+
+  return (
+    <article className="flex flex-row relative gap-x-5">
+      {tool.image ? (
+        <div className="min-w-[5rem]">
+          <Image
+            alt={`Thumbnail of ${tool.title}`}
+            src={tool.image}
+            width="75"
+            height="75"
+            style={{
+              maxWidth: '100%',
+              height: 'auto',
+            }}
+          />
+        </div>
+      ) : null}
+      <div>
+        <H5 as="h3" className="mb-2">
+          <CustomLink
+            href={tool.url}
+            className="before:content-[''] before:absolute before:top-0 before:left-0 before:right-0 before:bottom-0 font-medium dark:!text-white"
+          >
+            {tool.title}
+          </CustomLink>
+        </H5>
+        <span className="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium dark:text-white ring-1 ring-inset ring-gray-400 dark:ring-gray-700">
+          <svg className="h-1.5 w-1.5 fill-blue-400" viewBox="0 0 6 6" aria-hidden="true">
+            <circle cx="3" cy="3" r="3" />
+          </svg>
+          {tool.status}
+        </span>
+        <Paragraph>{tool[`description_${lang}` as keyof UsesType]}</Paragraph>
+      </div>
+    </article>
+  )
+}
diff --git a/src/components/ProjectCard/index.ts b/src/components/ProjectCard/index.ts
@@ -0,0 +1 @@
+export * from './ProjectCard'
diff --git a/src/components/Projects/Projects.tsx b/src/components/Projects/Projects.tsx
@@ -0,0 +1,9 @@
+import { ProjectCard } from '../ProjectCard'
+
+export type ProjectsProps = {
+  project: any
+}
+
+export const Projects: React.FC<ProjectsProps> = ({ project }) => {
+  return <ProjectCard tool={project} />
+}
diff --git a/src/components/Projects/index.ts b/src/components/Projects/index.ts
@@ -0,0 +1 @@
+export * from './Projects'
diff --git a/src/components/ToolCard/ToolCard.tsx b/src/components/ToolCard/ToolCard.tsx
@@ -16,18 +16,20 @@ export const ToolCard: React.FC<ToolCard> = ({ tool }) => {
 
   return (
     <article className="flex flex-row relative gap-x-5">
-      <div className="min-w-[5rem]">
-        <Image
-          alt={`Thumbnail of ${tool.title}`}
-          src={tool.image}
-          width="75"
-          height="75"
-          style={{
-            maxWidth: '100%',
-            height: 'auto',
-          }}
-        />
-      </div>
+      {tool.image ? (
+        <div className="min-w-[5rem]">
+          <Image
+            alt={`Thumbnail of ${tool.title}`}
+            src={tool.image}
+            width="75"
+            height="75"
+            style={{
+              maxWidth: '100%',
+              height: 'auto',
+            }}
+          />
+        </div>
+      ) : null}
       <div>
         <H5 as="h3">
           <CustomLink

diff --git a/src/config/routes.ts b/src/config/routes.ts
@@ -16,8 +16,8 @@ export const routes: RoutesResponse = (translate) => ({
     path: '',
     seo: extendSEO({
       options: {
-        title: translate('404:404.seo.title'),
-        description: translate('404:404.seo.description'),
+        title: translate('404.seo.title'),
+        description: translate('404.seo.description'),
       },
       translate,
     }),

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -15,6 +15,7 @@ import { CurrentlyReading } from '@/components/CurrentlyReading'
 import { CustomLink } from '@/components/CustomLink'
 import { LatestNotesSection } from '@/components/LatestNotesSection'
 import { LatestPostsSection } from '@/components/LatestPostsSection'
+import { LatestProjectsSection } from '@/components/LatestProjectsSection/LatestProjectsSection'
 import { Loader } from '@/components/Loader'
 import { ToRead } from '@/components/ToRead'
 
@@ -50,12 +51,13 @@ type HomeProps = {
   articles: ArticlesType[]
   notes: NotesType[]
   ghProjects: GhProjectsProps[]
+  projects: any[]
   fallback: {
     '/api/youtube/videos': YouTubeVideo[]
   }
 }
 
-const Home: NextPage<HomeProps> = ({ articles, notes, ghProjects, fallback }) => {
+const Home: NextPage<HomeProps> = ({ articles, notes, ghProjects, fallback, projects }) => {
   const { t } = useTranslation('common')
 
   return (
@@ -144,6 +146,8 @@ const Home: NextPage<HomeProps> = ({ articles, notes, ghProjects, fallback }) =>
 
           <LatestNotesSection notes={notes} />
 
+          <LatestProjectsSection projects={projects} />
+
           <LatestGithubSection projects={ghProjects} />
 
           {process.env.NODE_ENV === 'production' && !mobile() && <PodcastSection />}
@@ -158,6 +162,7 @@ const Home: NextPage<HomeProps> = ({ articles, notes, ghProjects, fallback }) =>
 export const getStaticProps: GetStaticProps<HomeProps> = async ({ locale }) => {
   const posts = await getAllPostsWithFrontMatter({ dataType: 'articles', locale, limit: 4 })
   const notes = await getAllPostsWithFrontMatter({ dataType: 'notes', locale, limit: 4 })
+  const projects = await readData<any[]>('data/projects.json')
   const youtubeVideos = await readData<YouTubeVideo[]>('data/youtube.json')
   const ghProjects = await fetchRepos('PUSHED_AT', 2)
 
@@ -166,6 +171,7 @@ export const getStaticProps: GetStaticProps<HomeProps> = async ({ locale }) => {
   const props: HomeProps = {
     articles: JSON.parse(JSON.stringify(posts)),
     notes: JSON.parse(JSON.stringify(notes)),
+    projects: JSON.parse(JSON.stringify(projects)),
     ghProjects,
     fallback: {
       '/api/youtube/videos': youtubeVideos,