@documental-xyz/core 0.1.0

package/src/layouts/components/MapboxLayout.astro

@@ -0,0 +1,248 @@
+---
+const { Component, props } = Astro.props;
+const { style, center, zoom, bearing, pitch, layers, token, views, mapboxData } = props;
+
+function parseFilterString(filterStr) {
+  if (!filterStr) return null;
+  
+  const operators = ['==', '!=', '<=', '>=', '<', '>', 'in', '!in', 'has', '!has'];
+  
+  for (const op of operators) {
+    if (filterStr.includes(op)) {
+      const parts = filterStr.split(op);
+      if (parts.length === 2) {
+        const key = parts[0].trim();
+        let value = parts[1].trim();
+        
+        if (op === 'has' || op === '!has') {
+          return [op, key];
+        }
+        
+        if (op === 'in' || op === '!in') {
+          const values = value.split(',').map(v => {
+            v = v.trim();
+            return !isNaN(v) && v !== '' ? parseFloat(v) : v;
+          });
+          return [op, ['get', key], values];
+        }
+        
+        if (!isNaN(value) && value !== '') {
+          value = parseFloat(value);
+        }
+        
+        return [op, ['get', key], value];
+      }
+    }
+  }
+  
+  return null;
+}
+
+function processLayerString(layerInput) {
+  if (typeof layerInput === 'string') {
+    if (layerInput.includes('[') && layerInput.includes(']')) {
+      const bracketStart = layerInput.indexOf('[');
+      const bracketEnd = layerInput.indexOf(']');
+      
+      const name = layerInput.substring(0, bracketStart);
+      const filterStr = layerInput.substring(bracketStart + 1, bracketEnd);
+      const filter = parseFilterString(filterStr);
+      
+      return { name, filter };
+    }
+    
+    return { name: layerInput, filter: null };
+  }
+  
+  if (typeof layerInput === 'object' && layerInput.name) {
+    const processedLayer = {
+      name: layerInput.name,
+      filter: null
+    };
+    
+    if (layerInput.filterKey && layerInput.comparison && layerInput.filterValue !== undefined && layerInput.filterValue !== '') {
+      let filterValue = layerInput.filterValue;
+      
+      if (!isNaN(filterValue) && filterValue !== '') {
+        filterValue = parseFloat(filterValue);
+      }
+      
+      if (layerInput.comparison === 'has' || layerInput.comparison === '!has') {
+        processedLayer.filter = [layerInput.comparison, layerInput.filterKey];
+      } else if (layerInput.comparison === 'in' || layerInput.comparison === '!in') {
+        const values = Array.isArray(filterValue) ? filterValue : [filterValue];
+        processedLayer.filter = [layerInput.comparison, ['get', layerInput.filterKey], values];
+      } else {
+        processedLayer.filter = [layerInput.comparison, ['get', layerInput.filterKey], filterValue];
+      }
+    }
+    
+    return processedLayer;
+  }
+  
+  return { name: layerInput, filter: null };
+}
+
+function processLayers(layers) {
+  if (!layers) return [];
+  
+  if (typeof layers === 'string') {
+    const layerLines = layers.split('\n').map(line => line.trim()).filter(line => line.length > 0);
+    return layerLines.map(processLayerString).filter(layer => layer.name);
+  }
+  
+  if (Array.isArray(layers)) {
+    return layers.map(processLayerString).filter(layer => layer.name);
+  }
+  
+  return [];
+}
+
+let finalMapConfig = null;
+let finalMapViews = {};
+
+const hasComponentData = style && token;
+const hasPageData = mapboxData && mapboxData.style && mapboxData.token;
+
+if (hasComponentData) {
+  finalMapConfig = {
+    style,
+    center: center ? [center.lng, center.lat] : [0, 0],
+    zoom: zoom || 2,
+    bearing: bearing || 0,
+    pitch: pitch || 0,
+    layers: processLayers(layers),
+  };
+
+  if (views) {
+    finalMapViews = views.reduce((acc, view) => {
+      if (view.id) {
+        acc[view.id] = {
+          center: view.center ? [view.center.lng, view.center.lat] : [0, 0],
+          duration: view.duration || 4000,
+          zoom: view.zoom || 2,
+          bearing: view.bearing || 0,
+          pitch: view.pitch || 0,
+          layers: processLayers(view.layers),
+          mobile: view.mobile || {},
+          captions: view.captions || {},
+        };
+      }
+      return acc;
+    }, {});
+  }
+}
+
+if (hasPageData) {
+  const centerLng = mapboxData.centerLng || mapboxData.center?.lng || 0;
+  const centerLat = mapboxData.centerLat || mapboxData.center?.lat || 0;
+  
+  const pageMapConfig = {
+    style: mapboxData.style,
+    center: [parseFloat(String(centerLng)), parseFloat(String(centerLat))],
+    zoom: parseFloat(String(mapboxData.zoom || 2)),
+    bearing: parseFloat(String(mapboxData.bearing || 0)),
+    pitch: parseFloat(String(mapboxData.pitch || 0)),
+    layers: processLayers(mapboxData.layers),
+  };
+
+  let pageMapViews = {};
+  if (mapboxData.views && Array.isArray(mapboxData.views)) {
+    mapboxData.views.forEach(view => {
+      if (view.id) {
+        const viewCenterLng = view.centerLng || view.center?.lng || 0;
+        const viewCenterLat = view.centerLat || view.center?.lat || 0;
+        
+        let processedCaptions = {};
+        if (view.title || view.notes || view.items) {
+          processedCaptions = {
+            title: view.title,
+            notes: view.notes,
+            items: view.items ? view.items.map(item => {
+              if (item.icon && item.colorIcon && item.typeIcon) {
+                const fillValue = item.iconFill ? 1 : 0;
+                const iconHtml = `<span class="material-symbols-${item.typeIcon}" style="color: ${item.colorIcon}; font-variation-settings: 'FILL' ${fillValue}">${item.icon}</span>`;
+                return {
+                  ...item,
+                  icon: iconHtml
+                };
+              }
+              return item;
+            }) : []
+          };
+        }
+
+        const mobileConfig = view.mobileZoom ? { zoom: parseFloat(String(view.mobileZoom)) } : {};
+
+        pageMapViews[view.id] = {
+          center: [parseFloat(String(viewCenterLng)), parseFloat(String(viewCenterLat))],
+          duration: parseFloat(String(view.duration || 4000)),
+          zoom: parseFloat(String(view.zoom || 2)),
+          bearing: parseFloat(String(view.bearing || 0)),
+          pitch: parseFloat(String(view.pitch || 0)),
+          layers: processLayers(view.layers),
+          mobile: mobileConfig,
+          captions: processedCaptions,
+        };
+      }
+    });
+  }
+
+  if (hasComponentData) {
+    const existingLayers = finalMapConfig.layers || [];
+    const newLayers = pageMapConfig.layers || [];
+    
+    const mergedLayers = [...existingLayers];
+    newLayers.forEach(newLayer => {
+      if (!existingLayers.find(existing => existing.name === newLayer.name)) {
+        mergedLayers.push(newLayer);
+      }
+    });
+    
+    finalMapConfig = {
+      ...finalMapConfig,
+      ...pageMapConfig,
+      layers: mergedLayers
+    };
+    
+    finalMapViews = { ...finalMapViews, ...pageMapViews };
+  } else {
+    finalMapConfig = pageMapConfig;
+    finalMapViews = pageMapViews;
+  }
+}
+---
+
+<Component {...props}>
+    <slot />
+</Component>
+
+{(hasComponentData || hasPageData) && (
+    <script is:inline define:vars={{ finalMapConfig, finalMapViews, token: (token || mapboxData?.token) }}>
+        if (window.mapConfig) {
+            const existingLayers = window.mapConfig.layers || [];
+            const newLayers = finalMapConfig.layers || [];
+            
+            const mergedLayers = [...existingLayers];
+            newLayers.forEach(newLayer => {
+                if (!existingLayers.find(existing => existing.name === newLayer.name)) {
+                    mergedLayers.push(newLayer);
+                }
+            });
+            
+            window.mapConfig = {
+                ...finalMapConfig,
+                ...window.mapConfig,
+                layers: mergedLayers
+            };
+        } else {
+            window.mapConfig = finalMapConfig;
+        }
+        
+        window.mapBoxToken = window.mapBoxToken || token;
+        
+        if (finalMapViews && Object.keys(finalMapViews).length > 0) {
+            window.mapViews = { ...finalMapViews, ...(window.mapViews || {}) };
+        }
+    </script>
+)}

package/src/layouts/components/PullquoteLayout.astro

@@ -0,0 +1,13 @@
+---
+import AnimationToggle from "../../components/AnimationToggle.astro";
+
+const { Component, props } = Astro.props;
+const { content, byline, ...otherProps } = props;
+---
+<AnimationToggle>
+  <Component {...otherProps}>
+    {content}
+    {byline && <Fragment slot="byline">{byline}</Fragment>}
+    <slot />
+  </Component>
+</AnimationToggle>

package/src/layouts/components/SliderLayout.astro

@@ -0,0 +1,18 @@
+---
+import AnimationToggle from "../../components/AnimationToggle.astro";
+
+const { Component, props } = Astro.props;
+const { slides = [] } = props;
+
+// Atualiza o array de slides substituindo a imagem original por `thumb` localizada em public/uploads
+const updatedSlides = slides.map(slide => {
+  let updatedSlide = { ...slide };
+    if (updatedSlide.image) {
+        updatedSlide.image = /^https?:\/\//i.test(slide.image) ? slide.image : new URL(slide.image.replace(/^\/+/, ''), new URL(import.meta.env.BASE_URL, 'http://local')).pathname;
+    }
+  return updatedSlide;
+});
+---
+<AnimationToggle>
+  <Component slides={updatedSlides} />
+</AnimationToggle>

package/src/layouts/components/SpacerLayout.astro

@@ -0,0 +1,8 @@
+---
+const { Component, props } = Astro.props;
+const { desktop, tablet, mobile, ...otherProps } = props;
+---
+
+<Component desktop={desktop} tablet={tablet} mobile={mobile} {...otherProps}>
+  <slot />
+</Component>

package/src/layouts/components/TextLayout.astro

@@ -0,0 +1,17 @@
+---
+const { Component, props } = Astro.props;
+const { txtColor, bgColor, content, ...otherProps } = props;
+
+// Adicionando um processador de Markdown (se necessário)
+import { marked } from 'marked';
+import AnimationToggle from '../../components/AnimationToggle.astro';
+
+const htmlContent = content ? marked(content) : null;
+---
+
+<AnimationToggle>
+  <Component txtColor={txtColor} bgColor={bgColor} {...otherProps}>
+    {htmlContent && <Fragment set:html={htmlContent} />}
+    <slot />
+  </Component>
+</AnimationToggle>

package/src/layouts/components/TextPlaceholderLayout.astro

@@ -0,0 +1,7 @@
+---
+const { Component, props } = Astro.props;
+---
+
+<Component {...props}>
+  <slot />
+</Component>

package/src/layouts/components/TimelineBulletLayout.astro

@@ -0,0 +1,14 @@
+---
+import { marked } from 'marked';           // ①
+
+const { Component, props } = Astro.props;
+const { text, content } = props;
+
+const htmlContent = content ? marked(content) : null; 
+//console.log("Conteúdo TimelineBullet: ", htmlContent)
+
+---
+<div>
+    <Component text={text} />
+    <Fragment set:html={htmlContent} />
+</div>

package/src/layouts/components/TimelineLayout.astro

@@ -0,0 +1,10 @@
+---
+import AnimationToggle from "../../components/AnimationToggle.astro";
+
+const { Component, props } = Astro.props;
+---
+<AnimationToggle>
+    <Component>
+        <slot />
+    </Component>
+</AnimationToggle>

package/src/layouts/components/VideoEmbedLayout.astro

@@ -0,0 +1,28 @@
+---
+import AnimationToggle from "../../components/AnimationToggle.astro";
+
+const { Component, props } = Astro.props;
+const { videoUrl, videoCaption, wideVideo } = props;
+
+const componentData = {
+    wide: wideVideo || false
+};
+---
+<AnimationToggle>
+    <Component {...componentData}>
+        <iframe
+            width="560"
+            height="315"
+            src={videoUrl}
+            title="YouTube video player"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            referrerpolicy="strict-origin-when-cross-origin"
+            wide={wideVideo}
+            allowfullscreen
+        ></iframe>
+        <Fragment slot="caption">
+            {videoCaption}
+        </Fragment>
+    </Component>
+</AnimationToggle>

package/src/layouts/pages/Layout.astro

@@ -0,0 +1,90 @@
+---
+// src/layouts/Layout.astro
+import '../../assets/styles/main.scss';
+
+interface Props {
+	title: string;
+	pageTheme?: any;
+}
+
+const { title, pageTheme = {} } = Astro.props;
+
+const primaryColor = pageTheme?.primaryColor || '#000';
+const secondaryColor = pageTheme?.secondaryColor || '';
+const highlightColor = pageTheme?.highlightColor || '';
+const auxiliaryColor = pageTheme?.auxiliaryColor || '';
+const displayFont = pageTheme?.displayFont || '';
+const textFont = pageTheme?.textFont || '';
+const spacingPatterns = pageTheme?.spacingPatterns || [];
+
+const getFontName = (url) => {
+  if (!url) return '';
+  const fontName = url.match(/family=([^&:]+)/)?.[1];
+  return fontName ? fontName.replace(/\+/g, ' ') : '';
+};
+
+const displayFontName = getFontName(displayFont);
+const textFontName = getFontName(textFont);
+
+const styleString = spacingPatterns.map(pattern => `
+  --mt-${pattern.name}-mobile: ${pattern.mobile};
+  --mt-${pattern.name}-tablet: ${pattern.tablet};
+  --mt-${pattern.name}-desktop: ${pattern.desktop};
+`).join('\n');
+---
+
+<!doctype html>
+<html lang="en" style={`
+    --clr-txt: ${primaryColor};
+	--clr-bg: ${secondaryColor};
+	--clr-bg-hl: ${highlightColor};
+    --clr-hl: ${auxiliaryColor};
+
+	${displayFont ? `--ff-display: ${displayFontName};` : ''}
+    ${textFont ? `--ff-text: ${textFontName};` : ''}
+    
+    ${styleString}
+	
+`}>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="description" content="Astro description" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="stylesheet" href={displayFont} />
+		<link rel="stylesheet" href={textFont} />
+		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,0,0" />
+		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+		<script is:inline src="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"></script>
+    	<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet">
+		<script>import '../../assets/scripts/App.js';</script>
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body style={`${!secondaryColor ? 'background-color: transparent !important;' : ''}`}>
+		<slot />
+	</body>
+</html>
+
+<script>
+	const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+	isSafari && document.body.classList.add('is-safari');
+</script>
+
+<style lang="scss">
+	@use "../../assets/styles/config/config" as *;
+
+	:global(:root) {
+		--map-height-mobile: 52vh;
+
+		--mt-s: var(--mt-default-mobile, 40px);
+		--mt-m: var(--mt-default-tablet, 80px);
+		--mt-l: var(--mt-default-desktop, 120px);
+
+		@include media-break-down(xl) {
+			--mt-s: var(--mt-default-mobile, 30px);
+			--mt-m: var(--mt-default-tablet, 60px);
+			--mt-l: var(--mt-default-desktop, 90px);
+		}
+	}
+</style>

package/src/layouts/pages/PageLayout.astro

@@ -0,0 +1,200 @@
+---
+import { getEntry } from 'astro:content';
+import { PAGES_COLLECTION } from '../../lib/collections';
+
+import Layout from "./Layout.astro";
+import MapBox from '../../components/MapBox.astro';
+import Button from '../../components/Button.astro';
+import Group from '../../components/Group.astro';
+import ColumnSticky from '../../components/ColumnSticky.astro';
+import Text from '../../components/Text.astro';
+import Cta from '../../components/Cta.astro';
+import CardsCall from '../../components/CardsCall.astro';
+import Cards from '../../components/Cards.astro';
+import ChartBar from '../../components/ChartBar.astro';
+import ChartPercentage from '../../components/ChartPercentage.astro';
+import Column from '../../components/Column.astro';
+import Columns from '../../components/Columns.astro';
+import ImageBlock from '../../components/ImageBlock.astro';
+import InnerColumns from '../../components/InnerColumns.astro';
+import LogosGroup from '../../components/LogosGroup.astro';
+import VideoEmbed from '../../components/VideoEmbed.astro';
+import HtmlEmbed from '../../components/HtmlEmbed.astro';
+import Map from '../../components/Map.astro';
+import MapView from '../../components/MapView.astro';
+import Spacer from '../../components/Spacer.astro';
+import Timeline from '../../components/Timeline.astro';
+import TimelineBullet from '../../components/TimelineBullet.astro';
+import BigNumbers from '../../components/BigNumbers.astro';
+import Compare from '../../components/Compare.astro';
+import Pullquote from '../../components/Pullquote.astro';
+import Gallery from '../../components/Gallery.astro';
+import Slider from '../../components/Slider.astro';
+import Menu from "../../components/Menu.astro";
+
+const { slug } = Astro.props;
+
+const entry = await getEntry(PAGES_COLLECTION, slug);
+if (!entry) {
+  throw new Error(`Nenhuma entrada encontrada para "${slug}".`);
+}
+
+const { title, components, mapbox, pageSettings } = entry.data;
+
+const hasMapboxData = mapbox && mapbox.style && mapbox.token;
+
+const componentMap = {
+  Group,
+  ColumnSticky,
+  Text,
+  Cta,
+  Cards,
+  CardsCall,
+  ChartBar,
+  ChartPercentage,
+  Column,
+  Columns,
+  ImageBlock,
+  InnerColumns,
+  LogosGroup,
+  VideoEmbed,
+  HtmlEmbed,
+  Map,
+  MapView,
+  Spacer,
+  Timeline,
+  TimelineBullet,
+  BigNumbers,
+  Compare,
+  Pullquote,
+  Gallery,
+  Slider,
+  Button
+};
+
+const languages = [
+  {
+    slug: "PT",
+    url: pageSettings?.link_pt_br || "#",
+  },
+  {
+    slug: "EN",
+    url: pageSettings?.link_en || "#",
+  },
+  {
+    slug: "ES",
+    url: pageSettings?.link_es || "#",
+  },
+];
+
+const mainMenu = components
+  ? components
+      .filter(component => component.id && component.showInMenu === true)
+      .map(component => ({
+        text: component.longTitle || component.shortTitle,
+        url: `#${component.id}`,
+      }))
+  : [];
+---
+
+<Layout title={title} pageTheme={entry.data?.pageTheme}>
+  <main>
+    <Menu
+      languages={languages}
+      menu={mainMenu}
+      sideLink={{ url: "/" }}
+    />
+    {hasMapboxData && <MapBox mapboxData={mapbox} />}
+    {
+      (async function() {
+        async function renderComponents(componentList) {
+          if (!componentList) return [];
+
+          const results = await Promise.all(componentList.map(async ({ type, components: childComponents, txtColor, bgColor, ...restProps }) => {
+            const Component = componentMap[type];
+            if (!Component) return null;
+
+            const themeColors = entry.data?.pageTheme || {};
+
+            const replaceColor = (color) => {
+              if (color === 'Primary') return themeColors?.primaryColor;
+              if (color === 'Secondary') return themeColors?.secondaryColor;
+              if (color === 'Highlight') return themeColors?.highlightColor;
+              if (color === '') return 'transparent';
+              return color;
+            };
+
+            const props = {
+              ...restProps,
+              txtColor: txtColor === 'Custom' ? restProps.customTxtColor : replaceColor(txtColor),
+              bgColor: bgColor === 'Custom' ? restProps.customBgColor : replaceColor(bgColor),
+            };
+
+            if (type === 'InnerColumns') {
+              const column1 = restProps.column1;
+              const column2 = restProps.column2;
+              
+              return (
+                <InnerColumns>
+                  <Fragment slot="column-1">
+                    { renderComponents(column1.components)}
+                  </Fragment>
+                  <Fragment slot="column-2">
+                    {renderComponents(column2.components)}
+                  </Fragment>
+                </InnerColumns>
+              );
+            }
+
+            if (type === 'Columns') {
+              const column1 = restProps.column1;
+              const column2 = restProps.column2;
+              const paddingTop = restProps.paddingTop;
+              const paddingBottom = restProps.paddingBottom;
+              const invertOnMobile = restProps.invertOnMobile;
+              const alignment = restProps.columnsAlign;
+ 
+              return (
+                <Columns paddingTop={paddingTop} paddingBottom={paddingBottom} invertOnMobile={invertOnMobile} alignment={alignment}>
+                  <Fragment slot="column-1">
+                    { renderComponents(column1.components)}
+                  </Fragment>
+                  <Fragment slot="column-2">
+                    {renderComponents(column2.components)}
+                  </Fragment>
+                </Columns>
+              );
+            }
+
+            let Layout = null;
+            try {
+              const layoutModule = await import(`../components/${type}Layout.astro`);
+              Layout = layoutModule.default;
+            } catch (e) {
+            }
+
+            const children = childComponents ? await renderComponents(childComponents) : [];
+
+            if (Layout) {
+              return (
+                <Layout Component={Component} props={props} pageSettings={pageSettings}>
+                  {children}
+                </Layout>
+              );
+            } else {
+              return (
+                <Component {...props}>
+                  {children}
+                </Component>
+              );
+            }
+          }));
+
+          return results;
+        }
+  
+        return await renderComponents(components);
+      })()
+    }
+  </main>
+</Layout>

package/src/lib/collections.ts

@@ -0,0 +1 @@
+export const PAGES_COLLECTION = 'pages' as const;

package/src/routes/[slug].astro

@@ -0,0 +1,17 @@
+---
+import PageLayout from '../layouts/pages/PageLayout.astro';
+import { PAGES_COLLECTION } from '../lib/collections';
+
+const { slug } = Astro.params;
+
+export async function getStaticPaths() {
+  const { getCollection } = await import('astro:content');
+  const pages = await getCollection(PAGES_COLLECTION);
+
+  return pages.map((page) => ({
+    params: { slug: page.id },
+  }));
+}
+---
+
+<PageLayout slug={slug} />

package/src/routes/index.astro

@@ -0,0 +1,5 @@
+---
+import PageLayout from '../layouts/pages/PageLayout.astro';
+---
+
+<PageLayout slug="home" />