| <!-- //!STARTERCONF Remove this file, this is used as the starter changelog --> | |
| # ts-nextjs-tailwind-starter changelog | |
| This changelog is manually generated and not accurate with the package.json, only to show the changes since the last release. | |
| ## 0.5.4 - 2022-07-22 | |
| ### New Features | |
| - #### Release Please | |
| Standard Version is now deprecated, and ts-nextjs-tailwind-starter is now using release please. Activate them on `.github/workflows/release-please` | |
| ### Improvements & Bug Fixes | |
| - #### More Efficient Lint Actions | |
| Lint workflow is now cached and will cancel previous run if there are 2 concurrent runs. | |
| ## 0.5.3 - 2022-02-27 | |
| ### New Features | |
| - #### Shimmer for NextImage and Skeleton | |
| Addition of shimmer & blur placeholder for NextImage, and new Skeleton Component with shimmer effect. | |
| https://user-images.githubusercontent.com/55318172/155867729-8c3176ad-ede4-4443-b42b-780517615e5a.mp4 | |
| - #### Support for SVGR | |
| You can directly import SVG like | |
| ```tsx | |
| import Vercel from '~/svg/Vercel.svg'; | |
| <Vercel className='text-5xl' /> | |
| ``` | |
| - #### Public Folder Path Mapping | |
| Easily access public folder with `~/` prefix. | |
| - #### Tailwind CSS Prettier Sorter | |
| ts-nextjs-tailwind-starter now use first-party plugin `prettier-plugin-tailwindcss` | |
| ### Improvements & Bug Fixes | |
| - #### Layout Declared Twice | |
| Fix issue where adding elements to Layout ends up rendering them twice | |
| - #### ESLint Curly Brace Rule | |
| New autofixable rule | |
| ```tsx | |
| props={'hi'} | |
| will become | |
| props='hi' | |
| ``` | |
| ## 0.5.2 - 2021-12-30 | |
| ### New Features | |
| - #### New Component: PrimaryLink | |
| Add a link component with accent color on top of UnstyledLink. | |
| ### Improvements & Bug Fixes | |
| - #### Unused Import ESlint Autofix | |
| Unused import will automatically be removed by the ESlint autofix. | |
| - #### Renamed CustomLink to UnderlineLink | |
| This is to compensate the new PrimaryLink component | |
| - #### Primary Button & ButtonLink Shade | |
| The shade of the button is now using the `500` instead of `400`. | |
| ## 0.5.1 - 2021-12-26 | |
| ### New Features | |
| - #### New Snippets Wrap: clsx and fragment `<></>` | |
| You can select text then wrap it with clsx or React.Fragment shorthand. | |
| https://user-images.githubusercontent.com/55318172/147401848-3db5dba0-ef71-4f25-9f47-c7908beba69e.mp4 | |
| ## 0.5.0 - 2021-12-21 | |
| ### New Features | |
| - #### Expansion Pack | |
| You can easily add expansion such as React Hook Form + Components, Storybook, and more just using a single command line. | |
| https://user-images.githubusercontent.com/55318172/146631994-e1cac137-1664-4cfe-950b-a96decc1eaa6.mp4 | |
| Check out the [expansion pack repository](https://github.com/theodorusclarence/expansion-pack) for the commands | |
| ### Improvements & Bug Fixes | |
| - #### Can't Use Layout Fill on NextImage | |
| Using layout fill will make the width and height optional | |
| - #### Vertically center Button & ButtonLink | |
| Adds `items-center` to make the button vertically centered | |
| ## 0.4.1 - 2021-12-12 | |
| ### New Features | |
| - #### Tailwind CSS v3 | |
| The color palette configuration is also updated accordingly. | |
| ## 0.4.0 - 2021-12-02 | |
| ### New Features | |
| - #### Button & ButtonLink Variants | |
| - New Variant: **Outline** and **Ghost**, you can also add `isDarkBg` prop if you are using these variants with dark background. | |
| - Animated Underline style on **Primary**, **Dark**, **Light** is removed | |
| - Added `ring-primary-500` on `focus-visible` | |
|  | |
| - #### ArrowLink | |
| Adds an animated arrow, this component is Polymorphic, the default element is `CustomLink`, you can extend it with `as` prop. | |
| ```tsx | |
| <ArrowLink | |
| as={ButtonLink} | |
| variant='light' | |
| href='/' | |
| > | |
| Register now | |
| </ArrowLink> | |
| ``` | |
|  | |
| - #### Change default theme to white | |
| |  |  | | |
| | - | - | | |
| ### Improvements & Bug Fixes | |
| - #### Split Next.js Link Props Type | |
| Now, to add props to Next.js `<Link>` component, you can use `nextLinkProps`. | |
| ```tsx | |
| <UnstyledLink | |
| href='/' | |
| nextLinkProps={{ | |
| shallow: true, | |
| }} | |
| > | |
| Link | |
| </UnstyledLink> | |
| ``` | |
| The rest of `<a>` props can be directly added as a prop. | |
| - #### Add Motion Safe to Animations | |
| All components animation respect user preference about motion. | |
| ## 0.3.0 - 2021-12-01 | |
| ### New Features | |
| - #### Create Branch & Auto Resolve Issue Actions | |
| |  <br> Auto Create Branch |  <br> 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 `<Seo />` on top of your page. | |
| You can also customize it per page by overriding the title, description as props | |
| ```tsx | |
| <Seo title='Next.js Tailwind Starter' description='your description' /> | |
| ``` | |
| or if you want to still keep the title like `%s | Next.js Tailwind Starter`, you can use `templateTitle` props. | |
| - #### Custom 404 Page | |
|  | |
| - #### Workspace Snippets | |
| Snippets such as React import, useState, useEffect, React Component. [View more](/.vscode/typescriptreact.code-snippets) | |
| - #### Husky, Prettier, Lint, and Commitlint Configured | |
| 3 Husky hooks including: | |
| 1. pre-commit, running `next lint` and format the code using prettier | |
| 2. commit-msg, running commitlint to ensure the use of [Conventional Commit](https://theodorusclarence.com/library/conventional-commit-readme) for commit messages | |
| 3. post-merge, running `yarn` every `git pull` or after merge to ensure all new packages are installed and ready to go | |
| - #### Default Favicon Declaration | |
| Use [Favicon Generator](https://www.favicon-generator.org/) and then overwrite the files in `/public/favicon` | |
| - #### Default Tailwind CSS Base Styles | |
| There are default styles for responsive heading sizes, and `.layout` to support a max-width for larger screen size. Find more about it on [my blog post](https://theodorusclarence.com/blog/tailwindcss-best-practice#1-using-layout-class-or-container) | |
| - #### Open Graph Generator | |
| |  |  | | |
| | --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | | |
| Open Graph is generated using [og.thcl.dev](https://og.thcl.dev), but please fork and self-host if your website is going to have a lot of traffic. | |
| Check out the [repository](https://github.com/theodorusclarence/og) to see the API parameters. | |
| - #### Preloaded & Self Hosted Inter Fonts | |
| Inter fonts is a variable fonts that is self hosted and preloaded. | |
| ## Snippets | |
| This starter is equipped with workspace-snippets, it is encouraged to use it, especially the `np` and `rc` | |
| ### Next.js Page | |
| File inside `src/pages` will be the webpage route, there are 2 things that need to be added in Next.js page: | |
| 1. Seo component | |
| 2. Layout class to give constraint to viewport width. [Read more about layout class](https://theodorusclarence.com/blog/tailwindcss-best-practice#1-using-layout-class-or-container). | |
| Snippets: `np` | |
| ```tsx | |
| import * as React from 'react'; | |
| import Seo from '@/components/Seo'; | |
| export default function TestPage() { | |
| return ( | |
| <> | |
| <Seo templateTitle='Test' /> | |
| <main> | |
| <section className=''> | |
| <div className='layout'></div> | |
| </section> | |
| </main> | |
| </> | |
| ); | |
| } | |
| ``` | |
| ### React Components | |
| To make a new component, It is encouraged to use `export default function`. Because when we need to rename it, we only need to do it once. | |
| Snippets: `rc` | |
| ```tsx | |
| import * as React from 'react'; | |
| export default function Component() { | |
| return <div></div>; | |
| } | |
| ``` | |
| #### Import React | |
| Snippets: `ir` | |
| ```tsx | |
| import * as React from 'react'; | |
| ``` | |
| #### Import Next Image | |
| Snippets: `imimg` | |
| ```tsx | |
| import Image from 'next/image'; | |
| ``` | |
| #### Import Next Link | |
| Snippets: `iml` | |
| ```tsx | |
| import Link from 'next/link'; | |
| ``` | |
| #### useState Hook | |
| Snippets: `us` | |
| ```tsx | |
| const [state, setState] = React.useState(initialState); | |
| ``` | |
| #### useEffect Hook | |
| Snippets: `uf` | |
| ```tsx | |
| React.useEffect(() => {}, []); | |
| ``` | |
| #### useReducer Hook | |
| Snippets: `ur` | |
| ```tsx | |
| const [state, dispatch] = React.useReducer(someReducer, {}); | |
| ``` | |
| #### useRef Hook | |
| Snippets: `urf` | |
| ```tsx | |
| const someRef = React.useRef(); | |
| ``` | |
| #### Region Comment | |
| It is really useful when we need to group code. It is also collapsible in VSCode | |
| Snippets: `reg` | |
| ```tsx | |
| //#region //*============== FORM SUBMIT | |
| //#endregion //*============== FORM SUBMIT | |
| ``` | |
| You should also use [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) extension. | |