📄 Layout¶
📊 Analysis Summary¶
| Metric | Count |
|---|---|
| 🔧 Functions | 1 |
| 📦 Imports | 12 |
| 💠 JSX Elements | 7 |
| 📐 Interfaces | 1 |
📚 Table of Contents¶
🛠️ File Location:¶
📂 packages/website/src/theme/CodeBlock/Layout/index.tsx
📦 Imports¶
| Name | Source |
|---|---|
Props |
@theme/CodeBlock/Layout |
useCodeBlockContext |
@docusaurus/theme-common/internal |
Buttons |
@theme/CodeBlock/Buttons |
Container |
@theme/CodeBlock/Container |
Content |
@theme/CodeBlock/Content |
Title |
@theme/CodeBlock/Title |
clsx |
clsx |
React |
react |
TryInPlayground |
../../MDXComponents/TryInPlayground |
getVisibleCodeLines |
../utils |
custom |
./custom.module.css |
styles |
./styles.module.css |
JSX Elements¶
| Component | Type | Props | Children |
|---|---|---|---|
Container |
component | as="div", className={clsx(className, metadata.className)} | {metadata.title && ( <div className={clsx(styles.codeBlockTitle, custom.codeB... |
div |
element | className={clsx(styles.codeBlockTitle, custom.codeBlockTitle)} | |
Title |
component | none | {metadata.title} |
div |
element | className={clsx( styles.codeBlockContent, custom.codeBlockContent, eslintrcHa... | |
Content |
component | none | none |
TryInPlayground |
component | className={clsx( 'button button--primary button--outline', custom.playgroundB... | text: "Open in Playground" |
Buttons |
component | none | none |
Functions¶
CodeBlockLayout({ className, eslintrcHash, }: Props): React.JSX.Element¶
Parameters:
{ className, eslintrcHash, }Props
Returns: React.JSX.Element
Calls:
useCodeBlockContext (from @docusaurus/theme-common/internal)getVisibleCodeLines (from ../utils)lz.compressToEncodedURIComponentcodeLines.joincodeLines.atclsx (from clsx)
Code
export default function CodeBlockLayout({
className,
eslintrcHash,
}: Props): React.JSX.Element {
const { metadata } = useCodeBlockContext();
const codeLines = getVisibleCodeLines(metadata);
const codeHash = lz.compressToEncodedURIComponent(codeLines.join('\n'));
const needsMorePadding = (codeLines.at(-1)?.length ?? 0) > 50;
return (
<Container as="div" className={clsx(className, metadata.className)}>
{metadata.title && (
<div className={clsx(styles.codeBlockTitle, custom.codeBlockTitle)}>
<Title>{metadata.title}</Title>
</div>
)}
<div
className={clsx(
styles.codeBlockContent,
custom.codeBlockContent,
eslintrcHash && custom.codeBlockContentWithPlayground,
eslintrcHash &&
needsMorePadding &&
custom.codeBlockContentMorePadding,
)}
>
<Content />
{eslintrcHash && (
<TryInPlayground
className={clsx(
'button button--primary button--outline',
custom.playgroundButton,
)}
codeHash={codeHash}
eslintrcHash={eslintrcHash}
language={metadata.language}
>
Open in Playground
</TryInPlayground>
)}
<Buttons />
</div>
</Container>
);
}
Interfaces¶
Props¶
Properties¶
| Name | Type | Optional | Description |
|---|---|---|---|
eslintrcHash |
string |
✓ | not shown |
Generated by Syntax Scribe