Updated docs for techdocs plugin (#2127)

* Updated docs for techdocs plugin * Error in example comment * Update plugins/techdocs/README.md Co-authored-by: Emma Indal <emmai@spotify.com> * Update plugins/techdocs/src/reader/README.md Co-authored-by: Emma Indal <emmai@spotify.com> * Update plugins/techdocs/src/reader/README.md Co-authored-by: Emma Indal <emmai@spotify.com> * Update plugins/techdocs/src/reader/README.md Co-authored-by: Emma Indal <emmai@spotify.com> * Update link to transformers doc to point to reader doc for now Co-authored-by: Emma Indal <emmai@spotify.com>
2020-08-27 09:52:49 +02:00
parent 9cda29cd13
commit 0b2f787699
4 changed files with 25 additions and 37 deletions
@@ -1 +1,20 @@
-# TODO
+# TechDocs Reader
+
+The TechDocs reader is a component that fetches a remote page, runs transformers on it and renders it into a shadow dom.
+
+Currently there's no easy way to customize which transformers to run or add new ones. If that is needed you would have to fork the techdocs plugin and make your changes in that fork.
+
+Transformers are functions that optionally takes in parameters from the Reader.tsx component and returns a function which gets passed the DOM of the fetched page. A very simple transformer can look like this.
+
+```typescript
+export const updateH1Text = (): Transformer => {
+  return dom => {
+    // Change the first occurance of H1 to say "TechDocs!"
+    dom.querySelector('h1')?.innerHTML = 'TechDocs!';
+
+    return dom;
+  };
+};
+```
+
+The transformers are then registered in the Reader.tsx file. They are registered in two places, one place that runs before it's attached to the actual browser DOM (preTransformers) and once after (postTransfomers). Doing modifications is faster before it's attached, but doesn't allow us to do some things, such as attaching event listeners.
@@ -1 +0,0 @@
-# TODO