Updates README

README.md

@@ -1,20 +1,21 @@
-# ![Screenshot](perfect-freehand-logo.svg 'Perfect Freehand')
+# ![Screenshot](assets/perfect-freehand-logo.svg 'Perfect Freehand')
 
 Draw perfect pressure-sensitive freehand lines.
 
-🔗 Try out a [demo](https://perfect-freehand-example.vercel.app/).
+🔗 Curious? Try out a [demo](https://perfect-freehand-example.vercel.app/).
 
-🕊 Flutter dev? Check out the [dart version](https://pub.dev/packages/perfect_freehand) of this library.
+💅 Designer? Check out the [Figma Plugin](https://www.figma.com/community/plugin/950892731860805817).
 
-💰 Using this library in a commercial product? Consider [becoming a sponsor](https://github.com/sponsors/steveruizok?frequency=recurring&sponsor=steveruizok).
+🕊 Flutterer? There's now a [dart version](https://pub.dev/packages/perfect_freehand) of this library, too.
+
+💕 Love this library? Consider [becoming a sponsor](https://github.com/sponsors/steveruizok?frequency=recurring&sponsor=steveruizok).
 
 ## Table of Contents
 
 - [Installation](#installation)
 - [Usage](#usage)
 - [Documentation](#documentation)
-- [Support](#support)
-- [Discussion](#discussion)
+- [Community](#community)
 - [Author](#author)
 
 ## Installation
@@ -33,7 +34,7 @@ yarn add perfect-freehand
 
 This package exports a function named `getStroke` that will generate the points for a polygon based on an array of points.
 
-![Screenshot](process.gif "A GIF showing a stroke's input points, outline points, and a curved path connecting these points")
+![Screenshot](assets/process.gif "A GIF showing a stroke's input points, outline points, and a curved path connecting these points")
 
 To do this work, `getStroke` first creates a set of spline points (red) based on the input points (grey) and then creates outline points (blue). You can render the result any way you like, using whichever technology you prefer.
 
@@ -252,7 +253,7 @@ const stroke = getStroke(options)
 
 While this library was designed for rendering the types of input points generated by the movement of a human hand, you can pass any set of points into the library's functions. For example, here's what you get when running [Feather Icons](https://feathericons.com/) through `getStroke`.
 
-![Icons](icons.png)
+![Icons](assets/icons.png)
 
 ### Rendering
 
@@ -322,14 +323,33 @@ function getFlatSvgPathFromStroke(stroke) {
 }
 ```
 
-## Support
+## Development & Contributions
+
+To work on this library:
+
+- clone this repo
+- run `yarn` in the folder root to install dependencies
+- run `yarn start` to start the local development server
+
+The development server is located at `packages/dev`. The library and its tests are located at `packages/perfect-freehand`.
+
+Pull requests are very welcome!
 
-Please [open an issue](https://github.com/steveruizok/perfect-freehand/issues/new) for support.
+## Community
 
-## Discussion
+### Support
+
+Need help? Please [open an issue](https://github.com/steveruizok/perfect-freehand/issues/new) for support.
+
+### Discussion
 
 Have an idea or casual question? Visit the [discussion page](https://github.com/steveruizok/perfect-freehand/discussions).
 
-## Author
+### License
+
+- MIT
+- ...but if you're using `perfect-freehand` in a commercial product, consider [becoming a sponsor](https://github.com/sponsors/steveruizok?frequency=recurring&sponsor=steveruizok). 💰
+
+### Author
 
 - [@steveruizok](https://twitter.com/steveruizok)

build.mjs

@@ -4,18 +4,27 @@ import fs from 'fs'
 // and another in the perfect-freehand package folder. When we build
 // the project, we want to replace the older README with the newer.
 
-const pathA = 'README.md'
-const pathB = './packages/perfect-freehand/README.md'
+const files = [
+  'README.md',
+  'process.gif',
+  'icons.png',
+  'perfect-freehand-card.png',
+  'perfect-freehand-logo.svg',
+]
 
-if (
-  new Date(fs.statSync(pathA).mtime).getTime() >
-  new Date(fs.statSync(pathB).mtime).getTime()
-) {
-  // A is newer; remove B and replace with A
-  fs.rmSync(pathB)
-  fs.copyFileSync(pathA, pathB)
-} else {
-  // B is newer; remove A and replace with B
-  fs.rmSync(pathA)
-  fs.copyFileSync(pathB, pathA)
+for (const file of files) {
+  const pathA = file
+  const pathB = `./packages/perfect-freehand/${file}`
+  if (
+    new Date(fs.statSync(pathA).mtime).getTime() >
+    new Date(fs.statSync(pathB).mtime).getTime()
+  ) {
+    // A is newer; remove B and replace with A
+    fs.rmSync(pathB)
+    fs.copyFileSync(pathA, pathB)
+  } else {
+    // B is newer; remove A and replace with B
+    fs.rmSync(pathA)
+    fs.copyFileSync(pathB, pathA)
+  }
 }

packages/perfect-freehand/README.md

@@ -1,20 +1,21 @@
-# ![Screenshot](perfect-freehand-logo.svg 'Perfect Freehand')
+# ![Screenshot](assets/perfect-freehand-logo.svg 'Perfect Freehand')
 
 Draw perfect pressure-sensitive freehand lines.
 
-🔗 Try out a [demo](https://perfect-freehand-example.vercel.app/).
+🔗 Curious? Try out a [demo](https://perfect-freehand-example.vercel.app/).
 
-🕊 Flutter dev? Check out the [dart version](https://pub.dev/packages/perfect_freehand) of this library.
+💅 Designer? Check out the [Figma Plugin](https://www.figma.com/community/plugin/950892731860805817).
 
-💰 Using this library in a commercial product? Consider [becoming a sponsor](https://github.com/sponsors/steveruizok?frequency=recurring&sponsor=steveruizok).
+🕊 Flutterer? There's now a [dart version](https://pub.dev/packages/perfect_freehand) of this library, too.
+
+💕 Love this library? Consider [becoming a sponsor](https://github.com/sponsors/steveruizok?frequency=recurring&sponsor=steveruizok).
 
 ## Table of Contents
 
 - [Installation](#installation)
 - [Usage](#usage)
 - [Documentation](#documentation)
-- [Support](#support)
-- [Discussion](#discussion)
+- [Community](#community)
 - [Author](#author)
 
 ## Installation
@@ -33,7 +34,7 @@ yarn add perfect-freehand
 
 This package exports a function named `getStroke` that will generate the points for a polygon based on an array of points.
 
-![Screenshot](process.gif "A GIF showing a stroke's input points, outline points, and a curved path connecting these points")
+![Screenshot](assets/process.gif "A GIF showing a stroke's input points, outline points, and a curved path connecting these points")
 
 To do this work, `getStroke` first creates a set of spline points (red) based on the input points (grey) and then creates outline points (blue). You can render the result any way you like, using whichever technology you prefer.
 
@@ -252,7 +253,7 @@ const stroke = getStroke(options)
 
 While this library was designed for rendering the types of input points generated by the movement of a human hand, you can pass any set of points into the library's functions. For example, here's what you get when running [Feather Icons](https://feathericons.com/) through `getStroke`.
 
-![Icons](icons.png)
+![Icons](assets/icons.png)
 
 ### Rendering
 
@@ -322,14 +323,33 @@ function getFlatSvgPathFromStroke(stroke) {
 }
 ```
 
-## Support
+## Development & Contributions
+
+To work on this library:
+
+- clone this repo
+- run `yarn` in the folder root to install dependencies
+- run `yarn start` to start the local development server
+
+The development server is located at `packages/dev`. The library and its tests are located at `packages/perfect-freehand`.
+
+Pull requests are very welcome!
 
-Please [open an issue](https://github.com/steveruizok/perfect-freehand/issues/new) for support.
+## Community
 
-## Discussion
+### Support
+
+Need help? Please [open an issue](https://github.com/steveruizok/perfect-freehand/issues/new) for support.
+
+### Discussion
 
 Have an idea or casual question? Visit the [discussion page](https://github.com/steveruizok/perfect-freehand/discussions).
 
-## Author
+### License
+
+- MIT
+- ...but if you're using `perfect-freehand` in a commercial product, consider [becoming a sponsor](https://github.com/sponsors/steveruizok?frequency=recurring&sponsor=steveruizok). 💰
+
+### Author
 
 - [@steveruizok](https://twitter.com/steveruizok)