vocs 2.5.2 → 2.6.0

package/src/styles/markdown.css

@@ -594,6 +594,138 @@ pre[data-v][data-v-wrapped] {
 
 /* #endregion */
 
+/* #region Prompts */
+
+[data-v-prompt] {
+  @apply vocs:bg-surfaceTint/70 vocs:overflow-hidden vocs:rounded-lg vocs:border vocs:border-primary vocs:cursor-pointer;
+}
+
+/* biome-ignore lint/correctness/noUnknownFunction: _ */
+@media (width <= theme(--breakpoint-md)) {
+  [data-v-content] > [data-v-prompt] {
+    @apply vocs:-mx-4 vocs:rounded-none vocs:border-l-0 vocs:border-r-0;
+  }
+}
+
+[data-v-prompt-header] {
+  @apply vocs:bg-transparent vocs:h-12 vocs:px-2 vocs:flex vocs:items-center vocs:justify-between vocs:border-b vocs:border-transparent vocs:transition-colors vocs:duration-150;
+}
+
+[data-v-prompt][data-expanded="true"] [data-v-prompt-header] {
+  @apply vocs:border-primary;
+}
+
+[data-v-prompt-header]:hover {
+  @apply vocs:bg-surfaceTint;
+}
+
+[data-v-prompt-icon] {
+  @apply vocs:size-3.5 vocs:shrink-0 vocs:text-accent7;
+}
+
+[data-v-prompt-copy] {
+  @apply vocs:h-full vocs:min-w-0 vocs:flex-1 vocs:px-2 vocs:flex vocs:items-center vocs:gap-2 vocs:bg-transparent vocs:rounded-md vocs:text-left vocs:text-[14px] vocs:text-secondary vocs:font-medium vocs:tracking-tight vocs:hover:text-heading vocs:cursor-pointer vocs:transition-colors vocs:duration-100;
+
+  &[data-state="copied"] [data-v-prompt-icon] {
+    @apply vocs:text-success;
+  }
+
+  &[data-state="error"] {
+    @apply vocs:text-destructive;
+  }
+}
+
+[data-v-prompt-actions] {
+  @apply vocs:flex vocs:items-center vocs:gap-0.5;
+}
+
+[data-v-prompt-action] {
+  @apply vocs:size-8 vocs:flex vocs:items-center vocs:justify-center vocs:bg-transparent vocs:rounded-md vocs:text-secondary vocs:hover:bg-surfaceTint vocs:hover:text-heading vocs:cursor-pointer vocs:transition-colors vocs:duration-100;
+
+  & > svg {
+    @apply vocs:size-4;
+  }
+}
+
+[data-v-prompt-tooltip] {
+  @apply vocs:bg-surface vocs:px-2 vocs:py-1 vocs:rounded-md vocs:border vocs:border-primary vocs:text-[12px] vocs:text-primary vocs:shadow-md;
+}
+
+[data-v-prompt-body] {
+  @apply vocs:relative vocs:m-0 vocs:bg-code-block vocs:px-code-block-px vocs:py-5 vocs:overflow-hidden vocs:whitespace-pre-wrap vocs:[overflow-wrap:anywhere] vocs:font-sans vocs:text-[15px] vocs:leading-[1.7] vocs:tracking-normal vocs:text-primary;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    transform: translateX(-120%);
+    background: linear-gradient(
+      105deg,
+      transparent 25%,
+      oklch(from var(--vocs-color-accent) l c h / 10%) 50%,
+      transparent 75%
+    );
+  }
+
+  & > code {
+    @apply vocs:px-0 vocs:font-sans;
+  }
+
+  /* biome-ignore lint/correctness/noUnknownFunction: _ */
+  @media (width <= theme(--breakpoint-md)) {
+    @apply vocs:px-4 vocs:py-4;
+  }
+}
+
+[data-v-prompt]:hover [data-v-prompt-body]::after {
+  animation: vocs-prompt-shimmer 900ms ease-out;
+}
+
+@keyframes vocs-prompt-shimmer {
+  to {
+    transform: translateX(120%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-v-prompt]:hover [data-v-prompt-body]::after {
+    animation: none;
+  }
+}
+
+[data-v-prompt-token="url"] {
+  @apply vocs:text-accent7 vocs:underline vocs:decoration-accent7/40 vocs:underline-offset-2 vocs:transition-colors vocs:duration-100 vocs:cursor-pointer;
+
+  &:hover {
+    @apply vocs:text-accent8 vocs:decoration-accent8;
+  }
+}
+
+[data-v-prompt-token="code"] {
+  @apply vocs:bg-surfaceTint vocs:text-heading vocs:rounded-sm vocs:px-1 vocs:py-0.5;
+  box-decoration-break: clone;
+}
+
+[data-v-prompt-delimiter] {
+  @apply vocs:text-muted;
+}
+
+[data-v-prompt-token="label"] {
+  @apply vocs:text-heading vocs:font-medium;
+}
+
+[data-v-prompt-token="marker"] {
+  @apply vocs:text-accent7;
+}
+
+[data-v-prompt-token="placeholder"] {
+  @apply vocs:bg-accenta3 vocs:text-accent8 vocs:rounded-sm vocs:px-1;
+  box-decoration-break: clone;
+}
+
+/* #endregion */
+
 /* #region Code group */
 
 [data-v-code-group-list] {

package/src/vite.ts

@@ -1,5 +1,6 @@
 import { getIconData, iconToHTML, iconToSVG } from '@iconify/utils'
 import { type IconifyJSON, icons as lucide } from '@iconify-json/lucide'
+import { icons as ri } from '@iconify-json/ri'
 import { icons as simple } from '@iconify-json/simple-icons'
 import type { PluginOption } from 'vite'
 
@@ -24,6 +25,7 @@ export async function vocs(): Promise<PluginOption[]> {
       compiler: 'jsx',
       customCollections: {
         lucide: getIcon(lucide),
+        ri: getIcon(ri),
         'simple-icons': getIcon(simple),
       },
       jsx: 'react',

package/src/waku/internal/middleware/md-router.ts

@@ -23,6 +23,7 @@ async function resolveContent() {
     pages: [...openapiPages, ...pages],
     title: config.title,
     description: config.description,
+    pagePrelude: Llms.getMarkdownPagePrelude(config),
     rehypePlugins,
     remarkPlugins,
     sidebar: config.sidebar,