Merge pull request n8n-io#2199 from n8n-io/DOC-931-template-list

templates widget

Author: Deborah

docs/_extra/css/templates-widget.css

@@ -0,0 +1,28 @@
+.n8n-templates-widget {
+	display: flex;
+	flex-direction: column;
+}
+
+.n8n-templates-widget-template {
+	display: flex;
+	flex-direction: column;
+	border: .05rem solid var(--md-default-fg-color--lightest);
+	border-radius: 6px;
+	margin: .4em;
+	padding: 12px 16px; 
+}
+
+.n8n-templates-name {
+    margin-top: 0px;
+    margin-bottom: 24px;
+    font-size: 15px;
+}
+
+.n8n-templates-widget-more {
+	padding: 1em 0 0 0;
+}
+
+.n8n-templates-link {
+	font-weight: 600;
+    font-size: 15px;
+}

docs/integrations/builtin/app-nodes/n8n-nodes-base.asana.md

@@ -55,5 +55,8 @@ Due to changes in Asana's API, some operations in this node stopped working on 1
     * Get a user
     * Get all users
 
+
 --8<-- "_snippets/integrations/builtin/app-nodes/operation-not-supported.md"
 
+
+

docs/integrations/builtin/cluster-nodes/root-nodes/n8n-nodes-langchain.agent.md

@@ -1,19 +1,17 @@
 ---
 #https://www.notion.so/n8n/Frontmatter-432c2b8dff1f43d4b1c8d20075510fe4
-title: Agent
+title: AI Agent
 description: Documentation for the Agent node in n8n, a workflow automation platform. Includes details of operations and configuration, and links to examples and credentials information.
 ---
 
-# Agent
+# AI Agent
+
+
 
 Use the Agent node to set which agent type you want to use.
 
 On this page, you'll find the node parameters for the Agent node, and links to more resources.
 
-/// note | Examples and templates
-For usage examples and templates to help you get started, refer to n8n's [Agent integrations](https://n8n.io/integrations/agent/){:target=_blank .external-link} page.
-///
-
 /// note | Connect a tool
 You must connect at least one tool sub-node.
 ///
@@ -207,9 +205,11 @@ The input from the chat. This is the user's query, also known as the prompt.
 
 --8<-- "_snippets/integrations/builtin/cluster-nodes/langchain-root-nodes/return-intermediate-steps.md"
 
-## Related resources
+## Templates and examples
+
+[[ templatesWidget(title, page) ]]
 
-View [example workflows and related content](https://n8n.io/integrations/agent/){:target=_blank .external-link} on n8n's website.
+## Related resources
 
 Refer to [LangChain's documentation on agents](https://js.langchain.com/docs/modules/agents/agent_types/){:target=_blank .external-link} for more information about the service.
 

docs/integrations/builtin/core-nodes/n8n-nodes-base.aggregate.md

@@ -31,6 +31,8 @@ For usage examples and templates to help you get started, refer to n8n's [Aggreg
 	* **Options** > **Add Field**: use this to add the setting:
 		* **Include Binaries**: include binary data from the input in the new output.
 
+
+
 ## Related resources
 
 View [example workflows and related content](https://n8n.io/integrations/aggregate/){:target=_blank .external-link} on n8n's website.

document-templates/app-nodes.md

@@ -39,22 +39,22 @@ On this page, you'll find a list of operations the _Name_ node supports, and lin
 You can find authentication information for this node [here](/integrations/builtin/credentials/_Name_/).
 ///
 
-///  note  | Examples and templates
-For usage examples and templates to help you get started, refer to n8n's [_Name_'s integrations](https://n8n.io/integrations/_Name_/){:target=_blank .external-link} page.
-///
 
 ## Operations
 
 * _Bullet list_
 * _Of available operations_.
 
+## Templates and examples
+
+<!-- see https://www.notion.so/n8n/Pull-in-templates-for-the-integrations-pages-37c716837b804d30a33b47475f6e3780 -->
+[[ templatesWidget(title, page) ]]
+
 ## Related resources
 
 <!-- provide a link to the trigger node docs, if there is a trigger node for this service -->
 n8n provides a trigger node for _Name_. You can find the trigger node docs [here](/integrations/builtin/trigger-nodes/n8n-nodes-base._Name_trigger/).
 
-<!-- add a link to the node page on n8n's website. For example: https://n8n.io/integrations/356-gmail/ -->
-View [example workflows and related content](https://n8n.io/integrations/_slug_/){:target=_blank .external-link} on n8n's website.
 
 <!-- add a link to the service's documentation. This should usually go direct to the API docs -->
 Refer to [_Name_'s documentation](){:target=_blank .external-link} for more information about the service.

document-templates/cluster-nodes.md

@@ -16,16 +16,18 @@ On this page, you'll find a list of operations the _Name_ node supports, and lin
 ///  note  | Credentials
 You can find authentication information for this node [here](/integrations/builtin/credentials/_Name_/).
 ///
-///  note  | Examples and templates
-For usage examples and templates to help you get started, refer to n8n's [_Name_'s integrations](https://n8n.io/integrations/_Name_/){:target=_blank .external-link} page.
-///	
+
 ## Node parameters
 
 * _Bullet list_
 * _Of available operations_.
 
+## Templates and examples
+
+<!-- see https://www.notion.so/n8n/Pull-in-templates-for-the-integrations-pages-37c716837b804d30a33b47475f6e3780 -->
+[[ templatesWidget(title, page) ]]
+
 ## Related resources
 
-View [example workflows and related content](https://n8n.io/integrations/_Name_/){:target=_blank .external-link} on n8n's website.
 
 Refer to [_Name_'s documentation](){:target=_blank .external-link} for more information about the service.

document-templates/core-nodes.md

@@ -32,9 +32,7 @@ _Briefly summarize the functionality._
 You can find authentication information for this node [here](/integrations/builtin/credentials/_Name_/).
 ///
 
-/// note | Examples and templates
-For usage examples and templates to help you get started, refer to n8n's [_Name_ integrations](https://n8n.io/integrations/_Name_/){:target=_blank .external-link} page.
-///
+
 
 ## Node parameters
 
@@ -47,4 +45,9 @@ You should include: quirks, pain points, complex topics that trip people up
 You should not include: basic usage examples
 -->
 
+## Templates and examples
+
+<!-- see https://www.notion.so/n8n/Pull-in-templates-for-the-integrations-pages-37c716837b804d30a33b47475f6e3780 -->
+[[ templatesWidget(title, page) ]]
+
 

document-templates/trigger-nodes.md

@@ -39,9 +39,7 @@ On this page, you'll find a list of events the _Name_ trigger node can respond t
 ///  note  | Credentials
 You can find authentication information for this node [here](/integrations/builtin/credentials/_Name_/).
 ///
-///  note  | Examples and templates
-For usage examples and templates to help you get started, refer to n8n's [_Name_ integrations](https://n8n.io/integrations/_Name_/){:target=_blank .external-link} page.
-///
+
 ## Events
 
 * _Bullet list_

main.py

@@ -1,10 +1,40 @@
 import requests
-import urllib.parse
 import json
+import re
+import traceback
+import urllib.parse
 
 def define_env(env):
 
-	@env.macro
+	@env.macro	
+	def templatesWidget(title, page):
+		node_for_template = title.replace(' ', '+')
+		getLastBitOfUrl = re.search("(\.)(.*)(\/)$", page.abs_url)
+		node_for_integrations_slug = getLastBitOfUrl.group(2)
+		response = requests.get(url = f'https://api.n8n.io/api/templates/search?rows=3&search=&category=&apps={node_for_template}&page=1&sort=views:desc')
+		data = response.json()
+		# not all nodes have three templates
+		try:
+			workflows = data["workflows"][:3]
+			workflow_one, workflow_two, workflow_three = workflows
+		except:
+			return f'<span class="n8n-templates-widget-more"><a href="https://n8n.io/integrations/{node_for_integrations_slug}/" target="_blank">Browse {title} integration templates</a>, or <a href="https://n8n.io/workflows/" target="_blank">search all templates</a></span>'
+		# the data is not trustworthy
+		try:
+			workflow_one_title = workflow_one["name"]
+			workflow_one_user = workflow_one["user"]["name"]
+			workflow_one_url = f'https://n8n.io/workflows/{workflow_one["id"]}-{workflow_one["name"].lower().replace(" ", "-").replace(":", "")}/'
+			workflow_two_title = workflow_two["name"]
+			workflow_two_user = workflow_two["user"]["name"]
+			workflow_two_url = f'https://n8n.io/workflows/{workflow_two["id"]}-{workflow_two["name"].lower().replace(" ", "-").replace(":", "")}/'
+			workflow_three_title = workflow_three["name"]
+			workflow_three_url = f'https://n8n.io/workflows/{workflow_three["id"]}-{workflow_three["name"].lower().replace(" ", "-").replace(":", "")}/'
+			workflow_three_user = workflow_three["user"]["name"]
+		except:
+			return f'<span class="n8n-templates-widget-more"><a href="https://n8n.io/integrations/{node_for_integrations_slug}/" target="_blank">Browse all {title} integration templates</a>, or <a href="https://n8n.io/workflows/" target="_blank">search all templates</a></span>'		
+
+		return f'<div class="n8n-templates-widget"><div class="n8n-templates-widget-template"><strong>{workflow_one_title}</strong><p class="n8n-templates-name">by {workflow_one_user}</p><a class="n8n-templates-link" href="{workflow_one_url}" target="_blank">View template details</a></div><div class="n8n-templates-widget-template"><strong>{workflow_two_title}</strong><p class="n8n-templates-name">by {workflow_two_user}</p><a class="n8n-templates-link" href="{workflow_two_url}" target="_blank">View template details</a></div><div class="n8n-templates-widget-template"><strong>{workflow_three_title}</strong><p class="n8n-templates-name">by {workflow_three_user}</p><a class="n8n-templates-link" href="{workflow_three_url}" target="_blank">View template details</a></div><span class="n8n-templates-widget-more"><a href="https://n8n.io/integrations/{node_for_integrations_slug}/" target="_blank">Browse {title} integration templates</a>, or <a href="https://n8n.io/workflows/" target="_blank">search all templates</a></span></div>'
+	
 	def workflowDemo(workflow_endpoint):
 		r = requests.get(url = workflow_endpoint)
 		wf_data = r.json()

mkdocs.yml

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