hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Show tags in reference, more compact functions list

Browse source
This commit is contained in:
Václav Volhejn 2025-10-12 16:28:05 +02:00
parent c62428ca27
commit ee1a894f3b
1 changed files with 27 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

42
website/src/repl/components/panel/Reference.jsx
View file

@ -11,6 +11,7 @@ const availableFunctions = (() => {
for (const doc of jsdocJson.docs) { for (const doc of jsdocJson.docs) {
if (!isValid(doc)) continue; if (!isValid(doc)) continue;
if (seen.has(doc.name)) continue; if (seen.has(doc.name)) continue;
doc.tags = doc.tags?.filter((t) => t && typeof t === 'string') || [];
functions.push(doc); functions.push(doc);
const synonyms = doc.synonyms || []; const synonyms = doc.synonyms || [];
seen.add(doc.name); seen.add(doc.name);
@ -113,7 +114,7 @@ export function Reference() {
return ( return (
<div className="flex flex-col h-full w-full p-2"> <div className="flex flex-col h-full w-full p-2">
<div className="w-full flex flex-col gap-2 h-1/2"> <div className="w-full flex flex-col gap-2 h-1/3 mb-2">
<div className="w-full flex flex-col gap-2"> <div className="w-full flex flex-col gap-2">
<Textbox className="w-full" placeholder="Search" value={search} onChange={setSearch} /> <Textbox className="w-full" placeholder="Search" value={search} onChange={setSearch} />
<div> <div>
@ -134,19 +135,21 @@ export function Reference() {
))} ))}
</div> </div>
</div> </div>
<div className="flex flex-col h-full overflow-y-auto gap-1.5 bg-background bg-opacity-50 rounded-md"> <div className="h-full gap-1.5 bg-background bg-opacity-50 rounded-md overflow-y-auto">
{visibleFunctions.map((entry, i) => ( {visibleFunctions.map((entry, i) => (
<a <>
key={`entry-${entry.name}`} <a
className="cursor-pointer text-foreground flex-none hover:bg-lineHighlight overflow-x-hidden px-1 text-ellipsis" key={`entry-${entry.name}`}
onClick={() => { className="cursor-pointer text-foreground flex-none hover:bg-lineHighlight overflow-x-hidden px-1 text-ellipsis"
const el = document.getElementById(`doc-${entry.name}`); onClick={() => {
const container = document.getElementById('reference-container'); const el = document.getElementById(`doc-${entry.name}`);
container.scrollTo(0, el.offsetTop); const container = document.getElementById('reference-container');
}} container.scrollTo(0, el.offsetTop);
> }}
{entry.name} >
</a> {entry.name}
</a>{' '}
</>
))} ))}
</div> </div>
</div> </div>
@ -161,8 +164,17 @@ export function Reference() {
that you can already make music with a small set of functions! that you can already make music with a small set of functions!
</p> </p>
{visibleFunctions.map((entry, i) => ( {visibleFunctions.map((entry, i) => (
<section key={i}> <section key={i} className="font-sans">
<h3 id={`doc-${entry.name}`}>{entry.name}</h3> <div className="flex flex-row items-center mt-8 justify-between">
<h3 className="font-mono my-0" id={`doc-${entry.name}`}>
{entry.name}
</h3>
{entry.tags && (
<span className="ml-2 text-xs text-gray-400 border-2 border-gray-500 rounded-md px-1 py-0.5">
{entry.tags.join(', ')}
</span>
)}
</div>
{!!entry.synonyms_text && ( {!!entry.synonyms_text && (
<p> <p>
Synonyms: <code>{entry.synonyms_text}</code> Synonyms: <code>{entry.synonyms_text}</code>