the-hacker-news-rss/README.md

38 lines
2.7 KiB
Markdown
Raw Normal View History

2021-07-23 01:21:09 +00:00
# [The Hacker News][hn] RSS Widget
2021-07-23 04:49:30 +00:00
With this widget, you can add a news feed from The Hacker News to any website based on a Linux server.
2021-07-23 01:21:09 +00:00
## Setup
1. Drag the [`src/ef/`](src/ef/) folder into the same folder as the webpage on the target machine. The folder with your webpage will be represented by `/path_to_webpage/`.
2. Add a [`cron`][cron] job to run it once per hour. The easiest way to do this is to run this command:
```
crontab -e
```
and then add the following lines to your [`crontab`][cron]:
```
0 * * * * cd /path_to_webpage/ef/ && python3 xml-download.py
```
3. Copy the code in [`hack-news-widget.html`](src/hack-news-widget.html) to where you want your news widget on your webpage.
## How it works
2021-07-24 01:58:57 +00:00
The [`xml-download.py`](src/ef/xml-download.py) file downloads the RSS feed from the provided endpoint. Theoretically this hardcoded endpoint could be replaced with any RSS URL, but this is specifically designed for [Hacker News][hn]. The reason this isn't just placed in the webpage code is to prevent CORS errors and vulnerabilities.
2021-07-23 01:21:09 +00:00
The Python 3.8 code downloads the RSS feed into the [`src/ef/feed.xml`](src/ef/feed.xml) file. It then takes that feed and translates it into a pretty HTML template. The template includes references to the following files:
* [`news_scroll.js`](src/ef/news_scroll.js), which controls the scrolling animation.
* [`news_scroll.css`][nsc], which has a reference to the fancy terminal-based color scheme in [`palette.css`][pc], as well as styling to control the size of the entire widget.
## UX Configuration
2021-07-24 00:34:55 +00:00
The best place to look for customizing this template to your liking is in [`news_scroll.css`][nsc]. Width, text decoration, and font sizes can be adjust from there. If fonts or colors are what you're looking to adjust, check the `terminal` theme in [`palette.css`][pc]. It can be copied and pasted within the file, and then adjusted to your liking. In order to apply it to the widget, change the `color_theme` variable in [`news_scroll.js`](src/ef/news_scroll.js) to the name of your theme. Alternatively, try some of the default themes, such as `hornetfighter-red` and `hornetfighter-blue`, based on the color palette from [my website](https://hornetfighter.com/).
2021-07-23 01:21:09 +00:00
## Samples
* [Sample Configuration on template for my website](src/sample_1.html)
* [Minimum viable configuration](src/sample_2.html)
## Dependencies
2021-07-24 00:34:55 +00:00
* [`cron`][cron] (or a similar job scheduler)
2021-07-23 01:21:09 +00:00
* [`requests`](https://pypi.org/project/requests/)
___
NOTICE: Heavily modified from the [Allwebco Design Corporation IFrame news scroller](/IFrame-ScrollingNews-HTML5/help-ScrollingNews.html)
[hn]: (https://thehackernews.com/)
[nsc]:(src/ef/news_scroll.css)
[pc]:(src/ef/palette.css)
2021-07-24 00:34:55 +00:00
[cron]:(https://wiki.debian.org/cron)