Twitter cards

[alehel]

Description

Currently Twitter cards don't contain a lot of information. This PR improves the look of these cards.

Twitter card with current code

Twitter card with this PR

You define the image used in the card by defining the socialImage tag in the md file for a page. If it hasn't been defined, we fall back to using your photo.jpg file. The twitter card description uses the existing description tag in the md file.

I've also updated the sample md files with the socialImage tag.

Related Issues

Related to #350

[alxshelepenok]

Wow, this is a very good solution.
It remains to fix a couple of linting errors

[codecov]

Codecov Report

Merging #375 into master will increase coverage by 0.06%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #375      +/-   ##
==========================================
+ Coverage   97.61%   97.68%   +0.06%     
==========================================
  Files          35       35              
  Lines         168      173       +5     
  Branches        9       10       +1     
==========================================
+ Hits          164      169       +5     
  Misses          4        4

Impacted Files	Coverage Δ
src/templates/page-template.js	100% <100%> (ø)	⬆️
src/templates/post-template.js	100% <100%> (ø)	⬆️
src/components/Layout/Layout.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1cdd6c9...849ef16. Read the comment docs.

[alehel]

I forgot to update the tests. I've pushed a quick fix, but I must admit. I don't have a lot of experience writing such tests. Be nice if you could take a look @alxshelepenok

I'll fix the linting errors :).

[alehel]

I'm a little confused by the linting errors. I'm currently getting the following for the Layout.js file,

16:17 error Expected a line break after this opening brace

If you look at Sidebar.js from the master branch it seems to be formatted the same, but without triggering an error. So I'm a little confused what I've done wrong.

[alxshelepenok]

@alehel if the number of props is more than 3

const Layout = ({
  children,
  title,
  description,
  socialImage
}: Props) => {

[alehel]

@alxshelepenok ah, I see. Thanks, I'll fix it now.

I tried running 'yarn lint' before I pushed these changes. However I never got any of these errors. Just a bunch of errors about the linebreak being CRLF, which gets fixed by git anyway. Is there something I need to do to get this command to run correctly on Windows?

[alxshelepenok]

@alehel strange, my preffered os is Fedora Linux, so I didn’t notice it.
To fix these errors, you can try adding linebreak-style: "unix" to eslint config.
diegohaz/arc#171

[alehel]

@alxshelepenok thanks, I got linting working locally by adding "linebreak-style": ["error", "windows"], to the config file. I'll make sure not to push that change :p.

I'm now getting the expected linting errors. I guess the large number of CRLF errors were preventing the actual issues from surfacing in the terminal. Looks like all linting issues are fixed now.

[alxshelepenok]

@alehel Thanks! It will not be superfluous to add an image for an open graph

[alxshelepenok]

I also recommend adding an image for open graph
<meta property="og:image" content={metaImageUrl} />

[alehel]

Fixed 👍

[alxshelepenok]

Excellent thank you!