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"