knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* [#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>
This commit is contained in:
João Demenech 2023-05-06 13:36:49 -03:00 committed by GitHub
parent 45c07f829a
commit 5c8431bf39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 120 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
site/components/Avatar.tsx Normal file
View File

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

37
site/components/MDXPage.tsx
View File

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

33
site/layouts/blog.tsx Normal file
View File

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

25
site/layouts/default.tsx Normal file
View File

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

22
site/layouts/docs.tsx Normal file
View File

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

6
site/layouts/index.ts
View File

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

8
site/lib/formatDate.ts Normal file
View File

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