Generate open graph preview image in Code with Front Matter

This post is over a year old, some of this information may be out of date.

Since I moved my blog to Hugo, I created a Front Matter - VSCode extension which makes content/article management easier within Visual Studio Code.

A couple of versions ago, I added the ability to integrate your custom scripts. These will show up as actions in the Front Matter side panel. This functionality allows total flexibility to your content management workflow. As everyone has different needs, it will not limit you.

One of the scripts I use for new articles is generating a preview image for open graph and Twitter.

The script

The script uses node-html-to-image dependency, which, as the name suggests, converts HTML to an image. Under the hood, it uses puppeteer to generate the image.

My preview image looks as follows:

The code of the script looks as follows:

1
//@ts-check
2
import nodeHtmlToImage from "node-html-to-image";
3
import * as uuid from "uuid";
4
import { format, parseJSON } from "date-fns";
5
import { ContentScript } from "@frontmatter/extensibility";
6

7
const html = `
8
<html>
9
  <head>
10
    <style>
11
      body {
12
        width: 1128px;
13
        height: 600px;
14
      }
15
    </style>
16

17
    <!-- Include external CSS, JavaScript or Fonts! -->
18
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
19

20
    <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
21
  </head>
22
  <body>
23
    <div class="p-4" style="background-color: #fefefe;font-family: 'Nunito', sans-serif; font-size: 20px; width: 1128px; height:600px;">
24
      <div class="d-flex flex-column justify-content-center align-items-center text-center" style="border: 10px solid #025a5f; height:100%; width:100%; border-radius:50px;">
25
        <span class="tweet-text mb-2" style="font-size: 52px;">
26
          {title}
27
        </span>
28

29
        <span class="text-muted mb-2">
30
          {date}
31
        </span>
32

33
        <div class="flex justify-center my-4">
34
          <div class="rounded-full inline-flex" style="background-color: #198c95; height: 0.25rem; width: 4rem;"></div>
35
        </div>
36

37
        <div class="mb-2">
38
          <img src="https://www.eliostruyf.com/images/eliostruyf_2022.jpg" class="rounded-circle" width="150px">
39
        </div>
40
        <h4 class="mt-2" style="color: #025a5f" >Elio Struyf</h4>
41
        <span class="text-muted">@eliostruyf</span>
42
      </div>
43
    </div>
44
  </body>
45
</html>
46
`;
47

48
const contentScriptArgs = ContentScript.getArguments();
49

50
if (contentScriptArgs) {
51
  const { workspacePath, frontMatter } = contentScriptArgs;
52

53
  if (workspacePath && frontMatter) {
54
    if (frontMatter.title && frontMatter.date) {
55
      const parsedHtml = html
56
        .replace(`{title}`, frontMatter.title)
57
        .replace(`{date}`, format(parseJSON(frontMatter.date), "MMM dd, yyyy"));
58
      const fileName = `${uuid.v4()}.png`;
59

60
      // @ts-ignore
61
      nodeHtmlToImage({
62
        output: `${workspacePath}/static/social/${fileName}`,
63
        html: parsedHtml,
64
      })
65
        .then(() =>
66
          ContentScript.updateFrontMatter({ preview: `/social/${fileName}` })
67
        )
68
        .catch((e) => ContentScript.done(e?.message || e));
69
    }
70
  }
71
}

Adding the script to Front Matter

To make the script available as an action in the Front Matter side panel, you will first have to add a file with the script’s code to your project.

Once you added the file, make sure to install the dependencies: npm i node-html-to-image uuid date-fns @frontmatter/extensibility -D.

After that, it is time for the final step, registering the command. You can register the script in your .vscode/settings.json file with the following code:

1
"frontMatter.custom.scripts": [{
2
    "title": "Generate social image",
3
    "script": "./scripts/social-img.mjs",
4
    "nodeBin": "~/.nvm/versions/node/v18.17.1/bin/node"
5
  }]

Open the Front Matter side panel, and the new button should show up. When you click on the new button, it will start generating the image. When the script completes, it will show a notification with the path of the image.

The output of the script in a VSCode notification

Running this in WSL

I encountered an issue when trying to run the script in WSL. It had to do with some missing dependencies.

1
# Related GitHub issue: https://github.com/puppeteer/puppeteer/issues/1837
2

3
sudo apt install ca-certificates fonts-liberation gconf-service libappindicator1 libasound2 libatk-bridge2.0-0 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgbm1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libnss3 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 lsb-release wget xdg-utils -y

Update

2024-01-16

Updated the script to use the new @frontmatter/extensibility dependency.

Generate open graph preview image in Code with Front Matter

The script

Adding the script to Front Matter

Running this in WSL

Update

2024-01-16

Related articles

SharePoint Framework snippets extension for Visual Studio Code

SharePoint Framework Script Check extension for Visual Studio Code

#DevHack: Open custom VSCode WebView panel and focus input

Report issues or make changes on GitHub

Comments

Elio Struyf