polen 0.10.0-next.14 → 0.10.0-next.3

package/src/lib/demos/ui/components.ts

@@ -1,739 +0,0 @@
-/**
- * UI component generators for demo landing pages
- */
-
-import { getDemoConfig } from '../index.ts'
-import type { DemoMetadata, LandingPageData } from './data-collector.ts'
-
-/**
- * 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: string): string => {
-  // 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: LandingPageData): string => {
-  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: string,
-  metadata: DemoMetadata,
-  data: LandingPageData,
-): string => {
-  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: string[] = []
-  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: LandingPageData): string => {
-  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: LandingPageData): string => {
-  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 = (): string => {
-  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>
-  `
-}