https://github.com/githubnext/blocks-dev
https://github.com/githubnext/blocks-dev
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/githubnext/blocks-dev
- Owner: githubnext
- Created: 2022-05-11T21:34:24.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-06T01:40:06.000Z (about 3 years ago)
- Last Synced: 2023-03-06T13:00:49.070Z (almost 3 years ago)
- Language: TypeScript
- Size: 470 KB
- Stars: 15
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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`
```tsx
import {
FileBlockProps,
FolderBlockProps,
getLanguageFromFilename,
getNestedFileTree,
} from '@githubnext/blocks`
```
## FileBlockProps
```tsx
import { FileBlockProps } from '@githubnext/blocks';
export default function (props: FileBlockProps) {
const { content, metadata, onUpdateMetadata } = props;
...
}
```
## FolderBlockProps
```tsx
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";
```tsx
export default function (props: FolderBlockProps) {
const { tree, onNavigateToPath } = props;
const data = useMemo(() => {
const nestedTree = getNestedFileTree(tree)[0]
return nestedTree
}, [tree])
...
}
```