svelte-markdown-pages/dist/renderer/components.cjs

Build and render markdown-based content with distributed navigation for Svelte projects

'use strict';

// src/renderer/components.ts
var DocsSidebarClass = class {
  constructor(props) {
    this.props = props;
  }
  render() {
    return `
      <nav class="docs-sidebar ${this.props.collapsed ? "collapsed" : ""}">
        ${this.renderNavigationItems(this.props.navigation.items)}
      </nav>
    `;
  }
  renderNavigationItems(items) {
    return items.map((item) => {
      if (item.type === "section") {
        return `
          <div class="nav-section">
            <div class="nav-section-header">${item.label}</div>
            ${item.items ? this.renderNavigationItems(item.items) : ""}
          </div>
        `;
      } else {
        const isActive = this.props.currentPage === item.path;
        return `
          <a href="#" 
             class="nav-link ${isActive ? "active" : ""}"
             data-path="${item.path}"
             onclick="this.dispatchEvent(new CustomEvent('pageSelect', {detail: '${item.path}'}))">
            ${item.label}
          </a>
        `;
      }
    }).join("");
  }
};
var DocsContentClass = class {
  constructor(props) {
    this.props = props;
  }
  render() {
    if (this.props.loading) {
      return '<div class="docs-content loading">Loading...</div>';
    }
    if (this.props.error) {
      return `<div class="docs-content error">Error: ${this.props.error}</div>`;
    }
    if (!this.props.content) {
      return '<div class="docs-content empty">No content selected</div>';
    }
    return `
      <div class="docs-content">
        ${this.props.title ? `<h1>${this.props.title}</h1>` : ""}
        <div class="content-body">
          ${this.props.content}
        </div>
      </div>
    `;
  }
};
function createDocsSidebar(props) {
  return new DocsSidebarClass(props);
}
function createDocsContent(props) {
  return new DocsContentClass(props);
}
function createDocsLayout(props) {
  const sidebar = new DocsSidebarClass({
    navigation: props.navigation,
    currentPage: props.currentPage,
    onPageSelect: props.onPageSelect,
    collapsed: props.sidebarCollapsed
  });
  const content = new DocsContentClass({
    content: props.content,
    loading: false,
    error: null
  });
  return `
    <div class="docs-layout">
      ${sidebar.render()}
      ${content.render()}
    </div>
  `;
}

exports.DocsContent = DocsContentClass;
exports.DocsContentClass = DocsContentClass;
exports.DocsSidebar = DocsSidebarClass;
exports.DocsSidebarClass = DocsSidebarClass;
exports.createDocsContent = createDocsContent;
exports.createDocsLayout = createDocsLayout;
exports.createDocsSidebar = createDocsSidebar;
//# sourceMappingURL=components.cjs.map
//# sourceMappingURL=components.cjs.map