Skip to content

Commit 14ba51f

Browse files
kanishksingh23kanishksingh23
committed
feat: add in-page navigation and back-to-top links to LFX 2026 page
Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>
1 parent f2cb42a commit 14ba51f

2 files changed

Lines changed: 205 additions & 125 deletions

File tree

‎src/collections/programs/Programs.style.js‎

Lines changed: 173 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,137 +1,189 @@
11
import styled from "styled-components";
22

33
export const ProgramsWrapper = styled.div`
4-
a {
5-
color: ${props => props.theme.keppelColor};
6-
overflow-wrap: break-word;
7-
}
8-
img{
9-
width: 19vw;
10-
float: right;
11-
margin-left: 40px;
12-
margin-bottom: 30px;
13-
&.hacktoberfest-img {
14-
width: 50%;
4+
a {
5+
color: ${(props) => props.theme.keppelColor};
6+
overflow-wrap: break-word;
7+
}
8+
img {
9+
width: 19vw;
10+
float: right;
11+
margin-left: 40px;
12+
margin-bottom: 30px;
13+
&.hacktoberfest-img {
14+
width: 50%;
1515
16-
@media only screen and (max-width: 768px) {
17-
width: 27vw;
18-
}
19-
}
20-
@media only screen and (max-width:572px) {
21-
display: block;
22-
float: none;
23-
width: 35vw;
24-
margin: 0 auto 40px auto;
25-
&.hacktoberfest-img {
26-
width: 50vw;
27-
}
28-
}
16+
@media only screen and (max-width: 768px) {
17+
width: 27vw;
18+
}
2919
}
30-
31-
.flex-div{
32-
flex-grow: 0.25;
20+
@media only screen and (max-width: 572px) {
21+
display: block;
22+
float: none;
23+
width: 35vw;
24+
margin: 0 auto 40px auto;
25+
&.hacktoberfest-img {
26+
width: 50vw;
27+
}
3328
}
29+
}
30+
31+
.flex-div {
32+
flex-grow: 0.25;
33+
}
3434
35-
.iframe-container {
36-
position: relative;
37-
float: right;
35+
.iframe-container {
36+
position: relative;
37+
float: right;
3838
39-
@media only screen and (max-width:572px){
40-
float:none;
41-
margin-left: 0px;
42-
overflow: hidden;
39+
@media only screen and (max-width: 572px) {
40+
float: none;
41+
margin-left: 0px;
42+
overflow: hidden;
4343
44-
iframe{
45-
border: 0;
46-
height: 100%;
47-
width: 100%;
48-
left:0;
49-
top:0;
50-
}
51-
}
44+
iframe {
45+
border: 0;
46+
height: 100%;
47+
width: 100%;
48+
left: 0;
49+
top: 0;
50+
}
5251
}
52+
}
5353
54-
.apply-button{
55-
position: relative;
56-
text-align: center;
57-
vertical-align: bottom;
58-
}
59-
.gsod-table-container{
60-
overflow-x: auto;
61-
}
62-
.mlh_logo{
63-
width: 19vw;
64-
float: right;
65-
margin-left: 40px;
66-
margin-bottom: 30px;
67-
.mlh_svg__cls-1 {
68-
transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
69-
fill: ${props => props.theme.whiteToBlack};
70-
}
71-
@media only screen and (max-width:572px) {
72-
display: block;
73-
float: none;
74-
width: 35vw;
75-
margin: 0 auto 40px auto;
76-
}
54+
.apply-button {
55+
position: relative;
56+
text-align: center;
57+
vertical-align: bottom;
58+
}
59+
.gsod-table-container {
60+
overflow-x: auto;
61+
}
62+
.mlh_logo {
63+
width: 19vw;
64+
float: right;
65+
margin-left: 40px;
66+
margin-bottom: 30px;
67+
.mlh_svg__cls-1 {
68+
transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
69+
fill: ${(props) => props.theme.whiteToBlack};
70+
}
71+
@media only screen and (max-width: 572px) {
72+
display: block;
73+
float: none;
74+
width: 35vw;
75+
margin: 0 auto 40px auto;
7776
}
77+
}
7878
79-
.sca_logo{
80-
width: 19vw;
81-
float: right;
82-
margin-left: 40px;
83-
margin-bottom: 30px;
84-
.sca_svg__fil0, .sca_svg__fil6 {
85-
transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
86-
fill: ${props => props.theme.whiteToBlack};
87-
}
88-
@media only screen and (max-width:572px) {
89-
display: block;
90-
float: none;
91-
width: 35vw;
92-
margin: 0 auto 40px auto;
93-
}
94-
}
95-
.lfx_logo{
96-
width: 19vw;
97-
float: right;
98-
margin-left: 40px;
99-
margin-bottom: 30px;
100-
.lfx-white_svg__b{
101-
transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
102-
fill: ${props => props.theme.whiteToBlue003764};
103-
}
104-
.lfx-white_svg__c{
105-
transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
106-
fill: ${props => props.theme.whiteToBlue0096d6};
107-
}
108-
@media only screen and (max-width:572px) {
109-
display: block;
110-
float: none;
111-
width: 35vw;
112-
margin: 0 auto 40px auto;
113-
}
114-
}
115-
.lfx-timeline_terms{
116-
list-style:none;
117-
}
118-
.tutorials-table {
119-
border-spacing: 0;
120-
th {
121-
padding: 14px 0 14px 12px;
122-
border-top: 1px solid #e3e3e3;
123-
border-bottom: 1px solid #e3e3e3;
124-
}
125-
td {
126-
padding: 14px 0 14px 12px;
127-
border-bottom: 1px solid #e3e3e3;
128-
}
129-
tbody tr {
130-
transition: .2s ease;
131-
:hover {
132-
background-color: ${props => props.theme.green3C494FToGreyF5F5F5};
133-
}
79+
.sca_logo {
80+
width: 19vw;
81+
float: right;
82+
margin-left: 40px;
83+
margin-bottom: 30px;
84+
.sca_svg__fil0,
85+
.sca_svg__fil6 {
86+
transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
87+
fill: ${(props) => props.theme.whiteToBlack};
88+
}
89+
@media only screen and (max-width: 572px) {
90+
display: block;
91+
float: none;
92+
width: 35vw;
93+
margin: 0 auto 40px auto;
94+
}
95+
}
96+
.lfx_logo {
97+
width: 19vw;
98+
float: right;
99+
margin-left: 40px;
100+
margin-bottom: 30px;
101+
.lfx-white_svg__b {
102+
transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
103+
fill: ${(props) => props.theme.whiteToBlue003764};
104+
}
105+
.lfx-white_svg__c {
106+
transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
107+
fill: ${(props) => props.theme.whiteToBlue0096d6};
108+
}
109+
@media only screen and (max-width: 572px) {
110+
display: block;
111+
float: none;
112+
width: 35vw;
113+
margin: 0 auto 40px auto;
114+
}
115+
}
116+
.lfx-timeline_terms {
117+
list-style: none;
118+
}
119+
.tutorials-table {
120+
border-spacing: 0;
121+
th {
122+
padding: 14px 0 14px 12px;
123+
border-top: 1px solid #e3e3e3;
124+
border-bottom: 1px solid #e3e3e3;
125+
}
126+
td {
127+
padding: 14px 0 14px 12px;
128+
border-bottom: 1px solid #e3e3e3;
129+
}
130+
tbody tr {
131+
transition: 0.2s ease;
132+
:hover {
133+
background-color: ${(props) => props.theme.green3C494FToGreyF5F5F5};
134+
}
135+
}
136+
}
137+
138+
/* ── LFX In-page navigation ── */
139+
.lfx-on-this-page {
140+
background: ${(props) => props.theme.green3C494FToGreyF5F5F5};
141+
border-left: 4px solid #00b39f;
142+
border-radius: 6px;
143+
padding: 1rem 1.5rem;
144+
margin: 1.5rem 0 2rem 0;
145+
display: inline-block;
146+
min-width: 260px;
147+
148+
strong {
149+
display: block;
150+
font-size: 0.85rem;
151+
text-transform: uppercase;
152+
letter-spacing: 0.05em;
153+
margin-bottom: 0.5rem;
154+
color: #00b39f;
155+
}
156+
ul {
157+
margin: 0;
158+
padding-left: 1.2rem;
159+
}
160+
li {
161+
margin: 0.3rem 0;
162+
list-style: disc;
163+
}
164+
a {
165+
color: #00b39f;
166+
text-decoration: none;
167+
font-size: 0.95rem;
168+
&:hover {
169+
text-decoration: underline;
170+
}
171+
}
172+
}
134173
135-
}
174+
/* ── Back to top link ── */
175+
.lfx-back-to-top {
176+
display: inline-block;
177+
margin: 1.5rem 0 0.5rem 0;
178+
font-size: 0.85rem;
179+
color: #00b39f;
180+
text-decoration: none;
181+
border: 1px solid #00b39f;
182+
border-radius: 4px;
183+
padding: 4px 10px;
184+
&:hover {
185+
background: #00b39f;
186+
color: #fff;
136187
}
188+
}
137189
`;

‎src/collections/programs/lfx-2026/lfx-2026.mdx‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,18 @@ import { Link } from "gatsby";
1515

1616
<ProgramsWrapper>
1717

18+
<span id="top"></span>
19+
20+
<div className="lfx-on-this-page">
21+
<strong>On this page</strong>
22+
<ul>
23+
<li><a href="#spring-2026">🌱 Spring 2026 Projects</a></li>
24+
<li><a href="#summer-2026">☀️ Summer 2026 Projects</a></li>
25+
<li><a href="#fall-2026">🍂 Fall 2026 Projects</a></li>
26+
<li><a href="#additional-info">📌 Additional Information</a></li>
27+
</ul>
28+
</div>
29+
1830
<img src={LfxLogo} alt="lfx_logo" className="lfx_logo"/>
1931
<h3>Linux Foundation 2026 Program Timeline</h3>
2032

@@ -63,7 +75,7 @@ Layer5 is all about <Link to="/community">its community</Link> of contributors.
6375

6476
Technical writers and other contributors are what comprise Layer5 - an open organization, built by the community for the community. Our vibrant community has seen many talented student contributors go on to secure exciting job opportunities with renowned technology companies such as Red Hat, Microsoft, and VMware, just to name a few. At Layer5, we have high expectations from our interns, and in return, we provide them with incredible opportunities to showcase their work on prestigious stages like DockerCon and KubeCon. We actively promote and uplift our interns, and many of them have gone on to become project maintainers. There are <a href="https://www.linkedin.com/company/layer5" rel="nofollow">many</a>, <Link to="https://layer5.io/blog/category/community">many examples</Link> of this on the layer5.io websites.
6577

66-
## LFX Mentorship 2026 Spring Projects
78+
## LFX Mentorship 2026 Spring Projects {#spring-2026}
6779
<br />
6880

6981
### Meshery
@@ -152,7 +164,9 @@ Technical writers and other contributors are what comprise Layer5 - an open orga
152164
- Mentor(s): <Link to="/community/members/lee-calcote">Lee Calcote</Link>, <Link to="mailto:marcus.ringblom@gmail.com">Marcus Ringblom</Link>
153165
- Issue: [https://github.com/meshery/meshery/issues/17099](https://github.com/meshery/meshery/issues/17099)
154166

155-
## LFX Mentorship 2026 Summer Projects
167+
<a href="#top" className="lfx-back-to-top">↑ Back to top</a>
168+
169+
## LFX Mentorship 2026 Summer Projects {#summer-2026}
156170
<br />
157171

158172
### Meshery
@@ -163,7 +177,7 @@ Technical writers and other contributors are what comprise Layer5 - an open orga
163177
CNCF - Meshery: Relationships and Solutions Architecture of Cloud Native Deployments (2026 Term 2)
164178

165179
- Description: Meshery Models are declarative representations of infrastructure and applications. Within these models, Relationships define how different Components (e.g., Kubernetes resources, Cloud services) interact and depend on each other. These relationships are crucial for visualizing, understanding, and managing complex cloud native systems. This project focuses on expanding Meshery Relationships across a wide range of technologies, including Kubernetes and major cloud providers, to better model their interactions and improve user insights. There is a growing need to accurately model these relationships to provide better insights and control over deployments.
166-
The next phase focuses on Cloud Solution Architecture through workload design by creating and publishing Meshery designs that use the newly developed relationships to represent real-world deployments. These designs will be turned into structured tutorials with hands-on labs using Meshery Playground, offering step-by-step guidance and interactive learning. All content will be reviewed by maintainers and published in Meshery’s official documentation
180+
The next phase focuses on Cloud Solution Architecture through workload design by creating and publishing Meshery designs that use the newly developed relationships to represent real-world deployments. These designs will be turned into structured tutorials with hands-on labs using Meshery Playground, offering step-by-step guidance and interactive learning. All content will be reviewed by maintainers and published in Meshery’s official documentation
167181
- Responsibilities:
168182
- Research and Analyze Technologies: Dive deep into various cloud-native technologies (e.g., different compute services, databases, messaging systems, network services, etc.) to understand their components and how they interconnect.
169183
- Develop Relationship Definitions: Create and contribute relationship definitions, typically in JSON or YAML format, to the Meshery models.
@@ -256,7 +270,19 @@ CNCF - Meshery: Meshery Models Support for OCI Registries (2026 Term 2)
256270
- Upstream Issue: [https://github.com/meshery/meshery/issues/19093](https://github.com/meshery/meshery/issues/19093)
257271
- LFX URL:
258272

259-
## Additional information
273+
<a href="#top" className="lfx-back-to-top">↑ Back to top</a>
274+
275+
## LFX Mentorship 2026 Fall Projects {#fall-2026}
276+
<br />
277+
278+
### Meshery
279+
<br />
280+
281+
> Fall 2026 projects will be announced on July 2nd, 2026. Check back soon!
282+
283+
<a href="#top" className="lfx-back-to-top">↑ Back to top</a>
284+
285+
## Additional information {#additional-info}
260286
<br />
261287

262288
### Previous experience with technical writers or documentation
@@ -276,4 +302,6 @@ We interact daily over Slack, and have an open source project [meeting everyday]
276302
</h3>
277303
</div>
278304

305+
<a href="#top" className="lfx-back-to-top">↑ Back to top</a>
306+
279307
</ProgramsWrapper>

0 commit comments

Comments
 (0)