Made it all typescripty

.gitignore

@@ -2,3 +2,4 @@ node_modules
 index.js
 index.d.ts
 index.mjs
+dist

README.md

@@ -26,6 +26,7 @@ See how this is used in a production site in the [learnwithjason.dev source code
 ```js
 import getShareImage from '@jlengstorf/get-share-image';
 
+
 const socialImage = getShareImage({
  title: 'Deploy a Node.js App to DigitalOcean with SSL',
  tagline: '#devops #nodejs #ssl',
@@ -34,6 +35,8 @@ const socialImage = getShareImage({
  titleFont: 'futura',
  taglineFont: 'futura',
  textColor: '232129',
+ titleColor: '232129',
+ taglineColor: '232129'
 });
 ```
 

package.json

@@ -1,12 +1,7 @@
 {
  "name": "@jlengstorf/get-share-image",
  "version": "0.8.0",
- "main": "index.js",
- "module": "index.mjs",
- "exports": {
- "import": "./index.mjs",
- "require": "./index.js"
- },
+ "main": "dist/index.js",
  "author": "Jason Lengstorf <[email protected]> (https://lengstorf.com)",
  "license": "MIT",
  "repository": {
@@ -16,17 +11,15 @@
  "scripts": {
  "build:cjs": "tsc src/index.ts --outDir . -d",
  "build:esm": "cpy ./src/index.ts . --rename=index.mjs",
- "build": "yarn build:cjs && yarn build:esm",
+ "build": "tsc",
  "prepublish": "npm run build"
  },
  "files": [
- "index.js",
- "index.mjs",
- "index.d.ts"
+ "dist"
  ],
- "types": "index.d.ts",
+ "types": "dist/index.d.ts",
  "devDependencies": {
  "cpy-cli": "^3.1.1",
- "typescript": "^4.0.5"
+ "typescript": "^4.4.3"
  }
-}
+}

src/index.ts

@@ -1,42 +1,40 @@
-/**
- * @typedef Config
- * @prop {string} title
- * @prop {string} [tagline]
- * @prop {string} cloudName
- * @prop {string} imagePublicID
- * @prop {string} [cloudinaryUrlBase]
- * @prop {string} [titleExtraConfig]
- * @prop {string} [taglineExtraConfig]
- * @prop {string} [titleFont]
- * @prop {string} [taglineFont]
- * @prop {number} [imageWidth]
- * @prop {number} [imageHeight]
- * @prop {number} [textAreaWidth]
- * @prop {number} [textLeftOffset]
- * @prop {string} [titleGravity]
- * @prop {string} [taglineGravity]
- * @prop {number} [titleLeftOffset]
- * @prop {number} [taglineLeftOffset]
- * @prop {number} [titleBottomOffset]
- * @prop {number} [taglineTopOffset]
- * @prop {string} [textColor]
- * @prop {string} [titleColor]
- * @prop {string} [taglineColor]
- * @prop {number} [titleFontSize]
- * @prop {number} [taglineFontSize]
- * @prop {string} [version]
- */
+
+interface Props {
+  title: string;
+  tagline: string;
+  cloudName: string;
+  imagePublicID: string;
+  cloudinaryUrlBase?: string;
+  titleFont?: string;
+  titleExtraConfig?: string;
+  taglineExtraConfig?: string;
+  taglineFont?: string;
+  imageWidth?: number;
+  imageHeight?: number;
+  textAreaWidth?: number;
+  textLeftOffset?: number;
+  titleGravity?: string;
+  taglineGravity?: string;
+  titleLeftOffset?: number | null;
+  taglineLeftOffset?: number | null;
+  titleBottomOffset?: number;
+  taglineTopOffset?: number;
+  textColor?: string;
+  titleColor: string;
+  taglineColor: string;
+  titleFontSize?: number;
+  taglineFontSize?: number;
+  version?: number | null;
+}
 
 /**
  * Encodes characters for Cloudinary URL
  * Encodes some not allowed in Cloudinary parameter values twice:
  * hash, comma, slash, question mark, backslash
  * https://support.cloudinary.com/hc/en-us/articles/202521512-How-to-add-a-slash-character-or-any-other-special-characters-in-text-overlays-
  *
- * @param {string} text
- * @return {string}
  */
-function cleanText(text) {
+function cleanText(text: string) {
  return encodeURIComponent(text).replace(/%(23|2C|2F|3F|5C)/g, '%25$1');
 }
 
@@ -45,8 +43,6 @@ function cleanText(text) {
  *
  * @see https://cloudinary.com/documentation/image_transformations#adding_text_captions
  *
- * @param {Config} config
- * @return {string}
  */
 export default function generateSocialImage({
  title,
@@ -74,9 +70,9 @@ export default function generateSocialImage({
  titleFontSize = 64,
  taglineFontSize = 48,
  version = null,
-}) {
+}: Props) {
  // configure social media image dimensions, quality, and format
- const imageConfig = [
+ const imageConfig: string = [
  `w_${imageWidth}`,
  `h_${imageHeight}`,
  'c_fill',
@@ -85,7 +81,7 @@ export default function generateSocialImage({
  ].join(',');
 
  // configure the title text
- const titleConfig = [
+ const titleConfig: string = [
  `w_${textAreaWidth}`,
  'c_fit',
  `co_rgb:${titleColor || textColor}`,
@@ -98,18 +94,18 @@ export default function generateSocialImage({
  ].join(',');
 
  // configure the tagline text
- const taglineConfig = tagline
+ const taglineConfig: string | undefined = tagline
  ? [
-  `w_${textAreaWidth}`,
-  'c_fit',
-  `co_rgb:${taglineColor || textColor}`,
-  `g_${taglineGravity}`,
-  `x_${taglineLeftOffset || textLeftOffset}`,
-  `y_${taglineTopOffset}`,
-  `l_text:${taglineFont}_${taglineFontSize}${taglineExtraConfig}:${cleanText(
-  tagline,
-  )}`,
-  ].join(',')
+ `w_${textAreaWidth}`,
+ 'c_fit',
+ `co_rgb:${taglineColor || textColor}`,
+ `g_${taglineGravity}`,
+ `x_${taglineLeftOffset || textLeftOffset}`,
+ `y_${taglineTopOffset}`,
+ `l_text:${taglineFont}_${taglineFontSize}${taglineExtraConfig}:${cleanText(
+ tagline,
+ )}`,
+ ].join(',')
  : undefined;
 
  // combine all the pieces required to generate a Cloudinary URL

tsconfig.json

@@ -0,0 +1,15 @@
+{
+ "compilerOptions": {
+ "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
+ "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+ "checkJs": false /* Report errors in .js files. */,
+ "outDir": "dist" /* Redirect output structure to the directory. */,
+ "rootDir": "src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
+ "strict": false /* Enable all strict type-checking options. */,
+ "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+ "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
+ "declaration": true
+ },
+ "include": ["src"],
+ "exclude": ["node_modules"]
+}

yarn.lock

@@ -1315,10 +1315,10 @@ type-fest@^0.8.1:
  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
-typescript@^4.0.5:
- version "4.0.5"
- resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.5.tgz#ae9dddfd1069f1cb5beb3ef3b2170dd7c1332389"
- integrity sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==
+typescript@^4.4.3:
+ version "4.4.3"
+ resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.3.tgz#bdc5407caa2b109efd4f82fe130656f977a29324"
+ integrity sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA==
 
 union-value@^1.0.0:
  version "1.0.1"