Merge branch 'master' into dependabot/npm_and_yarn/sinon-15.2.0

leaonline · Sep 1, 2023 · 24b5293 · 24b5293
2 parents fcedd5c + 7e03c25
commit 24b5293
Show file tree

Hide file tree

Showing 9 changed files with 171 additions and 76 deletions.
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -14,18 +14,18 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [14, 16]
+        node: [14, 16, 18, 20]
     steps:
     - name: Checkout ${{ matrix.node }}
-      uses: actions/checkout@v2
+      uses: actions/checkout@v3
 
     - name: Setup node ${{ matrix.node }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node }}
 
     - name: Cache dependencies ${{ matrix.node }}
-      uses: actions/cache@v1
+      uses: actions/cache@v3
       with:
         path: ~/.npm
         key: ${{ runner.os }}-node-${{ matrix.node }}-${{ hashFiles('**/package-lock.json') }}

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+**2.1.1**
+- added [TypeScript types](./src/index.d.ts)
+
+**2.1.0**
+- updated dependencies
+- docs: add issue templates by @jankapunkt in #161
+- fix(demo): sliders always parse values to Number by @jankapunkt in #157
+- feature: add quiet flag to init fn to silently fail on error by @jankapunkt in #155
+- feature: force use/prevent resumeInfinity via flag by @jankapunkt in #156
+
 **2.0.0**
 - Added multiple build targets
 - Potentially breaking for ci, since build output is

diff --git a/README.md b/README.md
@@ -1,4 +1,15 @@
-# Easy Speech
+<h1 align="center">Easy Speech</h1>
+
+<div align="center">
+Cross browser Speech Synthesis; no dependencies.
+</div>
+
+  <p align="center">
+    <br />
+    <a href="https://github.com/jankapunkt/easy-speech/blob/master/API.md"><strong>API docs »</strong></a>
+    <br />
+  </p>
+
 
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 [![Project Status: Active – The project has reached a stable, usable state and is being actively developed.](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active)
@@ -9,15 +20,35 @@
 ![npm bundle size](https://img.shields.io/bundlephobia/minzip/easy-speech)
 
 
-Cross browser Speech Synthesis; no dependencies.
+
+## ⭐️ Why EasySpeech?
 
 This project was created, because it's always a struggle to get the synthesis
 part of `Web Speech API` running on most major browsers.
 
-**Note:** this is not a polyfill package, if your target browser does not 
-support speech synthesis or the Web Speech API, this package is not usable.
+## ✨ Features
+
+- 🪄 Single API for using `speechSynthesis` across multiple browsers
+- 🌈 Async API (Promises, async/await)
+- 🚀 Hooks for all events; global and/or voice-instance-specific
+- 🌱 Easy to set up and integrate: auto-detects and loads available voices
+- 🔧 Includes fixes or workarounds for many browser-specific quirks
+- 📝 Internal logging via `EasySpeech.debug` hook
+- 📦 Multiple build targets
+- 🎮 Live demo to test your browser
+
+
+**Note:** this is not a polyfill package, if your target browser does not  support speech synthesis or the Web Speech
+API, this package is not usable.
+
+## 🚀 Live Demo
+
+The live demo is available at https://jankapunkt.github.io/easy-speech/
+You can use it to test your browser for `speechSynthesis` support and functionality.
+
+[![live demo screenshot](./docs/demo_screenshot.png)](https://jankapunkt.github.io/easy-speech/)
 
-## Install
+## 📦 Installation
 
 Install from npm via
 
@@ -33,6 +64,7 @@ You can also use the various builds for different targets, see the `dist` folder
 - `/dist/EasySpeech.iife.js` - Legacy compatible build, works even with older 
   or exotic browsers, as long as they support Promises (PRs welcome to transform 
   to callbacks!)
+- `/dist/index.d.ts` - TypeScript type definitions
 
 You can use them via CDN:
 
@@ -48,7 +80,7 @@ You can use them via CDN:
 <script src="https://cdn.jsdelivr.net/npm/easy-speech/dist/EasySpeech.iife.js"></script>
 ```
 
-## Usage
+## 👨‍💻 Usage
 
 Import `EasySpeech` and first, detect, if your browser is capable of tts (text
 to speech):
@@ -145,19 +177,19 @@ an error occurred. You can additionally attach these event listeners if you like
 or use `EasySpeech.on` to attach default listeners to every time you call 
 `EasySpeech.speak`.
 
-## API
+## 🔬 API
 
 There is a full API documentation available: [api docs](./API.md)
 
-## Contribution and development
+## ⌨️ Contribution and development
 
 Every contribution is welcomed, please open issues if anything is not working
 as expected.
 
 If you intend to contribute code, please read the 
 [guidelines on contributing](./CONTRIBUTING.md).
 
-## Resources
+## 📖 Resources
 
 This project used several resources to gain insights about how to get the best cross-browser SpeechSynthesis running:
 

diff --git a/docs/demo.js b/docs/demo.js
diff --git a/docs/demo_screenshot.png b/docs/demo_screenshot.png
diff --git a/docs/index.html b/docs/index.html
@@ -9,7 +9,7 @@
     <title>EasySpeech - Cross browser Speech Synthesis with easy API</title>
 </head>
 <body>
-<div class="bg-dark pb-3 navbar-nav">
+<div class="bg-dark pb-3 navbar-nav py-4">
     <h1 class="text-center text-white ">
         <a href="#" class="text-decoration-none text-white" >EasySpeech</a>
     </h1>
@@ -49,22 +49,23 @@ <h1 class="text-center text-white ">
     </div>
 </div>
 <div class="container">
-    <hr>
     <div class="row">
 
         <!-- speak input -->
         <div class="col-12 col-md-6 mt-3">
-            <div class="card">
-                <div class="card-header bg-primary text-white">Speak</div>
+            <div class="card border-light">
 
                 <!-- selects -->
                 <div class="card-body">
-                    <select id="lang-select" class="form-control disabled"
+                    <div class="card-title py-2 border-bottom clearfix">
+                        <span class="fw-light text-uppercase float-start">Speaking</span>
+                    </div>
+                    <select id="lang-select" class="form-control disabled mt-3"
                             disabled>
                         <option>(Select language)</option>
                         <option value="all">All languages</option>
                     </select>
-                    <select id="voice-select" class="form-control disabled"
+                    <select id="voice-select" class="form-control disabled my-2"
                             disabled>
                         <option>(Select voice)</option>
                     </select>
@@ -96,9 +97,9 @@ <h1 class="text-center text-white ">
                 <div class="card-body">
                     <textarea rows="3" class="form-control" id="text-input"
                               disabled
-                              placeholder="enter text to speak"></textarea>
+                              placeholder="Enter text to speak..."></textarea>
                 </div>
-                <div class="card-footer">
+                <div class="card-body">
                     <button class="btn btn-primary speak-btn w-100">
                         Speak now
                     </button>
@@ -108,9 +109,19 @@ <h1 class="text-center text-white ">
 
         <!--Output of detected features and init result-->
         <div class="col-12 col-md-6 mt-3">
-            <div class="card">
-                <div class="card-header init-status-header text-white">Init
-                    status
+            <div class="card border-light">
+                <div class="card-body">
+                    <div class="card-title py-2 border-bottom clearfix">
+                        <span class="fw-light text-uppercase float-start">Init status</span>
+                        <span class="badge bg-info init-status-header float-end">
+                            <div class="spinner-border spinner-border-sm init-status-loader" role="status">
+                              <span class="visually-hidden">Loading...</span>
+                            </div>
+                            <span class="init-status-text">
+                                Checking features...
+                            </span>
+                        </span>
+                    </div>
                 </div>
                 <div class="card-body">
                     <span class="fw-bold border-bottom">
@@ -129,9 +140,11 @@ <h1 class="text-center text-white ">
 
         <!-- about -->
         <div class="col-12 col-md-6 mt-3">
-            <div class="card">
-                <div class="card-header">About</div>
+            <div class="card border-light">
                 <div class="card-body">
+                    <div class="card-title py-2 border-bottom clearfix">
+                        <span class="fw-light text-uppercase float-start">About</span>
+                    </div>
                     <p>
                         This project was created, because it's always a struggle
                         to get the synthesis
@@ -155,8 +168,12 @@ <h1 class="text-center text-white ">
 
         <!--debug log-->
         <div class="col-12 col-md-6 mt-3">
-            <div class="card">
-                <div class="card-header">Debug log</div>
+            <div class="card border-light">
+                <div class="card-body">
+                    <div class="card-title py-2 border-bottom clearfix">
+                        <span class="fw-light text-uppercase float-start">Debug log</span>
+                    </div>
+                </div>
                 <div class="card-body log-body"></div>
             </div>
         </div>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "easy-speech",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Cross browser Speech Synthesis",
   "type": "module",
   "main": "./dist/EasySpeech.cjs.js",

diff --git a/rollup.demo.config.js b/rollup.demo.config.js
@@ -1,6 +1,6 @@
 import { babel } from '@rollup/plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
-import { terser } from '@rollup/plugin-terser'
+import terser from '@rollup/plugin-terser'
 
 export default {
   input: 'src/demo.js',