New design for the widgets section in the docs (#866)

* Initial commit for the new widgets section

* Placing all the widgets and refining the CSS and Hugo logic

* Initial commit for the new widgets section

* Placing all the widgets and refining the CSS and Hugo logic

* Rebased and updated the info according to @verythorough contribution

* Fixing the yaml codes for the relation and select widget sections

* Merging with widgets.md and app.j

* Fixing some silly mistakes (sorry!)

* Following @verythorough contributions :)

* Adding the markdown widget and fixing the widgets container background

* Adding the URL functionality and myself as a contributor :)

* Adding myself as a contributor :)

website/site/layouts/partials/footer.html

@@ -21,5 +21,8 @@ inputSelector: '.algolia-search',
 debug: false // Set debug to true if you want to inspect the dropdown
 });
 </script>
+{{- if eq .Title "Widgets" -}} <!-- Check if is widgets page, if so, add the widget cloud js script -->
+  <script src="/widgets.js"></script>
+{{- end -}}
 </body>
 </html>

website/site/layouts/partials/widgets.html

@@ -0,0 +1,14 @@
+<section class="widgets">
+    <div class="widgets__cloud">
+        {{- range $index, $widget := where .Site.RegularPages "Type" "eq" "widget" -}}
+            <span class="widgets__item {{if eq $index 0}}widgets__item_active{{end}}" data-widget-target="{{.Params.target}}">{{.Params.label}}</span>
+        {{- end -}}
+    </div>
+    <div class="widgets__container">
+        {{- range $index, $widget := where .Site.RegularPages "Type" "eq" "widget" -}}
+            <div class="widget {{if eq $index 0}}widget_open{{end}}" id="{{.Params.target}}">
+                {{.Content}}
+            </div>
+        {{- end -}}
+    </div>
+</section>