From 4a4c7efefebee2e0114bad8db9fcdd3326e0dc4c Mon Sep 17 00:00:00 2001
From: Harshil <ghagrawal17@gmail.com>
Date: Wed, 31 Mar 2021 17:47:35 +0200
Subject: [PATCH] create reusable component

---
 docs/.vuepress/components/NodeCard.vue        | 16 ++++++++++++++++
 .../nodes-library/trigger-nodes/README.md     | 19 +++++++++----------
 2 files changed, 25 insertions(+), 10 deletions(-)
 create mode 100644 docs/.vuepress/components/NodeCard.vue

diff --git a/docs/.vuepress/components/NodeCard.vue b/docs/.vuepress/components/NodeCard.vue
new file mode 100644
index 000000000..85c329ff6
--- /dev/null
+++ b/docs/.vuepress/components/NodeCard.vue
@@ -0,0 +1,16 @@
+<template>
+<div  style="display:flex; flex-wrap:wrap; justify-content:center;">
+	<div v-for="i in items" :key="i">
+	<a :href="`/nodes/${i.name}`" style="border-radius: 4px; text-decoration:none;">
+		<div style="border-radius: 4px; padding: .8em .6em; margin: .6em; text-align: center; width: 170px;">
+			<div style="width: 60px; height: 60px; line-height: 60px; margin:auto;">
+				<div style="width: 100%; height: 100%;">
+					<img :src="i.iconData.fileBuffer" style="width: 100%; height: 100%;">
+				</div>
+			</div>
+			<p>{{i.displayName}}</p>
+		</div>
+	</a>
+		</div>
+</div>
+</template>
\ No newline at end of file
diff --git a/docs/nodes/nodes-library/trigger-nodes/README.md b/docs/nodes/nodes-library/trigger-nodes/README.md
index 59eee5cca..59c8ace2e 100644
--- a/docs/nodes/nodes-library/trigger-nodes/README.md
+++ b/docs/nodes/nodes-library/trigger-nodes/README.md
@@ -2,11 +2,9 @@
 
 This section contains information about all the trigger nodes in n8n. Each node documentation contains information on the available resources and operations along with an example workflow.
 
-<div v-for="i in items">
-	<a :href="`/nodes/${i.name}`">
-    	<p>{{i.displayName}}</p>
-	</a>
-</div>
+
+<NodeCard items="items" />
+
 
 <script>
 export default {
@@ -24,11 +22,12 @@ export default {
 			body: JSON.stringify({
 				query: `
 					query GetRegularNodes{
-                        nodes(where: {categories:{name_ne: "Core Nodes"}, displayName_contains:"Trigger"}, sort:"displayName"){
-                            name
-                            displayName
-                        }
-}
+						nodes(where: {displayName_contains:"Trigger", categories:{name_ncontains: "Core Nodes"}}, sort:"displayName"){
+							name
+							displayName
+							iconData
+						}
+					}
 				`
 			})
 		})