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

Commit 4cb772a

Browse files
J12934J12934
committed
Refactor examples and ensure example files are isolated to each page
1 parent f2444a5 commit 4cb772a

5 files changed

Lines changed: 97 additions & 81 deletions

File tree

‎gatsby-node.js‎

Lines changed: 43 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,9 @@ exports.createPages = ({ graphql, actions }) => {
5454
}
5555
}
5656
persistenceProvider: allMarkdownRemark(
57-
filter: { fileAbsolutePath: { regex: "/integrations/persistence-provider/" } }
57+
filter: {
58+
fileAbsolutePath: { regex: "/integrations/persistence-provider/" }
59+
}
5860
) {
5961
edges {
6062
node {
@@ -68,15 +70,15 @@ exports.createPages = ({ graphql, actions }) => {
6870
}
6971
}
7072
}
71-
`).then(result => {
73+
`).then((result) => {
7274
result.data.getStarted.edges.forEach(({ node }) => {
7375
const component = path.resolve("src/templates/getStarted.js");
7476
createPage({
7577
path: node.frontmatter.path,
7678
component,
7779
context: {
78-
id: node.id
79-
}
80+
id: node.id,
81+
},
8082
});
8183
});
8284
result.data.docs.edges.forEach(({ node }) => {
@@ -85,28 +87,48 @@ exports.createPages = ({ graphql, actions }) => {
8587
path: node.frontmatter.path,
8688
component,
8789
context: {
88-
id: node.id
89-
}
90+
id: node.id,
91+
},
9092
});
9193
});
9294
result.data.scanner.edges.forEach(({ node }) => {
95+
console.log(node.frontmatter);
9396
const component = path.resolve("src/templates/integration.js");
97+
98+
let componentName = "";
99+
if (node.frontmatter.path) {
100+
// The path consists normally like "scanners/nmap" or "hook/persistence-elastic"
101+
componentName = node.frontmatter.path.split("/")[1];
102+
}
103+
94104
createPage({
95105
path: `integrations/${node.frontmatter.path}`,
96106
component,
97107
context: {
98-
id: node.id
99-
}
108+
id: node.id,
109+
exampleFilter: `/${componentName}/examples/`,
110+
},
100111
});
101112
});
102113
result.data.persistenceProvider.edges.forEach(({ node }) => {
103114
const component = path.resolve("src/templates/integration.js");
115+
116+
let componentName = "";
117+
if (node.frontmatter.path) {
118+
// The path consists normally like "scanners/nmap" or "hook/persistence-elastic"
119+
componentName = node.frontmatter.path.split("/")[1];
120+
}
121+
122+
console.log("filter");
123+
console.log(`/${componentName}/examples/`);
124+
104125
createPage({
105-
path:`integrations/${node.frontmatter.path}`,
126+
path: `integrations/${node.frontmatter.path}`,
106127
component,
107128
context: {
108-
id: node.id
109-
}
129+
id: node.id,
130+
exampleFilter: `/${componentName}/examples/`,
131+
},
110132
});
111133
});
112134
resolve();
@@ -118,11 +140,18 @@ exports.createPages = ({ graphql, actions }) => {
118140
exports.onCreateNode = ({ node, actions }) => {
119141
const { createNodeField } = actions;
120142

121-
if (node.internal.type === `File` && (node.base === `scan.yaml` || node.base === `findings.yaml`)) {
143+
if (
144+
node.internal.type === `File` &&
145+
(node.base === `scan.yaml` || node.base === `findings.yaml`)
146+
) {
122147
fs.readFile(node.absolutePath, undefined, (_err, buf) => {
123148
createNodeField({ node, name: `content`, value: buf.toString() });
124149
});
125150
createNodeField({ node, name: `fileName`, value: node.base });
126-
createNodeField({ node, name: `scanTarget`, value: node.relativeDirectory.split('/examples/')[1] });
151+
createNodeField({
152+
node,
153+
name: `scanTarget`,
154+
value: node.relativeDirectory.split("/examples/")[1],
155+
});
127156
}
128-
}
157+
};

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"gatsby-source-filesystem": "^2.3.19",
2929
"gatsby-source-git": "^1.1.0",
3030
"gatsby-transformer-remark": "^2.8.28",
31+
"lodash": "^4.17.20",
3132
"react": "^16.13.1",
3233
"react-burger-menu": "^2.7.0",
3334
"react-dom": "^16.13.1",

‎src/components/ScannerExamples.js‎

Lines changed: 23 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,43 @@
11
import React from "react";
2-
import { useStaticQuery, graphql } from "gatsby";
32
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
43
import "react-tabs/style/react-tabs.css";
54

6-
const PREFIX = 23;
7-
export default function ScannerExamples(props) {
8-
const scanner = props.scanner.substring(PREFIX);
9-
const query = graphql`
10-
query {
11-
examples: allFile(
12-
filter: {
13-
base: { regex: "/^(findings|scan).yaml/" }
14-
extension: { eq: "yaml" }
15-
}
16-
) {
17-
edges {
18-
node {
19-
base
20-
relativeDirectory
21-
}
22-
}
23-
nodes {
24-
fields {
25-
content
26-
fileName
27-
scanTarget
28-
}
29-
}
30-
}
31-
}
32-
`;
33-
const data = useStaticQuery(query);
34-
const targets = [];
35-
const examples = [];
5+
import groupBy from "lodash/groupBy";
6+
import mapValues from "lodash/mapValues";
367

37-
const length = data.examples.edges.length;
38-
let i;
39-
for (i = 0; i < length; i++) {
40-
const edge = data.examples.edges[i];
41-
const node = data.examples.nodes[i];
42-
if (edge.node.relativeDirectory.includes(scanner)) {
43-
const target = data.examples.nodes[i].fields.scanTarget;
44-
if (!targets.includes(target)) targets.push(target);
45-
examples.push(node);
8+
export default function ScannerExamples({ examples: allExamples }) {
9+
const exampleGroups = mapValues(
10+
groupBy(allExamples, ({ scanTarget }) => scanTarget),
11+
(examples) => {
12+
/* We are reversing to ensure that the right text ist displayed for the right file */
13+
return examples.reverse();
4614
}
47-
}
15+
);
4816

4917
return (
5018
<div className="container-fluid">
5119
<h2 className="title">Examples</h2>
5220

53-
{targets.map((target) => (
54-
<Tabs>
55-
<h3>{target}</h3>
56-
<TabList>
57-
{/* We are reversing to ensure that the scan.yaml is shown before the findings.yaml */}
58-
{examples
59-
.filter((example) => example.fields.scanTarget === target)
60-
.reverse()
61-
.map((example, index) => (
62-
<Tab key={index}>{example.fields.fileName.split(".")[0]}</Tab>
21+
{Object.entries(exampleGroups).map(([targetName, examples]) => {
22+
return (
23+
<Tabs key={targetName}>
24+
<h3>{targetName}</h3>
25+
<TabList>
26+
{examples.map(({ fileName }) => (
27+
<Tab key={fileName}>{fileName.split(".")[0]}</Tab>
6328
))}
64-
</TabList>
29+
</TabList>
6530

66-
{/* We are reversing to ensure that the right text ist displayed for the right file */}
67-
{examples
68-
.filter((example) => example.fields.scanTarget === target)
69-
.reverse()
70-
.map((example, index) => (
71-
<TabPanel key={index}>
31+
{examples.map(({ fileName, content }) => (
32+
<TabPanel key={fileName}>
7233
<deckgo-highlight-code>
73-
<code slot="code">{example.fields.content}</code>
34+
<code slot="code">{content}</code>
7435
</deckgo-highlight-code>
7536
</TabPanel>
7637
))}
77-
</Tabs>
78-
))}
38+
</Tabs>
39+
);
40+
})}
7941
</div>
8042
);
8143
}

‎src/templates/integration.js‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,13 @@ deckDeckGoHighlightElement();
1010
const Integration = (props) => {
1111
const { title } = props.data.markdownRemark.frontmatter;
1212
const { html } = props.data.markdownRemark;
13+
1314
const scanners = props.data.scanner.edges;
1415
const persistenceProviders = props.data.persistenceProvider.edges;
1516
const hooks = props.data.hook.edges;
16-
const showExamples = props.path.includes("scanners");
17+
18+
const examples = props.data.examples.nodes.map(({ fields }) => fields);
19+
const showExamples = examples.length > 0;
1720

1821
return (
1922
<Layout bodyClass="integration">
@@ -36,7 +39,7 @@ const Integration = (props) => {
3639
className="content"
3740
dangerouslySetInnerHTML={{ __html: html }}
3841
/>
39-
{showExamples && <ScannerExamples scanner={props.path} />}
42+
{showExamples && <ScannerExamples examples={examples} />}
4043
</div>
4144
</div>
4245
</div>
@@ -45,7 +48,7 @@ const Integration = (props) => {
4548
};
4649

4750
export const query = graphql`
48-
query($id: String!) {
51+
query($id: String!, $exampleFilter: String!) {
4952
markdownRemark(id: { eq: $id }) {
5053
frontmatter {
5154
title
@@ -117,6 +120,27 @@ export const query = graphql`
117120
}
118121
}
119122
}
123+
examples: allFile(
124+
filter: {
125+
base: { regex: "/(findings|scan).yaml/" }
126+
relativeDirectory: { regex: $exampleFilter }
127+
extension: { eq: "yaml" }
128+
}
129+
) {
130+
edges {
131+
node {
132+
base
133+
relativeDirectory
134+
}
135+
}
136+
nodes {
137+
fields {
138+
content
139+
fileName
140+
scanTarget
141+
}
142+
}
143+
}
120144
}
121145
`;
122146

0 commit comments

Comments
 (0)