Add gVisor blog post

[eloquence]

• Also tweaks blockquote styling.
• In draft form since formatting still needs a bit of love. At minimum we'll need to ensure that lists, preformatted text and the table are formatted correctly.

[eloquence]

@EtiennePerot We can make further edits here (but easy enough to transfer additional stuff from GDoc if we need to). Once this PR is merged it'll go live on the site :)

[apyrgio]

CSS is not my strongest suit, but I tried the following:

• Download one of those classless CSS libraries for static sites.
• Check out how our site looks with them

There was a CSS library that stood out, Pico CSS. It breaks our site in various ways, but the elements (table, blockquote, code, lists) look great. I was thinking we can copy the respective styles from this library (with attribution, since it's MIT licensed), and add them in our style.css file.

[EtiennePerot]

How about using SVGs instead?

[eloquence]

That was my first impulse as well, but the Google-created SVGs all come with a large white background that needs to be manually cropped, which I've found surprisingly labor-intensive in Inkscape and unpredictable in other tools I've tried. If you have time and better luck with the cropping, a commit to push SVG copies would be welcome, I can take care of the search & replace.

[harrislapiroff]

Yep, after taking a swing at it myself, I also wasn't able to find a quick way to do this. Surprisingly finicky files it generates with not just the canvas sizing wrong, but a bunch of stray elements in off-to-the-side locations.

I do wonder if we could have gotten similar results using mermaid... but maybe an experiment for a future time.

[EtiennePerot]

I gave it a go as well, and had some success exporting SVGs that render fine in desktop image viewers or when converted to PNG with ImageMagick, but that look broken in both Chrome and Firefox (mostly due to missing or mis-transformed embedded images using base64 URLs). Given these difficulties and the evident existence of differences in rendering implementations, I concur we should go with PNGs.

[EtiennePerot]

... Actually @apyrgio's SVGs appear to render fine when seen in the GitHub diff preview (which does use <img src="path/to/raw/svg"/> to display SVGs, not a server-side render), but when opening that same URL in a dedicated tab, fail to render. This is very confusing.

[apyrgio]

I think that's actually a side-effect of rendering the SVG file with, well... the <svg> tag. When we fetch this SVG via GitHub, it's downloaded as is, meaning that browsers can render it. This is an attack vector though (see: https://www.securesystems.de/blog/svg-security-risks-not-just-a-scalable-graphic/).

GitHub serves third-party content with a strict Content Security Policy (CSP). I see the following response header when fetching https://raw.githubusercontent.com/freedomofpress/dangerzone.rocks/1b9a41c23dd0a6e34a6cdda893d39fd6e97e1e73/src/assets/img/dangerzone-outline.svg:

content-security-policy:  default-src 'none'; style-src 'unsafe-inline'; sandbox

Most likely, this affects the rendering of the embedded icons somehow, since the browser can render the SVG fine on its own:

Note that our blogs should not be affected for the same reason that GitHub's diff preview is not affected; we load SVGs via the <img> tag, which has different security properties than embedding it straight in the HTML.

[apyrgio]

As for the SVGs themselves, I removed the white background with Vim, and messed around with the viewBox attribute, until I got something to my satisfaction.

[apyrgio]

Leaving the conversation open for comments. Else, I don't see something blocking here.

[EtiennePerot]

@EtiennePerot We can make further edits here (but easy enough to transfer additional stuff from GDoc if we need to). Once this PR is merged it'll go live on the site :)

There are still a few edits being made on the doc. I suggest holding off on content edits this for 1 or 2 more days.

[eloquence]

OK, I'm pretty happy with the styling now. I also changed the excerpt logic up a bit, so we can use --- to identify the section of a post that's shown in the feed, and have it preserve formatting.

[harrislapiroff]

A few small commentary-type notes, but nothing deploy-blocking. Will also take a quick look at SVGs.

[EtiennePerot]

Pull request on the gVisor blog side: google/gvisor#10937

(I updated the markdown to match the new contents from the doc, feel free to steal it.)

[apyrgio]

Heads up, I've pushed a commit (0776d88) where I've aligned our post title and publication notice with the ones that the gVisor team used as well. Other than that, I've approved the changes and I'm happy to squash and merge at any time.