Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-05-21 05:16:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix: correctly handle direct tab navigation with encoded chars (#3172)

Browse Source
This commit is contained in:
shamoon 2024-03-23 23:22:27 -07:00 committed by GitHub
parent e4b4eba445
commit 01a2495e47
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/tab.jsx
View File

@ -3,13 +3,19 @@ import classNames from "classnames";
import { TabContext } from "utils/contexts/tab"; import { TabContext } from "utils/contexts/tab";
export function slugify(tabName) { function slugify(tabName) {
return tabName !== undefined ? encodeURIComponent(tabName.toString().replace(/\s+/g, "-").toLowerCase()) : ""; return tabName.toString().replace(/\s+/g, "-").toLowerCase();
}
export function slugifyAndEncode(tabName) {
return tabName !== undefined ? encodeURIComponent(slugify(tabName)) : "";
} }
export default function Tab({ tab }) { export default function Tab({ tab }) {
const { activeTab, setActiveTab } = useContext(TabContext); const { activeTab, setActiveTab } = useContext(TabContext);
const matchesTab = decodeURI(activeTab) === slugify(tab);
return ( return (
<li <li
key={tab} key={tab}
@ -21,16 +27,14 @@ export default function Tab({ tab }) {
type="button" type="button"
role="tab" role="tab"
aria-controls={`#${tab}`} aria-controls={`#${tab}`}
aria-selected={activeTab === slugify(tab) ? "true" : "false"} aria-selected={matchesTab ? "true" : "false"}
className={classNames( className={classNames(
"w-full rounded-md m-1", "w-full rounded-md m-1",
activeTab === slugify(tab) matchesTab ? "bg-theme-300/20 dark:bg-white/10" : "hover:bg-theme-100/20 dark:hover:bg-white/5",
? "bg-theme-300/20 dark:bg-white/10"
: "hover:bg-theme-100/20 dark:hover:bg-white/5",
)} )}
onClick={() => { onClick={() => {
setActiveTab(slugify(tab)); setActiveTab(slugifyAndEncode(tab));
window.location.hash = `#${slugify(tab)}`; window.location.hash = `#${slugifyAndEncode(tab)}`;
}} }}
> >
{tab} {tab}

8
src/pages/index.jsx
View File

@ -10,7 +10,7 @@ import { BiError } from "react-icons/bi";
import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Tab, { slugify } from "components/tab"; import Tab, { slugifyAndEncode } from "components/tab";
import ServicesGroup from "components/services/group"; import ServicesGroup from "components/services/group";
import BookmarksGroup from "components/bookmarks/group"; import BookmarksGroup from "components/bookmarks/group";
import Widget from "components/widgets/widget"; import Widget from "components/widgets/widget";
@ -258,13 +258,13 @@ function Home({ initialSettings }) {
useEffect(() => { useEffect(() => {
if (!activeTab) { if (!activeTab) {
const initialTab = decodeURI(asPath.substring(asPath.indexOf("#") + 1)); const initialTab = asPath.substring(asPath.indexOf("#") + 1);
setActiveTab(initialTab === "/" ? slugify(tabs["0"]) : initialTab); setActiveTab(initialTab === "/" ? slugifyAndEncode(tabs["0"]) : initialTab);
} }
}); });
const servicesAndBookmarksGroups = useMemo(() => { const servicesAndBookmarksGroups = useMemo(() => {
const tabGroupFilter = (g) => g && [activeTab, ""].includes(slugify(settings.layout?.[g.name]?.tab)); const tabGroupFilter = (g) => g && [activeTab, ""].includes(slugifyAndEncode(settings.layout?.[g.name]?.tab));
const undefinedGroupFilter = (g) => settings.layout?.[g.name] === undefined; const undefinedGroupFilter = (g) => settings.layout?.[g.name] === undefined;
const layoutGroups = Object.keys(settings.layout ?? {}) const layoutGroups = Object.keys(settings.layout ?? {})