$ show datawhalechina/deepagents-in-action
This repository is a static website for a Chinese-language educational course titled 'Deep Agents 实战' (Deep Agents in Action). It provides 16 chapters of technical content on building AI agents using LangChain and LangGraph, including text, video links, and downloadable PDFs. The site is built with Astro 6, Tailwind CSS 4, and TypeScript, and is deployed to GitHub Pages via GitHub Actions. The codebase is well-structured: content is authored in Markdown under `content/`, metadata is managed in `scripts/chapters.json`, and a preprocessing script injects frontmatter into the Astro content collection. Custom Astro components handle layout, navigation, theme toggling, and a responsive table of contents. The repository also includes CI/CD workflows for asset validation and cross-platform installation testing. While the primary purpose is educational content delivery, the build and content pipelines demonstrate reusable patterns for static site generation with Astro.
The LLM identified 4 files worth highlighting for reuse:
Reads chapter metadata from `scripts/chapters.json` and raw Markdown from `content/`, then generates frontmatter-injected Markdown files into `src/content/chapters/`. Handles image path rewriting from relative `../public/imgs/` to site-base-aware paths. This script is a self-contained, parameterized content transformation pipeline that could be extracted and reused for any Astro site with similar content structure.
Provides functions `rewriteContentImagePaths` and `validateContentImageReferences` for rewriting relative image paths in Markdown to include a site base URL, and for validating that all referenced images exist in the `public/imgs/` directory. The `validateContentImageReferences` function recursively scans content directories, extracts image references, and reports missing assets. This pattern is highly reusable for any static site that needs to manage and verify image references across content.
Implements a responsive table of contents component that renders as a sticky sidebar on desktop (≥1280px) and as a tap-to-open dropdown on mobile/tablet. Uses IntersectionObserver for scrollspy highlighting, with root margins to reduce jitter. The component handles both the desktop floating rail and the mobile bar with close-on-click-outside and Escape key support. This is a self-contained, well-crafted UI component that could be extracted and reused in any Astro project requiring a table of contents with mobile-friendly interaction.
A floating back-to-top button that appears after scrolling past 60% of the viewport height. Uses a hidden attribute and CSS transitions for fade-in, respects `prefers-reduced-motion`, and has proper focus-visible styles. The component is self-contained with its own styles and a small initialization script that handles Astro page loads. This is a generic UI component that can be extracted and reused in any Astro project.