From 453331c629cfb22aed42876a88eb0d2ce16c8f44 Mon Sep 17 00:00:00 2001 From: Mohamed Bassem Date: Sun, 1 Feb 2026 10:44:36 +0000 Subject: docs: replace emojis with icon in category names --- docs/docs/01-getting-started/_category_.json | 2 +- docs/docs/02-installation/_category_.json | 2 +- docs/docs/03-configuration/_category_.json | 2 +- docs/docs/04-using-karakeep/_category_.json | 2 +- docs/docs/05-integrations/_category_.json | 2 +- docs/docs/06-administration/_category_.json | 2 +- docs/docs/07-community/_category_.json | 2 +- docs/docs/08-development/_category_.json | 2 +- docs/docs/api/_category_.json | 2 +- docs/docusaurus.config.ts | 2 +- docs/package.json | 1 + docs/sidebars.ts | 4 +- docs/src/css/custom.css | 1 + docs/src/theme/DocSidebarItem/Category/index.tsx | 270 +++++++++++++++++++++ .../01-getting-started/_category_.json | 2 +- .../02-installation/_category_.json | 2 +- .../03-configuration/_category_.json | 2 +- .../04-using-karakeep/_category_.json | 2 +- .../05-integrations/_category_.json | 2 +- .../06-administration/_category_.json | 2 +- .../version-v0.30.0/07-community/_category_.json | 2 +- .../version-v0.30.0/08-development/_category_.json | 2 +- .../version-v0.30.0/api/_category_.json | 2 +- .../version-v0.30.0-sidebars.json | 2 +- pnpm-lock.yaml | 3 + 25 files changed, 298 insertions(+), 21 deletions(-) create mode 100644 docs/src/theme/DocSidebarItem/Category/index.tsx diff --git a/docs/docs/01-getting-started/_category_.json b/docs/docs/01-getting-started/_category_.json index 4bfa738a..3562d433 100644 --- a/docs/docs/01-getting-started/_category_.json +++ b/docs/docs/01-getting-started/_category_.json @@ -1,4 +1,4 @@ { - "label": "🚀 Getting Started", + "label": "Getting Started", "position": 1 } diff --git a/docs/docs/02-installation/_category_.json b/docs/docs/02-installation/_category_.json index d39d5f24..874082cc 100644 --- a/docs/docs/02-installation/_category_.json +++ b/docs/docs/02-installation/_category_.json @@ -1,4 +1,4 @@ { - "label": "📦 Installation", + "label": "Installation", "position": 3 } diff --git a/docs/docs/03-configuration/_category_.json b/docs/docs/03-configuration/_category_.json index ae9f593e..0aea1748 100644 --- a/docs/docs/03-configuration/_category_.json +++ b/docs/docs/03-configuration/_category_.json @@ -1,4 +1,4 @@ { - "label": "⚙️ Configuration", + "label": "Configuration", "position": 4 } diff --git a/docs/docs/04-using-karakeep/_category_.json b/docs/docs/04-using-karakeep/_category_.json index 95ef28ea..b0784ea6 100644 --- a/docs/docs/04-using-karakeep/_category_.json +++ b/docs/docs/04-using-karakeep/_category_.json @@ -1,4 +1,4 @@ { - "label": "📖 Using Karakeep", + "label": "Using Karakeep", "position": 2 } diff --git a/docs/docs/05-integrations/_category_.json b/docs/docs/05-integrations/_category_.json index e526841b..c2495ffd 100644 --- a/docs/docs/05-integrations/_category_.json +++ b/docs/docs/05-integrations/_category_.json @@ -1,4 +1,4 @@ { - "label": "🔌 Integrations", + "label": "Integrations", "position": 5 } diff --git a/docs/docs/06-administration/_category_.json b/docs/docs/06-administration/_category_.json index 9847810a..8998ac56 100644 --- a/docs/docs/06-administration/_category_.json +++ b/docs/docs/06-administration/_category_.json @@ -1,4 +1,4 @@ { - "label": "🛠️ Administration", + "label": "Administration", "position": 6 } diff --git a/docs/docs/07-community/_category_.json b/docs/docs/07-community/_category_.json index 265fd50d..6fe06d4a 100644 --- a/docs/docs/07-community/_category_.json +++ b/docs/docs/07-community/_category_.json @@ -1,4 +1,4 @@ { - "label": "👥 Community", + "label": "Community", "position": 7 } diff --git a/docs/docs/08-development/_category_.json b/docs/docs/08-development/_category_.json index 5cfb6b1d..3f59497c 100644 --- a/docs/docs/08-development/_category_.json +++ b/docs/docs/08-development/_category_.json @@ -1,4 +1,4 @@ { - "label": "💻 Development", + "label": "Development", "position": 8 } diff --git a/docs/docs/api/_category_.json b/docs/docs/api/_category_.json index b493787e..695d9dbe 100644 --- a/docs/docs/api/_category_.json +++ b/docs/docs/api/_category_.json @@ -1 +1 @@ -{ "label": "🔗 API", "position": 9 } +{ "label": "API", "position": 9 } diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts index 4bbc208d..db857986 100644 --- a/docs/docusaurus.config.ts +++ b/docs/docusaurus.config.ts @@ -42,7 +42,7 @@ const config: Config = { }) => { const sidebarItems = await defaultSidebarItemsGenerator(args); return sidebarItems.filter( - (item) => !(item.type == "category" && item.label === "🔗 API"), + (item) => !(item.type == "category" && item.label === "API"), ); }, editUrl: "https://github.com/karakeep-app/karakeep/tree/main/docs/", diff --git a/docs/package.json b/docs/package.json index d02b5271..713e31fa 100644 --- a/docs/package.json +++ b/docs/package.json @@ -23,6 +23,7 @@ "clsx": "^2.1.0", "docusaurus-plugin-openapi-docs": "^4.3.7", "docusaurus-theme-openapi-docs": "^4.4.0", + "lucide-react": "^0.501.0", "prism-react-renderer": "^2.4.1", "react": "^19.2.1", "react-dom": "^19.2.1", diff --git a/docs/sidebars.ts b/docs/sidebars.ts index 67337c10..9943e513 100644 --- a/docs/sidebars.ts +++ b/docs/sidebars.ts @@ -6,7 +6,9 @@ const sidebars: SidebarsConfig = { sidebar: [ { type: "autogenerated", dirName: "." }, { - "🔗 API": openapiSidebar, + type: "category", + label: "API", + items: openapiSidebar, }, ], }; diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 9cfc2a44..573d7e39 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -593,6 +593,7 @@ li::marker { /* ============================================ API Docs Specific Styles ============================================ */ + .api-method > .menu__link { align-items: center; justify-content: start; diff --git a/docs/src/theme/DocSidebarItem/Category/index.tsx b/docs/src/theme/DocSidebarItem/Category/index.tsx new file mode 100644 index 00000000..9426a026 --- /dev/null +++ b/docs/src/theme/DocSidebarItem/Category/index.tsx @@ -0,0 +1,270 @@ +import React, { + type ComponentProps, + type ReactNode, + useEffect, + useMemo, +} from 'react'; +import clsx from 'clsx'; +import { + ThemeClassNames, + useThemeConfig, + usePrevious, + Collapsible, + useCollapsible, +} from '@docusaurus/theme-common'; +import {isSamePath} from '@docusaurus/theme-common/internal'; +import { + isActiveSidebarItem, + findFirstSidebarItemLink, + useDocSidebarItemsExpandedState, +} from '@docusaurus/plugin-content-docs/client'; +import Link from '@docusaurus/Link'; +import {translate} from '@docusaurus/Translate'; +import useIsBrowser from '@docusaurus/useIsBrowser'; +import DocSidebarItems from '@theme/DocSidebarItems'; +import type {Props} from '@theme/DocSidebarItem/Category'; +import { + Rocket, + Package, + Settings, + BookOpen, + Plug, + Wrench, + Users, + Code, + type LucideIcon, +} from 'lucide-react'; + +// Map category labels to Lucide icons +const categoryIcons: Record = { + 'Getting Started': Rocket, + 'Installation': Package, + 'Configuration': Settings, + 'Using Karakeep': BookOpen, + 'Integrations': Plug, + 'Administration': Wrench, + 'Community': Users, + 'Development': Code, + 'API': Code, +}; + +// If we navigate to a category and it becomes active, it should automatically +// expand itself +function useAutoExpandActiveCategory({ + isActive, + collapsed, + updateCollapsed, +}: { + isActive: boolean; + collapsed: boolean; + updateCollapsed: (b: boolean) => void; +}) { + const wasActive = usePrevious(isActive); + useEffect(() => { + const justBecameActive = isActive && !wasActive; + if (justBecameActive && collapsed) { + updateCollapsed(false); + } + }, [isActive, wasActive, collapsed, updateCollapsed]); +} + +/** + * When a collapsible category has no link, we still link it to its first child + * during SSR as a temporary fallback. This allows to be able to navigate inside + * the category even when JS fails to load, is delayed or simply disabled + * React hydration becomes an optional progressive enhancement + * see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188 + * see https://github.com/facebook/docusaurus/issues/3030 + */ +function useCategoryHrefWithSSRFallback( + item: Props['item'], +): string | undefined { + const isBrowser = useIsBrowser(); + return useMemo(() => { + if (item.href && !item.linkUnlisted) { + return item.href; + } + // In these cases, it's not necessary to render a fallback + // We skip the "findFirstCategoryLink" computation + if (isBrowser || !item.collapsible) { + return undefined; + } + return findFirstSidebarItemLink(item); + }, [item, isBrowser]); +} + +function CollapseButton({ + collapsed, + categoryLabel, + onClick, +}: { + collapsed: boolean; + categoryLabel: string; + onClick: ComponentProps<'button'>['onClick']; +}) { + return ( +