38 lines
2.7 KiB
Markdown
38 lines
2.7 KiB
Markdown
# [The Hacker News][hn] RSS Widget
|
|
|
|
With this widget, you can add a news feed from The Hacker News to any website based on a Linux server.
|
|
## 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
|
|
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.
|
|
|
|
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
|
|
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/).
|
|
## Samples
|
|
* [Sample Configuration on template for my website](src/sample_1.html)
|
|
* [Minimum viable configuration](src/sample_2.html)
|
|
## Dependencies
|
|
* [`cron`][cron] (or a similar job scheduler)
|
|
* [`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)
|
|
[cron]:(https://wiki.debian.org/cron)
|