OpenGraph details

[mjaquiery]

Added OpenGraph meta tags, and a logo image to populate them. Included a Twitter card to display in summary format.

The description is taken from the first available of:

• page.summary
• page.questions
• page.keypoints
• generic site description

The description is truncated to 200 characters.

---

@zkamvar raised the following points:

1. The home page shows the schedule with the questions for each episode, but I think it might be better to prioritize keypoints over questions for the metadata since it will often be viewed out of context of the lesson.

• Questions are used here because they are clearly separated by ? and look quite nice (for the example I used) in the social media preview. Key points may work better for most lessons (perhaps the one I developed with was unusual?). There seems to be a bit of inconsistency over whether questions highlight lesson content or are tangential to the main lesson body. In any case, this should be tweakable in _includes/open-graph.html

2. I believe we can use the largest mstile favicon instead of uploading a new icon. You can see how these are parsed in _includes/favicons.html (and maybe all of this should go in this particular file since it all goes in the tag.

• I've implemented this in this update, the favicon is larger than the minimum dimensions of the card images

---

The new social media rich preview cards for Twitter can be viewed at https://cards-dev.twitter.com/validator
Facebook also has one of these, but it requires a Facebook account to access and I don't have one.

The build is failing on my local copy and I don't know why - I don't think I've changed anything that would break a build and the repository doesn't build properly locally for me.

[zkamvar]

Thank you for submitting this! It looks good! I have a couple of questions and suggestions I brought up in my review that make it more portable between curricula.

[zkamvar]

Individual episode pages will have three things in their YAML header: objectives, questions, and keypoints. I would suggest if the impetus for prioritizing questions is the fact that they have question marks delimiting them, then we can delimit the list items with em-dashes.

Suggested change

	{% if page.summary %}
	{% assign description = page.summary %}
	{% elsif page.questions %}
	{% assign description = page.questions | join: " " %}
	{% elsif page.keypoints %}
	{% assign description = page.keypoints | join: " " %}
	{% elsif include.description %}
	{% assign description = include.description %}
	{% else %}
	{% if page.summary %}
	{% assign description = page.summary %}
	{% elsif page.objectives %}
	{% assign description = page.objectives | join: "—" %}
	{% elsif page.questions %}
	{% assign description = page.questions | join: "—" %}
	{% elsif page.keypoints %}
	{% assign description = page.keypoints | join: "—" %}
	{% elsif include.description %}
	{% assign description = include.description %}
	{% else %}

[mjaquiery]

I think the emdash would work, yes, provided the content is HTML-decoded, which I'm not sure about. If it's not, which is the basis I was working on, joining with " - " or " --- " would work.

[zkamvar]

Modifying alt text if the logo belongs to The Carpentries or if it's one of the curriculum (software carpentry, data carpentry, etc) logos.

Suggested change

	<meta property="og:image:alt" content="Carpentries' logo" />
	{% if site.carpentry == "cp" %}
	{% assign logo_alt = "The Carpentries' logo" %}
	{% else %}
	{% assign logo_alt = "The Carpentries' Curriculum logo" %}
	{% endif %}
	<meta property="og:image:alt" content="{{ logo_alt }}" />

[mjaquiery]

Do we have access to a site.carpentry_full_name or similar variable that we could use for more detail here, to produce e.g. "Data Carpentries Logo"?

[zkamvar]

How would this description be added? Is it something the lesson authors would add in a page called _includes/description.html? Would it be better as an optional yaml item and use site.description?

[mjaquiery]

This is added at the liquid include step (an example is in _layouts/workshop.html):

{% include open_graph.html description="Custom description text here" %}

I removed the customization in _config.yml because I thought it was overcomplicated - it can be restored if we like.

[zkamvar]

The build is failing on my local copy and I don't know why - I don't think I've changed anything that would break a build and the repository doesn't build properly locally for me.

This repository does not build properly on its own, but the automated checks show that it's working, so we're good :)