Home Projects Papers Talks Ideas Notes Teaching About

Arod Web Components

Modern, accessible web components for content-rich websites

Welcome to Arod Components

The Arod web component library provides a set of semantic, accessible components for building modern documentation sites and content-rich applications. Each component is designed to work independently while maintaining consistent styling and behavior.

Web Components are a set of web platform APIs that allow you to create custom, reusable HTML elements with encapsulated functionality. Components use Shadow DOM for style encapsulation, ensuring they don't interfere with your existing styles.

Key Features

The library includes essential components like a responsive navigation menu, an advanced search interface, theme switching capabilities, and our unique sidenotes system for rich annotations.

The menu component automatically adapts to mobile devices with a hamburger menu and supports marking active items. The search component provides keyboard shortcuts (⌘K), real-time search, and keyboard navigation through results. Theme switching persists user preference in localStorage and respects system preferences when set to "System" mode. Sidenotes appear in the margin on desktop and inline on mobile, with automatic numbering and bidirectional hover highlighting.

Installation

Simply include the component scripts in your HTML and start using the custom elements. No build process or framework required! 

<script src="arod/arod-menu.js"></script>
<script src="arod/arod-search.js"></script>
<script src="arod/arod-theme.js"></script>
<script src="arod/arod-sidenotes.js"></script>

Component Examples

Navigation Menu

<arod-menu>
  <menu-item href="/papers">Papers</menu-item>
  <menu-item href="/notes">Notes</menu-item>
  <menu-item href="/about">About</menu-item>

  <arod-search slot="actions"></arod-search>
  <arod-theme slot="actions"></arod-theme>
</arod-menu>

Sidenotes

<article-sidenotes>
  <p>
    Text with a reference<sidenote-ref for="note1"></sidenote-ref>
  </p>

  <side-note id="note1">
    The sidenote content goes here
  </side-note>
</article-sidenotes>

Search Integration

The search component emits events that you can handle to integrate with your search backend: 

const search = document.querySelector('arod-search');
search.addEventListener('search', async (e) => {
  const results = await searchAPI(e.detail.query);
  search.displayResults(results);
});

Theming

All components support both light and dark themes. The theme toggle component manages this at the document level by setting a data-theme attribute on the HTML element.

Components use CSS custom properties for theming, making it easy to customize colors and styles to match your brand.
"Good design is as little design as possible." — Dieter Rams

Browser Support

Arod components work in all modern browsers that support Web Components APIs. For older browsers, consider using polyfills.

Tested in Chrome 90+, Firefox 88+, Safari 14+, and Edge 90+. Internet Explorer is not supported.

Contributing

We welcome contributions! The library is designed to be extensible, and new components that follow the established patterns are encouraged.

Each component should be self-contained, use Shadow DOM for encapsulation, emit appropriate events, and follow the naming convention of arod-[component].