@portosaur/theme 0.5.1 → 0.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portosaur/theme",
-  "version": "0.5.1",
+  "version": "0.6.3",
   "description": "Theme components for Portosaur - React components, static assets etc.",
   "license": "GPL-3.0-only",
   "author": "soymadip",
@@ -34,18 +34,24 @@
     "@easyops-cn/docusaurus-search-local": "^0.55.1",
     "@fontsource-variable/lexend": "^5.2.11",
     "@fontsource/alata": "^5.2.8",
-    "@portosaur/core": "^0.5.1",
+    "@portosaur/core": "^0.6.3",
     "chalk": "^5.6.2",
     "clsx": "^2.1.1",
     "favicons": "^7.2.0",
     "framer-motion": "^12.38.0",
     "prism-react-renderer": "^2.4.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "react-icons": "^5.6.0",
     "react-pdf": "^10.4.1",
     "react-rnd": "^10.5.3",
     "react-slick": "^0.31.0",
     "slick-carousel": "^1.8.1"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }

package/src/plugins/theme.mjs

@@ -4,12 +4,34 @@ import { fileURLToPath } from "url";
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export default function themePlugin(_context, options) {
+  const themeDir = options.themeDir || path.resolve(__dirname, "../../theme");
+
   return {
     name: "portosaur-theme",
 
     // Registers Portosaur component overrides (swizzle targets).
+    // NOTE: Use @theme-init (not @theme-original) when importing the base
+    // Docusaurus component inside these overrides. @theme-original is
+    // overwritten by the alias system for plugin themes; @theme-init is not.
     getThemePath() {
-      return options.themeDir || path.resolve(__dirname, "../../theme");
+      return themeDir;
+    },
+
+    // Adds the JSX/Babel loader for .jsx files in the theme directory.
+    // Required when the theme resolves outside node_modules (e.g. bun-link
+    // in development), where Docusaurus's default JS rule may not cover it.
+    configureWebpack(_config, isServer, utils) {
+      return {
+        module: {
+          rules: [
+            {
+              test: /\.jsx?$/,
+              include: [themeDir],
+              use: [utils.getJSLoader({ isServer })],
+            },
+          ],
+        },
+      };
     },
   };
 }

package/theme/MDXComponents.jsx

@@ -1,14 +1,14 @@
-import MDXComponents from "@theme-original/MDXComponents";
+import MDXComponents from "@theme-init/MDXComponents";
 import Details from "@theme/Details";
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
-import { Pv, SrcPv } from "./components/Preview/index.jsx";
-import Tooltip from "./components/Tooltip/index.jsx";
-import TopicList from "./components/TopicList/index.jsx";
-import Indent from "./components/Indent/index.jsx";
+import { Pv, SrcPv } from "./components/Preview";
+import Tooltip from "./components/Tooltip";
+import TopicList from "./components/TopicList";
+import Indent from "./components/Indent";
 
 // Make useful Custom Components available by default
-const components = {
+export default {
   ...MDXComponents,
   Pv,
   SrcPv,
@@ -19,5 +19,3 @@ const components = {
   Tooltip,
   Indent,
 };
-
-export default components;

package/theme/components/Preview/state/index.jsx

@@ -1,9 +1,4 @@
-import React, {
-  createContext,
-  useContext,
-  useReducer,
-  useCallback,
-} from "react";
+import { createContext, useContext, useReducer, useCallback } from "react";
 
 const PreviewContext = createContext(null);
 const DEFAULT_SIZE = { width: 720, height: 400 };

package/theme/components/TopicList/index.jsx

@@ -19,6 +19,10 @@ export default function TopicList({
     // Fallback if not on a category page
   }
 
+  if (!items || items.length === 0) {
+    return null;
+  }
+
   return (
     <>
       <br />