@alphacifer/slidev-addon-theme 0.0.1 → 0.0.3

package/utils/shiftingHeading/collectShiftingIntroNodes.ts

@@ -0,0 +1,74 @@
+import type { Directive, VNode } from 'vue';
+
+interface IShiftingIntroContent {
+  readonly key: number;
+  readonly node: VNode;
+}
+
+export interface IShiftingIntroNodes {
+  readonly title: VNode | null;
+  readonly clickRef: ReadonlyMap<number, number>;
+  readonly contents: readonly IShiftingIntroContent[];
+}
+
+const CLICK_DIRECTIVE_NAMES = new Set(['click', 'v-click', 'vClick']);
+
+const getDirectiveName = (directive: Directive): string | undefined => {
+  if (typeof directive === 'function') {
+    return directive.name;
+  }
+
+  if ('name' in directive && typeof directive.name === 'string') {
+    return directive.name;
+  }
+
+  return undefined;
+};
+
+const hasImplicitClickDirective = (node: VNode): boolean => {
+  return Boolean(
+    node.dirs?.some(({ dir, value }) => {
+      const name = getDirectiveName(dir);
+      return (
+        name !== undefined &&
+        CLICK_DIRECTIVE_NAMES.has(name) &&
+        value === undefined
+      );
+    }),
+  );
+};
+
+/**
+ * Separates the first heading from a shifting-intro slot and remaps implicit
+ * v-click directives after the layout's internal reveal click.
+ */
+export const collectShiftingIntroNodes = (
+  children: readonly VNode[],
+): IShiftingIntroNodes => {
+  let title: VNode | null = null;
+  let clickIndex = 1;
+  const clickRef = new Map<number, number>();
+  const contents: IShiftingIntroContent[] = [];
+
+  children.forEach((node, key) => {
+    if (title === null && node.type === 'h1') {
+      title = node;
+    } else {
+      contents.push({
+        key,
+        node,
+      });
+    }
+
+    if (hasImplicitClickDirective(node)) {
+      clickIndex += 1;
+      clickRef.set(key, clickIndex);
+    }
+  });
+
+  return {
+    title,
+    clickRef,
+    contents,
+  };
+};

package/utils/tableOfContents/calculateTocCenterAlignmentOffset.ts

@@ -0,0 +1,11 @@
+export function calculateTocCenterAlignmentOffsetPx(
+  markerCenterY: number,
+  articleCenterY: number,
+  scaleY: number,
+): number {
+  if (scaleY <= 0) {
+    return 0;
+  }
+
+  return (markerCenterY - articleCenterY) / scaleY;
+}

package/utils/tableOfContents/calculateTocMarkerPositions.ts

@@ -0,0 +1,118 @@
+export interface ITocMarkerPosition {
+  readonly offsetFromMiddlePx: number;
+  readonly rightShiftPx: number;
+  readonly topPercent: number;
+}
+
+export const MAXIMUM_TOC_ITEM_COUNT = 7;
+const TOC_CANVAS_HEIGHT_PX = 552;
+const TOC_VERTICAL_PADDING_PX = 40;
+const ROOT_FONT_SIZE_PX = 16;
+const TOC_ITEM_HEIGHT_REM = 2.3;
+const TOC_ITEM_HEIGHT_PX = TOC_ITEM_HEIGHT_REM * ROOT_FONT_SIZE_PX;
+const MARKER_TOP_PERCENT =
+  ((TOC_VERTICAL_PADDING_PX + TOC_ITEM_HEIGHT_PX / 2) / TOC_CANVAS_HEIGHT_PX) *
+  100;
+const MARKER_BOTTOM_PERCENT = 100 - MARKER_TOP_PERCENT;
+const MARKER_HORIZONTAL_CURVE_PX = 9;
+const MARKER_MIDDLE_RIGHT_SHIFT_PX = 24;
+const MARKER_VERTICAL_STEP_PERCENT =
+  (MARKER_BOTTOM_PERCENT - MARKER_TOP_PERCENT) / (MAXIMUM_TOC_ITEM_COUNT - 1);
+
+export function calculateTocMarkerPositions(
+  count: number,
+): readonly ITocMarkerPosition[] {
+  if (!Number.isInteger(count) || count <= 0) {
+    return [];
+  }
+
+  const boundedCount = Math.min(count, MAXIMUM_TOC_ITEM_COUNT);
+  const middleIndex = (boundedCount - 1) / 2;
+  const centerPercent = (MARKER_TOP_PERCENT + MARKER_BOTTOM_PERCENT) / 2;
+
+  return Array.from({ length: boundedCount }, (_, index) => {
+    const distanceFromMiddle = Math.abs(index - middleIndex);
+
+    return {
+      offsetFromMiddlePx:
+        distanceFromMiddle * distanceFromMiddle * MARKER_HORIZONTAL_CURVE_PX,
+      rightShiftPx: MARKER_MIDDLE_RIGHT_SHIFT_PX,
+      topPercent: Number(
+        (
+          centerPercent +
+          (index - middleIndex) * MARKER_VERTICAL_STEP_PERCENT
+        ).toFixed(2),
+      ),
+    };
+  });
+}
+
+export interface ICalculateTocItemCountParams {
+  readonly maximumCount: number;
+  readonly availableCount: number;
+}
+
+export function calculateTocItemCount({
+  maximumCount,
+  availableCount,
+}: ICalculateTocItemCountParams): number {
+  const normalizedAvailableCount = Math.max(0, Math.trunc(availableCount));
+  const normalizedMaximumCount = Number.isFinite(maximumCount)
+    ? Math.max(1, Math.min(MAXIMUM_TOC_ITEM_COUNT, Math.trunc(maximumCount)))
+    : MAXIMUM_TOC_ITEM_COUNT;
+
+  return Math.min(normalizedAvailableCount, normalizedMaximumCount);
+}
+
+export function calculateTocMarkerCenterPercent(count: number): number {
+  const positions = calculateTocMarkerPositions(count);
+  const firstPosition = positions[0];
+  const lastPosition = positions.at(-1);
+
+  if (!firstPosition || !lastPosition) {
+    return 50;
+  }
+
+  return (firstPosition.topPercent + lastPosition.topPercent) / 2;
+}
+
+export function calculateTocMiddleMarkerOffsetPx(count: number): number {
+  const positions = calculateTocMarkerPositions(count);
+  const middlePosition = positions[Math.floor((positions.length - 1) / 2)];
+
+  if (!middlePosition) {
+    return 0;
+  }
+
+  return middlePosition.rightShiftPx - middlePosition.offsetFromMiddlePx;
+}
+
+export function calculateTocArticleOffsetPx(
+  position: ITocMarkerPosition,
+): number {
+  const connectorWidthPx = Math.max(
+    22,
+    48 - position.offsetFromMiddlePx * 0.45,
+  );
+
+  return (
+    position.rightShiftPx -
+    position.offsetFromMiddlePx +
+    connectorWidthPx -
+    MARKER_MIDDLE_RIGHT_SHIFT_PX
+  );
+}
+
+export function calculateTocListGapRem(count: number): number {
+  if (!Number.isInteger(count) || count <= 1) {
+    return 0;
+  }
+
+  const availableCenterSpanPx =
+    TOC_CANVAS_HEIGHT_PX - TOC_VERTICAL_PADDING_PX * 2 - TOC_ITEM_HEIGHT_PX;
+  const rowHeightRem =
+    availableCenterSpanPx / (MAXIMUM_TOC_ITEM_COUNT - 1) / ROOT_FONT_SIZE_PX;
+  const gapRem = rowHeightRem - TOC_ITEM_HEIGHT_REM;
+
+  return Number(gapRem.toFixed(2));
+}

package/utils/tableOfContents/calculateUniformTocArticleWidth.ts

@@ -0,0 +1,10 @@
+const MINIMUM_TOC_ARTICLE_WIDTH_PX = 260;
+
+export function calculateUniformTocArticleWidthPx(
+  articleWidths: readonly number[],
+): number {
+  return articleWidths.reduce(
+    (longestWidth, width) => Math.max(longestWidth, width),
+    MINIMUM_TOC_ARTICLE_WIDTH_PX,
+  );
+}

package/utils/tableOfContents/createTocArcPath.ts

@@ -0,0 +1,80 @@
+import {
+  calculateTocMarkerPositions,
+  MAXIMUM_TOC_ITEM_COUNT,
+} from './calculateTocMarkerPositions';
+import type { ITocConnectorPoint } from './createTocConnectorPath';
+
+const TOC_ARC_LEFT_PERCENT = 40.4;
+
+export interface ICalculateFullTocArcPointsParams {
+  readonly width: number;
+  readonly height: number;
+}
+
+function formatCoordinate(value: number): number {
+  return Number(value.toFixed(2));
+}
+
+export function calculateFullTocArcPoints({
+  width,
+  height,
+}: ICalculateFullTocArcPointsParams): readonly ITocConnectorPoint[] {
+  return calculateTocMarkerPositions(MAXIMUM_TOC_ITEM_COUNT).map(
+    ({ offsetFromMiddlePx, rightShiftPx, topPercent }) => {
+      return {
+        x:
+          width * (TOC_ARC_LEFT_PERCENT / 100) -
+          offsetFromMiddlePx +
+          rightShiftPx,
+        y: height * (topPercent / 100),
+      };
+    },
+  );
+}
+
+export function createTocArcPath(
+  points: readonly ITocConnectorPoint[],
+): string {
+  const firstPoint = points[0];
+
+  if (!firstPoint || points.length < 2) {
+    return '';
+  }
+
+  if (points.length === 2) {
+    const lastPoint = points[1];
+
+    return lastPoint
+      ? `M ${formatCoordinate(firstPoint.x)} ${formatCoordinate(firstPoint.y)} L ${formatCoordinate(lastPoint.x)} ${formatCoordinate(lastPoint.y)}`
+      : '';
+  }
+
+  const commands = [
+    `M ${formatCoordinate(firstPoint.x)} ${formatCoordinate(firstPoint.y)}`,
+  ];
+
+  for (let index = 0; index < points.length - 1; index += 1) {
+    const point = points[index];
+    const previousPoint = points[index - 1] ?? point;
+    const nextPoint = points[index + 1];
+    const followingPoint = points[index + 2] ?? nextPoint;
+
+    if (!point || !previousPoint || !nextPoint || !followingPoint) {
+      continue;
+    }
+
+    const firstControlPoint = {
+      x: point.x + (nextPoint.x - previousPoint.x) / 6,
+      y: point.y + (nextPoint.y - previousPoint.y) / 6,
+    };
+    const secondControlPoint = {
+      x: nextPoint.x - (followingPoint.x - point.x) / 6,
+      y: nextPoint.y - (followingPoint.y - point.y) / 6,
+    };
+    commands.push(
+      `C ${formatCoordinate(firstControlPoint.x)} ${formatCoordinate(firstControlPoint.y)} ${formatCoordinate(secondControlPoint.x)} ${formatCoordinate(secondControlPoint.y)} ${formatCoordinate(nextPoint.x)} ${formatCoordinate(nextPoint.y)}`,
+    );
+  }
+
+  return commands.join(' ');
+}

package/utils/tableOfContents/createTocConnectorPath.ts

@@ -0,0 +1,43 @@
+export interface ITocConnectorPoint {
+  readonly x: number;
+  readonly y: number;
+}
+
+const CONNECTOR_SKEW_WIDTH_PX = 24;
+const CONNECTOR_ARTICLE_OVERLAP_PX = 12;
+
+export interface ICalculateTocConnectorEndXParams {
+  readonly articleLeftX: number;
+}
+
+function formatCoordinate(value: number): number {
+  return Number(value.toFixed(2));
+}
+
+export function calculateTocConnectorEndX({
+  articleLeftX,
+}: ICalculateTocConnectorEndXParams): number {
+  return articleLeftX + CONNECTOR_ARTICLE_OVERLAP_PX;
+}
+
+export function createTocConnectorPath(
+  start: ITocConnectorPoint,
+  end: ITocConnectorPoint,
+  isMiddle: boolean,
+): string {
+  const startX = formatCoordinate(start.x);
+  const startY = formatCoordinate(start.y);
+  const endX = formatCoordinate(end.x);
+  const endY = formatCoordinate(end.y);
+
+  if (isMiddle) {
+    return `M ${startX} ${startY} L ${endX} ${endY}`;
+  }
+
+  const availableWidth = Math.max(0, end.x - start.x);
+  const elbowX = formatCoordinate(
+    start.x + Math.min(CONNECTOR_SKEW_WIDTH_PX, availableWidth / 2),
+  );
+
+  return `M ${startX} ${startY} L ${elbowX} ${endY} L ${endX} ${endY}`;
+}

package/utils/tableOfContents/index.ts

@@ -0,0 +1,5 @@
+export * from './calculateTocCenterAlignmentOffset';
+export * from './calculateTocMarkerPositions';
+export * from './calculateUniformTocArticleWidth';
+export * from './createTocArcPath';
+export * from './createTocConnectorPath';