centrifuge / website

centrifuge.io
https://centrifuge.io/
GNU Affero General Public License v3.0
8 stars 24 forks source link

Centrifuge: Real World DeFi

Build upon Gatsby minimal TypeScript starter

Development

yarn install
yarn start

Site runs on http://localhost:8000

Graphql playground runs on http://localhost:8000/\_\_\_graphql


Deployment

Create a build

yarn build

Test a build locally

yarn build
yarn serve

JSON page data

To source data from json files, we use gatsby-source-filesystem. The configuration can be found in gatsby-config.ts -> plugins

Each page gets its data from a json file in /data/<page-name>.json. Data is available in page component using a graphql query filtered by <page-slug>.

Mandatory entries in each json file (except for index.tsx)

export const query = graphql`
  query {
    dataJson(slug: { eq: "/<page-slug>" }) {
      seo {
        ...SeoFragment
      }
    }
  }
`

Legal Pages

Because of it's repetitive content, legal pages

are generated in gatsby-node.ts. The pages text content is stored in markdown files /data/legal/<site-slug>.md. Loaded markdown files are transfomed via gatsby-transformer-remark.


GraphQL Fragments

Queries of component data are defined inside the component file. To be able to spread them into the page query, they are exported as fragments.

Note: See how DataJsonHero_main is constructed from the folder name /data, the file format .json and the key hero_main of the entry.

Eg /src/components/hero-main/index.tsx:

export const query = graphql`
  fragment HeroMainFragment on DataJsonHero_main {
    title
    ticker
    body
    partners {
      image {
        publicURL
        extension
      }
      alt
    }
  }
`

Spread this fragment inside any page query:

export const query = graphql`
  query {
    dataJson(slug: { eq: "/" }) {
      hero_main {
        ...HeroMainFragment
      }
    }
  }
`

Explore and test on the graphql playground http://localhost:8000/\_\_\_graphql

Official docs on how to use GraphQL Fragments


Images

Images in /data/images/.png | .jpg that are referenced from within a /data/*.json are transformed by gatsby-transformer-sharp & gatsby-plugin-sharp and can get used by gatsby-plugin-image.

If possible use the <Image /> component: /src/components/Image.tsx. SVG files are not transformed but also handled by the component.

A query for .png | .jpg | .svg looks like this

image {
  childImageSharp {
    gatsbyImageData(placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
  }
  publicURL
  extension
}

If only .svg images are queried use.

image {
    publicURL
    extension
  }

Formatting

Code should be automaically formatted by config set in .prettierrc.js. If working with VisualStudioCode, one can install and enable the plugin prettier-vscode

Functions (gcloud)

Development

Starting the gatsby dev server will also start a server on http://localhost:8080 as the functions API endpoint.

To add a new endpoint create a typescript file in functions/src/exampleEndpoint.ts

Next add the new route in the routes.json file using the same name as the file. Here you can add additional rules per route if necessary.

[
  {
    "name": "exampleEndpoint",
    "options": {}
  }
  // ...
]

Deployment

  1. Ask for the necessary "cloud functions deployment" permissions from devops
  2. If gcloud CLI is not installed, please install it:
  1. Authenicate with gcloud
  gcloud auth login
  1. Build the application locally
  yarn build:functions
  1. Finally, deploy the bundled application
  yarn deploy:functions