@lupinum/ginko-docs 0.2.2 → 0.2.3

package/app/components/ui/badge/Badge.vue

@@ -4,7 +4,7 @@ import type { HTMLAttributes } from "vue";
 import type { BadgeVariants } from ".";
 import { reactiveOmit } from "@vueuse/core";
 import { Primitive } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "#ginko-docs/utils";
 import { badgeVariants } from ".";
 
 const props = defineProps<

package/app/components/ui/button/Button.vue

@@ -3,7 +3,7 @@ import type { PrimitiveProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import type { ButtonVariants } from ".";
 import { Primitive } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "#ginko-docs/utils";
 import { buttonVariants } from ".";
 
 interface Props extends PrimitiveProps {

package/app/components/ui/collapsible/CollapsibleContent.vue

@@ -3,7 +3,7 @@ import type { CollapsibleContentProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { CollapsibleContent } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "#ginko-docs/utils";
 
 const props = defineProps<CollapsibleContentProps & { class?: HTMLAttributes["class"] }>();
 

package/app/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -3,27 +3,37 @@ import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui
 import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { DropdownMenuContent, DropdownMenuPortal, useForwardPropsEmits } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "#ginko-docs/utils";
 
 defineOptions({
   inheritAttrs: false,
 });
 
 const props = withDefaults(
-  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
+  defineProps<
+    DropdownMenuContentProps & {
+      class?: HTMLAttributes["class"];
+      /**
+       * Render in place instead of teleporting to body. Required inside modal
+       * dialogs (e.g. the mobile menu sheet), where body-level portals are
+       * blocked by the dialog's pointer-events lock.
+       */
+      portalDisabled?: boolean;
+    }
+  >(),
   {
     sideOffset: 4,
   },
 );
 const emits = defineEmits<DropdownMenuContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class");
+const delegatedProps = reactiveOmit(props, "class", "portalDisabled");
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DropdownMenuPortal>
+  <DropdownMenuPortal :disabled="props.portalDisabled">
     <DropdownMenuContent
       data-slot="dropdown-menu-content"
       v-bind="{ ...$attrs, ...forwarded }"

package/app/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -3,7 +3,7 @@ import type { DropdownMenuItemProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { DropdownMenuItem, useForwardProps } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "#ginko-docs/utils";
 
 const props = withDefaults(
   defineProps<

package/app/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -3,7 +3,7 @@ import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "rek
 import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { DropdownMenuItemIndicator, DropdownMenuRadioItem, useForwardPropsEmits } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "#ginko-docs/utils";
 
 const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>();
 

package/app/components/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -3,7 +3,7 @@ import type { DropdownMenuSeparatorProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { DropdownMenuSeparator } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "#ginko-docs/utils";
 
 const props = defineProps<
   DropdownMenuSeparatorProps & {

package/app/components/ui/dropdown-menu/index.ts

@@ -1,16 +1,7 @@
 export { default as DropdownMenu } from "./DropdownMenu.vue";
-
-export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue";
 export { default as DropdownMenuContent } from "./DropdownMenuContent.vue";
-export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue";
 export { default as DropdownMenuItem } from "./DropdownMenuItem.vue";
-export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue";
 export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue";
 export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue";
 export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue";
-export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue";
-export { default as DropdownMenuSub } from "./DropdownMenuSub.vue";
-export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue";
-export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue";
 export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue";
-export { DropdownMenuPortal } from "reka-ui";

package/app/components/ui/kbd/Kbd.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "#ginko-docs/utils";
 
 const props = defineProps<{
   class?: HTMLAttributes["class"];

package/app/components/ui/kbd/index.ts

@@ -2,7 +2,6 @@ import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
 
 export { default as Kbd } from "./Kbd.vue";
-export { default as KbdGroup } from "./KbdGroup.vue";
 
 export const kbdVariants = cva(
   "bg-muted text-muted-foreground ring-1 ring-border pointer-events-none inline-flex w-fit items-center justify-center gap-1 rounded-sm font-sans font-medium select-none [&_svg:not([class*='size-'])]:size-3 [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",

package/app/components/ui/scroll-area/ScrollArea.vue

@@ -3,7 +3,7 @@ import type { ScrollAreaRootProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "#ginko-docs/utils";
 import ScrollBar from "./ScrollBar.vue";
 
 const props = defineProps<

package/app/components/ui/scroll-area/ScrollBar.vue

@@ -3,7 +3,7 @@ import type { ScrollAreaScrollbarProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "#ginko-docs/utils";
 
 const props = withDefaults(
   defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes["class"] }>(),

package/app/components/ui/separator/Separator.vue

@@ -3,7 +3,7 @@ import type { SeparatorProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { Separator } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "#ginko-docs/utils";
 
 const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>(), {
   orientation: "horizontal",

package/app/components/ui/sheet/SheetContent.vue

@@ -3,7 +3,7 @@ import type { DialogContentEmits, DialogContentProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "#ginko-docs/utils";
 import SheetOverlay from "./SheetOverlay.vue";
 
 interface SheetContentProps extends DialogContentProps {

package/app/components/ui/sheet/SheetDescription.vue

@@ -3,7 +3,7 @@ import type { DialogDescriptionProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { DialogDescription } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "#ginko-docs/utils";
 
 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>();
 

package/app/components/ui/sheet/SheetOverlay.vue

@@ -3,7 +3,7 @@ import type { DialogOverlayProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { DialogOverlay } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "#ginko-docs/utils";
 
 const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>();
 

package/app/components/ui/sheet/SheetTitle.vue

@@ -3,7 +3,7 @@ import type { DialogTitleProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { DialogTitle } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "#ginko-docs/utils";
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>();
 

package/app/components/ui/sheet/index.ts

@@ -1,8 +1,5 @@
 export { default as Sheet } from "./Sheet.vue";
-export { default as SheetClose } from "./SheetClose.vue";
 export { default as SheetContent } from "./SheetContent.vue";
 export { default as SheetDescription } from "./SheetDescription.vue";
-export { default as SheetFooter } from "./SheetFooter.vue";
-export { default as SheetHeader } from "./SheetHeader.vue";
 export { default as SheetTitle } from "./SheetTitle.vue";
 export { default as SheetTrigger } from "./SheetTrigger.vue";

package/app/components/ui/tabs/Tabs.vue

@@ -3,7 +3,7 @@ import type { TabsRootEmits, TabsRootProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { TabsRoot, useForwardPropsEmits } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "#ginko-docs/utils";
 
 const props = defineProps<TabsRootProps & { class?: HTMLAttributes["class"] }>();
 const emits = defineEmits<TabsRootEmits>();

package/app/components/ui/tabs/TabsList.vue

@@ -3,7 +3,7 @@ import type { TabsListProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { TabsList } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "#ginko-docs/utils";
 
 const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>();
 

package/app/components/ui/tabs/TabsTrigger.vue

@@ -3,7 +3,7 @@ import type { TabsTriggerProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { TabsTrigger, useForwardProps } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "#ginko-docs/utils";
 
 const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>();
 

package/app/components/ui/tabs/index.ts

@@ -1,4 +1,3 @@
 export { default as Tabs } from "./Tabs.vue";
-export { default as TabsContent } from "./TabsContent.vue";
 export { default as TabsList } from "./TabsList.vue";
 export { default as TabsTrigger } from "./TabsTrigger.vue";

package/app/composables/site-navigation.utils.ts

@@ -6,6 +6,7 @@ export interface NavItem {
   href: string;
   external?: boolean;
   icon?: string;
+  description?: string;
 }
 
 export interface MainNavContext {
@@ -15,6 +16,8 @@ export interface MainNavContext {
   blogExists: boolean;
   docsLabel: string;
   blogLabel: string;
+  docsDescription?: string;
+  blogDescription?: string;
 }
 
 const isExternalHref = (href: string) => /^https?:\/\//.test(href);
@@ -30,21 +33,35 @@ export function resolveMainNav(
         label: getLocalizedSiteText(link.label, ctx.locale),
         href,
         external: isExternalHref(href),
+        icon: link.icon,
+        description: link.description
+          ? getLocalizedSiteText(link.description, ctx.locale)
+          : undefined,
       };
     });
   }
 
-  const items: NavItem[] = [{ label: ctx.docsLabel, href: ctx.docsPath }];
+  const items: NavItem[] = [
+    {
+      label: ctx.docsLabel,
+      href: ctx.docsPath,
+      icon: "lucide:book-open",
+      description: ctx.docsDescription,
+    },
+  ];
   if (ctx.blogExists) {
-    items.push({ label: ctx.blogLabel, href: ctx.blogPath });
+    items.push({
+      label: ctx.blogLabel,
+      href: ctx.blogPath,
+      icon: "lucide:file-text",
+      description: ctx.blogDescription,
+    });
   }
   return items;
 }
 
 export interface BannerContext {
   locale: string;
-  blogPath: string;
-  blogExists: boolean;
   defaultText: string;
   defaultLinkLabel: string;
 }
@@ -65,16 +82,17 @@ export function resolveBanner(
   config: GinkoDocsAppConfig["banner"],
   ctx: BannerContext,
 ): ResolvedBanner {
-  const show = config.enabled === "auto" ? ctx.blogExists : config.enabled;
   const text = config.text ? getLocalizedSiteText(config.text, ctx.locale) : ctx.defaultText;
-  const linkHref = config.link?.to
-    ? getLocalizedSiteText(config.link.to, ctx.locale)
-    : ctx.blogExists
-      ? ctx.blogPath
-      : undefined;
+  const linkHref = config.link?.to ? getLocalizedSiteText(config.link.to, ctx.locale) : undefined;
   const linkLabel = config.link?.label
     ? getLocalizedSiteText(config.link.label, ctx.locale)
     : ctx.defaultLinkLabel;
 
-  return { show, text, linkLabel, linkHref, storageKey: bannerStorageKey(config.id) };
+  return {
+    show: config.enabled,
+    text,
+    linkLabel,
+    linkHref,
+    storageKey: bannerStorageKey(config.id),
+  };
 }

package/app/composables/useContentRouteAlternates.ts

@@ -18,26 +18,18 @@ export function useContentRouteAlternates() {
     state.value.sourcePath === route.path ? state.value.alternates : [],
   );
 
-  return current;
-}
-
-export function syncContentRouteAlternates(
-  page: Ref<{ route?: { alternates?: ContentAlternate[] } } | null | undefined>,
-) {
-  const route = useRoute();
-  const state = useState<ContentRouteAlternatesState>("content-route-alternates", () => ({
-    sourcePath: "",
-    alternates: [],
-  }));
+  function sync(page: Ref<{ route?: { alternates?: ContentAlternate[] } } | null | undefined>) {
+    watch(
+      page,
+      (document) => {
+        state.value = {
+          sourcePath: route.path,
+          alternates: document?.route?.alternates ?? [],
+        };
+      },
+      { immediate: true },
+    );
+  }
 
-  watch(
-    page,
-    (document) => {
-      state.value = {
-        sourcePath: route.path,
-        alternates: document?.route?.alternates ?? [],
-      };
-    },
-    { immediate: true },
-  );
+  return { current, sync };
 }

package/app/composables/useLocalizedRouteSwitch.ts

@@ -6,7 +6,7 @@ import { isLocaleCode } from "../../i18n/locales";
 export function useLocalizedRouteSwitch() {
   const route = useRoute();
   const switchLocalePath = useSwitchLocalePath();
-  const alternates = useContentRouteAlternates();
+  const { current: alternates } = useContentRouteAlternates();
 
   function switchPathname(targetLocale: string) {
     if (!isLocaleCode(targetLocale)) {

package/app/composables/useMetaKey.ts

@@ -0,0 +1,18 @@
+import { onMounted, ref, type Ref } from "vue";
+
+/**
+ * Platform-aware modifier key label. Defaults to "Ctrl" during SSR and
+ * upgrades to "⌘" on Apple platforms after mount (onMounted is client-only,
+ * so hydration stays consistent).
+ */
+export function useMetaKey(): Ref<string> {
+  const metaSymbol = ref("Ctrl");
+
+  onMounted(() => {
+    if (typeof navigator !== "undefined" && navigator.userAgent.includes("Macintosh")) {
+      metaSymbol.value = "⌘";
+    }
+  });
+
+  return metaSymbol;
+}

package/app/composables/useProseAppearance.ts

@@ -0,0 +1,24 @@
+import { computed, type MaybeRefOrGetter, toValue } from "vue";
+import type { GinkoDocsProseAppearance, GinkoDocsProseFamily } from "../../shared/types/app-config";
+import { useGinkoDocsConfig } from "./useGinkoDocsConfig";
+
+const DEFAULT_APPEARANCE: GinkoDocsProseAppearance = "quiet";
+
+function normalizeAppearance(value: unknown): GinkoDocsProseAppearance | undefined {
+  return value === "quiet" || value === "tint" ? value : undefined;
+}
+
+export function useProseAppearance(
+  family: GinkoDocsProseFamily,
+  appearance?: MaybeRefOrGetter<string | undefined>,
+) {
+  const config = useGinkoDocsConfig();
+
+  return computed<GinkoDocsProseAppearance>(
+    () =>
+      normalizeAppearance(toValue(appearance)) ??
+      normalizeAppearance(config.prose?.components?.[family]) ??
+      normalizeAppearance(config.prose?.appearance) ??
+      DEFAULT_APPEARANCE,
+  );
+}

package/app/composables/useSiteNavigation.ts

@@ -5,11 +5,6 @@ import { computed } from "vue";
 import { useGinkoDocsConfig } from "./useGinkoDocsConfig";
 import { resolveBanner, resolveMainNav, type NavItem } from "./site-navigation.utils";
 
-export interface SidebarSection {
-  title: string;
-  items: { label: string; href: string; badge?: string }[];
-}
-
 export const useSiteNavigation = () => {
   const config = useGinkoDocsConfig();
   const { locale, t } = useI18n();
@@ -32,8 +27,6 @@ export const useSiteNavigation = () => {
   const banner = computed(() =>
     resolveBanner(config.banner, {
       locale: locale.value,
-      blogPath: blogPath.value,
-      blogExists: blogExists.value,
       defaultText: t("banner.text"),
       defaultLinkLabel: t("banner.linkLabel"),
     }),
@@ -69,18 +62,10 @@ export const useSiteNavigation = () => {
       blogExists: blogExists.value,
       docsLabel: t("nav.documentation"),
       blogLabel: t("nav.blog"),
+      docsDescription: t("nav.docsDescription"),
+      blogDescription: t("nav.blogDescription"),
     }),
   );
 
-  const footerNav = computed<{
-    product: NavItem[];
-    resources: NavItem[];
-    company: NavItem[];
-  }>(() => ({
-    product: [],
-    resources: [...socialLinks.value],
-    company: [],
-  }));
-
-  return { site, banner, mainNav, footerNav, socialLinks };
+  return { site, banner, mainNav, socialLinks };
 };

package/app/config/site.utils.ts

@@ -2,7 +2,7 @@ import type { GinkoDocsLocalizedText } from "../../shared/types/app-config";
 import { defaultLocale, type LocaleCode } from "../../i18n/locales";
 
 export function getLocalizedSiteText(
-  value: GinkoDocsLocalizedText | string,
+  value: GinkoDocsLocalizedText,
   locale: string,
   fallbackLocale: LocaleCode = defaultLocale,
 ): string {

package/app/error.vue

@@ -4,7 +4,6 @@ import { messages } from "../i18n/messages/index";
 import { normalizeAppError } from "./lib/errors";
 import { computed } from "vue";
 import { clearError, useHead } from "#imports";
-import { useDocsEntryPath } from "#ginko-docs/features/docs/composables/useDocsEntryPath";
 import { localeFromPath, localizedPath } from "../i18n/locales";
 
 type NuxtErrorLike = {
@@ -29,8 +28,8 @@ const copy = computed(() => {
   const catalog = messages[locale.value].errors;
   return catalog[normalized.value.kind] ?? catalog.unavailable;
 });
-const docsPath = await useDocsEntryPath();
 const homePath = computed(() => localizedPath(locale.value, localizedRoutes[locale.value].home));
+const docsPath = computed(() => localizedPath(locale.value, localizedRoutes[locale.value].docs));
 const title = computed(() => `${normalized.value.statusCode} - ${copy.value.title}`);
 // Keep the full site chrome for content-level errors (404 and friends); hard
 // server failures fall back to the bare page so the error screen cannot crash.
@@ -59,9 +58,6 @@ const handleError = () => clearError({ redirect: homePath.value });
           {{ normalized.statusCode }}
         </p>
 
-        <p class="mb-3 text-sm font-medium tracking-wider text-primary uppercase">
-          {{ normalized.statusMessage }}
-        </p>
         <h1 class="mb-4 text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
           {{ copy.title }}
         </h1>

package/app/features/docs/components/DocsBreadcrumb.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "#ginko-docs/utils";
+import { useI18n } from "#imports";
+
+const props = defineProps<{
+  items: { title: string; path?: string }[];
+  class?: HTMLAttributes["class"];
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <nav
+    v-if="items.length"
+    :class="cn('flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground', props.class)"
+    :aria-label="t('docs.breadcrumbs')"
+  >
+    <template v-for="(item, index) in items" :key="item.path ?? item.title">
+      <Icon
+        v-if="index > 0"
+        name="lucide:chevron-right"
+        class="size-3.5 text-border"
+        aria-hidden="true"
+      />
+      <NuxtLink
+        v-if="item.path"
+        :to="item.path"
+        class="rounded-sm transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        {{ item.title }}
+      </NuxtLink>
+      <span v-else>{{ item.title }}</span>
+    </template>
+  </nav>
+</template>

package/app/features/docs/components/DocsContributeLinks.vue

@@ -2,12 +2,19 @@
 import type { GinkoDocsAppConfig } from "../../../../shared/types/app-config";
 import { computed } from "vue";
 import { useAppConfig, useI18n, useRoute } from "#imports";
+import { buildRepoEditUrl, buildRepoIssueUrl } from "#ginko-docs/utils/repository";
 
-const props = defineProps<{
-  stem?: string;
-  extension?: string;
-  title: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    stem?: string;
+    extension?: string;
+    title: string;
+    variant?: "article" | "rail";
+  }>(),
+  {
+    variant: "article",
+  },
+);
 
 const route = useRoute();
 const { t } = useI18n();
@@ -20,25 +27,28 @@ const sourcePath = computed(() => {
   return `${directory}/${props.stem}.${extension}`;
 });
 
-const editUrl = computed(() => {
-  if (!repository || !sourcePath.value) return null;
-  const branch = repository.branch || "main";
-  return `${repository.url.replace(/\/$/, "")}/edit/${encodeURIComponent(branch)}/${sourcePath.value}`;
-});
+const editUrl = computed(() =>
+  repository && sourcePath.value ? buildRepoEditUrl(repository, sourcePath.value) : null,
+);
 
-const issueUrl = computed(() => {
-  if (!repository) return null;
-  const url = new URL(`${repository.url.replace(/\/$/, "")}/issues/new`);
-  url.searchParams.set("title", t("docs.issueTitle", { title: props.title }));
-  url.searchParams.set("body", t("docs.issueBody", { path: route.path }));
-  return url.toString();
-});
+const issueUrl = computed(() =>
+  repository
+    ? buildRepoIssueUrl(repository, {
+        title: t("docs.issueTitle", { title: props.title }),
+        body: t("docs.issueBody", { path: route.path }),
+      })
+    : null,
+);
 </script>
 
 <template>
   <div
     v-if="repository"
-    class="mt-12 flex flex-wrap items-center gap-x-4 gap-y-2 border-t border-border pt-5 text-sm"
+    :class="
+      variant === 'rail'
+        ? 'flex flex-col gap-2.5 text-sm'
+        : 'flex flex-wrap items-center gap-x-4 gap-y-2 text-sm'
+    "
     :aria-label="t('docs.contribute')"
   >
     <a