@rettangoli/sites 0.1.0

package/README.md

@@ -0,0 +1,103 @@
+# Sitic
+
+Generate static sites using Markdown and YAML. Straightforward, zero-complexity. Complete toolkit 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
+
+## Quick Start
+
+1. Create a 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
+```
+
+2. Create a simple page (index.md):
+
+```markdown
+---
+layout: core/base
+title: My Site
+---
+
+```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:
+
+```bash
+sitic build
+```
+
+Your site will be generated in the `_site` directory.
+
+## CLI Options
+
+```bash
+# Basic usage
+sitic build
+
+# Specify custom directories
+sitic build --resources ./custom-sitic-folder
+```
+
+## Component System
+
+Siti uses a component-based approach that allows you to build complex layouts using simple YAML:
+
+```yaml
+- component: core/hero1
+  data:
+    hero:
+      subtitle: Section Title
+      message: Your message here
+```
+
+## Templates
+
+The template system uses Liquid for flexible layouts. Create custom templates in the `templates` directory.
+
+## Examples
+
+Check out the `examples` directory for complete site examples, including:
+
+- Landing pages
+- Documentation sites
+- Blogs
+- Admin dashboards
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@rettangoli/sites",
+  "version": "0.1.0",
+  "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",
+    "email": "han4wluc@yuusoft.com"
+  },
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./cli": "./src/cli/index.js"
+  },
+  "files": [
+    "src",
+    "components",
+    "templates"
+  ],
+  "dependencies": {
+    "commander": "^13.1.0",
+    "html-minifier-terser": "^7.2.0",
+    "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"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.2.8"
+  },
+  "type": "module",
+  "bin": {
+    "sitic": "src/cli.js"
+  },
+  "license": "MIT",
+  "keywords": [
+    "static",
+    "site",
+    "generator",
+    "markdown",
+    "yaml",
+    "landing",
+    "page",
+    "blog",
+    "documentation",
+    "admin",
+    "dashboard"
+  ],
+  "bugs": {
+    "url": "https://github.com/yuusoft-org/sitic/issues"
+  },
+  "homepage": "https://github.com/yuusoft-org/sitic#readme"
+}

package/src/cli/build.js

@@ -0,0 +1,166 @@
+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";
+
+/**
+ * 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
+ */
+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);
+  }
+
+  // Load data
+  const records = await loadItems({
+    path: recordsPath,
+    name: "records",
+    isYaml: true,
+  });
+
+  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
+    );
+  }
+};

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

@@ -0,0 +1,19 @@
+<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

@@ -0,0 +1,9 @@
+<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

@@ -0,0 +1,24 @@
+<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

@@ -0,0 +1,4 @@
+<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

@@ -0,0 +1,31 @@
+{%- 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

@@ -0,0 +1,15 @@
+<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

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

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

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

package/src/cli/index.js

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

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

@@ -0,0 +1,21 @@
+<!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>

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

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {% include "core/htmlHeader.html" %}
+</head>
+
+<body>
+  <rtgl-view bgc="su" w="f" ah="c">
+    <rtgl-view md-w="100vw" lg-w="768" w="1024" p="lg">
+      {% include "core/navbar.html" %}
+      <rtgl-view h="48"></rtgl-view>
+      <rtgl-text s="dm" mt="lg">Agreements</rtgl-text>
+      
+
+      <rtgl-text s="tl" mt="lg">Current Effective Agreements</rtgl-text>
+
+      <rtgl-view h="24"></rtgl-view>
+
+      {%- for agreement in collections['agreement'] -%}
+        {%- if agreement.status == 'Effective' -%}
+        <rtgl-view h="32" av="c" mt="lg">
+          <rtgl-text s="ll">
+            <a href="{{ agreement.url }}">{{ agreement.title }} {{ agreement.version }}</a>
+          </rtgl-text>
+        </rtgl-view>
+        {%- endif -%}
+      {%- endfor -%}
+
+
+      <rtgl-view h="48"></rtgl-view>
+      <rtgl-text s="tl">Past agreements changelog</rtgl-text>
+
+      <rtgl-view h="32" av="c" mt="lg">
+        <rtgl-text s="tm">
+          Privacy Policy
+        </rtgl-text>
+      </rtgl-view>
+
+      <rtgl-view w="calc(100vw - 32px)" sh>
+        <rtgl-view w="640px">
+          <rtgl-view d="h">
+            <rtgl-view w="120"><rtgl-text s="bm">Version</rtgl-text></rtgl-view>
+            <rtgl-view w="120"><rtgl-text s="bm">Effective Date</rtgl-text></rtgl-view>
+            <rtgl-view w="120"><rtgl-text s="bm">Status</rtgl-text></rtgl-view>
+            <rtgl-view w="240"><rtgl-text s="bm">Changes</rtgl-text></rtgl-view>
+          </rtgl-view>
+
+          {%- for agreement in collections['privacy-policy'] -%}
+          <rtgl-view d="h">
+            <rtgl-view w="120"><rtgl-text s="bm"><a href="{{ agreement.url }}">{{ agreement.version
+                  }}</a></rtgl-text></rtgl-view>
+            <rtgl-view w="120"><rtgl-text s="bm">{{ agreement.effective_date | postDate }}</rtgl-text></rtgl-view>
+            <rtgl-view w="120"><rtgl-text s="bm">{{ agreement.status }}</rtgl-text></rtgl-view>
+            <rtgl-view w="240"><rtgl-text s="bm">
+                {%- for change in agreement.summary_of_changes -%}
+                <li>{{ change }}</li>
+                {%- endfor -%}
+              </rtgl-text></rtgl-view>
+          </rtgl-view>
+          {%- endfor -%}
+        </rtgl-view>
+      </rtgl-view>
+
+      <rtgl-view h="32" av="c" mt="lg">
+        <rtgl-text s="tm">
+          Terms of Service
+        </rtgl-text>
+      </rtgl-view>
+
+      <rtgl-view w="calc(100vw - 32px)" sh>
+        <rtgl-view w="640px">
+          <rtgl-view d="h">
+            <rtgl-view w="120"><rtgl-text s="bm">Version</rtgl-text></rtgl-view>
+            <rtgl-view w="120"><rtgl-text s="bm">Effective Date</rtgl-text></rtgl-view>
+            <rtgl-view w="120"><rtgl-text s="bm">Status</rtgl-text></rtgl-view>
+            <rtgl-view w="240"><rtgl-text s="bm">Changes</rtgl-text></rtgl-view>
+          </rtgl-view>
+
+          {%- for agreement in collections['terms-of-service'] -%}
+          <rtgl-view d="h">
+            <rtgl-view w="120"><rtgl-text s="bm"><a href="{{ agreement.url }}">{{ agreement.version
+                  }}</a></rtgl-text></rtgl-view>
+            <rtgl-view w="120"><rtgl-text s="bm">{{ agreement.effective_date | postDate }}</rtgl-text></rtgl-view>
+            <rtgl-view w="120"><rtgl-text s="bm">{{ agreement.status }}</rtgl-text></rtgl-view>
+            <rtgl-view w="240"><rtgl-text s="bm">
+                {%- for change in agreement.summary_of_changes -%}
+                <li>{{ change }}</li>
+                {%- endfor -%}
+              </rtgl-text></rtgl-view>
+          </rtgl-view>
+          {%- endfor -%}
+        </rtgl-view>
+      </rtgl-view>
+    </rtgl-view>
+
+    {% include "core/footer.html" %}
+  </rtgl-view>
+
+</body>
+
+</html>

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

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {% include "core/htmlHeader.html" %}
+</head>
+
+<body class="dark">
+  <rtgl-view id="top" bgc="su" w="f" ah="c">
+    <rtgl-view md-w="100vw" w="768" p="lg">
+      <rtgl-view h="72"></rtgl-view>
+      <rtgl-text><a href="{{ layoutConfiguration.back.href | default: "/" }}">{{ layoutConfiguration.back.label | default: "Back" }}
+        </a></rtgl-text>
+      <rtgl-text s="h1" mt="lg"><a href="#" style="display: contents;">{{ title }}</a></rtgl-text>
+      {% if date %}
+      <rtgl-text mt="sm">{{ date | postDate }}</rtgl-text>
+      {% endif %}
+      <rtgl-view mt="lg" id="content-container" w="f">
+        {{ content }}
+        <rtgl-view h="128"></rtgl-view>
+        <rtgl-view w="f" ah="c">
+          <rtgl-text s="lg"><a href="#top">Back to top</a></rtgl-text>
+        </rtgl-view>
+      </rtgl-view>
+    </rtgl-view>
+
+    <rtgl-view pos="fix" cor="right" style="top: 32px" sv w="256" h="100vh" p="xl" g="lg" xl-hidden>
+      <rtgl-page-outline id="page-outline"></rtgl-page-outline>
+    </rtgl-view>
+    {% include "core/footer.html" %}
+    {% include "core/navbar.html" %}
+  </rtgl-view>
+</body>
+
+</html>

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

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {% include "core/htmlHeader.html" %}
+</head>
+
+{% assign base_template_size_attrs = "w=\"768\"" %}
+{% unless layoutConfiguration.size == "small" %}
+  {% assign base_template_size_attrs = "w=\"1024\" lg-w=\"768\"" %}
+{% endunless %}
+
+<body class="dark">
+  <rtgl-view h="48"></rtgl-view>
+  <rtgl-view w="f" ah="c">
+    <rtgl-view 
+      md-w="100vw"
+      {{ base_template_size_attrs }}
+      ph="lg" 
+      pb="lg">
+      {{ content }}
+    </rtgl-view>
+    {% include "core/footer.html" %}
+  </rtgl-view>
+  {% include "core/navbar.html" %}
+</body>
+
+</html>

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

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {% include "core/htmlHeader.html" %}
+</head>
+
+<body class="dark">
+  <rtgl-view bgc="bg" w="f" ah="c" h="f">
+    <rtgl-view d="h" w="f" h="f">
+      <rtgl-view md-hidden h="100vh">
+        <rtgl-sidebar header="{{ docs.header | json-escaped }}" items="{{ docs.items | json-escaped }}"></rtgl-sidebar>
+      </rtgl-view>
+      <rtgl-view flex="1" ah="c" h="100vh">
+        <rtgl-view pv="lg" md-w="100vw" w="720" ph="xl" sv id="content-container">
+          <rtgl-text s="h1" mb="md">{{ title }}</rtgl-text>
+          {{ content }}
+          <rtgl-view h="50vh"></rtgl-view>
+        </rtgl-view>
+      </rtgl-view>
+      <rtgl-view sv w="256" h="100vh" p="xl" g="lg" xl-hidden>
+        <rtgl-page-outline id="page-outline" target-id="content-container"></rtgl-page-outline>
+      </rtgl-view>
+    </rtgl-view>
+  </rtgl-view>
+</body>
+
+</html>