Move survey banner into a YAML file
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: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:
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:
-
banner
is set to@items["/_data/banner.yaml"][:description]
which takes the markdown content from the YAML file. -
markdown(banner)
uses themarkdown
helper method to convert Markdown to HTML. This is also used in the feature flags template. -
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>
.