font-picker - npm Package Compare versions

Comparing version 1.3.0 to 2.0.0

package.json

 {
 	"name": "font-picker",
-	"version": "1.3.0",
-	"description": "Font picker component for previewing, selecting, and downloading Google Fonts",
+	"version": "2.0.0",
+	"description": "Font selector component for Google Fonts",
 	"keywords": [
@@ -9,5 +9,8 @@ "fonts",
 		"selector",
+		"picker",
+		"component",
+		"preview",
 		"download"
 	],
-	"main": "lib/index.js",
+	"main": "lib/font-picker.js",
 	"author": "Samuel Meuli <[e-mail]>",
@@ -18,4 +21,6 @@ "repository": "github:smeuli/font-picker",
 	"scripts": {
-		"start": "rollup -c --watch",
-		"build": "rollup -c",
+		"start": "npm-run-all build --parallel start:*",
+		"start:rollup": "rollup --config --watch",
+		"start:serve": "serve demo --cache=0 --open",
+		"build": "rollup --config",
 		"lint": "eslint .",
@@ -34,6 +39,8 @@ "precommit": "npm run lint",
 		"node-sass": "^4.8.3",
+		"npm-run-all": "^4.1.2",
 		"postcss": "^6.0.21",
 		"rollup": "^0.57.1",
 		"rollup-plugin-babel": "^3.0.3",
-		"rollup-plugin-postcss": "^1.4.0"
+		"rollup-plugin-postcss": "^1.4.0",
+		"serve": "^6.5.5"
 	},
@@ -40,0 +47,0 @@ "files": [

README.md

@@ -6,7 +6,7 @@ # Font Picker
 
-**A simple, customizable font selector allowing users to preview, choose, and use Google Fonts on your website.**
+**A simple, customizable font picker allowing users to preview, select, and use Google Fonts on your website.**
 
-* automatic font download and generation of the required CSS styles
-* efficient font previews (previews in the list are loaded dynamically; the full font is only downloaded on selection)
-* no dependencies
+* Automatic font download and generation of the required CSS styles
+* Efficient font previews (previews are loaded dynamically and full fonts are only downloaded on selection)
+* No dependencies
 
@@ -18,3 +18,3 @@ → **[Demo](https://smeuli.github.io/font-picker)**
 <p align="center">
-  <img src=".github/demo.gif" width=700 alt="Demo">
+    <img src=".github/demo.gif" width=700 alt="Demo">
 </p>
@@ -25,8 +25,8 @@
 
-### Setup
+### 1. Setup
 
-* **Using script tags:** Download the [latest release](https://github.com/smeuli/font-picker/releases/latest) and include the `lib/index.js` file in your HTML:
+* **Using script tags:** Download the [latest release](https://github.com/smeuli/font-picker/releases/latest) and include the `font-picker.js` file in your HTML:
 
 ```html
-<script type="text/javascript" src="./path/to/dist/index.js"></script>
+<script type="text/javascript" src="path/to/font-picker.js"></script>
 <script type="text/javascript">
@@ -38,3 +38,2 @@ const fontPicker = new FontPicker(
     );
-    fontPicker.init();
 </script>
@@ -44,5 +43,5 @@ ```
 
-* **Using NPM:** Install the `font-picker` package from NPM and require it in a JavaScript file:
+* **Using NPM:** Install the `font-picker` package from NPM and import/require it in a JavaScript file:
 
-```
+```sh
 npm install font-picker
@@ -52,3 +51,3 @@ ```
 ```js
-const FontPicker = require('font-picker');
+import { FontPicker } from 'font-picker';
 
@@ -60,7 +59,6 @@ const fontPicker = new FontPicker(
 );
-fontPicker.init();
 ```
 
 
-### Displaying the font picker
+### 2. Displaying the font picker
 
@@ -74,11 +72,11 @@ **Create an empty `<div>` with the ID `"font-picker"`** in your HTML file. This is where the font picker will be generated.
 
-### Applying the selected font
+### 3. Applying the selected font
 
 **Add the class `"apply-font"` to all HTML elements you want to apply the selected font to.**
 
-When the user selects a font using the font picker, it will automatically be downloaded (added as a `<link>` to the document's head) and applied to all HTML elements of the `"apply-font"` class.
+When the user selects a font, it will automatically be downloaded and applied to all HTML elements of the `"apply-font"` class.
 
 
 <p align="center">
-  <img src=".github/html-element-names.png" width=800 alt="Class names">
+    <img src=".github/html-element-names.png" width=800 alt="Class names">
 </p>
@@ -99,3 +97,3 @@
 * **`options`**: Object with additional (optional) parameters:
-  * **`name`**: If you have multiple font pickers on your site, you need to give them unique names (which may only consist of letters and digits). These names must also be appended to the font picker's ID and the `.apply-font` class name; e.g. if `{ name: 'main' }`, then use `#font-picker-main` and `.apply-font-main`
+  * **`name`**: If you have multiple font pickers on your site, you need to give them unique names (which may only consist of letters and digits). These names must also be appended to the font picker's ID and the `.apply-font` class name; e.g. if `{ name: 'main' }`, use `#font-picker-main` and `.apply-font-main`
   * **`families`**: If only specific fonts shall appear in the list, specify their names in an array (default: all font families)
@@ -113,11 +111,12 @@ * **`categories`**: Array of font categories – possible values: `'sans-serif', 'serif', 'display', handwriting', 'monospace'` (default: all categories)
 
-* **`init()`**: Generates and displays the font picker inside the `div` with `id="font-picker"`
 * **`getActiveFont()`**: Returns an object with information about the currently selected font
+* **`setActiveFont(fontFamily)`**: Change the active font programatically
 
 
-## Build Process
+## Contributing
 
+To build the project locally, do the following:
+
 * `git clone`
 * `npm install`
-* `npm start` to generate the library bundle using [Rollup](https://github.com/rollup/rollup) (in the `lib` directory)
-* See the font picker in action by opening the [`demo/index.html`](demo/index.html) file
+* `npm start` to generate the library bundle using [Rollup](https://github.com/rollup/rollup) and serve the demo website for previewing the component

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

35267

increased by8.26%

Lines of code

662

increased by11.64%

Worsened metrics

Dev dependency count

14

increased by16.67%

Number of lines in readme file

113

decreased by-0.88%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes