Skip to content

Commit 0665e29

Browse files
Achanandhi-MAchanandhi-M
committed
feat: revamp quickstart guide and installation page
Signed-off-by: Achanandhi-M <[email protected]>
1 parent 60c718e commit 0665e29

22 files changed

+1066
-95
lines changed

‎docusaurus.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ module.exports = {
121121
items: [
122122
{
123123
label: "Integration Testing",
124-
to: "/keploy-explained/introduction/",
124+
to: "server/installation",
125125
},
126126
{
127127
label: "API Testing (AI)",

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"prism-react-renderer": "^2.1.0",
3232
"react": "^18.2.0",
3333
"react-dom": "^18.2.0",
34+
"react-icons": "^5.5.0",
3435
"react-player": "^2.6.0",
3536
"remark-typescript-tools": "1.0.9",
3637
"typescript": "5",

‎src/components/InstallReminder.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
2+
import React from "react";
3+
import Link from "@docusaurus/Link";
4+
5+
export default function InstallReminder() {
6+
return (
7+
<div
8+
style={{
9+
padding: "1rem",
10+
border: "1px solid #eee",
11+
borderRadius: "10px",
12+
background: "#fff8f5",
13+
margin: "2rem 0",
14+
}}
15+
>
16+
<h3>Don’t have Keploy installed yet?</h3>
17+
<p>
18+
Before running this sample, make sure Keploy is installed on your system.
19+
</p>
20+
<Link
21+
to="/docs/server/installation/"
22+
style={{
23+
display: "inline-block",
24+
marginTop: "0.5rem",
25+
padding: "0.6rem 1rem",
26+
background: "#e67e22",
27+
color: "#fff",
28+
borderRadius: "6px",
29+
fontWeight: "bold",
30+
textDecoration: "none",
31+
}}
32+
>
33+
👉 Go to Installation Guide
34+
</Link>
35+
</div>
36+
);
37+
}

‎src/components/QuickStartFilter.js‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
import React, { useState } from "react";
2+
import quickstarts from "./QuickStartList";
3+
import Link from "@docusaurus/Link";
4+
import { FaGolang } from "react-icons/fa6";
5+
import { FaJava } from "react-icons/fa";
6+
import { FaLaptopCode } from "react-icons/fa";
7+
import { FaRust } from "react-icons/fa";
8+
import { TbBrandCSharp } from "react-icons/tb";
9+
import { FaPython } from "react-icons/fa";
10+
import { FaDocker } from "react-icons/fa";
11+
import { IoLogoJavascript } from "react-icons/io5";
12+
13+
// 🔹 Wrapper for icons to make them uniform
14+
const IconWrapper = ({ icon, bg }) => (
15+
<div
16+
style={{
17+
width: "70px",
18+
height: "70px",
19+
display: "flex",
20+
alignItems: "center",
21+
justifyContent: "center",
22+
borderRadius: "50%",
23+
backgroundColor: bg || "#f3f4f6",
24+
boxShadow: "0 3px 6px rgba(0,0,0,0.1)",
25+
transition: "transform 0.2s ease",
26+
}}
27+
className="icon-wrapper"
28+
>
29+
{icon}
30+
</div>
31+
);
32+
33+
export default function QuickstartFilter({ defaultLanguage = null }) {
34+
// 👇 initialize with defaultLanguage if provided
35+
const [language, setLanguage] = useState(defaultLanguage);
36+
const [server, setServer] = useState(null);
37+
38+
const filteredQuickstarts = quickstarts.filter((app) => {
39+
return (
40+
(!language || app.language === language) &&
41+
(!server || app.server === server)
42+
);
43+
});
44+
45+
const languages = [
46+
{
47+
name: "Go",
48+
icon: <FaGolang size={36} color="#00ADD8" />,
49+
bg: "#E0F7FA",
50+
},
51+
{
52+
name: "Python",
53+
icon: <FaPython size={36} color="#3776AB" />,
54+
bg: "#E8F0FE",
55+
},
56+
{
57+
name: "Java",
58+
icon: <FaJava size={36} color="#007396" />,
59+
bg: "#FDEDED",
60+
},
61+
{
62+
name: "JS/TS",
63+
icon: <IoLogoJavascript size={36} color="#F7DF1E" />,
64+
bg: "#FFF8E1",
65+
},
66+
{
67+
name: "Rust",
68+
icon: <FaRust size={36} color="#DEA584" />,
69+
bg: "#FFF3E0",
70+
},
71+
{
72+
name: "C#",
73+
icon: <TbBrandCSharp size={36} color="#512BD4" />,
74+
bg: "#EDE7F6",
75+
},
76+
];
77+
78+
const servers = [
79+
{
80+
name: "Local",
81+
icon: <FaLaptopCode size={36} color="#f97316" />,
82+
bg: "#FFF3E0",
83+
},
84+
{
85+
name: "Docker",
86+
icon: <FaDocker size={36} color="#2496ED" />,
87+
bg: "#E3F2FD",
88+
},
89+
];
90+
91+
return (
92+
<div style={{ marginTop: "2rem" }}>
93+
{/* Language Selection */}
94+
<h2 style={headingStyle}>Choose your language</h2>
95+
<div style={stepContainer}>
96+
{languages.map((lang) => (
97+
<button
98+
key={lang.name}
99+
onClick={() => setLanguage(lang.name)}
100+
style={{
101+
...buttonCard,
102+
border:
103+
language === lang.name ? "2px solid #f97316" : "2px solid #ddd",
104+
boxShadow:
105+
language === lang.name
106+
? "0 3px 8px rgba(249, 115, 22, 0.3)"
107+
: "none",
108+
}}
109+
>
110+
<IconWrapper icon={lang.icon} bg={lang.bg} />
111+
<p style={{ marginTop: "0.5rem", fontWeight: "500" }}>
112+
{lang.name}
113+
</p>
114+
</button>
115+
))}
116+
</div>
117+
118+
{/* Server Selection */}
119+
<h2 style={{ ...headingStyle, marginTop: "2rem" }}>
120+
Where do you want to run the app server?
121+
</h2>
122+
<div style={serverContainer}>
123+
{servers.map((srv) => (
124+
<button
125+
key={srv.name}
126+
onClick={() => setServer(srv.name)}
127+
style={{
128+
...buttonCard,
129+
border:
130+
server === srv.name ? "2px solid #f97316" : "2px solid #ddd",
131+
boxShadow:
132+
server === srv.name
133+
? "0 3px 8px rgba(249, 115, 22, 0.3)"
134+
: "none",
135+
}}
136+
>
137+
<IconWrapper icon={srv.icon} bg={srv.bg} />
138+
<p style={{ marginTop: "0.5rem", fontWeight: "500" }}>{srv.name}</p>
139+
</button>
140+
))}
141+
</div>
142+
143+
{/* Quickstarts */}
144+
{language && server && (
145+
<>
146+
<h2 style={{ ...headingStyle, marginTop: "2rem" }}>
147+
✨ AI Suggested Sample Apps
148+
</h2>
149+
<div style={gridContainer}>
150+
{filteredQuickstarts.length > 0 ? (
151+
filteredQuickstarts.map((app, idx) => (
152+
<div key={idx} style={cardStyle}>
153+
<h3 style={{ margin: "0 0 0.5rem 0", fontSize: "1.2rem" }}>
154+
{app.title}
155+
</h3>
156+
<p style={{ color: "#555", fontSize: "0.95rem" }}>
157+
{app.description}
158+
</p>
159+
<Link to={app.link} style={linkStyle}>
160+
View Quickstart →
161+
</Link>
162+
</div>
163+
))
164+
) : (
165+
<p>No quickstarts available for this selection.</p>
166+
)}
167+
</div>
168+
</>
169+
)}
170+
</div>
171+
);
172+
}
173+
174+
// Styles
175+
const headingStyle = {
176+
textAlign: "left",
177+
marginLeft: "1rem",
178+
fontSize: "1.4rem",
179+
fontWeight: "600",
180+
};
181+
182+
const serverContainer = {
183+
display: "flex",
184+
flexWrap: "wrap",
185+
gap: "1.5rem",
186+
justifyContent: "flex-start",
187+
marginTop: "1.5rem",
188+
marginLeft: "1rem",
189+
};
190+
191+
const stepContainer = {
192+
display: "flex",
193+
flexWrap: "wrap",
194+
gap: "1.5rem",
195+
marginLeft: "1rem",
196+
justifyContent: "flex-start",
197+
marginTop: "1.5rem",
198+
};
199+
200+
const buttonCard = {
201+
border: "2px solid #ddd",
202+
borderRadius: "12px",
203+
padding: "1rem 2rem",
204+
cursor: "pointer",
205+
background: "#fff",
206+
transition: "all 0.2s ease",
207+
textAlign: "center",
208+
};
209+
210+
const gridContainer = {
211+
display: "grid",
212+
gap: "1.5rem",
213+
gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
214+
marginTop: "2rem",
215+
};
216+
217+
const cardStyle = {
218+
border: "1px solid #eee",
219+
borderRadius: "12px",
220+
padding: "1rem",
221+
background: "#fff",
222+
boxShadow: "0 2px 6px rgba(0, 0, 0, 0.08)",
223+
};
224+
225+
const linkStyle = {
226+
marginTop: "0.8rem",
227+
display: "inline-block",
228+
color: "#f97316",
229+
fontWeight: "bold",
230+
textDecoration: "none",
231+
};

0 commit comments

Comments
 (0)