create reusable component

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>

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
+						}
+					}
 				`
 			})
 		})