Skip to content

Commit 63dfbad

Browse files
maartenbamaartenba
authored
Merge pull request #654 from DuendeSoftware/hubspot-form
Add newsletter subscription component to documentation
2 parents 91175ab + 0cd1989 commit 63dfbad

3 files changed

Lines changed: 159 additions & 2 deletions

File tree

‎src/components/Newsletter.astro‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
---
2+
import { Icon } from "@astrojs/starlight/components";
3+
---
4+
<div class="hubspot-form-wrapper">
5+
<div class="newsletter-pitch">
6+
<p class="newsletter-title">
7+
<Icon name="email" label="Duende Newsletter" />
8+
Subscribe To Our Newsletter!</p>
9+
<p class="newsletter-subtitle">Stay ahead in the world of identity and access management!</p>
10+
<ul>
11+
<li>Latest security best practices</li>
12+
<li>Product updates and releases</li>
13+
<li>Technical tips and implementation guides</li>
14+
<li>Industry news and trends</li>
15+
</ul>
16+
<p>Join our community of developers and security professionals building secure applications.</p>
17+
</div>
18+
<hubspot-form></hubspot-form>
19+
</div>
20+
21+
<style>
22+
.newsletter-title {
23+
display: flex;
24+
font-size: var(--sl-text-3xl);
25+
font-weight: 500;
26+
svg {
27+
margin-right: 0.5rem;
28+
}
29+
}
30+
31+
.newsletter-subtitle {
32+
font-size: var(--sl-text-lg);
33+
font-weight: 400;
34+
}
35+
36+
.hubspot-form-wrapper {
37+
display: flex;
38+
--sl-card-border: var(--sl-color-purple);
39+
--sl-card-bg: var(--sl-color-purple-low);
40+
border: 1px solid var(--sl-color-gray-5);
41+
background-color: var(--sl-color-black);
42+
padding: clamp(1rem, calc(0.125rem + 3vw), 2.5rem);
43+
flex-direction: row;
44+
gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem);
45+
flex-wrap: nowrap;
46+
}
47+
48+
@media (max-width: 768px) {
49+
.hubspot-form-wrapper {
50+
flex-wrap: wrap;
51+
}
52+
}
53+
54+
.newsletter-pitch {
55+
vertical-align: baseline;
56+
align-content: center;
57+
}
58+
59+
</style>
60+
61+
<script>
62+
import "https://js.hsforms.net/forms/embed/v2.js";
63+
64+
class HubspotForm extends HTMLElement {
65+
constructor() {
66+
super();
67+
68+
const div = document.createElement("div");
69+
div.className = `hubspot-form-${Math.random().toString(36).substring(2, 10)}`;
70+
this.appendChild(div);
71+
72+
hbspt.forms.create({
73+
portalId: "47428297",
74+
formId: "bdd9b287-d141-46e2-8b1f-90ce29fd262e",
75+
region: "na1",
76+
target: `.${div.className}`
77+
});
78+
}
79+
}
80+
81+
customElements.define("hubspot-form", HubspotForm);
82+
</script>
83+

‎src/content/docs/index.mdx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import {
2828
LinkButton,
2929
Badge,
3030
} from "@astrojs/starlight/components";
31+
import Newsletter from "~/components/Newsletter.astro";
3132
import TestimonialGrid from "~/components/testimonial-grid.astro";
3233
import Testimonial from "~/components/testimonial.astro";
3334

@@ -49,8 +50,6 @@ import Testimonial from "~/components/testimonial.astro";
4950

5051
</CardGrid>
5152

52-
<hr />
53-
5453
<CardGrid>
5554
<Card title="IdentityServer" icon="open-book">
5655
The most flexible and standards-compliant OpenID Connect and OAuth 2.0
@@ -87,3 +86,7 @@ import Testimonial from "~/components/testimonial.astro";
8786
</LinkButton>
8887
</Card>
8988
</CardGrid>
89+
90+
<hr />
91+
92+
<Newsletter />

‎src/styles/custom.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,3 +115,74 @@ summary {
115115
}
116116
}
117117

118+
119+
/* hubspot forms */
120+
.form-columns-2 {
121+
display: flex;
122+
align-items: baseline;
123+
}
124+
125+
.hubspot-form-container {
126+
padding: 1rem 0;
127+
}
128+
129+
.hs-form {
130+
display: flex;
131+
flex-direction: column;
132+
gap: 1rem;
133+
}
134+
135+
.hs-form-field {
136+
display: flex;
137+
flex-direction: column;
138+
gap: 0;
139+
}
140+
141+
.hs-input {
142+
padding: 0.5rem;
143+
border: 1px solid var(--sl-color-gray-4);
144+
border-radius: 0.25rem;
145+
background: var(--sl-color-gray-6);
146+
color: var(--sl-color-white);
147+
width: 90%;
148+
}
149+
150+
.hs-form-required {
151+
color: var(--sl-color-accent-high);
152+
margin-left: 0.25rem;
153+
}
154+
155+
.hs-button {
156+
font-size: var(--sl-text-lg);
157+
background: transparent;
158+
color: var(--sl-color-white);
159+
border: 1px solid var(--sl-color-white);
160+
border-radius: 999rem;
161+
padding: 1rem 1.5rem;
162+
line-height: 1.1875;
163+
text-decoration: none;
164+
cursor: pointer;
165+
}
166+
167+
.hs-error-msgs {
168+
margin: 0;
169+
padding: 0.1rem;
170+
list-style: none;
171+
}
172+
173+
.hs-error-msg {
174+
text-decoration:var(--sl-color-accent-high) ;
175+
color: var(--sl-color-accent-high);
176+
font-size: 0.875rem;
177+
}
178+
179+
.form-columns-1, .form-columns-2 {
180+
&:has(> *[style*="display: none"]:only-child) {
181+
display: none;
182+
height: 0;
183+
width: 0;
184+
margin:0;
185+
}
186+
}
187+
/* end hubspot forms */
188+

0 commit comments

Comments
 (0)