Website: markdown to release (#4146)

* website: markdown to release

* remove Image.png

* fixed font weight

* Change folder structure

* remove react-markdown

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-website/src/app/_components/releases/Line.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import styled from '@emotion/styled';
+
+const StyledLineContainer = styled.div`
+  width: 810px;
+  margin: 0 auto;
+  display: flex;
+
+  @media (max-width: 810px) {
+    width: auto;
+    margin: 24px 0;
+    display: block;
+  }
+`;
+
+const StyledLine = styled.div`
+  height: 1px;
+  background-color: #d9d9d9;
+  margin-bottom: 48px;
+  margin-left: 148px;
+  margin-top: 48px;
+  width: 100%;
+
+  @media (max-width: 810px) {
+    margin: 0;
+  }
+`;
+
+export const Line = () => {
+  return (
+    <StyledLineContainer>
+      <StyledLine />
+    </StyledLineContainer>
+  );
+};

packages/twenty-website/src/app/_components/releases/Release.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import styled from '@emotion/styled';
+import { Gabarito } from 'next/font/google';
+import { compileMDX } from 'next-mdx-remote/rsc';
+import remarkBehead from 'remark-behead';
+import gfm from 'remark-gfm';
+
+import { ReleaseNote } from '@/app/get-releases';
+
+const StyledContainer = styled.div`
+  width: 810px;
+  margin: 0 auto;
+  display: flex;
+  font-weight: 400;
+
+  @media (max-width: 810px) {
+    width: auto;
+    margin: 24px 0;
+    display: block;
+  }
+`;
+
+const StyledVersion = styled.div`
+  text-align: center;
+  width: 148px;
+  font-size: 24px;
+  display: flex;
+  flex-flow: column;
+  align-items: start;
+  font-weight: 500;
+
+  @media (max-width: 810px) {
+    width: 100%;
+    font-size: 20px;
+    flex-flow: row;
+    justify-content: space-between;
+  }
+`;
+
+const StyledRelease = styled.span`
+  color: #b3b3b3;
+`;
+
+const StyledDate = styled.span`
+  color: #474747;
+  font-size: 16px;
+`;
+
+const StlyedContent = styled.div`
+  flex: 1;
+
+  h3 {
+    color: #141414;
+    font-size: 40px;
+    margin: 0;
+  }
+
+  p {
+    color: #474747;
+    font-size: 16px;
+    line-height: 28.8px;
+    color: #818181;
+    font-weight: 400;
+  }
+
+  img {
+    max-width: 100%;
+  }
+`;
+
+const gabarito = Gabarito({
+  weight: ['400', '500'],
+  subsets: ['latin'],
+  display: 'swap',
+  adjustFontFallback: false,
+});
+
+export const Release = async ({ release }: { release: ReleaseNote }) => {
+  let mdxSource;
+  try {
+    mdxSource = await compileMDX({
+      source: release.content,
+      options: {
+        mdxOptions: {
+          remarkPlugins: [gfm, [remarkBehead, { depth: 2 }]],
+        },
+      },
+    });
+    mdxSource = mdxSource.content;
+  } catch (error) {
+    console.error('An error occurred during MDX rendering:', error);
+    mdxSource = `<p>Oops! Something went wrong.</p> ${error}`;
+  }
+
+  return (
+    <StyledContainer className={gabarito.className}>
+      <StyledVersion>
+        <StyledRelease>{release.release}</StyledRelease>
+        <StyledDate>
+          {release.date.endsWith(new Date().getFullYear().toString())
+            ? release.date.slice(0, -5)
+            : release.date}
+        </StyledDate>
+      </StyledVersion>
+
+      <StlyedContent>{mdxSource}</StlyedContent>
+    </StyledContainer>
+  );
+};

packages/twenty-website/src/app/_components/releases/StyledTitle.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import styled from '@emotion/styled';
+
+const StyledTitle = styled.div`
+  margin: 64px auto;
+  text-align: center;
+  font-size: 1.8em;
+
+  @media (max-width: 810px) {
+    font-size: 1em;
+    margin: 16px auto;
+  }
+`;
+const StyledHeader = styled.h1`
+  color: #b3b3b3;
+  margin: 0;
+`;
+const StyledSubHeader = styled.h1`
+  margin: 0;
+`;
+
+export const Title = () => {
+  return (
+    <StyledTitle>
+      <StyledHeader>Latest</StyledHeader>
+      <StyledSubHeader>Releases</StyledSubHeader>
+    </StyledTitle>
+  );
+};