Runtime API

updated 0.4.4Source

SolidBase provides multiple primitives for accessing runtime data. These are the same primitives used to build the default theme.

Route Data

`useSolidBaseContext`

Provides access to the active SolidBase config and computed page title.

The returned config already has the active locale's themeConfig merged into it.

function useSolidBaseContext<ThemeConfig>(): SolidBaseContextValue<ThemeConfig>;

interface SolidBaseContextValue<ThemeConfig> {
  config: Accessor<SolidBaseResolvedConfig<ThemeConfig>>;
  metaTitle: Accessor<string>;
}

`useCurrentPageData`

Provides access to the data for the current page.

interface CurrentPageData {
  frontmatter: BaseFrontmatter;
  toc?: Array<TableOfContentsItemData>;
  editLink?: string;
  lastUpdated?: number;
}

interface BaseFrontmatter {
  title?: string;
  titleTemplate?: string;
  description?: string;
  llms?: false | { exclude?: boolean };
}

interface TableOfContentsItemData {
  title: string;
  href: string;
  children: Array<TableOfContentsItemData>;
}

`useFrontmatter`

Returns the current page's frontmatter, cast to the requested type.

function useFrontmatter<T extends Record<string, any>>(): Accessor<
  T | undefined
>;

Theme

`getTheme`

Returns the current theme as determined by the theme cookie and system preferences.

function getTheme(): "light" | "dark";

`setTheme`

Updates the current theme.

function setTheme(theme: "light" | "dark" | "system"): void;

`getThemeVariant`

Similar to getTheme, but indicates whether the theme is being derived from system preferences. This is intended to be used in theme switchers.

function getThemeVariant(): "light" | "dark" | "system";

Locale

`useLocale`

Allows reading and updating the current locale, and provides utilities for managing paths that don't include the locale.

interface UseLocale {
  locales: Array<ResolvedLocale<any>>;
  currentLocale: Accessor<ResolvedLocale<any>>;
  setLocale(locale: ResolvedLocale<any>): void;
  applyPathPrefix(path: string): `/${string}`;
  routePath: Accessor<`/${string}`>;
}

interface ResolvedLocale<ThemeConfig> {
  code: string;
  isRoot?: boolean;
  config: LocaleConfig<ThemeConfig>;
  option?: SolidBaseRouteOption;
}

`getLocale`

function getLocale(path?: string): ResolvedLocale<any>;

Returns the locale for the provided path.

If path is not provided then on the server the request pathname will be used, and on the client location.pathname will be used.

`getLocaleLink`

function getLocaleLink(locale: ResolvedLocale<any>): `/${string}`;

Returns the root path for the provided locale.

Routes

`useSolidBaseRoutes`

Returns route config helpers for the current routes selection.

function useSolidBaseRoutes(): {
  routes: SolidBaseRoutesConfig | undefined;
  current: Accessor<SolidBaseRouteSelection>;
  path(selection: Partial<SolidBaseRouteSelection>): `/${string}` | undefined;
  options(
    axis: string,
    selection?: Partial<SolidBaseRouteSelection>,
  ): SolidBaseRouteOption[];
};

type SolidBaseRouteSelection = Record<string, string>;

type SolidBaseRouteOption = {
  name: string;
  axis: string;
  path?: string;
  href?: string;
  isExternal: boolean;
  selection?: SolidBaseRouteSelection;
  meta: SolidBaseRouteValueConfig;
};

current() returns the active route axis values for the current pathname. path(...) returns an internal route prefix for the provided partial selection merged over the current selection. options(...) returns valid options for an axis and filters internal values through routes.include.

`useSolidBaseRoute`

Returns the current route selection accessor.

function useSolidBaseRoute(): Accessor<SolidBaseRouteSelection>;

`useSolidBaseRouteOptions`

Returns route options for one axis using the current route selection.

function useSolidBaseRouteOptions(
  axis: string,
): Accessor<SolidBaseRouteOption[]>;

Preferred Language

`usePreferredLanguage`

Manages the user's preferred language for TypeScript/JavaScript toggles in code blocks.

function usePreferredLanguage(): [Accessor<"ts" | "js">, Setter<"ts" | "js">];

Page Markdown Copy Helpers

`canCopyPageMarkdown`

function canCopyPageMarkdown(
  configLlms: boolean | undefined,
  llms: false | { exclude?: boolean } | undefined,
): boolean;

`getCurrentPageMarkdownPath`

function getCurrentPageMarkdownPath(pathname?: string): string | undefined;

`getCurrentPageMarkdown`

Fetches the current page's generated markdown.

function getCurrentPageMarkdown(
  pathname?: string,
  fetchImpl?: typeof fetch,
): Promise<string>;

`copyTextToClipboard`

function copyTextToClipboard(
  text: string,
  writeText?: ClipboardSetter,
): Promise<void>;

`useCopyPageMarkdown`

type CopyPageState = "idle" | "success" | "error";

function useCopyPageMarkdown(): {
  canCopy: Accessor<boolean>;
  copy: () => Promise<boolean>;
  isCopying: Accessor<boolean>;
  isReady: Accessor<boolean>;
  state: Accessor<CopyPageState>;
};

Last updated: 4/22/26, 9:58 PM

Edit this page on GitHub