8.1.5 • Published 1 year ago

@superrb/gatsby-addons v8.1.5

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Gatsby Addons

Installation

First, install the package

yarn add @superrb/gatsby-addons

Package aliases

Add the following webpack aliases in gatsby-node.ts.

export const onCreateWebpackConfig = async ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        ProjectRoot: path.resolve(__dirname, '.'),
        '@superrb/gatsby-addons-cms': path.resolve(
          './node_modules/@superrb/gatsby-addons-prismic/', // Replace with path to chosen CMS extension
        ),
      },
    },
  })
}

Context Providers

Add the context providers in src/gatsby-browser.tsx and src/gatsby-ssr.tsx for any of the contexts you wish to use.

import { LazyLoadingContextProvider, NavContextProvider, TranslationContextProvider } from '@superrb/gatbsy-addons/context'

export const wrapRootElement = ({ element }) => (
  <LazyLoadingContextProvider>
    <NavContextProvider>
      <TranslationContextProvider>
        {element}
      </TranslationContextProvider>
    </NavContextProvider>
  </LazyLoadingContextProvider>
)

Language Map

If you want to use translations, after adding the translation context provider, create a language map for each language you want to use in src/utils/translation.ts.

Example:

import en from '../translations/en.json'
import jp from '../translations/jp.json'

export type Messages = Partial<typeof en & typeof jp>

export enum Language {
  en = 'en', // These strings should match the language or locale code used in Prismic
  jp = 'jp',
}

const translations = (
  language: Language = process.env.GATSBY_LANGUAGE as Language,
) => {
  switch (language) {
    case Language.jp:
      return jp as Messages
    case Language.en:
      return en as Messages
    default:
      return en as Messages
  }
}

export default translations

Translations should be stored in src/translations/<lang>.json. The typescript types are automatically generated based on the keys in the JSON file.

Image Reverse Proxy

To use a reverse proxy for Images you can replace the domain in the image urls by populating the following env vars:

GATSBY_IMAGE_URL_FIND="images.prismic.io"
GATSBY_IMAGE_URL_REPLACE="reverseproxy.cdn.com"

All image URLs will be converted from https://images.prismic.io/image.webp to https://reverseproxy.cdn.com/image.webp

Further Documentation

8.1.4

1 year ago

8.1.5

1 year ago

8.1.2

2 years ago

8.1.1

2 years ago

8.1.3

2 years ago

7.3.16

2 years ago

7.3.15

2 years ago

7.3.18

2 years ago

7.3.17

2 years ago

7.3.19

2 years ago

8.1.0

2 years ago

8.1.0-8

2 years ago

7.3.21

2 years ago

8.0.0-0

2 years ago

7.3.20

2 years ago

7.3.22

2 years ago

8.1.0-3

2 years ago

8.1.0-2

2 years ago

8.1.0-1

2 years ago

8.1.0-0

2 years ago

8.1.0-7

2 years ago

8.1.0-6

2 years ago

8.1.0-5

2 years ago

8.1.0-4

2 years ago

7.3.14

2 years ago

7.3.13

2 years ago

7.3.12

2 years ago

7.3.11

2 years ago

7.3.10

2 years ago

7.3.1

2 years ago

7.3.0

2 years ago

7.1.0

2 years ago

7.0.3

2 years ago

7.2.0

2 years ago

7.3.5

2 years ago

7.3.4

2 years ago

7.3.3

2 years ago

7.3.2

2 years ago

7.3.9

2 years ago

7.3.8

2 years ago

7.3.7

2 years ago

7.3.6

2 years ago

6.0.1

2 years ago

6.0.2

2 years ago

7.0.0

2 years ago

7.0.2

2 years ago

7.0.1

2 years ago

6.0.0

2 years ago

5.2.1

2 years ago

5.0.3

3 years ago

5.2.0

3 years ago

5.0.2

3 years ago

5.1.0

3 years ago

5.0.1

3 years ago

5.0.0

3 years ago

3.0.4

3 years ago

3.0.6

3 years ago

3.0.5

3 years ago

4.1.3

3 years ago

4.1.0

3 years ago

4.0.1

3 years ago

4.0.0

3 years ago

4.1.2

3 years ago

4.1.1

3 years ago

4.0.2

3 years ago

3.0.3

3 years ago

3.0.2

3 years ago

3.0.1

3 years ago

3.0.0

3 years ago

2.6.2

3 years ago

2.6.1

3 years ago

2.6.0

3 years ago

2.5.0

3 years ago

2.5.1

3 years ago

2.4.2

3 years ago

2.4.1

3 years ago

2.4.0

3 years ago

2.3.0

3 years ago

2.2.0

3 years ago

2.1.0

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

2.0.0

3 years ago

1.0.0

3 years ago