implemented reader mode

app/js/readability/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "readability",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@mozilla/readability": "^0.5.0",
+    "dompurify": "^3.1.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "babel-loader": "^9.1.3",
+    "clean-webpack-plugin": "^4.0.0",
+    "compression-webpack-plugin": "^11.1.0",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.92.1",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^5.1.4"
+  }
+}

app/js/readability/src/index.js

@@ -0,0 +1,39 @@
+import { Readability, isProbablyReaderable } from '@mozilla/readability';
+import DOMPurify from 'dompurify';
+
+function isReaderable() {
+  return isProbablyReaderable(document);
+}
+
+function parseReaderable(doc) {
+  const reader = new Readability(doc);
+  const article = reader.parse();
+  return article;
+}
+
+function applyReaderable() {
+  const clonedDoc = document.cloneNode(true);
+  const article = parseReaderable(clonedDoc);
+  const markup = DOMPurify.sanitize(article.content);
+
+  // console.log('article title: ', parsed.title);
+  // console.log('HTML string of processed article content: ', parsed.content);
+  // console.log('text content of the article, with all the HTML tags removed: ', parsed.textContent);
+  // console.log('length of an article, in characters: ', parsed.length);
+  // console.log('article description, or short excerpt from the content: ', parsed.excerpt);
+  // console.log('author metadata: ', parsed.byline);
+  // console.log('content direction: ', parsed.dir);
+  // console.log('name of the site: ', parsed.siteName);
+  // console.log('content language: ', parsed.lang);
+  // console.log('published time: ', parsed.publishedTime);
+
+  if (markup) {
+    document.body.innerHTML = '<div style="margin: 4pt;">' + markup + '</div>';
+  }
+}
+
+// Attach functions to the window object
+window.isReaderable = isReaderable;
+window.applyReaderable = applyReaderable;
+
+export { isReaderable, applyReaderable };

app/js/readability/webpack.config.js

@@ -0,0 +1,54 @@
+const path = require('path');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const TerserPlugin = require('terser-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'readability.min.js',
+    library: 'ReadabilityBundle',
+    libraryTarget: 'umd',
+    globalObject: 'this'
+  },
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      }
+    ]
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        extractComments: false
+      })
+    ],
+    usedExports: true,
+    sideEffects: true
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      openAnalyzer: false,
+      generateStatsFile: true,
+      statsOptions: { source: false }
+    }),
+    new CompressionPlugin({
+      algorithm: 'gzip',
+      test: /\.js$/
+    })
+  ]
+};