Skip to content

Commit 3ef8b38

Browse files
ubenabdelkrimubenabdelkrim
committed
first commit
1 parent c62af79 commit 3ef8b38

32 files changed

Lines changed: 4557 additions & 170 deletions

‎.eslintrc.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"extends": [
3+
"next/core-web-vitals",
4+
"eslint:recommended",
5+
"@typescript-eslint/recommended"
6+
],
7+
"parser": "@typescript-eslint/parser",
8+
"plugins": ["@typescript-eslint"],
9+
"rules": {
10+
"@typescript-eslint/no-unused-vars": "error",
11+
"@typescript-eslint/no-explicit-any": "warn",
12+
"prefer-const": "error",
13+
"no-var": "error"
14+
},
15+
"env": {
16+
"browser": true,
17+
"node": true,
18+
"es6": true
19+
}
20+
}

‎.github/workflows/deploy.yml‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [ main, master ]
6+
pull_request:
7+
branches: [ main, master ]
8+
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
concurrency:
15+
group: "pages"
16+
cancel-in-progress: false
17+
18+
jobs:
19+
build:
20+
runs-on: ubuntu-latest
21+
steps:
22+
- name: Checkout
23+
uses: actions/checkout@v4
24+
25+
- name: Setup Node.js
26+
uses: actions/setup-node@v4
27+
with:
28+
node-version: '18'
29+
cache: 'npm'
30+
31+
- name: Install dependencies
32+
run: npm ci
33+
34+
- name: Build project
35+
run: npm run export
36+
37+
- name: Add .nojekyll file
38+
run: touch out/.nojekyll
39+
40+
- name: Upload artifact
41+
uses: actions/upload-pages-artifact@v3
42+
with:
43+
path: ./out
44+
45+
deploy:
46+
environment:
47+
name: github-pages
48+
url: ${{ steps.deployment.outputs.page_url }}
49+
runs-on: ubuntu-latest
50+
needs: build
51+
steps:
52+
- name: Deploy to GitHub Pages
53+
id: deployment
54+
uses: actions/deploy-pages@v4

‎.prettierrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"semi": true,
3+
"trailingComma": "es5",
4+
"singleQuote": true,
5+
"printWidth": 80,
6+
"tabWidth": 2,
7+
"useTabs": false,
8+
"bracketSpacing": true,
9+
"arrowParens": "avoid",
10+
"endOfLine": "lf"
11+
}

‎.vscode/settings.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"editor.formatOnSave": true,
3+
"editor.defaultFormatter": "esbenp.prettier-vscode",
4+
"editor.codeActionsOnSave": {
5+
"source.fixAll.eslint": "explicit"
6+
},
7+
"typescript.preferences.importModuleSpecifier": "relative",
8+
"typescript.suggest.autoImports": true,
9+
"emmet.includeLanguages": {
10+
"typescript": "html",
11+
"typescriptreact": "html"
12+
},
13+
"files.associations": {
14+
"*.css": "tailwindcss"
15+
},
16+
"tailwindCSS.includeLanguages": {
17+
"typescript": "html",
18+
"typescriptreact": "html"
19+
}
20+
}

‎README.md‎

Lines changed: 196 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,212 @@
1-
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
1+
# DataPlug Web
22

3-
## Getting Started
3+
A modern, responsive landing page for DataPlug - the cloud-aware data partitioning framework for scientific data, built with Next.js and Ant Design.
44

5-
First, run the development server:
5+
## About DataPlug
66

7+
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.
8+
9+
### Key Features
10+
- **Cloud-Aware**: Specifically targets cold raw data in object storage (e.g. Amazon S3). Exploits S3 byte-range reads for parallel high-bandwidth access
11+
- **Read-Only**: Pre-processes data in read-only fashion. Indexes and metadata stored decoupled from raw objects, keeping cold data as-is
12+
- **Data Slicing**: Lazy-evaluated partitions with zero-cost re-partitioning. Serializable for distributed computing environments like PySpark, Dask, or Ray
13+
- **Multiple Domains**: Supports Genomics, Geospatial, Metabolomics, Generic, and Astronomics data
14+
- **Distributed Computing**: Compatible with PySpark, Dask, and Ray
15+
16+
## Official Links
17+
18+
- **[DataPlug Repository](https://github.com/CLOUDLAB-URV/dataplug)** - Main framework
19+
- **[Data Cockpit Repository](https://github.com/ubenabdelkrim/DataCockpit)** - Interactive Jupyter widget
20+
- **[PyRun Cloud Platform](https://pyrun.cloud/)** - Cloud execution platform
21+
22+
## Tech Stack
23+
24+
- **Framework**: Next.js 15 with App Router
25+
- **UI Library**: Ant Design (antd)
26+
- **Styling**: Tailwind CSS + Ant Design
27+
- **Language**: TypeScript
28+
- **Icons**: Ant Design Icons
29+
- **Deployment**: GitHub Pages (static export)
30+
31+
## Project Structure
32+
33+
```
34+
src/
35+
├── app/
36+
│ ├── components/ # Reusable UI components
37+
│ │ ├── Header.tsx # Navigation header
38+
│ │ ├── Footer.tsx # Site footer
39+
│ │ └── sections/ # Page sections
40+
│ │ ├── HeroSection.tsx
41+
│ │ └── FeaturesSection.tsx
42+
│ ├── data/ # Data and content
43+
│ │ ├── features.ts # Feature definitions
44+
│ │ ├── domains.ts # Domain information
45+
│ │ ├── dataCockpit.ts # Data Cockpit content
46+
│ │ └── pyrun.ts # PyRun content
47+
│ ├── types/ # TypeScript interfaces
48+
│ │ └── index.ts # Centralized type definitions
49+
│ ├── config/ # Configuration
50+
│ │ ├── constants.ts # Site constants and colors
51+
│ │ └── site.ts # Site configuration
52+
│ ├── utils/ # Utilities
53+
│ │ └── index.ts # Common functions
54+
│ ├── lib/ # Utilities
55+
│ │ └── theme.ts # Ant Design theme config
56+
│ ├── docs/ # Documentation page
57+
│ │ └── page.tsx # Documentation with tabs
58+
│ ├── page.tsx # Main landing page
59+
│ ├── layout.tsx # Root layout
60+
│ └── globals.css # Global styles
61+
```
62+
63+
## Features
64+
65+
### Landing Page
66+
- **Modern Design**: Clean, professional interface using Ant Design components
67+
- **Responsive Layout**: Optimized for all devices with Ant Design's grid system
68+
- **Interactive Elements**: Cards, buttons, statistics, and alerts
69+
- **Gradient Backgrounds**: Beautiful gradient sections for hero and CTA areas
70+
- **Smooth Animations**: Hover effects and transitions
71+
72+
### Documentation
73+
- **Tabbed Interface**: Organized content with Ant Design Tabs
74+
- **Code Examples**: Syntax-highlighted code blocks with official examples
75+
- **Integration Guides**: PySpark and Dask examples from official repository
76+
- **API Reference**: Clean component-based documentation
77+
- **Performance Tips**: Alert components for important information
78+
79+
### Ant Design Components Used
80+
- **Layout**: Header, Content, Footer structure
81+
- **Typography**: Title, Paragraph, Text components
82+
- **Cards**: Feature cards, domain cards, integration examples
83+
- **Buttons**: Primary, secondary, and ghost buttons
84+
- **Statistics**: Performance metrics display
85+
- **Steps**: Installation and architecture flow
86+
- **Tabs**: Documentation organization
87+
- **Alerts**: Important information display
88+
- **Lists**: Data format listings
89+
- **Tags**: Color-coded domain indicators
90+
91+
## Ecosystem Integration
92+
93+
### DataPlug + Data Cockpit + PyRun
94+
- **DataPlug**: Core data partitioning engine
95+
- **Data Cockpit**: Interactive Jupyter widget interface
96+
- **PyRun**: Cloud execution platform
97+
98+
## Installation
99+
100+
### DataPlug
101+
```bash
102+
pip install cloud-dataplug
103+
```
104+
105+
### Data Cockpit
106+
```bash
107+
pip install cloud_data_cockpit
108+
```
109+
110+
### Data Cockpit with Geospatial Support
111+
```bash
112+
pip install cloud_data_cockpit[geospatial]
113+
```
114+
115+
## Customization
116+
117+
### Theme Configuration
118+
The Ant Design theme is configured in `src/app/lib/theme.ts`:
119+
- Primary color: `#1890ff` (blue)
120+
- Border radius: `8px`
121+
- Component-specific customizations
122+
123+
### Colors
124+
- **Primary**: Blue gradient for hero sections
125+
- **Secondary**: Purple gradient for CTA sections
126+
- **Success**: Green for positive actions
127+
- **Warning**: Orange for alerts
128+
- **Error**: Red for errors
129+
- **Gradients**: Blue-purple for hero sections
130+
131+
### Content
132+
- **Data**: Edit files in `src/app/data/` to update content
133+
- **Components**: Modify components in `src/app/components/`
134+
- **Styling**: Update `src/app/globals.css` for global styles
135+
- **Configuration**: Adjust constants in `src/app/config/constants.ts`
136+
137+
## Development
138+
139+
### Prerequisites
140+
- Node.js 18+
141+
- npm or yarn
142+
143+
### Installation
7144
```bash
145+
# Clone the repository
146+
git clone https://github.com/dataplug/dataplug-web.git
147+
cd dataplug-web
148+
149+
# Install dependencies
150+
npm install
151+
152+
# Start development server
8153
npm run dev
9-
# or
10-
yarn dev
11-
# or
12-
pnpm dev
13-
# or
14-
bun dev
15154
```
16155

17-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
156+
### Available Scripts
157+
```bash
158+
npm run dev # Start development server
159+
npm run build # Build for production
160+
npm run export # Generate static export for GitHub Pages
161+
npm run deploy # Deploy to GitHub Pages (manual)
162+
npm run lint # Run ESLint
163+
npm run type-check # Run TypeScript type checking
164+
npm run format # Format code with Prettier
165+
```
166+
167+
## Deployment to GitHub Pages
168+
169+
This project is configured for automatic deployment to GitHub Pages:
170+
171+
1. **Push to GitHub**: The GitHub Actions workflow will automatically trigger
172+
2. **Static Export**: Next.js builds and exports static files
173+
3. **Deploy**: Files are deployed to GitHub Pages
174+
175+
### Manual Deployment
176+
```bash
177+
npm run deploy # Build and deploy manually using gh-pages
178+
```
18179

19-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
180+
### Configuration
181+
- Static export is configured in `next.config.ts`
182+
- GitHub Actions workflow in `.github/workflows/deploy.yml`
183+
- Automatic deployment on push to `main` branch
20184

21-
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
185+
## Performance
22186

23-
## Learn More
187+
- **Static Export**: Pre-built static files for fast loading
188+
- **Optimized Bundle**: Tree-shaking and code splitting for smaller bundles
189+
- **Modern Assets**: WebP and AVIF image formats support
190+
- **Fast Loading**: Optimized CSS and JavaScript delivery
24191

25-
To learn more about Next.js, take a look at the following resources:
192+
## Contributing
26193

27-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
194+
1. Fork the repository
195+
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
196+
3. Commit your changes (`git commit -m 'Add amazing feature'`)
197+
4. Push to the branch (`git push origin feature/amazing-feature`)
198+
5. Open a Pull Request
29199

30-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
200+
## License
31201

32-
## Deploy on Vercel
202+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
33203

34-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
204+
## Links
35205

36-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
206+
- [DataPlug Framework](https://github.com/CLOUDLAB-URV/dataplug)
207+
- [Data Cockpit](https://github.com/ubenabdelkrim/DataCockpit)
208+
- [PyRun Platform](https://pyrun.cloud/)
209+
- [Ant Design](https://ant.design/)
210+
- [Next.js](https://nextjs.org/)
211+
- [Documentation](https://dataplug.dev/docs)
212+
- [Issues](https://github.com/dataplug/dataplug-web/issues)

‎next.config.ts‎

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,41 @@
1-
import type { NextConfig } from "next";
1+
import type { NextConfig } from 'next';
22

33
const nextConfig: NextConfig = {
4-
/* config options here */
4+
// Configuración para GitHub Pages
5+
output: 'export',
6+
trailingSlash: true,
7+
basePath: process.env.GITHUB_ACTIONS ? '/dataplug_web' : '',
8+
assetPrefix: process.env.GITHUB_ACTIONS ? '/dataplug_web/' : '',
9+
10+
turbopack: {
11+
rules: {
12+
'*.svg': {
13+
loaders: ['@svgr/webpack'],
14+
as: '*.js',
15+
},
16+
},
17+
},
18+
images: {
19+
unoptimized: true, // Requerido para exportación estática
20+
},
21+
poweredByHeader: false,
22+
reactStrictMode: true,
23+
webpack: (config, { dev, isServer }) => {
24+
// Optimize bundle size
25+
if (!dev && !isServer) {
26+
config.optimization.splitChunks = {
27+
chunks: 'all',
28+
cacheGroups: {
29+
vendor: {
30+
test: /[\\/]node_modules[\\/]/,
31+
name: 'vendors',
32+
chunks: 'all',
33+
},
34+
},
35+
};
36+
}
37+
return config;
38+
},
539
};
640

741
export default nextConfig;

0 commit comments

Comments
 (0)