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';exportdefaultfunction(props: FileBlockProps){const{ content, metadata, onUpdateMetadata }=props;
...
}

FolderBlockProps

import{FolderBlockProps}from'@githubnext/blocks';exportdefaultfunction(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";

exportdefaultfunction(props: FolderBlockProps){const{ tree, onNavigateToPath }=props;constdata=useMemo(()=>{constnestedTree=getNestedFileTree(tree)[0]returnnestedTree},[tree])...}