POC: Feature random code snippet on landing page

[alexandersandberg]

Adds proof of concept for dynamic code snippet on the landing page.

Motivation:

This is a proof of concept for featuring a random code snippet on the landing page. Whether we want to add dynamic content to the landing page or not is a separate discussion, but with this, we can preview what it would be like.

Modifications:

The snippets are stored in _data/featured_snippets.yml. For this POC, I used some random snippets from TSPL. If/when implementing this, we would use some better, more representative snippets.

I now render all snippets in the HTML and hide them all except for the first one with CSS. This allows the syntax highlighter to find and highlight all snippets. I found this to be the best and easier way of doing this. Other possible ways might involve preprocessing the data file to add syntax highlighting instead.

If JavaScript is disabled, only the first snippet in the data file will be shown.

If JavaScript is enabled, there's a script that will randomly move the visible class to one of the `featured snippets every time the page loads.

Keep in mind that the placing of this code snippet is not final. This is just an example of where/how it can be included on the landing page.

Note: I also included a fix for the inconsistent sizing of the latest release button.

Result:

Preview link: https://alexandersandberg-swift-org-website.netlify.app

Let me know if you have a better idea of how to accomplish this while keeping the syntax highlighting.

[dempseyatgithub]

This is very nice - and without adding a great deal of complexity to the site.

In terms of placement on the page, I think the code snippet should be above “Why Swift?” and probably above the three main buttons.

The code snippet seems like it would be more like the product photo ‘hero image' at the top of a product page, as opposed to fitting in the flow of the rest of the page content.

Maybe that opening paragraph "Swift is a general-purpose programming language…” ends up side by side with a narrower code box?

It would be similar to the layout in Reda’s next-gen design prototype.

[alexandersandberg]

This is very nice - and without adding a great deal of complexity to the site.

In terms of placement on the page, I think the code snippet should be above “Why Swift?” and probably above the three main buttons.

The code snippet seems like it would be more like the product photo ‘hero image' at the top of a product page, as opposed to fitting in the flow of the rest of the page content.

Maybe that opening paragraph "Swift is a general-purpose programming language…” ends up side by side with a narrower code box?

It would be similar to the layout in Reda’s next-gen design prototype.

Thanks for the feedback! I definitely agree that the placement of this can be improved. I think it would be nice to get the actual snippets we will use from @TimTr's team to play with for that, as they may or may not require some additional text/explanation.

[tomerd]

love it!

[kaishin]

Really good idea and even better implementation!

[alexandersandberg]

I pushed a few changes:

• Moved the snippet to the top, under the tagline.
• I added a fixed height to the snippet to prevent layout shifts on reload. We can revisit this in the bigger content improvements PR once we have to actual code snippets we want to use to see which height makes the most sense.
• Removed a long snippet example — we should not feature longer snippets like that anyway

I will merge this now, but we should remember to add the following TODOs in the main PR:

• Replace snippet placeholders in _data/featured_snippets.yml with actual snippets we want to feature (cc: @TimTr)
• Possibly adjust the current 15rem height of the featured snippet to better fit our final snippets