@rettangoli/sites 0.2.7 → 1.0.0-rc10

package/src/markdownItAsync.js

@@ -0,0 +1,104 @@
+/**
+ * Adapted from https://github.com/antfu/markdown-it-async
+ */
+
+import MarkdownIt from 'markdown-it';
+
+const placeholder = (id, code) => `<pre><!--::markdown-it-async::${id}::--><code>${code}</code></pre>`;
+const placeholderRe = /<pre><!--::markdown-it-async::(\w+)::--><code>[\s\S]*?<\/code><\/pre>/g;
+const wrappedSet = new WeakSet();
+
+function randStr() {
+  return Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
+}
+
+function escapeHtml(unsafe) {
+  return unsafe
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+function wrapHighlight(highlight, map) {
+  if (!highlight) {
+    return undefined;
+  }
+
+  if (wrappedSet.has(highlight)) {
+    return highlight;
+  }
+
+  const wrapped = (str, lang, attrs) => {
+    const result = highlight(str, lang, attrs);
+    if (typeof result === 'string') {
+      return result;
+    }
+
+    const id = randStr();
+    map.set(id, [result, str, lang, attrs]);
+    const escapedCode = escapeHtml(str.endsWith('\n') ? str.slice(0, -1) : str);
+    return placeholder(id, escapedCode);
+  };
+
+  wrappedSet.add(wrapped);
+  return wrapped;
+}
+
+async function replaceAsync(string, searchValue, replacer) {
+  const values = [];
+  String.prototype.replace.call(string, searchValue, (...args) => {
+    values.push(replacer(...args));
+    return '';
+  });
+
+  const resolvedValues = await Promise.all(values);
+  return String.prototype.replace.call(string, searchValue, () => resolvedValues.shift() || '');
+}
+
+export class MarkdownItAsync extends MarkdownIt {
+  constructor(...args) {
+    const options = args.length === 2 ? args[1] : args[0];
+    const map = new Map();
+
+    if (options && 'highlight' in options) {
+      options.highlight = wrapHighlight(options.highlight, map);
+    }
+
+    super(...args);
+    this.placeholderMap = map;
+    this.disableWarn = false;
+  }
+
+  render(src, env) {
+    if (this.options.warnOnSyncRender && !this.disableWarn) {
+      console.warn('[markdown-it-async] Please use `md.renderAsync` instead of `md.render`');
+    }
+    return super.render(src, env);
+  }
+
+  async renderAsync(src, env) {
+    this.options.highlight = wrapHighlight(this.options.highlight, this.placeholderMap);
+    this.disableWarn = true;
+    const result = this.render(src, env);
+    this.disableWarn = false;
+
+    return replaceAsync(result, placeholderRe, async (_match, id) => {
+      const item = this.placeholderMap.get(id);
+      if (!item) {
+        throw new Error(`Unknown highlight placeholder id: ${id}`);
+      }
+      const [promise] = item;
+      const highlighted = (await promise) || '';
+      this.placeholderMap.delete(id);
+      return highlighted;
+    });
+  }
+}
+
+export function createMarkdownItAsync(...args) {
+  return new MarkdownItAsync(...args);
+}
+
+export default createMarkdownItAsync;

package/src/rtglMarkdown.js

@@ -1,22 +1,161 @@
-// Custom slug generation function
-function slugify(text) {
-  return text
+import { codeToHtml } from 'shiki';
+import { createMarkdownItAsync } from './markdownItAsync.js';
+
+function resolveHeadingAnchorOptions(input) {
+  if (input === false) {
+    return { enabled: false, slugMode: 'unicode', wrap: true, fallback: 'section' };
+  }
+
+  if (input === true || input == null) {
+    return { enabled: true, slugMode: 'unicode', wrap: true, fallback: 'section' };
+  }
+
+  const candidate = typeof input === 'object' && !Array.isArray(input) ? input : {};
+  const fallback = typeof candidate.fallback === 'string' && candidate.fallback.trim()
+    ? candidate.fallback.trim()
+    : 'section';
+
+  return {
+    enabled: candidate.enabled !== undefined ? !!candidate.enabled : true,
+    slugMode: candidate.slugMode === 'ascii' ? 'ascii' : 'unicode',
+    wrap: candidate.wrap !== undefined ? !!candidate.wrap : true,
+    fallback
+  };
+}
+
+function resolveCodePreviewOptions(input) {
+  if (input === false || input == null) {
+    return { enabled: false, showSource: true, theme: undefined };
+  }
+
+  if (input === true) {
+    return { enabled: true, showSource: true, theme: undefined };
+  }
+
+  if (typeof input === 'object' && !Array.isArray(input)) {
+    const theme = typeof input.theme === 'string' && input.theme.trim()
+      ? input.theme.trim()
+      : undefined;
+    return {
+      enabled: input.enabled !== undefined ? !!input.enabled : true,
+      showSource: input.showSource !== undefined ? !!input.showSource : true,
+      theme
+    };
+  }
+
+  return { enabled: false, showSource: true, theme: undefined };
+}
+
+function hasCodePreviewAttribute(attrs) {
+  if (typeof attrs !== 'string') {
+    return false;
+  }
+  return attrs
+    .split(/\s+/)
+    .map((item) => item.trim())
+    .filter(Boolean)
+    .includes('codePreview');
+}
+
+function renderCodePreviewLayout(code, highlightedCode, showSource = true) {
+  if (!showSource) {
+    return `
+        <rtgl-view class="rtgl-code-preview" w="f" bw="xs" br="md">
+          <rtgl-view w="f" d="h">
+          ${highlightedCode}
+          </rtgl-view>
+        </rtgl-view>`;
+  }
+
+  return `
+        <rtgl-view class="rtgl-code-preview" w="f" bw="xs" br="md">
+          <rtgl-view w="f" p="lg">
+          ${code}
+          </rtgl-view>
+          <rtgl-view h="1" w="f" bgc="bo"></rtgl-view>
+          <rtgl-view w="f" d="h">
+          ${highlightedCode}
+          </rtgl-view>
+        </rtgl-view>`;
+}
+
+function slugify(text, { slugMode = 'unicode', fallback = 'section' } = {}) {
+  const normalized = String(text || '')
     .toLowerCase()
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
     .trim()
-    .replace(/[^\w\s-]/g, '') // Remove non-word chars (except spaces and hyphens)
+    .replace(
+      slugMode === 'ascii' ? /[^a-z0-9\s-]/g : /[^\p{Letter}\p{Number}\s-]/gu,
+      ''
+    )
     .replace(/\s+/g, '-') // Replace spaces with hyphens
     .replace(/--+/g, '-') // Replace multiple hyphens with single hyphen
     .replace(/^-+/, '') // Remove leading hyphens
     .replace(/-+$/, '') // Remove trailing hyphens
+
+  return normalized || fallback;
 }
 
-export default function configureMarkdown(markdownit) {
-  const md = markdownit({
-    html: true,
-    linkify: true,
-    typographer: false
+export function createRtglMarkdown(_markdownit, options = {}) {
+  const {
+    preset = 'default',
+    html = true,
+    xhtmlOut = false,
+    linkify = true,
+    typographer = false,
+    breaks = false,
+    langPrefix = 'language-',
+    quotes = '\u201c\u201d\u2018\u2019',
+    maxNesting = 100,
+    shiki = {},
+    headingAnchors = true,
+    codePreview = false
+  } = options;
+  const headingAnchorOptions = resolveHeadingAnchorOptions(headingAnchors);
+  const codePreviewOptions = resolveCodePreviewOptions(codePreview);
+
+  const shikiEnabled = typeof shiki.enabled === 'boolean' ? shiki.enabled : true;
+  const shikiTheme = typeof shiki.theme === 'string' ? shiki.theme : 'slack-dark';
+
+  const md = createMarkdownItAsync(preset, {
+    html,
+    xhtmlOut,
+    linkify,
+    typographer,
+    breaks,
+    langPrefix,
+    quotes,
+    maxNesting,
+    ...(shikiEnabled
+      ? {
+          async highlight(code, lang, attrs) {
+            try {
+              const isCodePreview = codePreviewOptions.enabled && hasCodePreviewAttribute(attrs);
+              const highlightTheme = isCodePreview
+                ? (codePreviewOptions.theme || shikiTheme)
+                : shikiTheme;
+              const highlightedCode = await codeToHtml(code, {
+                lang: lang || 'text',
+                theme: highlightTheme
+              });
+              if (isCodePreview) {
+                return renderCodePreviewLayout(code, highlightedCode, codePreviewOptions.showSource);
+              }
+              return highlightedCode;
+            } catch {
+              return '';
+            }
+          }
+        }
+      : {}),
+    warnOnSyncRender: false
   })
 
+  if (!headingAnchorOptions.enabled) {
+    return md;
+  }
+
   // Override heading renderer to add IDs and wrap with anchor links
   const defaultHeadingRender = md.renderer.rules.heading_open || function (tokens, idx, options, env, renderer) {
     return renderer.renderToken(tokens, idx, options)
@@ -27,17 +166,25 @@ export default function configureMarkdown(markdownit) {
   }
 
   md.renderer.rules.heading_open = function (tokens, idx, options, env, renderer) {
+    env = env || {};
     const token = tokens[idx]
     const nextToken = tokens[idx + 1]
-    let slug = ''
+    let slug = headingAnchorOptions.fallback
 
     if (nextToken && nextToken.type === 'inline') {
       const headingText = nextToken.content
-      slug = slugify(headingText)
-      token.attrSet('id', slug)
+      const baseSlug = slugify(headingText, headingAnchorOptions)
+      const headingCounts = env.__rtglHeadingSlugCounts || (env.__rtglHeadingSlugCounts = new Map())
+      const nextCount = (headingCounts.get(baseSlug) || 0) + 1
+      headingCounts.set(baseSlug, nextCount)
+      slug = nextCount === 1 ? baseSlug : `${baseSlug}-${nextCount}`
     }
 
+    token.attrSet('id', slug)
     const headingHtml = defaultHeadingRender(tokens, idx, options, env, renderer)
+    if (!headingAnchorOptions.wrap) {
+      return headingHtml
+    }
     return `<a href="#${slug}" style="display: contents; text-decoration: none; color: inherit;">` + headingHtml
   }
 
@@ -46,4 +193,6 @@ export default function configureMarkdown(markdownit) {
   }
 
   return md
-}
+}
+
+export default createRtglMarkdown;

package/src/screenshotRunner.js

@@ -1,171 +1,7 @@
-import http from 'node:http';
-import path from 'node:path';
-import fs from 'node:fs';
-import { existsSync } from 'node:fs';
-import { buildSite } from './cli/build.js';
-import { createScreenshotCapture } from './screenshot.js';
-import { loadSiteConfig } from './utils/loadSiteConfig.js';
-
-function getContentType(ext) {
-  const types = {
-    '.html': 'text/html',
-    '.css': 'text/css',
-    '.js': 'application/javascript',
-    '.json': 'application/json',
-    '.png': 'image/png',
-    '.jpg': 'image/jpeg',
-    '.gif': 'image/gif',
-    '.svg': 'image/svg+xml',
-    '.ico': 'image/x-icon'
-  };
-  return types[ext] || 'application/octet-stream';
-}
-
-function serveFile(filePath, res, skipWebSocket = false) {
-  const ext = path.extname(filePath);
-  const contentType = getContentType(ext);
-  
-  try {
-    const content = fs.readFileSync(filePath);
-    res.writeHead(200, { 'Content-Type': contentType });
-    res.end(content);
-  } catch (err) {
-    console.error('Error serving file:', err);
-    res.writeHead(500);
-    res.end('Internal Server Error');
-  }
-}
-
-function handleRequest(req, res, siteDir = '_site') {
-  const urlParts = req.url.split('?');
-  let urlPath = urlParts[0];
-  const queryString = urlParts[1] || '';
-  
-  // Check if this is a screenshot request
-  const isScreenshotRequest = queryString.includes('screenshot=true');
-  
-  // Default to index.html for root
-  if (urlPath === '/') {
-    urlPath = '/index.html';
-  }
-  
-  // Handle trailing slash - remove it for processing
-  const hasTrailingSlash = urlPath.endsWith('/') && urlPath !== '/';
-  if (hasTrailingSlash) {
-    urlPath = urlPath.slice(0, -1);
-  }
-  
-  // Handle paths without extensions
-  if (!path.extname(urlPath)) {
-    // First try as .html file
-    const htmlPath = path.join(siteDir, urlPath + '.html');
-    if (existsSync(htmlPath)) {
-      urlPath = urlPath + '.html';
-    } else {
-      // Try as directory with index.html
-      const indexPath = path.join(siteDir, urlPath, 'index.html');
-      if (existsSync(indexPath)) {
-        urlPath = path.join(urlPath, 'index.html');
-      }
-    }
-  }
-  
-  const filePath = path.join(siteDir, urlPath);
-  
-  // Check if file exists
-  if (!existsSync(filePath)) {
-    res.writeHead(404);
-    res.end('404 Not Found');
-    return;
-  }
-  
-  // Check if it's a directory
-  const stats = fs.statSync(filePath);
-  if (stats.isDirectory()) {
-    // Try to serve index.html from the directory
-    const indexPath = path.join(filePath, 'index.html');
-    if (existsSync(indexPath)) {
-      return serveFile(indexPath, res, isScreenshotRequest);
-    } else {
-      res.writeHead(404);
-      res.end('404 Not Found');
-      return;
-    }
-  }
-  
-  // Serve the file
-  serveFile(filePath, res, isScreenshotRequest);
-}
-
-function createTempServer(port = 3001, siteDir = '_site') {
-  const httpServer = http.createServer((req, res) => {
-    handleRequest(req, res, siteDir);
-  });
-
-  const start = () => {
-    return new Promise((resolve, reject) => {
-      httpServer.listen(port, '0.0.0.0', () => {
-        console.log(`📡 Temp server running at http://localhost:${port}/`);
-        resolve();
-      });
-
-      httpServer.on('error', reject);
-    });
-  };
-
-  const close = () => {
-    return new Promise((resolve) => {
-      httpServer.close(() => {
-        console.log('📡 Temp server closed');
-        resolve();
-      });
-    });
-  };
-
-  return { start, close };
-}
-
-const screenshotCommand = async (options = {}) => {
-  const { 
-    port = 3001,
-    rootDir = '.'
-  } = options;
-
-  console.log('📸 Starting screenshot capture for all pages...');
-
-  // Load config to get ignore patterns
-  const config = await loadSiteConfig(rootDir, false);
-  const ignorePatterns = config?.screenshots?.ignore || [];
-  
-  if (ignorePatterns.length > 0) {
-    console.log('📋 Ignore patterns:', ignorePatterns);
-  }
-
-  // Build the site first (with screenshot mode enabled)
-  console.log('Building site...');
-  await buildSite({ rootDir, isScreenshotMode: true });
-  console.log('Build complete');
-
-  // Start temporary server
-  const server = createTempServer(port);
-  await server.start();
-
-  // Initialize screenshot capture
-  const screenshotCapture = await createScreenshotCapture(port);
-
-  try {
-    // Capture screenshots for all pages
-    const pagesDir = path.join(rootDir, 'pages');
-    await screenshotCapture.captureAllPages(pagesDir, { ignorePatterns });
-    
-    console.log('✅ All screenshots captured successfully!');
-  } catch (error) {
-    console.error('❌ Error capturing screenshots:', error);
-  } finally {
-    // Clean up
-    await screenshotCapture.close();
-    await server.close();
-  }
+const screenshotCommand = async () => {
+  throw new Error(
+    'Screenshot CLI for @rettangoli/sites was removed. Use "rtgl vt generate" with "vt.url" and optional "vt.service.start".',
+  );
 };
 
-export default screenshotCommand;
+export default screenshotCommand;