LeadcodeDev · LeadcodeDev · Feb 23, 2026 · Feb 23, 2026 · Feb 23, 2026 · Feb 23, 2026
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -31,6 +31,9 @@ jobs:
       - name: 📦 Install dependencies
         run: pnpm install
 
+      - name: 🔍 Lint
+        run: pnpm run lint
+
       - name: 🎭 Install Playwright browsers
         run: pnpm exec playwright install --with-deps
 

diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 node_modules/
 dist/
+public/blog/
 .idea
 .vscode
 .DS_Store

diff --git a/README.md b/README.md
@@ -1,48 +1,72 @@
-# Astro Starter Kit: Basics
+# Explainer
 
-```sh
-npm create astro@latest -- --template basics
-```
+A documentation framework built on Astro 5 and React 19. Write your docs in MDX, get a fast static site with built-in search, blog, SEO, and dark mode.
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+## Features
 
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+| Category      | Feature               | Description                                               |
+| ------------- | --------------------- | --------------------------------------------------------- |
+| Documentation | Multi-section docs    | Nested sidebar with collapsible sections and doc switcher |
+| Documentation | Custom MDX directives | `::component{attr="value"}` syntax for rich content       |
+| Documentation | 8+ MDX components     | Callout, Card, Code Group, Code Preview, Step, and more   |
+| Documentation | Mermaid diagrams      | Rendered at build time via rehype-mermaid                 |
+| Blog          | Full blog system      | Tags, drafts, author profiles, publication dates          |
+| Blog          | RSS feed              | Auto-generated at `/rss.xml`                              |
+| Navigation    | Integrated search     | Command palette (Cmd+K) with fuzzy filtering              |
+| Navigation    | Instant transitions   | Astro View Transitions with persistent sidebar            |
+| Navigation    | Breadcrumbs           | Auto-generated page hierarchy                             |
+| Code          | Syntax highlighting   | Shiki dual-theme (light/dark) with 60+ language icons     |
+| Code          | Code transformers     | Diff, line highlight, focus, word highlight, error levels |
+| Theming       | Dark mode             | Light, dark, and system preference with localStorage      |
+| Theming       | Tailwind CSS v4       | OKLCH color system with shadcn/ui components              |
+| SEO           | Meta tags             | Open Graph, Twitter Cards, canonical URLs                 |
+| SEO           | Sitemap               | Auto-generated via @astrojs/sitemap                       |
+| SEO           | OG images             | Auto-generated at build time (Satori + Resvg)             |
+| Accessibility | Standards             | Skip link, prefers-reduced-motion, keyboard navigation    |
+| Accessibility | Custom 404            | Branded error page with navigation links                  |
+| DX            | Linting & formatting  | Biome with strict TypeScript                              |
+| DX            | CI/CD                 | GitHub Actions — lint, build, deploy to Cloudflare Pages  |
+| DX            | Docker                | Multi-stage build with Nginx                              |
 
-![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+## Tech Stack
 
-## 🚀 Project Structure
+Astro 5 / React 19 / MDX / TypeScript / Tailwind CSS v4 / shadcn/ui + Radix UI / Shiki / Biome / Cloudflare Pages
 
-Inside of your Astro project, you'll see the following folders and files:
+## Getting Started
 
-```text
-/
-├── public/
-│   └── favicon.svg
-├── src/
-│   ├── layouts/
-│   │   └── Layout.astro
-│   └── pages/
-│       └── index.astro
-└── package.json
+```sh
+pnpm install
+pnpm dev
 ```
 
-To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
+Open [http://localhost:4321](http://localhost:4321).
+
+| Command         | Action                           |
+| --------------- | -------------------------------- |
+| `pnpm dev`      | Start dev server                 |
+| `pnpm build`    | Build for production (`./dist/`) |
+| `pnpm preview`  | Preview production build         |
+| `pnpm lint`     | Check code with Biome            |
+| `pnpm lint:fix` | Fix linting issues               |
+| `pnpm format`   | Format code with Biome           |
+
+## Configuration
+
+All settings are centralized in `explainer.config.ts` via `defineExplainerConfig()`:
+
+- **Project** — name, repository URL
+- **SEO** — title, description, default thumbnail
+- **Socials** — GitHub, Twitter, LinkedIn links
+- **Blog** — default thumbnail, author profiles
+- **Navbar** — custom navigation links
+- **Content** — MDX component mappings, 60+ language icon mappings
 
-## 🧞 Commands
+## Deployment
 
-All commands are run from the root of the project, from a terminal:
+**Cloudflare Pages** — Automatic via GitHub Actions on push to `main` (lint + build + deploy).
 
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
+**Docker** — `docker build -t explainer . && docker run -p 8080:8080 explainer` (Node 20 Alpine + Nginx 1.28 Alpine).
 
-## 👀 Want to learn more?
+## License
 
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+See [LICENSE](LICENSE) for details.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -16,6 +16,7 @@ import icon from "astro-icon";
 import rehypeMermaid from "rehype-mermaid";
 import remarkBlockParser from "./src/lib/plugins/parser/plugin";
 import remarkDirectivePkg from "remark-directive";
+import remarkStripLayout from "./src/lib/plugins/remark-strip-layout";
 import sitemap from "@astrojs/sitemap";
 import { buildDocIntegration } from "./src/hooks/build-doc";
 import transformerMetaLabel from "./src/lib/plugins/shiki/transformer-meta-label";
@@ -46,7 +47,7 @@ export default defineConfig({
       type: "shiki",
       excludeLangs: ["mermaid"],
     },
-    remarkPlugins: [remarkDirectivePkg, remarkBlockParser],
+    remarkPlugins: [remarkDirectivePkg, remarkBlockParser, remarkStripLayout],
     rehypePlugins: [rehypeMermaid],
   },
 

diff --git a/biome.json b/biome.json
@@ -0,0 +1,40 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignore": ["dist", "node_modules", ".astro", "*.astro"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "noUnusedImports": "warn",
+        "noUnusedVariables": "warn"
+      },
+      "style": {
+        "noNonNullAssertion": "off"
+      },
+      "suspicious": {
+        "noExplicitAny": "warn"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double",
+      "semicolons": "always",
+      "trailingCommas": "all"
+    }
+  }
+}
diff --git a/content/blog/index.mdx b/content/blog/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Blog
 description: Lorem ipsum
+layout: blog-wrapper
 ---
 
 import config from "../../explainer.config";
@@ -16,10 +17,10 @@ import config from "../../explainer.config";
       </h2>
       <p class="text-lg sm:text-xl/8 text-muted-foreground text-pretty font-light mt-6">
         Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem
-        cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.
+        cupidatat commodo. Elit sont amet fugiat veniam occaecat fugiat.
       </p>
     </div>
   </div>
 </div>
 
-::articles
+::articles{perLine=3}
diff --git a/content/blog/welcome.mdx b/content/blog/welcome.mdx
@@ -1,5 +1,5 @@
 ---
-title: Discover Explainer
+title: Discover Explainer fondations and use markdown
 description: "Discover Explainer is a tool that helps you create beautiful, responsive, and accessible web documentation using Astro. It's built with Astro, Tailwind CSS, and TypeScript."
 permalink: welcome
 authors:

diff --git a/content/blog/whats-new-2.0.mdx b/content/blog/whats-new-2.0.mdx
@@ -0,0 +1,157 @@
+---
+title: What's new in Explainer 2.0
+description: "A major update bringing new components, improved navigation, auto-generated thumbnails, and a polished design system."
+permalink: whats-new-2.0
+authors:
+  - leadcode_dev
+publishedAt: "2026-02-23"
+---
+
+# What's new in Explainer 2.0
+
+We're excited to announce a major update to Explainer that brings a host of new features, components, and design improvements. Here's a summary of everything that's changed.
+
+:::callout{variant="info"}
+This release includes breaking changes. If you're upgrading from a previous version, please review each section carefully.
+:::
+
+---
+
+## New landing page
+
+Explainer now ships with a fully designed landing page — ready to use out of the box.
+
+::::card-group
+:::card{title="Hero Section" icon="lucide:sparkles"}
+A bold, animated hero with primary and secondary call-to-action buttons.
+:::
+:::card{title="Features Grid" icon="lucide:layout-grid"}
+Showcase your project's key features in a responsive grid layout.
+:::
+:::card{title="Testimonials" icon="lucide:message-circle"}
+Display user feedback with a clean, rotating testimonial section.
+:::
+:::card{title="Blog Section" icon="lucide:newspaper"}
+Automatically pull your latest blog posts onto the homepage.
+:::
+::::
+
+---
+
+## New MDX components
+
+::::card-group
+:::card{title="Step Groups" icon="lucide:list-ordered"}
+Guide readers through multi-step processes with a clear, numbered layout.
+:::
+:::card{title="Code Previews" icon="lucide:eye"}
+Show live rendered output alongside source code — perfect for documenting UI components.
+:::
+:::card{title="Blockquote" icon="lucide:quote"}
+Styled citations with optional author attribution using the `—` convention.
+:::
+:::card{title="Code Groups" icon="lucide:columns-2"}
+Tabbed code blocks to present multiple files or languages side by side.
+:::
+:::card{title="Card Groups" icon="lucide:layout-grid"}
+Display feature cards in a responsive grid with icons and descriptions.
+:::
+:::card{title="Articles" icon="lucide:newspaper"}
+Embed a blog article listing directly inside your documentation pages.
+:::
+::::
+
+---
+
+## Heading anchor links
+
+All `h2` and `h3` headings now generate clickable anchor links. Hover over any heading to reveal the `#` symbol, click it to update the URL, and share a direct link to that section.
+
+> The best documentation is the one you can link to directly.
+>
+> — The Explainer Team
+
+---
+
+## Improved navigation
+
+::::step-group
+:::step{title="Doc Switcher"}
+A redesigned documentation switcher in the sidebar with descriptions and active state indicators.
+:::
+:::step{title="Navbar Dropdowns"}
+The navbar now supports dropdown menus with icons and descriptions for richer navigation.
+:::
+:::step{title="Full-text Search"}
+The search bar now indexes all documentation content for full-text search across your docs.
+:::
+:::step{title="Previous / Next"}
+Navigate between documentation pages with contextual links at the bottom of each page.
+:::
+::::
+
+---
+
+## Auto-generated thumbnails
+
+Blog posts and documentation pages now get automatically generated Open Graph thumbnails during build. Powered by Satori, each thumbnail features your project's primary color, the page title, and a clean dark design.
+
+:::callout{variant="success"}
+No manual image creation needed — thumbnails are generated at build time and served as static assets.
+:::
+
+---
+
+## Documentation restructuring
+
+The documentation now supports multiple doc collections with a clean switcher. Direct pages at the root of a collection are also supported alongside nested folder structures.
+
+:::codegroup
+
+```txt [Before]
+content/
+  docs/
+    getting-started/
+      installation.mdx
+      configuration.mdx
+```
+
+```txt [After]
+content/
+  docs/
+    framework/
+      getting-started/
+        installation.mdx
+    documentation/
+      demo.mdx
+```
+
+:::
+
+---
+
+## Design polish
+
+:::callout{variant="warning"}
+If you customized the color tokens in your `global.css`, make sure to update them to match the new naming convention.
+:::
+
+| Feature          | Status   |
+| ---------------- | -------- |
+| Landing page     | New      |
+| Step groups      | New      |
+| Code previews    | New      |
+| Blockquote       | New      |
+| Card groups      | New      |
+| Heading anchors  | New      |
+| Doc switcher     | Improved |
+| Navbar dropdowns | Improved |
+| Search           | Improved |
+| Thumbnails       | Improved |
+| Dark mode        | Improved |
+
+---
+
+## Getting started
+
+Ready to try it out? Head over to the [Getting Started](/docs/framework/getting-started/getting-started) guide to set up your own Explainer documentation.
diff --git a/content/docs/documentation/_default.mdx b/content/docs/documentation/_default.mdx
@@ -1,10 +1,9 @@
 ---
-label: Documentation
-directory: documentation
+label: Demo
+directory: demo
 description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-permalink: framework
+permalink: demo
 icon: lucide:cuboid
 collection:
-  - getting-started
-  - foundamentals
+  - demo
 ---