@codersrank/work-experience - npm Package Compare versions

Comparing version 0.9.5 to 0.9.6

codersrank-work-experience.js

 /**
- * Codersrank Work Experience Widget 0.9.5
+ * Codersrank Work Experience Widget 0.9.6
  * undefined
@@ -10,3 +10,3 @@ * https://github.com/codersrank-org/work-experience-widget#readme
  *
- * Released on: December 1, 2020
+ * Released on: December 4, 2020
  */
@@ -13,0 +13,0 @@

codersrank-work-experience.min.js

 /**
- * Codersrank Work Experience Widget 0.9.5
+ * Codersrank Work Experience Widget 0.9.6
  * undefined
@@ -10,3 +10,3 @@ * https://github.com/codersrank-org/work-experience-widget#readme
  *
- * Released on: December 1, 2020
+ * Released on: December 4, 2020
  */
@@ -13,0 +13,0 @@

package.json

 {
   "name": "@codersrank/work-experience",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "description": "Codersrank Work Experience Widget",
@@ -5,0 +5,0 @@ "main": "cjs/codersrank-work-experience.js",

README.md

@@ -55,2 +55,3 @@ # Codersrank Work Experience Widget
 | `grid`      | `boolean` | `false` | Enables grid layout. Number of columns is configurable with `--grid-columns` CSS variable |
+| `branding`  | `boolean` | `true`  | Displays "Powered by CodersRank" link                                                     |
 
@@ -125,2 +126,29 @@ For example:
 
+## Use As Image
+
+It is also possible to insert Work Experience widget as an image. It is useful in places where you can't integrate web component, or for example on your GitHub profile README.md page.
+
+Image URL is the following:
+
+```
+https://cr-ss-service.azurewebsites.net/api/ScreenShot?widget=work-experience&username=YOUR_USERNAME
+```
+
+It accepts all widget attributes as query string parameters, plus one extra parameter:
+
+| Name    | Type     | Default | Description                                                                                                                                                                     |
+| ------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `width` | `number` | `800`   | Width of widget element (generated image). Note that generated image has @2x pixel density, so the PNG image will be actually generated in @2x size from the one specified here |
+| `style` | `string` |         | `style` attribute value (here you can specify all CSS variables)                                                                                                                |
+
+For example:
+
+```html
+<img
+  src="https://cr-ss-service.azurewebsites.net/api/ScreenShot?widget=education&username=YOUR_USERNAME&max-items=2&logos=true&style=--item-bg-color:%23f00;--item-border-radius:10px"
+/>
+```
+
+Note that you need to URL Encode some of the characters, for example `#` should be `%23` and `#ff0` color should be specified as `%23ff0` in query.
+
 ## Contribution
@@ -127,0 +155,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

166007

increased by1.08%

Number of lines in readme file

159

increased by21.37%

No dependency changes