Redesign and improve Experiences pages

The-hated-one · Jul 3, 2021 · 3a284a1 · 3a284a1
1 parent 775e4ee
commit 3a284a1
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 204 deletions.
diff --git a/pages/about/[slug].tsx b/pages/about/[slug].tsx
@@ -1,153 +1,71 @@
-import React from 'react';
-import glob from 'fast-glob';
-import { Container, Title, Text, Grid } from '../../components';
-import { join } from 'path';
-import { NextPage, GetStaticPaths, GetStaticPropsResult } from 'next';
-import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote';
-import { GrayMatterFile } from 'gray-matter';
+import { GetStaticPaths, GetStaticPropsResult, NextPage } from 'next';
+import { NotionRenderer, NotionRendererProps, Code } from 'react-notion-x';
+import { NotionAPI } from 'notion-client';
+import { getPageInfo, Page, EXPERIENCES } from '../../posts/notion';
+import { Container } from '../../components';
 import Head from 'next/head';
-import TransparentLink from '../../components/TransparentLink';
-import { getPosts, Post } from '../../posts';
 
-interface AboutProps {
-  data: GrayMatterFile<string>['data'];
-  source: MDXRemoteSerializeResult;
-  experiences: Post[];
+interface BlogProps {
+  page: Page;
+  recordMap: NotionRendererProps['recordMap'];
 }
 
-const About: NextPage<AboutProps> = ({ experiences, data, source }) => (
-  <Container maxWidth={1200}>
-    <Container
-      alignItems="center"
-      justifyContent="center"
-      alignContent="center"
-    >
-      <Head>
-        <title>{data.title}</title>
-      </Head>
-      <Grid gridTemplateColumns="1fr" justifyItems="center">
-        <img alt="logo" src={data.preview} width="100rem" height="auto" />
-        <Title fontSize="2rem" marginTop="2rem" as="h2">
-          {data.post} @ {data.title}
-        </Title>
-        <Text margin={0}>{data.date}</Text>
-      </Grid>
-    </Container>
-    <MDXRemote {...source} />
-    <Container
-      alignContent="center"
-      textAlign="center"
-      borderBottom="1px solid rgba(0,0,0,0.1)"
-      padding="40px 0"
-    >
-      <Text fontSize="16px" lineHeight="35px">
-        <a href={data.url}>website</a>
-      </Text>
-    </Container>
-    <Container width="100%" alignContent="center">
-      <Container
-        width="100%"
-        marginTop="4rem"
-        gridGap="2rem"
-        maxWidth={['100%', '800px']}
-      >
-        <Title fontSize="2rem" as="h3">
-          Other experiences
-        </Title>
-        <Container width="100%">
-          {experiences.map(({ data }, i) => (
-            <TransparentLink href={`/about/${data.slug}`} key={data.slug}>
-              <Grid
-                key={i}
-                gridTemplateColumns="1fr 4fr"
-                justifyItems="flex-start"
-                gridGap="1rem"
-                paddingY="2rem"
-                borderBottom="1px solid rgba(0,0,0,0.1)"
-              >
-                <Container width="100%">
-                  <Text>0{experiences.length - i}</Text>
-                </Container>
-                <Grid width="100%" gridTemplateColumns="4fr 1fr">
-                  <Container
-                    width="100%"
-                    alignItems="flex-start"
-                    textAlign="start"
-                  >
-                    <Grid
-                      width="100%"
-                      gridTemplateColumns="repeat(2, auto)"
-                      justifyItems="flex-start"
-                      justifyContent="flex-start"
-                      gridGap="1rem"
-                    >
-                      <Title fontSize="1.5rem" margin={0} as="h3">
-                        {data.title}
-                      </Title>
-                      <Text
-                        fontSize="smaller"
-                        margin={0}
-                        color="rgba(0, 0, 0, 0.1)"
-                      >
-                        {data.date}
-                      </Text>
-                    </Grid>
-                    <Text fontSize="1rem">{data.caption}</Text>
-                  </Container>
-                  <Text fontSize="1.5rem">&rarr;</Text>
-                </Grid>
-              </Grid>
-            </TransparentLink>
-          ))}
-        </Container>
-      </Container>
-    </Container>
+const About: NextPage<BlogProps> = ({ page, recordMap }) => (
+  <Container
+    width={['100%', 1200]}
+    maxWidth="100vw"
+    marginBottom={['1rem', '4rem']}
+  >
+    <Head>
+      <title>{page.title}</title>
+      <meta property="og:title" content={page.title} />
+    </Head>
+    <NotionRenderer
+      fullPage
+      className="notion-container"
+      recordMap={recordMap}
+      components={{
+        code: Code,
+      }}
+    />
   </Container>
 );
 
-type Params = {
-  params: {
-    slug: string;
-  };
-};
-
-const baseDir = join(process.cwd(), './posts/experiences/');
-const contentGlob = join(baseDir, '/*.mdx');
-
 export const getStaticPaths: GetStaticPaths = async () => {
-  const files = glob.sync(contentGlob);
-  const paths = files.map((file) => {
-    const split = file.split('/');
-    const filename = split[split.length - 1];
-    const slug = filename.replace('.mdx', '');
-
-    return {
+  return {
+    paths: Object.keys(EXPERIENCES).map((slug) => ({
       params: {
         slug,
       },
-    };
-  });
-
-  return {
-    paths,
+    })),
     fallback: false,
   };
 };
 
+type Params = {
+  params: {
+    slug: keyof typeof EXPERIENCES;
+  };
+};
+
+const notion = new NotionAPI();
+
 export const getStaticProps = async ({
   params: { slug },
-}: Params): Promise<GetStaticPropsResult<AboutProps>> => {
-  const experiences = await getPosts('experiences');
-  const index = experiences.findIndex(({ data }) => data.slug === slug);
-  const { data, source } = experiences[index];
+}: Params): Promise<GetStaticPropsResult<BlogProps>> => {
+  const { uri, date } = EXPERIENCES[slug];
+  const recordMap = await notion.getPage(uri);
+  const pageInfo = getPageInfo(recordMap);
+  const page: Page = {
+    ...pageInfo,
+    uri,
+    date,
+  };
 
   return {
     props: {
-      experiences: experiences.sort((a, b) =>
-        b.data.date.toString().localeCompare(a.data.date.toString()),
-      ),
-      data,
-      source,
+      page,
+      recordMap,
     },
   };
 };

diff --git a/posts/experiences/bilberry.mdx b/posts/experiences/bilberry.mdx
@@ -2,19 +2,5 @@
 title: Bilberry
 post: DevOps + FullStack Developer
 date: 2018 - 2020
-url: https://bilberry.io/en
-preview: /img/bilberry.png
 caption: My first developer experience as an intern and then Freelance. Full-Stack and DevOps.
 ---
-
-- Bilberry uses AI to reduce the overuse of herbicide.
-
-- I migrated the old infrastructure from single server Docker deployment to **Kubernetes** on **Google Cloud**.
-
-- I had to migrate stored objects and databases data and automate the deployment with a CI/CD.
-
-- This led to a better scalability of the infrastructure and more safety for the storage of the data.
-
-- I worked on multiple services based on a **Django** / **React** / **PostgreSQL** / **MongoDB**.
-
-- I made a 6-month internship and continued to work in freelance.
diff --git a/posts/experiences/dispatcher.mdx b/posts/experiences/dispatcher.mdx
@@ -2,15 +2,5 @@
 title: Dispatcher
 post: Go Backend Developer
 date: 2020
-url: https://dispatcher-pro.com/en
-preview: /img/dispatcher.png
 caption: Working as a Go Backend developer.
 ---
-
-- Dispatcher is a cloud-based solution for resources planning on construction sites.
-
-- I had to work on a new **Go backend** to improve performance of the previous backend.
-
-- I had to improve the performance of existing APIs, optimize the existing SQL requests and add many new features to the API.
-
-- I also worked on the **Vue.js** frontend to improve it and add new features and pages.
diff --git a/posts/experiences/epitech.mdx b/posts/experiences/epitech.mdx
@@ -2,15 +2,5 @@
 title: Epitech
 post: Technical assistant
 date: 2019
-url: https://www.epitech.eu/
-preview: /img/epitech.png
 caption: Organize coding sessions, teaching C and C++ to students.
 ---
-
-- During my second year at Epitech, I was selected to become a technical assistant
-
-- Organize coding sessions
-
-- Teach programming concepts in C and C++ such as memory management and data structures
-
-- Give code feedbacks and tips to students
diff --git a/posts/experiences/shareview.mdx b/posts/experiences/shareview.mdx
@@ -2,28 +2,5 @@
 title: Shareview
 post: CTO
 date: 2020 - Now
-url: https://shareview.fr/
-preview: /img/shareview.png
 caption: Discover more about my first experience as a CTO.
 ---
-
-- CTO of Shareview, a new social network that aims to share landscapes from all over the world.
-
-- I designed the whole infrastructure on **Aws EKS**, Backend services and worked on the mobile application.
-
-- The infrastructure is fully managed with **terraform** and **ekstcl**.
-
-- Backend services are written in **Go** and expose a **GraphQL API**.
-
-- Backend services communicates with a pub/sub queue, for tasks such as video encoding.
-
-- Deployment is automated with a CI/CD and **Helm charts**.
-
-- Monitoring is made with *Sentry* and EFK stack (**ElasticSearch**, **Fluentd** and **Kibana**).
-
-- The mobile application is made with **React-Native**.
-
-- Front-end is made with **Next.js**.
-
-Available for [iOS](https://apps.apple.com/fr/app/shareview-vid%C3%A9os-de-paysages/id1549748087) or [Android](https://play.google.com/store/apps/details?id=fr.shareview.app).
-
diff --git a/posts/experiences/tresorio.mdx b/posts/experiences/tresorio.mdx
@@ -2,21 +2,5 @@
 title: Tresorio
 post: FullStack Developer
 date: 2019-2020
-url: https://tresorio.com/en
-preview: /img/tresorio.png
 caption: Working for an eco-friendly cloud provider. Building a rendering system with Blender and Go.
 ---
-
-- Tresorio is an eco-friendly cloud provider that reuse 100% of the heat generated by the servers.
-
-- It offers a lot of services including VPS, Storage and Cloud rendering.
-
-- I mainly worked on the Cloud rendering part, it's a Blender addon that's [open source](https://github.com/Tresorio/pablo).
-
-- I had to work on a **Go** backend server that renders **Blender** scenes.
-
-- I improved the performance, scalability and make it reusable before adding many new features to it.
-
-- I worked on a new **Gitlab** CI/CD pipeline for testing all micro-services.
-
-- I automated deployment for services (**Go**, **React**, **Typescript**, **Python**...).
diff --git a/posts/notion.ts b/posts/notion.ts
@@ -12,6 +12,29 @@ export const POSTS = {
   },
 };
 
+export const EXPERIENCES = {
+  shareview: {
+    date: '2020 - Now',
+    uri: 'shblog/Shareview-CTO-b3f7d62a744d4cb7bd271d25f4790ece',
+  },
+  dispatcher: {
+    date: '2020',
+    uri: 'shblog/Dispatcher-Go-Backend-developer-fa13680ef8324bacb31b773a5f08c3ad',
+  },
+  tresorio: {
+    date: '2019 - 2020',
+    uri: 'shblog/Tresorio-12516126ddb84eb6abc72656731e1f26',
+  },
+  epitech: {
+    date: '2018 - 2019',
+    uri: 'shblog/Epitech-Teaching-assistant-b8ee49774bd5423ba00a6921c026c1c6',
+  },
+  bilberry: {
+    date: '2018 - 2020',
+    uri: 'shblog/Bilberry-28dc7324b3e24fd6a4475a63c2ac0410',
+  },
+};
+
 export interface PageInfo {
   title: string;
   cover?: string;
@@ -29,7 +52,7 @@ export const getPageInfo = (page: ExtendedRecordMap): PageInfo => {
   };
 
   const block = Object.values(page.block)[0].value;
-  if (block.type === 'page' && block.format.page_cover) {
+  if (block.type === 'page' && block.format?.page_cover) {
     info.coverPosition = block.format.page_cover_position;
     info.cover =
       'https://www.notion.so/image/' +

diff --git a/public/img/bilberry.png b/public/img/bilberry.png
diff --git a/public/img/dispatcher.png b/public/img/dispatcher.png
diff --git a/public/img/epitech.png b/public/img/epitech.png
diff --git a/public/img/shareview.png b/public/img/shareview.png
diff --git a/public/img/tresorio.png b/public/img/tresorio.png