slidev-workspace 0.9.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-workspace",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "A workspace tool for managing multiple Slidev presentations with API-based content management",
   "type": "module",
   "license": "MIT",
@@ -37,14 +37,16 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.1.11",
     "@vitejs/plugin-vue": "^6.0.0",
-    "@vueuse/core": "^13.5.0",
+    "@vueuse/core": "^13.8.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "commander": "^14.0.0",
     "lucide-vue-next": "^0.525.0",
+    "reka-ui": "^2.8.0",
     "tailwind-merge": "^3.3.1",
     "tw-animate-css": "^1.3.5",
     "unhead": "^2.0.19",
+    "vaul-vue": "^0.4.1",
     "vite": "npm:rolldown-vite@latest",
     "vue": "^3.5.17",
     "yaml": "^2.8.0"

package/src/preview/components/SlideDeck.vue

@@ -1,14 +1,11 @@
 <template>
-  <div class="min-h-screen transition-colors">
-    <div
-      class="min-h-screen lg:grid lg:grid-cols-[minmax(0,1fr)_280px_minmax(0,3fr)_minmax(0,1fr)]"
-    >
-      <div class="hidden bg-[#F1F1F1] dark:bg-[#191919] lg:block" />
+  <div class="min-h-screen transition-colors sw-page">
+    <div class="min-h-screen sw-layout">
       <aside
-        class="w-full border-r border-[#E8E8E8] bg-[#F1F1F1] text-sidebar-foreground dark:border-[#212121] dark:bg-[#191919]"
+        class="sw-sidebar w-full border-r border-[#E8E8E8] bg-[#F1F1F1] text-sidebar-foreground dark:border-[#212121] dark:bg-[#191919]"
       >
         <div
-          class="sticky top-0 flex h-screen flex-col px-6 py-10 text-sidebar-foreground"
+          class="sticky top-0 flex h-screen flex-col px-6 py-10 text-sidebar-foreground w-[270px]"
         >
           <div class="px-1 pb-4">
             <h2 class="text-lg font-semibold tracking-tight">
@@ -84,65 +81,164 @@
         </div>
       </aside>
 
-      <section class="bg-[#F5F5F5] dark:bg-[#121212]">
-        <div class="px-6 py-10 lg:px-12">
-          <div
-            class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between"
-          >
-            <div>
-              <h1 class="text-3xl font-semibold">{{ hero.title }}</h1>
-              <p class="mt-2 text-sm text-muted-foreground">
-                {{ hero.description }}
+      <header class="sw-header bg-[#F5F5F5] dark:bg-[#121212]">
+        <div class="max-w-[900px]">
+          <div class="px-6 py-8 lg:px-12 lg:py-10">
+            <Drawer direction="left">
+              <DrawerTrigger as-child>
+                <button
+                  type="button"
+                  class="sw-drawer-trigger mb-6 inline-flex items-center justify-center rounded-xl border border-border bg-background p-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  aria-label="Open sidebar"
+                >
+                  <PanelLeft class="size-5" />
+                </button>
+              </DrawerTrigger>
+              <DrawerContent
+                class="bg-[#F1F1F1] text-sidebar-foreground dark:bg-[#191919]"
+              >
+                <div
+                  class="flex h-full flex-col px-6 py-8 text-sidebar-foreground"
+                >
+                  <div class="px-1 pb-4">
+                    <h2 class="text-lg font-semibold tracking-tight">
+                      {{ sidebar.title }}
+                    </h2>
+                  </div>
+
+                  <div class="px-1 pb-6">
+                    <div class="relative w-full">
+                      <Input
+                        class="pl-10 h-10 rounded-xl bg-background/70"
+                        placeholder="Search slides..."
+                        v-model="searchTerm"
+                      />
+                      <span
+                        class="absolute start-0 inset-y-0 flex items-center justify-center px-3"
+                      >
+                        <Search class="size-5 text-muted-foreground/50" />
+                      </span>
+                    </div>
+                  </div>
+
+                  <div class="px-1 pb-2">
+                    <h3
+                      class="text-xs font-semibold uppercase tracking-widest text-muted-foreground"
+                    >
+                      Categories
+                    </h3>
+                  </div>
+
+                  <div class="px-0.5 space-y-1 flex-1 overflow-auto">
+                    <button
+                      v-for="category in categoryOptions"
+                      :key="category.name"
+                      type="button"
+                      @click="selectedCategory = category.name"
+                      class="w-full flex items-center justify-between rounded-xl px-3 py-2 text-left text-sm transition-colors"
+                      :class="
+                        selectedCategory === category.name
+                          ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                          : 'hover:bg-sidebar-accent/70 text-sidebar-foreground'
+                      "
+                    >
+                      <span class="truncate">{{ category.name }}</span>
+                      <span class="text-xs text-muted-foreground">{{
+                        category.count
+                      }}</span>
+                    </button>
+                  </div>
+
+                  <div
+                    class="mt-auto flex items-center justify-between gap-3 pt-6"
+                  >
+                    <a
+                      v-if="sidebar.githubUrl"
+                      :href="sidebar.githubUrl"
+                      target="_blank"
+                      rel="noreferrer"
+                      class="inline-flex items-center justify-center rounded-lg p-2 text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors cursor-pointer"
+                      aria-label="Open GitHub repository"
+                    >
+                      <Github class="size-5" />
+                    </a>
+                    <div v-else />
+                    <button
+                      @click="toggleDarkMode"
+                      class="p-2 rounded-lg hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors cursor-pointer"
+                      aria-label="Toggle dark mode"
+                      type="button"
+                    >
+                      <Moon v-if="!isDark" class="size-5" />
+                      <Sun v-else class="size-5" />
+                    </button>
+                  </div>
+                </div>
+              </DrawerContent>
+            </Drawer>
+
+            <div
+              class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between"
+            >
+              <div>
+                <h1 class="text-3xl font-semibold">{{ hero.title }}</h1>
+                <p class="mt-2 text-sm text-muted-foreground">
+                  {{ hero.description }}
+                </p>
+              </div>
+              <div class="self-start" />
+            </div>
+
+            <div
+              class="flex flex-col gap-3 md:mt-6 md:flex-row md:items-center md:justify-between"
+            >
+              <p class="text-sm text-muted-foreground">
+                Found {{ filteredSlides.length }} of {{ slidesCount }} slides
+                <template v-if="searchTerm">
+                  <span>
+                    containing "
+                    <span class="font-medium">{{ searchTerm }}</span>
+                    "
+                  </span>
+                </template>
               </p>
+              <div />
             </div>
-            <div class="self-start" />
           </div>
+        </div>
+      </header>
 
+      <section class="sw-main bg-[#F5F5F5] dark:bg-[#121212]">
+        <div class="max-w-[900px]">
           <div
-            class="mt-6 flex flex-col gap-2 md:flex-row md:items-center md:justify-between"
+            class="grid grid-cols-1 gap-6 px-6 pb-12 sm:grid-cols-2 xl:grid-cols-3 lg:px-12"
           >
-            <p class="text-sm text-muted-foreground">
-              Found {{ filteredSlides.length }} of {{ slidesCount }} slides
-              <template v-if="searchTerm">
-                <span>
-                  containing "
-                  <span class="font-medium">{{ searchTerm }}</span>
-                  "
-                </span>
-              </template>
-            </p>
-            <div />
+            <SlideCard
+              v-for="slide in filteredSlides"
+              :key="slide.url"
+              :title="slide.title"
+              :image="slide.image"
+              :description="slide.description"
+              :url="slide.url"
+              :author="slide.author"
+              :date="slide.date"
+            />
           </div>
         </div>
-
-        <div
-          class="grid grid-cols-1 gap-6 px-6 pb-12 sm:grid-cols-2 xl:grid-cols-3 lg:px-12"
-        >
-          <SlideCard
-            v-for="slide in filteredSlides"
-            :key="slide.url"
-            :title="slide.title"
-            :image="slide.image"
-            :description="slide.description"
-            :url="slide.url"
-            :author="slide.author"
-            :date="slide.date"
-          />
-        </div>
       </section>
-      <div class="hidden bg-[#F5F5F5] dark:bg-[#121212] lg:block" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
-import { Search, Moon, Sun, Github } from "lucide-vue-next";
+import { Search, Moon, Sun, Github, PanelLeft } from "lucide-vue-next";
 
 import { useSlides } from "../composables/useSlides";
 import { useConfig } from "../composables/useConfig";
 import { useDarkMode } from "../composables/useDarkMode";
 import { Input } from "../components/ui/input";
+import { Drawer, DrawerContent, DrawerTrigger } from "../components/ui/drawer";
 import SlideCard from "./SlideCard.vue";
 
 const searchTerm = ref("");
@@ -213,3 +309,88 @@ const filteredSlides = computed(() => {
   );
 });
 </script>
+
+<style scoped>
+.sw-layout {
+  display: grid;
+  width: 100%;
+  max-width: var(--sw-layout-width, 97rem);
+  margin: 0 auto;
+  grid-template-columns: var(--sw-sidebar-width, 270px) minmax(0, 1fr);
+  grid-template-rows: auto auto 1fr;
+  grid-template-areas:
+    "sidebar header"
+    "sidebar main"
+    "sidebar main";
+}
+
+.sw-sidebar {
+  grid-area: sidebar;
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  background: var(--sw-sidebar-bg);
+  z-index: 0;
+}
+
+.sw-sidebar::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  left: -100vw;
+  background: var(--sw-sidebar-bg);
+  z-index: -1;
+}
+
+.sw-header {
+  grid-area: header;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.sw-main {
+  grid-area: main;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.sw-drawer-trigger {
+  display: inline-flex;
+}
+
+.sw-page {
+  --sw-sidebar-bg: #f1f1f1;
+  --sw-main-bg: #f5f5f5;
+  background: var(--sw-main-bg);
+}
+
+:global(.dark) .sw-page {
+  --sw-sidebar-bg: #191919;
+  --sw-main-bg: #121212;
+}
+
+@media (max-width: 1024px) {
+  .sw-layout {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto 1fr;
+    grid-template-areas:
+      "sidebar"
+      "header"
+      "main";
+  }
+
+  .sw-sidebar {
+    display: none;
+  }
+
+  .sw-drawer-trigger {
+    display: inline-flex;
+  }
+}
+
+@media (min-width: 1024px) {
+  .sw-drawer-trigger {
+    display: none;
+  }
+}
+</style>

package/src/preview/components/ui/drawer/Drawer.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue";
+import { useForwardPropsEmits } from "reka-ui";
+import { DrawerRoot } from "vaul-vue";
+
+const props = withDefaults(defineProps<DrawerRootProps>(), {
+  shouldScaleBackground: true,
+});
+
+const emits = defineEmits<DrawerRootEmits>();
+
+const forwarded = useForwardPropsEmits<DrawerRootProps, keyof DrawerRootEmits>(
+  props,
+  emits,
+);
+</script>
+
+<template>
+  <DrawerRoot v-slot="slotProps" data-slot="drawer" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DrawerRoot>
+</template>

package/src/preview/components/ui/drawer/DrawerClose.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { DrawerCloseProps } from "vaul-vue";
+import { DrawerClose } from "vaul-vue";
+
+const props = defineProps<DrawerCloseProps>();
+</script>
+
+<template>
+  <DrawerClose data-slot="drawer-close" v-bind="props">
+    <slot />
+  </DrawerClose>
+</template>

package/src/preview/components/ui/drawer/DrawerContent.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import type { DialogContentEmits, DialogContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { useForwardPropsEmits } from "reka-ui";
+import { DrawerContent, DrawerPortal } from "vaul-vue";
+import { cn } from "@/lib/utils";
+import DrawerOverlay from "./DrawerOverlay.vue";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps<
+  DialogContentProps & { class?: HTMLAttributes["class"] }
+>();
+const emits = defineEmits<DialogContentEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerContent
+      data-slot="drawer-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
+          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg',
+          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg',
+          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm',
+          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm',
+          props.class,
+        )
+      "
+    >
+      <div
+        class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
+      />
+      <slot />
+    </DrawerContent>
+  </DrawerPortal>
+</template>

package/src/preview/components/ui/drawer/DrawerDescription.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { DrawerDescriptionProps } from "vaul-vue";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DrawerDescription } from "vaul-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  DrawerDescriptionProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DrawerDescription
+    data-slot="drawer-description"
+    v-bind="delegatedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </DrawerDescription>
+</template>

package/src/preview/components/ui/drawer/DrawerFooter.vue

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

package/src/preview/components/ui/drawer/DrawerHeader.vue

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

package/src/preview/components/ui/drawer/DrawerOverlay.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { DialogOverlayProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DrawerOverlay } from "vaul-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  DialogOverlayProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DrawerOverlay
+    data-slot="drawer-overlay"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+        props.class,
+      )
+    "
+  />
+</template>

package/src/preview/components/ui/drawer/DrawerTitle.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { DrawerTitleProps } from "vaul-vue";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DrawerTitle } from "vaul-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  DrawerTitleProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DrawerTitle
+    data-slot="drawer-title"
+    v-bind="delegatedProps"
+    :class="cn('text-foreground font-semibold', props.class)"
+  >
+    <slot />
+  </DrawerTitle>
+</template>

package/src/preview/components/ui/drawer/DrawerTrigger.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { DrawerTriggerProps } from "vaul-vue";
+import { DrawerTrigger } from "vaul-vue";
+
+const props = defineProps<DrawerTriggerProps>();
+</script>
+
+<template>
+  <DrawerTrigger data-slot="drawer-trigger" v-bind="props">
+    <slot />
+  </DrawerTrigger>
+</template>

package/src/preview/components/ui/drawer/index.ts

@@ -0,0 +1,9 @@
+export { default as Drawer } from "./Drawer.vue";
+export { default as DrawerClose } from "./DrawerClose.vue";
+export { default as DrawerContent } from "./DrawerContent.vue";
+export { default as DrawerDescription } from "./DrawerDescription.vue";
+export { default as DrawerFooter } from "./DrawerFooter.vue";
+export { default as DrawerHeader } from "./DrawerHeader.vue";
+export { default as DrawerOverlay } from "./DrawerOverlay.vue";
+export { default as DrawerTitle } from "./DrawerTitle.vue";
+export { default as DrawerTrigger } from "./DrawerTrigger.vue";