Technical Documentation Portfolio

A documentation engineering portfolio showcasing docs-as-code workflows, API integration guides, and developer runbooks designed to optimize Developer Experience (DevEx). Live at docs.sharonwang.me.

---

📂 Repository Structure

docs/
├── src/content/docs/
│   ├── index.mdx                              # Landing page
│   ├── about.mdx                              # Documentation philosophy & methodology
│   ├── coming-soon.mdx                        # Placeholder for upcoming sections
│   └── articles/
│       ├── canvas-lms-setup.mdx               # Local Environment Setup Guide: Docker & Canvas LMS
│       └── tms-canvas-oauth2.mdx              # API Integration Guide: OAuth 2.0 & Canvas LMS
├── public/                                    # Static assets and branding
├── astro.config.mjs                           # Starlight config, sidebar, KaTeX, Mermaid, Vercel analytics
└── package.json                               # Project dependencies and build scripts

---

📝 Published Articles

API Integration Guide: OAuth 2.0 & Canvas LMS

An architectural deep-dive into the OAuth 2.0 Authorization Code Flow for Canvas LMS integrations, including a Mermaid sequence diagram and a cURL HTTP request example.

Local Environment Setup Guide: Docker & Canvas LMS

A step-by-step developer runbook for provisioning a containerized Canvas LMS instance on AWS EC2 and generating OAuth 2.0 developer keys for API integration testing.

---

🛠️ Technology Stack

• Static Site Generator: Astro with Starlight documentation theme.
• Content Format: MDX (Markdown + JSX for interactive components, tabs, cards, and callouts).
• Diagramming: Mermaid.js client-side rendering for sequence, state, and flowchart diagrams.
• Mathematical Rendering: remark-math & rehype-katex for KaTeX formula rendering.
• Full-Text Search: Client-side static indexing powered by Pagefind.
• Deployment: Vercel static edge hosting with integrated Web Analytics.

---

🚀 Local Development

Prerequisites

• Node.js: v18.14.1 or higher (v20+ recommended)
• Package Manager: npm, pnpm, or yarn

Quick Start

git clone git@github.com:sharonwang554/docs.git
cd docs
npm install
npm run dev

Open http://localhost:4321. Changes to .mdx files under src/content/docs/ will hot-reload instantly.

Production Build

npm run build

Compiles all static routes, renders KaTeX formulas, and generates the Pagefind search index inside dist/.