{"id":19306273,"url":"https://github.com/audrbar/cmsblog","last_synced_at":"2026-04-07T20:32:40.224Z","repository":{"id":63913598,"uuid":"495097659","full_name":"audrbar/cmsblog","owner":"audrbar","description":"A modern, full-featured blog application built with Next.js 15 and powered by GraphCMS (Hygraph). Features a responsive design with Tailwind CSS, dynamic content management, and interactive user engagement.","archived":false,"fork":false,"pushed_at":"2025-12-26T20:46:42.000Z","size":1592,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-28T10:49:02.054Z","etag":null,"topics":["graphql","html-react-parser","moment","nextjs","react","react-multi-carousel","sass","swr","tailwind","vercel"],"latest_commit_sha":null,"homepage":"https://jsblogery.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/audrbar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-05-22T15:21:13.000Z","updated_at":"2025-12-26T20:47:34.000Z","dependencies_parsed_at":"2023-01-14T13:30:34.795Z","dependency_job_id":null,"html_url":"https://github.com/audrbar/cmsblog","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/audrbar/cmsblog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/audrbar%2Fcmsblog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/audrbar%2Fcmsblog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/audrbar%2Fcmsblog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/audrbar%2Fcmsblog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/audrbar","download_url":"https://codeload.github.com/audrbar/cmsblog/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/audrbar%2Fcmsblog/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31528464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["graphql","html-react-parser","moment","nextjs","react","react-multi-carousel","sass","swr","tailwind","vercel"],"created_at":"2024-11-10T00:05:16.005Z","updated_at":"2026-04-07T20:32:40.216Z","avatar_url":"https://github.com/audrbar.png","language":"JavaScript","readme":"# CMS Blog\n\nA modern, full-featured blog application built with Next.js 15 and powered by GraphCMS (Hygraph). Features a responsive design with Tailwind CSS, dynamic content management, and interactive user engagement.\n\n## ✨ Features\n\n- 📝 **Dynamic Blog Posts** - Rich content powered by GraphCMS with GraphQL API\n- 🏷️ **Category System** - Organize posts by categories\n- 💬 **Comments System** - User engagement with comment functionality\n- 👤 **Author Profiles** - Detailed author information and bios\n- 🎨 **Featured Posts Carousel** - Showcase highlighted content\n- 📱 **Responsive Design** - Mobile-first approach with Tailwind CSS\n- ⚡ **Static Generation** - Optimized performance with SSG\n- 🔍 **Related Posts Widget** - Smart content recommendations\n- 📅 **Date Formatting** - Beautiful date displays with date-fns\n\n## 🛠️ Tech Stack\n\n- **Framework:** [Next.js 15.5.9](https://nextjs.org/)\n- **React:** 19.0.0\n- **CMS:** GraphCMS (Hygraph) with GraphQL\n- **Styling:** Tailwind CSS 3.4.17\n- **Language:** JavaScript/TypeScript 5.7.2\n- **Date Handling:** date-fns 4.1.0\n- **GraphQL Client:** graphql-request 7.1.2\n- **Carousel:** react-multi-carousel 2.8.5\n\n## 📦 Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd cmsblog\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Set up environment variables**\n\n   Create a `.env` file in the root directory:\n   ```env\n   NEXT_PUBLIC_GRAPHCMS_ENDPOINT=your_graphcms_endpoint\n   GRAPHCMS_TOKEN=your_graphcms_token\n   ```\n\n4. **Run the development server**\n   ```bash\n   npm run dev\n   ```\n\n   Open [http://localhost:3000](http://localhost:3000) in your browser.\n\n## 🚀 Scripts\n\n- `npm run dev` - Start development server\n- `npm run build` - Build for production\n- `npm start` - Start production server\n\n## 📁 Project Structure\n\n```\ncmsblog/\n├── components/          # React components\n│   ├── Author.jsx      # Author profile component\n│   ├── Categories.jsx  # Categories widget\n│   ├── Comments.jsx    # Comments display\n│   ├── CommentsForm.jsx # Comment submission form\n│   ├── FeaturedPostCard.jsx # Featured post card\n│   ├── Header.jsx      # Site header\n│   ├── Layout.jsx      # Main layout wrapper\n│   ├── PostCard.jsx    # Blog post card\n│   ├── PostDetail.jsx  # Full post view\n│   └── PostWidget.jsx  # Related posts widget\n├── pages/              # Next.js pages\n│   ├── api/           # API routes\n│   ├── category/      # Category pages\n│   ├── post/          # Individual post pages\n│   └── index.js       # Homepage\n├── sections/           # Page sections\n│   └── FeaturedPosts.jsx\n├── services/           # API service layer\n│   └── index.js       # GraphQL queries\n├── styles/            # Global styles\n│   └── globals.scss\n└── public/            # Static assets\n```\n\n## 🔧 Configuration\n\n### Next.js Config\n- Modern image optimization with `remotePatterns`\n- React Strict Mode enabled\n- Configured for GraphCMS image hosting\n\n### TypeScript Config\n- Modern module resolution (`bundler`)\n- Strict type checking enabled\n- ES5 target with ESNext modules\n\n## 🎨 Components\n\n### Core Components\n- **Layout** - Main application wrapper with header\n- **PostCard** - Preview card for blog posts\n- **PostDetail** - Full post content with rich text rendering\n- **Categories** - Dynamic category navigation\n- **PostWidget** - Similar/recent posts sidebar\n- **Author** - Author bio and avatar\n- **Comments** - Comment display and management\n- **CommentsForm** - User comment submission\n- **FeaturedPosts** - Carousel of featured content\n\n## 📡 API Routes\n\n### `/api/comments`\nPOST endpoint for submitting new comments\n- Accepts: name, email, comment, slug\n- Uses GraphQL mutation to create comments\n\n## 🌐 GraphQL Integration\n\nThe project uses GraphCMS (Hygraph) as a headless CMS with GraphQL API:\n- Fetches posts, categories, and comments\n- Handles post filtering and relationships\n- Supports featured posts and related content\n\n## 📝 Content Management\n\n1. Set up your GraphCMS project\n2. Create content models for:\n   - Posts (with title, excerpt, content, featured image)\n   - Authors (with name, bio, photo)\n   - Categories\n   - Comments\n3. Configure API access and tokens\n4. Update environment variables\n\n## 🚀 Deployment\n\n### Build for Production\n```bash\nnpm run build\n```\n\n### Deploy to Vercel\nThe easiest way to deploy is using [Vercel](https://vercel.com):\n```bash\nvercel\n```\n\nOr connect your GitHub repository to Vercel for automatic deployments.\n\n\n## 📄 License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n## 🤝 Contributing\n\nContributions, issues, and feature requests are welcome!\n\n## 📧 Contact\n\nFor questions or support, please open an issue in the repository.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faudrbar%2Fcmsblog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faudrbar%2Fcmsblog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faudrbar%2Fcmsblog/lists"}