Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: leverage content-visibility: auto for large lists #368

Merged
merged 2 commits into from
Feb 2, 2025
Merged

docs: leverage content-visibility: auto for large lists #368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
154d76f
docs: use more generous grid layout
metonym Feb 2, 2025
2951d8b
docs: leverage `content-visibility: auto` for large lists
metonym Feb 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 28 additions & 28 deletions www/components/globals/Index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
<Column xlg={12}>
<h4>Installation</h4>
</Column>
<Column xlg={6} lg={9}>
<Column xlg={6} lg={6} md={6}>
<CodeSnippet code="npm i {PKG_NAME}" /><br />
<CodeSnippet code="pnpm i {PKG_NAME}" /><br />
<CodeSnippet code="bun add {PKG_NAME}" /><br />
Expand All @@ -64,7 +64,7 @@
<Column xlg={12}>
<h3>Usage</h3>
</Column>
<Column xlg={6} lg={12}>
<Column xlg={6} lg={6} md={12}>
<p class="mb-5">The default Highlight component requires two props:</p>
<UnorderedList class="mb-5">
<ListItem><code class="code">code</code>: text to highlight</ListItem>
Expand All @@ -82,10 +82,10 @@
of supported languages.
</p>
</Column>
<Column xlg={10}>
<Column xlg={10} lg={10}>
<ScopedStyle name={THEME_NAME} moduleName={THEME_MODULE_NAME} />
</Column>
<Column xlg={6} lg={12}>
<Column xlg={6} lg={6} md={12}>
<p class="mb-5">
Import styles from <code class="code">svelte-highlight/styles</code>.
</p>
Expand All @@ -111,7 +111,7 @@
>.
</p>
</Column>
<Column xlg={10}>
<Column xlg={10} lg={10} md={12}>
<HighlightSvelte code={svelteHeadCdn} class={THEME_MODULE_NAME} />
<InlineNotification
lowContrast
Expand All @@ -127,13 +127,13 @@
<Column xlg={12}>
<h3>Svelte Syntax Highlighting</h3>
</Column>
<Column xlg={6} lg={12}>
<Column xlg={6} lg={6} md={12}>
<p class="mb-5">
Use the <code class="code">HighlightSvelte</code> component for Svelte syntax
highlighting.
</p>
</Column>
<Column xlg={10}>
<Column xlg={10} lg={10} md={12}>
<ScopedStyleSvelte name={THEME_NAME} moduleName={THEME_MODULE_NAME} />
</Column>
</Row>
Expand All @@ -142,14 +142,14 @@
<Column xlg={12}>
<h3>Auto-highlighting</h3>
</Column>
<Column xlg={6} lg={12}>
<Column xlg={6} lg={6} md={12}>
<p class="mb-5">
The <code class="code">HighlightAuto</code> component invokes the
<code class="code">highlightAuto</code>
API from <code class="code">highlight.js</code>.
</p>
</Column>
<Column xlg={10}>
<Column xlg={10} lg={10} md={12}>
<ScopedStyleAuto name={THEME_NAME} moduleName={THEME_MODULE_NAME} />
<InlineNotification
lowContrast
Expand All @@ -165,25 +165,25 @@
<Column xlg={12}>
<h3>Line Numbers</h3>
</Column>
<Column xlg={6} lg={12}>
<Column xlg={6} lg={6} md={12}>
<p class="mb-5">
Use the <code class="code">LineNumbers</code> component to render the highlighted
code with line numbers.
</p>
</Column>
<Column xlg={10}>
<Column xlg={10} lg={10} md={12}>
<Basic />
</Column>
<Column xlg={6} lg={12}>
<Column xlg={6} lg={6} md={12}>
<p class="mb-5">
Set <code class="code">hideBorder</code> to <code class="code">true</code>
to hide the border of the line numbers column.
</p>
</Column>
<Column xlg={10}>
<Column xlg={10} lg={10} md={12}>
<HideBorder />
</Column>
<Column xlg={6} lg={12}>
<Column xlg={6} lg={6} md={12}>
<p class="mb-5">
By default, overflowing horizontal content is contained by a scrollbar.
</p>
Expand All @@ -193,43 +193,43 @@
<code class="code">pre</code> element.
</p>
</Column>
<Column xlg={8}>
<Column xlg={8} lg={8} md={12}>
<WrapLines />
</Column>
<Column xlg={6} lg={12}>
<Column xlg={6} lg={6} md={12}>
<p class="mb-5">
Use <code class="code">--style-props</code> to customize visual properties.
</p>
</Column>
<Column xlg={10}>
<Column xlg={10} lg={10} md={12}>
<StyleProps />
</Column>
<Column xlg={6} lg={12}>
<Column xlg={6} lg={6} md={12}>
<p class="mb-5">
Use <code class="code">startingLineNumber</code> to customize the starting
line number. By default, line numbers start at
<code class="code">1</code>.
</p>
</Column>
<Column xlg={10}>
<Column xlg={10} lg={10} md={12}>
<StartingLineNumber />
</Column>
<Column xlg={6} lg={12}>
<Column xlg={6} lg={6} md={12}>
<p class="mb-5">
Use <code class="code">highlightedLines</code> to highlight specific lines.
Indices start at zero.
</p>
</Column>
<Column xlg={10}>
<Column xlg={10} lg={10} md={12}>
<HighlightedLines />
</Column>
<Column xlg={6} lg={12}>
<Column xlg={6} lg={6} md={12}>
<p class="mb-5">
Use <code class="code">--highlighted-background</code> to customize the background
color of highlighted lines.
</p>
</Column>
<Column xlg={10}>
<Column xlg={10} lg={10} md={12}>
<HighlightedLinesCustomColor />
</Column>
</Row>
Expand All @@ -238,7 +238,7 @@
<Column xlg={12}>
<h3>Language Targeting</h3>
</Column>
<Column xlg={6} lg={12}>
<Column xlg={6} lg={6} md={12}>
<p class="mb-5">
All <code class="code">Highlight</code> components apply a
<code class="code">data-language</code> attribute on the codeblock containing
Expand All @@ -250,7 +250,7 @@
of supported languages.
</p>
</Column>
<Column xlg={10}>
<Column xlg={10} lg={10} md={12}>
<Highlight
code={'[data-language="css"] {\n /* custom style rules */\n}'}
language={css}
Expand All @@ -263,7 +263,7 @@
<Column xlg={12}>
<h3>Language Tags</h3>
</Column>
<Column xlg={6} lg={12}>
<Column xlg={6} lg={6} md={12}>
<p class="mb-5">
All <code class="code">Highlight</code> components allow for a tag to be added
at the top-right of the codeblock displaying the language name. Customize the
Expand All @@ -285,7 +285,7 @@
of supported languages.
</p>
</Column>
<Column xlg={10}>
<Column xlg={10} lg={10} md={12}>
<HighlightSvelte
code={`<script>
import { HighlightAuto } from "svelte-highlight";
Expand Down Expand Up @@ -323,7 +323,7 @@

<Row>
<Column xlg={12}><h3>Examples</h3></Column>
<Column xlg={6} lg={12}>
<Column xlg={6} lg={6} md={12}>
<p class="mb-5">
Get started with <Link
inline
Expand Down
1 change: 1 addition & 0 deletions www/components/globals/Languages.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
{#each languages as language (language.name)}
<StructuredListRow
class={!filteredIds.has(language.name) ? "hidden" : ""}
style="content-visibility: auto; contain-intrinsic-size: 0 204px;"
>
<StructuredListCell>
<div class="mb-5">
Expand Down
1 change: 1 addition & 0 deletions www/components/globals/Styles.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
{#each styles as style (style.name)}
<StructuredListRow
class={!filteredIds.has(style.name) ? "hidden" : ""}
style="content-visibility: auto; contain-intrinsic-size: 0 360px;"
>
<StructuredListCell>
<div class="mb-5">
Expand Down