Skip to content

Latest commit

 

History

History
431 lines (250 loc) · 11.9 KB

CHANGELOG.md

File metadata and controls

431 lines (250 loc) · 11.9 KB
Raw

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.

1.0.0 - 2023-07-17

New Features

  • Next.js App Router

    Now uses the new app directory structure.

Improvements & Bug Fixes

  • Rename clsxm to cn

    For better support with shadcn/ui

  • Faster Lint Actions

    Lint jobs is now merged into one for faster performance, also updated the concurrency rule

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.

    CleanShot.2022-02-27.at.11.02.05.mp4

  • Support for SVGR

    You can directly import SVG like

    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

    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.

    CleanShot.2021-12-26.at.14.28.07.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.

    CleanShot.2021-12-04.at.18.54.07-trimmed.mp4

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

    Button Variants

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

    Arrow Link Feature

  • Change default theme to white

    Home Page 404

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

    Create Branch Actions
    Auto Create Branch    		 Auto Resolve
    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

    customlink

  • 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

404

  • 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

    image image

    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.