Skip to content

Commit 579cb98

Browse files
LadyBluenotesjer3m01
LadyBluenotes
and
jer3m01
authored
feat: copy page button
* feat(default-theme): badges --------- Co-authored-by: jer3m01 <jer3m01@jer3m01.com>
1 parent f0a9df7 commit 579cb98

55 files changed

Lines changed: 2103 additions & 204 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
gt pul
12
<div align="center">
23
<a href="https://github.com/kobaltedev/solidbase" target="_blank"><img width="400" src="https://raw.githubusercontent.com/kobaltedev/solidbase/refs/heads/main/.github/solidbase.png" alt="SolidBase"></a>
34
</div>

‎docs/src/routes/guide/features/(3)llms.mdx‎

Lines changed: 44 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -15,33 +15,35 @@ import { createSolidBase, defineTheme } from "@kobalte/solidbase/config";
1515
import defaultTheme from "@kobalte/solidbase/default-theme";
1616

1717
const theme = defineTheme({
18-
componentsPath: import.meta.resolve("./src/solidbase-theme"),
19-
extends: defaultTheme,
18+
componentsPath: import.meta.resolve("./src/solidbase-theme"),
19+
extends: defaultTheme,
2020
});
2121

2222
const solidBase = createSolidBase(theme);
2323

2424
export default {
25-
...solidBase.startConfig({
26-
ssr: true,
27-
}),
28-
plugins: [
29-
solidBase.plugin({
30-
title: "My Docs",
31-
description: "Documentation for my project",
32-
llms: true,
33-
themeConfig: {
34-
sidebar: {
35-
"/": [
36-
{
37-
title: "Guide",
38-
items: [{ title: "Getting Started", link: "/guide/getting-started" }],
39-
},
40-
],
41-
},
42-
},
43-
}),
44-
],
25+
...solidBase.startConfig({
26+
ssr: true,
27+
}),
28+
plugins: [
29+
solidBase.plugin({
30+
title: "My Docs",
31+
description: "Documentation for my project",
32+
llms: true,
33+
themeConfig: {
34+
sidebar: {
35+
"/": [
36+
{
37+
title: "Guide",
38+
items: [
39+
{ title: "Getting Started", link: "/guide/getting-started" },
40+
],
41+
},
42+
],
43+
},
44+
},
45+
}),
46+
],
4547
};
4648
```
4749

@@ -50,6 +52,26 @@ Once enabled, the build emits:
5052
- `llms.txt` at the site root
5153
- one `.md` file per markdown route, such as `index.md` and `guide/getting-started.md`
5254

55+
## Default theme page actions
56+
57+
When you use the default theme, enabling `llms: true` also adds a page-level copy button that copies the generated markdown for the current page.
58+
59+
```ts title="app.config.ts"
60+
solidBase.plugin({
61+
llms: true,
62+
});
63+
```
64+
65+
The button uses the same generated `.md` output that powers `llms.txt`, so the copied content stays aligned with the markdown artifacts emitted by the build.
66+
67+
If you're building a custom theme, you can reuse the same behavior from the client API instead of copying the default theme implementation:
68+
69+
```ts title="theme.tsx"
70+
import { useCopyPageMarkdown } from "@kobalte/solidbase/client";
71+
```
72+
73+
The hook exposes copy state, in-flight state, and page eligibility so custom themes can provide their own UI while keeping the same LLMS-backed behavior.
74+
5375
## What goes into `llms.txt`
5476

5577
SolidBase builds the index from your docs metadata:

‎docs/src/routes/reference/default-theme/components/article.mdx‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,40 @@
11
---
22
title: Article
3+
badges:
4+
- icon: npm
5+
label: since 0.0.9
6+
- icon: source
7+
label: Source
8+
url: https://github.com/kobaltedev/solidbase/blob/main/src/default-theme/components/Article.tsx
39
---
410

511
# {frontmatter.title}
612

713
## Edit Link
814

9-
TODO
15+
Shows the configured edit link for the current page.
16+
17+
Requirements:
18+
19+
- global `editPath` must be configured
20+
- page `editLink` frontmatter must not be `false`
21+
22+
The link target comes from `pageData().editLink`.
1023

1124
## Last Updated
1225

13-
The last updated date is extracted using git at compile time.
26+
Last updated rendering is handled by [`LastUpdated`](/reference/default-theme/components/last-updated).
27+
28+
Copy button behavior is handled by [`CopyPageLink`](/reference/default-theme/components/copy-page-link).
29+
30+
## Other Responsibilities
31+
32+
The component also:
33+
34+
- includes landing-page [`Hero`](/reference/default-theme/components/hero) and [`Features`](/reference/default-theme/components/features)
35+
- includes heading badges through [`Badges`](/reference/default-theme/components/badges)
36+
- wraps the page content
37+
- manages previous and next navigation
38+
- includes the [`Footer`](/reference/default-theme/components/footer) when enabled
39+
- places [`TableOfContents`](/reference/default-theme/components/toc) in the aside on non-mobile layouts
40+
- adds keyboard support for selecting expressive-code blocks

‎docs/src/routes/reference/default-theme/components/badges.mdx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: Badges
3+
badges:
4+
- icon: npm
5+
label: since 0.5.0
6+
- icon: source
7+
label: Source
8+
url: https://github.com/kobaltedev/solidbase/blob/main/src/default-theme/components/Badges.tsx
9+
---
10+
11+
# {frontmatter.title}
12+
13+
Badge row shown underneath a page heading.
14+
15+
## Props
16+
17+
```ts
18+
function Badges(props: {
19+
badges?: Array<{
20+
icon?: string;
21+
label: string;
22+
url?: string;
23+
}>;
24+
}): JSX.Element;
25+
```
26+
27+
## Data Source
28+
29+
- page frontmatter `badges`
30+
- `themeConfig.badges.icons`
31+
32+
## Behavior
33+
34+
- omitted when no badges are provided
35+
- resolves `badge.icon` from `themeConfig.badges.icons`
36+
- supports icon values as raw SVG strings
37+
- supports icon values as Solid components
38+
- uses linked badges when `url` is present
39+
- uses static badges when `url` is omitted
40+
- falls back to label-only badges when an icon key is missing

‎docs/src/routes/reference/default-theme/components/copy-page-link.mdx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
title: Copy Page Link
3+
badges:
4+
- icon: npm
5+
label: since 0.5.0
6+
- icon: source
7+
label: Source
8+
url: https://github.com/kobaltedev/solidbase/blob/main/src/default-theme/components/CopyPageLink.tsx
9+
---
10+
11+
# {frontmatter.title}
12+
13+
Page-heading control for copying the current page's generated markdown.
14+
15+
## Data Source
16+
17+
- [`useCopyPageMarkdown`](/reference/runtime-api#usecopypagemarkdown)
18+
- `themeConfig.text`
19+
20+
## Behavior
21+
22+
- omitted when page markdown copying is unavailable
23+
- exposes idle, success, and error states
24+
- disables interaction until the client is ready
25+
- updates its icon for each copy state
26+
- uses the localized theme text labels for button content
27+
28+
## State Labels
29+
30+
- idle: `copyPage`
31+
- success: `copiedPage`
32+
- error: `copyFailedPage`

‎docs/src/routes/reference/default-theme/components/features.mdx‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,32 @@
11
---
22
title: Features
3+
badges:
4+
- icon: npm
5+
label: since 0.0.9
6+
- icon: source
7+
label: Source
8+
url: https://github.com/kobaltedev/solidbase/blob/main/src/default-theme/components/Features.tsx
39
---
410

511
# {frontmatter.title}
612

7-
TODO
13+
Landing-page feature grid.
14+
15+
## Props
16+
17+
```ts
18+
function Features(props: {
19+
features: Array<{
20+
icon?: string;
21+
title?: string;
22+
details?: string;
23+
}>;
24+
}): JSX.Element;
25+
```
26+
27+
## Behavior
28+
29+
- creates one card per feature
30+
- `icon` is injected as HTML
31+
- `title` becomes the card heading
32+
- `details` becomes the body copy

‎docs/src/routes/reference/default-theme/components/footer.mdx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
---
22
title: Footer
3+
badges:
4+
- icon: npm
5+
label: since 0.0.9
6+
- icon: source
7+
label: Source
8+
url: https://github.com/kobaltedev/solidbase/blob/main/src/default-theme/components/Footer.tsx
39
---
410

511
# {frontmatter.title}

‎docs/src/routes/reference/default-theme/components/header.mdx‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,28 @@
11
---
22
title: Header
3+
badges:
4+
- icon: npm
5+
label: since 0.0.9
6+
- icon: source
7+
label: Source
8+
url: https://github.com/kobaltedev/solidbase/blob/main/src/default-theme/components/Header.tsx
39
---
410

511
# {frontmatter.title}
612

7-
TODO
13+
Top navigation, locale controls, theme controls, and mobile navigation affordances.
14+
15+
## Uses
16+
17+
- `themeConfig.nav`
18+
- `themeConfig.logo`
19+
- sidebar state from the default-theme context
20+
- page table of contents data
21+
22+
## Behavior
23+
24+
- shows desktop nav links when `themeConfig.nav` is set
25+
- uses a mobile nav dialog on small screens
26+
- includes [`LocaleSelector`](/reference/default-theme/components/locale-selector) and [`ThemeSelector`](/reference/default-theme/components/theme-selector)
27+
- shows mobile sidebar and table-of-contents toggles only when content exists
28+
- marks nav links active using `activeMatch` or the item `link`

‎docs/src/routes/reference/default-theme/components/hero.mdx‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,43 @@
11
---
22
title: Hero
3+
badges:
4+
- icon: npm
5+
label: since 0.0.9
6+
- icon: source
7+
label: Source
8+
url: https://github.com/kobaltedev/solidbase/blob/main/src/default-theme/components/Hero.tsx
39
---
410

511
# {frontmatter.title}
612

7-
TODO
8-
13+
Landing-page hero block.
14+
15+
## Props
16+
17+
```ts
18+
function Hero(props: {
19+
data: {
20+
name?: string;
21+
text?: string;
22+
tagline?: string;
23+
image?: {
24+
src: string;
25+
alt?: string;
26+
};
27+
actions?: Array<{
28+
theme?: string;
29+
text?: string;
30+
link?: string;
31+
}>;
32+
};
33+
}): JSX.Element;
34+
```
35+
36+
## Behavior
37+
38+
- uses page `frontmatter.title` as the main heading
39+
- includes `text`, `tagline`, and `image` when present
40+
- includes action links from `data.actions`
41+
- external action links open in a new tab
42+
- action `theme` defaults to `brand`
43+

‎docs/src/routes/reference/default-theme/components/last-updated.mdx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,24 @@
11
---
22
title: Last Updated
3+
badges:
4+
- icon: npm
5+
label: since 0.0.9
6+
- icon: source
7+
label: Source
8+
url: https://github.com/kobaltedev/solidbase/blob/main/src/default-theme/components/LastUpdated.tsx
39
---
410

511
# {frontmatter.title}
612

7-
TODO
13+
Displays the current page timestamp.
814

9-
The last updated date is extracted using git at compile time.
15+
## Data Source
16+
17+
- reads `pageData().lastUpdated`
18+
- formats the date with the global `lastUpdated` config
19+
20+
## Behavior
21+
22+
- shows `Last updated: ?` when no valid timestamp is available
23+
- uses `Intl.DateTimeFormat` with the active runtime locale
24+
- defaults come from the global SolidBase config

0 commit comments

Comments
 (0)