Feature request: Support summary card (Twitter, WhatsApp, ..)

[gagarine]

When a book page is shared on WhatsApp their is no summary card at the moment.

For twitter: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary
For FB / Whatsapp : https://ogp.me

Somethings like that should works:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@user" />
<meta name="twitter:title" content="book title" />
<meta name="twitter:description" content="Cool book" />
<meta name="twitter:image" content="https://image.jpg" />

<meta property="og:title" content="Book title" />
<meta property="og:url" content="https://site.com/page.html" />
<meta property="og:description" content="Cool book">
<meta property="og:image" itemprop="image" content="https://image.jpg"/>
<meta property="og:type" content="book" />  (or article?)
<meta property="og:locale" content="en_GB" /> 

[riojosdev]

I think this is a twitter specific issue. The following was quoted on Twitter dev forum - Card validator removal notice

The v1.1 statuses/filter endpoint will be deprecated on March 9, 2023. We encourage you to start using the filtered stream endpoint in the Twitter API v2 at this time. Read the full announcement here

I was not able to find a way to validate the summary card using their new api.

Whatsapp also has some issues, only square images and small image sizes are supported. This SO question was last modified a month ago

For validating open graph protocols:
Facebook: https://developers.facebook.com/tools/debug/
Linkedin: https://www.linkedin.com/post-inspector/

Also, I think these social medias are using cached versions of the preview, so unless the validator is functional, it's going to take a while to see changes

[joelouthan]

I wanted to piggy back on this issue @riojosdev @gagarine

Is there an handlebar to handle first image on page?

I am thinking of trying to run a preprocessor to handle this but I wanted to check in with you all to make sure there isn't I am missing first.

[0x4ndy]

I see the this ticket is still open.

Just to clarify, this is absolutely not an issue of Twitter or WhatsApp. In order to have summary card displayed properly, the loaded page needs to have at least some basic meta tags. For instance, in case of LinkedIn these are the Open Graph (e.g. og:title) while for Twitter, they have their own (e.g. twitter:title).

Is there a plan to address this feature?

EDIT:
This can be achieved by modifying the theme (i.e. index.hbs file). I haven't tested it yet, but looking at a template example, I see that some basic variables are available, i.e. {{title}} and {{descriptions}}. However, the trick might be with an image, as @joelouthan pointed out. However, I think a workaround could utilize an existing directory structure to access the image from the template based on some naming convention - like it is in case of favicon.png.

[0x4ndy]

I've done some tests and I don't see a way around this limitation, without modifying the base code.
I think the ideal solution would be a possibility to specify additional settings for the chapters (separately, on a chapter by chapter basis), which then could be referenced in the theme using handlebars.

These settings could be:

• description of a chapter
• link to the image

This might be tricky to implement because, as far as I can see, the information about the chapters are taken from the SUMMARY.md and there we only have access to the chapter title and path. If there was a way to add additional info describing chapters within the SUMMARY.md file, that would be ideal.

For now (for my own purpose), I included an handling of the image in the following way:

• I assume that the image that belongs to a given chapter will have the same name (excluding extension)
• this image will be in the same directory as the chapter
• modified hbs_renderers.rs to extract the path to the chapter and file stem (this is needed for the theme modification to build the image path)

ctx.data.insert(
    "file_stem".to_owned(),
    json!(path.file_stem().unwrap_or(&OsStr::from("")).to_str()),
);

• modified the index.hbs to build the image path:

<meta name="image" content="{{ dir }}/{{ file_stem }}.jpeg" />

This works fine-ish, but it only resolves the issue with the image. The same approach I can follow for the description and say get the first 200 characters of the content.

However, this is not ideal and it would be really nice if there was a way to customize the chapters providing this additional info in the chapter itself.

[sspaeti]

I guess this should be handled with front-matter, which is YAML added to each .md file.

E.g. on my GoHugo blog, I have these metadata per blog post, which would be equivalent to a referred chapter in SUMMARY.md in mdBook.

---
title: "Data Orchestration Trends: The Shift From Data Pipelines to Data Products"
subtitle: "Everything you should know about data orchestration trends, popular frameworks, and the shift to data product graphs in 2022."
description: "Everything you should know about data orchestration trends, popular frameworks, and the shift to data product graphs in 2022."
date: 2022-06-14T18:56:18+02:00
url: /blog/data-orchestration-trends/

resources:
- name: "featured-image"
  src: "featured-image.jpg"
- name: featured-image-preview
  src: featured-image-preview.jpg

categories: ["Data Engineering"]
tags: ["data orchestration", "data pipelines", "python", "dagster", "airflow", "prefect", "open-source", "etl"]

weight: 2
draft: false

canonicalUrl: https://airbyte.com/blog/data-orchestration-trends
---

By adding feature-image and description, we'd just need to add a function that reads this frontmatter in index.hbs. For now, I added a static block that is showing on each page; better, obviously, would be to have this read dynamically. Static block below:

        <meta property="og:title" content="Data Engineering Design Patterns: Mastering Convergent Evolution">
        <meta property="og:type" content="book">
        <meta property="og:image" content="https://www.dedp.online/static/og-image.png">
        <meta property="og:url" content="https://www.dedp.online">
        <meta property="og:description" content="A data engineering book to understanding design patterns, exploring the concept of convergent evolution and its significance.">
        <meta name="author" content="Simon Späti">

Better below. Does anyone know how to add a functionality to index.hbs that does something like:

<head>
...
        {{#if is_frontmatter }}
        <meta property="og:title" content="{{ og_title }}">
        <meta property="og:type" content="book">
        <meta property="og:image" content="{{ og_image_url }}">
        <meta property="og:url" content="{{ base_url }}">
        <meta property="og:description" content="{{ og_description }}">
        <meta name="author" content="{{ author }}">
		..dynamically read what's defined in frontmatter?..
        {{else}}
        <!-- Add static Open Graph Meta Tags for Social Media Exposure -->
        <meta property="og:title" content="Data Engineering Design Patterns: Mastering Convergent Evolution">
        <meta property="og:type" content="book">
        <meta property="og:image" content="https://www.dedp.online/static/og-image.png">
        <meta property="og:url" content="https://www.dedp.online">
        <meta property="og:description" content="A data engineering book to understanding design patterns, exploring the concept of convergent evolution and its significance.">
        <meta name="author" content="Simon Späti">
        {{/if}}
...
</head>

This issue also talks about adding metadata: #2142 (comment). Ideally, we'd have a rust front-matter reader that would do the hard part. I found some mentioned them here.

[sspaeti]

I took a first stab at reading Frontmatter with https://github.com/sspaeti/mdbook-frontmatter-reader. It works reading the frontmatter successfully, but I'm not sure how I can pass Frontmatter back to mdBook so that I can access it within tag. Maybe that must be part of mdBook and can't be a preprocessor?

Any suggestion or hint is much appreciated.

My results when printing some debug messages eprintln!("DEBUG: Parsed frontmatter: {:?}, {:?}", parsed.data, &chapter.name);:

mdbook serve -p 3333
2024-02-20 14:54:17 [INFO] (mdbook::book): Book building has started
DEBUG: Parsed frontmatter: Some(Hash({"featured-image-url": String("https://www.dedp.online/static/og-image.png"), "title": String("Introduction to the Field of Data Engineering"), "description": String("Explore the transition from early data warehousing to today's advanced cloud computing, AI hype, and modern data stacks in data engineering. This chapter provides a concise overview of the field's evolution, key advancements, and current challenges, along with practical strategies for navigating the complex landscape, crafted by an industry pioneer for data engineers at all levels.")})), "Introduction to the Field of Data Engineering"

And this would be my chapter.md:

---
title: "Introduction to the Field of Data Engineering"
description: "Explore the transition from early data warehousing to today's advanced cloud computing, AI hype, and modern data stacks in data engineering. This chapter provides a concise overview of the field's evolution, key advancements, and current challenges, along with practical strategies for navigating the complex landscape, crafted by an industry pioneer for data engineers at all levels."
featured-image-url: "https://www.dedp.online/static/og-image.png"
author: "Simon"
---

# Introduction to the Field of Data Engineering
We will start the book with an intro to what we'll dive into later with great detail in the following two chapters, starting with the history and the state of data engineering. 
...

[sspaeti]

Update: I created a PR that works on my side, but little hacky: #2321. Appreciate any comments or help.