change(blog): add missing class names to override styles (#627)

* change(blog): add missing class names to override styles * Update packages/nextra-theme-blog/src/mdx-theme.tsx * Update packages/nextra-theme-blog/src/posts-layout.tsx * Update packages/nextra-theme-blog/src/posts-layout.tsx * Update packages/nextra-theme-blog/src/posts-layout.tsx * Update packages/nextra-theme-blog/src/posts-layout.tsx Co-authored-by: Dimitri POSTOLOV <[email protected]>
shuding · Aug 4, 2022 · e596d3d · e596d3d
1 parent c8605d6
commit e596d3d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/.changeset/witty-tools-repair.md b/.changeset/witty-tools-repair.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-blog': patch
+---
+
+add missing class names to override styles
diff --git a/packages/nextra-theme-blog/src/mdx-theme.tsx b/packages/nextra-theme-blog/src/mdx-theme.tsx
@@ -40,7 +40,7 @@ const createHeaderLink =
   (Tag: `h${2 | 3 | 4 | 5 | 6}`) =>
   ({ children, id, ...props }: ComponentProps<'h2'>): ReactElement => {
     return (
-      <Tag {...props}>
+      <Tag className={`subheading-${Tag}`} {...props}>
         <span className="subheading-anchor -mt-8" id={id} />
         <a href={`#${id}`}>
           {children}

diff --git a/packages/nextra-theme-blog/src/posts-layout.tsx b/packages/nextra-theme-blog/src/posts-layout.tsx
@@ -12,7 +12,9 @@ export const PostsLayout = ({ children }: { children: ReactNode }) => {
   const { config, opts } = useBlogContext()
   const { posts } = collectPostsAndNavs({ config, opts })
   const router = useRouter()
-  const { meta: { type } } = opts
+  const {
+    meta: { type }
+  } = opts
   const tagName = type === 'tag' ? router.query.tag : null
   const postList = posts.map(post => {
     if (tagName) {
@@ -29,7 +31,7 @@ export const PostsLayout = ({ children }: { children: ReactNode }) => {
     const description = post.frontMatter?.description
 
     return (
-      <div key={post.route}>
+      <div key={post.route} className="post-item">
         <h3>
           <Link href={post.route} passHref>
             <a className="!no-underline">{postTitle}</a>
@@ -40,13 +42,16 @@ export const PostsLayout = ({ children }: { children: ReactNode }) => {
             {description}
             {config.readMore && (
               <Link href={post.route} passHref>
-                <a className="ml-1">{config.readMore}</a>
+                <a className="post-item-more ml-2">{config.readMore}</a>
               </Link>
             )}
           </p>
         )}
         {date && (
-          <time className="text-sm text-gray-300" dateTime={date.toISOString()}>
+          <time
+            className="text-sm text-gray-300"
+            dateTime={date.toISOString()}
+          >
             {date.toDateString()}
           </time>
         )}