feat: support coollabs as font provider (#1982)

cnguyen-de · kermanx · web-flow · commit fda9cd81f060 · 2025-01-30T09:53:59.000+08:00
Co-authored-by: _Kerman &lt;kermanx@qq.com&gt;
diff --git a/docs/custom/config-fonts.md b/docs/custom/config-fonts.md
@@ -18,7 +18,7 @@ fonts:
 
 And that's all.
 
-Fonts will be **imported automatically from [Google Fonts](https://fonts.google.com/)**. That means you can use any fonts available on Google Fonts directly.
+Fonts will be **imported automatically from a provider via CDN, by default it is [Google Fonts](https://fonts.google.com/)**. That means you can use any fonts available on Google Fonts directly.
 
 ## Local Fonts
 
@@ -92,10 +92,10 @@ fonts:
 
 ## Providers
 
-- Options: `google` | `none`
+- Options: `google` | `coollabs` | `none`
 - Default: `google`
 
-Currently, only Google Fonts is supported, we are planning to add more providers in the future. Specify to `none` will disable the auto-importing feature entirely and treat all the fonts locally.
+Currently, only [Google Fonts](https://fonts.google.com/) and [coolLabs](https://fonts.coollabs.io/) supported, we are planning to add more providers in the future. Specify to `none` will disable the auto-importing feature entirely and treat all the fonts locally.
 
 ```yaml
 ---
diff --git a/packages/slidev/node/setups/indexHtml.ts b/packages/slidev/node/setups/indexHtml.ts
@@ -7,7 +7,7 @@ import { escapeHtml } from 'markdown-it/lib/common/utils.mjs'
 import { version } from '../../package.json'
 import { getSlideTitle } from '../commands/shared'
 import { toAtFS } from '../resolver'
-import { generateGoogleFontsUrl } from '../utils'
+import { generateCoollabsFontsUrl, generateGoogleFontsUrl } from '../utils'
 
 function toAttrValue(unsafe: unknown) {
   return JSON.stringify(escapeHtml(String(unsafe)))
@@ -49,8 +49,13 @@ export default function setupIndexHtml({ mode, entry, clientRoot, userRoot, root
   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')
-    head += `\n<link rel="stylesheet" href="${generateGoogleFontsUrl(data.config.fonts)}" type="text/css">`
+  if (data.config.fonts.webfonts.length) {
+    const { provider } = data.config.fonts
+    if (provider === 'google')
+      head += `\n<link rel="stylesheet" href="${generateGoogleFontsUrl(data.config.fonts)}" type="text/css">`
+    else if (provider === 'coollabs')
+      head += `\n<link rel="stylesheet" href="${generateCoollabsFontsUrl(data.config.fonts)}" type="text/css">`
+  }
 
   if (data.headmatter.lang)
     main = main.replace('<html lang="en">', `<html lang="${data.headmatter.lang}">`)
diff --git a/packages/slidev/node/utils.ts b/packages/slidev/node/utils.ts
@@ -21,16 +21,23 @@ export function stringifyMarkdownTokens(tokens: Token[]) {
     .join(' ')
 }
 
-export function generateGoogleFontsUrl(options: ResolvedFontOptions) {
+export function generateFontParams(options: ResolvedFontOptions) {
   const weights = options.weights
     .flatMap(i => options.italic ? [`0,${i}`, `1,${i}`] : [`${i}`])
     .sort()
     .join(';')
-  const fonts = options.webfonts
+  const fontParams = options.webfonts
     .map(i => `family=${i.replace(/^(['"])(.*)\1$/, '$1').replace(/\s+/g, '+')}:${options.italic ? 'ital,' : ''}wght@${weights}`)
     .join('&')
+  return fontParams
+}
+
+export function generateGoogleFontsUrl(options: ResolvedFontOptions) {
+  return `https://fonts.googleapis.com/css2?${generateFontParams(options)}&display=swap`
+}
 
-  return `https://fonts.googleapis.com/css2?${fonts}&display=swap`
+export function generateCoollabsFontsUrl(options: ResolvedFontOptions) {
+  return `https://api.fonts.coollabs.io/fonts?${generateFontParams(options)}&display=swap`
 }
 
 /**
diff --git a/packages/types/src/config.ts b/packages/types/src/config.ts
@@ -18,7 +18,7 @@ export interface ResolvedFontOptions {
   serif: string[]
   weights: string[]
   italic: boolean
-  provider: 'none' | 'google'
+  provider: 'none' | 'google' | 'coollabs'
   webfonts: string[]
   local: string[]
 }
diff --git a/packages/types/src/frontmatter.ts b/packages/types/src/frontmatter.ts
@@ -391,7 +391,7 @@ export interface FontOptions {
   /**
    * @default 'google'
    */
-  provider?: 'none' | 'google'
+  provider?: 'none' | 'google' | 'coollabs'
   /**
    * Specify web fonts names, will detect from `sans`, `mono`, `serif` if not provided
    */
diff --git a/packages/vscode/schema/headmatter.json b/packages/vscode/schema/headmatter.json
@@ -706,7 +706,8 @@
           "type": "string",
           "enum": [
             "none",
-            "google"
+            "google",
+            "coollabs"
           ],
           "default": "google"
         },
diff --git a/test/__snapshots__/utils.test.ts.snap b/test/__snapshots__/utils.test.ts.snap
@@ -1,5 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`utils > coollabs-fonts 1`] = `"https://api.fonts.coollabs.io/fonts?family=Fira+Code:wght@200;400;600&family=PT+Serif:wght@200;400;600&display=swap"`;
+
+exports[`utils > coollabs-fonts 2`] = `"https://api.fonts.coollabs.io/fonts?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"`;
+
 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
@@ -6,7 +6,7 @@ import { describe, expect, it } from 'vitest'
 import YAML from 'yaml'
 import { parseAspectRatio, parseRangeString } from '../packages/parser/src'
 import { getRoots } from '../packages/slidev/node/resolver'
-import { generateGoogleFontsUrl, stringifyMarkdownTokens, updateFrontmatterPatch } from '../packages/slidev/node/utils'
+import { generateCoollabsFontsUrl, generateGoogleFontsUrl, stringifyMarkdownTokens, updateFrontmatterPatch } from '../packages/slidev/node/utils'
 
 describe('utils', () => {
   it('page-range', () => {
@@ -61,6 +61,25 @@ describe('utils', () => {
     ).toMatchSnapshot()
   })
 
+  it('coollabs-fonts', () => {
+    expect(
+      generateCoollabsFontsUrl({
+        webfonts: ['Fira Code', 'PT Serif'],
+        weights: ['200', '400', '600'],
+        provider: 'google',
+      } as ResolvedFontOptions),
+    ).toMatchSnapshot()
+
+    expect(
+      generateCoollabsFontsUrl({
+        webfonts: ['Fira Code', 'PT Serif'],
+        weights: ['200', '400', '600'],
+        italic: true,
+        provider: 'google',
+      } as ResolvedFontOptions),
+    ).toMatchSnapshot()
+  })
+
   it('roots', async () => {
     const { cliRoot, clientRoot, userRoot, userWorkspaceRoot } = await getRoots(resolve('slides.md'))
     const expectRelative = (v: string) => expect(slash(relative(__dirname, v)))

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ export interface ResolvedFontOptions {`
`18`	`18`	`serif: string[]`
`19`	`19`	`weights: string[]`
`20`	`20`	`italic: boolean`
`21`		`- provider: 'none' \| 'google'`
	`21`	`+ provider: 'none' \| 'google' \| 'coollabs'`
`22`	`22`	`webfonts: string[]`
`23`	`23`	`local: string[]`
`24`	`24`	`}`