fix: mdx theme is missing (#642)

* fix: use pnpm inject close #637 format code and update dependencies * fix: import error * chore: remove useless npm script * Update packages/nextra-theme-blog/package.json Co-authored-by: Dimitri POSTOLOV <en3m@ya.ru> * Update packages/nextra-theme-docs/package.json Co-authored-by: Dimitri POSTOLOV <en3m@ya.ru> Co-authored-by: Dimitri POSTOLOV <en3m@ya.ru>
shuding · Aug 7, 2022 · 43409ad · 43409ad
1 parent da2bea7
commit 43409ad
Show file tree

Hide file tree

Showing 22 changed files with 440 additions and 339 deletions.
diff --git a/.changeset/violet-bags-clean.md b/.changeset/violet-bags-clean.md
@@ -0,0 +1,6 @@
+---
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+fix: mdx theme is missing
diff --git a/examples/blog/next.config.mjs b/examples/blog/next.config.mjs
@@ -7,21 +7,5 @@ const withNextra = nextra({
 })
 
 export default withNextra({
-  reactStrictMode: true,
-  webpack(config) {
-    // To make pnpm workspace and themes work in this monorepo, we need to
-    // disable webpack's symlinks feature here. Otherwise the symlink
-    // `./node_modules/nextra-theme-docs/style.css` will be resolved as
-    // `../../packages/nextra-theme-docs/style.css`, which doesn't contain
-    // `node_modules` in its full path and webpack can't pick the correct loader
-    // for it due to:
-    // https://github.com/vercel/next.js/blob/213c42f446874d29d07fa2cca6e6b11fc9c3b711/packages/next/build/webpack/config/blocks/css/index.ts#L305
-    // This is not needed for normal usage, only a workaround for this
-    // development repository.
-    config.resolve = {
-      ...config.resolve,
-      symlinks: false
-    }
-    return config
-  }
+  reactStrictMode: true
 })
diff --git a/examples/blog/package.json b/examples/blog/package.json
@@ -17,5 +17,13 @@
     "next": ">=12",
     "nextra": "workspace:*",
     "nextra-theme-blog": "workspace:*"
+  },
+  "dependenciesMeta": {
+    "nextra": {
+      "injected": true
+    },
+    "nextra-theme-blog": {
+      "injected": true
+    }
   }
 }
diff --git a/examples/docs/next.config.js b/examples/docs/next.config.js
@@ -8,21 +8,5 @@ const withNextra = require('nextra')({
 })
 
 module.exports = withNextra({
-  reactStrictMode: true,
-  webpack(config) {
-    // To make pnpm workspace and themes work in this monorepo, we need to
-    // disable webpack's symlinks feature here. Otherwise the symlink
-    // `./node_modules/nextra-theme-docs/style.css` will be resolved as
-    // `../../packages/nextra-theme-docs/style.css`, which doesn't contain
-    // `node_modules` in its full path and webpack can't pick the correct loader
-    // for it due to:
-    // https://github.com/vercel/next.js/blob/213c42f446874d29d07fa2cca6e6b11fc9c3b711/packages/next/build/webpack/config/blocks/css/index.ts#L305
-    // This is not needed for normal usage, only a workaround for this
-    // development repository.
-    config.resolve = {
-      ...config.resolve,
-      symlinks: false
-    }
-    return config
-  }
+  reactStrictMode: true
 })
diff --git a/examples/docs/package.json b/examples/docs/package.json
@@ -17,5 +17,13 @@
     "next": ">=12",
     "nextra": "workspace:*",
     "nextra-theme-docs": "workspace:*"
+  },
+  "dependenciesMeta": {
+    "nextra": {
+      "injected": true
+    },
+    "nextra-theme-docs": {
+      "injected": true
+    }
   }
 }
diff --git a/examples/swr-site/next.config.js b/examples/swr-site/next.config.js
@@ -62,22 +62,6 @@ module.exports = withNextra({
     ];
   },
   reactStrictMode: true,
-  webpack(config) {
-    // To make pnpm workspace and themes work in this monorepo, we need to
-    // disable webpack's symlinks feature here. Otherwise the symlink
-    // `./node_modules/nextra-theme-docs/style.css` will be resolved as
-    // `../../packages/nextra-theme-docs/style.css`, which doesn't contain
-    // `node_modules` in its full path and webpack can't pick the correct loader
-    // for it due to:
-    // https://github.com/vercel/next.js/blob/213c42f446874d29d07fa2cca6e6b11fc9c3b711/packages/next/build/webpack/config/blocks/css/index.ts#L305
-    // This is not needed for normal usage, only a workaround for this
-    // development repository.
-    config.resolve = {
-      ...config.resolve,
-      symlinks: false,
-    };
-    return config;
-  },
   experimental: {
     newNextLinkBehavior: true,
   },

diff --git a/examples/swr-site/package.json b/examples/swr-site/package.json
@@ -23,6 +23,14 @@
     "nextra-theme-docs": "workspace:*",
     "react-intersection-observer": "^8.26.2"
   },
+  "dependenciesMeta": {
+    "nextra": {
+      "injected": true
+    },
+    "nextra-theme-docs": {
+      "injected": true
+    }
+  },
   "devDependencies": {
     "autoprefixer": "*",
     "postcss": "*",

diff --git a/package.json b/package.json
@@ -19,15 +19,14 @@
     "format": "turbo run format"
   },
   "devDependencies": {
-    "@typescript-eslint/parser": "^5.31.0",
-    "eslint": "^8.20.0",
-    "@changesets/cli": "^2.24.1",
+    "@changesets/cli": "^2.24.2",
     "@edge-runtime/vm": "1.1.0-beta.23",
-    "postcss-import": "^14.1.0",
+    "@typescript-eslint/parser": "^5.32.0",
+    "eslint": "^8.21.0",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "rimraf": "^3.0.2",
-    "turbo": "^1.4.0",
+    "turbo": "^1.4.2",
     "typescript": "^4.7.4"
   },
   "prettier": {
@@ -42,24 +41,25 @@
   ],
   "pnpm": {
     "overrides": {
-      "vitest": "^0.19.1",
+      "vitest": "^0.21.0",
       "react": "^18.2.0",
       "react-dom": "^18.2.0",
       "@mdx-js/react": "^2.1.2",
       "next-themes": "^0.2.0-beta.2",
-      "next": "^12.2.3",
+      "next": "^12.2.4",
       "@types/react": "^18.0.15",
       "@types/react-dom": "^18.0.6",
       "postcss": "^8.4.14",
       "postcss-cli": "^8.3.1",
-      "autoprefixer": "^10.4.7",
+      "autoprefixer": "^10.4.8",
       "cssnano": "^5.1.12",
-      "tailwindcss": "^3.1.6",
+      "tailwindcss": "^3.1.8",
       "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
       "@tailwindcss/typography": "^0.5.4",
-      "tsup": "^6.2.0",
+      "tsup": "^6.2.1",
       "concurrently": "^7.3.0",
-      "cross-env": "^7.0.3"
+      "cross-env": "^7.0.3",
+      "postcss-import": "^14.1.0"
     }
   }
 }
diff --git a/packages/nextra-theme-blog/package.json b/packages/nextra-theme-blog/package.json
@@ -32,12 +32,13 @@
   "scripts": {
     "build": "tsup",
     "build:tailwind": "cross-env NODE_ENV=production pnpm postcss src/styles.css -o style.css --verbose",
+    "build:all": "pnpm build && pnpm run build:tailwind",
     "types": "tsup --dts-only",
     "types:check": "tsc --noEmit",
     "dev": "concurrently \"pnpm dev:layout\" \"pnpm dev:tailwind\"",
     "dev:layout": "tsup --watch",
     "dev:tailwind": "cross-env TAILWIND_MODE=watch pnpm postcss src/styles.css -o style.css --watch",
-    "prepublishOnly": "pnpm build",
+    "prepublishOnly": "pnpm build:all",
     "clean": "rimraf ./dist ./style.css",
     "test": "vitest run",
     "format": "prettier --ignore-path ../../.gitignore --write --list-different ."
@@ -58,25 +59,26 @@
     }
   },
   "devDependencies": {
-    "@tailwindcss/nesting": "*",
-    "@tailwindcss/typography": "*",
-    "@types/react": "*",
-    "@types/react-dom": "*",
-    "autoprefixer": "*",
-    "concurrently": "*",
-    "cross-env": "*",
-    "cssnano": "*",
+    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
+    "@tailwindcss/typography": "^0.5.4",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "autoprefixer": "^10.4.8",
+    "concurrently": "^7.3.0",
+    "cross-env": "^7.0.3",
+    "cssnano": "^5.1.12",
     "cssnano-preset-advanced": "^5.3.8",
-    "next": ">=12",
+    "next": "^12.2.4",
     "nextra": "workspace:*",
-    "postcss": "*",
-    "postcss-cli": "*",
-    "react": "*",
+    "postcss": "^8.4.14",
+    "postcss-cli": "^8.3.1",
+    "react": "^18.2.0",
     "react-cusdis": "^2.1.3",
-    "react-dom": "*",
-    "tailwindcss": "*",
-    "tsup": "*",
-    "vitest": "*"
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.1.8",
+    "tsup": "^6.2.1",
+    "vitest": "^0.21.0",
+    "postcss-import": "^14.1.0"
   },
   "prettier": {
     "semi": false,

diff --git a/packages/nextra-theme-blog/src/blog-context.tsx b/packages/nextra-theme-blog/src/blog-context.tsx
@@ -1,4 +1,9 @@
-import React, { ReactElement, useContext, createContext, ReactNode } from 'react'
+import React, {
+  ReactElement,
+  useContext,
+  createContext,
+  ReactNode
+} from 'react'
 import { LayoutProps } from './types'
 import { isValidDate } from './utils/date'
 
@@ -12,7 +17,9 @@ export const BlogProvider = ({
   const { date } = opts.meta
 
   if (date && !isValidDate(date)) {
-    throw new Error(`Invalid date "${date}". Provide date in "YYYY/M/D", "YYYY/M/D H:m", "YYYY-MM-DD", "[YYYY-MM-DD]T[HH:mm]" or "[YYYY-MM-DD]T[HH:mm:ss.SSS]Z" format.`)
+    throw new Error(
+      `Invalid date "${date}". Provide date in "YYYY/M/D", "YYYY/M/D H:m", "YYYY-MM-DD", "[YYYY-MM-DD]T[HH:mm]" or "[YYYY-MM-DD]T[HH:mm:ss.SSS]Z" format.`
+    )
   }
   return (
     <BlogContext.Provider value={{ config, opts }}>

diff --git a/packages/nextra-theme-blog/src/mdx-theme.tsx b/packages/nextra-theme-blog/src/mdx-theme.tsx
@@ -42,9 +42,7 @@ const createHeaderLink =
     return (
       <Tag className={`subheading-${Tag}`} {...props}>
         <span className="subheading-anchor -mt-8" id={id} />
-        <a href={`#${id}`}>
-          {children}
-        </a>
+        <a href={`#${id}`}>{children}</a>
       </Tag>
     )
   }

diff --git a/packages/nextra-theme-blog/src/posts-layout.tsx b/packages/nextra-theme-blog/src/posts-layout.tsx
@@ -48,10 +48,7 @@ export const PostsLayout = ({ children }: { children: ReactNode }) => {
           </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>
         )}

diff --git a/packages/nextra-theme-blog/src/utils/collect.ts b/packages/nextra-theme-blog/src/utils/collect.ts
@@ -9,10 +9,7 @@ const isNav = (page: PageMapItem) => {
 const isPost = (page: PageMapItem) => {
   if (page.children) return false
   if (page.name.startsWith('_')) return false
-  return (
-    !page.frontMatter?.type ||
-    page.frontMatter.type === 'post'
-  )
+  return !page.frontMatter?.type || page.frontMatter.type === 'post'
 }
 
 export const collectPostsAndNavs = ({ opts }: LayoutProps) => {

diff --git a/packages/nextra-theme-blog/src/utils/date.ts b/packages/nextra-theme-blog/src/utils/date.ts
@@ -12,4 +12,5 @@ export const sortDate = (a: PageMapItem, b: PageMapItem): number => {
 const DATE_REGEX = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2})?(:\d{2}\.\d{3}Z)?$/
 const DATE_REGEX_WITH_SLASH = /^\d{4}\/\d{1,2}\/\d{1,2}( \d{1,2}:\d{1,2})?$/
 
-export const isValidDate = (date: string): boolean => DATE_REGEX.test(date) || DATE_REGEX_WITH_SLASH.test(date)
+export const isValidDate = (date: string): boolean =>
+  DATE_REGEX.test(date) || DATE_REGEX_WITH_SLASH.test(date)
diff --git a/packages/nextra-theme-blog/tsup.config.ts b/packages/nextra-theme-blog/tsup.config.ts
@@ -7,7 +7,7 @@ function outExtension() {
 }
 
 export default defineConfig({
-  entry: ['src/index.tsx', "src/cusdis.tsx"],
+  entry: ['src/index.tsx', 'src/cusdis.tsx'],
   format: 'esm',
   dts: true,
   name: 'nextra-theme-blog',

diff --git a/packages/nextra-theme-docs/package.json b/packages/nextra-theme-docs/package.json
@@ -55,12 +55,13 @@
   "scripts": {
     "dev": "concurrently \"pnpm dev:layout\" \"pnpm dev:tailwind\"",
     "build": "tsup",
+    "build:all": "pnpm build && pnpm run build:tailwind",
     "build:tailwind": "cross-env NODE_ENV=production pnpm postcss src/styles.css -o style.css --verbose",
     "types": "tsup --dts-only",
     "types:check": "tsc --noEmit",
     "dev:layout": "tsup --watch",
     "dev:tailwind": "cross-env TAILWIND_MODE=watch pnpm postcss src/styles.css -o style.css --watch",
-    "prepublishOnly": "pnpm build",
+    "prepublishOnly": "pnpm build:all",
     "test": "vitest --run",
     "clean": "rimraf ./dist ./style.css",
     "format": "prettier --ignore-path ../../.gitignore --write --list-different ."
@@ -86,25 +87,26 @@
     "react-dom": ">=16.13.1"
   },
   "devDependencies": {
-    "@tailwindcss/nesting": "*",
-    "@tailwindcss/typography": "*",
+    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
+    "@tailwindcss/typography": "^0.5.4",
     "@types/flexsearch": "^0.7.3",
-    "@types/react": "*",
-    "@types/react-dom": "*",
-    "autoprefixer": "*",
-    "concurrently": "*",
-    "cross-env": "*",
-    "cssnano": "*",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "autoprefixer": "^10.4.8",
+    "concurrently": "^7.3.0",
+    "cross-env": "^7.0.3",
+    "cssnano": "^5.1.12",
     "cssnano-preset-advanced": "^5.3.8",
-    "next": ">=12",
+    "next": "^12.2.4",
     "nextra": "workspace:*",
-    "postcss": "*",
-    "postcss-cli": "*",
-    "react": "*",
-    "react-dom": "*",
-    "tailwindcss": "*",
-    "tsup": "*",
-    "vitest": "*"
+    "postcss": "^8.4.14",
+    "postcss-cli": "^8.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.1.8",
+    "tsup": "^6.2.1",
+    "vitest": "^0.21.0",
+    "postcss-import": "^14.1.0"
   },
   "prettier": {
     "semi": false,

diff --git a/packages/nextra-theme-docs/src/breadcrumb.tsx b/packages/nextra-theme-docs/src/breadcrumb.tsx
@@ -23,14 +23,12 @@ export default function Breadcrumb({
               <ArrowRightIcon width={14} className="mx-1 select-none" />
             ) : null}
             <div
-              className={cn(
-                'transition-colors whitespace-nowrap',
-                {
-                  'active text-gray-600 dark:text-gray-400': isActive,
-                  'min-w-[24px] overflow-hidden text-ellipsis': !isActive,
-                  'hover:text-gray-900 dark:hover:text-gray-200': isLink && !isActive
-                }
-              )}
+              className={cn('transition-colors whitespace-nowrap', {
+                'active text-gray-600 dark:text-gray-400': isActive,
+                'min-w-[24px] overflow-hidden text-ellipsis': !isActive,
+                'hover:text-gray-900 dark:hover:text-gray-200':
+                  isLink && !isActive
+              })}
               title={item.title}
             >
               {isLink && !isActive ? (