Skip to content

Commit 3646907

Browse files
piotrblaszczykpiotrblaszczyk
authored
Add CTA to the docs (#711)
* Adds an optional, low-key "talk to the team" CTA banner below the content on selected documentation pages. * linter fix * Add template placeholder
1 parent 49b07c0 commit 3646907

20 files changed

Lines changed: 294 additions & 15 deletions

‎apps/docs/astro.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,7 @@ export default defineConfig({
169169
PageTitle: './src/components/page-title/page-title.astro',
170170
ThemeProvider: './src/components/ForceDarkTheme.astro',
171171
ThemeSelect: './src/components/ForceThemeSelect.astro',
172+
Footer: './src/components/help-banner/footer-with-help-banner.astro',
172173
},
173174
}),
174175
],

‎apps/docs/src/components/content-tile/content-tile-placeholder.astro‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
export type Props = {
3+
title: string;
4+
description: string;
5+
badgeLabel?: string;
6+
};
7+
8+
const { title, description, badgeLabel = 'Coming soon' } = Astro.props;
9+
---
10+
11+
<article class="content-tile content-tile-placeholder">
12+
<div class="content-tile-content">
13+
<div class="content-tile-placeholder-header">
14+
<h4>{title}</h4>
15+
<span class="content-tile-placeholder-badge">{badgeLabel}</span>
16+
</div>
17+
<p class="content-tile-description">{description}</p>
18+
</div>
19+
</article>

‎apps/docs/src/components/help-banner/footer-with-help-banner.astro‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
import Default from '@astrojs/starlight/components/Footer.astro';
3+
import HelpBanner from './help-banner.astro';
4+
5+
const { entry } = Astro.locals.starlightRoute;
6+
const helpBanner = entry.data.helpBanner;
7+
---
8+
9+
{
10+
helpBanner && (
11+
<HelpBanner
12+
title={helpBanner.title}
13+
body={helpBanner.body}
14+
linkLabel={helpBanner.linkLabel}
15+
href={helpBanner.href}
16+
/>
17+
)
18+
}
19+
20+
<Default><slot /></Default>

‎apps/docs/src/components/help-banner/help-banner.astro‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
---
2+
import { Icon } from '@astrojs/starlight/components';
3+
import { CONTACT_URL } from '../../consts';
4+
5+
export type Props = {
6+
title: string;
7+
body: string;
8+
linkLabel?: string;
9+
href?: string;
10+
};
11+
12+
const DEFAULT_LINK_LABEL = 'Talk to the team';
13+
14+
const { title, body, linkLabel = DEFAULT_LINK_LABEL, href = CONTACT_URL } = Astro.props;
15+
16+
const pagePath = Astro.url.pathname;
17+
---
18+
19+
<aside class="help-banner">
20+
<div class="help-banner-icon" aria-hidden="true">
21+
<Icon name="comment-alt" />
22+
</div>
23+
<div class="help-banner-content">
24+
<p class="help-banner-title">{title}</p>
25+
<p class="help-banner-body">{body}</p>
26+
<a
27+
class="help-banner-link"
28+
href={href}
29+
target="_blank"
30+
rel="noopener noreferrer"
31+
data-umami-event="help-banner-click"
32+
data-umami-event-page={pagePath}
33+
>
34+
{`${linkLabel} →`}
35+
</a>
36+
</div>
37+
</aside>
38+
39+
<style>
40+
@layer starlight.core {
41+
.help-banner {
42+
display: flex;
43+
align-items: flex-start;
44+
gap: 1rem;
45+
margin-top: 3rem;
46+
padding: 1.25rem 1.5rem;
47+
border: 1px solid var(--sl-color-gray-5);
48+
border-radius: 0.5rem;
49+
background: var(--sl-color-gray-6);
50+
color: var(--sl-color-gray-2);
51+
}
52+
53+
.help-banner-icon {
54+
display: flex;
55+
align-items: center;
56+
justify-content: center;
57+
flex-shrink: 0;
58+
width: 2rem;
59+
height: 2rem;
60+
border-radius: 50%;
61+
background: var(--sl-color-gray-5);
62+
color: var(--sl-color-text-accent);
63+
}
64+
65+
.help-banner-icon :global(svg) {
66+
width: 1rem;
67+
height: 1rem;
68+
}
69+
70+
.help-banner-content {
71+
display: flex;
72+
flex-direction: column;
73+
gap: 0.25rem;
74+
min-width: 0;
75+
}
76+
77+
.help-banner-title {
78+
margin: 0;
79+
font-size: var(--sl-text-base);
80+
font-weight: 600;
81+
color: var(--sl-color-white);
82+
line-height: 1.4;
83+
}
84+
85+
.help-banner-body {
86+
margin: 0;
87+
font-size: var(--sl-text-sm);
88+
line-height: 1.6;
89+
color: var(--sl-color-gray-3);
90+
}
91+
92+
.help-banner-link {
93+
margin-top: 0.5rem;
94+
font-size: var(--sl-text-sm);
95+
font-weight: 500;
96+
color: var(--sl-color-text-accent);
97+
text-decoration: none;
98+
width: fit-content;
99+
}
100+
101+
.help-banner-link:hover {
102+
text-decoration: underline;
103+
}
104+
105+
@media (max-width: 30em) {
106+
.help-banner {
107+
padding: 1rem;
108+
gap: 0.75rem;
109+
}
110+
}
111+
112+
@media print {
113+
.help-banner {
114+
display: none;
115+
}
116+
}
117+
}
118+
</style>

‎apps/docs/src/consts.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const CONTACT_URL = 'https://www.synergycodes.com/contact';

‎apps/docs/src/content.config.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,14 @@ export const collections = {
1111
schema: docsSchema({
1212
extend: z.object({
1313
version: z.string().optional(),
14+
helpBanner: z
15+
.object({
16+
title: z.string().min(1),
17+
body: z.string().min(1),
18+
linkLabel: z.string().min(1).optional(),
19+
href: z.string().url().optional(),
20+
})
21+
.optional(),
1422
}),
1523
}),
1624
}),

‎apps/docs/src/content/docs/examples/performance-test.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,22 @@ description: Example of how to test performance in ngDiagram
44
sidebar:
55
order: 13
66
label: Performance Test
7+
helpBanner:
8+
title: Hitting the limits in your own project?
9+
body: ngDiagram was designed to run smoothly with hundreds of nodes on the canvas. If performance feels tight on your own data, our team can profile the hot paths and help you find the right trade-offs.
710
---
811

12+
import { Aside } from '@astrojs/starlight/components';
913
import CodeViewer from '@components/code-viewer/code-viewer.astro';
1014
import PerformanceTest from '@examples/performance-test/performance-test.astro';
1115

1216
This example demonstrates the performance capabilities of the ng-diagram library by rendering 500 nodes arranged in a 25x20 grid with almost 500 connections.
1317

18+
<Aside type="tip">
19+
Need to scale beyond hundreds of nodes? Enable [Virtualization](/docs/guides/virtualization/) to render only what is
20+
visible in the viewport.
21+
</Aside>
22+
1423
<br />
1524

1625
<PerformanceTest />

‎apps/docs/src/content/docs/guides/edges/custom-edges.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ title: Custom Edges
33
description: How to create and implement custom edges in ngDiagram
44
sidebar:
55
order: 2
6+
helpBanner:
7+
title: Designing custom edge templates?
8+
body: If your edges need bespoke rendering, interactive labels, or routing tied to your domain, our team has built edge templates for many client projects. We are happy to share patterns and trade-offs from that work.
69
---
710

811
import CodeSnippet from '@components/code-snippet/code-snippet.astro';

‎apps/docs/src/content/docs/guides/edges/routing.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ title: Routing
33
description: Understanding how edge routing works in ngDiagram
44
sidebar:
55
order: 3
6+
helpBanner:
7+
title: Need a routing algorithm tailored to your domain?
8+
body: The built-in routers cover most cases. For domain-specific layouts, obstacle avoidance, or custom path semantics, our team can design and implement a router that fits your data.
69
---
710

811
import CodeSnippet from '@components/code-snippet/code-snippet.astro';

‎apps/docs/src/content/docs/guides/middlewares.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
---
22
title: Middlewares
33
description: Understanding how middlewares work in ngDiagram
4+
helpBanner:
5+
title: Building custom logic on top of the pipeline?
6+
body: Middlewares cover a lot of ground. If you are stretching them across complex business rules or coordinating several at once, our engineers have likely solved a similar problem before.
47
---
58

69
Middlewares provide a powerful plugin architecture for extending ngDiagram behavior. They intercept state changes before they reach the model, allowing you to transform data, add custom logic, and implement features without modifying core code.

0 commit comments

Comments
 (0)