some tweaks

.eslintrc.cjs

@@ -152,6 +152,7 @@ module.exports = {
       settings: {
         tailwindcss: {
           config: 'packages/nextra-theme-docs/tailwind.config.js',
+          callees: ['cn'],
           whitelist: ['nextra-code-block']
         }
       }

docs/pages/docs/docs-theme.mdx

@@ -22,7 +22,7 @@ import { Card, Cards } from 'nextra-theme-docs'
     }
     title="Get Started"
     href="/docs/docs-theme/start"
-  ></Card>
+  />
   <Card
     icon={
       <svg
@@ -42,7 +42,7 @@ import { Card, Cards } from 'nextra-theme-docs'
     }
     title="Page Configuration"
     href="/docs/docs-theme/page-configuration"
-  ></Card>
+  />
   <Card
     icon={
       <svg
@@ -62,7 +62,7 @@ import { Card, Cards } from 'nextra-theme-docs'
     }
     title="Theme Configuration"
     href="/docs/docs-theme/theme-configuration"
-  ></Card>
+  />
   <Card
     icon={
       <svg
@@ -82,5 +82,5 @@ import { Card, Cards } from 'nextra-theme-docs'
     }
     title="Built-in Components"
     href="/docs/docs-theme/built-ins"
-  ></Card>
+  />
 </Cards>

docs/pages/docs/docs-theme/built-ins.mdx

@@ -29,17 +29,11 @@ The Docs Theme includes a couple of built-in components that you can use to bett
     icon={
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        strokeWidth={1.5}
-        stroke="currentColor"
-        className="h-6 w-6"
+        fill="currentColor"
+        stroke="none"
+        viewBox="-1 0 19 19"
       >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122"
-        />
+        <path d="M16.417 9.6A7.917 7.917 0 1 1 8.5 1.683 7.917 7.917 0 0 1 16.417 9.6zM9.666 6.508H8.248L6.09 8.09l.806 1.103 1.222-.945v4.816h1.547z" />
       </svg>
     }
     title="Steps"

examples/blog/next.config.mjs

@@ -9,5 +9,6 @@ const withNextra = nextra({
 })
 
 export default withNextra({
-  reactStrictMode: true
+  reactStrictMode: true,
+  cleanDistDir: true
 })

packages/nextra-theme-blog/tailwind.config.js

@@ -1,21 +1,13 @@
 const colors = require('tailwindcss/colors')
+const docsConfig = require('../nextra-theme-docs/tailwind.config')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  prefix: 'nx-',
-  content: ['./src/**/*.{js,tsx,jsx}', '../nextra/src/components/*.tsx'],
+  prefix: docsConfig.prefix,
+  content: docsConfig.content,
   theme: {
     colors: {
-      transparent: 'transparent',
-      current: 'currentColor',
-      black: '#000',
-      white: '#fff',
-      gray: colors.gray,
-      slate: colors.slate,
-      neutral: colors.neutral,
-      red: colors.red,
-      orange: colors.orange,
-      yellow: colors.yellow,
+      ...docsConfig.theme.colors,
       primary: colors.blue
     },
     extend: {
@@ -58,5 +50,5 @@ module.exports = {
     }
   },
   plugins: [require('@tailwindcss/typography')],
-  darkMode: ['class', 'html[class~="dark"]']
+  darkMode: docsConfig.darkMode
 }

packages/nextra/src/components/button.tsx

@@ -1,18 +1,19 @@
 import type { ComponentProps, ReactElement } from 'react'
+import cn from 'clsx'
 
 export const Button = ({
   children,
-  className = '',
+  className,
   ...props
 }: ComponentProps<'button'>): ReactElement => {
   return (
     <button
-      className={[
+      className={cn(
         'nextra-button nx-transition-all active:nx-opacity-50',
         'nx-bg-primary-700/5 nx-border nx-border-black/5 nx-text-gray-600 hover:nx-text-gray-900 nx-rounded-md nx-p-1.5',
         'dark:nx-bg-primary-300/10 dark:nx-border-white/10 dark:nx-text-gray-400 dark:hover:nx-text-gray-50',
         className
-      ].join(' ')}
+      )}
       {...props}
     >
       {children}

packages/nextra/src/components/code.tsx

@@ -1,19 +1,20 @@
 import type { ComponentProps, ReactElement } from 'react'
+import cn from 'clsx'
 
 export const Code = ({
   children,
-  className = '',
+  className,
   ...props
 }: ComponentProps<'code'>): ReactElement => {
   const hasLineNumbers = 'data-line-numbers' in props
   return (
     <code
-      className={[
+      className={cn(
         'nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em]',
         'dark:nx-border-white/10 dark:nx-bg-white/10',
-        hasLineNumbers ? '[counter-reset:line]' : '',
+        hasLineNumbers && '[counter-reset:line]',
         className
-      ].join(' ')}
+      )}
       // always show code blocks in ltr
       dir="ltr"
       {...props}

packages/nextra/src/components/pre.tsx

@@ -3,10 +3,11 @@ import { useCallback, useRef } from 'react'
 import { CopyToClipboard } from './copy-to-clipboard'
 import { Button } from './button'
 import { WordWrapIcon } from '../icons'
+import cn from 'clsx'
 
 export const Pre = ({
   children,
-  className = '',
+  className,
   hasCopyCode,
   filename,
   ...props
@@ -34,23 +35,23 @@ export const Pre = ({
         </div>
       )}
       <pre
-        className={[
+        className={cn(
           '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 nx-text-[.9em]',
           '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
-        ].join(' ')}
+        )}
         ref={preRef}
         {...props}
       >
         {children}
       </pre>
       <div
-        className={[
+        className={cn(
           'nx-opacity-0 nx-transition [div:hover>&]:nx-opacity-100 focus-within:nx-opacity-100',
           'nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0',
           filename ? 'nx-top-8' : 'nx-top-0'
-        ].join(' ')}
+        )}
       >
         <Button
           onClick={toggleWordWrap}