MagicMirror module - displaying news articles with News.org API V2
- Aggregate headlines from multiple sources at once.
- Country specific, Category specific, Keyword specific news could be aggregated.
- Touchable (Clickable) UI supported
- Can open article page in iFrame and scrollable by touch or autoScroll
- Controllable by notification
- Controllable by MMM-TelegramBot
- Customizable with Template
2.0.0
- Added : Reader mode
- You need to re-install to update. or
cd ~/MagicMirror/modules/MMM-News
git pull
npm install
cd ~/MagicMirror/modules/
git clone https://github.com/eouia/MMM-News
cd MMM-News
npm install
{
module: "MMM-News",
position: "bottom_bar",
config: {
apiKey : "YOUR NEWSAPI.ORG API KEY",
type: "horizontal",
query : [
{
sources: "abc-news, cnn, bild",
},
{
country: "de",
className: "redTitle",
},
{
country: "gb",
category: "sports",
q : "Manchester United"
}
],
}
},
{
module: "MMM-News",
position: "bottom_bar",
config: {
apiKey : "", // set your newsapi.org API Key
type: "horizontal", // "horizontal", "vertical" You can make your own type with CSS class selector.
// See https://newsapi.org/sources for available query options('sources' or `country`, `category`).
query : [
{
sources: "abc-news, bloomberg, cnn",
// A comma-seperated string of identifiers for the news sources or blogs you want headlines from.
// Too many `sources` at once could make API error. If you want, split them to several queries.
// `sources` are not able to be mixed with `country` and `category`.
},
{
country: "de",
className: "redTitle", // You can give your CSS className for these articles.
},
{
country: "gb", // country : The 2-letter ISO 3166-1 code of the country, "" or `null` for all of the world.
category: "sports", // category : The category you want to get headlines for.
// Possible options: `business` `entertainment` `general` `health` `science` `sports` `technology`
q : "Manchester United", // Keywords or a phrase to search for. `null`, "", or omitted will get all headlines.
}
],
items: 20, // number of how many headlines to get from each query. max 100
timeFormat: "relative", // Or You can use "YYYY-MM-DD HH:mm:ss" format.
drawInterval: 1000*30, // How long time each article will be shown.
autoScroll: false, // some site will not be displayed as normal when this is set as true. but normally, we have no interface to control the scroll of MM. Choice is yours.
scrollStep: 100,
scrollInterval: 1000,
touchable: true, // When you have a touchable or clickable interface on your MM.
detailTimeout : 1000*20, //Hide detail when this time passed after last action. `0` : never be timed out.
telegramBotOrderOpenDetail : false, //When you use telegramBot, you might not need open detail iFrame on Mirror, because you can get detail link on Telegram.
readabilityExcepts: [],
// You might not need modify belows;
endpoint : "https://newsapi.org/v2/top-headlines",
scanInterval: 1000*60*10, // This will be automatically recalculated by number of queries to avoid query quota limit. This could be minimum interval.
templateFile: "template.html",
notifications: {
previousArticle : "NEWS_PREVIOUS",
nextArticle : "NEWS_NEXT",
showDetail : "NEWS_DETAIL",
closeDetail : "NEWS_DETAIL_CLOSE",
scrollDownDetail : "NEWS_DETAIL_SCROLLDOWN",
scrollUpDetail : "NEWS_DETAIL_SCROLLUP"
},
}
},
Now MMM-News can show article detail with READER MODE
. Detailed article will be shown without Adv, menu or any other annoying site things.
But some articles cannot be shown as Reader mode. You can set exception with readabilityExcepts
.
readabilityExcepts: ["usatoday", "cnn.com", "wkrg"], //particle of URL pattern for exception
CSS is defined in readermode.css
. You can redefine it in your css/custom.css
.
You can redesign output with template.html
. Default is this;
<div class="article %CLASSNAME%" id="%ARTICLEID%">
<div class="header">
<div class="title">%TITLE%</div>
</div>
<div class="content">
<!-- <img src="%URLTOIMAGE%"/> -->
%ARTICLEIMAGE%
%DESCRIPTION%
</div>
<div class="footer">
<div class="sourceName" id="%SOURCEID%">%SOURCENAME%</div>
<div class="publishedAt"> - %PUBLISHEDAT%</div>
</div>
</div>
Tag | Example | Description |
---|---|---|
%SOURCEID% | cnn or N-tv-de |
Unique id of each news site. |
%SOURCENAME% | cnn.com or N-tv.de |
name of each news site. |
%AUTHOR% | John Doe |
Author of this article. |
%TITLE% | Who Framed Roger Rabbit |
Title of this article. |
%DESCRIPTION% | blah blah blah... |
Short description of this article (not article itself). |
%CONTENT% | blah blah blah... |
Full or Shorten news articles. it may differ by each news site. |
%ARTICLEID% | X12345678 |
Unique id of each news article. |
%PUBLISHEDAT% | 2 hours ago or 2018-10-01 12:34:56 |
Published time. |
%URL% | http://cnn.com/... |
URL of original news article. |
%URLTOIMAGE% | http://image.cnn.com/... |
URL of image. (if exists) |
%ARTICLEIMAGE% | <img src="http://image.cnn.com/..."... > |
Ready-made image tag. |
%CLASSNAME% | someClassName |
When you give className to query , that value will be used as this. |
command | Description |
---|---|
/news |
Send current news link to Telegram. |
/news n |
Next article |
/news p |
Previous article |
/news c |
Close detail iframe page |
/news u |
Scroll Up detail iframe page |
/news d |
Scroll Down detail iframe page |
notification | Description |
---|---|
NEWS_NEXT |
Next article |
NEWS_PREVIOUS |
Previous article |
NEWS_DETAIL |
Open detail iframe page of current news |
NEWS_DETAIL_CLOSE |
Close detail iframe page |
NEWS_DETAIL_SCROLLUP |
Scroll Up detail iframe page |
NEWS_DETAIL_SCROLLDOWN |
Scroll Down detail iframe page |