Skip to content

Commit a2a195b

Browse files
authored
feat: revamp home page and quickstart guide (#677)
Signed-off-by: Achanandhi-M <[email protected]>
1 parent 7bb233c commit a2a195b

27 files changed

+823
-425
lines changed

docusaurus.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -340,7 +340,7 @@ module.exports = {
340340
async: true,
341341
defer: true,
342342
},
343-
/*{
343+
/*{
344344
src: "/docs/scripts/chat.js",
345345
async: true,
346346
defer: true,

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"ajv-keywords": "^3.5.2",
2929
"clsx": "^2.0.0",
3030
"lint": "^0.8.19",
31+
"lucide-react": "^0.544.0",
3132
"prism-react-renderer": "^2.1.0",
3233
"react": "^18.2.0",
3334
"react-dom": "^18.2.0",

src/components/Community.js

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -64,31 +64,35 @@ export const Community = () => {
6464
</a>
6565
</li>
6666
<li>
67-
<a href="https://lu.ma/keploy" className="flex items-start space-x-4">
67+
<a
68+
href="https://testgpt.substack.com/"
69+
className="flex items-start space-x-4"
70+
target="_blank"
71+
rel="noopener noreferrer"
72+
>
6873
<svg
69-
width="512"
70-
height="512"
71-
viewBox="0 0 512 512"
72-
className="h-12 w-12 flex-none rounded-lg text-black"
73-
fill="none"
7474
xmlns="http://www.w3.org/2000/svg"
75+
viewBox="0 0 512 512"
76+
className="h-12 w-12 flex-none"
7577
>
78+
<rect width="512" height="512" fill="white" />
79+
<rect x="96" y="128" width="320" height="42.7" fill="#FF6719" />
80+
<rect x="96" y="213.3" width="320" height="42.7" fill="#FF6719" />
7681
<path
77-
d="M384 0H128C57.3076 0 0 57.3076 0 128V384C0 454.692 57.3076 512 128 512H384C454.692 512 512 454.692 512 384V128C512 57.3076 454.692 0 384 0Z"
78-
fill="#2D8CFF"
79-
/>
80-
<path
81-
d="M402.164 342.205C408.958 343.904 414.904 340.507 418.301 335.411C420 332.863 420 328.616 420 319.274V191.027C420 181.685 420 178.288 418.301 174.89C415.753 168.096 408.958 165.548 402.164 168.096C384.327 179.986 345.257 214.808 344.408 229.247C343.728 231.795 343.728 236.041 343.728 241.986V274.26C343.728 281.055 343.728 283.603 344.408 287C345.257 293.795 347.805 299.74 351.203 303.137C361.395 310.781 395.369 341.356 403.013 341.356L402.164 342.205ZM93 197.822C93 185.082 93 178.288 95.5481 174.89C97.2468 171.493 102.343 168.096 104.891 165.548C108.288 163 114.234 163 127.823 163H237.39C269.665 163 285.803 163 298.543 169.795C307.886 176.589 318.078 182.534 324.023 195.274C330.818 208.014 330.818 224.151 330.818 256.425V314.178C330.818 326.918 330.818 333.712 328.27 337.11C326.571 340.507 321.475 343.904 318.927 346.452C315.53 349 309.584 349 295.995 349H186.429C154.153 349 138.016 349 125.275 342.205C115.932 335.411 105.74 329.466 99.7948 316.726C93 303.986 93 287.849 93 255.575V197.822Z"
82-
fill="white"
82+
d="M96 298.6h320V448L256 362.7 96 448V298.6Z"
83+
fill="#FF6719"
8384
/>
8485
</svg>
8586

8687
<div className="flex-auto">
87-
<h3 className="font-bold">Meetup</h3>
88-
<p>Join our monthly meetup and ask questions!</p>
88+
<h3 className="font-bold">Substack</h3>
89+
<p className="text-sm text-gray-700">
90+
Ideas worth reading — delivered directly to you.
91+
</p>
8992
</div>
9093
</a>
9194
</li>
95+
9296
<li>
9397
<a
9498
href="https://github.com/keploy"
@@ -270,20 +274,21 @@ export const Community = () => {
270274
</li>
271275
</ul>
272276
<p className="mt-8">
273-
We are happy to help you with your 🎤 talks, 📝 blogposts (whether on
274-
our blog or yours) or anything else you want to try. Just {/*<a*/}
277+
Want to present your case study on Keploy? Just get in touch for any
278+
resources you may need. Use the following link to
279+
{/*<a*/}
275280
{/* className="text-blue-400 hover:underline"*/}
276281
{/* href="https://keploy.io/careers"*/}
277282
{/*>*/}
278283
{/* job listings,*/}
279284
{/*</a>*/}
280285
<a
281286
className="text-blue-400 hover:underline"
282-
href="mailto:[email protected]"
287+
href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ2l-psdTCNCLYAJ-Jt5ESyGP7gi1_U70ySTjtFNr0Kmx5UagNJnyzg7lNjA3NKnaP6qFfpAgcdZ"
283288
>
284-
get in touch
289+
{" "}
290+
book a slot
285291
</a>
286-
!
287292
</p>
288293
{/*TODO : Early adopters and contributors*/}
289294
</section>

src/components/QuickStart.js

Lines changed: 43 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from "react";
22
import Link from "@docusaurus/Link";
33
import useBaseUrl from "@docusaurus/useBaseUrl";
4-
4+
import {FaBook} from "react-icons/fa";
5+
import {FaRobot} from "react-icons/fa";
6+
import {FaWindows, FaLinux, FaApple} from "react-icons/fa";
57
export const QuickStart = () => {
68
return (
79
<section className="mt-1">
@@ -54,48 +56,47 @@ export const QuickStart = () => {
5456
{/* </a>*/}
5557
{/*</p>*/}
5658

57-
<h2 className="mt-8 text-2xl font-semibold tracking-wide md:text-3xl">
58-
Installation Guide 📗
59-
</h2>
60-
<p className="text-l mb-8 mt-4 max-w-4xl">
61-
Let's get Keploy up and running on your Windows, Linux, or macOS
62-
machine, so you can start crafting test cases in minutes. ⏱️
63-
</p>
59+
<div className="mt-8">
60+
<h2 className="mb-4 text-2xl font-semibold tracking-wide md:text-3xl">
61+
Get Started 🚀
62+
</h2>
63+
<p className="text-l mb-8 max-w-4xl">
64+
Get started with installation, quickstart, or dive into AI-powered API
65+
testing.
66+
</p>
67+
68+
<div className="grid grid-cols-1 gap-6 md:grid-cols-3 lg:gap-8">
69+
{/* Installation Card */}
70+
<Link
71+
className="flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg transition-transform duration-200 hover:scale-105"
72+
to={useBaseUrl("/server/installation")}
73+
>
74+
<div class="flex gap-3">
75+
<FaWindows className="h-12 w-12 text-orange-500" />
76+
<FaLinux className="h-12 w-12 text-orange-500" />
77+
<FaApple className="h-12 w-12 text-orange-500" />
78+
</div>
79+
<p className="pt-4 text-lg font-semibold">Installation</p>
80+
</Link>
81+
82+
{/* Quickstart Card */}
83+
<Link
84+
className="flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg transition-transform duration-200 hover:scale-105"
85+
to={useBaseUrl("/docs/quickstart/quickstart-filter/")}
86+
>
87+
<FaBook className="h-12 w-12 text-orange-500" />
88+
<p className="pt-4 text-lg font-semibold">Quickstart Guide</p>
89+
</Link>
6490

65-
<div className="grid grid-cols-1 gap-6 md:grid-cols-3 lg:gap-8">
66-
<Link
67-
className="scale flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg"
68-
to={useBaseUrl("/installation/windows-installation/")}
69-
>
70-
<img
71-
className="h-16 w-16"
72-
src="/docs/img/os/windows-logo.svg"
73-
alt="Windows logo"
74-
/>
75-
<p className="text-lg font-semibold">Windows</p>
76-
</Link>
77-
<Link
78-
className="scale flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg"
79-
to={useBaseUrl("/installation/linux-installation/")}
80-
>
81-
<img
82-
className="h-16 w-16"
83-
src="/docs/img/os/linux-logo.svg"
84-
alt="Linux logo"
85-
/>
86-
<p className="text-lg font-semibold">Linux</p>
87-
</Link>
88-
<Link
89-
className="scale flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg"
90-
to={useBaseUrl("/installation/macos-installation/")}
91-
>
92-
<img
93-
className="h-16 w-16"
94-
src="/docs/img/os/apple-logo.svg"
95-
alt="Mac logo"
96-
/>
97-
<p className="text-lg font-semibold">MacOS</p>
98-
</Link>
91+
{/* AI-powered API Testing Card */}
92+
<Link
93+
className="flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg transition-transform duration-200 hover:scale-105"
94+
to={useBaseUrl("/docs/running-keploy/generate-api-tests-using-ai/")}
95+
>
96+
<FaRobot className="h-12 w-12 text-orange-500" />
97+
<p className="pt-4 text-lg font-semibold">AI-powered API Testing</p>
98+
</Link>
99+
</div>
99100
</div>
100101
</section>
101102
);

src/components/QuickStartGuide.js

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React from "react";
2+
import Link from "@docusaurus/Link";
3+
import useBaseUrl from "@docusaurus/useBaseUrl";
4+
5+
export const QuickStart = () => {
6+
return (
7+
<section className="mt-1">
8+
<h1 className="mb-4 text-4xl font-semibold tracking-wide md:text-4xl">
9+
Welcome to Keploy Documentation! 🚀
10+
</h1>
11+
<p className="text-l max-w-3xl">
12+
This documentation will help you get the most out of Keploy—whether
13+
you’re building your first project or leveling up your testing workflow.
14+
</p>
15+
16+
<h2 className="mb-4 mt-8 text-2xl font-semibold tracking-wide md:text-3xl">
17+
What is Keploy? 🤔
18+
</h2>
19+
<p className="text-l max-w-4xl">
20+
Keploy is your open-source, developer-centric backend testing tool. It
21+
makes backend testing easy and productive for engineering teams. Plus,
22+
it's easy-to-use, powerful and extensible..🛠️ Keploy also has AI-powered
23+
tools that help you generate unit and api tests quickly, helping
24+
developers focus on writing code rather than writing tests.
25+
</p>
26+
27+
<p className="text-l mt-4 max-w-4xl">
28+
Keploy creates test cases and data mocks/stubs from user-traffic by
29+
recording API calls and DB queries, significantly speeding up releases
30+
and enhancing reliability. 📈
31+
</p>
32+
33+
{/*<h2 className="mt-8 text-2xl font-semibold tracking-wide md:text-3xl">*/}
34+
{/* Contribute through Hacktoberfest ✅*/}
35+
{/*</h2>*/}
36+
{/*<p className="text-l mb-8 mt-4 max-w-4xl">*/}
37+
{/* DigitalOcean's Hacktoberfest is a month-long celebration of open-source*/}
38+
{/* contributions. Everyone is welcome to participate, regardless of their*/}
39+
{/* experience level. Simply make a pull request to an open-source project*/}
40+
{/* to get started.*/}
41+
{/* <br /> <br />*/}
42+
{/* You can contribute to{" "}*/}
43+
{/* <a href="https://github.com/orgs/keploy/repositories">*/}
44+
{/* several Keploy projects*/}
45+
{/* </a>{" "}*/}
46+
{/* participating this year, If you’ve ever wanted to contribute to open*/}
47+
{/* source , now is your chance!*/}
48+
{/* <br /> <br />*/}
49+
{/* Anyone around the globe who desires to help drive the growth of open*/}
50+
{/* source and make positive contributions to an ever-growing community. All*/}
51+
{/* backgrounds and skill levels are encouraged to participate.{" "}*/}
52+
{/* <a href="https://opensource.guide/how-to-contribute">*/}
53+
{/* Learn How to Contribute?*/}
54+
{/* </a>*/}
55+
{/*</p>*/}
56+
57+
<h2 className="mt-8 text-2xl font-semibold tracking-wide md:text-3xl">
58+
Installation Guide 📗
59+
</h2>
60+
<p className="text-l mb-8 mt-4 max-w-4xl">
61+
Let's get Keploy up and running on your Windows, Linux, or macOS
62+
machine, so you can start crafting test cases in minutes. ⏱️
63+
</p>
64+
65+
<div className="grid grid-cols-1 gap-6 md:grid-cols-3 lg:gap-8">
66+
<Link
67+
className="scale flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg"
68+
to={useBaseUrl("/installation/installation")}
69+
>
70+
<img
71+
className="h-16 w-16"
72+
src="/docs/img/os/windows-logo.svg"
73+
alt=""
74+
/>
75+
<p className="text-lg font-semibold">Windows</p>
76+
</Link>
77+
<Link
78+
className="scale flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg"
79+
to={useBaseUrl("/")}
80+
>
81+
<img
82+
className="h-16 w-16"
83+
src="/docs/img/os/linux-logo.svg"
84+
alt="Linux logo"
85+
/>
86+
<p className="text-lg font-semibold">Linux</p>
87+
</Link>
88+
<Link
89+
className="scale flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg"
90+
to={useBaseUrl("/installation/macos-installation/")}
91+
>
92+
<img
93+
className="h-16 w-16"
94+
src="/docs/img/os/apple-logo.svg"
95+
alt="Mac logo"
96+
/>
97+
<p className="text-lg font-semibold">MacOS</p>
98+
</Link>
99+
</div>
100+
</section>
101+
);
102+
};

src/components/StartKeploy.js

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import React from "react";
2+
import Tabs from "@theme/Tabs";
3+
import TabItem from "@theme/TabItem";
4+
import CodeBlock from "@theme/CodeBlock";
5+
import Link from "@docusaurus/Link";
6+
7+
export default function StartKeploy() {
8+
return (
9+
<div
10+
style={{
11+
border: "1px solid var(--ifm-color-emphasis-200)",
12+
borderRadius: "12px",
13+
padding: "0.8rem",
14+
background: "var(--ifm-background-color)",
15+
boxShadow: "0 2px 6px rgba(0,0,0,0.08)",
16+
}}
17+
>
18+
<h3>🎬 Start Capturing Test Cases</h3>
19+
20+
<Tabs>
21+
<TabItem value="go" label="Go">
22+
<br />
23+
<p>
24+
<strong>Record the test cases</strong>
25+
</p>
26+
<CodeBlock language="bash">
27+
{`keploy record -c "go run main.go"`}
28+
</CodeBlock>
29+
<p>
30+
<strong>Run the test cases</strong>
31+
</p>
32+
<CodeBlock language="bash">
33+
{`keploy test -c "go run main.go" --delay 10`}
34+
</CodeBlock>
35+
</TabItem>
36+
37+
<TabItem value="node" label="Node.js">
38+
<br />
39+
<p>
40+
<strong>Record the test cases</strong>
41+
</p>
42+
<CodeBlock language="bash">
43+
{`keploy record -c "npm start"`}
44+
</CodeBlock>
45+
<p>
46+
<strong>Run the test cases</strong>
47+
</p>
48+
<CodeBlock language="bash">
49+
{`keploy test -c "npm start" --delay 10`}
50+
</CodeBlock>
51+
</TabItem>
52+
53+
<TabItem value="java" label="Java">
54+
<br />
55+
<p>
56+
<strong>Record the test cases</strong>
57+
</p>
58+
<CodeBlock language="bash">
59+
{`keploy record -c "mvn spring-boot:run"`}
60+
</CodeBlock>
61+
<p>
62+
<strong>Run the test cases</strong>
63+
</p>
64+
<CodeBlock language="bash">
65+
{`keploy test -c "mvn spring-boot:run" --delay 10`}
66+
</CodeBlock>
67+
</TabItem>
68+
69+
<TabItem value="python" label="Python">
70+
<br />
71+
<p>
72+
<strong>Record the test cases</strong>
73+
</p>
74+
<CodeBlock language="bash">
75+
{`keploy record -c "python app.py"`}
76+
</CodeBlock>
77+
<p>
78+
<strong>Run the test cases</strong>
79+
</p>
80+
<CodeBlock language="bash">
81+
{`keploy test -c "python app.py" --delay 10`}
82+
</CodeBlock>
83+
</TabItem>
84+
</Tabs>
85+
86+
<h3>📖 What’s Next?</h3>
87+
88+
<p>
89+
Now, take it further by following the{" "}
90+
<Link to="/docs/quickstart/quickstart-filter/">
91+
<strong>Quickstart Guide</strong>
92+
</Link>{" "}
93+
and see Keploy in action with your app.
94+
</p>
95+
</div>
96+
);
97+
}

0 commit comments

Comments
 (0)