24 |
25 | (if you're using Safari (or another browser that doesn't permit calling `http` URLs from an `https` page), run `yarn start-https` and visit [https://localhost:4000](https://localhost:4000) instead.)
26 |
27 | This template includes one example File Block and one Folder Block. The dev server supports hot reloading, so make some changes, and see what they do!
28 |
29 | ## Under the hood
30 |
31 | Currently, Blocks are [React](https://reactjs.org/) components. They have a well-defined contract with their surroundings, and receive a [fixed set of props](https://github.com/githubnext/blocks/blob/main/docs/Developing%20blocks/4%20API%20reference%20and%20types.md) when they are instantiated. They are developed in [TypeScript](https://www.typescriptlang.org/), and bundled with [Vite](https://vitejs.dev/).
32 |
33 | ## More Info
34 |
35 | Visit [githubnext/blocks](https://blocks.githubnext.com/githubnext/blocks) for a full tutorial, documentation, and examples.
36 |
37 | You should also join us in our discord! There's a [#blocks channel](https://discord.com/channels/735557230698692749/1039950186136469535) where you can connect with us and other folks who are building Blocks:
38 |
39 | > 👋 https://discord.gg/githubnext
40 | ## License
41 |
42 | MIT
43 |
44 | ✌️ ❤️
45 | _GitHub Next_
46 |
--------------------------------------------------------------------------------
/blocks.config.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "type": "file",
4 | "id": "file-block",
5 | "title": "Example File Block",
6 | "description": "A basic file block",
7 | "entry": "blocks/example-file-block/index.tsx",
8 | "matches": ["*"],
9 | "example_path": "https://github.com/facebook/react/blob/main/packages/react-dom/index.js"
10 | },
11 | {
12 | "type": "folder",
13 | "id": "folder-block",
14 | "title": "Example Folder Block",
15 | "description": "A basic folder block",
16 | "entry": "blocks/example-folder-block.tsx",
17 | "matches": ["*"],
18 | "example_path": "https://github.com/githubocto/flat"
19 | }
20 | ]
21 |
--------------------------------------------------------------------------------
/blocks/example-file-block/index.css:
--------------------------------------------------------------------------------
1 | pre {
2 | background: papayawhip;
3 | }
4 |
--------------------------------------------------------------------------------
/blocks/example-file-block/index.tsx:
--------------------------------------------------------------------------------
1 | import { FileBlockProps, getLanguageFromFilename } from "@githubnext/blocks";
2 | import { Button, Box } from "@primer/react";
3 | import "./index.css";
4 |
5 | export default function ExampleFileBlock(props: FileBlockProps) {
6 | const { context, content, metadata, onUpdateMetadata } = props;
7 | const language = Boolean(context.path)
8 | ? getLanguageFromFilename(context.path)
9 | : "N/A";
10 |
11 | return (
12 | Metadata example: this button has been clicked:
31 | 38 |{content}
39 | | Path | 28 |Size | 29 |Type | 30 |
|---|---|---|
| {item.path} | 36 |{item.size} | 37 |{item.type} | 38 |