@sp-days-framework/docusaurus-plugin-slidev 1.0.0

package/lib/theme/SlidevOverview/styles.module.css

@@ -0,0 +1,283 @@
+.container {
+  max-width: 1500px;
+  margin: 0 auto;
+  padding: 2rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.headerWrapper {
+  margin-bottom: 3rem;
+  width: 100%;
+}
+
+.header {
+  text-align: center;
+}
+
+.title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--ifm-heading-color);
+  margin-bottom: 1rem;
+}
+
+.subtitle {
+  font-size: 1.15rem;
+  color: var(--ifm-color-emphasis-700);
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.devModeWarning {
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+  border-radius: 8px;
+  background: var(--ifm-color-warning-contrast-background);
+  border-left: 4px solid var(--ifm-color-warning);
+}
+
+.warningTitle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: var(--ifm-color-warning-darkest);
+}
+
+.warningIcon {
+  width: 24px;
+  height: 24px;
+}
+
+.warningText {
+  margin: 0;
+  color: var(--ifm-color-warning-contrast-foreground);
+  line-height: 1.6;
+}
+
+.warningText em {
+  display: block;
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+}
+
+/* .warningCode {
+  display: inline-block;
+  padding: 0.2rem 0.5rem;
+  margin: 0 0.25rem;
+  background: var(--ifm-code-background);
+  border-radius: 4px;
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.9rem;
+  color: var(--ifm-color-warning-contrast-background);
+} */
+
+/* Controls (Sort and View Toggle) - Fixed to top-right of viewport */
+.controls {
+  position: fixed;
+  top: calc(var(--ifm-navbar-height) + 1rem);
+  right: 2rem;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  z-index: 100;
+  background: var(--ifm-background-color);
+  padding: 0.5rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.controlButton {
+  padding: 0.5rem;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 6px;
+  background: var(--ifm-background-color);
+  color: var(--ifm-color-emphasis-700);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.controlButton:hover {
+  border-color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary-contrast-background);
+  background: var(--ifm-color-primary-lightest);
+}
+
+/* Content Container - Fixed min-height to prevent jumping */
+.contentContainer {
+  width: 100%;
+  max-width: 1500px;
+  position: relative;
+}
+
+/* Visibility toggle classes */
+
+.grid.hidden {
+  /* Keep in DOM but hidden - preserves iframe state */
+  display: none;
+}
+
+/* Grid View */
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+/* Details View (Table) */
+.detailsTable {
+  margin-bottom: 2rem;
+  overflow-x: auto;
+  width: 100%;
+}
+
+.detailsTable.hidden {
+  /* Keep in DOM but hidden */
+  display: none;
+}
+
+.detailsTable table {
+  display: table;
+  border-collapse: collapse;
+  background: var(--ifm-background-surface-color);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.detailsTable thead {
+  background: var(--ifm-color-emphasis-100);
+}
+
+.detailsTable th {
+  padding: 1rem;
+  text-align: left;
+  font-weight: 600;
+  color: var(--ifm-color-emphasis-800);
+  font-size: 0.9rem;
+  border-bottom: 2px solid var(--ifm-color-emphasis-200);
+}
+
+.detailsTable td {
+  padding: 1rem;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+  font-size: 0.9rem;
+}
+
+.detailsTable tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.detailsTable tbody tr:hover {
+  background: var(--ifm-color-emphasis-50);
+}
+
+.detailsTitle {
+  font-weight: 600;
+  color: var(--ifm-color-emphasis-900);
+}
+
+.detailsLink {
+  font-weight: 600;
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+.detailsLink:hover {
+  text-decoration: underline;
+}
+
+.detailsDescription {
+  color: var(--ifm-color-emphasis-700);
+}
+
+/* Empty State */
+.emptyState {
+  text-align: center;
+  padding: 4rem 2rem;
+  color: var(--ifm-color-emphasis-600);
+}
+
+.emptyStateIcon {
+  width: 64px;
+  height: 64px;
+  margin: 0 auto 1rem;
+  opacity: 0.5;
+}
+
+.emptyStateTitle {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--ifm-color-emphasis-700);
+}
+
+.emptyStateText {
+  font-size: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.emptyStateCode {
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  background: var(--ifm-code-background);
+  border-radius: 6px;
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.9rem;
+  color: var(--ifm-color-emphasis-900);
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding: 1rem;
+  }
+
+  .title {
+    font-size: 2rem;
+  }
+
+  .subtitle {
+    font-size: 1rem;
+  }
+
+  .headerWrapper {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .header {
+    margin-bottom: 0;
+  }
+
+  .controls {
+    top: calc(var(--ifm-navbar-height) + 0.5rem);
+    right: 1rem;
+    padding: 0.25rem;
+  }
+
+  .contentContainer {
+    min-width: 100%;
+  }
+
+  .grid {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .detailsTable {
+    font-size: 0.85rem;
+  }
+
+  .detailsTable th,
+  .detailsTable td {
+    padding: 0.75rem 0.5rem;
+  }
+}

package/lib/theme/SlidevPresentation/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * SlidevPresentation Component
+ * Displays individual presentation page (placeholder in dev mode, iframe in production)
+ */
+export default function SlidevPresentation(): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/lib/theme/SlidevPresentation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/SlidevPresentation/index.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AASH,MAAM,CAAC,OAAO,UAAU,kBAAkB,IAAI,GAAG,CAAC,OAAO,CA4GxD"}

package/lib/theme/SlidevPresentation/index.js

@@ -0,0 +1,75 @@
+"use strict";
+/**
+ * SlidevPresentation Component
+ * Displays individual presentation page (placeholder in dev mode, iframe in production)
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SlidevPresentation;
+const react_1 = __importDefault(require("react"));
+const Layout_1 = __importDefault(require("@theme/Layout"));
+const useGlobalData_1 = require("@docusaurus/useGlobalData");
+const router_1 = require("@docusaurus/router");
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+function SlidevPresentation() {
+    const { presentations, config, isDev } = (0, useGlobalData_1.usePluginData)('docusaurus-plugin-slidev');
+    const location = (0, router_1.useLocation)();
+    // Find presentation by matching the current URL path
+    // The URL will be something like '/slides/creating-your-first-slidev/'
+    // We need to find the presentation whose URL matches this path
+    const presentation = presentations.find(p => {
+        // Normalize both paths for comparison (remove trailing slashes)
+        const normalizedPresentationUrl = p.url.endsWith('/') ? p.url.slice(0, -1) : p.url;
+        const normalizedLocationPath = location.pathname.endsWith('/') ? location.pathname.slice(0, -1) : location.pathname;
+        return normalizedPresentationUrl === normalizedLocationPath;
+    });
+    if (!presentation) {
+        return (react_1.default.createElement(Layout_1.default, { title: "Presentation Not Found" },
+            react_1.default.createElement("div", { className: styles_module_css_1.default.container },
+                react_1.default.createElement("div", { className: styles_module_css_1.default.errorState },
+                    react_1.default.createElement("svg", { className: styles_module_css_1.default.errorIcon, viewBox: "0 0 24 24", fill: "currentColor" },
+                        react_1.default.createElement("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M3 4h1m4 0h13M4 4v10a2 2 0 0 0 2 2h10m3.42-.592c.359-.362.58-.859.58-1.408V4m-8 12v4m-3 0h6m-7-8l2-2m4 0l2-2M3 3l18 18" })),
+                    react_1.default.createElement("h1", { className: styles_module_css_1.default.errorTitle }, "Presentation Not Found"),
+                    react_1.default.createElement("p", { className: styles_module_css_1.default.errorText },
+                        "The presentation at ",
+                        react_1.default.createElement("code", null, location.pathname),
+                        " could not be found.")))));
+    }
+    // Development mode: show placeholder
+    if (isDev) {
+        return (react_1.default.createElement(Layout_1.default, { title: presentation.title, description: presentation.description },
+            react_1.default.createElement("div", { className: styles_module_css_1.default.container },
+                react_1.default.createElement("div", { className: styles_module_css_1.default.placeholder },
+                    react_1.default.createElement("div", { className: styles_module_css_1.default.placeholderIcon },
+                        react_1.default.createElement("svg", { viewBox: "0 0 24 24", fill: "currentColor" },
+                            react_1.default.createElement("g", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2" },
+                                react_1.default.createElement("path", { d: "M3 4h18M4 4v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4m-8 12v4m-3 0h6" }),
+                                react_1.default.createElement("path", { d: "m8 12l3-3l2 2l3-3" })))),
+                    react_1.default.createElement("h1", { className: styles_module_css_1.default.placeholderTitle }, presentation.title),
+                    presentation.description && (react_1.default.createElement("p", { className: styles_module_css_1.default.placeholderDescription }, presentation.description)),
+                    presentation.author && (react_1.default.createElement("div", { className: styles_module_css_1.default.placeholderMeta },
+                        react_1.default.createElement("svg", { className: styles_module_css_1.default.metaIcon, viewBox: "0 0 16 16", fill: "currentColor" },
+                            react_1.default.createElement("path", { d: "M8 8a3 3 0 100-6 3 3 0 000 6zm0 1a6 6 0 00-6 6h12a6 6 0 00-6-6z" })),
+                        react_1.default.createElement("span", null,
+                            "By ",
+                            presentation.author))),
+                    react_1.default.createElement("div", { className: styles_module_css_1.default.placeholderMessage },
+                        react_1.default.createElement("div", { className: styles_module_css_1.default.messageIcon },
+                            react_1.default.createElement("svg", { viewBox: "0 0 24 24" },
+                                react_1.default.createElement("path", { fill: "currentColor", d: "M12 1.67c.955 0 1.845.467 2.39 1.247l.105.16l8.114 13.548a2.914 2.914 0 0 1-2.307 4.363l-.195.008H3.882a2.914 2.914 0 0 1-2.582-4.2l.099-.185l8.11-13.538A2.91 2.91 0 0 1 12 1.67M12.01 15l-.127.007a1 1 0 0 0 0 1.986L12 17l.127-.007a1 1 0 0 0 0-1.986zM12 8a1 1 0 0 0-.993.883L11 9v4l.007.117a1 1 0 0 0 1.986 0L13 13V9l-.007-.117A1 1 0 0 0 12 8" }))),
+                        react_1.default.createElement("h2", { className: styles_module_css_1.default.messageTitle }, "Development Mode"),
+                        react_1.default.createElement("p", { className: styles_module_css_1.default.messageText }, "This presentation is not available in development mode. To view it, build the site first:"),
+                        react_1.default.createElement("div", { className: styles_module_css_1.default.commandBlock },
+                            react_1.default.createElement("code", null, "npm run build")),
+                        react_1.default.createElement("p", { className: styles_module_css_1.default.messageText }, "Then serve the built site:"),
+                        react_1.default.createElement("div", { className: styles_module_css_1.default.commandBlock },
+                            react_1.default.createElement("code", null, "npm run serve")))))));
+    }
+    // Production mode: show presentation in iframe
+    return (react_1.default.createElement(Layout_1.default, { title: presentation.title, description: presentation.description },
+        react_1.default.createElement("div", { className: styles_module_css_1.default.presentationContainer },
+            react_1.default.createElement("iframe", { src: presentation.url, className: styles_module_css_1.default.presentationIframe, title: presentation.title, allowFullScreen: true }))));
+}
+//# sourceMappingURL=index.js.map

package/lib/theme/SlidevPresentation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/SlidevPresentation/index.tsx"],"names":[],"mappings":"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"}

package/lib/theme/SlidevPresentation/styles.module.css

@@ -0,0 +1,178 @@
+/**
+ * SlidevPresentation styles
+ */
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+/* Placeholder (Development Mode) */
+.placeholder {
+  max-width: 800px;
+  margin: 4rem auto;
+  text-align: center;
+}
+
+.placeholderIcon {
+  width: 120px;
+  height: 120px;
+  margin: 0 auto 2rem;
+  color: var(--ifm-color-primary);
+  opacity: 0.8;
+}
+
+.placeholderIcon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.placeholderTitle {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+  color: var(--ifm-heading-color);
+}
+
+.placeholderDescription {
+  font-size: 1.25rem;
+  color: var(--ifm-color-emphasis-700);
+  margin-bottom: 2rem;
+}
+
+.placeholderMeta {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  color: var(--ifm-color-emphasis-600);
+  margin-bottom: 3rem;
+  font-size: 1rem;
+}
+
+.metaIcon {
+  width: 20px;
+  height: 20px;
+}
+
+.placeholderMessage {
+  background-color: var(--ifm-color-warning-contrast-background);
+  border: 1px solid var(--ifm-color-warning);
+  border-radius: 8px;
+  padding: 2rem;
+  margin-top: 3rem;
+}
+
+.messageIcon {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 1rem;
+  color: var(--ifm-color-warning-dark);
+}
+
+.messageIcon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.messageTitle {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  color: var(--ifm-heading-color);
+}
+
+.messageText {
+  font-size: 1rem;
+  color: var(--ifm-color-emphasis-700);
+  margin-bottom: 1rem;
+}
+
+.commandBlock {
+  background-color: var(--ifm-code-background);
+  border-radius: 4px;
+  padding: 0.75rem 1rem;
+  margin: 1rem auto;
+  max-width: 300px;
+}
+
+.commandBlock code {
+  font-size: 1rem;
+  font-weight: 600;
+  background-color: transparent;
+  border: none;
+}
+
+/* Error State */
+.errorState {
+  max-width: 600px;
+  margin: 4rem auto;
+  text-align: center;
+}
+
+.errorIcon {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 2rem;
+  color: var(--ifm-color-danger);
+}
+
+.errorTitle {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  color: var(--ifm-heading-color);
+}
+
+.errorText {
+  font-size: 1.125rem;
+  color: var(--ifm-color-emphasis-700);
+}
+
+.errorText code {
+  background-color: var(--ifm-code-background);
+  padding: 0.2rem 0.4rem;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+
+/* Production Mode - Full Screen Iframe */
+.presentationContainer {
+  position: fixed;
+  top: var(--ifm-navbar-height);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #000;
+}
+
+.presentationIframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .container {
+    padding: 1rem;
+  }
+
+  .placeholder {
+    margin: 2rem auto;
+  }
+
+  .placeholderTitle {
+    font-size: 2rem;
+  }
+
+  .placeholderDescription {
+    font-size: 1.125rem;
+  }
+
+  .placeholderMessage {
+    padding: 1.5rem;
+  }
+
+  .messageTitle {
+    font-size: 1.25rem;
+  }
+}