mirror of
https://github.com/mleem97/gregWiki.git
synced 2026-04-11 03:29:19 +02:00
b8df049b4e
- Added 'codeSnippetCaption' to the English localization file for improved content clarity. - Updated the homepage to include the GregCoreRandomSnippet component, enhancing user engagement with dynamic content. This commit enriches the homepage experience by providing localized captions and integrating a new snippet feature.
62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
import React, {useMemo} from 'react';
|
|
import BrowserOnly from '@docusaurus/BrowserOnly';
|
|
import {GREG_CORE_SNIPPETS} from '../data/gregCoreSnippets';
|
|
|
|
type Props = {
|
|
/** e.g. "Random sample from gregCore" */
|
|
caption: string;
|
|
};
|
|
|
|
/**
|
|
* Picks one snippet per client mount (stable for that visit; no SSR/CSR mismatch).
|
|
*/
|
|
function GregCoreRandomSnippetInner({caption}: Props): JSX.Element {
|
|
const snippet = useMemo(
|
|
() => GREG_CORE_SNIPPETS[Math.floor(Math.random() * GREG_CORE_SNIPPETS.length)],
|
|
[],
|
|
);
|
|
|
|
return (
|
|
<div className="rounded-xl border border-outline-variant/20 bg-surface-container-highest p-1 shadow-2xl">
|
|
<div className="rounded-lg bg-surface-container-lowest p-6 font-mono text-sm">
|
|
<div className="mb-3 flex flex-wrap items-center justify-between gap-2 border-b border-outline-variant/15 pb-3">
|
|
<div>
|
|
<div className="text-xs font-bold uppercase tracking-wider text-primary">{caption}</div>
|
|
<div className="mt-1 text-xs text-on-surface-variant">
|
|
<span className="font-semibold text-on-surface">{snippet.title}</span>
|
|
<span className="mx-1.5 text-outline-variant">·</span>
|
|
<code className="text-[11px] text-tertiary">{snippet.sourcePath}</code>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2" aria-hidden>
|
|
<div className="h-3 w-3 rounded-full bg-error-dim" />
|
|
<div className="h-3 w-3 rounded-full bg-tertiary" />
|
|
<div className="h-3 w-3 rounded-full bg-primary" />
|
|
</div>
|
|
</div>
|
|
<pre className="max-h-[min(420px,55vh)] overflow-auto whitespace-pre pr-1 leading-relaxed text-on-surface/90">
|
|
{snippet.code.trimEnd()}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function GregCoreRandomSnippet(props: Props): JSX.Element {
|
|
return (
|
|
<BrowserOnly
|
|
fallback={
|
|
<div
|
|
className="rounded-xl border border-outline-variant/20 bg-surface-container-highest p-1 shadow-2xl"
|
|
aria-busy
|
|
>
|
|
<div className="flex min-h-[280px] items-center justify-center rounded-lg bg-surface-container-lowest p-6">
|
|
<span className="text-sm text-on-surface-variant">Loading code sample…</span>
|
|
</div>
|
|
</div>
|
|
}>
|
|
{() => <GregCoreRandomSnippetInner {...props} />}
|
|
</BrowserOnly>
|
|
);
|
|
}
|