Skip to content

Commit 1034acc

Browse files
Achanandhi-MAchanandhi-M
authored
feat: revamp quickstart guide and installation page (#657)
* fix: installation and template Signed-off-by: Achanandhi-M <[email protected]> * fix: installation and template Signed-off-by: Achanandhi-M <[email protected]> * fix: add new installation page Signed-off-by: Achanandhi-M <[email protected]> * feat: revamp quickstart guide and installation page Signed-off-by: Achanandhi-M <[email protected]> --------- Signed-off-by: Achanandhi-M <[email protected]>
1 parent acd3193 commit 1034acc

27 files changed

+1360
-291
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+
import React from "react";
2+
import Link from "@docusaurus/Link";
3+
4+
export default function InstallReminder() {
5+
return (
6+
<div
7+
style={{
8+
padding: "1rem",
9+
border: "1px solid #eee",
10+
borderRadius: "10px",
11+
background: "#fff8f5",
12+
margin: "2rem 0",
13+
}}
14+
>
15+
<h3>Don’t have Keploy installed yet?</h3>
16+
<p>
17+
Before running this sample, make sure Keploy is installed on your
18+
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/QuickStart.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const QuickStart = () => {
6565
<div className="grid grid-cols-1 gap-6 md:grid-cols-3 lg:gap-8">
6666
<Link
6767
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("/server/installation/")}
68+
to={useBaseUrl("/installation/windows-installation/")}
6969
>
7070
<img
7171
className="h-16 w-16"
@@ -76,7 +76,7 @@ export const QuickStart = () => {
7676
</Link>
7777
<Link
7878
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("/server/installation/")}
79+
to={useBaseUrl("/installation/linux-installation/")}
8080
>
8181
<img
8282
className="h-16 w-16"
@@ -87,7 +87,7 @@ export const QuickStart = () => {
8787
</Link>
8888
<Link
8989
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("/server/installation/")}
90+
to={useBaseUrl("/installation/macos-installation/")}
9191
>
9292
<img
9393
className="h-16 w-16"

‎src/components/QuickStartFilter.js‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
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"}}>{lang.name}</p>
112+
</button>
113+
))}
114+
</div>
115+
116+
{/* Server Selection */}
117+
<h2 style={{...headingStyle, marginTop: "2rem"}}>
118+
Where do you want to run the app server?
119+
</h2>
120+
<div style={serverContainer}>
121+
{servers.map((srv) => (
122+
<button
123+
key={srv.name}
124+
onClick={() => setServer(srv.name)}
125+
style={{
126+
...buttonCard,
127+
border:
128+
server === srv.name ? "2px solid #f97316" : "2px solid #ddd",
129+
boxShadow:
130+
server === srv.name
131+
? "0 3px 8px rgba(249, 115, 22, 0.3)"
132+
: "none",
133+
}}
134+
>
135+
<IconWrapper icon={srv.icon} bg={srv.bg} />
136+
<p style={{marginTop: "0.5rem", fontWeight: "500"}}>{srv.name}</p>
137+
</button>
138+
))}
139+
</div>
140+
141+
{/* Quickstarts */}
142+
{language && server && (
143+
<>
144+
<h2 style={{...headingStyle, marginTop: "2rem"}}>
145+
✨ AI Suggested Sample Apps
146+
</h2>
147+
<div style={gridContainer}>
148+
{filteredQuickstarts.length > 0 ? (
149+
filteredQuickstarts.map((app, idx) => (
150+
<div key={idx} style={cardStyle}>
151+
<h3 style={{margin: "0 0 0.5rem 0", fontSize: "1.2rem"}}>
152+
{app.title}
153+
</h3>
154+
<p style={{color: "#555", fontSize: "0.95rem"}}>
155+
{app.description}
156+
</p>
157+
<Link to={app.link} style={linkStyle}>
158+
View Quickstart →
159+
</Link>
160+
</div>
161+
))
162+
) : (
163+
<p>No quickstarts available for this selection.</p>
164+
)}
165+
</div>
166+
</>
167+
)}
168+
</div>
169+
);
170+
}
171+
172+
// Styles
173+
const headingStyle = {
174+
textAlign: "left",
175+
marginLeft: "1rem",
176+
fontSize: "1.4rem",
177+
fontWeight: "600",
178+
};
179+
180+
const serverContainer = {
181+
display: "flex",
182+
flexWrap: "wrap",
183+
gap: "1.5rem",
184+
justifyContent: "flex-start",
185+
marginTop: "1.5rem",
186+
marginLeft: "1rem",
187+
};
188+
189+
const stepContainer = {
190+
display: "flex",
191+
flexWrap: "wrap",
192+
gap: "1.5rem",
193+
marginLeft: "1rem",
194+
justifyContent: "flex-start",
195+
marginTop: "1.5rem",
196+
};
197+
198+
const buttonCard = {
199+
border: "2px solid #ddd",
200+
borderRadius: "12px",
201+
padding: "1rem 2rem",
202+
cursor: "pointer",
203+
background: "#fff",
204+
transition: "all 0.2s ease",
205+
textAlign: "center",
206+
};
207+
208+
const gridContainer = {
209+
display: "grid",
210+
gap: "1.5rem",
211+
gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
212+
marginTop: "2rem",
213+
};
214+
215+
const cardStyle = {
216+
border: "1px solid #eee",
217+
borderRadius: "12px",
218+
padding: "1rem",
219+
background: "#fff",
220+
boxShadow: "0 2px 6px rgba(0, 0, 0, 0.08)",
221+
};
222+
223+
const linkStyle = {
224+
marginTop: "0.8rem",
225+
display: "inline-block",
226+
color: "#f97316",
227+
fontWeight: "bold",
228+
textDecoration: "none",
229+
};

0 commit comments

Comments
 (0)