Removed contact form

- 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
Signed by: blboun3
SSH Key Fingerprint: SHA256:n9dMtOPzgsD+CCerUJslEnU2dzVanbaIv0XDQVRVjeg
15 changed files with 43 additions and 746 deletions

View File

@ -16,10 +16,6 @@
"@astrojs/rss": "^4.0.7",
"@astrojs/sitemap": "^3.1.6",
"@astrojs/tailwind": "^5.1.0",
"@hookform/resolvers": "^3.6.0",
"@infisical/sdk": "^2.2.3",
"@paralleldrive/cuid2": "^2.2.2",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-scroll-area": "^1.0.5",
@ -27,7 +23,6 @@
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-tooltip": "^1.1.2",
"@types/nodemailer": "^6.4.15",
"@types/react": "^18.2.74",
"@types/react-dom": "^18.2.24",
"astro": "^4.11.5",
@ -36,10 +31,8 @@
"cmdk": "^1.0.0",
"embla-carousel-react": "^8.0.2",
"lucide-react": "^0.365.0",
"nodemailer": "^6.9.13",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.51.5",
"rehype-pretty-code": "^0.13.2",
"rehype-slug": "^6.0.0",
"tailwind-merge": "^2.2.2",

186
pnpm-lock.yaml generated
View File

@ -23,18 +23,6 @@ dependencies:
'@astrojs/tailwind':
specifier: ^5.1.0
version: 5.1.0(astro@4.11.5)(tailwindcss@3.4.1)
'@hookform/resolvers':
specifier: ^3.6.0
version: 3.6.0(react-hook-form@7.51.5)
'@infisical/sdk':
specifier: ^2.2.3
version: 2.2.3
'@paralleldrive/cuid2':
specifier: ^2.2.2
version: 2.2.2
'@radix-ui/react-dialog':
specifier: ^1.0.5
version: 1.0.5(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-dropdown-menu':
specifier: ^2.0.6
version: 2.0.6(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0)(react@18.2.0)
@ -56,9 +44,6 @@ dependencies:
'@radix-ui/react-tooltip':
specifier: ^1.1.2
version: 1.1.2(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0)(react@18.2.0)
'@types/nodemailer':
specifier: ^6.4.15
version: 6.4.15
'@types/react':
specifier: ^18.2.74
version: 18.2.74
@ -83,18 +68,12 @@ dependencies:
lucide-react:
specifier: ^0.365.0
version: 0.365.0(react@18.2.0)
nodemailer:
specifier: ^6.9.13
version: 6.9.13
react:
specifier: ^18.2.0
version: 18.2.0
react-dom:
specifier: ^18.2.0
version: 18.2.0(react@18.2.0)
react-hook-form:
specifier: ^7.51.5
version: 7.51.5(react@18.2.0)
rehype-pretty-code:
specifier: ^0.13.2
version: 0.13.2(shiki@1.10.1)
@ -786,14 +765,6 @@ packages:
resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
dev: false
/@hookform/resolvers@3.6.0(react-hook-form@7.51.5):
resolution: {integrity: sha512-UBcpyOX3+RR+dNnqBd0lchXpoL8p4xC21XP8H6Meb8uve5Br1GCnmg0PcBoKKqPKgGu9GHQ/oygcmPrQhetwqw==}
peerDependencies:
react-hook-form: ^7.0.0
dependencies:
react-hook-form: 7.51.5(react@18.2.0)
dev: false
/@img/sharp-darwin-arm64@0.33.4:
resolution: {integrity: sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==}
engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
@ -982,132 +953,6 @@ packages:
dev: false
optional: true
/@infisical/sdk-android-arm-eabi@2.2.3:
resolution: {integrity: sha512-eDkrjgQ1CD1UaAIbRLv4clMy4iwiprH8uMnC31d8ABdlNyvYPiC3zgy+XPuxVefnCVT2NrqM5UsPKDAIdMeOag==}
engines: {node: '>= 10'}
cpu: [arm]
os: [android]
requiresBuild: true
dev: false
optional: true
/@infisical/sdk-android-arm64@2.2.3:
resolution: {integrity: sha512-9EAKO+MgcHyODDobGi3iwG5n207rH2PQ0XPaC6VSZp90oN5unSTmNWK7qbElbTSf+MwrsyOJT87QTXicatzCBw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [android]
requiresBuild: true
dev: false
optional: true
/@infisical/sdk-darwin-arm64@2.2.3:
resolution: {integrity: sha512-58qQA3hI9SUcRJQghiNQjt92HiWIRX1NVkWZsNN9HX6j5YaHC9hhUmJ7RopI768Bsh5jxwmyeEn9CXzFxIUA8Q==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
requiresBuild: true
dev: false
optional: true
/@infisical/sdk-darwin-x64@2.2.3:
resolution: {integrity: sha512-AyIBGJH/EcsJrpMDgQPL4lmDAqGywn2MKB0dsOnBBwJHLdxvzra4IA9ZQHockI7kSUKu5kSA5YTk6seZ5f/BIg==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
requiresBuild: true
dev: false
optional: true
/@infisical/sdk-linux-arm-gnueabihf@2.2.3:
resolution: {integrity: sha512-sFGhXqckuVUPmqnFuZbX/NFlxpdAu/IHzGQKbPYsGjPnqxC+ZkCBvuyj1IpVIElL/j09pLVbMMWZv1vf+aaHmQ==}
engines: {node: '>= 10'}
cpu: [arm]
os: [linux]
requiresBuild: true
dev: false
optional: true
/@infisical/sdk-linux-arm64-gnu@2.2.3:
resolution: {integrity: sha512-ppXvRBVINN7DSMLIaM3syUkYXvDVsrO0OzVgQ9ti9yYcBPOJlzrIU2H/yiXXv/m8U58jCja275i5K5y1VdjuPw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
requiresBuild: true
dev: false
optional: true
/@infisical/sdk-linux-arm64-musl@2.2.3:
resolution: {integrity: sha512-/JouatsZb7KAbks682tHIRH5wMpGOoVCTBJjXNcnhV33bOxlyJ9G/UimgCYBpT9WuVhkRJKNXEQQdh7rsCsShA==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
requiresBuild: true
dev: false
optional: true
/@infisical/sdk-linux-x64-gnu@2.2.3:
resolution: {integrity: sha512-YH3DrvDfjmArKLrvhV+2mqoE5mY3l9cwXivqtNlcPftH5TW1MQvVq9lJEb8wIEkCNNiFYyJ2Xf8tJQDkervlYQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
requiresBuild: true
dev: false
optional: true
/@infisical/sdk-linux-x64-musl@2.2.3:
resolution: {integrity: sha512-h0+14vwyigRi8aR/BfJ8LFZOJJOUa1p7fsyVUVWuTLsaDyo5l/HW4q+C3wYX2N9Jb3NyUev4lvu19WCs8W12iQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
requiresBuild: true
dev: false
optional: true
/@infisical/sdk-win32-arm64-msvc@2.2.3:
resolution: {integrity: sha512-o07IXCl66/6WYDtIdPef7KeQX9aJsdmJJCMYu6K7ez9EV+nNJR7nmuhe6jdlK16kVdyfJB5lXuefCe+hWVx+HA==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
requiresBuild: true
dev: false
optional: true
/@infisical/sdk-win32-ia32-msvc@2.2.3:
resolution: {integrity: sha512-CXQK5N7YQ3RBVbKwx5HBGNM8LwV7/+hzN9py7C1Upv07XK0bmC6NvVrZVoYwSMDBIN3lCAy/cWASsNH+9Ve5uw==}
engines: {node: '>= 10'}
cpu: [ia32]
os: [win32]
requiresBuild: true
dev: false
optional: true
/@infisical/sdk-win32-x64-msvc@2.2.3:
resolution: {integrity: sha512-hBmKiKNQ3CK6I3Z1s+1Ix8kM2/ML5BiTRmM6EOP6iQBULMf1AmCoGzh6uO4l7gytcvixtC8Jp21+37rKjm4MLA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
requiresBuild: true
dev: false
optional: true
/@infisical/sdk@2.2.3:
resolution: {integrity: sha512-UvJjOD0b3O4obdtEYh+++Pv7Jfj5qb0QMzEZrADDLQJH0bDswRgLCaCiZtvzkV6WJPw8EKM5CFyBuZOgvDLESQ==}
engines: {node: '>= 10'}
optionalDependencies:
'@infisical/sdk-android-arm-eabi': 2.2.3
'@infisical/sdk-android-arm64': 2.2.3
'@infisical/sdk-darwin-arm64': 2.2.3
'@infisical/sdk-darwin-x64': 2.2.3
'@infisical/sdk-linux-arm-gnueabihf': 2.2.3
'@infisical/sdk-linux-arm64-gnu': 2.2.3
'@infisical/sdk-linux-arm64-musl': 2.2.3
'@infisical/sdk-linux-x64-gnu': 2.2.3
'@infisical/sdk-linux-x64-musl': 2.2.3
'@infisical/sdk-win32-arm64-msvc': 2.2.3
'@infisical/sdk-win32-ia32-msvc': 2.2.3
'@infisical/sdk-win32-x64-msvc': 2.2.3
dev: false
/@isaacs/cliui@8.0.2:
resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
engines: {node: '>=12'}
@ -1174,11 +1019,6 @@ packages:
- supports-color
dev: false
/@noble/hashes@1.4.0:
resolution: {integrity: sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==}
engines: {node: '>= 16'}
dev: false
/@nodelib/fs.scandir@2.1.5:
resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
engines: {node: '>= 8'}
@ -1197,12 +1037,6 @@ packages:
'@nodelib/fs.scandir': 2.1.5
fastq: 1.17.1
/@paralleldrive/cuid2@2.2.2:
resolution: {integrity: sha512-ZOBkgDwEdoYVlSeRbYYXs0S9MejQofiVYoTbKzy/6GQa39/q5tQU2IX46+shYnUkpEl3wc+J6wRlar7r2EK2xA==}
dependencies:
'@noble/hashes': 1.4.0
dev: false
/@pkgjs/parseargs@0.11.0:
resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
engines: {node: '>=14'}
@ -2350,12 +2184,6 @@ packages:
resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
dev: false
/@types/nodemailer@6.4.15:
resolution: {integrity: sha512-0EBJxawVNjPkng1zm2vopRctuWVCxk34JcIlRuXSf54habUWdz1FB7wHDqOqvDa8Mtpt0Q3LTXQkAs2LNyK5jQ==}
dependencies:
'@types/node': 17.0.45
dev: false
/@types/prop-types@15.7.12:
resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
dev: false
@ -4389,11 +4217,6 @@ packages:
resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
dev: false
/nodemailer@6.9.13:
resolution: {integrity: sha512-7o38Yogx6krdoBf3jCAqnIN4oSQFx+fMa0I7dK1D+me9kBxx12D+/33wSb+fhOCtIxvYJ+4x4IMEhmhCKfAiOA==}
engines: {node: '>=6.0.0'}
dev: false
/normalize-path@3.0.0:
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
engines: {node: '>=0.10.0'}
@ -4733,15 +4556,6 @@ packages:
scheduler: 0.23.0
dev: false
/react-hook-form@7.51.5(react@18.2.0):
resolution: {integrity: sha512-J2ILT5gWx1XUIJRETiA7M19iXHlG74+6O3KApzvqB/w8S5NQR7AbU8HVZrMALdmDgWpRPYiZJl0zx8Z4L2mP6Q==}
engines: {node: '>=12.22.0'}
peerDependencies:
react: ^16.8.0 || ^17 || ^18
dependencies:
react: 18.2.0
dev: false
/react-refresh@0.14.2:
resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
engines: {node: '>=0.10.0'}

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 =>

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>
);
}

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>

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()
}

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,
}

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,
}

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",

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",
},

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",
},

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",
},

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};

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}/>

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 }
);
}
};