@rettangoli/sites 0.1.0

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

@@ -0,0 +1,34 @@
+{% if footer %}
+<rtgl-view d="h" h="30vh"></rtgl-view>
+<rtgl-view h="1" w="f"></rtgl-view>
+<rtgl-view g="lg" d="h" p="lg" md-w="100vw" lg-w="768" w="1024" pv="xl">
+  <rtgl-view g="xl" flex="1" ah="sm">
+    <a href="/" aria-label="Home" style="display: contents; text-decoration: none; color: inherit;"><rtgl-image h="{{ footer.logo.height }}"
+        w="{{ footer.logo.width }}" src="{{ footer.logo.src }}" alt="{{ footer.logo.alt | default: 'Company logo' }}">
+      </rtgl-image></a>
+    <rtgl-view d="h" g="l" av="c">
+      {%- for social in footer.social -%}
+      <a href="{{ social.href }}" target="_blank" rel="noreferrer" aria-label="Visit our {{ social.name }} page"
+        style="display: contents; text-decoration: none; color: inherit;">
+        <rtgl-svg h-cur="p" f="on-su" svg="{{ social.svg }}" wh="20">
+        </rtgl-svg>
+      </a>
+      {%- endfor -%}
+    </rtgl-view>
+  </rtgl-view>
+
+  <rtgl-view d="h" flex="2">
+    {%- for feature in footer.columns -%}
+    <rtgl-view d="h" flex="1" ah="c">
+      <rtgl-view g="lg">
+        {%- for link in feature.links -%}
+        <rtgl-text s="bm" c="on-suv"> <a href="{{ link.href }}" {% if link.newTab %}target="_blank" rel="noreferrer" {%
+            endif %}> <u> {{ link.text }} </u></a> </rtgl-text>
+        {%- endfor -%}
+      </rtgl-view>
+    </rtgl-view>
+    {%- endfor -%}
+  </rtgl-view>
+
+</rtgl-view>
+{% endif %}

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

@@ -0,0 +1,41 @@
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>{{ title }}</title>
+<meta name="description" content="{{ og.description }}" />
+<link rel="canonical" href="{{ baseUrl | append: url }}" />
+<link rel="icon" type="image/x-icon" href="/public/favicon.png">
+
+<!-- Open Graph tags -->
+<meta property="og:title" content="{{ og.title | default: title }}" />
+<meta property="og:description" content="{{ og.description }}" />
+<meta property="og:site_name" content="{{ og.siteName }}" />
+<meta property="og:type" content="{{ og.type }}" />
+<meta property="og:url" content="{{ baseUrl | append: url }}" />
+<meta property="og:image" content="{{ og.image }}" />
+<meta property="og:image:width" content="{{ og.imageWidth | default: '1200' }}" />
+<meta property="og:image:height" content="{{ og.imageHeight | default: '630' }}" />
+<meta property="og:image:alt" content="{{ og.imageAlt }}" />
+<meta property="og:image:type" content="{{ og.imageType }}" />
+
+<!-- Twitter Card tags -->
+<meta name="twitter:card" content="{{ twitter.card | default: 'summary_large_image' }}" />
+<meta name="twitter:title" content="{{ og.title }}" />
+<meta name="twitter:description" content="{{ og.description }}" />
+<meta name="twitter:image" content="{{ og.image }}" />
+<meta name="twitter:image:alt" content="{{ og.imageAlt }}" />
+
+<!-- Styles and scripts -->
+<script src="/public/rtgl-icons.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/construct-style-sheets-polyfill@3.1.0/dist/adoptedStyleSheets.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@rettangoli/ui@0.1.0-rc2/dist/rettangoli-iife-ui.min.js"></script>
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    if (location.hash) {
+      const el = document.getElementById(location.hash.substring(1));
+      if (el) {
+        el.scrollIntoView({ behavior: 'auto' });
+      }
+    }
+  });
+</script>
+<link href="/public/theme.css" rel="stylesheet" />

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

@@ -0,0 +1,113 @@
+<script type="module" defer>
+import { html, render } from 'https://cdn.jsdelivr.net/npm/uhtml@4.7.0/+esm'
+const RettangoliTable = ({ render, html, baseClass }) => {
+  const MyClass = baseClass || HTMLElement;
+  return class RettangoliTable extends MyClass {
+    columns = [];
+    rows = [];
+
+    constructor() {
+      super();
+      this.shadow = this.attachShadow({ mode: "closed" });
+    }
+
+    connectedCallback() {
+      render(this.shadow, this.render);
+    }
+
+    static get observedAttributes() {
+      return ["key", "wh", "w", "h", "hidden", "s-w", "s-h", "s-d"];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+      setTimeout(() => {
+        render(this.shadow, this.render);
+      }, 0);
+    }
+
+    render = () => {
+      const columnsAttribute = this.getAttribute('columns')
+      const rowsAttribute = this.getAttribute('rows')
+      const columns = this.columns || columnsAttribute ? JSON.parse(decodeURIComponent(columnsAttribute)) : [];
+      const rows = this.rows || rowsAttribute ? JSON.parse(decodeURIComponent(rowsAttribute)) : [];
+
+      if (columns.length === 0) {
+        return html`
+          <rtgl-view h="f" w="f" bgc="su">
+            <rtgl-text s="ll">No data</rtgl-text>
+          </rtgl-view>
+        `;
+      }
+
+      return html`
+        <rtgl-view sh h="calc(100vh - 48px)" w="calc(100vw - 200px - 32px)">
+          <rtgl-view
+            bgc="bg"
+            d="h"
+            style="flex-wrap: nowrap; position: sticky; top: 0; z-index: 2;"
+          >
+            ${columns.map((column, index) => {
+              const isFirst = index === 0;
+              const style = isFirst
+                ? "overflow-wrap: anywhere; position: sticky; left: 0; z-index: 3;"
+                : "overflow-wrap: anywhere; ";
+              return html`
+                <rtgl-view
+                  ph="m"
+                  pv="s"
+                  h="f"
+                  bgc="bg"
+                  w=${column.width}
+                  style=${style}
+                  bwl=${isFirst ? "xs" : ""}
+                  bwr="xs"
+                  bwb="xs"
+                  bwt="xs"
+                >
+                  <rtgl-text s="ll">${column.label}</rtgl-text>
+                </rtgl-view>
+              `;
+            })}
+          </rtgl-view>
+
+          <rtgl-view bgc="ov">
+            ${rows.map(
+              (row) => html`
+                <rtgl-view d="h" style="flex-wrap: nowrap;">
+                  ${columns.map((column, index) => {
+                    const isFirst = index === 0;
+                    const style = isFirst
+                      ? "overflow-wrap: anywhere; position: sticky; left: 0; z-index: 1;"
+                      : "overflow-wrap: anywhere; ";
+                    return html`
+                      <rtgl-view
+                        ph="m"
+                        pv="s"
+                        h="f"
+                        bgc="bg"
+                        w=${column.width}
+                        bwr="xs"
+                        bwl=${isFirst ? "xs" : ""}
+                        bwb="xs"
+                        style=${style}
+                      >
+                        <rtgl-text s="bs">${row[column.key]}</rtgl-text>
+                      </rtgl-view>
+                    `;
+                  })}
+                </rtgl-view>
+              `
+            )}
+          </rtgl-view>
+        </rtgl-view>
+      `;
+    };
+  };
+};
+
+customElements.define('rtgl-table', RettangoliTable({
+  render,
+  html
+}))
+
+</script>

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

@@ -0,0 +1,11 @@
+<rtgl-view pos="abs" cor="top" ah="c" bgc="bg">
+  <rtgl-view md-w="100vw" lg-w="768" w="1024">
+    <rtgl-navbar start="{{ navbar.start | json-escaped }}" id="navbar">
+      {% if navbar.right %}
+      <rtgl-view slot="right">
+        {{ navbar.right }}
+      </rtgl-view>
+      {% endif %}
+    </rtgl-navbar>
+  </rtgl-view>
+</rtgl-view>