Skip to content
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.

Sign up for GitHub

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

Closed
wants to merge 3 commits into from
Closed

✨ Chore: Extend Markdoc configuration #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cc9b555
chore(markdoc): extend markdoc configuration
pietrodev07 Jun 29, 2024
7ac3ec7
chore: add pnpm-lock.yaml file
pietrodev07 Jun 29, 2024
6851b8e
chore: add moon and proto
pietrodev07 Jun 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions packages/studioCMS/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,7 @@
"access": "public"
},
"sideEffects": false,
"files": [
"src"
],
"files": ["src"],
"exports": {
".": {
"import": "./src/index.ts",
Expand All @@ -43,8 +41,8 @@
"dependencies": {
"@astrojs/markdown-remark": "^5.1.1",
"@cloudinary/url-gen": "^1.19.0",
"@iconify-json/mdi": "^1.1.67",
"@iconify-json/logos": "^1.1.43",
"@iconify-json/mdi": "^1.1.67",
"@iconify/utils": "^2.1.25",
"@inox-tools/sitemap-ext": "^0.2.12",
"@markdoc/markdoc": "^0.4.0",
Expand All @@ -67,18 +65,22 @@
"mrmime": "^2.0.0",
"oslo": "^1.2.1",
"shiki": "^1.9.1",
"unpic": "^3.18.0",
"unocss": "^0.61.0"
"unocss": "^0.61.0",
"unpic": "^3.18.0"
},
"peerDependencies": {
"@astrojs/db": ">=0.11.6",
"astro": ">=4.10.3"
"@types/react": "^18.3.3",
"astro": ">=4.10.3",
"react": "^18.3.1"
Copy link
Member

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 standard peerDependeny but could we add a peerDependenciesMeta for react to be optional?

example

Copy link
Contributor Author

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?

Copy link
Member

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

Copy link
Contributor Author

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

yes, so we wait for his answer

Copy link
Member

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 and react-dom as optional peer deps if I remember correctly!

{
  "peerDependencies": {
    "react": "^",
    "@types/react": "^",
    "react-dom": "^",
  },
  "peerDependenciesMeta": {
    "react": {
      "optional": true
    },
    "@types/react": {
      "optional": true
    },
    "react-dom": {
      "optional": true
    }
  }
}

https://docs.npmjs.com/cli/v10/configuring-npm/package-json#peerdependenciesmeta

Copy link
Contributor Author

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 and react-dom as optional peer deps if I remember correctly!

{
  "peerDependencies": {
    "react": "^",
    "@types/react": "^",
    "react-dom": "^",
  },
  "peerDependenciesMeta": {
    "react": {
      "optional": true
    },
    "@types/react": {
      "optional": true
    },
    "react-dom": {
      "optional": true
    }
  }
}

https://docs.npmjs.com/cli/v10/configuring-npm/package-json#peerdependenciesmeta

@jdtjenkins yeah, thank you!

},
"devDependencies": {
"@iconify/types": "^2.0.0",
"@types/fs-extra": "^11.0.4",
"@types/node": "20.14.9",
"@types/react": "^18.3.3",
"react": "^18.3.1",
"typescript": "^5.5.2",
"@types/fs-extra": "^11.0.4",
"vite": "^5.3.1",
"@iconify/types": "^2.0.0"
"vite": "^5.3.1"
}
}
16 changes: 12 additions & 4 deletions packages/studioCMS/src/schemas/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { markedConfigSchema } from './marked';
import { dashboardConfigSchema } from './dashboard';
import { overridesSchema } from './componentoverrides';
import { DefaultFrontEndConfigSchema } from './defaultFrontend';
import { markdocConfigSchema } from './markdoc';

//
// MAIN SCHEMA
Expand All @@ -13,7 +14,7 @@ export const optionsSchema = z
.object({
/**
* Project Initialization Page - Used during First Time Setup to initialize the database
*
*
* @default true
*/
dbStartPage: z.boolean().optional().default(true),
Expand All @@ -22,13 +23,13 @@ export const optionsSchema = z
*
* Marked is A markdown parser and compiler. Built for speed.
* @see https://marked.js.org/ for more info about marked.
*
*
* Astro is the built-in Astro remark-markdown plugin.
* @see https://www.npmjs.com/package/@astrojs/markdown-remark
*
* Markdoc is a powerful, flexible, Markdown-based authoring framework. Built by Stripe.
* @see https://markdoc.dev/ for more info about markdoc.
*
*
*/
contentRenderer: z.enum(['marked', 'astro', 'markdoc']).optional().default('marked'),
/**
Expand All @@ -38,6 +39,13 @@ export const optionsSchema = z
* @see https://marked.js.org/ for more info about marked.
*/
markedConfig: markedConfigSchema,
/**
* Allows customization of the Markdoc Configuration
*
* Markdoc is a markdown parser and compiler. Built for speed. It is used to convert markdown strings into HTML, react and react-static for rendering content on StudioCMS pages.
* @see https://markdoc.dev/ for more info about markdoc.
*/
markdocConfig: markdocConfigSchema,
/**
* Allows customization of the Image Service Options
*/
Expand All @@ -48,7 +56,7 @@ export const optionsSchema = z
defaultFrontEndConfig: DefaultFrontEndConfigSchema,
/**
* Allows customization of the Dashboard Configuration
*
*
* Coming soon....
*/
dashboardConfig: dashboardConfigSchema,
Expand Down
38 changes: 38 additions & 0 deletions packages/studioCMS/src/schemas/markdoc.ts
View file
Open in desktop
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({});
24 changes: 18 additions & 6 deletions packages/studioCMS/src/utils/renderers/markdoc.ts
View file
Open in desktop
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);
Copy link
Member

Choose a reason for hiding this comment

The 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 StudioCMSRenderer.astro the final output will need to be valid HTML...

Copy link
Contributor Author

Choose a reason for hiding this comment

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

react => return ReactNode
react-static => return string so html

Copy link
Member

@Adammatthiesen Adammatthiesen Jun 29, 2024 •
edited
Loading

Choose a reason for hiding this comment

The 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 Astro ContainerAPI

Copy link
Contributor Author

Choose a reason for hiding this comment

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

for the ReactNode, it might be work working out a implementation with the Astro ContainerAPI

yes, but it’s in an experimental phase, so now we can remove the react option and add it later

Copy link
Member

Choose a reason for hiding this comment

The 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 😛 )

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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 😛 )

yeah, so we can use container api...

Copy link
Member

Choose a reason for hiding this comment

The 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');
}
}
1 change: 1 addition & 0 deletions packages/studioCMS/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"include": [
"./package.json",
"./virt-dev.d.ts",
"../../playgrounds/node/**/*",
"../../playgrounds/node/.astro/**/*",
"./**/*",
"./src/**/*.json"
Expand Down
9 changes: 9 additions & 0 deletions packages/studioCMSBlog/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,20 @@
"files": [],
"compilerOptions": {
"outDir": "../../.moon/cache/types/packages/studioCMSBlog",
"paths": {
"@astrolicious/studiocms": ["../studioCMS/src/index.ts"],
"@astrolicious/studiocms/*": ["../studioCMS/src/*"]
}
},
"include": [
"../../playgrounds/node/**/*",
"../../playgrounds/node/.astro/**/*",
"../studioCMS/**/*",
"./**/*"
],
"references": [
{
"path": "../studioCMS"
}
]
}
2 changes: 1 addition & 1 deletion playgrounds/cloudflare/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"allowJs": true,
"jsx": "preserve",
"strict": true,
"outDir": "../.moon/cache/types/playground"
"outDir": "../../.moon/cache/types/playgrounds/cloudflare"
},
"exclude": ["dist"]
}
Loading