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

Jump to bottom

Fixed Issue #500 #513

Merged
merged 2 commits into from
Apr 6, 2025
Merged

Fixed Issue #500 #513

merged 2 commits into from
Apr 6, 2025

Conversation

mathewlewallen
Copy link
Contributor

Fixed issue #500

Description

Issue was:

When rendering the Table of Contents, the RichText component is receiving an 'isTasksList' prop that ends up on a native ul element. React then warns that this prop is not recognized as a valid DOM attribute. If you intentionally need a custom attribute, it should be lowercase like 'istaskslist', or it should be removed from the DOM element.

Fix was:

I just provided a custom component for the RichText like how it is in the blog/[slug]/page.tsx. I am now working with basehub v8.1.31. Here's the code I used:

<Body 
  content={page.body.json.content}
  components={{
    ul: ({ children, isTasksList, ...props }) => (
      <ul {...props}>{children}</ul>
    )
  }}
/>

Related Issues

None. Basehub v8.1.31 now works.
Closes #500

Checklist

  • [ x] My code follows the code style of this project.
  • [ x] I have performed a self-review of my code.
  • [ x] I have commented my code, particularly in hard-to-understand areas.
  • [x ] I have updated the documentation, if necessary.
  • [ x] I have added tests that prove my fix is effective or my feature works.
  • [x ] New and existing tests pass locally with my changes.

Screenshots (if applicable)

Additional Notes

Here's my full code on this page for my app:

import { Sidebar } from '@/components/sidebar';
import { ArrowLeftIcon } from '@radix-ui/react-icons';
import { legal } from '@cc/cms';
import { Body } from '@cc/cms/components/body';
import { Feed } from '@cc/cms/components/feed';
import { TableOfContents } from '@cc/cms/components/toc';
import { createMetadata } from '@cc/seo/metadata';
import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import Balancer from 'react-wrap-balancer';

type LegalPageProperties = {
  readonly params: Promise<{
    slug: string;
  }>;
};

export const generateMetadata = async ({
  params,
}: LegalPageProperties): Promise<Metadata> => {
  const { slug } = await params;
  const post = await legal.getPost(slug);

  if (!post) {
    return {};
  }

  return createMetadata({
    title: post._title,
    description: post.description,
  });
};

export const generateStaticParams = async (): Promise<{ slug: string }[]> => {
  const posts = await legal.getPosts();

  return posts.map(({ _slug }) => ({ slug: _slug }));
};

const LegalPage = async ({ params }: LegalPageProperties) => {
  const { slug } = await params;

  return (
    <Feed queries={[legal.postQuery(slug)]}>
      {/* biome-ignore lint/suspicious/useAwait: "Server Actions must be async" */}
      {async ([data]) => {
        'use server';

        const page = data.legalPages.item;

        if (!page) {
          notFound();
        }

        return (
          <div className="container mx-auto max-w-5xl py-16">
            <Link
              className="mb-4 inline-flex items-center gap-1 text-muted-foreground text-sm focus:underline focus:outline-none"
              href="/"
            >
              <ArrowLeftIcon className="h-4 w-4" />
              Back to Home
            </Link>
            <h1 className="scroll-m-20 font-extrabold text-4xl tracking-tight lg:text-5xl">
              <Balancer>{page._title}</Balancer>
            </h1>
            <p className="leading-7 [&:not(:first-child)]:mt-6">
              <Balancer>{page.description}</Balancer>
            </p>
            <div className="mt-16 flex flex-col items-start gap-8 sm:flex-row">
              <div className="sm:flex-1">
                <div className="prose prose-neutral dark:prose-invert">
                  <Body 
                    content={page.body.json.content}
                    components={{
                      ul: ({ children, isTasksList, ...props }) => (
                        <ul {...props}>{children}</ul>
                      )
                    }}
                  />
                </div>
              </div>
              <div className="sticky top-24 hidden shrink-0 md:block">
                <Sidebar
                  toc={<TableOfContents data={page.body.json.toc} />}
                  readingTime={`${page.body.readingTime} min read`}
                  date={new Date()}
                />
              </div>
            </div>
          </div>
        );
      }}
    </Feed>
  );
};

export default LegalPage;

Repository owner deleted a comment from vercel bot Apr 3, 2025
@vercel Vercel
Copy link

vercel bot commented Apr 6, 2025

@haydenbleasel is attempting to deploy a commit to the vercel-hayden-temp Team on Vercel.

A member of the Team first needs to authorize it.

@haydenbleasel
Copy link
Owner

Awesome, nice find @mathewlewallen!

@haydenbleasel haydenbleasel merged commit 244940f into haydenbleasel:main Apr 6, 2025
0 of 6 checks passed
@github-actions GitHub Actions
Copy link

github-actions bot commented Apr 6, 2025

🚀 PR was released in v4.2.1 🚀

@github-actions github-actions bot added the released This issue/pull request has been released. label Apr 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
released This issue/pull request has been released.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Basehub (v8.1.20) Updated RichText: isTasksList Prop Leaks to DOM Causing React Warning
2 participants
@mathewlewallen @haydenbleasel