feat: update create-app

Author: antfu

packages/client/windi.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
       resolve(__dirname, '**/*.{vue,ts}'),
       'src/**/*.{vue,ts}',
       'components/**/*.{vue,ts}',
-      'slides.md',
+      '*.md',
     ],
     exclude: [
       '.git/**',

packages/create-app/template/package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "@slidev/cli": "^0.0.0-alpha.14",
-    "@slidev/theme-default": "^0.0.0-alpha.14"
+    "@slidev/theme-default": "^0.0.0-alpha.14",
+    "@slidev/theme-seriph": "^0.0.0-alpha.14"
   }
 }

packages/create-app/template/public/arrow.svg

@@ -1,19 +1,50 @@
 ---
-layout: cover
+theme: '@slidev/theme-seriph'
 ---
 
-# Slidev
+# Welcome to Slidev
 
-Making slides with Markdown in Vite!
+Presentation slides for developers
 
--------
+<div @click="next" class="px-2 p-1 rounded inline cursor-pointer hover:bg-white hover:bg-opacity-10">
+  Press Space for next page <carbon:arrow-right class="inline"/>
+</div>
 
-# Page 2
+----
 
-```ts
-import { ref } from 'vue'
+# What is Slidev?
 
-const counter = ref(0)
-```
+Slidev is a slides maker and presenter designed for developers, consist of the following features
 
-See [GitHub Repo](https://github.com/antfu-sponsors/slidev) for more details.
+- 📝 **Text-based** - focus on the content with Markdown, and then style them later
+- 🎨 **Themable** - theme can be shared and used with npm packages
+- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
+- 🤹 **Interactive** - embedding Vue components to enhance your expressions
+- 🎥 **Recording** - built-in recording and camera view
+- 📤 **Portable** - export into PDF, PNGs, or even a hostable SPA
+- 🛠 **Hackable** - anything possible on a webpage
+
+<br>
+<br>
+
+Read more with [Why Slidev](https://slidev.antfu.me/guide/why)
+
+----
+
+# Navigation
+
+Hover on the right top corner to see the navigation's controls panel
+
+<img
+  class="absolute top-10 right-20 w-30 opacity-50"
+  src="/arrow.svg"
+/>
+
+---
+layout: center
+class: "text-center"
+---
+
+# Learn More
+
+[Documentations](https://slidev.antfu.me) / [GitHub Repo](https://github.com/slidevjs/slidev)

packages/create-app/template/slides.md

@@ -181,7 +181,12 @@ export function createSlidesLoader({ data, entry, clientRoot, themeRoot, userRoo
           if (!layouts[layoutName])
             throw new Error(`Unknown layout "${layoutName}"`)
 
-          code = code.replace(/(<script setup.*>)/g, `$1\nimport InjectedLayout from "/@fs${layouts[layoutName]}"`)
+          const imports = [
+            `import InjectedLayout from "/@fs${layouts[layoutName]}"`,
+            `import { next, nextSlide, prev, prevSlide } from "/@fs${clientRoot}/logic/nav"`,
+          ]
+
+          code = code.replace(/(<script setup.*>)/g, `$1${imports.join('\n')}\n`)
           code = code.replace(/<template>([\s\S]*?)<\/template>/mg, '<template><InjectedLayout v-bind="frontmatter">$1</InjectedLayout></template>')
           return code
         }

packages/slidev/node/plugins/loaders.ts

@@ -30,7 +30,7 @@
   }
 
   h1 + p {
-    @apply -mt-2 opacity-50 mb-4;
+    @apply -mt-3 opacity-50 mb-4;
   }
 
   p + h2, ul + h2, table + h2 {
@@ -93,6 +93,6 @@
   }
 
   h1 ~ p {
-    @apply opacity-40 mb-10 text-2xl;
+    @apply opacity-70 mb-10 text-2xl;
   }
 }

packages/theme-seriph/styles/layout.css

@@ -11,6 +11,7 @@ const version = require('../package.json').version
 
 const pkg = JSON.parse(readFileSync('packages/create-app/template/package.json', 'utf-8'))
 pkg.dependencies['@slidev/theme-default'] = `^${version}`
+pkg.dependencies['@slidev/theme-seriph'] = `^${version}`
 pkg.dependencies['@slidev/cli'] = `^${version}`
 writeFileSync('packages/create-app/template/package.json', `${JSON.stringify(pkg, null, 2)}\n`, 'utf-8')