@inizioevoke/astro-core 1.0.0

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@inizioevoke/astro-core",
+  "version": "1.0.0",
+  "description": "",
+  "license": "ISC",
+  "author": "",
+  "type": "module",
+  "main": "./index.ts",
+  "exports": {
+    "./components": "./src/components/index.ts",
+    "./integrations": "./src/integrations/index.ts"
+  },
+  "files": [
+    "src",
+    "index.ts"
+  ],
+  "peerDependencies": {
+    "astro": ">=6.0.0",
+    "typescript": ">=5.0.0"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.8",
+    "@astrojs/ts-plugin": "^1.10.7",
+    "@types/node": "^25.5.0",
+    "astro": "^6.0.5",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "pdfjs-dist": "^5.5.207"
+  }
+}

package/src/components/Modal/Modal.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import './Modal.css';
+
+interface Props extends HTMLAttributes<'div'> {
+  id: string;
+  closeButton?: boolean;
+  closeButtonAtts?: Record<string, string>;
+}
+
+const {
+  id,
+  closeButton = true,
+  closeButtonAtts,
+  ...rest
+} = Astro.props;
+
+const attrs = {...rest};
+const cssClass = attrs['class'] ?? '';
+
+['class'].forEach((a) => {
+  delete attrs[a as keyof typeof attrs];
+});
+
+---
+<div id={id} class:list={['evo-modal', cssClass]} {...attrs}>
+  {closeButton && <button class="evo-modal-close evo-modal-action-hide" {...closeButtonAtts}><span class="evo-modal-x"><slot name="close">X</slot></span></button>}
+  <slot name="outer" />
+  <div class="evo-modal-wrapper">
+    <slot />
+  </div>
+</div>
+
+<script>
+  import './Modal';
+</script>

package/src/components/Modal/Modal.css

@@ -0,0 +1,145 @@
+
+@layer inizioevoke-astro-components {
+  :root {
+    --evo-modal-viewport-width: 100vw;
+    --evo-modal-viewport-height: 100vh;
+    --evo-modal-position: absolute;
+    --evo-modal-width: 800px;
+    --evo-modal-height: 450px;
+    --evo-modal-animation-duration: 300ms;
+    --evo-modal-z-index: 99;
+  }
+
+  .evo-modal-overlay {
+    position: fixed;
+    left: 0;
+    top: 0;
+    display: none;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.66);
+    z-index: calc(var(--evo-modal-z-index) - 1);
+  }
+
+  .evo-modal {
+    position: var(--evo-modal-position);
+    left: calc((var(--evo-modal-viewport-width) - var(--evo-modal-width)) / 2);
+    top: calc((var(--evo-modal-viewport-height) - var(--evo-modal-height)) / 2);
+    width: var(--evo-modal-width);
+    height: var(--evo-modal-height);
+    display: none;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    color: #000000;
+    background-color: #ffffff;
+    z-index: var(--evo-modal-z-index);
+    box-sizing: border-box;
+
+    .evo-modal-close {
+      /* the button click area is larger than the visible button */
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      width: 40px;
+      height: 40px;
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+      z-index: var(--evo-modal-z-index);
+      box-sizing: border-box;
+
+      .evo-modal-x {
+        position: absolute;
+        right: 8px;
+        top: 8px;
+        display: block;
+        width: 24px;
+        height: 24px;
+        background-color: #990000;
+        border: none;
+        border-radius: 50%;
+        text-align: left;
+        text-indent: -9999px;
+        transform: rotate(45deg);
+
+        &::before,
+        &::after {
+          content: "";
+          position: absolute;
+          background-color: #ffffff;
+        }
+        &::before {
+          left: 5px;
+          top: 11px;
+          width: 14px;
+          height: 2px;
+        }
+        &::after {
+          left: 11px;
+          top: 5px;
+          width: 2px;
+          height: 14px;
+        }
+      }
+    }
+
+    .evo-modal-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      padding: 1rem;
+      overflow: hidden;
+      box-sizing: border-box;
+
+      h1,h2,h3 {
+        &:first-child {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+
+  .evo-modal-hide-none {
+    display: none;
+    opacity: 0;
+  }
+  .evo-modal-hide-fade {
+    display: block;
+    opacity: 0;
+    animation-name: evo_modal_hide;
+    animation-duration: var(--evo-modal-animation-duration);
+    animation-iteration-count: 1;
+    animation-timing-function: linear;
+  }
+  .evo-modal-show-none {
+    display: block;
+    opacity: 1;
+  }
+  .evo-modal-show-fade {
+    display: block;
+    opacity: 1;
+    animation-name: evo_modal_show;
+    animation-duration: var(--evo-modal-animation-duration);
+    animation-iteration-count: 1;
+    animation-timing-function: linear;
+  }
+
+  @keyframes evo_modal_show {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes evo_modal_hide {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+}

package/src/components/Modal/Modal.ts

@@ -0,0 +1,109 @@
+
+export type ModalAnimation = 'none' | 'fade';
+
+interface ModalOptions {
+  animation?: ModalAnimation;
+}
+export function show(selector: string | HTMLElement, { animation = 'fade' }: ModalOptions = {}) {
+  return new Promise<void>(async (resolve) => {
+    let modal = typeof selector == 'string' ? document.querySelector<HTMLElement>(/^[\.#]/.test(selector) ? selector : `#${selector}`) : selector;
+    if (modal) {
+      await hide(null, { animation, hideOverlay: false });
+      __showOverlay(animation);
+
+      modal.classList.add('evo-modal-visible', `evo-modal-show-${animation}`);
+      setTimeout(resolve, animation !== 'none' ? animationDuration : 0);
+    }
+  });
+}
+function __showOverlay(animation: ModalAnimation) {
+  if (!overlay.classList.contains('evo-modal-visible')) {
+    overlay.setAttribute('data-evo-modal-animation', animation);
+    overlay.classList.add('evo-modal-visible', `evo-modal-show-${animation}`);
+  }
+}
+
+interface HideModalOptions extends ModalOptions {
+  hideOverlay?: boolean;
+}
+export function hide(selector?: string | HTMLElement | (string | HTMLElement)[] | null, { animation, hideOverlay = true }: HideModalOptions = {}) {
+  return new Promise<void>(async (resolve) => {
+    const modals: HTMLElement[] = (selector ? Array.isArray(selector) ? selector : [selector] : [...document.querySelectorAll<HTMLElement>('.evo-modal.evo-modal-visible')])
+      .map((m) => {
+        return typeof m == 'string' ? document.querySelector<HTMLElement>(/^[\.#]/.test(m) ? m : `#${m}`) : m;
+      })
+      .filter(m => m !== undefined && m !== null);
+
+    const hides = [];
+    if (!animation) {
+      if (modals.length) {
+        animation = ([...modals[0].classList.values()].find((c) => { return c.startsWith('evo-modal-show'); }) ?? 'evo-modal-show-fade').substring(15) as ModalAnimation;
+      } else {
+        animation = 'fade';
+      }
+    }
+    for (let modal of modals) {
+      hides.push(__hide(modal, animation));
+    }
+    if (hideOverlay) {
+      hides.push(__hide(overlay, animation));
+    }
+    await Promise.all(hides);
+    resolve();
+  });
+}
+function __hide(modal: HTMLElement, animation: ModalAnimation) {
+  return new Promise<void>((resolve) => {
+    const showClass = [...modal.classList.values()].find((c) => { return c.startsWith('evo-modal-show'); }) ?? 'evo-modal-show-fade';
+    modal.classList.add(`evo-modal-hide-${animation}`);
+    modal.classList.remove(showClass);
+    setTimeout(() => {
+      modal.classList.remove('evo-modal-visible', `evo-modal-hide-${animation}`);
+      resolve();
+    }, animation !== 'none' ? animationDuration : 0);
+  });
+}
+
+/**
+ * Moves the overlay element by appending it to an element
+ * @param selector 
+ */
+export function appendOverlay(selector: string | HTMLElement) {
+  const container = typeof selector == 'string' ? document.querySelector(selector) : selector;
+  if (container) {
+    container.appendChild(overlay);
+  }
+}
+
+const overlay: HTMLElement = document.querySelector<HTMLElement>('.evo-modal-overlay') ?? (() => {
+  // create the overlay
+  const div = document.createElement('div');
+  div.classList.add('evo-modal-overlay');
+  document.body.append(div);
+  return div;
+})();
+overlay.addEventListener('click', () => {
+  hide();
+});
+
+const animationDuration = (() => {
+  const duration = getComputedStyle(document.body).getPropertyValue('--evo-modal-animation-duration');
+  return duration ? /^\d+m?s$/.test(duration) ? parseInt(duration, 10) : parseFloat(duration) * 1000 : 0;
+})();
+
+document.querySelectorAll<HTMLElement>('.evo-modal').forEach((modal) => {
+  modal.querySelectorAll<HTMLElement>('.evo-modal-action-hide').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      hide(modal);
+    });
+  });
+});
+
+document.querySelectorAll<HTMLElement>('[data-evo-modal-show]').forEach((trigger) => {
+  trigger.addEventListener('click', async (e) => {
+    e.preventDefault();
+    const target = (e.currentTarget ?? e.target) as HTMLElement;
+    const animation = (target.getAttribute('data-evo-modal-animation') ?? undefined) as ModalAnimation | undefined;
+    await show(target.getAttribute('data-evo-modal-show') as string, { animation });
+  });
+});

package/src/components/Modal/ModalOverlay.astro

@@ -0,0 +1 @@
+<div class="evo-modal-overlay"></div>

package/src/components/Modal/ModalTrigger.astro

@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import type { ModalAnimation } from './Modal';
+
+interface Props extends HTMLAttributes<'button'> {
+  modal: string;
+  animation?: ModalAnimation;
+}
+
+const {
+  modal,
+  animation,
+  ...rest
+} = Astro.props;
+
+interface ButtonAttrs extends HTMLAttributes<'button'> {
+  'data-evo-modal-show': string;
+  'data-evo-modal-animation'?: ModalAnimation
+};
+
+const attrs: ButtonAttrs = {...rest, 'data-evo-modal-show': modal};
+if (animation) {
+  attrs['data-evo-modal-animation'] = animation;
+}
+
+const cssClass = attrs['class'];
+delete attrs['class'];
+---
+<button class:list={['evo-modal-trigger', cssClass]} {...attrs}><slot /></button>

package/src/components/PdfViewer/PdfViewer.astro

@@ -0,0 +1,103 @@
+---
+import ScrollContainer from '../ScrollContainer/ScrollContainer.astro';
+import './PdfViewer.css';
+
+interface Props {
+  id: string;
+  class?: string;
+  height?: number | string;
+  theme?: 'black' | 'dark';
+  pdf: string;
+  page?: number;
+  pages?: string;
+  bookmarks?: Record<string, number>;
+  bookmarkText?: string;
+}
+const { 
+  id, 
+  class: cssClass,
+  height,
+  theme,
+  pdf,
+  page = 1,
+  bookmarks,
+  bookmarkText = 'Jump to',
+  ...rest 
+} = Astro.props;
+
+const attrs: Record<string, string> = {...rest};
+if (height) {
+  attrs.style = `${attrs.style ? `${attrs.style}${attrs.style.endsWith(';') ? '' : ';'}` : ''}--evo-pdf-viewer-height:${typeof height == 'number' ? `${height}px` : height};`;
+}
+---
+<div 
+  id={id} 
+  class:list={['evo-pdf-viewer', cssClass, theme ? `evo-pdf-viewer-theme-${theme}` : null]} 
+  data-pdf={pdf} 
+  data-page={page}
+  data-bookmarks={btoa(JSON.stringify(bookmarks ?? {}))}
+  {...attrs} 
+>
+  <div class="evo-pdf-viewer-toolbar">
+    <div class="evo-pdf-viewer-toolbar-start">
+      <slot name="toolbar-start" />
+    </div>
+    <div class="evo-pdf-viewer-toolbar-controls">
+      <button class="evo-pdf-viewer-toolbar-prev">
+        <slot name="toolbar-prev">
+          <svg class="evo-pdf-viewer-toolbar-icon" width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6 15L12 9L18 15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </slot>
+      </button>
+      <button class="evo-pdf-viewer-toolbar-next">
+        <slot name="toolbar-next">
+          <svg class="evo-pdf-viewer-toolbar-icon" width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </slot>
+      </button>
+      <div class="evo-pdf-viewer-nav-page">
+        <select></select> of <span class="evo-pdf-viewer-nav-page-count">0</span>
+      </div>
+      <button class="evo-pdf-viewer-toolbar-zoom-out">
+        <slot name="toolbar-zoom-out">
+          <svg class="evo-pdf-viewer-toolbar-icon" width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6 12L18 12" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </slot>
+      </button>
+      <button class="evo-pdf-viewer-toolbar-zoom-in">
+        <slot name="toolbar-zoom-in">
+          <svg class="evo-pdf-viewer-toolbar-icon" width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4 12H20M12 4V20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </slot>
+      </button>
+      <button class="evo-pdf-viewer-toolbar-zoom-reset">
+        <slot name="toolbar-zoom-reset">
+          <svg width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M3 3V8M3 8H8M3 8L6 5.29168C7.59227 3.86656 9.69494 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.71683 21 4.13247 18.008 3.22302 14" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </slot>
+      </button>
+      <div class="evo-pdf-viewer-toolbar-bookmarks hidden">
+        <select>
+          <option value="" disabled selected hidden>{bookmarkText}</option>
+        </select>
+      </div>
+    </div>
+    <div class="evo-pdf-viewer-toolbar-end">
+      <slot name="toolbar-end" />
+    </div>
+  </div>
+  <div class="evo-pdf-viewer-container">
+    <ScrollContainer>
+      <!-- <div class="evo-pdf-viewer-page">
+        
+      </div>
+      <div class="evo-pdf-viewer-page">
+
+      </div> -->
+    </ScrollContainer>
+  </div>
+</div>

package/src/components/PdfViewer/PdfViewer.css

@@ -0,0 +1,198 @@
+.evo-pdf-viewer {
+  --evo-pdf-viewer-height: 100%;
+  --evo-pdf-viewer-toolbar-height: 44px;
+  --evo-pdf-viewer-toolbar-align: center;
+  --evo-pdf-viewer-scale: 1;
+
+  position: relative;
+  height: var(--evo-pdf-viewer-height);
+  background-color: #f0f0f0;
+  box-sizing: border-box;
+
+  .evo-pdf-viewer-toolbar {
+    display: flex;
+    justify-content: var(--evo-pdf-viewer-toolbar-align);
+    align-items: center;
+    gap: 32px;
+    height: var(--evo-pdf-viewer-toolbar-height);
+    box-sizing: border-box;
+
+    .evo-pdf-viewer-toolbar-controls {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 8px;
+      box-sizing: border-box;
+    }
+    
+    button {
+      &.evo-pdf-viewer-toolbar-prev,
+      &.evo-pdf-viewer-toolbar-next,
+      &.evo-pdf-viewer-toolbar-zoom-out,
+      &.evo-pdf-viewer-toolbar-zoom-in,
+      &.evo-pdf-viewer-toolbar-zoom-reset {
+        all: unset;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        width: 22px;
+        height: 22px;
+        background-color: #ffffff;
+        border: 1px solid #888888;
+        border-radius: 6px;
+
+        .evo-pdf-viewer-toolbar-icon {
+          path {
+            stroke: #000000;
+          }
+        }
+      }
+    }
+    .evo-pdf-viewer-nav-page {
+      margin: 0 8px;
+      padding: 0 16px;
+      border-left: 1px solid black;
+      border-right: 1px solid black;
+      font-family: sans-serif;
+      font-size: 16px;
+      line-height: 24px;
+      select {
+        /*all: unset;*/
+        display: inline-block;
+        height: 24px;
+        padding: 0;
+        cursor: pointer;
+        color: #000000;
+        font-family: sans-serif;
+        font-size: 16px;
+        line-height: 24px;
+        text-align: center;
+        background-color: #ffffff;
+        border: 1px solid #888888;
+        border-radius: 6px;
+      }
+    }
+    .evo-pdf-viewer-toolbar-bookmarks {
+      margin: 0 8px;
+      padding: 0 16px;
+      border-left: 1px solid black;
+      select {
+        /*all: unset;*/
+        display: inline-block;
+        height: 24px;
+        padding: 0 0.25em;
+        cursor: pointer;
+        color: #000000;
+        font-family: sans-serif;
+        font-size: 16px;
+        line-height: 24px;
+        text-align: left;
+        background-color: #ffffff;
+        border: 1px solid #888888;
+        border-radius: 6px;
+      }
+      &.hidden {
+        display: none;
+      }
+    }
+  }
+  /*.evo-pdf-viewer-nav {
+    position: absolute;
+    left: calc(50% - 80px);
+    top: var(--evo-pdf-viewer-toolbar-height);
+    display: flex;
+    justify-content: space-between;
+    width: 160px;
+    padding: 6px 12px;
+    border-radius: 0 0 12px 12px;
+    background-color: rgba(51, 51, 51, 0.9);
+    backdrop-filter: blur(2px);
+    z-index: 1;
+    box-sizing: border-box;
+
+    button {
+      all: unset;
+      display: block;
+      cursor: pointer;
+      &.evo-pdf-viewer-nav-arrow {
+        width: 24px;
+        height: 24px;
+      }
+      &.evo-pdf-viewer-nav-page {
+        color: white;
+        font-family: sans-serif;
+        font-size: 18px;
+        line-height: 18px;
+      }
+    }
+  }*/
+  .evo-pdf-viewer-container {
+    height: calc(var(--evo-pdf-viewer-height) - var(--evo-pdf-viewer-toolbar-height));
+    padding: 0 9px 9px 9px;
+    box-sizing: border-box;
+
+    .evo-scroll-container {
+      --evo-scroll-container-track-color: #cccccc;
+      .evo-scroll-content {
+        canvas {
+          display: block;
+          margin: 18px auto;
+          background-color: white;
+
+          &:first-child {
+            margin-top: 0;
+          }
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+
+  &.evo-pdf-viewer-theme-dark {
+    background-color: #444444;
+    .evo-pdf-viewer-toolbar {
+
+      button {
+        background-color: #cccccc;
+      }
+      select {
+        background-color: #cccccc;
+      }
+      .evo-pdf-viewer-nav-page,
+      .evo-pdf-viewer-toolbar-bookmarks {
+        color: #ffffff;
+        border-color: #cccccc;
+      }
+    }
+  }
+  &.evo-pdf-viewer-theme-black {
+    background-color: #000000;
+    .evo-pdf-viewer-toolbar {
+
+      button {
+        background-color: #666666;
+        .evo-pdf-viewer-toolbar-icon {
+          path {
+            stroke: #ffffff;
+          }
+        }
+      }
+      select {
+        color: #ffffff;
+        background-color: #666666;
+      }
+      .evo-pdf-viewer-nav-page,
+      .evo-pdf-viewer-toolbar-bookmarks {
+        color: #ffffff;
+        border-color: #999999;
+      }
+    }
+    .evo-pdf-viewer-container {
+      --evo-scroll-container-track-color: #666666;
+      --evo-scroll-container-thumb-color: #dddddd;
+    }
+  }
+}