Add greying out for viewed articles
This commit is contained in:
parent
f2af0bc256
commit
5c877327c9
|
@ -1 +1,2 @@
|
||||||
vendor
|
vendor
|
||||||
|
_site
|
4
TODO.md
4
TODO.md
|
@ -10,4 +10,6 @@
|
||||||
- [ ] Font adjustments
|
- [ ] Font adjustments
|
||||||
- [ ] Clear "read articles"
|
- [ ] Clear "read articles"
|
||||||
- [ ] Redirect 404 articles to upstream
|
- [ ] Redirect 404 articles to upstream
|
||||||
- [ ] Add sign for "developing story"
|
- [ ] Add sign for "developing story"
|
||||||
|
- [ ] Fix tap target size in bottom footer.
|
||||||
|
- [ ] Make "/" in bottom footer using CSS after
|
|
@ -105,4 +105,8 @@ h6 {
|
||||||
border: 1px dashed;
|
border: 1px dashed;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
details.viewed>summary {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -22,5 +22,6 @@
|
||||||
{% include topics.html %}
|
{% include topics.html %}
|
||||||
{% include footer.html %}
|
{% include footer.html %}
|
||||||
|
|
||||||
|
<script src="/app.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -11,7 +11,7 @@ layout: default
|
||||||
|
|
||||||
{% for post in site.pages %}
|
{% for post in site.pages %}
|
||||||
{% if post.topics contains page.topic %}
|
{% if post.topics contains page.topic %}
|
||||||
<details>
|
<details data-hash="{{post.id}}-{{post.date | date: '%s'}}">
|
||||||
<summary>
|
<summary>
|
||||||
<h2>{{post.title | strip}} </h2>
|
<h2>{{post.title | strip}} </h2>
|
||||||
<a class="topic-title" href="{{post.url}}">🔗</a>
|
<a class="topic-title" href="{{post.url}}">🔗</a>
|
||||||
|
|
|
@ -81,23 +81,25 @@ class BeatrootNews < Jekyll::Generator
|
||||||
now = DateTime.new(n.year, n.month, n.day, 23, 59, 59, "+0530")
|
now = DateTime.new(n.year, n.month, n.day, 23, 59, 59, "+0530")
|
||||||
PageWithoutAFile.new(@site, __dir__, article['id'], "index.html").tap do |file|
|
PageWithoutAFile.new(@site, __dir__, article['id'], "index.html").tap do |file|
|
||||||
html = article['body_json']['blocks'].map{ |t| t['data']['text']}.join(" ")
|
html = article['body_json']['blocks'].map{ |t| t['data']['text']}.join(" ")
|
||||||
|
html = Sanitize.fragment(html, SANITIZE_CONFIG)
|
||||||
topics = article['topic'].map { |topic| topic.split('-').first }
|
topics = article['topic'].map { |topic| topic.split('-').first }
|
||||||
if article['trigger_warning']
|
if article['trigger_warning']
|
||||||
html = "<p><b>#{article['trigger_warning_text']}</b></p>" + html
|
html = "<p><b>#{article['trigger_warning_text']}</b></p>" + html
|
||||||
end
|
end
|
||||||
|
|
||||||
file.content = Sanitize.fragment(html, SANITIZE_CONFIG)
|
file.content = html
|
||||||
|
|
||||||
date = timestamp(article['updated_on'])
|
date = timestamp(article['updated_on'])
|
||||||
file.data.merge!(
|
file.data.merge!(
|
||||||
'sources' => article['sources'],
|
'sources' => article['sources'],
|
||||||
"date" => date,
|
"date" => date,
|
||||||
|
"id" => article['id'],
|
||||||
|
"slug" => article['slug'],
|
||||||
"title" => article['title'],
|
"title" => article['title'],
|
||||||
"layout" => 'article',
|
"layout" => 'article',
|
||||||
"topics" => topics,
|
"topics" => topics,
|
||||||
"days_ago" => (now - date).floor,
|
"days_ago" => (now - date).floor,
|
||||||
# Limit to 200 characters
|
# Limit to 200 characters and no tags
|
||||||
"description" => Sanitize.fragment(html)[0..200],
|
"description" => Sanitize.fragment(html)[0..200],
|
||||||
"seo" => {
|
"seo" => {
|
||||||
"type" => "NewsArticle",
|
"type" => "NewsArticle",
|
||||||
|
|
|
@ -0,0 +1,41 @@
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
// Get the list of hashes from local storage
|
||||||
|
var storedHashes = localStorage.getItem('eventHashes');
|
||||||
|
var eventHashes = storedHashes ? JSON.parse(storedHashes) : [];
|
||||||
|
|
||||||
|
// Get all <details> elements on the page
|
||||||
|
var detailsElements = document.querySelectorAll('details');
|
||||||
|
|
||||||
|
// Add event listeners to track open/click events
|
||||||
|
detailsElements.forEach(function (detailsElement) {
|
||||||
|
detailsElement.addEventListener('toggle', function (e) {
|
||||||
|
// Add viewed class to the target:
|
||||||
|
// TODO: Fix if we use multiple classes.
|
||||||
|
e.target.setAttribute('class', 'viewed');
|
||||||
|
// Get the data-hash attribute value
|
||||||
|
var hash = detailsElement.getAttribute('data-hash');
|
||||||
|
|
||||||
|
// Check if the hash already exists in eventHashes array
|
||||||
|
if (!eventHashes.includes(hash)) {
|
||||||
|
// Add the hash to the eventHashes array
|
||||||
|
eventHashes.push(hash);
|
||||||
|
|
||||||
|
// Limit the eventHashes array to store only the last 100 events
|
||||||
|
if (eventHashes.length > 100) {
|
||||||
|
eventHashes.shift();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Store the updated eventHashes array in local storage
|
||||||
|
localStorage.setItem('eventHashes', JSON.stringify(eventHashes));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add "viewed" class to <details> elements with matching hashes
|
||||||
|
detailsElements.forEach(function (detailsElement) {
|
||||||
|
var hash = detailsElement.getAttribute('data-hash');
|
||||||
|
if (eventHashes.includes(hash)) {
|
||||||
|
detailsElement.classList.add('viewed');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
|
@ -13,7 +13,7 @@ layout: default
|
||||||
{% if post.topics and post.days_ago < 2 and post.topics.first == topic %}
|
{% if post.topics and post.days_ago < 2 and post.topics.first == topic %}
|
||||||
|
|
||||||
{% unless post.sources contains "PTI" %}
|
{% unless post.sources contains "PTI" %}
|
||||||
<details><summary><h3>{{post.title | strip}}</h3></summary>
|
<details data-hash="{{post.id}}-{{post.date | date: '%s'}}"><summary><h3>{{post.title | strip}}</h3></summary>
|
||||||
<div class="details-content">{{post.content}}</div>
|
<div class="details-content">{{post.content}}</div>
|
||||||
</details>
|
</details>
|
||||||
{% endunless %}
|
{% endunless %}
|
||||||
|
|
Loading…
Reference in New Issue