Live Wiki

Overview

The Live Wiki feature allows users to access and share live wikis seamlessly. This functionality enhances collaboration by providing a dynamic platform for users to interact with wiki content in real-time.

User-facing behavior

Users can click on a button labeled "Live Wiki" to open the live wiki in a new browser tab.
The button is designed to be visually consistent with the application's UI, utilizing a variant and size that can be customized.
When the button is clicked, it directs users to a predefined URL that hosts the live wiki content.

Architecture and data flow

The Live Wiki feature is implemented as a React component, specifically LiveWikiLink, which serves as a link to the live wiki.
The component utilizes constants defined in a separate module to maintain the URL and label for the live wiki.
The button component is designed to open the live wiki in a new tab, ensuring that users can return to their original context easily.

Key implementation details

The LiveWikiLink component is defined in apps/web/src/components/navigation/live-wiki-link.tsx. It accepts props for button variant, size, and additional class names.

interface LiveWikiLinkProps {
  buttonVariant?: ComponentProps<typeof Button>['variant'];
  buttonSize?: ComponentProps<typeof Button>['size'];
  className?: string;
}

The button uses the Button component from the UI library and wraps an anchor (<a>) element that points to the live wiki URL.

<Button asChild size={buttonSize} variant={buttonVariant} className={className}>
  <a
    href={LIVE_WIKI_URL}
    target="_blank"
    rel="noopener noreferrer"
    aria-label={`${LIVE_WIKI_LABEL} (opens in a new tab)`}
  >

The constants for the live wiki URL and label are defined in apps/web/src/lib/constants/live-wiki.ts. This separation allows for easy updates and maintenance of these values.

export const LIVE_WIKI_URL =
  'https://wikismith.dudkin-garage.com/s/776e7126-1ef9-43a2-bf4b-1ee087851042';

export const LIVE_WIKI_LABEL = 'Live Wiki';

The ExternalLink icon from the lucide-react library is included to visually indicate that the link opens in a new tab, enhancing user experience.

<ExternalLink className="size-3" aria-hidden="true" />

Key files