DOCSEARCHbyAlgolia
Submit Docs

SolidBase

website·Indexed 31 days ago

https://solidbase.dev

A fully customizable Static Site Generation framework for SolidStart. It features built-in Markdown and MDX support, internationalization (i18n), a default documentation theme, and tools for generating sitemaps, robots.txt, and llms.txt indices.

Tokens
14.4K
Snippets
88
Records
121
Agent score
60%

What's inside SolidBase

  1. Overview of SolidBase for SolidStart

    SolidBase is a fully featured and customizable Static Site Generation (SSG) framework built for SolidStart. It is specifically designed for creating documentation sites by providing deep integration with Markdown and MDX.

  2. Implement a version switcher with the Version Selector component

    The Version Selector is a UI component used for sites that configure routes.version. It allows users to switch between different versions of a project.

    Key behaviors include:

    • Visibility: The selector is automatically omitted if fewer than two version options are available.
    • UI Implementation: It is built using the Kobalte Popover component.
    • Labeling: It displays the meta.label of a version option if provided; otherwise, it defaults to the option name. It also applies route override patches from the resolved configuration to version labels.
    • Navigation: Selecting a version navigates the user to the root of that version's route. It supports external version values via the href attribute.
    • Scoping: Available versions are scoped to the current project.

  3. Article component layout and feature responsibilities

    The Article component serves as the primary page wrapper and is responsible for integrating several other theme components and behaviors, including:

    • Rendering landing page elements like Hero and Features.
    • Displaying heading badges via the Badges component.
    • Managing 'previous' and 'next' page navigation.
    • Including the Footer (if enabled).
    • Positioning the TableOfContents in the aside for non-mobile layouts.
    • Providing keyboard support for selecting expressive-code blocks.
    • Handling 'Last Updated' timestamps via the LastUpdated component.
    • Managing copy button behavior via CopyPageLink.

  4. Implement a Project Selector for project-based routing

    The Project Selector is a project switcher component designed for sites that configure routes.project. It uses a Kobalte Popover to allow users to switch between different projects.

    Key Behaviors:

    • Visibility: The selector is automatically omitted if fewer than two project options are available.
    • Labeling: It displays the meta.label of a project option if provided; otherwise, it defaults to the option name.
    • Navigation: Selecting a project navigates the user to the root route of that project.
    • Cross-Version Compatibility: Project options remain visible across version gaps by falling back to a valid route selection for the target project.
    • External Support: External project values are supported via the href attribute.

  5. Use the Copy Page Link component to copy page markdown

    The Copy Page Link is a page-heading control that allows users to copy the generated markdown of the current page. It automatically handles different interaction states (idle, success, and error) and updates its icon accordingly. The component is omitted if page markdown copying is unavailable and remains disabled until the client is ready.

    It relies on the useCopyPageMarkdown runtime API and themeConfig.text for its data and localization.

  6. Implement a locale switcher using the Locale Selector component

    The Locale Selector provides a dropdown interface for users to switch between different languages on multi-locale sites. It is built using the Kobalte Select component and automatically displays the config.label for each configured locale. The component is automatically omitted from the UI if fewer than two locales are configured in the project.

  7. Define application routes in SolidBase

    SolidBase uses the SolidStart file-based routing system. Routes are defined within the src/routes directory, where each file corresponds to a URL path. For example, src/routes/index.mdx maps to the root route (/) and src/routes/about.mdx maps to /about.
    ├─ src
│  ├─ routes
│  │  ├─ index.mdx
│  │  └─ about.mdx
│  ├─ app.tsx
│  ├─ entry-client.tsx
│  └─ entry-server.tsx
└─ app.config.ts

  8. Group related code blocks into tabs

    Organize multiple related code blocks by adding the tab keyword and a title attribute after the language identifier. This groups the blocks into a tabbed interface.
    import { SolidBaseApp } from "@kobalte/solidbase";
export default function App() { return <SolidBaseApp a />; }
    import { SolidBaseApp } from "@kobalte/solidbase";
export default function App() { return <SolidBaseApp b />; }

  9. Customize SolidBase themes and components

    All SolidBase components can be overridden, allowing developers to replace default styles and behaviors to create a unique custom design for their website.

  10. Create an extended theme in SolidBase

    To extend the default theme, use defineTheme to create a custom theme that extends defaultTheme from @kobalte/solidbase/default-theme. You must specify a componentsPath pointing to the directory containing your custom theme components. This custom theme is then passed to createSolidBase to generate the SolidJS Start configuration and plugin.
    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
		}),
	],
});

  12. Exclude specific pages from the sitemap

    You can prevent specific pages from appearing in the generated sitemap by adding configuration to the page's markdown frontmatter. Use sitemap: false or the sitemap.exclude property.
    ---
title: Internal
sitemap:
  exclude: true
---