diff --git a/content/docs/README.md b/content/docs/README.md index d17bd2f8b9..89232ab723 100644 --- a/content/docs/README.md +++ b/content/docs/README.md @@ -548,7 +548,7 @@ Create a [markdown file](https://github.com/neondatabase/website/blob/main/conte ```js const sharedMdxComponents = { - // name of component: path to component (not including content/docs/) + // ConponentName: 'shared-content/component-filename' NeedHelp: 'shared-content/need-help', }; @@ -566,6 +566,20 @@ Insert a shared markdown and render inline. ``` +You can pass props to the shared component: + +```md + +``` + +`component-with-props.md` + +```md + + {text} + +``` + ## Contributing For small changes and spelling fixes, we recommend using the GitHub UI because Markdown files are relatively easy to edit. diff --git a/content/docs/shared-content/index.js b/content/docs/shared-content/index.js index af7f0e95de..c7381400f3 100644 --- a/content/docs/shared-content/index.js +++ b/content/docs/shared-content/index.js @@ -1,7 +1,7 @@ const sharedMdxComponents = { - // name of component: path to component (not including content/docs/) + // ConponentName: 'shared-content/component-filename' NeedHelp: 'shared-content/need-help', - NewPricing: 'shared-content/NewPricing', + NewPricing: 'shared-content/new-pricing', LRNotice: 'shared-content/lr-notice', ComingSoon: 'shared-content/coming-soon', EarlyAccess: 'shared-content/early-access', diff --git a/content/docs/shared-content/NewPricing.md b/content/docs/shared-content/new-pricing.md similarity index 100% rename from content/docs/shared-content/NewPricing.md rename to content/docs/shared-content/new-pricing.md diff --git a/content/guides/README.md b/content/guides/README.md index 5685c0855a..108ae8e2a1 100644 --- a/content/guides/README.md +++ b/content/guides/README.md @@ -398,8 +398,8 @@ Create a [markdown file](https://github.com/neondatabase/website/blob/main/conte ```js const sharedMdxComponents = { - // name of component: path to component - NeedHelp: '../docs/shared-content/need-help', + // ConponentName: 'shared-content/component-filename' + NeedHelp: 'shared-content/need-help', }; export default sharedMdxComponents; @@ -416,6 +416,20 @@ Insert a shared markdown and render inline. ``` +You can pass props to the shared component: + +```md + +``` + +`component-with-props.md` + +```md + + {text} + +``` + ## Author data Your author's data should be sourced in `content/guides/authors/data.json` file. diff --git a/src/components/pages/doc/include-block/include-block.jsx b/src/components/pages/doc/include-block/include-block.jsx index 4436dfd3be..7f4033e770 100644 --- a/src/components/pages/doc/include-block/include-block.jsx +++ b/src/components/pages/doc/include-block/include-block.jsx @@ -3,14 +3,24 @@ import PropTypes from 'prop-types'; import Content from 'components/shared/content'; import { DOCS_DIR_PATH, getPostBySlug } from 'utils/api-docs'; -const IncludeBlock = ({ url }) => { +const IncludeBlock = ({ url, ...props }) => { const post = getPostBySlug(url, DOCS_DIR_PATH); - return ; + // Replace placeholders with actual prop values + let contentWithProps = post.content; + Object.entries(props).forEach(([key, value]) => { + contentWithProps = contentWithProps.replace(new RegExp(`{${key}}`, 'g'), value); + }); + + return ; }; IncludeBlock.propTypes = { url: PropTypes.string.isRequired, + type: PropTypes.string, + title: PropTypes.string, + param1: PropTypes.string, + param2: PropTypes.string, }; export default IncludeBlock; diff --git a/src/components/pages/error/hero/hero.jsx b/src/components/pages/error/hero/hero.jsx index b8b245743a..52464fe271 100644 --- a/src/components/pages/error/hero/hero.jsx +++ b/src/components/pages/error/hero/hero.jsx @@ -12,32 +12,19 @@ import Link from 'components/shared/link'; import illustration from './images/illustration.png'; -const CTA = ({ isDocsPage = false, reset }) => - isDocsPage ? ( -
- +const CTA = ({ isDocsPage = false, reset }) => ( + <> + {isDocsPage && } +
+ Back to Home
- ) : ( -
- {reset ? ( - <> - - - Back to Home - - - ) : ( - - )} -
- ); + +); CTA.propTypes = { isDocsPage: PropTypes.bool, @@ -45,10 +32,8 @@ CTA.propTypes = { }; const Skeleton = () => ( -
- - - +
+
); @@ -75,7 +60,9 @@ const Hero = ({ title, text, reset }) => { {title}

{text}

- {isLoading ? : } +
+ {isLoading ? : } +
@@ -85,8 +72,8 @@ const Hero = ({ title, text, reset }) => { height={862} src={illustration} alt="Illustration" - loading="eager" quality={75} + priority />
diff --git a/src/components/shared/content/content.jsx b/src/components/shared/content/content.jsx index 9014e9e0a7..176c063d2f 100644 --- a/src/components/shared/content/content.jsx +++ b/src/components/shared/content/content.jsx @@ -42,7 +42,7 @@ import getGlossaryItem from 'utils/get-glossary-item'; import sharedMdxComponents from '../../../../content/docs/shared-content'; const sharedComponents = Object.keys(sharedMdxComponents).reduce((acc, key) => { - acc[key] = () => IncludeBlock({ url: sharedMdxComponents[key] }); + acc[key] = (props) => IncludeBlock({ url: sharedMdxComponents[key], ...props }); return acc; }, {}); diff --git a/src/components/shared/content/index.js b/src/components/shared/content/index.js index 3089d8057d..395ae0dafd 100644 --- a/src/components/shared/content/index.js +++ b/src/components/shared/content/index.js @@ -1 +1,3 @@ -export { default } from './content'; +import Content from './content'; + +export default Content; diff --git a/src/components/shared/extension-request/extension-request.jsx b/src/components/shared/extension-request/extension-request.jsx index 6a111df531..278a330b48 100644 --- a/src/components/shared/extension-request/extension-request.jsx +++ b/src/components/shared/extension-request/extension-request.jsx @@ -232,7 +232,7 @@ const ExtensionRequest = ({ if (!isRecognized && email) { window.zaraz.track('identify', { email }); } - window.zaraz.track('Extension Requested', {"extension_name": selected}); + window.zaraz.track('Extension Requested', { extension_name: selected }); } setRequestComplete(true); } diff --git a/src/components/shared/inkeep-search/inkeep-search.jsx b/src/components/shared/inkeep-search/inkeep-search.jsx index 60343c1f80..21fa097199 100644 --- a/src/components/shared/inkeep-search/inkeep-search.jsx +++ b/src/components/shared/inkeep-search/inkeep-search.jsx @@ -12,7 +12,7 @@ const InkeepSearch = ({ className = null, handleClick, isNotFoundPage = false }) className={clsx( 'flex w-full items-center justify-between border-gray-new-90 bg-white transition-colors duration-200 hover:border-gray-new-70 dark:border-[#1D1E20] dark:bg-[#0F1010] dark:hover:border-gray-new-20 dark:lg:bg-transparent', isNotFoundPage - ? 'h-16 max-w-[488px] rounded-full border-2 bg-[length:20px_20px] bg-[left_1.5rem_center] px-6 pl-6 lg:border-2' + ? 'h-14 max-w-[488px] rounded-full border-2 bg-[length:20px_20px] bg-[left_1.5rem_center] px-6 pl-6 lg:border-2' : 'h-8 rounded border p-[7px] lg:items-start lg:border-none lg:px-3 lg:py-0' )} type="button" @@ -21,17 +21,19 @@ const InkeepSearch = ({ className = null, handleClick, isNotFoundPage = false }) - Search + Search {isNotFoundPage && 'for another page'}