A modern, responsive landing page for DataPlug - the cloud-aware data partitioning framework for scientific data, built with Next.js and Ant Design.
DataPlug is a client-side only, extensible Python framework with the goal of enabling efficient data partitioning of unstructured scientific data stored in object storage (like Amazon S3) for elastic workloads in the Cloud.
- Cloud-Aware: Specifically targets cold raw data in object storage (e.g. Amazon S3). Exploits S3 byte-range reads for parallel high-bandwidth access
- Read-Only: Pre-processes data in read-only fashion. Indexes and metadata stored decoupled from raw objects, keeping cold data as-is
- Data Slicing: Lazy-evaluated partitions with zero-cost re-partitioning. Serializable for distributed computing environments like PySpark, Dask, or Ray
- Multiple Domains: Supports Genomics, Geospatial, Metabolomics, Generic, and Astronomics data
- Distributed Computing: Compatible with PySpark, Dask, and Ray
- DataPlug Repository - Main framework
- Data Cockpit Repository - Interactive Jupyter widget
- PyRun Cloud Platform - Cloud execution platform
- Framework: Next.js 15 with App Router
- UI Library: Ant Design (antd)
- Styling: Tailwind CSS + Ant Design
- Language: TypeScript
- Icons: Ant Design Icons
- Deployment: GitHub Pages (static export)
src/
├── app/
│ ├── components/ # Reusable UI components
│ │ ├── Header.tsx # Navigation header
│ │ ├── Footer.tsx # Site footer
│ │ └── sections/ # Page sections
│ │ ├── HeroSection.tsx
│ │ └── FeaturesSection.tsx
│ ├── data/ # Data and content
│ │ ├── features.ts # Feature definitions
│ │ ├── domains.ts # Domain information
│ │ ├── dataCockpit.ts # Data Cockpit content
│ │ └── pyrun.ts # PyRun content
│ ├── types/ # TypeScript interfaces
│ │ └── index.ts # Centralized type definitions
│ ├── config/ # Configuration
│ │ ├── constants.ts # Site constants and colors
│ │ └── site.ts # Site configuration
│ ├── utils/ # Utilities
│ │ └── index.ts # Common functions
│ ├── lib/ # Utilities
│ │ └── theme.ts # Ant Design theme config
│ ├── docs/ # Documentation page
│ │ └── page.tsx # Documentation with tabs
│ ├── page.tsx # Main landing page
│ ├── layout.tsx # Root layout
│ └── globals.css # Global styles
- Modern Design: Clean, professional interface using Ant Design components
- Responsive Layout: Optimized for all devices with Ant Design's grid system
- Interactive Elements: Cards, buttons, statistics, and alerts
- Gradient Backgrounds: Beautiful gradient sections for hero and CTA areas
- Smooth Animations: Hover effects and transitions
- Tabbed Interface: Organized content with Ant Design Tabs
- Code Examples: Syntax-highlighted code blocks with official examples
- Integration Guides: PySpark and Dask examples from official repository
- API Reference: Clean component-based documentation
- Performance Tips: Alert components for important information
- Layout: Header, Content, Footer structure
- Typography: Title, Paragraph, Text components
- Cards: Feature cards, domain cards, integration examples
- Buttons: Primary, secondary, and ghost buttons
- Statistics: Performance metrics display
- Steps: Installation and architecture flow
- Tabs: Documentation organization
- Alerts: Important information display
- Lists: Data format listings
- Tags: Color-coded domain indicators
- DataPlug: Core data partitioning engine
- Data Cockpit: Interactive Jupyter widget interface
- PyRun: Cloud execution platform
pip install cloud-dataplugpip install cloud_data_cockpitpip install cloud_data_cockpit[geospatial]The Ant Design theme is configured in src/app/lib/theme.ts:
- Primary color:
#1890ff(blue) - Border radius:
8px - Component-specific customizations
- Primary: Blue gradient for hero sections
- Secondary: Purple gradient for CTA sections
- Success: Green for positive actions
- Warning: Orange for alerts
- Error: Red for errors
- Gradients: Blue-purple for hero sections
- Data: Edit files in
src/app/data/to update content - Components: Modify components in
src/app/components/ - Styling: Update
src/app/globals.cssfor global styles - Configuration: Adjust constants in
src/app/config/constants.ts
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/dataplug/dataplug-web.git
cd dataplug-web
# Install dependencies
npm install
# Start development server
npm run devnpm run dev # Start development server
npm run build # Build for production
npm run export # Generate static export for GitHub Pages
npm run deploy # Deploy to GitHub Pages (manual)
npm run lint # Run ESLint
npm run type-check # Run TypeScript type checking
npm run format # Format code with PrettierThis project is configured for automatic deployment to GitHub Pages:
- Push to GitHub: The GitHub Actions workflow will automatically trigger
- Static Export: Next.js builds and exports static files
- Deploy: Files are deployed to GitHub Pages
npm run deploy # Build and deploy manually using gh-pages- Static export is configured in
next.config.ts - GitHub Actions workflow in
.github/workflows/deploy.yml - Automatic deployment on push to
mainbranch
- Static Export: Pre-built static files for fast loading
- Optimized Bundle: Tree-shaking and code splitting for smaller bundles
- Modern Assets: WebP and AVIF image formats support
- Fast Loading: Optimized CSS and JavaScript delivery
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.