Skip to content
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

Jump to bottom

feat: subscribe to newsletter #125

Merged
merged 8 commits into from
Oct 19, 2023
Merged

feat: subscribe to newsletter #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4457756
update component
ArmanNik Sep 28, 2023
ebc2f10
Merge branch 'main' of github.com:appwrite/website into newsletter
ArmanNik Sep 28, 2023
796e585
initial commit
ArmanNik Sep 28, 2023
1dbcbbd
feat: newsletter component
ArmanNik Sep 29, 2023
22fade0
feat: verification page
ArmanNik Sep 29, 2023
25faf12
feat: add newsletter to community page
ArmanNik Sep 29, 2023
6565eb0
Merge branch 'main' of https://github.com/appwrite/website into newsl…
TorstenDittmann Oct 19, 2023
0d77bcb
bring it up2date
TorstenDittmann Oct 19, 2023
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
177 changes: 161 additions & 16 deletions src/lib/components/Newsletter.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,167 @@
<script lang="ts">
import { Tabs } from '$lib/UI';
<script context="module" lang="ts">
export async function newsletter(name: string, email: string) {
const response = await fetch('https://growth.appwrite.io/v1/newsletter/subscribe', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name,
email
})
});
return response;
}
</script>

<img src="/images/bgs/pre-footer.svg" alt="" class="pre-footer-bg" />
<script lang="ts">
let email = '';
let name = '';
let submitted = false;
let error: string | undefined;
let submitting = false;

async function submit() {
submitting = true;
error = undefined;
const response = await newsletter(name, email);
submitting = false;
if (response.status >= 400) {
error = response.status >= 500 ? 'Server Error.' : 'Error submitting form.';
return;
}
submitted = true;
}
</script>

<div class="aw-u-row-gap-80 u-position-relative">
<div class="aw-container">
<div class="aw-hero aw-u-max-width-800">
<h5 class="aw-display aw-u-color-text-primary">Subscribe to our newsletter</h5>
<p class="aw-description aw-u-color-text-primary" style="opacity:0.64">
Sign up to our company blog and get the latest insights from Appwrite. Learn more about
engineering, product design, building community, and tips & tricks for using Appwrite.
</p>
<div
class="aw-subscribe-input aw-input-text is-reset-input-inside u-width-full-line aw-u-max-width-380 u-margin-inline-auto u-margin-block-start-32"
<div class="pre-footer-bg" style="pointer-events:none;">
<svg
xmlns="http://www.w3.org/2000/svg"
width="692"
height="1171"
viewBox="0 0 692 1171"
fill="none"
style="max-inline-size:100%;"
>
<g opacity="0.4" filter="url(#filter0_f_1577_37321)">
<path
d="M-96.9811 29.2126C-329.155 33.7322 -513.706 225.611 -509.186 457.785C-504.667 689.959 -312.788 874.51 -80.6141 869.99C33.1857 867.775 -132.237 523.592 -36.8339 437.579C62.4044 348.109 394.063 627.529 391.759 509.155C387.239 276.98 135.193 24.693 -96.9811 29.2126Z"
fill="url(#paint0_radial_1577_37321)"
/>
</g>
<defs>
<filter
id="filter0_f_1577_37321"
x="-809.268"
y="-270.847"
width="1501.04"
height="1440.92"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="150" result="effect1_foregroundBlur_1577_37321" />
</filter>
<radialGradient
id="paint0_radial_1577_37321"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-88.7975 449.601) rotate(178.885) scale(420.468 420.468)"
>
<input type="email" placeholder="Enter your email" />
<button class="aw-button">Sign up</button>
<stop offset="0.281696" stop-color="#FE9567" />
<stop offset="0.59375" stop-color="#FD366E" />
</radialGradient>
</defs>
</svg>
</div>

<div class="aw-big-padding-section">
<div class="aw-big-padding-section-level-1">
<div class="aw-big-padding-section-level-2">
<div class="aw-container">
<div class="aw-grid-1-1-opt-2 u-gap-32">
<div class="">
<div class="aw-u-max-inline-size-none-mobile" class:aw-u-max-width-380={!submitted}>
<section class="u-flex-vertical aw-u-gap-20">
<h1 class="aw-title aw-u-color-text-primary">Subscribe to our newsletter</h1>
<p class="aw-description aw-u-padding-block-end-40">
Sign up to our company blog and get the latest insights from Appwrite. Learn more
about engineering, product design, building community, and tips & tricks for using
Appwrite.
</p>
</section>
</div>
</div>
{#if submitted}
<div class="u-flex u-gap-8 u-cross-center">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="9"
cy="9"
r="8"
fill="#FD366E"
fill-opacity="0.08"
stroke="#FD366E"
stroke-opacity="0.32"
stroke-width="1.2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M5.25 10.5L7.75 12.5L12.75 6"
stroke="#E4E4E7"
stroke-width="1.2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>

<span class="text">
Thank you for subscribing! An email has been sent to your inbox.
</span>
</div>
{:else}
<form method="post" on:submit|preventDefault={submit} class="u-flex-vertical u-gap-16">
<div class="u-flex u-flex-vertical u-gap-4">
<label for="name">Your name</label>
<input
class="aw-input-text"
type="text"
placeholder="Enter your name"
id="name"
name="name"
required
bind:value={name}
/>
</div>
<div class="u-flex u-flex-vertical u-gap-4">
<label for="email">Your email</label>
<input
class="aw-input-text"
type="email"
placeholder="Enter your email"
required
id="email"
name="email"
bind:value={email}
/>
</div>
<button type="submit" class="aw-button" disabled={submitting}>Sign up</button>
{#if error}
<span class="text"> Something went wrong. Please try again later. </span>
{/if}
</form>
{/if}
</div>
</div>
</div>
</div>
Expand All @@ -28,7 +173,7 @@
top: clamp(300px, 50vw, 50%);
left: clamp(300px, 50vw, 50%);
transform: translate(-50%, -70%);
width: clamp(1200px, 200vw, 3000px);
width: clamp(1200px, 100vw, 3000px);
height: auto;
max-inline-size: unset;
max-block-size: unset;
Expand Down
133 changes: 117 additions & 16 deletions src/routes/community/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import { Carousel } from '$lib/components';
import { TITLE_SUFFIX } from '$routes/titles';
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
import { newsletter } from '$lib/components/Newsletter.svelte';
import FloatingHeads from '$lib/components/FloatingHeads.svelte';
import type { EventCardProps } from './EventCard.svelte';
import EventCard from './EventCard.svelte';
Expand Down Expand Up @@ -95,6 +96,24 @@
}
];

let name = '';
let email = '';
let submitted = false;
let error: string | undefined;
let submitting = false;

async function submit() {
submitting = true;
error = undefined;
const response = await newsletter(name, email);
submitting = false;
if (response.status >= 400) {
error = response.status >= 500 ? 'Server Error.' : 'Error submitting form.';
return;
}
submitted = true;
}

const title = 'Community' + TITLE_SUFFIX;
const description = DEFAULT_DESCRIPTION;
const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
Expand Down Expand Up @@ -681,23 +700,105 @@
</div>
</div>
</div>
<div class="aw-big-padding-section">
<div class="aw-big-padding-section-level-1">
<div class="aw-big-padding-section-level-2">
<div class="aw-container">
<div class="aw-grid-1-1-opt-2 u-gap-32">
<div class="">
<div
class="aw-u-max-inline-size-none-mobile"
class:aw-u-max-width-380={!submitted}
>
<section class="u-flex-vertical aw-u-gap-20">
<h1 class="aw-title aw-u-color-text-primary">
Appwrite insights
</h1>
<p class="aw-description aw-u-padding-block-end-40">
Sign up to our company blog and get the latest insights
from Appwrite. Learn more about engineering, product
design, building community, and tips & tricks for using
Appwrite.
</p>
</section>
</div>
</div>
{#if submitted}
<div class="u-flex u-gap-8 u-cross-center">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="9"
cy="9"
r="8"
fill="#FD366E"
fill-opacity="0.08"
stroke="#FD366E"
stroke-opacity="0.32"
stroke-width="1.2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M5.25 10.5L7.75 12.5L12.75 6"
stroke="#E4E4E7"
stroke-width="1.2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>

<div class="aw-big-padding-section-level-1 u-padding-0">
<div class="aw-big-padding-section-level-2">
<div class="aw-container">
<div class="aw-hero is-center aw-u-max-width-800">
<h3 class="aw-display aw-u-color-text-primary">Appwrite insights</h3>
<p class="aw-main-body-400">
Sign up to our blog and get the latest insights from Appwrite. Learn
more about engineering, product design, building community, and tips &
tricks for using Appwrite.
</p>
</div>
<div
class="aw-subscribe-input aw-input-text is-reset-input-inside u-width-full-line aw-u-max-width-380 u-margin-inline-auto u-margin-block-start-32"
>
<input type="email" placeholder="Enter your email" />
<button class="aw-button">Sign up</button>
<span class="text">
Thank you for subscribing! An email has been sent to your
inbox.
</span>
</div>
{:else}
<form
method="post"
on:submit|preventDefault={submit}
class="u-flex-vertical u-gap-16"
>
<div class="u-flex u-flex-vertical u-gap-4">
<label for="name">Your name</label>
<input
class="aw-input-text"
type="text"
placeholder="Enter your name"
id="name"
name="name"
required
bind:value={name}
/>
</div>
<div class="u-flex u-flex-vertical u-gap-4">
<label for="email">Your email</label>
<input
class="aw-input-text"
type="email"
placeholder="Enter your email"
required
id="email"
name="email"
bind:value={email}
/>
</div>
<button type="submit" class="aw-button" disabled={submitting}
>Sign up</button
>
{#if error}
<span class="text">
Something went wrong. Please try again later.
</span>
{/if}
</form>
{/if}
</div>
</div>
</div>
</div>
Expand Down
6 changes: 6 additions & 0 deletions src/routes/subscription/+page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { redirect } from '@sveltejs/kit';
import type { PageLoad } from './$types';

export const load: PageLoad = async () => {
throw redirect(303, '/');
};
Loading