add link and styling

docs/_extra/css/workflow-demo.css

@@ -0,0 +1,5 @@
+.n8n-workflow-preview {
+	background-color: var(--color-background-light);
+	border: 1px solid var(--color-foreground-base);
+	text-align: center;
+}

main.py

@@ -8,10 +8,11 @@ def define_env(env):
 	def workflowDemo(workflow_endpoint):
 		r = requests.get(url = workflow_endpoint)
 		wf_data = r.json()
+		template_url = f'https://n8n.io/workflows/{wf_data["id"]}-{wf_data["name"].lower().replace(" ", "-").replace(":", "")}/'
 		workflow_json = {
 			"nodes": wf_data['workflow']['nodes'],
 			"connections": wf_data['workflow']['connections']
 		}
 		encoded_workflow_json = urllib.parse.quote(json.dumps(workflow_json))
-		return f"<div class='workflow_preview'><n8n-demo hidecanvaserrors='true' clicktointeract='true' frame='false' collapseformobile='false' workflow='{encoded_workflow_json}'></n8n-demo></div>"
+		return f"<div class='n8n-workflow-preview'><n8n-demo hidecanvaserrors='true' clicktointeract='true' frame='false' collapseformobile='false' workflow='{encoded_workflow_json}'></n8n-demo><a href='{template_url}' target='_blank'>View template details</a></div>"
 

mkdocs.yml

@@ -82,6 +82,7 @@ extra:
 extra_css:
   - _extra/css/extra.css
   - _extra/css/macro-styles.css
+  - _extra/css/workflow-demo.css
 # https://squidfunk.github.io/mkdocs-material/customization/?h=#additional-javascript
 extra_javascript:
   - _extra/javascript/extra.js