{"id":51368286,"url":"https://github.com/djangify/astro","last_synced_at":"2026-07-03T03:35:27.763Z","repository":{"id":294059670,"uuid":"985368456","full_name":"djangify/astro","owner":"djangify","description":"Corrison API with Astro Front End","archived":false,"fork":false,"pushed_at":"2025-07-14T17:37:08.000Z","size":697,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-07-03T03:35:25.951Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/djangify.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-17T16:05:31.000Z","updated_at":"2025-07-14T17:37:11.000Z","dependencies_parsed_at":"2025-05-18T18:40:32.287Z","dependency_job_id":"e6df2eb2-bafd-43b4-9b20-9b1bfb42a643","html_url":"https://github.com/djangify/astro","commit_stats":null,"previous_names":["djangify/astro"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/djangify/astro","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djangify%2Fastro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djangify%2Fastro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djangify%2Fastro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djangify%2Fastro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/djangify","download_url":"https://codeload.github.com/djangify/astro/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djangify%2Fastro/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35071461,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-03T02:00:05.635Z","response_time":110,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-07-03T03:35:27.002Z","updated_at":"2026-07-03T03:35:27.749Z","avatar_url":"https://github.com/djangify.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Corrison - Headless E-commerce \u0026 CMS Platform\n\nA modern, API-first headless platform built with Django REST Framework backend and Astro frontend, designed for e-commerce, content management, and advanced landing pages.\n\n## About This Project\n\nCorrison is a comprehensive headless platform that combines e-commerce functionality with a powerful CMS and advanced landing page capabilities. The frontend is built with Astro for optimal performance, while the Django backend provides a robust API-first architecture.\n\n**Live Examples:**\n- **Main Site**: [corrisonapi.com](https://www.corrisonapi.com) - Consuming Pages, Blog and LinkHub APIs\n- **Portfolio Site**: [todiane.com](https://www.todiane.com) - Consuming Pages and LinkHub APIs\n- **API Backend**: [corrison.corrisonapi.com](https://corrison.corrisonapi.com) - Django REST Framework API\n\n## Architecture Overview\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│                    Client Layer                             │\n│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐           │\n│  │ E-commerce  │ │ CMS Frontend│ │ LinkHub     │           │\n│  │ (Astro.js)  │ │ (Astro.js)  │ │ (Astro.js)  │           │\n│  └─────────────┘ └─────────────┘ └─────────────┘           │\n└─────────────────────────────────────────────────────────────┘\n                              │\n┌─────────────────────────────────────────────────────────────┐\n│                API Gateway Layer                            │\n│         Passenger WSGI • CORS • JWT Auth                   │\n└─────────────────────────────────────────────────────────────┘\n                              │\n┌─────────────────────────────────────────────────────────────┐\n│              API Layer (Django REST Framework)             │\n│  Products • Cart • Blog • Pages • LinkHub • Testimonials  │\n└─────────────────────────────────────────────────────────────┘\n                              │\n┌─────────────────────────────────────────────────────────────┐\n│                Infrastructure Layer                         │\n│        Database (MariaDB) • Media Storage • Static Files   │\n└─────────────────────────────────────────────────────────────┘\n```\n\n## Key Features\n\n### 🛍️ **E-commerce Module**\n- Product catalog with categories and variants\n- Shopping cart and checkout system\n- Order management and processing\n- Stripe payment integration\n\n### 📝 **Content Management System**\n- Blog posts with featured images and YouTube embeds\n- Dynamic pages with rich content\n- File attachments and media management\n- SEO-optimized meta fields\n\n### 🎯 **Advanced Landing Pages**\n- **Video Backgrounds**: YouTube and custom video support\n- **Countdown Timers**: Real-time countdown to launch dates\n- **Prelaunch Badges**: \"Coming Soon\" and custom badges\n- **Dual CTAs**: Primary and secondary call-to-action buttons\n- **Social Proof**: Integrated testimonial sections\n- **Scroll Indicators**: Animated scroll-down indicators\n\n### 🌟 **Testimonial System**\n- Global testimonial management\n- Star ratings (1-5 scale)\n- Category-based filtering\n- Featured testimonial highlighting\n- Multi-page testimonial relationships\n- Customer photos and company details\n\n### 🔗 **LinkHub (Link-in-Bio)**\n- Multi-media link collections\n- Support for videos, PDFs, audio, donations\n- Custom icons and descriptions\n- Author attribution\n- Background image support\n\n### 🎨 **Enhanced Hero Sections**\n- **Regular Pages**: Standard hero with image/content options\n- **Landing Pages**: Advanced hero with video, countdown, dual CTAs\n- **Content Flexibility**: Rich text content or custom right-side content\n- **Image Options**: Upload or external URL support\n\n## API Endpoints\n\n### Pages API\n```\nGET    /api/v1/pages/                    # List all pages\nGET    /api/v1/pages/{slug}/             # Get specific page\nGET    /api/v1/pages/?type=landing       # Filter by page type\nGET    /api/v1/pages/landing_pages/      # Get landing pages only\n```\n\n### Blog API\n```\nGET    /api/v1/blog/posts/              # List all blog posts\nGET    /api/v1/blog/posts/{slug}/       # Get specific blog post\n```\n\n### Testimonials API\n```\nGET    /api/v1/testimonials/                    # List all testimonials\nGET    /api/v1/testimonials/featured/           # Get featured testimonials\nGET    /api/v1/testimonials/?category={cat}     # Filter by category\nGET    /api/v1/testimonials/categories/         # Get available categories\nGET    /api/v1/pages/{slug}/testimonials/       # Get testimonials for specific page\n```\n\n### LinkHub API\n```\nGET    /api/v1/linkhubs/                # List all link hubs\nGET    /api/v1/linkhubs/{slug}/         # Get specific link hub\n```\n\n## Technology Stack\n\n**Frontend:**\n- **Framework**: Astro.js (Static Site Generation)\n- **Styling**: Tailwind CSS\n- **Components**: Astro components with TypeScript\n- **Performance**: Image optimization, lazy loading\n\n**Backend:**\n- **Framework**: Django + Django REST Framework\n- **Database**: MariaDB/MySQL\n- **Authentication**: JWT-based\n- **Media**: Django file handling with WhiteNoise\n- **Hosting**: Hetzner Cloud with HestiaCP\n\n**Infrastructure:**\n- **Frontend Hosting**: Static deployment (Netlify, Vercel, etc.)\n- **Backend Hosting**: Hetzner CPX21 (Helsinki)\n- **CDN**: Frontend assets served via CDN\n- **SSL**: Let's Encrypt certificates\n\n## Installation \u0026 Setup\n\n### Prerequisites\n- Node.js (version 18.0.0 or higher)\n- npm or yarn package manager\n- Access to Corrison API backend\n\n### Frontend Setup\n\n1. **Clone and install:**\n```bash\ngit clone https://github.com/djangify/astro.git\ncd astro\nnpm install\n```\n\n2. **Environment configuration:**\n```bash\n# Create .env file\ncp .env.example .env\n```\n\n3. **Configure environment variables:**\n```env\nPUBLIC_API_BASE_URL=https://corrison.corrisonapi.com\nPUBLIC_SITE_URL=https://your-domain.com\n```\n\n4. **Development server:**\n```bash\nnpm run dev\n# Available at http://localhost:4321\n```\n\n5. **Production build:**\n```bash\nnpm run build\nnpm run preview\n```\n\n## Project Structure\n\n```\nsrc/\n├── components/              # Reusable components\n│   ├── EnhancedHero.astro      # Advanced hero for landing pages\n│   ├── TestimonialGrid.astro   # Testimonial display component\n│   ├── CountdownTimer.astro    # Countdown timer component\n│   ├── Header.astro            # Site navigation\n│   └── Footer.astro            # Site footer\n├── layouts/\n│   └── BaseLayout.astro        # Main page layout\n├── pages/                   # Route pages\n│   ├── index.astro             # Homepage (supports landing pages)\n│   ├── blog/                   # Blog routes\n│   │   ├── index.astro         # Blog listing\n│   │   └── [slug].astro        # Individual blog posts\n│   ├── linkhubs.astro          # LinkHub display\n│   └── architecture.astro      # Platform documentation\n├── lib/\n│   ├── api.ts                  # API integration functions\n│   └── heroicons.ts            # Icon helper functions\n├── utils/                   # Utility functions\n│   ├── blog.ts                 # Blog-related utilities\n│   ├── images.ts               # Image optimization\n│   ├── permalinks.ts           # URL generation\n│   └── frontmatter.ts          # Content processing\n├── styles/\n│   └── global.css              # Global styles and Tailwind\n└── types.ts                 # TypeScript definitions\n```\n\n## Component Usage\n\n### Enhanced Hero Section\n```astro\n---\nimport EnhancedHero from \"../components/EnhancedHero.astro\";\n---\n\n\u003cEnhancedHero page={page} /\u003e\n```\n\n**Features:**\n- Automatic video background detection\n- Countdown timer integration\n- Dual CTA button support\n- Prelaunch badge display\n- Scroll indicator animation\n\n### Testimonial Grid\n```astro\n---\nimport TestimonialGrid from \"../components/TestimonialGrid.astro\";\n---\n\n\u003cTestimonialGrid \n  testimonials={page.testimonials}\n  title=\"What Our Customers Say\"\n  columns={3}\n/\u003e\n```\n\n### Countdown Timer\n```astro\n---\nimport CountdownTimer from \"../components/CountdownTimer.astro\";\n---\n\n\u003cCountdownTimer \n  targetDate=\"2024-12-31T23:59:59\"\n  title=\"Launch Countdown\"\n  className=\"text-center\"\n/\u003e\n```\n\n## API Integration Examples\n\n### Fetching Landing Pages\n```typescript\nimport { fetchLandingPages, fetchPagesByType } from \"../lib/api\";\n\n// Get all landing pages\nconst landingPages = await fetchLandingPages();\n\n// Get pages by type\nconst regularPages = await fetchPagesByType('page');\nconst landingPages = await fetchPagesByType('landing');\n```\n\n### Working with Testimonials\n```typescript\nimport { \n  fetchTestimonials, \n  fetchFeaturedTestimonials,\n  fetchPageTestimonials \n} from \"../lib/api\";\n\n// Get all testimonials\nconst testimonials = await fetchTestimonials();\n\n// Get featured testimonials only\nconst featured = await fetchFeaturedTestimonials();\n\n// Get testimonials for specific page\nconst pageTestimonials = await fetchPageTestimonials('homepage');\n```\n\n### Blog Integration\n```typescript\nimport { fetchPosts, fetchPost } from \"../lib/api\";\n\n// Get all blog posts\nconst posts = await fetchPosts();\n\n// Get specific blog post\nconst post = await fetchPost('my-blog-post-slug');\n```\n\n## Page Types\n\n### Regular Pages\nStandard content pages with:\n- Basic hero section\n- Rich text content\n- Feature sections\n- Image/content flexibility\n\n### Landing Pages\nAdvanced marketing pages with:\n- Video background support\n- Countdown timers\n- Prelaunch badges\n- Dual CTA buttons\n- Social proof sections\n- Enhanced hero components\n\n## Configuration\n\n### Astro Configuration\n```javascript\n// astro.config.mjs\nimport { defineConfig } from 'astro/config';\nimport tailwindcss from '@tailwindcss/vite';\n\nexport default defineConfig({\n  output: 'static',\n  vite: {\n    plugins: [tailwindcss()],\n  },\n});\n```\n\n### API Configuration\n```typescript\n// src/lib/api.ts\nconst API = \"https://corrison.corrisonapi.com\";\n\nasync function check\u003cT\u003e(res: Response, what: string): Promise\u003cT\u003e {\n  if (!res.ok) throw new Error(`Failed to fetch ${what}`);\n  return res.json();\n}\n```\n\n## Deployment\n\n### Static Deployment (Recommended)\n1. **Build the project:**\n```bash\nnpm run build\n```\n\n2. **Deploy `dist/` folder to:**\n   - Netlify\n   - Vercel  \n   - AWS S3 + CloudFront\n   - GitHub Pages\n   - Any static hosting service\n\n### Environment Variables for Production\n```env\nPUBLIC_API_BASE_URL=https://corrison.corrisonapi.com\nPUBLIC_SITE_URL=https://your-production-domain.com\n```\n\n## Backend Features\n\nThe Django backend provides:\n\n### E-commerce Capabilities\n- Product management with variants\n- Cart and checkout functionality\n- Order processing and management\n- Stripe payment integration\n- Inventory tracking\n\n### Content Management\n- Rich text editing for all content fields\n- Image upload and optimization\n- SEO meta fields\n- Publishing controls\n\n### Landing Page Features\n- Page type classification (page/landing)\n- Video background URL support\n- Countdown timer configuration\n- Testimonial relationship management\n- Advanced hero section options\n\n### API Features\n- RESTful endpoint design\n- JWT authentication\n- CORS configuration\n- Pagination support\n- Filtering and search capabilities\n\n## Development\n\n### Adding New Components\n1. Create component in `src/components/`\n2. Import and use in pages\n3. Add TypeScript definitions in `src/types.ts`\n4. Update API functions in `src/lib/api.ts` if needed\n\n### Styling Guidelines\n- Use Tailwind CSS utility classes\n- Global styles in `src/styles/global.css`\n- Component-specific styles in Astro components\n- Responsive design with mobile-first approach\n\n### Performance Optimization\n- Images automatically optimized via Astro\n- Lazy loading implemented\n- Static generation for fast loading\n- CDN-friendly asset structure\n\n## Troubleshooting\n\n### Common Issues\n\n**Build Failures:**\n```bash\n# Clear cache and reinstall\nnpm cache clean --force\nrm -rf node_modules package-lock.json\nnpm install\n```\n\n**API Connection Issues:**\n- Verify `PUBLIC_API_BASE_URL` in environment\n- Check CORS settings on backend\n- Confirm API endpoint URLs\n\n**Component Not Rendering:**\n- Check TypeScript types match API response\n- Verify component props are correctly passed\n- Check browser console for errors\n\n### Windows Development\nIf switching from WSL to Windows:\n1. Reinstall Node.js for Windows\n2. Clear npm cache: `npm cache clean --force`\n3. Delete and reinstall node_modules\n4. Update file paths in any scripts\n\n## API Response Examples\n\n### Page Response\n```json\n{\n  \"id\": 1,\n  \"slug\": \"homepage\",\n  \"title\": \"Welcome to Corrison\",\n  \"page_type\": \"landing\",\n  \"hero_title\": \"Transform Your Business\",\n  \"hero_video_url\": \"https://youtube.com/watch?v=example\",\n  \"show_countdown\": true,\n  \"countdown_target_date\": \"2024-12-31T23:59:59Z\",\n  \"testimonials\": [...]\n}\n```\n\n### Testimonial Response\n```json\n{\n  \"id\": 1,\n  \"name\": \"John Doe\",\n  \"title\": \"CEO\",\n  \"company\": \"Example Corp\",\n  \"content\": \"Corrison transformed our business...\",\n  \"rating\": 5,\n  \"category\": \"business\",\n  \"image\": \"/media/testimonials/john.jpg\"\n}\n```\n\n## Contributing\n\n1. Fork the repository\n2. Create feature branch: `git checkout -b feature-name`\n3. Follow existing code patterns and TypeScript definitions\n4. Test with both regular and landing page types\n5. Submit pull request with clear description\n\n## Scripts Reference\n\n```bash\nnpm run dev      # Start development server\nnpm run build    # Build for production  \nnpm run preview  # Preview production build\nnpm run astro    # Run Astro CLI commands\n```\n\n## Support \u0026 Documentation\n\n- **Frontend Issues**: Open issue in this repository\n- **Backend API**: Contact Corrison API team\n- **Architecture**: See `/architecture` page\n- **Live Examples**: Visit corrisonapi.com and todiane.com\n\n## License\n\nMIT\n\n---\n\n**Developer**: Diane Corriette  \n**Website**: [djangify.com](https://www.djangify.com)  \n**GitHub**: [github.com/djangify](https://github.com/djangify)\n\n## Quick Start Checklist\n\n- [ ] Node.js 18+ installed\n- [ ] Repository cloned and dependencies installed\n- [ ] Environment variables configured\n- [ ] Development server running (`npm run dev`)\n- [ ] API connection tested with corrison.corrisonapi.com\n- [ ] Familiar with page types (regular vs landing)\n- [ ] Production build successful (`npm run build`)\n\n## Recent Updates\n\n### Enhanced Landing Page Features\n- **Video Backgrounds**: Full YouTube and custom video support\n- **Countdown Timers**: Real-time countdown with customizable styling\n- **Advanced Hero**: Multiple CTA buttons, prelaunch badges, scroll indicators\n- **Social Proof**: Integrated testimonial system with star ratings\n- **Page Types**: Clear distinction between regular pages and landing pages\n\n### Testimonial System\n- **Global Management**: Reusable testimonials across multiple pages\n- **Rich Data**: Customer photos, ratings, company information\n- **Flexible Display**: Category filtering and featured testimonial support\n- **API Integration**: Complete CRUD operations via REST API\n\n### Performance Enhancements\n- **Image Optimization**: Automatic image processing and lazy loading\n- **Static Generation**: Optimized build process for fast loading\n- **Component Architecture**: Modular design for maintainability","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdjangify%2Fastro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdjangify%2Fastro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdjangify%2Fastro/lists"}