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/_default/single.html

@@ -7,7 +7,9 @@
 			<nav class="docs-nav" id="docs-nav">
 				{{ $subjects := where .Site.Pages "Section" "docs" }}
 				{{ range sort $subjects "Params.position" }}
+					{{- if ne .Type "widget" -}}
 					<a href="{{ .Permalink }}" class="nav-link {{ if eq .Params.position $activePage }}active{{ end }}">{{ .Title }}</a>
+					{{- end -}}
 				{{ end }}
 			</nav>
 			<div class="mobile docs-nav">
@@ -15,7 +17,9 @@
 					<option value="" selected="selected">Select A Topic</option>
 					{{ $subjects := where .Site.Pages "Section" "docs" }}
 					{{ range sort $subjects "Params.position" }}
+						{{- if ne .Type "widget" -}}
 						<option value="{{ .Permalink }}" class="nav-link {{ if eq .Params.position $activePage }}active{{ end }}">{{ .Title }}</option>
+						{{- end -}}
 					{{ end }}
 				</select>
 			</div>
@@ -23,6 +27,9 @@
 		<article class="docs-content" id="docs-content">
 			{{ partial "edit-link" . }}
 			{{ .Content }}
+			{{- if eq .Title "Widgets" -}} <!-- Check if is widgets page, if so, add the partial "widgets" for the widget cloud functionality -->
+				{{- partial "widgets" . -}} 
+			{{- end -}}
 		</article>
 	</div>
 </div>