{"id":49178707,"url":"https://github.com/al-husayn/blog","last_synced_at":"2026-04-23T00:03:17.059Z","repository":{"id":314355014,"uuid":"1051492602","full_name":"al-husayn/blog","owner":"al-husayn","description":"A modern, responsive blog built with Next.js 15, Fumadocs MDX, and Tailwind CSS. Beautiful interface for displaying articles, tutorials, and insights about React and modern web development.","archived":false,"fork":false,"pushed_at":"2026-04-13T02:21:18.000Z","size":11373,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-13T04:19:06.912Z","etag":null,"topics":["angular","es6","fumadocs-mdx","javascript","mdx","nextjs","react","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://blog.al-husayn.dev/","language":"MDX","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/al-husayn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"buy_me_a_coffee":"atldrake53i"}},"created_at":"2025-09-06T05:25:53.000Z","updated_at":"2026-04-03T06:00:52.000Z","dependencies_parsed_at":"2026-04-03T08:03:16.735Z","dependency_job_id":null,"html_url":"https://github.com/al-husayn/blog","commit_stats":null,"previous_names":["al-husayn/blog"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/al-husayn/blog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/al-husayn%2Fblog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/al-husayn%2Fblog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/al-husayn%2Fblog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/al-husayn%2Fblog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/al-husayn","download_url":"https://codeload.github.com/al-husayn/blog/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/al-husayn%2Fblog/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32159964,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-22T17:06:48.269Z","status":"ssl_error","status_checked_at":"2026-04-22T17:06:19.037Z","response_time":58,"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":["angular","es6","fumadocs-mdx","javascript","mdx","nextjs","react","reactjs","typescript"],"created_at":"2026-04-23T00:03:14.264Z","updated_at":"2026-04-23T00:03:17.041Z","avatar_url":"https://github.com/al-husayn.png","language":"MDX","funding_links":["https://buymeacoffee.com/atldrake53i"],"categories":[],"sub_categories":[],"readme":"# Learn. Build. Share.\n\nA modern technical blog built with Next.js 15, Fumadocs MDX, Tailwind CSS, Clerk, Neon, Drizzle, and TanStack Query. It includes article pages, SEO metadata, an embedded AI assistant, and a synced engagement system with article upvotes, comments, and comment upvotes.\n\n## Highlights\n\n- Next.js 15 App Router blog with MDX-powered content\n- Automatic read-time generation for every post\n- Embedded article-aware AI assistant\n- Clerk-authenticated engagement system\n- Private admin analytics dashboard with first-party article tracking\n- TanStack Query-powered client caching, syncing, and optimistic engagement updates\n- Neon Postgres persistence through Drizzle ORM\n- Responsive UI, dark mode, RSS, sitemap, and Open Graph images\n\n## Tech Stack\n\n- Next.js 15\n- React 19\n- TypeScript\n- Fumadocs MDX\n- Tailwind CSS 4\n- TanStack Query\n- Clerk\n- Neon Postgres\n- Drizzle ORM and Drizzle Kit\n- OpenRouter or any OpenAI-compatible inference endpoint\n\n## Client Data Layer\n\nTanStack Query is used for client-side server state, especially around engagement features such as article upvotes, comments, and comment upvotes.\n\n- A shared `QueryClient` is created in `components/query-provider.tsx`.\n- Engagement queries and mutations are organized in `lib/hooks/use-engagement.ts`.\n- Comment tree update helpers live in `lib/engagement-client.ts`.\n- Current defaults use a 30 second `staleTime`, a 5 minute `gcTime`, background refetching on window focus and reconnect, and optimistic mutation updates for engagement interactions.\n\n## Prerequisites\n\n- Node.js 20.9 or newer\n- pnpm 10 or newer\n\n## Getting Started\n\n1. Clone the repository and install dependencies.\n\n```bash\ngit clone https://github.com/al-husayn/blog\ncd blog\npnpm install\n```\n\n2. Create a `.env.local` file and add the values your environment needs.\n\n```bash\nNEXT_PUBLIC_SITE_URL=http://localhost:3000\nDATABASE_URL=postgres://user:password@host/dbname?sslmode=require\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_your_publishable_key\nCLERK_SECRET_KEY=sk_test_your_secret_key\nADMIN_USER_IDS=user_123,user_456\nADMIN_EMAILS=admin@example.com\nAI_API_BASE_URL=https://openrouter.ai/api/v1\nAI_API_KEY=your_cloud_api_key_here\nAI_MODEL=openrouter/free\n```\n\n3. Sync the database schema.\n\n```bash\npnpm db:push\n```\n\n4. Start the development server.\n\n```bash\npnpm dev\n```\n\n5. Build for production when needed.\n\n```bash\npnpm build\n```\n\n## Environment Variables\n\n### Core\n\n- `NEXT_PUBLIC_SITE_URL`: Public site URL used for local and deployed metadata.\n\n### Database and Auth\n\n- `DATABASE_URL`: Neon Postgres connection string.\n- `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`: Clerk publishable key for client auth.\n- `CLERK_SECRET_KEY`: Clerk secret key for server auth.\n- `ADMIN_USER_IDS`: Comma-separated Clerk user IDs allowed to access `/admin`.\n- `ADMIN_EMAILS`: Comma-separated email addresses allowed to access `/admin` (case-insensitive).\n\n### AI Assistant\n\n- `AI_API_BASE_URL`: OpenAI-compatible base URL. The default setup uses OpenRouter.\n- `AI_API_KEY`: Provider API key.\n- `AI_MODEL`: Model identifier used by the blog assistant.\n\n## Database and Engagement\n\nThe engagement system is backed by Neon and Drizzle and is tied to Clerk authentication.\n\n- Article likes and dislikes have been removed.\n- Article upvotes are persisted per signed-in user.\n- Comments are persisted and linked to the authenticated Clerk user.\n- Comment upvotes are persisted per signed-in user.\n- The schema is aligned with the live engagement tables: `article_comments`, `article_upvotes`, and `comment_upvotes`.\n- The analytics dashboard stores article page views and share events in `article_page_views` and `article_share_events`.\n\n## Admin Analytics Dashboard\n\nVisit `/admin` after signing in with a Clerk user ID listed in `ADMIN_USER_IDS` or an email address listed in `ADMIN_EMAILS`.\n\nThe dashboard includes:\n\n- 7d, 30d, 90d, and all-time pageviews\n- Unique visitors and new vs returning reader ratios\n- Top posts by 30d and all-time views\n- Traffic source attribution for direct, organic, social, and referrals\n- Average engaged time, bounce rate, and scroll depth completion\n- Organic search trend lines and top referrer keywords when available\n- Share tracking and first-48-hour comment velocity\n\nArticle analytics are collected with lightweight first-party tracking on blog post pages and the built-in share controls.\n\nUseful commands:\n\n```bash\npnpm db:generate\npnpm db:migrate\npnpm db:push\npnpm db:studio\n```\n\nThe Drizzle config reads `DATABASE_URL` from `.env.local` or `.env`, so `pnpm db:push` works outside the Next.js runtime as well.\n\n## AI Assistant\n\nEach article page includes an assistant that is grounded in the active post content. By default, the project is configured for OpenRouter, but any OpenAI-compatible provider can be used by updating `AI_API_BASE_URL` and `AI_MODEL`.\n\nIf your chosen model or route changes, restart the dev server after updating environment variables.\n\n## Writing Posts\n\nCreate a new `.mdx` file inside `blog/content/`.\n\nExample frontmatter:\n\n```mdx\n---\ntitle: 'Your Blog Post Title'\ndescription: 'A brief description of your post'\ndate: '2026-03-17'\ntags: ['JavaScript', 'Next.js', 'Tutorial']\nfeatured: true\nauthor: 'al'\nthumbnail: '/blog/example-cover.png'\n---\n\nYour blog post content here...\n```\n\nNotes:\n\n- `author` should be an author key from `lib/authors.ts`, not a display name.\n- `readTime` is generated automatically from the MDX content.\n- Read times are regenerated during `pnpm dev`, `pnpm build`, and with `pnpm run readtime`.\n\n## Authors\n\nAuthor records live in `lib/authors.ts`.\n\nCurrent built-in keys:\n\n- `al`\n- `al-hussein`\n- `hamdan`\n\nAdd a new author there, then reference that key in your post frontmatter.\n\n## Scripts\n\n- `pnpm dev`: Generate read times, compile MDX sources, and start the dev server.\n- `pnpm build`: Generate read times, compile MDX sources, and build the app.\n- `pnpm start`: Start the production server.\n- `pnpm lint`: Run Next.js linting.\n- `pnpm readtime`: Regenerate `lib/generated/read-times.json`.\n- `pnpm db:generate`: Generate Drizzle migration files from the schema.\n- `pnpm db:migrate`: Run Drizzle migrations.\n- `pnpm db:push`: Push the current schema to the database.\n- `pnpm db:studio`: Open Drizzle Studio.\n\n## Project Notes\n\n- The site includes RSS, sitemap, metadata, and Open Graph image generation.\n- Engagement routes live under `app/api/engagement`.\n- Client-side engagement state is cached and synchronized through TanStack Query.\n- If Clerk keys are missing, the site still renders, but synced engagement features remain unavailable until auth is configured.\n\n## License\n\nThis project is open source and available under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fal-husayn%2Fblog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fal-husayn%2Fblog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fal-husayn%2Fblog/lists"}