add fun to sign up for Sentry account

docs/contributing/pages/components.mdx

@@ -393,3 +393,18 @@ Example:
     </OnboardingOption>
     ```
     </OnboardingOption>
+
+## Inline images
+
+You can use the `|inline` modifier within an image alt text to render it inline with the text.
+
+The `|inline` modifier is a hack, and gets stripped out by the markdown parser.
+
+
+Example:
+
+```markdown {2}
+<span style={{display: 'inline-block', width: '24px'}}>
+  ![sentry thumbs up |inline](./img/sentry-thumbs-up.gif)
+</span>.
+```

docs/platforms/javascript/common/index.mdx

@@ -21,7 +21,9 @@ Check out the other SDKs we support in the left-hand dropdown.
 
 </PlatformSection>
 
-Don't already have an account and Sentry project established? Head over to [sentry.io](https://sentry.io/signup/), then return to this page.
+Try [**Sentry for free**](https://sentry.io/signup/)
+<span style={{display: 'inline-block', width: '24px'}}>![sentry thumbs up |inline](./img/sentry-thumbs-up.gif)</span>.
+Then come back here. We'll be waiting.
 
 <PlatformSection noGuides>
 

src/components/docImage.tsx

@@ -39,8 +39,32 @@ export default function DocImage({
     .split('x')
     .map(s => parseInt(s, 10));
 
+  // handle inline images (with |inline at the end of the alt text)
+  if (props.alt?.endsWith('|inline')) {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img
+        src={imgPath}
+        style={{
+          display: 'inline',
+          maxWidth: '100%',
+          height: 'auto',
+          border: 'none',
+          boxShadow: 'none',
+        }}
+        {...props}
+        alt={props.alt.replace('|inline', '')}
+      />
+    );
+  }
+
   return (
     <div style={{textAlign: 'center'}}>
+      <pre>
+        src: {src}
+        <br />
+        props: {JSON.stringify(props, null, 2)}
+      </pre>
       <a href={imgPath} target="_blank" rel="noreferrer">
         <Image
           {...props}

src/mdxComponents.ts

@@ -75,6 +75,7 @@ export function mdxComponents(
     VimeoEmbed,
     a: SmartLink,
     img: DocImage,
+    DocImage,
     ...dynamicComponents,
     wrapper,
   };