gablaxy/bubo-rss
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make it sepia and highlight stories from the past 24 hours (#4)

Browse source 
* Make it sepia

* Change page title and remove sponsor link

* Revert styling for error messages

* Hightlight new content
This commit is contained in:
Carter McBride 2024-06-19 12:13:20 -06:00 committed by GitHub
parent 3984c01a45
commit fd57b35c9b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 51 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
config/template.html
View file

@ -5,12 +5,12 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>🦉 Bubo Reader</title>
<title>📰 Carter's RSS Feeds</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<h1>🦉 Bubo Reader</h1>
<h1>📰 Carter's RSS Feeds</h1>
{% for group, feeds in data %}
<h2>{{ group }}</h2>
@ -22,9 +22,10 @@
</summary>
<ul>
{% for item in feed.items %}
<li>
{{ item.timestamp | formatDate }} @ {{ item.timestamp | formatTime }}—
<a href="{{ item.link }}" target="_blank" rel="noopener norefferer nofollow">{{ item.title }}</a>
<li class="{% if item.isRecent %}has-recent{% endif %}">
<div><a class="article-title" href="{{ item.link }}" target="_blank" rel="noopener norefferer nofollow">{{
item.title }}</a>
<div class="article-timestamp">{{ item.timestamp | formatDate }}, {{ item.timestamp | formatTime }}</div>
</li>
{% endfor %}
</ul>
@ -46,7 +47,6 @@
Powered by
<a href="https://github.com/georgemandis/bubo-rss">Bubo Reader (v{{ info.version }})</a>, a project by <a
href="https://george.mand.is">George Mandis</a>. ❤️
<a href="{{ info.funding.url }}">Sponsor on GitHub</a>
</p>
</body>

51
public/style.css
View file

@ -1,28 +1,51 @@
:root {
--color-bg: oklch(97.1% 0.024 88.23);
--color-hover: oklch(94.48% 0.024 88.23);
--color-text: oklch(24.74% 0.024 88.23);
--color-new: oklch(94.48% 0.024 38.23);
}
body {
font-family: system-ui;
font-size: 18px;
background: var(--color-bg);
color: var(--color-text);
}
details:focus,
details:focus-within,
details:hover {
/* background:#ffeb3b; */
/* outline:2px #000 solid; */
}
details ul li {}
summary {
cursor: pointer;
}
summary:hover {
opacity: .75;
summary,
details li {
padding: 0.5em;
border-radius: 12px;
margin-block-start: 4px;
transition: background cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s;
}
summary:hover,
details li:hover {
background: var(--color-hover)
}
details:has(li.has-recent) {
summary,
li.has-recent {
background: var(--color-new);
}
}
.feed-url {
color: #aaa;
}
.article-timestamp {
font-size: 0.75em;
}
details ul {
list-style-type: none;
margin: 0;
}

2
src/@types/bubo.d.ts vendored
View file

@ -2,7 +2,7 @@ export interface Feeds {
[key: string]: object[];
}
export interface FeedItem {
[key: string]: string | number | Date | FeedItem[];
[key: string]: string | number | Date | boolean | FeedItem[];
items: FeedItem[];
}

6
src/index.ts
View file

@ -124,8 +124,14 @@ const processFeed =
item.timestamp = getTimestamp(item);
item.title = getTitle(item);
item.link = getLink(item);
const timestamp = new Date(Number.parseInt(item.timestamp));
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
item.isRecent = timestamp > yesterday;
}
contents.hasRecent = contents.items.some((item) => item.isRecent);
contentFromAllFeeds[group].push(contents as object);
process.stdout.write(
`${success("Successfully fetched:")} ${feed} - ${benchmark(startTime)}\n`,