blog done

frontend/.env

@@ -7,6 +7,7 @@ REACT_APP_CLIENT_TEMPLATE_ID = template_bd6fjli
 REACT_APP_USER_ID = 27spvSZ2Lsf2j8RKw
 REACT_APP_API_URL = "https://website-api-dev.dilig.net"
 //http://localhost:1337
+//https://website-api-dev.dilig.net
 MAILCHIMP_FORM_URL = http://eepurl.com/iaRrv1
 GOOGLE_TRACKING_ID = "G-PTZC3WLTZ1"
 REACT_APP_MEASUREMENT_ID = G-PD7YZVDG30

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "private": true,
   "dependencies": {
     "@faceless-ui/slider": "^1.1.14",

frontend/src/components/ArticleAuthorSection.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const api_url = process.env.REACT_APP_API_URL;
+
+const ArticleAuthorSection = ({data}) => {
+  return (
+    <div className="flex gap-2 mb-32p">
+    <img
+      className="max-h-[90px] object-fit rounded-full"
+      src={api_url + data.AuthorImage.data.attributes.url}
+      alt={api_url + data.AuthorImage.data.attributes.alternativeText}
+    />
+    <div className="flex flex-col items-start">
+      <p className="paragraph">{data.Author}</p>
+      <p className="text-small-subhead text-gray-400 leading-normal">
+        {data.AuthorTitle}
+      </p>
+    </div>
+  </div>
+  )
+}
+
+export default ArticleAuthorSection

frontend/src/components/BlogHeadingSection.jsx

@@ -0,0 +1,24 @@
+import React, { Fragment } from 'react';
+import Paragraph from './blog-micro-components/Paragraph';
+import H1 from './blog-micro-components/H1';
+import Image from './blog-micro-components/Image';
+import ArticleAuthorSection from './ArticleAuthorSection';
+
+const BlogHeadingSection = ({ data }) => {
+  return (
+    <Fragment>
+      <ArticleAuthorSection
+        data={{
+          Author: data.Author,
+          AuthorTitle: data.AuthorTitle,
+          AuthorImage: data.AuthorImage,
+        }}
+      />
+      <H1 data={data.ArticleTitle} />
+      <Paragraph data={data.ArticleDescription} />
+      <Image data={data.ArticleImage} />
+    </Fragment>
+  );
+};
+
+export default BlogHeadingSection;

frontend/src/components/DynamicZones.jsx

@@ -0,0 +1,58 @@
+import React, {Fragment} from 'react';
+import H2 from './blog-micro-components/H2';
+import Paragraph from './blog-micro-components/Paragraph';
+import H3 from './blog-micro-components/H3';
+import RichText from './blog-micro-components/RichText';
+import Image from './blog-micro-components/Image';
+import ImageGrid from './blog-micro-components/ImageGrid';
+import Quote from './blog-micro-components/Quote';
+import H1 from './blog-micro-components/H1';
+
+const DynamicZones = ({ data }) => {
+  return (
+    <Fragment>
+      {/* Dymanic zones */}
+      {data &&
+        data.length > 0 &&
+        data.map((item, index) => (
+          <Fragment key={index}>
+            {/* H1 */}
+            {item.__component && item.__component === 'blog-components.h1' && (
+              <H1 data={item.field}></H1>
+            )}
+            {/* H2 */}
+            {item.__component && item.__component === 'blog-components.h2' && (
+              <H2 data={item.field}></H2>
+            )}
+            {/* H3 */}
+            {item.__component && item.__component === 'blog-components.h3' && (
+              <H3 data={item.field}></H3>
+            )}
+            {/* Paragraph */}
+            {item.__component && item.__component === 'blog-components.paragraph' && (
+              <Paragraph data={item.field}></Paragraph>
+            )}
+            {/* Paragraph+Links */}
+            {item.__component &&
+              item.__component === 'blog-components.paragraph-links' && (
+                <RichText data={item.field}></RichText>
+              )}
+            {/* Image */}
+            {item.__component && item.__component === 'blog-components.image' && (
+              <Image data={item.field}></Image>
+            )}
+            {/* ImageGrid */}
+            {item.__component && item.__component === 'blog-components.images-grid' && (
+              <ImageGrid data={item.field}></ImageGrid>
+            )}
+            {/* Quote */}
+            {item.__component && item.__component === 'blog-components.quote' && (
+              <Quote data={item.field}></Quote>
+            )}
+          </Fragment>
+        ))}
+    </Fragment>
+  );
+};
+
+export default DynamicZones;

frontend/src/components/blog-micro-components/H1.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const H1 = ({data}) => {
+  return (
+    <h3 className="n-heading pb-16p">{data}</h3>
+  )
+}
+
+export default H1

frontend/src/components/blog-micro-components/H2.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const H2 = ({data}) => {
+  return (
+    <h3 className="h3-heading font-semibold pt-8p pb-16p">{data}</h3>
+  )
+}
+
+export default H2

frontend/src/components/blog-micro-components/H3.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const H3 = ({data}) => {
+  return (
+    <h3 className="n-paragraph-title pb-8p">{data}</h3>
+  )
+}
+
+export default H3

frontend/src/components/blog-micro-components/Image.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const api_url = process.env.REACT_APP_API_URL;
+
+const Image = ({data}) => {
+  return (
+    <img src={api_url + data.data.attributes.url} alt={data.data.attributes.alternativeText} className='rounded-md w-full pb-4' />
+  )
+}
+
+export default Image

frontend/src/components/blog-micro-components/ImageGrid.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const api_url = process.env.REACT_APP_API_URL;
+
+const ImageGrid = ({ data }) => {
+  const leng = data.data.length;
+
+  return (
+    <div className="grid grid-cols-2 gap-4 pb-4">
+      {data.data &&
+        data.data.length > 0 &&
+        data.data.map((item, index) => (
+          <div key={index}>
+            {leng % 2 != 0 ? (
+              index == leng - 1 ? (
+                <img
+                  className="col-span-2 w-full rounded-md"
+                  src={api_url + item.attributes.url}
+                  alt={item.attributes.alternativeText}
+                />
+              ) : (
+                <img
+                  className="col-span-1 w-full rounded-md"
+                  src={api_url + item.attributes.url}
+                  alt={item.attributes.alternativeText}
+                />
+              )
+            ) : (
+              <img
+                className="col-span-1 w-full rounded-md"
+                src={api_url + item.attributes.url}
+                alt={item.attributes.alternativeText}
+              />
+            )}
+          </div>
+        ))}
+    </div>
+  );
+};
+
+export default ImageGrid;

frontend/src/components/blog-micro-components/Paragraph.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Paragraph = ({data}) => {
+  return (
+    <p className="paragraph pb-8p">{data}</p>
+  )
+}
+
+export default Paragraph

frontend/src/components/blog-micro-components/Quote.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Quote = ({data}) => {
+  return (
+    <blockquote className='p-4 my-4 border-l-4 border-gray-300 bg-gray-50 dark:border-gray-500 dark:bg-gray-800'>
+      <p className='text-xl italic font-medium leading-relaxed text-gray-900 dark:text-white'>
+        "{data}"
+      </p>
+    </blockquote>
+  );
+};
+
+export default Quote;

frontend/src/components/blog-micro-components/RichText.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import '../../styles/reactMarkdown.css';
+
+const RichText = ({ data }) => {
+  return (
+    // eslint-disable-next-line react/no-children-prop
+    <ReactMarkdown className="article n-paragraph" children={data} />
+  );
+};
+
+export default RichText;

frontend/src/pages/ArticlePage.jsx

@@ -9,9 +9,8 @@ import Wrapper from '../layout/Wrapper';
 
 import PageLayout from '../layout/PageLayout';
 
-import rehypeHighlight from 'rehype-highlight';
-
 import '../App.css';
+import '../styles/ck-editor.css';
 import useAnalytics from './../hooks/useAnalytics';
 import { strapiApiBuilder } from './../utils/strapiApiBuilder';
 import ReactHelmet from './../components/shared/ReactHelmet';
@@ -22,10 +21,17 @@ import OneArticlesGrid from '../components/OneArticleGrid';
 import LatestArticles from './../components/LatestArticles';
 
 import { ReactComponent as BackArrowSVG } from '../assets/icons/back-triangle.svg';
+import DynamicZones from '../components/DynamicZones';
+import BlogHeadingSection from './../components/BlogHeadingSection';
 
 const api_url = process.env.REACT_APP_API_URL;
 
-const strapiPopulate = [];
+const strapiPopulate = [
+  'DynamicZone1.Image',
+  'DynamicZone1.Image.field',
+  'DynamicZone1.ImagesGrid',
+  'DynamicZone1.ImagesGrid.field',
+];
 
 export default function ArticlePage() {
   const slug = useLocation();
@@ -33,14 +39,14 @@ export default function ArticlePage() {
   const helperString = slug.pathname.split('/').pop();
 
   const strapi = strapiApiBuilder(
-    `articles?filters[Slug][$eq]=${helperString}`,
-    strapiPopulate,
-    '',
+    'articles?populate[DynamicZone1][populate]=*&populate[AuthorImage][populate]=*&populate[ArticleImage][populate]=*&populate[article_category][populate]=*',
+    [],
+    `&filters[Slug][$eq]=${helperString}`,
   );
 
   const [{ data, isLoading, isError }, doFetch] = useFetchCollections(strapi);
 
-  //console.log(data);
+  console.log(data);
 
   useAnalytics('');
 
@@ -61,18 +67,26 @@ export default function ArticlePage() {
     return (
       <PageLayout>
         {data && (
-          <div className="mt-[48px] md:mt-[180px]">
+          <div className="mt-[80px] md:mt-[140px]">
             <Wrapper>
-              <div className="flex flex-col gap-12">
-                <a href={'/blog'} className="flex gap-4 items-center">
+              <div className="flex flex-col gap-8 md:gap-12">
+                <a href={'/blog'} className="flex gap-4 items-center md:mb-32p">
                   <BackArrowSVG />
-                  <p className='n-paragraph'>Back to Blog Page</p>
+                  <p className="n-paragraph">Back to Blog Page</p>
                 </a>
                 <OneArticlesGrid>
                   <div className="col-span-1 md:col-span-4">
-                    <ReactMarkdown rehypePlugins={[rehypeHighlight]} className="article">
-                      {data[0].attributes.Body}
-                    </ReactMarkdown>
+                    <BlogHeadingSection
+                      data={{
+                        ArticleImage: data[0].attributes.ArticleImage,
+                        ArticleTitle: data[0].attributes.ArticleTitle,
+                        ArticleDescription: data[0].attributes.ArticleDescription,
+                        Author: data[0].attributes.Author,
+                        AuthorTitle: data[0].attributes.AuthorTitle,
+                        AuthorImage: data[0].attributes.AuthorImage,
+                      }}
+                    />
+                    <DynamicZones data={data[0].attributes.DynamicZone1} />
                   </div>
                   <LatestArticles />
                 </OneArticlesGrid>

frontend/src/pages/Blog.jsx

@@ -56,7 +56,7 @@ export default function Blog() {
     return (
       <PageLayout>
         {data && data.SEO ? <ReactHelmet seo={data.SEO} /> : null}
-        <div className="mt-[48px] md:mt-[180px]">
+        <div className="mt-[80px] md:mt-[180px]">
           <Wrapper padding={' py-[48px]'}>
             {data ? (
               <Fragment>

frontend/src/pages/WorkWithUs.jsx

@@ -108,7 +108,7 @@ const WorkWithUs = () => {
     return (
       <PageLayout>
         {data && data.SEO ? <ReactHelmet seo={data.SEO} /> : null}
-        <div className="mt-[48px] md:mt-[180px]">
+        <div className="mt-[80px] md:mt-[180px]">
           <Wrapper padding={' py-[48px]'}>
             {data ? (
               <Fragment>

frontend/src/styles/ck-editor.css

@@ -0,0 +1,460 @@
+/*
+ * CKEditor 5 (v36.0.1) content styles.
+ * Generated on Mon, 27 Feb 2023 10:55:11 GMT.
+ * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html
+ */
+
+ :root {
+    --ck-color-image-caption-background: hsl(0, 0%, 97%);
+    --ck-color-image-caption-text: hsl(0, 0%, 20%);
+    --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
+    --ck-color-mention-text: hsl(341, 100%, 30%);
+    --ck-color-table-caption-background: hsl(0, 0%, 97%);
+    --ck-color-table-caption-text: hsl(0, 0%, 20%);
+    --ck-highlight-marker-blue: hsl(201, 97%, 72%);
+    --ck-highlight-marker-green: hsl(120, 93%, 68%);
+    --ck-highlight-marker-pink: hsl(345, 96%, 73%);
+    --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
+    --ck-highlight-pen-green: hsl(112, 100%, 27%);
+    --ck-highlight-pen-red: hsl(0, 85%, 49%);
+    --ck-image-style-spacing: 1.5em;
+    --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
+    --ck-todo-list-checkmark-size: 16px;
+}
+
+/* @ckeditor/ckeditor5-font/theme/fontsize.css */
+.ck-content .text-tiny {
+    font-size: .7em;
+}
+/* @ckeditor/ckeditor5-font/theme/fontsize.css */
+.ck-content .text-small {
+    font-size: .85em;
+}
+/* @ckeditor/ckeditor5-font/theme/fontsize.css */
+.ck-content .text-big {
+    font-size: 1.4em;
+}
+/* @ckeditor/ckeditor5-font/theme/fontsize.css */
+.ck-content .text-huge {
+    font-size: 1.8em;
+}
+/* @ckeditor/ckeditor5-block-quote/theme/blockquote.css */
+.ck-content blockquote {
+    overflow: hidden;
+    padding-right: 1.5em;
+    padding-left: 1.5em;
+    margin-left: 0;
+    margin-right: 0;
+    font-style: italic;
+    border-left: solid 5px hsl(0, 0%, 80%);
+}
+/* @ckeditor/ckeditor5-block-quote/theme/blockquote.css */
+.ck-content[dir="rtl"] blockquote {
+    border-left: 0;
+    border-right: solid 5px hsl(0, 0%, 80%);
+}
+/* @ckeditor/ckeditor5-basic-styles/theme/code.css */
+.ck-content code {
+    background-color: hsla(0, 0%, 78%, 0.3);
+    padding: .15em;
+    border-radius: 2px;
+}
+/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
+.ck-content .marker-yellow {
+    background-color: var(--ck-highlight-marker-yellow);
+}
+/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
+.ck-content .marker-green {
+    background-color: var(--ck-highlight-marker-green);
+}
+/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
+.ck-content .marker-pink {
+    background-color: var(--ck-highlight-marker-pink);
+}
+/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
+.ck-content .marker-blue {
+    background-color: var(--ck-highlight-marker-blue);
+}
+/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
+.ck-content .pen-red {
+    color: var(--ck-highlight-pen-red);
+    background-color: transparent;
+}
+/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
+.ck-content .pen-green {
+    color: var(--ck-highlight-pen-green);
+    background-color: transparent;
+}
+/* @ckeditor/ckeditor5-image/theme/imageresize.css */
+.ck-content .image.image_resized {
+    max-width: 100%;
+    display: block;
+    box-sizing: border-box;
+}
+/* @ckeditor/ckeditor5-image/theme/imageresize.css */
+.ck-content .image.image_resized img {
+    width: 100%;
+}
+/* @ckeditor/ckeditor5-image/theme/imageresize.css */
+.ck-content .image.image_resized > figcaption {
+    display: block;
+}
+/* @ckeditor/ckeditor5-image/theme/image.css */
+.ck-content .image {
+    display: table;
+    clear: both;
+    text-align: center;
+    margin: 0.9em auto;
+    min-width: 50px;
+}
+/* @ckeditor/ckeditor5-image/theme/image.css */
+.ck-content .image img {
+    display: block;
+    margin: 0 auto;
+    max-width: 100%;
+    min-width: 100%;
+}
+/* @ckeditor/ckeditor5-image/theme/image.css */
+.ck-content .image-inline {
+    /*
+     * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).;
+     * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
+     * This strange behavior does not happen with inline-flex.
+     */
+    display: inline-flex;
+    max-width: 100%;
+    align-items: flex-start;
+}
+/* @ckeditor/ckeditor5-image/theme/image.css */
+.ck-content .image-inline picture {
+    display: flex;
+}
+/* @ckeditor/ckeditor5-image/theme/image.css */
+.ck-content .image-inline picture,
+.ck-content .image-inline img {
+    flex-grow: 1;
+    flex-shrink: 1;
+    max-width: 100%;
+}
+/* @ckeditor/ckeditor5-image/theme/imagecaption.css */
+.ck-content .image > figcaption {
+    display: table-caption;
+    caption-side: bottom;
+    word-break: break-word;
+    color: var(--ck-color-image-caption-text);
+    background-color: var(--ck-color-image-caption-background);
+    padding: .6em;
+    font-size: .75em;
+    outline-offset: -1px;
+}
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-block-align-left,
+.ck-content .image-style-block-align-right {
+    max-width: calc(100% - var(--ck-image-style-spacing));
+}
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-align-left,
+.ck-content .image-style-align-right {
+    clear: none;
+}
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-side {
+    float: right;
+    margin-left: var(--ck-image-style-spacing);
+    max-width: 50%;
+}
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-align-left {
+    float: left;
+    margin-right: var(--ck-image-style-spacing);
+}
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-align-center {
+    margin-left: auto;
+    margin-right: auto;
+}
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-align-right {
+    float: right;
+    margin-left: var(--ck-image-style-spacing);
+}
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-block-align-right {
+    margin-right: 0;
+    margin-left: auto;
+}
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-block-align-left {
+    margin-left: 0;
+    margin-right: auto;
+}
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content p + .image-style-align-left,
+.ck-content p + .image-style-align-right,
+.ck-content p + .image-style-side {
+    margin-top: 0;
+}
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-inline.image-style-align-left,
+.ck-content .image-inline.image-style-align-right {
+    margin-top: var(--ck-inline-image-style-spacing);
+    margin-bottom: var(--ck-inline-image-style-spacing);
+}
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-inline.image-style-align-left {
+    margin-right: var(--ck-inline-image-style-spacing);
+}
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-inline.image-style-align-right {
+    margin-left: var(--ck-inline-image-style-spacing);
+}
+/* @ckeditor/ckeditor5-list/theme/todolist.css */
+.ck-content .todo-list {
+    list-style: none;
+}
+/* @ckeditor/ckeditor5-list/theme/todolist.css */
+.ck-content .todo-list li {
+    margin-bottom: 5px;
+}
+/* @ckeditor/ckeditor5-list/theme/todolist.css */
+.ck-content .todo-list li .todo-list {
+    margin-top: 5px;
+}
+/* @ckeditor/ckeditor5-list/theme/todolist.css */
+.ck-content .todo-list .todo-list__label > input {
+    -webkit-appearance: none;
+    display: inline-block;
+    position: relative;
+    width: var(--ck-todo-list-checkmark-size);
+    height: var(--ck-todo-list-checkmark-size);
+    vertical-align: middle;
+    border: 0;
+    left: -25px;
+    margin-right: -15px;
+    right: 0;
+    margin-left: 0;
+}
+/* @ckeditor/ckeditor5-list/theme/todolist.css */
+.ck-content .todo-list .todo-list__label > input::before {
+    display: block;
+    position: absolute;
+    box-sizing: border-box;
+    content: '';
+    width: 100%;
+    height: 100%;
+    border: 1px solid hsl(0, 0%, 20%);
+    border-radius: 2px;
+    transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
+}
+/* @ckeditor/ckeditor5-list/theme/todolist.css */
+.ck-content .todo-list .todo-list__label > input::after {
+    display: block;
+    position: absolute;
+    box-sizing: content-box;
+    pointer-events: none;
+    content: '';
+    left: calc( var(--ck-todo-list-checkmark-size) / 3 );
+    top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
+    width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
+    height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
+    border-style: solid;
+    border-color: transparent;
+    border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
+    transform: rotate(45deg);
+}
+/* @ckeditor/ckeditor5-list/theme/todolist.css */
+.ck-content .todo-list .todo-list__label > input[checked]::before {
+    background: hsl(126, 64%, 41%);
+    border-color: hsl(126, 64%, 41%);
+}
+/* @ckeditor/ckeditor5-list/theme/todolist.css */
+.ck-content .todo-list .todo-list__label > input[checked]::after {
+    border-color: hsl(0, 0%, 100%);
+}
+/* @ckeditor/ckeditor5-list/theme/todolist.css */
+.ck-content .todo-list .todo-list__label .todo-list__label__description {
+    vertical-align: middle;
+}
+/* @ckeditor/ckeditor5-list/theme/list.css */
+.ck-content ol {
+    list-style-type: decimal;
+}
+/* @ckeditor/ckeditor5-list/theme/list.css */
+.ck-content ol ol {
+    list-style-type: lower-latin;
+}
+/* @ckeditor/ckeditor5-list/theme/list.css */
+.ck-content ol ol ol {
+    list-style-type: lower-roman;
+}
+/* @ckeditor/ckeditor5-list/theme/list.css */
+.ck-content ol ol ol ol {
+    list-style-type: upper-latin;
+}
+/* @ckeditor/ckeditor5-list/theme/list.css */
+.ck-content ol ol ol ol ol {
+    list-style-type: upper-roman;
+}
+/* @ckeditor/ckeditor5-list/theme/list.css */
+.ck-content ul {
+    list-style-type: disc;
+}
+/* @ckeditor/ckeditor5-list/theme/list.css */
+.ck-content ul ul {
+    list-style-type: circle;
+}
+/* @ckeditor/ckeditor5-list/theme/list.css */
+.ck-content ul ul ul {
+    list-style-type: square;
+}
+/* @ckeditor/ckeditor5-list/theme/list.css */
+.ck-content ul ul ul ul {
+    list-style-type: square;
+}
+/* @ckeditor/ckeditor5-language/theme/language.css */
+.ck-content span[lang] {
+    font-style: italic;
+}
+/* @ckeditor/ckeditor5-media-embed/theme/mediaembed.css */
+.ck-content .media {
+    clear: both;
+    margin: 0.9em 0;
+    display: block;
+    min-width: 15em;
+}
+/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
+.ck-content .page-break {
+    position: relative;
+    clear: both;
+    padding: 5px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
+.ck-content .page-break::after {
+    content: '';
+    position: absolute;
+    border-bottom: 2px dashed hsl(0, 0%, 77%);
+    width: 100%;
+}
+/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
+.ck-content .page-break__label {
+    position: relative;
+    z-index: 1;
+    padding: .3em .6em;
+    display: block;
+    text-transform: uppercase;
+    border: 1px solid hsl(0, 0%, 77%);
+    border-radius: 2px;
+    font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
+    font-size: 0.75em;
+    font-weight: bold;
+    color: hsl(0, 0%, 20%);
+    background: hsl(0, 0%, 100%);
+    box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+/* @ckeditor/ckeditor5-table/theme/tablecaption.css */
+.ck-content .table > figcaption {
+    display: table-caption;
+    caption-side: top;
+    word-break: break-word;
+    text-align: center;
+    color: var(--ck-color-table-caption-text);
+    background-color: var(--ck-color-table-caption-background);
+    padding: .6em;
+    font-size: .75em;
+    outline-offset: -1px;
+}
+/* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
+.ck-content .table .ck-table-resized {
+    table-layout: fixed;
+}
+/* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
+.ck-content .table table {
+    overflow: hidden;
+}
+/* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
+.ck-content .table td,
+.ck-content .table th {
+    position: relative;
+}
+/* @ckeditor/ckeditor5-table/theme/table.css */
+.ck-content .table {
+    margin: 0.9em auto;
+    display: table;
+}
+/* @ckeditor/ckeditor5-table/theme/table.css */
+.ck-content .table table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px double hsl(0, 0%, 70%);
+}
+/* @ckeditor/ckeditor5-table/theme/table.css */
+.ck-content .table table td,
+.ck-content .table table th {
+    min-width: 2em;
+    padding: .4em;
+    border: 1px solid hsl(0, 0%, 75%);
+}
+/* @ckeditor/ckeditor5-table/theme/table.css */
+.ck-content .table table th {
+    font-weight: bold;
+    background: hsla(0, 0%, 0%, 5%);
+}
+/* @ckeditor/ckeditor5-table/theme/table.css */
+.ck-content[dir="rtl"] .table th {
+    text-align: right;
+}
+/* @ckeditor/ckeditor5-table/theme/table.css */
+.ck-content[dir="ltr"] .table th {
+    text-align: left;
+}
+/* @ckeditor/ckeditor5-code-block/theme/codeblock.css */
+.ck-content pre {
+    padding: 1em;
+    color: hsl(0, 0%, 20.8%);
+    background: hsla(0, 0%, 78%, 0.3);
+    border: 1px solid hsl(0, 0%, 77%);
+    border-radius: 2px;
+    text-align: left;
+    direction: ltr;
+    tab-size: 4;
+    white-space: pre-wrap;
+    font-style: normal;
+    min-width: 200px;
+}
+/* @ckeditor/ckeditor5-code-block/theme/codeblock.css */
+.ck-content pre code {
+    background: unset;
+    padding: 0;
+    border-radius: 0;
+}
+/* @ckeditor/ckeditor5-horizontal-line/theme/horizontalline.css */
+.ck-content hr {
+    margin: 15px 0;
+    height: 4px;
+    background: hsl(0, 0%, 87%);
+    border: 0;
+}
+/* @ckeditor/ckeditor5-mention/theme/mention.css */
+.ck-content .mention {
+    background: var(--ck-color-mention-background);
+    color: var(--ck-color-mention-text);
+}
+@media print {
+    /* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
+    .ck-content .page-break {
+        padding: 0;
+    }
+    /* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
+    .ck-content .page-break::after {
+        display: none;
+    }
+}

frontend/src/styles/reactMarkdown.css

@@ -6,7 +6,9 @@
     .article h1 {
      @apply font-secondary font-bold text-dark-gray dark:text-white text-n-head-mobile md:text-n-head;
     }
-
-    
-
+    .article p {
+    }
+    .article a {
+    @apply text-dg-primary-900 text-n-paragraph underline cursor-pointer
+    }
   }