chore: readme and doc

Author: farfromrefug

README.md

@@ -1,4 +1,6 @@
-<!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️--><!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->
+<!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->This monorepo contains multiple packages:<br><br><details>
+<summary><b>ui-pager</b></summary>
+<!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->
 <!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
       !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
       !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
@@ -54,17 +56,7 @@
 * [Usage in Svelte](#usage-in-svelte)
 	* [Examples](#examples-2)
 * [Usage in Vue](#usage-in-vue)
-	* [Examples](#examples-3)
-* [Demos and Development](#demos-and-development)
-	* [Repo Setup](#repo-setup)
-	* [Build](#build)
-	* [Demos](#demos)
-* [Contributing](#contributing)
-	* [Update repo ](#update-repo-)
-	* [Update readme ](#update-readme-)
-	* [Update doc ](#update-doc-)
-	* [Publish](#publish)
-* [Questions](#questions)
+	* [Examples](#examples-3)
 
 
 [](#installation)
@@ -104,8 +96,6 @@ Run the following command from the root of your project:
 | autoPlay | `boolean` |
 | disableSwipe | `boolean` |
 | showIndicator | `boolean` |
-| indicatorColor | `Color` or `string` |
-| indicatorSelectedColor | `Color` or `string` |
 
 
 ```
@@ -208,11 +198,121 @@ Vue.use(Pager);
   - A simple pager example using static content.
 - [Basic Pager](demo-snippets/vue/BasicPager.vue)
   - A simple pager example using dynamic content.
+</details><details>
+<summary><b>ui-pager-indicator</b></summary>
+<!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->
+<!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      DO NOT EDIT THIS READEME DIRECTLY! Edit "bluesprint.md" instead.
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
+<h1 align="center">@nativescript-community/ui-pager-indicator</h1>
+<p align="center">
+		<a href="https://npmcharts.com/compare/@nativescript-community/ui-pager-indicator?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@nativescript-community/ui-pager-indicator.svg" height="20"/></a>
+<a href="https://www.npmjs.com/package/@nativescript-community/ui-pager-indicator"><img alt="NPM Version" src="https://img.shields.io/npm/v/@nativescript-community/ui-pager-indicator.svg" height="20"/></a>
+	</p>
+
+<p align="center">
+  <b>A NativeScript Indicator for Pager / Carousel /CollectionView</b></br>
+  <sub><sub>
+</p>
+
+<br />
 
 
+| <img src="https://github.com/nativescript-community/ui-pager/raw/master/images/demo-ios.gif" height="500" /> | <img src="https://github.com/nativescript-community/ui-pager/raw/master/images/demo-android.gif" height="500" /> |
+| --- | ----------- |
+| iOS Demo | Android Demo |
+
+
+[](#table-of-contents)
+
+
+[](#table-of-contents)
+
+## Table of Contents
+
+* [Installation](#installation)
+* [API](#api)
+	* [Properties](#properties)
+* [Usage in Vue](#usage-in-vue)
+	* [Examples](#examples)
+
+
+[](#installation)
+
+
+[](#installation)
+
+## Installation
+Run the following command from the root of your project:
+
+`ns plugin add @nativescript-community/ui-pager-indicator`
+
+
+[](#api)
+
+
+[](#api)
+
+## API
+
+### Properties
+
+| Property | Type |
+| - | - |
+| color | `Color` or `string` |
+| selectedColor | `Color` or `string` |
+
+
+```
+PagerIndicator add page control for Pager or other Paging Views.
+```
+
+
+
+[](#usage-in-vue)
 
-[](#demos-and-development)
 
+[](#usage-in-vue)
+
+## Usage in Vue
+
+Import the module into your project.
+
+
+```typescript
+import Vue from 'nativescript-vue';
+Vue.registerElement('PagerIndicator', () => require('@nativescript-community/ui-pager-indicator').PagerIndicator);
+```
+
+then in your template:
+```html
+<Pager id="pager" :items="items"
+    ...
+</Pager>
+<PagerIndicator pagerViewId="pager"/>
+```
+
+### Examples
+
+- [Indicator Pager](demo-snippets/vue/Indicator.vue)
+  - A simple pager example using dynamic content and indicator.
+</details>
 
 [](#demos-and-development)
 
@@ -241,6 +341,7 @@ To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`)
 ```bash
 npm run build.all
 ```
+WARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`
 
 ### Demos
 
@@ -250,9 +351,10 @@ npm run demo.[ng|react|svelte|vue].[ios|android]
 npm run demo.svelte.ios # Example
 ```
 
-
-[](#contributing)
-
+Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`
+Instead you work in `demo-snippets/[ng|react|svelte|vue]`
+You can start from the `install.ts` of each flavor to see how to register new demos 
+
 
 [](#contributing)
 
@@ -294,9 +396,14 @@ Simply run
 npm run publish
 ```
 
-
-[](#questions)
-
+### modifying submodules
+
+The repo uses https:// for submodules which means you won't be able to push directly into the submodules.
+One easy solution is t modify `~/.gitconfig` and add
+```
+[url "ssh://[email protected]/"]
+	pushInsteadOf = https://github.com/
+```
 
 [](#questions)
 

docs/assets/highlight.css

@@ -13,8 +13,18 @@
     --dark-hl-5: #CE9178;
     --light-hl-6: #795E26;
     --dark-hl-6: #DCDCAA;
-    --light-hl-7: #008000;
-    --dark-hl-7: #6A9955;
+    --light-hl-7: #800000;
+    --dark-hl-7: #808080;
+    --light-hl-8: #CD3131;
+    --dark-hl-8: #F44747;
+    --light-hl-9: #FF0000;
+    --dark-hl-9: #9CDCFE;
+    --light-hl-10: #0000FF;
+    --dark-hl-10: #CE9178;
+    --light-hl-11: #008000;
+    --dark-hl-11: #6A9955;
+    --light-hl-12: #000000;
+    --dark-hl-12: #C8C8C8;
     --light-code-background: #FFFFFF;
     --dark-code-background: #1E1E1E;
 }
@@ -28,6 +38,11 @@
     --hl-5: var(--light-hl-5);
     --hl-6: var(--light-hl-6);
     --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --hl-10: var(--light-hl-10);
+    --hl-11: var(--light-hl-11);
+    --hl-12: var(--light-hl-12);
     --code-background: var(--light-code-background);
 } }
 
@@ -40,6 +55,11 @@
     --hl-5: var(--dark-hl-5);
     --hl-6: var(--dark-hl-6);
     --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --hl-10: var(--dark-hl-10);
+    --hl-11: var(--dark-hl-11);
+    --hl-12: var(--dark-hl-12);
     --code-background: var(--dark-code-background);
 } }
 
@@ -52,6 +72,11 @@
     --hl-5: var(--light-hl-5);
     --hl-6: var(--light-hl-6);
     --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --hl-10: var(--light-hl-10);
+    --hl-11: var(--light-hl-11);
+    --hl-12: var(--light-hl-12);
     --code-background: var(--light-code-background);
 }
 
@@ -64,6 +89,11 @@
     --hl-5: var(--dark-hl-5);
     --hl-6: var(--dark-hl-6);
     --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --hl-10: var(--dark-hl-10);
+    --hl-11: var(--dark-hl-11);
+    --hl-12: var(--dark-hl-12);
     --code-background: var(--dark-code-background);
 }
 
@@ -75,4 +105,9 @@
 .hl-5 { color: var(--hl-5); }
 .hl-6 { color: var(--hl-6); }
 .hl-7 { color: var(--hl-7); }
+.hl-8 { color: var(--hl-8); }
+.hl-9 { color: var(--hl-9); }
+.hl-10 { color: var(--hl-10); }
+.hl-11 { color: var(--hl-11); }
+.hl-12 { color: var(--hl-12); }
 pre, code { background: var(--code-background); }