polen 0.10.0-next.16 → 0.10.0-next.18

package/build/template/components/CodeBlockEnhancer.js

@@ -1,175 +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);
-        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;
-                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`);
-                    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`);
-                if (firstLine && firstLine.style.display === `none`) {
-                    firstLine.style.display = ``;
-                } // Reset margin
-                ;
-                block.style.marginTop = ``;
-            });
-        };
-    }, [location.pathname]); // Re-run when route changes
-    return null;
-};
-//# sourceMappingURL=CodeBlockEnhancer.js.map

package/build/template/components/CodeBlockEnhancer.js.map

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

package/build/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;
-}

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
-}