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/components/Avatar.tsx

@@ -0,0 +1,21 @@
+export const Avatar: React.FC<any> = ({ name, img, href }) => {
+  const Component = href ? "a" : "div";
+  return (
+    <Component href={href} className="group block flex-shrink-0 mt-2">
+      <div className="flex items-center space-x-2">
+        <div>
+          <img
+            className="inline-block h-9 w-9 rounded-full"
+            src={img}
+            alt={name}
+          />
+        </div>
+        <div className="ml-3">
+          <p className="text-sm font-medium text-primary dark:text-primary-dark">
+            {name}
+          </p>
+        </div>
+      </div>
+    </Component>
+  );
+};

site/components/MDXPage.tsx

@@ -4,38 +4,15 @@ import DocsPagination from './DocsPagination';
 
 export default function MDXPage({ source, frontMatter }) {
   const Layout = ({ children }) => {
-    if (frontMatter.layout) {
+    const layoutName = frontMatter?.layout || 'default';
-      let LayoutComponent = layouts[frontMatter.layout];
+    const LayoutComponent = layouts[layoutName];
+
     return <LayoutComponent {...frontMatter}>{children}</LayoutComponent>;
-    }
-    return <>{children}</>;
   };
 
   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>
     <Layout>
       <MDXRemote {...source} components={{ DocsPagination }} />
     </Layout>
-      </main>
-    </div>
   );
 }

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
 };

site/lib/formatDate.ts

@@ -0,0 +1,8 @@
+export const formatDate = (date: string, locales = "en-US") => {
+  const options: Intl.DateTimeFormatOptions = {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  };
+  return new Date(date).toLocaleDateString(locales, options);
+};