@jlengstorf/get-share-image - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

index.d.ts

@@ -18,2 +18,4 @@ interface Config {
     textColor?: string;
+    titleColor?: string;
+    taglineColor?: string;
     titleFontSize?: number;
@@ -28,3 +30,3 @@ taglineFontSize?: number;
  */
-export default function generateSocialImage({ title, tagline, cloudName, imagePublicID, cloudinaryUrlBase, titleFont, titleExtraConfig, taglineExtraConfig, taglineFont, imageWidth, imageHeight, textAreaWidth, textLeftOffset, titleBottomOffset, taglineTopOffset, textColor, titleFontSize, taglineFontSize, version, }: Config): string;
+export default function generateSocialImage({ title, tagline, cloudName, imagePublicID, cloudinaryUrlBase, titleFont, titleExtraConfig, taglineExtraConfig, taglineFont, imageWidth, imageHeight, textAreaWidth, textLeftOffset, titleBottomOffset, taglineTopOffset, textColor, titleColor, taglineColor, titleFontSize, taglineFontSize, version, }: Config): string;
 export {};

index.js

@@ -18,3 +18,3 @@ "use strict";
 function generateSocialImage(_a) {
-    var title = _a.title, tagline = _a.tagline, cloudName = _a.cloudName, imagePublicID = _a.imagePublicID, _b = _a.cloudinaryUrlBase, cloudinaryUrlBase = _b === void 0 ? 'https://res.cloudinary.com' : _b, _c = _a.titleFont, titleFont = _c === void 0 ? 'arial' : _c, _d = _a.titleExtraConfig, titleExtraConfig = _d === void 0 ? '' : _d, _e = _a.taglineExtraConfig, taglineExtraConfig = _e === void 0 ? '' : _e, _f = _a.taglineFont, taglineFont = _f === void 0 ? 'arial' : _f, _g = _a.imageWidth, imageWidth = _g === void 0 ? 1280 : _g, _h = _a.imageHeight, imageHeight = _h === void 0 ? 669 : _h, _j = _a.textAreaWidth, textAreaWidth = _j === void 0 ? 760 : _j, _k = _a.textLeftOffset, textLeftOffset = _k === void 0 ? 480 : _k, _l = _a.titleBottomOffset, titleBottomOffset = _l === void 0 ? 254 : _l, _m = _a.taglineTopOffset, taglineTopOffset = _m === void 0 ? 445 : _m, _o = _a.textColor, textColor = _o === void 0 ? '000000' : _o, _p = _a.titleFontSize, titleFontSize = _p === void 0 ? 64 : _p, _q = _a.taglineFontSize, taglineFontSize = _q === void 0 ? 48 : _q, _r = _a.version, version = _r === void 0 ? null : _r;
+    var title = _a.title, tagline = _a.tagline, cloudName = _a.cloudName, imagePublicID = _a.imagePublicID, _b = _a.cloudinaryUrlBase, cloudinaryUrlBase = _b === void 0 ? 'https://res.cloudinary.com' : _b, _c = _a.titleFont, titleFont = _c === void 0 ? 'arial' : _c, _d = _a.titleExtraConfig, titleExtraConfig = _d === void 0 ? '' : _d, _e = _a.taglineExtraConfig, taglineExtraConfig = _e === void 0 ? '' : _e, _f = _a.taglineFont, taglineFont = _f === void 0 ? 'arial' : _f, _g = _a.imageWidth, imageWidth = _g === void 0 ? 1280 : _g, _h = _a.imageHeight, imageHeight = _h === void 0 ? 669 : _h, _j = _a.textAreaWidth, textAreaWidth = _j === void 0 ? 760 : _j, _k = _a.textLeftOffset, textLeftOffset = _k === void 0 ? 480 : _k, _l = _a.titleBottomOffset, titleBottomOffset = _l === void 0 ? 254 : _l, _m = _a.taglineTopOffset, taglineTopOffset = _m === void 0 ? 445 : _m, _o = _a.textColor, textColor = _o === void 0 ? '000000' : _o, titleColor = _a.titleColor, taglineColor = _a.taglineColor, _p = _a.titleFontSize, titleFontSize = _p === void 0 ? 64 : _p, _q = _a.taglineFontSize, taglineFontSize = _q === void 0 ? 48 : _q, _r = _a.version, version = _r === void 0 ? null : _r;
     // configure social media image dimensions, quality, and format
@@ -32,3 +32,3 @@ var imageConfig = [
         'c_fit',
-        "co_rgb:" + textColor,
+        "co_rgb:" + (titleColor || textColor),
         'g_south_west',
@@ -44,3 +44,3 @@ "x_" + textLeftOffset,
             'c_fit',
-            "co_rgb:" + textColor,
+            "co_rgb:" + (taglineColor || textColor),
             'g_north_west',
@@ -47,0 +47,0 @@ "x_" + textLeftOffset,

package.json

 {
   "name": "@jlengstorf/get-share-image",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "main": "index.js",
@@ -5,0 +5,0 @@ "author": "Jason Lengstorf <[e-mail]> (https://lengstorf.com)",

README.md

@@ -8,2 +8,3 @@ # Generate Social Media Images Using Cloudinary
 **This was created as part of an article series:**
+
 - [How to design a social sharing card template](https://www.learnwithjason.dev/blog/design-social-sharing-card/)
@@ -27,3 +28,3 @@ - [How the code in this package works](https://www.learnwithjason.dev/blog/auto-generate-social-image/)
 ```js
-import getShareImage from require('@jlengstorf/get-share-image');
+import getShareImage from '@jlengstorf/get-share-image';
 
@@ -72,2 +73,4 @@ const socialImage = getShareImage({
 | textColor          |          | (string, default `000000`) hex value for text color                  |
+| titleColor         |          | (string) hex value specific for title color. If this is not set, the color will be the one set to `textColor`   |
+| taglineColor       |          | (string) hex value specific for tagline color. If this is not set, the color will be the one set to `textColor` |
 | titleFontSize      |          | (number, default `64`) font size to use for the title                |
@@ -80,3 +83,3 @@ | taglineFontSize    |          | (number, default `48`) font size to use for the tagline              |
 ```js
-const sharingImage = getSharingImage({
+const socialImage = getShareImage({
   title: 'My Post Title',
@@ -86,4 +89,11 @@ tagline: 'A tagline for the post',
   imagePublicID: 'my-template-image.jpg',
+  titleExtraConfig: '_bold', // optional - set title font weight to bold
   textColor: '663399', // optional — set the color to purple
 });
 ```
+
+## Who is using this?
+
+- [Echobind](https://echobind.com/) with their [blog image generator](https://github.com/echobind/blog-image-generator)
+- [@jsjoeio](https://github.com/jsjoeio) on his [personal website](https://github.com/jsjoeio/joeprevite.com)
+- [Horacio Herrera](https://horacioh.com)

No alert changes

Improved metrics

Total package byte prevSize

11641

increased by7.64%

Lines of code

100

increased by2.04%

Number of lines in readme file

95

increased by11.76%

No dependency changes