From d751a20f521ec940ceed1c28c8a1a66a2edca2d2 Mon Sep 17 00:00:00 2001 From: Stephan Meijer Date: Thu, 28 May 2020 17:34:20 +0200 Subject: [PATCH] chore: update docs to include info for embedding --- README.md | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 58 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index f485f7c4..749120cd 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Testing-Playground ([demo]) +# Testing-Playground ([demo][playground]) @@ -14,8 +14,60 @@ Testing-Library makes it easy to get started with testing. But even then, it can Testing-Playground provides you with direct feedback. Trying to visualize the direct impact of adding and removing specific (aria) attributes. All to give you some visual support while learning about the importance of aria roles, labels, and attributes. -[testing-library/dom]: https://testing-library.com/docs/dom-testing-library/example-intro -[demo]: https://testing-playground.com +## Embedding + +[Testing-Playground][playground] can also be embedded. There is are two embed modes. Manual integration, and `oembed`. + +### Oembed + +To get started with `oembed`, you'll simply need to copy / paste your direct playground links into a supporting platform. + +### Manual integration ([demo][embed-demo]) + +Follow the following steps if you wish to have an interactive playground on your website. + +Add the following snippet directly before your closing `` tag: + +```html + +``` + +Create a template element, in which you add to `script` tags. One for `html` and one for `javascript`. Make sure to type them correctly, as that's the what that our embedder uses to populate the different panes. + +Note that the `data-testing-playground` attribute is required as well. + +```html + +``` + +Now, you can populate the `html` and `javascript` elements: + +```html + +``` + +#### options + +To configure your playground even further, add one or more of the following attributes to your opening `