feat: basic support for notes and make cover dynamic

demo/slides.md

@@ -94,7 +94,6 @@ layout: center
   </div>
 </div>
 
-
 ---
 layout: center
 class: text-center

docs/.vitepress/config.js

@@ -64,8 +64,8 @@ module.exports = {
           text: 'Themes',
           children: [
             {
-              text: 'Use a Theme',
-              link: '/guide/use-a-theme',
+              text: 'Use Theme',
+              link: '/guide/use-theme',
             },
             {
               text: 'Theme Gallery',

docs/guide/presenter-mode.md

@@ -0,0 +1,5 @@
+# Presenter Mode
+
+Click the <carbon-user-speaker class="inline-block"/> button in the navigation panel, or visit http://localhost:3030/presenter manually. Whenever you enter the presenter mode, other page instances will be in sync with the presenter automatically.
+
+> TODO:

docs/guide/syntax.md

@@ -2,7 +2,7 @@
 
 ## Basic
 
-All your slides can be written within a single markdown file (`./slides.md`). 
+Slides can be written within **a single markdown file** (by default `./slides.md`). 
 
 You can use [the Markdown features](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) as you normally would, with the additional inlined HTML and Vue Components support. Use `----` (four dashes or more) to separate your slides. 
 
@@ -81,3 +81,51 @@ Whenever you want to do some modification in the presentation, simply add `{mona
 console.log('HelloWorld')
 `​``
 ~~~
+
+### Notes
+
+You can take notes for each slide. They will show up on [Presenter Mode](/guide/presenter-mode) for you to reference in presentations.
+
+In Markdown, the last comment block in each slide will be treated as notes.
+
+~~~md
+---
+layout: cover
+---
+
+# Slidev
+
+This is the cover page.
+
+<!-- This is a note -->
+
+---
+
+# Page 2
+
+<!-- This is NOT a note -->
+
+The second page
+
+<!--
+This is another note
+-->
+~~~
+
+### Configurations
+
+All the configurations needed can also be defined in the Markdown file. For example:
+
+```md
+---
+theme: '@slidev/theme-seriph'
+layout: cover
+background: 'https://source.unsplash.com/1600x900/?nature,water'
+---
+
+# Slidev
+
+This is the cover page.
+```
+
+For more details about using a theme, refer to [this section](/guide/use-theme).

docs/guide/use-theme.md

@@ -0,0 +1 @@
+# Use Theme

packages/client/internals/Editor.vue

@@ -5,22 +5,24 @@ import { activeElement, showEditor } from '../state'
 import { useCodeMirror } from '../setup/codemirror'
 import { currentRoute } from '../logic/nav'
 
+const tab = ref<'content' | 'note'>('content')
 const offsetRight = ref(0)
 const content = ref('')
+const note = ref('')
 const dirty = ref(false)
 const frontmatter = ref<any>({})
 const contentInput = ref<HTMLTextAreaElement>()
+const noteInput = ref<HTMLTextAreaElement>()
+
 
 const url = computed(() => `/@slidev/slide/${currentRoute.value?.meta?.slide?.id}.json`)
-const { data } = useFetch(
-  url,
-  { refetch: true },
-).get().json()
+const { data } = useFetch(url, { refetch: true }).get().json()
 
 watch(
   data,
   () => {
     content.value = (data.value?.content || '').trim()
+    note.value = (data.value?.note || '').trim()
     frontmatter.value = data.value?.frontmatter || {}
     dirty.value = false
   },
@@ -38,6 +40,7 @@ async function save() {
       },
       body: JSON.stringify({
         raw: null,
+        note: note.value || undefined,
         content: content.value,
         frontmatter: frontmatter.value,
       }),
@@ -61,9 +64,7 @@ onMounted(() => {
   useCodeMirror(
     contentInput,
     computed({
-      get() {
-        return content.value
-      },
+      get() { return content.value },
       set(v) {
         content.value = v
         dirty.value = true
@@ -77,6 +78,24 @@ onMounted(() => {
       fencedCodeBlockDefaultMode: 'javascript',
     },
   )
+
+  useCodeMirror(
+    noteInput,
+    computed({
+      get() { return note.value },
+      set(v) {
+        note.value = v
+        dirty.value = true
+      },
+    }),
+    {
+      mode: 'markdown',
+      lineWrapping: true,
+      // @ts-expect-error
+      highlightFormatting: true,
+      fencedCodeBlockDefaultMode: 'javascript',
+    },
+  )
 })
 
 const width = ref(window.innerWidth * 0.4)
@@ -123,12 +142,20 @@ const editorLink = computed(() => {
     @pointerdown="onHandlerDown"
   ></div>
   <div
-    class="shadow bg-main p-4 grid grid-rows-[max-content,auto] h-full overflow-hidden border-l border-gray-400 border-opacity-20"
+    class="shadow bg-main p-4 grid grid-rows-[max-content,1fr] h-full overflow-hidden border-l border-gray-400 border-opacity-20"
     :style="{width: `${width}px`}"
   >
     <div class="flex pb-2 text-xl -mt-1">
+      <div class="mr-4 rounded flex">
+        <button class="icon-btn" @click="tab='content'" :class="tab === 'content' ? 'text-primary' : ''">
+          <carbon:account />
+        </button>
+        <button class="icon-btn" @click="tab='note'" :class="tab === 'note' ? 'text-primary' : ''">
+          <carbon:align-box-bottom-right />
+        </button>
+      </div>
       <span class="text-2xl pt-1">
-        Slide Editor
+        {{ tab === 'content' ? 'Slide' : 'Note' }}
       </span>
       <div class="flex-auto"></div>
       <button class="icon-btn" :class="{ disabled: !dirty }" @click="save">
@@ -143,12 +170,19 @@ const editorLink = computed(() => {
         <carbon:close />
       </button>
     </div>
-    <textarea ref="contentInput" />
+    <div class="h-full overflow-auto">
+      <div class="h-full overflow-auto" v-show="tab === 'content'">
+        <textarea ref="contentInput" />
+      </div>
+      <div class="h-full overflow-auto" v-show="tab === 'note'">
+        <textarea ref="noteInput" />
+      </div>
+    </div>
   </div>
 </template>
 
 <style lang="postcss">
 .CodeMirror {
-  @apply px-3 py-2 h-auto bg-transparent font-mono text-sm;
+  @apply px-3 py-2 h-full overflow-auto bg-transparent font-mono text-sm;
 }
 </style>

packages/client/internals/NavControls.vue

@@ -77,7 +77,7 @@ const dev = import.meta.env.DEV
     </button>
 
     <button
-      v-if="dev"
+      v-if="dev && !isPresenter"
       class="icon-btn"
       @click="showEditor = !showEditor"
     >

packages/client/internals/Presenter.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head'
+import { useFetch } from '@vueuse/core'
 import { ref, computed, watchEffect } from 'vue'
 import { total, currentPage, currentRoute, nextRoute, tab, tabElements, route } from '../logic/nav'
 import { showOverview } from '../state'
@@ -32,12 +33,15 @@ const nextSlide = computed(() => {
     }
   }
 })
+
+const url = computed(() => `/@slidev/slide/${currentRoute.value?.meta?.slide?.id}.json`)
+const { data } = useFetch(url, { refetch: true }).get().json()
 </script>
 
 <template>
   <div class="grid-container">
     <div class="grid-section top flex">
-      <img src="../assets/logo-title-horizontal.png" class="h-11 ml-2 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 }}
@@ -64,7 +68,14 @@ const nextSlide = computed(() => {
         :tab-disabled="false"
       />
     </div>
-    <div class="grid-section note"></div>
+    <div class="grid-section note">
+      <textarea
+        class="w-full h-full p-4 resize-none overflow-auto outline-none"
+        readonly
+        :value="data?.note"
+        placeholder="No notes for this slide"
+      />
+    </div>
     <div class="grid-section bottom"></div>
   </div>
   <SlidesOverview v-model="showOverview" />

packages/create-app/template/slides.md

@@ -1,6 +1,8 @@
 ---
+# try also '@slidev/theme-default' to start simple
 theme: '@slidev/theme-seriph'
-background: 'https://images.unsplash.com/photo-1619191163166-07a53b7a8f30?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'
+# random image from a curated Unsplash collection by Anthony
+background: 'https://source.unsplash.com/collection/94734566/1920x1080'
 ---
 
 # Welcome to Slidev

packages/slidev/node/parser.ts

@@ -23,6 +23,7 @@ export interface ParseOptions {
 export interface SlidevConfig {
   title: string
   theme: string
+  remoteAssets: boolean
 }
 
 export interface SlidevMarkdown {
@@ -72,10 +73,14 @@ function stringifySlide(data: SlideInfo, idx = 1) {
 }
 
 function prettifySlide(data: SlideInfo) {
-  data.content = `\n${data.content.trim()}\n\n`
+  data.content = `\n${data.content.trim()}\n`
   data.raw = Object.keys(data.frontmatter || {}).length
     ? `---\n${YAML.safeDump(data.frontmatter).trim()}\n---\n${data.content}`
     : data.content
+  if (data.note)
+    data.raw += `\n<!--\n${data.note.trim()}\n-->\n`
+  else
+    data.raw += '\n'
   return data
 }
 
@@ -95,11 +100,19 @@ export function parse(
   let dividers = 0
 
   function parseContent(raw: string) {
-    const { data: frontmatter = {}, content } = matter(raw)
+    const result = matter(raw)
+    let note: string | undefined
+    const content = result.content
+      .trim()
+      .replace(/<!--([\s\S]*)-->$/g, (_, v = '') => {
+        note = v.trim()
+        return ''
+      })
     return {
       raw,
-      frontmatter,
       content,
+      frontmatter: result.data || {},
+      note,
     }
   }
 
@@ -139,6 +152,7 @@ export function parse(
 
   config.theme ||= headmatter.theme || '@slidev/theme-default'
   config.title ||= headmatter.title || (markdown.match(/^# (.*)$/m)?.[1] || '').trim()
+  config.remoteAssets ??= headmatter.remoteAssets ?? true
 
   return {
     raw: markdown,

packages/slidev/node/plugins/preset.ts

@@ -10,6 +10,7 @@ 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 { notNullish } from '@slidev/client/node_modules/@antfu/utils/dist'
 import { createConfigPlugin } from './config'
 import { createSlidesLoader } from './loaders'
 import { createMonacoLoader, transformMarkdownMonaco } from './monaco'
@@ -33,6 +34,7 @@ export function ViteSlidevPlugin(pluginOptions: SlidevPluginOptions): Plugin[] {
   const {
     themeRoot,
     clientRoot,
+    data: { config },
   } = options
 
   return [
@@ -117,17 +119,19 @@ export function ViteSlidevPlugin(pluginOptions: SlidevPluginOptions): Plugin[] {
       },
     ),
 
-    RemoteAssets({
-      rules: [
-        ...DefaultRules,
-        {
-          match: /\b(https?:\/\/\w+\.unsplash\.com.*?)(?=[`'")\]])/ig,
-          ext: '.png',
-        },
-      ],
-      resolveMode: '@fs',
-      ...remoteAssetsOptions,
-    }),
+    config.remoteAssets
+      ? RemoteAssets({
+        rules: [
+          ...DefaultRules,
+          {
+            match: /\b(https?:\/\/image.unsplash\.com.*?)(?=[`'")\]])/ig,
+            ext: '.png',
+          },
+        ],
+        resolveMode: '@fs',
+        ...remoteAssetsOptions,
+      })
+      : null,
 
     VitePluginVueFactory(),
     VitePluginServerRef({
@@ -144,5 +148,5 @@ export function ViteSlidevPlugin(pluginOptions: SlidevPluginOptions): Plugin[] {
     createSlidesLoader(options, pluginOptions),
     createSetupPlugin(options),
     createMonacoLoader(),
-  ].flat()
+  ].flat().filter(notNullish)
 }

packages/slidev/package.json

@@ -64,7 +64,7 @@
     "vite-plugin-components": "^0.8.4",
     "vite-plugin-icons": "^0.5.0",
     "vite-plugin-md": "^0.6.3",
-    "vite-plugin-remote-assets": "^0.1.3",
+    "vite-plugin-remote-assets": "^0.1.4",
     "vite-plugin-windicss": "^0.15.7",
     "vue": "^3.0.11",
     "windicss": "^2.5.14",
@@ -88,7 +88,7 @@
     "playwright": "^1.10.0",
     "pnpm": "^6.2.1",
     "rimraf": "^3.0.2",
-    "tsup": "^4.9.1",
+    "tsup": "^4.9.2",
     "typescript": "^4.2.4"
   }
 }