@baybreezy/docd 0.0.1

package/app/components/OgImage/Docs.takumi.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="h-full w-full bg-zinc-950 p-20 text-zinc-50">
+    <div
+      class="relative flex h-full w-full flex-col justify-center gap-4 border border-zinc-900/80 bg-zinc-900/10 p-10"
+    >
+      <div class="absolute -top-px right-0 h-px w-12 bg-zinc-700" />
+      <div class="absolute top-0 -right-px h-12 w-px bg-zinc-700" />
+      <div class="absolute right-0 -bottom-px h-px w-12 bg-zinc-700" />
+      <div class="absolute -right-px bottom-0 h-12 w-px bg-zinc-700" />
+
+      <div class="absolute -top-px left-0 h-px w-12 bg-zinc-700" />
+      <div class="absolute top-0 -left-px h-12 w-px bg-zinc-700" />
+      <div class="absolute -bottom-px left-0 h-px w-12 bg-zinc-700" />
+      <div class="absolute bottom-0 -left-px h-12 w-px bg-zinc-700" />
+
+      <p
+        v-if="headline"
+        class="mb-4 line-clamp-1 text-2xl text-pretty whitespace-pre-line"
+        v-html="headline"
+      />
+      <h1 v-if="title" class="mb-4 line-clamp-1 text-5xl leading-none font-bold tracking-tighter">
+        {{ title }}
+      </h1>
+      <p
+        v-if="description"
+        class="line-clamp-3 text-3xl leading-normal text-pretty whitespace-pre-line opacity-80"
+      >
+        {{ description }}
+      </p>
+
+      <div v-if="logoSvg" class="absolute bottom-7 left-7 size-10" v-html="logoSvg" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  defineProps<{
+    title?: string;
+    description?: string;
+    headline?: string;
+  }>();
+
+  const { darkLogo, lightLogo } = useDocd();
+  const logoPath = darkLogo.value || lightLogo.value;
+
+  const logoSvg = await fetchLogoSvg(logoPath);
+
+  function resizeSvg(svg: string, size: number): string {
+    const s = String(size);
+    const withWidth = /width="[^"]*"/.test(svg)
+      ? svg.replace(/width="[^"]*"/, `width="${s}"`)
+      : svg.replace("<svg", `<svg width="${s}"`);
+    return /height="[^"]*"/.test(withWidth)
+      ? withWidth.replace(/height="[^"]*"/, `height="${s}"`)
+      : withWidth.replace("<svg", `<svg height="${s}"`);
+  }
+
+  async function fetchLogoSvg(path?: string): Promise<string> {
+    if (!path) return "";
+    try {
+      const { url: siteUrl } = useSiteConfig();
+      const url = path.startsWith("http") ? path : `${siteUrl}${path}`;
+      const svg = await $fetch<string>(url, { responseType: "text" });
+      return resizeSvg(svg, 48);
+    } catch {
+      return "";
+    }
+  }
+</script>

package/app/components/OgImage/Landing.takumi.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="h-full w-full bg-zinc-950 p-20 text-zinc-50">
+    <div
+      class="relative flex h-full w-full flex-col justify-center gap-4 border border-zinc-900/80 bg-zinc-900/10 p-10"
+    >
+      <div class="absolute -top-px right-0 h-px w-12 bg-zinc-700" />
+      <div class="absolute top-0 -right-px h-12 w-px bg-zinc-700" />
+      <div class="absolute right-0 -bottom-px h-px w-12 bg-zinc-700" />
+      <div class="absolute -right-px bottom-0 h-12 w-px bg-zinc-700" />
+
+      <div class="absolute -top-px left-0 h-px w-12 bg-zinc-700" />
+      <div class="absolute top-0 -left-px h-12 w-px bg-zinc-700" />
+      <div class="absolute -bottom-px left-0 h-px w-12 bg-zinc-700" />
+      <div class="absolute bottom-0 -left-px h-12 w-px bg-zinc-700" />
+
+      <div class="flex flex-col items-center text-center">
+        <div v-if="logoSvg" v-html="logoSvg" class="mb-5" />
+
+        <h1 v-if="title" class="mb-4 line-clamp-1 text-5xl leading-none font-bold tracking-tighter">
+          {{ title }}
+        </h1>
+        <p
+          v-if="description"
+          class="line-clamp-3 text-3xl text-pretty whitespace-pre-line opacity-80"
+          v-html="description"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  defineProps<{
+    title?: string;
+    description?: string;
+  }>();
+
+  const { darkLogo, lightLogo } = useDocd();
+  const logoPath = darkLogo.value || lightLogo.value;
+
+  const logoSvg = await fetchLogoSvg(logoPath);
+
+  function resizeSvg(svg: string, size: number): string {
+    const s = String(size);
+    const withWidth = /width="[^"]*"/.test(svg)
+      ? svg.replace(/width="[^"]*"/, `width="${s}"`)
+      : svg.replace("<svg", `<svg width="${s}"`);
+    return /height="[^"]*"/.test(withWidth)
+      ? withWidth.replace(/height="[^"]*"/, `height="${s}"`)
+      : withWidth.replace("<svg", `<svg height="${s}"`);
+  }
+
+  async function fetchLogoSvg(path?: string): Promise<string> {
+    if (!path) return "";
+    try {
+      const { url: siteUrl } = useSiteConfig();
+      const url = path.startsWith("http") ? path : `${siteUrl}${path}`;
+      const svg = await $fetch<string>(url, { responseType: "text" });
+      return resizeSvg(svg, 48);
+    } catch {
+      return "";
+    }
+  }
+</script>

package/app/components/OgImage/Site.takumi.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="h-full w-full bg-zinc-950 p-20 text-zinc-50">
+    <div
+      class="relative flex h-full w-full flex-col justify-center gap-4 border border-zinc-900/80 bg-zinc-900/10 p-10"
+    >
+      <div class="absolute -top-px right-0 h-px w-12 bg-zinc-700" />
+      <div class="absolute top-0 -right-px h-12 w-px bg-zinc-700" />
+      <div class="absolute right-0 -bottom-px h-px w-12 bg-zinc-700" />
+      <div class="absolute -right-px bottom-0 h-12 w-px bg-zinc-700" />
+
+      <div class="absolute -top-px left-0 h-px w-12 bg-zinc-700" />
+      <div class="absolute top-0 -left-px h-12 w-px bg-zinc-700" />
+      <div class="absolute -bottom-px left-0 h-px w-12 bg-zinc-700" />
+      <div class="absolute bottom-0 -left-px h-12 w-px bg-zinc-700" />
+
+      <h1 class="text-5xl leading-none tracking-tighter">{{ title }}</h1>
+      <p class="text-3xl text-pretty whitespace-pre-line opacity-80" v-html="description" />
+
+      <div v-if="logo" class="absolute right-6 bottom-6">
+        <img :src="logo" class="h-10 w-10 object-contain" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  defineProps<{
+    title?: string;
+    description?: string;
+    logo?: string;
+  }>();
+</script>

package/app/components/Ui/Avatar/Avatar.vue

@@ -0,0 +1,75 @@
+<template>
+  <AvatarRoot
+    data-slot="avatar"
+    :data-size="size"
+    :as="as"
+    :as-child="asChild"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot>
+      <slot name="image">
+        <UiAvatarImage
+          v-if="src"
+          :src="src"
+          :alt="alt"
+          :class="imageClass"
+          @loading-status-change="emits('loadingStatusChange', $event)"
+        />
+      </slot>
+      <slot name="fallback">
+        <UiAvatarFallback :delay-ms="delayMs" :class="fallbackClass" :fallback="fallback" />
+      </slot>
+    </slot>
+  </AvatarRoot>
+</template>
+
+<script lang="ts">
+  import { AvatarRoot } from "reka-ui";
+  import type { AvatarImageEmits, AvatarImageProps, AvatarRootProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+
+  export type AvatarProps = AvatarRootProps &
+    Partial<AvatarImageProps> & {
+      /**
+       * Class to add to the root element
+       */
+      class?: any;
+      /**
+       * Class to pass to the image element
+       */
+      imageClass?: any;
+      /**
+       * Class to pass to the fallback element
+       */
+      fallbackClass?: any;
+      /**
+       * The `alt` attribute value for the image
+       */
+      alt?: string;
+      /**
+       * The fallback text to display when the image fails to load
+       */
+      fallback?: string;
+      /**
+       * Useful for delaying rendering so it only appears for those with slower connections.
+       */
+      delayMs?: number;
+      /**
+       * The size of the avatar
+       *
+       * @default "default"
+       */
+      size?: "default" | "sm" | "lg";
+    };
+</script>
+
+<script lang="ts" setup>
+  const props = withDefaults(defineProps<AvatarProps>(), {
+    size: "default",
+  });
+
+  const emits = defineEmits<AvatarImageEmits>();
+  const styles = tv({
+    base: "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+  });
+</script>

package/app/components/Ui/Avatar/Badge.vue

@@ -0,0 +1,34 @@
+<template>
+  <Primitive
+    data-slot="avatar-badge"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    v-bind="forwarded"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script lang="ts" setup>
+  import { Primitive } from "reka-ui";
+  import type { PrimitiveProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        /** Custom class(es) to add to the element */
+        class?: any;
+      }
+    >(),
+    {
+      as: "span",
+    }
+  );
+
+  const forwarded = reactiveOmit(props, "class");
+  const styles = tv({
+    base: [
+      "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full text-primary-foreground bg-blend-color ring-2 ring-background select-none group-data-[size=default]/avatar:size-2.5 group-data-[size=lg]/avatar:size-3 group-data-[size=sm]/avatar:size-2 group-data-[size=default]/avatar:[&>svg]:size-2 group-data-[size=lg]/avatar:[&>svg]:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+    ],
+  });
+</script>

package/app/components/Ui/Avatar/Fallback.vue

@@ -0,0 +1,30 @@
+<template>
+  <AvatarFallback
+    data-slot="avatar-fallback"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    v-bind="forwarded"
+  >
+    <slot>
+      {{ fallback }}
+    </slot>
+  </AvatarFallback>
+</template>
+
+<script lang="ts" setup>
+  import { AvatarFallback } from "reka-ui";
+  import type { AvatarFallbackProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+
+  const props = defineProps<
+    AvatarFallbackProps & {
+      /** The text to display inside the avatar */
+      fallback?: string;
+      /** Custom class(es) to add to the element */
+      class?: any;
+    }
+  >();
+  const forwarded = reactiveOmit(props, "class", "fallback");
+  const styles = tv({
+    base: "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+  });
+</script>

package/app/components/Ui/Avatar/Group.vue

@@ -0,0 +1,29 @@
+<template>
+  <Primitive
+    data-slot="avatar-group"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    v-bind="forwarded"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script lang="ts" setup>
+  import { Primitive } from "reka-ui";
+  import type { PrimitiveProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+
+  const props = defineProps<
+    PrimitiveProps & {
+      /** Custom class(es) to add to the element */
+      class?: any;
+    }
+  >();
+
+  const forwarded = reactiveOmit(props, "class");
+  const styles = tv({
+    base: [
+      "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+    ],
+  });
+</script>

package/app/components/Ui/Avatar/GroupCount.vue

@@ -0,0 +1,29 @@
+<template>
+  <Primitive
+    data-slot="avatar-group-count"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    v-bind="forwarded"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script lang="ts" setup>
+  import { Primitive } from "reka-ui";
+  import type { PrimitiveProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+
+  const props = defineProps<
+    PrimitiveProps & {
+      /** Custom class(es) to add to the element */
+      class?: any;
+    }
+  >();
+
+  const forwarded = reactiveOmit(props, "class");
+  const styles = tv({
+    base: [
+      "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+    ],
+  });
+</script>

package/app/components/Ui/Avatar/Image.vue

@@ -0,0 +1,29 @@
+<template>
+  <AvatarImage
+    data-slot="avatar-image"
+    v-bind="forwarded"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { AvatarImage, useForwardPropsEmits } from "reka-ui";
+  import type { AvatarImageEmits, AvatarImageProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+
+  const props = defineProps<
+    AvatarImageProps & {
+      /** The alt text for the image */
+      alt?: string;
+      /** Custom class(es) to add to the element */
+      class?: any;
+    }
+  >();
+  const emits = defineEmits<AvatarImageEmits>();
+
+  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
+
+  const styles = tv({
+    base: "aspect-square size-full rounded-full object-cover",
+  });
+</script>

package/app/components/Ui/Badge.vue

@@ -0,0 +1,86 @@
+<template>
+  <component
+    :is="elementType"
+    :class="
+      badgeVariants({ disabled, size, variant, class: normalizeClass(props.class) || undefined })
+    "
+    v-bind="forwarded"
+    @click="onClick"
+  >
+    <slot />
+  </component>
+</template>
+
+<script lang="ts">
+  import { reactiveOmit } from "@vueuse/core";
+  import { useForwardProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  import type { NuxtLinkProps } from "#app/components";
+</script>
+
+<script lang="ts" setup>
+  const badgeVariants = tv({
+    base: "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        success:
+          "border-transparent bg-green-500 text-white focus-visible:ring-green-500/20 dark:bg-green-500/60 dark:focus-visible:ring-green-500/40 [a&]:hover:bg-green-600",
+        warning:
+          "border-transparent bg-yellow-500 text-white focus-visible:ring-yellow-500/20 dark:bg-yellow-500/60 dark:focus-visible:ring-yellow-500/40 [a&]:hover:bg-yellow-600",
+        info: "border-transparent bg-blue-500 text-white focus-visible:ring-blue-500/20 dark:bg-blue-500/60 dark:focus-visible:ring-blue-500/40 [a&]:hover:bg-blue-600",
+        ghost: "border-transparent bg-transparent text-foreground [a&]:hover:bg-accent/50",
+        error:
+          "border-transparent bg-red-500 text-white focus-visible:ring-red-500/20 dark:bg-red-500/60 dark:focus-visible:ring-red-500/40 [a&]:hover:bg-red-600",
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-50",
+      },
+      size: {
+        sm: "px-2 py-0.5 text-xs font-medium",
+        md: "px-2.5 py-[3px] text-sm font-medium",
+        lg: "px-2.5 py-1 text-sm font-semibold",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      disabled: false,
+      size: "sm",
+    },
+  });
+
+  type BadgeProps = VariantProps<typeof badgeVariants>;
+
+  const props = defineProps<
+    NuxtLinkProps & {
+      /** Any additional class that should be added to the badge */
+      class?: HTMLAttributes["class"];
+      /** The variant of the badge */
+      variant?: BadgeProps["variant"];
+      /** The size of the badge */
+      size?: BadgeProps["size"];
+      /** The action to perform when the badge is clicked */
+      onClick?: () => void;
+      /** Should the badge be disabled or not */
+      disabled?: boolean;
+      /** The element to render the badge as */
+      tag?: string;
+    }
+  >();
+
+  const forwarded = useForwardProps(reactiveOmit(props, "class", "variant", "onClick", "disabled"));
+
+  const elementType = computed(() => {
+    if (props.tag) return props.tag;
+    if (props.href || props.to) return resolveComponent("NuxtLink");
+    if (props.onClick) return "button";
+    return props.tag || "div";
+  });
+</script>