@baybreezy/docd 0.0.1

package/app/app.config.ts

@@ -0,0 +1,239 @@
+import type { DocdTransitionName } from "./transitions/presets";
+
+export type BorderType = "dashed" | "solid";
+
+export type DocLogoWordmarkConfig = {
+  /**
+   * URL of the wordmark image to be used in light mode.
+   */
+  light?: string;
+  /**
+   * URL of the wordmark image to be used in dark mode.
+   */
+  dark?: string;
+};
+
+export type DocdGithubConfig = {
+  /** Full GitHub repo URL, e.g. "https://github.com/user/repo" */
+  repo: string;
+  /** Branch to link to for editing.
+   *
+   * @default "main"
+   */
+  branch?: string;
+  /** Path inside the repo where content lives.
+   *
+   * @default "content"
+   */
+  contentDir?: string;
+};
+
+export type DocdExtraLink = {
+  /**
+   * Icon to be displayed for this link. Should be a valid icon name from [Icônes](https://icones.js.org/)
+   */
+  icon?: string;
+  /**
+   *  Text to be displayed for this link.
+   */
+  label: string;
+  /**
+   * URL this link should point to.
+   *
+   * Can be internal or external. If external, the link will open in a new tab.
+   */
+  href: string;
+  /**
+   * Whether this is an external link.
+   *
+   * If `true`, the link will open in a new tab.
+   *
+   * If `false` or omitted, the link will be treated as internal and use NuxtLink for navigation.
+   */
+  external?: boolean;
+};
+
+export type DocdTransitionConfig = {
+  /**
+   * Name of the transition preset to use. Set to `"none"` to disable transitions entirely.
+   *
+   * @default "fade"
+   */
+  name?: DocdTransitionName;
+  /**
+   * Duration of the transition in seconds.
+   *
+   * @default 0.35
+   */
+  duration?: number;
+  /**
+   * Easing function to use for the transition.
+   *
+   * @default "easeOut"
+   */
+  easing?: string;
+};
+
+/**
+ * Configuration for the logo used in the header.
+ */
+export type DocLogoConfig = {
+  /**
+   * URL of the logo image to be used in light mode.
+   */
+  light?: string;
+  /**
+   * URL of the logo image to be used in dark mode.
+   */
+  dark?: string;
+  /**
+   * Alt text for the logo image.
+   */
+  alt?: string;
+  /**
+   * Additional CSS classes to apply to the logo image.
+   */
+  classes?: string;
+  /**
+   * Which logo variant to render in the header.
+   *
+   * @default "logo"
+   */
+  display?: "logo" | "wordmark";
+  /**
+   * Optional wordmark assets for text-style branding.
+   */
+  wordmark?: DocLogoWordmarkConfig;
+  /**
+   * Favicon path for brand asset references.
+   *
+   * @default "/favicon.ico"
+   */
+  favicon?: string;
+  /**
+   * URL to a page or folder containing brand assets.
+   */
+  brandAssetsUrl?: string;
+  /**
+   * URL to navigate to when the logo is clicked. If not provided, clicking the logo will navigate to the homepage ("/").
+   *
+   * @default "/"
+   */
+  url?: string;
+};
+
+/**
+ * Configuration for Docd, the documentation layer built with [UI Thing](https://uithing.com).
+ */
+export type DocdConfig = {
+  /** GitHub repository info used to generate the "`Edit this page`" link.
+   *
+   * Inferred from environment variables or local .git config if not provided, but can be set here explicitly if needed.
+   */
+  github?: DocdGithubConfig;
+  /**
+   * UI-related configuration options for Docd.
+   */
+  ui?: {
+    /**
+     * Header-related UI configuration options.
+     */
+    header?: {
+      /** Title to be displayed in the header.
+       *
+       * Default: site name (inferred from package.json or Git info)
+       */
+      title?: string;
+      /**
+       * Whether to hide the search button in the sidebar's header.
+       *
+       * @default false
+       */
+      hideSearch?: boolean;
+      /** Logo configuration for the header. */
+      logo?: DocLogoConfig;
+    };
+    footer?: {
+      /**
+       * Whether to hide the theme customizer in the sidebar
+       *
+       * @default false
+       */
+      hideThemeCustomizer?: boolean;
+      /**
+       * Whether to hide the light/dark mode toggle in the sidebar.
+       *
+       * @default false
+       */
+      hideLightDarkToggle?: boolean;
+    };
+    /**
+     * Configuration for the table of contents (ToC) sidebar. If not provided, the ToC will still render but with default settings.
+     */
+    toc?: {
+      /**
+       * Title to be displayed at the top of the ToC sidebar.
+       *
+       * @default "On this page"
+       */
+      title?: string;
+      /**
+       * Icon to be displayed next to the ToC title. Should be a valid icon name from [Icônes](https://icones.js.org/).
+       *
+       * @default "lucide:list"
+       */
+      icon?: string;
+    };
+    /**
+     * Controls whether borders and decorative rails render as dashed or solid.
+     *
+     * @default "dashed"
+     */
+    borderType?: BorderType;
+    /**
+     * Links rendered in the sidebar's "extra stuff" section.
+     *
+     * The edit this page link is rendered here automatically if the `github` config is provided.
+     *
+     * You can add any additional links you want here as well.
+     */
+    extraLinks?: DocdExtraLink[];
+    /**
+     * The color mode to use for the site by default.
+     */
+    colorMode?: "light" | "dark";
+    /**
+     * Page transition configuration. Set `name` to `"none"` to disable transitions entirely.
+     *
+     * @default {
+     *   name: "fade",
+     *   duration: 0.35,
+     *   easing: "easeOut",
+     * }
+     */
+    transition?: DocdTransitionConfig;
+  };
+};
+
+export default defineAppConfig({
+  docd: {
+    ui: {
+      toc: { title: "On this page", icon: "lucide:list" },
+      borderType: "dashed",
+      transition: {
+        name: "fade",
+        duration: 0.35,
+        easing: "easeOut",
+      },
+    },
+  },
+});
+
+declare module "@nuxt/schema" {
+  interface AppConfigInput {
+    /**
+     * Configuration for Docd, the documentation layer built with [UI Thing](https://uithing.com).
+     */
+    docd?: DocdConfig;
+  }
+}

package/app/app.vue

@@ -0,0 +1,19 @@
+<template>
+  <ConfigProvider :use-id="useId">
+    <NuxtRouteAnnouncer />
+    <NuxtLoadingIndicator color="var(--primary)" />
+    <NuxtLayout>
+      <DocsPageTransition>
+        <NuxtPage :transition="false" />
+      </DocsPageTransition>
+    </NuxtLayout>
+    <UiSonner />
+    <DocsSearch v-model="searchModal" />
+  </ConfigProvider>
+</template>
+
+<script lang="ts" setup>
+  import { ConfigProvider } from "reka-ui";
+  import { useId } from "vue";
+  const searchModal = useSearchModal();
+</script>

package/app/assets/css/tailwind.css

@@ -0,0 +1,335 @@
+@import "tailwindcss" source("../../../../../");
+@import "tw-animate-css";
+
+@config "../../../tailwind.config.cjs";
+
+@plugin "@tailwindcss/typography";
+
+@plugin "@tailwindcss/forms" {
+  strategy: "class";
+}
+
+@custom-variant dark (&:is(.dark *));
+@custom-variant light (&:is(.light *));
+@custom-variant hover (&:hover);
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+}
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@theme {
+  --breakpoint-tablet: 850px;
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-sidebar-background: var(--sidebar-background);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-input: var(--sidebar-input);
+
+  --color-gradient-lime: var(--gradient-lime);
+  --color-gradient-ocean: var(--gradient-ocean);
+  --color-gradient-wine: var(--gradient-wine);
+  --color-gradient-rust: var(--gradient-rust);
+
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-code: var(--code);
+  --color-code-foreground: var(--code-foreground);
+  --color-code-highlight: var(--code-highlight);
+  --color-code-number: var(--code-number);
+  --color-selection: var(--selection);
+  --color-selection-foreground: var(--selection-foreground);
+
+  --font-sans:
+    "Geist", "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mono:
+    "Geist Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+  --font-display--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+
+  --animate-shine: shine 3s ease-out infinite;
+  --animate-gradient-flow: gradientFlow 10s ease 0s infinite normal none running;
+  --animate-meteor: meteor 5s linear infinite;
+  --animate-background-position-spin: background-position-spin 3000ms infinite alternate;
+  --animate-grid: grid 15s linear infinite;
+
+  @keyframes grid {
+    0% {
+      transform: translateY(-50%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes shine {
+    0% {
+      background-position: 200% 0;
+    }
+    25%,
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  @keyframes gradientFlow {
+    50% {
+      background-position: 100% 50%;
+    }
+    0%,
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+
+  @keyframes meteor {
+    0% {
+      transform: rotate(var(--angle)) translateX(0);
+      opacity: 1;
+    }
+    70% {
+      opacity: 1;
+    }
+    100% {
+      transform: rotate(var(--angle)) translateX(-500px);
+      opacity: 0;
+    }
+  }
+
+  @keyframes background-position-spin {
+    0% {
+      background-position: top center;
+    }
+    100% {
+      background-position: bottom center;
+    }
+  }
+}
+
+@layer base {
+  :root {
+    --radius: 0.625rem;
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.141 0.005 285.823);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.141 0.005 285.823);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.141 0.005 285.823);
+    --primary: oklch(0.21 0.006 285.885);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.967 0.001 286.375);
+    --secondary-foreground: oklch(0.21 0.006 285.885);
+    --muted: oklch(0.967 0.001 286.375);
+    --muted-foreground: oklch(0.552 0.016 285.938);
+    --accent: oklch(0.967 0.001 286.375);
+    --accent-foreground: oklch(0.21 0.006 285.885);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.92 0.004 286.32);
+    --input: oklch(0.92 0.004 286.32);
+    --ring: oklch(0.705 0.015 286.067);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.141 0.005 285.823);
+    --sidebar-primary: oklch(0.21 0.006 285.885);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.967 0.001 286.375);
+    --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+    --sidebar-border: oklch(0.92 0.004 286.32);
+    --sidebar-ring: oklch(0.705 0.015 286.067);
+
+    /* Gradient slide show Colors */
+    --gradient-lime: oklch(67.287% 0.1546 116.644);
+    --gradient-ocean: oklch(44.56% 0.10114 242.813);
+    --gradient-wine: oklch(32.332% 0.12034 5.266);
+    --gradient-rust: oklch(55.695% 0.19944 34.155);
+
+    --nav-width: 280px;
+    --header-height: 60px;
+    --selection: var(--primary);
+    --selection-foreground: var(--primary-foreground);
+  }
+
+  .dark {
+    --background: oklch(0.141 0.005 285.823);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.21 0.006 285.885);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.21 0.006 285.885);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.92 0.004 286.32);
+    --primary-foreground: oklch(0.21 0.006 285.885);
+    --secondary: oklch(0.274 0.006 286.033);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.274 0.006 286.033);
+    --muted-foreground: oklch(0.705 0.015 286.067);
+    --accent: oklch(0.274 0.006 286.033);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.552 0.016 285.938);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.21 0.006 285.885);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.274 0.006 286.033);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.552 0.016 285.938);
+
+    --surface: oklch(0.2 0 0);
+    --surface-foreground: oklch(0.708 0 0);
+    --code: var(--surface);
+    --code-foreground: var(--surface-foreground);
+    --code-highlight: oklch(0.27 0 0);
+    --code-number: oklch(0.72 0 0);
+  }
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-border, currentColor);
+  }
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+  * {
+    @apply border-border outline-ring/50 selection:bg-selection selection:text-selection-foreground;
+  }
+  html {
+    @apply antialiased;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 4px;
+  }
+}
+
+html {
+  color-scheme: light dark;
+}
+html.dark {
+  color-scheme: dark;
+}
+html.light {
+  color-scheme: light;
+}
+
+h1 > a,
+h2 > a,
+h3 > a,
+h4 > a,
+h5 > a,
+h6 > a {
+  @apply font-bold! text-foreground no-underline hover:text-foreground!;
+}
+
+code {
+  @apply block rounded py-px font-mono;
+  > span {
+    @apply px-3;
+  }
+}
+
+code:not(pre code):not(a > code) {
+  @apply inline-block rounded-sm border bg-muted px-1 py-1 leading-none;
+}
+
+a > code {
+  @apply inline-block border border-dashed border-primary/40 bg-primary/5 px-1 transition hover:border-primary;
+}
+
+pre::-webkit-scrollbar {
+  @apply h-2.5 w-2.5;
+}
+pre::-webkit-scrollbar-track {
+  @apply bg-transparent;
+}
+pre::-webkit-scrollbar-corner {
+  @apply bg-transparent;
+}
+pre::-webkit-scrollbar-thumb {
+  @apply rounded-full bg-muted-foreground/60;
+}
+pre {
+  max-height: 400px;
+  scrollbar-width: thin;
+  scrollbar-color: --alpha(var(--muted) / 40%) transparent;
+  @variant dark {
+    scrollbar-color: var(--muted) transparent;
+  }
+}
+
+.shiki .line {
+  display: block;
+  &.highlight {
+    background-color: var(--muted);
+  }
+}