@portosaur/theme 0.1.0

package/theme/components/NoteIndex/index.jsx

@@ -0,0 +1,182 @@
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import { usePluginData } from "@docusaurus/useGlobalData";
+import Link from "@docusaurus/Link";
+import { FaBook, FaChevronRight } from "react-icons/fa";
+import Tooltip from "../Tooltip/index.js";
+import { iconMap } from "../../config/iconMappings.js";
+import DocCardList from "@theme/DocCardList";
+import styles from "./styles.module.css";
+function useNotes() {
+  const context = require.context(`@site/notes`, true, /index\.mdx?$|\.mdx?$/);
+  return context
+    .keys()
+    .filter((path) => {
+      if (path === "./index.md" || path === "./index.mdx") return false;
+      const pathParts = path.split("/");
+      const isTopLevelFile =
+        pathParts.length === 2 && !path.match(/index\.mdx?$/);
+      const isTopLevelDir =
+        pathParts.length === 3 && path.match(/index\.mdx?$/);
+      return isTopLevelFile || isTopLevelDir;
+    })
+    .map((path) => {
+      const { frontMatter } = context(path);
+      const pathParts = path.split("/");
+      const isTopLevelFile = pathParts.length === 2;
+      const fileSlug = isTopLevelFile
+        ? path.replace("./", "").replace(/\.mdx?$/, "")
+        : pathParts[1];
+      const slug = frontMatter.slug || frontMatter.id || fileSlug;
+      const rawTitle = frontMatter.title || frontMatter.language || fileSlug;
+      const title = rawTitle.charAt(0).toUpperCase() + rawTitle.slice(1);
+      const language = frontMatter.language
+        ? frontMatter.language
+            .toLowerCase()
+            .replace(/ /g, "")
+            .replace(/[\s-]/g, "")
+        : slug.toLowerCase() || title.toLowerCase();
+      return {
+        title,
+        language,
+        slug,
+        desc: frontMatter.desc || "",
+        position: frontMatter.sidebar_position || 999,
+      };
+    })
+    .sort((a, b) => a.position - b.position);
+}
+function NoteCard({ title, language, slug, desc, index, docsBasePath }) {
+  const noteUrl = useBaseUrl(`${docsBasePath}/${slug}`);
+  const { icon: Icon = FaBook, color = "var(--ifm-color-primary)" } =
+    iconMap[language] || iconMap[title.toLowerCase()] || {};
+  const tooltipContent = desc ? desc : null;
+  const cardInner = jsxDEV_7x81h0kn(
+    Link,
+    {
+      to: noteUrl,
+      className: styles.noteCard,
+      style: { "--card-index": index, "--note-color": color },
+      "aria-label": `Read note: ${title}`,
+      children: [
+        jsxDEV_7x81h0kn(
+          "div",
+          {
+            className: styles.iconWrapper,
+            children: jsxDEV_7x81h0kn(
+              Icon,
+              { className: styles.noteIcon },
+              undefined,
+              false,
+              undefined,
+              this,
+            ),
+          },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+        jsxDEV_7x81h0kn(
+          "div",
+          {
+            className: styles.cardContent,
+            children: jsxDEV_7x81h0kn(
+              "h3",
+              { className: styles.noteTitle, children: title },
+              undefined,
+              false,
+              undefined,
+              this,
+            ),
+          },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+        jsxDEV_7x81h0kn(
+          FaChevronRight,
+          { className: styles.mobileChevron },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+      ],
+    },
+    undefined,
+    true,
+    undefined,
+    this,
+  );
+  return tooltipContent
+    ? jsxDEV_7x81h0kn(
+        Tooltip,
+        {
+          msg: tooltipContent,
+          position: "top",
+          underline: false,
+          gap: -8,
+          children: cardInner,
+        },
+        undefined,
+        false,
+        undefined,
+        this,
+      )
+    : cardInner;
+}
+export default function NoteCards() {
+  const notes = useNotes();
+  const { path: docsBasePath } = usePluginData(
+    "docusaurus-plugin-content-docs",
+  );
+  if (!notes.length) return null;
+  return jsxDEV_7x81h0kn(
+    "div",
+    {
+      className: styles.notesGrid,
+      role: "list",
+      children: notes.map((note, index) =>
+        jsxDEV_7x81h0kn(
+          NoteCard,
+          { ...note, index, docsBasePath },
+          note.slug,
+          false,
+          undefined,
+          this,
+        ),
+      ),
+    },
+    undefined,
+    false,
+    undefined,
+    this,
+  );
+}
+export function TopicList({
+  desc = "Click on the links below to explore the topics.",
+  style = { marginTop: "-2.5rem", marginBottom: "2.5rem", textAlign: "center" },
+}) {
+  return jsxDEV_7x81h0kn(
+    "div",
+    {
+      style,
+      children: [
+        jsxDEV_7x81h0kn(
+          "p",
+          { dangerouslySetInnerHTML: { __html: desc } },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+        jsxDEV_7x81h0kn(DocCardList, {}, undefined, false, undefined, this),
+      ],
+    },
+    undefined,
+    true,
+    undefined,
+    this,
+  );
+}

package/theme/components/NoteIndex/styles.module.css

@@ -0,0 +1,167 @@
+@keyframes noteFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.notesGrid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+  margin: 2rem 0;
+}
+
+.noteCard {
+  width: 200px;
+  min-height: 220px;
+  background-color: var(--ifm-card-background-color);
+  border-radius: var(--ifm-card-border-radius);
+  padding: 1.5rem 1rem;
+  text-decoration: none !important;
+  color: var(--ifm-font-color-base) !important;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  animation: noteFadeIn 0.5s ease-out forwards;
+  animation-delay: calc(0.1s + (var(--card-index, 0) * 0.05s));
+  opacity: 0;
+}
+
+.noteCard:hover {
+  transform: translateY(-8px) scale(1.03);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+}
+
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.5rem;
+}
+
+.noteIcon {
+  font-size: 3.5rem;
+  color: var(--note-color);
+  transition: transform 0.3s ease;
+}
+
+.noteCard:hover .noteIcon {
+  transform: scale(1.1);
+}
+
+.noteTitle {
+  margin: 0;
+  font-size: 1.6rem;
+  font-weight: 700;
+  line-height: 1.3;
+  text-align: center;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
+}
+
+/* Mobile List Style */
+.mobileChevron {
+  display: none;
+}
+
+@media (max-width: 480px) {
+  .notesGrid {
+    gap: 0.65rem;
+    margin: 0.2rem 0;
+    padding: 0 0.2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+  }
+
+  /* Force the Tooltip container to be full-width */
+  .notesGrid > span {
+    width: 100%;
+    display: flex !important;
+    justify-content: flex-start;
+  }
+
+  .noteCard {
+    width: 100%;
+    min-height: auto;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.95rem 1.2rem;
+    justify-content: flex-start;
+    background-color: var(--ifm-card-background-color);
+    border-radius: 12px;
+    box-shadow: var(--ifm-global-shadow-md);
+    gap: 1.2rem;
+  }
+
+  .noteCard:hover {
+    transform: none;
+    background-color: var(--ifm-hover-overlay);
+  }
+
+  .iconWrapper {
+    margin: 0;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .noteIcon {
+    font-size: 2.8rem;
+  }
+
+  .cardContent {
+    text-align: left;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .noteTitle {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--ifm-font-color-base);
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow-wrap: anywhere;
+    text-align: left;
+  }
+
+  .mobileChevron {
+    display: block;
+    margin-left: auto;
+    font-size: 1.1rem;
+    opacity: 0.7;
+    color: var(--ifm-color-primary);
+  }
+
+  .noteCard:active {
+    transform: scale(0.98);
+    background-color: var(--ifm-hover-overlay);
+  }
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .noteCard {
+    animation: none;
+    opacity: 1;
+    transition: none;
+  }
+}

package/theme/components/Preview/components/FeedbackStates.jsx

@@ -0,0 +1,200 @@
+import styles from "../styles.module.css";
+export function LoadingState() {
+  return jsxDEV_7x81h0kn(
+    "div",
+    {
+      className: styles.loading,
+      children: [
+        jsxDEV_7x81h0kn(
+          "div",
+          {
+            className: styles.loadingIcon,
+            children: jsxDEV_7x81h0kn(
+              "div",
+              { className: styles.spinner },
+              undefined,
+              false,
+              undefined,
+              this,
+            ),
+          },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+        jsxDEV_7x81h0kn(
+          "div",
+          {
+            className: styles.loadingText,
+            children: [
+              jsxDEV_7x81h0kn(
+                "p",
+                { children: "Preparing preview..." },
+                undefined,
+                false,
+                undefined,
+                this,
+              ),
+              jsxDEV_7x81h0kn(
+                "span",
+                { children: "Fetching content from source" },
+                undefined,
+                false,
+                undefined,
+                this,
+              ),
+            ],
+          },
+          undefined,
+          true,
+          undefined,
+          this,
+        ),
+      ],
+    },
+    undefined,
+    true,
+    undefined,
+    this,
+  );
+}
+export function ErrorState({ path, message, fileType, fileUrl, onRetry }) {
+  return jsxDEV_7x81h0kn(
+    "div",
+    {
+      className: styles.errorState,
+      children: [
+        jsxDEV_7x81h0kn(
+          "div",
+          { className: styles.errorIcon, children: "⚠️" },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+        jsxDEV_7x81h0kn(
+          "p",
+          {
+            children: [
+              "Could not load: ",
+              jsxDEV_7x81h0kn(
+                "code",
+                { children: path?.split("/").pop() },
+                undefined,
+                false,
+                undefined,
+                this,
+              ),
+            ],
+          },
+          undefined,
+          true,
+          undefined,
+          this,
+        ),
+        jsxDEV_7x81h0kn(
+          "p",
+          { className: styles.errorMsg, children: message },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+        jsxDEV_7x81h0kn(
+          "div",
+          {
+            className: styles.errorActions,
+            children: [
+              jsxDEV_7x81h0kn(
+                "button",
+                {
+                  onClick: onRetry,
+                  className: styles.retryButton,
+                  children: "Retry",
+                },
+                undefined,
+                false,
+                undefined,
+                this,
+              ),
+              fileType === "web" &&
+                jsxDEV_7x81h0kn(
+                  "a",
+                  {
+                    href: fileUrl,
+                    target: "_blank",
+                    rel: "noopener",
+                    className: styles.visitButton,
+                    children: "Visit Website",
+                  },
+                  undefined,
+                  false,
+                  undefined,
+                  this,
+                ),
+            ],
+          },
+          undefined,
+          true,
+          undefined,
+          this,
+        ),
+      ],
+    },
+    undefined,
+    true,
+    undefined,
+    this,
+  );
+}
+export function OfflineState({ onRetry }) {
+  return jsxDEV_7x81h0kn(
+    "div",
+    {
+      className: styles.errorState,
+      children: [
+        jsxDEV_7x81h0kn(
+          "div",
+          { className: styles.errorIcon, children: "\uD83D\uDCE1" },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+        jsxDEV_7x81h0kn(
+          "h3",
+          { children: "No Connection" },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+        jsxDEV_7x81h0kn(
+          "p",
+          { children: "This resource requires an active internet connection." },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+        jsxDEV_7x81h0kn(
+          "button",
+          {
+            onClick: onRetry,
+            className: styles.retryButton,
+            children: "Try Again",
+          },
+          undefined,
+          false,
+          undefined,
+          this,
+        ),
+      ],
+    },
+    undefined,
+    true,
+    undefined,
+    this,
+  );
+}

package/theme/components/Preview/components/FileTabs.jsx

@@ -0,0 +1,41 @@
+import React, { useRef, useEffect } from "react";
+import styles from "../styles.module.css";
+export default function FileTabs({ sources, activeIndex, onSelect }) {
+  const tabRefs = useRef([]);
+  useEffect(() => {
+    const el = tabRefs.current[activeIndex];
+    if (el) {
+      el.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+    }
+  }, [activeIndex]);
+  if (!sources || sources.length <= 1) return null;
+  return jsxDEV_7x81h0kn(
+    "div",
+    {
+      className: styles.tabs,
+      children: sources.map((src, i) =>
+        jsxDEV_7x81h0kn(
+          "button",
+          {
+            ref: (el) => (tabRefs.current[i] = el),
+            className: `${styles.tab} ${i === activeIndex ? styles.activeTab : ""}`,
+            onClick: () => onSelect(i),
+            children: src.label || src.path.split("/").pop(),
+          },
+          i,
+          false,
+          undefined,
+          this,
+        ),
+      ),
+    },
+    undefined,
+    false,
+    undefined,
+    this,
+  );
+}

package/theme/components/Preview/components/PreviewContent.jsx

@@ -0,0 +1,104 @@
+import React from "react";
+import styles from "../styles.module.css";
+import { LoadingState, ErrorState, OfflineState } from "./FeedbackStates";
+import ImageRenderer from "../renderers/ImageRenderer";
+import PdfRenderer from "../renderers/PdfRenderer";
+import WebRenderer from "../renderers/WebRenderer";
+import CodeRenderer from "../renderers/CodeRenderer";
+export default function PreviewContent({
+  currentFile,
+  fileType,
+  fileUrl,
+  isOnline,
+  fetchErrors,
+  textLoading,
+  textContent,
+  zoomLevel,
+  ext,
+  retryFetch,
+  setError,
+}) {
+  const path = currentFile?.path;
+  const isExternal = path?.startsWith("http") || path?.startsWith("//");
+  if (!isOnline && isExternal) {
+    return jsxDEV_7x81h0kn(
+      OfflineState,
+      { onRetry: retryFetch },
+      undefined,
+      false,
+      undefined,
+      this,
+    );
+  }
+  const errorMsg = fetchErrors?.[path];
+  if (errorMsg) {
+    return jsxDEV_7x81h0kn(
+      ErrorState,
+      { path, message: errorMsg, fileType, fileUrl, onRetry: retryFetch },
+      undefined,
+      false,
+      undefined,
+      this,
+    );
+  }
+  if (textLoading && fileType === "text") {
+    return jsxDEV_7x81h0kn(LoadingState, {}, undefined, false, undefined, this);
+  }
+  switch (fileType) {
+    case "image":
+      return jsxDEV_7x81h0kn(
+        ImageRenderer,
+        {
+          fileUrl,
+          label: currentFile.label,
+          zoomLevel,
+          onError: (msg) => setError(path, msg),
+        },
+        fileUrl,
+        false,
+        undefined,
+        this,
+      );
+    case "pdf":
+      return jsxDEV_7x81h0kn(
+        PdfRenderer,
+        { fileUrl, zoomLevel, onError: (msg) => setError(path, msg) },
+        fileUrl,
+        false,
+        undefined,
+        this,
+      );
+    case "web":
+      return jsxDEV_7x81h0kn(
+        WebRenderer,
+        {
+          fileUrl,
+          label: currentFile.label,
+          onError: (msg) => setError(path, msg),
+        },
+        fileUrl,
+        false,
+        undefined,
+        this,
+      );
+    default: {
+      if (!textContent)
+        return jsxDEV_7x81h0kn(
+          LoadingState,
+          {},
+          undefined,
+          false,
+          undefined,
+          this,
+        );
+      return jsxDEV_7x81h0kn(
+        CodeRenderer,
+        { code: textContent, language: ext, zoomLevel },
+        undefined,
+        false,
+        undefined,
+        this,
+      );
+    }
+  }
+}