feat: rewrite /about and /book with tested booking URL parsing
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5.5
@@ -1,23 +0,0 @@
|
|||||||
import { ImageResponse } from "next/og";
|
|
||||||
import { OGImageTemplate } from "../../../src/components/OGImageTemplate";
|
|
||||||
import { getOgFonts, OG_IMAGE_SIZE } from "../../../src/lib/og-helper";
|
|
||||||
|
|
||||||
export const size = OG_IMAGE_SIZE;
|
|
||||||
export const contentType = "image/png";
|
|
||||||
export const runtime = "nodejs";
|
|
||||||
|
|
||||||
export default async function Image() {
|
|
||||||
const fonts = await getOgFonts();
|
|
||||||
|
|
||||||
return new ImageResponse(
|
|
||||||
<OGImageTemplate
|
|
||||||
title="Über mich."
|
|
||||||
description="15 Jahre Erfahrung. Ein Ziel: Websites, die ihre Versprechen halten."
|
|
||||||
label="Marc Mintel"
|
|
||||||
/>,
|
|
||||||
{
|
|
||||||
...OG_IMAGE_SIZE,
|
|
||||||
fonts: fonts as any,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,230 +1,71 @@
|
|||||||
"use client";
|
import type { Metadata } from "next";
|
||||||
|
import { Container, SectionHeader } from "@/src/components/site";
|
||||||
import { Reveal } from "@/src/components/Reveal";
|
import { Timeline } from "@/src/components/about/Timeline";
|
||||||
import { Section } from "@/src/components/Section";
|
import { TagList } from "@/src/components/about/TagList";
|
||||||
import { Signature } from "@/src/components/Signature";
|
|
||||||
import {
|
import {
|
||||||
H1,
|
NOT_MY_THING,
|
||||||
H3,
|
STACK_ITEMS,
|
||||||
LeadText,
|
TIMELINE,
|
||||||
BodyText,
|
WORKING_MODE,
|
||||||
Label,
|
} from "@/src/components/about/aboutData";
|
||||||
MonoLabel,
|
|
||||||
} from "@/src/components/Typography";
|
|
||||||
import { Button } from "@/src/components/Button";
|
|
||||||
import { AbstractCircuit, GradientMesh } from "@/src/components/Effects";
|
|
||||||
import { GlitchText } from "@/src/components/GlitchText";
|
|
||||||
|
|
||||||
export default function AboutPage() {
|
export const metadata: Metadata = {
|
||||||
|
title: "About",
|
||||||
|
description:
|
||||||
|
"Senior engineer who makes AI-built software dependable. Web since 2011, remote since 2021, now independent.",
|
||||||
|
alternates: { canonical: "/about" },
|
||||||
|
};
|
||||||
|
|
||||||
|
// TODO(owner): link a CV download here once the PDF exists (no file yet).
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col bg-white overflow-hidden relative">
|
<Container className="py-16 md:py-24">
|
||||||
<AbstractCircuit />
|
<SectionHeader
|
||||||
{/* Hero Section */}
|
as="h1"
|
||||||
<section className="relative pt-24 md:pt-40 pb-12 md:pb-24 overflow-hidden border-b border-slate-50">
|
kicker="/about"
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full relative z-10">
|
title="About"
|
||||||
<div className="flex flex-col items-center text-center space-y-12">
|
lead="Senior engineer who makes AI-built software dependable."
|
||||||
<Reveal width="fit-content">
|
/>
|
||||||
<div className="w-40 h-40 md:w-56 md:h-56 rounded-full overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
|
|
||||||
<img
|
|
||||||
src="/marc-mintel.png"
|
|
||||||
alt="Marc Mintel"
|
|
||||||
className="object-cover w-full h-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
|
|
||||||
<div className="space-y-6 max-w-4xl">
|
<div className="mt-12 max-w-2xl space-y-4 text-base leading-relaxed text-muted">
|
||||||
<Reveal delay={0.1}>
|
<p>
|
||||||
<MonoLabel className="text-slate-400 tracking-[0.2em] text-xs">
|
I have worked on the web since 2011, starting with an apprenticeship.
|
||||||
WEBENTWICKLER
|
Since then I have worked in agencies and product companies, and led
|
||||||
</MonoLabel>
|
the frontend team at an agency. I have been fully remote since 2021
|
||||||
</Reveal>
|
and am now independent, while running a small product business.
|
||||||
<Reveal delay={0.2}>
|
</p>
|
||||||
<H1 className="text-6xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
|
<p>
|
||||||
Über <span className="text-slate-400">mich.</span>
|
Design and frontend are my strength. I am comfortable with backend
|
||||||
</H1>
|
concepts and architecture. Today I mostly write TypeScript and
|
||||||
</Reveal>
|
Next.js, plus Rust and Solidity for systems work. The path started
|
||||||
<Reveal delay={0.3}>
|
with Vue and plain JavaScript, and I would rather say so than pretend
|
||||||
<p className="text-slate-500 max-w-2xl mx-auto text-xl md:text-3xl leading-snug">
|
I always wrote Rust.
|
||||||
15 Jahre Erfahrung. Ein Ziel: Ihnen den Frust mit Websites zu
|
</p>
|
||||||
ersparen.
|
</div>
|
||||||
</p>
|
|
||||||
</Reveal>
|
<section className="mt-16 max-w-2xl" aria-labelledby="how-i-work">
|
||||||
</div>
|
<h2 id="how-i-work" className="!mb-3 !mt-0 !text-xl">
|
||||||
</div>
|
How I work
|
||||||
</div>
|
</h2>
|
||||||
|
<ul className="!m-0 space-y-2 !pl-5 text-muted">
|
||||||
|
{WORKING_MODE.map((line) => (
|
||||||
|
<li key={line}>{line}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Section 01: Story */}
|
<section className="mt-16 max-w-3xl" aria-labelledby="timeline">
|
||||||
<Section number="01" title="Erfahrung" borderTop>
|
<h2 id="timeline" className="!mb-4 !mt-0 !text-xl">
|
||||||
<div className="space-y-16 md:space-y-32">
|
Timeline
|
||||||
<Reveal>
|
</h2>
|
||||||
<H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
|
<Timeline entries={TIMELINE} />
|
||||||
Aus der Praxis. <br />
|
</section>
|
||||||
<span className="text-slate-400">Für die Praxis.</span>
|
|
||||||
</H3>
|
|
||||||
</Reveal>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
|
<div className="mt-16 grid max-w-3xl gap-10 md:grid-cols-2">
|
||||||
<Reveal delay={0.1}>
|
<TagList title="Stack" items={STACK_ITEMS} />
|
||||||
<LeadText className="text-2xl md:text-4xl text-slate-900 leading-snug">
|
<TagList title="Not my thing" items={NOT_MY_THING} />
|
||||||
Ich habe in Agenturen, Konzernen und Startups gearbeitet. Dabei
|
</div>
|
||||||
habe ich gesehen, woran Projekte scheitern: zu viele Leute, zu
|
</Container>
|
||||||
viel Blabla.
|
|
||||||
</LeadText>
|
|
||||||
</Reveal>
|
|
||||||
<Reveal delay={0.2}>
|
|
||||||
<div className="space-y-12">
|
|
||||||
<BodyText className="text-slate-500 text-lg md:text-xl">
|
|
||||||
Das mache ich anders. Keine Hierarchien, kein Fachchinesisch,
|
|
||||||
sondern klare Kommunikation. Fokus auf Ergebnisse statt auf
|
|
||||||
endlose Meetings.
|
|
||||||
</BodyText>
|
|
||||||
<div className="space-y-6 border-l border-slate-100 pl-8">
|
|
||||||
<div>
|
|
||||||
<Label className="text-slate-900 text-lg">Direkt</Label>
|
|
||||||
<BodyText className="text-slate-500">
|
|
||||||
Sie sprechen immer mit mir.
|
|
||||||
</BodyText>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Label className="text-slate-900 text-lg">
|
|
||||||
Unkompliziert
|
|
||||||
</Label>
|
|
||||||
<BodyText className="text-slate-500">
|
|
||||||
Wir beschränken uns auf das Wesentliche.
|
|
||||||
</BodyText>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
{/* Section 02: Ablauf */}
|
|
||||||
<Section number="02" title="Ablauf" borderTop>
|
|
||||||
<div className="space-y-16 md:space-y-32">
|
|
||||||
<Reveal>
|
|
||||||
<H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
|
|
||||||
So einfach läuft <br />
|
|
||||||
<span className="text-slate-400">ein Projekt ab.</span>
|
|
||||||
</H3>
|
|
||||||
</Reveal>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">
|
|
||||||
{[
|
|
||||||
{
|
|
||||||
step: "01",
|
|
||||||
title: "Kurzes Gespräch",
|
|
||||||
desc: "Kein Workshop, nur die Fakten.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
step: "02",
|
|
||||||
title: "Klares Angebot",
|
|
||||||
desc: "Fixpreis ohne Sternchen.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
step: "03",
|
|
||||||
title: "Umsetzung",
|
|
||||||
desc: "Ich baue, Sie entspannen.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
step: "04",
|
|
||||||
title: "Go-Live & Support",
|
|
||||||
desc: "Ich übernehme die Wartung.",
|
|
||||||
},
|
|
||||||
].map((item, i) => (
|
|
||||||
<Reveal key={i} delay={0.1 * i}>
|
|
||||||
<div className="space-y-6 pt-6 border-t border-slate-900">
|
|
||||||
<Label className="text-slate-400 font-mono text-sm">
|
|
||||||
{item.step}
|
|
||||||
</Label>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label className="text-slate-900 text-xl">
|
|
||||||
{item.title}
|
|
||||||
</Label>
|
|
||||||
<BodyText className="text-slate-500 text-lg">
|
|
||||||
{item.desc}
|
|
||||||
</BodyText>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
{/* Section 03: Garantie */}
|
|
||||||
<Section number="03" title="Garantie" borderTop>
|
|
||||||
<div className="space-y-16 md:space-y-32">
|
|
||||||
<Reveal>
|
|
||||||
<H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
|
|
||||||
Ich stehe für <br />
|
|
||||||
<span className="text-slate-400">meine Arbeit gerade.</span>
|
|
||||||
</H3>
|
|
||||||
</Reveal>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24 items-end">
|
|
||||||
<Reveal delay={0.1}>
|
|
||||||
<div className="space-y-8">
|
|
||||||
<LeadText className="text-2xl md:text-4xl text-slate-900 leading-snug">
|
|
||||||
Wenn etwas nicht passt, liegt die Verantwortung allein bei
|
|
||||||
mir.
|
|
||||||
</LeadText>
|
|
||||||
<BodyText className="text-slate-500 text-lg md:text-xl">
|
|
||||||
Sie beauftragen mich, damit Sie Ruhe haben. Fixpreis bedeutet
|
|
||||||
Fixpreis. Wir gehen erst live, wenn Sie zu 100% zufrieden
|
|
||||||
sind.
|
|
||||||
</BodyText>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
<Reveal delay={0.2}>
|
|
||||||
<div className="pb-8">
|
|
||||||
<Signature />
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
{/* Section 04: CTA */}
|
|
||||||
<Section
|
|
||||||
number="04"
|
|
||||||
title="Kontakt"
|
|
||||||
borderTop
|
|
||||||
effects={<GradientMesh variant="metallic" className="opacity-60" />}
|
|
||||||
>
|
|
||||||
<div className="py-12 md:py-24 relative z-10">
|
|
||||||
<div className="space-y-16 md:space-y-24">
|
|
||||||
<Reveal>
|
|
||||||
<H3 className="text-5xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
|
|
||||||
Bereit, das Thema <br />
|
|
||||||
<span className="text-slate-400">
|
|
||||||
<GlitchText delay={0.5} duration={1}>
|
|
||||||
abzuhaken?
|
|
||||||
</GlitchText>
|
|
||||||
</span>
|
|
||||||
</H3>
|
|
||||||
</Reveal>
|
|
||||||
|
|
||||||
<Reveal delay={0.2}>
|
|
||||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-12">
|
|
||||||
<LeadText className="text-xl md:text-3xl text-slate-500 max-w-xl">
|
|
||||||
Schreiben Sie mir einfach – wir finden die beste Lösung für
|
|
||||||
Ihre Website.
|
|
||||||
</LeadText>
|
|
||||||
<Button
|
|
||||||
href="/contact"
|
|
||||||
className="w-full md:w-auto px-12 py-6 text-xl"
|
|
||||||
>
|
|
||||||
Sagen Sie Hallo
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Section>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,20 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Container } from "@/src/components/site/Container";
|
import { Container, SectionHeader } from "@/src/components/site";
|
||||||
import { SectionHeader } from "@/src/components/site/SectionHeader";
|
import { AvailabilityLine } from "@/src/components/book/AvailabilityLine";
|
||||||
|
import { BookingEmbed } from "@/src/components/book/BookingEmbed";
|
||||||
|
|
||||||
export const metadata: Metadata = { title: "Book a call" };
|
export const metadata: Metadata = {
|
||||||
|
title: "Book a call",
|
||||||
|
description:
|
||||||
|
"Book a 20-minute intro call to talk about your project, team and timeline.",
|
||||||
|
alternates: { canonical: "/book" },
|
||||||
|
};
|
||||||
|
|
||||||
|
const PREPARE: readonly string[] = [
|
||||||
|
"What you are building",
|
||||||
|
"Your team size",
|
||||||
|
"A rough timeline",
|
||||||
|
];
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
return (
|
return (
|
||||||
@@ -11,8 +23,26 @@ export default function Page() {
|
|||||||
as="h1"
|
as="h1"
|
||||||
kicker="/book"
|
kicker="/book"
|
||||||
title="Book a call"
|
title="Book a call"
|
||||||
lead="This page is coming soon."
|
lead="20 minutes to check whether we fit: your project, where it is stuck or unproven, and how a weekly capacity block would work."
|
||||||
/>
|
/>
|
||||||
|
<div className="mt-6 min-h-5">
|
||||||
|
<AvailabilityLine />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section className="mt-10 max-w-2xl" aria-labelledby="prepare">
|
||||||
|
<h2 id="prepare" className="!mb-3 !mt-0 !text-xl">
|
||||||
|
What to prepare
|
||||||
|
</h2>
|
||||||
|
<ul className="!m-0 space-y-2 !pl-5 text-muted">
|
||||||
|
{PREPARE.map((item) => (
|
||||||
|
<li key={item}>{item}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mt-12" aria-label="Booking calendar">
|
||||||
|
<BookingEmbed />
|
||||||
|
</section>
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
type TagListProps = {
|
||||||
|
readonly title: string;
|
||||||
|
readonly items: readonly string[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const TagList: React.FC<TagListProps> = ({ title, items }) => (
|
||||||
|
<div>
|
||||||
|
<h2 className="!mb-3 !mt-0 !text-xl">{title}</h2>
|
||||||
|
<ul className="!m-0 flex !list-none flex-wrap gap-2 !p-0">
|
||||||
|
{items.map((item) => (
|
||||||
|
<li
|
||||||
|
key={item}
|
||||||
|
className="rounded-md border border-border-strong px-3 py-1 font-mono text-sm text-fg"
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import type { TimelineEntry } from "./aboutData";
|
||||||
|
|
||||||
|
type TimelineProps = { readonly entries: readonly TimelineEntry[] };
|
||||||
|
|
||||||
|
export const Timeline: React.FC<TimelineProps> = ({ entries }) => (
|
||||||
|
<ol className="!m-0 !list-none divide-y divide-border border-y border-border !p-0">
|
||||||
|
{entries.map((entry) => (
|
||||||
|
<li
|
||||||
|
key={`${entry.period}-${entry.company}`}
|
||||||
|
className="grid gap-1 py-3 sm:grid-cols-[9rem_1fr]"
|
||||||
|
>
|
||||||
|
<span className="font-mono text-sm text-accent">{entry.period}</span>
|
||||||
|
<span className="text-fg">
|
||||||
|
{entry.role}, {entry.company}
|
||||||
|
{entry.note ? (
|
||||||
|
<span className="text-muted"> ({entry.note})</span>
|
||||||
|
) : null}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
);
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
export type TimelineEntry = {
|
||||||
|
readonly period: string;
|
||||||
|
readonly role: string;
|
||||||
|
readonly company: string;
|
||||||
|
readonly note?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const TIMELINE: readonly TimelineEntry[] = [
|
||||||
|
{ period: "2011-2014", role: "Apprenticeship", company: "webfactory.de" },
|
||||||
|
{ period: "2014-2016", role: "Frontend developer", company: "gct" },
|
||||||
|
{
|
||||||
|
period: "2016-2020",
|
||||||
|
role: "Frontend developer to frontend team lead",
|
||||||
|
company: "i22 Digitalagentur",
|
||||||
|
},
|
||||||
|
{ period: "2020-2021", role: "Senior developer", company: "Trusted Shops" },
|
||||||
|
{
|
||||||
|
period: "2021-2023",
|
||||||
|
role: "Senior developer",
|
||||||
|
company: "sdox.io",
|
||||||
|
note: "remote",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
period: "2024-now",
|
||||||
|
role: "Founder",
|
||||||
|
company: "Cable Creations",
|
||||||
|
note: "own product business",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const STACK_ITEMS: readonly string[] = [
|
||||||
|
"TypeScript",
|
||||||
|
"Next.js / React",
|
||||||
|
"Tailwind",
|
||||||
|
"Node",
|
||||||
|
"Rust",
|
||||||
|
"Solidity",
|
||||||
|
"Postgres basics",
|
||||||
|
"Docker",
|
||||||
|
];
|
||||||
|
|
||||||
|
export const NOT_MY_THING: readonly string[] = [
|
||||||
|
"Windows apps",
|
||||||
|
"Mobile apps",
|
||||||
|
"Running client infrastructure",
|
||||||
|
"Database tuning",
|
||||||
|
];
|
||||||
|
|
||||||
|
export const WORKING_MODE: readonly string[] = [
|
||||||
|
"Async-first and fully remote, with overlap hours in the DACH time zone.",
|
||||||
|
"Transparent time tracking and a weekly delivery report.",
|
||||||
|
"Simple SOW and a 2-week notice period.",
|
||||||
|
];
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import {
|
||||||
|
formatAvailability,
|
||||||
|
resolveAvailability,
|
||||||
|
} from "@/src/domain/availability";
|
||||||
|
import { AVAILABILITY_CONFIG } from "@/src/content/site";
|
||||||
|
|
||||||
|
const toIsoDate = (date: Date): string => {
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||||
|
const day = String(date.getDate()).padStart(2, "0");
|
||||||
|
return `${date.getFullYear()}-${month}-${day}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AvailabilityLine: React.FC = () => {
|
||||||
|
const [text, setText] = React.useState<string | null>(null);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
setText(
|
||||||
|
formatAvailability(
|
||||||
|
resolveAvailability(AVAILABILITY_CONFIG, toIsoDate(new Date())),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (text === null) return null;
|
||||||
|
return <p className="font-mono text-sm text-accent">{text}</p>;
|
||||||
|
};
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { parseBookingUrl } from "@/src/domain/booking";
|
||||||
|
import { BOOKING_URL, CONTACT_EMAIL } from "@/src/content/site";
|
||||||
|
|
||||||
|
export const BookingEmbed: React.FC = () => {
|
||||||
|
const parsed = parseBookingUrl(BOOKING_URL);
|
||||||
|
|
||||||
|
if (parsed.ok === false) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
role="status"
|
||||||
|
className="rounded-md border border-border-strong p-5 text-sm"
|
||||||
|
>
|
||||||
|
<p className="!mb-2 font-semibold text-fg">
|
||||||
|
Booking link not configured
|
||||||
|
</p>
|
||||||
|
<p className="!mb-0 text-muted">
|
||||||
|
The calendar is not available yet. Please email{" "}
|
||||||
|
<a href={`mailto:${CONTACT_EMAIL}`}>{CONTACT_EMAIL}</a> to arrange a
|
||||||
|
call.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { href } = parsed.value;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<iframe
|
||||||
|
src={href}
|
||||||
|
title="Book a 20-minute intro call"
|
||||||
|
loading="lazy"
|
||||||
|
sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
|
||||||
|
className="w-full rounded-md border-0"
|
||||||
|
style={{ minHeight: 700 }}
|
||||||
|
/>
|
||||||
|
<p className="mt-3 text-sm text-muted">
|
||||||
|
Embed not loading?{" "}
|
||||||
|
<a href={href} target="_blank" rel="noopener noreferrer">
|
||||||
|
Open the booking page directly
|
||||||
|
</a>
|
||||||
|
.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
import { parseBookingUrl } from "./booking";
|
||||||
|
|
||||||
|
describe("parseBookingUrl", () => {
|
||||||
|
it("accepts an https URL and returns it normalized", () => {
|
||||||
|
expect(parseBookingUrl("https://cal.com/marc/intro")).toEqual({
|
||||||
|
ok: true,
|
||||||
|
value: { href: "https://cal.com/marc/intro" },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("rejects http", () => {
|
||||||
|
expect(parseBookingUrl("http://cal.com/marc/intro")).toEqual({
|
||||||
|
ok: false,
|
||||||
|
error: "not-https",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("rejects other protocols", () => {
|
||||||
|
expect(parseBookingUrl("javascript:alert(1)")).toEqual({
|
||||||
|
ok: false,
|
||||||
|
error: "not-https",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("rejects garbage as invalid", () => {
|
||||||
|
expect(parseBookingUrl("not a url")).toEqual({
|
||||||
|
ok: false,
|
||||||
|
error: "invalid-url",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("rejects an empty string", () => {
|
||||||
|
expect(parseBookingUrl("")).toEqual({ ok: false, error: "empty" });
|
||||||
|
expect(parseBookingUrl(" ")).toEqual({ ok: false, error: "empty" });
|
||||||
|
});
|
||||||
|
|
||||||
|
it("rejects a placeholder URL regardless of case", () => {
|
||||||
|
expect(parseBookingUrl("https://cal.com/PLACEHOLDER/intro")).toEqual({
|
||||||
|
ok: false,
|
||||||
|
error: "placeholder",
|
||||||
|
});
|
||||||
|
expect(parseBookingUrl("https://cal.com/placeholder/intro")).toEqual({
|
||||||
|
ok: false,
|
||||||
|
error: "placeholder",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("trims surrounding whitespace", () => {
|
||||||
|
expect(parseBookingUrl(" https://cal.com/marc/intro ")).toEqual({
|
||||||
|
ok: true,
|
||||||
|
value: { href: "https://cal.com/marc/intro" },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
import type { Result } from "./availability";
|
||||||
|
|
||||||
|
export type BookingUrl = { readonly href: string };
|
||||||
|
|
||||||
|
export type BookingUrlError =
|
||||||
|
| "empty"
|
||||||
|
| "invalid-url"
|
||||||
|
| "not-https"
|
||||||
|
| "placeholder";
|
||||||
|
|
||||||
|
const PLACEHOLDER_MARKER = "placeholder";
|
||||||
|
|
||||||
|
export function parseBookingUrl(
|
||||||
|
raw: string,
|
||||||
|
): Result<BookingUrl, BookingUrlError> {
|
||||||
|
const trimmed = raw.trim();
|
||||||
|
if (trimmed === "") return { ok: false, error: "empty" };
|
||||||
|
if (!URL.canParse(trimmed)) return { ok: false, error: "invalid-url" };
|
||||||
|
const url = new URL(trimmed);
|
||||||
|
if (url.protocol !== "https:") return { ok: false, error: "not-https" };
|
||||||
|
if (url.href.toLowerCase().includes(PLACEHOLDER_MARKER)) {
|
||||||
|
return { ok: false, error: "placeholder" };
|
||||||
|
}
|
||||||
|
return { ok: true, value: { href: url.href } };
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user