CHANGELOG.md

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

0.2.4 (2022-08-15)

Features

• added more projects and related resources (a6a2c62)

0.2.3 (2022-08-15)

Features

• added contact form (41a0a91)

Bug Fixes

• corrected the bounding box of the SS logo and saved to public folder (449c1c8)
• fix build failing due to undefine iscreenshot in project detail (d133767)
• refactored getIcon to reduce complexity (83e2bcd)
• refactored getIcon to reduce complexity (89b7d35)

0.2.2 (2022-08-02)

0.2.1 (2022-08-02)

Features

• updated About Me section with added profileLinks, bio, education, personal projects (d038736)
• updated About Me section with added profileLinks, bio, education, personal projects (d940ab6)

0.2.0 (2022-08-02)

⚠ BREAKING CHANGES

• change directory structure
• use typescript

Features

• add 404 page, and make home center (63cefde)
• add animated underline (dc47d82)
• add api example (853cbe3)
• add ArrowLink component (174c663)
• add Button component (87775c1)
• add classnames helper (9c3b75e)
• add clsx and fragment snippet wrap (614048a)
• add color randomizer to components (cc212e1)
• add cursor-ne-resize to external link (8a272a4)
• add customizable color (61d8df8)
• add cutomizable css variable for primary (6cc60b4)
• add default styles for Button (047712c)
• add dynamic og from defaultMeta (de1607b)
• add env for eslint (2bb5aed)
• add eslint typescript (1e3af94)
• add extensions recommendations (07110dc)
• add forward ref to Button (e6e52a2)
• add forward ref to links (941c488)
• add jit mode, and indicator in index page (a0af1e5)
• add Layout and Header (572dbbb)
• add Layout component to _app (4737afb)
• add more components (719f5cb)
• add motion safe to animated-underline (e1c2412)
• add new button variants (7241917)
• add new-tab cursor (4631bd5)
• add next-sitemap (bf945e8)
• add NextImage (cef0f3a)
• add nextjs snippets (490c35f)
• add open graph with templateTitle (aa58d72)
• add override new tab to UnstyledLink (8842840)
• add primary variant and isLoading (f57e9d1)
• add PrimaryLink and rename UnderlineLink (8d39dc2)
• add project-payload git submodule (1d81ee9)
• add react import to pages (8f3c7cf)
• add region css snippet (47a1239)
• add revert type on commitlint (5d10a5c)
• add Skeleton component (81f86f0)
• add STARTERCONF guide (7416fef)
• add support for svgr (52515fe)
• add type button to Button (ed1a692)
• add type to tailwind.config (f6a7bf8)
• add typography class (36e6c37)
• add workspace snippet (13febba)
• added about, contact, projects pages (1076a09)
• added animations to homepage (48cc49e)
• added APIVideoPlayer and FullDetail components (a71d286)
• added APIVideoPlayer and FullDetail components (c8194fe)
• added asset lists to video dertail page (91b1379)
• added blog detail page (f1f056f)
• added blog index page and setup access to blog api (1a127c9)
• added devIcons (79625dd)
• added Docker file and config files to allow installation on CaptainRover platforms (691c56c)
• added ImageAssetsGrid and improved encodedAssetsList (4b676db)
• added latestPosts component (358f01f)
• added markdown parsing to blog detail description (5bf9575)
• added more projects (bc9a7b9)
• added more projects (9b93d7a)
• added project slug page (a59b444)
• added tailwind stories (21dec54)
• added useForm Hooks and auth/api lib files (40f3d45)
• auth API (b4834cc)
• center Button & ButtonLink vertically (f05e2a0)
• change base url (782756b)
• change cursor to pointer (ec1d803)
• change CustomLink default ring (22653ef)
• change dark color to #222 (7239186)
• change default theme to light (8fdcedc)
• change directory structure (13a99dc)
• change focus styling for links and buttons (aa71317)
• change NextImage loader to shimmer (ee8ece0)
• change og to vercel (a68e274)
• change primary variant to darker shade (6e03900)
• change React.Child to ReactNode (25530e2)
• change seo from next-seo to native (407eec9)
• change seo to each page title (42d82cf)
• change to strict mode (5086532)
• change to variable fonts latin (ffb4e24)
• configure meta in Seo (5b24799)
• create next link snippet (c4d0aac)
• eslint: add curly brace rule (55a476a)
• fetchBlogPosts is now limited to posts created by site owner (ab34d01)
• improve 404 color and font size (5b412f9)
• improve CustomLink visibility on light mode (67c2f85)
• improved layouts and navigatiions components (665d442)
• improved projects layout (f41733c)
• improved projects layout (0208cdc)
• make ArrowLink to be polymorphic (973293e)
• map favicons link in Seo (613c24d)
• move components and add components page (ad7f517)
• move name to footer (af7ce48)
• preload and cache font (a4d9708)
• remove extra space on Seo (c11f850)
• simpler absolute import config (68285b8)
• snippet: add scope to regc (a259dab)
• snippets: add rcp, cxm, regc, igsp, isgsp (1d214a3)
• split next/link props type (a7e3630)
• update snippets with Layout (a306a68)
• update tailwindcss color names (bd07e9f)
• updated capRover config and envs for production (15703f2)
• updated text sixe for ContentUSPSGrid component (5e66b6e)
• upgrade to [email protected] [email protected] (1c880dd)
• use clsxm for component (e1d0067)
• use eslint for linting (5319d05)
• use first class class sorter (964c0c5)
• use next/jest for testing (8ed745c)
• use og generator (44c3e5e)
• use typescript (2dfb2b7)

Bug Fixes

• `removed githubmarkdown css (ae069e7)
• can't use layout fill on NextImage (7696224)
• change copywrite in components page (24c5cb3)
• className props overriding on CustomLink (b0062b9)
• custom Seo props not implemented (705277c)
• error with redirects on authentication and logout (afcf680)
• fixed issues when site viewed in light mode (3216903)
• getPosts failing if no VCMS USER in env (a7c26a0)
• href not passed to UnstyledLink a tag (82dacf4)
• layout declared twice (2716c52)
• linting issues (cb94c84)
• minor typo in _app.tsx comment (98a84d2)
• remove local in @fontface to avoid warnings (ad3308e)
• spreading rest mess up autoimport (3e42a42)
• types error (3c3036c)
• updated next config to output standalone build which was causing deployment to fail (959bbdd)
• updated themechanger (0bab0fe)
• using custom title Seo not working (1862ad9)
• wrong logic for isNewTab (c3327cd)

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

  

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