### Launching Development Server with pnpm - Bash

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/overview/installation/page.mdx

This command starts the local development server for the project, typically making it accessible at `http://localhost:3000`. It enables live reloading and other development features for efficient development.

```bash
pnpm run dev
```

--------------------------------

### Example Default Navigation Structure - TypeScript

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/navigation/page.mdx

This example demonstrates a complete `navigationsData` array, showcasing a typical default navigation setup. It includes multiple sections like 'Dashboards' and 'Pages', with various navigation items, some of which are nested or include optional labels and Lucide icons. This provides a practical reference for implementing a comprehensive navigation menu.

```TypeScript
import type { NavigationType } from "@/types"

export const navigationsData: NavigationType[] = [
  {
    title: "Dashboards",
    items: [
      {
        title: "Analytics",
        href: "/dashboards/analytics",
        iconName: "ChartPie",
      },
      {
        title: "CRM",
        href: "/dashboards/crm",
        iconName: "ChartBar",
      },
      {
        title: "eCommerce",
        href: "/dashboards/ecommerce",
        iconName: "ShoppingCart",
      },
    ],
  },
  {
    title: "Pages",
    items: [
      {
        title: "Landing",
        href: "#",
        label: "Soon",
        iconName: "LayoutTemplate",
      },
      {
        title: "Pricing",
        href: "/pages/pricing",
        iconName: "CircleDollarSign",
      },
      {
        title: "Payment",
        href: "/pages/payment",
        iconName: "CreditCard",
      },
      {
        title: "Help Center",
        href: "#",
        label: "Soon",
        iconName: "Headset",
      },
      {
        title: "Settings",
        href: "/pages/account/settings",
        iconName: "UserCog",
      },
      {
        title: "Profile",
        href: "/pages/account/profile",
        label: "Soon",
        iconName: "User",
      },
      {
        title: "Fallback",
        iconName: "Replace",
        items: [
          {
            title: "Coming Soon",
            href: "/pages/coming-soon",
          },
          {
            title: "Not Found 404",
            href: "/pages/not-found-404",
          },
          {
            title: "Unauthorized 401",
            href: "/pages/unauthorized-401",
          },
          {
            title: "Maintenance",
            href: "/pages/maintenance",
          },
        ],
      },
      {
        title: "Authentication",
        iconName: "LogIn",
        items: [
          {
            title: "Forgot Password",
            href: "/pages/forgot-password",
          },
          {
            title: "New Password",
            href: "/pages/new-password",
          },
          {
            title: "Verify Email",
            href: "/pages/verify-email",
          },
          {
            title: "Register",
            href: "/pages/register",
          },
          {
            title: "Sign In",
            href: "/pages/sign-in",
          },
        ],
      },
    ],
  },
]
```

--------------------------------

### Starting Next.js Development Server - Bash

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/README.md

This snippet provides commands to start the Next.js development server using various package managers. It allows developers to run the application locally for testing and development purposes, typically accessible via `http://localhost:3000`.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Installing Project Dependencies with pnpm - Bash

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/overview/installation/page.mdx

After extracting the project and selecting your preferred version, this command installs all required project dependencies listed in the `package.json` file using pnpm. This must be run from the project's root directory.

```bash
pnpm install
```

--------------------------------

### Running Next.js Development Server - Bash

Source: https://github.com/qualiora/shadboard/blob/main/starter-kit/README.md

This snippet provides commands to start the Next.js development server using various package managers. It allows developers to run the application locally and see changes in real-time as files are edited.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Verifying pnpm Installation - Bash

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/overview/installation/page.mdx

This command checks the installed version of pnpm, confirming that the installation was successful and pnpm is accessible in your system's PATH.

```bash
pnpm --version
```

--------------------------------

### Installing pnpm Globally using npm - Bash

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/overview/installation/page.mdx

This command installs the pnpm package manager globally on your system using npm. pnpm is recommended for efficient management of project dependencies.

```bash
npm install -g pnpm
```

--------------------------------

### Copying Environment Variable Example File (Bash)

Source: https://github.com/qualiora/shadboard/blob/main/CONTRIBUTING.md

This command copies the `.env.example` file to `.env`, which is used for local environment variables. The `.env` file should then be modified with specific configurations for your local setup and must never be committed to version control.

```bash
cp .env.example .env
```

--------------------------------

### Installing NextAuth.js Core Dependencies (pnpm)

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/authentication/page.mdx

Installs the primary packages required for NextAuth.js authentication, including the NextAuth library, Prisma adapter, Prisma client, and Prisma ORM.

```bash
pnpm install next-auth @auth/prisma-adapter @prisma/client prisma
```

--------------------------------

### Installing NextAuth.js Development Dependencies (pnpm)

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/authentication/page.mdx

Installs development-specific dependencies for NextAuth.js, such as type definitions for `picomatch`, which are typically used during development and not in production.

```bash
pnpm install --save-dev @types/picomatch
```

--------------------------------

### Installing Project Dependencies with pnpm (Bash)

Source: https://github.com/qualiora/shadboard/blob/main/CONTRIBUTING.md

This command uses `pnpm` to install all necessary project dependencies. `pnpm` is a fast, disk-space efficient package manager that is recommended for this project.

```bash
pnpm install
```

--------------------------------

### Running the Development Server with pnpm (Bash)

Source: https://github.com/qualiora/shadboard/blob/main/CONTRIBUTING.md

This command starts the local development server for Shadboard using `pnpm`. This allows you to view and test your changes in a browser during development.

```bash
pnpm run dev
```

--------------------------------

### Adding Prisma Migration and Generation Scripts to package.json

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/authentication/page.mdx

Adds `migrate` and `postinstall` scripts to the `package.json` file. The `migrate` script runs Prisma migrations, and `postinstall` automatically generates the Prisma client after dependencies are installed.

```json
"scripts": {
    ...
    "migrate": "pnpm exec prisma migrate dev",
    "postinstall": "pnpm exec prisma generate"
}
```

--------------------------------

### Installing I18n Dependencies (Bash)

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/i18n/page.mdx

Installs core internationalization packages `@formatjs/intl-localematcher` and `negotiator` for locale matching and negotiation. Additionally, it installs `@types/negotiator` as a development dependency to provide TypeScript type definitions for the `negotiator` library.

```bash
pnpm install @formatjs/intl-localematcher negotiator
pnpm install --save-dev @types/negotiator
```

--------------------------------

### Adding a Navigation Item to an Existing Section - TypeScript

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/navigation/page.mdx

This example illustrates how to add a new navigation item under an existing section within the `navigationsData` array. Each item must have a `title`, an `href` for its link, and an `iconName` if it's a root item. This snippet adds a 'Dashboard' link under the 'Dashboards' section.

```TypeScript
export const navigationsData: NavigationType[] = [
  {
    title: "Dashboards",
    items: [
      {
        title: "Dashboard",
        href: "/dashboard",
        iconName: "ChartPie",
      },
    ],
  },
]
```

--------------------------------

### Adding a Nested Navigation Item (Submenu) - TypeScript

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/navigation/page.mdx

This snippet demonstrates how to create a nested navigation item, forming a submenu. It involves adding an `items` array to an existing navigation item, which then contains the sub-items. This example adds a 'Settings' link as a sub-item under the 'Dashboard' item, allowing for hierarchical navigation.

```TypeScript
export const navigationsData: NavigationType[] = [
  {
    title: "Dashboards",
    items: [
      {
        title: "Dashboard",
        iconName: "ChartPie",
        items: [
          {
            title: "Settings",
            href: "/dashboard/settings",
          },
        ],
      },
    ],
  },
]
```

--------------------------------

### Cloning the Shadboard Repository (Bash)

Source: https://github.com/qualiora/shadboard/blob/main/CONTRIBUTING.md

This command clones your forked Shadboard repository from GitHub to your local machine, allowing you to start development. Replace `your-username` with your actual GitHub username.

```bash
git clone https://github.com/your-username/shadboard.git
```

--------------------------------

### Navigating to the Project Directory (Bash)

Source: https://github.com/qualiora/shadboard/blob/main/CONTRIBUTING.md

This command changes the current directory to `full-kit`, which is the main project directory for the complete Shadboard feature set. This is a necessary step before installing dependencies or running the development server.

```bash
cd full-kit
```

--------------------------------

### Example Commit Message (Conventional Commits)

Source: https://github.com/qualiora/shadboard/blob/main/CONTRIBUTING.md

This is an example of a commit message following the Conventional Commits specification. It indicates a new feature (`feat`) related to `components` and describes the change: 'add new prop to the avatar component'.

```text
feat(components): add new prop to the avatar component
```

--------------------------------

### Defining Navigation Data Structure - TypeScript

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/navigation/page.mdx

This snippet illustrates the basic TypeScript structure for defining navigation data. It shows how to create sections with titles and items, including nested items, and specifies properties like `href`, `iconName`, and `label`. This structure serves as a template for organizing application navigation.

```TypeScript
const navigationsData: NavigationType[] = [
  {
    title: "Section Title", // The title of the navigation section (e.g., "Dashboards")
    items: [
      {
        title: "Item Title", // The title of the navigation item
        href: "/some/path", // or "items" for nested items
        iconName: "IconName", // The associated Lucide icon name
        label: "Optional Label", // Optional label (e.g., "New", "Soon")
        items: [
          // For nested items
          {
            title: "Nested Item",
            href: "/nested/path",
          },
        ],
      },
    ],
  },
]
```

--------------------------------

### Defining English Language Dictionary (JSON)

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/i18n/page.mdx

Illustrates the structure of a language dictionary file, specifically `en.json`, used to store localized strings for various UI elements. This example defines translations for user navigation items such as 'Profile', 'Settings', and 'Sign out', demonstrating a nested object structure for organization.

```json
{
  "user-nav": {
    "profile": "Profile",
    "settings": "Settings",
    "sign-out": "Sign out"
  }
}
```

--------------------------------

### Adding a New Root Navigation Section - TypeScript

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/navigation/page.mdx

This snippet demonstrates how to add a new top-level navigation section (root item) to the `navigationsData` array. A root section requires a `title` and an empty `items` array, which will later contain its navigation links or sub-sections. This creates a new main category in the navigation menu.

```TypeScript
export const navigationsData: NavigationType[] = [
  {
    title: "Support",
    items: [],
  },
]
```

--------------------------------

### Example of Modifying Primary Color in CSS

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/theme-color/page.mdx

This CSS snippet provides an example of how to modify the `--primary` color variable. By setting its HSL values to `200 80% 50%`, the primary color of the dashboard will change to a blue tone. This modification should be applied within the `:root` or `.dark` selectors in the `globals.css` file.

```css
--primary: 200 80% 50%;
```

--------------------------------

### Defining Route Map Entry Structure in TypeScript

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/authentication/page.mdx

This snippet illustrates the structure of each entry within the `routeMap`. Each entry consists of a `routePathname` string and an object defining the `type` of access ('guest' or 'public') and an optional `exceptions` array for sub-paths requiring different access rules. This structure guides how route access is configured.

```TypeScript
[routePathname, { type: routeType, exceptions?: string[] }]
```

--------------------------------

### DropdownMenuLabel Before Localization (TSX)

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/i18n/page.mdx

This snippet shows an example of a `DropdownMenuLabel` component with hardcoded text 'language'. It represents the state of a UI element before internationalization has been applied, highlighting the need to replace static strings with dynamic, localized content.

```tsx
<DropdownMenuLabel>language</DropdownMenuLabel>
```

--------------------------------

### Removing Locale Extraction from Middleware (TypeScript)

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/authentication/page.mdx

Deletes code blocks responsible for extracting and handling locale information from the pathname within the middleware, streamlining the logic for non-i18n setups.

```typescript
const locale = getLocaleFromPathname(pathname)
const pathnameWithoutLocale = ensureWithoutPrefix(pathname, `/${locale}`)
```

--------------------------------

### Starter Kit Folder Structure - Plaintext

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/overview/kits/page.mdx

This snippet illustrates the minimalist folder structure of the Next.js Starter Kit. It includes only essential directories and files, providing a clean and flexible foundation for custom application development without unnecessary bloat or pre-built features.

```plaintext
.
├── public/
│   └── images/
├── src/
│   ├── app/
│   │   ├── (dashboard-layout)/
│   │   ├── [...not-found]/
│   │   ├── favicon.ico
│   │   ├── global-error.tsx
│   │   ├── globals.css
│   │   └── layout.tsx
│   ├── components/
│   │   ├── dynamic-icon.tsx
│   │   ├── layout/
│   │   ├── pages/
│   │   └── ui/
│   ├── configs/
│   ├── contexts/
│   ├── data/
│   ├── hooks/
│   ├── lib/
│   ├── providers/
│   └── types.ts
├── .env.example
├── .gitignore
├── .npmrc
├── components.json
├── eslint.config.mjs
├── next-env.d.ts
├── next.config.mjs
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── postcss.config.mjs
├── prettier.config.mjs
├── README.md
└── tsconfig.json
```

--------------------------------

### Generating Prisma Client (pnpm)

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/authentication/page.mdx

Executes the Prisma client generation command using pnpm, which creates the necessary client code based on the `schema.prisma` file, enabling database interactions.

```bash
pnpm exec prisma generate
```

--------------------------------

### Full Kit Folder Structure - Plaintext

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/overview/kits/page.mdx

This snippet displays the comprehensive folder structure of the Next.js Full Kit. It includes additional directories for features like internationalization, authentication, and pre-built pages, designed for sophisticated and scalable applications requiring a broad set of tools out of the box.

```plaintext
.
├── prisma/
│   ├── migrations/
│   └── schema.prisma
├── public/
│   └── images/
├── src/
│   ├── app/
│   │   ├── (unlocalized)/
│   │   │   ├── docs/
│   │   │   └── layout.tsx
│   │   ├── [lang]/
│   │   │   ├── (dashboard-layout)/
│   │   │   ├── (plain-layout)/
│   │   │   ├── [...not-found]
│   │   │   ├── global-error.tsx
│   │   │   └── layout.tsx
│   │   ├── api/
│   │   │   ├── [...nextauth]
│   │   │   └── sign-in/
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   └── themes.css
│   ├── components/
│   │   ├── dynamic-icon.tsx
│   │   ├── auth/
│   │   ├── layout/
│   │   ├── dashboards/
│   │   ├── pages/
│   │   └── ui/
│   ├── configs/
│   ├── contexts/
│   ├── data/
│   ├── hooks/
│   ├── lib/
│   ├── providers/
│   ├── schemas/
│   ├── mdx-components.tsx
│   ├── middleware.ts
│   └── types.ts
├── .env.example
├── .gitignore
├── .npmrc
├── components.json
├── eslint.config.mjs
├── mdx.d.ts
├── next-env.d.ts
├── next.config.mjs
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── postcss.config.mjs
├── prettier.config.mjs
├── README.md
└── tsconfig.json
```

--------------------------------

### Configuring NextAuth.js Environment Variables

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/authentication/page.mdx

Defines essential environment variables for NextAuth.js, including the API URL, the base URL for NextAuth.js, and a secret key used for signing and encrypting tokens.

```env
API_URL=your_api_url
NEXTAUTH_URL=your_nextauth_url
NEXTAUTH_SECRET=your_nextauth_secret
```

--------------------------------

### Importing SourcesAndCreditsTable Component - TypeScript

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/miscellaneous/sources-and-credits/page.mdx

This snippet imports the `SourcesAndCreditsTable` component from a relative path. This component is a crucial dependency for rendering the tabular display of sources and credits on the page.

```TypeScript
import { SourcesAndCreditsTable } from "./_components/sources-and-credits-table"
```

--------------------------------

### Simplifying Middleware Redirect Function (TypeScript)

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/authentication/page.mdx

Updates the `redirect` function within the middleware to remove i18n-specific logic, ensuring it only handles basic URL redirection without locale considerations.

```typescript
function redirect(pathname: string, request: NextRequestWithAuth) {
  const redirectUrl = new URL(pathname, request.url).toString()
  return NextResponse.redirect(redirectUrl)
}
```

--------------------------------

### Creating a New Git Branch (Bash)

Source: https://github.com/qualiora/shadboard/blob/main/CONTRIBUTING.md

This command creates a new Git branch named `my-new-branch` and switches to it. It's crucial to work on a new branch for your contributions to keep the main branch clean and facilitate pull requests.

```bash
git checkout -b my-new-branch
```

--------------------------------

### Updating DashboardLayout Component for I18n (TypeScript)

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/i18n/page.mdx

Modifies the `DashboardLayout` component to fetch the appropriate language dictionary based on the `lang` parameter extracted from the URL. The fetched `dictionary` object, containing localized strings, is then passed as a prop to the child `Layout` component, enabling localized content within the dashboard's structure.

```typescript
import { getDictionary } from "@/lib/getDictionary";

import type { LocaleType } from "@/types";

import { Layout } from "@/components/layout";

export default async function DashboardLayout({
  children,
  params,
}: {
  children: ReactNode;
  params: { lang: LocaleType };
}) {
  const dictionary = await getDictionary(params.lang);

  return <Layout dictionary={dictionary}>{children}</Layout>;
}
```

--------------------------------

### Configuring Route Access Control with routeMap in TypeScript

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/authentication/page.mdx

This snippet defines the `routeMap` in `src/configs/auth-routes.ts`, which specifies access control rules for different application routes. It uses `guest` for unauthenticated access only, `public` for general access, and `exceptions` for specific protected sub-paths within public routes. This map is used by middleware to determine user access and handle redirects.

```TypeScript
import type { RouteType } from "@/types"

export const routeMap = new Map<string, RouteType>([
  ["/sign-in", { type: "guest" }], // Only unauthenticated users can access sign-in
  ["/register", { type: "guest" }], // Only unauthenticated users can access register
  ["/forgot-password", { type: "guest" }], // Only unauthenticated users can access forgot-password
  ["/verify-email", { type: "guest" }], // Only unauthenticated users can access verify-email
  ["/new-password", { type: "guest" }], // Only unauthenticated users can access new-password
  ["/home", { type: "public", exceptions: ["/home/items"] }], // Home is public, but /home/items is protected
  ["/docs", { type: "public" }] // Docs page is public
])
```

--------------------------------

### DropdownMenuLabel After Localization (TSX)

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/i18n/page.mdx

Demonstrates how to update a `DropdownMenuLabel` to display localized content by accessing strings from the `dictionary` prop. It replaces the hardcoded text with a dynamic lookup, `dictionary.navigation.language["language"]`, ensuring the label adapts to the selected language.

```tsx
<DropdownMenuLabel>
  {dictionary.navigation.language["language"]}
</DropdownMenuLabel>
```

--------------------------------

### Updating Layout Component with Dictionary Prop (TypeScript)

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/i18n/page.mdx

Updates the main `Layout` component to accept and utilize the `dictionary` prop, which contains the localized strings for the current language. It conditionally renders either `VerticalLayout` or `HorizontalLayout` based on user settings, ensuring the dictionary is passed down to the chosen layout for further localization.

```typescript
"use client";

import { useSettings } from "@/hooks/use-settings";

import type { ReactNode } from "react"
import type { DictionaryType } from "@/lib/getDictionary";

import { VerticalLayout } from "./vertical-layout";
import { HorizontalLayout } from "./horizontal-layout";

export function Layout({
  children,
  dictionary,
}: {
  children: ReactNode;
  dictionary: DictionaryType;
}) {
  const { settings } = useSettings();
  const isVertical = settings.layout === "vertical";

  return isVertical ? (
    <VerticalLayout dictionary={dictionary}>{children}</VerticalLayout>
  ) : (
    <HorizontalLayout dictionary={dictionary}>{children}</HorizontalLayout>
  );
}
```

--------------------------------

### Updating Dictionary Imports in get-dictionary.ts (TypeScript)

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/i18n/page.mdx

Modifies the `src/lib/get-dictionary.ts` file to dynamically import language-specific JSON dictionaries based on the requested locale. This snippet shows how to map 'en' (English) and 'ar' (Arabic) locales to their respective dictionary files, ensuring the correct language data is loaded at runtime.

```typescript
const dictionaries = {
  en: () =>
    import("@/data/dictionaries/en.json").then((module) => module.default),
  ar: () =>
    import("@/data/dictionaries/ar.json").then((module) => module.default)
}
```

--------------------------------

### Rendering SourcesAndCreditsTable Component - JSX

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/miscellaneous/sources-and-credits/page.mdx

This snippet renders the `SourcesAndCreditsTable` component within the page's structure. As a self-closing JSX tag, it indicates that the component is responsible for its own content display, likely fetching and presenting data related to sources and credits.

```JSX
<SourcesAndCreditsTable />
```

--------------------------------

### Removing I18n Imports from Middleware (JavaScript)

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/authentication/page.mdx

Removes specific import statements related to internationalization (i18n) logic from the `src/middleware.js` file, which is necessary if i18n is not being used in the project.

```javascript
import {
  ensureLocalizedPathname,
  getLocaleFromPathname,
  getPreferredLocale,
  isPathnameMissingLocale,
} from "@/lib/i18n"
```

--------------------------------

### Default Theme Color Variables in globals.css

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/theme-color/page.mdx

This CSS snippet defines the default theme colors for a dashboard, utilizing CSS variables within `:root` for light mode and `.dark` for dark mode. It includes Tailwind CSS directives and a comprehensive set of HSL color values for various UI components like background, foreground, cards, popovers, primary, secondary, muted, accent, destructive, success, border, input, ring, and chart colors, along with sidebar-specific variables.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --success: 142.1 76.2% 36.3%;
    --success-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --sidebar-background: var(--background);
    --sidebar-foreground: var(--foreground);
    --sidebar-primary: var(--primary);
    --sidebar-primary-foreground: var(--primary-foreground);
    --sidebar-accent: var(--accent);
    --sidebar-accent-foreground: var(--accent-foreground);
    --sidebar-border: var(--border);
    --sidebar-ring: var(--ring);
  }

  /* Dark Mode */
  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}
```

--------------------------------

### Removing Locale Redirection Conditional from Middleware (TypeScript)

Source: https://github.com/qualiora/shadboard/blob/main/full-kit/src/app/(unlocalized)/docs/development/authentication/page.mdx

Removes the conditional block that redirects requests if no locale is found, which is part of the process to disable internationalization (i18n) logic in the middleware.

```typescript
if (!locale) {
  return redirect(pathname, request)
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.