@dominikcz/greg 0.9.27

package/src/lib/components/TeamPageTitle.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    type Props = {
+        title?: string;
+        lead?: string;
+        titleSnippet?: Snippet;
+        leadSnippet?: Snippet;
+    };
+
+    let { title, lead, titleSnippet, leadSnippet }: Props = $props();
+</script>
+
+<div class="TeamPageTitle">
+    {#if titleSnippet || title}
+        <h1 class="title">
+            {#if titleSnippet}
+                {@render titleSnippet()}
+            {:else}
+                {title}
+            {/if}
+        </h1>
+    {/if}
+    {#if leadSnippet || lead}
+        <p class="lead">
+            {#if leadSnippet}
+                {@render leadSnippet()}
+            {:else}
+                {lead}
+            {/if}
+        </p>
+    {/if}
+</div>
+
+<style>
+    .TeamPageTitle {
+        padding: 48px 32px;
+        text-align: center;
+    }
+
+    @media (min-width: 768px) {
+        .TeamPageTitle {
+            padding: 64px 48px 48px;
+        }
+    }
+
+    @media (min-width: 960px) {
+        .TeamPageTitle {
+            padding: 80px 64px 48px;
+        }
+    }
+
+    .title {
+        letter-spacing: 0;
+        line-height: 44px;
+        font-size: 36px;
+        font-weight: 500;
+        margin: 0;
+        border: none;
+        padding: 0;
+    }
+
+    @media (min-width: 768px) {
+        .title {
+            letter-spacing: -0.5px;
+            line-height: 56px;
+            font-size: 48px;
+        }
+    }
+
+    .lead {
+        margin: 0 auto;
+        max-width: 512px;
+        padding-top: 12px;
+        line-height: 24px;
+        font-size: 16px;
+        font-weight: 500;
+        color: var(--greg-menu-section-color);
+    }
+
+    @media (min-width: 768px) {
+        .lead {
+            max-width: 592px;
+            letter-spacing: 0.15px;
+            line-height: 28px;
+            font-size: 20px;
+        }
+    }
+</style>

package/src/lib/components/index.js

@@ -0,0 +1,24 @@
+/**
+ * Greg — global UI components
+ * Ported from VitePress default theme, rewritten for Svelte 5.
+ *
+ * Usage in Markdown / Svelte:
+ *   import { Badge, Button, Hero, Features, ... } from '$lib/components';
+ */
+
+export { default as Badge } from './Badge.svelte';
+export { default as Button } from './Button.svelte';
+export { default as CarbonAds } from './CarbonAds.svelte';
+export { default as Image } from './Image.svelte';
+export { default as Link } from './Link.svelte';
+export { default as Feature } from './Feature.svelte';
+export { default as Features } from './Features.svelte';
+export { default as Hero } from './Hero.svelte';
+export { default as SocialLink } from './SocialLink.svelte';
+export { default as SocialLinks } from './SocialLinks.svelte';
+export { default as TeamMember } from './TeamMember.svelte';
+export { default as TeamMembers } from './TeamMembers.svelte';
+export { default as TeamPage } from './TeamPage.svelte';
+export { default as TeamPageTitle } from './TeamPageTitle.svelte';
+export { default as TeamPageSection } from './TeamPageSection.svelte';
+export { default as Steps } from './Steps.svelte';

package/src/lib/portal/context.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from 'svelte'
+import { SvelteMap } from 'svelte/reactivity'
+
+const key = Symbol('portals-context')
+
+export function getPortalsContext() {
+  return getContext(key)
+}
+
+export function setPortalsContext(ctx = new SvelteMap()) {
+  setContext(key, ctx)
+}

package/src/lib/portal/index.js

@@ -0,0 +1,3 @@
+export * from './context'
+export { default as Portal } from './portal.svelte'
+export { default as Slot } from './slot.svelte'

package/src/lib/portal/portal.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { getPortalsContext } from "./context";
+
+	const { target, children } = $props();
+
+	const ctx = getPortalsContext();
+
+	$effect(() => {
+		ctx.set(target, children);
+		return () => {
+			ctx.delete(target);
+		};
+	});
+</script>

package/src/lib/portal/slot.svelte

@@ -0,0 +1,8 @@
+<script>
+	import { getPortalsContext } from "./context";
+	const ctx = getPortalsContext();
+
+	const { name } = $props();
+</script>
+
+{@render ctx.get(name)?.()}

package/src/lib/scss/__code.scss

@@ -0,0 +1,128 @@
+.markdown-body code[data-line-numbers] {
+    padding-left: 0.75rem;
+}
+
+.markdown-body code[data-line-numbers]>[data-line]::before {
+    content: attr(data-line);
+
+    /* Other styling */
+    display: inline-block;
+    width: 1ch;
+    margin-right: 2rem;
+    text-align: right;
+    color: gray;
+}
+
+.markdown-body code[data-line-numbers-max-digits="2"]>[data-line]::before {
+    width: 1.25rem;
+}
+
+.markdown-body code[data-line-numbers-max-digits="3"]>[data-line]::before {
+    width: 1.75rem;
+}
+
+.markdown-body code[data-line-numbers-max-digits="4"]>[data-line]::before {
+    width: 2.25rem;
+}
+
+
+/* ── Code Groups ───────────────────────────────── */
+.markdown-body .rehype-code-group {
+    display: grid;
+    gap: 0;
+    margin: 1rem 0;
+}
+
+.markdown-body .rcg-tab-container {
+    display: flex;
+    border-bottom: 1px solid var(--greg-border-color);
+    gap: 0.25rem;
+    padding: 0 0.25rem;
+    background: color-mix(in srgb, var(--greg-menu-background) 85%, transparent);
+    border-radius: 8px 8px 0 0;
+}
+
+.markdown-body .rcg-tab {
+    appearance: none;
+    padding: 0.45rem 0.8rem;
+    cursor: pointer;
+    border: none;
+    border-bottom: 2px solid transparent;
+    background: transparent;
+    color: var(--greg-menu-color);
+    font-size: 0.875rem;
+    font-weight: 500;
+    font-family: inherit;
+    border-radius: 6px 6px 0 0;
+    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
+
+    &:hover {
+        border-color: transparent;
+        background: color-mix(in srgb, var(--greg-menu-hover-background) 65%, transparent);
+        color: var(--greg-color);
+    }
+
+    &:focus-within {
+        outline: none;
+        box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--greg-accent) 45%, transparent);
+    }
+
+    &.active {
+        border-bottom-color: var(--greg-accent);
+        color: var(--greg-accent);
+        font-weight: 700;
+        background: color-mix(in srgb, var(--greg-accent-light) 75%, transparent);
+
+        &:hover {
+            border-bottom-color: var(--greg-accent);
+            color: var(--greg-accent);
+        }
+    }
+}
+
+.markdown-body .rcg-block {
+    display: none;
+    overflow-x: auto;
+    border: 1px solid var(--greg-border-color);
+    border-top: none;
+    border-radius: 0 0 8px 8px;
+    background: var(--greg-main-background);
+    padding: 0.25rem;
+
+    &.active {
+        display: block;
+    }
+
+    >* {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+}
+
+/* ── Code Block Titles ─────────────────────────────── */
+.markdown-body .code-block-with-title {
+    display: grid;
+    gap: 0;
+    margin: 1rem 0;
+
+    >pre {
+        margin: 0;
+        border: 1px solid var(--greg-border-color);
+        border-top: none;
+        border-radius: 0 0 8px 8px;
+    }
+}
+
+.markdown-body .code-block-title {
+    display: flex;
+    align-items: center;
+    padding: 0.45rem 0.8rem;
+    background: color-mix(in srgb, var(--greg-menu-background) 85%, transparent);
+    border: 1px solid var(--greg-border-color);
+    border-bottom: none;
+    border-radius: 8px 8px 0 0;
+    color: var(--greg-menu-color);
+    font-weight: 500;
+    font-size: 0.875rem;
+    font-family: var(--fontMono, ui-monospace, monospace);
+}

package/src/lib/scss/__containers.scss

@@ -0,0 +1,99 @@
+/* ── Custom Containers ───────────────────────────── */
+.custom-block {
+    border-radius: 8px;
+    padding: 1rem 1.25rem;
+    margin: 1.25rem 0;
+    border: 1px solid transparent;
+
+    .custom-block-title {
+        font-size: 0.875rem;
+        font-weight: 700;
+        letter-spacing: 0.02em;
+        margin: 0 0 0.4rem 0;
+        padding: 0;
+        text-transform: uppercase;
+    }
+
+    p:last-child {
+        margin-bottom: 0;
+    }
+
+    // ── info ──
+    &.info {
+        background: var(--greg-info-bg);
+        border-color: var(--greg-info-border);
+
+        .custom-block-title {
+            color: var(--greg-info-text);
+        }
+    }
+
+    // ── tip ──
+    &.tip {
+        background: var(--greg-tip-bg);
+        border-color: var(--greg-tip-border);
+
+        .custom-block-title {
+            color: var(--greg-tip-text);
+        }
+    }
+
+    // ── warning ──
+    &.warning {
+        background: var(--greg-warning-bg);
+        border-color: var(--greg-warning-border);
+
+        .custom-block-title {
+            color: var(--greg-warning-text);
+        }
+    }
+
+    // ── danger ──
+    &.danger {
+        background: var(--greg-danger-bg);
+        border-color: var(--greg-danger-border);
+
+        .custom-block-title {
+            color: var(--greg-danger-text);
+        }
+    }
+
+    // ── details ──
+    &.details {
+        background: var(--greg-code-background);
+        border-color: var(--greg-border-color);
+
+        summary.custom-block-title {
+            cursor: pointer;
+            list-style: none;
+            display: flex;
+            align-items: center;
+            gap: 0.4rem;
+            font-size: 0.9rem;
+            font-weight: 600;
+            text-transform: none;
+            letter-spacing: 0;
+            color: var(--greg-color);
+            margin: 0;
+            user-select: none;
+
+            &::before {
+                content: '>';
+                font-size: 0.8em;
+                transition: transform 0.2s ease;
+                color: var(--greg-accent);
+                flex-shrink: 0;
+            }
+        }
+
+        &[open]>summary.custom-block-title::before {
+            transform: rotate(90deg);
+        }
+
+        // Content inside open details
+        &>*:not(summary) {
+            margin-top: 0.75rem;
+        }
+    }
+}
+