Skip to content

Commit ba6a1af

Browse files
lexoyolexoyo
committed
support alternative dropin replacements of google fonts
1 parent 50acca2 commit ba6a1af

File tree

7 files changed

+115
-13
lines changed

7 files changed

+115
-13
lines changed

‎.gitignore

-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,4 @@ private/
33
/locale
44
node_modules/
55
*.log
6-
_index.html
76
stats.json

‎README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ Custom Fonts plugin for grapesjs
88

99
Links
1010

11-
* [DEMO on Codepen](https://codepen.io/lexoyo/pen/zYLWdxY)
11+
* [DEMO on Codepen](https://codepen.io/lexoyo/full/zYLWdxY)
1212
* [Npm package](https://www.npmjs.com/package/@silexlabs/grapesjs-fonts)
1313
* [Discussion about ongoing developments](https://github.com/artf/grapesjs/discussions/4858#discussioncomment-4756119)
1414

@@ -28,6 +28,7 @@ The plugin currently has these features
2828
* [x] Integration with google API
2929
* [x] Store google fonts list in local storage for performance and API quotas
3030
* [x] Generate HTML imports for the final website
31+
* [x] Support [Google fonts proxies, e.g fontlay](https://fontlay.com/) and a [privacy-friendly drop-in replacement for Google Fonts, e.g coollabsio's fonts server](https://github.com/coollabsio/fonts)
3132
* [ ] Generate CSS imports for the final website
3233
* [ ] Handle variants and weights
3334
* [ ] Google fonts V3 API
@@ -132,6 +133,7 @@ Also you should style the dialog:
132133
| Option | Description | Default |
133134
|-|-|-
134135
| `api_key` | Google fonts API key, [see this doc to get an API key](https://developers.google.com/fonts/docs/developer_api#APIKey) | Required |
136+
| `server_url` | Google fonts server or a free [privacy-friendly drop-in replacement for Google Fonts](https://github.com/coollabsio/fonts) or [a proxy server to speed up the load and protect privacy](https://fontlay.com/) | `https://fonts.googleapis.com` |
135137

136138
## Download
137139

‎_index.html

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Test fonts</title>
6+
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
7+
<script src="https://unpkg.com/grapesjs"></script>
8+
<script src="https://unpkg.com/grapesjs-preset-webpage"></script>
9+
<style>
10+
body,
11+
html {
12+
margin: 0;
13+
height: 100%;
14+
}
15+
16+
.grapesjs-fonts select {
17+
background-color: #352d2f;
18+
color: #b9a5a6;
19+
padding: 5px;
20+
border: none;
21+
}
22+
23+
.grapesjs-fonts input,
24+
.grapesjs-fonts button {
25+
background-color: #352d2f;
26+
color: #b9a5a6;
27+
padding: 5px;
28+
border: none;
29+
}
30+
31+
.grapesjs-fonts .silex-bar {
32+
display: flex;
33+
}
34+
35+
.grapesjs-fonts .silex-bar>* {
36+
margin: 5px;
37+
}
38+
39+
.grapesjs-fonts input {}
40+
41+
.grapesjs-fonts button {
42+
padding: 5px;
43+
margin: 5px;
44+
padding-top: 8px;
45+
}
46+
47+
.grapesjs-fonts .silex-list__item__footer {
48+
display: flex;
49+
justify-content: flex-end;
50+
}
51+
</style>
52+
</head>
53+
<body>
54+
<div id='basic-actions' class="panel__basic-actions" style="z-index: 9; left: 120px;"></div>
55+
<div id="gjs"></div>
56+
<script type="text/javascript">
57+
window.addEventListener('load', () => {
58+
var editor = grapesjs.init({
59+
container: '#gjs',
60+
fromElement: true,
61+
height: '100%',
62+
storageManager: { autoload: 0 },
63+
plugins: ['grapesjs-preset-webpage', '@silexlabs/grapesjs-fonts'],
64+
pluginsOpts: {
65+
'gjs-preset-webpage': {
66+
modalImportTitle: 'Import Template',
67+
modalImportButton: 'Import',
68+
modalImportLabel: '',
69+
modalImportContent: '',
70+
importViewerOptions: {},
71+
},
72+
'@silexlabs/grapesjs-fonts': {
73+
api_key: 'AIzaSyAdJTYSLPlKz4w5Iqyy-JAF2o8uQKd1FKc',
74+
},
75+
}
76+
});
77+
editor.on("load", () => {
78+
editor.Panels.addPanel({
79+
id: "basic-actions",
80+
el: ".panel__basic-actions",
81+
buttons: [
82+
{
83+
id: "create-button",
84+
label: "Open font dialog",
85+
command(editor) {
86+
editor.runCommand("open-fonts");
87+
}
88+
}
89+
]
90+
});
91+
})
92+
})
93+
</script>
94+
</body>
95+
</html>

‎dist/index.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@
2222
"typography"
2323
],
2424
"devDependencies": {
25-
"eslint": "^8.53.0",
25+
"eslint": "^8.57.0",
2626
"grapesjs-cli": "^4.1.3"
2727
},
2828
"dependencies": {
29-
"backbone": "^1.5.0",
30-
"grapesjs": "^0.21.7",
31-
"lit-html": "^3.0.2"
29+
"backbone": "^1.6.0",
30+
"grapesjs": "^0.21.10",
31+
"lit-html": "^3.1.2"
3232
},
3333
"license": "GPL-3.0"
3434
}

‎src/fonts.js

+10-4
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@ let _fontsList
2121
let fonts
2222
let defaults = []
2323

24+
/**
25+
* Options
26+
*/
27+
let fontServer = 'https://fonts.googleapis.com'
28+
2429
/**
2530
* Load available fonts only once per session
2631
* Use local storage
@@ -76,6 +81,7 @@ async function loadFontList(url) {
7681

7782
export const fontsDialogPlugin = (editor, opts) => {
7883
defaults = editor.StyleManager.getBuiltIn('font-family').options
84+
if(opts.server_url) fontServer = opts.server_url
7985
if(!opts.api_key) throw new Error(editor.I18n.t('grapesjs-fonts.You must provide Google font api key'))
8086
editor.Commands.add(cmdOpenFonts, {
8187
/* eslint-disable-next-line */
@@ -91,7 +97,7 @@ export const fontsDialogPlugin = (editor, opts) => {
9197
modal.setContent(el)
9298
loadFonts(editor)
9399
displayFonts(editor, opts, [])
94-
loadFontList('https://www.googleapis.com/webfonts/v1/webfonts?key=' + opts.api_key)
100+
loadFontList(`${ fontServer }/webfonts/v1/webfonts?key=${ opts.api_key }`)
95101
.then(fontsList => { // the run command will terminate before this is done, better for performance
96102
displayFonts(editor, opts, fontsList)
97103
const form = el.querySelector('form')
@@ -314,17 +320,17 @@ export function getHtml(fonts, attr = '') {
314320
// const axis = v.replace(/\d+/g, '')
315321
// return `${axis},wght@${weight}`
316322
// }).join(',')
317-
// insert(doc, GOOGLE_FONTS_ATTR, 'link', { 'href': `https://fonts.googleapis.com/css2?family=${f.name.replace(/ /g, '+')}${variants}&display=swap`, 'rel': 'stylesheet' })
323+
// insert(doc, GOOGLE_FONTS_ATTR, 'link', { 'href': `${ fontServer }/css2?family=${f.name.replace(/ /g, '+')}${variants}&display=swap`, 'rel': 'stylesheet' })
318324
//})
319325

320326
// Google fonts v1
321327
// https://developers.google.com/fonts/docs/getting_started#a_quick_example
322-
const preconnect = `<link href="https://fonts.googleapis.com" rel="preconnect" ${attr}><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin ${attr}>`
328+
const preconnect = `<link href="${ fontServer }" rel="preconnect" ${attr}><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin ${attr}>`
323329
const links = fonts
324330
.map(f => {
325331
const prefix = f.variants.length ? ':' : ''
326332
const variants = prefix + f.variants.map(v => v.replace(/\d+/g, '')).filter(v => !!v).join(',')
327-
return `<link href="https://fonts.googleapis.com/css?family=${f.name.replace(/ /g, '+')}${variants}&display=swap" rel="stylesheet" ${attr}>`
333+
return `<link href="${ fontServer }/css?family=${f.name.replace(/ /g, '+')}${variants}&display=swap" rel="stylesheet" ${attr}>`
328334
})
329335
.join('')
330336

0 commit comments

Comments
 (0)