@dominikcz/greg 0.9.27

package/src/lib/components/Hero.svelte

@@ -0,0 +1,399 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import Button from "./Button.svelte";
+    import Image from "./Image.svelte";
+
+    type ThemeImage =
+        | string
+        | { src: string; alt?: string }
+        | { dark: string; light: string; alt?: string };
+
+    type HeroAction = {
+        theme?: "brand" | "alt";
+        text: string;
+        link: string;
+        target?: string;
+        rel?: string;
+    };
+
+    type Props = {
+        name?: string;
+        text?: string;
+        tagline?: string;
+        image?: ThemeImage;
+        actions?: HeroAction[];
+        /** Snippet placed before the heading block */
+        heroBefore?: Snippet;
+        /** Snippet replacing heading+tagline entirely */
+        heroInfo?: Snippet;
+        /** Snippet placed after tagline, before actions */
+        heroInfoAfter?: Snippet;
+        /** Snippet replacing the image */
+        heroImage?: Snippet;
+        /** Snippet placed after action buttons */
+        heroActionsAfter?: Snippet;
+    };
+
+    let {
+        name,
+        text,
+        tagline,
+        image,
+        actions,
+        heroBefore,
+        heroInfo,
+        heroInfoAfter,
+        heroImage,
+        heroActionsAfter,
+    }: Props = $props();
+
+    let hasImage = $derived(!!image || !!heroImage);
+</script>
+
+<div class="Hero" class:has-image={hasImage}>
+    <div class="container">
+        <div class="main">
+            {#if heroBefore}
+                {@render heroBefore()}
+            {/if}
+
+            {#if heroInfo}
+                {@render heroInfo()}
+            {:else}
+                <h1 class="heading">
+                    {#if name}
+                        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                        <span class="name clip">{@html name}</span>
+                    {/if}
+                    {#if text}
+                        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                        <span class="text">{@html text}</span>
+                    {/if}
+                </h1>
+                {#if tagline}
+                    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                    <p class="tagline">{@html tagline}</p>
+                {/if}
+            {/if}
+
+            {#if heroInfoAfter}
+                {@render heroInfoAfter()}
+            {/if}
+
+            {#if actions?.length}
+                <div class="actions">
+                    {#each actions as action (action.link)}
+                        <div class="action">
+                            <Button
+                                tag="a"
+                                size="medium"
+                                theme={action.theme ?? "brand"}
+                                text={action.text}
+                                href={action.link}
+                                target={action.target}
+                                rel={action.rel}
+                            />
+                        </div>
+                    {/each}
+                </div>
+            {/if}
+
+            {#if heroActionsAfter}
+                {@render heroActionsAfter()}
+            {/if}
+        </div>
+
+        {#if hasImage}
+            <div class="image">
+                <div class="image-container">
+                    <div class="image-bg"></div>
+                    {#if heroImage}
+                        {@render heroImage()}
+                    {:else if image}
+                        <Image class="image-src" {image} />
+                    {/if}
+                </div>
+            </div>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .Hero {
+        padding: 48px 24px;
+    }
+
+    @media (min-width: 640px) {
+        .Hero {
+            padding: 80px 48px 64px;
+        }
+    }
+
+    @media (min-width: 960px) {
+        .Hero {
+            padding: 80px 64px 64px;
+        }
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        margin: 0 auto;
+        max-width: 1152px;
+    }
+
+    @media (min-width: 960px) {
+        .container {
+            flex-direction: row;
+        }
+    }
+
+    .main {
+        position: relative;
+        z-index: 10;
+        order: 2;
+        flex-grow: 1;
+        flex-shrink: 0;
+    }
+
+    .has-image .container {
+        text-align: center;
+    }
+
+    @media (min-width: 960px) {
+        .has-image .container {
+            text-align: left;
+        }
+
+        .main {
+            order: 1;
+            width: calc((100% / 3) * 2);
+        }
+
+        .has-image .main {
+            max-width: 592px;
+        }
+    }
+
+    .heading {
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+        border: none;
+        padding: 0;
+    }
+
+    .name,
+    .text {
+        width: fit-content;
+        max-width: 392px;
+        letter-spacing: -0.4px;
+        line-height: 40px;
+        font-size: 32px;
+        font-weight: 700;
+        white-space: pre-wrap;
+    }
+
+    .has-image .name,
+    .has-image .text {
+        margin: 0 auto;
+    }
+
+    .name {
+        background: var(--greg-accent);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+
+    .text {
+        color: var(--greg-color);
+    }
+
+    @media (min-width: 640px) {
+        .name,
+        .text {
+            max-width: 576px;
+            line-height: 56px;
+            font-size: 48px;
+        }
+    }
+
+    @media (min-width: 960px) {
+        .name,
+        .text {
+            line-height: 64px;
+            font-size: 56px;
+        }
+
+        .has-image .name,
+        .has-image .text {
+            margin: 0;
+        }
+    }
+
+    .tagline {
+        padding-top: 8px;
+        max-width: 392px;
+        line-height: 28px;
+        font-size: 18px;
+        font-weight: 500;
+        white-space: pre-wrap;
+        color: var(--greg-menu-section-color);
+        margin: 0;
+    }
+
+    .has-image .tagline {
+        margin: 0 auto;
+    }
+
+    @media (min-width: 640px) {
+        .tagline {
+            padding-top: 12px;
+            max-width: 576px;
+            line-height: 32px;
+            font-size: 20px;
+        }
+    }
+
+    @media (min-width: 960px) {
+        .tagline {
+            line-height: 36px;
+            font-size: 24px;
+        }
+
+        .has-image .tagline {
+            margin: 0;
+        }
+    }
+
+    .actions {
+        display: flex;
+        flex-wrap: wrap;
+        margin: -6px;
+        padding-top: 24px;
+    }
+
+    .has-image .actions {
+        justify-content: center;
+    }
+
+    @media (min-width: 640px) {
+        .actions {
+            padding-top: 32px;
+        }
+    }
+
+    @media (min-width: 960px) {
+        .has-image .actions {
+            justify-content: flex-start;
+        }
+    }
+
+    .action {
+        flex-shrink: 0;
+        padding: 6px;
+    }
+
+    /* Image */
+    .image {
+        order: 1;
+        margin: -48px -24px -48px;
+    }
+
+    @media (min-width: 640px) {
+        .image {
+            margin: -80px -24px -48px;
+        }
+    }
+
+    @media (min-width: 960px) {
+        .image {
+            flex-grow: 1;
+            order: 2;
+            margin: 0;
+            min-height: 100%;
+        }
+    }
+
+    .image-container {
+        position: relative;
+        margin: 0 auto;
+        width: 320px;
+        height: 320px;
+    }
+
+    @media (min-width: 640px) {
+        .image-container {
+            width: 392px;
+            height: 392px;
+        }
+    }
+
+    @media (min-width: 960px) {
+        .image-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 100%;
+            transform: translate(-32px, -32px);
+        }
+    }
+
+    .image-bg {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        border-radius: 50%;
+        width: 192px;
+        height: 192px;
+        background: radial-gradient(
+            circle,
+            var(--greg-accent),
+            transparent 70%
+        );
+        filter: blur(48px);
+        transform: translate(-50%, -50%);
+    }
+
+    @media (min-width: 640px) {
+        .image-bg {
+            width: 256px;
+            height: 256px;
+        }
+    }
+
+    @media (min-width: 960px) {
+        .image-bg {
+            width: 480px;
+            height: 480px;
+        }
+    }
+
+    :global(.image-src) {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        max-width: 192px;
+        max-height: 192px;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        transform: translate(-50%, -50%);
+    }
+
+    @media (min-width: 640px) {
+        :global(.image-src) {
+            max-width: 256px;
+            max-height: 256px;
+        }
+    }
+
+    @media (min-width: 960px) {
+        :global(.image-src) {
+            max-width: 320px;
+            max-height: 320px;
+        }
+    }
+</style>

package/src/lib/components/Image.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+    /**
+     * ThemeableImage — same shape as VitePress:
+     *   - string                            → simple src
+     *   - { src: string; alt?: string }     → simple src + alt
+     *   - { dark: Image; light: Image; alt?: string }  → theme-aware pair
+     */
+    type SimpleImage =
+        | string
+        | {
+              src: string;
+              alt?: string;
+              width?: number | string;
+              height?: number | string;
+          };
+    type ThemeImage = { dark: SimpleImage; light: SimpleImage; alt?: string };
+    type GregImage = SimpleImage | ThemeImage;
+
+    type Props = {
+        image: GregImage;
+        alt?: string;
+        class?: string;
+        width?: number | string;
+        height?: number | string;
+    };
+
+    let { image, alt, class: cls = "", width, height }: Props = $props();
+
+    function isThemePair(img: GregImage): img is ThemeImage {
+        return typeof img === "object" && "dark" in img && "light" in img;
+    }
+
+    function getSrc(img: SimpleImage): string {
+        return typeof img === "string" ? img : img.src;
+    }
+
+    function getAlt(img: SimpleImage, fallbackAlt?: string): string {
+        if (typeof img === "string") return fallbackAlt ?? "";
+        return img.alt ?? fallbackAlt ?? "";
+    }
+
+    function getWidth(
+        img: SimpleImage,
+        fallback?: number | string,
+    ): number | string | undefined {
+        if (typeof img === "object" && img.width) return img.width;
+        return fallback;
+    }
+
+    function getHeight(
+        img: SimpleImage,
+        fallback?: number | string,
+    ): number | string | undefined {
+        if (typeof img === "object" && img.height) return img.height;
+        return fallback;
+    }
+</script>
+
+{#if image}
+    {#if isThemePair(image)}
+        <img
+            class="Image dark {cls}"
+            src={getSrc(image.dark)}
+            alt={getAlt(image.dark, image.alt ?? alt)}
+            width={getWidth(image.dark, width)}
+            height={getHeight(image.dark, height)}
+        />
+        <img
+            class="Image light {cls}"
+            src={getSrc(image.light)}
+            alt={getAlt(image.light, image.alt ?? alt)}
+            width={getWidth(image.light, width)}
+            height={getHeight(image.light, height)}
+        />
+    {:else}
+        <img
+            class="Image {cls}"
+            src={getSrc(image)}
+            alt={getAlt(image, alt)}
+            width={getWidth(image, width)}
+            height={getHeight(image, height)}
+        />
+    {/if}
+{/if}
+
+<style>
+    /* Default: light variant visible, dark variant hidden. */
+    :global(.Image.dark) {
+        display: none;
+    }
+
+    /* Greg runtime theme switcher is authoritative. */
+    :global(.greg[data-theme="light"] .Image.dark) {
+        display: none;
+    }
+
+    :global(.greg[data-theme="light"] .Image.light) {
+        display: initial;
+    }
+
+    :global(.greg[data-theme="dark"] .Image.light) {
+        display: none;
+    }
+
+    :global(.greg[data-theme="dark"] .Image.dark) {
+        display: initial;
+    }
+
+    /* Fallback outside Greg container. */
+    @media (prefers-color-scheme: dark) {
+        :global(:not(.greg) .Image.light) {
+            display: none;
+        }
+
+        :global(:not(.greg) .Image.dark) {
+            display: initial;
+        }
+    }
+
+    /* Legacy explicit .dark class on <html>. */
+    :global(html.dark .Image.light) {
+        display: none;
+    }
+
+    :global(html.dark .Image.dark) {
+        display: initial;
+    }
+</style>

package/src/lib/components/Link.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { ExternalLink } from "@lucide/svelte";
+
+    type Props = {
+        tag?: string;
+        href?: string;
+        noIcon?: boolean;
+        target?: string;
+        rel?: string;
+        class?: string;
+        children?: Snippet;
+    };
+
+    let {
+        tag,
+        href,
+        noIcon = false,
+        target,
+        rel,
+        class: cls = "",
+        children,
+    }: Props = $props();
+
+    const EXTERNAL_RE = /^(?:[a-z][a-z\d+\-.]*:|\/\/)/i;
+
+    let resolvedTag = $derived(tag ?? (href ? "a" : "span"));
+    let isExternal = $derived(
+        (!!href && EXTERNAL_RE.test(href)) || target === "_blank",
+    );
+    let resolvedTarget = $derived(
+        target ?? (isExternal ? "_blank" : undefined),
+    );
+    let resolvedRel = $derived(rel ?? (isExternal ? "noreferrer" : undefined));
+    let classes = $derived(
+        [
+            "Link",
+            href ? "link" : "",
+            isExternal && !noIcon ? "external-link-icon" : "",
+            noIcon ? "no-icon" : "",
+            cls,
+        ]
+            .filter(Boolean)
+            .join(" "),
+    );
+</script>
+
+{#if resolvedTag === "a"}
+    <a class={classes} href={href} target={resolvedTarget} rel={resolvedRel}>
+        {#if children}
+            {@render children()}
+        {/if}
+        {#if isExternal && !noIcon}
+            <span class="external-icon" aria-hidden="true">
+                <ExternalLink size={11} strokeWidth={2} />
+            </span>
+        {/if}
+    </a>
+{:else}
+    <svelte:element this={resolvedTag} class={classes}>
+        {#if children}
+            {@render children()}
+        {/if}
+    </svelte:element>
+{/if}
+
+<style>
+    .Link {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    .Link.link {
+        color: var(--greg-accent);
+        text-underline-offset: 2px;
+        transition:
+            color 0.25s,
+            opacity 0.25s;
+    }
+
+    .Link.link:hover {
+        color: color-mix(in srgb, var(--greg-accent) 80%, white);
+    }
+
+    .external-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 3px;
+        vertical-align: middle;
+        line-height: 1;
+    }
+
+    .external-icon :global(svg) {
+        stroke: currentColor;
+    }
+
+    .Link.no-icon .external-icon {
+        display: none;
+    }
+
+    :global(.greg[data-external-link-icon="false"]) .Link.external-link-icon .external-icon {
+        display: none;
+    }
+</style>

package/src/lib/components/SocialLink.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+    type SocialLinkIcon = string | { svg: string };
+
+    type Props = {
+        icon: SocialLinkIcon;
+        link: string;
+        ariaLabel?: string;
+        me?: boolean;
+    };
+
+    let { icon, link, ariaLabel, me = true }: Props = $props();
+
+    let el: HTMLAnchorElement | undefined = $state();
+
+    // If the CSS mask for a named icon isn't loaded, fall back to Iconify API
+    onMount(() => {
+        const span = el?.children[0];
+        if (
+            span instanceof HTMLElement &&
+            span.className.startsWith("social-icon-") &&
+            (getComputedStyle(span).maskImage ||
+                (getComputedStyle(span) as any).webkitMaskImage) === "none"
+        ) {
+            const name = span.className.replace("social-icon-", "");
+            span.style.setProperty(
+                "--icon",
+                `url('https://api.iconify.design/simple-icons/${name}.svg')`,
+            );
+        }
+    });
+
+    let svgHtml = $derived.by(() => {
+        if (typeof icon === "object") return icon.svg;
+        return `<span class="social-icon-${icon}"></span>`;
+    });
+
+    let label = $derived(ariaLabel ?? (typeof icon === "string" ? icon : ""));
+    let relAttr = $derived(me ? "me noopener" : "noopener");
+</script>
+
+<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+<a
+    bind:this={el}
+    class="SocialLink no-icon"
+    href={link}
+    aria-label={label}
+    target="_blank"
+    rel={relAttr}>{@html svgHtml}</a
+>
+
+<style>
+    .SocialLink {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 36px;
+        height: 36px;
+        color: var(--greg-menu-section-color);
+        transition: color 0.5s;
+        text-decoration: none;
+    }
+
+    .SocialLink:hover {
+        color: var(--greg-color);
+        transition: color 0.25s;
+    }
+
+    .SocialLink :global(svg),
+    .SocialLink :global([class^="social-icon-"]) {
+        width: 20px;
+        height: 20px;
+        fill: currentColor;
+    }
+
+    /* Named icon support via CSS mask (same mechanism as VitePress vpi-social-*) */
+    .SocialLink :global([class^="social-icon-"]) {
+        display: inline-block;
+        background: currentColor;
+        mask: var(--icon) center / contain no-repeat;
+        -webkit-mask: var(--icon) center / contain no-repeat;
+    }
+</style>