supaslidev 0.2.1 → 0.3.0

package/app/app.config.ts

@@ -1,7 +1,7 @@
 export default defineAppConfig({
   ui: {
     colors: {
-      primary: 'indigo',
+      primary: 'blue',
       secondary: 'violet',
       neutral: 'slate',
     },

package/app/components/PresentationCard.vue

@@ -5,6 +5,9 @@ const props = defineProps<{
   presentation: Presentation;
 }>();
 
+const { deployMode, showDeployDemoToast } = useDeployMode();
+const deployBasePath = computed(() => (import.meta.env.BASE_URL || '/').replace(/\/$/, ''));
+
 const {
   isRunning,
   getPort,
@@ -33,6 +36,11 @@ async function handleDev(event: Event) {
   event.preventDefault();
   event.stopPropagation();
 
+  if (deployMode.value) {
+    showDeployDemoToast();
+    return;
+  }
+
   if (loading.value.dev) return;
 
   loading.value.dev = true;
@@ -57,6 +65,11 @@ async function handleExport(event: Event) {
   event.preventDefault();
   event.stopPropagation();
 
+  if (deployMode.value) {
+    showDeployDemoToast();
+    return;
+  }
+
   if (loading.value.export) return;
 
   loading.value.export = true;
@@ -78,6 +91,11 @@ async function handleEdit(event: Event) {
   event.preventDefault();
   event.stopPropagation();
 
+  if (deployMode.value) {
+    showDeployDemoToast();
+    return;
+  }
+
   if (loading.value.edit) return;
 
   loading.value.edit = true;
@@ -93,9 +111,10 @@ async function handleEdit(event: Event) {
   }
 }
 
-function handleCardClick(event: Event) {
-  if (running.value && port.value) {
-    event.preventDefault();
+function handleCardClick() {
+  if (deployMode.value) {
+    window.open(`${deployBasePath.value}/presentations/${props.presentation.id}/`, '_blank');
+  } else if (running.value && port.value) {
     window.open(`http://localhost:${port.value}`, '_blank');
   }
 }
@@ -103,13 +122,14 @@ function handleCardClick(event: Event) {
 
 <template>
   <UCard
-    :as="running && port ? 'a' : 'div'"
-    :href="running && port ? `http://localhost:${port}` : undefined"
-    :target="running && port ? '_blank' : undefined"
-    :rel="running && port ? 'noopener noreferrer' : undefined"
-    :title="running && port ? `Open ${presentation.title}` : undefined"
+    as="div"
+    :title="deployMode || (running && port) ? `Open ${presentation.title}` : undefined"
     class="card terminal-card group transition-all duration-300"
-    :class="{ 'terminal-card--running': running, 'cursor-default': !running }"
+    :class="{
+      'terminal-card--running': !deployMode && running,
+      'cursor-pointer': deployMode || (running && port),
+      'cursor-default': !deployMode && !running,
+    }"
     :ui="{
       root: 'overflow-hidden',
       header: 'p-0 sm:px-0 bg-[var(--supaslidev-header-bg)]',
@@ -228,30 +248,10 @@ function handleCardClick(event: Event) {
           </template>
           edit
         </UButton>
-
-        <!-- TODO: Re-enable when deploy functionality is implemented
-        <UButton
-          color="neutral"
-          variant="soft"
-          size="sm"
-          class="flex-1 terminal-btn font-mono"
-          :loading="loading.deploy"
-          :disabled="loading.deploy"
-          @click="handleDeploy"
-        >
-          <template #leading>
-            <span class="terminal-prompt-symbol">$</span>
-          </template>
-          deploy
-          <template #trailing>
-            <UKbd size="xs" class="terminal-kbd">P</UKbd>
-          </template>
-        </UButton>
-        -->
       </div>
 
       <div
-        v-if="running && port"
+        v-if="!deployMode && running && port"
         class="terminal-status font-mono text-xs text-[var(--ui-text-muted)] flex items-center gap-2 pt-3 border-t border-[var(--ui-border-muted)]"
       >
         <span class="text-[var(--ui-success)] animate-pulse">●</span>

package/app/components/PresentationListItem.vue

@@ -5,6 +5,9 @@ const props = defineProps<{
   presentation: Presentation;
 }>();
 
+const { deployMode, showDeployDemoToast } = useDeployMode();
+const deployBasePath = computed(() => (import.meta.env.BASE_URL || '/').replace(/\/$/, ''));
+
 const {
   isRunning,
   getPort,
@@ -33,6 +36,11 @@ async function handleDev(event: Event) {
   event.preventDefault();
   event.stopPropagation();
 
+  if (deployMode.value) {
+    showDeployDemoToast();
+    return;
+  }
+
   if (loading.value.dev) return;
 
   loading.value.dev = true;
@@ -57,6 +65,11 @@ async function handleExport(event: Event) {
   event.preventDefault();
   event.stopPropagation();
 
+  if (deployMode.value) {
+    showDeployDemoToast();
+    return;
+  }
+
   if (loading.value.export) return;
 
   loading.value.export = true;
@@ -78,6 +91,11 @@ async function handleEdit(event: Event) {
   event.preventDefault();
   event.stopPropagation();
 
+  if (deployMode.value) {
+    showDeployDemoToast();
+    return;
+  }
+
   if (loading.value.edit) return;
 
   loading.value.edit = true;
@@ -93,9 +111,10 @@ async function handleEdit(event: Event) {
   }
 }
 
-function handleRowClick(event: Event) {
-  if (running.value && port.value) {
-    event.preventDefault();
+function handleRowClick() {
+  if (deployMode.value) {
+    window.open(`${deployBasePath.value}/presentations/${props.presentation.id}/`, '_blank');
+  } else if (running.value && port.value) {
     window.open(`http://localhost:${port.value}`, '_blank');
   }
 }
@@ -113,7 +132,10 @@ function handleOpen(event: Event) {
   <div
     :class="[
       'list-item-v font-mono flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200',
-      { 'list-item--running': running, 'cursor-pointer': running && port },
+      {
+        'list-item--running': !deployMode && running,
+        'cursor-pointer': deployMode || (running && port),
+      },
     ]"
     @click="handleRowClick"
   >

package/app/composables/useDeployMode.ts

@@ -0,0 +1,18 @@
+export function useDeployMode() {
+  const config = useRuntimeConfig();
+  const deployMode = computed(() => !!config.public.deployMode);
+
+  function showDeployDemoToast() {
+    const toast = useToast();
+    toast.add({
+      title: 'Dev Mode Only',
+      description:
+        'This functionality is only available in dev mode. It is shown here for demo purposes.',
+      color: 'warning',
+      icon: 'i-lucide-info',
+      duration: 0,
+    });
+  }
+
+  return { deployMode, showDeployDemoToast };
+}

package/app/pages/index.vue

@@ -11,8 +11,10 @@ const {
   openInEditor,
   waitForServerReady,
 } = useServers();
+const { deployMode, showDeployDemoToast } = useDeployMode();
 const toast = useToast();
 const colorMode = useColorMode();
+const deployBasePath = computed(() => (import.meta.env.BASE_URL || '/').replace(/\/$/, ''));
 
 function handleExportError(message: string) {
   toast.add({
@@ -85,13 +87,25 @@ function handleBeforeUnload() {
 const presentations = ref<Presentation[]>([]);
 
 onMounted(async () => {
-  startPolling();
-  window.addEventListener('beforeunload', handleBeforeUnload);
+  if (!deployMode.value) {
+    startPolling();
+    window.addEventListener('beforeunload', handleBeforeUnload);
+  }
   window.addEventListener('keydown', handleKeydown);
 
   try {
-    const response = await fetch('/api/presentations');
-    if (response.ok) {
+    let response: Response | undefined;
+
+    if (deployMode.value) {
+      response = await fetch(`${deployBasePath.value}/presentations.json`);
+      if (!response.ok) {
+        response = await fetch(`${deployBasePath.value}/api/presentations`);
+      }
+    } else {
+      response = await fetch('/api/presentations');
+    }
+
+    if (response?.ok) {
       presentations.value = await response.json();
     }
   } catch {
@@ -100,9 +114,11 @@ onMounted(async () => {
 });
 
 onUnmounted(() => {
-  stopPolling();
-  stopAllServers();
-  window.removeEventListener('beforeunload', handleBeforeUnload);
+  if (!deployMode.value) {
+    stopPolling();
+    stopAllServers();
+    window.removeEventListener('beforeunload', handleBeforeUnload);
+  }
   window.removeEventListener('keydown', handleKeydown);
 });
 const searchQuery = ref('');
@@ -123,6 +139,10 @@ watch(viewMode, (newMode) => {
 
 async function handlePresentCommand(presentation: Presentation) {
   isCommandPaletteOpen.value = false;
+  if (deployMode.value) {
+    window.open(`${deployBasePath.value}/presentations/${presentation.id}/`, '_blank');
+    return;
+  }
   const result = await startServer(presentation.id);
   if (result.success && result.port) {
     const isReady = await waitForServerReady(result.port);
@@ -134,6 +154,10 @@ async function handlePresentCommand(presentation: Presentation) {
 
 async function handleExportCommand(presentation: Presentation) {
   isCommandPaletteOpen.value = false;
+  if (deployMode.value) {
+    showDeployDemoToast();
+    return;
+  }
   const result = await exportPresentation(presentation.id);
   if (result.success && result.pdfPath) {
     window.open(result.pdfPath, '_blank');
@@ -144,6 +168,10 @@ async function handleExportCommand(presentation: Presentation) {
 
 async function handleEditCommand(presentation: Presentation) {
   isCommandPaletteOpen.value = false;
+  if (deployMode.value) {
+    showDeployDemoToast();
+    return;
+  }
   const result = await openInEditor(presentation.id);
   if (!result.success && result.error) {
     toast.add({
@@ -157,11 +185,19 @@ async function handleEditCommand(presentation: Presentation) {
 
 function handleCreateCommand() {
   isCommandPaletteOpen.value = false;
+  if (deployMode.value) {
+    showDeployDemoToast();
+    return;
+  }
   isDialogOpen.value = true;
 }
 
 function handleImportCommand() {
   isCommandPaletteOpen.value = false;
+  if (deployMode.value) {
+    showDeployDemoToast();
+    return;
+  }
   isImportDialogOpen.value = true;
 }
 
@@ -277,74 +313,74 @@ function handleExecuteCommand(command: string) {
   });
 }
 
-const commandPaletteGroups = computed<CommandPaletteGroup[]>(() => [
-  {
-    id: 'actions',
-    label: 'Actions',
-    items: [
-      {
-        label: 'New',
-        suffix: 'Create a new presentation',
-        icon: 'i-lucide-plus',
-        onSelect: handleCreateCommand,
-      },
-      {
-        label: 'Import',
-        suffix: 'Import existing Sli.dev presentation(s)',
-        icon: 'i-lucide-import',
-        onSelect: handleImportCommand,
-      },
-      {
-        label: 'Toggle theme',
-        suffix: colorMode.value === 'dark' ? 'Switch to light mode' : 'Switch to dark mode',
-        icon: colorMode.value === 'dark' ? 'i-lucide-sun' : 'i-lucide-moon',
-        onSelect: handleToggleThemeCommand,
-      },
-      {
-        label: 'Toggle view',
-        suffix: viewMode.value === 'grid' ? 'Switch to list layout' : 'Switch to grid layout',
-        icon: viewMode.value === 'grid' ? 'i-lucide-list' : 'i-lucide-layout-grid',
-        onSelect: handleToggleViewModeCommand,
-      },
-    ],
-  },
-  {
-    id: 'presentations',
-    label: 'Present',
-    items: presentations.value.map(
-      (p): CommandPaletteItem => ({
-        label: `Present > ${p.title}`,
-        suffix: 'Start dev server and open in browser',
-        icon: 'i-lucide-play',
-        onSelect: () => handlePresentCommand(p),
-      }),
-    ),
-  },
-  {
-    id: 'export',
-    label: 'Export',
-    items: presentations.value.map(
-      (p): CommandPaletteItem => ({
-        label: `Export > ${p.title}`,
-        suffix: 'Export to PDF',
-        icon: 'i-lucide-download',
-        onSelect: () => handleExportCommand(p),
-      }),
-    ),
-  },
-  {
-    id: 'edit',
-    label: 'Edit',
-    items: presentations.value.map(
-      (p): CommandPaletteItem => ({
-        label: `Edit > ${p.title}`,
-        suffix: 'Open in VS Code',
-        icon: 'i-lucide-pencil',
-        onSelect: () => handleEditCommand(p),
-      }),
-    ),
-  },
-]);
+const commandPaletteGroups = computed<CommandPaletteGroup[]>(() => {
+  const actionItems: CommandPaletteItem[] = [
+    {
+      label: 'New',
+      suffix: 'Create a new presentation',
+      icon: 'i-lucide-plus',
+      onSelect: handleCreateCommand,
+    },
+    {
+      label: 'Import',
+      suffix: 'Import existing Sli.dev presentation(s)',
+      icon: 'i-lucide-import',
+      onSelect: handleImportCommand,
+    },
+    {
+      label: 'Toggle theme',
+      suffix: colorMode.value === 'dark' ? 'Switch to light mode' : 'Switch to dark mode',
+      icon: colorMode.value === 'dark' ? 'i-lucide-sun' : 'i-lucide-moon',
+      onSelect: handleToggleThemeCommand,
+    },
+    {
+      label: 'Toggle view',
+      suffix: viewMode.value === 'grid' ? 'Switch to list layout' : 'Switch to grid layout',
+      icon: viewMode.value === 'grid' ? 'i-lucide-list' : 'i-lucide-layout-grid',
+      onSelect: handleToggleViewModeCommand,
+    },
+  ];
+
+  return [
+    { id: 'actions', label: 'Actions', items: actionItems },
+    {
+      id: 'presentations',
+      label: 'Present',
+      items: presentations.value.map(
+        (p: Presentation): CommandPaletteItem => ({
+          label: `Present > ${p.title}`,
+          suffix: deployMode.value ? 'Open presentation' : 'Start dev server and open in browser',
+          icon: 'i-lucide-play',
+          onSelect: () => handlePresentCommand(p),
+        }),
+      ),
+    },
+    {
+      id: 'export',
+      label: 'Export',
+      items: presentations.value.map(
+        (p: Presentation): CommandPaletteItem => ({
+          label: `Export > ${p.title}`,
+          suffix: 'Export to PDF',
+          icon: 'i-lucide-download',
+          onSelect: () => handleExportCommand(p),
+        }),
+      ),
+    },
+    {
+      id: 'edit',
+      label: 'Edit',
+      items: presentations.value.map(
+        (p: Presentation): CommandPaletteItem => ({
+          label: `Edit > ${p.title}`,
+          suffix: 'Open in VS Code',
+          icon: 'i-lucide-pencil',
+          onSelect: () => handleEditCommand(p),
+        }),
+      ),
+    },
+  ];
+});
 
 const filteredPresentations = computed(() => {
   if (!searchQuery.value.trim()) {
@@ -377,7 +413,7 @@ const commandOptions = computed(() => {
   presentations.value.forEach((p) => {
     options.push({
       label: `Present > ${p.title}`,
-      description: 'Start dev server and open in browser',
+      description: deployMode.value ? 'Open presentation' : 'Start dev server and open in browser',
       onSelect: () => handlePresentCommand(p),
     });
     options.push({
@@ -412,13 +448,13 @@ const commandOptions = computed(() => {
         }}
       </p>
       <div class="flex items-center gap-3">
-        <UButton variant="outline" class="font-mono" @click="isImportDialogOpen = true">
+        <UButton variant="outline" class="font-mono" @click="handleImportCommand">
           <template #leading>
             <span class="opacity-70">$</span>
           </template>
           import
         </UButton>
-        <UButton class="btn-new font-mono" @click="isDialogOpen = true">
+        <UButton class="btn-new font-mono" @click="handleCreateCommand">
           <template #leading>
             <span class="opacity-70">$</span>
           </template>
@@ -443,7 +479,7 @@ const commandOptions = computed(() => {
         title="No presentations yet"
         description="Create your first presentation to get started with supaslidev."
       >
-        <UButton class="font-mono" @click="isDialogOpen = true">
+        <UButton class="font-mono" @click="handleCreateCommand">
           <template #leading>
             <span class="opacity-70">$</span>
           </template>