diff --git a/components/lib/(partials)/ModalComponent.tsx b/components/lib/(partials)/ModalComponent.tsx index 7112b2a..0ac05fa 100644 --- a/components/lib/(partials)/ModalComponent.tsx +++ b/components/lib/(partials)/ModalComponent.tsx @@ -22,7 +22,7 @@ export default function ModalComponent({ open, setOpen, ...props }: Props) {
diff --git a/components/lib/elements/Border.tsx b/components/lib/elements/Border.tsx index 42fcb52..9c45649 100644 --- a/components/lib/elements/Border.tsx +++ b/components/lib/elements/Border.tsx @@ -1,4 +1,4 @@ -import { DetailedHTMLProps, HTMLAttributes } from "react"; +import { DetailedHTMLProps, HTMLAttributes, RefObject } from "react"; import { twMerge } from "tailwind-merge"; export type TWUI_BORDER_PROPS = DetailedHTMLProps< @@ -6,13 +6,18 @@ export type TWUI_BORDER_PROPS = DetailedHTMLProps< HTMLDivElement > & { spacing?: "normal" | "loose" | "tight" | "wide" | "tightest"; + componentRef?: RefObject; }; /** * # Toggle Component * @className_wrapper twui-border */ -export default function Border({ spacing, ...props }: TWUI_BORDER_PROPS) { +export default function Border({ + spacing, + componentRef, + ...props +}: TWUI_BORDER_PROPS) { return (
{props.children}
diff --git a/components/lib/elements/HeaderNavLinkComponent.tsx b/components/lib/elements/HeaderNavLinkComponent.tsx index 3a34bff..c963bc3 100644 --- a/components/lib/elements/HeaderNavLinkComponent.tsx +++ b/components/lib/elements/HeaderNavLinkComponent.tsx @@ -104,7 +104,7 @@ export default function HeaderNavLinkComponent({ {dropdown ? ( diff --git a/components/lib/elements/RemoteCodeBlock.tsx b/components/lib/elements/RemoteCodeBlock.tsx new file mode 100644 index 0000000..5a7c3d5 --- /dev/null +++ b/components/lib/elements/RemoteCodeBlock.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import { serialize } from "next-mdx-remote/serialize"; +import remarkGfm from "remark-gfm"; +import rehypePrismPlus from "rehype-prism-plus"; +import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote"; +import { useMDXComponents } from "../mdx/mdx-components"; + +export const TWUIPrismLanguages = ["shell", "javascript"] as const; + +type Props = { + content: string; +}; + +/** + * # CodeBlock + * + * @className `twui-remote-code-block-wrapper` + */ +export default function RemoteCodeBlock({ content }: Props) { + const [mdxSource, setMdxSource] = + React.useState>(); + + const { components } = useMDXComponents(); + + React.useEffect(() => { + serialize(content, { + mdxOptions: { + remarkPlugins: [remarkGfm], + rehypePlugins: [rehypePrismPlus], + }, + }).then((mdxSrc) => { + setMdxSource(mdxSrc); + }); + }, []); + + if (!mdxSource) { + return null; + } + + return ( + + ); +} diff --git a/components/lib/elements/Toast.tsx b/components/lib/elements/Toast.tsx index 58e7158..6440049 100644 --- a/components/lib/elements/Toast.tsx +++ b/components/lib/elements/Toast.tsx @@ -70,7 +70,7 @@ export default function Toast({ ( buttonDownRef={buttonDownRef} /> ) : null} - - {/* {info && ( - - - - } - hoverOpen - > - - {typeof info == "string" ? ( - {info} - ) : ( - info - )} - - - )} */}
{info && ( void; editorProps?: ComponentProps; maxHeight?: string; + noToggleButtons?: boolean; }; export default function MarkdownEditor({ @@ -23,6 +24,7 @@ export default function MarkdownEditor({ changeHandler, editorProps, maxHeight: existingMaxHeight, + noToggleButtons, }: Props) { const [value, setValue] = React.useState(existingValue || ``); @@ -40,9 +42,11 @@ export default function MarkdownEditor({ return ( - + {!noToggleButtons && ( + + )} {sideBySide ? ( @@ -69,7 +72,6 @@ export default function MarkdownEditor({ > {preview ? ( diff --git a/components/lib/mdx/markdown/MarkdownEditorPreviewComponent.tsx b/components/lib/mdx/markdown/MarkdownEditorPreviewComponent.tsx index 41783a3..932cd34 100644 --- a/components/lib/mdx/markdown/MarkdownEditorPreviewComponent.tsx +++ b/components/lib/mdx/markdown/MarkdownEditorPreviewComponent.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { ComponentProps, RefObject } from "react"; import { twMerge } from "tailwind-merge"; import { serialize } from "next-mdx-remote/serialize"; import remarkGfm from "remark-gfm"; @@ -10,14 +10,14 @@ import EmptyContent from "../../elements/EmptyContent"; type Props = { value: string; - setValue: React.Dispatch; maxHeight: string; + wrapperProps?: ComponentProps; }; export default function MarkdownEditorPreviewComponent({ value, - setValue, maxHeight, + wrapperProps, }: Props) { try { const [mdxSource, setMdxSource] = @@ -56,9 +56,11 @@ export default function MarkdownEditorPreviewComponent({ return ( {mdxSource ? ( diff --git a/pages/blog/[slug]/index.tsx b/pages/blog/[slug]/index.tsx index b89459c..4cbf761 100644 --- a/pages/blog/[slug]/index.tsx +++ b/pages/blog/[slug]/index.tsx @@ -27,6 +27,9 @@ export const getStaticProps: GetStaticProps = async (ctx) => { slug: { value: ctx.params?.slug, }, + published: { + value: "1", + }, }, }, }); @@ -68,6 +71,13 @@ export const getStaticPaths: GetStaticPaths = async (ctx) => { await datasquirel.crud({ action: "get", table: "blog_posts", + query: { + query: { + published: { + value: "1", + }, + }, + }, }); const blogPosts = blogPostRes.payload; diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx index 125d8e8..cc45c86 100644 --- a/pages/blog/index.tsx +++ b/pages/blog/index.tsx @@ -23,6 +23,11 @@ export const getStaticProps: GetStaticProps = async (ctx) => { field: "id", strategy: "DESC", }, + query: { + published: { + value: "1", + }, + }, }, }); diff --git a/types.ts b/types.ts index 7aae635..1b4b89d 100644 --- a/types.ts +++ b/types.ts @@ -13,6 +13,7 @@ export type DSQL_TBENME_BLOG_POSTS = { excerpt?: string; body?: string; metadata?: string; + published?: 0 | 1; date_created?: string; date_created_code?: number; date_created_timestamp?: string;