gitbabel / starter-nextjs-tailwindcss

gitBabel with nextJS and tailwindcss

Next-JS Community Site

Overview

This repository is the source for the community gitBabel site It was built ontop of nextjs

For our instance of NextJS we opted to use tailwind-css instead of the default styled-components that has been our standard on the NextJS Marketing site.

Install & Run

Install it and run:

npm install
npm run dev
# or
yarn
yarn dev

Env.Local

Make sure you create a .env.local which will hold your API configurations

# LocalDev
#GRAPHQL_API_URL=http://localhost:4000/graphql
#API_BEARER_TOKEN=

Deployment

git fetch --all

# make sure you get changes
git pull origin staging

# checkout into master
git checkout master

# check for things in master -- should never happen but ya,never know
git pull origin master

# merge staging into master
git merge staging

# push it up to master so we are in sync
git push origin master

starter-nextjs-tailwindcss's Issues

Add the tailwind default Color Palettes to the tailwind config

Context

Currently we have hard coded a few bg-colors onto the page, we want to expand and enable the Tailwind Default Colors Palettes to be easily configured for a given site.

Actions

Follow the documentation here to enable the default color palettes inside of the tailwind.config.js.

Expand the colors to include the array of defined curated colors found here.

Example/Starting Code

const colors = require('tailwindcss/colors')

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        indigo: colors.indigo,
        /* 
            Select / Enable your Default Tailwind Palette
            See Additional Colors: https://tailwindcss.com/docs/customizing-colors 
         */
        /*
        transparent: 'transparent',
        black: colors.black,
        white: colors.white,
        gray: colors.gray,
        emerald: colors.emerald,
        indigo: colors.indigo,
        yellow: colors.yellow,
        */
      },
      minWidth: {
        0: '0',
        '1/4': '25%',
        '1/2': '50%',
        '3/4': '75%',
        full: '100%'
      },
      maxWidth: {
        '1/4': '25%',
        '1/2': '50%',
        '3/4': '75%'
      },
      fontFamily: {
        body: 'Roboto',
        accent: 'Source Code Pro'
      }
    }
  },
  variants: {
    extend: {}
  },
  plugins: []
}

Want to setup the Jest test runner for our react components

Context

It appears out of the box that configuring Jest will require additional effort to configure it to work with NextJS.

Specifically based on the need for js-dom and the adding a react-container.

• Official NextJS / Jesting
• Article

Github Action for the NextJS Build

Context

We enabled the Dependabot github action which is now running daily security audits. We need to setup a build check to ensure and automate that security patches don't break our build(s).

Actions

Setup a new github action to run our npm run build command on a pull-request

Sample Code for Action...

name: RUN NEXTJS BUILD

# Reference
# https://help.github.com/en/actions/automating-your-workflow-with-github-actions/using-nodejs-with-github-actions
# This workflow is triggered on pushes to the repository.
on: [push]

jobs:
  build:

    name: NEXTJS BUILD
    # This job runs on Linux
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout Code
        uses: actions/checkout@v1
      - name: Install Node
        # Setups the npm installer to know which private registry to pull from
        uses: actions/setup-node@v1
        with:
          node-version: '16.x'
          registry-url: 'https://registry.npmjs.org'
          scope: '@gitbabel'
      - name: NPM INSTALL
        run: npm install
      - name: Run Build
        run: npm run build

Verify above code works and make adjustments

The CollectionData components storybook is noop because of the inclusion of ApolloProvider

Context

Currently it blows up on rendering:

Actions

There is a fix now I believe for the Apollo mock-object or we can just isolate the ApolloCall down a level in the component so we can render a fixture based version of the component.