From 2a911341282c6240f2285ee4a680788d32f3c881 Mon Sep 17 00:00:00 2001 From: Lotus Date: Sun, 26 Jul 2020 19:13:18 +0300 Subject: [PATCH 1/5] docs(templates): add homepage to package.json and relink repos with new org --- scripts/generic/templates.js | 9 +++++---- scripts/google/templates.js | 9 +++++---- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/scripts/generic/templates.js b/scripts/generic/templates.js index 95f8ba4ef86..2bfc6e2ed0d 100644 --- a/scripts/generic/templates.js +++ b/scripts/generic/templates.js @@ -18,7 +18,8 @@ exports.packageJson = _.template( ], "author": "Lotus ", "license": "MIT", - "repository": "https://github.com/DecliningLotus/fontsource/tree/master/packages/<%= fontId %>" + "repository": "https://github.com/fontsource/fontsource/tree/master/packages/<%= fontId %>", + "homepage": "https://github.com/fontsource/fontsource" } ` ) @@ -42,9 +43,9 @@ exports.fontFace = _.template( exports.readme = _.template( `# Fontsource <%= fontName %> -[![npm version](https://badge.fury.io/js/fontsource-<%= fontId %>.svg)](https://www.npmjs.com/package/fontsource-<%= fontId %>) [![Generic badge](https://img.shields.io/badge/fontsource-passing-brightgreen)](https://github.com/DecliningLotus/fontsource) [![Monthly downloads](https://badgen.net/npm/dm/fontsource-<%= fontId %>)](https://github.com/DecliningLotus/fontsource) [![Total downloads](https://badgen.net/npm/dt/fontsource-<%= fontId %>)](https://github.com/DecliningLotus/fontsource) [![GitHub stars](https://img.shields.io/github/stars/DecliningLotus/fontsource.svg?style=social&label=Star)](https://GitHub.com/DecliningLotus/fontsource/stargazers/) +[![npm version](https://badge.fury.io/js/fontsource-<%= fontId %>.svg)](https://www.npmjs.com/package/fontsource-<%= fontId %>) [![Generic badge](https://img.shields.io/badge/fontsource-passing-brightgreen)](https://github.com/fontsource/fontsource) [![Monthly downloads](https://badgen.net/npm/dm/fontsource-<%= fontId %>)](https://github.com/fontsource/fontsource) [![Total downloads](https://badgen.net/npm/dt/fontsource-<%= fontId %>)](https://github.com/fontsource/fontsource) [![GitHub stars](https://img.shields.io/github/stars/DecliningLotus/fontsource.svg?style=social&label=Star)](https://github.com/fontsource/fontsource/stargazers) -The CSS and web font files to easily self-host the “<%= fontName %>” font. Please visit the main [Fontsource monorepo](https://github.com/DecliningLotus/fontsource) to view more details on this package. +The CSS and web font files to easily self-host the “<%= fontName %>” font. Please visit the main [Fontsource monorepo](https://github.com/fontsource/fontsource) to view more details on this package. ## Installation @@ -101,7 +102,7 @@ Font [Source](<%= source %>) and [License](<%= license %>). Font version (provided by source): \`<%= version %>\`. -Feel free to star and contribute new ideas to this repository that aim to improve the performance of font loading, as well as expanding the existing library we already have. Any suggestions or ideas can be voiced via an [issue](https://github.com/DecliningLotus/fontsource/issues). +Feel free to star and contribute new ideas to this repository that aim to improve the performance of font loading, as well as expanding the existing library we already have. Any suggestions or ideas can be voiced via an [issue](https://github.com/fontsource/fontsource/issues). ` ) diff --git a/scripts/google/templates.js b/scripts/google/templates.js index dfffb9be7fb..228aff571f0 100644 --- a/scripts/google/templates.js +++ b/scripts/google/templates.js @@ -19,7 +19,8 @@ exports.packageJson = _.template( ], "author": "Lotus ", "license": "MIT", - "repository": "https://github.com/DecliningLotus/fontsource/tree/master/packages/<%= fontId %>" + "repository": "https://github.com/fontsource/fontsource/tree/master/packages/<%= fontId %>", + "homepage": "https://github.com/fontsource/fontsource" } ` ) @@ -43,9 +44,9 @@ exports.fontFace = _.template( exports.readme = _.template( `# Fontsource <%= fontName %> -[![npm version](https://badge.fury.io/js/fontsource-<%= fontId %>.svg)](https://www.npmjs.com/package/fontsource-<%= fontId %>) [![Generic badge](https://img.shields.io/badge/fontsource-passing-brightgreen)](https://github.com/DecliningLotus/fontsource) [![Monthly downloads](https://badgen.net/npm/dm/fontsource-<%= fontId %>)](https://github.com/DecliningLotus/fontsource) [![Total downloads](https://badgen.net/npm/dt/fontsource-<%= fontId %>)](https://github.com/DecliningLotus/fontsource) [![GitHub stars](https://img.shields.io/github/stars/DecliningLotus/fontsource.svg?style=social&label=Star)](https://GitHub.com/DecliningLotus/fontsource/stargazers/) +[![npm version](https://badge.fury.io/js/fontsource-<%= fontId %>.svg)](https://www.npmjs.com/package/fontsource-<%= fontId %>) [![Generic badge](https://img.shields.io/badge/fontsource-passing-brightgreen)](https://github.com/fontsource/fontsource) [![Monthly downloads](https://badgen.net/npm/dm/fontsource-<%= fontId %>)](https://github.com/fontsource/fontsource) [![Total downloads](https://badgen.net/npm/dt/fontsource-<%= fontId %>)](https://github.com/fontsource/fontsource) [![GitHub stars](https://img.shields.io/github/stars/DecliningLotus/fontsource.svg?style=social&label=Star)](https://github.com/fontsource/fontsource/stargazers) -The CSS and web font files to easily self-host the “<%= fontName %>” font. Please visit the main [Fontsource monorepo](https://github.com/DecliningLotus/fontsource) to view more details on this package. +The CSS and web font files to easily self-host the “<%= fontName %>” font. Please visit the main [Fontsource monorepo](https://github.com/fontsource/fontsource) to view more details on this package. ## Installation @@ -102,7 +103,7 @@ Most of the fonts in the collection use the SIL Open Font License, v1.1. Some fo Font version (provided by source): \`<%= version %>\`. -Feel free to star and contribute new ideas to this repository that aim to improve the performance of font loading, as well as expanding the existing library we already have. Any suggestions or ideas can be voiced via an [issue](https://github.com/DecliningLotus/fontsource/issues). +Feel free to star and contribute new ideas to this repository that aim to improve the performance of font loading, as well as expanding the existing library we already have. Any suggestions or ideas can be voiced via an [issue](https://github.com/fontsource/fontsource/issues). ` ) From a721da5520da2603a9c8ff4e50720b1b8e7c4f68 Mon Sep 17 00:00:00 2001 From: Lotus Date: Sat, 1 Aug 2020 17:00:15 +0300 Subject: [PATCH 2/5] feat: add unicode range with new CSS APIv2 --- README.md | 32 +++- package.json | 2 +- scripts/google/download-google-v1.js | 27 +-- scripts/google/download-google-v2.js | 55 ++++++ scripts/google/google-font-packager-v1.js | 45 +---- scripts/google/google-font-packager-v2.js | 218 ++++++++++++++++++++++ scripts/google/templates.js | 37 +++- 7 files changed, 343 insertions(+), 73 deletions(-) create mode 100644 scripts/google/download-google-v2.js create mode 100644 scripts/google/google-font-packager-v2.js diff --git a/README.md b/README.md index b5a09d361a7..234ce2a12a5 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,8 @@ [![Generic badge](https://img.shields.io/badge/fontsource-passing-brightgreen)](https://github.com/DecliningLotus/fontsource) [![License](https://badgen.net/badge/license/MIT/green)](https://github.com/DecliningLotus/fontsource/blob/master/LICENSE) [![GitHub stars](https://img.shields.io/github/stars/DecliningLotus/fontsource.svg?style=social&label=Star)](https://GitHub.com/DecliningLotus/fontsource/stargazers/) -An updating monorepo rebuilt off of its predecessor [Typefaces](https://github.com/KyleAMathews/typefaces), full of self-hostable Open Source fonts bundled into individual NPM packages! +An updating monorepo full of self-hostable Open Source fonts bundled into individual NPM packages! +Inspired by the aging [Typefaces](https://github.com/KyleAMathews/typefaces) project and primarily built using [Google Font Metadata](https://github.com/fontsource/google-font-metadata), Our supported font list can be found [here](https://github.com/DecliningLotus/fontsource/blob/master/FONTLIST.md). @@ -10,7 +11,7 @@ Our supported font list can be found [here](https://github.com/DecliningLotus/fo - Self-hosting brings _significant performance gains_ as typically loading fonts from hosted font services, such as Google Fonts, lead to an extra (render blocking) network request. To provide perspective, for simple websites it has been seen to _double_ visual load times. Benchmarks can be found [here](https://github.com/HTTPArchive/almanac.httparchive.org/pull/607) and [here](https://github.com/reactiflux/reactiflux.com/pull/21). -- Fonts remain _version locked_. Google often pushes updates to their fonts without notice, which may interfere with your live production projects. Manage your fonts like any other NPM dependency. +- Fonts remain _version locked_. Google often pushes updates to their fonts [without notice](https://github.com/google/fonts/issues/1307), which may interfere with your live production projects. Manage your fonts like any other NPM dependency. - Your _fonts load offline_. Often there may be situations, like working in an airplane or train, leaving you stranded without access to your online hosted fonts. Have the ability to keep working under any circumstance. @@ -29,22 +30,21 @@ yarn add fontsource-open-sans // npm install fontsource-open-sans Then within your app entry file or site component, import it in. For example in Gatsby, you could choose to import it into a layout template (`layout.js`), page component, or `gatsby-browser.js`. ```javascript -import "fontsource-open-sans" // require("fontsource-open-sans") +import "fontsource-open-sans" // Defaults to weight 400 with all styles included. ``` -Fontsource allows you to select font subsets, weights and even individual styles, allowing you to cut down on payload sizes to the last byte! The default selection above, however, sticks to the Latin subset including all weights and styles. +Fontsource allows you to select weights and even individual styles, allowing you to cut down on payload sizes to the last byte! Utilizing the CSS unicode-range selector, all language subsets are accounted for. ```javascript -import "fontsource-open-sans/latin-ext.css" // All weights and styles included. -import "fontsource-open-sans/cyrillic-ext-400.css" // All styles included. -import "fontsource-open-sans/greek-700-normal.css" // Select either normal or italic. +import "fontsource-open-sans/500.css" // All styles included. +import "fontsource-open-sans/900-normal.css" // Select either normal or italic. ``` Alternatively, the same solutions could be imported via SCSS! ```scss @import "~fontsource-open-sans/index.css"; -@import "~fontsource-open-sans/vietnamese-300-italic.css"; +@import "~fontsource-open-sans/300-italic.css"; ``` _Do confirm on Google Fonts (or elsewhere) whether your font supports a certain subset, weight or style beforehand as these examples may not reflect actual compatibility._ @@ -57,6 +57,22 @@ body { } ``` +## Additional Options + +In the rare case you need to individually select a language subset and not utilize the CSS unicode-range selector, you may specify the import as follows. This is especially not recommended for languages, such as Japanese, with a large amount of characters. + +```javascript +import "fontsource-open-sans/latin-ext.css" // All weights and styles included. +import "fontsource-open-sans/cyrillic-ext-500.css" // All styles included. +import "fontsource-open-sans/greek-900-normal.css" // Select either normal or italic. +``` + +_Examples above may not reflect actual variant availability._ + +## Migrating from 2.x to 3.x + +See [CHANGELOG.md](https://github.com/fontsource/fontsource/blob/master/CHANGELOG.md) for more details. + ## Adding New Fonts For Open Source fonts that are not automatically updated by the Google ecosystem, we have a generic packager that builds CSS files for you. Click [here](https://github.com/DecliningLotus/fontsource/blob/master/scripts/generic/generic-packager.md) to see how to use it. diff --git a/package.json b/package.json index c73ae7bc80a..837ede496ef 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fontsource", - "version": "2.2.1", + "version": "3.0.0", "author": "Lotus ", "license": "MIT", "devDependencies": { diff --git a/scripts/google/download-google-v1.js b/scripts/google/download-google-v1.js index e2b63d244aa..f2442e86af9 100644 --- a/scripts/google/download-google-v1.js +++ b/scripts/google/download-google-v1.js @@ -8,11 +8,14 @@ const fontsv1 = require(`google-font-metadata/data/google-fonts-v1.json`) fs.ensureDirSync(`packages`) // Create an async queue object -const processQueue = (font, cb) => { - console.log(`Downloading ${font}`) - shell.exec(`node ./scripts/google/google-font-packager-v1.js ${font}`, () => { - cb() - }) +const processQueue = (fontid, cb) => { + console.log(`Downloading ${fontid}`) + shell.exec( + `node ./scripts/google/google-font-packager-v1.js ${fontid}`, + () => { + cb() + } + ) } // EventEmitter listener is usually set at a default limit of 10, below chosen 12 concurrent workers @@ -25,25 +28,23 @@ queue.drain(() => { ) }) -queue.error((err, font) => { - console.error(`${font} experienced an error.`) +queue.error((err, fontid) => { + console.error(`${fontid} experienced an error.`) }) // Testing -/*const test = () => { +/* const test = () => { queue.push(`roboto`) // 7 subsets, 12 styles queue.push(`orienta`) // 1 subset, 2 styles queue.push(`arbutus`) // 2 subsets, 1 style - queue.push(`mate-sc`) // 1 subset, 1 style - queue.push(`noticia-text`) // 3 subsets, 4 styles + queue.push(`mate-sc`) // 1 subset, 1 styles queue.push(`open-sans`) queue.push(`lato`) queue.push(`montserrat`) + queue.push(`noticia-text`) queue.push(`noto-sans-jp`) - queue.push(`b612-mono`) - queue.push(`b612`) } -test()*/ +test() */ // Production const production = () => { diff --git a/scripts/google/download-google-v2.js b/scripts/google/download-google-v2.js new file mode 100644 index 00000000000..737d6b73725 --- /dev/null +++ b/scripts/google/download-google-v2.js @@ -0,0 +1,55 @@ +const _ = require(`lodash`) +const async = require(`async`) +const fs = require(`fs-extra`) +const shell = require(`shelljs`) + +const fontsv2 = require(`google-font-metadata`) + +fs.ensureDirSync(`packages`) + +// Create an async queue object +const processQueue = (fontid, cb) => { + console.log(`Downloading ${fontid}`) + shell.exec( + `node ./scripts/google/google-font-packager-v2.js ${fontid}`, + () => { + cb() + } + ) +} + +// EventEmitter listener is usually set at a default limit of 10, below chosen 12 concurrent workers +require("events").EventEmitter.defaultMaxListeners = 0 +const queue = async.queue(processQueue, 12) + +queue.drain(() => { + console.log( + `All ${Object.keys(fontsv2).length} Google Fonts V2 have been processed.` + ) +}) + +queue.error((err, fontid) => { + console.error(`${fontid} experienced an error.`) +}) + +// Testing +/* const test = () => { + queue.push(`roboto`) // 7 subsets, 12 styles + queue.push(`orienta`) // 1 subset, 2 styles + queue.push(`arbutus`) // 2 subsets, 1 style + queue.push(`mate-sc`) // 1 subset, 1 styles + queue.push(`open-sans`) + queue.push(`lato`) + queue.push(`montserrat`) + queue.push(`noticia-text`) + queue.push(`noto-sans-jp`) +} +test() */ + +// Production +const production = () => { + _.forOwn(fontsv2, font => { + queue.push(`${font.id}`) + }) +} +production() diff --git a/scripts/google/google-font-packager-v1.js b/scripts/google/google-font-packager-v1.js index 9cfef116ba5..a3b34286952 100644 --- a/scripts/google/google-font-packager-v1.js +++ b/scripts/google/google-font-packager-v1.js @@ -80,7 +80,7 @@ if (changed) { } }) - // Download all font files in parallel + // Download all font files async.map(links, (d, downloadDone) => { const { url, dest } = d download(url, dest, err => { @@ -139,49 +139,6 @@ if (changed) { }) const cssSubsetPath = `${fontDir}/${subset}.css` fs.writeFileSync(cssSubsetPath, cssSubset.join("")) - - if (subset === font.defSubset || font.subsets.length === 1) { - fs.writeFileSync(`${fontDir}/index.css`, cssSubset.join("")) - } - }) -} - -// If everything ran successfully, apply new updates to package. -if (changed) { - // Write README.md - const packageReadme = readme({ - fontId: font.id, - fontName: font.family, - subsets: font.subsets, - weights: font.weights, - styles: font.styles, - version: font.version, - }) - fs.writeFileSync(`${fontDir}/README.md`, packageReadme) - - // Write out package.json file - const packageJSON = packageJson({ - fontId: font.id, - fontName: font.family, - }) - // Once created, don't interfere with lerna updates - if (!fs.existsSync(`${fontDir}/package.json`)) { - fs.writeFileSync(`${fontDir}/package.json`, packageJSON) - } - - // Write metadata.json - jsonfile.writeFileSync(`${fontDir}/metadata.json`, { - fontId: font.id, - fontName: font.family, - subsets: font.subsets, - weights: font.weights, - styles: font.styles, - defSubset: font.defSubset, - lastModified: font.lastModified, - version: font.version, - source: "https://fonts.google.com/", - license: "https://fonts.google.com/attribution", - type: "google", }) } diff --git a/scripts/google/google-font-packager-v2.js b/scripts/google/google-font-packager-v2.js new file mode 100644 index 00000000000..e46f5dc3cd9 --- /dev/null +++ b/scripts/google/google-font-packager-v2.js @@ -0,0 +1,218 @@ +const _ = require(`lodash`) +const async = require(`async`) +const flatten = require(`flat`) +const fs = require(`fs-extra`) +const isAbsoluteUrl = require(`is-absolute-url`) +const jsonfile = require(`jsonfile`) +const apiFont = require(`google-font-metadata`) + +const download = require(`./download-file`) +const { packageJson, fontFaceUnicode, readme } = require(`./templates`) + +const id = process.argv[2] +if (!id) { + console.warn(`Google Font ID has not been passed into packager.`) + process.exit() +} + +const font = apiFont[id] + +// Set file directories +const fontDir = `packages/${font.id}` +fs.ensureDirSync(fontDir) +fs.ensureDirSync(`scripts/temp_packages`) + +// Update checking +let changed = false + +if (fs.existsSync(`${fontDir}/metadata.json`)) { + let metadata = jsonfile.readFileSync(`${fontDir}/metadata.json`) + changed = metadata.lastModified !== font.lastModified +} else { + changed = true +} + +// Processing each subset of given font ID. +if (changed) { + fs.ensureDirSync(`./${fontDir}/files`) + + // Generate filenames + const makeFontDownloadPath = (subset, weight, style, extension) => { + return `./${fontDir}/files/${font.id}-${subset}-${weight}-${style}.${extension}` + } + + const makeFontFilePath = (subset, weight, style, extension) => { + return `./files/${font.id}-${subset}-${weight}-${style}.${extension}` + } + + // Parse API and split into variant + link array pairs. [['weight.style.subset.url|local.extension','link to font or local name'],...] + const downloadURLPairs = _.toPairs(flatten(font.variants)) + + // Filter out local font links and only leave URLs for each pair + let links = downloadURLPairs + .filter(pair => isAbsoluteUrl(pair[1].toString())) + .filter(file => file[0].split(".")[4] === "woff2") + .map(file => { + const types = file[0].split(".") + const dest = makeFontDownloadPath( + types[2].replace("[", "").replace("]", ""), + types[0], + types[1], + types[4] + ) + const url = file[1] + return { + url, + dest, + } + }) + + // Get woff and ttf/otf all subset variant + let oldLinks = downloadURLPairs + .filter(pair => isAbsoluteUrl(pair[1].toString())) + .filter(file => { + const types = file[0].split(".") + if ( + types[4] === "woff" || + types[4] === "truetype" || + types[4] === "opentype" + ) { + return true + } + return false + }) + .map(file => { + const types = file[0].split(".") + const dest = makeFontDownloadPath( + "all", + types[0], + types[1], + types[4].replace("truetype", "ttf").replace("opentype", "otf") + ) + const url = file[1] + return { + url, + dest, + } + }) + + // Remove all duplicate values for each "subset" to reduce unneccesary downloads + oldLinks = _.uniqBy(oldLinks, item => { + return item.url && item.dest + }) + _.forEach(oldLinks, item => { + links.push(item) + }) + + // Download all font files + async.map(links, (d, downloadDone) => { + const { url, dest } = d + download(url, dest, err => { + if (err) { + console.log("Error downloading", font.id, url, err) + } + downloadDone() + }) + }) + + // Generate CSS + const ttforotf = (subset, weight, style) => { + if ( + Object.keys(font.variants[weight][style][subset].url).includes("opentype") + ) { + return "otf" + } + return "ttf" + } + + const unicodeKeys = Object.keys(font.unicodeRange) + + font.weights.forEach(weight => { + cssWeight = [] + font.styles.forEach(style => { + cssStyle = [] + unicodeKeys.forEach(subset => { + // Some fonts may have variants 400, 400i, 700 but not 700i. + if (style in font.variants[weight]) { + let css = fontFaceUnicode({ + fontId: font.id, + fontName: font.family, + locals: font.variants[weight][style][subset].local, + style, + subset, + weight, + woff2Path: makeFontFilePath( + subset.replace("[", "").replace("]", ""), + weight, + style, + "woff2" + ), + woffPath: makeFontFilePath("all", weight, style, "woff"), + ttforotf: ttforotf(subset, weight, style) + .replace("otf", "opentype") + .replace("ttf", "truetype"), + ttforotfPath: makeFontFilePath( + "all", + weight, + style, + ttforotf(subset, weight, style) + ), + unicodeRange: font.unicodeRange[subset], + }) + cssStyle.push(css) + cssWeight.push(css) + } + }) + if (style in font.variants[weight]) { + const cssStylePath = `${fontDir}/${weight}-${style}.css` + fs.writeFileSync(cssStylePath, cssStyle.join("")) + } + }) + const cssWeightPath = `${fontDir}/${weight}.css` + fs.writeFileSync(cssWeightPath, cssWeight.join("")) + if (weight === "400") { + fs.writeFileSync(`${fontDir}/index.css`, cssWeight.join("")) + } + }) +} + +// If everything ran successfully, apply new updates to package. +if (changed) { + // Write README.md + const packageReadme = readme({ + fontId: font.id, + fontName: font.family, + subsets: font.subsets, + weights: font.weights, + styles: font.styles, + version: font.version, + }) + fs.writeFileSync(`${fontDir}/README.md`, packageReadme) + + // Write out package.json file + const packageJSON = packageJson({ + fontId: font.id, + fontName: font.family, + }) + // Once created, don't interfere with lerna updates + if (!fs.existsSync(`${fontDir}/package.json`)) { + fs.writeFileSync(`${fontDir}/package.json`, packageJSON) + } + + // Write metadata.json + jsonfile.writeFileSync(`${fontDir}/metadata.json`, { + fontId: font.id, + fontName: font.family, + subsets: font.subsets, + weights: font.weights, + styles: font.styles, + defSubset: font.defSubset, + lastModified: font.lastModified, + version: font.version, + source: "https://fonts.google.com/", + license: "https://fonts.google.com/attribution", + type: "google", + }) +} + +console.log(`Finished processing ${font.id}`) diff --git a/scripts/google/templates.js b/scripts/google/templates.js index 228aff571f0..6d9f18793f2 100644 --- a/scripts/google/templates.js +++ b/scripts/google/templates.js @@ -42,6 +42,19 @@ exports.fontFace = _.template( ` ) +exports.fontFaceUnicode = _.template( + `/* <%= fontId %>-<%= subset %>-<%= weight %>-<%= style %>*/ +@font-face { + font-family: '<%= fontName %>'; + font-style: <%= style %>; + font-display: swap; + font-weight: <%= weight %>; + src: url('<%= woff2Path %>') format('woff2'), url('<%= woffPath %>') format('woff'), url('<%= ttforotfPath %>') format('<%= ttforotf %>'); + unicode-range: <%= unicodeRange %>; +} +` +) + exports.readme = _.template( `# Fontsource <%= fontName %> [![npm version](https://badge.fury.io/js/fontsource-<%= fontId %>.svg)](https://www.npmjs.com/package/fontsource-<%= fontId %>) [![Generic badge](https://img.shields.io/badge/fontsource-passing-brightgreen)](https://github.com/fontsource/fontsource) [![Monthly downloads](https://badgen.net/npm/dm/fontsource-<%= fontId %>)](https://github.com/fontsource/fontsource) [![Total downloads](https://badgen.net/npm/dt/fontsource-<%= fontId %>)](https://github.com/fontsource/fontsource) [![GitHub stars](https://img.shields.io/github/stars/DecliningLotus/fontsource.svg?style=social&label=Star)](https://github.com/fontsource/fontsource/stargazers) @@ -59,28 +72,26 @@ yarn add fontsource-<%= fontId %> // npm install fontsource-<%= fontId %> Then within your app entry file or site component, import it in. For example in Gatsby, you could choose to import it into a layout template (\`layout.js\`), page component, or \`gatsby-browser.js\`. \`\`\`javascript -import "fontsource-<%= fontId %>" // require("fontsource-<%= fontId %>") +import "fontsource-<%= fontId %>" // Defaults to weight 400 with all styles included. \`\`\` -Fontsource allows you to select font subsets, weights and even individual styles, allowing you to cut down on payload sizes to the last byte! The default selection above, however, sticks to the Latin subset including all weights and styles. +Fontsource allows you to select weights and even individual styles, allowing you to cut down on payload sizes to the last byte! Utilizing the CSS unicode-range selector, all language subsets are accounted for. \`\`\`javascript -import "fontsource-<%= fontId %>/latin-ext.css" // All weights and styles included. -import "fontsource-<%= fontId %>/cyrillic-ext-400.css" // All styles included. -import "fontsource-<%= fontId %>/greek-700-normal.css" // Select either normal or italic. +import "fontsource-<%= fontId %>/500.css" // All styles included. +import "fontsource-<%= fontId %>/900-normal.css" // Select either normal or italic. \`\`\` Alternatively, the same solutions could be imported via SCSS! \`\`\`scss @import "~fontsource-<%= fontId %>/index.css"; -@import "~fontsource-<%= fontId %>/vietnamese-300-italic.css"; +@import "~fontsource-<%= fontId %>/300-italic.css"; \`\`\` _These examples may not reflect actual compatibility. Please refer below._ Supported variables: -- Subsets: \`[<%= subsets %>]\` - Weights: \`[<%= weights %>]\` - Styles: \`[<%= styles %>]\` @@ -92,6 +103,18 @@ body { } \`\`\` +## Additional Options + +In the rare case you need to individually select a language subset and not utilize the CSS unicode-range selector, you may specify the import as follows. This is especially not recommended for languages, such as Japanese, with a large amount of characters. + +\`\`\`javascript +import "fontsource-<%= fontId %>/latin-ext.css" // All weights and styles included. +import "fontsource-<%= fontId %>/cyrillic-ext-500.css" // All styles included. +import "fontsource-<%= fontId %>/greek-900-normal.css" // Select either normal or italic. +\`\`\` + +- Supported subsets: \`[<%= subsets %>]\` + ## Licensing It is important to always read the license for every font that you use. From 4450ed6cfe4ab6d334373e152d6a6c47f415044d Mon Sep 17 00:00:00 2001 From: Lotus Date: Sat, 1 Aug 2020 18:18:14 +0300 Subject: [PATCH 3/5] feat: add force rebuild scripts for google --- .github/workflows/cron-run.yml | 8 ++- .github/workflows/manual-run-force.yml | 69 +++++++++++++++++++++++ .github/workflows/manual-run.yml | 8 ++- package.json | 2 + scripts/google/download-google-v1.js | 4 +- scripts/google/download-google-v2.js | 4 +- scripts/google/google-font-packager-v1.js | 5 +- scripts/google/google-font-packager-v2.js | 5 +- 8 files changed, 97 insertions(+), 8 deletions(-) create mode 100644 .github/workflows/manual-run-force.yml diff --git a/.github/workflows/cron-run.yml b/.github/workflows/cron-run.yml index ab10c7f656d..c06d532ff10 100644 --- a/.github/workflows/cron-run.yml +++ b/.github/workflows/cron-run.yml @@ -29,9 +29,15 @@ jobs: - name: Parse APIv1 run: npm explore google-font-metadata -- yarn parser:v1 - - name: Build fonts + - name: Build fonts APIv1 run: yarn build:googlev1 + - name: Parse APIv2 + run: npm explore google-font-metadata -- yarn parser:v2 + + - name: Build fonts APIv2 + run: yarn build:googlev2 + - name: Format files run: yarn format diff --git a/.github/workflows/manual-run-force.yml b/.github/workflows/manual-run-force.yml new file mode 100644 index 00000000000..9c75e96b457 --- /dev/null +++ b/.github/workflows/manual-run-force.yml @@ -0,0 +1,69 @@ +name: Build and Release [Force Rebuild] [Manual] + +on: [workflow_dispatch] + +jobs: + build: + runs-on: ubuntu-latest + + if: github.actor == 'DecliningLotus' + + steps: + - name: checkout + uses: actions/checkout@v2 + with: + fetch-depth: "0" + + - name: Configure CI Git User + run: | + git config --global user.name 'DecliningLotus' + git config --global user.email 'DecliningLotus@users.noreply.github.com' + + - name: Install packages + run: yarn + + - name: Fetch API + run: npm explore google-font-metadata -- node ./scripts/api-gen.js $GOOGLE_API_KEY + env: + GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY }} + + - name: Parse APIv1 + run: npm explore google-font-metadata -- yarn parser:v1 + + - name: Build fonts APIv1 + run: yarn build:googlev1-force + + - name: Parse APIv2 + run: npm explore google-font-metadata -- yarn parser:v2 + + - name: Build fonts APIv2 + run: yarn build:googlev2-force + + - name: Format files + run: yarn format + + - name: Stage changes + run: git add --all + + - name: Commit files + run: >- + git commit -m "chore(build): update fontsources $GITHUB_RUN_NUMBER" + continue-on-error: true + + - name: Push changes + uses: ad-m/github-push-action@master + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + + - name: Authenticate with Registry + run: | + yarn logout + echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> .npmrc + env: + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + - name: Publish package + run: npm run deploy:ci + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.github/workflows/manual-run.yml b/.github/workflows/manual-run.yml index 0589c370e13..c56f500ebf6 100644 --- a/.github/workflows/manual-run.yml +++ b/.github/workflows/manual-run.yml @@ -30,9 +30,15 @@ jobs: - name: Parse APIv1 run: npm explore google-font-metadata -- yarn parser:v1 - - name: Build fonts + - name: Build fonts APIv1 run: yarn build:googlev1 + - name: Parse APIv2 + run: npm explore google-font-metadata -- yarn parser:v2 + + - name: Build fonts APIv2 + run: yarn build:googlev2 + - name: Format files run: yarn format diff --git a/package.json b/package.json index 837ede496ef..5e75e5b136c 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,8 @@ "build:generic": "node scripts/generic/generic-font-packager.js", "build:googlev1": "node scripts/google/download-google-v1.js", "build:googlev2": "node scripts/google/download-google-v2.js", + "build:googlev1-force": "node scripts/google/download-google-v1.js force", + "build:googlev2-force": "node scripts/google/download-google-v2.js force", "parser:v1": "npm explore google-font-metadata -- yarn parser:v1", "parser:v2": "npm explore google-font-metadata -- yarn parser:v2", "readme-update:google": "node scripts/google/google-readme-updater.js", diff --git a/scripts/google/download-google-v1.js b/scripts/google/download-google-v1.js index f2442e86af9..76543ae4650 100644 --- a/scripts/google/download-google-v1.js +++ b/scripts/google/download-google-v1.js @@ -5,13 +5,15 @@ const shell = require(`shelljs`) const fontsv1 = require(`google-font-metadata/data/google-fonts-v1.json`) +const force = process.argv[2] + fs.ensureDirSync(`packages`) // Create an async queue object const processQueue = (fontid, cb) => { console.log(`Downloading ${fontid}`) shell.exec( - `node ./scripts/google/google-font-packager-v1.js ${fontid}`, + `node ./scripts/google/google-font-packager-v1.js ${fontid} ${force}`, () => { cb() } diff --git a/scripts/google/download-google-v2.js b/scripts/google/download-google-v2.js index 737d6b73725..22162771651 100644 --- a/scripts/google/download-google-v2.js +++ b/scripts/google/download-google-v2.js @@ -5,13 +5,15 @@ const shell = require(`shelljs`) const fontsv2 = require(`google-font-metadata`) +const force = process.argv[2] + fs.ensureDirSync(`packages`) // Create an async queue object const processQueue = (fontid, cb) => { console.log(`Downloading ${fontid}`) shell.exec( - `node ./scripts/google/google-font-packager-v2.js ${fontid}`, + `node ./scripts/google/google-font-packager-v2.js ${fontid} ${force}`, () => { cb() } diff --git a/scripts/google/google-font-packager-v1.js b/scripts/google/google-font-packager-v1.js index a3b34286952..dc839c547b4 100644 --- a/scripts/google/google-font-packager-v1.js +++ b/scripts/google/google-font-packager-v1.js @@ -7,13 +7,14 @@ const jsonfile = require(`jsonfile`) const apiFont = require(`google-font-metadata/data/google-fonts-v1.json`) const download = require(`./download-file`) -const { packageJson, fontFace, readme } = require(`./templates`) +const { fontFace } = require(`./templates`) const id = process.argv[2] if (!id) { console.warn(`Google Font ID has not been passed into packager.`) process.exit() } +const force = process.argv[3] const font = apiFont[id] @@ -33,7 +34,7 @@ if (fs.existsSync(`${fontDir}/metadata.json`)) { } // Processing each subset of given font ID. -if (changed) { +if (changed || force == "force") { // Wipe old font files preserving package.json if (fs.existsSync(`${fontDir}/package.json`)) { fs.copySync( diff --git a/scripts/google/google-font-packager-v2.js b/scripts/google/google-font-packager-v2.js index e46f5dc3cd9..6205a59cfee 100644 --- a/scripts/google/google-font-packager-v2.js +++ b/scripts/google/google-font-packager-v2.js @@ -14,6 +14,7 @@ if (!id) { console.warn(`Google Font ID has not been passed into packager.`) process.exit() } +const force = process.argv[3] const font = apiFont[id] @@ -33,7 +34,7 @@ if (fs.existsSync(`${fontDir}/metadata.json`)) { } // Processing each subset of given font ID. -if (changed) { +if (changed || force == "force") { fs.ensureDirSync(`./${fontDir}/files`) // Generate filenames @@ -177,7 +178,7 @@ if (changed) { } // If everything ran successfully, apply new updates to package. -if (changed) { +if (changed || force == "force") { // Write README.md const packageReadme = readme({ fontId: font.id, From 97244e63f67e070fcfaf767778f71bee5d718a5d Mon Sep 17 00:00:00 2001 From: Lotus Date: Sun, 2 Aug 2020 12:59:43 +0300 Subject: [PATCH 4/5] docs: improvements to package.json --- scripts/google/templates.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/scripts/google/templates.js b/scripts/google/templates.js index 6d9f18793f2..d289790730a 100644 --- a/scripts/google/templates.js +++ b/scripts/google/templates.js @@ -3,7 +3,7 @@ const _ = require(`lodash`) exports.packageJson = _.template( `{ "name": "fontsource-<%= fontId %>", - "version": "2.2.0", + "version": "3.0.0", "description": "<%= fontName %> font in NPM glory.", "main": "index.css", "keywords": [ @@ -19,8 +19,12 @@ exports.packageJson = _.template( ], "author": "Lotus ", "license": "MIT", - "repository": "https://github.com/fontsource/fontsource/tree/master/packages/<%= fontId %>", - "homepage": "https://github.com/fontsource/fontsource" + "homepage": "https://github.com/fontsource/fontsource/tree/master/packages/<%= fontId %>#readme", + "repository": { + "type" : "git", + "url" : "https://github.com/fontsource/fontsource.git", + "directory": "packages/<%= fontId %>" + } } ` ) From f230179ff9b657ffc3b20a74b51b896a1a7c9694 Mon Sep 17 00:00:00 2001 From: Lotus Date: Sun, 2 Aug 2020 13:04:48 +0300 Subject: [PATCH 5/5] docs: update changelog for 3.0.0 --- CHANGELOG.md | 33 +++++++++++++++++++++++++++++---- 1 file changed, 29 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e9e53320c64..f1ce2fad561 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,11 +4,24 @@ Fontsource will log all notable changes within this file. #### Patch (0.0.x) -These are not logged here as they are typically automatic updates from the source, such as Google, themselves. On occasion, patches may be applied from Fontsource, however, different fonts are likely to be associated with different versions per update and isn't accurately tracked here. +These occur when an automatic update is pushed from a source, such as Google, or Fontsource may apply patches. Due to version mismatching and lack of accurate tracking, a specific version for a Fontsource patch cannot be logged. Fixes are mentioned in each minor update instead. -#### Minor (0.x.x) +# 3.x Release -These updates are usually feature additions or changes from Fontsource that are logged below. +## 3.0.x + +### BREAKING CHANGES + +`import fontsource-` or `index.css` no longer defaults to contain ALL weights and styles for a font. It now only contains weight 400 with all styles included. This was changed to prevent fonts, such as Noto Sans JP, to counter-intuitively generate 1MB+ CSS files with the new unicode-range feature. + +Simply choose the necessary weights and styles from now on with `import fontsource-/.css` or `import fontsource-/-