i modernize the blog #1
Open
MOHAMED-LAAGUILI wants to merge 28 commits into
Open
Conversation
There was a problem hiding this comment.
Pull request overview
Modernizes the Next.js MDX blog by upgrading the framework/tooling stack (Next.js/Tailwind/ShadCN/Biome/Bun), restructuring layout/components, and replacing the old /blog content with a new /post-based article set plus an About page.
Changes:
- Upgrades core stack (Next.js 16 + MDX config, Tailwind CSS v4/PostCSS updates, Bun + Biome scripts/config).
- Reworks UI/layout (new layout header/footer, theme toggler, shadcn-style UI primitives, post listing with tabs/search/pagination).
- Replaces/expands content (new MDX posts under
app/post/*, removes oldapp/blog/*pages).
Reviewed changes
Copilot reviewed 74 out of 85 changed files in this pull request and generated 15 comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.json | Updates TS/JSX config and includes Next-generated types. |
| tailwind.config.ts | Removes Tailwind config as part of Tailwind v4-style setup shift. |
| README.md | Updates project description and switches commands to Bun. |
| public/window.svg | Removes unused asset. |
| public/vercel.svg | Removes unused asset. |
| public/next.svg | Removes unused asset. |
| public/light-toggle.svg | Removes unused asset (old header theme toggle). |
| public/globe.svg | Removes unused asset. |
| public/file.svg | Removes unused asset. |
| public/dark-toggle.svg | Removes unused asset (old header theme toggle). |
| posts.ts | Replaces post seed data with new article list/categories. |
| postcss.config.mjs | Switches Tailwind v4 PostCSS plugin entrypoint. |
| package.json | Upgrades dependencies; adds shadcn-related packages; switches lint/format tooling to Biome via Bun. |
| next.config.ts | Adjusts MDX integration and page extensions. |
| mdx-components.tsx | Updates MDX components hook implementation. |
| lib/utils.ts | Adds cn() utility for className merging (shadcn convention). |
| eslint.config.mjs | Removes ESLint flat config (Biome appears to replace linting/formatting). |
| data/navigation.ts | Adds navigation model + links. |
| data/github.ts | Adds GitHub profile fetch helper for About page. |
| data/config.ts | Adds basic site config. |
| data/about.ts | Adds About page content model/data. |
| components/ui/tabs.tsx | Adds tabs UI primitive. |
| components/ui/skeleton.tsx | Adds skeleton loading primitive. |
| components/ui/select.tsx | Adds select UI primitive. |
| components/ui/pagination.tsx | Adds pagination UI primitive. |
| components/ui/input.tsx | Adds input UI primitive. |
| components/ui/card.tsx | Adds card UI primitive. |
| components/ui/button.tsx | Adds button UI primitive. |
| components/ui/badge.tsx | Adds badge UI primitive. |
| components/ui/avatar.tsx | Adds avatar UI primitive. |
| components/ui/animated-theme-toggler.tsx | Adds animated theme toggler using View Transitions API. |
| components/Thumbnail.tsx | Enhances post thumbnail/header presentation using new UI primitives. |
| components/ThemeProvider.tsx | Removes old ThemeProvider location. |
| components/SyntaxHighlighter.tsx | Removes Prism-based syntax highlighting component. |
| components/providers/ThemeProvider.tsx | Adds ThemeProvider in new providers folder. |
| components/post/SectionHeading.tsx | Adds section heading component for post lists. |
| components/post/PostsGrid.tsx | Adds grid wrapper for post cards. |
| components/post/PostCardSkeleton.tsx | Adds loading skeleton for post cards. |
| components/post/PostCard.tsx | Adds redesigned post card component. |
| components/post/HeroSection.tsx | Adds “latest posts” hero grid. |
| components/post/CategoryTabs.tsx | Adds client-side category tabs + search + pagination for posts. |
| components/mdx-layout.tsx | Removes old MDX layout. |
| components/layout/mdx-layout.tsx | Adds new MDX layout under components/layout/. |
| components/layout/Header.tsx | Adds new responsive header/nav and theme toggle. |
| components/layout/Footer.tsx | Adds new footer with nav links. |
| components/layout/BackToTop.tsx | Adds back-to-top button. |
| components/Header.tsx | Removes old header implementation. |
| components/Footer.tsx | Removes old footer implementation. |
| components.json | Adds shadcn config metadata. |
| biome.json | Adds Biome configuration. |
| app/post/webstorm-vs-vs-code/page.mdx | Adds new post content under /post. |
| app/post/typescript-vs-javascript/page.mdx | Adds new post content under /post. |
| app/post/tailwind-vs-bootstrap-vs-css-vs-sass/page.mdx | Adds new post content under /post. |
| app/post/reactnative-expo-vs-kotlin-vs-flutter/page.mdx | Adds new post content under /post. |
| app/post/react-vs-next/page.mdx | Adds new post content under /post. |
| app/post/page.tsx | Adds posts index page with search/tabs UI. |
| app/post/npm-vs-pnpm-vs-bun-vs-yarn/page.mdx | Adds new post content under /post. |
| app/post/nodejs-express-vs-laravel/page.mdx | Adds new post content under /post. |
| app/post/morocco-job-platforms/page.mdx | Adds new post content under /post. |
| app/post/freelance-vs-employment/page.mdx | Adds new post content under /post. |
| app/post/firebase-vs-supabase/page.mdx | Adds new post content under /post. |
| app/post/clerk-vs-oauth2/page.mdx | Adds new post content under /post. |
| app/post/claude-code-vs-chatgpt/page.mdx | Adds new post content under /post. |
| app/post/biome-vs-eslint/page.mdx | Adds new post content under /post. |
| app/page.tsx | Rebuilds home page to show latest posts + full post browser UI. |
| app/layout.tsx | Updates root layout: fonts, theme provider location, back-to-top. |
| app/globals.css | Switches to Tailwind v4 @import style and adds design tokens. |
| app/blog/why-typescript-will-transform-your-javascript-development/page.mdx | Removes old /blog post content. |
| app/blog/page.tsx | Removes old /blog index page. |
| app/blog/optimizing-nextjs-applications-for-maximum-performance/page.mdx | Removes old /blog post content. |
| app/blog/mastering-react-hooks-a-comprehensive-guide/page.mdx | Removes old /blog post content. |
| app/blog/machine-learning-a-beginners-roadmap/page.mdx | Removes old /blog post content. |
| app/blog/green-coding-building-environmentally-conscious-web-applications/page.mdx | Removes old /blog post content. |
| app/blog/getting-started-with-web-development-in-2024/page.mdx | Removes old /blog post content. |
| app/blog/cybersecurity-in-2024-protecting-your-digital-assets/page.mdx | Removes old /blog post content. |
| app/blog/css-grid-modern-layout-techniques-for-responsive-design/page.mdx | Removes old /blog post content. |
| app/blog/cloud-computing-architecture-and-services-explained/page.mdx | Removes old /blog post content. |
| app/blog/blockchain-beyond-cryptocurrency-real-world-applications/page.mdx | Removes old /blog post content. |
| app/blog/abc-efg/page.mdx | Removes old /blog post content. |
| app/about/page.tsx | Adds About page with GitHub-backed profile enrichment. |
| .opencode/skills/caveman/SKILL.md | Adds agent skill documentation file. |
| .agents/skills/caveman/SKILL.md | Adds agent skill documentation file. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+51
to
+52
| const Comp = asChild ? Slot.Root : "button"; | ||
|
|
Comment on lines
+2
to
+3
| import { Slot } from "radix-ui"; | ||
| import type * as React from "react"; |
Comment on lines
+33
to
+34
| const Comp = asChild ? Slot.Root : "span"; | ||
|
|
Comment on lines
+2
to
+3
| import { Slot } from "radix-ui"; | ||
| import * as React from "react"; |
Comment on lines
+3
to
+5
| import { cva, type VariantProps } from "class-variance-authority"; | ||
| import { Tabs as TabsPrimitive } from "radix-ui"; | ||
| import * as React from "react"; |
Comment on lines
+35
to
+39
| <Link href={`/post/${post.slug}`} className="block"> | ||
| <Card className="group overflow-hidden rounded-xl border py-0 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"> | ||
| <div className="relative aspect-16/10 overflow-hidden"> | ||
| <Image | ||
| src={post.thumbnail} |
Comment on lines
+6
to
+8
| <Card className="overflow-hidden rounded-xl border py-0"> | ||
| <div className="relative aspect-16/10"> | ||
| <Skeleton className="absolute inset-0 rounded-none" /> |
Comment on lines
3
to
9
| const components: MDXComponents = {}; | ||
|
|
||
| export function useMDXComponents(): MDXComponents { | ||
| return { | ||
| ...components, | ||
| }; | ||
| } |
Comment on lines
+1
to
+5
| @import "tailwindcss"; | ||
| @import "tw-animate-css"; | ||
| @import "shadcn/tailwind.css"; | ||
|
|
||
| @custom-variant dark (&:is(.dark *)); |
| # How to Build an MDX Blog with Next.js 16 | ||
|
|
||
| A Blog app built using Next.js 15, MDX (markdown), Prismjs and Tailwind CSS,. This app is static site that renders the markdown posts. | ||
| A Blog app built using Next.js 16, MDX (markdown), Prismjs and Tailwind CSS 4 and ShadCN UI,. This app is static site that renders the markdown posts. |
Author
|
here is the demo : https://mo-blog-rose.vercel.app |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
demo: https://mo-blog-rose.vercel.app/