diff --git a/src/app/api/posts/[slug]/route.ts b/src/app/api/posts/[slug]/route.ts index 16c7f21..bb1d1c1 100644 --- a/src/app/api/posts/[slug]/route.ts +++ b/src/app/api/posts/[slug]/route.ts @@ -1,172 +1,34 @@ -export const dynamic = "force-dynamic"; - import { NextResponse } from 'next/server'; -import fs from 'fs'; import path from 'path'; -import matter from 'gray-matter'; -import { marked } from 'marked'; -import DOMPurify from 'dompurify'; -import { JSDOM } from 'jsdom'; -import hljs from 'highlight.js'; import { getPostsDirectory } from '@/lib/postsDirectory'; import { spawnSync } from 'child_process'; const postsDirectory = getPostsDirectory(); -// Function to get file creation date -function getFileCreationDate(filePath: string): Date { - const stats = fs.statSync(filePath); - return stats.birthtime ?? stats.mtime; -} - -// Function to generate ID from text (matches frontend logic) -function generateId(text: string): string { - return text - .toLowerCase() - .replace(/[^a-z0-9]+/g, '-') - .replace(/^-+|-+$/g, ''); -} - -const renderer = new marked.Renderer(); - -// Custom heading renderer to add IDs -renderer.heading = (text, level) => { - const id = generateId(text); - return `${text}`; -}; - -renderer.code = (code, infostring, escaped) => { - const lang = (infostring || '').match(/\S*/)?.[0]; - const highlighted = lang && hljs.getLanguage(lang) - ? hljs.highlight(code, { language: lang }).value - : hljs.highlightAuto(code).value; - const langClass = lang ? `language-${lang}` : ''; - return `
${highlighted}
`; -}; - -marked.setOptions({ - gfm: true, - breaks: true, - renderer, -}); - -async function getPostBySlug(slug: string) { - const realSlug = slug.replace(/\.md$/, ''); - const fullPath = path.join(postsDirectory, `${realSlug}.md`); - let rustResult; - try { - // Try Rust backend first - rustResult = spawnSync( - path.resolve(process.cwd(), 'markdown_backend/target/release/markdown_backend'), - ['show', realSlug], - { encoding: 'utf-8' } - ); - if (rustResult.status === 0 && rustResult.stdout) { - // Expect Rust to output a JSON object matching the post shape - const post = JSON.parse(rustResult.stdout); - // Map snake_case to camelCase for frontend compatibility - post.createdAt = post.created_at; - delete post.created_at; - return post; - } else { - console.error('[Rust parser error]', rustResult.stderr || rustResult.error); - } - } catch (e) { - console.error('[Rust parser exception]', e); - } - - // Fallback to TypeScript parser - const fileContents = fs.readFileSync(fullPath, 'utf8'); - const { data, content } = matter(fileContents); - const createdAt = getFileCreationDate(fullPath); - - let processedContent = ''; - try { - // Convert markdown to HTML - const rawHtml = marked.parse(content); - const window = new JSDOM('').window; - const purify = DOMPurify(window); - processedContent = purify.sanitize(rawHtml as string, { - ALLOWED_TAGS: [ - 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', - 'p', 'a', 'ul', 'ol', 'li', 'blockquote', - 'pre', 'code', 'em', 'strong', 'del', - 'hr', 'br', 'img', 'table', 'thead', 'tbody', - 'tr', 'th', 'td', 'div', 'span', 'iframe' - ], - ALLOWED_ATTR: [ - 'class', 'id', 'style', - 'href', 'target', 'rel', - 'src', 'alt', 'title', 'width', 'height', - 'frameborder', 'allowfullscreen' - ], - ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.-]+(?:[^a-z+.-:]|$))/i - }); - } catch (err) { - console.error(`Error processing markdown for slug "${realSlug}":`, err); - processedContent = `
-

Error processing markdown content. Please check the console for details.

- 
${err instanceof Error ? err.message : 'Unknown error'}
-
`; - } - - return { - slug: realSlug, - title: data.title, - date: data.date, - tags: data.tags || [], - summary: data.summary, - content: processedContent, - createdAt: createdAt.toISOString(), - author: (process.env.NEXT_PUBLIC_BLOG_OWNER || 'Anonymous') + "'s", - }; -} - export async function GET( request: Request, { params }: { params: { slug: string[] | string } } ) { - let parser = 'typescript'; - let rustError = ''; try { const slugArr = Array.isArray(params.slug) ? params.slug : [params.slug]; const slugPath = slugArr.join('/'); - let post; - try { - const rustResult = spawnSync( - path.resolve(process.cwd(), 'markdown_backend/target/release/markdown_backend'), - ['show', slugPath], - { encoding: 'utf-8' } - ); - if (rustResult.status === 0 && rustResult.stdout) { - post = JSON.parse(rustResult.stdout); - post.createdAt = post.created_at; - delete post.created_at; - parser = 'rust'; - } else { - rustError = rustResult.stderr || rustResult.error?.toString() || 'Unknown error'; - console.error('[Rust parser error]', rustError); - } - } catch (e) { - rustError = e instanceof Error ? e.message : String(e); - console.error('[Rust parser exception]', rustError); + const rustResult = spawnSync( + path.resolve(process.cwd(), 'markdown_backend/target/release/markdown_backend'), + ['show', slugPath], + { encoding: 'utf-8' } + ); + if (rustResult.status === 0 && rustResult.stdout) { + const post = JSON.parse(rustResult.stdout); + post.createdAt = post.created_at; + delete post.created_at; + return NextResponse.json(post); + } else { + const rustError = rustResult.stderr || rustResult.error?.toString() || 'Unknown error'; + return NextResponse.json({ error: 'Rust parser error', details: rustError }, { status: 500 }); } - if (!post) { - post = await getPostBySlug(slugPath); - } - const response = NextResponse.json(post); - response.headers.set('X-Parser', parser); - if (parser !== 'rust' && rustError) { - response.headers.set('X-Rust-Parser-Error', rustError); - } - return response; } catch (error) { - console.error('Error loading post:', error); return NextResponse.json( - { - error: 'Error loading post', - details: error instanceof Error ? error.message : 'Unknown error' - }, + { error: 'Error loading post', details: error instanceof Error ? error.message : 'Unknown error' }, { status: 500 } ); } diff --git a/src/app/api/posts/stream/route.ts b/src/app/api/posts/stream/route.ts index af6a0a0..3b746b2 100644 --- a/src/app/api/posts/stream/route.ts +++ b/src/app/api/posts/stream/route.ts @@ -1,5 +1,5 @@ import { NextRequest, NextResponse } from 'next/server'; -import { watchPosts, stopWatching } from '@/lib/markdown'; +import { spawn } from 'child_process'; // Prevent static generation of this route export const dynamic = 'force-dynamic'; @@ -37,35 +37,87 @@ export async function GET(request: NextRequest) { return; } - // Set up file watcher if not already set up + // Set up Rust file watcher if not already set up if (clients.size === 1) { try { - watchPosts(() => { - // Notify all connected clients about the update - const message = JSON.stringify({ type: 'update', timestamp: new Date().toISOString() }); - const clientsToRemove: ReadableStreamDefaultController[] = []; + const rustWatcher = spawn( + process.cwd() + '/markdown_backend/target/release/markdown_backend', + ['watch'], + { stdio: ['pipe', 'pipe', 'pipe'] } + ); + + rustWatcher.stdout.on('data', (data) => { + const message = data.toString().trim(); + console.log('Rust watcher output:', message); - clients.forEach(client => { - try { - client.enqueue(`data: ${message}\n\n`); - } catch (error) { - // Mark client for removal - clientsToRemove.push(client); + if (message.includes('Posts directory changed!')) { + // Notify all connected clients about the update + const updateMessage = JSON.stringify({ type: 'update', timestamp: new Date().toISOString() }); + const clientsToRemove: ReadableStreamDefaultController[] = []; + + clients.forEach(client => { + try { + client.enqueue(`data: ${updateMessage}\n\n`); + } catch (error) { + // Mark client for removal + clientsToRemove.push(client); + } + }); + + // Remove disconnected clients + clientsToRemove.forEach(client => { + clients.delete(client); + }); + + // Stop watching if no clients are connected + if (clients.size === 0) { + console.log('No clients connected, stopping watcher'); + rustWatcher.kill(); } - }); - - // Remove disconnected clients - clientsToRemove.forEach(client => { - clients.delete(client); - }); - - // Stop watching if no clients are connected - if (clients.size === 0) { - stopWatching(); } }); + + rustWatcher.stderr.on('data', (data) => { + const errorMessage = data.toString().trim(); + console.error('Rust watcher error:', errorMessage); + + // Don't treat RecvError as a real error - it's expected when the process is terminated + if (!errorMessage.includes('RecvError')) { + // Send error to clients + const errorData = JSON.stringify({ type: 'error', message: errorMessage }); + const clientsToRemove: ReadableStreamDefaultController[] = []; + + clients.forEach(client => { + try { + client.enqueue(`data: ${errorData}\n\n`); + } catch (error) { + clientsToRemove.push(client); + } + }); + + clientsToRemove.forEach(client => { + clients.delete(client); + }); + } + }); + + rustWatcher.on('error', (error) => { + console.error('Rust watcher spawn error:', error); + }); + + rustWatcher.on('close', (code) => { + console.log('Rust watcher closed with code:', code); + // Only restart if we still have clients + if (clients.size > 0) { + console.log('Restarting watcher due to unexpected close'); + // The watcher will be restarted when the next client connects + } + }); + + // Store the watcher process for cleanup + (controller as any).rustWatcher = rustWatcher; } catch (error) { - console.error('Error setting up file watcher:', error); + console.error('Error setting up Rust file watcher:', error); } } @@ -75,16 +127,17 @@ export async function GET(request: NextRequest) { // Stop watching if no clients are connected if (clients.size === 0) { - stopWatching(); + const rustWatcher = (controller as any).rustWatcher; + if (rustWatcher) { + console.log('Last client disconnected, stopping watcher'); + rustWatcher.kill(); + } } }); }, cancel() { - // Handle stream cancellation - we can't access the specific controller here - // The abort event handler will handle cleanup for the specific controller - if (clients.size === 0) { - stopWatching(); - } + // Handle stream cancellation - this is called when the stream is cancelled + // We can't access the specific controller here, so we'll handle cleanup in the abort event } }); diff --git a/src/app/posts/[...slug]/page.tsx b/src/app/posts/[...slug]/page.tsx index 7db7cdb..4032be3 100644 --- a/src/app/posts/[...slug]/page.tsx +++ b/src/app/posts/[...slug]/page.tsx @@ -1,8 +1,9 @@ 'use client'; -import { useEffect, useState, useRef } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import { format } from 'date-fns'; import Link from 'next/link'; +import { useRouter } from 'next/navigation'; interface Post { slug: string; @@ -12,15 +13,9 @@ interface Post { summary: string; content: string; createdAt: string; + author: string; } -// Runtime statistics for parser usage -const parserStats = { - rust: 0, - typescript: 0, - lastRustError: '', -}; - // Add a slugify function that matches Rust's slug::slugify function slugify(text: string): string { return text @@ -33,6 +28,10 @@ function slugify(text: string): string { export default function PostPage({ params }: { params: { slug: string[] } }) { const [post, setPost] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const router = useRouter(); + // Modal state for zoomed image const [zoomImgSrc, setZoomImgSrc] = useState(null); const [zoomLevel, setZoomLevel] = useState(1.5); // Start zoomed in @@ -43,72 +42,14 @@ export default function PostPage({ params }: { params: { slug: string[] } }) { const modalImgRef = useRef(null); const modalContainerRef = useRef(null); - // Prevent background scroll when modal is open - useEffect(() => { - if (zoomImgSrc) { - document.body.style.overflow = 'hidden'; - } else { - document.body.style.overflow = ''; - } - return () => { - document.body.style.overflow = ''; - }; - }, [zoomImgSrc]); - - // Reset offset and zoom when opening a new image - useEffect(() => { - if (zoomImgSrc) { - setImgOffset({ x: 0, y: 0 }); - setZoomLevel(1.5); - } - }, [zoomImgSrc]); - - // Drag logic (mouse) - const handleMouseDown = (e: React.MouseEvent) => { - e.preventDefault(); - setDragging(true); - setDragStart({ x: e.clientX, y: e.clientY }); - setImgStart(imgOffset); - }; - const handleMouseMove = (e: React.MouseEvent) => { - if (!dragging || !dragStart) return; - setImgOffset({ - x: imgStart.x + (e.clientX - dragStart.x), - y: imgStart.y + (e.clientY - dragStart.y), - }); - }; - const handleMouseUp = () => { - setDragging(false); - setDragStart(null); - }; - - // Drag logic (touch) - const handleTouchStart = (e: React.TouchEvent) => { - if (e.touches.length !== 1) return; - setDragging(true); - setDragStart({ x: e.touches[0].clientX, y: e.touches[0].clientY }); - setImgStart(imgOffset); - }; - const handleTouchMove = (e: React.TouchEvent) => { - if (!dragging || !dragStart || e.touches.length !== 1) return; - setImgOffset({ - x: imgStart.x + (e.touches[0].clientX - dragStart.x), - y: imgStart.y + (e.touches[0].clientY - dragStart.y), - }); - }; - const handleTouchEnd = () => { - setDragging(false); - setDragStart(null); - }; - // Join the slug array to get the full path - const slugPath = Array.isArray(params.slug) ? params.slug.join('/') : params.slug; + const slugPath = params.slug.join('/'); useEffect(() => { // Initial load loadPost(); - // Set up Server-Sent Events for real-time updates (optional) + // Set up Server-Sent Events for real-time updates let eventSource: EventSource | null = null; let fallbackInterval: NodeJS.Timeout | null = null; @@ -119,7 +60,7 @@ export default function PostPage({ params }: { params: { slug: string[] } }) { eventSource.onmessage = (event) => { try { const data = JSON.parse(event.data); - if (data.type === 'update' && data.slug === slugPath) { + if (data.type === 'update') { loadPost(); } } catch (error) { @@ -164,729 +105,434 @@ export default function PostPage({ params }: { params: { slug: string[] } }) { }; }, [slugPath]); - // Enhanced anchor scrolling logic - useEffect(() => { - if (!post) return; - - // Function to scroll to element using scrollIntoView - const scrollToElement = (element: HTMLElement) => { - // Get comprehensive element information - const documentHeight = document.documentElement.scrollHeight; - const windowHeight = window.innerHeight; - - // Detect if we're on desktop or mobile layout - const isDesktop = window.innerWidth >= 640; // sm breakpoint - const proseContainer = document.querySelector('.prose'); - - console.log('Layout detection:', { - isDesktop, - windowWidth: window.innerWidth, - proseContainer: proseContainer ? 'found' : 'not found' - }); - - // Get the absolute position of the element - const currentScrollY = window.scrollY; - let elementTop = 0; - - if (isDesktop) { - // For desktop, we need to account for the nested container structure - // The content is inside a container with padding and margins - const rect = element.getBoundingClientRect(); - elementTop = rect.top + currentScrollY; - - // If we're at the top and getting 0, try a different approach - if (elementTop === 0 && currentScrollY === 0) { - // Walk up the DOM tree to calculate position - let currentElement = element; - while (currentElement && currentElement !== document.body) { - elementTop += currentElement.offsetTop; - currentElement = currentElement.offsetParent as HTMLElement; - } - } - } else { - // For mobile, use the simpler approach - const rect = element.getBoundingClientRect(); - elementTop = rect.top + currentScrollY; - } - - // If we're not at the top, temporarily scroll to top to get accurate positions - if (currentScrollY > 0 && elementTop === currentScrollY) { - // Temporarily scroll to top to get accurate element positions - window.scrollTo(0, 0); - - // Wait a moment for the scroll to complete, then measure - setTimeout(() => { - const rect = element.getBoundingClientRect(); - elementTop = rect.top; - - // Restore original scroll position - window.scrollTo(0, currentScrollY); - - // Now perform the actual scroll to the target - performActualScroll(elementTop); - }, 50); - return; - } else { - // We're already at the top or have a valid position, get position directly - if (elementTop === 0 && currentScrollY === 0) { - const rect = element.getBoundingClientRect(); - elementTop = rect.top; - } - performActualScroll(elementTop); - } - - function performActualScroll(elementTop: number) { - console.log('Element details:', { - elementText: element.textContent?.substring(0, 50), - elementId: element.id, - elementTop, - currentScrollY: window.scrollY, - documentHeight, - windowHeight, - canScroll: documentHeight > windowHeight, - isDesktop - }); - - // Check if page is scrollable - if (documentHeight <= windowHeight) { - console.warn('Page is not tall enough to scroll'); - return; - } - - // Calculate the target scroll position with different offsets for desktop/mobile - const offset = isDesktop ? 120 : 100; // Slightly more offset for desktop due to header - const targetScrollY = Math.max(0, elementTop - offset); - - console.log('Scroll calculation:', { - elementTop, - targetScrollY, - offset, - currentScrollY: window.scrollY, - scrollDifference: targetScrollY - window.scrollY, - isDesktop - }); - - // Check if we need to scroll at all - if (Math.abs(window.scrollY - targetScrollY) < 10) { - console.log('Element already at target position, no scroll needed'); - return; - } - - // Use a simple, reliable scroll method - console.log(`Scrolling from ${window.scrollY} to ${targetScrollY}`); - - // Use requestAnimationFrame for smooth scrolling - const startScrollY = window.scrollY; - const scrollDistance = targetScrollY - startScrollY; - const duration = 500; // 500ms - const startTime = performance.now(); - - const animateScroll = (currentTime: number) => { - const elapsed = currentTime - startTime; - const progress = Math.min(elapsed / duration, 1); - - // Easing function (ease-out) - const easeOut = 1 - Math.pow(1 - progress, 3); - - const currentScrollY = startScrollY + (scrollDistance * easeOut); - window.scrollTo(0, currentScrollY); - - if (progress < 1) { - requestAnimationFrame(animateScroll); - } else { - console.log('Scroll animation completed'); - } - }; - - requestAnimationFrame(animateScroll); - - // Log the scroll after a delay to verify it worked - setTimeout(() => { - console.log('Scroll verification - new scrollY:', window.scrollY); - console.log('Scroll difference:', Math.abs(window.scrollY - targetScrollY)); - }, 1000); - } - }; - - // Function to find and scroll to element with retry - const findAndScrollToElement = (id: string, retryCount: number = 0) => { - // First check if the content is rendered - const proseContent = document.querySelector('.prose'); - if (!proseContent || !proseContent.innerHTML.trim()) { - if (retryCount < 10) { - console.log(`Content not yet rendered, retrying... (${retryCount + 1}/10)`); - setTimeout(() => { - findAndScrollToElement(id, retryCount + 1); - }, 100); - return; - } else { - console.warn('Content not rendered after retries'); - return; - } - } - - // Try to find the element by the raw ID first - let allElements = document.querySelectorAll(`#${id}`); - let element: HTMLElement | null = null; - for (const el of Array.from(allElements)) { - const htmlEl = el as HTMLElement; - const rect = htmlEl.getBoundingClientRect(); - const isVisible = rect.width > 0 && rect.height > 0; - if (isVisible) { - element = htmlEl; - break; - } - } - if (element) { - console.log('Found target element (raw id):', element.textContent?.substring(0, 50)); - scrollToElement(element); - return; - } - // If not found, try slugified version - const slugId = slugify(id); - if (slugId !== id) { - allElements = document.querySelectorAll(`#${slugId}`); - for (const el of Array.from(allElements)) { - const htmlEl = el as HTMLElement; - const rect = htmlEl.getBoundingClientRect(); - const isVisible = rect.width > 0 && rect.height > 0; - if (isVisible) { - element = htmlEl; - break; - } - } - if (element) { - console.log('Found target element (slugified id):', element.textContent?.substring(0, 50)); - scrollToElement(element); - return; - } - } - if (retryCount < 5) { - console.log(`Element not found for anchor: ${id}, retrying... (${retryCount + 1}/5)`); - setTimeout(() => { - findAndScrollToElement(id, retryCount + 1); - }, 100); - } else { - console.warn(`Element with id "${id}" (or slugified "${slugId}") not found after retries`); - } - }; - - // Function to handle anchor link clicks - const handleAnchorClick = (event: MouseEvent) => { - const target = event.target as HTMLElement; - const link = target.closest('a'); - - if (!link || !link.getAttribute('href')?.startsWith('#')) return; - - const href = link.getAttribute('href'); - const id = href?.substring(1); - - if (!id) return; - - console.log('Anchor click detected:', href); - - // Prevent default behavior first - event.preventDefault(); - - // Find the target element and scroll to it - findAndScrollToElement(id); - }; - - // Function to handle hash-based scrolling on page load - const handleHashScroll = () => { - if (!window.location.hash) return; - - const id = window.location.hash.substring(1); - console.log('Handling hash scroll for:', id); - - // Use a longer delay to ensure DOM is fully rendered - setTimeout(() => { - findAndScrollToElement(id); - }, 300); - }; - - // Handle initial hash scroll - handleHashScroll(); - - // Add event listener for anchor clicks - document.addEventListener('click', handleAnchorClick); - - // Add a test function to the window object for debugging - (window as any).testScroll = (id: string) => { - console.log('Testing scroll to:', id); - findAndScrollToElement(id); - }; - - // Add a function to test basic scrolling - (window as any).testBasicScroll = () => { - console.log('Testing basic scroll functionality'); - const currentScrollY = window.scrollY; - const testScrollY = currentScrollY + 500; - - console.log('Current scrollY:', currentScrollY); - console.log('Target scrollY:', testScrollY); - - window.scrollTo({ - top: testScrollY, - behavior: 'smooth' - }); - - setTimeout(() => { - console.log('Basic scroll test completed, new scrollY:', window.scrollY); - }, 1000); - }; - - // Add a function to test scrolling to a specific element - (window as any).testElementScroll = (id: string) => { - console.log('Testing scroll to element:', id); - const element = document.getElementById(id); - if (element) { - console.log('Element found, testing scroll...'); - scrollToElement(element); - } else { - console.log('Element not found:', id); - (window as any).listIds(); - } - }; - - // Add a simple test function - (window as any).runAnchorTest = () => { - console.log('Running anchor link test...'); - - // Test 1: Check if we can find the "overview" heading - const overviewElement = document.getElementById('overview'); - if (overviewElement) { - console.log('✅ Found overview element, testing scroll...'); - scrollToElement(overviewElement); - } else { - console.log('❌ Overview element not found'); - } - - // Test 2: Check if we can find the "test-heading" element - setTimeout(() => { - const testHeadingElement = document.getElementById('test-heading'); - if (testHeadingElement) { - console.log('✅ Found test-heading element, testing scroll...'); - scrollToElement(testHeadingElement); - } else { - console.log('❌ Test-heading element not found'); - } - }, 2000); - }; - - // Add a desktop-specific test function - (window as any).testDesktopScroll = () => { - console.log('=== Desktop Scroll Test ==='); - - const isDesktop = window.innerWidth >= 640; - console.log('Layout detection:', { - isDesktop, - windowWidth: window.innerWidth, - windowHeight: window.innerHeight - }); - - // Test scrolling to a known element - const overviewElement = document.getElementById('overview'); - if (overviewElement) { - console.log('Testing desktop scroll to overview...'); - - // Get element position using desktop method - const rect = overviewElement.getBoundingClientRect(); - const elementTop = rect.top + window.scrollY; - - console.log('Desktop position calculation:', { - rectTop: rect.top, - currentScrollY: window.scrollY, - calculatedElementTop: elementTop - }); - - scrollToElement(overviewElement); - } else { - console.log('Overview element not found'); - } - - console.log('=== End Desktop Test ==='); - }; - - // Add a function to list all available IDs - (window as any).listIds = () => { - const allIds = Array.from(document.querySelectorAll('[id]')).map(el => ({ - id: el.id, - text: el.textContent?.substring(0, 50), - tag: el.tagName - })); - console.log('Available IDs on page:', allIds); - return allIds; - }; - - // Add a function to debug anchor links - (window as any).debugAnchors = () => { - console.log('=== Anchor Link Debug ==='); - - // Get all anchor links - const anchorLinks = Array.from(document.querySelectorAll('a[href^="#"]')).map(el => ({ - href: el.getAttribute('href'), - text: el.textContent, - targetId: el.getAttribute('href')?.substring(1) - })); - - console.log('Anchor links found:', anchorLinks); - - // Get all headings with IDs - const headings = Array.from(document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]')).map(el => ({ - id: el.id, - text: el.textContent?.substring(0, 50), - tag: el.tagName, - offsetTop: (el as HTMLElement).offsetTop, - getBoundingClientRect: (el as HTMLElement).getBoundingClientRect() - })); - - console.log('Headings with IDs:', headings); - - // Check which anchor links have matching headings - anchorLinks.forEach(link => { - const hasMatch = headings.some(h => h.id === link.targetId); - const status = hasMatch ? '✅' : '❌'; - console.log(`${status} [${link.text}](#${link.targetId}) -> ${hasMatch ? 'FOUND' : 'NOT FOUND'}`); - }); - - console.log('=== End Debug ==='); - }; - - // Add a function to show element positions - (window as any).showPositions = () => { - console.log('=== Element Positions ==='); - - const headings = Array.from(document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]')); - - // Filter to only visible elements - const visibleHeadings = headings.filter(el => { - const rect = (el as HTMLElement).getBoundingClientRect(); - return rect.width > 0 && rect.height > 0; - }); - - visibleHeadings.forEach((el, index) => { - const element = el as HTMLElement; - - // Calculate absolute position - let elementTop = 0; - let currentElement = element; - while (currentElement && currentElement !== document.body) { - elementTop += currentElement.offsetTop; - currentElement = currentElement.offsetParent as HTMLElement; - } - - console.log(`${index + 1}. ${element.textContent?.substring(0, 30)}:`); - console.log(` ID: ${element.id}`); - console.log(` Calculated elementTop: ${elementTop}`); - console.log(` element.offsetTop: ${element.offsetTop}`); - console.log(` Current scrollY: ${window.scrollY}`); - console.log(` Would scroll to: ${Math.max(0, elementTop - 100)}`); - console.log('---'); - }); - - console.log(`=== End Positions (${visibleHeadings.length} visible elements) ===`); - }; - - // Add a simple test function - (window as any).testScrollToElement = (id: string) => { - // Find visible element with this ID - const allElements = document.querySelectorAll(`#${id}`); - let element: HTMLElement | null = null; - - for (const el of Array.from(allElements)) { - const htmlEl = el as HTMLElement; - const rect = htmlEl.getBoundingClientRect(); - const isVisible = rect.width > 0 && rect.height > 0; - - if (isVisible) { - element = htmlEl; - break; - } - } - - if (element) { - console.log(`Testing scroll to ${id}...`); - - // Calculate position the same way as scrollToElement - let elementTop = 0; - let currentElement = element; - while (currentElement && currentElement !== document.body) { - elementTop += currentElement.offsetTop; - currentElement = currentElement.offsetParent as HTMLElement; - } - - const targetScrollY = Math.max(0, elementTop - 100); - console.log(`Element ${id} is at position ${elementTop}, would scroll to ${targetScrollY}`); - console.log(`Current scroll position: ${window.scrollY}`); - - // Perform the scroll - scrollToElement(element); - } else { - console.log(`Element with id "${id}" not found`); - (window as any).listIds(); - } - }; - - return () => { - document.removeEventListener('click', handleAnchorClick); - delete (window as any).testScroll; - delete (window as any).testBasicScroll; - delete (window as any).testElementScroll; - delete (window as any).listIds; - delete (window as any).debugAnchors; - delete (window as any).showPositions; - delete (window as any).testScrollToElement; - }; - }, [post]); - - // Attach click handler to images in .prose - useEffect(() => { - if (!post) return; - const prose = document.querySelectorAll('.prose'); - const handleImgClick = (e: Event) => { - const target = e.target as HTMLElement; - if (target.tagName === 'IMG') { - setZoomImgSrc((target as HTMLImageElement).src); - setZoomLevel(1.5); - } - }; - prose.forEach((el) => el.addEventListener('click', handleImgClick)); - return () => { - prose.forEach((el) => el.removeEventListener('click', handleImgClick)); - }; - }, [post]); - - // Keyboard ESC to close modal - useEffect(() => { - if (!zoomImgSrc) return; - const onKeyDown = (e: KeyboardEvent) => { - if (e.key === 'Escape') setZoomImgSrc(null); - }; - window.addEventListener('keydown', onKeyDown); - return () => window.removeEventListener('keydown', onKeyDown); - }, [zoomImgSrc]); - - // Zoom controls for desktop - const handleWheel = (e: React.WheelEvent) => { - if (window.innerWidth < 640) return; // skip on mobile - e.preventDefault(); - setZoomLevel((z) => Math.max(0.2, Math.min(5, z + (e.deltaY < 0 ? 0.1 : -0.1)))); - }; - - // Pinch-to-zoom is native on mobile if image is in a scrollable container with touch gestures enabled - const loadPost = async () => { try { + setLoading(true); + setError(null); const response = await fetch(`/api/posts/${encodeURIComponent(slugPath)}`); - const parser = response.headers.get('X-Parser'); - const rustError = response.headers.get('X-Rust-Parser-Error'); - if (parser === 'rust') { - parserStats.rust++; - console.log('%c[Rust Parser] Used for this post.', 'color: green; font-weight: bold'); - } else { - parserStats.typescript++; - console.log('%c[TypeScript Parser] Used for this post.', 'color: orange; font-weight: bold'); - if (rustError) { - parserStats.lastRustError = rustError; - console.warn('[Rust Parser Error]', rustError); - } + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); } - console.info('[Parser Stats]', parserStats); const data = await response.json(); setPost(data); } catch (error) { console.error('Fehler beim Laden des Beitrags:', error); + setError(error instanceof Error ? error.message : 'Unknown error'); + } finally { + setLoading(false); } }; - if (!post) { - return
Lädt...
; + // Handle navigation to previous/next posts + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + if (zoomImgSrc) { + setZoomImgSrc(null); + } else { + router.back(); + } + } + }; + + useEffect(() => { + document.addEventListener('keydown', handleKeyDown); + return () => { + document.removeEventListener('keydown', handleKeyDown); + }; + }, [zoomImgSrc]); + + // Prevent background scroll when modal is open + useEffect(() => { + if (zoomImgSrc) { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = 'unset'; + } + return () => { + document.body.style.overflow = 'unset'; + }; + }, [zoomImgSrc]); + + // Image modal handlers + const handleMouseDown = (e: React.MouseEvent) => { + setDragging(true); + setDragStart({ x: e.clientX, y: e.clientY }); + setImgStart({ x: imgOffset.x, y: imgOffset.y }); + }; + + const handleMouseMove = (e: React.MouseEvent) => { + if (dragging && dragStart) { + const deltaX = e.clientX - dragStart.x; + const deltaY = e.clientY - dragStart.y; + setImgOffset({ + x: imgStart.x + deltaX, + y: imgStart.y + deltaY, + }); + } + }; + + const handleMouseUp = () => { + setDragging(false); + setDragStart(null); + }; + + const handleTouchStart = (e: React.TouchEvent) => { + const touch = e.touches[0]; + setDragging(true); + setDragStart({ x: touch.clientX, y: touch.clientY }); + setImgStart({ x: imgOffset.x, y: imgOffset.y }); + }; + + const handleTouchMove = (e: React.TouchEvent) => { + if (dragging && dragStart) { + const touch = e.touches[0]; + const deltaX = touch.clientX - dragStart.x; + const deltaY = touch.clientY - dragStart.y; + setImgOffset({ + x: imgStart.x + deltaX, + y: imgStart.y + deltaY, + }); + } + }; + + const handleTouchEnd = () => { + setDragging(false); + setDragStart(null); + }; + + // Enhanced anchor scrolling logic + useEffect(() => { + const scrollToElement = (element: HTMLElement) => { + const headerHeight = 80; // Approximate header height + const elementTop = element.offsetTop - headerHeight; + const container = document.documentElement; + const containerHeight = container.clientHeight; + const scrollTop = container.scrollTop; + const elementHeight = element.offsetHeight; + + // Calculate the target scroll position + let targetScrollTop = elementTop; + + // If element is taller than viewport, scroll to show the top + if (elementHeight > containerHeight) { + targetScrollTop = elementTop; + } else { + // Center the element in the viewport + targetScrollTop = elementTop - (containerHeight - elementHeight) / 2; + } + + // Ensure we don't scroll past the top + targetScrollTop = Math.max(0, targetScrollTop); + + // Smooth scroll to the target position + const startTime = performance.now(); + const startScrollTop = scrollTop; + const distance = targetScrollTop - startScrollTop; + const duration = Math.min(Math.abs(distance) * 0.5, 1000); // Dynamic duration based on distance + + function performActualScroll(elementTop: number) { + const currentTime = performance.now(); + const elapsed = currentTime - startTime; + const progress = Math.min(elapsed / duration, 1); + + // Easing function (ease-out) + const easeOut = 1 - Math.pow(1 - progress, 3); + const currentScrollTop = startScrollTop + distance * easeOut; + + container.scrollTop = currentScrollTop; + + if (progress < 1) { + requestAnimationFrame(() => performActualScroll(elementTop)); + } else { + // Final adjustment to ensure we're exactly at the target + container.scrollTop = targetScrollTop; + } + } + + if (duration > 0) { + requestAnimationFrame(() => performActualScroll(elementTop)); + } else { + container.scrollTop = targetScrollTop; + } + }; + + const findAndScrollToElement = (id: string, retryCount: number = 0) => { + const element = document.getElementById(id); + if (element) { + // Small delay to ensure the element is fully rendered + setTimeout(() => scrollToElement(element), 50); + } else if (retryCount < 10) { + // Retry a few times in case the element hasn't been rendered yet + setTimeout(() => findAndScrollToElement(id, retryCount + 1), 100); + } + }; + + // Handle hash in URL on page load + const handleHashScroll = () => { + if (typeof window !== 'undefined') { + const hash = window.location.hash; + if (hash) { + const id = hash.substring(1); + findAndScrollToElement(id); + } + } + }; + + // Handle anchor clicks + const handleAnchorClick = (event: MouseEvent) => { + const target = event.target as HTMLElement; + if (target.tagName === 'A' && target.getAttribute('href')?.startsWith('#')) { + event.preventDefault(); + const href = target.getAttribute('href'); + if (href) { + const id = href.substring(1); + findAndScrollToElement(id); + + // Update URL without page reload + if (typeof window !== 'undefined') { + window.history.pushState(null, '', href); + } + } + } + }; + + // Set up event listeners + document.addEventListener('click', handleAnchorClick); + + // Handle hash scroll on mount and when post changes + if (post) { + handleHashScroll(); + } + + return () => { + document.removeEventListener('click', handleAnchorClick); + }; + }, [post]); + + // Image click handler for modal + useEffect(() => { + const handleImgClick = (e: Event) => { + const target = e.target as HTMLImageElement; + if (target.tagName === 'IMG' && target.src) { + e.preventDefault(); + setZoomImgSrc(target.src); + setImgOffset({ x: 0, y: 0 }); + setZoomLevel(1.5); + } + }; + + const onKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Escape' && zoomImgSrc) { + setZoomImgSrc(null); + } + }; + + document.addEventListener('click', handleImgClick); + document.addEventListener('keydown', onKeyDown); + + return () => { + document.removeEventListener('click', handleImgClick); + document.removeEventListener('keydown', onKeyDown); + }; + }, [zoomImgSrc]); + + // Zoom handler for modal + const handleWheel = (e: React.WheelEvent) => { + e.preventDefault(); + const delta = e.deltaY > 0 ? 0.9 : 1.1; + setZoomLevel(prev => Math.max(0.5, Math.min(3, prev * delta))); + }; + + // Loading state + if (loading) { + return ( +
+
+
+

Lade Beitrag...

+
+
+ ); } + // Error state + if (error) { + return ( +
+
+
⚠️
+

Fehler beim Laden

+

{error}

+ + + + + Zurück zur Startseite + +
+
+ ); + } + + if (!post) { + return ( +
+
+
❌
+

Beitrag nicht gefunden

+

Der angeforderte Beitrag konnte nicht gefunden werden.

+ + + + + Zurück zur Startseite + +
+
+ ); + } + + // Format date + const formatDate = (dateString: string) => { + const date = new Date(dateString); + return date.toLocaleDateString('de-DE', { + year: 'numeric', + month: 'long', + day: 'numeric', + }); + }; + + // Process tags + const renderTags = (tags: string[]) => { + if (!tags || tags.length === 0) return null; + return ( +
+ {tags.map((tag, index) => ( + router.push(`/?tag=${encodeURIComponent(tag)}`)} + > + #{tag} + + ))} +
+ ); + }; + return ( -
+
+ {/* Header */} +
+
+
+ + + + + Zurück zur Startseite + + +
+
+
+ + {/* Main Content */} +
+
+ {/* Post Header */} +
+

+ {post.title} +

+ +
+ + + + {formatDate(post.date)} + • + + + + {post.author} +
+ + {post.summary && ( +

+ {post.summary} +

+ )} + + {renderTags(post.tags)} +
+ + {/* Post Content */} +
+
+
+ {/* Modal for zoomed image */} {zoomImgSrc && (
setZoomImgSrc(null)} + className="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center cursor-grab active:cursor-grabbing" + onMouseDown={handleMouseDown} + onMouseMove={handleMouseMove} + onMouseUp={handleMouseUp} + onMouseLeave={handleMouseUp} + onTouchStart={handleTouchStart} + onTouchMove={handleTouchMove} + onTouchEnd={handleTouchEnd} onWheel={handleWheel} - style={{ touchAction: 'none' }} + onClick={(e) => { + if (e.target === e.currentTarget) { + setZoomImgSrc(null); + } + }} > -
e.stopPropagation()} + Zoomed + - Zoomed - {/* Desktop zoom controls */} - {window.innerWidth >= 640 && ( -
- - - -
- )} -
+ + + +
)} - {/* Mobile: Full width, no borders */} -
- {/* Mobile back button */} -
- - - - - Zurück - -
- - {/* Mobile content - full width, optimized for reading */} -
-

{post.title}

- -
- {post.date ? ( -
Veröffentlicht: {format(new Date(post.date), 'd. MMMM yyyy')}
- ) : ( -
- ⚙️ - In Bearbeitung -
- )} -
Erstellt: {format(new Date(post.createdAt), 'd. MMMM yyyy HH:mm')}
-
- -
- {post.tags.map((tag) => ( - - {tag} - - ))} -
- - {/* Mobile-optimized prose content */} -
-
-
- - {/* Desktop: Wider content area with minimal borders */} -
-
- {/* Desktop back button */} - - - - - Zurück zu den Beiträgen - - - {/* Desktop content with minimal border */} -
-

{post.title}

- -
- {post.date ? ( -
Veröffentlicht: {format(new Date(post.date), 'd. MMMM yyyy')}
- ) : ( -
- ⚙️ - In Bearbeitung -
- )} -
Erstellt: {format(new Date(post.createdAt), 'd. MMMM yyyy HH:mm')}
-
- -
- {post.tags.map((tag) => ( - - {tag} - - ))} -
- - {/* Desktop-optimized prose content */} -
-
-
-
-
+ ); } \ No newline at end of file diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts deleted file mode 100644 index 8f36e2e..0000000 --- a/src/lib/markdown.ts +++ /dev/null @@ -1,272 +0,0 @@ -// This is the frontend Markdown parser. -// It is written in TypeScript -// While I was writing this, only I and God knew how it works. -// Now, only God knows. -// -// If you are trying to understand how it works , and optimize it. Please increse the counter -// -// Hours wasted here: 12 - -import fs from 'fs'; -import path from 'path'; -import matter from 'gray-matter'; -import { marked } from 'marked'; -import DOMPurify from 'dompurify'; -import { JSDOM } from 'jsdom'; -import chokidar from 'chokidar'; -import type { FSWatcher } from 'chokidar'; -import hljs from 'highlight.js'; -import { getPostsDirectory } from './postsDirectory'; - -export interface Post { - slug: string; - title: string; - date: string; - tags: string[]; - summary: string; - content: string; - createdAt: Date; - author: string; -} - -const postsDirectory = getPostsDirectory(); - -// Function to get file creation date -function getFileCreationDate(filePath: string): Date { - const stats = fs.statSync(filePath); - return stats.birthtime; -} - -// Function to generate ID from text (matches frontend logic) -function generateId(text: string): string { - return text - .toLowerCase() - .replace(/[^a-z0-9]+/g, '-') - .replace(/^-+|-+$/g, ''); -} - -// Enhanced slugification function that matches GitHub-style anchor links -function slugify(text: string): string { - return text - .toLowerCase() - .trim() - .replace(/[^\w\s-]/g, '') // Remove special characters except spaces and hyphens - .replace(/[\s_-]+/g, '-') // Replace spaces, underscores, and multiple hyphens with single hyphen - .replace(/^-+|-+$/g, ''); // Remove leading/trailing hyphens -} - -// Function to process anchor links in markdown content -function processAnchorLinks(content: string): string { - // Find all markdown links that point to anchors (e.g., [text](#anchor)) - return content.replace(/\[([^\]]+)\]\(#([^)]+)\)/g, (match, linkText, anchor) => { - // Only slugify if the anchor doesn't already look like a slug - // This prevents double-processing of already-correct anchor links - const isAlreadySlugified = /^[a-z0-9-]+$/.test(anchor); - const slugifiedAnchor = isAlreadySlugified ? anchor : slugify(anchor); - return `[${linkText}](#${slugifiedAnchor})`; - }); -} - -// Utility function to debug anchor links (for development) -export function debugAnchorLinks(content: string): void { - if (process.env.NODE_ENV !== 'development') return; - - console.log('=== Anchor Link Debug Info ==='); - - // Extract all headings and their IDs - const headingRegex = /^(#{1,6})\s+(.+)$/gm; - const headings: Array<{ level: number; text: string; id: string }> = []; - - let match; - while ((match = headingRegex.exec(content)) !== null) { - const level = match[1].length; - const text = match[2].trim(); - const id = slugify(text); - headings.push({ level, text, id }); - } - - console.log('Generated heading IDs:'); - headings.forEach(({ level, text, id }) => { - console.log(` H${level}: "${text}" -> id="${id}"`); - }); - - // Extract all anchor links - const anchorLinkRegex = /\[([^\]]+)\]\(#([^)]+)\)/g; - const anchorLinks: Array<{ linkText: string; originalAnchor: string; slugifiedAnchor: string }> = []; - - while ((match = anchorLinkRegex.exec(content)) !== null) { - const linkText = match[1]; - const originalAnchor = match[2]; - const slugifiedAnchor = slugify(originalAnchor); - anchorLinks.push({ linkText, originalAnchor, slugifiedAnchor }); - } - - console.log('Anchor links found:'); - anchorLinks.forEach(({ linkText, originalAnchor, slugifiedAnchor }) => { - const headingExists = headings.some(h => h.id === slugifiedAnchor); - const status = headingExists ? '✅' : '❌'; - console.log(` ${status} [${linkText}](#${originalAnchor}) -> [${linkText}](#${slugifiedAnchor})`); - }); - - // Show missing headings - const missingAnchors = anchorLinks.filter(({ slugifiedAnchor }) => - !headings.some(h => h.id === slugifiedAnchor) - ); - - if (missingAnchors.length > 0) { - console.warn('Missing headings for these anchor links:'); - missingAnchors.forEach(({ linkText, originalAnchor, slugifiedAnchor }) => { - console.warn(` - [${linkText}](#${originalAnchor}) -> id="${slugifiedAnchor}"`); - }); - } - - console.log('=== End Debug Info ==='); -} - -const renderer = new marked.Renderer(); - -// Custom heading renderer to add IDs -renderer.heading = (text, level) => { - const id = slugify(text); - return `${text}`; -}; - -renderer.code = (code, infostring, escaped) => { - const lang = (infostring || '').match(/\S*/)?.[0]; - const highlighted = lang && hljs.getLanguage(lang) - ? hljs.highlight(code, { language: lang }).value - : hljs.highlightAuto(code).value; - const langClass = lang ? `language-${lang}` : ''; - return `
${highlighted}
`; -}; - -marked.setOptions({ - gfm: true, - breaks: true, - renderer, -}); - -export async function getPostBySlug(slug: string): Promise { - const realSlug = slug.replace(/\.md$/, ''); - const fullPath = path.join(postsDirectory, `${realSlug}.md`); - const fileContents = fs.readFileSync(fullPath, 'utf8'); - const { data, content } = matter(fileContents); - const createdAt = getFileCreationDate(fullPath); - - let processedContent = ''; - try { - // Debug anchor links in development - debugAnchorLinks(content); - - // Process anchor links before parsing markdown - const processedMarkdown = processAnchorLinks(content); - const rawHtml = marked.parse(processedMarkdown); - const window = new JSDOM('').window; - const purify = DOMPurify(window); - processedContent = purify.sanitize(rawHtml as string, { - ALLOWED_TAGS: [ - 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', - 'p', 'a', 'ul', 'ol', 'li', 'blockquote', - 'pre', 'code', 'em', 'strong', 'del', - 'hr', 'br', 'img', 'table', 'thead', 'tbody', - 'tr', 'th', 'td', 'div', 'span', 'iframe' - ], - ALLOWED_ATTR: [ - 'class', 'id', 'style', - 'href', 'target', 'rel', - 'src', 'alt', 'title', 'width', 'height', - 'frameborder', 'allowfullscreen' - ], - ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i - }); - } catch (err) { - console.error(`Error processing markdown for ${realSlug}:`, err); - processedContent = `
-

Error processing markdown content. Please check the console for details.

- 
${err instanceof Error ? err.message : 'Unknown error'}
-
`; - } - - return { - slug: realSlug, - title: data.title, - date: data.date, - tags: data.tags || [], - summary: data.summary, - content: processedContent, - createdAt, - author: process.env.NEXT_PUBLIC_BLOG_OWNER || 'Anonymous', - }; -} - -export async function getAllPosts(): Promise { - const fileNames = fs.readdirSync(postsDirectory); - const allPostsData = await Promise.all( - fileNames - .filter((fileName) => fileName.endsWith('.md')) - .map(async (fileName) => { - const slug = fileName.replace(/\.md$/, ''); - return getPostBySlug(slug); - }) - ); - - // Sort by creation date (newest first) - return allPostsData.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime()); -} - -export async function getPostsByTag(tag: string): Promise { - const allPosts = await getAllPosts(); - return allPosts.filter((post) => post.tags.includes(tag)); -} - -// File watcher setup -let watcher: FSWatcher | null = null; -let onChangeCallback: (() => void) | null = null; - -export function watchPosts(callback: () => void) { - if (watcher) { - watcher.close(); - } - - onChangeCallback = callback; - watcher = chokidar.watch(postsDirectory, { - ignored: [ - /(^|[\/\\])\../, // ignore dotfiles - /node_modules/, - /\.git/, - /\.next/, - /\.cache/, - /\.DS_Store/, - /Thumbs\.db/, - /\.tmp$/, - /\.temp$/ - ], - persistent: true, - ignoreInitial: true, // Don't trigger on initial scan - awaitWriteFinish: { - stabilityThreshold: 1000, // Wait 1 second after file changes - pollInterval: 100 // Check every 100ms - }, - usePolling: false, // Use native file system events when possible - interval: 1000 // Fallback polling interval (only used if native events fail) - }); - - watcher - .on('add', handleFileChange) - .on('change', handleFileChange) - .on('unlink', handleFileChange); -} - -function handleFileChange() { - if (onChangeCallback) { - onChangeCallback(); - } -} - -export function stopWatching() { - if (watcher) { - watcher.close(); - watcher = null; - } - onChangeCallback = null; -} \ No newline at end of file