@lupinum/ginko-docs 0.2.2

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+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";
+
+const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>(), {
+  orientation: "horizontal",
+  decorative: true,
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <Separator
+    data-slot="separator"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        props.class,
+      )
+    "
+  />
+</template>

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

@@ -0,0 +1 @@
+export { default as Separator } from "./Separator.vue";

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui";
+import { DialogRoot, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DialogRoot v-slot="slotProps" data-slot="sheet" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui";
+import { DialogClose } from "reka-ui";
+
+const props = defineProps<DialogCloseProps>();
+</script>
+
+<template>
+  <DialogClose data-slot="sheet-close" v-bind="props">
+    <slot />
+  </DialogClose>
+</template>

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+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 SheetOverlay from "./SheetOverlay.vue";
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes["class"];
+  side?: "top" | "right" | "bottom" | "left";
+}
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+  side: "right",
+});
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = reactiveOmit(props, "class", "side");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DialogPortal>
+    <SheetOverlay />
+    <DialogContent
+      data-slot="sheet-content"
+      :class="
+        cn(
+          'fixed z-[70] flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:animate-in data-[state=open]:duration-200',
+          side === 'right' &&
+            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+          side === 'left' &&
+            'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+          side === 'top' &&
+            'inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+          side === 'bottom' &&
+            'inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+          props.class,
+        )
+      "
+      v-bind="{ ...$attrs, ...forwarded }"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute top-4 right-4 inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none"
+      >
+        <Icon name="lucide:x" class="size-4" aria-hidden="true" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+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";
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="sheet-description"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "#ginko-docs/lib/utils";
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+  <div data-slot="sheet-footer" :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "#ginko-docs/lib/utils";
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+  <div data-slot="sheet-header" :class="cn('flex flex-col gap-1.5 p-4', props.class)">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+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";
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="sheet-overlay"
+    :class="
+      cn(
+        'fixed inset-0 z-[60] bg-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+        props.class,
+      )
+    "
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogOverlay>
+</template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+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";
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="sheet-title"
+    :class="cn('font-semibold text-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui";
+import { DialogTrigger } from "reka-ui";
+
+const props = defineProps<DialogTriggerProps>();
+</script>
+
+<template>
+  <DialogTrigger data-slot="sheet-trigger" v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>

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

@@ -0,0 +1,8 @@
+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/switch/Switch.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { SwitchRootEmits, SwitchRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from "reka-ui";
+import { cn } from "#ginko-docs/lib/utils";
+
+interface Props extends SwitchRootProps {
+  class?: HTMLAttributes["class"];
+}
+
+const props = defineProps<Props>();
+const emits = defineEmits<SwitchRootEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SwitchRoot
+    data-slot="switch"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+        props.class,
+      )
+    "
+  >
+    <SwitchThumb
+      data-slot="switch-thumb"
+      :class="
+        cn(
+          'pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+        )
+      "
+    />
+  </SwitchRoot>
+</template>

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

@@ -0,0 +1 @@
+export { default as Switch } from "./Switch.vue";

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+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";
+
+const props = defineProps<TabsRootProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<TabsRootEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <TabsRoot
+    v-slot="slotProps"
+    data-slot="tabs"
+    v-bind="forwarded"
+    :class="cn('flex flex-col gap-2', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </TabsRoot>
+</template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { TabsContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { TabsContent } from "reka-ui";
+import { cn } from "#ginko-docs/lib/utils";
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <TabsContent
+    data-slot="tabs-content"
+    :class="cn('flex-1 outline-none', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+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";
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <TabsList
+    data-slot="tabs-list"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </TabsList>
+</template>

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+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";
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <TabsTrigger
+    data-slot="tabs-trigger"
+    :class="
+      cn(
+        'inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:shadow-sm dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </TabsTrigger>
+</template>

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

@@ -0,0 +1,4 @@
+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/components/ui/textarea/Textarea.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { ref } from "vue";
+import { cn } from "#ginko-docs/lib/utils";
+import { h } from "vue";
+
+const model = defineModel<string>();
+const textarea = ref<HTMLTextAreaElement | null>(null);
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+
+defineExpose({
+  focus: () => textarea.value?.focus(),
+});
+</script>
+
+<template>
+  <textarea
+    ref="textarea"
+    v-model="model"
+    data-slot="textarea"
+    :class="
+      cn(
+        'min-h-36 w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground shadow-xs transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+        props.class,
+      )
+    "
+  />
+</template>

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

@@ -0,0 +1 @@
+export { default as Textarea } from "./Textarea.vue";

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

@@ -0,0 +1,80 @@
+import type { GinkoDocsAppConfig, GinkoDocsLink } from "../../shared/types/app-config";
+import { getLocalizedSiteText } from "../config/site.utils";
+
+export interface NavItem {
+  label: string;
+  href: string;
+  external?: boolean;
+  icon?: string;
+}
+
+export interface MainNavContext {
+  locale: string;
+  docsPath: string;
+  blogPath: string;
+  blogExists: boolean;
+  docsLabel: string;
+  blogLabel: string;
+}
+
+const isExternalHref = (href: string) => /^https?:\/\//.test(href);
+
+export function resolveMainNav(
+  links: GinkoDocsAppConfig["nav"]["links"],
+  ctx: MainNavContext,
+): NavItem[] {
+  if (Array.isArray(links)) {
+    return links.map((link: GinkoDocsLink) => {
+      const href = getLocalizedSiteText(link.to, ctx.locale);
+      return {
+        label: getLocalizedSiteText(link.label, ctx.locale),
+        href,
+        external: isExternalHref(href),
+      };
+    });
+  }
+
+  const items: NavItem[] = [{ label: ctx.docsLabel, href: ctx.docsPath }];
+  if (ctx.blogExists) {
+    items.push({ label: ctx.blogLabel, href: ctx.blogPath });
+  }
+  return items;
+}
+
+export interface BannerContext {
+  locale: string;
+  blogPath: string;
+  blogExists: boolean;
+  defaultText: string;
+  defaultLinkLabel: string;
+}
+
+export interface ResolvedBanner {
+  show: boolean;
+  text: string;
+  linkLabel: string;
+  linkHref?: string;
+  storageKey: string;
+}
+
+export function bannerStorageKey(id: string) {
+  return `ginko-docs:banner:${id}`;
+}
+
+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 linkLabel = config.link?.label
+    ? getLocalizedSiteText(config.link.label, ctx.locale)
+    : ctx.defaultLinkLabel;
+
+  return { show, text, linkLabel, linkHref, storageKey: bannerStorageKey(config.id) };
+}

package/app/composables/useCanonicalUrl.ts

@@ -0,0 +1,9 @@
+import { computed } from "vue";
+import { useAppConfig, useRoute } from "#imports";
+
+export function useCanonicalUrl() {
+  const route = useRoute();
+  const config = useAppConfig().ginkoDocs;
+
+  return computed(() => new URL(route.path, config.site.url).toString());
+}

package/app/composables/useContentRouteAlternates.ts

@@ -0,0 +1,43 @@
+import type { ContentAlternate } from "@lupinum/ginko-content/client";
+import { computed, watch, type Ref } from "vue";
+import { useRoute, useState } from "#imports";
+
+type ContentRouteAlternatesState = {
+  sourcePath: string;
+  alternates: ContentAlternate[];
+};
+
+export function useContentRouteAlternates() {
+  const route = useRoute();
+  const state = useState<ContentRouteAlternatesState>("content-route-alternates", () => ({
+    sourcePath: "",
+    alternates: [],
+  }));
+
+  const current = computed(() =>
+    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: [],
+  }));
+
+  watch(
+    page,
+    (document) => {
+      state.value = {
+        sourcePath: route.path,
+        alternates: document?.route?.alternates ?? [],
+      };
+    },
+    { immediate: true },
+  );
+}

package/app/composables/useGinkoAnalytics.ts

@@ -0,0 +1,37 @@
+import { useScriptPlausibleAnalytics } from "#imports";
+import { useGinkoDocsConfig } from "./useGinkoDocsConfig";
+
+export type AnalyticsProps = Record<string, string>;
+
+export interface GinkoAnalytics {
+  enabled: boolean;
+  track: (event: string, props?: AnalyticsProps) => void;
+}
+
+/**
+ * Plausible analytics via the Nuxt Scripts registry script. Fully disabled
+ * unless `ginkoDocs.analytics.plausible.domain` is configured — without a
+ * domain nothing loads and `track()` is a no-op, so callers never guard.
+ */
+export function useGinkoAnalytics(): GinkoAnalytics {
+  const config = useGinkoDocsConfig();
+  const plausible = config.analytics?.plausible;
+
+  if (!plausible?.domain) {
+    return { enabled: false, track: () => {} };
+  }
+
+  const script = useScriptPlausibleAnalytics({
+    domain: plausible.domain,
+    extension: plausible.extensions ?? ["outbound-links"],
+    ...(plausible.scriptSrc ? { scriptInput: { src: plausible.scriptSrc } } : {}),
+  });
+
+  return {
+    enabled: true,
+    track: (event, props) => {
+      if (!import.meta.client) return;
+      script.proxy.plausible(event, props ? { props } : undefined);
+    },
+  };
+}

package/app/composables/useGinkoDocsConfig.ts

@@ -0,0 +1,6 @@
+import { useAppConfig } from "#imports";
+import type { GinkoDocsAppConfig } from "../../shared/types/app-config";
+
+export function useGinkoDocsConfig(): GinkoDocsAppConfig {
+  return useAppConfig().ginkoDocs as GinkoDocsAppConfig;
+}

package/app/composables/useGinkoOgImage.ts

@@ -0,0 +1,20 @@
+import { defineOgImage } from "#imports";
+import { useGinkoDocsConfig } from "./useGinkoDocsConfig";
+
+export interface GinkoOgImageProps {
+  title?: string;
+  description?: string;
+  locale?: string;
+  [key: string]: unknown;
+}
+
+/**
+ * Declares the page's social image using the configured OgImage template.
+ * No-op when the consumer sets `ginkoDocs.ogImage.enabled: false`.
+ */
+export function useGinkoOgImage(props?: GinkoOgImageProps) {
+  const config = useGinkoDocsConfig();
+  if (config.ogImage?.enabled === false) return;
+  const component = config.ogImage?.component ?? "GinkoDocs";
+  defineOgImage(component as never, props as never);
+}

package/app/composables/useLocalizedPath.ts

@@ -0,0 +1,12 @@
+import { useI18n } from "#imports";
+import { isLocaleCode, localizedPath } from "../../i18n/locales";
+import type { LocalizedRouteKey } from "../../i18n/routes";
+
+export function useLocalizedPath() {
+  const { locale, t } = useI18n();
+
+  return (key: LocalizedRouteKey) => {
+    const path = t(`routes.${key}`);
+    return isLocaleCode(locale.value) ? localizedPath(locale.value, path) : path;
+  };
+}