### Start SolidStart Development Server Source: https://github.com/kobaltedev/solidbase/blob/main/docs/README.md After installing dependencies, use `npm run dev` to start the development server. Add `-- --open` to automatically open the app in a new browser tab. ```bash npm run dev # or start the server and open the app in a new browser tab npm run dev -- --open ``` -------------------------------- ### Install Package Source: https://github.com/kobaltedev/solidbase/blob/main/dev/src/routes/pm.mdx Installs the specified package. ```package-install @kobalte/solidbase ``` -------------------------------- ### Install @kobalte/solidbase Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(1)add-to-existing.mdx Run this command in your project's root directory to install the SolidBase package. ```bash npm install @kobalte/solidbase # or yarn add @kobalte/solidbase # or pnpm add @kobalte/solidbase ``` -------------------------------- ### Install Development Package Source: https://github.com/kobaltedev/solidbase/blob/main/dev/src/routes/pm.mdx Installs a package for development purposes. ```package-install-dev dev ``` -------------------------------- ### F# Console Logging Example Source: https://github.com/kobaltedev/solidbase/blob/main/dev/src/routes/ec.mdx Demonstrates F# code for logging a value to the console using Fable.Core. This example includes line number and collapse directives. ```fsharp namespace FSharpBetter open Fable.Core let ``don't look at that`` value = JS.console.log value "please" |> ``don't look at that`` ``` -------------------------------- ### Tab Group with Content Source: https://github.com/kobaltedev/solidbase/blob/main/dev/src/routes/ec.mdx Example of a tab group containing simple text content for different tabs. ```markdown ::::tab-group[key] ::: [a.tsx] Hey I'm A ::: ::: [b.tsx] Hi this is B ::: :::: ``` -------------------------------- ### SolidBaseApp with Twoslash Type Checking Source: https://github.com/kobaltedev/solidbase/blob/main/dev/src/routes/ec.mdx Example demonstrating Twoslash type checking within a SolidJS component. ```tsx const test: 4 | 44 | 444 = 4; ``` -------------------------------- ### Preview Accordion Example Source: https://github.com/kobaltedev/solidbase/blob/main/dev/src/routes/preview.mdx Renders a preview of the Accordion component. This snippet is used within the 'Preview With Code Tabs' section. ```tsx import { Accordion } from "@kobalte/core/accordion"; import { ChevronDownIcon } from "some-icon-library"; import "./style.css"; function App() { return ( Is it accessible?

Yes. It adheres to the WAI-ARIA design pattern.

Is it unstyled?

Yes. It's unstyled by default, giving you freedom over the look and feel.

Can it be animated?

Yes! You can animate the Accordion with CSS or JavaScript.

); } ``` -------------------------------- ### SolidBase Routes Configuration Helpers Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Provides helpers for accessing and manipulating route configurations based on the current 'routes' selection. Includes functions to get current selection, construct paths, and retrieve valid options for a given axis. ```typescript function useSolidBaseRoutes(): { routes: SolidBaseRoutesConfig | undefined; current: Accessor; path(selection: Partial): `/${string}` | undefined; options( axis: string, selection?: Partial, ): SolidBaseRouteOption[]; }; type SolidBaseRouteSelection = Record; type SolidBaseRouteOption = { name: string; axis: string; path?: string; href?: string; isExternal: boolean; selection?: SolidBaseRouteSelection; meta: SolidBaseRouteValueConfig; }; ``` -------------------------------- ### Get Current Theme Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Returns the current theme ('light' or 'dark') as determined by the theme cookie and system preferences. ```typescript function getTheme(): "light" | "dark"; ``` -------------------------------- ### Get Theme Variant Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Indicates whether the current theme is being derived from system preferences. Useful for theme switchers. ```typescript function getThemeVariant(): "light" | "dark" | "system"; ``` -------------------------------- ### Get Locale Root Path Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Returns the root path for a specified locale. This is the base URL for a given language. ```typescript function getLocaleLink(locale: ResolvedLocale): `/${string}`; ``` -------------------------------- ### Preview with Thematic Break and Code Tabs Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(0)markdown.mdx Incorporate a thematic break (`---`) within a `preview` directive to add a lower panel for supporting content, such as code examples in tabs. This allows for a more comprehensive presentation of components and their associated code. ```mdx :::preview --- ```tsx tab title="index.tsx" export function PreviewCard() { return (
Preview card Rendered MDX appears here.
); } ``` ```css tab title="style.css" .preview-card { display: grid; gap: 0.35rem; padding: 1rem; border-radius: 0.75rem; } ``` ::: ``` ```html
Preview card Rendered MDX appears here.
--- ```tsx tab title="index.tsx" export function PreviewCard() { return (
Preview card Rendered MDX appears here.
); } ``` ```css tab title="style.css" .preview-card { display: grid; gap: 0.35rem; padding: 1rem; border-radius: 0.75rem; } ``` ``` -------------------------------- ### Configure Social Links in App Config Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/default-theme/components/footer.mdx Configure social links for the footer by adding them to the `themeConfig.socialLinks` object within your `app.config.ts` file. This example shows how to add GitHub and Discord links. ```typescript import { defineConfig } from "@solidjs/start/config"; import { createSolidBase } from "@kobalte/solidbase"; const solidBase = createSolidBase(theme); export default defineConfig({ ...solidBase.startConfig({ ... }), plugins: [ solidBase.plugin({ ... themeConfig: { socialLinks: { github: "https://github.com/kobaltedev/solidbase", discord: "https://discord.com/invite/solidjs", }, ... }, ... }), ], }); ``` -------------------------------- ### Get Current Page Markdown Path Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Returns the file path for the current page's generated markdown. Optionally takes a pathname to resolve the path for a different page. ```typescript function getCurrentPageMarkdownPath(pathname?: string): string | undefined; ``` -------------------------------- ### Create New SolidStart Project with SolidBase Template Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(0)quickstart.mdx Use the Solid CLI to scaffold a new SolidStart project with the SolidBase template. This command initializes the project structure and dependencies. ```bash solid@latest -s -t with-solidbase ``` -------------------------------- ### Create a New SolidStart Project Source: https://github.com/kobaltedev/solidbase/blob/main/docs/README.md Use `npm init solid@latest` to create a new SolidStart project. You can create it in the current directory or specify a project name. ```bash npm init solid@latest # create a new project in my-app npm init solid@latest my-app ``` -------------------------------- ### getCurrentPageMarkdownPath Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Gets the path to the current page's markdown file. ```APIDOC ## getCurrentPageMarkdownPath ### Description Gets the path to the current page's markdown file. ### Signature ```ts function getCurrentPageMarkdownPath(pathname?: string): string | undefined; ``` ``` -------------------------------- ### SolidBase Entry Point Configuration Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(3)structure.mdx The `app.config.ts` file serves as the entry point for a SolidBase project, configuring SolidStart and integrating SolidBase features. ```typescript import { defineConfig } from "@solidjs/start/config"; import { createSolidBase } from "@kobalte/solidbase"; const solidBase = createSolidBase(theme); export default defineConfig({ ...solidBase.startConfig({ ssr: true, }), server: { prerender: { crawlLinks: true, }, }, plugins: [ solidBase.plugin({ title: "SolidBase", description: "Fully featured, fully customisable static site generation for SolidStart", }), ], }); ``` -------------------------------- ### Configure SolidStart with SolidBase Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(2)config.mdx Use `defineConfig` from SolidStart and `withSolidBase` to combine configurations. This is the entry point for your app's configuration. ```typescript import { defineConfig } from "@solidjs/start/config"; import { withSolidBase } from "@kobalte/solidbase/config"; export default defineConfig( withSolidBase({ // SolidStart options here }, { // SolidBase options here }) ); ``` -------------------------------- ### Create Solid App Source: https://github.com/kobaltedev/solidbase/blob/main/dev/src/routes/index.mdx Command to create a new Solid project using pnpm. ```bash pnpm create solid ``` -------------------------------- ### Wrap App in SolidBaseRoot (app.tsx) Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(1)add-to-existing.mdx In your `app.tsx`, import `SolidBaseRoot` and wrap your `Router` component with it to provide necessary context. ```tsx import { SolidBaseRoot } from "@kobalte/solidbase/client"; import { Router } from "@solidjs/router"; import { FileRoutes } from "@solidjs/start/router"; export default function App() { return ( ); } ``` -------------------------------- ### Basic Preview Directive Syntax Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/preview-directive.mdx Demonstrates the fundamental structure of the `preview` directive, including the stage content and the optional divider. ```mdx :::preview --- ```tsx tab title="index.tsx" export function RenderedExample() { return ; } ``` ::: ``` -------------------------------- ### Enable Sitemap and Robots in SolidBase Config Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(4)sitemap-and-robots.mdx Configure your SolidBase application to generate sitemap.xml and robots.txt by setting the siteUrl and enabling the sitemap and robots features in the plugin configuration. ```typescript import { createSolidBase, defineTheme } from "@kobalte/solidbase/config"; import defaultTheme from "@kobalte/solidbase/default-theme"; const theme = defineTheme({ componentsPath: import.meta.resolve("./src/solidbase-theme"), extends: defaultTheme, }); const solidBase = createSolidBase(theme); export default { ...solidBase.startConfig({ ssr: true, }), plugins: [ solidBase.plugin({ title: "My Docs", description: "Documentation for my project", siteUrl: "https://docs.example.com", sitemap: true, robots: true, }), ], }; ``` -------------------------------- ### ANSI Terminal Output Source: https://github.com/kobaltedev/solidbase/blob/main/dev/src/routes/ec.mdx Example of ANSI escape codes used for terminal formatting, displaying text within a frame. ```ansi mr roboto in el terminilo ``` -------------------------------- ### Integrate Custom Theme with SolidBase Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/customization/custom-themes.mdx Import your custom theme definition and use it to create a SolidBase instance, configuring the application and its Vite plugin. ```typescript import { someTheme } from "awesome-solidbase-theme"; const solidBase = createSolidBase(someTheme); export default defineConfig({ ...solidBase.startConfig({ ... }), plugins: [solidBase.plugin({ ... })], }) ``` -------------------------------- ### Get Route Options for Axis Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Returns an accessor for route options filtered for a specific axis, based on the current route selection. ```typescript function useSolidBaseRouteOptions( axis: string, ): Accessor; ``` -------------------------------- ### Wrap App in SolidBaseRoot (Alternative) Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(1)add-to-existing.mdx If your router already has a `root` component, you can wrap its children with `SolidBaseRoot`. ```tsx { return {props.children}; }} > ``` -------------------------------- ### Get Current Route Selection Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Returns an accessor for the current route selection, which represents the active route axis values for the current pathname. ```typescript function useSolidBaseRoute(): Accessor; ``` -------------------------------- ### Disable Language Switcher for a Specific Block Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(1)language-switcher.mdx Use the `withoutLanguageSwitcher` meta option in a code block to prevent the toggle button from appearing for that specific example. ```markdown ```typescript withoutLanguageSwitcher // This block won't have the toggle ``` ``` -------------------------------- ### Add Component with CLI Source: https://github.com/kobaltedev/solidbase/blob/main/dev/src/routes/pm.mdx Adds a component using the solidui-cli. ```package-dlx solidui-cli@latest add button ``` -------------------------------- ### Configure Sitemap and Robots.txt Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(2)config.mdx Enable and configure the generation of `/sitemap.xml` and `/robots.txt`. The `sitemap` option can be a boolean or an object to control chunking, and `robots` can be a boolean or an object to define crawling rules. ```typescript // .. siteUrl: "https://docs.example.com", sitemap: true, robots: true, // .. ``` ```typescript // .. siteUrl: "https://docs.example.com", sitemap: { maxUrlsPerSitemap: 10000, }, robots: { rules: [ { userAgent: "*", allow: ["/"], disallow: ["/admin/"], }, ], }, // .. ``` -------------------------------- ### Get Locale by Path Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Retrieves the locale associated with a given path. Defaults to the server's pathname or client's location.pathname if no path is provided. ```typescript function getLocale(path?: string): ResolvedLocale; ``` -------------------------------- ### Get Frontmatter Data Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Returns the current page's frontmatter, cast to the requested type. Use this to access metadata defined in the page's frontmatter. ```typescript function useFrontmatter>(): Accessor< T | undefined >; ``` -------------------------------- ### Get Current Page Data Interfaces Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Defines the structure for accessing the current page's frontmatter, table of contents, edit link, and last updated timestamp. ```typescript interface CurrentPageData { frontmatter: BaseFrontmatter; toc?: Array; editLink?: string; lastUpdated?: number; } interface BaseFrontmatter { title?: string; titleTemplate?: string; description?: string; llms?: false | { exclude?: boolean }; } interface TableOfContentsItemData { title: string; href: string; children: Array; } ``` -------------------------------- ### Define Site Routes Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(2)config.mdx Configure site routes using the `routes` object. Define the URL path template and specify values for each route axis like project, version, and locale. Use `include` to create an allowlist for valid route combinations. ```typescript // .. routes: { path: "/{project}/{version}/{locale}", project: { default: "solidbase", values: { solidbase: { path: "", label: "SolidBase" }, router: { path: "router", label: "Router" }, }, }, version: { default: "latest", values: { latest: { path: "", label: "Latest" }, v1: { path: "v1", label: "v1" }, v0: { href: "https://v0.example.com", label: "v0" }, }, }, locale: { default: "en", values: { en: { path: "", label: "English", lang: "en-US" }, fr: { path: "fr", label: "Français", lang: "fr-FR" }, }, }, include: [ { project: ["solidbase", "router"], version: "latest", locale: ["en", "fr"], }, { project: "solidbase", version: "v1", locale: "en", }, ], }, // .. ``` -------------------------------- ### Tabbed SolidBaseApp Components (a.tsx, b.tsx) Source: https://github.com/kobaltedev/solidbase/blob/main/dev/src/routes/ec.mdx Demonstrates rendering SolidBaseApp with different configurations in tabbed files. Use this when you need to show variations of a component side-by-side. ```tsx import { SolidBaseApp } from "@kobalte/solidbase"; export default function App() { return ; } ``` ```tsx import { SolidBaseApp } from "@kobalte/solidbase"; export default function App() { return ; } ``` -------------------------------- ### Enable LLMs Feature (Concise) Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(3)llms.mdx A more concise way to enable the LLMs feature in your SolidBase config. ```typescript solidBase.plugin({ llms: true, }); ``` -------------------------------- ### Basic Preview Directive Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(0)markdown.mdx Use the `preview` directive to embed rendered content within a frame. This is useful for showcasing components or UI elements directly in your documentation. ```mdx :::preview ::: ``` ```html
Preview card Rendered MDX appears here.
``` -------------------------------- ### Define a Custom Theme Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/customization/custom-themes.mdx Use the `defineTheme` helper to create a custom theme. Provide the absolute path to your theme's components and optionally a config type. ```typescript import { defineTheme } from "@kobalte/solidbase/config"; type CustomThemeConfig = {}; const customTheme = defineTheme({ componentsPath: import.meta.resolve("./custom-theme"), }); ``` -------------------------------- ### useSolidBaseContext Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Provides access to the active SolidBase config and computed page title. The returned config already has the active locale's `themeConfig` merged into it. ```APIDOC ## useSolidBaseContext ### Description Provides access to the active SolidBase config and computed page title. ### Signature ```ts function useSolidBaseContext(): SolidBaseContextValue; interface SolidBaseContextValue { config: Accessor>; metaTitle: Accessor; } ``` ``` -------------------------------- ### SolidBase Configuration Interface Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(2)config.mdx Defines the structure for SolidBase configuration, including options for site metadata, internationalization, sitemaps, and theming. Refer to the SolidBase source code for all available options. ```typescript interface SolidBaseConfig { title?: string; titleTemplate?: string; description?: string; siteUrl?: string; logo?: string; issueAutolink?: IssueAutoLinkConfig | false; llms?: boolean; sitemap?: boolean | SitemapConfig; robots?: boolean | RobotsConfig; lang?: string; locales?: Record>; routes?: SolidBaseRoutesConfig; overrides?: Array>; themeConfig?: ThemeConfig; editPath?: string | ((path: string) => string); lastUpdated?: Intl.DateTimeFormatOptions | false; markdown?: MdxOptions; icons?: Omit | false; autoImport?: | (AutoImportOptions & { iconResolver?: ComponentResolverOption | false }) | true; } ``` -------------------------------- ### Configure Localized URLs for Sitemap Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(4)sitemap-and-robots.mdx When using localization, configure the lang and locales options in SolidBase to ensure equivalent localized pages are grouped in the sitemap with alternates and x-default entries. ```typescript // .. siteUrl: "https://docs.example.com", lang: "en-US", locales: { fr: { label: "Français", lang: "fr-FR", }, }, sitemap: true, // .. ``` -------------------------------- ### Display Product Name Source: https://github.com/kobaltedev/solidbase/blob/main/tests/fixtures/src/routes/index.mdx This snippet demonstrates how to display the product name using frontmatter variables in an MDX file. ```mdx ```md {frontmatter.product} ``` ``` -------------------------------- ### Landing Page Frontmatter Configuration Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/default-theme/landing.mdx Configure the landing page layout and content using frontmatter. Set `layout` to `home` and optionally configure `hero` and `features`. ```md --- layout: home hero: ... features: ... --- ``` -------------------------------- ### Custom Sitemap and Robots Configuration Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(4)sitemap-and-robots.mdx Customize sitemap and robots.txt generation by passing configuration objects instead of booleans. This allows for advanced settings like max URLs per sitemap and specific crawling rules. ```typescript // .. siteUrl: "https://docs.example.com", sitemap: { maxUrlsPerSitemap: 10000, }, robots: { rules: [ { userAgent: "*", allow: ["/"], disallow: ["/admin/"], }, ], }, // .. ``` -------------------------------- ### Use Copy Page Markdown Hook Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(3)llms.mdx In a custom theme, use the `useCopyPageMarkdown` hook from `@kobalte/solidbase/client` to replicate the default theme's copy button behavior. ```typescript import { useCopyPageMarkdown } from "@kobalte/solidbase/client"; ``` -------------------------------- ### GFM Autolinks Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(0)markdown.mdx SolidBase automatically detects URLs in Markdown and converts them into clickable links. This simplifies linking to external resources. ```md https://github.com/kobaltedev/solidbase ``` ```html https://github.com/kobaltedev/solidbase ``` -------------------------------- ### SolidBase Site Metadata Configuration Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(2)config.mdx Set site-wide metadata such as title, title template, description, canonical URL, and logo. The `siteUrl` is crucial for generating correct links in sitemaps and metadata. ```typescript // .. { title: "My Documentation Site", titleTemplate: "%s - MySite", description: "A comprehensive guide to MySite.", siteUrl: "https://docs.example.com", logo: "/logo.png", } // .. ``` -------------------------------- ### SolidBaseApp Integration Source: https://github.com/kobaltedev/solidbase/blob/main/dev/src/routes/index.mdx Basic integration of SolidBaseApp in a Solid application. Ensure SolidBaseApp is imported from '@kobalte/solidbase'. ```tsx import { SolidBaseApp } from "@kobalte/solidbase"; export default function App() { return ; } ``` -------------------------------- ### SolidStart SSR and Vite Configuration Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(2)config.mdx Configure Server-Side Rendering (SSR) and Vite options within your SolidStart configuration. Refer to SolidStart documentation for a full list of options. ```typescript // .. { ssr: false, vite: { // Vite configuration options }, } // .. ``` -------------------------------- ### GFM Task Lists Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(0)markdown.mdx SolidBase supports GitHub Flavored Markdown task lists, enabling the creation of checklists within your Markdown documents. ```md - [ ] to do - [x] done ``` ```html - [ ] to do - [x] done ``` -------------------------------- ### Configure Theme Settings Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(2)config.mdx Customize theme-specific settings like footer, social links, navigation, sidebar, and search in app.config.ts. ```typescript // .. themeConfig: { footer: // see Footer below; socialLinks: { // see Social Links below }; nav: { // see Navigation below }, sidebar: { // see Sidebar below }, search: { // see Search below }, }; // .. ``` -------------------------------- ### Configure Sidebar Navigation Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(2)config.mdx Set up the sidebar navigation structure by defining an array of sections. Each section has a title, a collapsed state, and an array of items, where each item includes a title, link, and an optional status. ```typescript // .. sidebar: { "/guide": [ { title: "Overview", collapsed: false, items: [ { title: "Introduction", link: "/", }, { title: "Quick Start", link: "/quick-start", status: "new", }, ], }, { title: "Features", collapsed: false, items: [ { title: "Feature 1", link: "/feature-1", }, ], }, ], "/reference": [ { title: "Reference", collapsed: false, items: [ { title: "Some API", link: "/some-api", } ], }, ], }, // .. ``` -------------------------------- ### Basic Layout Component Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/customization/custom-themes.mdx Create a minimal `Layout` component that renders its children, typically the current route content. ```tsx import { ParentProps } from "solid-js"; export default function Layout(props: ParentProps) { return <>{props.children}; } ``` -------------------------------- ### Configure Navigation Links Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(2)config.mdx Define main navigation links with text and corresponding URLs for the site header in app.config.ts. ```typescript // .. nav: [ { text: "Guide", link: "/guide", }, { text: "Reference", link: "/reference", }, ], // .. ``` -------------------------------- ### Configure Miscellaneous Options Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(2)config.mdx Set miscellaneous site options such as the site URL, edit path generator, last updated timestamp display, issue autolinking, LLM documentation generation, sitemap emission, and robots.txt generation. ```typescript // .. siteUrl: "https://docs.example.com" editPath: "https://github.com/[USERNAME]/[REPO]/edit/main/docs/:path" lastUpdated: false; issueAutolink: "https://github.com/[USERNAME]/[REPO]/issues/:issue" llms: true; sitemap: true; robots: true; // .. ``` -------------------------------- ### Layout Configuration for Home Page Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/frontmatter.mdx Use `layout: home` in the frontmatter to enable the default landing page layout. This disables several standard navigation and metadata elements. ```yaml layout: home ``` -------------------------------- ### GFM Tables Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(0)markdown.mdx SolidBase supports GitHub Flavored Markdown tables, allowing for structured data presentation with alignment options. ```md | a | b | c | d | | -------- | :------- | -------: | :------: | | longword | longword | longword | longword | | short | short | short | `short` | ``` ```html | a | b | c | d | | -------- | :------- | -------: | :------: | | longword | longword | longword | longword | | short | short | short | `short` | ``` -------------------------------- ### Enable LLMs Feature in SolidBase Config Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(3)llms.mdx Turn on the LLMs feature by setting `llms: true` in your SolidBase config file. This will generate `llms.txt` and markdown files for your routes. ```typescript import { createSolidBase, defineTheme, } from "@kobalte/solidbase/config"; import defaultTheme from "@kobalte/solidbase/default-theme"; const theme = defineTheme({ componentsPath: import.meta.resolve("./src/solidbase-theme"), extends: defaultTheme, }); const solidBase = createSolidBase(theme); export default { ...solidBase.startConfig({ ssr: true, }), plugins: [ solidBase.plugin({ title: "My Docs", description: "Documentation for my project", llms: true, themeConfig: { sidebar: { "/": [ { title: "Guide", items: [ { title: "Getting Started", link: "/guide/getting-started" }, ], }, ], }, }, }), ], }; ``` -------------------------------- ### Nested Container Directives in Preview Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/preview-directive.mdx Illustrates how to use a longer outer fence for the `preview` directive when its panel contains another container directive, such as `tip`. ```mdx ::::preview --- :::tip Use a longer outer fence when the panel contains another directive. ::: :::: ``` -------------------------------- ### Tip Directive Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(0)markdown.mdx Use the `:::tip` directive for optional information that helps a user be more successful. ```markdown :::tip Optional information to help a user be more successful. ::: ``` ```html :::tip Optional information to help a user be more successful. ::: ``` -------------------------------- ### getTheme Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Returns the current theme as determined by the theme cookie and system preferences. ```APIDOC ## getTheme ### Description Returns the current theme as determined by the theme cookie and system preferences. ### Signature ```ts function getTheme(): "light" | "dark"; ``` ``` -------------------------------- ### Configure Markdown Options Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(2)config.mdx Set markdown plugins, table of contents depth, remark/rehype plugins, and package manager support in app.config.ts. ```typescript // .. markdown: { expressiveCode: { // see Expressive Code below }, toc: { minDepth: 2, // Minimum heading depth maxDepth: 4, // Maximum heading depth }, remarkPlugins: [ // Add your remark plugins here ], rehypePlugins: [ // Add your rehype plugins here ], packageManager: { // see Package Manager below } }, // .. ``` -------------------------------- ### GFM Alerts: TIP Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(0)markdown.mdx Render GitHub Flavored Markdown alerts as callouts. The `TIP` alert type provides optional information to help a user be more successful. ```md > [!TIP] > Optional information to help a user be more successful. ``` ```html > [!TIP] > Optional information to help a user be more successful. ``` -------------------------------- ### Set Custom Theme in SolidBase Config Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/customization/extending-themes.mdx Set the custom theme as the active theme in your SolidBase configuration using 'createSolidBase'. This integrates your extended theme into the SolidStart application. ```typescript import { defineConfig } from "@solidjs/start/config"; import { createSolidBase, defineTheme } from "@kobalte/solidbase/config"; import defaultTheme from "@kobalte/solidbase/default-theme"; const customTheme = defineTheme({ componentsPath: import.meta.resolve("./src/custom-theme"), extends: defaultTheme, }); const solidBase = createSolidBase(customTheme); export default defineConfig({ ...solidBase.startConfig({ ssr: true, }), plugins: [ solidBase.plugin({ // your solidbase configuration }), ], }); ``` -------------------------------- ### useSolidBaseRoutes Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Returns route config helpers for the current `routes` selection. `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`. ```APIDOC ## useSolidBaseRoutes ### Description Returns route config helpers for the current `routes` selection. ### Signature ```ts function useSolidBaseRoutes(): { routes: SolidBaseRoutesConfig | undefined; current: Accessor; path(selection: Partial): `/${string}` | undefined; options( axis: string, selection?: Partial, ): SolidBaseRouteOption[]; }; type SolidBaseRouteSelection = Record; type SolidBaseRouteOption = { name: string; axis: string; path?: string; href?: string; isExternal: boolean; selection?: SolidBaseRouteSelection; meta: SolidBaseRouteValueConfig; }; ``` ``` -------------------------------- ### Access SolidBase Context Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Provides access to the active SolidBase config and computed page title. The returned config includes the active locale's themeConfig merged into it. ```typescript function useSolidBaseContext(): SolidBaseContextValue; interface SolidBaseContextValue { config: Accessor>; metaTitle: Accessor; } ``` -------------------------------- ### Configure i18n in SolidBase Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(2)i18n.mdx Configure internationalisation settings, including locale paths, default locale, and available locale values, within the SolidBase configuration. ```typescript const solidBase = createSolidBase(theme); export default defineConfig({ ...solidBase.startConfig({ ... }), plugins: [ solidBase.plugin({ ... routes: { path: "/{locale}", locale: { default: "en", values: { en: { path: "", label: "English", lang: "en-US" }, fr: { path: "fr", label: "Français", lang: "fr-FR" }, }, }, }, overrides: [ { locale: "fr", themeConfig: { ... }, }, ], ... }), ], }); ``` -------------------------------- ### setTheme Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Updates the current theme. ```APIDOC ## setTheme ### Description Updates the current theme. ### Signature ```ts function setTheme(theme: "light" | "dark" | "system"): void; ``` ``` -------------------------------- ### Info Directive Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(0)markdown.mdx Use the `:::info` directive to highlight important information that users should take into account, even when skimming. ```markdown :::info Highlights information that users should take into account, even when skimming. ::: ``` ```html :::info Highlights information that users should take into account, even when skimming. ::: ``` -------------------------------- ### Previous and Next Link Configuration Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/frontmatter.mdx Configure previous and next navigation links using the `prev` and `next` keys. You can disable links, override text, or specify a custom link target. ```typescript type RelativePageConfig = | string | false | { text?: string; link?: string; }; ``` -------------------------------- ### Basic Code Blocks with Expressive Code Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(0)markdown.mdx Use triple backticks to create code blocks with syntax highlighting. Specify the language after the opening backticks for proper rendering. ```tsx export default function App() { return ( ); } ``` ```json { "data": { "values": 4 } } ``` -------------------------------- ### Preview Directive Without a Panel Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/preview-directive.mdx Shows a minimal `preview` directive that only includes content for the stage, omitting the panel section. ```mdx :::preview ::: ``` -------------------------------- ### useSolidBaseRouteOptions Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Returns route options for one axis using the current route selection. ```APIDOC ## useSolidBaseRouteOptions ### Description Returns route options for one axis using the current route selection. ### Signature ```ts function useSolidBaseRouteOptions( axis: string, ): Accessor; ``` ``` -------------------------------- ### Update app.config.ts with SolidBase Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(1)add-to-existing.mdx Modify your `app.config.ts` file to include SolidBase's configuration by wrapping your existing config with `withSolidBase`. ```typescript import { defineConfig } from "@solidjs/start/config"; import { withSolidBase } from "@kobalte/solidbase/config"; export default defineConfig(withSolidBase(/* your SolidStart config */)); ``` -------------------------------- ### Action Badges Frontmatter Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/frontmatter.mdx Add action badges to pages using the `badges` key in the frontmatter. Each badge can have an icon, label, and an optional URL. ```markdown --- title: Disclosure badges: - icon: npm label: 0.2.4 - icon: gh label: source url: https://github.com/kobaltedev/solidbase --- ``` -------------------------------- ### Fetch Current Page Markdown Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Asynchronously fetches the current page's generated markdown content. Allows specifying a custom fetch implementation. ```typescript function getCurrentPageMarkdown( pathname?: string, fetchImpl?: typeof fetch, ): Promise; ``` -------------------------------- ### Enable Language Switcher in SolidBase Config Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(1)language-switcher.mdx Configure the `languageSwitcher` option to `true` in your `app.config.ts` to enable the basic functionality of the Language Switcher plugin. ```typescript import { defineConfig } from "@solidjs/start/config"; import { withSolidBase } from "@kobalte/solidbase/config"; export default defineConfig( withSolidBase( /* your SolidStart config */ { markdown: { expressiveCode: { languageSwitcher: true, }, }, }, ), ); ``` -------------------------------- ### Add HTML Attributes for SSR (entry-server.tsx) Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(1)add-to-existing.mdx In `entry-server.tsx`, spread `getHtmlProps()` onto the `html` element to include `lang` and `data-theme` attributes during SSR. ```tsx // @refresh reload import { StartServer, createHandler } from "@solidjs/start/server"; import { getHtmlProps } from "@kobalte/solidbase/server"; export default createHandler(() => ( ( ... )} /> )); ``` -------------------------------- ### useCopyPageMarkdown Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx A hook that provides functionality to copy the current page's markdown content to the clipboard. It exposes state and control over the copying process. ```APIDOC ## `useCopyPageMarkdown` ### Description This hook facilitates copying the markdown representation of the current page to the clipboard. It provides reactive accessors for the copying state, readiness, and a function to trigger the copy operation. ### Method `useCopyPageMarkdown(): { canCopy: Accessor, copy: () => Promise, isCopying: Accessor, isReady: Accessor, state: Accessor }` ### Parameters None ### Returns An object containing: - **canCopy** (Accessor): A reactive accessor that indicates whether the page content can be copied. - **copy** ( () => Promise): A function that initiates the markdown copy operation. Returns a promise that resolves to a boolean indicating success. - **isCopying** (Accessor): A reactive accessor that is true while the copy operation is in progress. - **isReady** (Accessor): A reactive accessor that indicates if the hook is ready to perform the copy operation. - **state** (Accessor): A reactive accessor representing the current state of the copy operation ('idle', 'success', or 'error'). ``` -------------------------------- ### useSolidBaseRoute Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Returns the current route selection accessor. ```APIDOC ## useSolidBaseRoute ### Description Returns the current route selection accessor. ### Signature ```ts function useSolidBaseRoute(): Accessor; ``` ``` -------------------------------- ### useLocale Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Allows reading and updating the current locale, and provides utilities for managing paths that don't include the locale. ```APIDOC ## useLocale ### Description Allows reading and updating the current locale, and provides utilities for managing paths that don't include the locale. ### Type Definitions ```ts interface UseLocale { locales: Array>; currentLocale: Accessor>; setLocale(locale: ResolvedLocale): void; applyPathPrefix(path: string): `/${string}`; routePath: Accessor<`/${string}`>; } interface ResolvedLocale { code: string; isRoot?: boolean; config: LocaleConfig; option?: SolidBaseRouteOption; } ``` ``` -------------------------------- ### Tabbed Content Structure Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(0)markdown.mdx Organize content into tabs using the `tab-group` and `tab` syntax. The `[key]` attribute is used for syncing and persistence of the active tab. ```markdown ::::tab-group[key] ::::tab[Title A] Hey I'm A ::: ::::tab[Title B] Hi this is B ::: :::: ``` ```html ::::tab-group :::tab[Title A] Hey I'm A ::: :::tab[Title B] Hi this is B ::: :::: ``` -------------------------------- ### GFM Alerts: CAUTION Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(0)markdown.mdx Render GitHub Flavored Markdown alerts as callouts. The `CAUTION` alert type highlights negative potential consequences of an action. ```md > [!CAUTION] > Negative potential consequences of an action. ``` ```html > [!CAUTION] > Negative potential consequences of an action. ``` -------------------------------- ### Set Theme Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Updates the current theme to 'light', 'dark', or 'system'. This function modifies the theme preference. ```typescript function setTheme(theme: "light" | "dark" | "system"): void; ``` -------------------------------- ### Warning Directive Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/features/(0)markdown.mdx Use the `:::warning` directive for critical content demanding immediate user attention due to potential risks. ```markdown :::warning Critical content demanding immediate user attention due to potential risks. ::: ``` ```html :::warning Critical content demanding immediate user attention due to potential risks. ::: ``` -------------------------------- ### copyTextToClipboard Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Copies the provided text to the system clipboard. It can optionally accept a custom clipboard setter function. ```APIDOC ## `copyTextToClipboard` ### Description Copies the provided text to the system clipboard. This function is asynchronous and returns a Promise that resolves when the operation is complete. ### Method `copyTextToClipboard(text: string, writeText?: ClipboardSetter): Promise` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Parameters - **text** (string) - Required - The text content to be copied to the clipboard. - **writeText** (ClipboardSetter) - Optional - A custom function to handle the actual writing to the clipboard. If not provided, a default implementation is used. ``` -------------------------------- ### Preview Directive Components Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/customization/custom-themes.mdx Override default MDX components like `Preview`, `PreviewStage`, and `PreviewPanel` to customize the rendering of `preview` directives. ```tsx import type { ParentProps } from "solid-js"; export function Preview(props: ParentProps) { return
{props.children}
; } export function PreviewStage(props: ParentProps) { return
{props.children}
; } export function PreviewPanel(props: ParentProps) { return
{props.children}
; } ``` -------------------------------- ### getThemeVariant Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Similar to `getTheme`, but indicates whether the theme is being derived from system preferences. This is intended to be used in theme switchers. ```APIDOC ## getThemeVariant ### Description Similar to `getTheme`, but indicates whether the theme is being derived from system preferences. This is intended to be used in theme switchers. ### Signature ```ts function getThemeVariant(): "light" | "dark" | "system"; ``` ``` -------------------------------- ### Check if Page Markdown Copy is Possible Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/reference/runtime-api.mdx Determines if the current page's markdown can be copied, based on LLM configuration and page settings. ```typescript function canCopyPageMarkdown( configLlms: boolean | undefined, llms: false | { exclude?: boolean } | undefined, ): boolean; ``` -------------------------------- ### F# String With Wrapping Source: https://github.com/kobaltedev/solidbase/blob/main/dev/src/routes/ec.mdx An F# code snippet containing a long string that is configured to wrap. ```fsharp let withwrap = "73149cdfba1b194331282cc31e46c25473149cdfba1b194331282cc31e46c25473149cdfba1b194331282cc31e46c25473149cdfba1b194331282cc31e46c25473149cdfba1b194331282cc31e46c254" ``` -------------------------------- ### Apply Route Overrides Source: https://github.com/kobaltedev/solidbase/blob/main/docs/src/routes/guide/(2)config.mdx Use the `overrides` array to apply specific configurations for matching route selections. This allows for customization of titles, theme settings, and other options based on the current route. ```typescript // .. overrides: [ { project: "router", title: "Router Docs", themeConfig: { socialLinks: { github: "https://github.com/solidjs/solid-router", discord: "https://discord.com/invite/solidjs", }, } }, { locale: "fr", titleTemplate: ":title - Documentation française", }, { project: "solidbase", version: "v1", }, ], // .. ```