From 2ddaab2885740f5021206465bd4ddb86aa3c17f1 Mon Sep 17 00:00:00 2001 From: Alex Marshall Date: Wed, 24 Jul 2024 13:57:18 +0100 Subject: [PATCH 1/6] Addded getFontInfo() --- src/download.ts | 19 +++++++++++++++++++ src/downloader.ts | 15 ++++++++++++++- 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/src/download.ts b/src/download.ts index a7b6c02..ea32b8a 100644 --- a/src/download.ts +++ b/src/download.ts @@ -3,3 +3,22 @@ import { Downloader, DownloadOptions } from './downloader' export function download (url: string, options?: Partial) { return new Downloader(url, options) } + +export async function getFontInfo (url: string, options?: Partial): Promise<{ fontURLs: Map, localCSS: string }> { + const info = new Downloader(url, options) + const { fonts, css } = await info.extractFontInfo() + + let localCSS: string = '' + const fontURLs: Map = new Map() + + // Replace remote with local font url() paths + for (const font of fonts) { + localCSS = css.replace(font.inputText, font.outputText) + fontURLs.set(font.inputFont, font.outputFont) + } + + return { + localCSS, + fontURLs + } +} diff --git a/src/downloader.ts b/src/downloader.ts index 1cfee34..386b847 100644 --- a/src/downloader.ts +++ b/src/downloader.ts @@ -102,10 +102,23 @@ export class Downloader extends Hookable { return true } + async extractFontInfo (): Promise<{ fonts: FontInputOutput[], css: string }> { + if (!isValidURL(this.url)) { + throw new Error('Invalid Google Fonts URL') + } + + const { headers, fontsPath } = this.config + + const _css = await ofetch(this.url, { headers }) + const { fonts, css } = parseFontsFromCss(_css, fontsPath) + + return { fonts, css } + } + private async downloadFonts (fonts: FontInputOutput[]) { const { headers, base64, outputDir, fontsDir } = this.config const downloadedFonts: FontInputOutput[] = [] - const _fonts:FontInputOutput[] = [] + const _fonts: FontInputOutput[] = [] for (const font of fonts) { const downloadedFont = downloadedFonts.find(f => f.inputFont === font.inputFont) From 67bae17964e07af552be68f233ea2278ddb742ed Mon Sep 17 00:00:00 2001 From: Alex Marshall Date: Wed, 24 Jul 2024 14:19:11 +0100 Subject: [PATCH 2/6] Updated README --- README.md | 23 +++++++++++++++++++++++ src/download.ts | 8 ++++---- 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 273e310..b4e0ada 100644 --- a/README.md +++ b/README.md @@ -138,6 +138,29 @@ downloader.hook('download:complete', () => { await downloader.execute() ``` +### `getFontInfo(url: string, option?: DownloadOptions): Map, string` + +Use this function if you'd like more control over font download caching for your project. For example, using [Eleventy Fetch](https://www.11ty.dev/docs/plugins/fetch/#fetch), which incorporates local caching. + +```ts +const { css, fonts } = getFontInfo('https://fonts.googleapis.com/css2?family=Roboto', { + base64: false, + overwriting: false, + outputDir: './', + stylePath: 'fonts.css', + fontsDir: 'fonts', + fontsPath: './fonts' +}) + +for (const [url, filename] of fonts) { + // Save locally to `fontsPath/filename` + await yourDownloadFunction(url, `${fontsPath}/${filename}`) +} + +const fs = require('fs') +fs.writeFileSync(`${outputDir}/${stylePath}`, css) +``` + ## License [MIT License](./LICENSE) diff --git a/src/download.ts b/src/download.ts index ea32b8a..42b14f0 100644 --- a/src/download.ts +++ b/src/download.ts @@ -4,21 +4,21 @@ export function download (url: string, options?: Partial) { return new Downloader(url, options) } -export async function getFontInfo (url: string, options?: Partial): Promise<{ fontURLs: Map, localCSS: string }> { +export async function getFontInfo (url: string, options?: Partial): Promise<{ fontMaps: Map, localCSS: string }> { const info = new Downloader(url, options) const { fonts, css } = await info.extractFontInfo() let localCSS: string = '' - const fontURLs: Map = new Map() + const fontMaps: Map = new Map() // Replace remote with local font url() paths for (const font of fonts) { localCSS = css.replace(font.inputText, font.outputText) - fontURLs.set(font.inputFont, font.outputFont) + fontMaps.set(font.inputFont, font.outputFont) } return { localCSS, - fontURLs + fontMaps } } From baacf91f99e3dc42940318b765f2f351485cd0f1 Mon Sep 17 00:00:00 2001 From: Alex Marshall Date: Wed, 24 Jul 2024 23:51:45 +0100 Subject: [PATCH 3/6] Bug fix; updated README --- README.md | 45 +++++++++++++++++++++++++++++++++------------ src/download.ts | 4 ++-- 2 files changed, 35 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index b4e0ada..ad03ff2 100644 --- a/README.md +++ b/README.md @@ -138,27 +138,48 @@ downloader.hook('download:complete', () => { await downloader.execute() ``` -### `getFontInfo(url: string, option?: DownloadOptions): Map, string` +### `getFontInfo(url: string, option?: DownloadOptions): fontMaps: Map, localCSS: string` Use this function if you'd like more control over font download caching for your project. For example, using [Eleventy Fetch](https://www.11ty.dev/docs/plugins/fetch/#fetch), which incorporates local caching. ```ts -const { css, fonts } = getFontInfo('https://fonts.googleapis.com/css2?family=Roboto', { +// fontsPath is the path prepended to the local font name in the @font-face url() +const fontsPath = './fonts' +const cssPath = './css' + +const { localCSS, fontMaps } = await getFontInfo('https://fonts.googleapis.com/css2?family=Roboto', { base64: false, - overwriting: false, - outputDir: './', - stylePath: 'fonts.css', - fontsDir: 'fonts', - fontsPath: './fonts' + fontsPath: fontsPath }) -for (const [url, filename] of fonts) { - // Save locally to `fontsPath/filename` - await yourDownloadFunction(url, `${fontsPath}/${filename}`) +const result = async function () { + let success: boolean = true + + try { + await fs.writeFile(cssPath, localCSS) + } catch (error) { + success = false + console.error(`Failed to save CSS`, error) + } + + return success } -const fs = require('fs') -fs.writeFileSync(`${outputDir}/${stylePath}`, css) +const result = async function () { + let success: boolean = true + + for (const [url, filename] of fontMaps) { + try { + // Save locally to `fontsPath/filename` + await yourDownloadFunction(url, `${fontsPath}/${filename}`) + } catch (error) { + success = false + console.error(`Failed to save font: ${filename}`, error) + } + } + + return success +} ``` ## License diff --git a/src/download.ts b/src/download.ts index 42b14f0..eed46f5 100644 --- a/src/download.ts +++ b/src/download.ts @@ -8,12 +8,12 @@ export async function getFontInfo (url: string, options?: Partial = new Map() // Replace remote with local font url() paths for (const font of fonts) { - localCSS = css.replace(font.inputText, font.outputText) + localCSS = localCSS.replace(font.inputText, font.outputText) fontMaps.set(font.inputFont, font.outputFont) } From fd7855b1c75da5322902f0c26e6c0a94b2e0c692 Mon Sep 17 00:00:00 2001 From: Alex Marshall Date: Thu, 25 Jul 2024 10:16:23 +0100 Subject: [PATCH 4/6] Updated function signature --- README.md | 4 ++-- src/download.ts | 11 ++++------- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index ad03ff2..4949375 100644 --- a/README.md +++ b/README.md @@ -138,7 +138,7 @@ downloader.hook('download:complete', () => { await downloader.execute() ``` -### `getFontInfo(url: string, option?: DownloadOptions): fontMaps: Map, localCSS: string` +### `getFontInfo(url: string, options?: DownloadOptions): [ Map, string ]` Use this function if you'd like more control over font download caching for your project. For example, using [Eleventy Fetch](https://www.11ty.dev/docs/plugins/fetch/#fetch), which incorporates local caching. @@ -147,7 +147,7 @@ Use this function if you'd like more control over font download caching for your const fontsPath = './fonts' const cssPath = './css' -const { localCSS, fontMaps } = await getFontInfo('https://fonts.googleapis.com/css2?family=Roboto', { +const [localCSS, fontMaps] = await getFontInfo('https://fonts.googleapis.com/css2?family=Roboto', { base64: false, fontsPath: fontsPath }) diff --git a/src/download.ts b/src/download.ts index eed46f5..ce7fd1f 100644 --- a/src/download.ts +++ b/src/download.ts @@ -4,21 +4,18 @@ export function download (url: string, options?: Partial) { return new Downloader(url, options) } -export async function getFontInfo (url: string, options?: Partial): Promise<{ fontMaps: Map, localCSS: string }> { +export async function getFontInfo (url: string, options?: Partial): Promise<[Map, string]> { const info = new Downloader(url, options) const { fonts, css } = await info.extractFontInfo() let localCSS: string = css - const fontMaps: Map = new Map() + const fontsMap: Map = new Map() // Replace remote with local font url() paths for (const font of fonts) { localCSS = localCSS.replace(font.inputText, font.outputText) - fontMaps.set(font.inputFont, font.outputFont) + fontsMap.set(font.inputFont, font.outputFont) } - return { - localCSS, - fontMaps - } + return [fontsMap, localCSS] } From 3e4b56805ded512367ba7ca660ddbab71c826a58 Mon Sep 17 00:00:00 2001 From: Alex Marshall Date: Thu, 25 Jul 2024 10:21:26 +0100 Subject: [PATCH 5/6] Typo --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4949375..52dea35 100644 --- a/README.md +++ b/README.md @@ -147,7 +147,7 @@ Use this function if you'd like more control over font download caching for your const fontsPath = './fonts' const cssPath = './css' -const [localCSS, fontMaps] = await getFontInfo('https://fonts.googleapis.com/css2?family=Roboto', { +const [localCSS, fontsMap] = await getFontInfo('https://fonts.googleapis.com/css2?family=Roboto', { base64: false, fontsPath: fontsPath }) @@ -168,7 +168,7 @@ const result = async function () { const result = async function () { let success: boolean = true - for (const [url, filename] of fontMaps) { + for (const [url, filename] of fontsMap) { try { // Save locally to `fontsPath/filename` await yourDownloadFunction(url, `${fontsPath}/${filename}`) From d8375f1e54666ee55fe817541b6b5d00d6d9440a Mon Sep 17 00:00:00 2001 From: Alex Marshall Date: Thu, 25 Jul 2024 10:27:44 +0100 Subject: [PATCH 6/6] README update --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 52dea35..cc23946 100644 --- a/README.md +++ b/README.md @@ -147,7 +147,7 @@ Use this function if you'd like more control over font download caching for your const fontsPath = './fonts' const cssPath = './css' -const [localCSS, fontsMap] = await getFontInfo('https://fonts.googleapis.com/css2?family=Roboto', { +const [fontsMap, localCSS] = await getFontInfo('https://fonts.googleapis.com/css2?family=Roboto', { base64: false, fontsPath: fontsPath })