diff --git a/client/package.json b/client/package.json index 727a088736..16713bfb7a 100644 --- a/client/package.json +++ b/client/package.json @@ -6,6 +6,7 @@ "scripts": { "dev": "webpack serve", "build": "webpack --mode development", + "build:prod": "webpack --mode production", "build:excalidraw": "node scripts/build.js" }, "dependencies": { @@ -98,6 +99,7 @@ "ts-loader": "^9.4.4", "typescript": "^4.9.4", "webpack": "^5.88.1", + "webpack-bundle-analyzer": "^4.10.1", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1", "webpack-plugin": "^1.0.5" diff --git a/client/public/fonts.css b/client/public/fonts.css index 166afd8dd5..c787cc24d5 100644 --- a/client/public/fonts.css +++ b/client/public/fonts.css @@ -1,38 +1,38 @@ /* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */ @font-face { font-family: "Virgil"; - src: url("Virgil.woff2"); + src: url("./fonts/Virgil.woff2")format("woff2"), url("./fonts/FG_Virgil.ttf")format("truetype"); font-display: swap; } /* https://github.com/microsoft/cascadia-code */ @font-face { font-family: "Cascadia"; - src: url("Cascadia.woff2"); + src: url("./fonts/Cascadia.woff2")format("woff2"), url("./fonts/Cascadia.ttf")format("truetype"); font-display: swap; } @font-face { font-family: "Assistant"; - src: url("Assistant-Regular.woff2"); + src: url("./fonts/Assistant-Regular.woff2")format("woff2"); font-display: swap; font-weight: 400; } @font-face { font-family: "Assistant"; - src: url("Assistant-Medium.woff2"); + src: url("./fonts/Assistant-Medium.woff2"); font-display: swap; font-weight: 500; } @font-face { font-family: "Assistant"; - src: url("Assistant-SemiBold.woff2"); + src: url("./fonts/Assistant-SemiBold.woff2"); font-display: swap; font-weight: 600; } @font-face { font-family: "Assistant"; - src: url("Assistant-Bold.woff2"); + src: url("./fonts/Assistant-Bold.woff2"); font-display: swap; font-weight: 700; } diff --git a/client/public/Assistant-Bold.woff2 b/client/public/fonts/Assistant-Bold.woff2 similarity index 100% rename from client/public/Assistant-Bold.woff2 rename to client/public/fonts/Assistant-Bold.woff2 diff --git a/client/public/Assistant-Medium.woff2 b/client/public/fonts/Assistant-Medium.woff2 similarity index 100% rename from client/public/Assistant-Medium.woff2 rename to client/public/fonts/Assistant-Medium.woff2 diff --git a/client/public/Assistant-Regular.woff2 b/client/public/fonts/Assistant-Regular.woff2 similarity index 100% rename from client/public/Assistant-Regular.woff2 rename to client/public/fonts/Assistant-Regular.woff2 diff --git a/client/public/Assistant-SemiBold.woff2 b/client/public/fonts/Assistant-SemiBold.woff2 similarity index 100% rename from client/public/Assistant-SemiBold.woff2 rename to client/public/fonts/Assistant-SemiBold.woff2 diff --git a/client/public/Cascadia.ttf b/client/public/fonts/Cascadia.ttf similarity index 100% rename from client/public/Cascadia.ttf rename to client/public/fonts/Cascadia.ttf diff --git a/client/public/Cascadia.woff2 b/client/public/fonts/Cascadia.woff2 similarity index 100% rename from client/public/Cascadia.woff2 rename to client/public/fonts/Cascadia.woff2 diff --git a/client/public/FG_Virgil.ttf b/client/public/fonts/FG_Virgil.ttf similarity index 100% rename from client/public/FG_Virgil.ttf rename to client/public/fonts/FG_Virgil.ttf diff --git a/client/public/FG_Virgil.woff2 b/client/public/fonts/FG_Virgil.woff2 similarity index 100% rename from client/public/FG_Virgil.woff2 rename to client/public/fonts/FG_Virgil.woff2 diff --git a/client/public/Virgil.woff2 b/client/public/fonts/Virgil.woff2 similarity index 100% rename from client/public/Virgil.woff2 rename to client/public/fonts/Virgil.woff2 diff --git a/client/src/components/ExportDialog.scss b/client/src/components/ExportDialog.scss index 3cb31c4843..5242657c87 100644 --- a/client/src/components/ExportDialog.scss +++ b/client/src/components/ExportDialog.scss @@ -81,6 +81,7 @@ margin: 1em auto; align-items: flex-start; flex-direction: column; + font-family: Virgil; .TextInput { width: auto; diff --git a/client/src/css/styles.scss b/client/src/css/styles.scss index 8dafbfbdfa..bfd5fdd486 100644 --- a/client/src/css/styles.scss +++ b/client/src/css/styles.scss @@ -8,7 +8,7 @@ } .excalidraw { - --ui-font: Assistant, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, + --ui-font: Virgil, Assistant, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-family: var(--ui-font); diff --git a/client/src/data/index.ts b/client/src/data/index.ts index 20ba75ebe5..68bc560acf 100644 --- a/client/src/data/index.ts +++ b/client/src/data/index.ts @@ -79,6 +79,7 @@ export const exportCanvas = async ( tempCanvas.remove(); if (appState.exportEmbedScene) { blob = await ( + //here right pth from the webpack is not being imported, so export isnt working await import(/* webpackChunkName: "image" */ "./image") ).encodePngMetadata({ blob, @@ -104,7 +105,7 @@ export const exportCanvas = async ( throw error; } // TypeError *probably* suggests ClipboardItem not defined, which - // people on Firefox can enable through a flag, so let's tell them. + // people on Firefox can enable through a flag, so let's tell them. if (isFirefox && error.name === "TypeError") { throw new Error( `${t("alerts.couldNotCopyToClipboard")}\n\n${t( diff --git a/client/src/element/Hyperlink.tsx b/client/src/element/Hyperlink.tsx index f435ebb590..c5d7da149f 100644 --- a/client/src/element/Hyperlink.tsx +++ b/client/src/element/Hyperlink.tsx @@ -23,7 +23,7 @@ import clsx from "clsx"; import { KEYS } from "../keys"; import { DEFAULT_LINK_SIZE } from "../renderer/renderElement"; import { rotate } from "../math"; -import { EVENT, HYPERLINK_TOOLTIP_DELAY, MIME_TYPES } from "../constants"; +import { EVENT, FONT_FAMILY, HYPERLINK_TOOLTIP_DELAY, MIME_TYPES } from "../constants"; import { Bounds } from "./bounds"; import { getTooltipDiv, updateTooltipPosition } from "../components/Tooltip"; import { getSelectedElements } from "../scene"; @@ -143,6 +143,7 @@ export const Hyperlink = ({ left: `${x}px`, width: CONTAINER_WIDTH, padding: CONTAINER_PADDING, + font: `${FONT_FAMILY}`, }} > {isEditing ? ( diff --git a/client/src/scene/export.ts b/client/src/scene/export.ts index f31ba601dd..ea25a46102 100644 --- a/client/src/scene/export.ts +++ b/client/src/scene/export.ts @@ -138,7 +138,7 @@ export const exportToSvg = async ( if (assetPath?.startsWith("/")) { assetPath = assetPath.replace("/", `${window.location.origin}/`); } - assetPath = `${assetPath}/dist/excalidraw-assets/`; + assetPath = `${assetPath}/dist/`; } svgRoot.innerHTML = ` ${SVG_EXPORT_TAG} diff --git a/client/webpack.config.js b/client/webpack.config.js index ffc5e5d64c..6ed957ddea 100644 --- a/client/webpack.config.js +++ b/client/webpack.config.js @@ -1,6 +1,9 @@ import path from "path"; import webpack from "webpack"; import CopyPlugin from "copy-webpack-plugin"; +import miniCssExtractPlugin from "mini-css-extract-plugin"; +// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; +import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer"; const isEnvDevelopment = process.env.NODE_ENV !== "production"; const isEnvProduction = process.env.NODE_ENV === "production"; @@ -14,7 +17,9 @@ export default { output: { path: path.resolve(process.cwd(), "dist"), filename: "bundle.js", - clean: true, + clean: { + keep: /ignored\/dir\//, // Keep these assets under 'ignored/dir'. + }, }, resolve: { fallback: { @@ -31,7 +36,7 @@ export default { test: /\.scss$/, use: [ // Adds the styles to the DOM by injecting a