Skip to content

Commit f207534

Browse files
MiniduOshanMiniduOshan
committed
Fix #1699: Replace placeholder # links in HTML roadmap
1 parent 152d7a0 commit f207534

2 files changed

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

0 commit comments

Comments
 (0)