@rettangoli/sites 0.1.1 → 0.2.0-rc2

package/src/createSiteBuilder.js

@@ -0,0 +1,350 @@
+import { convertToHtml } from 'yahtml';
+import { parseAndRender } from 'jempl';
+import path from 'path';
+import yaml from 'js-yaml';
+
+import MarkdownIt from 'markdown-it';
+
+export function createSiteBuilder({ fs, rootDir = '.', mdRender, functions = {} }) {
+  return function build() {
+    // Use provided mdRender or default to standard markdown-it
+    const md = mdRender || MarkdownIt();
+
+    // Read all partials and create a JSON object
+    const partialsDir = path.join(rootDir, 'partials');
+    const partials = {};
+
+    if (fs.existsSync(partialsDir)) {
+      const files = fs.readdirSync(partialsDir);
+      files.forEach(file => {
+        const filePath = path.join(partialsDir, file);
+        const fileContent = fs.readFileSync(filePath, 'utf8');
+        const nameWithoutExt = path.basename(file, path.extname(file));
+        // Convert partial content from YAML string to JSON
+        partials[nameWithoutExt] = yaml.load(fileContent, { schema: yaml.JSON_SCHEMA });
+      });
+    }
+
+    // Read all data files and create a JSON object
+    const dataDir = path.join(rootDir, 'data');
+    const globalData = {};
+
+    if (fs.existsSync(dataDir)) {
+      const files = fs.readdirSync(dataDir);
+      files.forEach(file => {
+        if (file.endsWith('.yaml') || file.endsWith('.yml')) {
+          const filePath = path.join(dataDir, file);
+          const fileContent = fs.readFileSync(filePath, 'utf8');
+          const nameWithoutExt = path.basename(file, path.extname(file));
+          // Load YAML content and store under filename key
+          globalData[nameWithoutExt] = yaml.load(fileContent, { schema: yaml.JSON_SCHEMA });
+        }
+      });
+    }
+
+    // Read all templates and create a JSON object
+    const templatesDir = path.join(rootDir, 'templates');
+    const templates = {};
+
+    function readTemplatesRecursively(dir, basePath = '') {
+      if (!fs.existsSync(dir)) return;
+
+      const items = fs.readdirSync(dir, { withFileTypes: true });
+
+      items.forEach(item => {
+        const itemPath = path.join(dir, item.name);
+
+        if (item.isDirectory()) {
+          // Recursively read subdirectories
+          const newBasePath = basePath ? `${basePath}/${item.name}` : item.name;
+          readTemplatesRecursively(itemPath, newBasePath);
+        } else if (item.isFile() && item.name.endsWith('.yaml')) {
+          // Read and convert YAML file
+          const fileContent = fs.readFileSync(itemPath, 'utf8');
+          const nameWithoutExt = path.basename(item.name, '.yaml');
+          const templateKey = basePath ? `${basePath}/${nameWithoutExt}` : nameWithoutExt;
+          templates[templateKey] = yaml.load(fileContent, { schema: yaml.JSON_SCHEMA });
+        }
+      });
+    }
+
+    readTemplatesRecursively(templatesDir);
+
+    // Function to extract frontmatter from a page file
+    function extractFrontmatter(pagePath) {
+      const pageFileContent = fs.readFileSync(pagePath, 'utf8');
+      const lines = pageFileContent.split('\n');
+      let frontmatterStart = -1;
+      let frontmatterEnd = -1;
+      let frontmatterCount = 0;
+
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].trim() === '---') {
+          frontmatterCount++;
+          if (frontmatterCount === 1) {
+            frontmatterStart = i + 1;
+          } else if (frontmatterCount === 2) {
+            frontmatterEnd = i;
+            break;
+          }
+        }
+      }
+
+      let frontmatter = {};
+      if (frontmatterStart > 0 && frontmatterEnd > frontmatterStart) {
+        const frontmatterContent = lines.slice(frontmatterStart, frontmatterEnd).join('\n');
+        frontmatter = yaml.load(frontmatterContent, { schema: yaml.JSON_SCHEMA }) || {};
+      }
+
+      return frontmatter;
+    }
+
+    // Function to scan all pages and build collections
+    function buildCollections() {
+      const collections = {};
+      const pagesDir = path.join(rootDir, 'pages');
+
+      function scanPages(dir, basePath = '') {
+        const fullDir = path.join(pagesDir, basePath);
+        if (!fs.existsSync(fullDir)) return;
+
+        const items = fs.readdirSync(fullDir, { withFileTypes: true });
+
+        for (const item of items) {
+          const itemPath = path.join(fullDir, item.name);
+          const relativePath = basePath ? path.join(basePath, item.name) : item.name;
+
+          if (item.isDirectory()) {
+            // Recursively scan subdirectories
+            scanPages(dir, relativePath);
+          } else if (item.isFile() && (item.name.endsWith('.yaml') || item.name.endsWith('.md'))) {
+            // Extract frontmatter
+            const frontmatter = extractFrontmatter(itemPath);
+            
+            // Calculate URL
+            const outputFileName = item.name.replace(/\.(yaml|md)$/, '.html');
+            const outputRelativePath = basePath ? path.join(basePath, outputFileName) : outputFileName;
+            const url = '/' + outputRelativePath.replace(/\\/g, '/');
+
+            // Process tags
+            if (frontmatter.tags) {
+              // Normalize tags to array
+              const tags = Array.isArray(frontmatter.tags) ? frontmatter.tags : [frontmatter.tags];
+              
+              // Add to collections
+              tags.forEach(tag => {
+                if (typeof tag === 'string' && tag.trim()) {
+                  const trimmedTag = tag.trim();
+                  if (!collections[trimmedTag]) {
+                    collections[trimmedTag] = [];
+                  }
+                  collections[trimmedTag].push({
+                    data: frontmatter,
+                    url: url
+                  });
+                }
+              });
+            }
+          }
+        }
+      }
+
+      scanPages('');
+      return collections;
+    }
+
+    // Build collections in first pass
+    console.log('Building collections...');
+    const collections = buildCollections();
+
+    // Function to process a single page file
+    function processPage(pagePath, outputRelativePath, isMarkdown = false) {
+      console.log(`Processing ${pagePath}...`);
+
+      // Read page content
+      const pageFileContent = fs.readFileSync(pagePath, 'utf8');
+
+      // Extract frontmatter and content
+      const lines = pageFileContent.split('\n');
+      let frontmatterStart = -1;
+      let frontmatterEnd = -1;
+      let frontmatterCount = 0;
+
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].trim() === '---') {
+          frontmatterCount++;
+          if (frontmatterCount === 1) {
+            frontmatterStart = i + 1;
+          } else if (frontmatterCount === 2) {
+            frontmatterEnd = i;
+            break;
+          }
+        }
+      }
+
+      // Store frontmatter
+      let frontmatter = {};
+      if (frontmatterStart > 0 && frontmatterEnd > frontmatterStart) {
+        const frontmatterContent = lines.slice(frontmatterStart, frontmatterEnd).join('\n');
+        frontmatter = yaml.load(frontmatterContent, { schema: yaml.JSON_SCHEMA }) || {};
+      }
+
+      // Get content after frontmatter
+      const contentStart = frontmatterEnd + 1;
+      const rawContent = lines.slice(contentStart).join('\n').trim();
+
+      // Merge global data with frontmatter and collections for the page context
+      const pageData = { ...globalData, ...frontmatter, collections };
+
+      let processedPageContent;
+
+      if (isMarkdown) {
+        // Process markdown content with MarkdownIt
+        const htmlContent = md.render(rawContent);
+        // For markdown, store as raw HTML that will be inserted directly
+        processedPageContent = { __html: htmlContent };
+      } else {
+        // Convert YAML content to JSON
+        const pageContent = yaml.load(rawContent, { schema: yaml.JSON_SCHEMA });
+        // Process the page content to resolve any $partial references with page data
+        processedPageContent = parseAndRender(pageContent, pageData, { partials, functions });
+      }
+
+      // Find the template specified in frontmatter
+      let templateToUse = null;
+      if (frontmatter.template) {
+        // Look up template by exact path
+        templateToUse = templates[frontmatter.template];
+        if (!templateToUse) {
+          throw new Error(`Template "${frontmatter.template}" not found in ${pagePath}. Available templates: ${Object.keys(templates).join(', ')}`);
+        }
+      }
+
+      // Use the template with jempl to render the processed page content
+      let htmlString;
+
+      if (isMarkdown) {
+        if (templateToUse) {
+          // For markdown with template, use a placeholder and replace after
+          const placeholder = '___MARKDOWN_CONTENT_PLACEHOLDER___';
+          const templateData = { ...pageData, content: placeholder, collections };
+          const templateResult = parseAndRender(templateToUse, templateData, { partials, functions });
+          htmlString = convertToHtml(templateResult);
+          // Replace the placeholder with actual HTML content
+          htmlString = htmlString.replace(placeholder, processedPageContent.__html);
+        } else {
+          // Markdown without template - use HTML directly
+          htmlString = processedPageContent.__html;
+        }
+      } else {
+        // YAML content
+        const templateData = { ...pageData, content: processedPageContent, collections };
+        const result = templateToUse
+          ? parseAndRender(templateToUse, templateData, { partials, functions })
+          : processedPageContent;
+        // Ensure result is an array for convertToHtml
+        const resultArray = Array.isArray(result) ? result : [result];
+        htmlString = convertToHtml(resultArray);
+      }
+
+      // Create output directory if it doesn't exist
+      const outputPath = path.join(rootDir, '_site', outputRelativePath);
+      const outputDir = path.dirname(outputPath);
+      if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true });
+      }
+
+      // Write HTML to output file
+      fs.writeFileSync(outputPath, htmlString);
+      console.log(`  -> Written to ${outputPath}`);
+    }
+
+    // Process all YAML and Markdown files in pages directory recursively
+    function processAllPages(dir, basePath = '') {
+      const pagesDir = path.join(rootDir, 'pages');
+      const fullDir = path.join(pagesDir, basePath);
+
+      if (!fs.existsSync(fullDir)) return;
+
+      const items = fs.readdirSync(fullDir, { withFileTypes: true });
+
+      for (const item of items) {
+        const itemPath = path.join(fullDir, item.name);
+        const relativePath = basePath ? path.join(basePath, item.name) : item.name;
+
+        if (item.isDirectory()) {
+          // Recursively process subdirectories
+          processAllPages(dir, relativePath);
+        } else if (item.isFile()) {
+          if (item.name.endsWith('.yaml')) {
+            // Process YAML file
+            const outputFileName = item.name.replace('.yaml', '.html');
+            const outputRelativePath = basePath ? path.join(basePath, outputFileName) : outputFileName;
+            processPage(itemPath, outputRelativePath, false);
+          } else if (item.name.endsWith('.md')) {
+            // Process Markdown file
+            const outputFileName = item.name.replace('.md', '.html');
+            const outputRelativePath = basePath ? path.join(basePath, outputFileName) : outputFileName;
+            processPage(itemPath, outputRelativePath, true);
+          }
+          // Ignore other file types
+        }
+      }
+    }
+
+    // Function to copy static files recursively
+    function copyStaticFiles() {
+      const staticDir = path.join(rootDir, 'static');
+      const outputDir = path.join(rootDir, '_site');
+      
+      if (!fs.existsSync(staticDir)) {
+        return;
+      }
+      
+      // Ensure output directory exists
+      if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true });
+      }
+      
+      function copyRecursive(src, dest) {
+        const stats = fs.statSync(src);
+        
+        if (stats.isDirectory()) {
+          // Create directory if it doesn't exist
+          if (!fs.existsSync(dest)) {
+            fs.mkdirSync(dest, { recursive: true });
+          }
+          
+          // Copy all items in directory
+          const items = fs.readdirSync(src);
+          items.forEach(item => {
+            copyRecursive(path.join(src, item), path.join(dest, item));
+          });
+        } else if (stats.isFile()) {
+          // Copy file
+          fs.copyFileSync(src, dest);
+          console.log(`  -> Copied ${src} to ${dest}`);
+        }
+      }
+      
+      console.log('Copying static files...');
+      const items = fs.readdirSync(staticDir);
+      items.forEach(item => {
+        const srcPath = path.join(staticDir, item);
+        const destPath = path.join(outputDir, item);
+        copyRecursive(srcPath, destPath);
+      });
+    }
+
+    // Start build process
+    console.log('Starting build process...');
+    
+    // Copy static files first (they can be overwritten by pages)
+    copyStaticFiles();
+    
+    // Process all pages (can overwrite static files)
+    processAllPages('');
+    
+    console.log('Build complete!');
+  };
+}

package/src/index.js

@@ -0,0 +1,3 @@
+export { createSiteBuilder } from './createSiteBuilder.js';
+export { createRtglMarkdown } from './rtglMarkdown.js';
+export { default as rtglMarkdown } from './rtglMarkdown.js';

package/src/rtglMarkdown.js

@@ -0,0 +1,126 @@
+import MarkdownIt from 'markdown-it';
+
+// Simple slug generation function
+function generateSlug(text) {
+  return text
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/[\s_-]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}
+
+/**
+ * Custom Markdown renderer configuration for Rettangoli
+ * Adds rtgl-specific elements and styling
+ */
+export const createRtglMarkdown = () => {
+  const md = MarkdownIt({
+    // Additional configuration can be added here
+  });
+
+  // Header configuration
+  md.renderer.rules.heading_open = (tokens, idx, options, env, self) => {
+    const token = tokens[idx];
+    const level = token.markup.length;
+    const inlineToken = tokens[idx + 1];
+    const headingText = inlineToken.content;
+    const id = generateSlug(headingText);
+
+    // Map heading levels to size values
+    const sizes = { 1: "h1", 2: "h2", 3: "h3", 4: "h4" };
+    const size = sizes[level] || "md";
+
+    return `<rtgl-text id="${id}" mt="lg" s="${size}" mb="md"> <a href="#${id}" style="display: contents;">`;
+  };
+
+  md.renderer.rules.heading_close = () => "</a></rtgl-text>\n";
+
+  // Paragraph configuration
+  md.renderer.rules.paragraph_open = (tokens, idx, options, env, self) => {
+    // Check if we're inside a list item
+    let isInListItem = false;
+    for (let i = idx - 1; i >= 0; i--) {
+      if (tokens[i].type === 'list_item_open') {
+        isInListItem = true;
+        break;
+      }
+      if (tokens[i].type === 'list_item_close') {
+        break;
+      }
+    }
+    
+    // Don't wrap paragraphs in list items with rtgl-text
+    if (isInListItem) {
+      return '';
+    }
+    return `<rtgl-text s="bl" mb="lg">`;
+  };
+  
+  md.renderer.rules.paragraph_close = (tokens, idx, options, env, self) => {
+    // Check if we're inside a list item
+    let isInListItem = false;
+    for (let i = idx - 1; i >= 0; i--) {
+      if (tokens[i].type === 'list_item_open') {
+        isInListItem = true;
+        break;
+      }
+      if (tokens[i].type === 'list_item_close') {
+        break;
+      }
+    }
+    
+    // Don't wrap paragraphs in list items with rtgl-text
+    if (isInListItem) {
+      return '\n';
+    }
+    return "</rtgl-text>\n";
+  };
+
+  // Table configuration
+  md.renderer.rules.table_open = () => '<rtgl-view w="f">\n<table>';
+  md.renderer.rules.table_close = () => "</table>\n</rtgl-view>";
+
+  // Link configuration - add target="_blank" to all external links
+  md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+    const token = tokens[idx];
+    const targetIndex = token.attrIndex("target");
+    const href =
+      (token.attrs && token.attrs.find((attr) => attr[0] === "href")?.[1]) ||
+      "";
+    const isExternal = href.startsWith("http") || href.startsWith("//");
+
+    // If this is an external link or already has target="_blank"
+    if (isExternal || targetIndex >= 0) {
+      if (targetIndex < 0) {
+        token.attrPush(["target", "_blank"]);
+      }
+      token.attrPush(["rel", "noreferrer"]);
+
+      // Find the next text token to use for the aria-label
+      let nextIdx = idx + 1;
+      let textContent = "";
+      while (nextIdx < tokens.length && tokens[nextIdx].type !== "link_close") {
+        if (tokens[nextIdx].type === "text") {
+          textContent += tokens[nextIdx].content;
+        }
+        nextIdx++;
+      }
+
+      // Add aria-label for external links
+      if (textContent.trim() && token.attrIndex("aria-label") < 0) {
+        token.attrPush([
+          "aria-label",
+          `${textContent.trim()} (opens in new tab)`,
+        ]);
+      }
+    }
+
+    return self.renderToken(tokens, idx, options);
+  };
+
+  return md;
+};
+
+// Export a default instance for convenience
+export default createRtglMarkdown();

package/src/cli/components/core/articlelist.html

@@ -1,19 +0,0 @@
-<rtgl-text><a href="{{ back.href }}" aria-label="{{ back.text }}">{{ back.text }}</a></rtgl-text>
-<rtgl-text s="h2" mt="l">{{ title }}</rtgl-text>
-<rtgl-view mt="l">
-  {{ subtitle }}
-</rtgl-view>
-<rtgl-view g="l" mt="xl">
-  {%- for item in items -%}
-
-  <rtgl-view w="f" d="h" av="c">
-    {% if item.date %}
-    <rtgl-view d="h" w="120">
-      <rtgl-text>{{ item.date | postDate }}</rtgl-text>
-    </rtgl-view>
-    {% endif %}
-    <rtgl-text s="lg"><a href="{{ item.url }}">{{ item.title }}</a></rtgl-text>
-  </rtgl-view>
-
-  {%- endfor -%}
-</rtgl-view>

package/src/cli/components/core/cta1.html

@@ -1,9 +0,0 @@
-<rtgl-view w="f" ph="xl">
-  <rtgl-view w="f" ah="c" bw="s" br="l" p="xl">
-    <rtgl-text s="h3" ta="c" mt="l"> {{ cta.title }} </rtgl-text>
-    <rtgl-text mt="l" ta="c" c="mu-fg"> {{ cta.description }} </rtgl-text>
-    <rtgl-button mt="xl" href="{{ cta.cta.href }}" target="_blank" rel="noreferrer"> {{
-      cta.cta.text
-      }} </rtgl-button>
-  </rtgl-view>
-</rtgl-view>

package/src/cli/components/core/features1.html

@@ -1,24 +0,0 @@
-<rtgl-view d="h" h="64"></rtgl-view>
-<rtgl-view pv="xl" mv="xl" mh="l" g="xl" ah="c">
-  <rtgl-text s="h2" at="c"> {{ feature.title }} </rtgl-text>
-  <rtgl-view d="h" w="f" g="xl" av="c" mt="l">
-    <rtgl-view flex="2" mb="m" g="m" style="min-width: 320px;">
-      <rtgl-text s="bl" mt="l"> {{ feature.description }} </rtgl-text>
-      <ul>
-        <rtgl-view >
-          {%- for item in feature.items -%}
-          <li>
-            <rtgl-view>
-              <rtgl-text mt="l"><b> {{ item.label }}:</b> {{ item.description }} </rtgl-text>
-            </rtgl-view>
-          </li>
-          {%- endfor -%}
-        </rtgl-view>
-      </ul>
-    </rtgl-view>
-    <rtgl-view flex="3" style="min-width: 320px; overflow: hidden;" bw="xs" br="s">
-      <rtgl-image src="{{ feature.picture }}" w="f" alt="{{ feature.imageAlt | default: feature.title }}"></rtgl-image>
-    </rtgl-view>
-  </rtgl-view>
-</rtgl-view>
-<rtgl-view d="h" h="64"></rtgl-view>

package/src/cli/components/core/hero1.html

@@ -1,4 +0,0 @@
-<rtgl-view ah="c" w="f">
-  <rtgl-text s="h1"> {{ hero.title }} </rtgl-text>
-  <rtgl-text s="lg" mt="l" at="c"> {{ hero.message }} <rtgl-text>
-</rtgl-view>

package/src/cli/components/core/hero2.html

@@ -1,31 +0,0 @@
-{%- if hero.video -%}
-<rtgl-view h="8vh"></rtgl-view>
-{%- else -%}
-<rtgl-view h="20vh"></rtgl-view>
-{%- endif -%}
-<rtgl-view w="f" pv="xl" av="c" ah="c" ph="xl">
-  <rtgl-text s="h1" ta="c" mb="lg"> {{ hero.title }} </rtgl-text>
-  {%- for subtitle in hero.subtitles -%}
-  <rtgl-text s="lg" ta="c"> {{ subtitle }} </rtgl-text>
-  {%- endfor -%}
-  {%- if hero.cta -%}
-  <rtgl-button mt="xl" href="{{ hero.cta.href }}" {% if hero.cta.openNewTab %}target="_blank" rel="noreferrer"{% endif %}> {{
-    hero.cta.text
-    }} </rtgl-button>
-  {%- endif -%}
-</rtgl-view>
-
-{%- if hero.video-%}
-<rtgl-view w="f" ah="c" mt="xl">
-
-  <rtgl-view lg-h="calc((100vw - 32px) / 1.777)" lg-w="calc(100vw - 32px)" h="calc(66.66vw / 1.777)" w="66.66vw" 
-    bw="xs" br="xs" shadow="sm">
-    <video playsinline loop controls width="100%" aria-label="{{ hero.video.title | default: 'Video content' }}">
-      <source src="{{ hero.video.url }}" type="video/mp4">
-    </video>
-  </rtgl-view>
-</rtgl-view>
-{%- else -%}
-<rtgl-view h="20vh">
-</rtgl-view>
-{%- endif -%}

package/src/cli/components/core/sectionlist1.html

@@ -1,15 +0,0 @@
-<rtgl-view g="m" w="f" mt="xl">
-  <rtgl-text s="h3">{{ sectionTitle }}</rtgl-text>
-  <rtgl-view g="l" w="f">
-    {% for item in items %}
-    <a href="{{ item.href }}" style="display: contents; color: inherit;">
-      <rtgl-view bgc="mu" bw="s" br="m" p="m" w="f" g="xs">
-        <rtgl-view d="h" g="m">
-          <rtgl-text s="h4">{{ item.label }}</rtgl-text>
-        </rtgl-view>
-        <rtgl-text>{{ item.description }}</rtgl-text>
-      </rtgl-view>
-    </a>
-    {% endfor %}
-  </rtgl-view>
-</rtgl-view>

package/src/cli/components/core/spacer.html

@@ -1 +0,0 @@
-<rtgl-view h="{{ height }}"></rtgl-view>

package/src/cli/components/core/table1.html

@@ -1,2 +0,0 @@
-<rtgl-table columns="{{ columns | json-escaped  }}" rows="{{ rows | json-escaped }}" id="xxx">
-</rtgl-table>

package/src/cli/templates/core/admin.html

@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  {% include "core/htmlHeader.html" %}
-  {% include "core/htmlHeaderTable.html" %}
-</head>
-
-<body class="dark">
-  <rtgl-view w="f" ah="c" h="f">
-    <rtgl-view d="h" w="f" h="f">
-      <rtgl-sidebar title="{{ docs.title | json-escaped }}" items="{{ admin.items | json-escaped }}"></rtgl-sidebar>
-      <rtgl-view h="100vh" w="f" sv id="content-container" ph="l">
-          {{ content }}
-          <rtgl-view h="50vh"></rtgl-view>
-      </rtgl-view>
-    </rtgl-view>
-  </rtgl-view>
-</body>
-
-</html>