From 390ccf36cab77706915ba109e63a9be7dc03343e Mon Sep 17 00:00:00 2001 From: Cody De Arkland Date: Sun, 9 Nov 2025 00:40:04 -0800 Subject: [PATCH 1/3] Adding new split layout component --- src/components/splitLayout/README.md | 101 +++++++++++++++++ src/components/splitLayout/index.tsx | 73 ++++++++++++ src/components/splitLayout/style.module.scss | 112 +++++++++++++++++++ src/mdxComponents.ts | 10 ++ 4 files changed, 296 insertions(+) create mode 100644 src/components/splitLayout/README.md create mode 100644 src/components/splitLayout/index.tsx create mode 100644 src/components/splitLayout/style.module.scss diff --git a/src/components/splitLayout/README.md b/src/components/splitLayout/README.md new file mode 100644 index 0000000000000..017c24e67f2a6 --- /dev/null +++ b/src/components/splitLayout/README.md @@ -0,0 +1,101 @@ +# SplitLayout Component + +A two-column layout component designed for getting started guides that places explanatory text on the left and code samples on the right. + +## Features + +- **Responsive Design**: Automatically stacks on mobile (under 1024px) +- **Sticky Code**: Code samples stick to viewport on desktop for easy reference while scrolling +- **Clean Separation**: Clear visual separation between explanation and implementation +- **Flexible Content**: Support for any MDX content in both sections + +## Usage + +### Basic Example + +**Note:** MDX requires direct component names, not dot notation. + +```mdx + + + + ### Your Heading + + Explanatory text goes here. You can use any markdown: + - Lists + - **Bold text** + - Links + + This content appears on the left side. + + + + ```javascript + // Your code sample goes here + const example = "This appears on the right"; + ``` + + + +``` + +### Multiple Sections + +You can stack multiple split sections within one layout: + +```mdx + + + + ### First Topic + Explanation for the first topic... + + + ```javascript + const first = "code"; + ``` + + + + + + ### Second Topic + Explanation for the second topic... + + + ```javascript + const second = "code"; + ``` + + + +``` + +## Component Structure + +- **``**: Container for one or more split sections +- **``**: Individual split section wrapper +- **``**: Left side text content (use this, not ``) +- **``**: Right side code samples (use this, not ``) + +## Styling + +The component uses CSS Grid for layout and is fully responsive: +- **Desktop (>1024px)**: Two columns (50/50 split) +- **Mobile (≤1024px)**: Single column (stacked) + +The code section uses `position: sticky` on desktop to keep code visible while scrolling through long explanations. + +## Best Practices + +1. **Keep explanations concise**: The left column is limited in width, so focus on key points +2. **Use headings**: Start each Text section with a heading (h3 or h4) +3. **Code relevance**: Ensure code samples directly relate to the adjacent text +4. **Progressive complexity**: Order sections from simple to complex +5. **Mobile consideration**: Remember content stacks on mobile, so ensure reading flow makes sense + +## Examples in Use + +See it in action: +- [Next.js Getting Started - Essential Configuration](/platforms/javascript/guides/nextjs/getting-started/#essential-configuration) + diff --git a/src/components/splitLayout/index.tsx b/src/components/splitLayout/index.tsx new file mode 100644 index 0000000000000..cb01511cd0396 --- /dev/null +++ b/src/components/splitLayout/index.tsx @@ -0,0 +1,73 @@ +'use client'; + +/** + * Component: SplitLayout / SplitSection + * + * Creates a two-column layout with text content on the left and code samples on the right. + * Ideal for getting started guides where you want to explain concepts alongside code examples. + * + * Usage in MDX: + * + * + * + * ## Your Heading + * Explanatory text goes here... + * + * + * ```javascript + * // Your code sample + * ``` + * + * + * + * + * Props: + * - SplitLayout: Container for one or more split sections + * - SplitSection: Individual split section wrapper + * - SplitSectionText: Left side text content + * - SplitSectionCode: Right side code samples + * + * Note: While SplitSection.Text and SplitSection.Code are available as properties + * for TypeScript convenience, MDX requires using the direct component names. + */ + +import {ReactNode} from 'react'; + +import styles from './style.module.scss'; + +type SplitLayoutProps = { + children: ReactNode; +}; + +type SplitSectionProps = { + children: ReactNode; +}; + +type SplitSectionTextProps = { + children: ReactNode; +}; + +type SplitSectionCodeProps = { + children: ReactNode; +}; + +export function SplitLayout({children}: SplitLayoutProps) { + return
{children}
; +} + +export function SplitSectionText({children}: SplitSectionTextProps) { + return
{children}
; +} + +export function SplitSectionCode({children}: SplitSectionCodeProps) { + return
{children}
; +} + +export function SplitSection({children}: SplitSectionProps) { + return
{children}
; +} + +// Attach Text and Code as properties of SplitSection for dot notation usage +SplitSection.Text = SplitSectionText; +SplitSection.Code = SplitSectionCode; + diff --git a/src/components/splitLayout/style.module.scss b/src/components/splitLayout/style.module.scss new file mode 100644 index 0000000000000..fd2cbcb6dd009 --- /dev/null +++ b/src/components/splitLayout/style.module.scss @@ -0,0 +1,112 @@ +.splitLayoutContainer { + display: flex; + flex-direction: column; + gap: 2rem; + margin: 2rem 0; +} + +.splitSection { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + gap: 2rem; + align-items: start; + margin-bottom: 3rem; // Default spacing between sections (mb-5 equivalent) + + @media (max-width: 1024px) { + grid-template-columns: 1fr; + gap: 1.5rem; + margin-bottom: 2rem; // Reduced spacing on mobile + } + + // Remove margin from last section in a layout + &:last-child { + margin-bottom: 0; + } +} + +.splitText { + min-width: 0; // Allow flex item to shrink below content size + overflow-wrap: break-word; + + // Create a container that's 80% width + > * { + max-width: 80%; + } + + @media (max-width: 1024px) { + // Full width on mobile + > * { + max-width: 100%; + } + } + + // Ensure headings and paragraphs have appropriate spacing + > *:first-child { + margin-top: 0; + } + + > *:last-child { + margin-bottom: 0; + } + + // Style headings within the text section + h2, h3, h4 { + margin-top: 0; + margin-bottom: 0.75rem; + } + + p { + margin-bottom: 1rem; + line-height: 1.6; + } + + ul, ol { + margin-bottom: 1rem; + } +} + +.splitCode { + position: sticky; + top: calc(var(--header-height, 80px) + 1rem); + min-width: 0; // Allow flex item to shrink below content size + overflow: hidden; // Prevent content from expanding the column + + @media (max-width: 1024px) { + position: relative; + top: auto; + overflow: visible; + } + + // Ensure code blocks fill the space + > *:first-child { + margin-top: 0; + } + + > *:last-child { + margin-bottom: 0; + } + + // Override global code block styles to enable wrapping + // Use !important to ensure these override the global styles + :global(pre), + :global(pre[class*='language-']) { + white-space: pre-wrap !important; + word-wrap: break-word !important; + overflow-wrap: break-word !important; + overflow-x: visible !important; + } + + :global(code), + :global(code[class*='language-']) { + white-space: pre-wrap !important; + word-wrap: break-word !important; + overflow-wrap: break-word !important; + } + + :global(.code-line) { + white-space: pre-wrap !important; + word-wrap: break-word !important; + overflow-wrap: break-word !important; + } +} + diff --git a/src/mdxComponents.ts b/src/mdxComponents.ts index 48bbccc71fc6a..e9d31ee401f64 100644 --- a/src/mdxComponents.ts +++ b/src/mdxComponents.ts @@ -44,6 +44,12 @@ import {SdkApi} from './components/sdkApi'; import {SdkOption} from './components/sdkOption'; import {SignInNote} from './components/signInNote'; import {SmartLink} from './components/smartLink'; +import { + SplitLayout, + SplitSection, + SplitSectionCode, + SplitSectionText, +} from './components/splitLayout'; import {StepComponent, StepConnector} from './components/stepConnector'; import {TableOfContents} from './components/tableOfContents'; import {VersionRequirement} from './components/version-requirement'; @@ -98,6 +104,10 @@ export function mdxComponents( RelayMetrics, SandboxLink, SignInNote, + SplitLayout, + SplitSection, + SplitSectionText, + SplitSectionCode, StepComponent, StepConnector, VimeoEmbed, From 7ab3cc0c51b353f8e56dd51c860d2101300c344c Mon Sep 17 00:00:00 2001 From: "getsantry[bot]" <66042841+getsantry[bot]@users.noreply.github.com> Date: Mon, 10 Nov 2025 06:11:30 +0000 Subject: [PATCH 2/3] [getsentry/action-github-commit] Auto commit --- src/components/splitLayout/README.md | 29 +++++++++++----------------- src/components/splitLayout/index.tsx | 1 - 2 files changed, 11 insertions(+), 19 deletions(-) diff --git a/src/components/splitLayout/README.md b/src/components/splitLayout/README.md index 017c24e67f2a6..3ec1a624346fe 100644 --- a/src/components/splitLayout/README.md +++ b/src/components/splitLayout/README.md @@ -15,35 +15,27 @@ A two-column layout component designed for getting started guides that places ex **Note:** MDX requires direct component names, not dot notation. -```mdx +````mdx - ### Your Heading - - Explanatory text goes here. You can use any markdown: - - Lists - - **Bold text** - - Links - - This content appears on the left side. + ### Your Heading Explanatory text goes here. You can use any markdown: - + Lists - **Bold text** - Links This content appears on the left side. - + - ```javascript - // Your code sample goes here - const example = "This appears on the right"; - ``` + ```javascript // Your code sample goes here const example = "This appears + on the right"; ``` -``` +```` ### Multiple Sections You can stack multiple split sections within one layout: -```mdx +````mdx @@ -69,7 +61,7 @@ You can stack multiple split sections within one layout: -``` +```` ## Component Structure @@ -81,6 +73,7 @@ You can stack multiple split sections within one layout: ## Styling The component uses CSS Grid for layout and is fully responsive: + - **Desktop (>1024px)**: Two columns (50/50 split) - **Mobile (≤1024px)**: Single column (stacked) @@ -97,5 +90,5 @@ The code section uses `position: sticky` on desktop to keep code visible while s ## Examples in Use See it in action: -- [Next.js Getting Started - Essential Configuration](/platforms/javascript/guides/nextjs/getting-started/#essential-configuration) +- [Next.js Getting Started - Essential Configuration](/platforms/javascript/guides/nextjs/getting-started/#essential-configuration) diff --git a/src/components/splitLayout/index.tsx b/src/components/splitLayout/index.tsx index cb01511cd0396..b3b0e5140a8c6 100644 --- a/src/components/splitLayout/index.tsx +++ b/src/components/splitLayout/index.tsx @@ -70,4 +70,3 @@ export function SplitSection({children}: SplitSectionProps) { // Attach Text and Code as properties of SplitSection for dot notation usage SplitSection.Text = SplitSectionText; SplitSection.Code = SplitSectionCode; - From dcb3eb26016b72828fe0512540ccbf71dec41479 Mon Sep 17 00:00:00 2001 From: "getsantry[bot]" <66042841+getsantry[bot]@users.noreply.github.com> Date: Mon, 10 Nov 2025 06:12:17 +0000 Subject: [PATCH 3/3] [getsentry/action-github-commit] Auto commit --- src/components/splitLayout/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/splitLayout/README.md b/src/components/splitLayout/README.md index 3ec1a624346fe..049fefcbbcf1e 100644 --- a/src/components/splitLayout/README.md +++ b/src/components/splitLayout/README.md @@ -27,6 +27,7 @@ A two-column layout component designed for getting started guides that places ex ```javascript // Your code sample goes here const example = "This appears on the right"; ``` + ````