GP: new integration (#705)

jsdelivr · Nov 12, 2024 · 2ca1056 · 2ca1056
1 parent dd744e3
commit 2ca1056
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 22 deletions.
diff --git a/src/assets/img/globalping/integrations/n8n.svg b/src/assets/img/globalping/integrations/n8n.svg
diff --git a/src/assets/less/components/tiles.less b/src/assets/less/components/tiles.less
@@ -38,6 +38,11 @@
 		}
 
 		&_img {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 48px;
+			height: 48px;
 			margin-bottom: 16px;
 		}
 

diff --git a/src/assets/less/pages/globalping/integrations.less b/src/assets/less/pages/globalping/integrations.less
@@ -60,11 +60,9 @@
 		}
 
 		.img-with-border {
-			img {
-				border-radius: 48px;
-				border: 1px solid #e7e7ee;
-				box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .04);
-			}
+			border-radius: 48px;
+			border: 1px solid #e7e7ee;
+			box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .04);
 		}
 	}
 }
diff --git a/src/views/components/tiles.html b/src/views/components/tiles.html
@@ -2,18 +2,13 @@
 	{{#each tilesData}}
 		<div class="c-tiles_tile {{#if status}}disabled{{/if}}">
 			<div class="c-tiles_tile_img" class="{{imgClass}}">
-				{{#if imgExt === '.png'}}
 					<img
 						width="{{imgW || defaultImgW}}"
 						height="{{imgH || defaultImgH}}"
 						src="{{@shared.assetsHost}}{{baseImgSrc}}/{{imgName}}{{imgExt}}"
-						srcset="{{@shared.assetsHost}}{{baseImgSrc}}/{{imgName}}@2x{{imgExt}} 2x">
-				{{else}}
-					<img
-						width="{{imgW || defaultImgW}}"
-						height="{{imgH || defaultImgH}}"
-						src="{{@shared.assetsHost}}{{baseImgSrc}}/{{imgName}}{{imgExt}}">
-				{{/if}}
+						{{#if imgExt === '.png'}}
+							srcset="{{@shared.assetsHost}}{{baseImgSrc}}/{{imgName}}@2x{{imgExt}} 2x"
+						{{/if}}>
 			</div>
 			<div class="c-tiles_tile_header">{{header}}</div>
 			<div class="c-tiles_tile_descr">{{descr}}</div>

diff --git a/src/views/pages/globalping/integrations.html b/src/views/pages/globalping/integrations.html
@@ -49,7 +49,6 @@ <h2 class="p-globalping-integrations_header_descr">
 						baseImgSrc: '/img/globalping/integrations',
 						imgName: 'bash',
 						imgExt: '.svg',
-						showBorder: true,
 						imgClass: 'img-with-border',
 					},
 					{
@@ -61,20 +60,32 @@ <h2 class="p-globalping-integrations_header_descr">
 						imgExt: '.png',
 					},
 					{
-						header: 'GitHub Bot',
-						descr: 'Interact with the Globalping network in GitHub comments for quick and simple tests.',
-						href: 'https://github.com/globalping',
+						header: 'Zapier',
+						descr: 'Build advanced automations without writing any code with our Zapier app.',
+						href: 'https://zapier.com/apps/globalping/integrations',
 						baseImgSrc: '/img/globalping/integrations',
-						imgName: 'gh-bot',
+						imgName: 'zapier',
 						imgExt: '.png',
 						externalLink: true,
 					},
 					{
-						header: 'Zapier',
-						descr: 'Build advanced automations without writing any code with our Zapier app.',
-						href: 'https://zapier.com/apps/globalping/integrations',
+						header: 'n8n node',
+						descr: 'Add Globalping to your n8n workflows and get access to thousands of probes',
+						href: 'https://www.npmjs.com/package/@globalping/n8n-nodes-globalping',
 						baseImgSrc: '/img/globalping/integrations',
-						imgName: 'zapier',
+						imgName: 'n8n',
+						imgExt: '.svg',
+						imgW: 40,
+						imgH: 40,
+						imgClass: 'img-with-border',
+						externalLink: true,
+					},
+					{
+						header: 'GitHub Bot',
+						descr: 'Interact with the Globalping network in GitHub comments for quick and simple tests.',
+						href: 'https://github.com/globalping',
+						baseImgSrc: '/img/globalping/integrations',
+						imgName: 'gh-bot',
 						imgExt: '.png',
 						externalLink: true,
 					},