for-humanity 0.4.3 → 0.5.0

package/src/component/widget/shell/_function/bind-navigation-scroll.ts

@@ -1,123 +0,0 @@
-import {navigation_mobile_query, navigation_scroll_storage_key} from "@/component/widget/shell/_constant/navigation";
-
-/**
- * 문서 이동·새로고침에서 공유 탐색의 위치 유지 · 본문 스크롤과 독립
- * 저장소 실패는 기본 탐색 유지, 문서 목록 변경은 이전 위치를 사용하지 않음
- */
-export const bindNavigationScroll = () => {
-    const navigation = document.querySelector<HTMLElement>("[data-navigation]");
-    const sidebar = document.querySelector<HTMLElement>(".wg_shell__sidebar");
-    const dialog = document.querySelector<HTMLDialogElement>("[data-navigation-drawer]");
-    const openButton = document.querySelector<HTMLButtonElement>("[data-navigation-open]");
-
-    if (!navigation || !sidebar || !dialog || !openButton) {
-        return;
-    }
-
-    const mobile = matchMedia(navigation_mobile_query);
-    const layout = {mobile: mobile.matches};
-    // 목차와 현재 상태는 페이지마다 바뀜 · 공통 문서 링크의 순서로 저장 위치의 유효성 판단
-    const signature = [...navigation.querySelectorAll<HTMLAnchorElement>(".wg_shellNav__root a[href]")].map((link) => `${link.pathname}:${link.textContent}`).join("\n");
-    const positions = new Map<HTMLElement, number>();
-    const storageKeys = new Map<HTMLElement, string>([
-        [sidebar, `${navigation_scroll_storage_key}:desktop`],
-        [dialog, `${navigation_scroll_storage_key}:drawer`],
-    ]);
-    const userInput = new AbortController();
-
-    for (const [port, key] of storageKeys) {
-        try {
-            const value = sessionStorage.getItem(key);
-
-            if (value !== null) {
-                const stored: unknown = JSON.parse(value);
-
-                if (
-                    typeof stored === "object" &&
-                    stored !== null &&
-                    "navigation" in stored &&
-                    stored.navigation === signature &&
-                    "top" in stored &&
-                    typeof stored.top === "number" &&
-                    Number.isFinite(stored.top) &&
-                    stored.top >= 0
-                ) {
-                    positions.set(port, stored.top);
-                }
-            }
-        } catch {
-            // 차단되거나 손상된 저장소는 복원만 생략 · 스크롤과 기본 링크 이동 유지
-        }
-
-        for (const type of ["wheel", "touchstart", "pointerdown", "keydown"]) {
-            port.addEventListener(type, () => userInput.abort(), {once: true, passive: true});
-        }
-    }
-    const initialPositions = new Map(positions);
-
-    /**
-     * 네이티브 스크롤 범위로 복원 · 닫힌 드로어의 0 좌표는 복원하지 않음
-     */
-    const restoreScroll = () => {
-        layout.mobile = mobile.matches;
-        const port = mobile.matches ? dialog : sidebar;
-        const top = positions.get(port);
-
-        if (top === undefined || (mobile.matches && !dialog.open)) {
-            return;
-        }
-
-        port.scrollTop = top;
-    };
-
-    /**
-     * 드로어 닫기 이전 클릭·현재 스크롤·페이지 이탈에서 마지막 탐색 위치 저장
-     */
-    const saveScroll = (event: Event) => {
-        const port = mobile.matches ? dialog : sidebar;
-        const key = storageKeys.get(port);
-
-        // 반응형 전환의 숨김·닫기 스크롤은 사용자 위치가 아님 · 활성 포트만 저장
-        if (layout.mobile !== mobile.matches || (event.type === "scroll" && event.currentTarget !== port) || key === undefined || (mobile.matches && !dialog.open)) {
-            return;
-        }
-
-        positions.set(port, port.scrollTop);
-
-        try {
-            sessionStorage.setItem(key, JSON.stringify({navigation: signature, top: port.scrollTop}));
-        } catch {
-            // 저장 실패도 같은 페이지의 드로어 재열기와 반응형 위치 복원은 유지
-        }
-    };
-
-    /**
-     * 글꼴로 탐색 높이가 달라진 경우 한 번만 재보정 · 사용자 입력이 먼저면 유지
-     */
-    const settleScroll = async () => {
-        await document.fonts.ready;
-
-        if (!userInput.signal.aborted) {
-            const port = mobile.matches ? dialog : sidebar;
-            const top = initialPositions.get(port);
-
-            if (top !== undefined && (!mobile.matches || dialog.open)) {
-                port.scrollTop = top;
-            }
-        }
-    };
-
-    sidebar.addEventListener("scroll", saveScroll, {passive: true});
-    dialog.addEventListener("scroll", saveScroll, {passive: true});
-    navigation.addEventListener("click", saveScroll, {capture: true});
-    openButton.addEventListener("click", restoreScroll);
-    mobile.addEventListener("change", restoreScroll);
-    addEventListener("pagehide", saveScroll);
-    restoreScroll();
-
-    if (document.readyState === "complete") {
-        settleScroll();
-    } else {
-        addEventListener("load", settleScroll, {once: true});
-    }
-};

package/src/component/widget/shell/_wg-shell-nav-list.tsx

@@ -1,87 +0,0 @@
-import clsx from "clsx";
-import {Fragment} from "react";
-import type {Doc} from "@/type/doc";
-import type {DocGroup} from "@/type/doc-group";
-import "./_wg-shell-nav-list.css";
-
-/**
- * 한 단계의 문서 목록과 하위 묶음 · 재귀에서도 같은 탐색 표현 유지
- */
-export interface WgShellNavListProps {
-    /**
-     * 현재 단계의 문서와 하위 묶음
-     */
-    group: DocGroup;
-    /**
-     * 현재 문서 · 조상 묶음의 경로까지 표시
-     */
-    currentDoc?: Doc;
-}
-
-export const WgShellNavList = (props: WgShellNavListProps) => {
-    const currentAncestors = new Set(props.currentDoc?.ancestors);
-    const entries = [
-        ...props.group.docs.map((doc) => {
-            const active = doc.id === props.currentDoc?.id;
-            return {kind: "document" as const, key: `doc:${doc.id}`, doc, active, current: active || currentAncestors.has(doc.id)};
-        }),
-        ...props.group.groups.map((group) => ({
-            kind: "group" as const,
-            key: `group:${JSON.stringify(group.path)}`,
-            group,
-            current: group.path.every((name, index) => name === props.currentDoc?.data.group[index]),
-        })),
-    ];
-    const currentIndex = entries.findIndex((entry) => entry.current);
-
-    return (
-        <ul className={clsx("wg_shellNavList__root")} aria-label={props.group.name}>
-            {/**
-             * 현재 경로 앞의 줄기와 도착 가지 · 문서 링크는 원래 파일 URL 사용
-             */}
-            {entries.map((entry, index) => (
-                <li
-                    className={clsx("wg_shellNavList__item", {
-                        "wg_shellNavList__item--trail": index < currentIndex,
-                        "wg_shellNavList__item--current": entry.current,
-                    })}
-                    key={entry.key}
-                >
-                    {/**
-                     * 문서 링크 · 부모도 독립 페이지, 현재 한 문서에만 페이지 상태 부여
-                     */}
-                    {entry.kind === "document" && (
-                        <Fragment>
-                            <a
-                                className={clsx("wg_shellNavList__link", {"wg_shellNavList__link--active": entry.active})}
-                                href={`/${entry.doc.id}/`}
-                                title={entry.doc.data.label}
-                                aria-current={entry.active ? "page" : undefined}
-                            >
-                                {entry.doc.data.name}
-                            </a>
-                            {/**
-                             * 하위 문서 · 부모 아래에서도 기존 목록의 들여쓰기와 키보드 이동 유지
-                             */}
-                            {entry.doc.children !== undefined && (
-                                <WgShellNavList
-                                    group={{name: entry.doc.data.name, path: entry.doc.data.group, docs: entry.doc.children, groups: []}}
-                                    currentDoc={props.currentDoc}
-                                />
-                            )}
-                        </Fragment>
-                    )}
-                    {/**
-                     * 하위 묶음 · 같은 목록을 재귀로 이어 깊이에 따라 들여쓰기
-                     */}
-                    {entry.kind === "group" && (
-                        <Fragment>
-                            <span className={clsx("wg_shellNavList__branch")}>{entry.group.name}</span>
-                            <WgShellNavList group={entry.group} currentDoc={props.currentDoc} />
-                        </Fragment>
-                    )}
-                </li>
-            ))}
-        </ul>
-    );
-};

package/src/component/widget/shell/_wg-shell-nav.tsx

@@ -1,49 +0,0 @@
-import clsx from "clsx";
-import {WgShellNavList} from "@/component/widget/shell/_wg-shell-nav-list";
-import {copy_nav_aria_label} from "@/constant/copy";
-import {toDocGroups} from "@/content/to-doc-groups/to-doc-groups";
-import type {Doc} from "@/type/doc";
-import type {SiteConfig} from "@/type/site-config";
-import "./_wg-shell-nav.css";
-
-/**
- * 서버 사이드바 입력 · 읽는 순서의 문서 묶음
- */
-export interface WgShellNavProps {
-    /**
-     * 문서 묶음 순서
-     */
-    site: SiteConfig;
-    /**
-     * 전체 문서 목록
-     */
-    docs: Doc[];
-    /**
-     * 현재 문서 id · 첫 화면 생략
-     */
-    current?: string;
-}
-
-export const WgShellNav = (props: WgShellNavProps) => {
-    const docGroups = toDocGroups({docs: props.docs, navigation: props.site.navigation});
-    const currentDoc = props.docs.find((doc) => doc.id === props.current);
-
-    return (
-        <nav className={clsx("wg_shellNav__root")} aria-label={copy_nav_aria_label}>
-            {/**
-             * 문서 이동 · 독자 목적별 묶음
-             */}
-            <div className={clsx("wg_shellNav__docs")}>
-                {/**
-                 * 묶음 이름과 독립 문서 · 제목이 링크의 접근 가능한 이름
-                 */}
-                {docGroups.map((group) => (
-                    <section className={clsx("wg_shellNav__docGroup")} key={group.name} aria-label={group.name}>
-                        <div className={clsx("wg_shellNav__group")}>{group.name}</div>
-                        <WgShellNavList group={group} currentDoc={currentDoc} />
-                    </section>
-                ))}
-            </div>
-        </nav>
-    );
-};

package/src/component/widget/shell/_wg-shell-toc.tsx

@@ -1,57 +0,0 @@
-import clsx from "clsx";
-import {Fragment} from "react";
-import type {TocGroup} from "@/component/widget/shell/_type/toc-group";
-import {copy_nav_toc_label} from "@/constant/copy";
-import "./_wg-shell-toc.css";
-
-/**
- * 문서 탐색 아래의 현재 문서 목차 · client.ts에서 읽는 위치 표시
- */
-export interface WgShellTocProps {
-    /**
-     * 본문 순서의 가름·절·소제목 · 전체 펼침
-     */
-    groups: TocGroup[];
-}
-
-export const WgShellToc = (props: WgShellTocProps) => {
-    return (
-        <nav className={clsx("wg_shellToc__root")} aria-label={copy_nav_toc_label}>
-            <div className={clsx("wg_shellToc__label")}>{copy_nav_toc_label}</div>
-            {/**
-             * 가름별 제목 이동 · 작성한 제목을 본문과 동일하게 표시
-             */}
-            {props.groups.map((group) => (
-                <Fragment key={group.sections[0].heading.slug}>
-                    {group.part !== undefined && <div className={clsx("wg_shellToc__group")}>{group.part}</div>}
-                    {/**
-                     * 현재 위치와 무관하게 모든 소제목 표시
-                     */}
-                    <ul className={clsx("wg_shellToc__list")}>
-                        {group.sections.map((section) => (
-                            <li className={clsx("wg_shellToc__item")} key={section.heading.slug}>
-                                <a className={clsx("wg_shellToc__link")} href={`#${section.heading.slug}`} data-toc-link="">
-                                    {section.heading.text}
-                                </a>
-                                {/**
-                                 * 소제목의 들여쓰기 · JavaScript 없이도 제목 이동 가능
-                                 */}
-                                {section.subs.length > 0 && (
-                                    <ul className={clsx("wg_shellToc__sub")}>
-                                        {section.subs.map((sub) => (
-                                            <li className={clsx("wg_shellToc__subItem")} key={sub.heading.slug}>
-                                                <a className={clsx("wg_shellToc__subLink")} href={`#${sub.heading.slug}`} data-toc-sub-link="">
-                                                    {sub.heading.text}
-                                                </a>
-                                            </li>
-                                        ))}
-                                    </ul>
-                                )}
-                            </li>
-                        ))}
-                    </ul>
-                </Fragment>
-            ))}
-        </nav>
-    );
-};