Add 'previews' to markdown examples

[goobertron]

Addresses #75.

The formatting isn't perfect; for example, I'm not sure how best to match the in-app formatting for quotations. I don't really want to start hacking the project site CSS just to do this. Is it good enough as it is, or can you suggest improvements?

[goobertron]

@denschub - what do you think of this? Is it good enough as an answer to the issue to merge?

[goobertron]

Good idea. I've updated as per your comment.

I would like to include an inline code snippet in the unformatted example and the preview, so that in the raw example it will read "This line contains `a code snippet` in the middle." but in the preview will read "This line contains a code snippet in the middle."

To do this, I need to add back-ticks around the code snippet in the unformatted example, and the \\ HTML tags around the formatted preview.

The only way I have been able to do this is to create two lines for the snippet text in the locale file, one surrounded by back-ticks, the other by the \ tags. It would be far more elegant just to have the one line in the locale file, and then insert the back-ticks or HTML tags in the view file. I'll need help to do this, however. (I'm even having trouble describing what I want to do!)

Can anyone advise on how to do this? Essentially, a valid way of doing something like <%= t('.code_code6', code_snippet: <code>(t('.code_snippet_text'))</code>).html_safe %>

[goobertron]

I've only just got round to finishing this. Have made changes based on Fla's comments.

I think it's ready now, but please check the following: – Is the way I've separated the 'code snippet' in the Code section (line 197 in formatting.html.erb) all right? – Is the new Line breaks section correct? (Adding two spaces to the end of a line gives soft line breaks.) Testing this in Diaspora yesterday, I got line breaks even without the two spaces. Has the markdown interpolation been changed in this respect? If so, I'll remove the Line Breaks section. – The formatting of the quoted text (line 128) no longer matches quoted text in Diaspora. It used to be greyed and in italics; now it is indented with a vertical line at the left. I think it still acts as a useful visual cue here, but if someone wants to hack the project site CSS to make this look like quoted text in D*, please do.

Please also check I've not broken too many translations with my changes. I've tried to necessitate as little translation work needed as possible, but there will be some, for sure.

Thanks!

[goobertron]

@Flaburgan @SuperTux88 anything else I need to do to this?

[SuperTux88]

Is the way I've separated the 'code snippet' in the Code section (line 197 in formatting.html.erb) all right?

That looks OK

Is the new Line breaks section correct? (Adding two spaces to the end of a line gives soft line breaks.) Testing this in Diaspora yesterday, I got line breaks even without the two spaces. Has the markdown interpolation been changed in this respect? If so, I'll remove the Line Breaks section.

I tested that, and it works without the spaces (on desktop and mobile). So I would remove this for now, we can always add it if it's needed again.

The formatting of the quoted text (line 128) no longer matches quoted text in Diaspora. It used to be greyed and in italics; now it is indented with a vertical line at the left. I think it still acts as a useful visual cue here, but if someone wants to hack the project site CSS to make this look like quoted text in D*, please do.

I think that should be changed to look like it currently looks on diaspora.

Otherwise that looks good.

[Flaburgan]

I'll review this today.

[goobertron]

I tested that, and it works without the spaces (on desktop and mobile). So I would remove this for now, we can always add it if it's needed again.

Thanks - removed.

I think that should be changed to look like it currently looks on diaspora.

I've found the CSS for the 'quoted' text in posts. It's:

&.highlighted {
  border-left: 3px solid $brand-primary;
  padding-left: 8px;
}

I can't find where in the code-base $brand-primary is defined, however, so I have – rather hackily – changed this to:

.highlighted {
  border-left: 5px solid #eee;
  padding-left: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
}

It's not perfect, but it's a pretty close approximation of colour, size and margins, on my screen at least. Obviously standard type sizes are different in the project site to in diaspora* itself.

If you can point me to where $brand-primary is defined, or how I can replicate this in the project site, please do! If you think my hack is OK, at least for now, then let me know too.

Pushing this latest so you can pull and test it if you want. NB @Flaburgan – please pull this before you review.

[SuperTux88]

Had a quick look at this now:

.highlighted is for a highlighted comment at the single-post-view ($brand-primary is blue in the default theme). For quotes <blockquote>foobar</blockquote> is used and that is already correctly formatted in the CSS (except the fontsize).

So the only additional CSS needed is:

blockquote {
    font-size: 14px;
}

(Diaspora uses 13px everywhere, but the rest of the formatting page uses 14px, so 13px would look too small compared to the rest of the page)

And change <p class="highlighted"> to <blockquote> (and </p> to </blockquote>).

[goobertron]

Oh fabulous, thank you @SuperTux88. Will push that change now.

[goobertron]

I'll squish the commits once I get the go-ahead from you both.

[SuperTux88]

I only looked at the new commits now, but from me you get a go-ahead :) (I'll test how it looks today evening, but from looking at the code it looks great ;) )

The only thing (really only nitpicking): Can you add a newline at the end of tutorials.css.scss (you can see that in the diff with the little red "no newline at end of file" icon) when you squash it?

[goobertron]

Oh yes, I often forget the newline. Done now, and squished. Thanks!

[SuperTux88]

Thanks.

Depending on which editor you use, you can maybe add it automatically. For example vim adds it automatically (but doesn't show it), and in rubymine I can set a setting to add it automatically on save. So you can try searching <editorname> newline at end of file in the internet :)

[SuperTux88]

And deployed 🎉 (also this time #75 was closed automatically, because you added the keyword to the commit 👍 )

[Flaburgan]

Thank you goob! Sorry arriving late here.

[goobertron]

also this time #75 was closed automatically, because you added the keyword to the commit 👍 )

Yeh - I sometimes learn quickly.... ;-)

Sorry arriving late here.

No problem - as long as your review didn't find lots of errors.....