@at-flux/astroflare 1.0.2 → 1.0.4

package/src/runtime/collection-query.ts

@@ -0,0 +1,156 @@
+export interface CollectionQueryRuntimeOptions {
+  cardSelector: string;
+  filterSelector: string;
+  paginationSelector: string;
+  perPage: number;
+  activeClass: string;
+  tagSeparator: string;
+  pageButtonClass: string;
+  ellipsisClass: string;
+  maxPageButtons: number;
+}
+
+const DEFAULTS: CollectionQueryRuntimeOptions = {
+  cardSelector: "[data-card]",
+  filterSelector: "[data-filter]",
+  paginationSelector: "[data-pagination]",
+  perPage: 9,
+  activeClass: "is-active",
+  tagSeparator: "|",
+  pageButtonClass: "af-pager-pill",
+  ellipsisClass: "af-pager-ellipsis",
+  maxPageButtons: 7,
+};
+
+const getConfig = (root: HTMLElement): CollectionQueryRuntimeOptions => {
+  const {
+    cardSelector,
+    filterSelector,
+    paginationSelector,
+    perPage,
+    activeClass,
+    tagSeparator,
+    pageButtonClass,
+    ellipsisClass,
+    maxPageButtons,
+  } = root.dataset;
+
+  return {
+    cardSelector: cardSelector ?? DEFAULTS.cardSelector,
+    filterSelector: filterSelector ?? DEFAULTS.filterSelector,
+    paginationSelector: paginationSelector ?? DEFAULTS.paginationSelector,
+    perPage: Number(perPage ?? DEFAULTS.perPage),
+    activeClass: activeClass ?? DEFAULTS.activeClass,
+    tagSeparator: tagSeparator ?? DEFAULTS.tagSeparator,
+    pageButtonClass: pageButtonClass ?? DEFAULTS.pageButtonClass,
+    ellipsisClass: ellipsisClass ?? DEFAULTS.ellipsisClass,
+    maxPageButtons: Number(maxPageButtons ?? DEFAULTS.maxPageButtons),
+  };
+};
+
+export const getClientPageSequence = (
+  totalPages: number,
+  currentPage: number,
+  maxButtons: number,
+): Array<number | "…"> => {
+  if (totalPages <= maxButtons) {
+    return Array.from({ length: totalPages }, (_, index) => index + 1);
+  }
+
+  const innerSlots = Math.max(1, maxButtons - 2);
+  const left = Math.max(2, currentPage - Math.floor(innerSlots / 2));
+  const right = Math.min(totalPages - 1, left + innerSlots - 1);
+  const adjustedLeft = Math.max(2, right - innerSlots + 1);
+
+  const sequence: Array<number | "…"> = [1];
+  if (adjustedLeft > 2) sequence.push("…");
+  for (let page = adjustedLeft; page <= right; page += 1) sequence.push(page);
+  if (right < totalPages - 1) sequence.push("…");
+  sequence.push(totalPages);
+  return sequence;
+};
+
+export const initCollectionQueryElement = (root: HTMLElement): void => {
+  if (root.dataset.afInit === "true") return;
+  root.dataset.afInit = "true";
+
+  const config = getConfig(root);
+  const cards = Array.from(root.querySelectorAll<HTMLElement>(config.cardSelector));
+  const filters = Array.from(root.querySelectorAll<HTMLButtonElement>(config.filterSelector));
+  const pagination = root.querySelector<HTMLElement>(config.paginationSelector);
+
+  let page = 1;
+  let activeFilter = filters.find((button) => button.classList.contains(config.activeClass))?.dataset.filter ?? "all";
+
+  const filterCards = (): HTMLElement[] =>
+    cards.filter((card) => {
+      if (activeFilter === "all") return true;
+      const tags = (card.dataset.tags ?? "").split(config.tagSeparator);
+      return tags.includes(activeFilter);
+    });
+
+  const renderPagination = (totalPages: number) => {
+    if (!pagination) return;
+    pagination.innerHTML = "";
+    if (totalPages <= 1) return;
+
+    const pages = getClientPageSequence(totalPages, page, config.maxPageButtons);
+    for (const entry of pages) {
+      if (entry === "…") {
+        const ellipsis = document.createElement("span");
+        ellipsis.className = config.ellipsisClass;
+        ellipsis.textContent = "…";
+        ellipsis.setAttribute("aria-hidden", "true");
+        pagination.appendChild(ellipsis);
+        continue;
+      }
+
+      const button = document.createElement("button");
+      button.type = "button";
+      button.dataset.page = String(entry);
+      button.textContent = String(entry);
+      button.className = [config.pageButtonClass, entry === page ? config.activeClass : ""]
+        .filter(Boolean)
+        .join(" ");
+      button.addEventListener("click", () => {
+        page = entry;
+        render();
+      });
+      pagination.appendChild(button);
+    }
+  };
+
+  const render = () => {
+    const filtered = filterCards();
+    const totalPages = Math.max(1, Math.ceil(filtered.length / config.perPage));
+    page = Math.min(page, totalPages);
+
+    const start = (page - 1) * config.perPage;
+    const end = start + config.perPage;
+
+    cards.forEach((card) => {
+      card.style.display = "none";
+    });
+    filtered.slice(start, end).forEach((card) => {
+      card.style.display = "";
+    });
+
+    renderPagination(totalPages);
+  };
+
+  filters.forEach((button) => {
+    button.addEventListener("click", () => {
+      activeFilter = button.dataset.filter ?? "all";
+      page = 1;
+      filters.forEach((item) => item.classList.toggle(config.activeClass, item === button));
+      render();
+    });
+  });
+
+  render();
+};
+
+export const initCollectionQueryRoots = (scope: ParentNode = document): void => {
+  const roots = Array.from(scope.querySelectorAll<HTMLElement>("collection-query[data-af-query]"));
+  roots.forEach((root) => initCollectionQueryElement(root));
+};

package/src/runtime/media-protect.ts

@@ -0,0 +1,70 @@
+interface MediaProtectState {
+  drag: boolean;
+  contextMenu: boolean;
+}
+
+declare global {
+  interface Window {
+    __astroflareMediaProtectHandlerState__?: MediaProtectState;
+  }
+}
+
+const STATE_KEY = "__astroflareMediaProtectHandlerState__";
+
+const shouldPrevent = (target: EventTarget | null, mode: "drag" | "contextMenu"): boolean => {
+  if (!(target instanceof Element)) return false;
+  const root = target.closest<HTMLElement>("[data-media-protect-root]");
+  if (!root) return false;
+  return mode === "drag"
+    ? root.dataset.mediaProtectDrag === "true"
+    : root.dataset.mediaProtectContextMenu === "true";
+};
+
+const ensureHandlers = (options: { drag: boolean; contextMenu: boolean }) => {
+  const runtime = window;
+  const state = runtime[STATE_KEY] ?? { drag: false, contextMenu: false };
+  runtime[STATE_KEY] = state;
+
+  if (options.contextMenu && !state.contextMenu) {
+    document.addEventListener(
+      "contextmenu",
+      (event) => {
+        if (shouldPrevent(event.target, "contextMenu")) event.preventDefault();
+      },
+      { capture: true },
+    );
+    state.contextMenu = true;
+  }
+
+  if (options.drag && !state.drag) {
+    document.addEventListener(
+      "dragstart",
+      (event) => {
+        if (shouldPrevent(event.target, "drag")) event.preventDefault();
+      },
+      { capture: true },
+    );
+    state.drag = true;
+  }
+};
+
+export const initMediaProtectRoots = (scope: ParentNode = document): void => {
+  const roots = Array.from(
+    scope.querySelectorAll<HTMLElement>(
+      "[data-media-protect-root]:not([data-media-protect-init='true'])",
+    ),
+  );
+  if (roots.length === 0) return;
+
+  let dragNeeded = false;
+  let contextMenuNeeded = false;
+
+  roots.forEach((root) => {
+    root.dataset.mediaProtectInit = "true";
+    dragNeeded = dragNeeded || root.dataset.mediaProtectDrag === "true";
+    contextMenuNeeded =
+      contextMenuNeeded || root.dataset.mediaProtectContextMenu === "true";
+  });
+
+  ensureHandlers({ drag: dragNeeded, contextMenu: contextMenuNeeded });
+};

package/src/styles/accessibility.css

@@ -13,7 +13,7 @@
   background: color-mix(in oklab, var(--color-brand, #7c5cff) 25%, transparent);
 }
 
-:where([data-theme='dark']) ::selection {
+:where([data-theme="dark"]) ::selection {
   background: color-mix(in oklab, var(--color-brand, #7c5cff) 35%, transparent);
 }
 

package/src/styles/no-save.css

@@ -20,14 +20,14 @@
 }
 
 .no-save-container::before {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
 }
 
 a:has(.no-save)::after {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
   z-index: 2;

package/src/styles/prose.css

@@ -3,7 +3,9 @@
  * Uses CSS custom property --color-brand for theming.
  * Apply .prose to the container element.
  */
-.prose { color: inherit; }
+.prose {
+  color: inherit;
+}
 
 .prose h1,
 .prose h2,
@@ -20,8 +22,12 @@
   line-height: 1.6;
 }
 
-.prose a { color: var(--color-brand, #7c5cff); }
-.prose a:hover { opacity: 0.8; }
+.prose a {
+  color: var(--color-brand, #7c5cff);
+}
+.prose a:hover {
+  opacity: 0.8;
+}
 
 .prose code {
   background: rgba(0, 0, 0, 0.05);
@@ -30,7 +36,7 @@
   font-size: 0.9em;
 }
 
-:where([data-theme='dark']) .prose code {
+:where([data-theme="dark"]) .prose code {
   background: rgba(255, 255, 255, 0.1);
 }
 
@@ -52,7 +58,9 @@
   padding-left: 2em;
 }
 
-.prose li { margin: 0.5em 0; }
+.prose li {
+  margin: 0.5em 0;
+}
 
 .prose blockquote {
   margin: 2em 0;
@@ -63,12 +71,16 @@
   font-style: italic;
 }
 
-:where([data-theme='dark']) .prose blockquote {
+:where([data-theme="dark"]) .prose blockquote {
   background: color-mix(in oklab, var(--color-brand, #7c5cff) 12%, transparent);
 }
 
-.prose blockquote p { margin-bottom: 0.5rem; }
-.prose blockquote p:last-child { margin-bottom: 0; }
+.prose blockquote p {
+  margin-bottom: 0.5rem;
+}
+.prose blockquote p:last-child {
+  margin-bottom: 0;
+}
 
 .prose img {
   max-width: 100%;
@@ -90,8 +102,8 @@
   text-align: left;
 }
 
-:where([data-theme='dark']) .prose th,
-:where([data-theme='dark']) .prose td {
+:where([data-theme="dark"]) .prose th,
+:where([data-theme="dark"]) .prose td {
   border-color: rgba(255, 255, 255, 0.1);
 }
 
@@ -100,6 +112,6 @@
   background: rgba(0, 0, 0, 0.05);
 }
 
-:where([data-theme='dark']) .prose th {
+:where([data-theme="dark"]) .prose th {
   background: rgba(255, 255, 255, 0.05);
 }

package/src/styles/scrollbar.css

@@ -2,10 +2,17 @@
  * Branded scrollbar styling.
  * Uses --color-brand and --color-brand-pastel for theming.
  */
-::-webkit-scrollbar { width: 8px; }
-::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
 ::-webkit-scrollbar-thumb {
-  background: var(--color-brand-pastel, color-mix(in oklab, var(--color-brand, #7c5cff) 60%, white));
+  background: var(
+    --color-brand-pastel,
+    color-mix(in oklab, var(--color-brand, #7c5cff) 60%, white)
+  );
   border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {