serve fonts locally via fontsource (#1091)
* [fix] serve fonts locally via fontsource (#1077) * fix vscode extension build Co-authored-by: zfgrnzfsberire <noreply@github.com>
This commit is contained in:
parent
b74a6d71f1
commit
065c3ddc4a
10 changed files with 48 additions and 96 deletions
|
@ -41,6 +41,10 @@ async function main() {
|
|||
define: {
|
||||
'process.env.NODE_ENV': '"production"',
|
||||
},
|
||||
loader: {
|
||||
'.woff2': 'dataurl',
|
||||
'.woff': 'dataurl',
|
||||
},
|
||||
})
|
||||
|
||||
jslog(`✔ ${pkg.name}: Build completed.`)
|
||||
|
|
|
@ -38,6 +38,10 @@ async function main() {
|
|||
target: 'es6',
|
||||
jsxFactory: 'React.createElement',
|
||||
jsxFragment: 'React.Fragment',
|
||||
loader: {
|
||||
'.woff2': 'dataurl',
|
||||
'.woff': 'dataurl',
|
||||
},
|
||||
define: {
|
||||
'process.env.NODE_ENV': '"production"',
|
||||
},
|
||||
|
|
|
@ -55,6 +55,10 @@ async function main() {
|
|||
},
|
||||
tsconfig: './tsconfig.json',
|
||||
external: ['vscode'],
|
||||
loader: {
|
||||
'.woff2': 'dataurl',
|
||||
'.woff': 'dataurl',
|
||||
},
|
||||
})
|
||||
jslog(`Built package.`)
|
||||
} catch (e) {
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import '@fontsource/recursive'
|
||||
import Head from 'next/head'
|
||||
import type React from 'react'
|
||||
import '~styles/globals.css'
|
||||
|
|
|
@ -1,36 +1,3 @@
|
|||
@font-face {
|
||||
font-family: 'Recursive';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUlTGZnI14ZeY.woff2)
|
||||
format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
|
||||
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Recursive';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUlTGZnI14ZeY.woff2)
|
||||
format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
|
||||
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Recursive Mono';
|
||||
font-style: normal;
|
||||
font-weight: 420;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImqvTxvU-MXGX2fSqasNfUlTGZnI14ZeY.woff2)
|
||||
format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
|
||||
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
|
|
|
@ -36,6 +36,11 @@
|
|||
"react-dom": ">=16.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource/caveat-brush": "^4.5.9",
|
||||
"@fontsource/crimson-pro": "^4.5.10",
|
||||
"@fontsource/recursive": "^4.5.11",
|
||||
"@fontsource/source-code-pro": "^4.5.12",
|
||||
"@fontsource/source-sans-pro": "^4.5.11",
|
||||
"@radix-ui/react-alert-dialog": "^1.0.0",
|
||||
"@radix-ui/react-context-menu": "^1.0.0",
|
||||
"@radix-ui/react-dialog": "^1.0.0",
|
||||
|
|
|
@ -1,3 +1,8 @@
|
|||
import '@fontsource/caveat-brush'
|
||||
import '@fontsource/crimson-pro'
|
||||
import '@fontsource/recursive'
|
||||
import '@fontsource/source-code-pro'
|
||||
import '@fontsource/source-sans-pro'
|
||||
import { CursorComponent, Renderer } from '@tldraw/core'
|
||||
import * as React from 'react'
|
||||
import { ErrorBoundary as _Errorboundary } from 'react-error-boundary'
|
||||
|
@ -16,7 +21,6 @@ import {
|
|||
DialogState,
|
||||
TldrawContext,
|
||||
useKeyboardShortcuts,
|
||||
useStylesheet,
|
||||
useTldrawApp,
|
||||
useTranslation,
|
||||
} from '~hooks'
|
||||
|
@ -614,7 +618,6 @@ const OneOff = React.memo(function OneOff({
|
|||
focusableRef: React.RefObject<HTMLDivElement>
|
||||
}) {
|
||||
useKeyboardShortcuts(focusableRef)
|
||||
useStylesheet()
|
||||
|
||||
React.useEffect(() => {
|
||||
if (autofocus) {
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
export * from './useFileSystem'
|
||||
export * from './useFileSystemHandlers'
|
||||
export * from './useKeyboardShortcuts'
|
||||
export * from './useStylesheet'
|
||||
export * from './useTheme'
|
||||
export * from './useTldrawApp'
|
||||
export * from './useTranslation'
|
||||
|
|
|
@ -1,60 +0,0 @@
|
|||
import * as React from 'react'
|
||||
|
||||
const styles = new Map<string, HTMLStyleElement>()
|
||||
|
||||
const UID = `tldraw-fonts`
|
||||
|
||||
const CSS = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Source+Code+Pro&family=Source+Sans+Pro&family=Crimson+Pro&display=block');
|
||||
|
||||
@font-face {
|
||||
font-family: 'Recursive';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUlTGZnI14ZeY.woff2)
|
||||
format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
|
||||
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Recursive';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUlTGZnI14ZeY.woff2)
|
||||
format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
|
||||
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Recursive Mono';
|
||||
font-style: normal;
|
||||
font-weight: 420;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImqvTxvU-MXGX2fSqasNfUlTGZnI14ZeY.woff2)
|
||||
format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
|
||||
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
`
|
||||
|
||||
export function useStylesheet() {
|
||||
React.useLayoutEffect(() => {
|
||||
if (styles.get(UID)) return
|
||||
const style = document.createElement('style')
|
||||
style.innerHTML = CSS
|
||||
style.setAttribute('id', UID)
|
||||
document.head.appendChild(style)
|
||||
styles.set(UID, style)
|
||||
|
||||
return () => {
|
||||
if (style && document.head.contains(style)) {
|
||||
document.head.removeChild(style)
|
||||
styles.delete(UID)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
}
|
25
yarn.lock
25
yarn.lock
|
@ -1432,6 +1432,31 @@
|
|||
"@floating-ui/dom" "^0.5.3"
|
||||
use-isomorphic-layout-effect "^1.1.1"
|
||||
|
||||
"@fontsource/caveat-brush@^4.5.9":
|
||||
version "4.5.9"
|
||||
resolved "https://registry.yarnpkg.com/@fontsource/caveat-brush/-/caveat-brush-4.5.9.tgz#5e2a23cc9344a911e0974a489dcc7976047b631e"
|
||||
integrity sha512-H4uDBRSmTYX0Pman53VO8IP8JVnGd2wD4YyXHY0KTQX6jE0rs+UHuzraKGF8WTqBO7854VRCq09sPDhvLvqicQ==
|
||||
|
||||
"@fontsource/crimson-pro@^4.5.10":
|
||||
version "4.5.10"
|
||||
resolved "https://registry.yarnpkg.com/@fontsource/crimson-pro/-/crimson-pro-4.5.10.tgz#d23fbead2db6eae00faf99de92bce41fa2f0873c"
|
||||
integrity sha512-4L7B+woKIWiwOQrCvvpAQeEob3xoq5fVLTyt0YhXVafy2KWBTCcFVo/Y9n0UpDtGso9jN8pMo3SrYa3V6IayVw==
|
||||
|
||||
"@fontsource/recursive@^4.5.11":
|
||||
version "4.5.11"
|
||||
resolved "https://registry.yarnpkg.com/@fontsource/recursive/-/recursive-4.5.11.tgz#adbdcca28de51520ea329aa3e2e174ceaf1a0cf3"
|
||||
integrity sha512-pAb+Qk1J0BysC6NTaaGDnhoorT4F8ZZKScWRUfqLpXP/wqH/lp9ccUcTxpS/pMawvmjZyNoKvQucvOvZNscUgw==
|
||||
|
||||
"@fontsource/source-code-pro@^4.5.12":
|
||||
version "4.5.12"
|
||||
resolved "https://registry.yarnpkg.com/@fontsource/source-code-pro/-/source-code-pro-4.5.12.tgz#4ca4dffb485f3f2768dd13157cb09a9b134a9cd1"
|
||||
integrity sha512-6r1dykX7SH1Orm7xUh4sA8pjM1uNPKo9fV+y9/wxS+y/fwN+sMf6b1jHDUTmfEtw1OxlTaHGrr2I7dGeNqxdPA==
|
||||
|
||||
"@fontsource/source-sans-pro@^4.5.11":
|
||||
version "4.5.11"
|
||||
resolved "https://registry.yarnpkg.com/@fontsource/source-sans-pro/-/source-sans-pro-4.5.11.tgz#06b3f08ef1a5250d78c8198e5a0482b5d87a4d52"
|
||||
integrity sha512-f7iw44q1EjBv3MNcHCGAgrW/QVyweaEouFsJzykPhTOGnZFSwFJRISToXornOmuAy7xUUGiVdqOLiykgZoYB8A==
|
||||
|
||||
"@formatjs/ecma402-abstract@1.12.0":
|
||||
version "1.12.0"
|
||||
resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.12.0.tgz#2fb5e8983d5fae2fad9ec6c77aec1803c2b88d8e"
|
||||
|
|
Loading…
Reference in a new issue