Fixes the addMediaURL method (#18)

* Fixes the addMediaURL() method

Author: joaocarmo

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.4.1
+
+> Mar 25, 2021
+
+- Fixes the `addMediaContent()` method ([#17](https://github.com/joaocarmo/vcard-creator/pull/17) thanks to @Falklian)
+- Fixes the `addMediaURL()` method
+
 ## 0.4.0
 
 > Mar 21, 2021

README.md

@@ -11,8 +11,7 @@ It outputs the vCard text that should be saved as a `*.vcf` file.
 
 ## Origin
 
-This is based on _jeroendesloovere_'s
-[vCard](https://github.com/jeroendesloovere/vcard) for PHP.
+This is based on _jeroendesloovere_'s [vCard][jeroendesloovere] for PHP.
 
 ## Installation
 
@@ -28,15 +27,15 @@ npm install vcard-creator
 
 ### As an ESM module (web)
 
-Load **vcard-creator** directly from [skypack](https://skypack.dev) (CDN).
+Load **vcard-creator** directly from [skypack][skypack] (CDN).
 
 ```html
 <script type="module">
   import VCard from 'https://cdn.skypack.dev/vcard-creator'
 </script>
 ```
 
-Demo available in [codepen](https://codepen.io/joaocarmo/pen/PozdprL).
+Demo available in [codepen][codepen].
 
 ### On the web (self-hosted)
 
@@ -54,33 +53,54 @@ It's exposed through the _window_ global object as explained below.
 `main.js`
 
 ```js
-// define vCard
+// Define a new vCard
 var VCard = window.vcardcreator.default
 var myVCard = new VCard()
 
-// ...
+// ...rest of the code
 ```
 
 ### With a bundler / Node.js
 
 With a bundler (e.g. webpack) or in Node.js you can just require / import it.
 
 ```js
-var VCard = require('vcard-creator').default
+const VCard = require('vcard-creator').default
 
-// define a new vCard
-var myVCard = new VCard()
+// Define a new vCard
+const myVCard = new VCard()
 ```
 
 Or...
 
 ```js
 import VCard from 'vcard-creator'
 
-// define vCard
+// Define a new vCard
 const myVCard = new VCard()
 ```
 
+### Including an image
+
+You need to provide the image already properly encoded (base64). Most software
+will probably ignore a photo URL, even if it adheres to the specification.
+
+```js
+// Example in Node.js
+
+const fs = require('fs')
+const VCard = require('vcard-creator').default
+
+const imagePath = './lib/__tests__/assets/sample.jpg'
+const image = fs.readFileSync(imagePath, { encoding: 'base64', flag: 'r' })
+
+const vCard = new VCard()
+
+vCard.addPhoto(image, 'JPEG')
+```
+
+Include the proper [MIME type][mime-types] (defaults to `JPEG`).
+
 ### iCalendar format
 
 For Apple devices that don't support the `vcf` file format, there is a
@@ -90,11 +110,11 @@ with a `ics` file extension instead.
 The trick is to create an iCalendar file with a vCard attached.
 
 ```js
-// define a new vCard as 'vcalendar'
-var myVCalendar = new VCard('vcalendar')
+// Define a new vCard as 'vcalendar'
+const myVCalendar = new VCard('vcalendar')
 
-// or set it afterwards
-var myOtherVCalendar = new VCard()
+// ...or set it afterwards
+const myOtherVCalendar = new VCard()
 myOtherVCalendar.setFormat('vcalendar')
 ```
 
@@ -103,20 +123,20 @@ myOtherVCalendar.setFormat('vcalendar')
 ```js
 import VCard from 'vcard-creator'
 
-// define a new vCard
+// Define a new vCard
 const myVCard = new VCard()
 
-// define variables
+// Some variables
 const lastname = 'Desloovere'
 const firstname = 'Jeroen'
 const additional = ''
 const prefix = ''
 const suffix = ''
 
 myVCard
-  // add personal data
+  // Add personal data
   .addName(lastname, firstname, additional, prefix, suffix)
-  // add work data
+  // Add work data
   .addCompany('Siesqo')
   .addJobtitle('Web Developer')
   .addRole('Data Protection Officer')
@@ -167,3 +187,10 @@ yarn test:web-build
 
 yarn test:web-export
 ```
+
+<!-- References -->
+
+[codepen]: https://codepen.io/joaocarmo/pen/PozdprL
+[jeroendesloovere]: https://github.com/jeroendesloovere/vcard
+[mime-types]: https://www.iana.org/assignments/media-types/media-types.xhtml#image
+[skypack]: https://skypack.dev

lib/VCard.ts

@@ -211,7 +211,7 @@ ${name};${extended};${street};${city};${region};${zip};${country}\
    * @return {this}
    */
   private addMediaURL(property: string, url: string, element: string): this {
-    this.setProperty(element, property, `VALUE=uri:${url}`)
+    this.setProperty(element, `${property};VALUE=uri`, url)
 
     return this
   }

lib/__tests__/VCard.js

@@ -10,8 +10,7 @@ describe('Test vCard', () => {
   const additional = ''
   const prefix = ''
   const suffix = ''
-  const photoURL =
-    'https://live.staticflickr.com/65535/51059209772_bf41a28c7e_q.jpg'
+  const photoURL = 'https://example.com/img/photo.jpg'
 
   it("should create and output the proper 'vcard' format", () => {
     // Setup a fixed date
@@ -58,8 +57,7 @@ TEL;WORK:123456789\r\n\
 ADR;WORK;POSTAL;CHARSET=utf-8:name;extended;street;worktown;state;workpos\r\n\
  tcode;Belgium\r\n\
 URL:http://www.jeroendesloovere.be\r\n\
-PHOTO:VALUE=uri:https://live.staticflickr.com/65535/51059209772_bf41a28c7\r\n\
- e_q.jpg\r\n\
+PHOTO;VALUE=uri:https://example.com/img/photo.jpg\r\n\
 END:VCARD\r\n\
 `
 

test-functional/test-export.js

@@ -29,7 +29,9 @@ vcard
     'Belgium',
   )
   .addURL('http://www.jeroendesloovere.be')
-  .addPhoto('https://live.staticflickr.com/65535/51059209772_bf41a28c7e_q.jpg')
+  .addPhotoURL(
+    'https://cdn.jsdelivr.net/gh/joaocarmo/vcard-creator@master/lib/__tests__/assets/sample.jpg',
+  )
 
 var output = vcard.toString()
 

test-functional/test-pre-build.js

@@ -30,7 +30,9 @@ vcard
     'Belgium',
   )
   .addURL('http://www.jeroendesloovere.be')
-  .addPhoto('https://live.staticflickr.com/65535/51059209772_bf41a28c7e_q.jpg')
+  .addPhotoURL(
+    'https://cdn.jsdelivr.net/gh/joaocarmo/vcard-creator@master/lib/__tests__/assets/sample.jpg',
+  )
 
 var output = vcard.toString()
 

test-functional/test-vcalendar.js

@@ -31,6 +31,8 @@ vCard
     'Belgium',
   )
   .addURL('http://www.jeroendesloovere.be')
-  .addPhoto('https://live.staticflickr.com/65535/51059209772_bf41a28c7e_q.jpg')
+  .addPhotoURL(
+    'https://cdn.jsdelivr.net/gh/joaocarmo/vcard-creator@master/lib/__tests__/assets/sample.jpg',
+  )
 
 console.log(vCard.toString())