feat: button for presenter mode

packages/client/internals/NavControls.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { onClickOutside, useFullscreen } from '@vueuse/core'
-import { defineProps, ref } from 'vue'
+import { computed, defineProps, ref } from 'vue'
 import { isDark, toggleDark } from '../logic/dark'
 import { recorder } from '../logic/recording'
-import { hasNext, hasPrev, prev, next } from '../logic/nav'
+import { hasNext, hasPrev, prev, next, isPresenter, currentPage } from '../logic/nav'
 import { showOverview, showEditor, currentCamera } from '../state'
 import DevicesList from './DevicesList.vue'
 
@@ -30,6 +30,9 @@ onClickOutside(devicesList, () => {
   showDevicesList.value = false
 })
 
+const presenterLink = computed(() => `${location.origin}/presenter/${currentPage.value}`)
+const nonPresenterLink = computed(() => `${location.origin}/${currentPage.value}`)
+
 const dev = import.meta.env.DEV
 </script>
 
@@ -47,15 +50,28 @@ const dev = import.meta.env.DEV
       <carbon:arrow-left />
     </button>
 
-    <button class="icon-btn" :class="{ disabled: !hasNext }" @click="next">
+    <button
+      class="icon-btn"
+      :class="{ disabled: !hasNext }"
+      title="Next"
+      @click="next"
+    >
       <carbon:arrow-right />
     </button>
 
-    <button class="icon-btn" @click="showOverview = !showOverview">
+    <button
+      class="icon-btn"
+      title="Slides overview"
+      @click="showOverview = !showOverview"
+    >
       <carbon:apps />
     </button>
 
-    <button class="icon-btn" @click="toggleDark">
+    <button
+      class="icon-btn"
+      title="Toggle dark mode"
+      @click="toggleDark"
+    >
       <carbon-moon v-if="isDark" />
       <carbon-sun v-else />
     </button>
@@ -68,10 +84,29 @@ const dev = import.meta.env.DEV
       <carbon:edit />
     </button>
 
+    <a
+      v-if="dev && !isPresenter"
+      :href="presenterLink"
+      class="icon-btn"
+      title="Presenter Mode"
+    >
+      <carbon:user-speaker />
+    </a>
+
+    <a
+      v-if="isPresenter"
+      :href="nonPresenterLink"
+      class="icon-btn"
+      title="Play Mode"
+    >
+      <carbon:presentation-file />
+    </a>
+
     <button
       v-if="currentCamera !== 'none'"
       class="icon-btn"
       :class="{'text-green-500': Boolean(showAvatar && streamCamera)}"
+      title="Show camera view"
       @click="toggleAvatar"
     >
       <carbon:user-avatar />
@@ -81,7 +116,12 @@ const dev = import.meta.env.DEV
       ref="devicesList"
       class="flex relative"
     >
-      <button class="icon-btn" :class="{'text-red-500': recording}" @click="toggleRecording">
+      <button
+        class="icon-btn"
+        :class="{'text-red-500': recording}"
+        title="Recording"
+        @click="toggleRecording"
+      >
         <carbon:stop-outline v-if="recording" />
         <carbon:video v-else />
       </button>

packages/client/internals/Presenter.vue

@@ -37,10 +37,11 @@ const nextSlide = computed(() => {
 <template>
   <div class="grid-container">
     <div class="grid-section top flex">
-      <div class="px-6 my-auto">
+      <img src="../assets/logo-title-horizontal.png" class="h-11 ml-2 my-auto"/>
+      <div class="flex-auto" />
+      <div class="px-4 my-auto">
         {{ currentPage + 1 }} / {{ total }}
       </div>
-      <div class="flex-auto" />
       <NavControls mode="persist" />
     </div>
     <div class="grid-section main flex flex-col p-4 bg-gray-400 bg-opacity-10">

packages/create-app/template/slides.md

@@ -10,6 +10,11 @@ Presentation slides for developers
   Press Space for next page <carbon:arrow-right class="inline"/>
 </div>
 
+<a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub"
+  class="abs-br m-6 text-xl icon-btn opacity-50 !hover:text-white !border-none">
+  <carbon-logo-github />
+</a>
+
 ----
 
 # What is Slidev?

packages/slidev/node/plugins/preset.ts

@@ -8,6 +8,7 @@ import Markdown from 'vite-plugin-md'
 import WindiCSS, { defaultConfigureFiles } from 'vite-plugin-windicss'
 import Prism from 'markdown-it-prism'
 import RemoteAssets, { DefaultRules } from 'vite-plugin-remote-assets'
+// @ts-expect-error
 import mila from 'markdown-it-link-attributes'
 import { createConfigPlugin } from './config'
 import { createSlidesLoader } from './loaders'
@@ -50,13 +51,13 @@ export async function ViteSlidevPlugin(pluginOptions: SlidevPluginOptions = {}):
         linkify: true,
       },
       markdownItSetup(md) {
-        md.use(Prism)
-        md.use(mila({
+        md.use(mila, {
           attrs: {
             target: '_blank',
             rel: 'noopener',
           },
-        }))
+        })
+        md.use(Prism)
       },
       transforms: {
         before: transformMarkdownMonaco,

packages/theme-seriph/package.json

@@ -8,7 +8,7 @@
   ],
   "license": "MIT",
   "slidev": {
-    "color": "light"
+    "color": "duo"
   },
   "repository": {
     "type": "git",

packages/theme-seriph/styles/code.css

@@ -6,11 +6,13 @@
   --prism-font-family: theme('fontFamily.mono');
   --prism-font-size: 12px;
   --prism-block-radius: 0;
-  --prism-inline-radius: 0;
   --prism-block-padding-x: 0;
   --prism-block-padding-y: 0;
+}
+
+html:not(.dark) {
   --prism-foreground: #393a34;
-  --prism-background: #f8f8f8;
+  --prism-background: #fafafa;
   --prism-comment: #a0ada0;
   --prism-string: #b56959;
   --prism-literal: #2f8a89;
@@ -30,6 +32,33 @@
   --prism-json-property: #698c96;
 }
 
+html.dark {
+  --prism-foreground: #d4cfbf;
+  --prism-background: #1b1b1b;
+  --prism-comment: #758575;
+  --prism-string: #d48372;
+  --prism-literal: #429988;
+  --prism-keyword: #4d9375;
+  --prism-boolean: #1c6b48;
+  --prism-number: #6394bf;
+  --prism-variable: #c2b36e;
+  --prism-function: #a1b567;
+  --prism-deleted: #a14f55;
+  --prism-class: #54b1bf;
+  --prism-builtin: #e0a569;
+  --prism-property: #dd8e6e;
+  --prism-namespace: #db889a;
+  --prism-punctuation: #858585;
+  --prism-decorator: #bd8f8f;
+  --prism-regex: #ab5e3f;
+  --prism-json-property: #6b8b9e;
+  --prism-line-number: #888888;
+  --prism-line-number-gutter: #eeeeee;
+  --prism-line-highlight-background: #444444;
+  --prism-selection-background: #444444;
+}
+
+
 pre[class*='language-'] {
   @apply p-2;
 }

packages/theme-seriph/styles/layout.css

@@ -78,7 +78,8 @@
   }
 
   kbd {
-    @apply border border-gray-400 rounded border-b-2 border-opacity-50 py-0.5 px-1 text-sm;
+    @apply border border-gray-400 border-b-2 border-opacity-20 rounded;
+    @apply bg-gray-400 bg-opacity-5 py-0.5 px-1 text-sm font-mono;
   }
 }
 

packages/theme-seriph/windi.config.ts

@@ -14,7 +14,7 @@ export default mergeWindicssConfig(
       ],
     },
     shortcuts: {
-      'bg-main': 'bg-white text-[#555]',
+      'bg-main': 'bg-white text-[#555] dark:(bg-[#121212] text-[#ddd])',
     },
     theme: {
       extend: {