@documental-xyz/core 0.1.0

package/src/components/Map.astro

@@ -0,0 +1,321 @@
+---
+import MapView from "./MapView.astro";
+
+const { columnAlign, floatingText, txtColor, bgColor, mapView, components } = Astro.props;
+
+let content = await Astro.slots.render("default");
+content = floatingText ? content.replace(/<br[^>]*>/g, '<b r></b>') : content;
+
+// Buscar componentes MapView dentro dos components
+const mapViewComponents = components ? components.filter(comp => comp.type === 'MapView') : [];
+
+//columnAlign recebe left || right || center
+//floatingText recebe booleano
+//mapView recebe o id da layer do mapa, inserido nas configuracões
+
+---
+
+<section
+  class:list={[
+    "map",
+    `map--align${columnAlign}`,
+    floatingText && `map--floating-text`,
+  ]}
+>
+  <div class="map__holder">
+    <div class="map__content" set:html={content}></div>
+  </div>
+</section>
+
+<style lang="scss" define:vars={{ "clr-txt": txtColor, "clr-bg": bgColor }}>
+  @use "../assets/styles/globals/grrr" as *;
+  @use "../assets/styles/config/config" as *;
+  @use "../assets/styles/utils/grrr/grrr" as *;
+
+  .map {
+    $self: &;
+    min-height: 100vh;
+    @extend %grrr--board;
+    color: var(--clr-txt);
+
+    @include media-break-down(l) {
+      display: block;
+      margin-top: var(--map-height-mobile);
+      position: relative;
+
+      &::after {
+        content: "";
+        display: block;
+        min-height: 100vh;
+      }
+      
+      
+      &--floating-text{
+        z-index: 100;
+        margin-top: 0;
+        &::after{
+          display: none;
+        }
+      }
+
+      &:not(#{$self}--floating-text) + #{$self}:after{
+        display: none;
+      }
+    }
+
+    @include media-break-up(xl) {
+      display: block;
+    }
+
+    &__view {
+      position: absolute;
+      left: 20px;
+      z-index: 9999;
+      border-bottom: 1px solid;
+      border-left: 1px dashed;
+      color: yellow;
+      height: 1px;
+      padding-left: 10px;
+      opacity: 0;
+      max-width: 200px;
+
+      &.odd {
+        color: #59ff4d;
+      }
+    }
+
+    &__holder {
+      position: relative;
+      width: 100%;
+      min-height: 100vh;
+      background-color: var(--clr-bg);
+      padding-inline: var(--atnl-gutter, 40px);
+
+      @include media-break-down(l) {
+        padding-block: var(--mt-m);
+        &:not(#{$self}--floating-text &){
+          position: sticky;
+          top: var(--map-height-mobile);
+          margin-top: calc(var(--map-height-mobile) * -1);
+          min-height: calc(100vh - var(--map-height-mobile));
+        }
+      }
+
+      @include media-break-up(l) {
+        padding-block: 240px var(--mt-l);
+      }
+
+      @include media-break-up(xl) {
+        width: 100%;
+        max-width: 507px;
+      }
+
+      #{$self}--alignright & {
+        @include media-break-up(l) {
+          grid-column: board-end 8 / full-end;
+        }
+
+        @include media-break-up(xl) {
+          margin-left: auto;
+        }
+      }
+
+      #{$self}--alignleft & {
+        @include media-break-up(l) {
+          grid-column: full-start 1 / board-start 5;
+        }
+      }
+
+      #{$self}--aligncenter & {
+        @include media-break-up(l) {
+          grid-column: board-full;
+        }
+      }
+
+      #{$self}--floating-text & {
+        background-color: transparent;
+      }
+
+      #{$self}--aligncenter & {
+        max-width: 664px;
+        margin-inline: auto;
+      }
+    }
+
+    &__content {
+      position: relative;
+
+      #{$self}--floating-text & {
+        :global(> *:not(div):not(.image)),
+        :global(> .text > *) {
+          display: inline;
+          background-color: var(--clr-bg);
+          padding: 0.2em 0;
+          position: relative;
+
+          &:not(:first-child) {
+            &::before {
+              content: "";
+              height: var(--mt-s);
+              white-space: pre;
+              display: block;
+              position: relative;
+              z-index: 2;
+            }
+          }
+
+          :global([r]) {
+            display: block;
+          }
+
+          :global([r] + [r]) {
+            height: 100%;
+          }
+
+          :global([r]:before) {
+            height: 100%;
+          }
+        }
+
+        :global(body:not(.is-safari)) & :global(> *:not(div):not(figure)),
+        :global(body:not(.is-safari)) & :global(> .text > *) {
+          padding: 0.2em 5px;
+          margin-left: -5px;
+          margin-right: -150vw;
+          -webkit-box-decoration-break: clone;
+          box-decoration-break: clone;
+        }
+      }
+    }
+
+    :global(#captions) {
+      max-width: 310px;
+      position: fixed;
+      left: 40px;
+      color: var(--clr-txt);
+      background-color: var(--clr-bg);
+      padding: 16px;
+      border-radius: 3px;
+      transition: .3s ease;
+
+      
+      &.hidden,
+      &:has(> button:first-child:last-child) {
+        opacity: 0;
+      }
+
+      @include media-break-down(l) {
+        width: calc(100% - 90px);
+        max-height: calc(var(--map-height-mobile) - 40px);
+        padding: 12px;
+        top: 20px;
+        left: 20px;
+        z-index: 3;
+        overflow-y: auto;
+        pointer-events: none;
+        background-color: transparent;
+
+        &::before {
+          content: '';
+          height: 45px;
+          width: 100%;
+          display: block;
+          background-color: var(--clr-bg);
+          position: sticky;
+          top: 0;
+          left: 0;
+          opacity: 0;
+          transform: translateY(-12px);
+          transition: .3s ease;
+        }
+
+        &[open] {
+          background-color: var(--clr-bg);
+          pointer-events: all;
+
+          :global(.captions__item) {
+            opacity: 1;
+          }
+
+          &::before {
+            opacity: 1;
+            transition-delay: .3s;
+          }
+        }
+      }
+
+      @include media-break-up(l) {
+        bottom: 33px;
+      }
+    }
+
+    :global(.captions__item) {
+      display: flex;
+      gap: 10px;
+      transition: .3s ease;
+
+      @include media-break-down(l) {
+        opacity: 0;
+      }
+
+      :global(span:has([class*="material-symbols"])) {
+        display: flex;
+      }
+
+      :global(+ .captions__item) {
+        margin-top: 10px;
+      }
+    }
+
+    :global(button) {
+      padding: 0;
+      border: none;
+      outline: 0;
+      background-color: transparent;
+
+      @include media-break-down(l) {
+        position: fixed;
+        top: 32px;
+        left: 32px;
+        pointer-events: all;
+      }
+
+      @include media-break-up(l) {
+        display: none;
+      }
+
+      :global(svg) {
+        pointer-events: none;
+        display: block;
+      }
+
+      :global(rect) {
+        fill: var(--clr-bg);
+      }
+
+      :global(path) {
+        fill: var(--clr-txt);
+      }
+    }
+
+    &--aligncenter :global(#captions),
+    &--alignleft :global(#captions) {
+      @include media-break-up(l) {
+        left: auto;
+        right: 40px;
+      }
+    }
+  }
+</style>
+
+<script>
+  window.addEventListener('click', e => {
+    const target = e.target as HTMLTextAreaElement;
+    if(!target.closest('[data-toggle-caption]')) return;
+
+    const toggleCaptionBtn = target.closest('[data-toggle-caption]');
+    const caption = toggleCaptionBtn.closest('#captions');
+    
+    caption.toggleAttribute('open', !caption.hasAttribute('open'));    
+  });
+</script>

package/src/components/MapBox.astro

@@ -0,0 +1,96 @@
+---
+import { Image } from 'astro:assets';
+import MapboxLayout from "../layouts/components/MapboxLayout.astro";
+
+const { mapboxData } = Astro.props;
+
+const Fragment = 'div';
+---
+
+<MapboxLayout Component={Fragment} props={{ mapboxData }}>
+  <div id="mapbox"></div>
+  <div id="mapbox-clone"><div></div></div>
+</MapboxLayout>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+
+  #mapbox {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    height: 100%;
+    width: 100%;
+    transition: opacity 1s ease;
+    opacity: 0;
+    background-color: black;
+
+    @include media-break-down(l) {
+      font-size: 60px;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    :global(#mapbox.mobile .map) {
+      --map-height-mobile: 52vh;
+      margin-top: var(--map-height-mobile);
+      position: relative;
+
+      &::after {
+        content: "";
+        display: block;
+        min-height: 100vh;
+      }
+
+      & + .map::after {
+        display: none;
+      }
+    }
+
+    :global(.mapboxgl-ctrl-bottom-left),
+    :global(.mapboxgl-ctrl-bottom-right) {
+      display: none;
+    }
+  }
+
+  #mapbox-clone{
+    position: fixed;
+    height: var(--map-height-mobile);
+    overflow: hidden;
+    width: 100%;
+    z-index: 3;
+    pointer-events: none;
+
+    @include media-break-up(l) {
+      display: none;
+    }
+
+    div{
+      min-height: 100vh;
+      transition: opacity 1s ease;
+      opacity: 0;
+      background-color: black;
+    }
+  }
+  
+</style>
+
+<script is:inline>
+  if (typeof window.mapConfig === 'undefined') {
+    console.warn('MapBox: window.mapConfig não foi definido. Verifique se os dados do mapbox estão configurados na página.');
+  }
+  
+  if (typeof window.mapBoxToken === 'undefined') {
+    console.warn('MapBox: window.mapBoxToken não foi definido. Verifique se o token está configurado na página.');
+  }
+  
+  if (typeof window.mapViews === 'undefined') {
+    console.warn('MapBox: window.mapViews não foi definido. Verifique se as views estão configuradas na página.');
+    window.mapViews = {};
+  }
+</script>

package/src/components/MapView.astro

@@ -0,0 +1,30 @@
+---
+const { mapView, txtColor, bgColor } = Astro.props;
+//mapView recebe o id da layer
+---
+
+<div class="map-view" data-map-view={mapView} style={{ color: txtColor, backgroundColor: bgColor }}></div>
+
+<style>
+  .map-view{
+    border-top: 1px solid;
+    color: yellow;
+    height: 1px;
+    max-height: 1px;
+  }
+</style>
+
+<script>
+  // Validar se a view existe no mapbox quando o componente é carregado
+  document.addEventListener('DOMContentLoaded', () => {
+    const mapViewElement = document.querySelector('[data-map-view]');
+    if (mapViewElement && (window as any).mapViews) {
+      const viewId = mapViewElement.getAttribute('data-map-view');
+      if (!(window as any).mapViews[viewId]) {
+        console.warn(`MapView: View "${viewId}" não encontrada nas views do mapbox disponíveis:`, Object.keys((window as any).mapViews));
+      } else {
+        console.log(`MapView: View "${viewId}" encontrada e válida`);
+      }
+    }
+  });
+</script>

package/src/components/Menu.astro

@@ -0,0 +1,278 @@
+---
+const { languages, menu, sideLink, title } = Astro.props;
+---
+
+<div class="topbar">
+  <div class="topbar__holder">
+    {title && <h1 class="topbar__title">{title}</h1>}
+    <button class="topbar__menu-btn" aria-controls="menu">
+      <span></span>
+    </button>
+  </div>
+  
+  <nav id="menu" class="menu" aria-hidden="true">
+    {languages && (
+      <ul class="menu__top">
+        {languages.map(lang => <li><a href={lang.url}>{lang.slug}</a></li>)}
+      </ul>
+    )}
+    {menu && (
+      <ul class="menu__main">
+        {menu.map(item => <li><a href={item.url} target={item.target}>{item.text}</a></li>)}
+      </ul>
+    )}
+
+    {sideLink && <a href={sideLink.url} class="menu__side-link">DOCUMENTAL.XYZ</a>}
+
+    <button class="menu__close" aria-controls="menu">
+      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect y="28.2842" width="40" height="4" transform="rotate(-45 0 28.2842)" fill="#F0EAD9"/>
+        <rect width="40" height="4" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 31.1133 28.2842)" fill="#F0EAD9"/>
+      </svg>        
+    </button>
+  </nav>
+</div>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+  @use "../assets/styles/utils/grrr/grrr" as *;
+
+  .topbar {
+    $self: &;
+    @extend %grrr--board;
+    display: block;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 60px;
+    z-index: 200;
+    transition: background .3s ease;
+    pointer-events: none;
+    
+    :global(body:has(.gallery-modal[aria-hidden="false"])) & {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    &.-hidden {
+      #{$self}__title {
+        opacity: 0;
+      }
+
+      :global(body[menu-open]) & #{$self}__title {
+        opacity: 1;
+      }
+    }
+    
+    &.-fixed {
+      &:has(#{$self}__title) {
+        background-color: var(--clr-txt);
+        color: var(--clr-bg);
+      }
+
+      #{$self}__title {
+        opacity: 1;
+      }
+    }
+
+    @include media-break-up(l) {
+      padding-top: 50px;
+    }
+
+    &__title {
+      @include type('h-s');
+      font-weight: 500;
+      position: absolute;
+      left: var(--atnl-margin);
+      top: 50%;
+      transform: translateY(-50%);
+      transition: opacity .3s ease;
+      
+      @include media-break-up(l) {
+        @include type('h-l');
+        font-weight: 500;
+      }
+    }
+
+    &__menu-btn {
+      width: 40px;
+      height: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      position: absolute;
+      right: var(--atnl-margin);
+      top: 50%;
+      transform: translateY(-50%);
+      background-color: transparent;
+      border: none;
+      padding: 0;
+      margin: 0;
+      pointer-events: all;
+
+      &:hover {
+        &::before {
+          width: 38px;
+        }
+        
+        &::after {
+          width: 100%;
+        }
+        
+        span {
+          width: 30px;
+        }
+      }
+
+      &::before, &::after, span {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 2px;
+        background-color: currentColor;
+        transition: width .3s ease;
+      }
+
+      &::before {
+        width: 36px;
+      }
+      
+      &::after {
+        width: 28px;
+      }
+    }
+  }
+
+  .menu {
+    @include type('h-xs');
+    width: 100%;
+    height: 100dvh;
+    max-width: 470px;
+    color: var(--clr-bg);
+    background-color: var(--clr-txt);
+    padding: var(--atnl-margin);
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translateX(100%);
+    transition: .8s ease;
+    text-transform: uppercase;
+    pointer-events: all;
+
+    a, button {
+      @media (hover: "hover") {
+        &:hover {
+          opacity: .7;
+        }
+      }
+    }
+
+    &[aria-hidden="false"] {
+      transform: translateX(0);
+    }
+
+    &__top {
+      display: flex;
+      gap: 30px;
+    }
+
+    &__main {
+      width: calc(100% - 70px);
+      max-height: calc(100% - 40px);
+      padding-bottom: 40px;
+      padding-top: 56px;
+      padding-right: 30px;
+      display: flex;
+      flex-direction: column;
+      gap: 28px;
+      text-wrap: balance;
+      overflow: auto;
+      mask-image: linear-gradient(to top, transparent 0%, black 40px);
+    }
+
+    &__close {
+      position: absolute;
+      top: 30px;
+      right: var(--atnl-margin);
+      background-color: transparent;
+      border: none;
+      padding: 0;
+      margin: 0;
+
+      rect {
+        fill: currentColor;
+      }
+    }
+
+    &__side-link {
+      width: fit-content;
+      @include type('c-m');
+      font-weight: 700;
+      display: block;
+      position: absolute;
+      top: 120px;
+      right: 40px;
+      transform-origin: right center;
+      transform: rotate(-90deg) translateY(-65%);
+    }
+  }
+</style>
+
+<script>
+  //modal
+  function toggleMenu() {
+    const triggers = document.querySelectorAll('[aria-controls="menu"]');
+
+    triggers.forEach(trigger => {
+      trigger.addEventListener('click', e => {
+        e.preventDefault();
+
+        const targetId = trigger.getAttribute('aria-controls');
+        const target = document.querySelector(`#${targetId}`);
+        const targetState = target.getAttribute('aria-hidden')
+        
+        target.setAttribute('aria-hidden', targetState === "true" ? "false" : "true");
+
+        if(document.body.hasAttribute('menu-open')) {
+          document.body.removeAttribute('menu-open');
+        } else {
+          document.body.setAttribute('menu-open', '');
+        }
+      })
+    })
+  }
+
+  function toggleFixedMenu() {
+    let lastScroll = window.scrollY || document.documentElement.scrollTop;
+		const scrollUpThreshold = 5;
+		const offset = 100;
+    const topBar = document.querySelector('.topbar');
+
+		window.addEventListener('scroll', e => {
+			const scrollTop = window.scrollY || document.documentElement.scrollTop;
+			
+
+			if(scrollTop > offset) {
+				topBar.classList.add('-hidden');
+
+				if (lastScroll - scrollTop > scrollUpThreshold) {
+					topBar.classList.add('-fixed');
+				}
+
+				if(scrollTop - lastScroll > scrollUpThreshold) {
+					topBar.classList.remove('-fixed');
+				}
+			} else {
+				topBar.classList.remove('-hidden', '-fixed');
+
+				return;
+			}
+
+			lastScroll = scrollTop <= 0 ? 0 : scrollTop;
+		});
+  }
+
+  toggleFixedMenu();
+  toggleMenu();
+</script>