From 416e10b631badbf3a0210a4896e230e7d842299a Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 9 Sep 2025 14:02:47 +0200 Subject: [PATCH 1/8] feat: Ask AI Signed-off-by: David Dal Busco --- src/components/AskAi/index.tsx | 13 +++ src/components/AskAi/styles.module.scss | 7 ++ src/theme/DocBreadcrumbs/index.tsx | 99 ++++++++++++++++++++++ src/theme/DocBreadcrumbs/styles.module.css | 9 ++ 4 files changed, 128 insertions(+) create mode 100644 src/components/AskAi/index.tsx create mode 100644 src/components/AskAi/styles.module.scss create mode 100644 src/theme/DocBreadcrumbs/index.tsx create mode 100644 src/theme/DocBreadcrumbs/styles.module.css diff --git a/src/components/AskAi/index.tsx b/src/components/AskAi/index.tsx new file mode 100644 index 00000000..d6299a55 --- /dev/null +++ b/src/components/AskAi/index.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import styles from "./styles.module.scss"; + +export const AskAi = () => { + + return
+ + +
    +
  • asdkns
    • +
+
+} \ No newline at end of file diff --git a/src/components/AskAi/styles.module.scss b/src/components/AskAi/styles.module.scss new file mode 100644 index 00000000..d01526ba --- /dev/null +++ b/src/components/AskAi/styles.module.scss @@ -0,0 +1,7 @@ +.btn { + border: 1px solid var(--ifm-toc-border-color); + + &:hover, &:active { + border: 1px solid var(--ifm-navbar-link-hover-color); + } +} \ No newline at end of file diff --git a/src/theme/DocBreadcrumbs/index.tsx b/src/theme/DocBreadcrumbs/index.tsx new file mode 100644 index 00000000..374cb98b --- /dev/null +++ b/src/theme/DocBreadcrumbs/index.tsx @@ -0,0 +1,99 @@ +import React, {type ReactNode} from 'react'; +import clsx from 'clsx'; +import {ThemeClassNames} from '@docusaurus/theme-common'; +import {useSidebarBreadcrumbs} from '@docusaurus/plugin-content-docs/client'; +import {useHomePageRoute} from '@docusaurus/theme-common/internal'; +import Link from '@docusaurus/Link'; +import {translate} from '@docusaurus/Translate'; +import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home'; +import DocBreadcrumbsStructuredData from '@theme/DocBreadcrumbs/StructuredData'; + +import styles from './styles.module.css'; +import { AskAi } from "@site/src/components/AskAi"; + +// 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..df0c4cbd --- /dev/null +++ b/src/theme/DocBreadcrumbs/styles.module.css @@ -0,0 +1,9 @@ +.breadcrumbsContainer { + --ifm-breadcrumb-size-multiplier: 0.8; + margin-bottom: 0.8rem; +} + +.customBreadcrumbs { + display: flex; + justify-content: space-between; +} From 55f6c85bdb894fdc30711aed7c7b14d04870b3ea Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 9 Sep 2025 14:38:11 +0200 Subject: [PATCH 2/8] feat: markdown style link Signed-off-by: David Dal Busco --- src/components/AskAi/index.tsx | 46 ++++++++++++++++++++----- src/components/AskAi/styles.module.scss | 20 +++++++++-- static/icons/markdown.svg | 1 + 3 files changed, 56 insertions(+), 11 deletions(-) create mode 100644 static/icons/markdown.svg diff --git a/src/components/AskAi/index.tsx b/src/components/AskAi/index.tsx index d6299a55..522a1cb7 100644 --- a/src/components/AskAi/index.tsx +++ b/src/components/AskAi/index.tsx @@ -1,13 +1,41 @@ -import React from "react"; import styles from "./styles.module.scss"; +import IconMarkdown from "@site/static/icons/markdown.svg"; -export const AskAi = () => { +const AskAiLink = ({ icon, text, link, description }) => { + return ( +
  • + + + {icon} + {text} + + {description} + +
    • + ); +}; - return
    - +export const AskAi = () => { + return ( +
    + -
      -
    • asdkns
      • -
    -
    -} \ No newline at end of file +
      + } + link="/something" + text="View as Markdown" + description="Open this page in Markdown" + /> +
    +
    + ); +}; diff --git a/src/components/AskAi/styles.module.scss b/src/components/AskAi/styles.module.scss index d01526ba..ef7fbbe2 100644 --- a/src/components/AskAi/styles.module.scss +++ b/src/components/AskAi/styles.module.scss @@ -1,7 +1,23 @@ .btn { border: 1px solid var(--ifm-toc-border-color); - &:hover, &:active { + &:hover, + &:active { border: 1px solid var(--ifm-navbar-link-hover-color); } -} \ No newline at end of file +} + +.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); +} + + 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 From 5e1b7eeb2df0a55cecf79f54433da36ab3590ad6 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 9 Sep 2025 15:21:04 +0200 Subject: [PATCH 3/8] feat: build markdown link Signed-off-by: David Dal Busco --- src/components/AskAi/index.tsx | 30 ++++++++++++++++++++++-------- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/src/components/AskAi/index.tsx b/src/components/AskAi/index.tsx index 522a1cb7..680739d1 100644 --- a/src/components/AskAi/index.tsx +++ b/src/components/AskAi/index.tsx @@ -1,10 +1,16 @@ -import styles from "./styles.module.scss"; +import { useLocation } from "@docusaurus/router"; import IconMarkdown from "@site/static/icons/markdown.svg"; +import styles from "./styles.module.scss"; const AskAiLink = ({ icon, text, link, description }) => { return (
  • - + {icon} {text} @@ -16,6 +22,12 @@ const AskAiLink = ({ icon, text, link, description }) => { }; export const AskAi = () => { + const { pathname } = useLocation(); + + const markdownLink = pathname.includes("/category/") + ? undefined + : `${pathname}.md`; + return (
    {
      - } - link="/something" - text="View as Markdown" - description="Open this page in Markdown" - /> + {markdownLink !== undefined && ( + } + link={markdownLink} + text="View as Markdown" + description="Open this page in Markdown" + /> + )}
    ); From c7840c7175a88350e8652ab5779e779f0066d4a4 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 9 Sep 2025 15:40:00 +0200 Subject: [PATCH 4/8] feat: link to claude Signed-off-by: David Dal Busco --- src/components/AskAi/index.tsx | 38 ++++++++++++++++++++++++---------- static/icons/claude.svg | 5 +++++ 2 files changed, 32 insertions(+), 11 deletions(-) create mode 100644 static/icons/claude.svg diff --git a/src/components/AskAi/index.tsx b/src/components/AskAi/index.tsx index 680739d1..67c51404 100644 --- a/src/components/AskAi/index.tsx +++ b/src/components/AskAi/index.tsx @@ -1,5 +1,7 @@ import { useLocation } from "@docusaurus/router"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import IconMarkdown from "@site/static/icons/markdown.svg"; +import IconClaude from "@site/static/icons/claude.svg"; import styles from "./styles.module.scss"; const AskAiLink = ({ icon, text, link, description }) => { @@ -24,9 +26,18 @@ const AskAiLink = ({ icon, text, link, description }) => { export const AskAi = () => { const { pathname } = useLocation(); - const markdownLink = pathname.includes("/category/") - ? undefined - : `${pathname}.md`; + const isCategory = pathname.includes("/category/"); + + if (isCategory) { + return <>; + } + + const { + siteConfig: { url } + } = useDocusaurusContext(); + + const markdownLink = `${pathname}.md`; + const claudeLink = `https://claude.ai/new?q=${encodeURIComponent(`Read from this URL: ${url}${pathname}`)}`; return (
    @@ -41,14 +52,19 @@ export const AskAi = () => {
      - {markdownLink !== undefined && ( - } - link={markdownLink} - text="View as Markdown" - description="Open this page in Markdown" - /> - )} + } + link={markdownLink} + text="View as Markdown" + description="Open this page in Markdown" + /> + + } + link={claudeLink} + text="Open in Claude" + description="Ask questions about this page" + />
    ); diff --git a/static/icons/claude.svg b/static/icons/claude.svg new file mode 100644 index 00000000..c14dca14 --- /dev/null +++ b/static/icons/claude.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file From 602dd5e01513255ccd4ae464452bc09d2446f706 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 9 Sep 2025 15:43:31 +0200 Subject: [PATCH 5/8] feat: chatgpt link Signed-off-by: David Dal Busco --- src/components/AskAi/index.tsx | 13 ++++++++++++- static/icons/openai.svg | 15 +++++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 static/icons/openai.svg diff --git a/src/components/AskAi/index.tsx b/src/components/AskAi/index.tsx index 67c51404..1e0241fa 100644 --- a/src/components/AskAi/index.tsx +++ b/src/components/AskAi/index.tsx @@ -2,6 +2,7 @@ import { useLocation } from "@docusaurus/router"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import IconMarkdown from "@site/static/icons/markdown.svg"; import IconClaude from "@site/static/icons/claude.svg"; +import IconOpenAI from "@site/static/icons/openai.svg"; import styles from "./styles.module.scss"; const AskAiLink = ({ icon, text, link, description }) => { @@ -37,7 +38,10 @@ export const AskAi = () => { } = useDocusaurusContext(); const markdownLink = `${pathname}.md`; - const claudeLink = `https://claude.ai/new?q=${encodeURIComponent(`Read from this URL: ${url}${pathname}`)}`; + + 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 (
    @@ -65,6 +69,13 @@ export const AskAi = () => { text="Open in Claude" description="Ask questions about this page" /> + + } + link={chatGPTLink} + text="Open in ChatGPT" + description="Ask questions about this page" + />
    ); diff --git a/static/icons/openai.svg b/static/icons/openai.svg new file mode 100644 index 00000000..8f35e628 --- /dev/null +++ b/static/icons/openai.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + From 7dbaf7183cce27dc570d2c14db745dad8cddd4d7 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 9 Sep 2025 15:54:13 +0200 Subject: [PATCH 6/8] style: break points Signed-off-by: David Dal Busco --- src/components/AskAi/styles.module.scss | 6 ++++++ src/theme/DocBreadcrumbs/styles.module.css | 6 ++++-- static/icons/claude.svg | 2 +- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/AskAi/styles.module.scss b/src/components/AskAi/styles.module.scss index ef7fbbe2..99b7c59f 100644 --- a/src/components/AskAi/styles.module.scss +++ b/src/components/AskAi/styles.module.scss @@ -1,10 +1,15 @@ .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 { @@ -18,6 +23,7 @@ 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/styles.module.css b/src/theme/DocBreadcrumbs/styles.module.css index df0c4cbd..4fc92198 100644 --- a/src/theme/DocBreadcrumbs/styles.module.css +++ b/src/theme/DocBreadcrumbs/styles.module.css @@ -4,6 +4,8 @@ } .customBreadcrumbs { - display: flex; - justify-content: space-between; + @media screen and (min-width: 997px) { + display: flex; + justify-content: space-between; + } } diff --git a/static/icons/claude.svg b/static/icons/claude.svg index c14dca14..6712fd93 100644 --- a/static/icons/claude.svg +++ b/static/icons/claude.svg @@ -1,4 +1,4 @@ - + From b47ca0eea077eae777705136ac262c812b3fb072 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 9 Sep 2025 15:56:04 +0200 Subject: [PATCH 7/8] fix: dark mode color Signed-off-by: David Dal Busco --- static/icons/openai.svg | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/static/icons/openai.svg b/static/icons/openai.svg index 8f35e628..b64cdac7 100644 --- a/static/icons/openai.svg +++ b/static/icons/openai.svg @@ -1,15 +1,3 @@ - - - - - - - - - - - - - - - + + + \ No newline at end of file From f7a44c40778c462e6ae408f270312f8880347edb Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 9 Sep 2025 15:56:56 +0200 Subject: [PATCH 8/8] chore: fmt Signed-off-by: David Dal Busco --- src/components/AskAi/index.tsx | 2 +- src/components/AskAi/styles.module.scss | 2 - src/theme/DocBreadcrumbs/index.tsx | 46 +++++++++++----------- src/theme/DocBreadcrumbs/styles.module.css | 8 ++-- 4 files changed, 29 insertions(+), 29 deletions(-) diff --git a/src/components/AskAi/index.tsx b/src/components/AskAi/index.tsx index 1e0241fa..d126d6c8 100644 --- a/src/components/AskAi/index.tsx +++ b/src/components/AskAi/index.tsx @@ -1,7 +1,7 @@ import { useLocation } from "@docusaurus/router"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; -import IconMarkdown from "@site/static/icons/markdown.svg"; 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"; diff --git a/src/components/AskAi/styles.module.scss b/src/components/AskAi/styles.module.scss index 99b7c59f..feaa88d7 100644 --- a/src/components/AskAi/styles.module.scss +++ b/src/components/AskAi/styles.module.scss @@ -25,5 +25,3 @@ color: var(--ifm-color-emphasis-600); line-height: 1.6; } - - diff --git a/src/theme/DocBreadcrumbs/index.tsx b/src/theme/DocBreadcrumbs/index.tsx index 374cb98b..b344d166 100644 --- a/src/theme/DocBreadcrumbs/index.tsx +++ b/src/theme/DocBreadcrumbs/index.tsx @@ -1,27 +1,27 @@ -import React, {type ReactNode} from 'react'; -import clsx from 'clsx'; -import {ThemeClassNames} from '@docusaurus/theme-common'; -import {useSidebarBreadcrumbs} from '@docusaurus/plugin-content-docs/client'; -import {useHomePageRoute} from '@docusaurus/theme-common/internal'; -import Link from '@docusaurus/Link'; -import {translate} from '@docusaurus/Translate'; -import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home'; -import DocBreadcrumbsStructuredData from '@theme/DocBreadcrumbs/StructuredData'; +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 styles from './styles.module.css'; import { AskAi } from "@site/src/components/AskAi"; +import styles from "./styles.module.css"; // TODO move to design system folder function BreadcrumbsItemLink({ children, href, - isLast, + isLast }: { children: ReactNode; href: string | undefined; isLast: boolean; }): ReactNode { - const className = 'breadcrumbs__link'; + const className = "breadcrumbs__link"; if (isLast) { return {children}; } @@ -37,16 +37,17 @@ function BreadcrumbsItemLink({ // TODO move to design system folder function BreadcrumbsItem({ children, - active, + active }: { children: ReactNode; active?: boolean; }): ReactNode { return (
  • + className={clsx("breadcrumbs__item", { + "breadcrumbs__item--active": active + })} + > {children}
    • ); @@ -70,16 +71,17 @@ export default function DocBreadcrumbs(): ReactNode { styles.customBreadcrumbs )} aria-label={translate({ - id: 'theme.docs.breadcrumbs.navAriaLabel', - message: 'Breadcrumbs', - description: 'The ARIA label for the breadcrumbs', - })}> + id: "theme.docs.breadcrumbs.navAriaLabel", + message: "Breadcrumbs", + description: "The ARIA label for the breadcrumbs" + })} + >
      {homePageRoute && } {breadcrumbs.map((item, idx) => { const isLast = idx === breadcrumbs.length - 1; const href = - item.type === 'category' && item.linkUnlisted + item.type === "category" && item.linkUnlisted ? undefined : item.href; return ( @@ -95,5 +97,5 @@ export default function DocBreadcrumbs(): ReactNode { -); + ); } diff --git a/src/theme/DocBreadcrumbs/styles.module.css b/src/theme/DocBreadcrumbs/styles.module.css index 4fc92198..813d474f 100644 --- a/src/theme/DocBreadcrumbs/styles.module.css +++ b/src/theme/DocBreadcrumbs/styles.module.css @@ -4,8 +4,8 @@ } .customBreadcrumbs { - @media screen and (min-width: 997px) { - display: flex; - justify-content: space-between; - } + @media screen and (min-width: 997px) { + display: flex; + justify-content: space-between; + } }