Skip to content
This repository was archived by the owner on Apr 21, 2026. It is now read-only.

Commit 8b12935

Browse files
SirDanySirDany
authored
Merge pull request #13 from secureCodeBox/feature/v2-improve-hooks-integration
Refactored the integrations page layout
2 parents a1591bd + fe99fca commit 8b12935

16 files changed

Lines changed: 274 additions & 55 deletions

‎gatsby-config.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ module.exports = {
100100
name: `secureCodeBox-v2-alpha`,
101101
remote: `https://github.com/secureCodeBox/secureCodeBox-v2-alpha`,
102102
branch: `master`,
103-
patterns: `scanners`,
103+
patterns: [`scanners`, `hooks`, `docs`],
104104
},
105105
},
106106
{
@@ -109,6 +109,13 @@ module.exports = {
109109
name: `scanners`,
110110
path: `${__dirname}/.cache/gatsby-source-git/secureCodeBox-v2-alpha/scanners`,
111111
}
112+
},
113+
{
114+
resolve: `gatsby-source-filesystem`,
115+
options: {
116+
name: `hooks`,
117+
path: `${__dirname}/.cache/gatsby-source-git/secureCodeBox-v2-alpha/hooks`,
118+
}
112119
}
113120
],
114121
};

‎src/components/IntegrationCard.js‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import React from 'react';
2+
import { withPrefix } from 'gatsby';
3+
4+
const IntegrationCard = (props) => {
5+
return (
6+
<div className="row integration-card hoverable">
7+
<div className="col-xl-2 col-lg-3 col-md-4 col-sm-4 col-4 integration-card-scanner-icon my-auto">
8+
<img
9+
className="scanner-icon"
10+
src={withPrefix(
11+
'/integrationIcons/' + props.frontmatter.title + '.svg'
12+
)}
13+
alt="persistence provider icon"
14+
></img>
15+
</div>
16+
<div className="col-xl-8 col-lg-6 col-md-8 col-sm-8 col-8">
17+
<h2 className="integration-card-title">
18+
{props.frontmatter.title}
19+
{props.frontmatter.category === 'scanner'
20+
? props.frontmatter.type.length > 0 && (
21+
<strong> ({props.frontmatter.type}) </strong>
22+
)
23+
: ''}
24+
</h2>
25+
<div className="integration-card-content">
26+
<p>{props.frontmatter.usecase}</p>
27+
</div>
28+
</div>
29+
<div className="col-xl-2 col-lg-3 col-md-12 col-sm-12 col-12 integration-card-scanner-icon my-auto">
30+
<div className="row">
31+
<div className="col-lg-12 col-md-6 col-sm-6 col-6">
32+
{props.frontmatter.state.length > 0 &&
33+
props.frontmatter.state === 'released' && (
34+
<img
35+
className="release"
36+
src={withPrefix(
37+
'https://img.shields.io/badge/State-' +
38+
props.frontmatter.state +
39+
'-green'
40+
)}
41+
alt="release version"
42+
></img>
43+
)}
44+
{props.frontmatter.state.length > 0 &&
45+
props.frontmatter.state === 'developing' && (
46+
<img
47+
className="release"
48+
src={withPrefix(
49+
'https://img.shields.io/badge/State-' +
50+
props.frontmatter.state +
51+
'-yellow'
52+
)}
53+
alt="release version"
54+
></img>
55+
)}
56+
{props.frontmatter.state.length > 0 &&
57+
props.frontmatter.state === 'roadmap' && (
58+
<img
59+
className="release"
60+
src={withPrefix(
61+
'https://img.shields.io/badge/State-' +
62+
props.frontmatter.state +
63+
'-lightgray'
64+
)}
65+
alt="release version"
66+
></img>
67+
)}
68+
</div>
69+
<div className="col-lg-12 col-md-6 col-sm-6 col-6">
70+
{props.frontmatter.appVersion && (
71+
<img
72+
className="release"
73+
src={withPrefix(
74+
'https://img.shields.io/badge/App_Version-' +
75+
props.frontmatter.appVersion +
76+
'-blue'
77+
)}
78+
alt="release version"
79+
></img>
80+
)}
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
);
86+
};
87+
88+
export default IntegrationCard;

‎src/pages/integrations/index.js‎

Lines changed: 91 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React from 'react';
2-
import { graphql, withPrefix, Link } from 'gatsby';
2+
import { graphql, Link } from 'gatsby';
33
import SEO from '../../components/SEO';
44
import Layout from '../../components/Layout';
5+
import IntegrationCard from '../../components/IntegrationCard';
56

6-
const Integrations = props => {
7+
const Integrations = (props) => {
78
const scanner = props.data.scanner.edges;
9+
const hook = props.data.hook.edges;
810
const persistenceProvider = props.data.persistenceProvider.edges;
911

1012
return (
@@ -15,84 +17,88 @@ const Integrations = props => {
1517
<div className="row">
1618
<div className="col-12">
1719
<h1>Integrations</h1>
18-
<h2>Out of the Box</h2>
20+
<h2>Out of the Box and ready to use</h2>
1921
<p>
2022
Each Scanner is an individual tool. We took no part in building
2123
them and did not adjust them for our purposes, which is great,
2224
because, like so we can provide them as they are and ready for
2325
use.
2426
</p>
27+
<p>
28+
If you miss your favorite security Scanner or tool you can
29+
easily integrate it by adding a contribution (GitHub Pull
30+
Request) or contact us if you want help with it.
31+
</p>
2532
</div>
2633
</div>
2734
</div>
2835
</div>
29-
<div className="container pb-2 pb-md-3">
30-
<div className="row justify-content-center">
36+
<div className="container pb-2 pb-md-3">
37+
<div className="row left-content-center">
3138
<div className="col-12">
3239
<h2 className="title-3 text-dark mb-2">Scanner</h2>
40+
<p>
41+
Each Scanner is an individual tool. We took no part in building
42+
them and did not adjust them for our purposes, which is great,
43+
because, like so we can provide them as they are and ready for
44+
use.
45+
</p>
3346
</div>
3447
{scanner.map((edge, index) => (
3548
<div
3649
key={index}
37-
className="col-12 col-md-6 col-lg-6 col-sm-12 mb-2 no-highlight"
50+
className="col-12 col-md-6 col-lg-6 col-sm-12 no-highlight"
3851
>
3952
<Link to={edge.node.frontmatter.path}>
40-
<div className="feature hoverable">
41-
<div className="feature-scanner-icon">
42-
<img
43-
className="scanner-icon"
44-
src={withPrefix(
45-
'/integrationIcons/' +
46-
edge.node.frontmatter.title +
47-
'.svg'
48-
)}
49-
alt="scanner icon"
50-
></img>
51-
</div>
52-
<h2 className="feature-title">
53-
{edge.node.frontmatter.title}
54-
</h2>
55-
<div className="feature-content">
56-
<p>{edge.node.frontmatter.usecase}</p>
57-
</div>
58-
<div className="feature-scanner-icon-right-gap"></div>
59-
</div>
53+
<IntegrationCard frontmatter={edge.node.frontmatter} />
6054
</Link>
6155
</div>
6256
))}
6357
</div>
6458
</div>
6559
<div className="container pb-2 pb-md-3">
66-
<div className="row justify-content-center">
60+
<div className="row left-content-center">
6761
<div className="col-12">
68-
<h2 className="title-3 text-dark mb-2">Persistence Provider</h2>
62+
<h2 className="title-3 text-dark ">Persistence Provider</h2>
63+
<p>
64+
Each Scanner is an individual tool. We took no part in building
65+
them and did not adjust them for our purposes, which is great,
66+
because, like so we can provide them as they are and ready for
67+
use.
68+
</p>
6969
</div>
70-
{persistenceProvider.map(edge => (
70+
{persistenceProvider.map((edge, index) => (
7171
<div
72-
key={edge.node.id}
72+
key={index}
7373
className="col-12 col-md-6 col-lg-6 col-sm-12 mb-2 no-highlight"
7474
>
7575
<Link to={edge.node.frontmatter.path}>
76-
<div className="feature hoverable">
77-
<div className="feature-scanner-icon">
78-
<img
79-
className="scanner-icon"
80-
src={withPrefix(
81-
'/integrationIcons/' +
82-
edge.node.frontmatter.title +
83-
'.svg'
84-
)}
85-
alt="persistence provider icon"
86-
></img>
87-
</div>
88-
<h2 className="feature-title">
89-
{edge.node.frontmatter.title}
90-
</h2>
91-
<div className="feature-content">
92-
<p>{edge.node.frontmatter.usecase}</p>
93-
</div>
94-
<div className="feature-scanner-icon-right-gap"></div>
95-
</div>
76+
<IntegrationCard frontmatter={edge.node.frontmatter} />
77+
</Link>
78+
</div>
79+
))}
80+
</div>
81+
</div>
82+
<div className="container pb-2 pb-md-3">
83+
<div className="row left-content-center">
84+
<div className="col-12">
85+
<h2 className="title-3 text-dark mb-2">
86+
Data Processing and Integration Hooks
87+
</h2>
88+
<p>
89+
Each Scanner is an individual tool. We took no part in building
90+
them and did not adjust them for our purposes, which is great,
91+
because, like so we can provide them as they are and ready for
92+
use.
93+
</p>
94+
</div>
95+
{hook.map((edge, index) => (
96+
<div
97+
key={index}
98+
className="col-12 col-md-6 col-lg-6 col-sm-12 no-highlight"
99+
>
100+
<Link to={edge.node.frontmatter.path}>
101+
<IntegrationCard frontmatter={edge.node.frontmatter} />
96102
</Link>
97103
</div>
98104
))}
@@ -116,24 +122,56 @@ export const query = graphql`
116122
path
117123
category
118124
usecase
125+
type
126+
state
127+
appVersion
119128
}
120129
}
121130
}
122131
}
123-
persistenceProvider: allMarkdownRemark(
132+
hook: allMarkdownRemark(
124133
filter: {
125-
fileAbsolutePath: { regex: "/integrations/persistence-provider/" }
134+
frontmatter: {
135+
category: { eq: "hook" }
136+
type: { ne: "persistenceProvider" }
137+
}
126138
}
139+
sort: { fields: [frontmatter___title], order: ASC }
127140
) {
128141
edges {
129142
node {
143+
html
130144
frontmatter {
131145
title
132146
path
133147
category
148+
usecase
149+
type
150+
state
134151
}
135-
id
152+
}
153+
}
154+
}
155+
persistenceProvider: allMarkdownRemark(
156+
filter: {
157+
frontmatter: {
158+
category: { eq: "hook" }
159+
type: { eq: "persistenceProvider" }
160+
}
161+
}
162+
sort: { fields: [frontmatter___title], order: ASC }
163+
) {
164+
edges {
165+
node {
136166
html
167+
frontmatter {
168+
title
169+
path
170+
category
171+
usecase
172+
type
173+
state
174+
}
137175
}
138176
}
139177
}

‎src/scss/components/_integration-card.scss‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
.integration-card {
2+
border: 2px solid #eaeaea;
3+
margin-bottom: 1rem;
4+
margin-right: 1rem;
5+
padding: 1rem;
6+
background-color: #ffffff;
7+
text-align: center;
8+
min-height: 125px;
9+
.integration-card-image {
10+
width: 80px;
11+
height: 80px;
12+
text-align: center;
13+
}
14+
img {
15+
width: 100%;
16+
height: auto;
17+
}
18+
.integration-card-title {
19+
color: $secondary;
20+
font-size: 1.4rem;
21+
font-weight: 300;
22+
line-height: 1.2;
23+
strong {
24+
font-size: 1.2rem;
25+
font-weight: 600;
26+
}
27+
}
28+
.integration-card-content {
29+
margin-bottom: 0;
30+
p {
31+
margin: 0;
32+
color: $secondary;
33+
font-size: 1rem;
34+
strong {
35+
text-transform: uppercase;
36+
font-size: 0.7rem;
37+
font-weight: 700;
38+
}
39+
em {
40+
color: $primary;
41+
font-style: normal;
42+
}
43+
}
44+
}
45+
.integration-card-scanner-icon {
46+
47+
justify-content: center;
48+
align-items: center;
49+
50+
img.scanner-icon {
51+
width: 80px;
52+
height: 40px;
53+
padding-left: 20px;
54+
padding-right: 20px;
55+
}
56+
img.release {
57+
width: 70px;
58+
height: 15px;
59+
}
60+
}
61+
}
62+
63+
.integration-card.hoverable {
64+
cursor: pointer;
65+
&:hover {
66+
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
67+
text-decoration: none;
68+
}
69+
}
70+
71+
.no-highlight {
72+
> a {
73+
text-decoration: none;
74+
}
75+
}

0 commit comments

Comments
 (0)