Skip to main content

Web Design for Developer Docs

Web design for documentation sites balances clarity, branding, and performance. ashis.site uses Docusaurus 3 to deliver developer docs and guides for open-source technologies, cloud platforms, AI agents, deployment automation, web design, and SEO.

UX patterns on this site​

PatternImplementation
NavigationSidebar docs, top navbar, command menu (⌘K)
ReadabilityInter font, constrained content width, TOC
ThemingDark/light mode, glassmorphism cards
DiscoveryLocal search, structured SEO metadata

Key files​

src/pages/index.tsx
import Hero from '@site/src/components/home/Hero';

export default function Home() {
  return (
    <Layout title="Home" description={SITE.description}>
      <Hero />
    </Layout>
  );
}

Docusaurus features used​

  • MDX docs with syntax highlighting and auto TOC
  • @easyops-cn/docusaurus-search-local for offline search
  • Custom src/theme/Root.tsx for the command palette
  • Reusable React sections: Hero, Topics, Projects page

Accessibility checklist​

  • Sufficient color contrast in light and dark themes
  • Keyboard navigation for menus and command palette
  • Meaningful alt text on logos and diagrams
  • Focus states on interactive controls

Local development​

npm install
npm start

Build for production:

npm run build