[v3] fix theme-blog heading styles in post layout (#3117)

* [v3] fix theme-blog heading styles in post layout * remove more `_not-prose` * small fix --------- Co-authored-by: Dimitri POSTOLOV <[email protected]>
shuding · Aug 21, 2024 · 49a9627 · 49a9627
1 parent 799174f
commit 49a9627
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/.changeset/seven-melons-collect.md b/.changeset/seven-melons-collect.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-blog': patch
+---
+
+fix theme-blog heading styles in post layout
diff --git a/packages/nextra-theme-blog/src/mdx-theme.tsx b/packages/nextra-theme-blog/src/mdx-theme.tsx
@@ -38,7 +38,7 @@ function HeadingLink({
  <Tag
  className={
  // can be added by footnotes
- className === 'sr-only' ? '_sr-only' : `_not-prose subheading-${Tag}`
+ className === 'sr-only' ? '_sr-only' : `subheading-${Tag}`
  }
  {...props}
  >
@@ -47,7 +47,7 @@ function HeadingLink({
  <a
  href={`#${id}`}
  id={id}
- className="subheading-anchor"
+ className="_not-prose subheading-anchor"
  aria-label="Permalink for this section"
  />
  )}
@@ -81,9 +81,9 @@ export const components: MDXComponents = {
  h6: props => <HeadingLink tag="h6" {...props} />,
  a: A,
  pre: ({ children, ...props }) => (
- <div className="_not-prose">
- <Pre {...props}>{children}</Pre>
- </div>
+ <Pre className="_not-prose" {...props}>
+ {children}
+ </Pre>
  ),
  tr: Tr,
  th: Th,

diff --git a/packages/nextra-theme-blog/src/meta.tsx b/packages/nextra-theme-blog/src/meta.tsx
@@ -43,8 +43,8 @@ export default function Meta(): ReactElement {
  '_mb-8 _flex _gap-3 ' + (readingTime ? '_items-start' : '_items-center')
  }
  >
- <div className="_grow dark:_text-gray-400 _text-gray-600">
- <div className="_not-prose _flex _flex-wrap _items-center _gap-1">
+ <div className="_not-prose _grow dark:_text-gray-400 _text-gray-600">
+ <div className="_flex _flex-wrap _items-center _gap-1">
  {author}
  {author && date && ','}
  {dateObj && (
@@ -58,7 +58,7 @@ export default function Meta(): ReactElement {
  {readingTime || tagsEl}
  </div>
  {readingTime && (
- <div className="_not-prose _mt-1 _flex _flex-wrap _items-center _gap-1">
+ <div className="_mt-1 _flex _flex-wrap _items-center _gap-1">
  {tagsEl}
  </div>
  )}