-
-
Notifications
You must be signed in to change notification settings - Fork 19
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
✨ Chore: Extend Markdoc configuration #127
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { z } from 'astro/zod'; | ||
import type { Config } from '@markdoc/markdoc'; | ||
|
||
// | ||
// MARKDOC RENDER TYPE SCHEMA | ||
// | ||
|
||
export const markdocRenderTypeSchema = z | ||
.union([z.literal('html'), z.literal('react'), z.literal('react-static')]) | ||
.optional() | ||
.default('html'); | ||
|
||
// | ||
// MARKDOC ARG PARSE SCHEMA | ||
// | ||
|
||
export const markdocArgParseSchema = z | ||
.union([ | ||
z.object({ | ||
file: z.string(), | ||
slots: z.boolean(), | ||
location: z.boolean(), | ||
}), | ||
z.string(), | ||
]) | ||
.optional(); | ||
|
||
// | ||
// MARKDOC CONFIG SCHEMA | ||
// | ||
export const markdocConfigSchema = z | ||
.object({ | ||
renderType: markdocRenderTypeSchema, | ||
argParse: markdocArgParseSchema, | ||
transformConfig: z.custom<Config>().optional(), | ||
}) | ||
.optional() | ||
.default({}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,23 @@ | ||
import Markdoc from '@markdoc/markdoc'; | ||
import Config from 'virtual:studiocms/config'; | ||
import React, { type ReactNode } from 'react'; | ||
|
||
export async function renderMarkDoc(input: string): Promise<string> { | ||
const ast = Markdoc.parse(input); | ||
const { | ||
markdocConfig: { argParse, renderType, transformConfig }, | ||
} = Config; | ||
|
||
const content = Markdoc.transform(ast); | ||
export async function renderMarkDoc(input: string): Promise<string | ReactNode> { | ||
const ast = Markdoc.parse(input, argParse); | ||
const content = Markdoc.transform(ast, transformConfig); | ||
|
||
const html = Markdoc.renderers.html(content); | ||
|
||
return html; | ||
switch (renderType) { | ||
case 'react': | ||
return Markdoc.renderers.react(content, React); | ||
case 'react-static': | ||
return Markdoc.renderers.reactStatic(content); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What is the output of these? In order for them to work with the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. react => return ReactNode There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. for the ReactNode, it might be worth working out a implementation with the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
yes, but it’s in an experimental phase, so now we can remove the react option and add it later There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This whole project(studioCMS) is in experimental state as well (and we are already using the container api 😛 ) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
yeah, so we can use container api... There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. indeed! Hakuna matata! I like living on the edge.... we are using ALOT of experimental/beta stuff since astroDB is experimental as well |
||
case 'html': | ||
return Markdoc.renderers.html(content); | ||
default: | ||
throw new Error('Unsupported Markdoc type'); | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't mind the
@types/react
being a standardpeerDependeny
but could we add apeerDependenciesMeta
forreact
to be optional?example
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah, make sense, both react and @types/react?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think just react needs to be moved to an Optional state... but @jdtjenkins could probably give a better answer since i know he had to deal with this when he made the devtoolbar app for AIK
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes, so we wait for his answer
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah for AIK we had
react
,@types/react
andreact-dom
as optional peer deps if I remember correctly!https://docs.npmjs.com/cli/v10/configuring-npm/package-json#peerdependenciesmeta
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jdtjenkins yeah, thank you!