Skip to content

Commit 5670c80

Browse files
khalidabuhakmehkhalidabuhakmeh
committed
Add newsletter subscription component to docs
Introduced a new `Newsletter` component with a HubSpot form for user subscriptions, complete with styling and responsive behavior. Integrated the component into the documentation index for user engagement and updates.
1 parent 4500a27 commit 5670c80

3 files changed

Lines changed: 161 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: 8 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
@@ -86,4 +85,11 @@ import Testimonial from "~/components/testimonial.astro";
8685
Learn more
8786
</LinkButton>
8887
</Card>
88+
<Card title="Coming Soon" icon="seti:yml">
89+
Stay tuned for more exciting products and tools to enhance your identity and
90+
security solutions. We're constantly working on new ways to make your
91+
applications more secure and easier to manage.
92+
</Card>
8993
</CardGrid>
94+
95+
<Newsletter />

‎src/styles/custom.css‎

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

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

0 commit comments

Comments
 (0)