Clean, professional documentation structure
This commit is contained in:
MD. PARVEJ HOSSAIN
commit
3b4298f9ed
176
admin/content-management.mdx
Normal file
176
admin/content-management.mdx
Normal file
@ -0,0 +1,176 @@
|
|||||||
|
---
|
||||||
|
title: "Content Management"
|
||||||
|
description: "Managing header, about, experience, and other content sections"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Content Management
|
||||||
|
|
||||||
|
Manage the core content sections of your portfolio.
|
||||||
|
|
||||||
|
## Header Section
|
||||||
|
|
||||||
|
**URL:** `/admin/header`
|
||||||
|
|
||||||
|
The header appears as the hero section on your homepage.
|
||||||
|
|
||||||
|
### Fields
|
||||||
|
|
||||||
|
| Field | Description |
|
||||||
|
|-------|-------------|
|
||||||
|
| Name | Your display name |
|
||||||
|
| Roles | Rotating titles (e.g., "Developer", "Designer") |
|
||||||
|
| Description | Brief introduction |
|
||||||
|
| Profile Image | Your photo |
|
||||||
|
| Name Font | Font for your name |
|
||||||
|
| Roles Font | Font for rotating titles |
|
||||||
|
| Description Font | Font for description |
|
||||||
|
|
||||||
|
### Tips
|
||||||
|
|
||||||
|
- Keep roles short (2-3 words each)
|
||||||
|
- Use 3-5 rotating roles for best effect
|
||||||
|
- Choose contrasting fonts for visual interest
|
||||||
|
|
||||||
|
## About Me Section
|
||||||
|
|
||||||
|
**URL:** `/admin/about`
|
||||||
|
|
||||||
|
Detailed information about yourself.
|
||||||
|
|
||||||
|
### Fields
|
||||||
|
|
||||||
|
| Field | Description |
|
||||||
|
|-------|-------------|
|
||||||
|
| Vertical Name | Name displayed vertically |
|
||||||
|
| Bio | Rich text biography |
|
||||||
|
| Skills | List of skills/technologies |
|
||||||
|
| Image | About section image |
|
||||||
|
| Vertical Name Font | Font for vertical name |
|
||||||
|
|
||||||
|
### Tips
|
||||||
|
|
||||||
|
- Use the rich text editor for formatted bio
|
||||||
|
- Add relevant skills that match your work
|
||||||
|
- Keep bio concise but informative
|
||||||
|
|
||||||
|
## Experience Section
|
||||||
|
|
||||||
|
**URL:** `/admin/experience`
|
||||||
|
|
||||||
|
Work history and professional experience.
|
||||||
|
|
||||||
|
### Fields per Entry
|
||||||
|
|
||||||
|
| Field | Description |
|
||||||
|
|-------|-------------|
|
||||||
|
| Title | Job title |
|
||||||
|
| Company | Company/organization name |
|
||||||
|
| Duration | Time period (e.g., "2020 - Present") |
|
||||||
|
| Description | Role description |
|
||||||
|
| Logo | Company logo (optional) |
|
||||||
|
|
||||||
|
### Tips
|
||||||
|
|
||||||
|
- List experiences in reverse chronological order
|
||||||
|
- Focus on achievements, not just duties
|
||||||
|
- Include relevant projects or technologies
|
||||||
|
|
||||||
|
## Research Section
|
||||||
|
|
||||||
|
**URL:** `/admin/research`
|
||||||
|
|
||||||
|
Publications, papers, and research work.
|
||||||
|
|
||||||
|
### Fields per Entry
|
||||||
|
|
||||||
|
| Field | Description |
|
||||||
|
|-------|-------------|
|
||||||
|
| Title | Publication title |
|
||||||
|
| Authors | Author names |
|
||||||
|
| Journal/Conference | Where published |
|
||||||
|
| Year | Publication year |
|
||||||
|
| Link | URL to paper |
|
||||||
|
| Abstract | Brief summary |
|
||||||
|
|
||||||
|
## FAQ Section
|
||||||
|
|
||||||
|
**URL:** `/admin/faq`
|
||||||
|
|
||||||
|
Frequently asked questions.
|
||||||
|
|
||||||
|
### Fields per Entry
|
||||||
|
|
||||||
|
| Field | Description |
|
||||||
|
|-------|-------------|
|
||||||
|
| Question | The question |
|
||||||
|
| Answer | Rich text answer |
|
||||||
|
| Order | Display order |
|
||||||
|
| Category | Optional grouping |
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- Accordion-style display
|
||||||
|
- Rich text answers (formatting, links, images)
|
||||||
|
- Custom dividers between questions
|
||||||
|
- Drag-and-drop reordering
|
||||||
|
|
||||||
|
## Social Links
|
||||||
|
|
||||||
|
**URL:** `/admin/settings/social`
|
||||||
|
|
||||||
|
Social media and contact links.
|
||||||
|
|
||||||
|
### Supported Platforms
|
||||||
|
|
||||||
|
- GitHub
|
||||||
|
- LinkedIn
|
||||||
|
- Twitter/X
|
||||||
|
- Instagram
|
||||||
|
- Facebook
|
||||||
|
- YouTube
|
||||||
|
- Email
|
||||||
|
- Website
|
||||||
|
- Custom links
|
||||||
|
|
||||||
|
### Fields per Link
|
||||||
|
|
||||||
|
| Field | Description |
|
||||||
|
|-------|-------------|
|
||||||
|
| Platform | Social platform |
|
||||||
|
| URL | Profile URL |
|
||||||
|
| Icon | Auto-selected based on platform |
|
||||||
|
| Order | Display order |
|
||||||
|
|
||||||
|
## Menu Settings
|
||||||
|
|
||||||
|
**URL:** `/admin/settings/menu`
|
||||||
|
|
||||||
|
Configure navigation menu.
|
||||||
|
|
||||||
|
### Options
|
||||||
|
|
||||||
|
| Setting | Description |
|
||||||
|
|---------|-------------|
|
||||||
|
| Show Blog | Toggle blog in navigation |
|
||||||
|
| Show Projects | Toggle projects in navigation |
|
||||||
|
| Show Shop | Toggle shop in navigation |
|
||||||
|
| Menu Items | Custom menu items |
|
||||||
|
| Logo | Site logo |
|
||||||
|
|
||||||
|
## Best Practices
|
||||||
|
|
||||||
|
<Tip>
|
||||||
|
Keep content concise. Visitors scan quickly - make key information stand out.
|
||||||
|
</Tip>
|
||||||
|
|
||||||
|
<Tip>
|
||||||
|
Use consistent image sizes across sections for a polished look.
|
||||||
|
</Tip>
|
||||||
|
|
||||||
|
<Tip>
|
||||||
|
Preview changes on the public site before finalizing.
|
||||||
|
</Tip>
|
||||||
|
|
||||||
|
<Warning>
|
||||||
|
Large images slow down your site. Optimize images before uploading.
|
||||||
|
</Warning>
|
||||||
130
admin/overview.mdx
Normal file
130
admin/overview.mdx
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
---
|
||||||
|
title: "Admin Overview"
|
||||||
|
description: "Admin dashboard navigation and features"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Admin Panel Overview
|
||||||
|
|
||||||
|
The admin panel provides complete control over your portfolio content.
|
||||||
|
|
||||||
|
## Accessing Admin
|
||||||
|
|
||||||
|
Navigate to `/admin` and log in with your Appwrite credentials.
|
||||||
|
|
||||||
|
## Dashboard Sections
|
||||||
|
|
||||||
|
### Content Management
|
||||||
|
|
||||||
|
| Section | URL | Purpose |
|
||||||
|
|---------|-----|---------|
|
||||||
|
| Header | `/admin/header` | Homepage hero section |
|
||||||
|
| About Me | `/admin/about` | About section content |
|
||||||
|
| Experience | `/admin/experience` | Work experience timeline |
|
||||||
|
| Research | `/admin/research` | Research/publications |
|
||||||
|
| FAQ | `/admin/faq` | Frequently asked questions |
|
||||||
|
|
||||||
|
### Blog
|
||||||
|
|
||||||
|
| Section | URL | Purpose |
|
||||||
|
|---------|-----|---------|
|
||||||
|
| Blogs | `/admin/blogs` | Create and manage blog posts |
|
||||||
|
| Categories | `/admin/blog-categories` | Blog categories |
|
||||||
|
|
||||||
|
### Projects
|
||||||
|
|
||||||
|
| Section | URL | Purpose |
|
||||||
|
|---------|-----|---------|
|
||||||
|
| Projects | `/admin/projects` | Portfolio projects |
|
||||||
|
| Categories | `/admin/project-categories` | Project categories |
|
||||||
|
|
||||||
|
### Shop
|
||||||
|
|
||||||
|
| Section | URL | Purpose |
|
||||||
|
|---------|-----|---------|
|
||||||
|
| Products | `/admin/products` | Product catalog |
|
||||||
|
| Categories | `/admin/shop-categories` | Product categories |
|
||||||
|
| Orders | `/admin/orders` | Order management |
|
||||||
|
| Coupons | `/admin/coupons` | Discount codes |
|
||||||
|
|
||||||
|
### Shortlinks
|
||||||
|
|
||||||
|
| Section | URL | Purpose |
|
||||||
|
|---------|-----|---------|
|
||||||
|
| Shortlinks | `/admin/shortlinks` | URL shortener |
|
||||||
|
| Domains | `/admin/shortlinks/domains` | Custom domains |
|
||||||
|
|
||||||
|
### Settings
|
||||||
|
|
||||||
|
| Section | URL | Purpose |
|
||||||
|
|---------|-----|---------|
|
||||||
|
| Fonts | `/admin/settings/fonts` | Font management |
|
||||||
|
| Menu | `/admin/settings/menu` | Navigation settings |
|
||||||
|
| Social Links | `/admin/settings/social` | Social media links |
|
||||||
|
|
||||||
|
## Navigation
|
||||||
|
|
||||||
|
The admin sidebar provides quick access to all sections:
|
||||||
|
|
||||||
|
```
|
||||||
|
📊 Dashboard
|
||||||
|
├── 📝 Content
|
||||||
|
│ ├── Header
|
||||||
|
│ ├── About Me
|
||||||
|
│ ├── Experience
|
||||||
|
│ ├── Research
|
||||||
|
│ └── FAQ
|
||||||
|
├── 📰 Blog
|
||||||
|
│ ├── Posts
|
||||||
|
│ └── Categories
|
||||||
|
├── 📁 Projects
|
||||||
|
│ ├── Projects
|
||||||
|
│ └── Categories
|
||||||
|
├── 🛒 Shop
|
||||||
|
│ ├── Products
|
||||||
|
│ ├── Categories
|
||||||
|
│ ├── Orders
|
||||||
|
│ └── Coupons
|
||||||
|
├── 🔗 Shortlinks
|
||||||
|
│ ├── Links
|
||||||
|
│ └── Domains
|
||||||
|
└── ⚙️ Settings
|
||||||
|
├── Fonts
|
||||||
|
├── Menu
|
||||||
|
└── Social
|
||||||
|
```
|
||||||
|
|
||||||
|
## Common Actions
|
||||||
|
|
||||||
|
### Creating Content
|
||||||
|
|
||||||
|
1. Navigate to the relevant section
|
||||||
|
2. Click **Add New** or **Create** button
|
||||||
|
3. Fill in the form
|
||||||
|
4. Click **Save**
|
||||||
|
|
||||||
|
### Editing Content
|
||||||
|
|
||||||
|
1. Find the item in the list
|
||||||
|
2. Click **Edit** button
|
||||||
|
3. Make changes
|
||||||
|
4. Click **Update**
|
||||||
|
|
||||||
|
### Deleting Content
|
||||||
|
|
||||||
|
1. Find the item in the list
|
||||||
|
2. Click **Delete** button
|
||||||
|
3. Confirm deletion
|
||||||
|
|
||||||
|
<Warning>
|
||||||
|
Deletions are permanent. Make sure you want to remove the content.
|
||||||
|
</Warning>
|
||||||
|
|
||||||
|
## Tips
|
||||||
|
|
||||||
|
<Tip>
|
||||||
|
Use the **Featured** toggle to highlight important content on the homepage.
|
||||||
|
</Tip>
|
||||||
|
|
||||||
|
<Tip>
|
||||||
|
Preview your changes by opening the public site in another tab.
|
||||||
|
</Tip>
|
||||||
159
admin/settings.mdx
Normal file
159
admin/settings.mdx
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
---
|
||||||
|
title: "Settings"
|
||||||
|
description: "Configure fonts, menu, and site-wide settings"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Admin Settings
|
||||||
|
|
||||||
|
Configure global settings for your portfolio.
|
||||||
|
|
||||||
|
## Font Management
|
||||||
|
|
||||||
|
**URL:** `/admin/settings/fonts`
|
||||||
|
|
||||||
|
Manage fonts used throughout your site.
|
||||||
|
|
||||||
|
### Upload Custom Font
|
||||||
|
|
||||||
|
1. Enter font name
|
||||||
|
2. Select `.ttf`, `.otf`, or `.woff` file (max 5MB)
|
||||||
|
3. Click **Upload Font**
|
||||||
|
|
||||||
|
### Available Fonts
|
||||||
|
|
||||||
|
- **Custom Fonts**: Uploaded fonts (purple badge)
|
||||||
|
- **Google Fonts**: 70+ curated fonts
|
||||||
|
- **Bangla Fonts**: 6 fonts with Bangla support (green badge)
|
||||||
|
|
||||||
|
### Using Fonts
|
||||||
|
|
||||||
|
Fonts appear in font selectors throughout the admin:
|
||||||
|
- Header section (name, roles, description)
|
||||||
|
- About section (vertical name)
|
||||||
|
- Rich text editor
|
||||||
|
|
||||||
|
See [Font Management](/features/font-management) for details.
|
||||||
|
|
||||||
|
## Menu Settings
|
||||||
|
|
||||||
|
**URL:** `/admin/settings/menu`
|
||||||
|
|
||||||
|
Configure the navigation menu.
|
||||||
|
|
||||||
|
### Toggle Sections
|
||||||
|
|
||||||
|
| Setting | Effect |
|
||||||
|
|---------|--------|
|
||||||
|
| Show Blog | Display/hide blog in navigation |
|
||||||
|
| Show Projects | Display/hide projects in navigation |
|
||||||
|
| Show Shop | Display/hide shop in navigation |
|
||||||
|
| Show Contact | Display/hide contact section |
|
||||||
|
|
||||||
|
### Custom Menu Items
|
||||||
|
|
||||||
|
Add custom links to the navigation:
|
||||||
|
|
||||||
|
1. Click **Add Menu Item**
|
||||||
|
2. Enter label and URL
|
||||||
|
3. Set order
|
||||||
|
4. Save
|
||||||
|
|
||||||
|
### Logo
|
||||||
|
|
||||||
|
Upload your site logo:
|
||||||
|
- Recommended size: 200×50px
|
||||||
|
- Formats: PNG, SVG (transparent background preferred)
|
||||||
|
|
||||||
|
## Social Links
|
||||||
|
|
||||||
|
**URL:** `/admin/settings/social`
|
||||||
|
|
||||||
|
Manage social media links displayed in footer/header.
|
||||||
|
|
||||||
|
### Add Social Link
|
||||||
|
|
||||||
|
1. Click **Add Link**
|
||||||
|
2. Select platform (GitHub, LinkedIn, Twitter, etc.)
|
||||||
|
3. Enter profile URL
|
||||||
|
4. Save
|
||||||
|
|
||||||
|
### Supported Platforms
|
||||||
|
|
||||||
|
| Platform | Icon |
|
||||||
|
|----------|------|
|
||||||
|
| GitHub | GitHub icon |
|
||||||
|
| LinkedIn | LinkedIn icon |
|
||||||
|
| Twitter/X | X icon |
|
||||||
|
| Instagram | Instagram icon |
|
||||||
|
| Facebook | Facebook icon |
|
||||||
|
| YouTube | YouTube icon |
|
||||||
|
| Email | Mail icon |
|
||||||
|
| Website | Globe icon |
|
||||||
|
|
||||||
|
### Custom Links
|
||||||
|
|
||||||
|
For platforms not listed:
|
||||||
|
1. Select "Custom"
|
||||||
|
2. Enter label
|
||||||
|
3. Enter URL
|
||||||
|
4. Choose icon (optional)
|
||||||
|
|
||||||
|
## Newsletter Settings
|
||||||
|
|
||||||
|
**URL:** `/admin/settings/newsletter`
|
||||||
|
|
||||||
|
Configure newsletter subscription.
|
||||||
|
|
||||||
|
### Options
|
||||||
|
|
||||||
|
| Setting | Description |
|
||||||
|
|---------|-------------|
|
||||||
|
| Enable | Show/hide newsletter form |
|
||||||
|
| Provider | Email service (Mailchimp, etc.) |
|
||||||
|
| API Key | Provider API key |
|
||||||
|
| List ID | Subscriber list ID |
|
||||||
|
|
||||||
|
## PayPal Settings
|
||||||
|
|
||||||
|
For shop functionality, configure PayPal in your `.env`:
|
||||||
|
|
||||||
|
```env
|
||||||
|
VITE_PAYPAL_CLIENT_ID=your_client_id
|
||||||
|
VITE_PAYPAL_MODE=sandbox # or 'live'
|
||||||
|
```
|
||||||
|
|
||||||
|
Get credentials from [PayPal Developer](https://developer.paypal.com).
|
||||||
|
|
||||||
|
## Environment Variables
|
||||||
|
|
||||||
|
All sensitive settings should be in `.env`:
|
||||||
|
|
||||||
|
```env
|
||||||
|
# Appwrite
|
||||||
|
VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
|
||||||
|
VITE_APPWRITE_PROJECT_ID=your_project_id
|
||||||
|
VITE_APPWRITE_DATABASE_ID=portfolio_db
|
||||||
|
VITE_APPWRITE_STORAGE_ID=reactbucket
|
||||||
|
|
||||||
|
# PayPal (optional)
|
||||||
|
VITE_PAYPAL_CLIENT_ID=your_paypal_client_id
|
||||||
|
|
||||||
|
# Email (optional)
|
||||||
|
VITE_SMTP_HOST=smtp.example.com
|
||||||
|
VITE_SMTP_USER=your_email
|
||||||
|
VITE_SMTP_PASS=your_password
|
||||||
|
```
|
||||||
|
|
||||||
|
<Warning>
|
||||||
|
Never commit `.env` to version control. Add it to `.gitignore`.
|
||||||
|
</Warning>
|
||||||
|
|
||||||
|
## Backup Recommendations
|
||||||
|
|
||||||
|
<Tip>
|
||||||
|
Regularly export your Appwrite data as backup. Go to Appwrite Console → Database → Export.
|
||||||
|
</Tip>
|
||||||
|
|
||||||
|
<Tip>
|
||||||
|
Keep a copy of your custom fonts locally in case you need to re-upload.
|
||||||
|
</Tip>
|
||||||
145
appwrite/database-setup.mdx
Normal file
145
appwrite/database-setup.mdx
Normal file
@ -0,0 +1,145 @@
|
|||||||
|
---
|
||||||
|
title: "Database Setup"
|
||||||
|
description: "Create collections and attributes in Appwrite"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Database Collections Setup
|
||||||
|
|
||||||
|
## Create Database
|
||||||
|
|
||||||
|
1. Go to Appwrite Console → **Databases**
|
||||||
|
2. Click **Create Database**
|
||||||
|
3. Set ID: `portfolio_db`
|
||||||
|
4. Name: `Portfolio Database`
|
||||||
|
|
||||||
|
## Core Collections
|
||||||
|
|
||||||
|
### blogs
|
||||||
|
|
||||||
|
Main blog posts collection.
|
||||||
|
|
||||||
|
| Attribute | Type | Size | Required |
|
||||||
|
|-----------|------|------|----------|
|
||||||
|
| `title` | String | 255 | Yes |
|
||||||
|
| `category` | String | 100 | Yes |
|
||||||
|
| `description` | String | 500 | Yes |
|
||||||
|
| `thumbnailUrl` | String | 2000 | Yes |
|
||||||
|
| `galleryUrls` | String[] | 2000 | No |
|
||||||
|
| `likes` | Integer | - | No |
|
||||||
|
| `featured` | Boolean | - | No |
|
||||||
|
| `fullDescription` | String | 100000 | Yes |
|
||||||
|
| `customSlug` | String | 255 | Yes |
|
||||||
|
| `authorNames` | String[] | 255 | No |
|
||||||
|
| `authorImages` | String[] | 2000 | No |
|
||||||
|
| `publishDate` | String | 50 | Yes |
|
||||||
|
|
||||||
|
**Indexes:**
|
||||||
|
- `slug_idx` (unique) on `customSlug`
|
||||||
|
- `category_idx` on `category`
|
||||||
|
- `featured_idx` on `featured`
|
||||||
|
|
||||||
|
### projects
|
||||||
|
|
||||||
|
Portfolio projects collection.
|
||||||
|
|
||||||
|
| Attribute | Type | Size | Required |
|
||||||
|
|-----------|------|------|----------|
|
||||||
|
| `title` | String | 255 | Yes |
|
||||||
|
| `category` | String | 100 | Yes |
|
||||||
|
| `description` | String | 500 | Yes |
|
||||||
|
| `thumbnailUrl` | String | 2000 | Yes |
|
||||||
|
| `galleryUrls` | String[] | 2000 | No |
|
||||||
|
| `likes` | Integer | - | No |
|
||||||
|
| `featured` | Boolean | - | No |
|
||||||
|
| `fullDescription` | String | 100000 | Yes |
|
||||||
|
| `customSlug` | String | 100 | Yes |
|
||||||
|
| `useProjectPrefix` | Boolean | - | Yes |
|
||||||
|
| `projectLink` | String | 2000 | No |
|
||||||
|
| `projectDetails` | String[] | 500 | No |
|
||||||
|
|
||||||
|
### products
|
||||||
|
|
||||||
|
Shop products collection.
|
||||||
|
|
||||||
|
| Attribute | Type | Size | Required |
|
||||||
|
|-----------|------|------|----------|
|
||||||
|
| `name` | String | 255 | Yes |
|
||||||
|
| `price` | Float | - | Yes |
|
||||||
|
| `discountedPrice` | Float | - | No |
|
||||||
|
| `onSale` | Boolean | - | No |
|
||||||
|
| `featured` | Boolean | - | No |
|
||||||
|
| `imageUrl` | String | 2048 | No |
|
||||||
|
| `category` | String | 255 | No |
|
||||||
|
| `tags` | String[] | - | No |
|
||||||
|
| `description` | String | 10000 | No |
|
||||||
|
| `additionalInfo` | String | 10000 | No |
|
||||||
|
| `galleryUrls` | String[] | - | No |
|
||||||
|
|
||||||
|
### orders
|
||||||
|
|
||||||
|
Customer orders collection.
|
||||||
|
|
||||||
|
| Attribute | Type | Size | Required |
|
||||||
|
|-----------|------|------|----------|
|
||||||
|
| `orderId` | String | 100 | Yes |
|
||||||
|
| `customerId` | String | 50 | Yes |
|
||||||
|
| `customerName` | String | 200 | No |
|
||||||
|
| `customerEmail` | String | 200 | Yes |
|
||||||
|
| `items` | String | 10000 | Yes |
|
||||||
|
| `subtotal` | Float | - | Yes |
|
||||||
|
| `discount` | Float | - | No |
|
||||||
|
| `couponCode` | String | 50 | No |
|
||||||
|
| `total` | Float | - | Yes |
|
||||||
|
| `status` | String | 20 | Yes |
|
||||||
|
| `paypalOrderId` | String | 100 | No |
|
||||||
|
|
||||||
|
**Status values:** `placed`, `processing`, `completed`, `cancelled`
|
||||||
|
|
||||||
|
### shortlinks
|
||||||
|
|
||||||
|
URL shortener collection.
|
||||||
|
|
||||||
|
| Attribute | Type | Size | Required |
|
||||||
|
|-----------|------|------|----------|
|
||||||
|
| `customPath` | String | 100 | Yes |
|
||||||
|
| `destinationUrl` | URL | - | Yes |
|
||||||
|
| `previewImageUrl` | URL | - | No |
|
||||||
|
| `title` | String | 255 | No |
|
||||||
|
| `description` | String | 500 | No |
|
||||||
|
| `isActive` | Boolean | - | Yes |
|
||||||
|
| `clickCount` | Integer | - | No |
|
||||||
|
| `createdAt` | Datetime | - | Yes |
|
||||||
|
|
||||||
|
**Indexes:**
|
||||||
|
- `customPath_idx` (unique) on `customPath`
|
||||||
|
|
||||||
|
## Category Collections
|
||||||
|
|
||||||
|
For `blog_categories`, `project_categories`, `shop_categories`:
|
||||||
|
|
||||||
|
| Attribute | Type | Size | Required |
|
||||||
|
|-----------|------|------|----------|
|
||||||
|
| `name` | String | 100 | Yes |
|
||||||
|
| `color` | String | 20 | No |
|
||||||
|
| `order` | Integer | - | No |
|
||||||
|
|
||||||
|
## Settings Collections
|
||||||
|
|
||||||
|
### header_section
|
||||||
|
|
||||||
|
| Attribute | Type | Size | Required |
|
||||||
|
|-----------|------|------|----------|
|
||||||
|
| `name` | String | 100 | Yes |
|
||||||
|
| `roles` | String[] | 100 | No |
|
||||||
|
| `description` | String | 1000 | No |
|
||||||
|
| `nameFont` | String | 200 | No |
|
||||||
|
| `rolesFont` | String | 200 | No |
|
||||||
|
| `descriptionFont` | String | 200 | No |
|
||||||
|
|
||||||
|
### custom_fonts
|
||||||
|
|
||||||
|
| Attribute | Type | Size | Required |
|
||||||
|
|-----------|------|------|----------|
|
||||||
|
| `name` | String | 100 | Yes |
|
||||||
|
| `fileId` | String | 100 | Yes |
|
||||||
|
| `fileUrl` | String | 2000 | Yes |
|
||||||
80
appwrite/overview.mdx
Normal file
80
appwrite/overview.mdx
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
---
|
||||||
|
title: "Appwrite Overview"
|
||||||
|
description: "Backend setup with Appwrite for database and storage"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Appwrite Setup Overview
|
||||||
|
|
||||||
|
This portfolio uses Appwrite as the backend for:
|
||||||
|
- **Database** - Storing all content (blogs, projects, products, settings)
|
||||||
|
- **Storage** - Hosting images and files
|
||||||
|
- **Authentication** - Admin login
|
||||||
|
|
||||||
|
## Create Appwrite Project
|
||||||
|
|
||||||
|
1. Go to [cloud.appwrite.io](https://cloud.appwrite.io)
|
||||||
|
2. Click **Create Project**
|
||||||
|
3. Name it (e.g., "Portfolio")
|
||||||
|
4. Note your **Project ID**
|
||||||
|
|
||||||
|
## Required Collections
|
||||||
|
|
||||||
|
| Collection | Purpose |
|
||||||
|
|------------|---------|
|
||||||
|
| `blogs` | Blog posts |
|
||||||
|
| `blog_categories` | Blog categories |
|
||||||
|
| `projects` | Portfolio projects |
|
||||||
|
| `project_categories` | Project categories |
|
||||||
|
| `products` | Shop products |
|
||||||
|
| `shop_categories` | Product categories |
|
||||||
|
| `orders` | Customer orders |
|
||||||
|
| `shortlinks` | URL shortener |
|
||||||
|
| `shortlink_analytics` | Click tracking |
|
||||||
|
| `shortlink_domains` | Custom domains |
|
||||||
|
| `header_section` | Homepage header |
|
||||||
|
| `about_me` | About section |
|
||||||
|
| `menubar_settings` | Navigation settings |
|
||||||
|
| `custom_fonts` | Uploaded fonts |
|
||||||
|
|
||||||
|
## Required Storage Buckets
|
||||||
|
|
||||||
|
| Bucket ID | Purpose |
|
||||||
|
|-----------|---------|
|
||||||
|
| `reactbucket` | General images |
|
||||||
|
| `blog_images` | Blog thumbnails & content |
|
||||||
|
| `shop-images` | Product images |
|
||||||
|
| `editor-images` | Rich text editor uploads |
|
||||||
|
| `shortlink-previews` | Shortlink preview images |
|
||||||
|
| `custom-fonts` | Custom font files |
|
||||||
|
| `order-files` | Order delivery files |
|
||||||
|
|
||||||
|
## Quick Setup Checklist
|
||||||
|
|
||||||
|
<Steps>
|
||||||
|
<Step title="Create Database">
|
||||||
|
Create a database named `portfolio_db`
|
||||||
|
</Step>
|
||||||
|
<Step title="Create Collections">
|
||||||
|
Follow the [Database Setup](/appwrite/database-setup) guide
|
||||||
|
</Step>
|
||||||
|
<Step title="Create Storage Buckets">
|
||||||
|
Follow the [Storage Buckets](/appwrite/storage-buckets) guide
|
||||||
|
</Step>
|
||||||
|
<Step title="Set Permissions">
|
||||||
|
Follow the [Permissions](/appwrite/permissions) guide
|
||||||
|
</Step>
|
||||||
|
<Step title="Add Platform">
|
||||||
|
Add `localhost` and your production domain to Platforms
|
||||||
|
</Step>
|
||||||
|
</Steps>
|
||||||
|
|
||||||
|
## Environment Variables
|
||||||
|
|
||||||
|
After setup, add these to your `.env`:
|
||||||
|
|
||||||
|
```env
|
||||||
|
VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
|
||||||
|
VITE_APPWRITE_PROJECT_ID=your_project_id
|
||||||
|
VITE_APPWRITE_DATABASE_ID=portfolio_db
|
||||||
|
VITE_APPWRITE_STORAGE_ID=reactbucket
|
||||||
|
```
|
||||||
133
appwrite/permissions.mdx
Normal file
133
appwrite/permissions.mdx
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
---
|
||||||
|
title: "Permissions"
|
||||||
|
description: "Configure collection and bucket permissions in Appwrite"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Permissions Setup
|
||||||
|
|
||||||
|
## Understanding Permissions
|
||||||
|
|
||||||
|
Appwrite uses role-based permissions:
|
||||||
|
|
||||||
|
| Role | Description |
|
||||||
|
|------|-------------|
|
||||||
|
| `Any` | Anyone (including unauthenticated users) |
|
||||||
|
| `Users` | Any authenticated user |
|
||||||
|
| `Guests` | Unauthenticated users only |
|
||||||
|
| `User:ID` | Specific user by ID |
|
||||||
|
|
||||||
|
## Collection Permissions
|
||||||
|
|
||||||
|
### Public Content (Read-Only)
|
||||||
|
|
||||||
|
For collections that visitors can view but only admins can edit:
|
||||||
|
|
||||||
|
**Collections:** `blogs`, `projects`, `products`, `blog_categories`, `project_categories`, `shop_categories`, `header_section`, `about_me`, `menubar_settings`
|
||||||
|
|
||||||
|
| Permission | Role |
|
||||||
|
|------------|------|
|
||||||
|
| Read | Any |
|
||||||
|
| Create | Users |
|
||||||
|
| Update | Users |
|
||||||
|
| Delete | Users |
|
||||||
|
|
||||||
|
### Private Content
|
||||||
|
|
||||||
|
For collections with sensitive data:
|
||||||
|
|
||||||
|
**Collections:** `orders`, `shortlink_analytics`
|
||||||
|
|
||||||
|
| Permission | Role |
|
||||||
|
|------------|------|
|
||||||
|
| Read | Users |
|
||||||
|
| Create | Users |
|
||||||
|
| Update | Users |
|
||||||
|
| Delete | Users |
|
||||||
|
|
||||||
|
### Admin-Only Content
|
||||||
|
|
||||||
|
**Collections:** `shortlinks`, `shortlink_domains`, `custom_fonts`
|
||||||
|
|
||||||
|
| Permission | Role |
|
||||||
|
|------------|------|
|
||||||
|
| Read | Any |
|
||||||
|
| Create | Users |
|
||||||
|
| Update | Users |
|
||||||
|
| Delete | Users |
|
||||||
|
|
||||||
|
## Setting Permissions in Console
|
||||||
|
|
||||||
|
<Steps>
|
||||||
|
<Step title="Open Collection">
|
||||||
|
Go to **Databases** → `portfolio_db` → Select collection
|
||||||
|
</Step>
|
||||||
|
<Step title="Go to Settings">
|
||||||
|
Click the **Settings** tab
|
||||||
|
</Step>
|
||||||
|
<Step title="Configure Permissions">
|
||||||
|
Under **Permissions**, click **Add Role** and set:
|
||||||
|
- Select role (Any, Users, etc.)
|
||||||
|
- Check permissions (Read, Create, Update, Delete)
|
||||||
|
</Step>
|
||||||
|
<Step title="Save">
|
||||||
|
Click **Update** to save changes
|
||||||
|
</Step>
|
||||||
|
</Steps>
|
||||||
|
|
||||||
|
## Storage Bucket Permissions
|
||||||
|
|
||||||
|
### Public Buckets (Images)
|
||||||
|
|
||||||
|
For image buckets that need public viewing:
|
||||||
|
|
||||||
|
| Permission | Role |
|
||||||
|
|------------|------|
|
||||||
|
| Read | Any |
|
||||||
|
| Create | Users |
|
||||||
|
| Update | Users |
|
||||||
|
| Delete | Users |
|
||||||
|
|
||||||
|
### Private Buckets
|
||||||
|
|
||||||
|
For `order-files` bucket:
|
||||||
|
|
||||||
|
| Permission | Role |
|
||||||
|
|------------|------|
|
||||||
|
| Read | Users |
|
||||||
|
| Create | Users |
|
||||||
|
| Update | Users |
|
||||||
|
| Delete | Users |
|
||||||
|
|
||||||
|
## Document-Level Security
|
||||||
|
|
||||||
|
For orders, you may want document-level security so users can only see their own orders:
|
||||||
|
|
||||||
|
1. Enable **Document Security** in collection settings
|
||||||
|
2. When creating an order, set permissions:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
await databases.createDocument(
|
||||||
|
'portfolio_db',
|
||||||
|
'orders',
|
||||||
|
ID.unique(),
|
||||||
|
orderData,
|
||||||
|
[
|
||||||
|
Permission.read(Role.user(userId)),
|
||||||
|
Permission.update(Role.user(userId))
|
||||||
|
]
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
## Platform Configuration
|
||||||
|
|
||||||
|
Don't forget to add your domains to **Settings** → **Platforms**:
|
||||||
|
|
||||||
|
| Platform | Hostname |
|
||||||
|
|----------|----------|
|
||||||
|
| Web | `localhost` |
|
||||||
|
| Web | `your-domain.vercel.app` |
|
||||||
|
| Web | `yourdomain.com` |
|
||||||
|
|
||||||
|
<Warning>
|
||||||
|
Without platform configuration, your frontend cannot communicate with Appwrite (CORS errors).
|
||||||
|
</Warning>
|
||||||
99
appwrite/storage-buckets.mdx
Normal file
99
appwrite/storage-buckets.mdx
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
---
|
||||||
|
title: "Storage Buckets"
|
||||||
|
description: "Configure Appwrite storage buckets for images and files"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Storage Buckets Setup
|
||||||
|
|
||||||
|
## Create Buckets
|
||||||
|
|
||||||
|
Go to Appwrite Console → **Storage** → **Create Bucket** for each:
|
||||||
|
|
||||||
|
### reactbucket (Main Images)
|
||||||
|
|
||||||
|
| Setting | Value |
|
||||||
|
|---------|-------|
|
||||||
|
| Bucket ID | `reactbucket` |
|
||||||
|
| Name | Main Images |
|
||||||
|
| Max File Size | 10 MB |
|
||||||
|
| Allowed Extensions | `jpg, jpeg, png, gif, webp, svg` |
|
||||||
|
| File Security | Enabled |
|
||||||
|
|
||||||
|
### blog_images
|
||||||
|
|
||||||
|
| Setting | Value |
|
||||||
|
|---------|-------|
|
||||||
|
| Bucket ID | `blog_images` |
|
||||||
|
| Name | Blog Images |
|
||||||
|
| Max File Size | 10 MB |
|
||||||
|
| Allowed Extensions | `jpg, jpeg, png, gif, webp` |
|
||||||
|
|
||||||
|
### shop-images
|
||||||
|
|
||||||
|
| Setting | Value |
|
||||||
|
|---------|-------|
|
||||||
|
| Bucket ID | `shop-images` |
|
||||||
|
| Name | Shop Images |
|
||||||
|
| Max File Size | 10 MB |
|
||||||
|
| Allowed Extensions | `jpg, jpeg, png, gif, webp` |
|
||||||
|
|
||||||
|
### editor-images
|
||||||
|
|
||||||
|
| Setting | Value |
|
||||||
|
|---------|-------|
|
||||||
|
| Bucket ID | `editor-images` |
|
||||||
|
| Name | Editor Images |
|
||||||
|
| Max File Size | 10 MB |
|
||||||
|
| Allowed Extensions | `jpg, jpeg, png, gif, webp, svg` |
|
||||||
|
|
||||||
|
<Note>
|
||||||
|
This bucket stores images uploaded through the rich text editor.
|
||||||
|
</Note>
|
||||||
|
|
||||||
|
### shortlink-previews
|
||||||
|
|
||||||
|
| Setting | Value |
|
||||||
|
|---------|-------|
|
||||||
|
| Bucket ID | `shortlink-previews` |
|
||||||
|
| Name | Shortlink Previews |
|
||||||
|
| Max File Size | 5 MB |
|
||||||
|
| Allowed Extensions | `jpg, jpeg, png, webp, gif` |
|
||||||
|
|
||||||
|
### custom-fonts
|
||||||
|
|
||||||
|
| Setting | Value |
|
||||||
|
|---------|-------|
|
||||||
|
| Bucket ID | `custom-fonts` |
|
||||||
|
| Name | Custom Fonts |
|
||||||
|
| Max File Size | 5 MB |
|
||||||
|
| Allowed Extensions | `ttf, otf, woff, woff2` |
|
||||||
|
|
||||||
|
### order-files
|
||||||
|
|
||||||
|
| Setting | Value |
|
||||||
|
|---------|-------|
|
||||||
|
| Bucket ID | `order-files` |
|
||||||
|
| Name | Order Delivery Files |
|
||||||
|
| Max File Size | 50 MB |
|
||||||
|
| Allowed Extensions | `*` (all types) |
|
||||||
|
|
||||||
|
<Warning>
|
||||||
|
This bucket should have restricted read access - only authenticated users who own the order should access files.
|
||||||
|
</Warning>
|
||||||
|
|
||||||
|
## Bucket Permissions Summary
|
||||||
|
|
||||||
|
| Bucket | Read | Create | Update | Delete |
|
||||||
|
|--------|------|--------|--------|--------|
|
||||||
|
| reactbucket | Any | Users | Users | Users |
|
||||||
|
| blog_images | Any | Users | Users | Users |
|
||||||
|
| shop-images | Any | Users | Users | Users |
|
||||||
|
| editor-images | Any | Users | Users | Users |
|
||||||
|
| shortlink-previews | Any | Users | Users | Users |
|
||||||
|
| custom-fonts | Any | Users | Users | Users |
|
||||||
|
| order-files | Users | Users | Users | Users |
|
||||||
|
|
||||||
|
<Tip>
|
||||||
|
"Any" means public read access (images can be viewed by anyone).
|
||||||
|
"Users" means only authenticated users (admins) can modify.
|
||||||
|
</Tip>
|
||||||
95
deployment.mdx
Normal file
95
deployment.mdx
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
---
|
||||||
|
title: "Deployment"
|
||||||
|
description: "Deploy your portfolio to Vercel"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Vercel Deployment
|
||||||
|
|
||||||
|
## Step 1: Push to GitHub
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "Ready for deployment"
|
||||||
|
git push origin main
|
||||||
|
```
|
||||||
|
|
||||||
|
## Step 2: Import to Vercel
|
||||||
|
|
||||||
|
1. Go to [vercel.com/dashboard](https://vercel.com/dashboard)
|
||||||
|
2. Click **Add New** → **Project**
|
||||||
|
3. Import your GitHub repository
|
||||||
|
4. Click **Deploy**
|
||||||
|
|
||||||
|
## Step 3: Add Environment Variables
|
||||||
|
|
||||||
|
<Warning>
|
||||||
|
Your site won't work without environment variables configured in Vercel!
|
||||||
|
</Warning>
|
||||||
|
|
||||||
|
1. Go to **Project Settings** → **Environment Variables**
|
||||||
|
2. Add these variables:
|
||||||
|
|
||||||
|
| Variable | Value |
|
||||||
|
|----------|-------|
|
||||||
|
| `VITE_APPWRITE_ENDPOINT` | `https://cloud.appwrite.io/v1` |
|
||||||
|
| `VITE_APPWRITE_PROJECT_ID` | Your project ID |
|
||||||
|
| `VITE_APPWRITE_DATABASE_ID` | `portfolio_db` |
|
||||||
|
| `VITE_APPWRITE_STORAGE_ID` | `reactbucket` |
|
||||||
|
|
||||||
|
3. Set for **Production**, **Preview**, and **Development**
|
||||||
|
4. Click **Save**
|
||||||
|
|
||||||
|
## Step 4: Configure CORS in Appwrite
|
||||||
|
|
||||||
|
<Warning>
|
||||||
|
This is critical! Without CORS configuration, your deployed site cannot access Appwrite.
|
||||||
|
</Warning>
|
||||||
|
|
||||||
|
1. Go to [Appwrite Console](https://cloud.appwrite.io)
|
||||||
|
2. Select your project → **Settings** → **Platforms**
|
||||||
|
3. Add a **Web** platform with your Vercel domain:
|
||||||
|
- `https://your-project.vercel.app`
|
||||||
|
- `https://*.vercel.app` (for preview deployments)
|
||||||
|
- Your custom domain if applicable
|
||||||
|
|
||||||
|
## Step 5: Redeploy
|
||||||
|
|
||||||
|
After adding environment variables:
|
||||||
|
1. Go to **Deployments** tab
|
||||||
|
2. Click **⋯** on latest deployment
|
||||||
|
3. Click **Redeploy**
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
### Site shows "basic mode" or empty data
|
||||||
|
|
||||||
|
**Cause:** Environment variables not set or CORS not configured.
|
||||||
|
|
||||||
|
**Solution:**
|
||||||
|
1. Check Vercel → Settings → Environment Variables
|
||||||
|
2. Check Appwrite → Settings → Platforms
|
||||||
|
3. Redeploy after making changes
|
||||||
|
|
||||||
|
### CORS Error in Console
|
||||||
|
|
||||||
|
```
|
||||||
|
Access to XMLHttpRequest blocked by CORS policy
|
||||||
|
```
|
||||||
|
|
||||||
|
**Solution:** Add your Vercel domain to Appwrite Platforms (Step 4).
|
||||||
|
|
||||||
|
### 404 on Page Refresh
|
||||||
|
|
||||||
|
**Solution:** Vercel handles this automatically for Vite projects. If issues persist, add a `vercel.json`:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"rewrites": [{ "source": "/(.*)", "destination": "/" }]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Custom Domain
|
||||||
|
|
||||||
|
1. In Vercel: **Settings** → **Domains** → Add your domain
|
||||||
|
2. Update DNS records as instructed
|
||||||
|
3. Add the custom domain to Appwrite Platforms
|
||||||
109
features/blog-system.mdx
Normal file
109
features/blog-system.mdx
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
---
|
||||||
|
title: "Blog System"
|
||||||
|
description: "Full-featured blog with categories, authors, and rich content"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Blog System
|
||||||
|
|
||||||
|
A complete blogging platform integrated into your portfolio.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- Rich text editor with full formatting
|
||||||
|
- Multiple authors per post with profile images
|
||||||
|
- Category management with custom colors
|
||||||
|
- Featured posts for homepage display
|
||||||
|
- Custom URL slugs
|
||||||
|
- Image galleries
|
||||||
|
- Publication date scheduling
|
||||||
|
|
||||||
|
## Admin URLs
|
||||||
|
|
||||||
|
| Page | URL |
|
||||||
|
|------|-----|
|
||||||
|
| Blog Management | `/admin/blogs` |
|
||||||
|
| Categories | `/admin/blog-categories` |
|
||||||
|
|
||||||
|
## Creating a Blog Post
|
||||||
|
|
||||||
|
<Steps>
|
||||||
|
<Step title="Create Category">
|
||||||
|
Go to `/admin/blog-categories` and create at least one category.
|
||||||
|
</Step>
|
||||||
|
<Step title="Add New Blog">
|
||||||
|
Go to `/admin/blogs` → Click **Add Blog**
|
||||||
|
</Step>
|
||||||
|
<Step title="Fill Details">
|
||||||
|
- **Title**: Blog post title
|
||||||
|
- **Category**: Select from dropdown
|
||||||
|
- **Description**: Short summary (shown on cards)
|
||||||
|
- **Thumbnail**: Upload main image
|
||||||
|
- **Full Description**: Use rich text editor
|
||||||
|
</Step>
|
||||||
|
<Step title="Add Authors">
|
||||||
|
Click **Add Author** to add multiple authors with profile images.
|
||||||
|
</Step>
|
||||||
|
<Step title="Set URL">
|
||||||
|
- Auto-generate slug from title, or
|
||||||
|
- Enter custom slug manually
|
||||||
|
</Step>
|
||||||
|
<Step title="Publish">
|
||||||
|
- Set publication date
|
||||||
|
- Toggle **Featured** for homepage display
|
||||||
|
- Click **Save**
|
||||||
|
</Step>
|
||||||
|
</Steps>
|
||||||
|
|
||||||
|
## Public URLs
|
||||||
|
|
||||||
|
| Page | URL Pattern |
|
||||||
|
|------|-------------|
|
||||||
|
| All Blogs | `/blogs` |
|
||||||
|
| Single Blog | `/blog/{slug}` |
|
||||||
|
| By Category | `/blogs?category={name}` |
|
||||||
|
|
||||||
|
## Database Schema
|
||||||
|
|
||||||
|
### blogs Collection
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
title: "Getting Started with GIS",
|
||||||
|
category: "Technology",
|
||||||
|
description: "A comprehensive guide...",
|
||||||
|
thumbnailUrl: "https://...",
|
||||||
|
fullDescription: "<h2>Introduction</h2>...",
|
||||||
|
customSlug: "getting-started-with-gis",
|
||||||
|
authorNames: ["Parvej Hossain"],
|
||||||
|
authorImages: ["https://..."],
|
||||||
|
publishDate: "2024-01-10",
|
||||||
|
featured: true,
|
||||||
|
likes: 0
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### blog_categories Collection
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
name: "Technology",
|
||||||
|
color: "#3b82f6",
|
||||||
|
order: 1
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Rich Text Features
|
||||||
|
|
||||||
|
The blog editor supports:
|
||||||
|
- Headings (H1, H2, H3)
|
||||||
|
- Bold, italic, underline
|
||||||
|
- Text colors and fonts
|
||||||
|
- Bullet and numbered lists
|
||||||
|
- Images with upload
|
||||||
|
- Embedded videos (YouTube, Vimeo)
|
||||||
|
- Photo grids (24 layouts)
|
||||||
|
- Tables
|
||||||
|
- Code blocks
|
||||||
|
- Blockquotes
|
||||||
|
|
||||||
|
See [Rich Text Editor](/features/rich-text-editor) for full documentation.
|
||||||
155
features/font-management.mdx
Normal file
155
features/font-management.mdx
Normal file
@ -0,0 +1,155 @@
|
|||||||
|
---
|
||||||
|
title: "Font Management"
|
||||||
|
description: "Manage Google Fonts and custom font uploads"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Font Management
|
||||||
|
|
||||||
|
A comprehensive font system with 70+ Google Fonts and custom font upload support.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- 70+ curated Google Fonts
|
||||||
|
- Custom font upload (.ttf, .otf, .woff)
|
||||||
|
- Full Bangla language support
|
||||||
|
- Live preview before applying
|
||||||
|
- Search and filter by category
|
||||||
|
- Reusable font selector component
|
||||||
|
|
||||||
|
## Admin URL
|
||||||
|
|
||||||
|
| Page | URL |
|
||||||
|
|------|-----|
|
||||||
|
| Font Management | `/admin/settings/fonts` |
|
||||||
|
|
||||||
|
## Using Fonts
|
||||||
|
|
||||||
|
### Upload Custom Font
|
||||||
|
|
||||||
|
<Steps>
|
||||||
|
<Step title="Open Font Management">
|
||||||
|
Go to `/admin/settings/fonts`
|
||||||
|
</Step>
|
||||||
|
<Step title="Upload">
|
||||||
|
- Enter font name (e.g., "Kalpurush")
|
||||||
|
- Select `.ttf` file (max 5MB)
|
||||||
|
- Click **Upload Font**
|
||||||
|
</Step>
|
||||||
|
<Step title="Use">
|
||||||
|
Font appears in all font selectors with a purple "Custom" badge
|
||||||
|
</Step>
|
||||||
|
</Steps>
|
||||||
|
|
||||||
|
### Apply Fonts to Content
|
||||||
|
|
||||||
|
1. Edit any section (Header, About Me, etc.)
|
||||||
|
2. Find the font selector dropdown
|
||||||
|
3. Search or browse fonts
|
||||||
|
4. Select your font
|
||||||
|
5. Preview updates in real-time
|
||||||
|
6. Save changes
|
||||||
|
|
||||||
|
## Available Google Fonts
|
||||||
|
|
||||||
|
### Serif Fonts
|
||||||
|
- Playfair Display
|
||||||
|
- Merriweather
|
||||||
|
- Lora
|
||||||
|
- Crimson Text
|
||||||
|
- Libre Baskerville
|
||||||
|
- Cormorant Garamond
|
||||||
|
|
||||||
|
### Sans-Serif Fonts
|
||||||
|
- Roboto
|
||||||
|
- Open Sans
|
||||||
|
- Lato
|
||||||
|
- Montserrat
|
||||||
|
- Poppins
|
||||||
|
- Inter
|
||||||
|
- Nunito
|
||||||
|
|
||||||
|
### Display Fonts
|
||||||
|
- Bebas Neue
|
||||||
|
- Oswald
|
||||||
|
- Raleway
|
||||||
|
- Abril Fatface
|
||||||
|
- Righteous
|
||||||
|
|
||||||
|
### Bangla Fonts
|
||||||
|
- Noto Sans Bengali
|
||||||
|
- Noto Serif Bengali
|
||||||
|
- Hind Siliguri
|
||||||
|
- Tiro Bangla
|
||||||
|
- Mukta
|
||||||
|
- Baloo Da 2
|
||||||
|
|
||||||
|
## Font Selector Component
|
||||||
|
|
||||||
|
The `FontSelector` component is reusable across admin pages:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import FontSelector from '../components/FontSelector/FontSelector';
|
||||||
|
|
||||||
|
<FontSelector
|
||||||
|
value={selectedFont}
|
||||||
|
onChange={setSelectedFont}
|
||||||
|
label="Title Font"
|
||||||
|
previewText="Preview Text"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Props
|
||||||
|
|
||||||
|
| Prop | Type | Description |
|
||||||
|
|------|------|-------------|
|
||||||
|
| `value` | string | Current font value |
|
||||||
|
| `onChange` | function | Callback when font changes |
|
||||||
|
| `label` | string | Label text |
|
||||||
|
| `previewText` | string | Text to show in preview |
|
||||||
|
|
||||||
|
## Where Fonts Are Used
|
||||||
|
|
||||||
|
| Section | Font Options |
|
||||||
|
|---------|--------------|
|
||||||
|
| Header | Name, Roles, Description |
|
||||||
|
| About Me | Vertical Name |
|
||||||
|
| Blog | Title, Content |
|
||||||
|
| Projects | Title, Content |
|
||||||
|
|
||||||
|
## Database Schema
|
||||||
|
|
||||||
|
### custom_fonts Collection
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
name: "Kalpurush",
|
||||||
|
fileId: "abc123",
|
||||||
|
fileUrl: "https://cloud.appwrite.io/v1/storage/..."
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Recommended Bangla Fonts
|
||||||
|
|
||||||
|
For custom Bangla fonts, download from [Ekushey Fonts](https://www.omicronlab.com/bangla-fonts.html):
|
||||||
|
|
||||||
|
- Kalpurush
|
||||||
|
- SolaimanLipi
|
||||||
|
- Siyam Rupali
|
||||||
|
- Nikosh
|
||||||
|
- Akaash
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
### Font Not Displaying
|
||||||
|
|
||||||
|
1. Check file format (must be .ttf, .otf, or .woff)
|
||||||
|
2. Verify file size < 5MB
|
||||||
|
3. Check browser console for errors
|
||||||
|
4. Ensure storage bucket has public read access
|
||||||
|
|
||||||
|
### Bangla Text Shows Boxes
|
||||||
|
|
||||||
|
The font doesn't support Bangla characters. Use:
|
||||||
|
- Noto Sans Bengali
|
||||||
|
- Noto Serif Bengali
|
||||||
|
- Or upload a Bangla-compatible custom font
|
||||||
114
features/project-gallery.mdx
Normal file
114
features/project-gallery.mdx
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
---
|
||||||
|
title: "Project Gallery"
|
||||||
|
description: "Showcase your portfolio projects with custom URLs and galleries"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Project Gallery
|
||||||
|
|
||||||
|
Display your portfolio projects with rich details and custom URLs.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- Custom URL slugs for SEO-friendly links
|
||||||
|
- Image galleries with lightbox
|
||||||
|
- Category filtering
|
||||||
|
- Featured projects for homepage
|
||||||
|
- Rich text descriptions
|
||||||
|
- Project details (client, date, tools, etc.)
|
||||||
|
- External project links
|
||||||
|
|
||||||
|
## Admin URLs
|
||||||
|
|
||||||
|
| Page | URL |
|
||||||
|
|------|-----|
|
||||||
|
| Project Management | `/admin/projects` |
|
||||||
|
| Categories | `/admin/project-categories` |
|
||||||
|
|
||||||
|
## Creating a Project
|
||||||
|
|
||||||
|
<Steps>
|
||||||
|
<Step title="Create Category">
|
||||||
|
Go to `/admin/project-categories` and add categories (e.g., "Web Development", "GIS", "Design").
|
||||||
|
</Step>
|
||||||
|
<Step title="Add New Project">
|
||||||
|
Go to `/admin/projects` → Click **Add Project**
|
||||||
|
</Step>
|
||||||
|
<Step title="Basic Info">
|
||||||
|
- **Title**: Project name
|
||||||
|
- **Category**: Select category
|
||||||
|
- **Description**: Short summary
|
||||||
|
- **Thumbnail**: Main project image
|
||||||
|
</Step>
|
||||||
|
<Step title="Gallery">
|
||||||
|
Upload multiple images for the project gallery.
|
||||||
|
</Step>
|
||||||
|
<Step title="Details">
|
||||||
|
Add project details like:
|
||||||
|
- Client name
|
||||||
|
- Completion date
|
||||||
|
- Technologies used
|
||||||
|
- Project link
|
||||||
|
</Step>
|
||||||
|
<Step title="URL Settings">
|
||||||
|
- **Custom Slug**: URL-friendly identifier
|
||||||
|
- **Use Project Prefix**: Toggle `/project/` prefix
|
||||||
|
- ON: `/project/my-project`
|
||||||
|
- OFF: `/my-project`
|
||||||
|
</Step>
|
||||||
|
<Step title="Save">
|
||||||
|
Toggle **Featured** if desired, then save.
|
||||||
|
</Step>
|
||||||
|
</Steps>
|
||||||
|
|
||||||
|
## Public URLs
|
||||||
|
|
||||||
|
| Page | URL Pattern |
|
||||||
|
|------|-------------|
|
||||||
|
| All Projects | `/projects` |
|
||||||
|
| Single Project | `/project/{slug}` or `/{slug}` |
|
||||||
|
| By Category | `/projects?category={name}` |
|
||||||
|
|
||||||
|
## Database Schema
|
||||||
|
|
||||||
|
### projects Collection
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
title: "GIS Mapping Platform",
|
||||||
|
category: "GIS",
|
||||||
|
description: "Interactive mapping solution...",
|
||||||
|
thumbnailUrl: "https://...",
|
||||||
|
galleryUrls: ["https://...", "https://..."],
|
||||||
|
fullDescription: "<h2>Overview</h2>...",
|
||||||
|
customSlug: "gis-mapping-platform",
|
||||||
|
useProjectPrefix: true,
|
||||||
|
projectLink: "https://example.com",
|
||||||
|
projectDetails: [
|
||||||
|
"Client: ABC Corp",
|
||||||
|
"Date: 2024",
|
||||||
|
"Tech: React, Leaflet"
|
||||||
|
],
|
||||||
|
featured: true,
|
||||||
|
likes: 0
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Link Management
|
||||||
|
|
||||||
|
The URL system prevents collisions with:
|
||||||
|
- Other projects
|
||||||
|
- Blog posts
|
||||||
|
- Static pages
|
||||||
|
- Shortlinks
|
||||||
|
|
||||||
|
When creating a custom slug, the system checks for conflicts and warns you.
|
||||||
|
|
||||||
|
## Tips
|
||||||
|
|
||||||
|
<Tip>
|
||||||
|
Use descriptive slugs like `gis-mapping-platform` instead of `project-1` for better SEO.
|
||||||
|
</Tip>
|
||||||
|
|
||||||
|
<Tip>
|
||||||
|
Keep thumbnails at 800×600px for consistent card displays.
|
||||||
|
</Tip>
|
||||||
215
features/rich-text-editor.mdx
Normal file
215
features/rich-text-editor.mdx
Normal file
@ -0,0 +1,215 @@
|
|||||||
|
---
|
||||||
|
title: "Rich Text Editor"
|
||||||
|
description: "Advanced content editor with embeds, photo grids, and full formatting"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Rich Text Editor
|
||||||
|
|
||||||
|
A powerful content editor used throughout the admin panel for blogs, projects, and products.
|
||||||
|
|
||||||
|
## Text Formatting
|
||||||
|
|
||||||
|
| Feature | How to Use |
|
||||||
|
|---------|------------|
|
||||||
|
| Bold | Select text → Click **B** or `Ctrl+B` |
|
||||||
|
| Italic | Select text → Click **I** or `Ctrl+I` |
|
||||||
|
| Underline | Select text → Click **U** or `Ctrl+U` |
|
||||||
|
| Headings | Select text → Click H1, H2, or H3 |
|
||||||
|
| Lists | Click bullet or numbered list icon |
|
||||||
|
| Alignment | Click align left/center/right/justify |
|
||||||
|
|
||||||
|
## Font & Color
|
||||||
|
|
||||||
|
### Change Font
|
||||||
|
1. Select text
|
||||||
|
2. Click **Font** button
|
||||||
|
3. Choose from Google Fonts or custom fonts
|
||||||
|
4. Font applies immediately
|
||||||
|
|
||||||
|
### Change Color
|
||||||
|
1. Select text
|
||||||
|
2. Click **Color** button
|
||||||
|
3. Pick from palette, use color picker, or enter hex code
|
||||||
|
4. Click **Apply**
|
||||||
|
|
||||||
|
### Change Size
|
||||||
|
1. Select text
|
||||||
|
2. Click **Size** button
|
||||||
|
3. Choose preset (Tiny to Huge) or enter custom size
|
||||||
|
4. Click **Apply**
|
||||||
|
|
||||||
|
## Images
|
||||||
|
|
||||||
|
### Insert Image
|
||||||
|
|
||||||
|
1. Click **Image** button (camera icon)
|
||||||
|
2. Choose method:
|
||||||
|
- **URL**: Paste image URL
|
||||||
|
- **Upload**: Select file from computer
|
||||||
|
3. Click **Insert**
|
||||||
|
|
||||||
|
### Resize Image
|
||||||
|
|
||||||
|
1. Click image to select (green border appears)
|
||||||
|
2. Drag handles:
|
||||||
|
- **Corners**: Maintain aspect ratio
|
||||||
|
- **Edges**: Resize one dimension
|
||||||
|
|
||||||
|
### Text Wrap
|
||||||
|
|
||||||
|
1. Select image
|
||||||
|
2. Align left or right
|
||||||
|
3. Click **Text Wrap** button
|
||||||
|
4. Adjust gap (0-50px)
|
||||||
|
5. Toggle wrap ON
|
||||||
|
|
||||||
|
## Embeds
|
||||||
|
|
||||||
|
Embed external content like YouTube videos, Google Maps, or any iframe.
|
||||||
|
|
||||||
|
### Insert Embed
|
||||||
|
|
||||||
|
1. Click **Embed** button
|
||||||
|
2. Switch to **Code View**
|
||||||
|
3. Paste embed code:
|
||||||
|
```html
|
||||||
|
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
|
||||||
|
width="560" height="315"></iframe>
|
||||||
|
```
|
||||||
|
4. Switch to **Preview** to verify
|
||||||
|
5. Click **Insert Embed**
|
||||||
|
|
||||||
|
### Customize Embed
|
||||||
|
|
||||||
|
After inserting:
|
||||||
|
- **Resize**: Drag corner/edge handles
|
||||||
|
- **Border**: Click Border button to add/customize
|
||||||
|
- **Align**: Use alignment buttons
|
||||||
|
- **Edit Code**: Click Code button to modify
|
||||||
|
|
||||||
|
### Supported Embeds
|
||||||
|
|
||||||
|
- YouTube
|
||||||
|
- Vimeo
|
||||||
|
- Google Maps
|
||||||
|
- Twitter/X
|
||||||
|
- Instagram
|
||||||
|
- CodePen
|
||||||
|
- Any iframe
|
||||||
|
|
||||||
|
## Photo Grids
|
||||||
|
|
||||||
|
Insert beautiful image layouts with 24 pre-designed templates.
|
||||||
|
|
||||||
|
### Insert Photo Grid
|
||||||
|
|
||||||
|
1. Click **Grid** button (Grid3x3 icon)
|
||||||
|
2. Browse 24 layout options
|
||||||
|
3. Click preferred layout
|
||||||
|
4. Add images to each cell:
|
||||||
|
- Click cell
|
||||||
|
- Choose URL or Upload
|
||||||
|
- Click **Add Image**
|
||||||
|
5. Click **Insert Grid**
|
||||||
|
|
||||||
|
### Layout Categories
|
||||||
|
|
||||||
|
| Category | Layouts |
|
||||||
|
|----------|---------|
|
||||||
|
| Simple | 2-4 columns, 2x2, 3x2 grids |
|
||||||
|
| Asymmetric | Large + small combinations |
|
||||||
|
| Creative | Masonry, featured layouts |
|
||||||
|
| Gallery | Portfolio-style arrangements |
|
||||||
|
| Special | Hero + grid, collage styles |
|
||||||
|
|
||||||
|
### Edit Grid
|
||||||
|
|
||||||
|
1. Hover over grid in editor
|
||||||
|
2. Click **Settings** icon to edit
|
||||||
|
3. Click **Delete** icon to remove
|
||||||
|
|
||||||
|
## Tables
|
||||||
|
|
||||||
|
### Insert Table
|
||||||
|
|
||||||
|
1. Click **Table** button
|
||||||
|
2. Select dimensions (rows × columns)
|
||||||
|
3. Table appears in editor
|
||||||
|
|
||||||
|
### Edit Table
|
||||||
|
|
||||||
|
- Click cells to edit content
|
||||||
|
- Use table controls to:
|
||||||
|
- Add/remove rows
|
||||||
|
- Add/remove columns
|
||||||
|
- Merge cells
|
||||||
|
- Set alignment
|
||||||
|
|
||||||
|
## Links
|
||||||
|
|
||||||
|
### Link Selected Text
|
||||||
|
|
||||||
|
1. Select text
|
||||||
|
2. Click **Link** button (chain icon)
|
||||||
|
3. Enter URL
|
||||||
|
4. Press Enter or click **Insert**
|
||||||
|
|
||||||
|
### Insert New Link
|
||||||
|
|
||||||
|
1. Click **Link** button (no selection)
|
||||||
|
2. Enter link title
|
||||||
|
3. Enter URL
|
||||||
|
4. Click **Insert**
|
||||||
|
|
||||||
|
### Edit Link
|
||||||
|
|
||||||
|
1. Click existing link
|
||||||
|
2. Modify URL or title
|
||||||
|
3. Click **Update** or **Remove Link**
|
||||||
|
|
||||||
|
## Blockquotes
|
||||||
|
|
||||||
|
### Insert Quote
|
||||||
|
|
||||||
|
1. Click **Quote** button
|
||||||
|
2. Enter quote text
|
||||||
|
3. Customize colors:
|
||||||
|
- Background color
|
||||||
|
- Border color
|
||||||
|
4. Click **Insert Quote**
|
||||||
|
|
||||||
|
### Edit Quote
|
||||||
|
|
||||||
|
1. Click existing quote
|
||||||
|
2. Modify text or colors
|
||||||
|
3. Click **Update Quote**
|
||||||
|
|
||||||
|
## Code Blocks
|
||||||
|
|
||||||
|
1. Click **Code** button
|
||||||
|
2. Enter code
|
||||||
|
3. Code appears with monospace formatting
|
||||||
|
|
||||||
|
## Keyboard Shortcuts
|
||||||
|
|
||||||
|
| Shortcut | Action |
|
||||||
|
|----------|--------|
|
||||||
|
| `Ctrl+B` | Bold |
|
||||||
|
| `Ctrl+I` | Italic |
|
||||||
|
| `Ctrl+U` | Underline |
|
||||||
|
| `Delete` | Delete selected image/embed |
|
||||||
|
| `Enter` | Quick insert/update in dialogs |
|
||||||
|
|
||||||
|
## Tips
|
||||||
|
|
||||||
|
<Tip>
|
||||||
|
Use **Photo Grids** for showcasing multiple images instead of inserting them one by one.
|
||||||
|
</Tip>
|
||||||
|
|
||||||
|
<Tip>
|
||||||
|
**Embed dimensions** in your code determine the display size everywhere (editor, cards, modals).
|
||||||
|
</Tip>
|
||||||
|
|
||||||
|
<Warning>
|
||||||
|
Only embed content from trusted sources for security.
|
||||||
|
</Warning>
|
||||||
176
features/shop-system.mdx
Normal file
176
features/shop-system.mdx
Normal file
@ -0,0 +1,176 @@
|
|||||||
|
---
|
||||||
|
title: "Shop System"
|
||||||
|
description: "E-commerce with PayPal integration and order management"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Shop System
|
||||||
|
|
||||||
|
Full e-commerce functionality with product management, cart, and PayPal checkout.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- Product catalog with categories
|
||||||
|
- Sale prices and featured products
|
||||||
|
- Image galleries per product
|
||||||
|
- Shopping cart (persistent)
|
||||||
|
- PayPal checkout integration
|
||||||
|
- Order tracking with status updates
|
||||||
|
- Secure file delivery for digital products
|
||||||
|
- Coupon system
|
||||||
|
|
||||||
|
## Admin URLs
|
||||||
|
|
||||||
|
| Page | URL |
|
||||||
|
|------|-----|
|
||||||
|
| Products | `/admin/products` |
|
||||||
|
| Categories | `/admin/shop-categories` |
|
||||||
|
| Orders | `/admin/orders` |
|
||||||
|
| Coupons | `/admin/coupons` |
|
||||||
|
|
||||||
|
## Adding Products
|
||||||
|
|
||||||
|
<Steps>
|
||||||
|
<Step title="Create Category">
|
||||||
|
Go to `/admin/shop-categories` and add product categories.
|
||||||
|
</Step>
|
||||||
|
<Step title="Add Product">
|
||||||
|
Go to `/admin/products` → **Add Product**
|
||||||
|
</Step>
|
||||||
|
<Step title="Basic Info">
|
||||||
|
- **Name**: Product name
|
||||||
|
- **Price**: Regular price
|
||||||
|
- **Category**: Select category
|
||||||
|
- **Tags**: Add searchable tags
|
||||||
|
</Step>
|
||||||
|
<Step title="Sale Settings">
|
||||||
|
- Toggle **On Sale**
|
||||||
|
- Enter **Discounted Price**
|
||||||
|
</Step>
|
||||||
|
<Step title="Images">
|
||||||
|
- Upload main product image
|
||||||
|
- Add gallery images (shown as thumbnails)
|
||||||
|
</Step>
|
||||||
|
<Step title="Description">
|
||||||
|
Use rich text editor for:
|
||||||
|
- **Description**: Main product details
|
||||||
|
- **Additional Info**: Specs, sizing, etc.
|
||||||
|
</Step>
|
||||||
|
<Step title="Save">
|
||||||
|
Toggle **Featured** for homepage display, then save.
|
||||||
|
</Step>
|
||||||
|
</Steps>
|
||||||
|
|
||||||
|
## Order Management
|
||||||
|
|
||||||
|
### Order Statuses
|
||||||
|
|
||||||
|
| Status | Description |
|
||||||
|
|--------|-------------|
|
||||||
|
| `placed` | Order received |
|
||||||
|
| `processing` | Being prepared |
|
||||||
|
| `completed` | Delivered/fulfilled |
|
||||||
|
| `cancelled` | Order cancelled |
|
||||||
|
|
||||||
|
### Managing Orders
|
||||||
|
|
||||||
|
1. Go to `/admin/orders`
|
||||||
|
2. Click on an order to view details
|
||||||
|
3. Update status from dropdown
|
||||||
|
4. Add notes for each step (visible to customer)
|
||||||
|
5. Upload delivery files for digital products
|
||||||
|
|
||||||
|
### Secure File Delivery
|
||||||
|
|
||||||
|
For digital products:
|
||||||
|
1. Upload files to the order
|
||||||
|
2. Customer receives secure, time-limited download links
|
||||||
|
3. Links expire after 15 minutes
|
||||||
|
4. Only the order owner can download
|
||||||
|
|
||||||
|
## Customer Experience
|
||||||
|
|
||||||
|
### Shopping Flow
|
||||||
|
|
||||||
|
1. Browse products on `/shop`
|
||||||
|
2. Click product to view details
|
||||||
|
3. Add to cart
|
||||||
|
4. View cart and adjust quantities
|
||||||
|
5. Proceed to checkout
|
||||||
|
6. Pay with PayPal
|
||||||
|
7. View order status on dashboard
|
||||||
|
|
||||||
|
### Customer Dashboard
|
||||||
|
|
||||||
|
Customers can view their orders at `/dashboard`:
|
||||||
|
- Order history
|
||||||
|
- Status tracking with visual stepper
|
||||||
|
- Download links for digital products
|
||||||
|
- Admin notes for each step
|
||||||
|
|
||||||
|
## PayPal Integration
|
||||||
|
|
||||||
|
### Setup
|
||||||
|
|
||||||
|
Add to your `.env`:
|
||||||
|
|
||||||
|
```env
|
||||||
|
VITE_PAYPAL_CLIENT_ID=your_paypal_client_id
|
||||||
|
```
|
||||||
|
|
||||||
|
Get your Client ID from [PayPal Developer Dashboard](https://developer.paypal.com).
|
||||||
|
|
||||||
|
### Test Mode
|
||||||
|
|
||||||
|
Use PayPal Sandbox for testing:
|
||||||
|
1. Create sandbox accounts in PayPal Developer
|
||||||
|
2. Use sandbox Client ID
|
||||||
|
3. Test purchases with sandbox buyer account
|
||||||
|
|
||||||
|
## Database Schema
|
||||||
|
|
||||||
|
### products Collection
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
name: "Digital Art Pack",
|
||||||
|
price: 29.99,
|
||||||
|
discountedPrice: 19.99,
|
||||||
|
onSale: true,
|
||||||
|
featured: true,
|
||||||
|
imageUrl: "https://...",
|
||||||
|
galleryUrls: ["https://...", "https://..."],
|
||||||
|
category: "Digital Products",
|
||||||
|
tags: ["art", "design", "digital"],
|
||||||
|
description: "<p>Beautiful digital art...</p>",
|
||||||
|
additionalInfo: "<p>Format: PNG, 300dpi...</p>"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### orders Collection
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
orderId: "ORD-2024-001",
|
||||||
|
customerId: "user123",
|
||||||
|
customerEmail: "customer@example.com",
|
||||||
|
items: "[{\"name\":\"Digital Art Pack\",\"price\":19.99,\"qty\":1}]",
|
||||||
|
subtotal: 19.99,
|
||||||
|
discount: 0,
|
||||||
|
total: 19.99,
|
||||||
|
status: "completed",
|
||||||
|
paypalOrderId: "PAY-123..."
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Coupon System
|
||||||
|
|
||||||
|
Create discount coupons at `/admin/coupons`:
|
||||||
|
|
||||||
|
| Field | Description |
|
||||||
|
|-------|-------------|
|
||||||
|
| Code | Coupon code (e.g., `SAVE20`) |
|
||||||
|
| Type | Percentage or fixed amount |
|
||||||
|
| Value | Discount value |
|
||||||
|
| Min Purchase | Minimum order amount |
|
||||||
|
| Expiry | Expiration date |
|
||||||
|
| Usage Limit | Max uses |
|
||||||
149
features/shortlink-system.mdx
Normal file
149
features/shortlink-system.mdx
Normal file
@ -0,0 +1,149 @@
|
|||||||
|
---
|
||||||
|
title: "Shortlink System"
|
||||||
|
description: "URL shortener with analytics and custom domains"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Shortlink System
|
||||||
|
|
||||||
|
A comprehensive URL shortening solution with analytics and custom domain support.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- Create short URLs from long URLs
|
||||||
|
- Custom paths (e.g., `yoursite.com/my-link`)
|
||||||
|
- Preview images for social media
|
||||||
|
- Click analytics (countries, devices, referrers)
|
||||||
|
- Custom domain support
|
||||||
|
- Collision detection with existing routes
|
||||||
|
|
||||||
|
## Admin URL
|
||||||
|
|
||||||
|
| Page | URL |
|
||||||
|
|------|-----|
|
||||||
|
| Shortlink Management | `/admin/shortlinks` |
|
||||||
|
| Domain Management | `/admin/shortlinks/domains` |
|
||||||
|
|
||||||
|
## Creating a Shortlink
|
||||||
|
|
||||||
|
<Steps>
|
||||||
|
<Step title="Open Shortlinks">
|
||||||
|
Go to `/admin/shortlinks`
|
||||||
|
</Step>
|
||||||
|
<Step title="Click Create">
|
||||||
|
Click **Create Shortlink**
|
||||||
|
</Step>
|
||||||
|
<Step title="Enter URL">
|
||||||
|
Paste the long destination URL
|
||||||
|
</Step>
|
||||||
|
<Step title="Choose Path">
|
||||||
|
- **Auto-generate**: Random short path
|
||||||
|
- **Custom**: Enter your own (e.g., `winter-sale`)
|
||||||
|
</Step>
|
||||||
|
<Step title="Optional: Preview Image">
|
||||||
|
Upload an image for social media previews
|
||||||
|
</Step>
|
||||||
|
<Step title="Create">
|
||||||
|
Click **Create Shortlink**
|
||||||
|
</Step>
|
||||||
|
</Steps>
|
||||||
|
|
||||||
|
## Analytics
|
||||||
|
|
||||||
|
Click the analytics icon on any shortlink to view:
|
||||||
|
|
||||||
|
| Metric | Description |
|
||||||
|
|--------|-------------|
|
||||||
|
| Total Clicks | Overall click count |
|
||||||
|
| Countries | Geographic distribution |
|
||||||
|
| Devices | Desktop, mobile, tablet breakdown |
|
||||||
|
| Referrers | Where clicks came from |
|
||||||
|
| Browsers | Browser usage stats |
|
||||||
|
|
||||||
|
Export analytics to CSV for further analysis.
|
||||||
|
|
||||||
|
## Custom Domains
|
||||||
|
|
||||||
|
### Setup Steps
|
||||||
|
|
||||||
|
<Steps>
|
||||||
|
<Step title="Add Domain">
|
||||||
|
Go to Domain Management → **Add Domain**
|
||||||
|
Enter subdomain (e.g., `link.yourdomain.com`)
|
||||||
|
</Step>
|
||||||
|
<Step title="Configure DNS">
|
||||||
|
Add these records in your DNS provider:
|
||||||
|
|
||||||
|
**CNAME Record:**
|
||||||
|
```
|
||||||
|
Name: link
|
||||||
|
Value: yourdomain.com
|
||||||
|
```
|
||||||
|
|
||||||
|
**TXT Record (for verification):**
|
||||||
|
```
|
||||||
|
Name: _shortlink-verify.link
|
||||||
|
Value: [verification token shown in dashboard]
|
||||||
|
```
|
||||||
|
</Step>
|
||||||
|
<Step title="Verify">
|
||||||
|
Wait 5-10 minutes for DNS propagation, then click **Verify DNS**
|
||||||
|
</Step>
|
||||||
|
<Step title="Use">
|
||||||
|
Select the custom domain when creating new shortlinks
|
||||||
|
</Step>
|
||||||
|
</Steps>
|
||||||
|
|
||||||
|
## Database Schema
|
||||||
|
|
||||||
|
### shortlinks Collection
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
customPath: "winter-sale",
|
||||||
|
destinationUrl: "https://example.com/products?utm_source=...",
|
||||||
|
previewImageUrl: "https://...",
|
||||||
|
title: "Winter Sale 2024",
|
||||||
|
description: "50% off all items",
|
||||||
|
isActive: true,
|
||||||
|
clickCount: 150,
|
||||||
|
createdAt: "2024-01-01T00:00:00Z"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### shortlink_analytics Collection
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
shortlinkId: "abc123",
|
||||||
|
timestamp: "2024-01-15T10:30:00Z",
|
||||||
|
country: "US",
|
||||||
|
countryName: "United States",
|
||||||
|
deviceType: "mobile",
|
||||||
|
browser: "Chrome",
|
||||||
|
referrer: "https://twitter.com"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Collision Detection
|
||||||
|
|
||||||
|
The system automatically checks if your custom path conflicts with:
|
||||||
|
- Existing blog posts
|
||||||
|
- Project pages
|
||||||
|
- Static routes
|
||||||
|
- Other shortlinks
|
||||||
|
|
||||||
|
A warning appears if a collision is detected.
|
||||||
|
|
||||||
|
## Best Practices
|
||||||
|
|
||||||
|
<Tip>
|
||||||
|
Use descriptive paths like `winter-sale` instead of random strings for better memorability.
|
||||||
|
</Tip>
|
||||||
|
|
||||||
|
<Tip>
|
||||||
|
Add preview images to increase click-through rates by 30-50% on social media.
|
||||||
|
</Tip>
|
||||||
|
|
||||||
|
<Warning>
|
||||||
|
Shortlinks are case-insensitive. `My-Link` and `my-link` are the same.
|
||||||
|
</Warning>
|
||||||
59
introduction.mdx
Normal file
59
introduction.mdx
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
---
|
||||||
|
title: "Introduction"
|
||||||
|
description: "A modern portfolio website built with React, Vite, Tailwind CSS, and Appwrite"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Portfolio Website
|
||||||
|
|
||||||
|
A comprehensive, feature-rich portfolio website with an admin dashboard for complete content management.
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
|
||||||
|
| Technology | Purpose |
|
||||||
|
|------------|---------|
|
||||||
|
| React 18 | Frontend framework |
|
||||||
|
| Vite 5 | Build tool & dev server |
|
||||||
|
| Tailwind CSS 3 | Styling |
|
||||||
|
| Appwrite | Backend, database & storage |
|
||||||
|
| Lucide React | Icons |
|
||||||
|
|
||||||
|
## Key Features
|
||||||
|
|
||||||
|
<CardGroup cols={2}>
|
||||||
|
<Card title="Blog System" icon="newspaper">
|
||||||
|
Full-featured blog with categories, multiple authors, and rich text editing
|
||||||
|
</Card>
|
||||||
|
<Card title="Project Gallery" icon="folder">
|
||||||
|
Showcase projects with custom URLs, galleries, and detailed descriptions
|
||||||
|
</Card>
|
||||||
|
<Card title="Shortlink System" icon="link">
|
||||||
|
URL shortener with analytics, custom domains, and preview images
|
||||||
|
</Card>
|
||||||
|
<Card title="Shop & Orders" icon="shopping-cart">
|
||||||
|
E-commerce with PayPal integration, order tracking, and secure file delivery
|
||||||
|
</Card>
|
||||||
|
<Card title="Font Management" icon="font">
|
||||||
|
70+ Google Fonts plus custom font uploads with Bangla support
|
||||||
|
</Card>
|
||||||
|
<Card title="Rich Text Editor" icon="pen">
|
||||||
|
Advanced editor with embeds, photo grids, tables, and full formatting
|
||||||
|
</Card>
|
||||||
|
</CardGroup>
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── components/ # Reusable UI components
|
||||||
|
├── pages/
|
||||||
|
│ ├── Admin/ # Admin dashboard pages
|
||||||
|
│ └── ... # Public pages
|
||||||
|
├── lib/ # Appwrite services & utilities
|
||||||
|
└── utils/ # Helper functions
|
||||||
|
```
|
||||||
|
|
||||||
|
## Quick Links
|
||||||
|
|
||||||
|
- [Quick Start Guide](/quick-start) - Get up and running in 10 minutes
|
||||||
|
- [Appwrite Setup](/appwrite/overview) - Configure your backend
|
||||||
|
- [Deployment Guide](/deployment) - Deploy to Vercel
|
||||||
66
mint.json
Normal file
66
mint.json
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://mintlify.com/schema.json",
|
||||||
|
"name": "Portfolio Documentation",
|
||||||
|
"logo": {
|
||||||
|
"dark": "/logo/dark.svg",
|
||||||
|
"light": "/logo/light.svg"
|
||||||
|
},
|
||||||
|
"favicon": "/favicon.svg",
|
||||||
|
"colors": {
|
||||||
|
"primary": "#1E8479",
|
||||||
|
"light": "#07C983",
|
||||||
|
"dark": "#105652",
|
||||||
|
"anchors": {
|
||||||
|
"from": "#1E8479",
|
||||||
|
"to": "#07C983"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"topbarCtaButton": {
|
||||||
|
"name": "Live Demo",
|
||||||
|
"url": "https://portfolioofparvej.mintlify.app"
|
||||||
|
},
|
||||||
|
"anchors": [
|
||||||
|
{
|
||||||
|
"name": "GitHub",
|
||||||
|
"icon": "github",
|
||||||
|
"url": "https://github.com/iu-parvej"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"navigation": [
|
||||||
|
{
|
||||||
|
"group": "Getting Started",
|
||||||
|
"pages": ["introduction", "quick-start", "deployment"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"group": "Appwrite Setup",
|
||||||
|
"pages": [
|
||||||
|
"appwrite/overview",
|
||||||
|
"appwrite/database-setup",
|
||||||
|
"appwrite/storage-buckets",
|
||||||
|
"appwrite/permissions"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"group": "Features",
|
||||||
|
"pages": [
|
||||||
|
"features/blog-system",
|
||||||
|
"features/project-gallery",
|
||||||
|
"features/shortlink-system",
|
||||||
|
"features/shop-system",
|
||||||
|
"features/font-management",
|
||||||
|
"features/rich-text-editor"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"group": "Admin Panel",
|
||||||
|
"pages": [
|
||||||
|
"admin/overview",
|
||||||
|
"admin/content-management",
|
||||||
|
"admin/settings"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"footerSocials": {
|
||||||
|
"github": "https://github.com/iu-parvej"
|
||||||
|
}
|
||||||
|
}
|
||||||
89
quick-start.mdx
Normal file
89
quick-start.mdx
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
---
|
||||||
|
title: "Quick Start"
|
||||||
|
description: "Get your portfolio website running in 10 minutes"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Quick Start Guide
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
- Node.js 18+ installed
|
||||||
|
- Appwrite account ([cloud.appwrite.io](https://cloud.appwrite.io))
|
||||||
|
- Git installed
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
<Steps>
|
||||||
|
<Step title="Clone & Install">
|
||||||
|
```bash
|
||||||
|
git clone <your-repo-url>
|
||||||
|
cd portfolio
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
</Step>
|
||||||
|
|
||||||
|
<Step title="Configure Environment">
|
||||||
|
Create a `.env` file in the root directory:
|
||||||
|
|
||||||
|
```env
|
||||||
|
VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
|
||||||
|
VITE_APPWRITE_PROJECT_ID=your_project_id
|
||||||
|
VITE_APPWRITE_DATABASE_ID=portfolio_db
|
||||||
|
VITE_APPWRITE_STORAGE_ID=reactbucket
|
||||||
|
```
|
||||||
|
|
||||||
|
<Note>
|
||||||
|
Get these values from your Appwrite Console after creating a project.
|
||||||
|
</Note>
|
||||||
|
</Step>
|
||||||
|
|
||||||
|
<Step title="Start Development Server">
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Open [http://localhost:5173](http://localhost:5173) in your browser.
|
||||||
|
</Step>
|
||||||
|
</Steps>
|
||||||
|
|
||||||
|
## First-Time Setup
|
||||||
|
|
||||||
|
### 1. Create Admin Account
|
||||||
|
|
||||||
|
1. Go to `/admin` in your browser
|
||||||
|
2. Sign up with your email
|
||||||
|
3. Verify your email in Appwrite Console
|
||||||
|
|
||||||
|
### 2. Set Up Database
|
||||||
|
|
||||||
|
Follow the [Appwrite Setup Guide](/appwrite/overview) to create:
|
||||||
|
- Required collections (blogs, projects, products, etc.)
|
||||||
|
- Storage buckets for images
|
||||||
|
- Proper permissions
|
||||||
|
|
||||||
|
### 3. Add Your First Content
|
||||||
|
|
||||||
|
| Section | Admin URL | What to Add |
|
||||||
|
|---------|-----------|-------------|
|
||||||
|
| Header | `/admin/header` | Name, roles, description |
|
||||||
|
| About | `/admin/about` | Bio, skills, experience |
|
||||||
|
| Projects | `/admin/projects` | Portfolio projects |
|
||||||
|
| Blog | `/admin/blogs` | Blog posts |
|
||||||
|
|
||||||
|
## Build for Production
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
npm run preview # Test production build locally
|
||||||
|
```
|
||||||
|
|
||||||
|
## Next Steps
|
||||||
|
|
||||||
|
<CardGroup cols={2}>
|
||||||
|
<Card title="Appwrite Setup" icon="database" href="/appwrite/overview">
|
||||||
|
Complete database and storage configuration
|
||||||
|
</Card>
|
||||||
|
<Card title="Deployment" icon="rocket" href="/deployment">
|
||||||
|
Deploy to Vercel or other platforms
|
||||||
|
</Card>
|
||||||
|
</CardGroup>
|
||||||
Loading…
Reference in New Issue
Block a user