GitHub Blocks Utils Functions

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

How to use

yarn add @githubnext/utils

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

FileBlockProps

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

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

FolderBlockProps

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

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/utils";

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

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

bundleCodesandboxFiles

A helper function to generate a bundle of files to send to CodeSandbox's Sandpack library. For an example, see the custom Block template repo.

onRequestGitHubData

A helper function to handle the onRequestGitHubData callback for Blocks. This function will GET data from any GitHub API endpoint.