Skip to content

Commit

Permalink
Upgrade mdx (#69)
Browse files Browse the repository at this point in the history 
* upgrade mdx

* upgrade mdx

* change jest config
  • Loading branch information
@HiranmayaGundu
HiranmayaGundu authored Feb 22, 2022
1 parent 82a76ec commit 7afe7c4
Show file tree
Hide file tree
Showing 12 changed files with 1,002 additions and 569 deletions.
29 changes: 26 additions & 3 deletions components/CodeBlock.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,16 @@ import Highlight, { defaultProps, Language } from "prism-react-renderer";
import Prism from "prism-react-renderer/prism";
import theme from "prism-react-renderer/themes/nightOwl";
import Pre from "./Pre";
import javaLang from "refractor/lang/java";
import { ExpanderDiv } from "./ExpanderDiv";
import { TextProps } from "rebass/styled-components";
import Text from "./Text";
import { CSSProp } from "styled-components";
javaLang(Prism);

// @ts-expect-error need to check how to add prism to global
(typeof global !== "undefined" ? global : window).Prism = Prism;
require("prismjs/components/prism-java");
require("prismjs/components/prism-bash");

interface CodeBlockProps {
children: React.ReactNode;
className?: string;
Expand Down Expand Up @@ -66,4 +70,23 @@ const InlineCode = (props: TextProps & { css?: CSSProp }): JSX.Element => (
/>
);

export { CodeBlock, InlineCode };
const Code = ({
className,
children,
...props
}: {
className: string;
children: React.ReactNode;
props: unknown;
}): JSX.Element => {
const match = /language-(\w+)/.exec(className || "");
return match ? (
<CodeBlock className={match[1]}>{children}</CodeBlock>
) : (
<InlineCode className={className} {...props}>
{children}
</InlineCode>
);
};

export { CodeBlock, InlineCode, Code };
20 changes: 10 additions & 10 deletions components/Markdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Link from "./Link";
import P from "./Paragraph";
import styled, { CSSProp } from "styled-components";
import { UnorderedList, OrderedList, ListItem } from "./ListComponents";
import { CodeBlock, InlineCode } from "./CodeBlock";
import { Code } from "./CodeBlock";
import { HeadingProps, Flex, Box } from "rebass/styled-components";
import Layout from "./Layout";
import Content from "./Content";
Expand Down Expand Up @@ -56,14 +56,15 @@ const Hr = (): JSX.Element => (
);

// eslint-disable-next-line react/display-name
const heading = (
Tag: React.ComponentType<HeadingProps & { css?: CSSProp }>
const heading =
(Tag: React.ComponentType<HeadingProps & { css?: CSSProp }>) =>
// eslint-disable-next-line react/display-name
) => (props: HeadingProps & { css?: CSSProp }): JSX.Element => (
<Tag {...props}>
<Link href={`#${props.id}`}>{props.children}</Link>
</Tag>
);
(props: HeadingProps & { css?: CSSProp }): JSX.Element =>
(
<Tag {...props}>
<Link href={`#${props.id}`}>{props.children}</Link>
</Tag>
);

const Strong = styled.strong`
font-weight: var(--font-weights-bold);
Expand All @@ -83,8 +84,7 @@ export default {
ul: UnorderedList,
ol: OrderedList,
li: ListItem,
code: CodeBlock,
inlineCode: InlineCode,
code: Code,
hr: Hr,
wrapper: Wrapper,
strong: Strong,
Expand Down
59 changes: 55 additions & 4 deletions functions/__tests__/GenerateCustomProperties.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,7 @@ const theme = {
},
},
fonts: {
body:
'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
heading:
'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
monospace: "Menlo, monospace",
Expand All @@ -41,12 +40,64 @@ describe("test cases for toCustomPropeties", () => {
it("transforms a theme config to CSS custom properties", () => {
const result = toCustomProperties(theme, ["colors"]);

expect(result).toMatchSnapshot();
expect(result).toMatchInlineSnapshot(`
Object {
"--font-weights-body": 400,
"--font-weights-bold": 700,
"--font-weights-heading": 700,
"--fonts-body": "system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", sans-serif",
"--fonts-heading": "system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", sans-serif",
"--fonts-monospace": "Menlo, monospace",
"--line-heights-0": 1.5,
"--line-heights-1": 1.125,
"--size-0": "10em",
"--size-1": "20em",
"--size-2": "30em",
"--size-3": "40em",
"--space-0": 0,
"--space-1": 2,
"--space-2": 3,
"--space-3": 4,
"--space-4": 5,
"--space-5": 6,
}
`);
});

it("transforms a theme config to CSS custom properties", () => {
const result = convertThemeToUseCustomProperties(theme, ["colors"]);

expect(result).toMatchSnapshot();
expect(result).toMatchInlineSnapshot(`
Object {
"fontWeights": Object {
"body": "var(--font-weights-body)",
"bold": "var(--font-weights-bold)",
"heading": "var(--font-weights-heading)",
},
"fonts": Object {
"body": "var(--fonts-body)",
"heading": "var(--fonts-heading)",
"monospace": "var(--fonts-monospace)",
},
"lineHeights": Array [
"var(--line-heights-0)",
"var(--line-heights-1)",
],
"size": Array [
"var(--size-0)",
"var(--size-1)",
"var(--size-2)",
"var(--size-3)",
],
"space": Array [
"var(--space-0)",
"var(--space-1)",
"var(--space-2)",
"var(--space-3)",
"var(--space-4)",
"var(--space-5)",
],
}
`);
});
});
57 changes: 0 additions & 57 deletions functions/__tests__/__snapshots__/GenerateCustomProperties.test.js.snap
View file

This file was deleted.

Loading

1 comment on commit 7afe7c4

@vercel
Copy link

@vercel vercel bot commented on 7afe7c4 Feb 22, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.