diff --git a/apps/client/src/widgets/note_icon.tsx b/apps/client/src/widgets/note_icon.tsx index 9a33ad752..8ff5fb082 100644 --- a/apps/client/src/widgets/note_icon.tsx +++ b/apps/client/src/widgets/note_icon.tsx @@ -72,6 +72,7 @@ function NoteIconList({ note, dropdownRef }: { useEffect(() => { async function loadIcons() { + console.time("Load icons for note icon picker"); // Filter by text and/or category. let icons: IconData["icons"] = [ ...glob.iconRegistry.sources.flatMap(s => s.icons.map((i) => ({ @@ -113,6 +114,7 @@ function NoteIconList({ note, dropdownRef }: { iconToCount, icons }); + console.timeEnd("Load icons for note icon picker"); } loadIcons(); diff --git a/apps/icon-pack-builder/src/index.ts b/apps/icon-pack-builder/src/index.ts index 1f7d4fa0e..d356aeb2e 100644 --- a/apps/icon-pack-builder/src/index.ts +++ b/apps/icon-pack-builder/src/index.ts @@ -4,6 +4,7 @@ import cls from "@triliumnext/server/src/services/cls.js"; import type { IconPackData } from "./provider"; import mdi from "./providers/mdi"; +import phosphor from "./providers/phosphor"; process.env.TRILIUM_INTEGRATION_TEST = "memory-no-store"; process.env.TRILIUM_RESOURCE_DIR = "../server/src"; @@ -55,7 +56,8 @@ async function main() { } const builtIconPacks = [ - mdi() + // mdi() + phosphor() ]; await Promise.all(builtIconPacks.map(buildIconPack)); } diff --git a/apps/icon-pack-builder/src/providers/mdi.ts b/apps/icon-pack-builder/src/providers/mdi.ts index 370f97fa2..b9e9a37de 100644 --- a/apps/icon-pack-builder/src/providers/mdi.ts +++ b/apps/icon-pack-builder/src/providers/mdi.ts @@ -2,10 +2,10 @@ import { readFileSync } from "fs"; import { join } from "path"; import type { IconPackData } from "../provider"; -import { extractClassNamesFromCss } from "../utils"; +import { extractClassNamesFromCss, getModulePath } from "../utils"; export default function buildIcons(): IconPackData { - const baseDir = join(__dirname, "../../../../node_modules/@mdi/font"); + const baseDir = getModulePath("@mdi/font"); const cssFilePath = join(baseDir, "css", "materialdesignicons.min.css"); const cssFileContent = readFileSync(cssFilePath, "utf-8"); diff --git a/apps/icon-pack-builder/src/providers/phosphor.ts b/apps/icon-pack-builder/src/providers/phosphor.ts new file mode 100644 index 000000000..aa1f3c66d --- /dev/null +++ b/apps/icon-pack-builder/src/providers/phosphor.ts @@ -0,0 +1,38 @@ +import { readFileSync } from "node:fs"; +import { join } from "node:path"; + +import { IconPackData } from "../provider"; +import { getModulePath } from "../utils"; + +export default function buildIcons(): IconPackData { + const packName = "regular"; + const baseDir = join(getModulePath("@phosphor-icons/web"), "src", packName); + const iconIndex = JSON.parse(readFileSync(join(baseDir, "selection.json"), "utf-8")); + const icons: IconPackData["manifest"]["icons"] = {}; + + for (const icon of iconIndex.icons) { + let name = icon.properties.name; + if (name.endsWith(`-${packName}`)) { + name = name.split("-").slice(0, -1).join("-"); + } + + const id = `ph-${name}`; + icons[id] = { + glyph: `${String.fromCharCode(icon.properties.code)}`, + terms: [ name ] + }; + } + + return { + name: "Phosphor Icons", + prefix: "ph", + manifest: { + icons + }, + fontFile: { + name: "phosphor-webfont.woff2", + mime: "font/woff2", + content: readFileSync(join(baseDir, "Phosphor.woff2")) + } + }; +} diff --git a/apps/icon-pack-builder/src/utils.ts b/apps/icon-pack-builder/src/utils.ts index c3d68d4e2..b88dc0e6b 100644 --- a/apps/icon-pack-builder/src/utils.ts +++ b/apps/icon-pack-builder/src/utils.ts @@ -1,3 +1,5 @@ +import { join } from "path"; + import { IconPackManifest } from "../../server/src/services/icon_packs"; export function extractClassNamesFromCss(css: string, prefix: string): IconPackManifest["icons"] { @@ -18,3 +20,7 @@ export function extractClassNamesFromCss(css: string, prefix: string): IconPackM } return icons; } + +export function getModulePath(moduleName: string): string { + return join(__dirname, "../../../node_modules", moduleName); +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e401a60ea..b11794447 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -485,9 +485,9 @@ importers: apps/icon-pack-builder: devDependencies: - '@mdi/font': - specifier: 7.4.47 - version: 7.4.47 + '@phosphor-icons/web': + specifier: 2.1.2 + version: 2.1.2 apps/server: dependencies: @@ -3742,9 +3742,6 @@ packages: '@marijn/find-cluster-break@1.0.2': resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==} - '@mdi/font@7.4.47': - resolution: {integrity: sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==} - '@mdn/browser-compat-data@5.7.6': resolution: {integrity: sha512-7xdrMX0Wk7grrTZQwAoy1GkvPMFoizStUoL+VmtUkAxegbCCec+3FKwOM6yc/uGU5+BEczQHXAlWiqvM8JeENg==} @@ -4038,6 +4035,9 @@ packages: resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==} engines: {node: '>= 10.0.0'} + '@phosphor-icons/web@2.1.2': + resolution: {integrity: sha512-rPAR9o/bEcp4Cw4DEeZHXf+nlGCMNGkNDRizYHM47NLxz9vvEHp/Tt6FMK1NcWadzw/pFDPnRBGi/ofRya958A==} + '@pkgjs/parseargs@0.11.0': resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} @@ -15221,8 +15221,6 @@ snapshots: '@ckeditor/ckeditor5-core': 47.3.0 '@ckeditor/ckeditor5-utils': 47.3.0 ckeditor5: 47.3.0 - transitivePeerDependencies: - - supports-color '@ckeditor/ckeditor5-code-block@47.3.0(patch_hash=2361d8caad7d6b5bddacc3a3b4aa37dbfba260b1c1b22a450413a79c1bb1ce95)': dependencies: @@ -15440,6 +15438,8 @@ snapshots: '@ckeditor/ckeditor5-utils': 47.3.0 ckeditor5: 47.3.0 es-toolkit: 1.39.5 + transitivePeerDependencies: + - supports-color '@ckeditor/ckeditor5-editor-multi-root@47.3.0': dependencies: @@ -15949,8 +15949,6 @@ snapshots: '@ckeditor/ckeditor5-ui': 47.3.0 '@ckeditor/ckeditor5-utils': 47.3.0 ckeditor5: 47.3.0 - transitivePeerDependencies: - - supports-color '@ckeditor/ckeditor5-restricted-editing@47.3.0': dependencies: @@ -18122,8 +18120,6 @@ snapshots: '@marijn/find-cluster-break@1.0.2': {} - '@mdi/font@7.4.47': {} - '@mdn/browser-compat-data@5.7.6': {} '@mermaid-js/layout-elk@0.2.0(mermaid@11.12.2)': @@ -18464,6 +18460,8 @@ snapshots: '@parcel/watcher-win32-x64': 2.5.1 optional: true + '@phosphor-icons/web@2.1.2': {} + '@pkgjs/parseargs@0.11.0': optional: true diff --git a/scripts/icon-packs/phosphor.js b/scripts/icon-packs/phosphor.js deleted file mode 100644 index 062e76538..000000000 --- a/scripts/icon-packs/phosphor.js +++ /dev/null @@ -1,27 +0,0 @@ -import { join } from "node:path"; -import { readFileSync } from "node:fs"; - -function processIconPack(packName) { - const path = join(packName); - const selectionMeta = JSON.parse(readFileSync(join(path, "selection.json"), "utf-8")); - const icons = {}; - - for (const icon of selectionMeta.icons) { - let name = icon.properties.name; - if (name.endsWith(`-${packName}`)) { - name = name.split("-").slice(0, -1).join("-"); - } - - const id = `ph-${name}`; - icons[id] = { - glyph: `${String.fromCharCode(icon.properties.code)}`, - terms: [ name ] - }; - } - - return JSON.stringify({ - icons - }, null, 2); -} - -console.log(processIconPack("light"));