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

Fix recent class name filtering

Browse source
This commit is contained in:
Carter McBride 2024-08-23 16:24:04 -06:00
parent 50823a0206
commit 80f4497d16
1 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/pages/index.astro
View file

@ -89,7 +89,7 @@ const accentColors = {
}, },
}; };
function makeCssClassName(str: string): string { function cssAttribute(str: string): string {
return str.toLowerCase().replace(/[^a-z0-9]/g, "-"); return str.toLowerCase().replace(/[^a-z0-9]/g, "-");
} }
@ -108,11 +108,11 @@ const categoriesSelectorCss = categories
.filter((c) => c !== STATIC_CATEGORIES.All) .filter((c) => c !== STATIC_CATEGORIES.All)
.map( .map(
(c) => ` (c) => `
#category-picker:has(#${makeCssClassName(c)}:checked) ~ main ul { #category-picker:has(#${cssAttribute(c)}:checked) ~ main ul {
> .${makeCssClassName(c)}-item { > .${cssAttribute(c)}-item {
display: block; display: block;
} }
> *:not(.${makeCssClassName(c)}-item) { > *:not(.${cssAttribute(c)}-item) {
display: none; display: none;
} }
}`, }`,
@ -169,14 +169,14 @@ const categoriesSelectorCss = categories
<div> <div>
<input <input
type="radio" type="radio"
id={makeCssClassName(category)} id={cssAttribute(category)}
name="category" name="category"
class="hidden peer" class="hidden peer"
checked={category === STATIC_CATEGORIES.Recent} checked={category === STATIC_CATEGORIES.Recent}
/> />
<label <label
class="cursor-pointer transition-all opacity-25 peer-checked:opacity-100 hover:opacity-100 flex flex-row gap-2 items-center" class="cursor-pointer transition-all opacity-25 peer-checked:opacity-100 hover:opacity-100 flex flex-row gap-2 items-center"
for={makeCssClassName(category)} for={cssAttribute(category)}
> >
<div <div
class:list={[ class:list={[
@ -197,9 +197,9 @@ const categoriesSelectorCss = categories
feedItems.contents.map((item) => ( feedItems.contents.map((item) => (
<li <li
class:list={[ class:list={[
`${makeCssClassName(item.category)}-item`, `${cssAttribute(item.category)}-item`,
{ {
[`${STATIC_CATEGORIES.Recent}-item`]: isRecent( [`${cssAttribute(STATIC_CATEGORIES.Recent)}-item`]: isRecent(
item.pubIsoDate, item.pubIsoDate,
), ),
}, },