Add a href attributes to headers on the /start page

[mbroz2]

Although we have links to the tabbed elements on /start (like Releases and Betas), there is currently no way to link directly to a header. For example, there's no way to link to Download package section or the new Develop with Liberty Tools section.

[steven1046]

Can you use https://openliberty.io/start#ide_tools_section and https://openliberty.io/start#downloads-pkg? Edit: now i see that the header covers it up sometimes on load, we should fix that.

[steven1046]

I noticed if you click these links in the same tab, it generally works to scroll to the right place. If you open it in a new tab, it is out of place. I am only having that issue in Chrome though, FF and Safari are good.

[steven1046]

@mbroz2 do the links above solve the issue?

[mbroz2]

yes, I think it's adequate.

However, it should properly scroll to the correct section, and it would be better if the links were user accessible (aka, today there's no way for a user to be able to get those links, without having web development skills and inspecting the html for the page....aka it would be nice if we did something similar to what we do for headers in docs where we provide the squiggly link icon on hover over.)

[steven1046]

I agree that the hyperlink icons like we use in the docs like below would help:

[steven1046]

While adding hyperlink icons, lets fix the section id names to match the sections better.

[steven1046]

@SteveSamJacob19 could you center the href anchors on https://draft-openlibertyio.mqj6zf7jocq.us-south.codeengine.appdomain.cloud/start/#getOL a little more vertically like something like this: