Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-04-29 12:03:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix: slugify tab names (#1994)

Browse Source
This commit is contained in:
shamoon 2023-09-15 08:17:57 -07:00 committed by GitHub
parent ec1cf2f3ca
commit 6dc3be6029
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/tab.jsx
View File

@ -3,6 +3,10 @@ import classNames from "classnames";
import { TabContext } from "utils/contexts/tab"; import { TabContext } from "utils/contexts/tab";
export function slugify(tabName) {
return tabName ? encodeURIComponent(tabName.toLowerCase()) : ''
}
export default function Tab({ tab }) { export default function Tab({ tab }) {
const { activeTab, setActiveTab } = useContext(TabContext); const { activeTab, setActiveTab } = useContext(TabContext);
@ -12,12 +16,15 @@ export default function Tab({ tab }) {
"text-theme-700 dark:text-theme-200 relative h-8 w-full rounded-md flex m-1", "text-theme-700 dark:text-theme-200 relative h-8 w-full rounded-md flex m-1",
)}> )}>
<button id={`${tab}-tab`} type="button" role="tab" <button id={`${tab}-tab`} type="button" role="tab"
aria-controls={`#${tab}`} aria-selected={activeTab === tab ? "true" : "false"} aria-controls={`#${tab}`} aria-selected={activeTab === slugify(tab) ? "true" : "false"}
className={classNames( className={classNames(
"h-full w-full rounded-md", "h-full w-full rounded-md",
activeTab === tab ? "bg-theme-300/20 dark:bg-white/10" : "hover:bg-theme-100/20 dark:hover:bg-white/5", activeTab === slugify(tab) ? "bg-theme-300/20 dark:bg-white/10" : "hover:bg-theme-100/20 dark:hover:bg-white/5",
)} )}
onClick={() => { setActiveTab(tab); window.location.hash = `#${tab}`; }} onClick={() => {
setActiveTab(slugify(tab));
window.location.hash = `#${slugify(tab)}`;
}}
>{tab}</button> >{tab}</button>
</li> </li>
); );

4
src/pages/index.jsx
View File

@ -9,7 +9,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 from "components/tab"; import Tab, { slugify } from "components/tab";
import FileContent from "components/filecontent"; import FileContent from "components/filecontent";
import ServicesGroup from "components/services/group"; import ServicesGroup from "components/services/group";
import BookmarksGroup from "components/bookmarks/group"; import BookmarksGroup from "components/bookmarks/group";
@ -256,7 +256,7 @@ function Home({ initialSettings }) {
}) })
const servicesAndBookmarksGroups = useMemo(() => { const servicesAndBookmarksGroups = useMemo(() => {
const tabGroupFilter = g => g && [activeTab, undefined].includes(settings.layout?.[g.name]?.tab); const tabGroupFilter = g => g && [activeTab, undefined].includes(slugify(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 ?? {}).map( const layoutGroups = Object.keys(settings.layout ?? {}).map(