From 5c8431bf394a12ab6f7be08eb58c737ab8211ec5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Demenech?= <joao.demenech@datopian.com>
Date: Sat, 6 May 2023 13:36:49 -0300
Subject: [PATCH] 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  | 21 +++++++++++++++++++++
 site/components/MDXPage.tsx | 37 +++++++------------------------------
 site/layouts/blog.tsx       | 33 +++++++++++++++++++++++++++++++++
 site/layouts/default.tsx    | 25 +++++++++++++++++++++++++
 site/layouts/docs.tsx       | 22 ++++++++++++++++++++++
 site/layouts/index.ts       |  6 ++++--
 site/lib/formatDate.ts      |  8 ++++++++
 7 files changed, 120 insertions(+), 32 deletions(-)
 create mode 100644 site/components/Avatar.tsx
 create mode 100644 site/layouts/blog.tsx
 create mode 100644 site/layouts/default.tsx
 create mode 100644 site/layouts/docs.tsx
 create mode 100644 site/lib/formatDate.ts

diff --git a/site/components/Avatar.tsx b/site/components/Avatar.tsx
new file mode 100644
index 00000000..3d5d08a3
--- /dev/null
+++ b/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>
+  );
+};
\ No newline at end of file
diff --git a/site/components/MDXPage.tsx b/site/components/MDXPage.tsx
index d9ae1566..e515d892 100644
--- a/site/components/MDXPage.tsx
+++ b/site/components/MDXPage.tsx
@@ -4,38 +4,15 @@ import DocsPagination from './DocsPagination';
 
 export default function MDXPage({ source, frontMatter }) {
   const Layout = ({ children }) => {
-    if (frontMatter.layout) {
-      let LayoutComponent = layouts[frontMatter.layout];
-      return <LayoutComponent {...frontMatter}>{children}</LayoutComponent>;
-    }
-    return <>{children}</>;
+    const layoutName = frontMatter?.layout || 'default';
+    const LayoutComponent = layouts[layoutName];
+
+    return <LayoutComponent {...frontMatter}>{children}</LayoutComponent>;
   };
 
   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>
+    <Layout>
+      <MDXRemote {...source} components={{ DocsPagination }} />
+    </Layout>
   );
 }
diff --git a/site/layouts/blog.tsx b/site/layouts/blog.tsx
new file mode 100644
index 00000000..700be611
--- /dev/null
+++ b/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>
+  );
+};
\ No newline at end of file
diff --git a/site/layouts/default.tsx b/site/layouts/default.tsx
new file mode 100644
index 00000000..ac4525f5
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/site/layouts/docs.tsx b/site/layouts/docs.tsx
new file mode 100644
index 00000000..e08f5d69
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/site/layouts/index.ts b/site/layouts/index.ts
index 535b5a01..ff226100 100644
--- a/site/layouts/index.ts
+++ b/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
 };
diff --git a/site/lib/formatDate.ts b/site/lib/formatDate.ts
new file mode 100644
index 00000000..4f6bd348
--- /dev/null
+++ b/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);
+};
\ No newline at end of file