feat: custom params for shared content components

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.
 <NeedHelp/>
 ```
 
+You can pass props to the shared component:
+
+```md
+<ComponentWithProps text="The pgvector extension" />
+```
+
+`component-with-props.md`
+
+```md
+<Admonition type="note" title="Test component with props">
+  {text}
+</Admonition>
+```
+
 ## Contributing
 
 For small changes and spelling fixes, we recommend using the GitHub UI because Markdown files are relatively easy to edit.

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',

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.
 <NeedHelp/>
 ```
 
+You can pass props to the shared component:
+
+```md
+<ComponentWithProps text="The pgvector extension" />
+```
+
+`component-with-props.md`
+
+```md
+<Admonition type="note" title="Test component with props">
+  {text}
+</Admonition>
+```
+
 ## Author data
 
 Your author's data should be sourced in `content/guides/authors/data.json` file.

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 <Content content={post.content} />;
+  // 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 <Content content={contentWithProps} />;
 };
 
 IncludeBlock.propTypes = {
   url: PropTypes.string.isRequired,
+  type: PropTypes.string,
+  title: PropTypes.string,
+  param1: PropTypes.string,
+  param2: PropTypes.string,
 };
 
 export default IncludeBlock;

src/components/pages/error/hero/hero.jsx

@@ -12,43 +12,28 @@ import Link from 'components/shared/link';
 
 import illustration from './images/illustration.png';
 
-const CTA = ({ isDocsPage = false, reset }) =>
-  isDocsPage ? (
-    <div className="flex w-full flex-col">
-      <InkeepTrigger className="my-8 w-full" isNotFoundPage />
+const CTA = ({ isDocsPage = false, reset }) => (
+  <>
+    {isDocsPage && <InkeepTrigger className="mb-11 w-full sm:mb-6" isNotFoundPage />}
+    <div className="flex items-center gap-6 lg:gap-4">
+      <Button size="xs" theme="primary" withArrow onClick={reset}>
+        Try again
+      </Button>
       <Link className="whitespace-nowrap" size="sm" theme="green" to="/" withArrow>
         Back to Home
       </Link>
     </div>
-  ) : (
-    <div className="mt-11 flex items-center gap-6 lg:mt-8 lg:gap-4 sm:mt-6">
-      {reset ? (
-        <>
-          <Button size="xs" theme="primary" withArrow onClick={reset}>
-            Try again
-          </Button>
-          <Link className="whitespace-nowrap" size="sm" theme="green" to="/" withArrow>
-            Back to Home
-          </Link>
-        </>
-      ) : (
-        <Button size="xs" theme="primary" to="/">
-          Back to Home
-        </Button>
-      )}
-    </div>
-  );
+  </>
+);
 
 CTA.propTypes = {
   isDocsPage: PropTypes.bool,
   reset: PropTypes.func,
 };
 
 const Skeleton = () => (
-  <div className="mt-6 flex w-full flex-col items-start justify-center space-y-4">
-    <span className="skeleton max-w-[410px]" />
-    <span className="skeleton max-w-[260px]" />
-    <span className="skeleton max-w-[410px]" />
+  <div className="flex w-full flex-col overflow-hidden">
+    <span className="skeleton h-11 max-w-72" />
   </div>
 );
 
@@ -75,7 +60,9 @@ const Hero = ({ title, text, reset }) => {
             {title}
           </h1>
           <p className="t-xl mt-7 max-w-md sm:mt-4">{text}</p>
-          {isLoading ? <Skeleton /> : <CTA isDocsPage={isDocsPage} reset={reset} />}
+          <div className="mt-11 w-full lg:mt-8 sm:mt-6">
+            {isLoading ? <Skeleton /> : <CTA isDocsPage={isDocsPage} reset={reset} />}
+          </div>
         </div>
 
         <div className="col-start-6 col-end-12 2xl:col-end-13 lg:col-start-7 md:col-span-full">
@@ -85,8 +72,8 @@ const Hero = ({ title, text, reset }) => {
             height={862}
             src={illustration}
             alt="Illustration"
-            loading="eager"
             quality={75}
+            priority
           />
         </div>
       </Container>

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;
 }, {});
 

src/components/shared/content/index.js

@@ -1 +1,3 @@
-export { default } from './content';
+import Content from './content';
+
+export default Content;

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);
               }

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 })
       <span className={clsx('flex items-center', isNotFoundPage ? 'gap-x-2.5' : 'gap-x-1.5')}>
         <SearchIcon
           className={clsx(
-            'text-gray-new-50 lg:h-6 lg:w-6 lg:text-black-new lg:dark:text-white',
-            isNotFoundPage ? 'h-5 w-5' : 'h-[18px] w-[18px]'
+            'text-gray-new-50',
+            isNotFoundPage
+              ? 'h-5 w-5'
+              : 'h-[18px] w-[18px] lg:h-6 lg:w-6 lg:text-black-new lg:dark:text-white'
           )}
         />
         <span
           className={clsx(
-            'leading-none tracking-extra-tight text-gray-new-50 lg:hidden',
-            isNotFoundPage ? 'text-xl' : 'text-sm'
+            'leading-none tracking-extra-tight text-gray-new-50',
+            isNotFoundPage ? 'text-xl lg:text-lg md:text-base' : 'text-sm lg:hidden'
           )}
         >
-          Search
+          Search {isNotFoundPage && 'for another page'}
         </span>
       </span>
       <span className="rounded-sm border border-gray-new-90 p-[3px] dark:border-gray-new-20 lg:hidden">