@portosaur/theme 0.1.4 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portosaur/theme",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Theme components for Portosaur - React components, static assets etc.",
   "license": "GPL-3.0-only",
   "author": "soymadip",
@@ -30,12 +30,19 @@
     "@docusaurus/core": "^3.10.1",
     "@docusaurus/plugin-pwa": "^3.10.1",
     "@docusaurus/preset-classic": "^3.10.1",
-    "@portosaur/core": "^0.1.4",
+    "@easyops-cn/docusaurus-search-local": "^0.55.1",
+    "@portosaur/core": "^0.2.0",
     "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-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"
   }
 }

package/src/plugins/theme.mjs

@@ -6,6 +6,8 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 export default function themePlugin(_context, options) {
   return {
     name: "portosaur-theme",
+
+    // Registers Portosaur component overrides (swizzle targets).
     getThemePath() {
       return options.themeDir || path.resolve(__dirname, "../../theme");
     },

package/theme/DocCategoryGeneratedIndexPage/index.jsx

@@ -1,15 +1,9 @@
 import DocCategoryGeneratedIndexPage from "@theme-original/DocCategoryGeneratedIndexPage";
-import NoteCards from "@porto/theme/components/NoteIndex/index.js";
+import NoteCards from "@portosaur/theme/theme/components/NoteIndex/index.jsx";
+
 export default function DocCategoryGeneratedIndexPageWrapper(props) {
   if (props.categoryGeneratedIndex?.title === "Notes") {
-    return jsxDEV_7x81h0kn(NoteCards, {}, undefined, false, undefined, this);
+    return <NoteCards />;
   }
-  return jsxDEV_7x81h0kn(
-    DocCategoryGeneratedIndexPage,
-    { ...props },
-    undefined,
-    false,
-    undefined,
-    this,
-  );
+  return <DocCategoryGeneratedIndexPage {...props} />;
 }

package/theme/MDXComponents.jsx

@@ -1,4 +1,4 @@
-import MDXComponents from "@docusaurus/theme-classic/lib/theme/MDXComponents";
+import MDXComponents from "@theme-original/MDXComponents";
 import Details from "@theme/Details";
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";

package/theme/Root.jsx

@@ -1,5 +1,5 @@
 import BrowserOnly from "@docusaurus/BrowserOnly";
-import { PreviewProvider, ViewerWindow } from "./components/Preview/index.js";
+import { PreviewProvider, ViewerWindow } from "./components/Preview/index.jsx";
 
 export default function Root({ children }) {
   return (

package/theme/components/AboutSection/index.jsx

@@ -1,264 +1,104 @@
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useScrollReveal from "../../hooks/useScrollReveal";
 import { FaDownload } from "react-icons/fa";
-import { Pv } from "../Preview/index.js";
+import { Pv } from "../Preview/index.jsx";
 import useBrokenLinks from "@docusaurus/useBrokenLinks";
 import styles from "./styles.module.css";
+
 export default function AboutSection({ id, className }) {
   const { siteConfig } = useDocusaurusContext();
   const brokenLinks = useBrokenLinks();
+
   if (id) {
     brokenLinks.collectAnchor(id);
   }
+
   const { customFields } = siteConfig;
-  const aboutMe = customFields.aboutMe || {};
-  if (aboutMe.enable === false) return null;
+  const aboutMe = customFields.aboutSection || {};
+
+  if (aboutMe.enable === false) {
+    return null;
+  }
+
   const [sectionRef, isVisible] = useScrollReveal();
-  return jsxDEV_7x81h0kn(
-    "div",
-    {
-      id,
-      ref: sectionRef,
-      className: `${styles.aboutSection} ${isVisible ? "is-visible" : ""} ${className || ""}`,
-      role: "region",
-      "aria-label": "About me section",
-      children: jsxDEV_7x81h0kn(
-        "div",
-        {
-          className: styles.aboutContainer,
-          children: [
-            jsxDEV_7x81h0kn(
-              "div",
-              {
-                className: styles.aboutHeader,
-                children: jsxDEV_7x81h0kn(
-                  "h2",
-                  {
-                    className: styles.aboutHeading,
-                    children: aboutMe.heading || "About Me",
-                  },
-                  undefined,
-                  false,
-                  undefined,
-                  this,
-                ),
-              },
-              undefined,
-              false,
-              undefined,
-              this,
-            ),
-            jsxDEV_7x81h0kn(
-              "div",
-              {
-                className: styles.aboutContent,
-                children: jsxDEV_7x81h0kn(
-                  "div",
-                  {
-                    className: styles.aboutCard,
-                    children: [
-                      jsxDEV_7x81h0kn(
-                        "div",
-                        {
-                          className: styles.bioImageContainer,
-                          children: [
-                            aboutMe.image &&
-                              jsxDEV_7x81h0kn(
-                                "div",
-                                {
-                                  className: styles.imageWrapper,
-                                  children: jsxDEV_7x81h0kn(
-                                    "img",
-                                    {
-                                      src: aboutMe.image,
-                                      alt: aboutMe.name || "About Me",
-                                      className: styles.aboutImage,
-                                    },
-                                    undefined,
-                                    false,
-                                    undefined,
-                                    this,
-                                  ),
-                                },
-                                undefined,
-                                false,
-                                undefined,
-                                this,
-                              ),
-                            aboutMe.resume &&
-                              jsxDEV_7x81h0kn(
-                                "div",
-                                {
-                                  className: styles.resumeContainer,
-                                  children: jsxDEV_7x81h0kn(
-                                    Pv,
-                                    {
-                                      href: aboutMe.resume,
-                                      title: "My Resume",
-                                      children: jsxDEV_7x81h0kn(
-                                        "span",
-                                        {
-                                          className: styles.resumeButton,
-                                          children: [
-                                            jsxDEV_7x81h0kn(
-                                              FaDownload,
-                                              {},
-                                              undefined,
-                                              false,
-                                              undefined,
-                                              this,
-                                            ),
-                                            " View Resume",
-                                          ],
-                                        },
-                                        undefined,
-                                        true,
-                                        undefined,
-                                        this,
-                                      ),
-                                    },
-                                    undefined,
-                                    false,
-                                    undefined,
-                                    this,
-                                  ),
-                                },
-                                undefined,
-                                false,
-                                undefined,
-                                this,
-                              ),
-                          ],
-                        },
-                        undefined,
-                        true,
-                        undefined,
-                        this,
-                      ),
-                      jsxDEV_7x81h0kn(
-                        "div",
-                        {
-                          className: styles.bioTextContainer,
-                          children: [
-                            jsxDEV_7x81h0kn(
-                              "div",
-                              {
-                                className: styles.bioText,
-                                children: Array.isArray(aboutMe.bio)
-                                  ? aboutMe.bio.map((paragraph, index) =>
-                                      jsxDEV_7x81h0kn(
-                                        "p",
-                                        {
-                                          className: styles.aboutParagraph,
-                                          children: paragraph,
-                                        },
-                                        index,
-                                        false,
-                                        undefined,
-                                        this,
-                                      ),
-                                    )
-                                  : jsxDEV_7x81h0kn(
-                                      "p",
-                                      {
-                                        className: styles.aboutParagraph,
-                                        children: aboutMe.bio,
-                                      },
-                                      undefined,
-                                      false,
-                                      undefined,
-                                      this,
-                                    ),
-                              },
-                              undefined,
-                              false,
-                              undefined,
-                              this,
-                            ),
-                            aboutMe.skills &&
-                              aboutMe.skills.length > 0 &&
-                              jsxDEV_7x81h0kn(
-                                "div",
-                                {
-                                  className: styles.skillsContainer,
-                                  children: [
-                                    jsxDEV_7x81h0kn(
-                                      "h3",
-                                      {
-                                        className: styles.skillsTitle,
-                                        children:
-                                          aboutMe.skillsHeading || "My Skills",
-                                      },
-                                      undefined,
-                                      false,
-                                      undefined,
-                                      this,
-                                    ),
-                                    jsxDEV_7x81h0kn(
-                                      "div",
-                                      {
-                                        className: styles.skillsGrid,
-                                        children: aboutMe.skills.map(
-                                          (skill, index) =>
-                                            jsxDEV_7x81h0kn(
-                                              "span",
-                                              {
-                                                className: styles.skillTag,
-                                                style: {
-                                                  animationDelay: `${index * 0.05}s`,
-                                                },
-                                                children: skill,
-                                              },
-                                              index,
-                                              false,
-                                              undefined,
-                                              this,
-                                            ),
-                                        ),
-                                      },
-                                      undefined,
-                                      false,
-                                      undefined,
-                                      this,
-                                    ),
-                                  ],
-                                },
-                                undefined,
-                                true,
-                                undefined,
-                                this,
-                              ),
-                          ],
-                        },
-                        undefined,
-                        true,
-                        undefined,
-                        this,
-                      ),
-                    ],
-                  },
-                  undefined,
-                  true,
-                  undefined,
-                  this,
-                ),
-              },
-              undefined,
-              false,
-              undefined,
-              this,
-            ),
-          ],
-        },
-        undefined,
-        true,
-        undefined,
-        this,
-      ),
-    },
-    undefined,
-    false,
-    undefined,
-    this,
+
+  return (
+    <div
+      id={id}
+      ref={sectionRef}
+      className={`${styles.aboutSection} ${isVisible ? "is-visible" : ""} ${className || ""}`}
+      role="region"
+      aria-label="About me section"
+    >
+      <div className={styles.aboutContainer}>
+        {/* Heading */}
+        <div className={styles.aboutHeader}>
+          <h2 className={styles.aboutHeading}>
+            {aboutMe.heading || "About Me"}
+          </h2>
+        </div>
+
+        {/* Content */}
+        <div className={styles.aboutContent}>
+          <div className={styles.aboutCard}>
+            {/* Image + Resume */}
+            <div className={styles.bioImageContainer}>
+              {aboutMe.image && (
+                <div className={styles.imageWrapper}>
+                  <img
+                    src={aboutMe.image}
+                    alt={aboutMe.name || "About Me"}
+                    className={styles.aboutImage}
+                  />
+                </div>
+              )}
+              {aboutMe.resume && (
+                <div className={styles.resumeContainer}>
+                  <Pv href={aboutMe.resume} title="My Resume">
+                    <span className={styles.resumeButton}>
+                      <FaDownload /> View Resume
+                    </span>
+                  </Pv>
+                </div>
+              )}
+            </div>
+
+            {/* Bio + Skills */}
+            <div className={styles.bioTextContainer}>
+              <div className={styles.bioText}>
+                {Array.isArray(aboutMe.bio) ? (
+                  aboutMe.bio.map((paragraph, index) => (
+                    <p key={index} className={styles.aboutParagraph}>
+                      {paragraph}
+                    </p>
+                  ))
+                ) : (
+                  <p className={styles.aboutParagraph}>{aboutMe.bio}</p>
+                )}
+              </div>
+
+              {aboutMe.skills && aboutMe.skills.length > 0 && (
+                <div className={styles.skillsContainer}>
+                  <h3 className={styles.skillsTitle}>
+                    {aboutMe.skillsHeading || "My Skills"}
+                  </h3>
+                  <div className={styles.skillsGrid}>
+                    {aboutMe.skills.map((skill, index) => (
+                      <span
+                        key={index}
+                        className={styles.skillTag}
+                        style={{ animationDelay: `${index * 0.05}s` }}
+                      >
+                        {skill}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 }