update docs

update the docs

docs/src/pages/docs/_meta.json

@@ -1,6 +1,9 @@
 {
   "index": "Installation",
   "page-configuration": "",
-  "theme-configuration": "",
-  "Built-ins": "Built-ins"
+  "configuration": "",
+  "theme":"Theme",
+  "Built-ins": "Built-ins",
+  "deploy":"Deploy",
+  "contributing":"Contributing"
 }

docs/src/pages/docs/deploy.mdx

@@ -0,0 +1,230 @@
+---
+title : Deploy
+---
+
+import { Steps } from 'nextra-theme-docs'
+
+To deploy a section blog theme on Vercel, Netlify, etc., you don't need a special requirement. You can deploy a section blog theme like the usual application.
+
+But when you deploy the section blog theme on the GitHub page, you need GitHub action according to the node package manager. 
+
+## To Deploy on Github Pages
+
+To deploy the section blog theme on **GitHub pages** follow the below step. 
+
+<Steps>
+
+### Add output, basepath and unoptimized in nextjs config file.
+
+```javascript {9-13} filename="next.config.js"
+/** @type {import('next').NextConfig} */
+
+const withNextra = require("nextra")({
+  theme: "section-blog-theme",
+  themeConfig: "./theme.config.jsx",
+});
+
+module.exports = withNextra({
+  output: 'export',
+  basePath: "/your-repostory-name",
+  images:{
+    unoptimized: true
+  }
+}); 
+```
+
+### PNPM 
+If you use PNPM, then use the following code for GitHub action to deploy the nextjs app on the GitHub page.
+
+```yml filename=".github/workflows/deploy-nextjs-app-with-pnpm.yml"
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 8
+          run_install: true
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+        with:
+          static_site_generator: next
+      - name: Static HTML export with Next.js
+        run: pnpm next build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2
+
+```
+
+### Yarn or NPM
+If you use YARN OR NPM, then use the following code for GitHub action to deploy the nextjs app on the GitHub page.
+
+```yaml filename=".github/workflows/deploy-nextjs-app-with-yarn-or-npm.yml"
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager."
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+
+```
+Now push your local code into the GitHub repository and [enable GitHub pages permission](https://medium.com/frontendweb/how-to-deploy-the-next-js-app-router-application-on-github-pages-using-pnpm-54ac72424d80). 
+
+</Steps>

docs/src/pages/docs/page-configuration.mdx

@@ -129,7 +129,7 @@ Show posts related to a tags page.
 
 ![Tags Page](/Tags.png " Tags Page ")
 
-```markdown {2} filename="tags/[slug].mdx"
+```markdown {2} filename="tags/[tag].mdx"
 ---
 type: tag
 ---

docs/src/pages/docs/theme.mdx

@@ -0,0 +1,103 @@
+---
+title : To use 10000+ difference theming in the section blog theme.
+
+---
+
+The section blog theme is based on [Shadcn UI](https://ui.shadcn.com/docs/theming), and Shadcn UI has the functionality to use different themes. 
+Official Shadcn UI has two themes: the first is the default, and the second is the New York theme. 
+
+There are tons of themes available for Shadcn UI on the internet. 
+The [ui.jln.dev](https://ui.jln.dev/) website offers you more than 10000 custom Shadcn UI. You can use different themes in the section blog theme with copy-paste code.
+
+
+
+## How to use the custom theme in the section blog theme?
+
+You can copy any theme on ui.jln.dev website, paste in the global CSS file without **@layer directive**.
+
+```css filename="globals.css"
+    :root {
+      --card: 287 70% 98%;
+      --ring: 287 66% 82%;
+      --input: 220 13% 91%;
+      --muted: 47 39% 88%;
+      --accent: 167 66% 82%;
+      --border: 220 13% 91%;
+      --popover: 287 70% 99%;
+      --primary: 287 66% 82%;
+      --secondary: 47 66% 82%;
+      --background: 287 70% 99%;
+      --foreground: 287 53% 0%;
+      --destructive: 20 81% 21%;
+      --card-foreground: 0 0% 0%;
+      --muted-foreground: 47 0% 36%;
+      --accent-foreground: 167 66% 22%;
+      --popover-foreground: 287 53% 0%;
+      --primary-foreground: 287 66% 22%;
+      --secondary-foreground: 47 66% 22%;
+      --destructive-foreground: 20 81% 81%;
+      --radius: 0.5rem;
+    }
+
+    .dark {
+      --card: 287 55% 4%;
+      --ring: 287 66% 82%;
+      --input: 215 27.9% 16.9%;
+      --muted: 47 39% 12%;
+      --accent: 167 66% 82%;
+      --border: 215 27.9% 16.9%;
+      --popover: 287 55% 3%;
+      --primary: 287 66% 82%;
+      --secondary: 47 66% 82%;
+      --background: 287 55% 3%;
+      --foreground: 287 33% 98%;
+      --destructive: 20 81% 47%;
+      --card-foreground: 287 33% 99%;
+      --muted-foreground: 47 0% 64%;
+      --accent-foreground: 167 66% 22%;
+      --popover-foreground: 287 33% 98%;
+      --primary-foreground: 287 66% 22%;
+      --secondary-foreground: 47 66% 22%;
+      --destructive-foreground: 0 0% 100%;
+    }
+
+```
+
+
+## Why is Dark mode not working with the section blog theme with tailwind CSS?
+If you create your project using create-next-app, then remove the following code from your tailwind globals.css file. It creates conflict with Shadcn UI CSS variables. 
+
+
+```css {5, 7-29} filename="globals.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Remove/uncomment the bellow code. */
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+} 
+
+
+```

docs/src/pages/index.mdx

@@ -14,15 +14,16 @@ The section theme blog supports inbuilt dark mode, a Search bar, Customize Navig
 <br />
 <br />
 
-import { IconMoon, IconSeo, IconCommand, IconLayoutNavbar, IconLayout } from "@tabler/icons-react"
+import { IconMoon, IconSeo, IconCommand, IconLayoutNavbar, IconLayout, IconBrush} from "@tabler/icons-react"
 import { Cards, Card } from 'nextra/components'
 
 <Cards>
       <Card icon={<IconSeo />} title="SEO Support" description="Adding inbuilt  SEO support on your blog" href="#" />
-      <Card icon={<IconMoon />} title="dark mode" description="Switch the blog theme from light to dark" href="#" />
+      <Card icon={<IconMoon />} title="Dark Mode" description="Switch the blog theme from light to dark" href="#" />
       <Card icon={<IconCommand />} title="Inbuilt Search Support" description="Inbuilt rich Search support to search a blog post based on text." href="#" />
-      <Card icon={<IconLayoutNavbar />} title="Navigation" description="Customize your header, footer navigation, and as well social media icon." href="#" />
+      <Card icon={<IconLayoutNavbar />} title="Inbuilt Navigation" description="Customize your header, footer navigation, and as well social media icon." href="#" />
       <Card icon={<IconLayout />} title="Mutiple Layout Support" description="In-built multiple layout support for the home page, regular page, author, author, posts, post, tag, etc." href="#" />
+      <Card icon={<IconBrush />} title="Mutiple Theme Support" description="In-built multiple layout support for the home page, regular page, author, author, posts, post, tag, etc." href="#" />
 </Cards>
 
 ## Submit Issues