blocks

Welcome! This package supports local development of custom GitHub Blocks.

Scripts

Using the blocks command, you can run the following commands:

• start - Starts a local development environment and builds Blocks bundles.
• build - Builds Blocks bundles.

Utility functions

To reduce the cognitive load associated with writing file and folder block components, we've assembled a helper library that exposes interface definitions and a few helper functions.

How to use

yarn add @githubnext/blocks

import {
  FileBlockProps,
  FolderBlockProps,
  getLanguageFromFilename,
  getNestedFileTree,
} from '@githubnext/blocks`

FileBlockProps

import { FileBlockProps } from '@githubnext/blocks';

export default function (props: FileBlockProps) {
  const { content, metadata, onUpdateMetadata } = props;
  ...
}

FolderBlockProps

import { FolderBlockProps } from '@githubnext/blocks';

export default function (props: FileBlockProps) {
  const { tree, metadata, onUpdateMetadata, BlockComponent } = props;
  ...
}

getLanguageFromFilename

A helper function that returns the "language" of a file, given a valid file path with extension.

getNestedFileTree

A helper function to turn the flat folder tree array into a nested tree structure

import { FolderBlockProps, getNestedFileTree, } from "@githubnext/blocks";

export default function (props: FolderBlockProps) {
  const { tree, onNavigateToPath } = props;

  const data = useMemo(() => {
    const nestedTree = getNestedFileTree(tree)[0]
    return nestedTree
  }, [tree])
  ...
}