Skip to content

Commit c36a2d8

Browse files
Santhosh-testsigmaSanthosh-testsigma
committed
WEB-321 - Creating new index page for tutorials
1 parent f462004 commit c36a2d8

9 files changed

Lines changed: 486 additions & 21 deletions

File tree

‎src/components/LeftNav.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ class ListItem extends React.Component {
121121
return (
122122
<ul
123123
key={`${name}-${uuidv4()}`}
124-
className={` ${(this.state.expandedPanels?.indexOf(name) !== -1) ? 'active' : 'inactive'} ${isRoot ? ' root' : ''} `}
124+
className={` ${(this.state.expandedPanels?.indexOf(name) === 0) ? 'active' : 'inactive'} ${isRoot ? ' root' : ''} `}
125125
>
126126
<li className={`parent${this.inUrl(`/${name}/`) ? ' currentUrl text_green' : ''}`} onClick={this.toggleActive} identifier={name}>
127127
<svg onClick={(e)=>{this.toggleActive(e); this.toggleExpansion(name)}} identifier={name} className={`inline float_left relative folder-icon parent_caret${(this.state.expandedPanels?.indexOf(name) !== -1) ? ' active_parent_caret' : ''}`} xmlns="http://www.w3.org/2000/svg" fill="none" height="24"
@@ -184,6 +184,7 @@ const LeftNav = () => {
184184
return (
185185
<>
186186
<div className="leftNav bg-gray-50 px-14 pt-5">
187+
<Link to={"/tutorials/"} className="homepage_btn">Testsigma Tutorials</Link>
187188
<ListItem data={data.leftNavLinks.value} isRoot />
188189
</div>
189190
</>

‎src/components/LeftNav.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -293,6 +293,12 @@
293293
.float_left{
294294
float:left;
295295
}
296+
.homepage_btn{
297+
font-weight: 600;
298+
&:hover{
299+
color: #1AA874;
300+
}
301+
}
296302

297303
//.currentUrl{
298304
// margin-left: -15px!important;

‎src/components/images/bg-banner.svg‎

Lines changed: 157 additions & 0 deletions
Loading

‎src/components/navcards.jsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React from "react";
2+
import * as url from "url";
3+
4+
import "./navcards.scss"
5+
6+
const data = [
7+
{
8+
id: 1,
9+
title: "Getting Started",
10+
description: "Learn how to create and execute tests for a sample application using Testsigma.",
11+
path: "/tutorials/getting-started/automate-web-applications/",
12+
},
13+
{
14+
id: 2,
15+
title: "Test Cases",
16+
description: "Create test cases for Web apps and Mobile apps.",
17+
path: "/tutorials/test-cases/web-apps/build-tests-using-recorder/",
18+
},
19+
{
20+
id: 3,
21+
title: "REST API",
22+
description: "Learn about JSONPath and Contract Testing in Testsigma using REST APIs. ",
23+
path: "/tutorials/rest-api-testing/json-schema-validation/",
24+
},
25+
{
26+
id: 4,
27+
title: "Test Plans",
28+
description: "Create Test Plans and perform cross-platform end-to-end testing with Testsigma.",
29+
path: "/tutorials/test-plans/using-local-devices/",
30+
},
31+
{
32+
id: 5,
33+
title: "Testsigma Agent",
34+
description: "Setup Testsigma Agent to run tests in local devices.",
35+
path: "/tutorials/agent/how-to-setup-agents-to-run-tests-on-local-mobile-devices/",
36+
},
37+
{
38+
id: 6,
39+
title: "Advanced",
40+
description: "Enable two factor SMS and Email based authentication via OTPs.",
41+
path: "/tutorials/advanced/sms-based-two-factor-authentication-2fa/",
42+
},
43+
{
44+
id: 7,
45+
title: "Addons",
46+
description: "Learn how to create addons for different scenarios.",
47+
path: "/tutorials/addons/how-create-addons-actions/",
48+
},
49+
];
50+
51+
const Card = ({ title, description, path }) => {
52+
return (
53+
<a href={path} className="card md:w-5/12 p-7 cursor-pointer justify-between flex mr-2 mb-2 w-full ">
54+
<div className="w-fit">
55+
<h2 className="card_heading">{title}</h2>
56+
<p className="card_desc">{description}</p>
57+
</div>
58+
<div className="w-fit content-center grid">
59+
<a className="block p-4 right-arrow">
60+
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" viewBox="0 0 15 13" fill="none">
61+
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.246093 6.98633C0.246093 6.75904 0.334979 6.54106 0.493195 6.38035C0.651411 6.21963 0.865998 6.12934 1.08975 6.12934L11.8643 6.12934L8.24169 2.45115C8.16325 2.37147 8.10103 2.27688 8.05857 2.17277C8.01612 2.06866 7.99427 1.95708 7.99427 1.8444C7.99427 1.73172 8.01612 1.62013 8.05857 1.51603C8.10103 1.41192 8.16325 1.31733 8.24169 1.23765C8.32013 1.15797 8.41325 1.09477 8.51573 1.05164C8.61822 1.00852 8.72806 0.986329 8.83899 0.986329C8.94992 0.986329 9.05977 1.00852 9.16226 1.05164C9.26474 1.09477 9.35786 1.15797 9.4363 1.23765L14.4982 6.37958C14.5768 6.45919 14.6391 6.55376 14.6817 6.65787C14.7242 6.76199 14.7461 6.8736 14.7461 6.98633C14.7461 7.09905 14.7242 7.21067 14.6817 7.31478C14.6391 7.4189 14.5768 7.51347 14.4982 7.59308L9.4363 12.735C9.35786 12.8147 9.26474 12.8779 9.16226 12.921C9.05977 12.9641 8.94993 12.9863 8.83899 12.9863C8.72806 12.9863 8.61822 12.9641 8.51573 12.921C8.41325 12.8779 8.32013 12.8147 8.24169 12.735C8.08327 12.5741 7.99427 12.3558 7.99427 12.1283C7.99427 12.0156 8.01612 11.904 8.05857 11.7999C8.10103 11.6958 8.16325 11.6012 8.24169 11.5215L11.8643 7.84332L1.08975 7.84332C0.865998 7.84332 0.651411 7.75303 0.493195 7.59231C0.334979 7.43159 0.246093 7.21362 0.246093 6.98633Z" fill="#000000"/>
62+
</svg>
63+
</a>
64+
</div>
65+
</a>
66+
);
67+
};
68+
69+
const CardList = () => {
70+
return (
71+
<div className="w-full flex flex-wrap">
72+
{data.map((item) => (
73+
<Card key={item.id} title={item.title} description={item.description} path={item.path}/>
74+
))}
75+
</div>
76+
);
77+
};
78+
79+
export default CardList;

‎src/components/navcards.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@import '_variables.scss';
2+
3+
.card{
4+
width: 48%;
5+
border: 1px solid #DDDDDD;
6+
border-radius: 2px;
7+
@media (max-width: 425px) {
8+
width: 100%;
9+
}
10+
&:hover{
11+
background: #F2F3F3;
12+
.right-arrow {
13+
background-color: $white;
14+
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.12);
15+
svg{
16+
path{
17+
fill: #1AA874;
18+
}
19+
}
20+
}
21+
}
22+
.right-arrow{
23+
border-radius: 50%;
24+
}
25+
.card_heading{
26+
font-weight: 600;
27+
font-size: 18px;
28+
line-height: 45px;
29+
color: #183247;
30+
margin-bottom: 0 !important;
31+
}
32+
.card_desc{
33+
font-weight: 400;
34+
font-size: 15px;
35+
color: #183247;
36+
margin-top: 0 !important;
37+
margin-bottom: 0 !important;
38+
}
39+
}

‎src/pages/tutorials/index.jsx‎

Lines changed: 126 additions & 0 deletions
Large diffs are not rendered by default.

‎src/redirects.json‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
11
[
2-
{
3-
"from": "/tutorials/",
4-
"to": "/tutorials/getting-started/automate-web-applications/"
5-
}
2+
63
]

‎src/templates/page.jsx‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ import SearchInputBox from "../components/SearchInputBox";
1313
import MobileView from "../components/MobileView";
1414
import Footer from "../components/Footer"
1515
import {environment} from "../environment";
16+
import Index from "../pages/tutorials/index";
17+
18+
const isIndexPage = window.location.pathname === '/tutorials/';
1619

1720
export default ({ data, pageContext }) => {
1821

@@ -103,25 +106,29 @@ export default ({ data, pageContext }) => {
103106
<LeftNav />
104107
</nav>
105108
<div className="flex-auto w-4/5">
106-
<div className="flex items-stretch w-full">
107-
<main className="w-4/5">
108-
<div className="doc-page px-20 py-14">
109-
<h1>{post.frontmatter.title}</h1>
110-
<span dangerouslySetInnerHTML={{ __html: post.html }} />
109+
{isIndexPage ? (
110+
<Index/>
111+
) : (
112+
<div className="flex items-stretch w-full">
113+
<main className="w-4/5">
114+
<div className="doc-page px-20 py-14">
115+
<h1>{post.frontmatter.title}</h1>
116+
<span dangerouslySetInnerHTML={{ __html: post.html }} />
111117

112-
</div>
118+
</div>
113119

114-
</main>
115-
<aside className="w-1/5">
116-
<hr className="d-block lg:hidden"/>
117-
<div className="top-0 top-1 border-l pl-4 py-16 sticky">
118-
<div className="edit-button">
119-
<EditDoc className="items-end btn edit-button-styles flex inline-flex items-center" />
120-
</div>
121-
{contextualLinks}
120+
</main>
121+
<aside className="w-1/5">
122+
<hr className="d-block lg:hidden"/>
123+
<div className="top-0 top-1 border-l pl-4 py-16 sticky">
124+
<div className="edit-button">
125+
<EditDoc className="items-end btn edit-button-styles flex inline-flex items-center" />
126+
</div>
127+
{contextualLinks}
128+
</div>
129+
</aside>
122130
</div>
123-
</aside>
124-
</div>
131+
)}
125132
<div className="pagination_buttons">
126133
<div className={prev ? 'flex justify-between' : 'overflow-hidden'}>
127134
{prev && (

‎src/templates/page.scss‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -528,4 +528,57 @@ code[class*="language-"] {
528528
.ais-SearchBox-input{
529529
outline: none!important;
530530
width: 80px;
531+
}
532+
.card_container{
533+
padding-bottom: 2rem;
534+
}
535+
.chat_btn{
536+
padding: 1rem;
537+
margin-right: 1rem;
538+
background: linear-gradient(0deg, #183E46, #183E46), #03A973;
539+
border-radius: .2rem;
540+
span{
541+
padding-left: .5rem;
542+
color: $white;
543+
font-weight: 600;
544+
font-size: 17px;
545+
}
546+
}
547+
.community_btn{
548+
padding: 1rem;
549+
border: 1px solid #183E46;
550+
border-radius: 2px;
551+
span{
552+
padding-left: .5rem;
553+
color: #183E46;
554+
font-weight: 600;
555+
font-size: 17px;
556+
}
557+
@media (max-width: 425px) {
558+
margin-top: 1rem;
559+
}
560+
}
561+
.homepage_footer{
562+
flex-basis: 100%;
563+
justify-content: space-between;
564+
margin-bottom: 4rem;
565+
.pagination_buttons{
566+
@media (min-width: 768px) {
567+
margin: 0;
568+
}
569+
}
570+
.next_button{
571+
width: fit-content;
572+
@media (min-width: 768px) {
573+
margin-top: 1rem;
574+
}
575+
}
576+
}
577+
.home-page_banner{
578+
background-image: url("~/src/components/images/bg-banner.svg");
579+
background-size: cover;
580+
background-repeat: no-repeat;
581+
margin-bottom: 1rem;
582+
padding-bottom: 6rem;
583+
padding-top: 5rem;
531584
}

0 commit comments

Comments
 (0)