@lupinum/ginko-docs 0.4.0-rc.8 → 0.4.0

package/app/components/prose/ProseHr.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <hr :class="cn(props.class)" />
-</template>

package/app/components/prose/ProseImg.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { computed, resolveComponent } from "vue";
-import { Motion } from "motion-v";
-import { useI18n } from "#imports";
-import ImageZoomDialog from "#ginko-docs/components/content/ImageZoomDialog.vue";
-import { useGinkoDocsConfig } from "#ginko-docs/composables/useGinkoDocsConfig";
-import { cn } from "../../utils";
-
-const props = defineProps<{
-  src?: string;
-  alt?: string;
-  title?: string;
-  width?: string | number;
-  height?: string | number;
-  class?: HTMLAttributes["class"];
-}>();
-
-const { t } = useI18n();
-const config = useGinkoDocsConfig();
-const zoomEnabled = computed(() => config.images?.zoom !== false);
-
-// External images skip NuxtImg; the layer ships no ipx domain allowlist.
-const isLocalAsset = computed(() => Boolean(props.src?.startsWith("/")));
-const imageComponent = computed(() => (isLocalAsset.value ? resolveComponent("NuxtImg") : "img"));
-const imageAttrs = computed(() => ({
-  src: props.src,
-  alt: props.alt ?? "",
-  title: props.title,
-  width: props.width,
-  height: props.height,
-  loading: "lazy" as const,
-  decoding: "async" as const,
-  class: cn("content-prose-image", props.class),
-  ...(isLocalAsset.value ? { sizes: "100vw md:704px" } : {}),
-}));
-</script>
-
-<template>
-  <ImageZoomDialog v-if="src && zoomEnabled" :src="src" :alt="alt" :label="title">
-    <template #trigger="{ layoutId, transition }">
-      <!-- A button is phrasing content, so a bare markdown image stays valid inside its paragraph. -->
-      <button
-        type="button"
-        class="block max-w-full cursor-zoom-in rounded-[var(--radius)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
-        :aria-label="`${t('docs.zoomImage')}: ${alt ?? ''}`"
-      >
-        <Motion as-child :layout-id="layoutId" :transition="transition">
-          <component :is="imageComponent" v-bind="imageAttrs" />
-        </Motion>
-      </button>
-    </template>
-  </ImageZoomDialog>
-  <component :is="imageComponent" v-else-if="src" v-bind="imageAttrs" />
-</template>

package/app/components/prose/ProseLi.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <li :class="cn(props.class)">
-    <slot />
-  </li>
-</template>

package/app/components/prose/ProseOl.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <ol :class="cn(props.class)">
-    <slot />
-  </ol>
-</template>

package/app/components/prose/ProseP.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <p :class="cn(props.class)">
-    <slot />
-  </p>
-</template>

package/app/components/prose/ProsePre.vue

@@ -1,180 +0,0 @@
-<script setup lang="ts">
-import type { ComputedRef, HTMLAttributes } from "vue";
-import { computed, inject, onMounted, ref, useId } from "vue";
-import { useClipboard, useEventListener, useResizeObserver } from "@vueuse/core";
-import { useI18n } from "#imports";
-import { cn } from "../../utils";
-import { useProseAppearance } from "../../composables/useProseAppearance";
-import {
-  EXTENSION_ICONS,
-  FALLBACK_FILE_ICON,
-  FILENAME_ICONS,
-  LANGUAGE_ICONS,
-  filenameExtension,
-  normalizedFilename,
-} from "../../utils/file-icons";
-
-const props = defineProps<{
-  code?: string;
-  language?: string | null;
-  filename?: string | null;
-  highlights?: number[];
-  meta?: string | null;
-  icon?: string | null;
-  inGroup?: boolean;
-  class?: HTMLAttributes["class"];
-  appearance?: "quiet" | "tint";
-}>();
-// Instance prop wins, then a surrounding ::collapse wrapper, then config.
-const wrapperAppearance = inject<ComputedRef<"quiet" | "tint"> | null>(
-  "contentCodeAppearance",
-  null,
-);
-const appearance = useProseAppearance("code", () => props.appearance ?? wrapperAppearance?.value);
-
-const { copy, copied } = useClipboard();
-const { t } = useI18n();
-const codeElement = ref<HTMLElement | null>(null);
-// Landmarks with role="region" need unique accessible names; the same
-// filename can appear in several code blocks on one page.
-const regionId = useId();
-
-const HIDDEN_LANGUAGES = new Set(["text", "plaintext", "txt", "plain"]);
-
-function parseIconFromMeta(meta: string | null | undefined): string | null {
-  if (!meta) return null;
-  const match = meta.match(/(?:^|\s)icon=(\S+)/);
-  return match?.[1] ?? null;
-}
-
-function normalizedLanguage(language: string | null | undefined): string | null {
-  return language?.trim().toLowerCase() || null;
-}
-
-const label = computed(() => {
-  if (props.filename) return props.filename;
-
-  const language = normalizedLanguage(props.language);
-  if (language && !HIDDEN_LANGUAGES.has(language)) return props.language;
-
-  return "";
-});
-
-const iconName = computed(() => {
-  const explicitIcon = props.icon || parseIconFromMeta(props.meta);
-  if (explicitIcon) return explicitIcon;
-
-  const filename = normalizedFilename(props.filename);
-  if (filename && FILENAME_ICONS[filename]) return FILENAME_ICONS[filename];
-
-  const extension = filenameExtension(props.filename);
-  if (extension && EXTENSION_ICONS[extension]) return EXTENSION_ICONS[extension];
-
-  const language = normalizedLanguage(props.language);
-  if (language && LANGUAGE_ICONS[language]) return LANGUAGE_ICONS[language];
-
-  return FALLBACK_FILE_ICON;
-});
-
-async function copyCode() {
-  await copy(props.code || codeElement.value?.innerText || "");
-}
-
-// A right-edge fade signals horizontally clipped code; it disappears once the
-// reader reaches the end of the line.
-const scrollElement = ref<HTMLElement | null>(null);
-const canScrollRight = ref(false);
-
-function measureOverflow() {
-  const el = scrollElement.value;
-  if (!el) return;
-  canScrollRight.value =
-    el.scrollWidth - el.clientWidth > 2 && el.scrollLeft + el.clientWidth < el.scrollWidth - 2;
-}
-
-onMounted(measureOverflow);
-useEventListener(scrollElement, "scroll", measureOverflow, { passive: true });
-useResizeObserver(scrollElement, measureOverflow);
-</script>
-
-<template>
-  <figure
-    dir="ltr"
-    data-fd-codeblock
-    :data-appearance="appearance"
-    tabindex="-1"
-    :class="
-      cn(
-        'content-codeblock group shiki not-prose relative',
-        props.inGroup
-          ? 'content-codeblock-in-group'
-          : label
-            ? 'content-codeblock-with-caption'
-            : 'content-codeblock-plain',
-      )
-    "
-  >
-    <figcaption v-if="label && !props.inGroup" data-fd-caption>
-      <Icon :name="iconName" mode="svg" class="content-codeblock-caption-icon" aria-hidden="true" />
-      <span class="flex-1 truncate">{{ label }}</span>
-      <button
-        type="button"
-        class="content-codeblock-copy-button ml-auto"
-        :aria-label="copied ? t('docs.copiedText') : t('docs.copyText')"
-        @click="copyCode"
-      >
-        <Icon
-          :name="copied ? 'lucide:check' : 'lucide:clipboard'"
-          mode="svg"
-          class="size-3.5"
-          aria-hidden="true"
-        />
-      </button>
-    </figcaption>
-
-    <div v-if="!label && !props.inGroup" class="absolute top-2 right-2 z-10" data-fd-copy-float>
-      <button
-        type="button"
-        class="content-codeblock-copy-button content-codeblock-copy-button-floating"
-        :aria-label="copied ? t('docs.copiedText') : t('docs.copyText')"
-        @click="copyCode"
-      >
-        <Icon
-          :name="copied ? 'lucide:check' : 'lucide:clipboard'"
-          mode="svg"
-          class="size-3.5"
-          aria-hidden="true"
-        />
-      </button>
-    </div>
-
-    <div class="content-codeblock-scroll-wrap">
-      <div
-        ref="scrollElement"
-        role="region"
-        tabindex="0"
-        :aria-label="
-          (label ? `${t('docs.codeSample')}: ${label}` : t('docs.codeSample')) + ` (${regionId})`
-        "
-        :class="
-          cn(
-            'fd-scroll-container max-h-[600px] overflow-auto focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset',
-            !label && !props.inGroup && 'content-codeblock-inline-copy',
-          )
-        "
-      >
-        <pre
-          ref="codeElement"
-          :class="cn('w-max min-w-full', props.class)"
-          v-bind="$attrs"
-        ><slot /></pre>
-      </div>
-
-      <div
-        class="content-codeblock-overflow-fade"
-        :data-hidden="!canScrollRight"
-        aria-hidden="true"
-      />
-    </div>
-  </figure>
-</template>

package/app/components/prose/ProseStrong.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <strong :class="cn(props.class)">
-    <slot />
-  </strong>
-</template>

package/app/components/prose/ProseTable.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <div :class="cn('content-table', props.class)">
-    <div class="content-table-scroll">
-      <table>
-        <slot />
-      </table>
-    </div>
-  </div>
-</template>

package/app/components/prose/ProseTbody.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <tbody :class="cn(props.class)">
-    <slot />
-  </tbody>
-</template>

package/app/components/prose/ProseTd.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <td :class="cn(props.class)">
-    <slot />
-  </td>
-</template>

package/app/components/prose/ProseTh.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <th :class="cn(props.class)">
-    <slot />
-  </th>
-</template>

package/app/components/prose/ProseThead.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <thead :class="cn(props.class)">
-    <slot />
-  </thead>
-</template>

package/app/components/prose/ProseTr.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <tr :class="cn(props.class)">
-    <slot />
-  </tr>
-</template>

package/app/components/prose/ProseUl.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <ul :class="cn(props.class)">
-    <slot />
-  </ul>
-</template>

package/app/components/site/ModeToggle.vue

@@ -1,81 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { computed } from "vue";
-import { useColorMode, useI18n } from "#imports";
-import { cn } from "#ginko-docs/utils";
-import { headerUtilityButtonClass } from "#ginko-docs/components/site/header-utils";
-import {
-  nextColorModePreference,
-  themeToggleIcon,
-  themeToggleLabelKey,
-} from "#ginko-docs/components/site/mode-toggle.utils";
-
-const props = withDefaults(
-  defineProps<{
-    variant?: "icon" | "menu-row";
-    class?: HTMLAttributes["class"];
-  }>(),
-  {
-    variant: "icon",
-  },
-);
-
-const colorMode = useColorMode();
-const { t } = useI18n();
-
-const isDark = computed(() => colorMode.value === "dark");
-const toggleIcon = computed(() => themeToggleIcon(isDark.value));
-const toggleLabel = computed(() => t(themeToggleLabelKey(isDark.value)));
-
-function toggleColorMode() {
-  const currentRendered = isDark.value ? "dark" : "light";
-  colorMode.preference = nextColorModePreference(currentRendered);
-}
-</script>
-
-<template>
-  <button
-    v-if="variant === 'menu-row'"
-    type="button"
-    role="switch"
-    :aria-checked="isDark"
-    :aria-label="toggleLabel"
-    :class="
-      cn(
-        'flex h-14 w-full items-center justify-between rounded-none px-5 text-base font-semibold hover:bg-transparent',
-        props.class,
-      )
-    "
-    @click="toggleColorMode"
-  >
-    <span class="flex min-w-0 items-center gap-4">
-      <span
-        class="flex size-11 shrink-0 items-center justify-center rounded-lg bg-muted/60 text-foreground"
-      >
-        <Icon :name="toggleIcon" class="size-5" aria-hidden="true" />
-      </span>
-      <span class="truncate">{{ t("theme.label") }}</span>
-    </span>
-    <span
-      class="relative inline-flex h-6 w-11 shrink-0 rounded-full border border-border bg-muted/60 transition-colors"
-      :class="isDark ? 'bg-foreground/80' : ''"
-      aria-hidden="true"
-    >
-      <span
-        class="absolute top-0.5 size-5 rounded-full bg-background shadow-xs transition-transform motion-reduce:transition-none"
-        :class="isDark ? 'translate-x-[1.375rem]' : 'translate-x-0.5'"
-      />
-    </span>
-  </button>
-  <button
-    v-else
-    type="button"
-    role="switch"
-    :aria-checked="isDark"
-    :aria-label="toggleLabel"
-    :class="cn(headerUtilityButtonClass, props.class)"
-    @click="toggleColorMode"
-  >
-    <Icon :name="toggleIcon" class="size-[18px]" aria-hidden="true" />
-  </button>
-</template>

package/app/components/site/SiteBanner.vue

@@ -1,97 +0,0 @@
-<script setup lang="ts">
-import { useLocalStorage } from "@vueuse/core";
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
-import { useI18n } from "#imports";
-import { useGinkoDocsConfig } from "#ginko-docs/composables/useGinkoDocsConfig";
-import { useSiteNavigation } from "#ginko-docs/composables/useSiteNavigation";
-
-const props = defineProps<{
-  landing?: boolean;
-}>();
-
-const { banner } = useSiteNavigation();
-const { t } = useI18n();
-const config = useGinkoDocsConfig();
-
-const dismissed = useLocalStorage(banner.value.storageKey, false);
-// Avoid a hydration mismatch: localStorage is client-only, so reveal after mount.
-const hydrated = ref(false);
-onMounted(() => {
-  hydrated.value = true;
-});
-const visible = computed(
-  () =>
-    banner.value.show &&
-    (!props.landing || config.banner.showOnLanding) &&
-    (!hydrated.value ? true : !dismissed.value),
-);
-
-// The banner scrolls away above the sticky header, so sticky consumers
-// (docs sidebar/TOC heights, mobile menu top) need its *currently visible*
-// height. This component is the single writer of --site-banner-height.
-const bannerElement = ref<HTMLElement | null>(null);
-let rafId: number | null = null;
-let lastHeight = -1;
-
-function updateBannerHeightVar() {
-  rafId = null;
-  const element = bannerElement.value;
-  const height = element
-    ? Math.max(0, Math.min(element.getBoundingClientRect().bottom, element.offsetHeight))
-    : 0;
-  if (height === lastHeight) return;
-  lastHeight = height;
-  document.documentElement.style.setProperty("--site-banner-height", `${height}px`);
-}
-
-function scheduleBannerHeightVar() {
-  if (rafId !== null) return;
-  rafId = requestAnimationFrame(updateBannerHeightVar);
-}
-
-watch(visible, () => {
-  void nextTick(scheduleBannerHeightVar);
-});
-
-onMounted(() => {
-  window.addEventListener("scroll", scheduleBannerHeightVar, { passive: true });
-  window.addEventListener("resize", scheduleBannerHeightVar, { passive: true });
-  scheduleBannerHeightVar();
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener("scroll", scheduleBannerHeightVar);
-  window.removeEventListener("resize", scheduleBannerHeightVar);
-  if (rafId !== null) cancelAnimationFrame(rafId);
-  document.documentElement.style.setProperty("--site-banner-height", "0px");
-});
-</script>
-
-<template>
-  <div
-    v-if="visible"
-    ref="bannerElement"
-    role="region"
-    :aria-label="banner.text"
-    class="relative z-30 bg-brand px-10 py-2.5 text-center text-sm leading-5 font-medium text-brand-foreground"
-  >
-    <span class="mx-auto block max-w-[min(100%,52rem)]">
-      {{ banner.text }}
-      <NuxtLink
-        v-if="banner.linkHref"
-        :to="banner.linkHref"
-        class="ml-1.5 inline-block underline underline-offset-2 opacity-90 transition-opacity hover:opacity-100"
-      >
-        {{ banner.linkLabel }}
-      </NuxtLink>
-    </span>
-    <button
-      type="button"
-      class="absolute top-1/2 right-2 flex size-8 -translate-y-1/2 items-center justify-center rounded p-1 opacity-70 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-brand-foreground/50 focus-visible:outline-none"
-      :aria-label="t('banner.dismiss')"
-      @click="dismissed = true"
-    >
-      <Icon name="lucide:x" class="size-3.5" aria-hidden="true" />
-    </button>
-  </div>
-</template>