Tree.ly Strapi Slices

This package contains all the slices that are used for the Tree.ly website as well as other projects developed by Tree.ly and powered by the Tree.ly Strapi instance.

Find the documentation of the slices here.

Development

Install dependencies:

npm install

Run the app in DEV mode:

npm run storybook

Run the linter:

npm run lint

Run the tests:

npm run test

For local testing, you can link the package to your project:

npm run build
npm pack

Go to the project which uses the strapi-slices package and install the package there:

cd ../path/to/your/project
npm install ../path/to/strapi-slices-package.tgz

Note: The Strapi CMS uses the data from the fpm-api for staging.

Commit message guideline

The project uses the Angular commit message guideline. Find the documentation here.

Build

Build the package:

npm run build

Find the build in the dist folder.

Use the package

Install the package:

npm install @treely/strapi-slices
npm install boemly

Use the slices:

import {
  IStrapiData,
  SliceRenderer,
  StrapiBlogPost,
  StrapiCustomerStory,
} from '@treely/strapi-slices';
import { BoemlyThemeProvider } from 'boemly';

// Get the slices, blog posts, and customer stories from Strapi
// Get the projects from the FPM API
const slices: any[] = [];
const blogPosts: IStrapiData<StrapiBlogPost> = [];
const projects: PortfolioProject[] = [];
const customerStories: IStrapiData<StrapiCustomerStory> = [];

const App = (): JSX.Element => (
  <BoemlyThemeProvider>
    <SliceRenderer
      slices={slices}
      blogPosts={blogPosts}
      projects={projects}
      customerStories={customerStories}
    />
  </BoemlyThemeProvider>
);