<497> Add anchors to main sections

[federicobucchi]

Motivation:

#497

Modifications:

• assets/stylesheets/_screen.scss > added style to show # on h2 hover
• assets/javascripts/application.js > adding anchors for each h2 with id in the seen page

Result:

Only targeting h2 with id for now.

[federicobucchi]

@swift-ci please test

[alexandersandberg]

I believe this is a duplicate of #517?

[kaishin]

I am inclined to vote for doing this using Jekyll if possible.

[federicobucchi]

@kaishin @alexandersandberg updated

[daveverwer]

Great job getting this done with Jekyll 👍 That's a great solution.

My only comment is with the styling. It might look better if it extended to the left of the title to the left of the bounding box rather than being on the right? Also, I wonder if we should draw a little "chain links" icon which might make it more obvious than the hash character what's happening?

Also, whether we use an icon or a hash, we should give it a title of "Permalink" or something like that so that if people hover over it, it's more obvious what it does.

I can draw an icon if you would like to go this direction. I won't until we decide if we want to go that way, though!

[federicobucchi]

@daveverwer I added the title and the chain link icon.

I didn't move it to the left because I found that (in my research) that most of the anchors were placed on the left of the heading.

---

[federicobucchi]

@swift-ci please test

[daveverwer]

Looks great!

[kaishin]

The site isn't building due to an unescaped character.

[kaishin]

@federicobucchi Beside the build issue above, the anchors are always visible on h4. They are also vertically misaligned and appear larger compared to the text.

We can perhaps use CSS to size the SVG using type-related units (em, rem) etc and if that doesn't work I wonder if we should revert to "#" as it would avoid this whole category of problems.

[federicobucchi]

@swift-ci please test

[federicobucchi]

@kaishin yeah that was a problem, but for now we want only h2 so we shouldn't have the vertical align issue

[federicobucchi]

@swift-ci please test

[alexandersandberg]

Not sure if I'm missing anything but I don't see any anchors anywhere when running locally. I'm on the latest commit.

[federicobucchi]

@alexandersandberg I just tested, it works for me:

• Going to the page: /getting-started/
• Hover for example of "Using Swift"

[alexandersandberg]

@alexandersandberg I just tested, it works for me:

• Going to the page: /getting-started/
• Hover for example of "Using Swift"

Ok, so it worked if I first did LC_ALL=en_us.UTF-8 bundle exec jekyll build and then ... serve. Probably due to some cache. As long as it works for people pulling the code for the first time it should be fine.

It does not appear white in dark mode for me though.

[federicobucchi]

@alexandersandberg I have no idea of what you are experiencing unfortunately.

I am running LC_ALL=en_us.UTF-8 bundle exec jekyll serve

I have tried with Auto or forcing Light and Dark themes and all works correctly for me:

[alexandersandberg]

@alexandersandberg I have no idea of what you are experiencing unfortunately.

I am running LC_ALL=en_us.UTF-8 bundle exec jekyll serve

I have tried with Auto or forcing Light and Dark themes and all works correctly for me:

It works for me in Firefox, but not Safari.

[federicobucchi]

@alexandersandberg I have no idea of what you are experiencing unfortunately.
I am running LC_ALL=en_us.UTF-8 bundle exec jekyll serve
I have tried with Auto or forcing Light and Dark themes and all works correctly for me:

It works for me in Firefox, but not Safari.

I tried with Safari, Firefox and Chrome. All works for me.

@kaishin when you have the chance can you please try too?

If I get another approval, I will merge and we can try if @alexandersandberg experiences the same in prod (there is no risk since, at worst, @alexandersandberg wouldn't see the change)

[kaishin]

Thanks for addressing all the issues @federicobucchi! It is working fine on my side, in Safari and other browsers, in both light and dark modes.