diff --git a/src/components/AskAi/index.tsx b/src/components/AskAi/index.tsx new file mode 100644 index 00000000..d126d6c8 --- /dev/null +++ b/src/components/AskAi/index.tsx @@ -0,0 +1,82 @@ +import { useLocation } from "@docusaurus/router"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import IconClaude from "@site/static/icons/claude.svg"; +import IconMarkdown from "@site/static/icons/markdown.svg"; +import IconOpenAI from "@site/static/icons/openai.svg"; +import styles from "./styles.module.scss"; + +const AskAiLink = ({ icon, text, link, description }) => { + return ( +
  • + + + {icon} + {text} + + {description} + +
    • + ); +}; + +export const AskAi = () => { + const { pathname } = useLocation(); + + const isCategory = pathname.includes("/category/"); + + if (isCategory) { + return <>; + } + + const { + siteConfig: { url } + } = useDocusaurusContext(); + + const markdownLink = `${pathname}.md`; + + const prompt = encodeURIComponent(`Read from this URL: ${url}${pathname}`); + const claudeLink = `https://claude.ai/new?q=${prompt}`; + const chatGPTLink = `https://chatgpt.com/?prompt=${prompt}`; + + return ( +
    + + + +
    + ); +}; diff --git a/src/components/AskAi/styles.module.scss b/src/components/AskAi/styles.module.scss new file mode 100644 index 00000000..feaa88d7 --- /dev/null +++ b/src/components/AskAi/styles.module.scss @@ -0,0 +1,27 @@ +.btn { + margin: 0.45rem 0; + border: 1px solid var(--ifm-toc-border-color); + + &:hover, + &:active { + border: 1px solid var(--ifm-navbar-link-hover-color); + } + + @media screen and (min-width: 997px) { + margin: 0; + } +} + +.link { + display: flex; + align-items: center; + gap: 0.45rem; + font-size: calc(1rem * var(--ifm-breadcrumb-size-multiplier)); +} + +.linkDescription { + display: block; + font-size: calc(1rem * var(--ifm-breadcrumb-size-multiplier)); + color: var(--ifm-color-emphasis-600); + line-height: 1.6; +} diff --git a/src/theme/DocBreadcrumbs/index.tsx b/src/theme/DocBreadcrumbs/index.tsx new file mode 100644 index 00000000..b344d166 --- /dev/null +++ b/src/theme/DocBreadcrumbs/index.tsx @@ -0,0 +1,101 @@ +import Link from "@docusaurus/Link"; +import { useSidebarBreadcrumbs } from "@docusaurus/plugin-content-docs/client"; +import { ThemeClassNames } from "@docusaurus/theme-common"; +import { useHomePageRoute } from "@docusaurus/theme-common/internal"; +import { translate } from "@docusaurus/Translate"; +import HomeBreadcrumbItem from "@theme/DocBreadcrumbs/Items/Home"; +import DocBreadcrumbsStructuredData from "@theme/DocBreadcrumbs/StructuredData"; +import clsx from "clsx"; +import { type ReactNode } from "react"; + +import { AskAi } from "@site/src/components/AskAi"; +import styles from "./styles.module.css"; + +// TODO move to design system folder +function BreadcrumbsItemLink({ + children, + href, + isLast +}: { + children: ReactNode; + href: string | undefined; + isLast: boolean; +}): ReactNode { + const className = "breadcrumbs__link"; + if (isLast) { + return {children}; + } + return href ? ( + + {children} + + ) : ( + {children} + ); +} + +// TODO move to design system folder +function BreadcrumbsItem({ + children, + active +}: { + children: ReactNode; + active?: boolean; +}): ReactNode { + return ( +
  • + {children} +
    • + ); +} + +export default function DocBreadcrumbs(): ReactNode { + const breadcrumbs = useSidebarBreadcrumbs(); + const homePageRoute = useHomePageRoute(); + + if (!breadcrumbs) { + return null; + } + + return ( + <> + + + + ); +} diff --git a/src/theme/DocBreadcrumbs/styles.module.css b/src/theme/DocBreadcrumbs/styles.module.css new file mode 100644 index 00000000..813d474f --- /dev/null +++ b/src/theme/DocBreadcrumbs/styles.module.css @@ -0,0 +1,11 @@ +.breadcrumbsContainer { + --ifm-breadcrumb-size-multiplier: 0.8; + margin-bottom: 0.8rem; +} + +.customBreadcrumbs { + @media screen and (min-width: 997px) { + display: flex; + justify-content: space-between; + } +} diff --git a/static/icons/claude.svg b/static/icons/claude.svg new file mode 100644 index 00000000..6712fd93 --- /dev/null +++ b/static/icons/claude.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/static/icons/markdown.svg b/static/icons/markdown.svg new file mode 100644 index 00000000..81cead8c --- /dev/null +++ b/static/icons/markdown.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/openai.svg b/static/icons/openai.svg new file mode 100644 index 00000000..b64cdac7 --- /dev/null +++ b/static/icons/openai.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file