polen 0.10.0-next.3 → 0.10.0-next.5

package/build/lib/demos/ui/components.js

@@ -0,0 +1,699 @@
+/**
+ * UI component generators for demo landing pages
+ */
+import { getDemoConfig } from "../index.js";
+/**
+ * CSS styles for the demo landing page
+ */
+export const getDemoPageStyles = () => {
+    const config = getDemoConfig().fullConfig;
+    const theme = config.ui.theme;
+    return `
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      line-height: 1.6;
+      color: ${theme.textColor};
+      background: ${theme.backgroundColor};
+    }
+
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+
+    .header {
+      margin-bottom: 4rem;
+      padding: 3rem 0;
+      border-bottom: 1px solid ${theme.primaryColor};
+    }
+
+    .header h1 {
+      font-size: 2.5rem;
+      font-weight: 400;
+      margin-bottom: 0.5rem;
+      letter-spacing: -0.02em;
+    }
+
+    .header p {
+      font-size: 1rem;
+      color: ${theme.textColor};
+      max-width: 600px;
+    }
+
+    .demos-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 2rem;
+      margin-bottom: 3rem;
+    }
+
+    .demo-card {
+      background: ${theme.backgroundColor};
+      padding: 2rem;
+      border: 1px solid ${theme.primaryColor};
+      transition: all 0.2s ease;
+    }
+
+    .demo-card:hover {
+      transform: translateY(-2px);
+    }
+
+    .demo-card h2 {
+      font-size: 1.25rem;
+      margin-bottom: 0.5rem;
+      color: ${theme.textColor};
+      font-weight: 600;
+      letter-spacing: -0.01em;
+    }
+
+    .demo-card p {
+      color: ${theme.textColor};
+      margin-bottom: 1.5rem;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+
+    .demo-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      background: ${theme.primaryColor};
+      color: ${theme.backgroundColor};
+      text-decoration: none;
+      padding: 0.625rem 1.25rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      transition: all 0.2s ease;
+      border: 1px solid ${theme.primaryColor};
+    }
+
+    .demo-link:hover {
+      background: ${theme.backgroundColor};
+      color: ${theme.primaryColor};
+    }
+
+    .demo-link svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .demo-links {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      margin-top: 1.5rem;
+    }
+
+    .dist-tags {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+
+    .dist-tag-button {
+      display: flex;
+      align-items: stretch;
+      border: 1px solid ${theme.primaryColor};
+      overflow: hidden;
+    }
+
+    .dist-tag-label {
+      flex: 1;
+      padding: 0.625rem 1.25rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      background: ${theme.primaryColor};
+      color: ${theme.backgroundColor};
+      text-decoration: none;
+      transition: all 0.2s ease;
+    }
+
+    .dist-tag-label svg {
+      width: 16px;
+      height: 16px;
+      transition: transform 0.2s ease;
+    }
+
+    .dist-tag-label:hover svg {
+      transform: translateX(4px);
+    }
+
+    .dist-tag-version {
+      padding: 0.625rem 1.25rem;
+      border-left: 1px solid rgba(255, 255, 255, 0.2);
+      font-family: monospace;
+      font-size: 0.875rem;
+      background: ${theme.primaryColor};
+      color: ${theme.backgroundColor};
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      transition: all 0.2s ease;
+    }
+
+    /* Hover states */
+    .dist-tag-button:hover .dist-tag-label,
+    .dist-tag-button:hover .dist-tag-version {
+      background: ${theme.backgroundColor};
+      color: rgba(0, 0, 0, 0.5);
+    }
+
+    .dist-tag-button:hover .dist-tag-version {
+      border-left-color: rgba(0, 0, 0, 0.2);
+    }
+
+    .dist-tag-label:hover {
+      color: ${theme.primaryColor} !important;
+    }
+
+    .dist-tag-version:hover {
+      color: ${theme.primaryColor} !important;
+    }
+
+    .permalink-icon {
+      display: inline-block;
+      transition: transform 0.2s ease;
+      margin-left: 0.75rem;
+      transform-origin: center center;
+    }
+
+    .dist-tag-version:hover .permalink-icon {
+      transform: rotate(15deg) translateY(-1px);
+    }
+
+    .previous-versions {
+      margin-top: 1rem;
+      padding-top: 1rem;
+      border-top: 1px solid #e0e0e0;
+    }
+
+    .previous-versions h3 {
+      font-size: 0.875rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+    }
+
+    .commit-links {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      font-size: 0.75rem;
+    }
+
+    .commit-link {
+      padding: 0.25rem 0.5rem;
+      border: 1px solid ${theme.primaryColor};
+      text-decoration: none;
+      color: ${theme.primaryColor};
+      font-family: monospace;
+      transition: all 0.2s ease;
+    }
+
+    .commit-link:hover {
+      background: ${theme.primaryColor};
+      color: ${theme.backgroundColor};
+    }
+
+    .current-deployment {
+      margin-top: 1rem;
+      font-size: 0.875rem;
+      color: #666;
+    }
+
+    .current-deployment span {
+      color: ${theme.primaryColor};
+    }
+
+    .footer {
+      text-align: center;
+      padding: 3rem 0;
+      color: ${theme.primaryColor};
+      border-top: 1px solid ${theme.primaryColor};
+      font-size: 0.875rem;
+    }
+
+    .footer a {
+      color: ${theme.primaryColor};
+      text-decoration: underline;
+    }
+
+    .footer a:hover {
+      text-decoration: none;
+    }
+
+    .disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .disabled .demo-link {
+      background: ${theme.backgroundColor};
+      color: ${theme.primaryColor};
+      pointer-events: none;
+      width: 100%;
+      justify-content: center;
+    }
+
+    .version-info {
+      margin-top: 3rem;
+      padding: 2rem;
+      background: #f8f8f8;
+      border: 1px solid #e0e0e0;
+    }
+
+    .version-info h3 {
+      font-size: 1.125rem;
+      margin-bottom: 1rem;
+      color: ${theme.textColor};
+    }
+
+    .version-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+
+    .version-tag {
+      padding: 0.25rem 0.75rem;
+      background: ${theme.primaryColor};
+      color: ${theme.backgroundColor};
+      text-decoration: none;
+      font-size: 0.75rem;
+      font-weight: 500;
+      border-radius: 3px;
+    }
+
+    .version-tag.latest {
+      background: #0066cc;
+    }
+
+    .version-tag.next {
+      background: #ff6600;
+    }
+
+    .pr-section {
+      margin-top: 3rem;
+      padding: 2rem;
+      background: #f0f8ff;
+      border: 1px solid #b3d9ff;
+    }
+
+    .pr-section h3 {
+      color: #0066cc;
+      margin-bottom: 1rem;
+    }
+
+    .pr-list {
+      display: grid;
+      gap: 1rem;
+    }
+
+    .pr-item {
+      padding: 1rem;
+      background: white;
+      border: 1px solid #ddd;
+    }
+
+    .pr-item h4 {
+      color: #0066cc;
+      margin-bottom: 0.5rem;
+    }
+
+    .back-link {
+      color: ${theme.textColor};
+      text-decoration: none;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 2rem;
+      font-size: 0.875rem;
+    }
+
+    .back-link:hover {
+      text-decoration: underline;
+    }
+
+    .pr-banner {
+      background: ${theme.primaryColor};
+      color: ${theme.backgroundColor};
+      padding: 1rem 0;
+      margin-bottom: 0;
+      border-bottom: 2px solid ${theme.primaryColor};
+    }
+
+    .pr-banner .container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 2rem;
+      flex-wrap: wrap;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 2rem;
+    }
+
+    .pr-banner-content {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+
+    .pr-banner-badge {
+      background: ${theme.backgroundColor};
+      color: ${theme.primaryColor};
+      padding: 0.25rem 0.75rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .pr-banner-text {
+      font-size: 0.875rem;
+    }
+
+    .pr-banner-links {
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+    }
+
+    .pr-banner-link {
+      color: ${theme.backgroundColor};
+      text-decoration: none;
+      font-size: 0.875rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 1rem;
+      border: 1px solid ${theme.backgroundColor};
+      transition: all 0.2s ease;
+    }
+
+    .pr-banner-link:hover {
+      background: ${theme.backgroundColor};
+      color: ${theme.primaryColor};
+    }
+
+    .pr-banner-link svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    @media (max-width: 768px) {
+      .container {
+        padding: 1rem;
+      }
+
+      .header h1 {
+        font-size: 2rem;
+      }
+
+      .demos-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+      }
+
+      .demo-card {
+        padding: 1.5rem;
+      }
+
+      .pr-banner .container {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+        padding: 0 1rem;
+      }
+
+      .pr-banner-links {
+        width: 100%;
+        flex-direction: column;
+        align-items: stretch;
+      }
+
+      .pr-banner-link {
+        justify-content: center;
+      }
+    }
+  `;
+};
+/**
+ * Generate PR banner HTML
+ */
+export const generatePrBanner = (prNumber) => {
+    // These should be set by the GitHub Actions environment
+    const repoOwner = process.env['GITHUB_REPOSITORY_OWNER'] || 'the-guild-org';
+    const repoName = process.env['GITHUB_REPOSITORY']?.split('/')[1] || 'polen';
+    return `
+    <div class="pr-banner">
+      <div class="container">
+        <div class="pr-banner-content">
+          <span class="pr-banner-badge">PR Preview</span>
+          <span class="pr-banner-text">You're viewing a preview deployment for Pull Request #${prNumber}</span>
+        </div>
+        <div class="pr-banner-links">
+          <a href="https://github.com/${repoOwner}/${repoName}/pull/${prNumber}" class="pr-banner-link" target="_blank">
+            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+            </svg>
+            View PR on GitHub
+          </a>
+          <a href="https://${repoOwner}.github.io/${repoName}/" class="pr-banner-link">
+            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+            </svg>
+            Go to Production Demos
+          </a>
+        </div>
+      </div>
+    </div>
+  `;
+};
+/**
+ * Generate header HTML
+ */
+export const generateHeader = (data) => {
+    const config = getDemoConfig().fullConfig;
+    const { mode, prNumber } = data.config;
+    let title = config.ui.branding.title;
+    let description = config.ui.branding.description;
+    if (prNumber) {
+        title = `${title} - PR #${prNumber} Preview`;
+        description = `Preview of changes in pull request #${prNumber}`;
+    }
+    return `
+    <div class="header">
+      <h1>${title}</h1>
+      <p>${description}</p>
+    </div>
+  `;
+};
+/**
+ * Generate demo card HTML for the demos landing page
+ */
+export const generateDemoCard = (name, metadata, data) => {
+    const { title, description, enabled } = metadata;
+    const { basePath, prNumber, currentSha } = data.config;
+    const { distTags, trunkDeployments, prDeployments } = data;
+    if (!enabled) {
+        return `<div class="demo-card disabled">
+              <h2>${title}</h2>
+              <p>${description}</p>
+              <span class="demo-link">
+                Coming Soon
+              </span>
+            </div>`;
+    }
+    // Get previous deployments for PR from the passed data
+    let previousDeployments = [];
+    if (prNumber && prDeployments) {
+        const currentPr = prDeployments.find(pr => pr.number.toString() === prNumber);
+        if (currentPr && currentPr.previousDeployments) {
+            previousDeployments = currentPr.previousDeployments.filter(sha => sha !== currentSha);
+        }
+    }
+    return `<div class="demo-card">
+            <h2>${title}</h2>
+            <p>${description}</p>
+            <div class="demo-links">
+              ${
+    // For trunk deployments, show dist-tag buttons
+    !prNumber
+        ? distTags && Object.entries(distTags).length > 0
+            ? `<div class="dist-tags">
+              ${Object.entries(distTags)
+                .sort(([a], [b]) => a === 'latest' ? -1 : b === 'latest' ? 1 : 0)
+                .filter(([tag, version]) => {
+                // If next points to the same version as latest, filter it out
+                if (tag === 'next' && distTags['latest'] === version) {
+                    return false;
+                }
+                return true;
+            })
+                .map(([tag, version]) => `
+                    <div class="dist-tag-button">
+                      <a href="${basePath}${tag}/${name}/" class="dist-tag-label">
+                        ${tag}
+                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                        </svg>
+                      </a>
+                      <a href="${basePath}${version}/${name}/" class="dist-tag-version">${version}<span class="permalink-icon">¶</span></a>
+                    </div>
+                  `).join('')}
+            ${
+            // Show "no prereleases" message if next === latest
+            distTags && distTags['next'] && distTags['next'] === distTags['latest']
+                ? '<div class="disabled" style="margin-top: 0.75rem;"><span class="demo-link" style="width: 100%; justify-content: center;">No pre-releases since latest</span></div>'
+                : ''}
+            </div>`
+            : trunkDeployments && trunkDeployments.latest
+                ? `<a href="${basePath}latest/${name}/" class="demo-link">
+              View Latest (${trunkDeployments.latest.tag || trunkDeployments.latest.shortSha})
+              <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+              </svg>
+            </a>`
+                : '<p style="color: #666; font-size: 0.875rem;">No deployments available</p>'
+        // For PR deployments
+        : prDeployments && prDeployments.length > 0
+            ? currentSha
+                // If we have currentSha, show the specific deployment
+                ? `<div class="dist-tags">
+              <div class="dist-tag-button">
+                <a href="${basePath}latest/${name}/" class="dist-tag-label">
+                  latest
+                  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                  </svg>
+                </a>
+                <a href="${basePath}${currentSha}/${name}/" class="dist-tag-version">${currentSha.substring(0, 7)}<span class="permalink-icon">¶</span></a>
+              </div>
+            </div>`
+                // Otherwise show available deployments for this PR
+                : prDeployments[0]?.sha
+                    ? `<div class="dist-tags">
+              <div class="dist-tag-button">
+                <a href="${basePath}latest/${name}/" class="dist-tag-label">
+                  latest
+                  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                  </svg>
+                </a>
+                <a href="${basePath}${prDeployments[0].sha}/${name}/" class="dist-tag-version">${prDeployments[0].sha}<span class="permalink-icon">¶</span></a>
+              </div>
+            </div>`
+                    : '<p style="color: #666; font-size: 0.875rem;">No deployments available</p>'
+            : '<p style="color: #666; font-size: 0.875rem;">No deployments available</p>'}
+            <div class="previous-versions">
+              <h3>Previous Versions</h3>
+              ${
+    // For trunk deployments, use parsedTrunkDeployments
+    !prNumber && trunkDeployments
+        ? trunkDeployments.previous.length > 0
+            ? `<div class="commit-links">
+                ${trunkDeployments.previous.map(deployment => {
+                // For semver deployments, tag and sha are the same, so just show once
+                const label = deployment.tag || deployment.shortSha;
+                return `<a href="${basePath}${deployment.sha}/${name}/" class="commit-link">${label}</a>`;
+            }).join('')}
+              </div>`
+            : '<p style="color: #666; font-size: 0.875rem; margin: 0;">(none)</p>'
+        // For PR deployments, use the existing logic
+        : previousDeployments.length > 0
+            ? `<div class="commit-links">
+                ${previousDeployments.map(sha => `
+                  <a href="${basePath}${sha}/${name}/" class="commit-link">${sha.substring(0, 7)}</a>
+                `).join('')}
+              </div>`
+            : '<p style="color: #666; font-size: 0.875rem; margin: 0;">(none)</p>'}
+            </div>
+          </div>
+        </div>`;
+};
+/**
+ * Generate demos grid HTML
+ */
+export const generateDemosGrid = (data) => {
+    const { demoMetadata, demoExamples } = data;
+    const orderedExamples = getDemoConfig().getOrderedDemos(demoExamples);
+    // Add disabled demos to the list
+    const allDemos = [...orderedExamples];
+    for (const [name, metadata] of Object.entries(demoMetadata)) {
+        if (!metadata.enabled && !allDemos.includes(name)) {
+            allDemos.push(name);
+        }
+    }
+    const demoCards = allDemos
+        .map(name => generateDemoCard(name, demoMetadata[name] || { title: name, description: '', enabled: true }, data))
+        .join('');
+    return `
+    <div class="demos-grid">
+      ${demoCards}
+    </div>
+  `;
+};
+/**
+ * Generate version information section
+ */
+export const generateVersionInfo = (data) => {
+    const { trunkDeployments, distTags } = data;
+    if (!trunkDeployments)
+        return '';
+    const basePath = data.config.basePath || '/';
+    const distTagsHtml = distTags
+        ? Object.entries(distTags)
+            .map(([tag, version]) => {
+            const className = tag === 'latest'
+                ? 'version-tag latest'
+                : tag === 'next'
+                    ? 'version-tag next'
+                    : 'version-tag';
+            return `<a href="${basePath}${version}/" class="${className}">${tag}: ${version}</a>`;
+        })
+            .join('')
+        : '';
+    const previousVersionsHtml = trunkDeployments.previous && trunkDeployments.previous.length > 0
+        ? trunkDeployments.previous
+            .slice(0, 10) // Limit to recent versions
+            .map(version => `<a href="${basePath}${version.tag}/" class="version-tag">${version.tag}</a>`)
+            .join('')
+        : '';
+    // Only show the version info section if there's content to display
+    if (!distTagsHtml && !previousVersionsHtml) {
+        return '';
+    }
+    return `
+    <div class="version-info">
+      <h3>Available Versions</h3>
+      ${distTagsHtml ? `<div class="version-list">${distTagsHtml}</div>` : ''}
+      ${previousVersionsHtml
+        ? `
+        <h4 style="margin: 1rem 0 0.5rem 0; font-size: 0.875rem; color: #666;">Previous Versions:</h4>
+        <div class="version-list">${previousVersionsHtml}</div>
+      `
+        : ''}
+    </div>
+  `;
+};
+/**
+ * Generate footer section
+ */
+export const generateFooter = () => {
+    return `
+    <div class="footer">
+      <p>Built with <a href="https://github.com/the-guild-org/polen" target="_blank">Polen</a> - The delightful GraphQL documentation framework</p>
+    </div>
+  `;
+};
+//# sourceMappingURL=components.js.map