@dominikcz/greg 0.9.27

package/src/lib/components/Button.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    type Props = {
+        tag?: string;
+        size?: "medium" | "big";
+        theme?: "brand" | "alt" | "sponsor";
+        text?: string;
+        href?: string;
+        target?: string;
+        rel?: string;
+        onclick?: (e: MouseEvent) => void;
+        children?: Snippet;
+    };
+
+    let {
+        tag,
+        size = "medium",
+        theme = "brand",
+        text,
+        href,
+        target,
+        rel,
+        onclick,
+        children,
+    }: Props = $props();
+
+    const EXTERNAL_RE = /^(?:[a-z][a-z\d+\-.]*:|\/\/)/i;
+
+    let resolvedTag = $derived(tag ?? (href ? "a" : "button"));
+    let isExternal = $derived(!!href && EXTERNAL_RE.test(href));
+    let resolvedTarget = $derived(
+        target ?? (isExternal ? "_blank" : undefined),
+    );
+    let resolvedRel = $derived(rel ?? (isExternal ? "noreferrer" : undefined));
+    let resolvedRole = $derived(
+        resolvedTag === "a" || resolvedTag === "button" ? undefined : "button",
+    );
+</script>
+
+<svelte:element
+    this={resolvedTag}
+    class="Button {size} {theme}"
+    {href}
+    target={resolvedTarget}
+    rel={resolvedRel}
+    role={resolvedRole}
+    {onclick}
+>
+    {#if children}
+        {@render children()}
+    {:else}
+        {text}
+    {/if}
+</svelte:element>
+
+<style>
+    .Button {
+        display: inline-block;
+        border: 1px solid transparent;
+        text-align: center;
+        font-weight: 600;
+        white-space: nowrap;
+        cursor: pointer;
+        text-decoration: none;
+        transition:
+            color 0.25s,
+            border-color 0.25s,
+            background-color 0.25s;
+    }
+
+    .Button:active {
+        transition:
+            color 0.1s,
+            border-color 0.1s,
+            background-color 0.1s;
+    }
+
+    .Button.medium {
+        border-radius: 20px;
+        padding: 0 20px;
+        line-height: 38px;
+        font-size: 14px;
+    }
+
+    .Button.big {
+        border-radius: 24px;
+        padding: 0 24px;
+        line-height: 46px;
+        font-size: 16px;
+    }
+
+    /* brand */
+    .Button.brand {
+        border-color: var(--greg-accent);
+        color: var(--greg-menu-active-color);
+        background-color: var(--greg-accent);
+    }
+
+    .Button.brand:hover {
+        border-color: color-mix(in srgb, var(--greg-accent) 80%, white);
+        background-color: color-mix(in srgb, var(--greg-accent) 80%, white);
+    }
+
+    .Button.brand:active {
+        border-color: color-mix(in srgb, var(--greg-accent) 90%, black);
+        background-color: color-mix(in srgb, var(--greg-accent) 90%, black);
+    }
+
+    /* alt */
+    .Button.alt {
+        border-color: var(--greg-border-color);
+        color: var(--greg-color);
+        background-color: var(--greg-menu-background);
+    }
+
+    .Button.alt:hover {
+        border-color: var(--greg-accent);
+        color: var(--greg-accent);
+    }
+
+    .Button.alt:active {
+        background-color: var(--greg-accent-light);
+    }
+
+    /* sponsor */
+    .Button.sponsor {
+        border-color: var(--greg-sponsor-color);
+        color: var(--greg-sponsor-color);
+        background-color: transparent;
+    }
+
+    .Button.sponsor:hover {
+        border-color: var(--greg-sponsor-color);
+        color: var(--greg-sponsor-color);
+        background-color: var(--greg-sponsor-bg);
+    }
+</style>

package/src/lib/components/CarbonAds.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+    type Props = {
+        code: string;
+        placement: string;
+        /** Current SPA route — when it changes, Carbon Ads is refreshed. */
+        active?: string;
+    };
+
+    let { code, placement, active }: Props = $props();
+
+    let container: HTMLDivElement;
+    let initialized = false;
+
+    onMount(() => {
+        if (!initialized) {
+            initialized = true;
+            const s = document.createElement("script");
+            s.id = "_carbonads_js";
+            s.src = `//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}`;
+            s.async = true;
+            container.appendChild(s);
+        }
+    });
+
+    $effect(() => {
+        // Track `active` so the effect re-runs on page navigation.
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        active;
+        if (initialized) {
+            (window as any)._carbonads?.refresh();
+        }
+    });
+</script>
+
+<div class="CarbonAds" bind:this={container}></div>
+
+<style>
+    .CarbonAds {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 24px;
+        border-radius: 12px;
+        min-height: 256px;
+        text-align: center;
+        line-height: 18px;
+        font-size: 12px;
+        font-weight: 500;
+        background-color: var(
+            --greg-carbon-ads-bg-color,
+            var(--greg-menu-background)
+        );
+    }
+
+    .CarbonAds :global(img) {
+        margin: 0 auto;
+        border-radius: 6px;
+    }
+
+    .CarbonAds :global(.carbon-text) {
+        display: block;
+        margin: 0 auto;
+        padding-top: 12px;
+        color: var(--greg-carbon-ads-text-color, var(--greg-color));
+        transition: color 0.25s;
+    }
+
+    .CarbonAds :global(.carbon-text:hover) {
+        color: var(--greg-carbon-ads-hover-text-color, var(--greg-accent));
+    }
+
+    .CarbonAds :global(.carbon-poweredby) {
+        display: block;
+        padding-top: 6px;
+        font-size: 11px;
+        font-weight: 500;
+        color: var(
+            --greg-carbon-ads-poweredby-color,
+            var(--greg-menu-section-color)
+        );
+        text-transform: uppercase;
+        transition: color 0.25s;
+    }
+
+    .CarbonAds :global(.carbon-poweredby:hover) {
+        color: var(--greg-carbon-ads-hover-poweredby-color, var(--greg-accent));
+    }
+
+    /* Carbon injects multiple wrappers — show only the first */
+    .CarbonAds :global(> div) {
+        display: none;
+    }
+
+    .CarbonAds :global(> div:first-of-type) {
+        display: block;
+    }
+</style>

package/src/lib/components/CodeGroup.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+    type Props = {
+        tabs: string[];
+        blocks: string[];
+        initialActive?: number;
+    };
+
+    let { tabs = [], blocks = [], initialActive = 0 }: Props = $props();
+
+    let activeIndex = $state(0);
+
+    // Keep active tab index in sync when parent-provided inputs change.
+    $effect(() => {
+        const maxIndex = Math.max(0, tabs.length - 1);
+        activeIndex = Math.max(0, Math.min(initialActive, maxIndex));
+    });
+    const uid = `rcg-hydrated-${Math.random().toString(36).slice(2, 10)}`;
+
+    function activate(index: number) {
+        if (index < 0 || index >= tabs.length) return;
+        activeIndex = index;
+    }
+
+    function handleKeydown(event: KeyboardEvent, index: number) {
+        const last = tabs.length - 1;
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            activate(index);
+            return;
+        }
+
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            const next = index >= last ? 0 : index + 1;
+            activate(next);
+            requestAnimationFrame(() => {
+                (document.getElementById(`${uid}-tab-${next}`) as HTMLButtonElement | null)?.focus();
+            });
+            return;
+        }
+
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            const prev = index <= 0 ? last : index - 1;
+            activate(prev);
+            requestAnimationFrame(() => {
+                (document.getElementById(`${uid}-tab-${prev}`) as HTMLButtonElement | null)?.focus();
+            });
+            return;
+        }
+
+        if (event.key === "Home") {
+            event.preventDefault();
+            activate(0);
+            requestAnimationFrame(() => {
+                (document.getElementById(`${uid}-tab-0`) as HTMLButtonElement | null)?.focus();
+            });
+            return;
+        }
+
+        if (event.key === "End") {
+            event.preventDefault();
+            activate(last);
+            requestAnimationFrame(() => {
+                (document.getElementById(`${uid}-tab-${last}`) as HTMLButtonElement | null)?.focus();
+            });
+        }
+    }
+</script>
+
+<div class="rehype-code-group">
+    <div class="rcg-tab-container" role="tablist">
+        {#each tabs as label, index}
+            <button
+                type="button"
+                class="rcg-tab"
+                class:active={index === activeIndex}
+                role="tab"
+                aria-selected={index === activeIndex ? "true" : "false"}
+                aria-controls={`${uid}-block-${index}`}
+                id={`${uid}-tab-${index}`}
+                onclick={() => activate(index)}
+                onkeydown={(event) => handleKeydown(event, index)}
+            >
+                {label}
+            </button>
+        {/each}
+    </div>
+
+    {#each blocks as block, index}
+        <div
+            class="rcg-block"
+            class:active={index === activeIndex}
+            role="tabpanel"
+            aria-labelledby={`${uid}-tab-${index}`}
+            id={`${uid}-block-${index}`}
+            hidden={index === activeIndex ? undefined : true}
+        >
+            {@html block}
+        </div>
+    {/each}
+</div>

package/src/lib/components/Feature.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+    import Image from "./Image.svelte";
+    import Link from "./Link.svelte";
+
+    type FeatureIcon =
+        | string
+        | {
+              src: string;
+              alt?: string;
+              width?: number | string;
+              height?: number | string;
+              wrap?: boolean;
+          }
+        | { dark: string; light: string; alt?: string; wrap?: boolean };
+
+    type Props = {
+        icon?: FeatureIcon;
+        title: string;
+        details?: string | string[];
+        link?: string;
+        linkText?: string;
+        rel?: string;
+        target?: string;
+    };
+
+    let { icon, title, details, link, linkText, rel, target }: Props = $props();
+
+    function isImageIcon(
+        i: FeatureIcon,
+    ): i is {
+        src: string;
+        alt?: string;
+        width?: number | string;
+        height?: number | string;
+        wrap?: boolean;
+    } {
+        return typeof i === "object" && ("src" in i || "dark" in i);
+    }
+
+    function shouldWrap(i: FeatureIcon): boolean {
+        if (typeof i === "object" && "wrap" in i) return !!(i as any).wrap;
+        return false;
+    }
+
+    // Resolved per render — avoid TS cast inside templates
+    let iconImg = $derived(isImageIcon(icon!) ? (icon as any) : null);
+    let iconAlt = $derived(iconImg?.alt ?? "");
+    let iconWidth = $derived(iconImg?.width ?? 48);
+    let iconHeight = $derived(iconImg?.height ?? 48);
+    let iconWrapped = $derived(iconImg && shouldWrap(icon!));
+</script>
+
+<Link
+    class="Feature"
+    href={link}
+    {rel}
+    {target}
+    noIcon
+    tag={link ? "a" : "div"}
+>
+    <article class="box">
+        {#if icon}
+            {#if iconWrapped}
+                <div class="icon">
+                    <Image
+                        image={iconImg}
+                        alt={iconAlt}
+                        height={iconHeight}
+                        width={iconWidth}
+                    />
+                </div>
+            {:else if iconImg}
+                <Image
+                    image={iconImg}
+                    alt={iconAlt}
+                    height={iconHeight}
+                    width={iconWidth}
+                />
+            {:else if typeof icon === "string"}
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                <div class="icon">{@html icon}</div>
+            {/if}
+        {/if}
+
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        <h2 class="title">{@html title}</h2>
+
+        {#if Array.isArray(details)}
+            <ul class="details">
+                {#each details as item}
+                    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                    <li>{@html item}</li>
+                {/each}
+            </ul>
+        {:else if details}
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            <p class="details">{@html details}</p>
+        {/if}
+
+        {#if linkText}
+            <div class="link-text">
+                <p class="link-text-value">
+                    {linkText}
+                    <svg
+                        class="link-text-icon"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                    >
+                        <path
+                            d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"
+                        />
+                    </svg>
+                </p>
+            </div>
+        {/if}
+    </article>
+</Link>
+
+<style>
+    :global(.Feature) {
+        display: block;
+        border: 1px solid var(--greg-border-color);
+        border-radius: 12px;
+        height: 100%;
+        background-color: var(--greg-menu-background);
+        transition:
+            border-color 0.25s,
+            background-color 0.25s;
+        text-decoration: none;
+        color: inherit;
+    }
+
+    :global(.Feature.link:hover) {
+        border-color: var(--greg-accent);
+    }
+
+    .box {
+        display: flex;
+        flex-direction: column;
+        padding: 24px;
+        height: 100%;
+    }
+
+    .icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 20px;
+        border-radius: 6px;
+        background-color: var(--greg-background);
+        width: 48px;
+        height: 48px;
+        font-size: 24px;
+        transition: background-color 0.25s;
+    }
+
+    .title {
+        line-height: 24px;
+        font-size: 16px;
+        font-weight: 600;
+        margin: 0 0 0;
+        border: none;
+        padding: 0;
+    }
+
+    .details {
+        flex-grow: 1;
+        padding-top: 8px;
+        line-height: 24px;
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--greg-menu-section-color);
+        margin: 0;
+    }
+
+    ul.details {
+        list-style-type: disc;
+        padding-left: 14px;
+    }
+
+    .link-text {
+        padding-top: 8px;
+    }
+
+    .link-text-value {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--greg-accent);
+        margin: 0;
+    }
+
+    .link-text-icon {
+        width: 14px;
+        height: 14px;
+        fill: currentColor;
+        flex-shrink: 0;
+    }
+
+    :global(.box > .Image) {
+        margin-bottom: 20px;
+        width: 48px;
+        height: 48px;
+        object-fit: contain;
+    }
+</style>

package/src/lib/components/Features.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+    import Feature from "./Feature.svelte";
+
+    type FeatureIcon =
+        | string
+        | {
+              src: string;
+              alt?: string;
+              width?: number | string;
+              height?: number | string;
+              wrap?: boolean;
+          }
+        | { dark: string; light: string; alt?: string };
+
+    type FeatureItem = {
+        icon?: FeatureIcon;
+        title: string;
+        details?: string | string[];
+        link?: string;
+        linkText?: string;
+        rel?: string;
+        target?: string;
+    };
+
+    type Props = {
+        features: FeatureItem[];
+    };
+
+    let { features }: Props = $props();
+
+    let grid = $derived.by(() => {
+        const n = features?.length ?? 0;
+        if (!n) return "";
+        if (n === 2) return "grid-2";
+        if (n === 3) return "grid-3";
+        if (n % 3 === 0) return "grid-6";
+        if (n > 3) return "grid-4";
+        return "";
+    });
+</script>
+
+{#if features?.length}
+    <div class="Features">
+        <div class="container">
+            <div class="items">
+                {#each features as feature (feature.title)}
+                    <div class="item {grid}">
+                        <Feature
+                            icon={feature.icon}
+                            title={feature.title}
+                            details={feature.details}
+                            link={feature.link}
+                            linkText={feature.linkText}
+                            rel={feature.rel}
+                            target={feature.target}
+                        />
+                    </div>
+                {/each}
+            </div>
+        </div>
+    </div>
+{/if}
+
+<style>
+    .Features {
+        position: relative;
+        padding: 0 24px;
+    }
+
+    @media (min-width: 640px) {
+        .Features {
+            padding: 0 48px;
+        }
+    }
+
+    @media (min-width: 960px) {
+        .Features {
+            padding: 0 64px;
+        }
+    }
+
+    .container {
+        margin: 0 auto;
+        max-width: 1152px;
+    }
+
+    .items {
+        display: flex;
+        flex-wrap: wrap;
+        margin: -8px;
+    }
+
+    .item {
+        padding: 8px;
+        width: 100%;
+    }
+
+    @media (min-width: 640px) {
+        .item.grid-2,
+        .item.grid-4,
+        .item.grid-6 {
+            width: calc(100% / 2);
+        }
+    }
+
+    @media (min-width: 768px) {
+        .item.grid-2,
+        .item.grid-4 {
+            width: calc(100% / 2);
+        }
+
+        .item.grid-3,
+        .item.grid-6 {
+            width: calc(100% / 3);
+        }
+    }
+
+    @media (min-width: 960px) {
+        .item.grid-4 {
+            width: calc(100% / 4);
+        }
+    }
+</style>