feat: add swagger block

Author: grignong

.gitignore

@@ -4,4 +4,7 @@ dist-ssr
 *.local
 .yalc.lock
 .yalc
-dist
+dist
+
+# IDEs
+.idea

DOCUMENTATION.md

@@ -0,0 +1,45 @@
+# GitHub Blocks Template
+
+Use this repository as a starter template for building your own Blocks.
+## Quickstart
+
+> 🛑 Currently, you must be flagged into the [GitHub Blocks Technical Preview](https://blocks.githubnext.com) in order to develop blocks. There is no "offline" development mode at this time.
+
+Fork this repo using the [`Use this template`](https://github.com/githubnext/blocks-template/generate) button above:
+
+!["Use this template" button](https://user-images.githubusercontent.com/8978670/144893319-5d45ab5c-12c0-42b4-99f8-97f658deb03b.png)
+
+Then, clone _your_ repo (not [this one!](https://github.com/githubnext/blocks-template)) and get ready for action:
+
+```bash
+yarn # install dependencies
+yarn start # start the dev server
+# Or use npm, pnpm, you know the drill
+```
+
+When you visit [localhost:4000](https://localhost:4000) in your browser, you'll be
+redirected to the Blocks app, but your locally-developed blocks will appear in the block picker:
+
+<img alt="Block picker" src="https://user-images.githubusercontent.com/56439/181648955-101b6567-3f9b-44b3-af99-7ef3ca6161b9.png" width="418" />
+
+(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.)
+
+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!
+
+## Under the hood
+
+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/).
+
+## More Info
+
+Visit [githubnext/blocks](https://blocks.githubnext.com/githubnext/blocks) for a full tutorial, documentation, and examples.
+
+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:
+
+> 👋 https://discord.gg/githubnext
+## License
+
+MIT
+
+✌️ ❤️
+_GitHub Next_

README.md

@@ -1,45 +1,14 @@
-# GitHub Blocks Template
+# Kerhub Blocks
 
-Use this repository as a starter template for building your own Blocks.
-## Quickstart
+> GitHub Blocks are under technical preview
 
-> 🛑 Currently, you must be flagged into the [GitHub Blocks Technical Preview](https://blocks.githubnext.com) in order to develop blocks. There is no "offline" development mode at this time.
 
-Fork this repo using the [`Use this template`](https://github.com/githubnext/blocks-template/generate) button above:
+## Blocks
 
-!["Use this template" button](https://user-images.githubusercontent.com/8978670/144893319-5d45ab5c-12c0-42b4-99f8-97f658deb03b.png)
+### Swagger
 
-Then, clone _your_ repo (not [this one!](https://github.com/githubnext/blocks-template)) and get ready for action:
+Provides an UI interface for your yml/json swagger files.
 
-```bash
-yarn # install dependencies
-yarn start # start the dev server
-# Or use npm, pnpm, you know the drill
-```
+## Technical documentation
 
-When you visit [localhost:4000](https://localhost:4000) in your browser, you'll be
-redirected to the Blocks app, but your locally-developed blocks will appear in the block picker:
-
-<img alt="Block picker" src="https://user-images.githubusercontent.com/56439/181648955-101b6567-3f9b-44b3-af99-7ef3ca6161b9.png" width="418" />
-
-(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.)
-
-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!
-
-## Under the hood
-
-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/).
-
-## More Info
-
-Visit [githubnext/blocks](https://blocks.githubnext.com/githubnext/blocks) for a full tutorial, documentation, and examples.
-
-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:
-
-> 👋 https://discord.gg/githubnext
-## License
-
-MIT
-
-✌️ ❤️
-_GitHub Next_
+[Project Documentation](DOCUMENTATION.md)

blocks.config.json

@@ -1,20 +1,11 @@
 [
   {
     "type": "file",
-    "id": "file-block",
-    "title": "Example File Block",
-    "description": "A basic file block",
-    "entry": "blocks/example-file-block/index.tsx",
-    "matches": ["*"],
-    "example_path": "https://github.com/facebook/react/blob/main/packages/react-dom/index.js"
-  },
-  {
-    "type": "folder",
-    "id": "folder-block",
-    "title": "Example Folder Block",
-    "description": "A basic folder block",
-    "entry": "blocks/example-folder-block.tsx",
-    "matches": ["*"],
-    "example_path": "https://github.com/githubocto/flat"
+    "id": "swagger",
+    "title": "Swagger UI",
+    "description": "Visualize APIs defined in Swagger 2.0 or OAS 3.0",
+    "entry": "blocks/swagger/index.tsx",
+    "matches": ["*.json", "*.yml"],
+    "example_path": "https://github.com/gothinkster/realworld/blob/main/api/openapi.yml"
   }
 ]

blocks/example-file-block/index.css

@@ -0,0 +1,11 @@
+import { FileBlockProps } from "@githubnext/blocks";
+import SwaggerUI from 'swagger-ui-react';
+import 'swagger-ui-react/swagger-ui.css';
+
+export default function (props: FileBlockProps) {
+  const { content } = props;
+
+  return (
+      <SwaggerUI spec={content} />
+  );
+}

blocks/example-file-block/index.tsx

@@ -1,6 +1,6 @@
 {
-  "name": "custom-block-template",
-  "version": "0.0.0",
+  "name": "kerhub-blocks",
+  "version": "1.0.0",
   "license": "MIT",
   "scripts": {
     "start": "blocks start",
@@ -10,6 +10,10 @@
   "dependencies": {
     "@githubnext/blocks": "^2.3.5",
     "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react-dom": "^18.1.0",
+    "swagger-ui-react": "^4.15.5"
+  },
+  "devDependencies": {
+    "@types/swagger-ui-react": "^4.11.0"
   }
 }