Preview your Adaptive Card JSON within a GitHub repo.
🛑 Currently, you must be flagged into the GitHub Blocks Technical Preview in order to develop blocks. There is no "offline" development mode at this time.
Fork this repo using the Use this template button above:
Then, clone your repo (not this one!) and get ready for action:
yarn # install dependencies
yarn start # start the dev server
# Or use npm, pnpm, you know the drillWhen you visit localhost:4000 in your browser, you'll be redirected to the Blocks app, but your locally-developed blocks will appear in the block picker:
(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 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!
I used the adaptivecards node module to render the Adaptive Cards.
I also had to reverse-engineer the adaptivecards-designer because I didn't want to include all the features, and I couldn't figure out how to resolve the dependencies with Webpack.
I didn't know how to dynamically add the CSS files for each host (I could not call require, and could not figure it out), so I created .ts files which contain the CSS. If anybody knows how to solve this, please let me know (or submit a PR).
There are many sample .json files in my blocks repo if you want to try this Block.
Visit githubnext/blocks for a full tutorial, documentation, and examples.
MIT