updates to custom transformers page

Author: evisdrenova

docs/docs/transformers/custom.mdx

@@ -7,6 +7,45 @@ slug: /transformers/custom
 
 import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
 
+import { DocsImage } from '@site/src/CustomComponents/DocsImage';
+
 <DocPageHeader title="Custom" />
 
-## More coming soon!
+## Introduction
+
+Custom Transfomers are a great way to configure a system transformer with your own presets and publish it everywhere. Custom transformers are saved at the account level and
+can be used across multiple jobs, saving your time during the schema configuration process.
+
+<DocsImage href="https://assets.nucleuscloud.com/neosync/docs/custom-transformers-table.png" />
+
+## Creating a Custom Transformer
+
+In order to create a custom transformer, follow these steps:
+
+1. Navigate to the **Transformers** page and click on **+ New Transformer**.
+2. You'll be brought to the new transformer page where you can select a base transformer. A base transformer serves as the blueprint for the custom transformer. Select the base transformer for your custom transformer.
+
+<DocsImage href="https://assets.nucleuscloud.com/neosync/docs/base-transformer.png" />
+
+3. Once you've selected a base transformer, you'll be prompted to give the transformer a name and description. Additionally, you can preset custom default configurations depending on the transformer.
+
+<DocsImage href="https://assets.nucleuscloud.com/neosync/docs/custom-string.png" />
+
+4. Once you've filled out the form, you can click on **save** and then you will be routed to the newly created transformer.
+
+<DocsImage href="https://assets.nucleuscloud.com/neosync/docs/custom-string-filled.png" />
+
+## Using a Custom Transformer
+
+Once you've created a custom transformer, you'll see it appear in the transformer list in Transformers main page as well as the Schema configuration page. Above, we created a custom transformer
+called `custom-string-transformer`, we can now see it both places.
+
+In the transformers table under the Custom Transformer tab.
+
+<DocsImage href="https://assets.nucleuscloud.com/neosync/docs/custom-transformer-table-with-new-transsformer.png" />
+
+In the Schema configuration page in the transformer select.
+
+<DocsImage href="https://assets.nucleuscloud.com/neosync/docs/schema-page-custom-transformer.png" />
+
+Now we can finsih the rest of our job configuration and the newly created custom transformer will be used in the column that it's mapped to.

docs/docs/transformers/introduction.mdx

@@ -21,7 +21,7 @@ import { DocsImage } from '@site/src/CustomComponents/DocsImage';
 
 Transformers are data-type specific modules that anonymize or generate data. Tranformers are defined in the job workflow and are applied to every piece of data in the column they are assigned. Neosync ships with a number of transformers that are already built to handle common data types such as email, addresses, ssn, strings, integers and more.
 
-<DocsImage />
+<DocsImage href="https://assets.nucleuscloud.com/neosync/docs/transformers-page.png" />
 
 ## Transformer Types
 

docs/src/CustomComponents/DocsImage.tsx

@@ -1,9 +1,14 @@
 import React, { ReactElement } from 'react';
 
-export function DocsImage(): ReactElement {
+interface Props {
+  href: string;
+}
+
+export function DocsImage(props: Props): ReactElement {
+  const { href } = props;
   return (
     <div className="docsImage">
-      <img src="https://assets.nucleuscloud.com/neosync/docs/transformers-page.png" />
+      <img src={href} />
     </div>
   );
 }

docs/src/css/custom.css

@@ -142,6 +142,6 @@ this is the class for the sidebar categories that section headers
   }
 
   .docsImage {
-    @apply border border-gray-300 shadow-lg rounded-lg overflow-hidden;
+    @apply border border-gray-300 shadow-lg rounded-lg overflow-hidden my-6;
   }
 }