Gatsby V5 Malik's starter

Gatsby 5 starter created by Melek lassoued⚡🚀 A passionate fullStackJS developer.

Starter features :

This starter designed to front-end developers who wants to optimize their times and create static sites .

so what's Gatsby.js ?
Gatsby : is an open-source static site generator built on top of Node.js using React and GraphQL.

In this starter we will introduce to you many features will help you to optimize your time and to create a well structured project which will make your life easier to maintain your site in the future.

This starter supports :

Boostrap 5
scss
i18next
hygen to : generate conventional code templates
Airbnb react style guide implementation

Linting and formating

Uses ESLint and Prettier working in pair together
Linting and formatting are enforced (won't compile unless addressed)
Formatting/Linting is automatically processed on saving files. If linting errors remain unresolved, commit won't go through
In fact, linting and formatting tasks are also installed as a pre-commit hook through Husky
format your code :

yarn format:fix

fix your code :

yarn lint:fix

HUSKY :

Follows the Conventional Committing standard
Feature example: git commit -m "feat: Closes ISS-1. Ability to login with Apple"
Patch example: git commit -m "fix: Closes ISS-2 and corrects scrolling bug"
Major/Breaking change example: git commit -m "BREAKING CHANGE: Updated website version"
Combines feature and breaking change:
Major/Breaking change example:

git commit -m "feat: Closes ISS-1. Ability to login with Apple BREAKING CHANGE: Updated Gatsby version"
Commits not impacting versioning:
- Regular / casual example: git commit -m "chore: ISS-4 Installed dependencies"
- Refactoring example: git commit -m "refactoring: Refactored component"
- Other commit types: build:, chore:, ci:, docs:, style:, refactor:, perf:, test
The standard is linted and Husky will prevent commits from going through if it's not compliant
Project managers/owners can release satisfying updates and issue version bumps thanks to standard-version by running yarn release. This will generate:
Appropriate tags based on the conventional commit history
An aggregated CHANGELOG.md file update.

Hygen :

Hygen allows you to generate conventional code templates:

install hygen globaly :

npm i -g hygen

Adding a page :

hygen gatsby page SomePage This will add the following files:

pages/some-page: Gatsby standard page
page-styles/SomePage.scss: A .scss style file for the page with root selector defined as some-page

Adding a Page component :

hygen gatsby component SomeComponent --page SomePage

This will create a folder for a component associated with the page SomePage under /page-components/SomeComponent. The folder will contain the following files:

SomeComponent.js: Standard component file
SomeComponent.scss: Standard .scss style file for the component imported with the component implementation file

Adding a Shared component :

hygen gatsby component SomeWidget

This will create a folder for a shared component (reusable among pages and other components). The SomeWidget folder will contain:

SomeWidget.js: Standard component file
SomeWidget.scss: Standard .scss style file for the component imported with the component implementation file

Folder structure

.
├── src
├────── pages => Contains Gatsby pages named with this pattern page-name.js
├────── page-styles => Contains style files in .scss for Gatsby pages named with the corresponding page name
with this pattern PageName.scss
├────── page-components => Contains components that are specific to a page named with the corresponding page name with this pattern PageName/ComponentName/ComponentName.js|.scss
├────── shared => Shared components, layouts (feel free to add your own extra layouts), helpers and global style
├──────────── styles
├─────────────────── theme.scsss => Theme global style which can use variables (see file below) as well
├─────────────────── _variables.scss => All shared colors, dimensions, font features and visual effects should go here
├─────────────────── global.scsss => Other globals than theme globals. Minor but useful.
├─────────────────── index.scc => **WARNING** Only touch to use/enable a theme over another
├─────────────────── theme-gatsby-default.scsss => Leave as is (for debugging purposes)
├──────────── Helpers => Add any redundant logic, driver logic, decoupled code...etc. here
.
.
.
├── package.json => dependencies / dev dependencies
├
.
.
.
├── gatsby-config.js => OK. Use for Gatsby configurations
├── gatsby-browser.js => OK. Use for Gatsby configurations
├── gatsby-ssr.js => OK. Use for Gatsby configurations only for specific projects with SSR

Seo Component :

/* -------------------------------------------------------------------------- */
/*                                Dependencies                                */
/* -------------------------------------------------------------------------- */
// Packages
import React from 'react';
// Hooks
import { useSiteMetaData } from '../../hooks/use-site-metadata';

/* -------------------------------------------------------------------------- */
/*                                SeoComponent                                */
/* -------------------------------------------------------------------------- */
export const Seo = ({ title, description, pathName, children }) => {
  // Destructuring seo attributes from UseMetaData Hook
  const {
    title: defaultTitle,
    description: defaultDescription,
    image,
    siteUrl,
    twitterUsername,
  } = useSiteMetaData();
  // Seo default props
  const seo = {
    title: title || defaultTitle,
    description: description || defaultDescription,
    image: `${siteUrl}${image}`,
    url: `${siteUrl}${pathName || ''}`,
    twitterUsername,
  };
  /* ****************************** SEO RENDETING ***************************** */
  return (
    <>
      <title>{seo.title}</title>
      <meta name="description" content={seo.description} />
      <meta name="image" content={seo.image} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={seo.title} />
      <meta name="twitter:url" content={seo.url} />
      <meta name="twitter:description" content={seo.description} />
      <meta name="twitter:image" content={seo.image} />
      <meta name="twitter:creator" content={seo.twitterUsername} />
      <link
        rel="icon"
        href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>👤</text></svg>"
      />
      {children}
    </>
  );
};

meleklassoued/Malik-gatsby-starter