🚀 Init
This commit is contained in:
commit
0f60ab6965
SSH key fingerprint:
SHA256:Q0b0KraMldpAO9oKa+w+gcsXsOTykQ4UkAKn0ByGn5U
9 changed files with 231 additions and 0 deletions
3
.env.sample
Normal file
3
.env.sample
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
SEND_TO="smithers@example.org"
|
||||
SEND_FROM="Astro Test <forms@example.org>"
|
||||
RESEND_API_KEY="re_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
|
||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# build output
|
||||
dist/
|
||||
|
||||
# generated types
|
||||
.astro/
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# environment variables
|
||||
.env
|
||||
.env.production
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
|
||||
# jetbrains setting folder
|
||||
.idea/
|
||||
11
astro.config.mjs
Normal file
11
astro.config.mjs
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
// @ts-check
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
||||
import node from '@astrojs/node';
|
||||
|
||||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: node({
|
||||
mode: 'standalone'
|
||||
})
|
||||
});
|
||||
16
package.json
Normal file
16
package.json
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"name": "form-while",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/node": "^9.1.3",
|
||||
"astro": "^5.5.3",
|
||||
"resend": "^4.1.2"
|
||||
}
|
||||
}
|
||||
9
public/favicon.svg
Normal file
9
public/favicon.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||
<style>
|
||||
path { fill: #000; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path { fill: #FFF; }
|
||||
}
|
||||
</style>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 749 B |
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
33
src/actions/index.ts
Normal file
33
src/actions/index.ts
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import { ActionError, defineAction } from 'astro:actions'
|
||||
import { z } from 'astro:schema'
|
||||
import { Resend } from 'resend'
|
||||
|
||||
const resend = new Resend(import.meta.env.RESEND_API_KEY)
|
||||
|
||||
export const server = {
|
||||
send: defineAction({
|
||||
input: z.object({
|
||||
email: z.string(),
|
||||
name: z.string(),
|
||||
message: z.string()
|
||||
}),
|
||||
accept: 'form',
|
||||
handler: async (input, redirect) => {
|
||||
const { data, error } = await resend.emails.send({
|
||||
from: import.meta.env.SEND_FROM,
|
||||
to: [import.meta.env.SEND_TO],
|
||||
subject: `From ${input.name} - ${input.email}`,
|
||||
html: `${input.message} <hr/> From ${input.name} - <a href="mailto:${input.email}">${input.email}</a>`
|
||||
})
|
||||
|
||||
if (error) {
|
||||
throw new ActionError({
|
||||
code: 'BAD_REQUEST',
|
||||
message: error.message
|
||||
})
|
||||
}
|
||||
|
||||
return data
|
||||
}
|
||||
})
|
||||
}
|
||||
130
src/pages/index.astro
Normal file
130
src/pages/index.astro
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
---
|
||||
import { actions } from "astro:actions"
|
||||
---
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="contact">
|
||||
<img src="/logo.png"/>
|
||||
<div class="contact-box">
|
||||
<h2>Contact Us</h2>
|
||||
<form action={actions.send} method="POST">
|
||||
<div class="form-row">
|
||||
<div class="form-input">
|
||||
<label>Email</label>
|
||||
<input name="email" type="email" required/>
|
||||
</div>
|
||||
<div class="form-input">
|
||||
<label>Name</label>
|
||||
<input name="name" type="text" required/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-input">
|
||||
<label>Message</label>
|
||||
<textarea name="message" wrap="hard"></textarea>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="form-actions">
|
||||
<button type="submit">Send email</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© 2025 Company Name LLC</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: radial-gradient(#141414, #000);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
color: white;
|
||||
font-family: arial;
|
||||
overflow: hidden;
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
text-align: center;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
p {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
.contact {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
img[src="/logo.png"] {
|
||||
width: 240px;
|
||||
margin: 32px 0px;
|
||||
}
|
||||
.contact-box {
|
||||
background: #050505;
|
||||
border: 2px #292929 solid;
|
||||
border-radius: 6px;
|
||||
padding: 24px;
|
||||
}
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
.form-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
margin-top: 6px;
|
||||
}
|
||||
form {
|
||||
label {
|
||||
color: gray;
|
||||
}
|
||||
textarea {
|
||||
min-height: 160px;
|
||||
resize: vertical;
|
||||
}
|
||||
input, textarea {
|
||||
background: #2f2f2f !important;
|
||||
color: white;
|
||||
border: 1px rgb(63, 63, 63) solid;
|
||||
transition: 0.3s border;
|
||||
border-radius: 3px;
|
||||
padding: 6px 12px;
|
||||
&:focus {
|
||||
outline: transparent;
|
||||
border-color: rgb(163, 163, 163);
|
||||
transition: 0.3s border;
|
||||
}
|
||||
&:hover {
|
||||
border-color: rgb(87, 87, 87);
|
||||
transition: 0.3s border;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
button {
|
||||
background: #e02834;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
5
tsconfig.json
Normal file
5
tsconfig.json
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"include": [".astro/types.d.ts", "**/*"],
|
||||
"exclude": ["dist"]
|
||||
}
|
||||
Reference in a new issue