Skip to content

Commit 268d533

Browse files
wei-harnesswei-harness
committed
fix: Tutorial and Module Boxes - Text is only HREF - closes #DLP-49
1 parent 6b8be4d commit 268d533

File tree

6 files changed

+1569
-1094
lines changed

6 files changed

+1569
-1094
lines changed

‎src/components/HarnessU/index.tsx‎

Lines changed: 78 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,95 @@
1-
import React from 'react';
2-
import clsx from 'clsx';
3-
import Link from '@docusaurus/Link';
4-
import styles from './styles.module.scss';
1+
import React from "react";
2+
import clsx from "clsx";
3+
import Link from "@docusaurus/Link";
4+
import styles from "./styles.module.scss";
55

66
// harness-platform.svg | secret-mgmt.svg
77
export default function HarnessU(): JSX.Element {
88
return (
99
<section className={styles.harnessU}>
10-
<div className="container">
11-
<h2>Become a Certified Expert with University</h2>
10+
<div className="container">
11+
<h2>Become a Certified Expert with University</h2>
1212

13-
{/* <div className={styles.subSectionName}><h3>Platform</h3></div> */}
14-
<ul className={styles.platformList}>
15-
<li>
16-
<a href="https://university.harness.io/page/self-paced-learning" target="_blank">
17-
<div className={styles.titleAndDesc}>
18-
<h4>Module-Based Paths</h4>
19-
<p>Self-paced courses to help onboarding your teams to Harness</p>
20-
</div>
21-
<div className={styles.harnessUPath}>
22-
<img src="/img/icon_univ-path.svg" className={styles.harnssUIcon} />
23-
<span>4 Paths</span>
24-
</div>
13+
{/* <div className={styles.subSectionName}><h3>Platform</h3></div> */}
14+
<ul className={styles.platformList}>
15+
<a
16+
href="https://university.harness.io/page/self-paced-learning"
17+
target="_blank"
18+
>
19+
<li>
20+
<div className={styles.titleAndDesc}>
21+
<h4>Module-Based Paths</h4>
22+
<p>
23+
Self-paced courses to help onboarding your teams to Harness
24+
</p>
25+
</div>
26+
<div className={styles.harnessUPath}>
27+
<img
28+
src="/img/icon_univ-path.svg"
29+
className={styles.harnssUIcon}
30+
/>
31+
<span>4 Paths</span>
32+
</div>
33+
</li>
2534
</a>
26-
</li>
27-
<li>
2835
<a href="https://university.harness.io/page/roles" target="_blank">
29-
<div className={styles.titleAndDesc}>
30-
<h4>Role-Based Paths</h4>
31-
<p>Developers, DevOps Engineers, SecOps Engineers, FinOps Engineers, SREs</p>
32-
</div>
33-
<div className={styles.harnessUPath}>
34-
<img src="/img/icon_univ-path.svg" className={styles.harnssUIcon} />
35-
<span>5 Roles</span>
36-
</div>
36+
<li>
37+
<div className={styles.titleAndDesc}>
38+
<h4>Role-Based Paths</h4>
39+
<p>
40+
Developers, DevOps Engineers, SecOps Engineers, FinOps
41+
Engineers, SREs
42+
</p>
43+
</div>
44+
<div className={styles.harnessUPath}>
45+
<img
46+
src="/img/icon_univ-path.svg"
47+
className={styles.harnssUIcon}
48+
/>
49+
<span>5 Roles</span>
50+
</div>
51+
</li>
3752
</a>
38-
</li>
39-
<li>
40-
<a href="https://university.harness.io/page/certifications" target="_blank">
41-
<div className={styles.titleAndDesc}>
42-
<h4>Certifications</h4>
43-
<p>Certifications in Software Delivery</p>
44-
</div>
45-
<div className={styles.harnessUPath}>
46-
<img src="/img/icon_univ-min.svg" className={styles.harnssUIcon} />
47-
<span>1 Certification</span>
48-
</div>
53+
<a
54+
href="https://university.harness.io/page/certifications"
55+
target="_blank"
56+
>
57+
<li>
58+
<div className={styles.titleAndDesc}>
59+
<h4>Certifications</h4>
60+
<p>Certifications in Software Delivery</p>
61+
</div>
62+
<div className={styles.harnessUPath}>
63+
<img
64+
src="/img/icon_univ-min.svg"
65+
className={styles.harnssUIcon}
66+
/>
67+
<span>1 Certification</span>
68+
</div>
69+
</li>
4970
</a>
50-
</li>
51-
</ul>
52-
<div className={styles.buttons}>
71+
</ul>
72+
<div className={styles.buttons}>
5373
<Link
54-
className={clsx('button button--lg', styles.heroButton)}
55-
to="https://university.harness.io">
74+
className={clsx("button button--lg", styles.heroButton)}
75+
to="https://university.harness.io"
76+
>
5677
See all at Harness University
57-
<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" className="iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
78+
<svg
79+
width="13.5"
80+
height="13.5"
81+
aria-hidden="true"
82+
viewBox="0 0 24 24"
83+
className="iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module"
84+
>
85+
<path
86+
fill="currentColor"
87+
d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
88+
></path>
89+
</svg>
5890
</Link>
5991
</div>
60-
</div>
92+
</div>
6193
</section>
6294
);
6395
}

‎src/components/HomepageFeatures/index.tsx‎

Lines changed: 80 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1-
import React from 'react';
2-
import clsx from 'clsx';
3-
import Tooltip from 'rc-tooltip';
4-
import 'rc-tooltip/assets/bootstrap.css'
5-
import styles from './styles.module.scss';
6-
1+
import React from "react";
2+
import clsx from "clsx";
3+
import Tooltip from "rc-tooltip";
4+
import "rc-tooltip/assets/bootstrap.css";
5+
import styles from "./styles.module.scss";
76

87
enum docType {
9-
Documentation = 'doc',
10-
Interactive = 'interactive',
11-
Video = 'video',
8+
Documentation = "doc",
9+
Interactive = "interactive",
10+
Video = "video",
1211
}
1312

14-
type FeatureItem = {
13+
export type FeatureItem = {
1514
title: string;
1615
module: string;
1716
Svg?: string; // React.ComponentType<React.ComponentProps<'svg'>>;
@@ -22,141 +21,118 @@ type FeatureItem = {
2221

2322
const FeatureList: FeatureItem[] = [
2423
{
25-
title: 'Build and Test Code',
26-
module: 'ci',
27-
Svg: '/img/icon_ci.svg',
28-
description: (
29-
<>
30-
Create a CI build pipeline.
31-
</>
32-
),
24+
title: "Build and Test Code",
25+
module: "ci",
26+
Svg: "/img/icon_ci.svg",
27+
description: <>Create a CI build pipeline.</>,
3328
type: [docType.Documentation],
3429
//type: [docType.Documentation, docType.Interactive, docType.Video],
35-
link: '/tutorials/build-code',
30+
link: "/tutorials/build-code",
3631
},
3732
{
38-
title: 'Deploy Services',
39-
module: 'cd',
40-
Svg: '/img/icon_cd.svg',
41-
description: (
42-
<>
43-
Create a CD deployment pipeline.
44-
</>
45-
),
33+
title: "Deploy Services",
34+
module: "cd",
35+
Svg: "/img/icon_cd.svg",
36+
description: <>Create a CD deployment pipeline.</>,
4637
type: [docType.Documentation],
47-
link: '/tutorials/deploy-services',
38+
link: "/tutorials/deploy-services",
4839
},
4940
{
50-
title: 'Manage Feature Flags',
51-
module: 'ff',
52-
Svg: '/img/icon_ff.svg',
53-
description: (
54-
<>
55-
Roll out new features progressively.
56-
</>
57-
),
41+
title: "Manage Feature Flags",
42+
module: "ff",
43+
Svg: "/img/icon_ff.svg",
44+
description: <>Roll out new features progressively.</>,
5845
type: [docType.Documentation],
59-
link: '/tutorials/manage-feature-flags',
46+
link: "/tutorials/manage-feature-flags",
6047
},
6148
{
62-
title: 'Manage Cloud Costs',
63-
module: 'ccm',
64-
Svg: '/img/icon_ccm.svg',
65-
description: (
66-
<>
67-
Achieve cost transparency and cut costs.
68-
</>
69-
),
49+
title: "Manage Cloud Costs",
50+
module: "ccm",
51+
Svg: "/img/icon_ccm.svg",
52+
description: <>Achieve cost transparency and cut costs.</>,
7053
type: [docType.Documentation],
71-
link: '/tutorials/manage-cloud-costs',
54+
link: "/tutorials/manage-cloud-costs",
7255
},
7356
{
74-
title: 'Manage Service Reliability',
75-
module: 'srm',
76-
Svg: '/img/icon_srm.svg',
77-
description: (
78-
<>
79-
Monitor SLOs, track error budgets, debug code errors.
80-
</>
81-
),
57+
title: "Manage Service Reliability",
58+
module: "srm",
59+
Svg: "/img/icon_srm.svg",
60+
description: <>Monitor SLOs, track error budgets, debug code errors.</>,
8261
type: [docType.Documentation],
83-
link: '/tutorials/manage-service-reliability',
62+
link: "/tutorials/manage-service-reliability",
8463
},
8564
{
86-
title: 'Orchestrate Security Tests',
87-
module: 'sto',
88-
Svg: '/img/icon_sto.svg',
89-
description: (
90-
<>
91-
Scan code, containers and apps.
92-
</>
93-
),
65+
title: "Orchestrate Security Tests",
66+
module: "sto",
67+
Svg: "/img/icon_sto.svg",
68+
description: <>Scan code, containers and apps.</>,
9469
type: [docType.Documentation],
95-
link: '/tutorials/orchestrate-security-tests',
70+
link: "/tutorials/orchestrate-security-tests",
9671
},
9772
{
98-
title: 'Run Chaos Experiments',
99-
module: 'ce',
100-
Svg: '/img/icon_ce.svg',
101-
description: (
102-
<>
103-
Ensure app and infrastructure resilience.
104-
</>
105-
),
73+
title: "Run Chaos Experiments",
74+
module: "ce",
75+
Svg: "/img/icon_ce.svg",
76+
description: <>Ensure app and infrastructure resilience.</>,
10677
type: [docType.Documentation],
107-
link: '/tutorials/run-chaos-experiments',
78+
link: "/tutorials/run-chaos-experiments",
10879
},
10980
{
110-
title: 'Administer Harness Platform',
111-
module: 'platform',
112-
Svg: '/img/logo.svg',
81+
title: "Administer Harness Platform",
82+
module: "platform",
83+
Svg: "/img/logo.svg",
11384
description: (
11485
<>
115-
Install a Kubernetes or Docker delegate, Onboard with Terraform Provider.
86+
Install a Kubernetes or Docker delegate, Onboard with Terraform
87+
Provider.
11688
</>
11789
),
11890
type: [docType.Documentation],
119-
link: '/tutorials/platform',
91+
link: "/tutorials/platform",
12092
},
12193
];
12294

123-
function Feature({title, Svg, description, type, module, link}: FeatureItem) {
95+
function Feature({ title, Svg, description, type, module, link }: FeatureItem) {
12496
return (
125-
<div className={clsx(styles.getStartItem, styles[module])}>
126-
<div className="text--center">
127-
{/* <Svg className={styles.featureSvg} role="img" /> */}
128-
<img src={Svg} className={styles.featureSvg} alt={title} />
129-
</div>
130-
<div className={clsx('text--center padding-horiz--md', styles.titleAndDesc)}>
131-
<a href={link}>
97+
<a href={link}>
98+
<div className={clsx(styles.getStartItem, styles[module])}>
99+
<div className="text--center">
100+
{/* <Svg className={styles.featureSvg} role="img" /> */}
101+
<img src={Svg} className={styles.featureSvg} alt={title} />
102+
</div>
103+
<div
104+
className={clsx(
105+
"text--center padding-horiz--md",
106+
styles.titleAndDesc
107+
)}
108+
>
132109
<h3>{title}</h3>
133110
<p>{description}</p>
134-
</a>
135-
</div>
136-
<div>
137-
<ul className={styles.docTypes}>
138-
{type.map((props, idx) => (
139-
<li>
140-
<Tooltip placement="top" overlay={props}>
141-
<img src={`/img/icon_doctype_${props}.svg`} alt={props} />
142-
</Tooltip>
143-
</li>
144-
))}
145-
146-
</ul>
111+
</div>
112+
<div>
113+
<ul className={styles.docTypes}>
114+
{type.map((props, idx) => (
115+
<li>
116+
<Tooltip placement="top" overlay={props}>
117+
<img src={`/img/icon_doctype_${props}.svg`} alt={props} />
118+
</Tooltip>
119+
</li>
120+
))}
121+
</ul>
122+
</div>
147123
</div>
148-
</div>
124+
</a>
149125
);
150126
}
151127

152128
export default function HomepageFeatures(): JSX.Element {
153129
return (
154130
<section className={styles.features}>
155-
{<h2>Get Started with Tutorials</h2>}
131+
{<h2>Get Started with Tutorials</h2>}
156132
<div className={styles.getStart}>
157-
{FeatureList.map((props, idx) => (
158-
<Feature key={idx} {...props} />
159-
))}
133+
{FeatureList.map((props, idx) => (
134+
<Feature key={idx} {...props} />
135+
))}
160136
</div>
161137
</section>
162138
);

0 commit comments

Comments
 (0)