syntra / gatsby-remark-social-cards Goto Github PK

Since every page component receives router's location in props one can use this information to construct the final URL.

First, in post template component we pass it to Layout:

export default ({ location }) => {
  return <Layout pathname={location.pathname}>{/* ... */}</Layout>;
};

Then use it instead of slug:

const Layout = ({ pathname, children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
            siteUrl
          }
        }
      }
    `}
    render={data => (
      <Helmet title={data.site.siteMetadata.title}>
        <meta name="twitter:card" content="summary_large_image" />
        <meta
          name="twitter:image"
          content={`${data.site.siteMetadata.siteUrl}${pathname}twitter-card.jpg`}
        />
      </Helmet>
      { /* ... */ }
    )}
  />
);

Here is how I do this. I get siteUrl using graphql and location.pathname from props.

Also, this way we don't have to care about how markdown page URLs are being constructed, e.g. ${siteUrl}/${slug} or ${siteUrl}/blog/{$slug} etc.

I believe this would be more straightforward for people.

Currently, there are only two options for font colors: white and black. We need to add the ability to use any hex value as the text color.

The Problem

The biggest obstacle standing in the way is the fact that the fonts used are bitmap fonts. Which means that they were manually exported (by me) in the colors they appear. Since it's obviously way too much work and not nearly customizable enough to generate lots of various colors (plus the bundle size would suffer massively), we need to figure out a way to generate color overlays for the existing colors.

The Solution

The solution I'm currently thinking is using the white font as a mask. I know that jimp allows for image compositing, so I think that's the best route to take.

Basically:

• Initialize a new image (exact size as the target image)
• Fill the background with black
• Add the text exactly as it will appear on the final card (in white)
• Initialize a new image with the hex color provided
• Use the white/black text image as a mask over top of the color image
• Composite the masked color onto the original card.

That should work. I've only just started using jimp, so I can't say for sure how powerful it is, but it seems to be extremely capable. So I'm sure there is a solution like mentioned above that could work. If not, I know jimp has support for blend modes, so that's another option (albeit a much more complicated and nuanced solution when dealing with custom background colors/images).

If you have any other ideas on how to handle this more gracefully, feel free to voice your opinion here. If you'd like to work on this issue, please leave a comment below to "claim" the issue so that I don't end up working on top of somebody else.

Hi,

I am pretty much using the default configuration as suggested in readme.

{
  resolve: 'gatsby-remark-social-cards',
  options: {
    title: {
      // This is the frontmatter field the title should come from
      field: "title",
      // Currently only supports DejaVuSansCondensed
      // More fonts coming soon!
      font: "DejaVuSansCondensed",
      color: "black", // black|white
      size: 48, // 16|24|32|48|64
      style: "bold", // normal|bold|italic
      x: null, // Will default to xMargin
      y: null, // Will default to yMargin
    },
    meta: {
      // The parts array is what generates the bottom text
      // Pass an array with strings and objects
      // The following array will generate:
      // "- Author Name » September 13"
      // The objects are used to pull data from your markdown's
      // frontmatter. { field: "author" } pulls the author set
      // in the frontmatter. { field: "category" } would pull
      // the category set. Any field can be used as parts
      // Note: Only pass the "format" property on date fields
      parts: [
        "- SomeComm",
        " » ",
        { field: "date", format: "mmmm dS" },
      ],
      // Currently only supports DejaVuSansCondensed
      // More fonts coming soon!
      font: "DejaVuSansCondensed",
      color: "black", // black|white
      size: 24, // 16|24|32|48|64
      style: "normal", // normal|bold|italic
      x: null, // Will default to xMargin
      y: null, // Will default to cardHeight - yMargin - size
    },
    background: "#FFFFFF", // Background color for the card
    xMargin: 24, // Edge margin used when x value is not set
    yMargin:  24,// Edge margin used when y value is not set
  }
},

If I try to fetch the excerpt using graphql I get the following error

{
  "message": "The \"path\" argument must be of type string. Received undefined",
  "locations": [
	{
	  "line": 7,
	  "column": 9
	}
  ],
  "path": [
	"allMarkdownRemark",
	"edges",
	1,
	"node",
	"excerpt"
  ],
  "stack": [
	"TypeError [ERR_INVALID_ARG_TYPE]: The \"path\" argument must be of type string. Received undefined",
	"    at validateString (internal/validators.js:120:11)",
	"    at Object.join (path.js:375:7)",
	"    at module.exports (C:\\w\\myproject\\node_modules\\gatsby-remark-social-cards\\index.js:110:23)",
	"    at C:\\w\\myproject\\node_modules\\gatsby-transformer-remark\\extend-node-type.js:225:18",
	"From previous event:",
	"    at parseString (C:\\w\\myproject\\node_modules\\gatsby-transformer-remark\\extend-node-type.js:218:21)",
	"    at getMarkdownAST (C:\\w\\myproject\\node_modules\\gatsby-transformer-remark\\extend-node-type.js:270:14)",
	"    at runNextTicks (internal/process/task_queues.js:62:5)",
	"    at processImmediate (internal/timers.js:429:9)"
  ]
},

If I remove the plugin from configuration, the excerpt is generated fine. Is this a known issue?

Hi, Thank you for this awesome plugin.
I created my site using stackbit so I can have it up and running quickly.
I've tried to use this plugin and Ive followed the instructions in the installation. But right after I
step no. 2 and I run the site npm run develop I immediately encounter this error

Plugin gatsby-remark-page-creator returned an error The "path" argument must be of type string. Received type undefined Error: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be type string. Received type undefined

I am new to gatsby so I am not sure how to fix the error.

Thank you.

i have author in my sitemetadata, not in my frontmatter.. would you be open to pulling data for that?

I am trying to add gatsby-remark-social-cards, by following instructions here.

I have just added a new plugin under gatsby-transformer-remark.
But when I try to run gatsby develop, it fails on running GraphQL query with the following error:

Error: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined.

Could you advise how the query should look like? I assume I need to add path somewhere in the frontmatter section of my existing query?

Full stack trace:

Error: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

  - validators.js:125 validateString
    internal/validators.js:125:11

  - index.js:110 module.exports
    [gatsby-starter-hero-blog]/[gatsby-remark-social-cards]/index.js:110:23

  - extend-node-type.js:247 Promise.each.plugin
    [gatsby-starter-hero-blog]/[gatsby-transformer-remark]/extend-node-type.js:247:30

  - util.js:16 tryCatcher
    [gatsby-starter-hero-blog]/[bluebird]/js/release/util.js:16:23

  - reduce.js:155 Object.gotValue
    [gatsby-starter-hero-blog]/[bluebird]/js/release/reduce.js:155:18

  - reduce.js:144 Object.gotAccum
    [gatsby-starter-hero-blog]/[bluebird]/js/release/reduce.js:144:25

  - util.js:16 Object.tryCatcher
    [gatsby-starter-hero-blog]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [gatsby-starter-hero-blog]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [gatsby-starter-hero-blog]/[bluebird]/js/release/promise.js:569:18

  - promise.js:606 Promise._settlePromiseCtx
    [gatsby-starter-hero-blog]/[bluebird]/js/release/promise.js:606:10

  - async.js:138 Async._drainQueue
    [gatsby-starter-hero-blog]/[bluebird]/js/release/async.js:138:12

  - async.js:143 Async._drainQueues
    [gatsby-starter-hero-blog]/[bluebird]/js/release/async.js:143:10

  - async.js:17 Immediate.Async.drainQueues [as _onImmediate]
    [gatsby-starter-hero-blog]/[bluebird]/js/release/async.js:17:14

The fonts/ directory was created on a whim before there was much direction in this project (this plugin started as a simple proof-of-concept). Because of that, the folder structure of the fonts will become increasingly difficult to manage if it's maintained as-in. So we need to take steps to improve the structure of that.

The Problem

Currently the folder structure looks something like this:

fonts/
    DejaVuSansCondensed_black_bold_16.fnt
    DejaVuSansCondensed_black_bold_16.png
    DejaVuSansCondensed_black_bold_24.fnt
    DejaVuSansCondensed_black_bold_24.png
    ...

This will become a mess when adding new fonts.

The Solution

Ideally, I think a structure like this would improve manageability of adding many fonts in the future

fonts/
    DejaVuSansCondensed/
        black/
            bold_16.fnt
            italic_16.fnt
            normal_16.fnt

I'm totally open to suggestions on this, it's not set in stone. I realize that there are many different ways to handle the structure. Instead of having black/, maybe it's better to group by size. So it would be DejaVuSansCondensed/16/bold_black.fnt. Maybe go even deeper and do DejaVuSansCondensed/16/black/bold.fnt

Notes

It might be better to wait until #1 is addressed since the color portion of the path is likely to be removed once we have dynamic colors.

Hi,

Thanks for the plugin. Is there an expected date for the facebook card generation? :)

This plugin is awesome and I would love to have it available with translated date, for example have month names in french.