Skip to content

Commit

Permalink
more miga
Browse files Browse the repository at this point in the history
  • Loading branch information
@JSerZANP
JSerZANP committed Aug 12, 2023
1 parent 9746052 commit a1604f0
Show file tree
Hide file tree
Showing 5 changed files with 87 additions and 120 deletions.
122 changes: 55 additions & 67 deletions examples/web/components/CodeSnippet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import withShiki from "@stefanprobst/remark-shiki";

import { Editor } from "@monaco-editor/react";
import domtoimage from "dom-to-image";
import { $ } from "migacss";
import { useCallback, useEffect, useRef, useState } from "react";
import { AiOutlineDownload } from "react-icons/ai";
import { BsStars } from "react-icons/bs";
Expand Down Expand Up @@ -427,16 +428,16 @@ export function CodeSnippet({ code: _code }: { code?: string }) {
};

return (
<Column height={"100vh"} padding={12} gap={12}>
<Column $height={"100vh"} $padding={12} $gap={12}>
<View>
<Row alignItems="center" justifyContent="space-between" gap={20}>
<Row $alignItems="center" $justifyContent="space-between" $gap={20}>
<Text type="headline1">Shaku Snippet</Text>
<a href="/" style={{ textDecoration: "none" }}>
<Text type="headline5" color="#0e67e4">
<$.a href="/" $textDecoration="none">
<Text type="headline5" $color="#0e67e4">
<BsStars />
Shaku Playground →
</Text>
</a>
</$.a>
</Row>
<Text type="body">
Annotate code snippet with <a href="/">Shaku Code Annotate Syntax</a>{" "}
Expand All @@ -445,9 +446,9 @@ export function CodeSnippet({ code: _code }: { code?: string }) {
</Text>
</View>

<Row gap={20} flex="1 0 0 ">
<Column flex="1 0 0" maxWidth={600}>
<Row marginBottom={"1.5rem"}>
<Row $gap={20} $flex="1 0 0 ">
<Column $flex="1 0 0" $maxWidth={600}>
<Row $marginBottom="1.5rem">
<select
value={lang}
// @ts-ignore
Expand Down Expand Up @@ -479,12 +480,12 @@ export function CodeSnippet({ code: _code }: { code?: string }) {
}}
/>
</Column>
<View flex="1 0 0">
<View $flex="1 0 0">
<Row
justifyContent="flex-start"
marginBottom="1rem"
gap={12}
alignItems="center"
$justifyContent="flex-start"
$marginBottom="1rem"
$gap={12}
$alignItems="center"
>
<Text type="headline4">Preview</Text>

Expand Down Expand Up @@ -513,65 +514,54 @@ export function CodeSnippet({ code: _code }: { code?: string }) {
></Button>
</Row>
<View
ref={refPreview}
padding="40px 40px 10px 40px"
minWidth={400}
backgroundColor={selectedTheme.background}
width="min-content"
$padding="40px 40px 10px 40px"
$minWidth={400}
$backgroundColor={selectedTheme.background}
$width="min-content"
// @ts-ignore
style={{ ...selectedTheme.cssVars }}
ref={refPreview}
>
<View flex="0 0 0" width="max-content" margin="auto auto">
<p
style={{
backgroundColor: "#24292e",
margin: 0,
padding: "15px 15px 0",
display: "flex",
gap: "8px",
borderRadius: "6px 6px 0 0",
alignItems: "center",
}}
<View $flex="0 0 0" $width="max-content" $margin="auto auto">
<$.p
$backgroundColor="#24292e"
$margin={0}
$padding="15px 15px 0"
$display="flex"
$gap="8px"
$borderRadius="6px 6px 0 0"
$alignItems="center"
>
<Dot color="#ff5f56" />
<Dot color="#ffbd2d" />
<Dot color="#26c940" />
<span
style={{
color: " #a39d9d",
fontSize: "12px",
}}
>
<$.span $color="#a39d9d" $fontSize="12px">
{lang}
</span>
</p>
</$.span>
</$.p>
<div
className={styles.code}
dangerouslySetInnerHTML={{ __html: preview }}
></div>
<p
style={{
backgroundColor: "#24292e",
margin: 0,
padding: "10px 10px 0",
display: "flex",
gap: "8px",
borderRadius: "0 0 6px 6px",
}}
></p>
<p
style={{
color: "rgba(0,0,0,0.2)",
textAlign: "center",
width: "100%",
fontWeight: "bold",
margin: "10px",
fontSize: "12px",
height: "10px",
}}
<$.p
$backgroundColor="#24292e"
$margin={0}
$padding="10px 10px 0"
$display="flex"
$gap="8px"
$borderRadius="0 0 6px 6px"
></$.p>
<$.p
$color="rgba(0,0,0,0.2)"
$textAlign="center"
$width="100%"
$fontWeight="bold"
$margin="10px"
$fontSize="12px"
$height="10px"
>
{showLogo ? "Shaku Snippet" : ""}
</p>
</$.p>
</View>
</View>
</View>
Expand All @@ -582,15 +572,13 @@ export function CodeSnippet({ code: _code }: { code?: string }) {

function Dot({ color }: { color: string }) {
return (
<span
style={{
backgroundColor: color,
width: "12px",
height: "12px",
display: "inline-block",
borderRadius: "15px",
}}
></span>
<$.span
$backgroundColor={color}
$width="12px"
$height="12px"
$display="inline-block"
$borderRadius="15px"
></$.span>
);
}

Expand Down
12 changes: 6 additions & 6 deletions examples/web/components/Playground.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,12 +201,12 @@ export function Playground({ code: _code }: { code?: string }) {
);
};
return (
<Column height={"100vh"} padding={12} gap={12}>
<Column $height={"100vh"} $padding={12} $gap={12}>
<View>
<Row alignItems="center" justifyContent="space-between" gap={20}>
<Row $alignItems="center" $justifyContent="space-between" $gap={20}>
<Text type="headline1">Shaku Playground</Text>
<$.a href="/snippet" $textDecoration="none">
<Text type="headline5" color="#dc0bf0">
<Text type="headline5" $color="#dc0bf0">
<BsStars />
Shaku Snippet →
</Text>
Expand All @@ -227,8 +227,8 @@ export function Playground({ code: _code }: { code?: string }) {
icon={<RiShareBoxLine />}
></Button>
</Row>
<Row gap={20} flex="1 0 0 ">
<Column flex="1 0 0">
<Row $gap={20} $flex="1 0 0 ">
<Column $flex="1 0 0">
<Editor
defaultLanguage="markdown"
height="100%"
Expand All @@ -237,7 +237,7 @@ export function Playground({ code: _code }: { code?: string }) {
onChange={setCode}
/>
</Column>
<View flex="1 0 0">
<View $flex="1 0 0">
<div
dangerouslySetInnerHTML={{ __html: preview }}
className={styles.preview}
Expand Down
55 changes: 17 additions & 38 deletions examples/web/components/bare.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,10 @@ type TextType =
type BaseProps = {
children?: ReactNode;
style?: CSSProperties;
padding?: CSSProperties["padding"];
margin?: CSSProperties["padding"];
marginBottom?: CSSProperties["marginBottom"];
width?: CSSProperties["width"];
height?: CSSProperties["height"];
flex?: CSSProperties["flex"];
// this field seems ugly
maxWidth?: CSSProperties["maxWidth"];
minWidth?: CSSProperties["minWidth"];
backgroundColor?: CSSProperties["backgroundColor"];
color?: CSSProperties["color"];
} & {
[P in keyof React.CSSProperties as P extends string
? `$${P}`
: never]: React.CSSProperties[P];
};

export function Text({
Expand Down Expand Up @@ -57,43 +50,29 @@ export function Text({
}
}

export function Column({
children,
...rest
}: BaseProps & {
gap?: CSSProperties["gap"];
}) {
export function Column({ children, ...rest }) {
return (
<$.div style={{ display: "flex", flexDirection: "column", ...rest }}>
<$.div $display="flex" $flexDirection="column" {...rest}>
{children}
</$.div>
);
}

export const Row = forwardRef(function Row(
{
children,
...rest
}: BaseProps & {
alignItems?: CSSProperties["alignItems"];
justifyContent?: CSSProperties["justifyContent"];
gap?: CSSProperties["gap"];
},
{ children, ...rest }: BaseProps,
ref?: RefObject<HTMLDivElement>
) {
return (
<div
<$.div
ref={ref}
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "stretch",
...rest,
}}
$display="flex"
$flexDirection="row"
$justifyContent="space-between"
$alignItems="stretch"
{...rest}
>
{children}
</div>
</$.div>
);
});

Expand Down Expand Up @@ -138,13 +117,13 @@ export function Button({
}

export const View = forwardRef(function View(
{ children, style, ...rest }: BaseProps,
{ children, ...rest }: BaseProps,
ref?: RefObject<HTMLDivElement>
) {
return (
<div style={{ ...rest, ...style }} ref={ref}>
<$.div {...rest} ref={ref}>
{children}
</div>
</$.div>
);
});

Expand Down
2 changes: 1 addition & 1 deletion examples/web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@types/mdx": "^2.0.5",
"copy-webpack-plugin": "^11.0.0",
"dom-to-image": "2.6.0",
"migacss": "^0.0.2",
"migacss": "^0.0.5",
"next": "latest",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand Down
16 changes: 8 additions & 8 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 comment on commit a1604f0

@vercel
Copy link

@vercel vercel bot commented on a1604f0 Aug 12, 2023

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:

shaku-web – ./

shaku-web-jserzanp.vercel.app
shaku-web.vercel.app
shaku-web-git-main-jserzanp.vercel.app

Please sign in to comment.