InLink Component

The InLink component provides a standardized way to create links to internal documentation pages throughout the ISBDM documentation. It ensures consistent styling for all internal references.

Basic Usage

has extent of embodied content

<InLink href="/docs/attributes/1277">has extent of embodied content</InLink>

With Custom Class

has extent of embodied content

<InLink href="/docs/attributes/1277" className="emphasized">has extent of embodied content</InLink>

Props

Prop	Type	Required	Default	Description
href	string	Yes	-	URL to link to (processed through useBaseUrl)
children	ReactNode	Yes	-	Link content
className	string	No	-	Additional CSS class name
smartWrap	boolean	No	true	Enable smart wrapping before parentheses

Smart Text Wrapping

The InLink component includes intelligent text wrapping to prevent awkward line breaks in long link labels. By default, it prevents wrapping except before parentheses, making links like bibliographic citations more readable:

Catalogue of shipwrecked books ​(2018; William Collins; volume; case binding)

// Smart wrapping is enabled by default
<InLink href="/docs/example">
  Catalogue of shipwrecked books (2018; William Collins; volume; case binding)
</InLink>

// Disable smart wrapping if needed
<InLink href="/docs/example" smartWrap={false}>
  Long text without smart wrapping
</InLink>

How It Works

1. The component prevents all line breaks by default using white-space: nowrap
2. Zero-width spaces (\u200B) are automatically inserted before opening parentheses
3. When the text must wrap due to container constraints, it breaks only at these zero-width spaces
4. This ensures bibliographic citations and similar content break at logical points

This feature is particularly useful for:

• Bibliographic citations with publication details in parentheses
• Technical specifications with parenthetical information
• Any link text containing parenthetical remarks

Accessibility Features

The InLink component is built with WCAG 2.1/2.2 Level AA compliance in mind:

• Uses Docusaurus's Link component for proper client-side navigation
• Maintains sufficient color contrast (at least 4.5:1 ratio) in both light and dark modes
• Provides visible focus indicators for keyboard navigation
• Preserves semantic meaning of links
• Smart wrapping maintains readability without affecting accessibility

URL Processing

The component automatically processes URLs through Docusaurus's useBaseUrl function, which:

• Adds the base URL prefix to all paths
• Handles versioned documentation links correctly
• Works with internationalized content

Usage Guidelines

1. Use for Internal Documentation Links: Use InLink when linking to other pages within the ISBDM documentation.

2. Use Relative Paths: For maintainability, use relative paths (e.g., docs/attributes/1277) rather than absolute paths.

3. Provide Descriptive Link Text: Always use meaningful text that describes the destination, not "click here" or "link".

4. Link to Stable IDs: When linking to specific sections, use stable IDs to ensure links remain valid across documentation versions.

Internationalization

The component automatically adapts to RTL languages and supports the Docusaurus i18n system for localized URLs.

Examples with Code

Basic Internal Link

<InLink href="/docs/attributes/1277">
  has extent of embodied content
</InLink>

Link to Section

<InLink href="/docs/attributes/1277#usage">
  Usage Guidelines for Extent of Embodied Content
</InLink>

With Custom Class

<InLink 
  href="/docs/attributes/1277"
  className="highlight-link"
>
  has extent of embodied content
</InLink>

Smart Wrapping

// Default behavior - wraps before parentheses
<InLink href="/docs/fullex/fx001">
  Catalogue of shipwrecked books (2018; William Collins; volume; case binding)
</InLink>

// Disable smart wrapping
<InLink href="/docs/fullex/fx001" smartWrap={false}>
  Long bibliographic citation (without smart wrapping)
</InLink>

Migration from HTML

The InLink component replaces the following HTML structure:

<a class="linkInline" href="/ISBDM/docs/attributes/1277">has extent of embodied content</a>

When migrating content, use the following mapping:

HTML Element/Attribute	Component Prop
a href	href
a content	children
Additional classes	className

Comparison with OutLink

The ISBDM documentation uses two primary link components:

• InLink: For internal documentation links (styled with a light red background)
• OutLink: For external links that may open in a new tab (styled with a light blue background)

Choose the appropriate component based on the link destination to maintain visual consistency throughout the documentation.