Skip to content

Sync 2 Inkeep OSS Changes #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
inkeep-oss-sync merged 2 commits into from
Jul 23, 2026
Merged

Sync 2 Inkeep OSS Changes #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0f4b5f3
chore(visimer/site): subtler CodeCard scrollbars (#2855)
anubra266 Jul 22, 2026
b937f0d
chore(visimer/site): make install target obvious in each code card (#…
anubra266 Jul 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 15 additions & 9 deletions apps/site/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,7 @@ function CodeCard({ title, children }: { title: string; children: ReactNode }) {
</div>
<pre
ref={preRef}
className="code-card-scroll"
style={{
margin: 0,
padding: '18px 16px',
Expand Down Expand Up @@ -954,22 +955,27 @@ export default function App() {
{'\n\n'}&lt;<span style={ident}>MermaidWysiwyg</span> <span style={str}>code</span>={'{diagram}'}{' '}
<span style={str}>onCodeChange</span>={'{setDiagram}'} <span style={str}>mermaid</span>={'{mermaid}'} /&gt;
</CodeCard>
<CodeCard title="Vanilla · -core + -dom">
<span style={cmt}># framework-free canvas, any app</span>
<CodeCard title="Vanilla · @visimer/core + @visimer/dom">
<span style={cmt}># npm i @visimer/core @visimer/dom mermaid</span>
{'\n'}
<span style={kw}>import</span> mermaid <span style={kw}>from</span> <span style={str}>'mermaid'</span>
{'\n'}
<span style={kw}>import</span> {'{ MermaidWysiwygEditor }'} <span style={kw}>from</span>{' '}
<span style={str}>'@visimer/core'</span>
{'\n'}
<span style={kw}>import</span> {'{ MermaidCanvasView }'} <span style={kw}>from</span>{' '}
<span style={str}>'@visimer/dom'</span>
{'\n\n'}
<span style={kw}>const</span> editor = <span style={kw}>new</span> <span style={ident}>MermaidWysiwygEditor</span>({'{ '}
<span style={str}>code</span>
{' }'})
{'\n'}
<span style={kw}>new</span> <span style={ident}>MermaidCanvasView</span>({'{ '}
<span style={str}>editor</span>, <span style={str}>container</span>, <span style={str}>mermaid</span>
{' }'})
{'\n'}editor.<span style={ident}>on</span>(<span style={str}>'change'</span>, ({'{ '}
<span style={str}>code</span>
{' }'}) =&gt; <span style={ident}>save</span>(code))
</CodeCard>
<CodeCard title="CodeMirror pane · -codemirror">
<span style={cmt}># the source pane in the playground above</span>
<CodeCard title="CodeMirror pane · @visimer/codemirror">
<span style={cmt}># npm i @visimer/codemirror</span>
{'\n'}
<span style={kw}>import</span> {'{ MermaidCodeMirror }'} <span style={kw}>from</span>{' '}
<span style={str}>'@visimer/codemirror'</span>
Expand All @@ -978,8 +984,8 @@ export default function App() {
{'\n'}
<span style={cmt}># typing, highlights, undo, all shared with the canvas</span>
</CodeCard>
<CodeCard title="Monaco · -monaco">
<span style={cmt}># bring your own monaco instance; zero monaco dependency</span>
<CodeCard title="Monaco · @visimer/monaco">
<span style={cmt}># npm i @visimer/monaco (bring your own monaco instance)</span>
{'\n'}
<span style={kw}>import</span> {'{ bindMonaco }'} <span style={kw}>from</span>{' '}
<span style={str}>'@visimer/monaco'</span>
Expand Down
23 changes: 23 additions & 0 deletions apps/site/src/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,3 +178,26 @@ textarea {
gap: 10px !important;
}
}

/* CodeCard scrollbars: subtle, tinted to the card chrome (bg #1E1B16, border #2E2A22). */
.code-card-scroll {
scrollbar-width: thin;
scrollbar-color: #2E2A22 transparent;
}
.code-card-scroll::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.code-card-scroll::-webkit-scrollbar-track {
background: transparent;
}
.code-card-scroll::-webkit-scrollbar-thumb {
background: #2E2A22;
border-radius: 99px;
}
.code-card-scroll::-webkit-scrollbar-thumb:hover {
background: #3A362D;
}
.code-card-scroll::-webkit-scrollbar-corner {
background: transparent;
}