CHANGELOG.md

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.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.

  <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.

  <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

  Auto Create Branch	Auto Resolve

  You have to install the app for your organization/account/repository from the GitHub Marketplace 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 with custom class order on this file and custom variant order on prettierrc

  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, utility for constructing className strings conditionally.
  2. react-icons, 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

  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

  <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

• 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 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 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

• Open Graph Generator

  Open Graph is generated using og.thcl.dev, but please fork and self-host if your website is going to have a lot of traffic.

  Check out the repository 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.

Snippets: np

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

import * as React from 'react';
export default function Component() {
  return <div></div>;
}

Import React

Snippets: ir

import * as React from 'react';

Import Next Image

Snippets: imimg

import Image from 'next/image';

Import Next Link

Snippets: iml

import Link from 'next/link';

useState Hook

Snippets: us

const [state, setState] = React.useState(initialState);

useEffect Hook

Snippets: uf

React.useEffect(() => {}, []);

useReducer Hook

Snippets: ur

const [state, dispatch] = React.useReducer(someReducer, {});

useRef Hook

Snippets: urf

const someRef = React.useRef();

Region Comment

It is really useful when we need to group code. It is also collapsible in VSCode

Snippets: reg

//#region  //*============== FORM SUBMIT
//#endregion  //*============== FORM SUBMIT

You should also use Better Comments extension.