Skip to content

docs: improve middleware documentation readability #2306

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

Merged
bjohansebas merged 5 commits into from
Aug 2, 2026
Merged

docs: improve middleware documentation readability #2306

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
aaa43be
docs: improve middleware documentation readability
ManakRaj-7 Aug 2, 2026
8c7b38a
docs: enhance clarity and structure in middleware guide
bjohansebas Aug 2, 2026
e2f8d19
docs: add ReadMore component and integrate into various guides
bjohansebas Aug 2, 2026
fa86007
docs: integrate ReadMore component into various guides for enhanced n…
bjohansebas Aug 2, 2026
2ea12d4
docs: improve clarity and structure in using middleware guide
bjohansebas Aug 2, 2026
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
37 changes: 37 additions & 0 deletions src/components/patterns/ReadMore/ReadMore.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
/**
* ReadMore Pattern Component
*
* Callout block with a book icon that points readers to a related guide
* or page for further reading. Visually mirrors the Alert primitive, but
* renders as an `aside` so it stays out of the heading outline; screen
* readers announce it as complementary content labeled by the title.
*
* Write the slot content as a full sentence with the link text naming the
* target page, so both prose and link-list navigation read well.
*
* @example
* <ReadMore>
* For more information, see the [Error handling](/guide/error-handling) guide.
* </ReadMore>
*/

import './ReadMore.css';
import type { HTMLAttributes } from 'astro/types';
import { Icon } from 'astro-icon/components';
import { Body, Flex } from '@components/primitives';

type Props = { title?: string } & HTMLAttributes<'aside'>;

const { title = 'Read more', class: className, ...rest } = Astro.props;
---

<aside class:list={['read-more', className]} aria-label={title} {...rest}>
<Flex align="center" gap="2">
<Icon name="fluent:book-open-16-regular" class="read-more__icon" size="18" aria-hidden="true" />
<Body as="p" vMargin={false} weight="bold" aria-hidden="true">{title}</Body>
</Flex>
<div class="read-more__description">
<slot />
</div>
</aside>
29 changes: 29 additions & 0 deletions src/components/patterns/ReadMore/ReadMore.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/**
* ReadMore Component Styles
*/

@layer patterns {
.read-more {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-4);
border-left-width: var(--border-width-4);
border-left-style: solid;
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
margin: var(--space-4) 0;
background-color: var(--color-bg-success);
border-color: var(--color-border-success);
}

.read-more__icon {
flex-shrink: 0;
color: var(--color-text-success);
}

.read-more__description {
p {
margin: 0;
}
}
}
1 change: 1 addition & 0 deletions src/components/patterns/ReadMore/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as ReadMore } from './ReadMore.astro';
1 change: 1 addition & 0 deletions src/components/patterns/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,4 @@ export { default as WriteBanner } from './WriteBanner/WriteBanner.astro';
export { default as RelatedContent } from './RelatedContent/RelatedContent.astro';
export { default as DocBottomNav } from './DocBottomNav/DocBottomNav.astro';
export { default as MiddlewareInfo } from './MiddlewareInfo/MiddlewareInfo.astro';
export { default as ReadMore } from './ReadMore/ReadMore.astro';
Loading
Loading