",
+ " $0",
+ "
",
+ " Auto Create Branch | 
Auto Resolve | + | :--: | :--: | + + You have to install the app for your organization/account/repository from the [GitHub Marketplace](https://github.com/marketplace/create-issue-branch) for this to work. + + The branch will be created on **assign** with format `i${number}-${issue_title_lowercase}`. + +- #### Custom Tailwind CSS Class Sorter + + Classes are sorted using [prettier-plugin-sort-class-names](https://github.com/PutziSan/prettier-plugin-sort-class-names) with custom class order on [this file](https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/blob/main/prettier-plugin-sort-class-names-order) and custom variant order on [prettierrc](https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/blob/main/.prettierrc.js) + + With this plugin, we can now safely check the order of the classes using the preconfigured lint action. + +## 0.2.0 - 2021-11-10 + +### New Features + +- #### Jest + + Jest is configured and will be run every push on Github Actions + +- #### Lint Github Action + + 1. **ESLint** - will fail if there are any warning and error. + 2. **Type Check** - will fail on `tsc` error. + 3. **Prettier Check** - will fail if there are any formatting error. + 4. **Test** - will fail if there are any test failure. + +## 0.1.0 + +### New Features + +- #### Installed Packages + + 1. [clsx](https://bundlephobia.com/package/clsx@latest), utility for constructing `className` strings conditionally. + 2. [react-icons](https://bundlephobia.com/package/react-icons@latest), svg react icons of popular icon packs. + +- #### UnstyledLink Component + + Used as a component for Next.js Link. Will render out Next/Link if the href started with `/` or `#`, else will render an `a` tag with `target='_blank'`. Also add a cursor style for outside links + +- #### CustomLink Component + +  + + +- #### Absolute Import + + You can import without using relative path + + ```tsx + import Nav from '../../../components/Nav'; + + simplified to + + import Nav from '@/components/Nav'; + ``` + +- #### Seo Component + + Configure the default in `src/components/Seo.tsx`. If you want to use the default, just add `
+
+
+## Features
+
+This repository is đ battery packed with:
+
+- âĄď¸ Next.js 14 with App Router
+- âď¸ React 18
+- ⨠TypeScript
+- đ¨ Tailwind CSS 3 â Configured with CSS Variables to extend the **primary** color
+- đ Pre-built Components â Components that will **automatically adapt** with your brand color, [check here for the demo](https://tsnext-tw.thcl.dev/components)
+- đ Jest â Configured for unit testing
+- đ Absolute Import and Path Alias â Import components using `@/` prefix
+- đ ESLint â Find and fix problems in your code, also will **auto sort** your imports
+- đ Prettier â Format your code consistently
+- đś Husky & Lint Staged â Run scripts on your staged files before they are committed
+- đ¤ Conventional Commit Lint â Make sure you & your teammates follow conventional commit
+- â° Release Please â Generate your changelog by activating the `release-please` workflow
+- đˇ Github Actions â Lint your code on PR
+- đ Automatic Branch and Issue Autolink â Branch will be automatically created on issue **assign**, and auto linked on PR
+- đĽ Snippets â A collection of useful snippets
+- đ Open Graph Helper Function â Awesome open graph generated using [og](https://github.com/theodorusclarence/og), fork it and deploy!
+- đş Site Map â Automatically generate sitemap.xml
+- đŚ Expansion Pack â Easily install common libraries, additional components, and configs.
+
+See the đ [feature details and changelog](https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/blob/main/CHANGELOG.md) đ for more.
+
+You can also check all of the **details and demos** on my blog post:
+
+- [One-stop Starter to Maximize Efficiency on Next.js & Tailwind CSS Projects](https://theodorusclarence.com/blog/one-stop-starter)
+
+## Getting Started
+
+### 1. Clone this template using one of the three ways
+
+1. Use this repository as template
+
+ **Disclosure:** by using this repository as a template, there will be an attribution on your repository.
+
+ I'll appreciate if you do, so this template can be known by others too đ
+
+ 
+
+2. Using `create-next-app`
+
+ ```bash
+ pnpm create next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter ts-pnpm
+ ```
+
+ If you still want to use **pages directory** (_is not actively maintained_) you can use this command
+
+ ```bash
+ npx create-next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/tree/pages-directory project-name
+ ```
+
+3. Using `degit`
+
+ ```bash
+ npx degit theodorusclarence/ts-nextjs-tailwind-starter YOUR_APP_NAME
+ ```
+
+4. Deploy to Vercel
+
+ [](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Ftheodorusclarence%2Fts-nextjs-tailwind-starter)
+
+### 2. Install dependencies
+
+It is encouraged to use **pnpm** so the husky hooks can work properly.
+
+```bash
+pnpm install
+```
+
+### 3. Run the development server
+
+You can start the server using this command:
+
+```bash
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `src/pages/index.tsx`.
+
+### 4. Change defaults
+
+There are some things you need to change including title, urls, favicons, etc.
+
+Find all comments with !STARTERCONF, then follow the guide.
+
+Don't forget to change the package name in package.json
+
+### 5. Commit Message Convention
+
+This starter is using [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/), it is mandatory to use it to commit changes.
+
+## Projects using ts-nextjs-tailwind-starter
+
+
+
+- [theodorusclarence.com](https://theodorusclarence.com) ([Source](https://github.com/theodorusclarence/theodorusclarence.com))
+- [Notiolink](https://notiolink.thcl.dev/) ([Source](https://github.com/theodorusclarence/notiolink))
+- [NextJs + Materia UI + Typescript](https://github.com/AlexStack/nextjs-materia-mui-typescript-hook-form-scaffold-boilerplate-starter)
+
+Are you using this starter? Please add your page (and repo) to the end of the list via a [Pull Request](https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/edit/main/README.md). đ
+
+## Expansion Pack đŚ
+
+This starter is now equipped with an [expansion pack](https://github.com/theodorusclarence/expansion-pack).
+
+You can easily add expansion such as React Hook Form + Components, Storybook, and more just using a single command line.
+
+đ ts-nextjs-tailwind-starter
+Next.js + Tailwind CSS + TypeScript starter packed with useful development features.
+Made by Theodorus Clarence
+ +[](https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/stargazers) +[](https://depfu.com/github/theodorusclarence/ts-nextjs-tailwind-starter?project_id=30160) +[](https://shields.io/) + +
+
+ Back to Home
+
+
+
+ Built-in Components
+
+
+ {/* */}
+
+
+ -
+
-
+
Customize Colors
++ You can change primary color to any Tailwind CSS colors. See + globals.css to change your color. +
++ +++ Check list of colors + ++++ 50 +++ 100 +++ 200 +++ 300 +++ 400 +++ 500 +++ 600 +++ 700 +++ 800 +++ 900 +++ 950 ++
+ -
+
UnstyledLink
++ No style applied, differentiate internal and outside links, give + custom cursor for outside links. +
+++Internal Links ++ Outside Links + +
+ -
+
PrimaryLink
++ Add styling on top of UnstyledLink, giving a primary color to + the link. +
+++Internal Links ++ Outside Links + +
+ -
+
UnderlineLink
++ Add styling on top of UnstyledLink, giving a dotted and animated + underline. +
+++Internal Links ++ Outside Links + +
+ -
+
ArrowLink
++ Useful for indicating navigation, I use this quite a lot, so why + not build a component with some whimsy touch? +
++++ Direction Left + +Direction Right ++ Polymorphic + ++ Polymorphic + +
+ -
+
ButtonLink
++ Button styled link with 3 variants. +
++++ Primary Variant + ++ Outline Variant + ++ Ghost Variant + ++ Dark Variant + ++ Light Variant + +
+ -
+
Button
++ Ordinary button with style. +
++ + + + + +++ + + + + +++ + + + + +++ + + + + + ++ ++ + + + + +++ + + + + ++
+ -
+
TextButton
++ Button with a text style +
+++Primary Variant +Basic Variant +
+ -
+
IconButton
++ Button with only icon inside +
++++ + + + +
+ -
+
Custom 404 Page
++ Styled 404 page with some animation. +
+++Visit the 404 page +
+ -
+
Next Image
++ Next Image with default props and skeleton animation +
++
+ -
+
Skeleton
++ Skeleton with shimmer effect +
++
+
+
+ Try again
+
+
+ + Oops, something went wrong! +
+
+
+ See all components
+
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
+
+
+
+ Next.js + Tailwind CSS + TypeScript Starter
++ A starter for Next.js, Tailwind CSS, and TypeScript with Absolute + Import, Seo, Link component, pre-configured with Husky{' '} +
+
+
+
+ )}
+ {children}
+ {RightIcon && (
+
+
+ )}
+