Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kontent-ai/gatsby-packages

Monorepo with Gatsby Kontent packages.
https://github.com/kontent-ai/gatsby-packages

caas delivery-api gatsby gatsby-plugin gatsbyjs hacktoberfest headless-cms kentico kentico-kontent kontent-ai kontent-ai-sample kontent-ai-tool lerna-monorepo monorepo react-commponent source-plugin

Last synced: 26 days ago
JSON representation

Monorepo with Gatsby Kontent packages.

Host: GitHub
URL: https://github.com/kontent-ai/gatsby-packages
Owner: kontent-ai
License: mit
Created: 2018-09-20T11:27:43.000Z (about 6 years ago)
Default Branch: master
Last Pushed: 2023-11-16T19:29:49.000Z (12 months ago)
Last Synced: 2024-10-08T13:58:43.884Z (28 days ago)
Topics: caas, delivery-api, gatsby, gatsby-plugin, gatsbyjs, hacktoberfest, headless-cms, kentico, kentico-kontent, kontent-ai, kontent-ai-sample, kontent-ai-tool, lerna-monorepo, monorepo, react-commponent, source-plugin
Language: TypeScript
Homepage: https://www.gatsbyjs.org/plugins/?=%40kentico%2Fkontent-
Size: 19.7 MB
Stars: 33
Watchers: 20
Forks: 24
Open Issues: 14
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        # Gatsby Kontent.ai Packages

![build](https://github.com/kontent-ai/gatsby-packages/actions/workflows/build.yml/badge.svg)

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)

[![Stack Overflow](https://img.shields.io/badge/Stack%20Overflow-ASK%20NOW-FE7A16.svg?logo=stackoverflow&logoColor=white)](https://stackoverflow.com/tags/kontent-ai)

[![Kontent.ai Discord](https://img.shields.io/discord/821885171984891914?color=%237289DA&label=Kontent.ai%20Discord&logo=discord)](https://discord.gg/SKCxwPtevJ)

Monorepo with Gatsby Kontent.ai packages.

The repository contains the development site (`/site`) that could automatically load packages (`packages`) thanks to [npm workspaces](https://docs.npmjs.com/cli/using-npm/workspaces).

## Content

### Packages

|                                 Package                                 | Summary                                                                         |                                                                        Version                                                                         |

| :---------------------------------------------------------------------: | :------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------: |

| [Gatsby Source Kontent.ai Plugin](/packages/gatsby-source#readme)  | plugin providing data from Kontent.ai REST API to Gatsby GraphQL model     |     [![npm version](https://badge.fury.io/js/@kontent-ai%2Fgatsby-source.svg)](https://badge.fury.io/js/@kontent-ai%2Fgatsby-source)     |

| [Gatsby Kontent.ai Components](/packages/gatsby-components#readme) | package containing React components useful when processing Kontent.ai data to site | [![npm version](https://badge.fury.io/js/@kontent-ai%2Fgatsby-components.svg)](https://badge.fury.io/js/@kontent-ai%2Fgatsby-components) |

### Site

[![Netlify Status](https://api.netlify.com/api/v1/badges/6cd10788-de09-4275-b0c9-daad29733bc9/deploy-status)](https://app.netlify.com/sites/kontent-ai-gatsby-packages/deploys)

- [Development Site](/site#readme) - Site using for development purposes and code examples showcasing packages possibilities

### Examples

#### Navigation showcase

[![Netlify Status](https://api.netlify.com/api/v1/badges/5129d2e5-dc9f-4519-b18a-ad617e6225d5/deploy-status)](https://app.netlify.com/sites/kontent-ai-gatsby-example-navigation/deploys)

- [Navigation showcase](/examples/navigation#readme) - Showcase including the navigation best practices. Description, how to do the content modeling with all benefits of the modular content as well as have tree-based menu structure.

#### Resolution showcase

[![Netlify Status](https://api.netlify.com/api/v1/badges/2f5f005f-1c66-4022-8c78-382f0a06a2a7/deploy-status)](https://app.netlify.com/sites/kontent-ai-gatsby-example-resolution/deploys)

- [Resolution showcase](/examples/resolution#readme) - Demonstration how to resolve the Rich Text element and it's inline images, inline content items, and content components.

#### Relationships showcase

[![Netlify Status](https://api.netlify.com/api/v1/badges/27d162a0-612b-4d8f-8382-40eee4f6b5d9/deploy-status)](https://app.netlify.com/sites/kontent-ai-gatsby-example-relationships/deploys)

- [Relationships showcase](/examples/relationships#readme) - Schema customization examples demonstrating relationship possibilities among Kontent.ai GraphQL nodes.

#### DSG and SSR showcase

[![Netlify Status](https://api.netlify.com/api/v1/badges/b71c750d-4c9f-4a8f-9484-bafa7c2ce019/deploy-status)](https://app.netlify.com/sites/kontent-ai-gatsby-example-dsg-ssr/deploys)

- [DSG and SSR showcase](/examples/dsg-ssr#readme) - Example showcasing Deferred Static Generation and Server side Rendering features with Kontent.ai.

## Development

### Prerequisites

- [Nodejs](https://nodejs.org/en/)

### Install

1. Install packages

   ```sh

   npm install # install all npm dependencies in the repository

   ```

2. Start watch mode packages

   ```sh

   npm run watch # run watch mode through all packages source code

   ```

3. Run development site

   ```sh

   npm run develop:site # run `gatsby develop` command in the development site

   ```

Now you are good to go. You could start browsing  for development site and  for [GraphiQL explorer](https://github.com/graphql/graphiql/blob/master/packages/graphiql/README.md).

### Tests

To run all tests, there is npm script prepared.

```sh

npm run test # run test script in all packages as well as in the development site

```

- Packages are using [Jest](http://jest.org/) framework for testing.

### Build

To build all of the packages as well as a development site, you could use one command.

```sh

npm run build # run build script in all packages as well as in the development site

```

### Lint

To lint all of the packages as well as a development site, you could use one command.

```sh

npm run lint # run lint script in all packages as well as in the development site

```

- Packages are using [ESLint](https://eslint.org/) with Typescript plugins for linting.

## Publishing

As a publishing framework, there is a [Lerna](https://github.com/lerna/lerna) framework set up. This package is using [Fixed/Locked mode](https://github.com/lerna/lerna#fixedlocked-mode-default). All minor and major changes should publish all packages, in case of patch version, it is up to developer decision.

### How to publish new version

If you have the rights to publish packages, just use [`lerna`](https://github.com/lerna/lerna/tree/master/commands/publish#readme) and specify the version when prompted. All the changes made by lerna are automatically committed.

A typical scenario is when everything is ready and you want to publish the version, just use command.

```sh

npx lerna publish --tag-version-prefix=''

```

That should summarize the publish information and prompt you to define the version number and acknowledge the publish. Once everything is OK and you acknowledge the publish:

- the new version is published to npm

- `` is set to [`lerna.json`'s `version`](lerna.json)

- commit with this change (and package.json files version changes) is pushed to the repository

  - commit also contains tag `` that could be used for creating GitHub release if you want

:bulb: If you want to test out the beta version first (which is recommended) use following command and if everything is OK, release another patch version as the final version.

```sh

npx lerna publish --tag-version-prefix='' --dist-tag=beta

```