blacklight/reader-mode.js

## reader-mode.js
// Platypush sample user script to simplify/distill the content of a web page
async (app, args) => {
  const url = await app.getURL();

  // Get and parse the page body through the Mercury API
  const dom = await app.getDOM();
  const html = dom.body.innerHTML;
  const response = await app.mercury.parse(url, html);

  // Define a new DOM that contains the simplified body as well as
  // the original body as a hidden <div>, and provide a top fixed
  // button to switch back to the original content.
  const style = `
  <style>
    .platypush__simplified-body {
      max-width: 30em;
      margin: 0 auto;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 20px;
      color: #333;
    }

    .platypush__simplified-body h1 {
      border-bottom: 1px solid black;
      margin-bottom: 1em;
      padding-top: 1em;
    }

    .platypush__original-body {
      display: none;
    }

    .platypush__simplified-banner {
      position: fixed;
      top: 0.5em;
      left: 0.5em;
      background: white;
      color: black;
      z-index: 99999;
    }
  </style>`;

  const simplifiedDiv = `
    <div class="platypush__simplified-container">
      <div class="platypush__simplified-banner">
        <a href="#"
          onclick="document.body.innerHTML = document.querySelector('.platypush__original-body').innerHTML; return false;">
          See Original
        </a>
      </div>
      <div class="platypush__simplified-body">
        <h1>${response.title}</h1>
        ${response.content}
      </div>
      <div class="platypush__original-body">
        ${dom.body.innerHTML}
      </div>
    </div>`;

  // Construct and replace the DOM
  dom.head.innerHTML += style;
  dom.body.innerHTML = simplifiedDiv;
  await app.setDOM(`<html>${dom.getElementsByTagName('html')[0].innerHTML}</html>`);
}
	// Platypush sample user script to simplify/distill the content of a web page
	async (app, args) => {
	const url = await app.getURL();

	// Get and parse the page body through the Mercury API
	const dom = await app.getDOM();
	const html = dom.body.innerHTML;
	const response = await app.mercury.parse(url, html);

	// Define a new DOM that contains the simplified body as well as
	// the original body as a hidden <div>, and provide a top fixed
	// button to switch back to the original content.
	const style = `
	<style>
	.platypush__simplified-body {
	max-width: 30em;
	margin: 0 auto;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 20px;
	color: #333;
	}

	.platypush__simplified-body h1 {
	border-bottom: 1px solid black;
	margin-bottom: 1em;
	padding-top: 1em;
	}

	.platypush__original-body {
	display: none;
	}

	.platypush__simplified-banner {
	position: fixed;
	top: 0.5em;
	left: 0.5em;
	background: white;
	color: black;
	z-index: 99999;
	}
	</style>`;

	const simplifiedDiv = `
	<div class="platypush__simplified-container">
	<div class="platypush__simplified-banner">
	<a href="#"
	onclick="document.body.innerHTML = document.querySelector('.platypush__original-body').innerHTML; return false;">
	See Original
	</a>
	</div>
	<div class="platypush__simplified-body">
	<h1>${response.title}</h1>
	${response.content}
	</div>
	<div class="platypush__original-body">
	${dom.body.innerHTML}
	</div>
	</div>`;

	// Construct and replace the DOM
	dom.head.innerHTML += style;
	dom.body.innerHTML = simplifiedDiv;
	await app.setDOM(`<html>${dom.getElementsByTagName('html')[0].innerHTML}</html>`);
	}