polen 0.10.0-next.15 → 0.10.0-next.17

package/src/template/components/CodeBlockEnhancer.tsx

@@ -1,192 +0,0 @@
-import { useEffect } from 'react'
-import { useLocation } from 'react-router'
-import { useTheme } from '../contexts/ThemeContext.js'
-
-export const CodeBlockEnhancer = () => {
-  const { appearance } = useTheme()
-  const location = useLocation()
-
-  useEffect(() => {
-    // Add styles for code block enhancements
-    const styleId = `code-block-enhancer-styles`
-    let styleElement = document.getElementById(styleId) as HTMLStyleElement
-
-    if (!styleElement) {
-      styleElement = document.createElement(`style`)
-      styleElement.id = styleId
-      document.head.appendChild(styleElement)
-    }
-
-    styleElement.textContent = `
-      /* Enhanced code block styles */
-      pre.shiki {
-        position: relative;
-      }
-      
-      pre.shiki[data-title] {
-        margin-top: 0;
-        border-radius: 0 0 8px 8px !important;
-      }
-      
-      pre.shiki[data-title]::before {
-        content: attr(data-title);
-        display: block;
-        position: absolute;
-        top: -2.5rem;
-        left: -1px;
-        right: -1px;
-        background-color: ${appearance === `dark` ? `#2a2b3d` : `#f3f4f6`};
-        border: 1px solid var(--gray-4);
-        border-bottom: 1px solid ${appearance === `dark` ? `#3a3b4d` : `#e5e7eb`};
-        border-radius: 8px 8px 0 0;
-        padding: 0.5rem 1rem;
-        font-size: 0.875rem;
-        font-weight: 500;
-        color: var(--gray-11);
-        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-      }
-      
-      pre.shiki[data-title][data-language]::after {
-        content: attr(data-language);
-        position: absolute;
-        top: -2rem;
-        right: 1rem;
-        font-size: 0.75rem;
-        color: var(--gray-9);
-        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-      }
-      
-      .code-block-copy {
-        position: absolute;
-        top: 0.5rem;
-        right: 0.5rem;
-        padding: 0.25rem 0.5rem;
-        font-size: 0.75rem;
-        cursor: pointer;
-        border: none;
-        border-radius: 4px;
-        transition: all 0.2s;
-        background-color: ${appearance === `dark` ? `rgba(0, 0, 0, 0.5)` : `rgba(255, 255, 255, 0.8)`};
-        backdrop-filter: blur(4px);
-        color: ${appearance === `dark` ? `#fff` : `#000`};
-        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-      }
-      
-      pre.shiki[data-title] .code-block-copy {
-        top: -2rem;
-        right: 6rem;
-        background-color: transparent;
-        color: var(--gray-11);
-      }
-      
-      .code-block-copy:hover {
-        background-color: var(--accent-9) !important;
-        color: white !important;
-      }
-      
-      .code-block-copy[data-copied="true"] {
-        background-color: var(--green-9) !important;
-        color: white !important;
-      }
-    `
-
-    return () => {
-      if (styleElement && styleElement.parentNode) {
-        styleElement.parentNode.removeChild(styleElement)
-      }
-    }
-  }, [appearance])
-
-  useEffect(() => {
-    const enhanceCodeBlocks = () => {
-      const codeBlocks = document.querySelectorAll(`pre.shiki:not([data-enhanced])`)
-
-      codeBlocks.forEach((block) => {
-        const preElement = block as HTMLPreElement
-        preElement.setAttribute(`data-enhanced`, `true`)
-
-        // Get language from class name
-        const classes = preElement.className.split(` `)
-        const language = classes.find(c => c !== `shiki` && c !== `shiki-light` && c !== `shiki-dark`) || `text`
-
-        // Check for title in first line
-        const codeElement = preElement.querySelector(`code`)
-        if (!codeElement) return
-
-        const firstLine = codeElement.textContent?.split(`\n`)[0] || ``
-        let title = ``
-
-        const titleMatch = /^\/\/\s*title:\s*(.+)$/i.exec(firstLine)
-        if (titleMatch?.[1]) {
-          title = titleMatch[1]
-          // Remove title line from display
-          const firstLineElement = codeElement.querySelector(`span.line`) as HTMLElement | null
-          if (firstLineElement) {
-            firstLineElement.style.display = `none`
-          }
-
-          // Set data attributes for CSS
-          preElement.setAttribute(`data-title`, title)
-          preElement.setAttribute(`data-language`, language)
-          preElement.style.marginTop = `3rem`
-        }
-
-        // Create copy button
-        const copyButton = document.createElement(`button`)
-        copyButton.className = `code-block-copy`
-        copyButton.textContent = `Copy`
-        copyButton.setAttribute(`data-copied`, `false`)
-
-        copyButton.onclick = async (e) => {
-          e.preventDefault()
-          e.stopPropagation()
-
-          // Get clean code without the title line
-          const code = codeElement.textContent || ``
-          const cleanCode = title ? code.split(`\n`).slice(1).join(`\n`) : code
-
-          try {
-            await navigator.clipboard.writeText(cleanCode)
-            copyButton.textContent = `Copied!`
-            copyButton.setAttribute(`data-copied`, `true`)
-            setTimeout(() => {
-              copyButton.textContent = `Copy`
-              copyButton.setAttribute(`data-copied`, `false`)
-            }, 2000)
-          } catch (err) {
-            console.error(`Failed to copy:`, err)
-          }
-        }
-
-        // Append copy button directly to pre element
-        preElement.appendChild(copyButton)
-      })
-    }
-
-    // Small delay to ensure DOM is ready
-    const timeoutId = setTimeout(enhanceCodeBlocks, 100)
-
-    return () => {
-      clearTimeout(timeoutId)
-      // Clean up enhanced code blocks
-      document.querySelectorAll(`pre.shiki[data-enhanced]`).forEach(block => {
-        block.removeAttribute(`data-enhanced`)
-        block.removeAttribute(`data-title`)
-        block.removeAttribute(`data-language`)
-        const copyButton = block.querySelector(`.code-block-copy`)
-        if (copyButton) {
-          copyButton.remove()
-        }
-        // Restore hidden title lines
-        const firstLine = block.querySelector(`span.line`) as HTMLElement | null
-        if (firstLine && firstLine.style.display === `none`) {
-          firstLine.style.display = ``
-        } // Reset margin
-
-        ;(block as HTMLElement).style.marginTop = ``
-      })
-    }
-  }, [location.pathname]) // Re-run when route changes
-
-  return null
-}

package/src/template/styles/code-block.css

@@ -1,218 +0,0 @@
-/* Code Block Styles */
-
-/* Base code block container */
-.code-block {
-  position: relative;
-  margin: 1rem 0;
-  border-radius: 8px;
-  overflow: hidden;
-  font-size: 14px;
-  line-height: 1.6;
-}
-
-.code-block pre {
-  margin: 0;
-  padding: 1rem;
-  overflow-x: auto;
-  background: inherit;
-}
-
-.code-block code {
-  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
-  font-variant-ligatures: contextual;
-}
-
-/* Shiki theme switching with CSS variables */
-/* Default to light theme */
-:root {
-  color-scheme: light;
-}
-
-/* When dark mode is active */
-.dark {
-  color-scheme: dark;
-}
-
-/* Shiki token colors for light theme (github-light) */
-:root {
-  --shiki-color-text: #24292e;
-  --shiki-color-background: #f6f8fa;
-  --shiki-token-constant: #005cc5;
-  --shiki-token-string: #032f62;
-  --shiki-token-comment: #6a737d;
-  --shiki-token-keyword: #d73a49;
-  --shiki-token-parameter: #e36209;
-  --shiki-token-function: #6f42c1;
-  --shiki-token-string-expression: #032f62;
-  --shiki-token-punctuation: #24292e;
-  --shiki-token-link: #032f62;
-}
-
-/* Shiki token colors for dark theme (tokyo-night) */
-.dark {
-  --shiki-color-text: #c0caf5;
-  --shiki-color-background: #1a1b26;
-  --shiki-token-constant: #ff9e64;
-  --shiki-token-string: #9ece6a;
-  --shiki-token-comment: #565f89;
-  --shiki-token-keyword: #bb9af7;
-  --shiki-token-parameter: #e0af68;
-  --shiki-token-function: #7aa2f7;
-  --shiki-token-string-expression: #9ece6a;
-  --shiki-token-punctuation: #c0caf5;
-  --shiki-token-link: #9ece6a;
-}
-
-/* Shiki code blocks */
-pre.shiki {
-  margin: 1rem 0;
-  padding: 1rem;
-  border-radius: 8px;
-  overflow-x: auto;
-  font-size: 14px;
-  line-height: 1.6;
-  background-color: var(--shiki-color-background);
-  color: var(--shiki-color-text);
-}
-
-pre.shiki code {
-  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
-  font-variant-ligatures: contextual;
-}
-
-/* Line numbers */
-.code-block[data-line-numbers="true"] pre {
-  padding-left: 3.5rem;
-  position: relative;
-}
-
-.code-block[data-line-numbers="true"] .line {
-  position: relative;
-}
-
-.code-block[data-line-numbers="true"] .line::before {
-  content: attr(data-line);
-  position: absolute;
-  left: -3rem;
-  width: 2.5rem;
-  text-align: right;
-  color: var(--gray-a6);
-  user-select: none;
-}
-
-/* Line highlighting */
-.code-block .line[data-highlighted="true"] {
-  background-color: var(--amber-a3);
-  display: block;
-  margin: 0 -1rem;
-  padding: 0 1rem;
-}
-
-/* Diff lines */
-.code-block .line[data-diff="+"] {
-  background-color: var(--green-a3);
-  display: block;
-  margin: 0 -1rem;
-  padding: 0 1rem;
-}
-
-.code-block .line[data-diff="-"] {
-  background-color: var(--red-a3);
-  display: block;
-  margin: 0 -1rem;
-  padding: 0 1rem;
-}
-
-.code-block .line[data-diff="+"]::before {
-  content: "+ ";
-  color: var(--green-11);
-  font-weight: bold;
-}
-
-.code-block .line[data-diff="-"]::before {
-  content: "- ";
-  color: var(--red-11);
-  font-weight: bold;
-}
-
-/* Focus lines */
-.code-block .line:not([data-focus="true"]) {
-  opacity: 0.5;
-  filter: grayscale(100%);
-  transition: opacity 0.2s, filter 0.2s;
-}
-
-.code-block:hover .line:not([data-focus="true"]) {
-  opacity: 0.8;
-  filter: grayscale(0%);
-}
-
-/* Copy button */
-.code-block-copy {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  background: var(--gray-a3);
-  color: var(--gray-12);
-  border: 1px solid var(--gray-a5);
-  cursor: pointer;
-  font-size: 12px;
-  transition: all 0.2s;
-}
-
-.code-block-copy:hover {
-  background: var(--gray-a4);
-  border-color: var(--gray-a6);
-}
-
-.code-block-copy.copied {
-  background: var(--green-a3);
-  border-color: var(--green-a5);
-  color: var(--green-11);
-}
-
-/* Language badge */
-.code-block-lang {
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 0.25rem 0.75rem;
-  background: var(--gray-a3);
-  color: var(--gray-11);
-  font-size: 12px;
-  font-weight: 500;
-  border-bottom-left-radius: 4px;
-  user-select: none;
-}
-
-/* Scrollbar styling */
-.code-block pre::-webkit-scrollbar {
-  height: 8px;
-  width: 8px;
-}
-
-.code-block pre::-webkit-scrollbar-track {
-  background: var(--gray-a3);
-  border-radius: 4px;
-}
-
-.code-block pre::-webkit-scrollbar-thumb {
-  background: var(--gray-a6);
-  border-radius: 4px;
-}
-
-.code-block pre::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-a7);
-}
-
-/* Inline code */
-code:not(.code-block code) {
-  padding: 0.2em 0.4em;
-  margin: 0;
-  font-size: 0.85em;
-  background-color: var(--gray-a3);
-  border-radius: 4px;
-  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
-}