From 06379a9982e53ee1475fe2b50ada42529371c7d6 Mon Sep 17 00:00:00 2001 From: Aniket Katkar Date: Tue, 18 Feb 2025 15:54:11 +0530 Subject: [PATCH] Added conditional content tags to conditionally render collate and OSS only content (#357) * Added conditional content tags to conditionally render collate and oss only content * Add readme docs for the new tags --- README.md | 34 +++++++++++++++++++ .../ConditionalContent/CollateContent.tsx | 14 ++++++++ components/ConditionalContent/OSSContent.tsx | 14 ++++++++ lib/markdoc.ts | 24 +++++++------ .../collateContent.markdoc.ts | 3 ++ .../ConditionalContent/ossContent.markdoc.ts | 3 ++ markdoc/tags/index.ts | 16 +++++---- 7 files changed, 91 insertions(+), 17 deletions(-) create mode 100644 components/ConditionalContent/CollateContent.tsx create mode 100644 components/ConditionalContent/OSSContent.tsx create mode 100644 markdoc/tags/ConditionalContent/collateContent.markdoc.ts create mode 100644 markdoc/tags/ConditionalContent/ossContent.markdoc.ts diff --git a/README.md b/README.md index 636a45bd1..9ab43cfee 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,9 @@ Here are the custom markdoc tags to use for desired functionalities. - [5. connectorDetailsHeader](#5-connectorDetailsHeader) - [6. connectorInfoCard](#6-connectorInfoCard) - [7. connectorsListContainer](#7-connectorsListContainer) +- [Conditional Content](#conditional-content) + - [1. collateContent](#1-collateContent) + - [2. ossContent](#2-ossContent) - [Tags for Code Preview Functionality](#tags-for-code-preview-functionality) - [1. codePreview](#1-codePreview) - [2. codeInfoContainer](#2-codeInfoContainer) @@ -284,6 +287,37 @@ A wrapper tag to envelope the connectorInfoCard tags for a grid view. --- +## Conditional Content + +- [1. collateContent](#1-collateContent) +- [2. ossContent](#2-ossContent) + +### 1. collateContent + +A tag to conditionally render content only on collate documentation. + +### 2. ossContent + +A tag to conditionally render content only on open source documentation. + +Example: + +This is {% collateContent %}Collate{% /collateContent %}{% ossContent %}OSS{% /ossContent %} documentation. + +**The above content will be shown on collate documentation as:** + +``` +This is Collate documentation. +``` + +**And will be shown on open source documentation as:** + +``` +This is OSS documentation. +``` + +--- + ## Tags for Code Preview Functionality For showing code or commands with the explanations by side use following tags:- diff --git a/components/ConditionalContent/CollateContent.tsx b/components/ConditionalContent/CollateContent.tsx new file mode 100644 index 000000000..b6d387ba5 --- /dev/null +++ b/components/ConditionalContent/CollateContent.tsx @@ -0,0 +1,14 @@ +import { ReactNode } from "react"; +import { useDocVersionContext } from "../../context/DocVersionContext"; + +function CollateContent({ children }: { children: ReactNode }) { + const { enableVersion } = useDocVersionContext(); + + if (enableVersion) { + return null; + } + + return <>{children}; +} + +export default CollateContent; diff --git a/components/ConditionalContent/OSSContent.tsx b/components/ConditionalContent/OSSContent.tsx new file mode 100644 index 000000000..593537093 --- /dev/null +++ b/components/ConditionalContent/OSSContent.tsx @@ -0,0 +1,14 @@ +import { ReactNode } from "react"; +import { useDocVersionContext } from "../../context/DocVersionContext"; + +function OSSContent({ children }: { children: ReactNode }) { + const { enableVersion } = useDocVersionContext(); + + if (!enableVersion) { + return null; + } + + return <>{children}; +} + +export default OSSContent; diff --git a/lib/markdoc.ts b/lib/markdoc.ts index 5e377821b..d99353f22 100644 --- a/lib/markdoc.ts +++ b/lib/markdoc.ts @@ -8,16 +8,6 @@ import CodeInfo from "../components/CodePreview/CodeInfo/CodeInfo"; import CodeInfoContainer from "../components/CodePreview/CodeInfoContainer/CodeInfoContainer"; import CodePreview from "../components/CodePreview/CodePreview"; import CodeWithLanguageSelector from "../components/CodeWithLanguageSelector/CodeWithLanguageSelector"; -import ConnectorDetailsHeader from "../components/ConnectorDetailsHeader/ConnectorDetailsHeader"; -import ConnectorInfoCard from "../components/ConnectorInfoCard/ConnectorInfoCard"; -import ConnectorsListContainer from "../components/ConnectorsListContainer/ConnectorsListContainer"; -import ExtraContent from "../components/ExtraContent/ExtraContent"; -import { Heading } from "../components/Heading/Heading"; -import Roadmap from "../components/Roadmap/Roadmap"; -import Step from "../components/Steps/Step/Step"; -import StepDescription from "../components/Steps/Step/StepDescription/StepDescription"; -import StepVisualInfo from "../components/Steps/Step/StepVisualInfo/StepVisualInfo"; -import StepsContainer from "../components/Steps/StepsContainer/StepsContainer"; import Code from "../components/common/Code/Code"; import InlineCode from "../components/common/Code/InlineCode"; import CustomAnchorNode from "../components/common/CustomAnchorNode/CustomAnchorNode"; @@ -32,6 +22,18 @@ import Table from "../components/common/Table/Table"; import Tile from "../components/common/Tiles/Tile/Tile"; import TilesContainer from "../components/common/Tiles/TilesContainer/TilesContainer"; import YouTube from "../components/common/Youtube/Youtube"; +import CollateContent from "../components/ConditionalContent/CollateContent"; +import OSSContent from "../components/ConditionalContent/OSSContent"; +import ConnectorDetailsHeader from "../components/ConnectorDetailsHeader/ConnectorDetailsHeader"; +import ConnectorInfoCard from "../components/ConnectorInfoCard/ConnectorInfoCard"; +import ConnectorsListContainer from "../components/ConnectorsListContainer/ConnectorsListContainer"; +import ExtraContent from "../components/ExtraContent/ExtraContent"; +import { Heading } from "../components/Heading/Heading"; +import Roadmap from "../components/Roadmap/Roadmap"; +import Step from "../components/Steps/Step/Step"; +import StepDescription from "../components/Steps/Step/StepDescription/StepDescription"; +import StepVisualInfo from "../components/Steps/Step/StepVisualInfo/StepVisualInfo"; +import StepsContainer from "../components/Steps/StepsContainer/StepsContainer"; import * as allFunctions from "../markdoc/functions"; import * as allNodes from "../markdoc/nodes"; import * as allTags from "../markdoc/tags"; @@ -74,6 +76,8 @@ export const components = { ConnectorsListContainer, ConnectorDetailsHeader, Roadmap, + CollateContent, + OSSContent, }; export const configs: Config = { diff --git a/markdoc/tags/ConditionalContent/collateContent.markdoc.ts b/markdoc/tags/ConditionalContent/collateContent.markdoc.ts new file mode 100644 index 000000000..3807f23ca --- /dev/null +++ b/markdoc/tags/ConditionalContent/collateContent.markdoc.ts @@ -0,0 +1,3 @@ +export const collateContent = { + render: "CollateContent", +}; diff --git a/markdoc/tags/ConditionalContent/ossContent.markdoc.ts b/markdoc/tags/ConditionalContent/ossContent.markdoc.ts new file mode 100644 index 000000000..d844fbfd3 --- /dev/null +++ b/markdoc/tags/ConditionalContent/ossContent.markdoc.ts @@ -0,0 +1,3 @@ +export const ossContent = { + render: "OSSContent", +}; diff --git a/markdoc/tags/index.ts b/markdoc/tags/index.ts index 1a22726a1..890b96d9e 100644 --- a/markdoc/tags/index.ts +++ b/markdoc/tags/index.ts @@ -3,18 +3,13 @@ export * from "./APIInfoContainer/apiDescription/apiDescription.markdoc"; export * from "./APIInfoContainer/apiInfoContainer.markdoc"; export * from "./APIInfoContainer/apiPageContainer.markdoc"; export * from "./APIInfoContainer/apiVisualInfo/apiVisualInfo.markdoc"; -export * from "./Steps/ExtraContent/extraContent.markdoc"; -export * from "./Steps/Step/StepDescription/stepDescription.markdoc"; -export * from "./Steps/Step/StepVisualInfo/stepVisualInfo.markdoc"; -export * from "./Steps/Step/step.markdoc"; -export * from "./Steps/StepsContainer/stepsContainer.markdoc"; -export * from "./Tiles/Tile/tile.markdoc"; -export * from "./Tiles/TilesContainer/tilesContainer.markdoc"; export * from "./codePreview/codeBlock.markdoc"; export * from "./codePreview/codeInfo.markdoc"; export * from "./codePreview/codeInfoContainer.markdoc"; export * from "./codePreview/codePreview.markdoc"; export * from "./codeWithLanguageSelector/codeWithLanguageSelector.markdoc"; +export * from "./ConditionalContent/collateContent.markdoc"; +export * from "./ConditionalContent/ossContent.markdoc"; export * from "./connectorDetailsHeader.markdoc"; export * from "./connectorInfoCard.markdoc"; export * from "./connectorsListContainer.markdoc"; @@ -26,5 +21,12 @@ export * from "./inlineCalloutContainer.markdoc"; export * from "./multiTablesWrapper.markdoc"; export * from "./note.markdoc"; export * from "./roadmap.markdoc"; +export * from "./Steps/ExtraContent/extraContent.markdoc"; +export * from "./Steps/Step/step.markdoc"; +export * from "./Steps/Step/StepDescription/stepDescription.markdoc"; +export * from "./Steps/Step/StepVisualInfo/stepVisualInfo.markdoc"; +export * from "./Steps/StepsContainer/stepsContainer.markdoc"; +export * from "./Tiles/Tile/tile.markdoc"; +export * from "./Tiles/TilesContainer/tilesContainer.markdoc"; export * from "./youtube.markdoc";