Remove compare-view in favor of readable-proxy, and update README to explain that

pull/15/head
Margaret Leibovic 9 years ago
parent 36213108b6
commit 1fd72d6472

@ -2,11 +2,37 @@
A standalone version of the readability library used for Firefox Reader View. Any changes to Readability.js itself should be reviewed by an appropriate Firefox/toolkit peer, such as [@leibovic](https://github.com/leibovic) or [@thebnich](https://github.com/thebnich), since these changes will be automatically merged to mozilla-central.
For outstanding issues, see this bug list: https://bugzilla.mozilla.org/show_bug.cgi?id=1102450
## Usage
For easy development, you can use the compare-view page to compare an original test page to its reader-ized content. Due to the same-origin policy, this will only work with pages hosted on the same domain as this compare-view page, so you should save testcases locally, and run a local http server to test.
To parse a document, you must create a new `Readability` object from a URI object and a document, and then call `parse()`. Here's an example:
For a simple node http server, see [http-server](https://github.com/nodeapps/http-server).
```javascript
var location = document.location;
var uri = {
spec: location.href,
host: location.host,
prePath: location.protocol + "//" + location.host,
scheme: location.protocol.substr(0, location.protocol.indexOf(":")),
pathBase: location.protocol + "//" + location.host + location.pathname.substr(0, location.pathname.lastIndexOf("/") + 1)
};
var article = new Readability(uri, document).parse();
```
This `article` object will contain the following properties:
* `uri`: original `uri` object that was passed to constructor
* `title`: article title
* `content`: HTML string of processed article content
* `length`: length of article, in characters
* `excerpt`: article description, or short excerpt from content
* `byline`: author metadata
* `dir`: content direction
## Contributing
For outstanding issues, see the issue list in this repo, as well as this bug list: https://bugzilla.mozilla.org/show_bug.cgi?id=1102450
To test local changes to Readability.js, you can run your own instance of [readable-proxy](https://github.com/n1k0/readable-proxy/) to compare an original test page to its reader-ized content.
## License

@ -1,18 +0,0 @@
#inputs {
margin: 20px 0;
}
#url {
width: 400px;
}
#frames {
display: flex;
height: 600px;
margin: ;
}
.frame {
flex: 1;
}

@ -1,31 +0,0 @@
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("compare").addEventListener("click", function compare(event) {
var original = document.getElementById("original");
original.addEventListener("load", function(event) {
var contentDoc = original.contentDocument;
var docStr = new XMLSerializer().serializeToString(contentDoc);
var doc = new DOMParser().parseFromString(docStr, "text/html");
var location = contentDoc.location;
var uri = {
spec: location.href,
host: location.host,
prePath: location.protocol + "//" + location.host, // TODO This is incomplete, needs username/password and port
scheme: location.protocol.substr(0, location.protocol.indexOf(":")),
pathBase: location.protocol + "//" + location.host + location.pathname.substr(0, location.pathname.lastIndexOf("/") + 1)
}
var readability = new Readability(uri, doc);
var result = readability.parse();
console.log(result);
var readerDoc = document.getElementById("readerized").contentWindow.document;
readerDoc.getElementById("title").textContent = result.title;
readerDoc.getElementById("byline").textContent = result.byline;
readerDoc.getElementById("content").innerHTML = result.content;
});
original.src = document.getElementById("url").value;
});
});

@ -1,22 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Readability Compare View</title>
<link rel="stylesheet" href="compare.css">
</head>
<body>
<h1>Readability Compare View</h1>
<div id="inputs">
<input type="url" placeholder="http://localhost:8080/test-pages/margaret.html" id="url"/>
<input type="submit" value="Compare" id="compare"/>
</div>
<div id="frames">
<iframe id="original" class="frame"></iframe>
<iframe id="readerized" class="frame" src="reader-view.html"></iframe>
</div>
<script src="../Readability.js"></script>
<script src="compare.js"></script>
</body>
</html>

@ -1,14 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<meta name="viewport" content="width=device-width; user-scalable=0" />
</head>
<body>
<h1 id="title"></h1>
<h2 id="byline"></h2>
<div id="content"></div>
</body>
</html>

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save