jesstelford/01-shape-up-to-kindle.md

## 01-shape-up-to-kindle.md

      
    Raw
  

              01-shape-up-to-kindle.md
            
          
    Read Shape Up by basecamp on a kindle / reMarkable / eReader

Basecamp's new book Shape Up is now available online (https://basecamp.com/shapeup) to read page-by-page.
There is a .pdf version, but that's not the best format for Kindle / other eReaders. Instead, we can convert the page-by-page into an eReader friendly format.
Part 1: Convert to a single page

NOTE: This has only been tested on Chrome

Go to the first chapter: https://basecamp.com/shapeup/0.1-foreword
In the URL bar, type javascript:
Paste in this single line of JavaScript* (so the URL bar looks like javascript:document.title='Shape Up';...)

document.title='Shape Up';var style=document.createElement('style');document.head.appendChild(style);style.sheet.insertRule('main {grid-template-areas: "header" "sidebar" "content" "footer" !important; grid-template-columns: auto !important;}');document.querySelector('main').setAttribute('data-new',!0);function loadNext(){const nextPageLink=document.querySelector('main[data-new] .intro__next a');const nextPage=nextPageLink&&nextPageLink.href;['main[data-new] .intro__book-title.button','main[data-new] .pagination','main[data-new] footer','main[data-new] .warning','main[data-new] template','main[data-new] nav','a.pop','main[data-new] .intro__sections','main[data-new] .intro__next'].forEach(selector=>{const els=document.querySelectorAll(selector);els.forEach(el=>el.parentElement.removeChild(el))});document.querySelector('main[data-new]').removeAttribute('data-new');if(nextPageLink){console.log('loading '+nextPage);fetch(nextPage.replace(/\/$/,'')).then(res=>res.text()).then(res=>document.body.insertAdjacentHTML('beforeend',res.replace(/^[\s\S]+<main/m,'<main data-new').replace(/<\/main>[\s\S]+/m,'</main>'))).then(loadNext)}else{alert('done.')}};loadNext()

Hit enter & wait for it to say "done." (can take a couple minutes depending on your connection speed)
You now have the entire contents of the book ready to read.

Part 2: Send to device

Depending on your device, there are different steps to take:

  Kindle
 ^{(click to expand)}
Involves sending a copy of the website to your kindle via email. (NOTE: Unfortunately the official "Send To Kindle" browser extension cannot be used due to unknown failures with this book).

In the browser, click File > Save As
Create a new folder called "shape up"
Select "Web Page, Complete" from the drop-down
Click "Save"
Open the folder "shape up" created in step 2

It should contain Shape Up.html and Shape Up_files


Select both items and create a .zip file from them:

Windows: Right Click -> "Send To" -> "Compressed (Zipped) Folder"
MacOS: Right Click -> "Compress"
Ubuntu: Right Click -> "Compress..."


Visit the Personal Document Settings page (Scroll to "Personal Document Settings" and click to expand if not already open)
Under the second table "Approved Personal Document E-mail List", ensure your email address is listed.

If not, add it by clicking "Add a new approved e-mail address" below the table


Under the first table "Send-to-Kindle E-Mail Settings", copy the email address listed next to your Kindle device (usually ends with @kindle)
Using your email client, compose a new email

To: <email address you just copied>
Subject: convert
Body: <blank>
Attachment: Attach the .zip file created in step 6


Send your email
Wait for it to appear on your Kindle

NOTE: Once sent, Amazon can take up to an hour to process the book. If, for some reason it fails, you can try the "Other eReader" steps below, but convert to .mobi format instead of .epub.


  reMarkable
 ^{(click to expand)}

Install the offical Read on reMarkable Chrome Extension.

Be sure to follow the setup guide for connecting your reMarkable device
You can skip the "Different reading options" & "Read on reMarkable PDF settings" sections


Go back to your Shape Up book page (where you ran the javascript: command)
Click the "rM" (Read On reMarkable) extension next to your URL bar to send to your reMarkable device
Wait for the book to appear on your reMarkable device


  Other eReader
 ^{(click to expand)}
Uses the Calibre eBook Manager to convert the web page into a .epub file for your device.

In the browser, click File > Save As
Create a new folder called "shape up"
Select "Web Page, Complete" from the drop-down
Click "Save"
Download & run Calibre eBook Manager
Click "Add Books"
Open the folder "shape up" created in step 2
Select Shape Up.html
Click "Open"
Click "Convert Books"
Change "Output Format" to EPUB
Click "OK"
In the bottom-right, wait for it to say "Jobs: 0"
Click "Save to disc"
Open the folder "shape up" created in step 2
Click "Open"

There is now a `Shape Up - Unknown.epub file in the "shape up" folder. Transfer this to your eReader and enjoy!


* ^{The unminified source is below}

  
## 02-shape-up-single-page.js
document.title='Shape Up';
var style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('main {grid-template-areas: "header" "sidebar" "content" "footer" !important; grid-template-columns: auto !important;}');
document.querySelector('main').setAttribute('data-new', true);

function loadNext() {
    const nextPageLink = document.querySelector('main[data-new] .intro__next a');
    const nextPage = nextPageLink && nextPageLink.href;
    ['main[data-new] .intro__book-title.button', 'main[data-new] .pagination', 'main[data-new] footer', 'main[data-new] .warning', 'main[data-new] template', 'main[data-new] nav', 'a.pop', 'main[data-new] .intro__sections', 'main[data-new] .intro__next'].forEach(selector => { const els = document.querySelectorAll(selector); els.forEach(el => el.parentElement.removeChild(el))});
    document.querySelector('main[data-new]').removeAttribute('data-new');

    if (nextPageLink) {
      console.log('loading ' + nextPage);
      fetch(nextPage.replace(/\/$/, '')).then(res => res.text()).then(res => document.body.insertAdjacentHTML('beforeend', res.replace(/^[\s\S]+<main/m, '<main data-new').replace(/<\/main>[\s\S]+/m, '</main>'))).then(loadNext);
    } else {
      alert('done.');
    }
}
loadNext();
	document.title='Shape Up';
	var style = document.createElement('style');
	document.head.appendChild(style);
	style.sheet.insertRule('main {grid-template-areas: "header" "sidebar" "content" "footer" !important; grid-template-columns: auto !important;}');
	document.querySelector('main').setAttribute('data-new', true);

	function loadNext() {
	const nextPageLink = document.querySelector('main[data-new] .intro__next a');
	const nextPage = nextPageLink && nextPageLink.href;
	['main[data-new] .intro__book-title.button', 'main[data-new] .pagination', 'main[data-new] footer', 'main[data-new] .warning', 'main[data-new] template', 'main[data-new] nav', 'a.pop', 'main[data-new] .intro__sections', 'main[data-new] .intro__next'].forEach(selector => { const els = document.querySelectorAll(selector); els.forEach(el => el.parentElement.removeChild(el))});
	document.querySelector('main[data-new]').removeAttribute('data-new');

	if (nextPageLink) {
	console.log('loading ' + nextPage);
	fetch(nextPage.replace(/\/$/, '')).then(res => res.text()).then(res => document.body.insertAdjacentHTML('beforeend', res.replace(/^[\s\S]+<main/m, '<main data-new').replace(/<\/main>[\s\S]+/m, '</main>'))).then(loadNext);
	} else {
	alert('done.');
	}
	}
	loadNext();