chore(all): Improve readmes (#49)

* Improve readmes

* add better description and images

* apple passkit

apple_passkit/README.md

@@ -12,7 +12,21 @@
 
 This is a Flutter binding for [Apple's PassKit](https://developer.apple.com/documentation/passkit).
 
-This library allows you to add and and read `PkPass` files.
+This library allows you to add `PkPass` files to the users' wallet.
+It also allows you to read available `PkPass` files in your users' wallet.
+
+Do you need to deal with `PkPass` files in your code, consider using 
+[`passkit`](https://pub.dev/packages/passkit) and [`passkit_ui`](https://pub.dev/packages/passkit_ui) instead. Those do not depend on iOS/macOS and are mostly cross-platform.
+
+## What is PassKit?
+
+> Passes are a digital representation of information that might otherwise be printed on small pieces of paper or plastic. They let users take an action in the physical world. Passes can contain images and a barcode, and you can update passes using push notifications on iOS.
+
+A PkPass file looks something like this when rendered:
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/ueman/passkit/master/apple_passkit/assets/boarding_pass.png" height="400"/>
+</p>
 
 ## How to use it
 
@@ -36,3 +50,13 @@ To view all methods, take a look at the [API docs](https://pub.dev/documentation
 Setup your Xcode project as described in the [documentation](https://help.apple.com/xcode/mac/current/#/devfc3f493bb).
 
 After that, use `await ApplePassKit().passes()` to load your installed passes.
+
+## Contributors
+
+Thanks a lot to all the awesome contributors:
+
+<a href="https://github.com/ueman/passkit/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=ueman/passkit" />
+</a>
+
+Contribute to this library, and you'll show up too.

apple_passkit/pubspec.yaml

@@ -6,6 +6,9 @@ issue_tracker: https://github.com/ueman/passkit/issues
 topics:
   - passkit
   - pkpass
+screenshots:
+  - description: "Screenshot of a PkPass of the boarding pass type"
+    path: assets/boarding_pass.png
 
 environment:
   sdk: ">=3.4.3 <4.0.0"

passkit/README.md

@@ -14,7 +14,26 @@
 
 PassKit allows you to work with Apple's PkPass files. This is a pure Dart library. No Flutter needed.
 
-Want to work with Apple's PassKit APIs? Consider using [`apple_passkit`](https://pub.dev/packages/apple_passkit).
+In order to show PassKit files in Flutter, use the [`passkit_ui`](https://pub.dev/packages/passkit_ui) package, which includes ready made widgets.
+
+Want to work with Apple's native PassKit APIs? Consider using [`apple_passkit`](https://pub.dev/packages/apple_passkit).
+
+## What is PassKit?
+
+> Passes are a digital representation of information that might otherwise be printed on small pieces of paper or plastic. They let users take an action in the physical world. Passes can contain images and a barcode, and you can update passes using push notifications on iOS.
+>
+> This technology consists of three main components:
+> - A package format for creating passes.
+> - A web service API for updating passes, implemented on your server.
+> - An API used by your apps to interact with the user’s pass library.
+
+A PkPass file looks something like this when rendered:
+
+<!-- ![](https://raw.githubusercontent.com/ueman/passkit/master/passkit/assets/boarding_pass.png) -->
+
+<p align="center">
+  <img src="assets/boarding_pass.png" height="400"/>
+</p>
 
 ## How to read a PassKit file?
 
@@ -58,3 +77,13 @@ Feel free to submit PRs for them
 ## Bugs and parsing issues
 
 If you hit an issue with parsing, please create an issue and attach the PkPass (if possible)
+
+## Contributors
+
+Thanks a lot to all the awesome contributors:
+
+<a href="https://github.com/ueman/passkit/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=ueman/passkit" />
+</a>
+
+Contribute to this library, and you'll show up too.

passkit/pubspec.yaml

@@ -6,6 +6,9 @@ issue_tracker: https://github.com/ueman/passkit/issues
 topics:
   - passkit
   - pkpass
+screenshots:
+  - description: "Screenshot of a PkPass of the boarding pass type"
+    path: assets/boarding_pass.png
 
 environment:
   sdk: ">=3.4.3 <4.0.0"

passkit_ui/README.md

@@ -11,10 +11,60 @@
 > 🚧 API is subject to change! 🚧
 > Not all pass types are yet supported. Not ready for production use.
 
-Package with widgets to visualize `PkPass` files with the help of [`passkit`](https://pub.dev/packages/passkit).
+## What is PassKit?
 
-This package does intentionally not support showing the "backside" of a `PkPass` file, since there are a lot of features that depend on the application logic.
-Those include among other things: sharing a pass, deleting a pass, having the ability to open URLs, emails and phone numbers.
+> Passes are a digital representation of information that might otherwise be printed on small pieces of paper or plastic. They let users take an action in the physical world. Passes can contain images and a barcode, and you can update passes using push notifications on iOS.
+>
+> This technology consists of three main components:
+> - A package format for creating passes.
+> - A web service API for updating passes, implemented on your server.
+> - An API used by your apps to interact with the user’s pass library.
+
+A PkPass file looks something like this when rendered:
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/ueman/passkit/master/passkit_ui/assets/boarding_pass.png" height="400"/>
+</p>
+
+This package contains widgets to visualize `PkPass` files as seen above with the help of [`passkit`](https://pub.dev/packages/passkit). `passkit` is a pure Dart package, which works on servers, too.
+
+This package does intentionally not support showing the "backside" of a `PkPass` file, since that requires a lot of features that depend on application logic.
+Those include, among other things: sharing a pass, deleting a pass, having the ability to open URLs, emails and phone numbers.
+
+You want to work with Apple's native PassKit APIs? Consider using [`apple_passkit`](https://pub.dev/packages/apple_passkit) in addition to this.
+
+## How to use it?
+
+Add the `passkit` and `passkit_ui` packages to your `pubspec.yaml` file
+
+```yaml
+dependencies:
+  passkit: any # Use the latest available version
+  passkit_ui: any # Use the latest available version
+```
+
+Use it in your code:
+
+```dart
+import 'package:passkit/passkit.dart';
+import 'package:passkit_ui/passkit_ui.dart';
+
+// First load the PkPass file somewhere
+final pkPass = await loadPass('assets/coupon.pkpass')
+
+// Then in your widget, use the `PkPassWidget` and pass the PkPass to it
+Center(child: PkPassWidget(pass: pkPass))
+```
+
+## Contributors
+
+Thanks a lot to all the awesome contributors:
+
+<a href="https://github.com/ueman/passkit/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=ueman/passkit" />
+</a>
+
+Contribute to this library, and you'll show up too.
 
 # Development related docs
 
@@ -40,4 +90,3 @@ The pass layout allots a certain area on the front of the pass for each image. I
 - The thumbnail image (`thumbnail.png`) displayed next to the fields on the front of the pass. The allotted space is 90 x 90 points. The aspect ratio should be in the range of 2:3 to 3:2, otherwise the image is cropped.
 
 > [!NOTE ]The dimensions given above are all in points. On a non-Retina display, each point equals exactly 1 pixel. On a Retina display, there are 2 or 3 pixels per point, depending on the device. To support all screen sizes and resolutions, provide the original, @2x, and @3x versions of your art.
-

passkit_ui/pubspec.yaml

@@ -6,6 +6,9 @@ issue_tracker: https://github.com/ueman/passkit/issues
 topics:
   - passkit
   - pkpass
+screenshots:
+  - description: "Screenshot of a PkPass of the boarding pass type"
+    path: assets/boarding_pass.png
 
 environment:
   sdk: ">=3.4.3 <4.0.0"