Jones-S / acid-amazonians-web

Amazonians

Ideas/Resources

SVG Clip path: https://tympanus.net/Development/OrganicShapeAnimations/

lucid-nuxt-2021

In contrary to the default lucid-nuxt-2021, this repo uses a sanity cms GraphQL API. So when setting up a few things had to be taken care of:

• All the craft components had to be removed.
• In index.vue the variables for the GraphQL query had to be deleted. (No site and section variables).
• Delete all nuxt image stuff in nuxt.config.js. (It ain't working anyway at the time of writing...)
• Change all GraphQl Queries in index.vue and _.vue.
• Remove error message if no i18n in index.vue and _.vue.
• Remove NuxtLink with localePath.
• remove i18n stuff in default.vue.
• Delete i18n and fetching stuff in TheFooter.vue
• Change the default query in fetchRoutesToBeGenerated.js for fetching the routes.

Prerequisites

• Node Version Manager
• .env file (cp .env.example .env)
• Optional: It's recommended to use VS Code
• If you use a GUI app for Git (Sourcetree), add a ~/.huskyrc file

First Things First

• Delete the /_nuxt-content-module-demo directory if you don't need it
• Go through nuxt.config.js
  • Remove i18n if you don't need it
• Update your package.json's name and description properties. This info will end up in manifest.json created by @nuxtjs/pwa's manifest module.

Build Setup

# use specified node version
$ nvm use

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

For detailed explanation on how things work, check out Nuxt.js docs.

Storybook

Added via @nuxtjs/storybook. Make sure to have a look at storybookConfig.js.

Run Storybook:

# Run Storybook on http://localhost:4000
$ yarn storybook

Linting tools

• ESLint
• Prettier
• StyleLint
• Lint staged files
• Commitlint with Conventional Commits (@commitlint/config-conventional)
  • Allowed types: [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test]

Use with GUI Git Clients (i.e. Sourcetree)

In order to run husky v4+ with Sourcetree one can add a ~/.huskyrc file.

# ~/.huskyrc
# This loads nvm.sh and sets the correct PATH before running hook
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

SASS Architecture

This boilerplate is following the SASS 7-1 pattern.

The architecture consists of:

• Abstracts: Tools, helpers, functions and mixins
• Base: Holds what we might call the boilerplate code for the project, such as colors and typography declarations
• Pages: Specific styles for pages
• Vendors: External libraries

Files which are declaring variables or global helpers/mixins, are being imported and summarized inside style-resources.scss.

Note: Not all seven folders of the SASS 7-1 pattern have yet been setup. This is because folders such as /themes are very project specific.

Adding new shared or global files

Before adding any new file, make sure to check out this guide to declare in which folder the new file belongs – or if you need to create a new folder.

Once the file is placed correctly, an import to that file needs to be set:

• If your file declares variables or mixins, import it inside the style-resources.scss.
• If you declare actual styles, import them in global.scss.

Nuxt Style Resources

This boilerplate uses @nuxtjs/style-resources.

Breakpoints / Media Queries

Add breakpoints to breakpoints.json. Breakpoints are available in SASS, Storybook and @nuxt/image.

sass-mq Mixin Usage

@include mq($from: medium) {
  .titanic {
    float: none;
  }
}

Debug sass-mq breakpoints

Display the currently active breakpoint in the top right corner:

$s-debug-breakpoints: true;

VS Code

We recommend to use VS Code. Recommended extensions can be installed (prompt by VS Code) when opening the project for the first time. Project settings ensures that linting with eslint and stylelint works correctly. .