PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

serve fonts locally via fontsource (#1091)

Browse source 
* [fix] serve fonts locally via fontsource (#1077)

* fix vscode extension build

Co-authored-by: zfgrnzfsberire <noreply@github.com>
This commit is contained in:
Daniel Molkentin 2022-12-31 00:56:33 +01:00 committed by GitHub
parent b74a6d71f1
commit 065c3ddc4a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 48 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/vscode/editor/scripts/build.mjs
View file

@ -41,6 +41,10 @@ async function main() {
define: { define: {
'process.env.NODE_ENV': '"production"', 'process.env.NODE_ENV': '"production"',
}, },
loader: {
'.woff2': 'dataurl',
'.woff': 'dataurl',
},
}) })
jslog(`✔ ${pkg.name}: Build completed.`) jslog(`✔ ${pkg.name}: Build completed.`)

4
apps/vscode/editor/scripts/dev.mjs
View file

@ -38,6 +38,10 @@ async function main() {
target: 'es6', target: 'es6',
jsxFactory: 'React.createElement', jsxFactory: 'React.createElement',
jsxFragment: 'React.Fragment', jsxFragment: 'React.Fragment',
loader: {
'.woff2': 'dataurl',
'.woff': 'dataurl',
},
define: { define: {
'process.env.NODE_ENV': '"production"', 'process.env.NODE_ENV': '"production"',
}, },

4
apps/vscode/extension/scripts/build.js
View file

@ -55,6 +55,10 @@ async function main() {
}, },
tsconfig: './tsconfig.json', tsconfig: './tsconfig.json',
external: ['vscode'], external: ['vscode'],
loader: {
'.woff2': 'dataurl',
'.woff': 'dataurl',
},
}) })
jslog(`Built package.`) jslog(`Built package.`)
} catch (e) { } catch (e) {

1
apps/www/pages/_app.tsx
View file

@ -1,3 +1,4 @@
import '@fontsource/recursive'
import Head from 'next/head' import Head from 'next/head'
import type React from 'react' import type React from 'react'
import '~styles/globals.css' import '~styles/globals.css'

33
apps/www/styles/globals.css
View file

@ -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, html,
body { body {
padding: 0; padding: 0;

5
packages/tldraw/package.json
View file

@ -36,6 +36,11 @@
"react-dom": ">=16.8" "react-dom": ">=16.8"
}, },
"dependencies": { "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-alert-dialog": "^1.0.0",
"@radix-ui/react-context-menu": "^1.0.0", "@radix-ui/react-context-menu": "^1.0.0",
"@radix-ui/react-dialog": "^1.0.0", "@radix-ui/react-dialog": "^1.0.0",

7
packages/tldraw/src/Tldraw.tsx
View file

@ -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 { CursorComponent, Renderer } from '@tldraw/core'
import * as React from 'react' import * as React from 'react'
import { ErrorBoundary as _Errorboundary } from 'react-error-boundary' import { ErrorBoundary as _Errorboundary } from 'react-error-boundary'
@ -16,7 +21,6 @@ import {
DialogState, DialogState,
TldrawContext, TldrawContext,
useKeyboardShortcuts, useKeyboardShortcuts,
useStylesheet,
useTldrawApp, useTldrawApp,
useTranslation, useTranslation,
} from '~hooks' } from '~hooks'
@ -614,7 +618,6 @@ const OneOff = React.memo(function OneOff({
focusableRef: React.RefObject<HTMLDivElement> focusableRef: React.RefObject<HTMLDivElement>
}) { }) {
useKeyboardShortcuts(focusableRef) useKeyboardShortcuts(focusableRef)
useStylesheet()
React.useEffect(() => { React.useEffect(() => {
if (autofocus) { if (autofocus) {

1
packages/tldraw/src/hooks/index.ts
View file

@ -1,7 +1,6 @@
export * from './useFileSystem' export * from './useFileSystem'
export * from './useFileSystemHandlers' export * from './useFileSystemHandlers'
export * from './useKeyboardShortcuts' export * from './useKeyboardShortcuts'
export * from './useStylesheet'
export * from './useTheme' export * from './useTheme'
export * from './useTldrawApp' export * from './useTldrawApp'
export * from './useTranslation' export * from './useTranslation'

60
packages/tldraw/src/hooks/useStylesheet.ts
View file

@ -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
View file

@ -1432,6 +1432,31 @@
"@floating-ui/dom" "^0.5.3" "@floating-ui/dom" "^0.5.3"
use-isomorphic-layout-effect "^1.1.1" 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": "@formatjs/ecma402-abstract@1.12.0":
version "1.12.0" version "1.12.0"
resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.12.0.tgz#2fb5e8983d5fae2fad9ec6c77aec1803c2b88d8e" resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.12.0.tgz#2fb5e8983d5fae2fad9ec6c77aec1803c2b88d8e"