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 { Reveal } from "@/src/components/Reveal";
|
||||
import { Section } from "@/src/components/Section";
|
||||
import { Signature } from "@/src/components/Signature";
|
||||
import type { Metadata } from "next";
|
||||
import { Container, SectionHeader } from "@/src/components/site";
|
||||
import { Timeline } from "@/src/components/about/Timeline";
|
||||
import { TagList } from "@/src/components/about/TagList";
|
||||
import {
|
||||
H1,
|
||||
H3,
|
||||
LeadText,
|
||||
BodyText,
|
||||
Label,
|
||||
MonoLabel,
|
||||
} from "@/src/components/Typography";
|
||||
import { Button } from "@/src/components/Button";
|
||||
import { AbstractCircuit, GradientMesh } from "@/src/components/Effects";
|
||||
import { GlitchText } from "@/src/components/GlitchText";
|
||||
NOT_MY_THING,
|
||||
STACK_ITEMS,
|
||||
TIMELINE,
|
||||
WORKING_MODE,
|
||||
} from "@/src/components/about/aboutData";
|
||||
|
||||
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 (
|
||||
<div className="flex flex-col bg-white overflow-hidden relative">
|
||||
<AbstractCircuit />
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-24 md:pt-40 pb-12 md:pb-24 overflow-hidden border-b border-slate-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full relative z-10">
|
||||
<div className="flex flex-col items-center text-center space-y-12">
|
||||
<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>
|
||||
<Container className="py-16 md:py-24">
|
||||
<SectionHeader
|
||||
as="h1"
|
||||
kicker="/about"
|
||||
title="About"
|
||||
lead="Senior engineer who makes AI-built software dependable."
|
||||
/>
|
||||
|
||||
<div className="space-y-6 max-w-4xl">
|
||||
<Reveal delay={0.1}>
|
||||
<MonoLabel className="text-slate-400 tracking-[0.2em] text-xs">
|
||||
WEBENTWICKLER
|
||||
</MonoLabel>
|
||||
</Reveal>
|
||||
<Reveal delay={0.2}>
|
||||
<H1 className="text-6xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
|
||||
Über <span className="text-slate-400">mich.</span>
|
||||
</H1>
|
||||
</Reveal>
|
||||
<Reveal delay={0.3}>
|
||||
<p className="text-slate-500 max-w-2xl mx-auto text-xl md:text-3xl leading-snug">
|
||||
15 Jahre Erfahrung. Ein Ziel: Ihnen den Frust mit Websites zu
|
||||
ersparen.
|
||||
</p>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 max-w-2xl space-y-4 text-base leading-relaxed text-muted">
|
||||
<p>
|
||||
I have worked on the web since 2011, starting with an apprenticeship.
|
||||
Since then I have worked in agencies and product companies, and led
|
||||
the frontend team at an agency. I have been fully remote since 2021
|
||||
and am now independent, while running a small product business.
|
||||
</p>
|
||||
<p>
|
||||
Design and frontend are my strength. I am comfortable with backend
|
||||
concepts and architecture. Today I mostly write TypeScript and
|
||||
Next.js, plus Rust and Solidity for systems work. The path started
|
||||
with Vue and plain JavaScript, and I would rather say so than pretend
|
||||
I always wrote Rust.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section className="mt-16 max-w-2xl" aria-labelledby="how-i-work">
|
||||
<h2 id="how-i-work" className="!mb-3 !mt-0 !text-xl">
|
||||
How I work
|
||||
</h2>
|
||||
<ul className="!m-0 space-y-2 !pl-5 text-muted">
|
||||
{WORKING_MODE.map((line) => (
|
||||
<li key={line}>{line}</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{/* Section 01: Story */}
|
||||
<Section number="01" title="Erfahrung" 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">
|
||||
Aus der Praxis. <br />
|
||||
<span className="text-slate-400">Für die Praxis.</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
<section className="mt-16 max-w-3xl" aria-labelledby="timeline">
|
||||
<h2 id="timeline" className="!mb-4 !mt-0 !text-xl">
|
||||
Timeline
|
||||
</h2>
|
||||
<Timeline entries={TIMELINE} />
|
||||
</section>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
|
||||
<Reveal delay={0.1}>
|
||||
<LeadText className="text-2xl md:text-4xl text-slate-900 leading-snug">
|
||||
Ich habe in Agenturen, Konzernen und Startups gearbeitet. Dabei
|
||||
habe ich gesehen, woran Projekte scheitern: zu viele Leute, zu
|
||||
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>
|
||||
<div className="mt-16 grid max-w-3xl gap-10 md:grid-cols-2">
|
||||
<TagList title="Stack" items={STACK_ITEMS} />
|
||||
<TagList title="Not my thing" items={NOT_MY_THING} />
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,20 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Container } from "@/src/components/site/Container";
|
||||
import { SectionHeader } from "@/src/components/site/SectionHeader";
|
||||
import { Container, SectionHeader } from "@/src/components/site";
|
||||
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() {
|
||||
return (
|
||||
@@ -11,8 +23,26 @@ export default function Page() {
|
||||
as="h1"
|
||||
kicker="/book"
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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