# astro-big-doc | Micro Web Stacks | Knowledge Base | Instagit

Astro Theme with zero config hierarchical menu and table of content, render pure standard Markdown .md with custom Astro components for panzoom, galleries, code, diagrams, 3D, links, interactive tables and more.

GitHub Stars: 66

Repository: https://github.com/microwebstacks/astro-big-doc

---

## Articles

### [How to Implement a Collapsible Menu Animation with CSS Transitions in Astro-Big-Doc](/microwebstacks/astro-big-doc/how-to-implement-collapsible-menu-animation-css-transitions)

Learn to implement smooth collapsible menu animations using CSS transitions in Astro-Big-Doc. This guide covers max-height transitions and icon rotation for a dynamic user experience.

- Tags: how-to-guide
- Published: 2026-03-07

### [How to Configure the Kroki Server URL for Self-Hosted Diagram Rendering in Astro Big Doc](/microwebstacks/astro-big-doc/how-to-configure-kroki-server-url-selfhosted-diagrams)

Configure Kroki server URL for self-hosted diagram rendering in Astro Big Doc. Set the KROKI_SERVER environment variable to use your private instance for faster, more secure diagram generation.

- Tags: how-to-guide
- Published: 2026-03-07

### [Zero-Copy Asset Management During Development in Astro Big Doc](/microwebstacks/astro-big-doc/how-zero-copy-asset-management-works-development-api-endpoints)

Discover zero-copy asset management in Astro Big Doc. Learn how API endpoints stream files directly from your content directory during development, eliminating disk duplication for faster workflows.

- Tags: how-to-guide
- Published: 2026-03-07

### [How to Set Up Environment Variables in .env File for Content Paths and Server Configuration in Astro Big Doc](/microwebstacks/astro-big-doc/how-to-set-up-env-variables-content-paths-server-config)

Learn to set up environment variables in your .env file for content paths and server configuration in Astro Big Doc Customize CONTENT OUT_DIR HOST and PORT for your project

- Tags: how-to-guide
- Published: 2026-03-07

### [How to Configure CORS for Allowing Cross-Origin API Access in Astro-Big-Doc](/microwebstacks/astro-big-doc/how-to-configure-cors-cross-origin-api-access)

Learn how to configure CORS for cross-origin API access in Astro-Big-Doc. Enable the cors middleware by setting the ENABLE_CORS environment variable to true.

- Tags: how-to-guide
- Published: 2026-03-07

### [How to Customize the Side Menu Collapse Behavior and Width Adjustment Settings in Astro Big Doc](/microwebstacks/astro-big-doc/how-to-customize-side-menu-collapse-behavior-width)

Customize Astro Big Doc side menu collapse behavior and width. Adjust CSS transitions and JS logic to control animation speeds and set custom widths for a personalized navigation experience.

- Tags: how-to-guide
- Published: 2026-03-07

### [How the Express Server Handles HTTPS with SSL Certificates for Production Deployment in Astro Big Doc](/microwebstacks/astro-big-doc/how-express-server-handles-https-ssl-production)

Learn how the Express server in Astro Big Doc handles HTTPS with SSL certificates for production deployment. Secure your site with our guide.

- Tags: how-to-guide
- Published: 2026-03-07

### [How to Add Interactive Links and Highlights to SVG Diagrams Using YAML Metadata Files in Astro-Big-Doc](/microwebstacks/astro-big-doc/how-to-add-interactive-svg-diagram-links-yaml-metadata)

Add interactive links and highlights to SVG diagrams with Astro-Big-Doc and YAML. Transform static SVGs into dynamic visualizations easily without code edits.

- Tags: how-to-guide
- Published: 2026-03-07

### [How to Configure External Link Identification and Rendering with Arrow Icons in Astro-Big-Doc](/microwebstacks/astro-big-doc/how-to-configure-external-link-identification-render-arrow-icons)

Learn how to configure external link identification and rendering with arrow icons in Astro-Big-Doc. Customize link appearance with CSS pseudo-elements in the Link.astro component.

- Tags: how-to-guide
- Published: 2026-03-07

### [How Table of Contents Generation and Scroll Spy Activation Work in Astro Big Doc](/microwebstacks/astro-big-doc/how-toc-generation-scroll-spy-activation-works)

Learn how Astro Big Doc generates a table of contents server-side, then activates a client-side scroll spy to highlight active states as you scroll.

- Tags: internals
- Published: 2026-03-07

### [How to Create Collapsible Details Blocks Using the DetailsDirective Component in Astro Big Doc](/microwebstacks/astro-big-doc/how-to-create-collapsible-details-blocks-detailsdirective)

Learn how to create collapsible details blocks using the DetailsDirective component in Astro Big Doc. Transform your content with animated expand/collapse functionality.

- Tags: how-to-guide
- Published: 2026-03-07

### [How to Use Note, Tip, Caution, and Danger Aside Directives in Astro Big Doc](/microwebstacks/astro-big-doc/how-to-use-note-tip-caution-danger-aside-directives)

Learn to use Note Tip Caution and Danger aside directives in Astro Big Doc markdown. Enhance your documentation with highlighted call out boxes.

- Tags: how-to-guide
- Published: 2026-03-07

### [How to Add Custom SVG Icons to the AppBar Using icons.yaml in Astro Big Doc](/microwebstacks/astro-big-doc/how-to-add-custom-svg-icons-appbar-iconsyaml)

Easily add custom SVG icons to your Astro Big Doc AppBar using the icons.yaml file. Learn how to configure and integrate your SVGs for seamless navigation.

- Tags: how-to-guide
- Published: 2026-03-07

### [How to Configure the Content Directory Structure and Front-Matter Options in Astro Big Doc](/microwebstacks/astro-big-doc/how-to-configure-content-directory-structure-frontmatter)

Configure Astro Big Doc content directory structure and front-matter options like title, slug, and order for custom navigation and URLs. Define your root via config.js or CONTENT env var.

- Tags: how-to-guide
- Published: 2026-03-07

### [How the Asset Management System Handles Relative Paths in Astro Big Doc: Development vs Production](/microwebstacks/astro-big-doc/how-asset-management-handles-relative-paths-dev-production)

Understand how astro-big-doc asset management handles relative paths in development versus production builds. Learn about zero-copy runtime routes and asset copying.

- Tags: internals
- Published: 2026-03-07

### [How to Create Custom Markdown Image Directives with Centering and Dimensions in Astro](/microwebstacks/astro-big-doc/how-to-create-custom-markdown-image-directives-centering-dimensions)

Easily create custom Markdown image directives in Astro Extend Markdown with :::image blocks supporting center width and height attributes for precise layout control with astro-big-doc

- Tags: how-to-guide
- Published: 2026-03-07

### [How to Embed and Display 3D Models (.glb Files) Using the ModelViewer Component in Astro Big Doc](/microwebstacks/astro-big-doc/how-to-embed-display-3d-models-glb-modelviewer)

Easily embed and display 3D models using the Astro Big Doc ModelViewer component. Learn how to render .glb files with simple markdown or advanced YAML for interactive 3D experiences.

- Tags: how-to-guide
- Published: 2026-03-07

### [How to Set Up GitHub OAuth Authentication with Express and Passport in astro-big-doc](/microwebstacks/astro-big-doc/how-to-set-up-github-oauth-express-passport)

Implement GitHub OAuth authentication with Express using Passport in astro-big-doc. Secure your routes automatically with robust middleware for a seamless user experience.

- Tags: how-to-guide
- Published: 2026-03-07

### [How to Render Diagrams from Code Blocks Using Kroki Integration with PlantUML Support in Astro Big Doc](/microwebstacks/astro-big-doc/how-to-render-diagrams-code-blocks-kroki-plantuml)

Learn how to render diagrams from code blocks using Kroki integration with PlantUML support in Astro Big Doc. Convert plantuml code into SVG diagrams automatically.

- Tags: how-to-guide
- Published: 2026-03-07

### [How to Create Interactive Data Tables from Markdown Tables Using the DataTables Library](/microwebstacks/astro-big-doc/how-to-create-interactive-data-tables-markdown-datatables)

Convert Markdown tables into interactive DataTables with sorting, pagination, and search automatically. Enhance your Astro site now.

- Tags: how-to-guide
- Published: 2026-03-07

### [How the Panzoom and Modal Image Viewer Uses URL Parameters for State Persistence in Astro Big Doc](/microwebstacks/astro-big-doc/how-panzoom-modal-image-viewer-works-url-parameters)

Learn how astro-big-doc uses URL parameters for state persistence. Discover shareable deep links and automatic state restoration for its panzoom and modal image viewer.

- Tags: internals
- Published: 2026-03-07

### [How to Configure Custom Image Galleries with YAML Specifications in Markdown Files](/microwebstacks/astro-big-doc/how-to-configure-custom-image-gallery-yaml-markdown)

Effortlessly configure custom image galleries in Markdown using YAML specifications. Learn how to create responsive grids and masonry layouts with Astro Big Doc for stunning visual content.

- Tags: how-to-guide
- Published: 2026-03-07

### [How the Content-Structure Integration Parses Markdown and Generates Navigation in Astro Big Doc](/microwebstacks/astro-big-doc/how-does-content-structure-integration-parse-markdown-and-generate-nav-menu)

Discover how Astro Big Doc's content-structure integration parses markdown files and builds a hierarchical JSON tree for your site navigation. Learn more about this efficient process.

- Tags: deep-dive
- Published: 2026-03-07