readability VS ftr-site-config

I'm working with the Mozilla's readability library https://github.com/mozilla/readability to get the "readable" text from articles and now I want to style the extracted text in a readable way.

Do you remember the Firefox Reader View? It's a feature that removes all unnecessary components like buttons, menus, images, and so on, from a website, focusing on the readable content of the page. The library powering this feature is called Readability.js, which is open source.

I wonder if Firefox "reader mode as a utility" might be a viable alternative for Pinboard like "content oriented" archiving?

https://github.com/mozilla/readability

Depending upon the type of content, one might want to look into using the Readability (Browder's reader view) to parse the webpage. It will give you all the useful info without the junk. Then you can put it in the DB as needed.

https://github.com/mozilla/readability

Btw, readability, is also available in few other languages like Kotlin:

https://github.com/dankito/Readability4J

Use Mozilla's Readability to extract that sweet, sweet text content from webpages.

Same as above but the ability to grab the entire article text (you can use the Readability library for that: https://github.com/mozilla/readability)

// Original script // https://gist.github.com/kepano/90c05f162c37cf730abb8ff027987ca3 // Bookmarklet Converter // https://caiorss.github.io/bookmarklet-maker/ // Libraries // https://github.com/mixmark-io/turndown // https://github.com/mozilla/readability javascript: Promise.all([import('https://unpkg.com/[email protected]?module'), import('https://unpkg.com/@tehshrike/[email protected]'), ]).then(async ([{ default: Turndown }, { default: Readability }]) => { /* Optional vault name */ const vault = ""; /* Optional folder name such as "Clippings/" */ const folder = "Clippings/"; /* Optional tags */ const tags = ""; function getSelectionHtml() { var html = ""; if (typeof window.getSelection != "undefined") { var sel = window.getSelection(); if (sel.rangeCount) { var container = document.createElement("div"); for (var i = 0, len = sel.rangeCount; i < len; ++i) { container.appendChild(sel.getRangeAt(i).cloneContents()); } html = container.innerHTML; } } else if (typeof document.selection != "undefined") { if (document.selection.type == "Text") { html = document.selection.createRange().htmlText; } } return html; } const selection = getSelectionHtml(); const { title, byline, content } = new Readability(document.cloneNode(true)).parse(); function getFileName(fileName) { var userAgent = window.navigator.userAgent, platform = window.navigator.platform, windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']; if (windowsPlatforms.indexOf(platform) !== -1) { fileName = fileName.replace(':', '').replace(/[/\\?%*|"<>]/g, '-'); } else { fileName = fileName.replace(':', '').replace(/\//g, '-').replace(/\\/g, '-'); } return fileName; } const fileName = getFileName(title); if (selection) { var markdownify = selection; } else { var markdownify = content; } if (vault) { var vaultName = '&vault=' + encodeURIComponent(`${vault}`); } else { var vaultName = ''; } const markdownBody = new Turndown({ headingStyle: 'atx', hr: '---', bulletListMarker: '-', codeBlockStyle: 'fenced', emDelimiter: '*', }).turndown(markdownify); var date = new Date(); function convertDate(date) { var yyyy = date.getFullYear().toString(); var mm = (date.getMonth()+1).toString(); var dd = date.getDate().toString(); var mmChars = mm.split(''); var ddChars = dd.split(''); return yyyy + '-' + (mmChars[1]?mm:"0"+mmChars[0]) + '-' + (ddChars[1]?dd:"0"+ddChars[0]); } const today = convertDate(date); // This is the output template // It is similar to an Obsidian core template // except to insert a value we use: ${value} instead of {{value}} const fileContent =`--- type: clipping date_added: ${today} aliases: [] tags: [${tags}] --- author:: ${byline.toString().split('\n')[0].trim()} source:: [${title}](${document.URL}) ${markdownBody} `; // This copies your text to the clipboard navigator.clipboard.writeText(fileContent); // This creates a new document in Obsidian containing your clipping // I commented it out as this isn't what you asked for /* document.location.href = "obsidian://new?" + "file=" + encodeURIComponent(folder + fileName) + "&content=" + encodeURIComponent(fileContent) + vaultName; */ })

So first part of the task is to "extract the text from URL", and that is achieved by using descendant of https://github.com/mozilla/readability library which can extract text of any URL.

As far as full-text caching... maybe a self-hosted instance or paid version of the FiveFilters Full-Text RSS service would work. You can integrate that into whatever aggregator you want.

However you can retrofit this onto any reader by using a service that creates a full text feed from a summary feed. Two that I have used in the past are https://morss.it/ and https://www.fivefilters.org/full-text-rss/.

RSS feeds that don't contain the full article text drive me nuts.

Here is a workaround that I've had good luck with:

https://www.fivefilters.org/full-text-rss/

In addition to improving usability, it defeats attempts to measure clickbait summary efficacy, etc., since it breaks sites' ability to pull popularity / telemetry info.

By any chance, could this be used as an alternative to the full-article RSS tool that FiveFilters offers?

Please check out FullTextRSS from Five Filters: https://www.fivefilters.org/full-text-rss/

They have an OSS version you can host yourself. It fixes the problem of sites not sharing their full text in their feed, by going and scraping the site into a full feed for you.

Full-Text RSS - FiveFilters.org

This is great!

If it's useful, I work on a project where we maintain a repository of XPath selectors for extracting article content from many different sites: https://github.com/fivefilters/ftr-site-config - they're based on the original public Instapaper rules.

We also have PDF generation, but it's not really for crawling, and wasn't created for reading on a device like the Supernote, more for printing and reading: https://pdf.fivefilters.org/simple-print/

To accomplish full-text I ended up purchasing a license for https://www.fivefilters.org/full-text-rss/, self host it and bounce it through a docker container running Tor+privproxy which generates a new circuit every 10 minutes to help avoid IP based limits on certain websites I subscribe to. I can also disable the Tor bounce per-feed if needed.

Thanks for mentioning Instant View, I hadn't come across that. We actually maintain something similar here: https://github.com/fivefilters/ftr-site-config

We use these in our own tools and also get contributions from others, including Wallabag users: https://github.com/wallabag/wallabag

Before it was sold, Instapaper used to have something similar. A public database of its site-specific extraction templates. We used that as the starting point for our repository.

If you're trying to build one yourself, have a look at the open source Readability code[1]. It was originally developed by Arc90 and is now used by Apple and Mozilla in their browser reader views. The code has been ported to a number of different languages.

I work on a service called Full-Text RSS[2] that used a PHP port of Readability, coupled with site-specific extraction rules[3] to identify and extract article content from each feed item. It then produces a full-text version of the given feed. The idea is you subscribe to the full-text version in whichever feed reader you use and it will transparently give you full-text articles where you had partial content before.

[1] https://github.com/mozilla/readability

[2] https://www.fivefilters.org/full-text-rss/

[3] https://github.com/fivefilters/ftr-site-config