blboun3/personal-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

Removed contact form

Browse Source 
- Removed contact form
- Added contact via email button
- Reordered floating contact buttons
This commit is contained in:
Cyril Šebek
2024-07-07 13:14:49 +02:00
parent d6d44fd9af
commit 6ff8596301
15 changed files with 43 additions and 746 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/About.astro
View File

@ -8,7 +8,7 @@ const t = useTranslations(getLangFromUrl(Astro.url));
---
<SinglePage>
<div class="h-full max-h-dvh max-w-full grid grid-rows-3 gap-4">
<div class="h-full max-h-dvh max-w-full grid grid-rows-3 gap-4" id="about">
<!-- Automaticly generate n (=3) bars with content -->
{
[0,1,2].map(i =>

156
src/components/ContactForm.tsx
View File

@ -1,156 +0,0 @@
"use client";
import { useTranslations } from "../i18n/utils";
import { Button } from "./ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "./ui/dialog";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "./ui/form";
import { Input } from "./ui/input";
import { z } from "astro/zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { Textarea } from "./ui/textarea"
const formSchema = z.object({
username: z.string().min(2),
email: z.string().email(),
message: z.string(),
});
export function ContactForm({ currentLocale }) {
const t = useTranslations(currentLocale);
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
username: "",
email: "",
message: "",
/*datetime: "2020-01-01T00:00:00Z",*/
},
});
async function onSubmit(values: z.infer<typeof formSchema>) {
const formData = new FormData();
for (const value of Object.keys(values)) {
formData.append(value, values[value])
}
console.log(formData)
const response = await fetch("/api", {
method: "POST",
body: formData
});
const data = await response.json();
console.log(data.message)
}
return (
<Dialog>
<DialogTrigger asChild>
<button
type="button"
className="text-2xl m-2 bg-secondary/60 rounded-md p-1 hover:bg-secondary text-content"
>
{t("hero").buttons[1]}
</button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle><p className="text-foreground">{t("contact").title}</p></DialogTitle>
<DialogDescription>{t("contact").description}</DialogDescription>
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormLabel>{t("contact").name}</FormLabel>
<FormControl>
<Input
placeholder={t("contact").nameDefaultValue}
className="col-span-3 text-foreground"
{...field}
/>
</FormControl>
<FormDescription>
{t("contact").nameDescription}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>{t("contact").email}</FormLabel>
<FormControl>
<Input
placeholder={t("contact").emailDefaultValue}
className="col-span-3 text-foreground"
type="email"
{...field}
/>
</FormControl>
<FormDescription>
{t("contact").emailDescription}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="message"
render={({ field }) => (
<FormItem>
<FormLabel>{t("contact").message}</FormLabel>
<FormControl>
<Textarea
placeholder={t("contact").messageDefaultValue}
className="col-span-3 text-foreground"
{...field}
/>
</FormControl>
<FormDescription>
{t("contact").messageDescription}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<DialogFooter>
<Button type="submit">{t("contact").button}</Button>
</DialogFooter>
</form>
</Form>
</DialogContent>
</Dialog>
);
}

5
src/components/FloatingLinks.astro
View File

@ -4,9 +4,10 @@ import { ContactButton } from "./ContactButton";
<!-- Contacts list -->
<div>
<div class="relative top-[97vh] left-[30vw] z-[1000] sm:fixed sm:left-2 sm:top-[40%] flex sm:flex-col text-lg text-content" >
<ContactButton variant={"matrix"} link={"https://matrix.to/#/@cyril:cyrilsebek.cz"} tooltip={"Matrix Chat"} client:load/>
<div class="relative top-[97vh] left-[26vw] z-[1000] sm:fixed sm:left-2 sm:top-[38%] flex sm:flex-col text-lg text-content" >
<ContactButton variant={"mail"} link={"mailto:cyril@cyrilsebek.cz"} tooltip={"Mail"} client:load/>
<ContactButton variant={"telegram"} link={"https://t.me/blboun3"} tooltip={"Telegram Chat"} client:load/>
<ContactButton variant={"matrix"} link={"https://matrix.to/#/@cyril:cyrilsebek.cz"} tooltip={"Matrix Chat"} client:load/>
<ContactButton variant={"github"} link={"https://github.com/Blboun3"} tooltip={"Github"} client:load/>
<ContactButton variant={"git"} link={"https://git.cyrilsebek.cz/blboun3"} tooltip={"Selfhosted gitea"} client:load/>
</div>

33
src/components/Hero.astro
View File

@ -1,7 +1,6 @@
---
import SinglePage from "../layouts/SinglePage.astro";
import { getLangFromUrl, useTranslations } from "../i18n/utils";
import { ContactForm } from "./ContactForm";
const t = useTranslations(getLangFromUrl(Astro.url))
---
@ -9,29 +8,49 @@ const t = useTranslations(getLangFromUrl(Astro.url))
<SinglePage>
<!-- Hero Image -->
<div class="w-full flex justify-center mt-20 ">
<img src={t("hero").image} alt="" class="rounded-full w-[200px] h-[200px]" />
<img src={t("hero")["image"]} alt="" class="rounded-full w-[200px] h-[200px]" />
</div>
<!-- Hero Text -->
<div class="mt-[6rem]">
<h1 class="text-accent text-4xl w-full text-center font-extrabold">
{t("hero").title}
{t("hero")["title"]}
</h1>
<h2 class="text-content text-lg w-full text-center mt-[3.2rem]">
{t("hero").content}
{t("hero")["content"]}
</h2>
</div>
<!-- Call action buttons -->
<div class="mt-[5.5rem] w-full grid justify-around grid-cols-2">
<button
type="button"
onclick="linkToBlog()"
onclick="scrollNext()"
class="text-3xl bg-accent text-bkg p-1 rounded-md bg-opacity-75 hover:bg-opacity-100 m-2"
>
{t("hero").buttons[0]}
{t("hero")["buttons"][0]}
</button>
<button
type="button"
onclick="linkToBlog()"
class="text-2xl m-2 bg-secondary/60 rounded-md p-1 hover:bg-secondary text-content"
>
{t("hero")["buttons"][1]}
</button>
<ContactForm currentLocale={Astro.currentLocale} client:load />
</div>
<script is:inline>
window.addEventListener('load', function() {
var urlParams = new URLSearchParams(window.location.search);
var hash = window.location.hash;
// Check if there's a hash in the URL
if (hash !== '') {
// Remove the hash and navigate to the root URL
window.history.replaceState({}, '', urlParams.toString());
window.location.href = '/';
}
});
function scrollNext() {
window.location.href = "#about"
}
function linkToBlog() {
document.getElementById("blogBtn").click()
}

94
src/components/ui/dialog.jsx
View File

@ -1,94 +0,0 @@
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"
import { cn } from "../../lib/utils"
const Dialog = DialogPrimitive.Root
const DialogTrigger = DialogPrimitive.Trigger
const DialogPortal = DialogPrimitive.Portal
const DialogClose = DialogPrimitive.Close
const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props} />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}>
{children}
<DialogPrimitive.Close
className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName
const DialogHeader = ({
className,
...props
}) => (
<div
className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
{...props} />
)
DialogHeader.displayName = "DialogHeader"
const DialogFooter = ({
className,
...props
}) => (
<div
className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
{...props} />
)
DialogFooter.displayName = "DialogFooter"
const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
<DialogPrimitive.Title
ref={ref}
className={cn("text-lg font-semibold leading-none tracking-tight", className)}
{...props} />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName
const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props} />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName
export {
Dialog,
DialogPortal,
DialogOverlay,
DialogClose,
DialogTrigger,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
}

133
src/components/ui/form.jsx
View File

@ -1,133 +0,0 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { Controller, FormProvider, useFormContext } from "react-hook-form";
import { cn } from "../../lib/utils"
import { Label } from "./label"
const Form = FormProvider
const FormFieldContext = React.createContext({})
const FormField = (
{
...props
}
) => {
return (
(<FormFieldContext.Provider value={{ name: props.name }}>
<Controller {...props} />
</FormFieldContext.Provider>)
);
}
const useFormField = () => {
const fieldContext = React.useContext(FormFieldContext)
const itemContext = React.useContext(FormItemContext)
const { getFieldState, formState } = useFormContext()
const fieldState = getFieldState(fieldContext.name, formState)
if (!fieldContext) {
throw new Error("useFormField should be used within <FormField>")
}
const { id } = itemContext
return {
id,
name: fieldContext.name,
formItemId: `${id}-form-item`,
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
...fieldState,
}
}
const FormItemContext = React.createContext({})
const FormItem = React.forwardRef(({ className, ...props }, ref) => {
const id = React.useId()
return (
(<FormItemContext.Provider value={{ id }}>
<div ref={ref} className={cn("space-y-2", className)} {...props} />
</FormItemContext.Provider>)
);
})
FormItem.displayName = "FormItem"
const FormLabel = React.forwardRef(({ className, ...props }, ref) => {
const { error, formItemId } = useFormField()
return (
(<Label
ref={ref}
className={cn(error && "text-destructive", className)}
htmlFor={formItemId}
{...props} />)
);
})
FormLabel.displayName = "FormLabel"
const FormControl = React.forwardRef(({ ...props }, ref) => {
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
return (
(<Slot
ref={ref}
id={formItemId}
aria-describedby={
!error
? `${formDescriptionId}`
: `${formDescriptionId} ${formMessageId}`
}
aria-invalid={!!error}
{...props} />)
);
})
FormControl.displayName = "FormControl"
const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
const { formDescriptionId } = useFormField()
return (
(<p
ref={ref}
id={formDescriptionId}
className={cn("text-sm text-muted-foreground", className)}
{...props} />)
);
})
FormDescription.displayName = "FormDescription"
const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
const { error, formMessageId } = useFormField()
const body = error ? String(error?.message) : children
if (!body) {
return null
}
return (
(<p
ref={ref}
id={formMessageId}
className={cn("text-sm font-medium text-destructive", className)}
{...props}>
{body}
</p>)
);
})
FormMessage.displayName = "FormMessage"
export {
useFormField,
Form,
FormItem,
FormLabel,
FormControl,
FormDescription,
FormMessage,
FormField,
}

29
src/i18n/cs.js
View File

@ -14,7 +14,6 @@ export const cs = {
mode: "Režim"
},
/*
Hero module of the page
*/
@ -22,29 +21,7 @@ export const cs = {
title: "Programuji rytmy, hraji algoritmy",
content: "Osobní stránka a blog podivínského studenta z Česka",
image: "/frontpage.svg",
buttons: ["Více", "Kontakt"],
},
/*
Contact dialog from hero page
*/
contact: {
title: "Kontakt",
description: "Pokud máte zájem spolupracovat se mnou nebo by vás jenom něco zajímalo tak mě neváhejte kontaktovat pomocí tohoto formuláře. Slibuji, že se vám brzy ozvu!",
name: "name",
nameDescription: "Jméno",
nameDefaultValue: "Beff Jazos",
email: "email",
emailDescription: "Email",
emailDefaultValue: "beff@sahara.com",
message: "message",
messageDescription: "Vaše zpráva",
messageDefaultValue: "Ahoj :)",
button: "Odeslat"
buttons: ["Více", "Blog"],
},
/*
@ -117,7 +94,8 @@ export const cs = {
Blog page
*/
blog: {
title: "Blog",
title: "Blog @ Cyril Šebek",
visible: "Blog",
description: "Můj osobní blog dokumentující mé šílené nápady",
},
@ -125,6 +103,7 @@ export const cs = {
Page with musical compositions
*/
music: {
pageTitle: "Moje skladby @ Cyril Šebek",
title: "Moje skladby",
description: "Seznam mých skladeb.",
downloadPDF: "Stáhnout PDF",

25
src/i18n/de.js
View File

@ -21,29 +21,7 @@ export const de = {
title: "Coding Rhythms and Melodic Algorithms",
content: "Welcome to personal website & blog of one weird student from Czechia",
image: "/frontpage.svg",
buttons: ["Read more", "Contact me"],
},
/*
Contact dialog from hero page
*/
contact: {
title: "Contact me",
description: "If you are interested in working with me or you just want to talk you can contact me using this form and I promise I will get back to you soon!",
name: "name",
nameDescription: "Name",
nameDefaultValue: "Beff Jazos",
email: "email",
emailDescription: "Email",
emailDefaultValue: "beff@sahara.com",
message: "message",
messageDescription: "Your message",
messageDefaultValue: "Hi there :)",
button: "Send"
buttons: ["Read more", "Blog"],
},
/*
@ -117,6 +95,7 @@ export const de = {
*/
blog: {
title: "Blog @ Cyril Šebek",
visible: "Blog",
description: "My personal blog, documenting some of my crazy ideas",
},

25
src/i18n/en.js
View File

@ -21,29 +21,7 @@ export const en = {
title: "Coding Rhythms and Melodic Algorithms",
content: "Welcome to personal website & blog of one weird student from Czechia",
image: "/frontpage.svg",
buttons: ["Read more", "Contact me"],
},
/*
Contact dialog from hero page
*/
contact: {
title: "Contact me",
description: "If you are interested in working with me or you just want to talk you can contact me using this form and I promise I will get back to you soon!",
name: "name",
nameDescription: "Name",
nameDefaultValue: "Beff Jazos",
email: "email",
emailDescription: "Email",
emailDefaultValue: "beff@sahara.com",
message: "message",
messageDescription: "Your message",
messageDefaultValue: "Hi there :)",
button: "Send"
buttons: ["Read more", "Blog"],
},
/*
@ -117,6 +95,7 @@ export const en = {
*/
blog: {
title: "Blog @ Cyril Šebek",
visible: "Blog",
description: "My personal blog, documenting some of my crazy ideas",
},

25
src/i18n/fr.js
View File

@ -21,29 +21,7 @@ export const fr = {
title: "Coding Rhythms and Melodic Algorithms",
content: "Welcome to personal website & blog of one weird student from Czechia",
image: "/frontpage.svg",
buttons: ["Read more", "Contact me"],
},
/*
Contact dialog from hero page
*/
contact: {
title: "Contact me",
description: "If you are interested in working with me or you just want to talk you can contact me using this form and I promise I will get back to you soon!",
name: "name",
nameDescription: "Name",
nameDefaultValue: "Beff Jazos",
email: "email",
emailDescription: "Email",
emailDefaultValue: "beff@sahara.com",
message: "message",
messageDescription: "Your message",
messageDefaultValue: "Hi there :)",
button: "Send"
buttons: ["Read more", "Blog"],
},
/*
@ -117,6 +95,7 @@ export const fr = {
*/
blog: {
title: "Blog @ Cyril Šebek",
visible: "Blog",
description: "My personal blog, documenting some of my crazy ideas",
},

3
src/lib/icons.js
View File

@ -50,5 +50,6 @@ const matrix = `<svg role="img" viewBox="-1 -1 26 26" xmlns="http://www.w3.org/2
const telegram = `<svg role="img" viewBox="-1 -1 26 26" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" stroke="currentColor" d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>`
const github = `<svg role="img" viewBox="-1 -1 26 26" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" stroke="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>`
const git = `<svg role="img" viewBox="-1 -1 26 26" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" stroke="currentColor" d="M23.546 10.93L13.067.452c-.604-.603-1.582-.603-2.188 0L8.708 2.627l2.76 2.76c.645-.215 1.379-.07 1.889.441.516.515.658 1.258.438 1.9l2.658 2.66c.645-.223 1.387-.078 1.9.435.721.72.721 1.884 0 2.604-.719.719-1.881.719-2.6 0-.539-.541-.674-1.337-.404-1.996L12.86 8.955v6.525c.176.086.342.203.488.348.713.721.713 1.883 0 2.6-.719.721-1.889.721-2.609 0-.719-.719-.719-1.879 0-2.598.182-.18.387-.316.605-.406V8.835c-.217-.091-.424-.222-.6-.401-.545-.545-.676-1.342-.396-2.009L7.636 3.7.45 10.881c-.6.605-.6 1.584 0 2.189l10.48 10.477c.604.604 1.582.604 2.186 0l10.43-10.43c.605-.603.605-1.582 0-2.187"/></svg>`
const mail = `<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 1 23 23" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" style="--darkreader-inline-stroke: currentColor;" data-darkreader-inline-stroke=""><path stroke="none" d="M0 0h24v24H0z" fill="none" style="--darkreader-inline-stroke: none;" data-darkreader-inline-stroke=""></path><path d="M22 7.535v9.465a3 3 0 0 1 -2.824 2.995l-.176 .005h-14a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-9.465l9.445 6.297l.116 .066a1 1 0 0 0 .878 0l.116 -.066l9.445 -6.297z" stroke-width="0" fill="currentColor" style="--darkreader-inline-fill: currentColor;" data-darkreader-inline-fill=""></path><path d="M19 4c1.08 0 2.027 .57 2.555 1.427l-9.555 6.37l-9.555 -6.37a2.999 2.999 0 0 1 2.354 -1.42l.201 -.007h14z" stroke-width="0" fill="currentColor" style="--darkreader-inline-fill: currentColor;" data-darkreader-inline-fill=""></path></svg>`
export const icons = { home: home, blog: blog, theme_dark: theme_dark, theme_light: theme_light, lang: lang, theme_auto: theme_auto, music: music, matrix: matrix, telegram: telegram, github: github, git: git};
export const icons = { home: home, blog: blog, theme_dark: theme_dark, theme_light: theme_light, lang: lang, theme_auto: theme_auto, music: music, matrix: matrix, telegram: telegram, github: github, git: git, mail: mail};

2
src/pages/[lang]/blog/index.astro
View File

@ -25,7 +25,7 @@ var filtered_posts = posts.filter(
<MainLayout title={t("blog")["title"]} description={t("blog")["description"]} lang={Astro.currentLocale}>
<SinglePageBlogMode>
<div class="p-4">
<h4 class="mb-2 text-3xl font-semibold leading-none text-foreground">{t("blog")["title"]}</h4>
<h4 class="mb-2 text-3xl font-semibold leading-none text-foreground">{t("blog")["visible"]}</h4>
<p class="mb-4 text-md leading-none text-foreground">{t("blog")["description"]}</p>
<Separator className="my-4"/>
<PostsList filteredPosts={filtered_posts} lang={Astro.currentLocale}/>

64
src/pages/api.js
View File

@ -1,64 +0,0 @@
import nodemailer from "nodemailer";
import { createId } from "@paralleldrive/cuid2";
import { InfisicalClient } from "@infisical/sdk";
const client = new InfisicalClient({
siteUrl: import.meta.env.INFISICAL_URL,
auth: {
universalAuth: {
clientId: import.meta.env.INFISICAL_CLIENTID,
clientSecret: import.meta.env.INFISICAL_SECRET,
},
},
});
export const POST = async ({ request }) => {
try {
var secrets = await client.listSecrets({
environment: "dev",
projectId: import.meta.env.INFISICAL_PROJECTID,
path: "/email",
includeImports: false,
});
secrets = Object.fromEntries(
secrets.map((item) => [item.secretKey, item.secretValue])
);
const thisCuid = createId();
const data = await request.formData();
var message = {
from: `${data.get("username")} <${secrets["EMAIL"]}>`,
to: `Site Admin <${secrets["RECEIVER"]}>`,
subject: `${secrets["EMAIL_HEAD"]} | ${thisCuid}`,
text: `---\n${data.get("username")}\n${data.get(
"email"
)}\n---\n${data.get("message")}`,
html: `<p>---<br/>${data.get("username")}<br/>${data.get(
"email"
)}<br/>---<br/>${data.get("message")}</p>`,
envelope: {
from: `${data.get("username")} <${secrets["EMAIL"]}>`,
to: `Site Admin <${secrets["RECEIVER"]}>`,
},
};
var transport = nodemailer.createTransport({
host: secrets["SMTP_SERVER"],
port: secrets["SMTP_PORT"],
secure: secrets["SMTP_SECURITY"],
auth: {
user: secrets["EMAIL"],
pass: secrets["PASSWORD"],
},
});
var mailResponse = await transport.sendMail(message);
return new Response(JSON.stringify({ message: "Success!" }), {
status: 200,
});
} catch (error) {
console.error("Error parsing form data:", error);
return new Response(
JSON.stringify({ message: "Failed to parse form data" }),
{ status: 400 }
);
}
};