Skip to content

Commit 3bc446c

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #1713 from MiniduOshan/issue-1699-replace-placeholder-links-html-roadmap
Issue 1699 replace placeholder links html roadmap
2 parents 4a3a751 + f78748f commit 3bc446c

2 files changed

Lines changed: 159 additions & 33 deletions

File tree

‎src/data/roadmaps/html.tsx‎

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const comingSoonLink = "/roadmaps/html-coming-soon";
2+
13
export const htmlRoadmapData = [
24
{
35
title: "HTML Basics",
@@ -7,72 +9,72 @@ export const htmlRoadmapData = [
79
link: "/docs/html/intro-html/",
810
status: "todo",
911
},
10-
{ text: "HTML Documents Structure", link: "#", status: "todo" },
11-
{ text: "Basic HTML Tags", link: "#", status: "todo" },
12-
{ text: "Attributes in HTML", link: "#", status: "todo" },
12+
{ text: "HTML Documents Structure", link: comingSoonLink, status: "todo" },
13+
{ text: "Basic HTML Tags", link: comingSoonLink, status: "todo" },
14+
{ text: "Attributes in HTML", link: comingSoonLink, status: "todo" },
1315
{
1416
text: "HTML Paragraphs and Text Formatting",
15-
link: "#",
17+
link: comingSoonLink,
1618
status: "todo",
1719
},
18-
{ text: "Links and Images in HTML", link: "#", status: "todo" },
19-
{ text: "HTML Lists", link: "#", status: "todo" },
20+
{ text: "Links and Images in HTML", link: comingSoonLink, status: "todo" },
21+
{ text: "HTML Lists", link: comingSoonLink, status: "todo" },
2022
],
2123
},
2224
{
2325
title: "HTML Forms",
2426
items: [
25-
{ text: "Introduction to HTML Forms", link: "#", status: "todo" },
26-
{ text: "Form Elements and Attributes", link: "#", status: "todo" },
27-
{ text: "Input Types in HTML", link: "#", status: "todo" },
28-
{ text: "Form Action and Method", link: "#", status: "todo" },
29-
{ text: "HTML Form Validation", link: "#", status: "todo" },
27+
{ text: "Introduction to HTML Forms", link: comingSoonLink, status: "todo" },
28+
{ text: "Form Elements and Attributes", link: comingSoonLink, status: "todo" },
29+
{ text: "Input Types in HTML", link: comingSoonLink, status: "todo" },
30+
{ text: "Form Action and Method", link: comingSoonLink, status: "todo" },
31+
{ text: "HTML Form Validation", link: comingSoonLink, status: "todo" },
3032
],
3133
},
3234
{
3335
title: "HTML5 Elements",
3436
items: [
35-
{ text: "HTML5 Semantic Elements", link: "#", status: "todo" },
36-
{ text: "HTML5 Media Elements", link: "#", status: "todo" },
37-
{ text: "HTML5 Graphics Elements", link: "#", status: "todo" },
38-
{ text: "HTML5 Form Types", link: "#", status: "todo" },
39-
{ text: "HTML5 New Attributes", link: "#", status: "todo" },
40-
{ text: "Web Storage in HTML5", link: "#", status: "todo" },
37+
{ text: "HTML5 Semantic Elements", link: comingSoonLink, status: "todo" },
38+
{ text: "HTML5 Media Elements", link: comingSoonLink, status: "todo" },
39+
{ text: "HTML5 Graphics Elements", link: comingSoonLink, status: "todo" },
40+
{ text: "HTML5 Form Types", link: comingSoonLink, status: "todo" },
41+
{ text: "HTML5 New Attributes", link: comingSoonLink, status: "todo" },
42+
{ text: "Web Storage in HTML5", link: comingSoonLink, status: "todo" },
4143
],
4244
},
4345
{
4446
title: "HTML Tables",
4547
items: [
46-
{ text: "Basic HTML Table Structure", link: "#", status: "todo" },
47-
{ text: "HTML Table Attributes", link: "#", status: "todo" },
48-
{ text: "Row and Colspan in HTML", link: "#", status: "todo" },
49-
{ text: "Table Caption and Summary", link: "#", status: "todo" },
50-
{ text: "Complex Tables in HTML", link: "#", status: "todo" },
48+
{ text: "Basic HTML Table Structure", link: comingSoonLink, status: "todo" },
49+
{ text: "HTML Table Attributes", link: comingSoonLink, status: "todo" },
50+
{ text: "Row and Colspan in HTML", link: comingSoonLink, status: "todo" },
51+
{ text: "Table Caption and Summary", link: comingSoonLink, status: "todo" },
52+
{ text: "Complex Tables in HTML", link: comingSoonLink, status: "todo" },
5153
],
5254
},
5355
{
5456
title: "HTML and SEO",
5557
items: [
56-
{ text: "Basic SEO Concepts", link: "#", status: "todo" },
57-
{ text: "HTML Tags and SEO", link: "#", status: "todo" },
58-
{ text: "SEO and HTML Meta Tags", link: "#", status: "todo" },
59-
{ text: "SEO and HTML Sitemap", link: "#", status: "todo" },
60-
{ text: "SEO and HTML Robots", link: "#", status: "todo" },
58+
{ text: "Basic SEO Concepts", link: comingSoonLink, status: "todo" },
59+
{ text: "HTML Tags and SEO", link: comingSoonLink, status: "todo" },
60+
{ text: "SEO and HTML Meta Tags", link: comingSoonLink, status: "todo" },
61+
{ text: "SEO and HTML Sitemap", link: comingSoonLink, status: "todo" },
62+
{ text: "SEO and HTML Robots", link: comingSoonLink, status: "todo" },
6163
],
6264
},
6365
{
6466
title: "Responsive Web Design",
6567
items: [
6668
{
6769
text: "Understanding Responsive Web Design",
68-
link: "#",
70+
link: comingSoonLink,
6971
status: "todo",
7072
},
71-
{ text: "Media Queries in CSS", link: "#", status: "todo" },
72-
{ text: "Responsive Images", link: "#", status: "todo" },
73-
{ text: "CSS Flexbox", link: "#", status: "todo" },
74-
{ text: "CSS Grid", link: "#", status: "todo" },
75-
{ text: "CSS Frameworks", link: "#", status: "todo" },
73+
{ text: "Media Queries in CSS", link: comingSoonLink, status: "todo" },
74+
{ text: "Responsive Images", link: comingSoonLink, status: "todo" },
75+
{ text: "CSS Flexbox", link: comingSoonLink, status: "todo" },
76+
{ text: "CSS Grid", link: comingSoonLink, status: "todo" },
77+
{ text: "CSS Frameworks", link: comingSoonLink, status: "todo" },
7678
],
7779
},
7880
];

‎src/pages/roadmaps/html-coming-soon.tsx‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import Layout from "@theme-original/Layout";
2+
import Link from "@docusaurus/Link";
3+
import Head from "@docusaurus/Head";
4+
5+
export default function HTMLRoadmapComingSoon(): JSX.Element {
6+
return (
7+
<Layout
8+
title="HTML Topic Coming Soon"
9+
description="Temporary page for HTML roadmap items that are not published yet."
10+
>
11+
<Head>
12+
<link rel="preconnect" href="https://fonts.googleapis.com" />
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
14+
<link
15+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
16+
rel="stylesheet"
17+
/>
18+
</Head>
19+
20+
<main
21+
style={{
22+
minHeight: "calc(100vh - 80px)",
23+
display: "flex",
24+
alignItems: "center",
25+
justifyContent: "center",
26+
padding: "4rem 1.5rem",
27+
background:
28+
"radial-gradient(circle at top, rgba(59, 130, 246, 0.16), transparent 32%), linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%)",
29+
}}
30+
>
31+
<section
32+
style={{
33+
width: "100%",
34+
maxWidth: "760px",
35+
borderRadius: "28px",
36+
padding: "3rem",
37+
background: "rgba(255, 255, 255, 0.88)",
38+
border: "1px solid rgba(148, 163, 184, 0.25)",
39+
boxShadow: "0 30px 80px rgba(15, 23, 42, 0.12)",
40+
backdropFilter: "blur(14px)",
41+
}}
42+
>
43+
<p
44+
style={{
45+
margin: 0,
46+
textTransform: "uppercase",
47+
letterSpacing: "0.18em",
48+
fontSize: "0.8rem",
49+
fontWeight: 700,
50+
color: "#2563eb",
51+
}}
52+
>
53+
HTML Roadmap
54+
</p>
55+
<h1
56+
style={{
57+
margin: "0.75rem 0 1rem",
58+
fontSize: "clamp(2.25rem, 5vw, 4rem)",
59+
lineHeight: 1.05,
60+
color: "#0f172a",
61+
}}
62+
>
63+
Coming soon
64+
</h1>
65+
<p
66+
style={{
67+
margin: 0,
68+
maxWidth: "56ch",
69+
fontSize: "1.1rem",
70+
lineHeight: 1.75,
71+
color: "#475569",
72+
}}
73+
>
74+
This HTML topic has not been published yet. We&apos;re replacing placeholder roadmap links with this page so every item has a real destination while the documentation is being completed.
75+
</p>
76+
77+
<div
78+
style={{
79+
display: "flex",
80+
flexWrap: "wrap",
81+
gap: "0.85rem",
82+
marginTop: "2rem",
83+
}}
84+
>
85+
<Link
86+
to="/roadmaps/html"
87+
style={{
88+
display: "inline-flex",
89+
alignItems: "center",
90+
justifyContent: "center",
91+
padding: "0.9rem 1.25rem",
92+
borderRadius: "999px",
93+
background: "#2563eb",
94+
color: "#fff",
95+
fontWeight: 700,
96+
textDecoration: "none",
97+
boxShadow: "0 10px 24px rgba(37, 99, 235, 0.24)",
98+
}}
99+
>
100+
Back to HTML roadmap
101+
</Link>
102+
<Link
103+
to="/docs/html/intro-html/"
104+
style={{
105+
display: "inline-flex",
106+
alignItems: "center",
107+
justifyContent: "center",
108+
padding: "0.9rem 1.25rem",
109+
borderRadius: "999px",
110+
border: "1px solid rgba(37, 99, 235, 0.2)",
111+
background: "#fff",
112+
color: "#1d4ed8",
113+
fontWeight: 700,
114+
textDecoration: "none",
115+
}}
116+
>
117+
Start with Introduction to HTML
118+
</Link>
119+
</div>
120+
</section>
121+
</main>
122+
</Layout>
123+
);
124+
}

0 commit comments

Comments
 (0)