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

Fix categories names with spaces and symbols in them

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

20
src/pages/index.astro
View file

@ -89,11 +89,15 @@ const accentColors = {
}, },
}; };
const pickRandomAccentColor = () => { function makeCssClassName(str: string): string {
return str.toLowerCase().replace(/[^a-z0-9]/g, "-");
}
function pickRandomAccentColor() {
const accentColorsKeys = Object.keys(accentColors); const accentColorsKeys = Object.keys(accentColors);
const index = Math.floor(Math.random() * accentColorsKeys.length); const index = Math.floor(Math.random() * accentColorsKeys.length);
return accentColors[accentColorsKeys[index]]; return accentColors[accentColorsKeys[index]];
}; }
const categoryColors = categories.reduce((acc, category) => { const categoryColors = categories.reduce((acc, category) => {
acc[category] = pickRandomAccentColor(); acc[category] = pickRandomAccentColor();
@ -104,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(#${c}:checked) ~ main ul { #category-picker:has(#${makeCssClassName(c)}:checked) ~ main ul {
> .${c}-item { > .${makeCssClassName(c)}-item {
display: block; display: block;
} }
> *:not(.${c}-item) { > *:not(.${makeCssClassName(c)}-item) {
display: none; display: none;
} }
}`, }`,
@ -165,14 +169,14 @@ const categoriesSelectorCss = categories
<div> <div>
<input <input
type="radio" type="radio"
id={category} id={makeCssClassName(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={category} for={makeCssClassName(category)}
> >
<div <div
class:list={[ class:list={[
@ -193,7 +197,7 @@ const categoriesSelectorCss = categories
feedItems.contents.map((item) => ( feedItems.contents.map((item) => (
<li <li
class:list={[ class:list={[
`${item.category}-item`, `${makeCssClassName(item.category)}-item`,
{ {
[`${STATIC_CATEGORIES.Recent}-item`]: isRecent( [`${STATIC_CATEGORIES.Recent}-item`]: isRecent(
item.pubIsoDate, item.pubIsoDate,