feat: configure aspect ratio, close #119

packages/client/constants.ts

@@ -1,3 +1,5 @@
-export const slideAspect = 16 / 9
-export const slideWidth = 980
-export const slideHeight = slideWidth / slideAspect
+import { configs } from './env'
+
+export const slideAspect = configs.aspectRatio ?? (16 / 9)
+export const slideWidth = configs.canvasWidth ?? 980
+export const slideHeight = Math.round(slideWidth / slideAspect)

packages/client/logic/recording.ts

@@ -117,7 +117,7 @@ export function useRecording() {
     // @ts-expect-error
     streamSlides.value = await navigator.mediaDevices.getDisplayMedia({
       video: {
-        aspectRatio: 1.6,
+        // aspectRatio: 1.6,
         frameRate: 15,
         width: 3840,
         height: 2160,

packages/parser/src/core.ts

@@ -1,6 +1,7 @@
 import YAML from 'js-yaml'
-import { isObject, isTruthy, objectPick, range, uniq } from '@antfu/utils'
+import { isObject, isTruthy, objectPick } from '@antfu/utils'
 import { SlideInfo, SlidevConfig, SlidevMarkdown } from '@slidev/types'
+import { parseAspectRatio } from './utils'
 
 export function stringify(data: SlidevMarkdown) {
   return `${
@@ -145,6 +146,8 @@ export function parse(
     highlighter: 'prism',
     colorSchema: 'auto',
     routerMode: 'history',
+    aspectRatio: 16 / 9,
+    canvasWidth: 980,
   }
   const config: SlidevConfig = Object.assign(
     defaultConfig,
@@ -153,6 +156,7 @@ export function parse(
   )
   if (config.colorSchema !== 'dark' && config.colorSchema !== 'light')
     config.colorSchema = 'auto'
+  config.aspectRatio = parseAspectRatio(config.aspectRatio)
 
   return {
     raw: markdown,
@@ -164,29 +168,6 @@ export function parse(
   }
 }
 
-/**
- * 1,3-5,8 => [1, 3, 4, 5, 8]
- */
-export function parseRangeString(total: number, rangeStr?: string) {
-  if (!rangeStr || rangeStr === 'all' || rangeStr === '*')
-    return range(1, total + 1)
-
-  const pages: number[] = []
-  for (const part of rangeStr.split(/[,;]/g)) {
-    if (!part.includes('-')) {
-      pages.push(+part)
-    }
-    else {
-      const [start, end] = part.split('-', 2)
-      pages.push(
-        ...range(+start, !end ? (total + 1) : (+end + 1)),
-      )
-    }
-  }
-
-  return uniq(pages).filter(i => i <= total).sort((a, b) => a - b)
-}
-
 // types auto discovery for TypeScript monaco
 export function scanMonacoModules(md: string) {
   const typeModules = new Set<string>()
@@ -205,3 +186,5 @@ export function scanMonacoModules(md: string) {
 
   return Array.from(typeModules)
 }
+
+export * from './utils'

packages/parser/src/utils.ts

@@ -0,0 +1,42 @@
+import { isNumber, range, uniq } from '@antfu/utils'
+
+/**
+ * 1,3-5,8 => [1, 3, 4, 5, 8]
+ */
+export function parseRangeString(total: number, rangeStr?: string) {
+  if (!rangeStr || rangeStr === 'all' || rangeStr === '*')
+    return range(1, total + 1)
+
+  const pages: number[] = []
+  for (const part of rangeStr.split(/[,;]/g)) {
+    if (!part.includes('-')) {
+      pages.push(+part)
+    }
+    else {
+      const [start, end] = part.split('-', 2)
+      pages.push(
+        ...range(+start, !end ? (total + 1) : (+end + 1)),
+      )
+    }
+  }
+
+  return uniq(pages).filter(i => i <= total).sort((a, b) => a - b)
+}
+
+/**
+ * Accepts `16/9` `1:1` `3x4`
+ */
+export function parseAspectRatio(str: string | number) {
+  if (isNumber(str))
+    return str
+  if (!isNaN(+str))
+    return +str
+  const [wStr = '', hStr = ''] = str.split(/[:\/x\|]/)
+  const w = parseFloat(wStr.trim())
+  const h = parseFloat(hStr.trim())
+
+  if (isNaN(w) || isNaN(h) || h === 0)
+    throw new Error(`Invalid aspect ratio "${str}"`)
+
+  return w / h
+}

packages/types/src/types.ts

@@ -64,6 +64,20 @@ export interface SlidevConfig {
    * @default 'hash'
    */
   routerMode: 'hash' | 'history'
+  /**
+   * Aspect ratio for slides
+   * should be like `16/9` or `1:1`
+   *
+   * @default '16/9'
+   */
+  aspectRatio: number
+  /**
+   * The actual width fro slides canvas.
+   * unit in px.
+   *
+   * @default '980'
+   */
+  canvasWidth: number
 }
 
 export interface SlidevFeatureFlags {

test/__snapshots__/parser.test.ts.snap

@@ -2,6 +2,8 @@
 
 exports[`md parser frontmatter.md: config 1`] = `
 Object {
+  "aspectRatio": 1.7777777777777777,
+  "canvasWidth": 980,
   "colorSchema": "auto",
   "download": false,
   "highlighter": "prism",
@@ -133,6 +135,8 @@ this should be treated as code block
 
 exports[`md parser minimal.md: config 1`] = `
 Object {
+  "aspectRatio": 1.7777777777777777,
+  "canvasWidth": 980,
   "colorSchema": "auto",
   "download": false,
   "highlighter": "prism",

test/utils.test.ts

@@ -1,4 +1,4 @@
-import { parseRangeString } from '../packages/parser/src'
+import { parseAspectRatio, parseRangeString } from '../packages/parser/src'
 
 describe('utils', () => {
   it('page-range', () => {
@@ -10,4 +10,16 @@ describe('utils', () => {
     expect(parseRangeString(10, '1;2-3;5')).toEqual([1, 2, 3, 5])
     expect(parseRangeString(10, '6-')).toEqual([6, 7, 8, 9, 10])
   })
+
+  it('aspect-ratio', () => {
+    expect(parseAspectRatio(1)).toEqual(1)
+    expect(parseAspectRatio('16/9')).toEqual(16 / 9)
+    expect(parseAspectRatio('16 / 9 ')).toEqual(16 / 9)
+    expect(parseAspectRatio('3:4')).toEqual(3 / 4)
+    expect(parseAspectRatio('1x1')).toEqual(1)
+    expect(parseAspectRatio('1')).toEqual(1)
+
+    expect(() => parseAspectRatio('hello')).toThrow()
+    expect(() => parseAspectRatio('1/0')).toThrow()
+  })
 })