Skip to content

Commit 6581bbf

Browse files
kiakingkiaking
authored
feat: add newsletter section (vuejs#1246)
1 parent 2fd579f commit 6581bbf

File tree

2 files changed

+181
-1
lines changed

2 files changed

+181
-1
lines changed

‎src/.vitepress/theme/components/NewsletterSection.vue

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<script setup lang="ts">
2+
import { VTLink } from '@vue/theme'
3+
</script>
4+
5+
<template>
6+
<section id="newsletter" class="NewsletterSection">
7+
<div class="container">
8+
<h2 class="title">Subscribe to our weekly newsletter.</h2>
9+
10+
<div class="form">
11+
<form
12+
class="box"
13+
id="revue-form"
14+
name="revue-form"
15+
method="post"
16+
action="https://www.getrevue.co/profile/vuenewsletter/add_subscriber"
17+
rel="noopener"
18+
target="_blank"
19+
@submit="subscribe"
20+
>
21+
<input
22+
class="input"
23+
id="member_email"
24+
name="member[email]"
25+
type="email"
26+
placeholder="Email address"
27+
required
28+
>
29+
30+
<div class="action">
31+
<input
32+
class="button"
33+
id="member_submit"
34+
name="member[subscribe]"
35+
type="submit"
36+
value="SUBSCRIBE"
37+
>
38+
</div>
39+
</form>
40+
</div>
41+
42+
<p class="help">
43+
You can read the previous issues and listen to our podcast at <VTLink class="link" href="https://news.vuejs.org/" no-icon>news.vuejs.org</VTLink>. You may also go social at <VTLink class="link" href="https://twitter.com/vuejs" no-icon>Twitter</VTLink>, or join our home at <VTLink class="link" href="https://chat.vuejs.org/" no-icon>Dicsord</VTLink>.
44+
</p>
45+
</div>
46+
</section>
47+
</template>
48+
49+
<style scoped>
50+
.NewsletterSection {
51+
border-top: 1px solid transparent;
52+
border-bottom: 1px solid var(--vt-c-divider-light);
53+
padding: 32px 24px;
54+
background: var(--vt-c-bg-soft);
55+
transition: border-color 0.5s, background-color 0.5s;
56+
}
57+
58+
.dark .NewsletterSection {
59+
border-top-color: var(--vt-c-divider-light);
60+
background: var(--vt-c-bg);
61+
}
62+
63+
@media (min-width: 768px) {
64+
.NewsletterSection {
65+
padding: 48px 32px;
66+
}
67+
}
68+
69+
.container {
70+
margin: 0 auto;
71+
max-width: 512px;
72+
}
73+
74+
.title {
75+
text-align: center;
76+
font-size: 14px;
77+
font-weight: 500;
78+
color: var(--vt-c-text-2);
79+
}
80+
81+
@media (min-width: 375px) {
82+
.title {
83+
font-size: 16px;
84+
}
85+
}
86+
87+
.form {
88+
padding-top: 8px;
89+
}
90+
91+
@media (min-width: 375px) {
92+
.form {
93+
padding-top: 16px;
94+
}
95+
}
96+
97+
.box {
98+
position: relative;
99+
width: 100%;
100+
}
101+
102+
.input {
103+
border: 1px solid var(--vt-c-divider);
104+
border-radius: 8px;
105+
padding: 11px 128px 11px 16px;
106+
font-size: 16px;
107+
width: 100%;
108+
color: var(--vt-c-text-1);
109+
transition: border-color 0.25s, background-color 0.25s;
110+
}
111+
112+
.input:hover,
113+
.input:focus {
114+
border-color: var(--vt-c-brand);
115+
}
116+
117+
.input:focus {
118+
background-color: var(--vt-c-white);
119+
}
120+
121+
.dark .input {
122+
background-color: var(--vt-c-bg);
123+
}
124+
125+
.dark .input:focus {
126+
background-color: var(--vt-c-black-pure);
127+
}
128+
129+
.input::placeholder {
130+
font-weight: 500;
131+
color: var(--vt-c-text-3);
132+
transition: color 0.25s;
133+
}
134+
135+
.action {
136+
position: absolute;
137+
top: 6px;
138+
right: 6px;
139+
}
140+
141+
.button {
142+
background-color: var(--vt-c-brand);
143+
border-radius: 4px;
144+
padding: 0 12px;
145+
letter-spacing: .8px;
146+
line-height: 36px;
147+
font-size: 13px;
148+
font-weight: 500;
149+
color: var(--vt-c-text-dark-1);
150+
}
151+
152+
.help {
153+
margin: 0 auto;
154+
padding: 8px;
155+
max-width: 480px;
156+
text-align: center;
157+
line-height: 20px;
158+
font-size: 12px;
159+
font-weight: 500;
160+
color: var(--vt-c-text-2);
161+
transition: color 0.5s;
162+
}
163+
164+
@media (min-width: 375px) {
165+
.help {
166+
padding-top: 16px;
167+
}
168+
}
169+
170+
.link {
171+
color: var(--vt-c-brand);
172+
transition: color 0.25s;
173+
}
174+
175+
.link:hover {
176+
color: var(--vt-c-brand-dark);
177+
}
178+
</style>

‎src/.vitepress/theme/index.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ import { h } from 'vue'
22
import { VPTheme, VTBadge } from '@vue/theme'
33
import PreferenceSwitch from './components/PreferenceSwitch.vue'
44
import { preferComposition, preferSFC } from './components/preferences'
5+
import NewsletterSection from './components/NewsletterSection.vue'
56
import './styles/inline-demo.css'
67
import './styles/options-boxes.css'
78

89
export default Object.assign({}, VPTheme, {
910
Layout: () => {
1011
return h(VPTheme.Layout, null, {
11-
'sidebar-top': () => h(PreferenceSwitch)
12+
'sidebar-top': () => h(PreferenceSwitch),
13+
'footer-before': () => h(NewsletterSection)
1214
})
1315
},
1416
enhanceApp({ app }) {

0 commit comments

Comments
 (0)