-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #33 from Code-Hex/add/editor-mdx
Added editor page for my mdx
- Loading branch information
Showing
26 changed files
with
7,135 additions
and
8,499 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,13 @@ | ||
| { | ||
| "presets": ["next/babel"] | ||
| "presets": ["next/babel"], | ||
| "plugins": [ | ||
| [ | ||
| "prismjs", | ||
| { | ||
| "languages": "all", | ||
| "plugins": ["diff-highlight"], | ||
| "css": false | ||
| } | ||
| ] | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -37,3 +37,6 @@ yarn-error.log* | |
|
|
||
| # next-mdx-enhanced | ||
| .mdx-data | ||
|
|
||
| # wasm | ||
| public/wasm/esbuild.wasm | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,154 @@ | ||
| // Thanks! https://github.com/syumai/react-sidebar-layout | ||
| import { | ||
| CSSProperties, | ||
| ReactNode, | ||
| useCallback, | ||
| useMemo, | ||
| useState, | ||
| PointerEvent, | ||
| SetStateAction, | ||
| } from 'react'; | ||
|
|
||
| /*** | ||
| * Resizer Component | ||
| */ | ||
|
|
||
| type ResizerStyleProps = { | ||
| transitionDuration?: number; // milli seconds | ||
| width?: number; | ||
| }; | ||
|
|
||
| type ResizerDivProps = { | ||
| left?: number; | ||
| right?: number; | ||
| width: number; // must not be optional as dynamic style | ||
| } & ResizerStyleProps; | ||
|
|
||
| type ResizerProps = ResizerStyleProps & { | ||
| position: string; | ||
| xPos: number; | ||
| setWidth: (width: SetStateAction<number>) => void; | ||
| }; | ||
|
|
||
| const useResizeStyle = ({ | ||
| width, | ||
| left, | ||
| right, | ||
| transitionDuration = 300, | ||
| }: ResizerDivProps): CSSProperties => { | ||
| const style: CSSProperties = useMemo( | ||
| () => ({ | ||
| width: `${width}px`, | ||
| left: typeof left === 'number' ? `${left}px` : 'initial', | ||
| right: typeof right === 'number' ? `${right}px` : 'initial', | ||
| transition: `background-color ${transitionDuration}ms`, | ||
| }), | ||
| [width, left, right, transitionDuration] | ||
| ); | ||
| return style; | ||
| }; | ||
|
|
||
| export const Resizer = ({ | ||
| transitionDuration, | ||
| width = 6, | ||
| position, | ||
| xPos, | ||
| setWidth, | ||
| }: ResizerProps): JSX.Element => { | ||
| const [dragging, setDragging] = useState(false); | ||
|
|
||
| const resizeStyle = useResizeStyle({ | ||
| width, | ||
| left: position === 'left' ? xPos - width / 2 : undefined, | ||
| right: position === 'right' ? xPos - width / 2 : undefined, | ||
| transitionDuration, | ||
| }); | ||
|
|
||
| const mouseDownHandler = useCallback((e: PointerEvent) => { | ||
| setDragging(true); | ||
| e.currentTarget.setPointerCapture(e.pointerId); | ||
| }, []); | ||
|
|
||
| const mouseUpHandler = useCallback((e: PointerEvent) => { | ||
| setDragging(false); | ||
| e.currentTarget.releasePointerCapture(e.pointerId); | ||
| }, []); | ||
|
|
||
| const mouseMoveHandler = useCallback( | ||
| (e: PointerEvent) => { | ||
| if (!dragging) { | ||
| return; | ||
| } | ||
| setWidth((prev) => prev + e.movementX); | ||
| }, | ||
| [dragging, setWidth] | ||
| ); | ||
|
|
||
| return ( | ||
| <div | ||
| onPointerDown={mouseDownHandler} | ||
| onPointerUp={mouseUpHandler} | ||
| onPointerMove={mouseMoveHandler} | ||
| className="select-none cursor-col-resize absolute z-20 h-full hover:bg-blue-400" | ||
| style={resizeStyle} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| /*** | ||
| * Layout components | ||
| */ | ||
|
|
||
| export interface SidebarLayoutProps { | ||
| resizerWidth?: number; | ||
| defaultSidebarWidth?: number; | ||
| gridCols?: number; | ||
| children: ReactNode; | ||
| } | ||
|
|
||
| interface LayoutDivProps { | ||
| sidebarWidth: number; | ||
| className: string; | ||
| children: ReactNode; | ||
| } | ||
|
|
||
| const LayoutDiv = ({ | ||
| sidebarWidth, | ||
| className, | ||
| children, | ||
| }: LayoutDivProps): JSX.Element => { | ||
| const style: CSSProperties = useMemo( | ||
| () => ({ | ||
| gridTemplateColumns: `${sidebarWidth}px 1fr`, | ||
| }), | ||
| [sidebarWidth] | ||
| ); | ||
| return ( | ||
| <div className={className} style={style}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export const SidebarLayout = ({ | ||
| resizerWidth = 4, | ||
| defaultSidebarWidth = 200, | ||
| gridCols = 2, | ||
| children, | ||
| }: SidebarLayoutProps): JSX.Element => { | ||
| const [sidebarWidth, setSidebarWidth] = useState(defaultSidebarWidth); | ||
| return ( | ||
| <LayoutDiv | ||
| className={`grid grid-cols-${gridCols}`} | ||
| sidebarWidth={sidebarWidth} | ||
| > | ||
| <Resizer | ||
| width={resizerWidth} | ||
| position="left" | ||
| xPos={sidebarWidth} | ||
| setWidth={setSidebarWidth} | ||
| /> | ||
| {children} | ||
| </LayoutDiv> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| const esbuild = require('esbuild-wasm'); | ||
|
|
||
| if (typeof window !== 'undefined') { | ||
| esbuild.initialize({ | ||
| wasmURL: '/wasm/esbuild.wasm', | ||
| }); | ||
| } | ||
|
|
||
| export default esbuild; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,54 @@ | ||
| /// <reference types="@mdx-js/loader" /> | ||
|
|
||
| // https://github.com/mdx-js/mdx/issues/1552 | ||
| declare module '@mdx-js/mdx' { | ||
| import { Pluggable } from 'unified'; | ||
|
|
||
| declare namespace mdx { | ||
| interface Options { | ||
| /** | ||
| * Path on disk to processed file | ||
| * @default undefined | ||
| */ | ||
| filepath?: string; | ||
|
|
||
| /** | ||
| * Skip the addition of 'export default' statement when serializing | ||
| * to JSX | ||
| * @default false | ||
| */ | ||
| skipExport?: boolean; | ||
|
|
||
| /** | ||
| * Wrap 'export default' statement with provided string when serializing | ||
| * to JSX | ||
| */ | ||
| wrapExport?: string; | ||
|
|
||
| /** | ||
| * Remark plugins to transform markdown content | ||
| * | ||
| * @default [] | ||
| */ | ||
| remarkPlugins?: Pluggable[]; | ||
|
|
||
| /** | ||
| * Rehype plugins html content | ||
| * | ||
| * @default [] | ||
| */ | ||
| rehypePlugins?: Pluggable[]; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Compile mdx text to jsx text asynchronously | ||
| * | ||
| * @param mdx content as a text | ||
| * @param options transform and compiler options | ||
| * @returns jsx text | ||
| */ | ||
| declare function mdx(mdx: string, options?: mdx.Options): Promise<string>; | ||
|
|
||
| export = mdx | ||
| } |
Oops, something went wrong.