oscarjnz/hacking-archive

# hacking-archive 一个整洁、快速、静态生成的网络安全学习资源网络档案馆，按**级别**和**领域**（Linux、Redes、Seguridad、Reconocimiento、Pentesting、Malware、Binarios）以路线图形式组织。所有资源均托管在 `archive.org` 上，并在新标签页中打开。 - **技术栈：** Next.js 14 (App Router) · React 18 · TypeScript · Tailwind CSS - **输出产物：** 静态 HTML/CSS/JS (`output: "export"`)。无后端。 - **首次加载 JS：** ~93 kB（gzip 压缩后的分块）。 - **深色模式：** 默认。``，自定义调色板。 ## 项目结构 ``` . ├── app/ │ ├── globals.css # Tailwind + base styles │ ├── icon.svg # Favicon │ ├── layout.tsx # Root layout, metadata, viewport │ ├── not-found.tsx # 404 page │ └── page.tsx # Home + JSON-LD structured data ├── components/ │ ├── Archive.tsx # Top-level client component (state hub) │ ├── AreaFilter.tsx # Toggleable area filter chips │ ├── BookCard.tsx # Book row: title, area, copy + open │ ├── Footer.tsx │ ├── Header.tsx # Brand + counters │ ├── Icon.tsx # Inline SVG icons (no icon library) │ ├── LevelSection.tsx # Collapsible level group │ ├── SearchBar.tsx # Client-side search (⌘K / Ctrl+K) │ └── Sidebar.tsx # Sticky level navigation ├── data/ │ └── books.ts # Structured dataset + level metadata ├── lib/ │ └── utils.ts # cn() and normalize() ├── types/ │ └── index.ts # Book, Level, Area types ├── public/ │ └── robots.txt ├── next.config.mjs # `output: "export"` static build ├── tailwind.config.ts ├── postcss.config.mjs ├── tsconfig.json └── package.json ``` ### 关注点分离 - **数据** (`data/books.ts`) — 纯粹的、类型化的、声明式的数据集。唯一的真实数据来源。无 DOM，不依赖 React。 - **类型** (`types/index.ts`) — 共享的 `Book`、`Area`、`Level`、`LevelGroup`。 - **逻辑** (`components/Archive.tsx`) — 搜索、筛选、折叠和活动级别跟踪。全部在客户端进行。 - **UI** (`components/*.tsx`) — 纯展示，通过 props 提供数据。唯一需要 `"use client"` 的组件是那些需要交互的组件。 ### 为什么没有后端？ 数据集是有限、不可变且公开的。静态生成带来了：更优的 TTFB，简便的 CDN 部署，零成本托管以及完全的可爬取性。引入数据库只会增加运维成本，而不会带来任何功能上的收益。 ## 数据模型 ``` type Level = 1 | 2 | 3 | 4 | 5; type Area = | "Linux" | "Redes" | "Seguridad" | "Reconocimiento" | "Pentesting" | "Malware" | "Binarios"; interface Book { id: string; // stable, derived from level + slug(title) level: Level; area: Area; title: string; url: string; // absolute archive.org URL } ``` 该数据集包含跨越 **5 个级别**和 **7 个领域**的 **18 本书**。 要添加资源，请在 `data/books.ts` 中追加一条 `book(level, area, title, path)` 记录。`path` 会追加到共享的 `ARCHIVE_BASE` 之后。 ## 功能 - **可折叠的级别章节**，带有各级别的计数器。 - **领域筛选器** — 多选标签，带有实时计数。 - **客户端搜索** — 搜索标题、领域和级别标签，不区分重音符号。快捷键：`⌘K` / `Ctrl+K` 聚焦，`Esc` 清除。 - 每个资源的**复制链接**，并带有可视化确认。 - **外部链接** 在新标签页中打开，并带有 `rel="noopener noreferrer"` 属性。 - **固定侧边栏**，通过 `IntersectionObserver` 驱动当前活动章节高亮。 - **响应式设计** — 侧边栏在 `lg` 断点以下折叠，头部统计数据在 `sm` 断点以下隐藏。 - **SEO** — 完整的 Open Graph + Twitter 元数据，图书的 JSON-LD `ItemList`。 - **A11y (无障碍)** — 语义化界标 (`header`、`main`、`nav`、`footer`、`section`)，可折叠元素上的 `aria-expanded`/`aria-controls`，切换按钮上的 `aria-pressed`，可见的焦点环，`lang="es"`。 ## 环境配置 需要 **Node.js ≥ 18.17**。 ``` npm install ``` ## 开发 ``` npm run dev # http://localhost:3000 ``` ## 类型检查 ``` npm run typecheck ``` ## 代码检查 ``` npm run lint ``` ## 构建 (静态导出) ``` npm run build ``` 静态站点将被输出到 `out/` 目录。这是一组完全自包含的 HTML/CSS/JS 文件。 ### 静态构建的本地预览 ``` npx serve out # 或 python3 -m http.server --directory out 8080 ``` ## 部署 任何静态托管服务均可： - **Vercel** — `vercel deploy` (零配置；支持 `output: "export"`)。 - **Netlify** — 将发布目录设置为 `out`。 - **GitHub Pages** — 将 `out/` 目录下的内容推送到 `gh-pages` 分支。 - **Cloudflare Pages / S3 / Nginx** — 将 `out/` 作为文档根目录提供服务。 没有服务器运行时；仅有静态资源。 ## 性能说明 - 无 UI / 图标库。图标均为内联 SVG (`components/Icon.tsx`)。 - 未通过网络加载任何字体 — 仅使用系统字体栈。 - 筛选和搜索是使用 `useMemo` 的纯函数实现；不会在组件树中层叠引发重新渲染。 - Tailwind 的 JIT 模式结合 `output: "export"` 生成了最小的 CSS 包。 - 所有交互功能均并置在选择了启用 `"use client"` 的组件中；页面外壳是一个 Server Component。 ## 许可证与免责声明 资源链接指向托管在 `archive.org` 上的第三方副本。本项目仅供教育目的使用。维护者不托管或分发这些内容。

标签：DAST, Jamstack, Markdown, React, SEO优化, Syscall, Syscalls, Tailwind CSS, TypeScript, Web开发, 二进制漏洞利用, 学习路线图, 安全学习资源库, 安全插件, 安全攻防, 开源学习项目, 恶意软件分析, 数据展示, 暗黑模式, 白帽黑客, 红队, 纯静态部署, 网络安全, 网络安全书籍, 网络安全基础, 自动化攻击, 资源导航, 隐私保护, 静态网站生成