for-humanity 0.4.4 → 0.5.0

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

@@ -1,84 +0,0 @@
-import {navigation_mobile_query, navigation_scroll_storage_key} from "@/component/widget/shell/_constant/navigation";
-import {restoreNavigationScroll} from "@/component/widget/shell/_function/restore-navigation-scroll";
-
-/**
- * 문서 목록과 페이지 목차의 위치를 따로 저장 · TOC 길이가 목록 위치를 바꾸지 않음
- * 첫 데스크톱 복원은 HTML에서 완료 · 늦은 module 실행에서 다시 이동하지 않음
- */
-export const bindNavigationScroll = () => {
-    const navigation = document.querySelector<HTMLElement>("[data-navigation]");
-    const documents = document.querySelector<HTMLElement>('[data-navigation-scroll="documents"]');
-    const outline = document.querySelector<HTMLElement>('[data-navigation-scroll="outline"]');
-    const dialog = document.querySelector<HTMLDialogElement>("[data-navigation-drawer]");
-    const openButton = document.querySelector<HTMLButtonElement>("[data-navigation-open]");
-
-    if (!navigation || !documents || !outline || !dialog || !openButton) {
-        return;
-    }
-
-    const mobile = matchMedia(navigation_mobile_query);
-    const layout = {mobile: mobile.matches};
-    const ports = [documents, outline];
-    const positions = new Map<string, Map<HTMLElement, number>>();
-    const signature = [...navigation.querySelectorAll<HTMLAnchorElement>(".wg_shellNav__root a[href]")].map((link) => `${link.pathname}:${link.textContent}`).join("\n");
-
-    /**
-     * 숨김·닫기보다 먼저 마지막 위치 보존 · 저장소 차단 시에도 드로어 재열기 유지
-     */
-    const saveScroll = () => {
-        if (layout.mobile !== mobile.matches || (mobile.matches && !dialog.open)) {
-            return;
-        }
-
-        const key = `${navigation_scroll_storage_key}:${mobile.matches ? "drawer" : "desktop"}`;
-        positions.set(key, new Map(ports.map((port) => [port, port.scrollTop])));
-
-        try {
-            sessionStorage.setItem(key, JSON.stringify({navigation: signature, pathname: location.pathname, documents: documents.scrollTop, outline: outline.scrollTop}));
-        } catch {
-            // 현재 페이지 안의 위치는 메모리에 유지 · 저장 실패가 링크 이동을 막지 않음
-        }
-    };
-
-    /**
-     * 열기·반응형 DOM 이동 완료 후 화면별 위치 복원
-     */
-    const restoreScroll = () => {
-        layout.mobile = mobile.matches;
-
-        if (mobile.matches && !dialog.open) {
-            return;
-        }
-
-        const key = `${navigation_scroll_storage_key}:${mobile.matches ? "drawer" : "desktop"}`;
-        const saved = positions.get(key);
-
-        if (saved === undefined) {
-            restoreNavigationScroll(key);
-        } else {
-            for (const port of ports) {
-                const top = saved.get(port);
-
-                if (top !== undefined) {
-                    port.scrollTop = top;
-                }
-            }
-        }
-
-        saveScroll();
-    };
-
-    for (const port of ports) {
-        port.addEventListener("scroll", saveScroll, {passive: true});
-    }
-
-    // 캡처 단계에서 모바일의 기본 닫기보다 먼저 저장
-    navigation.addEventListener("click", saveScroll, {capture: true});
-    dialog.addEventListener("cancel", saveScroll);
-    dialog.querySelector("[data-navigation-close]")?.addEventListener("click", saveScroll, {capture: true});
-    dialog.addEventListener("click", saveScroll, {capture: true});
-    openButton.addEventListener("click", restoreScroll);
-    mobile.addEventListener("change", restoreScroll);
-    addEventListener("pagehide", saveScroll);
-    saveScroll();
-};

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

@@ -1,47 +0,0 @@
-/**
- * 탐색 HTML 직후와 드로어 열기에서 저장 위치 복원 · 첫 paint 전 실행
- * HTML에 함수 본문을 직렬화하므로 import나 바깥 변수 없이 브라우저 DOM만 사용
- * @param storageKey 탭·화면 모드별 저장 키
- */
-export const restoreNavigationScroll = (storageKey: string) => {
-    const navigation = document.querySelector<HTMLElement>("[data-navigation]");
-    const documents = document.querySelector<HTMLElement>('[data-navigation-scroll="documents"]');
-    const outline = document.querySelector<HTMLElement>('[data-navigation-scroll="outline"]');
-
-    if (!navigation || !documents || !outline) {
-        return;
-    }
-
-    try {
-        const value = sessionStorage.getItem(storageKey);
-
-        if (value === null) {
-            return;
-        }
-
-        const stored: unknown = JSON.parse(value);
-        const signature = [...navigation.querySelectorAll<HTMLAnchorElement>(".wg_shellNav__root a[href]")].map((link) => `${link.pathname}:${link.textContent}`).join("\n");
-
-        if (typeof stored !== "object" || stored === null || !("navigation" in stored) || stored.navigation !== signature) {
-            return;
-        }
-
-        if ("documents" in stored && typeof stored.documents === "number" && Number.isFinite(stored.documents) && stored.documents >= 0) {
-            documents.scrollTop = stored.documents;
-        }
-
-        // 문서 목록은 공통 위치 · 목차는 같은 페이지에 다시 들어왔을 때만 복원
-        if (
-            "pathname" in stored &&
-            stored.pathname === location.pathname &&
-            "outline" in stored &&
-            typeof stored.outline === "number" &&
-            Number.isFinite(stored.outline) &&
-            stored.outline >= 0
-        ) {
-            outline.scrollTop = stored.outline;
-        }
-    } catch {
-        // 차단·손상된 저장소는 복원만 생략 · 기본 링크와 스크롤 유지
-    }
-};

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>
-    );
-};