@rettangoli/sites 0.1.1 → 0.2.0-rc2

package/README.md

@@ -1,103 +1,295 @@
-# Sitic
+# Rettangoli Sites
 
-Generate static sites using Markdown and YAML. Straightforward, zero-complexity. Complete toolkit for landing pages, blogs, documentation, admin dashboards, and more.
+A straightforward, zero-complexity static site generator that uses Markdown and YAML to build websites. Perfect for landing pages, blogs, documentation, admin dashboards, and more.
 
 ## Features
 
-- **Content-First Approach**: Write content in Markdown, structure with YAML
-- **No HTML/JS Required**: Create complex sites without writing a single line of code
-- **Versatile**: Build landing pages, documentation, blogs, admin dashboards, slides and more
-- **Component-Based**: Reusable components for consistent design
-- **Template System**: Liquid templates for flexible layouts
-- **Customizable**: Create custom components and templates
+- 🚀 **Zero Configuration** - Works out of the box with sensible defaults
+- 📝 **Markdown & YAML** - Write content in familiar formats
+- 🎨 **Full-featured** - Templates, partials, collections, global data, nested pages, static assets, and extensible architecture
+
+## Installation
+
+```bash
+npm install -g rtgl
+```
 
 ## Quick Start
 
-1. Create a project structure:
+### 1. Create Your Project Structure
 
 ```
 my-site/
-├── sitic/
-│   ├── data.yaml      # Global site data
-│   ├── templates      # Tempaltes
-│   ├── components     # Components
-│   └── records/       # Data records (optional)
-└── pages/             # Your content pages
-    ├── index.md
-    └── about.md
+├── pages/           # Your content (YAML and Markdown files)
+├── templates/       # Reusable page templates (YAML)
+├── partials/        # Reusable components (YAML)
+├── data/            # Global data files (YAML)
+├── static/          # Static assets (CSS, JS, images)
+└── _site/           # Generated output (created automatically)
 ```
 
-2. Create a simple page (index.md):
+### 2. Create Your First Page
 
-```markdown
+**pages/index.yaml**
+```yaml
 ---
-layout: core/base
-title: My Site
+title: Welcome
+template: base
 ---
+- heading: Welcome to My Site
+- paragraph: This is a simple static site built with Rettangoli Sites.
+```
+
+### 3. Create a Template
+
+**templates/base.yaml**
+```yaml
+- tag: html
+  children:
+    - tag: head
+      children:
+        - tag: title
+          children: $title
+    - tag: body
+      children: $content
+```
 
-```yaml components
-- component: core/hero1
-  data:
-    hero:
-      subtitle: Welcome
-      message: This is my first Sitic site
-- component: core/spacer
-  data:
-    height: 50
-- component: core/features1
-  data:
-    features:
-      - title: Easy to Use
-        description: Just write Markdown and YAML
-      - title: Fast
-        description: Generate static sites quickly
-      - title: Flexible
-        description: Create any type of site
-```
-
-3. Build your site:
+### 4. Build Your Site
 
 ```bash
-sitic build
+npx rtgl sites build
 ```
 
 Your site will be generated in the `_site` directory.
 
-## CLI Options
+## Core Concepts
 
-```bash
-# Basic usage
-sitic build
+### Pages
+
+Pages are the content of your site. They can be either:
+- **YAML files** (`.yaml`) - Structured content with components
+- **Markdown files** (`.md`) - Rich text content with frontmatter
+
+Every page can have frontmatter (metadata) at the top:
+
+```yaml
+---
+title: My Page Title
+template: base
+tags: [blog, tutorial]
+---
+```
+
+### Templates
+
+Templates define the HTML structure for your pages. They're YAML files that describe HTML elements and can include dynamic content using the `$` prefix.
 
-# Specify custom directories
-sitic build --resources ./custom-sitic-folder
+**Example template:**
+```yaml
+- tag: article
+  children:
+    - tag: h1
+      children: $title
+    - tag: div
+      class: content
+      children: $content
 ```
 
-## Component System
+Templates can be organized in subdirectories:
+- `templates/base.yaml` → Referenced as `template: base`
+- `templates/blog/post.yaml` → Referenced as `template: blog/post`
+
+### Partials
 
-Siti uses a component-based approach that allows you to build complex layouts using simple YAML:
+Partials are reusable components that can be included in pages and templates using `$partial`:
 
+**partials/header.yaml**
 ```yaml
-- component: core/hero1
-  data:
-    hero:
-      subtitle: Section Title
-      message: Your message here
+- tag: header
+  children:
+    - tag: nav
+      children:
+        - tag: a
+          href: /
+          children: Home
+        - tag: a
+          href: /about
+          children: About
 ```
 
-## Templates
+**Using in a page:**
+```yaml
+- $partial: header
+- heading: Welcome
+```
+
+### Data Files
+
+Global data files in the `data/` directory are automatically loaded and available in all pages and templates.
 
-The template system uses Liquid for flexible layouts. Create custom templates in the `templates` directory.
+**data/site.yaml**
+```yaml
+name: My Awesome Site
+author: John Doe
+social:
+  twitter: johndoe
+  github: johndoe
+```
 
-## Examples
+**Access in templates:**
+```yaml
+- tag: footer
+  children: 
+    - text: "© 2024 "
+    - text: $site.author
+```
 
-Check out the `examples` directory for complete site examples, including:
+### Collections
 
-- Landing pages
-- Documentation sites
-- Blogs
-- Admin dashboards
+Collections group related content using tags. Any page with a `tags` field in its frontmatter becomes part of a collection.
 
-## License
+**pages/blog/post-1.md**
+```markdown
+---
+title: My First Post
+tags: blog
+date: 2024-01-15
+---
+# Hello World
+This is my first blog post.
+```
 
-MIT
+**pages/blog-index.yaml**
+```yaml
+---
+title: Blog
+---
+- heading: Recent Posts
+- ul:
+    - $for post in collections.blog:
+        li:
+          - 'a href="${post.url}"':
+              - ${post.data.title}
+```
+
+### Static Files
+
+Everything in the `static/` directory is copied directly to the output:
+- `static/css/style.css` → `_site/css/style.css`
+- `static/images/logo.png` → `_site/images/logo.png`
+- `static/app.js` → `_site/app.js`
+
+## Advanced Features
+
+### Nested Pages
+
+Create subdirectories in `pages/` to organize your content:
+- `pages/index.yaml` → `_site/index.html`
+- `pages/about.yaml` → `_site/about.html`
+- `pages/blog/post-1.md` → `_site/blog/post-1.html`
+- `pages/docs/api/reference.yaml` → `_site/docs/api/reference.html`
+
+### Markdown Support
+
+Markdown files can use frontmatter and templates:
+
+```markdown
+---
+title: My Blog Post
+template: blog/post
+tags: [blog, tutorial]
+author: Jane Doe
+---
+# Introduction
+
+This is a **markdown** post with *formatting*.
+
+## Code Example
+
+\`\`\`javascript
+console.log('Hello, World!');
+\`\`\`
+```
+
+### Custom Markdown Renderer
+
+Configure a custom markdown renderer in `sites.config.js`:
+
+```javascript
+import MarkdownIt from 'markdown-it';
+import hljs from 'highlight.js';
+
+const md = MarkdownIt({
+  highlight: function (str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      return hljs.highlight(str, { language: lang }).value;
+    }
+    return '';
+  }
+});
+
+export default {
+  mdRender: md
+}
+```
+
+### Dynamic Content with Jempl
+
+Rettangoli Sites uses [Jempl](https://github.com/yuusoft-org/jempl) for templating, which provides powerful features for dynamic content including variable replacement, conditionals, loops, and partials.
+
+For detailed syntax and usage examples, please refer to the [Jempl documentation](https://github.com/yuusoft-org/jempl).
+
+
+## Example Projects
+
+### Blog Site Structure
+```
+blog-site/
+├── pages/
+│   ├── index.yaml          # Homepage
+│   ├── about.md            # About page
+│   └── blog/
+│       ├── index.yaml      # Blog listing
+│       ├── 2024-01-15-first-post.md
+│       └── 2024-01-20-second-post.md
+├── templates/
+│   ├── base.yaml           # Main layout
+│   └── blog/
+│       ├── post.yaml       # Blog post template
+│       └── listing.yaml    # Blog list template
+├── partials/
+│   ├── header.yaml
+│   ├── footer.yaml
+│   └── post-card.yaml
+├── data/
+│   └── site.yaml           # Site metadata
+└── static/
+    ├── css/
+    │   └── style.css
+    └── images/
+        └── logo.png
+```
+
+### Documentation Site Structure
+```
+docs-site/
+├── pages/
+│   ├── index.yaml
+│   └── docs/
+│       ├── getting-started.md
+│       ├── api/
+│       │   ├── overview.md
+│       │   └── reference.yaml
+│       └── guides/
+│           ├── installation.md
+│           └── configuration.md
+├── templates/
+│   ├── base.yaml
+│   └── docs.yaml
+├── partials/
+│   ├── nav.yaml
+│   └── sidebar.yaml
+└── static/
+    └── css/
+        └── docs.css
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/sites",
-  "version": "0.1.1",
+  "version": "0.2.0-rc2",
   "description": "Generate static sites using Markdown and YAML. Straightforward, zero-complexity. Complete toolkit for landing pages, blogs, documentation, admin dashboards, and more.git remote add origin git@github.com:yuusoft-org/sitic.git",
   "author": {
     "name": "Luciano Hanyon Wu",
@@ -17,22 +17,19 @@
     "templates"
   ],
   "dependencies": {
-    "commander": "^13.1.0",
-    "html-minifier-terser": "^7.2.0",
+    "jempl": "^0.2.0-rc1",
     "js-yaml": "^4.1.0",
-    "liquidjs": "^10.21.0",
-    "luxon": "^3.6.1",
     "markdown-it": "^14.1.0",
-    "markdown-it-async": "^2.2.0",
-    "shiki": "^3.3.0"
+    "yahtml": "^0.0.2-rc1"
   },
   "devDependencies": {
-    "@types/bun": "^1.2.8"
+    "memfs": "^4.36.0",
+    "puty": "^0.0.4"
   },
-  "type": "module",
-  "bin": {
-    "sitic": "src/cli.js"
+  "scripts": {
+    "test": "vitest run --reporter=verbose"
   },
+  "type": "module",
   "license": "MIT",
   "keywords": [
     "static",

package/src/cli/build.js

@@ -1,166 +1,34 @@
-import { join, dirname } from "path";
-import { fileURLToPath } from "url";
-import { DateTime } from "luxon";
-
-// Create the equivalent of __dirname for ES modules
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-import {
-  safeYamlLoad,
-  safeReadFile,
-  deepMerge,
-  createTemplateRenderer,
-  createFolderIfNotExists,
-  configureMarkdown,
-  loadCollections,
-  createFileFormatHandlers,
-  loadItems,
-  copyDirRecursive,
-} from "../common.js";
-import { rm } from "fs/promises";
+import fs from 'fs';
+import path from 'path';
+import { createSiteBuilder } from '../createSiteBuilder.js';
 
 /**
- * Copy pages to site with processing
- * @param {Object} options - Options for copying pages
- * @param {string} options.resourcesPath - Path to resources directory
- * @param {string} options.pagesPath - Path to pages directory
- * @param {string} options.outputPath - Path to output directory
+ * Build the static site
+ * @param {Object} options - Options for building the site
+ * @param {string} options.rootDir - Root directory of the site (defaults to cwd)
+ * @param {Object} options.mdRender - Optional markdown renderer
  */
-export const copyPagesToSite = async (options) => {
-  const {
-    resourcesPath = "./sitic",
-    pagesPath = "./pages",
-    outputPath = "./_site",
-  } = options;
-
-  const dataPath = join(resourcesPath, "data.yaml");
-  const templatesPath = join(resourcesPath, "templates");
-  const componentsPath = join(resourcesPath, "components");
-  const recordsPath = join(resourcesPath, "records");
-
-  // Load hello.yaml template data
-  const inputYaml = await safeReadFile(dataPath);
-
-  const templates = await loadItems({
-    path: join(__dirname, "./templates"),
-    name: "templates",
-    isYaml: false,
-    keepExtension: true,
-  });
-
-  if (templatesPath) {
-    const customTemplates = await loadItems({
-      path: templatesPath,
-      name: "templates",
-      isYaml: false,
-      keepExtension: true,
-    });
-    Object.assign(templates, customTemplates);
+export const buildSite = async (options = {}) => {
+  const { rootDir = process.cwd(), mdRender } = options;
+  
+  // Try to load config file if it exists
+  let config = {};
+  if (!mdRender) {
+    try {
+      const configPath = path.join(rootDir, 'sites.config.js');
+      const configModule = await import(configPath);
+      config = configModule.default || {};
+    } catch (e) {
+      // Config file is optional, continue without it
+    }
   }
 
-  // Load data
-  const records = await loadItems({
-    path: recordsPath,
-    name: "records",
-    isYaml: true,
+  const build = createSiteBuilder({ 
+    fs, 
+    rootDir,
+    mdRender: mdRender || config.mdRender,
+    functions: config.functions || {}
   });
-
-  const components = await loadItems({
-    path: join(__dirname, "./components"),
-    name: "components",
-    isYaml: false,
-  });
-
-  if (componentsPath) {
-    const customComponents = await loadItems({
-      path: componentsPath,
-      name: "components",
-      isYaml: false,
-    });
-    Object.assign(components, customComponents);
-  }
-
-  const collections = await loadCollections(pagesPath);
-
-  const liquidParse = createTemplateRenderer({
-    templates,
-    filters: {
-      json: (obj) => JSON.stringify(obj),
-      "json-escaped": (obj) => {
-        if (!obj) {
-          return "";
-        }
-        return encodeURIComponent(JSON.stringify(obj));
-      },
-      postDate: (dateObj) => {
-        if (!dateObj || typeof dateObj !== 'string') {
-          return ''; // Return empty string or some default value if dateObj is undefined or not a string
-        }
-        try {
-          return DateTime.fromFormat(dateObj, "yyyy-MM-dd").toLocaleString(
-            DateTime.DATE_MED
-          );
-        } catch (error) {
-          console.error(`Error formatting date "${dateObj}":`, error.message);
-          return dateObj; // Return the original date string if parsing fails
-        }
-      },
-    },
-  });
-
-  let data;
-  try {
-    data = safeYamlLoad(liquidParse(inputYaml, { collections }));
-  } catch (error) {
-    console.error("Error creating template renderer:", error);
-    throw error;
-  }
-
-  // Create global data object for templates
-  const globalData = {
-    data,
-    collections,
-    records,
-  };
-
-  const yamlComponentRenderer = (content) => {
-    const renderedContent = liquidParse(content, globalData);
-    const yamlContent = safeYamlLoad(renderedContent);
-
-    return yamlContent
-      .map(({ component, data }) => {
-        const foundComponent = components[component];
-        if (!foundComponent) {
-          throw new Error(`Component not found for ${component}`);
-        }
-        return liquidParse(foundComponent, deepMerge(globalData, data));
-      })
-      .join("\n");
-  };
-
-  const md = configureMarkdown({
-    yamlComponentRenderer,
-  });
-
-  const fileFormatHandlers = createFileFormatHandlers({
-    basePath: pagesPath,
-    templates,
-    liquidParse,
-    data: globalData.data,
-    collections,
-    md,
-  });
-
-  try {
-    await rm(outputPath, { recursive: true, force: true });
-    await createFolderIfNotExists(outputPath);
-    await copyDirRecursive(pagesPath, outputPath, fileFormatHandlers);
-    console.log(`Pages copied from ${pagesPath} to ${outputPath} successfully`);
-  } catch (error) {
-    console.error(
-      `Error copying pages from ${pagesPath} to ${outputPath}:`,
-      error
-    );
-  }
-};
+  
+  build();
+};

package/src/cli/index.js

@@ -1,5 +1,5 @@
-import { copyPagesToSite } from './build.js';
+import { buildSite } from './build.js';
 
 export {
-  copyPagesToSite,
+  buildSite,
 }