Next.js toolkit for ablaze

This is a Next.js toolkit for ablaze. It makes creating websites with the same look and feel for Ablaze easy.

Getting Started

Steps overview

Add the submodule to your repository
Install the required packages
Add the toolkit path to your tailwind.config.[js|ts] file
[Optional] Add the path to the tsconfig.json file
[Optional] Copy the globals.css file to your project

Step 1: Add the submodule to your repository

Add the submodule to your repository:

# Using https
git submodule add https://github.com/Ablaze-MIRAI/nextjs-toolkit.git ./toolkit

# Or using ssh
git submodule add [email protected]:Ablaze-MIRAI/nextjs-toolkit.git ./toolkit

Notes

If you use https, then it will prompt you to log in with your GitHub account, because the repository is private. If you use ssh, then you need to have your ssh key added to your GitHub account.

Step 2: Install the required packages

# Using npm
npm i sonner ai novel @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-popover @radix-ui/react-scroll-area @radix-ui/react-separator @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-tooltip clsx cmdk framer-motion lucide-react next-themes react-aria react-stately react-use-measure tailwind-merge tailwindcss-animate class-variance-authority

# Or using yarn
yarn add sonner ai novel @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-popover @radix-ui/react-scroll-area @radix-ui/react-separator @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-tooltip clsx cmdk framer-motion lucide-react next-themes react-aria react-stately react-use-measure tailwind-merge tailwindcss-animate class-variance-authority

# Or using pnpm
pnpm add sonner ai novel @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-popover @radix-ui/react-scroll-area @radix-ui/react-separator @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-tooltip clsx cmdk framer-motion lucide-react next-themes react-aria react-stately react-use-measure tailwind-merge tailwindcss-animate class-variance-authority

Step 3: Add the toolkit path to your `tailwind.config.[js|ts]` file

This is important, because, if you forget to do this, then the toolkit will not work. Your current tailwind styles won't be applied to the toolkit components.

// tailwind.config.js
const config = {
  // ...
  content: [
    // ...
    './toolkit/**/*.{ts,tsx}',
    // ...
  ]
  // ...
}

Step 4: [Optional] Add the path to the `tsconfig.json` file

You will have an easier time importing the toolkit components if you add the path to the tsconfig.json file.

You have two options:

The first is easier to set up, but it will be a bit harder to maintain. (You will add only the root path to the toolkit, and then you will have to import the components like this: import { Button } from '@toolkit/components/ui/button'.)
The second is a bit harder to set up, but it will be easier to maintain. (You will add the sub paths separately, and then you will be able to import the components like this: import { Button } from '@toolkit/button'.)

Option 1: Add the root path to the `tsconfig.json` file

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@toolkit/*": [
        "./toolkit/*"
      ]
    }
  }
}

Option 2: Add the sub paths to the `tsconfig.json` file

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/toolkit/components/*": [
        "./toolkit/components/ui/*",
        "./toolkit/components/layout/*",
        "./toolkit/components/custom/*",
        "./toolkit/components/markdown/*",
        "./toolkit/components/*",
        "./toolkit/helpers/*"
      ],
      "@/toolkit/lib/*": [
        "./toolkit/lib/*"
      ],
      "@/toolkit/i18n/*": [
        "./toolkit/i18n/*"
      ],
      "@/toolkit/*": [
        "./toolkit/*"
      ],
      "@/toolkit/auth/*": [
        "./auth/*"
      ],
      "@/toolkit/styles/*": [
        "./styles/*"
      ]
    }
  }
}

Step 5: [Optional] Copy the `globals.css` file to your project

This file contains the global styles for ablaze.

Copy it anywhere in your project and import it in your layout.tsx file.

// layout.tsx
import '@toolkit/styles/[ablaze|floorp]/globals.css'

Advanced Usage

Auth

Install the required packages:

# Using npm
npm i next-auth @octokit/core

# Or using yarn
yarn add next-auth @octokit/core

# Or using pnpm
pnpm add next-auth @octokit/core

You can check for the allowed users like:

import {isUserInOrg, isWhitelisted, isUserAllowed} from '@toolkit/auth/utils'

const allowedOrgs = ["Ablaze-MIRAI"]
// The email is the user's email, and the account is the next-auth account object.
const inOrg = isUserInOrg(allowedOrgs, email, account);

const allowedEmails = ["[email protected]"]
const whitelisted = isWhitelisted(allowedEmails, email);

const allowed = isUserAllowed(allowedOrgs, allowedEmails, email, account);

joshika39 / nextjs-toolkit Goto Github PK

nextjs-toolkit's Introduction

Next.js toolkit for ablaze

Getting Started

Steps overview

Step 1: Add the submodule to your repository

Notes

Step 2: Install the required packages

Step 3: Add the toolkit path to your tailwind.config.[js|ts] file

Step 4: [Optional] Add the path to the tsconfig.json file

Option 1: Add the root path to the tsconfig.json file

Option 2: Add the sub paths to the tsconfig.json file

Step 5: [Optional] Copy the globals.css file to your project

Advanced Usage

Auth

nextjs-toolkit's People

Contributors

Stargazers

nextjs-toolkit's Issues

Recommend Projects

Recommend Topics

Recommend Org

Step 3: Add the toolkit path to your `tailwind.config.[js|ts]` file

Step 4: [Optional] Add the path to the `tsconfig.json` file

Option 1: Add the root path to the `tsconfig.json` file

Option 2: Add the sub paths to the `tsconfig.json` file

Step 5: [Optional] Copy the `globals.css` file to your project