missing nx- class prefixes in blog, fix callout padding in docs (#941)

missing `nx-` class prefixes in blog fix callout padding in docs
shuding · Oct 27, 2022 · f569d90 · f569d90
1 parent 47613e6
commit f569d90
Show file tree

Hide file tree

Showing 14 changed files with 44 additions and 22 deletions.
diff --git a/.changeset/fair-feet-flash.md b/.changeset/fair-feet-flash.md
@@ -0,0 +1,8 @@
+---
+'nextra': patch
+'nextra-theme-docs': patch
+'nextra-theme-blog': patch
+---
+
+missing `nx-` class prefixes in blog
+fix callout padding in docs
diff --git a/examples/docs/package.json b/examples/docs/package.json
@@ -4,7 +4,7 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next",
     "build": "next build",
     "start": "next start",
     "debug": "NODE_OPTIONS='--inspect' next dev",

diff --git a/examples/swr-site/pages/index.en-US.mdx b/examples/swr-site/pages/index.en-US.mdx
@@ -40,8 +40,8 @@ The name “SWR” is derived from `stale-while-revalidate`, a HTTP cache invali
 SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.
 
 <Callout emoji="✅">
-  With SWR, components will get a stream of data updates <strong>constantly</strong> and <strong>automatically</strong>.<br/>
-  And the UI will be always <strong>fast</strong> and <strong>reactive</strong>.
+  With SWR, components will get a stream of data updates **constantly** and **automatically**.<br/>
+  And the UI will be always **fast** and **reactive**.
 </Callout>
 
 <div className="mt-16 mb-20 text-center">

diff --git a/packages/nextra-theme-blog/src/basic-layout.tsx b/packages/nextra-theme-blog/src/basic-layout.tsx
@@ -8,7 +8,10 @@ export const BasicLayout = ({ children }: { children: ReactNode }) => {
   const title = `${opts.title}${config.titleSuffix || ''}`
   const ref = useRef<HTMLHeadingElement>(null)
   return (
-    <article className="container prose prose-sm dark:prose-dark md:prose">
+    <article
+      className="container nx-prose nx-prose-sm dark:nx-prose-dark md:nx-prose"
+      dir="ltr"
+    >
       <Head>
         <title>{title}</title>
         {config.head?.({ title, meta: opts.frontMatter })}

diff --git a/packages/nextra-theme-blog/src/index.tsx b/packages/nextra-theme-blog/src/index.tsx
@@ -24,7 +24,7 @@ const BlogLayout = ({
   const Layout = layoutMap[type]
   if (!Layout) {
     throw new Error(
-      `Nextra-themes-blog does not support the layout type "${type}" It only supports "post", "page", "posts" and "tag"`
+      `nextra-theme-blog does not support the layout type "${type}" It only supports "post", "page", "posts" and "tag"`
     )
   }
   return (

diff --git a/packages/nextra-theme-blog/src/nav.tsx b/packages/nextra-theme-blog/src/nav.tsx
@@ -9,7 +9,7 @@ export default function Nav(): ReactElement {
   const { navPages } = collectPostsAndNavs({ opts, config })
   return (
     <div className="nx-mb-8 nx-flex nx-items-center nx-gap-3">
-      <div className="nx-flex grow nx-flex-wrap nx-items-center nx-justify-end nx-gap-3">
+      <div className="nx-flex nx-grow nx-flex-wrap nx-items-center nx-justify-end nx-gap-3">
         {navPages.map(page => {
           if (page.active) {
             return (

diff --git a/packages/nextra-theme-blog/src/posts-layout.tsx b/packages/nextra-theme-blog/src/posts-layout.tsx
@@ -32,21 +32,21 @@ export const PostsLayout = ({ children }: { children: ReactNode }) => {
       <div key={post.route} className="post-item">
         <h3>
           <Link href={post.route} passHref>
-            <a className="!no-underline">{postTitle}</a>
+            <a className="!nx-no-underline">{postTitle}</a>
           </Link>
         </h3>
         {description && (
-          <p className="mb-2 text-gray-400">
+          <p className="nx-mb-2 nx-text-gray-400">
             {description}
             {config.readMore && (
               <Link href={post.route} passHref>
-                <a className="post-item-more ml-2">{config.readMore}</a>
+                <a className="post-item-more nx-ml-2">{config.readMore}</a>
               </Link>
             )}
           </p>
         )}
         {date && (
-          <time className="text-sm text-gray-300" dateTime={date.toISOString()}>
+          <time className="nx-text-sm nx-text-gray-300" dateTime={date.toISOString()}>
             {date.toDateString()}
           </time>
         )}

diff --git a/packages/nextra-theme-blog/src/styles.css b/packages/nextra-theme-blog/src/styles.css
@@ -21,7 +21,7 @@ h1 {
   letter-spacing: -0.03em;
 }
 
-.prose code {
+.nx-prose code {
   &:before,
   &:after {
     @apply nx-hidden;

diff --git a/packages/nextra-theme-blog/src/theme-switch.tsx b/packages/nextra-theme-blog/src/theme-switch.tsx
@@ -17,7 +17,7 @@ export default function ThemeSwitch() {
     <span
       role="button"
       aria-label="Toggle Dark Mode"
-      className="cursor-pointer p-2 text-current"
+      className="nx-cursor-pointer nx-p-2 nx-text-current"
       tabIndex={0}
       onClick={toggleTheme}
       onKeyDown={e => {

diff --git a/packages/nextra-theme-docs/src/components/tabs.tsx b/packages/nextra-theme-docs/src/components/tabs.tsx
@@ -81,7 +81,7 @@ export function Tab({
   ...props
 }: ComponentProps<'div'>): ReactElement {
   return (
-    <HeadlessTab.Panel {...props} className="nx-rounded">
+    <HeadlessTab.Panel {...props} className="nx-rounded nx-pt-6">
       {children}
     </HeadlessTab.Panel>
   )

diff --git a/packages/nextra-theme-docs/src/mdx-components.tsx b/packages/nextra-theme-docs/src/mdx-components.tsx
@@ -180,7 +180,7 @@ const Details = ({
 
   return (
     <details
-      className="nx-my-4 nx-rounded nx-border nx-border-gray-200 nx-bg-white nx-p-2 nx-shadow-sm dark:nx-border-neutral-800 dark:nx-bg-neutral-900"
+      className="nx-my-4 nx-rounded nx-border nx-border-gray-200 nx-bg-white nx-p-2 nx-shadow-sm dark:nx-border-neutral-800 dark:nx-bg-neutral-900 first:nx-mt-0"
       {...props}
       open={delayedOpenState}
       {...(openState && { 'data-expanded': true })}
@@ -238,11 +238,14 @@ export const getComponents = ({
     h5: createHeaderLink('h5', context),
     h6: createHeaderLink('h6', context),
     ul: (props: ComponentProps<'ul'>) => (
-      <ul className="ltr:nx-ml-6 rtl:nx-mr-6 nx-mt-6 nx-list-disc" {...props} />
+      <ul
+        className="ltr:nx-ml-6 rtl:nx-mr-6 nx-mt-6 nx-list-disc first:nx-mt-0"
+        {...props}
+      />
     ),
     ol: (props: ComponentProps<'ol'>) => (
       <ol
-        className="ltr:nx-ml-6 rtl:nx-mr-6 nx-mt-6 nx-list-decimal"
+        className="ltr:nx-ml-6 rtl:nx-mr-6 nx-mt-6 nx-list-decimal first:nx-mt-0"
         {...props}
       />
     ),
@@ -251,7 +254,7 @@ export const getComponents = ({
       <blockquote
         className={cn(
           'nx-mt-6 nx-border-gray-300 nx-italic nx-text-gray-700 dark:nx-border-gray-700 dark:nx-text-gray-400',
-          'rtl:nx-border-r-2 rtl:nx-pr-6 ltr:nx-border-l-2 ltr:nx-pl-6'
+          'rtl:nx-border-r-2 rtl:nx-pr-6 ltr:nx-border-l-2 ltr:nx-pl-6 first:nx-mt-0'
         )}
         {...props}
       />
@@ -266,10 +269,13 @@ export const getComponents = ({
       />
     ),
     table: (props: ComponentProps<'table'>) => (
-      <Table className="nextra-scrollbar nx-mt-6 nx-p-0" {...props} />
+      <Table
+        className="nextra-scrollbar nx-mt-6 nx-p-0 first:nx-mt-0"
+        {...props}
+      />
     ),
     p: (props: ComponentProps<'p'>) => (
-      <p className="nx-mt-6 nx-leading-7" {...props} />
+      <p className="nx-mt-6 nx-leading-7 first:nx-mt-0" {...props} />
     ),
     tr: Tr,
     th: Th,

diff --git a/packages/nextra/src/components/pre.tsx b/packages/nextra/src/components/pre.tsx
@@ -32,7 +32,7 @@ export const Pre = ({
       )}
       <pre
         className={[
-          'nx-bg-primary-700/5 nx-mt-6 nx-mb-4 nx-overflow-x-auto nx-rounded-xl nx-font-medium nx-subpixel-antialiased dark:nx-bg-primary-300/10',
+          'nx-bg-primary-700/5 nx-mb-4 nx-overflow-x-auto nx-rounded-xl nx-font-medium nx-subpixel-antialiased dark:nx-bg-primary-300/10',
           'contrast-more:nx-border contrast-more:nx-border-primary-900/20 contrast-more:nx-contrast-150 contrast-more:dark:nx-border-primary-100/40',
           filename ? 'nx-pt-12 nx-pb-4' : 'nx-py-4',
           className

diff --git a/packages/nextra/styles/code-block.css b/packages/nextra/styles/code-block.css
@@ -43,7 +43,7 @@ pre {
 }
 
 [data-rehype-pretty-code-fragment] {
-  @apply nx-relative;
+  @apply nx-relative nx-mt-6 first:nx-mt-0;
 }
 
 @supports (

diff --git a/packages/nextra/styles/subheading-anchor.css b/packages/nextra/styles/subheading-anchor.css
@@ -3,7 +3,12 @@
 
   span:target + &,
   :hover > & {
-    @apply nx-no-underline nx-opacity-100;
+    @apply nx-opacity-100;
+  }
+
+  span + &,
+  :hover > & {
+    @apply !nx-no-underline;
   }
 
   &:after {