docs: GitHub Pages tutorial site (Tutorial/) — EN + 中文

.github/workflows/pages.yml

@@ -0,0 +1,38 @@
+name: Deploy Tutorial to GitHub Pages
+
+# Publishes the static site in Tutorial/ to GitHub Pages.
+# One-time setup: repo Settings ▸ Pages ▸ Build and deployment ▸ Source =
+# "GitHub Actions".
+
+on:
+  push:
+    branches: [master]
+    paths:
+      - 'Tutorial/**'
+      - '.github/workflows/pages.yml'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment; don't cancel an in-progress one.
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/configure-pages@v5
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: Tutorial
+      - id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -11,6 +11,8 @@
 
 **A lightweight, embeddable Objective-C tracer that produces shareable [Perfetto](https://ui.perfetto.dev) traces**
 
+📖 **[Read the full Tutorial & Usage Guide →](https://everettjf.github.io/AppleTrace/)**
+
 [English](README.md) | [中文](README_CN.md)
 
 </div>

README_CN.md

@@ -11,6 +11,8 @@
 
 **轻量、可内嵌的 Objective-C 追踪器，产物可直接拖入 [Perfetto](https://ui.perfetto.dev) 分享**
 
+📖 **[阅读完整教程与使用指南 →](https://everettjf.github.io/AppleTrace/zh.html)**
+
 [English](README.md) | [中文](README_CN.md)
 
 </div>

Tutorial/README.md

@@ -0,0 +1,21 @@
+# AppleTrace Tutorial site
+
+A static, no-build GitHub Pages site — the comprehensive usage guide for
+AppleTrace (English primary, Chinese secondary).
+
+- `index.html` — English guide
+- `zh.html` — 中文指南
+- `styles.css`, `app.js` — shared styling and progressive-enhancement JS
+- `.nojekyll` — serve files as-is (no Jekyll processing)
+
+## Preview locally
+
+```bash
+cd Tutorial && python3 -m http.server 8000   # then open http://localhost:8000
+```
+
+## Publishing
+
+Deployed by `.github/workflows/pages.yml` on every push to `master` that
+touches `Tutorial/`. One-time setup: repo **Settings ▸ Pages ▸ Source =
+GitHub Actions**.

Tutorial/app.js

@@ -0,0 +1,56 @@
+// AppleTrace tutorial — progressive enhancement only; the page works without JS.
+(function () {
+    'use strict';
+
+    // Copy buttons on code blocks.
+    document.querySelectorAll('.code').forEach(function (block) {
+        var head = block.querySelector('.code-head');
+        if (!head) return;
+        var btn = head.querySelector('.copy');
+        if (!btn) return;
+        btn.addEventListener('click', function () {
+            var code = block.querySelector('pre');
+            if (!code) return;
+            navigator.clipboard.writeText(code.innerText).then(function () {
+                var prev = btn.textContent;
+                btn.textContent = 'copied';
+                setTimeout(function () { btn.textContent = prev; }, 1400);
+            });
+        });
+    });
+
+    // Mobile sidebar toggle.
+    var sidebar = document.querySelector('.sidebar');
+    var menuBtn = document.querySelector('.menu-btn');
+    var scrim = document.querySelector('.scrim');
+    function close() { sidebar && sidebar.classList.remove('open'); scrim && scrim.classList.remove('show'); }
+    if (menuBtn && sidebar) {
+        menuBtn.addEventListener('click', function () {
+            sidebar.classList.toggle('open');
+            scrim && scrim.classList.toggle('show');
+        });
+    }
+    if (scrim) scrim.addEventListener('click', close);
+    sidebar && sidebar.querySelectorAll('a').forEach(function (a) { a.addEventListener('click', close); });
+
+    // Scroll-spy: highlight the sidebar link for the section in view.
+    var links = Array.prototype.slice.call(document.querySelectorAll('.sidebar a[href^="#"]'));
+    var map = {};
+    links.forEach(function (a) {
+        var id = a.getAttribute('href').slice(1);
+        var sec = document.getElementById(id);
+        if (sec) map[id] = a;
+    });
+    var sections = Object.keys(map).map(function (id) { return document.getElementById(id); });
+    if ('IntersectionObserver' in window && sections.length) {
+        var current = null;
+        var obs = new IntersectionObserver(function (entries) {
+            entries.forEach(function (e) {
+                if (e.isIntersecting) current = e.target.id;
+            });
+            links.forEach(function (a) { a.classList.remove('active'); });
+            if (current && map[current]) map[current].classList.add('active');
+        }, { rootMargin: '-20% 0px -70% 0px', threshold: 0 });
+        sections.forEach(function (s) { obs.observe(s); });
+    }
+})();