Skip to content

Move survey banner into a YAML file

Achilleas Pipinellis - OOO until November 25th (parental leave) requested to merge axil-banner-yaml into main

This MR turns the (hard to edit) HTML of the banner into Markdown living in a YAML file. We all know YAML and Markdown, so it's easier to update.

old description While trying this, I encountered a problem, where when kramdown converts the YAML markdown to HTML, it encapsulates it in a paragraph tag. Since we also show the GitLab SVG icons before and after the banner text, it looked like this:

banner-wrong

So, I had to get creative and get rid of the paragraph tag. I tried giving it a 0 padding/margin with CSS, but this didn't work. Since we already use Nokogiri in some other areas, I played a bit with it, and came up with a method that strips <p>. After stripping it, it looks like before:

banner-after

Test locally

If you want to locally test how this works:

require 'kramdown'
require 'nokogiri'

text = YAML.load(File.read('content/_data/banner.yaml'))
html = Kramdown::Document.new(text['description']).to_html
n = Nokogiri::HTML::Document.parse(html)
n.at('//p').inner_html

How this works

And how all these are tied together:

  1. banner is set to @items["/_data/banner.yaml"][:description] which takes the markdown content from the YAML file.
  2. markdown(banner) uses the markdown helper method to convert Markdown to HTML. This is also used in the feature flags template.
  3. strip_p(markdown(banner)) takes that HTML and feeds it to Nokogiri, which then finds the paragraph element and uses its inner HTML, effectively removing <p>.
Edited by Achilleas Pipinellis - OOO until November 25th (parental leave)

Merge request reports