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

fixed style

Browse source
This commit is contained in:
Jade (Rose) Rowland 2025-02-21 01:31:06 -05:00
parent b664bd3d1f
commit 1ded398468
14 changed files with 138 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import { useMemo, useState } from 'react';
import jsdocJson from '../../../../../doc.json';
import { useSettings } from '@src/settings.mjs';
const availableFunctions = jsdocJson.docs
.filter(({ name, description }) => name && !name.startsWith('_') && !!description)
.sort((a, b) => /* a.meta.filename.localeCompare(b.meta.filename) + */ a.name.localeCompare(b.name));
@ -14,6 +15,8 @@ const getInnerText = (html) => {
export function Reference() {
const [search, setSearch] = useState('');
const {fontFamily} = useSettings()
const visibleFunctions = useMemo(() => {
return availableFunctions.filter((entry) => {
if (!search) {
@ -25,7 +28,7 @@ export function Reference() {
}, [search]);
return (
<div className="flex h-full w-full p-2 text-foreground overflow-hidden">
<div className="flex h-full w-full p-2 overflow-hidden" style={{fontFamily}}>
<div className="h-full flex flex-col gap-2 w-1/3 max-w-72 ">
<div class="w-full flex">
<input
@ -39,7 +42,7 @@ export function Reference() {
{visibleFunctions.map((entry, i) => (
<a
key={i}
className="cursor-pointer flex-none hover:bg-lineHighlight overflow-x-hidden px-1 text-ellipsis"
className="cursor-pointer text-foreground flex-none hover:bg-lineHighlight overflow-x-hidden px-1 text-ellipsis"
onClick={() => {
const el = document.getElementById(`doc-${i}`);
const container = document.getElementById('reference-container');
@ -55,15 +58,15 @@ export function Reference() {
className="break-normal flex-grow flex-col overflow-y-auto overflow-x-hidden px-2 flex relative"
id="reference-container"
>
<div className="prose dark:prose-invert min-w-full px-1 text-foreground">
<h2 className='text-foreground'>API Reference</h2>
<div className="prose dark:prose-invert min-w-full px-1 ">
<h2 >API Reference</h2>
<p>
This is the long list of functions you can use. Remember that you don't need to remember all of those and
that you can already make music with a small set of functions!
</p>
{visibleFunctions.map((entry, i) => (
<section key={i}>
<h3 className='text-foreground' id={`doc-${i}`}>{entry.name}</h3>
<h3 id={`doc-${i}`}>{entry.name}</h3>
{!!entry.synonyms_text && (
<p>
Synonyms: <code className='text-foreground'>{entry.synonyms_text}</code>
@ -79,7 +82,7 @@ export function Reference() {
))}
</ul>
{entry.examples?.map((example, j) => (
<pre className='text-foreground bg-background' key={j}>{example}</pre>
<pre className='bg-background' key={j}>{example}</pre>
))}
</section>
))}