Fix code blocks not being displayed properly on light mode (#851)

* [#803,blogs][m]: fix code blocks not being displayed properly on light mode

* [docs][m] - fix problems with merge

---------

Co-authored-by: Luccas Mateus <Luccasmmg@gmail.com>

site/layouts/blog.tsx

@@ -0,0 +1,33 @@
+import { Avatar } from "@/components/Avatar";
+import { formatDate } from "@/lib/formatDate";
+
+export const BlogLayout: React.FC<any> = ({ children, ...frontMatter }) => {
+  const { title, date, authorsDetails } = frontMatter;
+  return (
+    <article className="prose mx-auto prose-a:text-primary dark:prose-a:text-primary-dark prose-strong:text-primary dark:prose-strong:text-primary-dark prose-headings:text-primary dark:prose-headings:text-primary-dark text-primary dark:text-primary-dark prose-headings:font-headings dark:prose-invert prose-a:break-words">
+      <header>
+        <div className="mb-4 flex-col items-center">
+          {title && <h1 className="flex justify-center">{title}</h1>}
+          {date && (
+            <p className="text-sm text-zinc-400 dark:text-zinc-500 flex justify-center">
+              <time dateTime={date}>{formatDate(date)}</time>
+            </p>
+          )}
+          {authorsDetails && (
+            <div className="flex flex-wrap not-prose items-center space-x-6 space-y-3 justify-center">
+              {authorsDetails.map(({ name, avatar, isDraft, url_path }) => (
+                <Avatar
+                  key={url_path || name}
+                  name={name}
+                  img={avatar}
+                  href={url_path && !isDraft ? `/${url_path}` : undefined}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </header>
+      <section>{children}</section>
+    </article>
+  );
+};

site/layouts/default.tsx

@@ -0,0 +1,25 @@
+export default function DefaultLayout({ children, ...frontMatter }) {
+  return (
+    <div className="prose mx-auto prose-a:text-primary dark:prose-a:text-primary-dark prose-strong:text-primary dark:prose-strong:text-primary-dark prose-headings:text-primary dark:prose-headings:text-primary-dark text-primary dark:text-primary-dark prose-headings:font-headings dark:prose-invert prose-a:break-words">
+      <header>
+        <div className="mb-6">
+          {/* Default layout */}
+          {!frontMatter.layout && (
+            <>
+              <h1>{frontMatter.title}</h1>
+              {frontMatter.author && (
+                <div className="-mt-6">
+                  <p className="opacity-60 pl-1">{frontMatter.author}</p>
+                </div>
+              )}
+              {frontMatter.description && (
+                <p className="description">{frontMatter.description}</p>
+              )}
+            </>
+          )}
+        </div>
+      </header>
+      <main>{children}</main>
+    </div>
+  );
+}

site/layouts/docs.tsx

@@ -0,0 +1,22 @@
+/* eslint import/no-default-export: off */
+import { formatDate } from "@/lib/formatDate";
+
+// TODO types
+export const DocsLayout: React.FC<any> = ({ children, ...frontMatter }) => {
+  const { title, created } = frontMatter;
+  return (
+    <article className="docs prose prose-a:text-primary dark:prose-a:text-primary-dark prose-strong:text-primary dark:prose-strong:text-primary-dark dark:prose-code:text-primary-dark prose-headings:text-primary dark:prose-headings:text-primary-dark text-primary dark:text-primary-dark dark:prose-invert prose-headings:font-headings prose-a:break-words mx-auto">
+      <header>
+        <div className="mb-6">
+          {created && (
+            <p className="text-sm text-zinc-400 dark:text-zinc-500">
+              <time dateTime={created}>{formatDate(created)}</time>
+            </p>
+          )}
+          {title && <h1>{title}</h1>}
+        </div>
+      </header>
+      <section>{children}</section>
+    </article>
+  );
+};

site/layouts/index.ts

@@ -1,13 +1,15 @@
 import {
   SimpleLayout,
-  DocsLayout,
   UnstyledLayout,
-  BlogLayout,
 } from "@flowershow/core";
+import { BlogLayout } from "./blog";
+import DefaultLayout from "./default";
+import { DocsLayout } from "./docs";
 
 export default {
   simple: SimpleLayout,
   docs: DocsLayout,
   unstyled: UnstyledLayout,
   blog: BlogLayout,
+  default: DefaultLayout
 };