Pip Install Python Documentation

A modern, responsive documentation system and package catalogue for custom Dash components, software, and research projects

A comprehensive documentation platform showcasing a collection of custom Dash components, software, and research projects maintained by Pip Install Python. This system serves as both a package catalogue and a reusable boilerplate for creating beautiful, interactive documentation with markdown-driven content, live code examples, and automatic theme persistence.

📦 Package Catalogue

This documentation system showcases 18 custom Dash component libraries with comprehensive documentation, live examples, and download statistics:

Currently Maintained Components (11)

dash-summernote - Rich text WYSIWYG Editor
dash-insta-stories - Instagram Stories Component
dash-image-gallery - Image Gallery Component
dash-fullcalendar - Thin wrapper around FullCalendar
dash-gauge - Gauge Component
dash-emoji-mart - Slack-like Emoji Picker
dash-dock - Dynamic dock windows and tabs layout
dash-pannellum - 360 Panorama Viewer for Images and Video
dash-planet - Interactive orbital menu component
dash-model-viewer - 3D Model Viewer
dash-excalidraw - Freeform Drawing and Notebook Component

Archived Components (7)

dash-credit-cards, dash-charty, dash-nivo, dash-discord, dash-dynamic-grid-layout, dash-swiper, dash-fullcalendar

Total Downloads: Automatically aggregated from PyPI using the pypistats.org API and displayed on the home page.

✨ Features

📝 Markdown-Driven Documentation

Write documentation in Markdown with Python integration
Custom directives for interactive examples, code highlighting, and component props
Automatic page generation from markdown files with frontmatter metadata
Table of contents generation for easy navigation

🎨 Modern UI/UX

Built with Dash Mantine Components
Responsive design for mobile, tablet, and desktop
Dark and light theme support with automatic preference persistence
Smooth transitions and professional styling
Customizable color schemes and theming
"Other Apps" menu - Quick navigation to related Pip Install Python projects (Plotly.pro, ai-agent.buzz, GeoMapIndex)

🔍 Developer Experience

Hot reload during development
Searchable component navigation with custom page ordering
Syntax highlighting for multiple languages
Interactive code examples with live callbacks
Component props documentation auto-generation

📊 Package Analytics (NEW!)

Automatic download statistics - Real-time PyPI download counters for all packages
Total downloads aggregation - Automatically fetches and sums downloads across 18 packages
API integration - Uses pypistats.org API for accurate historical data
Visual presentation - Professional download counter displayed on home page
Smart error handling - Gracefully handles API failures with detailed logging

🤖 AI/LLM & SEO Integration (NEW!)

Automatic AI-friendly documentation - llms.txt, page.json, architecture.txt
SEO optimization - sitemap.xml with intelligent priority inference
Bot management - Control which bots can access your app (blocks AI training, allows AI search)
Structured data - Schema.org JSON-LD for better search engine understanding
Privacy controls - mark_hidden() for sensitive pages
Share with AI - Users can share your app URL with ChatGPT/Claude for help
Powered by dash-improve-my-llms v0.3.0

🐋 Production Ready

Docker and docker-compose support
Gunicorn production server included
Optimized for deployment
Environment-based configuration

🚀 Built With Latest Technologies

Dash 3.2.0 - Modern Plotly Dash framework
DMC 2.4.0 - Dash Mantine Components
Mantine 8.3.6 - Beautiful React UI library
React 18 - Latest React features
Python 3.11+ - Modern Python

📋 Requirements

System Requirements

Python: 3.11 or higher
Node.js: 14+ (for npm dependencies)
npm: 6+

Python Dependencies

dash >= 3.0.0
dash-mantine-components >= 2.4.0
flask >= 3.0.0
plotly >= 5.0.0
pandas >= 1.2.3
pydantic >= 2.3.0
python-frontmatter >= 1.0.0
markdown2dash
gunicorn >= 21.2.0 (production)

See requirements.txt for complete list.

🚀 Quick Start

1. Clone the Repository

git clone https://github.com/pip-install-python/Dash-Documentation-Boilerplate.git
cd Dash-Documentation-Boilerplate

2. Install Dependencies

Python packages:

pip install -r requirements.txt

Node packages (for DMC frontend components):

npm install

3. Run the Development Server

python run.py

Visit http://localhost:8553 in your browser.

4. Start Documenting!

Create your documentation in the docs folder:

docs/
├── your-component/
│   ├── your-component.md     # Markdown documentation
│   └── examples.py           # Python code examples (optional)

📁 Project Structure

dash-documentation-boilerplate/
├── assets/                      # Static assets and CSS
│   ├── dash_documentation_boilerplate.png
│   ├── intro_img.png
│   ├── m2d.css                 # Markdown-to-Dash styling
│   └── main.css                # Custom styles
│
├── components/                  # Reusable UI components
│   ├── appshell.py             # Main app layout with MantineProvider
│   ├── header.py               # Header with search and theme toggle
│   └── navbar.py               # Navigation sidebar and drawer
│
├── docs/                        # Documentation content
│   └── example/
│       ├── example.md          # Example documentation page
│       └── introduction.py     # Example interactive component
│
├── lib/                         # Utility libraries
│   ├── constants.py            # App-wide constants
│   └── directives/             # Custom markdown directives
│       ├── kwargs.py           # Component props table generator
│       ├── source.py           # Source code display directive
│       └── toc.py              # Table of contents directive
│
├── pages/                       # Dash multi-page app pages
│   ├── home.md                 # Home page content
│   ├── home.py                 # Home page layout
│   ├── download_counter.py     # PyPI download statistics aggregator
│   └── markdown.py             # Dynamic markdown page loader
│
├── templates/
│   └── index.html              # Custom HTML template
│
├── .gitignore
├── CHANGELOG.md                # Version history and changes
├── Dockerfile                  # Docker container definition
├── docker-compose.yml          # Docker compose configuration
├── package.json                # Node.js dependencies
├── package-lock.json           # Locked npm versions
├── README.md                   # This file
├── requirements.txt            # Python dependencies
└── run.py                      # Application entry point

📖 Usage Guide

Creating Documentation Pages

Create a new folder in the docs/ directory:
```
mkdir -p docs/my-component
```

Create a markdown file with frontmatter:

---
name: My Component
description: A description of my component
endpoint: /components/my-component
icon: mdi:code-tags
---

## My Component

Your documentation content here...

Add interactive examples (optional):

# docs/my-component/example.py
import dash_mantine_components as dmc

component = dmc.Button("Click Me!", id="my-button")

Use directives in your markdown:

.. toc::

.. exec::docs.my-component.example

.. source::docs/my-component/example.py

Custom Markdown Directives

`.. toc::`

Generates a table of contents from your markdown headings.

`.. exec::module.path.to.component`

Renders an executable Python component from a module.

`.. source::path/to/file.py`

Displays source code with syntax highlighting.

`.. kwargs::ComponentName`

Generates a props documentation table for a component.

Customizing Themes

Modify lib/constants.py to change the primary color:

PRIMARY_COLOR = "teal"  # Change to any Mantine color

Customize CSS in:

assets/main.css - General styling
assets/m2d.css - Markdown-specific styling

Theme Persistence

The boilerplate automatically saves user theme preference (light/dark) in localStorage:

First visit: Detects browser preference or defaults to light
Theme toggle: Saves preference automatically
Return visits: Restores saved theme preference

🐳 Docker Deployment

Build the Docker Image

docker build -t dash-docs-boilerplate .

Run with Docker

docker run -p 8550:8550 dash-docs-boilerplate

Visit http://localhost:8550

Using Docker Compose

docker-compose up

The app will be available at http://localhost:8550

Production Deployment

The Docker container uses Gunicorn for production-ready serving:

Multiple workers for better performance
Automatic worker restart on failure
Suitable for production environments

🛠️ Development

Setting Up Development Environment

Create virtual environment:

python -m venv .venv
source .venv/bin/activate  # On Windows: .venv\Scripts\activate

Install dependencies:

pip install -r requirements.txt
npm install

Run in debug mode:

# Modify run.py
app.run(debug=True, host='0.0.0.0', port='8553')

Adding New Components

Create your component in a separate module
Add documentation in docs/your-component/
The app automatically discovers and registers pages from markdown files
Restart the server to see your new documentation

Modifying the Layout

Main layout components:

Header: components/header.py - Logo, search, theme toggle
Navbar: components/navbar.py - Sidebar navigation
AppShell: components/appshell.py - Overall layout structure

🔧 Configuration

Environment Variables

Create a .env file (optional):

DASH_DEBUG=False
DASH_HOST=0.0.0.0
DASH_PORT=8553

Customization Points

File	Purpose
`lib/constants.py`	App-wide constants (colors, titles)
`assets/main.css`	Custom CSS styles
`templates/index.html`	HTML template (for analytics, meta tags)
`components/appshell.py`	Theme configuration, MantineProvider settings

📚 Documentation

User Documentation

Getting Started: This README
Changelog: See CHANGELOG.md
Examples: Check the /docs/example/ folder

🤝 Contributing

Contributions are welcome! Here's how you can help:

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Make your changes
Test thoroughly: Ensure the app runs without errors
Commit your changes: git commit -m 'Add amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

Development Guidelines

Follow PEP 8 style guide for Python code
Add docstrings to functions and classes
Test your changes before submitting
Update documentation if adding new features
Keep commits atomic and well-described

🐛 Known Issues & Troubleshooting

Common Issues

Issue: ModuleNotFoundError: No module named 'dash_html_components'

Solution: You're using an old version. Update to 0.2.0+ which uses Dash 3.x

Issue: Theme doesn't persist

Solution: Check browser localStorage is enabled and not blocked

Issue: npm install fails

Solution: Update Node.js to 14+ and npm to 6+

Issue: Port already in use

Solution: Change port in run.py or stop the conflicting process

For more issues, check GitHub Issues

📊 Version Information

Current Version: 0.3.0

Component	Version
Dash	3.2.0
Dash Mantine Components	2.4.0
Mantine	8.3.6
Python	3.11.8+
React	18.2.0
Flask	3.1.2
dash-improve-my-llms	0.3.0

See CHANGELOG.md for version history.

What's New in 0.3.0

✨ Comprehensive Documentation: 5 detailed guides with 15+ working examples
🎨 Enhanced Theme System: DMC figure templates, theme-aware charts, code blocks
🎯 Production Ready: SEO-optimized HTML template with extensive developer guidance
📊 Better UX: Custom navigation order, improved typography, consistent spacing
🔧 All Plotly Charts Theme-Aware: Dynamic template switching in light/dark modes

Recent Additions (Post 0.3.0)

📊 PyPI Download Counter - Real-time aggregation of downloads across all 18 packages via pypistats.org API
📚 Enhanced Component Documentation - Comprehensive rewrites for dash-emoji-mart, dash-insta-stories, and dash-dock
🎯 Package Catalogue Home Page - Side-by-side comparison table for active vs. archived components with custom badges
🔗 "Other Apps" Navigation Menu - Quick access to Plotly.pro, ai-agent.buzz, and GeoMapIndex
🐛 Bug Fixes - Fixed type errors, typos, and improved component property documentation

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built With

Plotly Dash - The web framework
Dash Mantine Components - Beautiful UI components
Mantine - React component library

Inspired By

dmc-docs - Documentation framework inspiration

Special Thanks

@AnnMarieW for suggested improvements
The Dash community for continuous support

📞 Support & Community

Get Help

Documentation: You're reading it!
Issues: GitHub Issues
Discussions: GitHub Discussions
Dash Community: Plotly Community Forum

Stay Connected

GitHub: @pip-install-python

YouTube: Pip Install Python

Want to Contribute?

Check out open issues labeled good first issue

⬆ Back to Top

Made with ❤️ by the Dash community

Pip Install Python LLC @ https://plotly.pro

Star this repo if you find it useful! ⭐

Name		Name	Last commit message	Last commit date
Latest commit History 55 Commits
.idea		.idea
assets		assets
callbacks		callbacks
components		components
docs		docs
lib		lib
pages		pages
templates		templates
.gitattributes		.gitattributes
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
Dockerfile		Dockerfile
LLMS_INTEGRATION.md		LLMS_INTEGRATION.md
README.md		README.md
advertising_config.json		advertising_config.json
docker-compose.yml		docker-compose.yml
package-lock.json		package-lock.json
package.json		package.json
requirements.txt		requirements.txt
run.py		run.py

pip-install-python/pip-documentation

Folders and files

Latest commit

History

Repository files navigation