Skip to content

Commit 1c61800

Browse files
leecalcoteleecalcote
authored
Merge pull request #7064 from layer5io/copilot/add-id-anchors-to-sections
Add anchor IDs to brand page sections for shareable navigation links
2 parents f5e2fcd + b34f502 commit 1c61800

1 file changed

Lines changed: 67 additions & 32 deletions

File tree

‎src/sections/Company/Brand/index.js‎

Lines changed: 67 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,12 @@ const getDimensions = (ele) => {
4747

4848
// Functions to make scroll with speed control
4949
// Element to move, element or px from, element or px to, time in ms to animate
50-
const scrollTo = (element, duration = 2000) => {
50+
const scrollTo = (element, sectionId, duration = 2000) => {
51+
// Update URL hash
52+
if (sectionId) {
53+
window.history.pushState(null, null, `#${sectionId}`);
54+
}
55+
5156
let e = document.documentElement;
5257
if (e.scrollTop === 0) {
5358
let t = e.scrollTop;
@@ -127,6 +132,36 @@ const Brand = () => {
127132
{ section: "SocialBackgrounds", ref: SocialBackgroundsRef }
128133
];
129134

135+
const sectionIdMap = {
136+
"layer5": layer5Ref,
137+
"social-backgrounds": SocialBackgroundsRef,
138+
"meshery": mesheryRef,
139+
"meshsync": meshsyncRef,
140+
"meshery-operator": mesheryOperatorRef,
141+
"image-hub": imageHubRef,
142+
"smp": smpRef,
143+
"meshmark": meshmarkRef,
144+
"service-mesh-patterns": servicemeshpatternsRef,
145+
"nighthawk": nightHawkRef,
146+
"meshmate": meshmateRef,
147+
"meshmaster": meshMasterRef,
148+
"kanvas": kanvasRef,
149+
"catalog": CatalogRef,
150+
"five": stickfiguresRef
151+
};
152+
153+
// Handle initial hash navigation on page load
154+
useEffect(() => {
155+
if (typeof window !== "undefined") {
156+
const hash = window.location.hash.substring(1);
157+
if (hash && sectionIdMap[hash]) {
158+
setTimeout(() => {
159+
scrollTo(sectionIdMap[hash].current, hash);
160+
}, 100);
161+
}
162+
}
163+
}, []);
164+
130165
useEffect(() => {
131166
const handleScroll = () => {
132167
const { height: headerHeight } = getDimensions(headerRef.current);
@@ -173,52 +208,52 @@ const Brand = () => {
173208
</div>
174209
<Row className="brand-row">
175210
<Col $xs={12} $md={9} className="brand-col">
176-
<div className="section">
211+
<div className="section" id="brand-guide">
177212
<BrandGuide />
178213
</div>
179-
<div className="section" ref={layer5Ref}>
214+
<div className="section" id="layer5" ref={layer5Ref}>
180215
<Layer5Brand />
181216
</div>
182-
<div className="section" ref={SocialBackgroundsRef}>
217+
<div className="section" id="social-backgrounds" ref={SocialBackgroundsRef}>
183218
<SocialBackgrounds />
184219
</div>
185-
<div className="section" ref={mesheryRef}>
220+
<div className="section" id="meshery" ref={mesheryRef}>
186221
<MesheryBrand />
187222
</div>
188-
<div className="section" ref={meshsyncRef}>
223+
<div className="section" id="meshsync" ref={meshsyncRef}>
189224
<MeshSyncBrand />
190225
</div>
191-
<div className="section" ref={mesheryOperatorRef}>
226+
<div className="section" id="meshery-operator" ref={mesheryOperatorRef}>
192227
<MesheryOperatorBrand />
193228
</div>
194-
<div className="section" ref={imageHubRef}>
229+
<div className="section" id="image-hub" ref={imageHubRef}>
195230
<ImageHubBrand />
196231
</div>
197-
<div className="section" ref={smpRef}>
232+
<div className="section" id="smp" ref={smpRef}>
198233
<SMPBrand />
199234
</div>
200-
<div className="section" ref={meshmarkRef}>
235+
<div className="section" id="meshmark" ref={meshmarkRef}>
201236
<MeshMarkBrand />
202237
</div>
203-
<div className="section" ref={servicemeshpatternsRef}>
238+
<div className="section" id="service-mesh-patterns" ref={servicemeshpatternsRef}>
204239
<ServiceMeshPatterns />
205240
</div>
206-
<div className="section" ref={nightHawkRef}>
241+
<div className="section" id="nighthawk" ref={nightHawkRef}>
207242
<NightHawk />
208243
</div>
209-
<div className="section" ref={meshmateRef}>
244+
<div className="section" id="meshmate" ref={meshmateRef}>
210245
<CommunityBrand />
211246
</div>
212-
<div className="section" ref={meshMasterRef}>
247+
<div className="section" id="meshmaster" ref={meshMasterRef}>
213248
<MeshMasterBrand />
214249
</div>
215-
<div className="section" ref={kanvasRef}>
250+
<div className="section" id="kanvas" ref={kanvasRef}>
216251
<KanvasBrand />
217252
</div>
218-
<div className="section" ref={CatalogRef}>
253+
<div className="section" id="catalog" ref={CatalogRef}>
219254
<Catalog />
220255
</div>
221-
<div className="section" ref={stickfiguresRef}>
256+
<div className="section" id="five" ref={stickfiguresRef}>
222257
<StickFigures />
223258
</div>
224259
</Col>
@@ -229,7 +264,7 @@ const Brand = () => {
229264
visibleSection === "Layer5" ? "selected" : ""
230265
}`}
231266
onClick={() => {
232-
scrollTo(layer5Ref.current);
267+
scrollTo(layer5Ref.current, "layer5");
233268
}}
234269
>
235270
<span>Layer5</span>
@@ -239,7 +274,7 @@ const Brand = () => {
239274
visibleSection === "SocialBackgrounds" ? "selected" : ""
240275
}`}
241276
onClick={() => {
242-
scrollTo(SocialBackgroundsRef.current);
277+
scrollTo(SocialBackgroundsRef.current, "social-backgrounds");
243278
}}
244279
>
245280
<span> Layer5 Social Backgrounds </span>
@@ -249,7 +284,7 @@ const Brand = () => {
249284
visibleSection === "Meshery" ? "selected" : ""
250285
}`}
251286
onClick={() => {
252-
scrollTo(mesheryRef.current);
287+
scrollTo(mesheryRef.current, "meshery");
253288
}}
254289
>
255290
<span>Meshery</span>
@@ -259,7 +294,7 @@ const Brand = () => {
259294
visibleSection === "MeshSync" ? "selected" : ""
260295
}`}
261296
onClick={() => {
262-
scrollTo(meshsyncRef.current);
297+
scrollTo(meshsyncRef.current, "meshsync");
263298
}}
264299
>
265300
<span>MeshSync</span>
@@ -269,7 +304,7 @@ const Brand = () => {
269304
visibleSection === "MesheryOperator" ? "selected" : ""
270305
}`}
271306
onClick={() => {
272-
scrollTo(mesheryOperatorRef.current);
307+
scrollTo(mesheryOperatorRef.current, "meshery-operator");
273308
}}
274309
>
275310
<span>Meshery Operator</span>
@@ -279,7 +314,7 @@ const Brand = () => {
279314
visibleSection === "ImageHub" ? "selected" : ""
280315
}`}
281316
onClick={() => {
282-
scrollTo(imageHubRef.current);
317+
scrollTo(imageHubRef.current, "image-hub");
283318
}}
284319
>
285320
<span>Image Hub</span>
@@ -289,7 +324,7 @@ const Brand = () => {
289324
visibleSection === "SMP" ? "selected" : ""
290325
}`}
291326
onClick={() => {
292-
scrollTo(smpRef.current);
327+
scrollTo(smpRef.current, "smp");
293328
}}
294329
>
295330
<span>Cloud Native Performance</span>
@@ -299,7 +334,7 @@ const Brand = () => {
299334
visibleSection === "MeshMark" ? "selected" : ""
300335
}`}
301336
onClick={() => {
302-
scrollTo(meshmarkRef.current);
337+
scrollTo(meshmarkRef.current, "meshmark");
303338
}}
304339
>
305340
<span>MeshMark</span>
@@ -309,7 +344,7 @@ const Brand = () => {
309344
visibleSection === "ServiceMeshPatterns" ? "selected" : ""
310345
}`}
311346
onClick={() => {
312-
scrollTo(servicemeshpatternsRef.current);
347+
scrollTo(servicemeshpatternsRef.current, "service-mesh-patterns");
313348
}}
314349
>
315350
<span>Cloud Native Patterns</span>
@@ -319,7 +354,7 @@ const Brand = () => {
319354
visibleSection === "NightHawk" ? "selected" : ""
320355
}`}
321356
onClick={() => {
322-
scrollTo(nightHawkRef.current);
357+
scrollTo(nightHawkRef.current, "nighthawk");
323358
}}
324359
>
325360
<span> NightHawk </span>
@@ -329,7 +364,7 @@ const Brand = () => {
329364
visibleSection === "MeshMate" ? "selected" : ""
330365
}`}
331366
onClick={() => {
332-
scrollTo(meshmateRef.current);
367+
scrollTo(meshmateRef.current, "meshmate");
333368
}}
334369
>
335370
<span>MeshMate</span>
@@ -339,7 +374,7 @@ const Brand = () => {
339374
visibleSection === "MeshMaster" ? "selected" : ""
340375
}`}
341376
onClick={() => {
342-
scrollTo(meshMasterRef.current);
377+
scrollTo(meshMasterRef.current, "meshmaster");
343378
}}
344379
>
345380
<span> MeshMaster </span>
@@ -349,7 +384,7 @@ const Brand = () => {
349384
visibleSection === "Kanvas" ? "selected" : ""
350385
}`}
351386
onClick={() => {
352-
scrollTo(kanvasRef.current);
387+
scrollTo(kanvasRef.current, "kanvas");
353388
}}
354389
>
355390
<span> Kanvas </span>
@@ -359,7 +394,7 @@ const Brand = () => {
359394
visibleSection === "Catalog" ? "selected" : ""
360395
}`}
361396
onClick={() => {
362-
scrollTo(CatalogRef.current);
397+
scrollTo(CatalogRef.current, "catalog");
363398
}}
364399
>
365400
<span> Catalog </span>
@@ -369,7 +404,7 @@ const Brand = () => {
369404
visibleSection === "Five" ? "selected" : ""
370405
}`}
371406
onClick={() => {
372-
scrollTo(stickfiguresRef.current);
407+
scrollTo(stickfiguresRef.current, "five");
373408
}}
374409
>
375410
<span> Five, our mascot </span>

0 commit comments

Comments
 (0)