riki/treehouse
riki/treehouse
1
Fork 0
Code Issues 33 Activity

revamp the way page:treehouse/new works

Browse source 
- treehouse/new is now a regular page, not a special template
- most of the code related to the `new` badge in page:index has been removed
- you're meant to discern between pages you've read vs ones you haven't by looking at the colors of the links (blue vs purple)
This commit is contained in:
りき萌 2024-11-12 19:49:57 +01:00
parent 8d1deee626
commit e201ea7058
6 changed files with 128 additions and 362 deletions
Download patch file Download diff file Expand all files Collapse all files

157
static/css/new.css
View file

@ -1,134 +1,33 @@
/* Give the intro and outro some breathing room. */
section {
padding: 1em 2em;
}
/* Style all links in the last paragraph as big buttons. */
.tree th-bc>p:last-child {
--transition-duration: 0.2s;
margin-top: var(--8px);
margin-bottom: var(--4px);
&>a {
display: inline-block;
padding: 0.5em 1.5em;
color: var(--text-color);
background-color: transparent;
border: var(--1px) solid var(--border-1);
border-radius: 2em;
text-decoration: none;
transition:
color var(--transition-duration),
background-color var(--transition-duration),
border-color var(--transition-duration);
&:hover,
&:focus {
color: white;
background-color: #058ef0;
border-color: white;
}
}
}
.tree li>div:first-child,
.tree li>details>summary:first-child {
--margin: 2.5em;
border: none;
margin-left: var(--tree-indent-width);
width: calc(100% - var(--tree-indent-width));
margin-top: var(--margin);
margin-bottom: var(--margin);
}
.tree th-bp {
display: none;
}
.tree th-bb {
opacity: 100%;
& .branch-date {
display: block !important;
}
}
@media (max-width: 600px) {
.tree .branch-container {
flex-direction: column-reverse;
}
}
section.settings {
& h3 {
display: inline;
}
& details>summary {
--recursive-wght: 700;
list-style: none;
cursor: pointer;
opacity: 50%;
transition: opacity var(--transition-duration);
&::-webkit-details-marker {
display: none;
}
&::before {
--recursive-casl: 0.0;
--recursive-mono: 1.0;
--recursive-slnt: 0.0;
content: '+';
margin-right: 0.3em;
opacity: 50%;
}
&:hover {
opacity: 100%;
}
}
& details[open]>summary {
.tree .branch-container {
&:has(th-bc > h3) > th-bb {
opacity: 100%;
&::before {
content: '-';
}
}
& p {
margin-bottom: var(--8px);
}
& button {
border: var(--1px) solid var(--border-1);
border-radius: 999px;
padding: var(--4px) var(--12px);
background: none;
color: var(--text-color);
font-size: 1rem;
cursor: pointer;
transition:
color var(--transition-duration),
background-color var(--transition-duration),
border-color var(--transition-duration);
&:hover {
color: white;
background-color: #058ef0;
border-color: white;
& .branch-date {
display: block !important;
}
}
}
@media (max-width: 720px) {
.tree .branch-container {
&:has(th-bc > h3) {
flex-direction: column;
padding-left: 1rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
& > th-bp {
display: none;
}
& > th-bc > h3 {
margin-top: 0;
margin-bottom: 0;
}
& > th-bb {
margin: 0;
}
}
}
}

71
static/js/news.js
View file

@ -1,71 +0,0 @@
// news.js because new.js makes the TypeScript language server flip out.
// Likely because `new` is a keyword, but also, what the fuck.
import { addSpell, spell } from "treehouse/spells.js";
import { getSettingValue } from "treehouse/settings.js";
import { Branch } from "treehouse/tree.js";
const seenStatesKey = "treehouse.news.seenBranches";
const seenStates = new Set(JSON.parse(localStorage.getItem(seenStatesKey)) || []);
let seenCount = seenStates.size;
let unseenCount = TREEHOUSE_NEWS_COUNT - seenCount;
function saveSeenStates() {
localStorage.setItem(seenStatesKey, JSON.stringify(Array.from(seenStates)));
}
function markAsRead(branch) {
let branchData = spell(branch, Branch);
if (!seenStates.has(branchData.namedID) && seenCount > 0) {
let badge = document.createElement("span");
badge.classList.add("badge", "red", "before-content");
badge.textContent = "new";
branchData.branchContent.firstChild.insertBefore(badge, branchData.branchContent.firstChild.firstChild);
}
seenStates.add(branchData.namedID);
}
export function initNewsPage() {
for (let [_, branch] of Branch.branchesByNamedID) {
markAsRead(branch);
}
saveSeenStates();
// If any branches are added past the initial load, add them to the seen set too.
Branch.onAdded.push(branch => {
markAsRead(branch);
saveSeenStates();
})
}
export function markAllAsUnread() {
localStorage.removeItem(seenStatesKey);
}
addSpell("new", class New {
constructor(element) {
// Do not show the badge to people who have never seen any news.
// It's just annoying in that case.
// In case you do not wish to see the badge anymore, go to the news page and uncheck the
// checkbox at the bottom.
let userSawNews = seenCount > 0;
let userWantsToSeeNews = getSettingValue("showNewPostIndicator");
if (userSawNews && userWantsToSeeNews && unseenCount > 0) {
this.newText = document.createElement("span");
this.newText.classList.add("new-text");
this.newText.textContent = element.textContent;
element.textContent = "";
element.appendChild(this.newText);
this.badge = document.createElement("span");
this.badge.classList.add("badge", "red");
this.badge.textContent = unseenCount.toString();
element.appendChild(this.badge);
element.classList.add("has-news");
}
}
});