{"_id":"@deltork/readalong-syllabics","_rev":"1-8a0e44fc8fd57528cb86bb248747b4f8","name":"@deltork/readalong-syllabics","dist-tags":{"latest":"0.0.7"},"versions":{"0.0.7":{"name":"@deltork/readalong-syllabics","version":"0.0.7","description":"ReadAlong Web Component based on @roedoejet/readalong","module":"dist/esm/index.js","main":"dist/index.js","unpkg":"dist/ionic.js","types":"dist/types/components.d.ts","collection":"dist/collection/collection-manifest.json","scripts":{"build":"stencil build --docs","start":"stencil build --dev --watch --serve","prepublish":"npm run build","test":"stencil test --spec --e2e","test.watch":"stencil test --spec --e2e --watchAll","publish":"npm publish --access=public"},"dependencies":{"howler":"^2.1.1","resize-observer-polyfill":"^1.5.1","rxjs":"^6.4.0"},"devDependencies":{"@stencil/core":"0.18.0","@stencil/redux":"^0.1.1","@stencil/sass":"^0.1.1","@types/jest":"23.3.14","@types/puppeteer":"1.12.2","jest":"23.6.0","jest-cli":"23.6.0","puppeteer":"1.11.0","redux":"^4.0.4"},"license":"MIT","gitHead":"7dc8fce51863fc375f2f6d2082ab5ac709abfc3f","_id":"@deltork/readalong-syllabics@0.0.7","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"deltork","email":"dm_torkornoo@yahoo.com"},"dist":{"integrity":"sha512-Q7kGMqJUgY16qucQ+4gIIWzbqb9/sgijRhFBz+rpVhuPFMr4igIL6bOkFktgFP3M0UOBAMOVDzMuiDk+PeSZdw==","shasum":"592ec54cc417d2205c4e590831776cbb8a6aa2cf","tarball":"https://registry.npmjs.org/@deltork/readalong-syllabics/-/readalong-syllabics-0.0.7.tgz","fileCount":68,"unpackedSize":4719357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYQiZCRA9TVsSAnZWagAAXBoP/2t8zyUyBsk9rqIkGDWc\nrBbiD0sPof/Kuf624wJs1O9WvFEisa+SIAImruiTmYJYS9DGG1byUnw3+hxs\nJwp+RE6gSGHiwKnzxN4UFEkEP9+62s9tcyGaWWVndkOD1tuGWGdusUdz6k89\nUiyA+JAgVvd3/5w+PnPVkeaklWmfGIawBtQ6FycNU0maQd4ym2kQnJ10x+M2\njui/qy7PheH0oMXtmE9DHYhyDmoqHVg3mzz1Okv2iKL8tbJe63JWyqfJGMHk\nizPaGsTSD0hzQjI701kPkORnWxUg95zCwDXsEDDE3l8i43DF4AuMUarDcr+x\ntUpzZCzt/QyjRotwcJrrVVVgteiZ3VLc/KMvBJ5LHHQBbojoRbyu9+nxVPO3\nFhVwfbLBX33Ur4y4i2M5/ze91WMTxADUYlgAbyPn1n/RaHYvGw9y9jJVuE/z\nIeTeT+/O4It0GuBt07Cm9DdW3gdQOHQ7MC2G9DVOvYf4zSuVR5OkKyZjpTGu\ncFe7YILZlF3lvaJRaacdK9UahIkutyq78Wx6uOHbiulP4+BX1Hd8OwgJ4dZ5\nx8cC/5DDWzMoVtV0Fp+VwT1126OisjoiippgNr58O1vKDA42zsW9czfY6nGl\nNvROana3UG5n8KtkAfvbEH7c25Ugv88V/Gf82LWBuBPvnbKs73Zw2OzZJqmR\n0+Qh\r\n=lOYT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDLIArqnAJFDdnfsPtAjDs/Lepy5zcyEirPzHDdLgoUEAiEApO1EIs/NVU72jNhqz+N+YkEI57IcfozfIIFvgSvY/B0="}]},"maintainers":[{"name":"deltork","email":"dm_torkornoo@yahoo.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/readalong-syllabics_0.0.7_1600194712514_0.7957626492559229"},"_hasShrinkwrap":false}},"time":{"created":"2020-09-15T18:31:52.450Z","0.0.7":"2020-09-15T18:31:53.019Z","modified":"2022-04-05T03:43:05.143Z"},"maintainers":[{"name":"deltork","email":"dm_torkornoo@yahoo.com"}],"description":"ReadAlong Web Component based on @roedoejet/readalong","license":"MIT","readme":"\n\n# Read-Along Web Component\n\nThis is a web component for embedding read-along, audio/text aligned content in your website or hybrid app.\n\n## Installation\n\nFor now, just clone the repo, make sure you have node 6+, and run `npm install` from the project root. Then you can run `npm start` and a minimal website containing only the webcomponent will be served at `localhost:3333`. Any changes you make to `/src` will be automatically shown in the browser.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------- | ----------- | --------------------- | -------- | ----------- |\n| `alignment` | `alignment` | The alignment as SMIL | `string` | `undefined` |\n| `audio` | `audio` | The audio file | `string` | `undefined` |\n| `text` | `text` | The text as TEI | `string` | `undefined` |\n| `theme` | `theme` | The colour theme | `string` | `light` |\n\n\n## Test with your site\n\nYou can either modify the `/src/index.html` or after running `npm start` you can copy out the `www/build` folder and add the following script import in your own `index.html` page: \n\n```html\n\n```\n\nThen, you can add as many read-along components to your page as you like simply by adding `` elements with arguments for where to find your text, alignments and audio file. These files can be generated using _________ service located here: ____________.\n\n```html\n\n```\n\n## Theming\n\nThere are two themes out-of-the-box: `light` and `dark`. You set them as a property on the `` web component. If you want to add your own theme, it's as easy as adding your colour palette to the `$ui-themes` variable in `src/components/read-along-component/scss/utilities/_colors.scss`. Note you will have to rebuild the web component from source to do this, or submit your theme as a pull-request!\n\n```scss\n$ui-themes: (\n light: (\n primary: $white,\n secondary: darken($white, 50%),\n accent: darken($white, 60%),\n text: $black,\n text--secondary: $white,\n text--accent: $white,\n ),\n dark: (\n primary: lighten($black, 30%),\n secondary: darken($white, 35%),\n accent: $white,\n text: $white,\n text--secondary: $white,\n text--accent: $black\n )\n);\n```\n\n## Slots\n\nSlots allow you to add custom html into specific \"slots\" within the web component. For example, to add an optional header to the `\n Hello World!\n\n```\n\n| Slot | Description | Suggested Element |\n| ----------------------- | --------------------- | ----------------- |\n| `read-along-header` | The read along header | `span` |\n| `read-along-subheader` | Subheader (ie authors)| `span` |\n\n\n\n\n\n","readmeFilename":"readme.md"}