data-bionic-reading 1.0.0

package/README.md

@@ -0,0 +1,62 @@
+# Bionic Reading
+
+Helps developers add support for [bionic reading](https://bionic-reading.com) to
+their content 📚
+
+## Install
+
+### With a CDN
+
+```html
+<script
+  defer
+  src="https://unpkg.com/data-bionic-reading@latest/dist/reading.min.js"
+></script>
+```
+
+### With a Package Manager
+
+```shell
+yarn add -D data-bionic-reading
+npm install -D data-bionic-reading
+```
+
+```js
+import bionicReading from 'data-bionic-reading'
+
+document.addEventListener('DOMContentLoaded', bionicReading())
+```
+
+## Example
+
+```html
+<article data-bionic-reading>
+  <h1>Welcome to my website, it is a great website!</h1>
+
+  <p>
+    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis,
+    dignissimos exercitationem! Ratione natus explicabo, maiores enim
+    reprehenderit perspiciatis ipsum deserunt?
+  </p>
+
+  <p>
+    Lorem ipsum dolor sit amet <a href="#">consectetur adipisicing</a> elit.
+    Rerum, possimus.
+  </p>
+
+  <ul>
+    <li>Lorem ipsum dolor sit amet.</li>
+
+    <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
+  </ul>
+</article>
+```
+
+And that's it.
+
+## Stats
+
+![](https://img.shields.io/bundlephobia/min/data-bionic-reading)
+![](https://img.shields.io/npm/v/data-bionic-reading)
+![](https://img.shields.io/npm/dt/data-bionic-reading)
+![](https://img.shields.io/github/license/markmead/data-bionic-reading)

package/builds/cdn.js

@@ -0,0 +1,3 @@
+import bionicReading from "../src/index.js";
+
+document.addEventListener("DOMContentLoaded", bionicReading());

package/builds/module.js

@@ -0,0 +1,3 @@
+import bionicReading from "../src/index.js";
+
+export default bionicReading;

package/dist/reading.esm.js

@@ -0,0 +1 @@
+function l(){let t=document.querySelector("[data-bionic-reading]");if(!t)return;[...t.querySelectorAll("h1, h2, h3, h4, h5, h6, p, li, a")].forEach(e=>{e.style.fontWeight=400;let i=e.innerText.split(" ").map(r=>{let n=r.length;if(n===1)return`<strong>${r}</strong>`;let a=Math.floor(n/2);return r.split("").map((o,s)=>s<a?`<strong>${o}</strong>`:o).join("")});e.innerHTML=i.join(" ")})}var y=l;export{y as default};

package/dist/reading.min.js

@@ -0,0 +1 @@
+(()=>{function i(){let r=document.querySelector("[data-bionic-reading]");if(!r)return;[...r.querySelectorAll("h1, h2, h3, h4, h5, h6, p, li, a")].forEach(e=>{e.style.fontWeight=400;let l=e.innerText.split(" ").map(t=>{let n=t.length;if(n===1)return`<strong>${t}</strong>`;let a=Math.floor(n/2);return t.split("").map((o,s)=>s<a?`<strong>${o}</strong>`:o).join("")});e.innerHTML=l.join(" ")})}document.addEventListener("DOMContentLoaded",i());})();

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "data-bionic-reading",
+  "version": "1.0.0",
+  "description": "Helps developers add support for bionic reading to their content 📚",
+  "keywords": [
+    "Bionic Reading"
+  ],
+  "module": "dist/reading.esm.js",
+  "unpkg": "dist/reading.min.js",
+  "scripts": {
+    "build": "node scripts/build.js"
+  },
+  "devDependencies": {
+    "esbuild": "^0.16.2"
+  }
+}

package/scripts/build.js

@@ -0,0 +1,19 @@
+buildPlugin({
+  entryPoints: ["builds/cdn.js"],
+  outfile: "dist/reading.min.js",
+});
+
+buildPlugin({
+  entryPoints: ["builds/module.js"],
+  outfile: "dist/reading.esm.js",
+  platform: "neutral",
+  mainFields: ["main", "module"],
+});
+
+function buildPlugin(buildOptions) {
+  return require("esbuild").buildSync({
+    ...buildOptions,
+    minify: true,
+    bundle: true,
+  });
+}

package/src/index.js

@@ -0,0 +1,39 @@
+export default function () {
+  const articleElement = document.querySelector("[data-bionic-reading]");
+
+  if (!articleElement) {
+    return;
+  }
+
+  const articleElements = [
+    ...articleElement.querySelectorAll("h1, h2, h3, h4, h5, h6, p, li, a"),
+  ];
+
+  articleElements.forEach((contentElement) => {
+    contentElement.style.fontWeight = 400;
+
+    const elementText = contentElement.innerText;
+    const elementTextArray = elementText.split(" ");
+
+    const elementTextArrayWithBold = elementTextArray.map((textWord) => {
+      const wordLength = textWord.length;
+
+      if (wordLength === 1) {
+        return `<strong>${textWord}</strong>`;
+      }
+
+      const wordLengthHalf = Math.floor(wordLength / 2);
+
+      const wordArray = textWord.split("");
+      const wordArrayWithBold = wordArray.map((wordLetter, letterIndex) => {
+        return letterIndex < wordLengthHalf
+          ? `<strong>${wordLetter}</strong>`
+          : wordLetter;
+      });
+
+      return wordArrayWithBold.join("");
+    });
+
+    contentElement.innerHTML = elementTextArrayWithBold.join(" ");
+  });
+}