- {!!props.filename && (
-
{props.filename}
+ {(Icon || props.filename) && (
+
+ {Icon && }
+ {props.filename}
+
)}
{children}
diff --git a/src/components/shared/MarkdownRenderer/components/MarkdownSteps.module.scss b/src/components/shared/MarkdownRenderer/components/MarkdownSteps.module.scss
index 4925a455d..1ca453fe4 100644
--- a/src/components/shared/MarkdownRenderer/components/MarkdownSteps.module.scss
+++ b/src/components/shared/MarkdownRenderer/components/MarkdownSteps.module.scss
@@ -1,7 +1,12 @@
.markdown-steps {
+ --steps-border-color: #414141;
+ --steps-number-border: #414141;
+ --steps-number-bg: #121212;
+ --steps-number-color: #fafafa;
+
margin-left: 1rem;
padding-left: 1.5rem;
- border-left: 1px solid #414141;
+ border-left: 1px solid var(--steps-border-color);
counter-reset: step;
h3 {
@@ -21,8 +26,9 @@
width: 33px;
height: 33px;
left: -41px;
- border: 1px solid #414141;
- background-color: #121212;
+ border: 1px solid var(--steps-number-border);
+ background-color: var(--steps-number-bg);
+ color: var(--steps-number-color);
border-radius: 50%;
font-size: 1rem;
font-weight: normal;
@@ -32,3 +38,10 @@
}
}
}
+
+:global(.light) .markdown-steps {
+ --steps-border-color: #e0e0e0;
+ --steps-number-border: #e0e0e0;
+ --steps-number-bg: #ffffff;
+ --steps-number-color: #333333;
+}
diff --git a/src/components/shared/MarkdownRenderer/components/MarkdownTabs.module.scss b/src/components/shared/MarkdownRenderer/components/MarkdownTabs.module.scss
new file mode 100644
index 000000000..f853b6710
--- /dev/null
+++ b/src/components/shared/MarkdownRenderer/components/MarkdownTabs.module.scss
@@ -0,0 +1,56 @@
+.markdown-tabs {
+ --tabs-border-color: #414141;
+ --tabs-bg-color: #1a1a1a;
+ --tabs-text-color: #a0a0a0;
+ --tabs-text-hover-color: #ffffff;
+ --tabs-active-color: #ffffff;
+
+ margin: 1rem 0;
+ border: 1px solid var(--tabs-border-color);
+ border-radius: 0.5rem;
+ overflow: hidden;
+}
+
+.markdown-tabs-list {
+ display: flex;
+ overflow-x: auto;
+ background-color: var(--tabs-bg-color);
+ border-bottom: 1px solid var(--tabs-border-color);
+}
+
+.markdown-tabs-trigger {
+ padding: 0.5rem 1rem;
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: var(--tabs-text-color);
+ background-color: transparent;
+ border: none;
+ border-bottom: 2px solid transparent;
+ cursor: pointer;
+ transition:
+ color 0.2s,
+ border-color 0.2s;
+
+ &:hover {
+ color: var(--tabs-text-hover-color);
+ }
+
+ &.active {
+ color: var(--tabs-active-color);
+ border-bottom-color: var(--tabs-active-color);
+ }
+}
+
+.markdown-tabs-content {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ font-size: 1rem;
+}
+
+:global(.light) .markdown-tabs {
+ --tabs-border-color: #e0e0e0;
+ --tabs-bg-color: #f5f5f5;
+ --tabs-text-color: #666666;
+ --tabs-text-hover-color: #333333;
+ --tabs-active-color: #333333;
+}
diff --git a/src/components/shared/MarkdownRenderer/components/MarkdownTabs.tsx b/src/components/shared/MarkdownRenderer/components/MarkdownTabs.tsx
new file mode 100644
index 000000000..96dc94de5
--- /dev/null
+++ b/src/components/shared/MarkdownRenderer/components/MarkdownTabs.tsx
@@ -0,0 +1,122 @@
+import React, {
+ ReactNode,
+ useState,
+ useCallback,
+ useMemo,
+ useLayoutEffect,
+} from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import styles from "./MarkdownTabs.module.scss";
+
+interface MarkdownTabsProps {
+ children: ReactNode;
+ items?: string[];
+ defaultIndex?: number;
+ groupId?: string;
+ persist?: boolean;
+}
+
+type ChangeListener = (_v: string) => void;
+const listeners = new Map();
+
+export function MarkdownTabs({
+ children,
+ items = [],
+ defaultIndex = 0,
+ groupId,
+ persist = false,
+ ...props
+}: MarkdownTabsProps) {
+ const values = useMemo(() => items.map((item) => toValue(item)), [items]);
+ const [value, setValue] = useState(values[defaultIndex]);
+
+ useLayoutEffect(() => {
+ if (!groupId) return;
+
+ const onUpdate: ChangeListener = (v) => {
+ if (values.includes(v)) setValue(v);
+ };
+
+ const previous = persist
+ ? localStorage.getItem(groupId)
+ : sessionStorage.getItem(groupId);
+
+ if (previous) onUpdate(previous);
+ addChangeListener(groupId, onUpdate);
+ return () => {
+ removeChangeListener(groupId, onUpdate);
+ };
+ }, [groupId, persist, values]);
+
+ const onValueChange = useCallback(
+ (v: string) => {
+ if (groupId) {
+ update(groupId, v, persist);
+ } else {
+ setValue(v);
+ }
+ },
+ [groupId, persist],
+ );
+
+ return (
+
+
+ {values.map((v, i) => (
+
+ {items[i]}
+
+ ))}
+
+ {children}
+
+ );
+}
+
+export function MarkdownTab({
+ value,
+ ...props
+}: TabsPrimitive.TabsContentProps) {
+ return (
+
+ );
+}
+
+function addChangeListener(groupId: string, listener: ChangeListener): void {
+ const list = listeners.get(groupId) ?? [];
+ list.push(listener);
+ listeners.set(groupId, list);
+}
+
+function removeChangeListener(groupId: string, listener: ChangeListener): void {
+ const list = listeners.get(groupId) ?? [];
+ listeners.set(
+ groupId,
+ list.filter((item) => item !== listener),
+ );
+}
+
+function update(groupId: string, v: string, persist: boolean): void {
+ listeners.get(groupId)?.forEach((item) => item(v));
+ if (persist) localStorage.setItem(groupId, v);
+ else sessionStorage.setItem(groupId, v);
+}
+
+function toValue(v: string): string {
+ return v.toLowerCase().replace(/\s/, "-");
+}
diff --git a/src/components/shared/MarkdownRenderer/components/index.ts b/src/components/shared/MarkdownRenderer/components/index.ts
index f487ccfc5..5f519ab0f 100644
--- a/src/components/shared/MarkdownRenderer/components/index.ts
+++ b/src/components/shared/MarkdownRenderer/components/index.ts
@@ -6,4 +6,6 @@ export * from "./MarkdownEmbed";
export * from "./MarkdownPre";
export * from "./MarkdownImage";
export * from "./MarkdownSteps";
+export * from "./MarkdownTabs";
+export * from "./MarkdownAccordion";
export * from "./CopyToClipBoardButton";
diff --git a/src/pages/docs/[[...slug]].tsx b/src/pages/docs/[[...slug]].tsx
index b6e9c8180..ca7f5cf8d 100644
--- a/src/pages/docs/[[...slug]].tsx
+++ b/src/pages/docs/[[...slug]].tsx
@@ -14,8 +14,6 @@ import MarkdownRenderer from "@/components/shared/MarkdownRenderer/MarkdownRende
import Link from "next/link";
import { useRouter } from "next/router";
-import ArrowLeft from "@@/public/src/img/icons/ArrowLeft.inline.svg";
-import GithubIcon from "@@/public/src/img/footer/github.inline.svg";
import DocsNavSidebar from "@/components/developers/DocsNavSidebar";
import { InferGetStaticPropsType } from "next";
import { SidebarToggleButton } from "@/components/developers/DevelopersContentPage/SidebarToggleButton";
@@ -75,19 +73,8 @@ export default function DeveloperDocs({
title={t("shared.general.toc")}
currentPath={router.asPath}
content={record.body}
+ githubPath={record._raw.sourceFilePath}
/>
-
-
-
- {t("shared.general.edit-page")}
-
-