Skip to content

Commit 4556c50

Browse files
aspectrrfukouda
aspectrr
and
fukouda
authored
Various docs improvements (#10)
* feat: inline code to spec, collapsible code segments, fix llms txt, fix nav * fix: remove changelog filtering * fix: update icon, add in shimmering logo * fix: fix docs nits * fix: docs stuff (#9) * fix: docs stuff * fix: linking + biome errors * docs: mobile mode * fix: add back in flag handlers for code blocks * fix: add more steel-cli docs * fix: add better self hosting docs * fix: add more cli docs * fix: update concurrency limits --------- Co-authored-by: nas <nasr.mohamed244@gmail.com>
1 parent 2d9c85e commit 4556c50

26 files changed

Lines changed: 1245 additions & 322 deletions

File tree

‎.rules‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Always user the context7 tool for searching for relevant documentation
2+
Please never include any emojis or special characters in your code/documentation unless explicitly asked
3+
Please ask the user if you have any questions before proceeding.
4+
Please do not and I repeat DO NOT make any assumptions about what you are supposed to be doing, if you have any questions please reach out to the user immediately.

‎app/(home)/overview/_pages/page.en.tsx‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import { Brackets, Database } from 'lucide-react';
2-
import Image from 'next/image';
3-
import { Card, Cards, SmallCard } from '@/components/card';
1+
import { Brackets, Database } from "lucide-react";
2+
import Image from "next/image";
3+
import { Card, Cards, SmallCard } from "@/components/card";
44
import {
55
API,
66
BrowserUseIcon,
77
ClaudeIcon,
88
Cloud,
99
Container,
10-
FileIcon,
1110
MagicIcon,
1211
OpenAIIcon,
1312
PythonIcon,
1413
TSIcon,
15-
} from '@/components/ui/icon';
16-
import SteelLogo from '@/public/images/logo.png';
14+
} from "@/components/ui/icon";
15+
import SteelLogo from "@/public/images/logo.png";
16+
import { LiquidMetal as LiquidMetal1 } from "@paper-design/shaders-react";
1717

1818
export default function HomePage() {
1919
return (
@@ -22,13 +22,25 @@ export default function HomePage() {
2222
<div className="space-y-10">
2323
<div className="space-y-1">
2424
<div className="flex space-x-6 items-end">
25-
<Image
26-
alt="metallic logo"
27-
src={SteelLogo}
28-
width={188}
29-
height={140}
30-
className="mt-0 mb-6 first-line:rounded-md bg-background"
31-
priority
25+
<LiquidMetal1
26+
image={SteelLogo as HTMLImageElement}
27+
speed={1}
28+
colorBack="#00000000"
29+
colorTint="#FFFFFF"
30+
softness={0.1}
31+
repetition={2}
32+
shiftRed={0.3}
33+
shiftBlue={0.3}
34+
distortion={0.07}
35+
contour={0.4}
36+
scale={1}
37+
rotation={0}
38+
angle={70}
39+
style={{
40+
borderRadius: "12px",
41+
height: "188px",
42+
width: "188px",
43+
}}
3244
/>
3345
<div className="flex flex-col [&_p]:mb-6 space-y-3">
3446
<h3 className="text-3xl">Steel Documentation</h3>

‎app/[...slug]/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ export default async function Page(props: {
146146
code: (props: React.PropsWithChildren) => (
147147
<code
148148
{...props}
149-
className="border border-border rounded-md p-1 bg-code text-sm text-muted-foreground [h1_&]:text-xl [&_code]:text-sm"
149+
className="border border-border rounded-md p-1 bg-yellow-300 text-sm text-muted-foreground [h1_&]:text-xl [&_code]:text-sm"
150150
/>
151151
),
152152
hr: (props: React.PropsWithChildren) => (
@@ -228,7 +228,7 @@ export default async function Page(props: {
228228
code: (props: React.PropsWithChildren) => (
229229
<code
230230
{...props}
231-
className="border border-border rounded-md p-1 bg-code text-sm text-muted-foreground [h1_&]:text-xl [&_code]:text-sm"
231+
className="border border-border rounded-md py-0.5 px-1.5 text-[13px] leading-[20px] tracking-[-0.1px] font-normal align-middle bg-[var(--inline-code-bg)] text-[var(--inline-code-text)] [h1_&]:text-xl [&_code]:text-[13px] font-mono"
232232
/>
233233
),
234234
hr: (props: React.PropsWithChildren) => (

‎app/favicon.ico‎

113 KB
Binary file not shown.

‎app/global.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,8 +135,9 @@
135135
--sidebar-accent-foreground: oklch(0.985 0 0);
136136
--sidebar-border: oklch(0.269 0 0);
137137
--sidebar-ring: oklch(0.439 0 0);
138+
--inline-code-bg: #fdbe0012;
139+
--inline-code-text: #f0c000;
138140
/* CodeHike Styling */
139-
140141
--ch-0: #232323;
141142
--ch-1: #fff; /* Base text color */
142143
--ch-2: #9399b2; /* Not used */

‎app/llms-full.txt/route.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@ import { source } from '@/lib/source';
55
export const revalidate = false;
66

77
export async function GET() {
8-
const scan = source.getPages().map(getLLMText);
8+
const scan = source
9+
.getPages()
10+
.filter((page) => !page.url.includes("/changelog/"))
11+
.map(getLLMText);
912
const scanned = await Promise.all(scan);
1013

1114
return new Response(scanned.join('\n\n'));

‎bun.lock‎

Lines changed: 188 additions & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/command-menu.tsx‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,29 @@
1-
'use client';
1+
"use client";
22

3-
import type { DialogProps } from '@radix-ui/react-dialog';
4-
import * as React from 'react';
5-
import { Button } from '@/components/ui/button';
6-
import { CommandDialog, CommandInput } from '@/components/ui/command';
3+
import type { DialogProps } from "@radix-ui/react-dialog";
4+
import { Circle, File, Laptop, Moon, Sun } from "lucide-react";
5+
import { useRouter } from "next/navigation";
6+
import { useTheme } from "next-themes";
7+
import * as React from "react";
8+
import { Button } from "@/components/ui/button";
9+
import {
10+
CommandDialog,
11+
CommandEmpty,
12+
CommandGroup,
13+
CommandInput,
14+
CommandItem,
15+
CommandList,
16+
CommandSeparator,
17+
} from "@/components/ui/command";
718
// import { docsConfig } from "@/app/config/docs";
8-
import { cn } from '@/lib/utils';
19+
import { cn } from "@/lib/utils";
920

1021
export function CommandMenu({ ...props }: DialogProps) {
1122
const [open, setOpen] = React.useState(false);
1223

1324
React.useEffect(() => {
1425
const down = (e: KeyboardEvent) => {
15-
if ((e.key === 'k' && (e.metaKey || e.ctrlKey)) || e.key === '/') {
26+
if ((e.key === "k" && (e.metaKey || e.ctrlKey)) || e.key === "/") {
1627
if (
1728
(e.target instanceof HTMLElement && e.target.isContentEditable) ||
1829
e.target instanceof HTMLInputElement ||
@@ -27,8 +38,8 @@ export function CommandMenu({ ...props }: DialogProps) {
2738
}
2839
};
2940

30-
document.addEventListener('keydown', down);
31-
return () => document.removeEventListener('keydown', down);
41+
document.addEventListener("keydown", down);
42+
return () => document.removeEventListener("keydown", down);
3243
}, []);
3344

3445
const runCommand = React.useCallback((command: () => unknown) => {
@@ -40,8 +51,8 @@ export function CommandMenu({ ...props }: DialogProps) {
4051
<>
4152
<Button
4253
className={cn(
43-
'relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-56 xl:w-64',
44-
'border border-input hover:bg-accent hover:text-accent-foreground',
54+
"relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-56 xl:w-64",
55+
"border border-input hover:bg-accent hover:text-accent-foreground",
4556
)}
4657
onClick={() => setOpen(true)}
4758
{...props}
@@ -92,17 +103,10 @@ export function CommandMenu({ ...props }: DialogProps) {
92103
))}
93104
<CommandSeparator />
94105
<CommandGroup heading="Theme">
95-
<CommandItem onSelect={() => runCommand(() => setTheme("light"))}>
96-
<Sun />
97-
Light
98-
</CommandItem>
99106
<CommandItem onSelect={() => runCommand(() => setTheme("dark"))}>
100107
<Moon />
101108
Dark
102109
</CommandItem>
103-
<CommandItem onSelect={() => runCommand(() => setTheme("system"))}>
104-
<Laptop />
105-
System
106110
</CommandItem>
107111
</CommandGroup>
108112
</CommandList> */}

‎components/docskit/code.tsx‎

Lines changed: 60 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
1-
import { type AnnotationHandler, highlight, Pre, type RawCode } from 'codehike/code';
2-
import React from 'react';
3-
import { cn } from '@/lib/utils';
4-
import { callout } from './annotations/callout';
5-
import { collapse } from './annotations/collapse';
6-
import { diff } from './annotations/diff';
7-
import { fold } from './annotations/fold';
8-
import { hover } from './annotations/hover';
9-
import { lineNumbers } from './annotations/line-numbers';
10-
import { link } from './annotations/link';
11-
import { mark } from './annotations/mark';
12-
import { tokenTransitions } from './annotations/token-transitions';
13-
import { tooltip } from './annotations/tooltip';
14-
import { wordWrap } from './annotations/word-wrap';
15-
import { MultiCode } from './code.client';
16-
import { CODEBLOCK, type CodeGroup, flagsToOptions, TITLEBAR } from './code-group';
17-
import { CodeIcon } from './code-icon';
18-
import { CollapsiblePre } from './collapsible-pre';
19-
import { CopyButton } from './copy-button';
20-
import theme from './theme.mjs';
1+
import {
2+
type AnnotationHandler,
3+
highlight,
4+
type RawCode,
5+
Pre,
6+
} from "codehike/code";
7+
import { CollapsiblePre } from "./collapsible-pre";
8+
import React from "react";
9+
import { cn } from "@/lib/utils";
10+
import { MultiCode } from "./code.client";
11+
import {
12+
CODEBLOCK,
13+
type CodeGroup,
14+
flagsToOptions,
15+
TITLEBAR,
16+
} from "./code-group";
17+
import { CodeIcon } from "./code-icon";
18+
import { CopyButton } from "./copy-button";
19+
import theme from "./theme.mjs";
2120

2221
export async function Code(props: {
2322
codeblocks: RawCode[];
@@ -59,38 +58,58 @@ export function CodeSync(props: {
5958
}
6059

6160
// Shared client component
62-
function CodeClient({ group, className }: { group: CodeGroup; className?: string }) {
61+
function CodeClient({
62+
group,
63+
className,
64+
}: {
65+
group: CodeGroup;
66+
className?: string;
67+
}) {
6368
return group.tabs.length === 1 ? (
6469
<SingleCode group={group} className={className} />
6570
) : (
6671
<MultiCode group={group} key={group.storage} className={className} />
6772
);
6873
}
6974

70-
function SingleCode({ group, className }: { group: CodeGroup; className?: string }) {
75+
function SingleCode({
76+
group,
77+
className,
78+
}: {
79+
group: CodeGroup;
80+
className?: string;
81+
}) {
7182
const tab = group.tabs[0];
7283
if (!tab) return null;
7384

7485
const { pre, style, code, title, icon, options, filename } = tab;
75-
const hasTitle = title?.trim() !== '';
86+
const hasTitle = title?.trim() !== "";
7687
return (
7788
<div
78-
className={cn(CODEBLOCK, !hasTitle && 'border-none', className, 'rounded-lg')}
89+
className={cn(
90+
CODEBLOCK,
91+
!hasTitle && "border-none",
92+
className,
93+
"rounded-lg",
94+
)}
7995
style={style}
8096
>
8197
{hasTitle && (
8298
<div
8399
className={cn(
84100
TITLEBAR,
85-
'flex items-center gap-2',
86-
'text-muted-foreground text-sm font-mono',
101+
"flex items-center gap-2",
102+
"text-muted-foreground text-sm font-mono",
87103
)}
88104
>
89105
<span className="pl-2 pr-1">{icon}</span>
90106
{title}
91-
{options.copyButton && filename === '' && (
92-
<div className={cn('ml-auto mr-1 items-center')}>
93-
<CopyButton text={code} className="text-ch-tab-inactive-foreground" />
107+
{options.copyButton && filename === "" && (
108+
<div className={cn("ml-auto mr-1 items-center")}>
109+
<CopyButton
110+
text={code}
111+
className="text-ch-tab-inactive-foreground"
112+
/>
94113
</div>
95114
)}
96115
</div>
@@ -100,7 +119,9 @@ function SingleCode({ group, className }: { group: CodeGroup; className?: string
100119
className="flex items-center w-full text-sm font-mono rounded-t-none bg-[var(--ch-0)] p-1"
101120
style={{ minHeight: 32 }}
102121
>
103-
<span className="pl-2 pr-2 flex-1 font-mono text-foreground">{filename}</span>
122+
<span className="pl-2 pr-2 flex-1 font-mono text-foreground">
123+
{filename}
124+
</span>
104125
<span className="ml-auto pr-3">
105126
<CopyButton
106127
text={code}
@@ -135,40 +156,23 @@ export async function toCodeGroup(props: {
135156
const tabOptions = flagsToOptions(flags);
136157
const options = { ...groupOptions, ...tabOptions };
137158
const highlighted = await highlight(tab, theme);
138-
const handlers = getHandlers(options);
139159
return {
140160
options,
141161
title,
142162
filename,
143163
style: highlighted.style,
144164
code: highlighted.code,
145165
icon: <CodeIcon title={title} lang={tab.lang} />,
146-
// pre: (
147-
// <CollapsiblePre
148-
// code={highlighted}
149-
// className={cn(
150-
// !title && "!m-0",
151-
// "overflow-x-auto px-0 py-2 rounded-lg !bg-ch-code max-w-full", // rounded-lg
152-
// props.preClassName,
153-
// )}
154-
// style={highlighted.style}
155-
// // handlers={handlers}
156-
// />
157-
// ),
158-
159166
pre: (
160167
<div className="bg-[var(--ch-0)] p-1">
161-
<Pre
168+
<CollapsiblePre
162169
code={highlighted}
163-
className={cn(
164-
!title && '!m-0',
165-
'overflow-x-auto p-3 rounded-lg font-mono bg-[var(--ch-18)] max-w-full',
166-
props.preClassName,
167-
)}
170+
title={title}
171+
preClassName={props.preClassName}
172+
options={options}
168173
style={{
169174
...highlighted.style,
170175
}}
171-
handlers={handlers}
172176
/>
173177
</div>
174178
),
@@ -183,22 +187,6 @@ export async function toCodeGroup(props: {
183187
};
184188
}
185189

186-
function getHandlers(options: CodeGroup['options']) {
187-
return [
188-
mark,
189-
tooltip,
190-
fold,
191-
link,
192-
options.animate && tokenTransitions,
193-
options.lineNumbers && lineNumbers,
194-
diff,
195-
...collapse,
196-
options.wordWrap && wordWrap,
197-
callout,
198-
hover,
199-
].filter(Boolean) as AnnotationHandler[];
200-
}
201-
202190
/**
203191
* Extracts flags and title from the metadata of a code block.
204192
*
@@ -213,15 +201,15 @@ function getHandlers(options: CodeGroup['options']) {
213201

214202
function extractFlags(codeblock: RawCode) {
215203
// Support: foo.js -abc -f filename.txt
216-
const meta = codeblock.meta || '';
204+
const meta = codeblock.meta || "";
217205
const flagMatch = meta.match(/-(\w+)/);
218206
const fileMatch = meta.match(/-f\s+([^\s]+)/);
219-
const flags = flagMatch ? flagMatch[1] : '';
220-
const filename = fileMatch ? fileMatch[1] : '';
207+
const flags = flagMatch ? flagMatch[1] : "";
208+
const filename = fileMatch ? fileMatch[1] : "";
221209
// Remove flags and filename from title
222210
let title = meta
223-
.replace(flagMatch ? flagMatch[0] : '', '')
224-
.replace(fileMatch ? fileMatch[0] : '', '')
211+
.replace(flagMatch ? flagMatch[0] : "", "")
212+
.replace(fileMatch ? fileMatch[0] : "", "")
225213
.trim();
226214
return { title, flags, filename };
227215
}

0 commit comments

Comments
 (0)