feat: support weights for fonts, close #232

slidevjs · Jun 8, 2021 · 34bd901 · 34bd901
1 parent 9596d9f
commit 34bd901
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 8 deletions.
diff --git a/packages/parser/src/core.ts b/packages/parser/src/core.ts
@@ -155,11 +155,13 @@ export function parse(
 function resolveFonts(fonts: FontOptions = {}): ResolvedFontOptions {
   const {
     fallbacks = true,
+    italic = false,
     provider = 'google',
   } = fonts
   let sans = toArray(fonts.sans).flatMap(i => i.split(/,\s*/g)).map(i => i.trim())
   let serif = toArray(fonts.serif).flatMap(i => i.split(/,\s*/g)).map(i => i.trim())
   let mono = toArray(fonts.mono).flatMap(i => i.split(/,\s*/g)).map(i => i.trim())
+  const weights = toArray(fonts.weights || '200,400,600').flatMap(i => i.toString().split(/,\s*/g)).map(i => i.trim())
   const custom = toArray(fonts.custom).flatMap(i => i.split(/,\s*/g)).map(i => i.trim())
 
   const local = toArray(fonts.local).flatMap(i => i.split(/,\s*/g)).map(i => i.trim())
@@ -224,6 +226,8 @@ function resolveFonts(fonts: FontOptions = {}): ResolvedFontOptions {
     webfonts,
     provider,
     local,
+    italic,
+    weights,
   }
 }
 
@@ -258,6 +262,7 @@ export function resolveConfig(headmatter: any, themeMeta: SlidevThemeMeta = {})
       ...headmatter?.fonts,
     }),
   }
+
   if (config.colorSchema !== 'dark' && config.colorSchema !== 'light')
     config.colorSchema = 'auto'
   if (themeColorSchema && config.colorSchema === 'auto')

diff --git a/packages/slidev/node/common.ts b/packages/slidev/node/common.ts
@@ -2,7 +2,7 @@ import { promises as fs, existsSync } from 'fs'
 import { join } from 'path'
 import { uniq } from '@antfu/utils'
 import { ResolvedSlidevOptions } from './options'
-import { toAtFS } from './utils'
+import { generateGoogleFontsUrl, toAtFS } from './utils'
 
 export async function getIndexHtml({ clientRoot, themeRoots, data, userRoot }: ResolvedSlidevOptions): Promise<string> {
   let main = await fs.readFile(join(clientRoot, 'index.html'), 'utf-8')
@@ -28,12 +28,8 @@ export async function getIndexHtml({ clientRoot, themeRoots, data, userRoot }: R
   if (data.features.tweet)
     body += '\n<script async src="https://platform.twitter.com/widgets.js"></script>'
 
-  if (data.config.fonts.webfonts.length && data.config.fonts.provider !== 'none') {
-    const fonts = data.config.fonts.webfonts
-      .map(i => `family=${i.replace(/^(['"])(.*)\1$/, '$1').replace(/\s+/g, '+')}`)
-      .join('&')
-    head += `\n<link href="https://fonts.googleapis.com/css2?${fonts}&display=swap" rel="stylesheet">`
-  }
+  if (data.config.fonts.webfonts.length && data.config.fonts.provider !== 'none')
+    head += `\n<link href="${generateGoogleFontsUrl(data.config.fonts)}" rel="stylesheet">`
 
   main = main
     .replace('__ENTRY__', toAtFS(join(clientRoot, 'main.ts')))

diff --git a/packages/slidev/node/utils.ts b/packages/slidev/node/utils.ts
@@ -3,6 +3,7 @@ import isInstalledGlobally from 'is-installed-globally'
 import { sync as resolve } from 'resolve'
 import resolveGlobal from 'resolve-global'
 import type Token from 'markdown-it/lib/token'
+import { ResolvedFontOptions } from '@slidev/types'
 
 export function toAtFS(path: string) {
   return `/@fs${ensurePrefix('/', slash(path))}`
@@ -41,3 +42,15 @@ export function stringifyMarkdownTokens(tokens: Token[]) {
     .filter(Boolean)
     .join(' ')
 }
+
+export function generateGoogleFontsUrl(options: ResolvedFontOptions) {
+  const weights = options.weights
+    .flatMap(i => options.italic ? [`0,${i}`, `1,${i}`] : [`${i}`])
+    .sort()
+    .join(';')
+  const fonts = options.webfonts
+    .map(i => `family=${i.replace(/^(['"])(.*)\1$/, '$1').replace(/\s+/g, '+')}:${options.italic ? 'ital,' : ''}wght@${weights}`)
+    .join('&')
+
+  return `https://fonts.googleapis.com/css2?${fonts}&display=swap`
+}
diff --git a/packages/types/src/types.ts b/packages/types/src/types.ts
@@ -52,6 +52,18 @@ export type FontOptions = {
    * Load webfonts for custom CSS (does not apply anywhere by default)
    */
   custom?: string | string[]
+  /**
+   * Weights for fonts
+   *
+   * @default [200, 400, 600]
+   */
+  weights?: string | (string | number)[]
+  /**
+   * Import italic fonts
+   *
+   * @default false
+   */
+  italic?: boolean
 
   /**
    * @default 'google'
@@ -77,6 +89,8 @@ export type ResolvedFontOptions = {
   sans: string[]
   mono: string[]
   serif: string[]
+  weights: string[]
+  italic: boolean
   provider: 'none' | 'google'
   webfonts: string[]
   local: string[]

diff --git a/test/__snapshots__/parser.test.ts.snap b/test/__snapshots__/parser.test.ts.snap
@@ -7,6 +7,7 @@ Object {
   "colorSchema": "auto",
   "download": false,
   "fonts": Object {
+    "italic": false,
     "local": Array [],
     "mono": Array [
       "\\"Fira Code\\"",
@@ -53,6 +54,11 @@ Object {
       "Mate SC",
       "Fira Code",
     ],
+    "weights": Array [
+      "200",
+      "400",
+      "600",
+    ],
   },
   "highlighter": "prism",
   "info": false,
@@ -211,6 +217,7 @@ Object {
   "colorSchema": "auto",
   "download": false,
   "fonts": Object {
+    "italic": false,
     "local": Array [],
     "mono": Array [
       "ui-monospace",
@@ -248,6 +255,11 @@ Object {
       "serif",
     ],
     "webfonts": Array [],
+    "weights": Array [
+      "200",
+      "400",
+      "600",
+    ],
   },
   "highlighter": "prism",
   "info": false,
@@ -358,6 +370,7 @@ Object {
   "colorSchema": "auto",
   "download": false,
   "fonts": Object {
+    "italic": false,
     "local": Array [],
     "mono": Array [
       "ui-monospace",
@@ -395,6 +408,11 @@ Object {
       "serif",
     ],
     "webfonts": Array [],
+    "weights": Array [
+      "200",
+      "400",
+      "600",
+    ],
   },
   "highlighter": "prism",
   "info": false,

diff --git a/test/__snapshots__/utils.test.ts.snap b/test/__snapshots__/utils.test.ts.snap
@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`utils google-fonts 1`] = `"https://fonts.googleapis.com/css2?family=Fira+Code:wght@200;400;600&family=PT+Serif:wght@200;400;600&display=swap"`;
+
+exports[`utils google-fonts 2`] = `"https://fonts.googleapis.com/css2?family=Fira+Code:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&family=PT+Serif:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap"`;
diff --git a/test/utils.test.ts b/test/utils.test.ts
@@ -1,6 +1,7 @@
 import MarkdownIt from 'markdown-it'
+import { ResolvedFontOptions } from '../packages/parser/node_modules/@slidev/types'
 import { parseAspectRatio, parseRangeString } from '../packages/parser/src'
-import { stringifyMarkdownTokens } from '../packages/slidev/node/utils'
+import { generateGoogleFontsUrl, stringifyMarkdownTokens } from '../packages/slidev/node/utils'
 
 describe('utils', () => {
   it('page-range', () => {
@@ -35,4 +36,23 @@ describe('utils', () => {
     expect(stringify('What is Readonly\\<T\\> in TypeScript')).toBe('What is Readonly<T> in TypeScript')
     expect(stringify('Welcome to<br />*Slidev*')).toBe('Welcome to Slidev')
   })
+
+  it('google-fonts', () => {
+    expect(
+      generateGoogleFontsUrl({
+        webfonts: ['Fira Code', 'PT Serif'],
+        weights: ['200', '400', '600'],
+        provider: 'google',
+      } as ResolvedFontOptions),
+    ).toMatchSnapshot()
+
+    expect(
+      generateGoogleFontsUrl({
+        webfonts: ['Fira Code', 'PT Serif'],
+        weights: ['200', '400', '600'],
+        italic: true,
+        provider: 'google',
+      } as ResolvedFontOptions),
+    ).toMatchSnapshot()
+  })
 })