docs: gif dropdowns and link video and example project FUI-1711 (#86)

* docs: put some gifs behind a dropdown section FUI-1711
* docs(custom-elements-lsp): put some gifs behind dropdown section FUI-1711
* docs(cep-fast-plugin): put some gifs behind dropdown section FUI-1711
* docs: add links to example project and video to readme FUI-1711
* docs: move quickstart example into its own section FUI-1711

README.md

@@ -12,6 +12,10 @@ This repository contains multiple packages which can be used to work with [Custo
 
 Any editor/IDE configured as an LSP client using the instance of tsserver which this plugin is installed to _should_ be compatible.
 
+## Quickstart Example
+
+**A simple setup in your project should take less than five minutes.** Follow along with a video [here](https://www.loom.com/share/3dfdb245cbfc4fc1a166df8b19c123a5?sid=c478ca86-f0ba-4cfe-af9d-7ee6d30e26c6) and look at [this example project](https://github.com/genesiscommunitysuccess/cep-setup-example) and see the [changeset required to enable the LSP](https://github.com/genesiscommunitysuccess/cep-setup-example/pull/2/files).
+
 ## Packages
 
 ### Custom Elements LSP Plugin
@@ -23,7 +27,14 @@ npm i @genesiscommunitysuccess/custom-elements-lsp --save-dev
 
 The [CEP](./packages/core/custom-elements-lsp/README.md) is the primary package of the monorepo, and is a plugin for the TypeScript language server which adds in support for custom elements.
 
-![Autocompletion of custom element tag names](./docs/custom-elements-lsp/base_ce_completion.gif "Custom Element Completion") ![Autocompletion of html in neovim](./docs/custom-elements-lsp/vim_tagname_quicklook.gif "Element Intellisense in NeoVim") ![Autocompletion of custom element attribute](./docs/custom-elements-lsp/base_attr_completion.gif "Attribute Completion") ![Autocompletion of custom element in neovim](./docs/custom-elements-lsp/vim_ce.gif "Custom Element in NeoVim") ![Diagnostics of invalid attributes on a custom element](./docs/custom-elements-lsp/base_invalid_attr.gif "Diagnostics") ![Jumping to definition source file of a custom element](./docs/custom-elements-lsp/base_jump_to_definition.gif "Jump to Definition")
+<img src="./docs/custom-elements-lsp/vim_tagname_quicklook.gif" alt="Element Intellisense in NeoVim">
+<details>
+    <summary>Show more examples</summary>
+    <br>
+    <img src="./docs/custom-elements-lsp/base_ce_completion.gif" alt="Custom Element Completion">
+    <img src="./docs/custom-elements-lsp/vim_ce.gif" alt="Custom Element in NeoVim">
+    <img src="./docs/custom-elements-lsp/base_jump_to_definition.gif" alt="Jump to Definition">
+</details>
 
 ### CEP FAST Plugin
 
@@ -35,8 +46,14 @@ npm i @genesiscommunitysuccess/cep-fast-plugin --save-dev
 
 The [FAST Plugin](./packages/core/cep-fast-plugin/README.md) for the CEP enables https://www.fast.design/ enhancements. Examples of this is using the `:prop` syntax for property bindings, and `?attr` syntax for boolean attributes.
 
-
-![Property binding autocompletion](./docs/cep-fast-plugin/fast_property_binding.gif "Property Binding Autocompletion") ![Boolean attribute autocompletion](./docs/cep-fast-plugin/fast_boolean_attr_binding.gif "Boolean Attribute Binding Autocompletion") ![Event binding autocompletion](./docs/cep-fast-plugin/fast_event_binding.gif "Event Binding Autocompletion") ![Extra quickinfo functionality](./docs/cep-fast-plugin/fast_quicklook.gif "Quickinfo Extended Functionality")
+<img src="./docs/cep-fast-plugin/fast_property_binding.gif" alt="Property Binding Autocompletion">
+<details>
+    <summary>Show more examples</summary>
+    <br>
+    <img src="./docs/cep-fast-plugin/fast_boolean_attr_binding.gif" alt="Boolean Attribute Binding Autocompletion">
+    <img src="./docs/cep-fast-plugin/fast_event_binding.gif" alt="Event Binding Autocompletion">
+    <img src="./docs/cep-fast-plugin/fast_quicklook.gif" alt="Quickinfo Extended Functionality">
+</details>
 
 ### Analyzer Import Alias Plugin
 

packages/core/cep-fast-plugin/README.md

@@ -10,7 +10,14 @@ This is a [@genesiscommunitysuccess/custom-elements-lsp](https://www.npmjs.com/p
 * Support for boolean attribute bindings in templates `?attr`.
 * Support for event bindings autocompletion and diagnostics for `@events`. Extra info in quickinfo window.
 
-![Property binding autocompletion](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/cep-fast-plugin/fast_property_binding.gif "Property Binding Autocompletion") ![Boolean attribute autocompletion](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/cep-fast-plugin/fast_boolean_attr_binding.gif "Boolean Attribute Binding Autocompletion") ![Event binding autocompletion](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/cep-fast-plugin/fast_event_binding.gif "Event Binding Autocompletion") ![Extra quickinfo functionality](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/cep-fast-plugin/fast_quicklook.gif "Quickinfo Extended Functionality")
+<img src="https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/cep-fast-plugin/fast_property_binding.gif" alt="Property Binding Autocompletion">
+<details>
+    <summary>Show more examples</summary>
+    <br>
+    <img src="https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/cep-fast-plugin/fast_boolean_attr_binding.gif" alt="Boolean Attribute Binding Autocompletion">
+    <img src="https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/cep-fast-plugin/fast_event_binding.gif" alt="Event Binding Autocompletion">
+    <img src="https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/cep-fast-plugin/fast_quicklook.gif" alt="Quickinfo Extended Functionality">
+</details>
 
 ## Setup
 

packages/core/custom-elements-lsp/README.md

@@ -14,11 +14,30 @@ Install this TypeScript plugin in your project to enhance your LSP enabled edito
 
 Any editor/IDE configured as an LSP client using the instance of tsserver which this plugin is installed to _should_ be compatible.
 
-![Autocompletion of custom element tag names](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/base_ce_completion.gif "Custom Element Completion") ![Autocompletion of custom element attribute](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/base_attr_completion.gif "Attribute Completion") ![Diagnostics of invalid attributes on a custom element](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/base_invalid_attr.gif "Diagnostics") ![Jumping to definition source file of a custom element](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/base_jump_to_definition.gif "Jump to Definition")
+## Quickstart Example
+
+**A simple setup in your project should take less than five minutes.** Follow along with a video [here](https://www.loom.com/share/3dfdb245cbfc4fc1a166df8b19c123a5?sid=c478ca86-f0ba-4cfe-af9d-7ee6d30e26c6) and look at [this example project](https://github.com/genesiscommunitysuccess/cep-setup-example) and see the [changeset required to enable the LSP](https://github.com/genesiscommunitysuccess/cep-setup-example/pull/2/files).
+
+## Demos
+
+<img src="https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/base_ce_completion.gif" alt="Custom Element Completion">
+<details>
+    <summary>Show more examples</summary>
+    <br>
+    <img src="https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/base_attr_completion.gif" alt="Attribute Completion">
+    <img src="https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/base_invalid_attr.gif" alt="Diagnostics">
+    <img src="https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/base_jump_to_definition.gif" alt="Jump to Definition">
+</details>
 
 Quicklook information is also provided, as well as IntelliSense for standard HTML elements. As previously stated, you can use any LSP enabled editor, such as Vim/NeoVim with LSP plugins for example.
 
-![Autocompletion and quicklook of a standard HTML element in vim editor](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/vim_tagname_quicklook.gif "Element IntelliSense in NeoVim") ![A second example of autocompletion and quicklook of a standard HTML element in vim editor](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/vim_tagname_quicklook_two.gif "Another Example") ![An example of autocompletion and quicklook of a custom element in vim editor](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/vim_ce.gif "Custom Element in NeoVim")
+<img src="https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/vim_ce.gif" alt="Custom Element in NeoVim">
+<details>
+    <summary>Show more examples</summary>
+    <br>
+    <img src="https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/vim_tagname_quicklook.gif" alt="Element IntelliSense in NeoVim">
+    <img src="https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/docs/custom-elements-lsp/vim_tagname_quicklook_two.gif" alt="Another Example">
+</details>
 
 There is an additional [companion plugin](https://www.npmjs.com/package/@genesiscommunitysuccess/cep-fast-plugin) which enables functionality when working with [FAST](https://www.fast.design/).