shadcn / next-mdx Goto Github PK

I have two types of nodes: Post and Snippet. I would like a Post to be composed of multiple snippets (which Snippet it belongs to is defined in the Snipper's front matter), while retaining the ability to refer to a Snippet on its own.

Is it possible to call getAll*Nodes('snippet') from the Post document and only have it return the Snippets that belong to the post?

I have tried to publish .mdx posts with images but it doesn't seem to work. I tried inserting this:

<Image src={/images/placeholder.png} alt={image alt text} layout="fill"  />

Any ideas how to post images?
Thanks

For this code:

import { GetStaticProps } from 'next';
export const getStaticProps: GetStaticProps = async (context) => {
    const post = await getMdxNode('post', context);

    if (!post) {
        return {
            notFound: true,
        };
    }

    return {
        props: {
            post,
        },
    };
};

TypeScript is emitting this warning for L3:

TS2345: Argument of type 'GetStaticPropsContext<ParsedUrlQuery>' is not assignable to parameter of type 'string | GetStaticPropsContext<Dict<string[]>>'.  
Type 'GetStaticPropsContext<ParsedUrlQuery>' is not assignable to type 'GetStaticPropsContext<Dict<string[]>>'.
Type 'ParsedUrlQuery' is not assignable to type 'Dict<string[]>'. 
Index signatures are incompatible.
Type 'string | string[] | undefined' is not assignable to type 'string[] | undefined'.
Type 'string' is not assignable to type 'string[] | undefined'.

Replace next-mdx.json with next-mdx.config.js.

TBH I can't figure out how to make this work (probably limited to using micribundle?).

If anyone want to take a stab at this, that'd be awesome.

Is there a workaround for handling locales? I get 404 when trying to get to the blog with a locale.

http://localhost:3000/blog/post-slug will return the post correctly but http://localhost:3000/es-MX/blog/post-slug will return 404.

I don't mind if it returns the same content, I just want the post to be rendered as the same if the url has the locale.

is there an option to separate code and inlineCode in the components?
Here's my code:

const components = { h1: ({ children }) => { return <Heading as="h1">{children}</Heading>; } code: ({ children }) => { return <p sx={{ color: "blue", background: 'red' }}>{children}</p>; }, inlineCode: ({ children }) => { return <p sx={{ color: "red", background: 'yellow' }}>{children}</p>; } };

const content = useHydrate(doc, { components: components, });

I am getting this error:

Error: Error serializing `.post.frontMatter.lastUpdated` returned from `getStaticProps` in "/posts/[...slug]".
Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types.

With this post:

---
name: Post
lastUpdated: 2021-02-13
---

Fantastic library, I'm really enjoying the simplicity it brings to building an mdx-powered site with relational data. It would be useful to add reading-time and wordCount parameters to the frontmatter. Would you accept a PR for this? Looking at the source, I believe it would be easiest to add these parameters in get-nodes.ts in the getFileData() function.

Would this be possible? I am fine with just using the main slug (i.e. the filename) to reference a document internally but I would like multiple slugs to resolve to the same file.