@anglefeint/astro-theme 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anglefeint/astro-theme",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "type": "module",
   "description": "Anglefeint core theme package for Astro",
   "keywords": [
@@ -44,6 +44,9 @@
     "./styles/*": "./src/styles/*",
     "./assets/*": "./src/assets/*",
     "./utils/merge": "./src/utils/merge.ts",
+    "./utils/number": "./src/utils/number.ts",
+    "./utils/pagination": "./src/utils/pagination.ts",
+    "./utils/pagination-style": "./src/utils/pagination-style.ts",
     "./utils/*": "./src/utils/*",
     "./content-schema": "./src/content-schema.ts"
   },

package/src/components/pagination/CyberPagination.astro

@@ -0,0 +1,235 @@
+---
+import type { PaginationModel } from '../../utils/pagination';
+import {
+  resolvePaginationItemVariant,
+  resolvePaginationVariant,
+} from '../../utils/pagination-style';
+
+interface Props {
+  model: PaginationModel;
+  locale: string;
+  blogRoot: string;
+  pathname: string;
+  labels: {
+    previous: string;
+    next: string;
+    paginationAria: string;
+    jumpTo: string;
+    jumpInputLabel: string;
+    jumpGo: string;
+  };
+  config: {
+    jump: {
+      enabled: boolean;
+      enterToGo: boolean;
+    };
+    style: {
+      enabled: boolean;
+      mode: 'random' | 'sequential' | 'fixed';
+      variants: number;
+      fixedVariant: number;
+    };
+  };
+}
+
+const { model, locale, blogRoot, pathname, labels, config } = Astro.props as Props;
+
+const pageHref = (pageNum: number) => (pageNum === 1 ? blogRoot : `${blogRoot}${pageNum}/`);
+const styleEnabled = config.style.enabled;
+const styleMode = config.style.mode;
+const styleVariants = Math.max(1, Math.min(12, Math.floor(config.style.variants)));
+const styleFixedVariant = Math.max(
+  1,
+  Math.min(styleVariants, Math.floor(config.style.fixedVariant))
+);
+const showJump = config.jump.enabled && model.showJump;
+
+const wrapVariant = resolvePaginationVariant({
+  currentPage: model.currentPage,
+  totalPages: model.totalPages,
+  locale,
+  pathname,
+  config: {
+    ENABLED: styleEnabled,
+    MODE: styleMode,
+    VARIANTS: styleVariants,
+    FIXED_VARIANT: styleFixedVariant,
+  },
+});
+
+const itemVariantClass = (seed: string, index: number) => {
+  if (!styleEnabled) return 'pg-var-1';
+  if (styleMode === 'random') return 'pg-var-random';
+  return resolvePaginationItemVariant({
+    seed,
+    index,
+    config: {
+      ENABLED: styleEnabled,
+      MODE: styleMode,
+      VARIANTS: styleVariants,
+      FIXED_VARIANT: styleFixedVariant,
+    },
+  }).className;
+};
+---
+
+{
+  model.totalPages > 1 && (
+    <div
+      class={`pagination-wrap ${wrapVariant.className}`}
+      data-pagination-component="cyber"
+      data-style-enabled={styleEnabled ? 'true' : 'false'}
+      data-style-mode={styleMode}
+      data-style-variants={String(styleVariants)}
+      data-style-fixed-variant={String(styleFixedVariant)}
+    >
+      <nav class="pagination" aria-label={labels.paginationAria}>
+        {model.currentPage > 1 && (
+          <a
+            class={`pg-item pg-nav ${itemVariantClass(`${locale}:prev:${model.currentPage}`, 0)}`}
+            href={pageHref(model.currentPage - 1)}
+            aria-label={labels.previous}
+          >
+            {labels.previous}
+          </a>
+        )}
+        {model.items.map((item, index) =>
+          item.kind === 'ellipsis' ? (
+            <span
+              class={`pg-item pg-ellipsis ${itemVariantClass(`${locale}:ellipsis:${item.id}`, index)}`}
+              aria-hidden="true"
+            >
+              ...
+            </span>
+          ) : (
+            <a
+              class={`pg-item ${itemVariantClass(`${locale}:page:${item.page}`, index)} ${item.page === model.currentPage ? 'current' : ''}`}
+              href={pageHref(item.page)}
+              aria-current={item.page === model.currentPage ? 'page' : undefined}
+            >
+              {item.page}
+            </a>
+          )
+        )}
+        {model.currentPage < model.totalPages && (
+          <a
+            class={`pg-item pg-nav ${itemVariantClass(`${locale}:next:${model.currentPage}`, model.items.length + 2)}`}
+            href={pageHref(model.currentPage + 1)}
+            aria-label={labels.next}
+          >
+            {labels.next}
+          </a>
+        )}
+      </nav>
+      {showJump && (
+        <form
+          class="pagination-jump"
+          data-blog-root={blogRoot}
+          data-total-pages={String(model.totalPages)}
+          data-enter-to-go={config.jump.enterToGo ? 'true' : 'false'}
+          aria-label={labels.jumpTo}
+        >
+          <label class="sr-only" for="pagination-jump-input">
+            {labels.jumpInputLabel}
+          </label>
+          <span class="pagination-jump-label">{labels.jumpTo}</span>
+          <input
+            id="pagination-jump-input"
+            class="pagination-jump-input"
+            type="text"
+            inputmode="numeric"
+            pattern="[0-9]*"
+            value={model.currentPage}
+          />
+          <button type="submit" class="pagination-jump-btn">
+            {labels.jumpGo}
+          </button>
+        </form>
+      )}
+    </div>
+  )
+}
+
+<script is:inline>
+  document.querySelectorAll('[data-pagination-component="cyber"]').forEach((wrap) => {
+    if (!(wrap instanceof HTMLElement)) return;
+    const toInt = (value, fallback) => {
+      const parsed = Number.parseInt(value ?? '', 10);
+      return Number.isFinite(parsed) ? parsed : fallback;
+    };
+    const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+
+    const styleEnabled = wrap.dataset.styleEnabled === 'true';
+    const styleMode = wrap.dataset.styleMode || 'random';
+    const variants = clamp(toInt(wrap.dataset.styleVariants, 9), 1, 12);
+    const fixedVariant = clamp(toInt(wrap.dataset.styleFixedVariant, 1), 1, variants);
+
+    const items = wrap.querySelectorAll('.pagination .pg-item');
+
+    if (!styleEnabled) {
+      items.forEach((item) => {
+        item.className = item.className
+          .replace(/\bpg-var-\d+\b/g, '')
+          .replace(/\bpg-var-random\b/g, '')
+          .trim();
+        item.classList.add('pg-var-1');
+      });
+    } else if (styleMode === 'random') {
+      items.forEach((item) => {
+        item.className = item.className
+          .replace(/\bpg-var-\d+\b/g, '')
+          .replace(/\bpg-var-random\b/g, '')
+          .trim();
+        const variant = Math.floor(Math.random() * variants) + 1;
+        item.classList.add(`pg-var-${variant}`);
+      });
+    } else if (styleMode === 'fixed') {
+      items.forEach((item) => {
+        item.className = item.className
+          .replace(/\bpg-var-\d+\b/g, '')
+          .replace(/\bpg-var-random\b/g, '')
+          .trim();
+        item.classList.add(`pg-var-${fixedVariant}`);
+      });
+    }
+
+    const form = wrap.querySelector('.pagination-jump');
+    if (!(form instanceof HTMLFormElement)) return;
+
+    const blogRoot = form.getAttribute('data-blog-root') || '/blog/';
+    const totalPages = Math.max(1, parseInt(form.getAttribute('data-total-pages') || '1', 10));
+    const enterToGo = form.getAttribute('data-enter-to-go') !== 'false';
+    const input = form.querySelector('.pagination-jump-input');
+    if (!(input instanceof HTMLInputElement)) return;
+
+    const normalizeRoot = (root) => {
+      if (!root) return '/blog/';
+      return root.endsWith('/') ? root : `${root}/`;
+    };
+
+    const toHref = (pageNum) => {
+      const root = normalizeRoot(blogRoot);
+      return pageNum === 1 ? root : `${root}${pageNum}/`;
+    };
+
+    const runJump = () => {
+      const normalized = (input.value || '').replace(/[^\d]/g, '');
+      const value = Number.parseInt(normalized || '1', 10);
+      if (!Number.isFinite(value)) return;
+      const target = Math.max(1, Math.min(totalPages, Math.round(value)));
+      window.location.assign(toHref(target));
+    };
+
+    form.addEventListener('submit', (event) => {
+      event.preventDefault();
+      runJump();
+    });
+
+    if (!enterToGo) {
+      input.addEventListener('keydown', (event) => {
+        if (event.key !== 'Enter') return;
+        event.preventDefault();
+      });
+    }
+  });
+</script>

package/src/utils/number.ts

@@ -0,0 +1,8 @@
+export function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+export function int(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.floor(value);
+}

package/src/utils/pagination-style.ts

@@ -0,0 +1,81 @@
+import { clamp, int } from './number';
+
+type PaginationStyleMode = 'random' | 'sequential' | 'fixed';
+
+interface PaginationStyleConfig {
+  ENABLED: boolean;
+  MODE: PaginationStyleMode;
+  VARIANTS: number;
+  FIXED_VARIANT: number;
+}
+
+interface ResolvePaginationVariantOptions {
+  currentPage: number;
+  totalPages: number;
+  locale: string;
+  pathname: string;
+  config: PaginationStyleConfig;
+}
+
+function hashString(value: string): number {
+  let hash = 5381;
+  for (let i = 0; i < value.length; i += 1) {
+    hash = (hash * 33) ^ value.charCodeAt(i);
+  }
+  return Math.abs(hash) >>> 0;
+}
+
+export function resolvePaginationVariant(options: ResolvePaginationVariantOptions): {
+  className: string;
+  variant: number;
+} {
+  const variants = clamp(int(options.config.VARIANTS), 1, 12);
+  if (!options.config.ENABLED) {
+    return { className: 'cyber-pg-v1', variant: 1 };
+  }
+
+  const mode = options.config.MODE;
+  let variant = 1;
+
+  if (mode === 'fixed') {
+    variant = clamp(int(options.config.FIXED_VARIANT), 1, variants);
+  } else if (mode === 'sequential') {
+    variant = ((Math.max(1, int(options.currentPage)) - 1) % variants) + 1;
+  } else {
+    const seedKey = `${options.locale}:${options.pathname}:${options.currentPage}:${options.totalPages}`;
+    variant = (hashString(seedKey) % variants) + 1;
+  }
+
+  return {
+    className: `cyber-pg-v${variant}`,
+    variant,
+  };
+}
+
+interface ResolvePaginationItemVariantOptions {
+  seed: string;
+  index: number;
+  config: PaginationStyleConfig;
+}
+
+export function resolvePaginationItemVariant(options: ResolvePaginationItemVariantOptions): {
+  className: string;
+  variant: number;
+} {
+  const variants = clamp(int(options.config.VARIANTS), 1, 12);
+  if (!options.config.ENABLED) {
+    return { className: 'pg-var-1', variant: 1 };
+  }
+
+  const mode = options.config.MODE;
+  let variant = 1;
+  if (mode === 'fixed') {
+    variant = clamp(int(options.config.FIXED_VARIANT), 1, variants);
+  } else if (mode === 'sequential') {
+    variant = (int(options.index) % variants) + 1;
+  } else {
+    variant = (hashString(options.seed) % variants) + 1;
+  }
+
+  return { className: `pg-var-${variant}`, variant };
+}

package/src/utils/pagination.ts

@@ -0,0 +1,67 @@
+import { clamp, int } from './number';
+
+export type PaginationItem = { kind: 'page'; page: number } | { kind: 'ellipsis'; id: string };
+
+export interface PaginationModel {
+  currentPage: number;
+  totalPages: number;
+  showJump: boolean;
+  items: PaginationItem[];
+}
+
+interface BuildPaginationModelOptions {
+  currentPage: number;
+  totalPages: number;
+  windowSize?: number;
+  showJumpThreshold?: number;
+}
+
+function addRange(set: Set<number>, start: number, end: number, totalPages: number) {
+  const s = clamp(int(start), 1, totalPages);
+  const e = clamp(int(end), 1, totalPages);
+  for (let page = s; page <= e; page += 1) set.add(page);
+}
+
+export function buildPaginationModel(options: BuildPaginationModelOptions): PaginationModel {
+  const totalPages = Math.max(1, int(options.totalPages));
+  const currentPage = clamp(int(options.currentPage), 1, totalPages);
+  const windowSize = clamp(int(options.windowSize ?? 7), 5, 21);
+  const showJumpThreshold = Math.max(1, int(options.showJumpThreshold ?? 12));
+  const showJump = totalPages > showJumpThreshold;
+
+  if (totalPages <= windowSize) {
+    return {
+      currentPage,
+      totalPages,
+      showJump,
+      items: Array.from({ length: totalPages }, (_, i) => ({ kind: 'page', page: i + 1 })),
+    };
+  }
+
+  const boundaryCount = 1;
+  const siblingCount = Math.max(1, Math.floor((windowSize - (boundaryCount * 2 + 3)) / 2));
+  const nearEdgeSlots = boundaryCount + siblingCount * 2 + 2;
+  const picked = new Set<number>();
+
+  addRange(picked, 1, boundaryCount, totalPages);
+  addRange(picked, totalPages - boundaryCount + 1, totalPages, totalPages);
+  addRange(picked, currentPage - siblingCount, currentPage + siblingCount, totalPages);
+
+  if (currentPage <= nearEdgeSlots) addRange(picked, 1, nearEdgeSlots + 1, totalPages);
+  if (currentPage >= totalPages - nearEdgeSlots + 1) {
+    addRange(picked, totalPages - nearEdgeSlots, totalPages, totalPages);
+  }
+
+  const pages = [...picked].sort((a, b) => a - b);
+  const items: PaginationItem[] = [];
+  for (let i = 0; i < pages.length; i += 1) {
+    const page = pages[i];
+    const prev = pages[i - 1];
+    if (typeof prev === 'number' && page - prev > 1) {
+      items.push({ kind: 'ellipsis', id: `ellipsis-${prev}-${page}` });
+    }
+    items.push({ kind: 'page', page });
+  }
+
+  return { currentPage, totalPages, showJump, items };
+}