Law Centre JAMStack Utilities

A set of React and Node utilities for interfacing with LCN JAMStack services.

Installation and Setup

To install law-centres-jamstack you need to :

1. yarn add law-centres-jamstack
2. Then install peer dependancies and set up required .env vars as below.

Below are the following documentations for the law-centre services used

Contentful

The follow environment variables should be set:

NEXT_PUBLIC_CONTENTFUL_SPACE_ID
NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN
NEXT_PUBLIC_CONTENTFUL_PREVIEW_ACCESS_TOKEN
NEXT_PUBLIC_GLOBAL_CONTENTFUL_SPACE_ID # For global content spaces
NEXT_PUBLIC_GLOBAL_CONTENTFUL_ACCESS_TOKEN # For global content spaces

Fetching content

Content can be fetched via either the Rest or GraphQL APIs using various configuration options for the Contentful Client:

contentfulConfig.live // The Contentful space specific to your product
contentfulConfig.preview // Preview (unpublished) content from your space
contentfulConfig.global // For content common to all products

Fetching entries from the Rest API:

import { contentfulConfig } from 'law-centres-jamstack'

const page = await require('contentful')
  .createClient(contentfulConfig.global)
  .getEntries({
    content_type: 'page',
    limit: 1,
    include: 5,
    'fields.slug': 'cookies',
  })
  .then((entry) => entry)

Fetching a collection from the GraphQL API:

import { fetchContent, contentfulConfig } from 'law-centres-jamstack'

const response = await fetchContent(
  `
    {
      sessionCollection(limit: 100) {
        items {
          slug
        }
      }
    }
  `,
  contentfulConfig.live
)

Rendering RichText and embedded components

You can use the global renderer, and optionally add your own components specific to your app:

import { renderRichText, ContentTypes } from 'law-centres-jamstack'
import { documentToReactComponents } from '@contentful/rich-text-react-renderer'

const customContentTypes = Object.assign(ContentTypes, {
  customcomponent: (content, context) => {
    return <p>Hi, world</p>
  },
})

documentToReactComponents(
  richText,
  renderRichText({
    graphLinks: richText.links, // If content is fetched via GraphQL, include linked associations
    ContentTypes: customContentTypes,
  })
)

Auth0

Simple utility script to provide a Auth0 management client:

const Auth0Manager = require('law-centres-jamstack/dist/utilities/Auth0Manager')

The follow environment variables should be set:

AUTH0_CLIENT_DOMAIN
AUTH0_CLIENT_SECRET
AUTH0_CLIENT_ID

Algolia

Provides configured Algolia clients to be used by your apps. You can either import the search client, or the management client:

import { algoliaClient } from 'law-centres-jamstack'
import { algoliaManagementClient } from 'law-centres-jamstack'

The follow environment variables should be set:

NEXT_PUBLIC_ALGOLIA_ID
NEXT_PUBLIC_ALGOLIA_KEY
ALGOLIA_MANAGEMENT_KEY

Using local version

If developing and using in another local project, use yalc to publish to a local store

• yalc publish

or to publish and push to all current dependant local projects, use

• yalc push

... and in your dependant project, use the local store with

• yalc add law-centres-jamstack

Publishing to NPM

To compile your code, run

• npm run build.

To publish your package to npm, make sure you're logged in the correct account by running

• npm login.

Update the package version accordingly by using

• npm version [patch | minor | major]

Then publish your package by running

• npm publish