[{"_1":2,"_170":-5,"_171":-5},"loaderData",{"_3":4,"_92":93},"root",{"_5":6,"_35":36,"_65":66},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20,"_34":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","5c349ef9e7d7333839a0634dd567aae2d49623a6","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_67":68},"__internal_clerk_state",{"_69":70,"_71":46,"_72":73,"_74":73,"_75":20,"_76":73,"_77":73,"_78":73,"_79":73,"_80":81,"_90":20,"_91":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_82":20,"_19":20,"_83":73,"_84":85,"_86":73,"_87":46,"_88":20,"_89":73},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_94":95,"_96":97,"_98":99,"_100":101,"_150":151,"_167":168,"_169":-5},"handle","rektdeckard","name","FontPack","path","main.tsx","project",{"_102":103,"_96":97,"_104":105,"_106":-5,"_107":20,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":114,"_115":116,"_117":-5,"_118":-5,"_119":32,"_14":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":130,"_133":134,"_136":137,"_149":20},"id","64ee32f0-2761-11f0-86ff-569c3dd06744","createdAt",["D",1746195970710],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","4d5d2dc7-9027-47a9-9a1b-c57ce8f6024b","pinnedFileId","64f0fae4-2761-11f0-86ff-569c3dd06744","pinPreview",true,"pinMigrated","screenshotVersion","likeCount","536398a7-97e0-4e83-9aff-29ecad620ca2","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_94":95,"_131":132},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yZXc1TW5BV3NXaEtXMHZYV3RyZHVmcHdmSFEifQ","org",{"_94":95,"_135":132,"_12":112},"avatar","branch",{"_138":139,"_96":44,"_102":140,"_141":103,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":97,"_148":95},"version",22,"64ee830e-2761-11f0-86ff-569c3dd06744","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_102":152,"_96":99,"_153":114,"_154":-5,"_155":140,"_156":139,"_157":116,"_104":158,"_138":159,"_160":161,"_162":163,"_164":20,"_165":-5,"_98":166},"65998d58-2761-11f0-86ff-569c3dd06744","fileId","parentId","branchId","branchVersion","latest",["D",1712875858830],21,"fileType","http","content","import { blob } from \"https://esm.town/v/std/blob\";\nimport { icons, IconStyle } from \"npm:@phosphor-icons/core\";\nimport { Font, FontEditor, woff2 } from \"npm:fonteditor-core\";\n\nconst CDN_BASE_URL = \"https://unpkg.com/@phosphor-icons\";\n\ntype SemVer = `${number}.${number}.${number}`;\ntype IconStyleMap = Partial>;\ntype FontFormatMap = Partial>;\ntype SerialFontFormatMap = Partial>;\ntype FontPack = {\n fonts: FontFormatMap;\n css: string;\n};\ntype SerialFontPack = {\n fonts: SerialFontFormatMap;\n css: string;\n};\ntype IcoMoonSelection = {\n IcoMoonType: \"selection\";\n icons: {\n icon: {\n paths: string[];\n attrs: Record[];\n isMulticolor: boolean;\n isMulticolor2: boolean;\n grid: number;\n tags: string[];\n };\n attrs: Record[];\n properties: {\n order: number;\n id: number;\n name: string;\n prevSize: number;\n code: number;\n codes?: number[];\n ligatures: string;\n };\n setIdx: number;\n setId: number;\n iconIdx: number;\n }[];\n};\n\nconst CACHE = new (class {\n constructor() {}\n\n private packageVersion(version: SemVer): string {\n return !!version ? `web@${version}` : \"web\";\n }\n\n private fontName(weight: IconStyle): string {\n return weight === \"regular\"\n ? \"Phosphor\"\n : `Phosphor-${weight.replace(/^\\w/, (c) => c.toUpperCase())}`;\n }\n\n private fontURL(weight: IconStyle, version: SemVer): string {\n return `${CDN_BASE_URL}/${\n this.packageVersion(\n version,\n )\n }/src/${weight}/${this.fontName(weight)}.ttf`;\n }\n\n private cssURL(weight: IconStyle, version: SemVer): string {\n return `${CDN_BASE_URL}/${\n this.packageVersion(\n version,\n )\n }/src/${weight}/style.css`;\n }\n\n private selectionURL(weight: IconStyle, version: SemVer) {\n return `${CDN_BASE_URL}/${\n this.packageVersion(\n version,\n )\n }/src/${weight}/selection.json`;\n }\n\n async getSelection(weight: IconStyle, version: SemVer = \"2.1.1\"): Promise {\n let selection = await blob.getJSON(`ph-${version}-selection-${weight}`);\n if (!selection) {\n const res = await fetch(this.selectionURL(weight, version), {\n method: \"GET\",\n mode: \"cors\",\n cache: \"default\",\n });\n\n if (res.status !== 200) {\n throw new Error(res.statusText);\n }\n\n selection = (await res.json()) as IcoMoonSelection;\n await blob.setJSON(`ph-${version}-selection-${weight}`, selection);\n }\n\n return selection;\n }\n\n async getFont(weight: IconStyle, version: SemVer = \"2.1.1\"): Promise {\n let buffer;\n try {\n const b = await blob.get(`ph-${version}-font-${weight}`);\n buffer = await b.arrayBuffer();\n } catch (_) {}\n\n if (!buffer) {\n const res = await fetch(this.fontURL(weight, version), {\n method: \"GET\",\n mode: \"cors\",\n cache: \"default\",\n });\n\n if (res.status !== 200) {\n throw new Error(res.statusText);\n }\n\n buffer = await res.arrayBuffer();\n await blob.set(`ph-${version}-font-${weight}`, buffer);\n }\n\n return buffer;\n }\n\n async getCSS(weight: IconStyle, version: SemVer = \"2.1.1\"): Promise {\n let css;\n try {\n const b = await blob.get(`ph-${version}-css-${weight}`);\n css = await b.arrayBuffer();\n } catch (_) {}\n\n if (!css) {\n const res = await fetch(this.cssURL(weight, version), {\n method: \"GET\",\n mode: \"cors\",\n cache: \"default\",\n });\n\n if (res.status !== 200) {\n throw new Error(res.statusText);\n }\n\n css = await res.arrayBuffer();\n await blob.set(`ph-${version}-css-${weight}`, css);\n }\n\n return css;\n }\n\n async getAssetSize(weight: IconStyle, version: SemVer = \"2.1.1\") {\n const font = (await this.getFont(weight, version)).byteLength;\n const css = (await this.getCSS(weight, version)).byteLength;\n\n return { font, css };\n }\n})();\n\nclass FontSubset {\n private names: Set;\n weight: IconStyle;\n version?: SemVer;\n codes: Map = new Map();\n font: FontEditor.Font = Font.create();\n\n constructor(weight: IconStyle, names: string[], version?: SemVer) {\n this.weight = weight;\n this.version = version;\n this.names = new Set(names.filter(Boolean));\n }\n\n fontName(): string {\n return this.weight === \"regular\"\n ? \"Phosphor\"\n : `Phosphor-${this.weight.replace(/^\\w/, (c) => c.toUpperCase())}`;\n }\n\n glyphName(iconName: string): string {\n if (this.weight === \"regular\") return iconName;\n return `${iconName}-${this.weight}`;\n }\n\n prefixClass(): string {\n return this.weight === \"regular\" ? \".ph\" : `.ph-${this.weight}`;\n }\n\n private generateIconCSS(name: string) {\n const codes = this.codes.get(name);\n\n if (!codes) {\n throw new Error(`Could not find code points for \"${name}\"`);\n }\n\n if (codes.length > 2 || codes.length === 0) {\n throw new Error(`Invalid number of code points for ${name}: ${codes}`);\n }\n\n if (this.weight === \"duotone\") {\n if (codes.length === 2) {\n return `\\\n.ph-duotone.ph-${name}:before {\n content: \"\\\\${codes[0].toString(16)}\";\n opacity: 0.2;\n}\n.ph-duotone.ph-${name}:after {\n content: \"\\\\${codes[1].toString(16)}\";\n margin-left: -1em;\n}`;\n } else {\n return `\\\n.ph-duotone.ph-${name}:before {\n content: \"\\\\${codes[0].toString(16)}\";\n}`;\n }\n } else {\n if (codes.length !== 1) {\n throw new Error(`Invalid number of code points: ${codes}`);\n }\n return `\\\n${this.prefixClass()}.ph-${name}:before {\n content: \"\\\\${codes[0].toString(16)}\";\n}`;\n }\n }\n\n async initialize() {\n const selection = await CACHE.getSelection(this.weight, this.version);\n\n for (const name of Array.from(this.names)) {\n let matchName = this.glyphName(name);\n let entry = selection.icons.find(\n (entry) => entry.properties.name.split(\", \").includes(matchName),\n );\n if (!entry) {\n const iconEntry = icons.find((e) => (e as any).alias?.name === name);\n if (iconEntry) {\n matchName = this.glyphName((iconEntry as any).alias.name);\n entry = selection.icons.find(\n (entry) => entry.properties.name.split(\", \").includes(matchName),\n );\n break;\n }\n throw new Error(`Selection match not found for \"${matchName}\" (\"${name}\")`);\n }\n this.codes.set(name, entry.properties.codes ?? [entry.properties.code]);\n }\n }\n\n async prepareFont() {\n await this.initialize();\n\n const buffer = await CACHE.getFont(this.weight, this.version);\n const codePoints = Array.from(this.codes.values()).flat();\n\n this.font = Font.create(buffer, {\n type: \"ttf\",\n subset: codePoints,\n hinting: false,\n compound2simple: true,\n });\n }\n\n generateIconsCSS(): string[] {\n return Array.from(this.codes.keys()).map((name) => this.generateIconCSS(name));\n }\n}\n\nclass FontPacker {\n private subsets: FontSubset[];\n\n constructor(icons: IconStyleMap, version?: SemVer) {\n this.subsets = Object.entries(icons)\n .filter(([_, names]) => !!names.length)\n .map(\n ([weight, names]) => new FontSubset(weight as IconStyle, names, version),\n );\n }\n\n private prefixClasses() {\n return this.subsets.map((subset) => subset.prefixClass()).join(\", \");\n }\n\n private generatePrefixClassDefinition(\n fonts: FontFormatMap,\n buffer?: ArrayBuffer | null,\n ) {\n const fmts: [extension: string, format: string][] = Object.keys(fonts).map(\n (fmt) =>\n fmt === \"ttf\"\n ? [fmt, \"truetype\"]\n : fmt === \"otf\"\n ? [fmt, \"opentype\"]\n : fmt === \"eot\"\n ? [fmt, \"embedded-opentype\"]\n : [fmt, fmt],\n );\n\n const source = buffer\n // TODO: use a preferred format??\n ? `url(data:font/${fmts[0][1]};charset=utf-8;base64,${\n Font.toBase64(\n buffer,\n )\n })`\n : fmts\n .map(\n ([extension, format]) =>\n `url(\"/Phosphor.${extension}${format === \"svg\" ? `#Phosphor` : \"\"}\") format(\"${format}\")`,\n )\n .join(\", \");\n\n return `\\\n@font-face {\n font-family: \"Phosphor\";\n src: ${source};\n font-weight: normal;\n font-style: normal;\n font-display: block;\n}\n\n${this.prefixClasses()} {\n /* use !important to prevent issues with browser extensions that change fonts */\n font-family: \"Phosphor\" !important;\n speak: never;\n font-style: normal;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n \n /* Better Font Rendering =========== */\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n`;\n }\n\n private mergeCSS(fonts: FontFormatMap, buffer: ArrayBuffer | null) {\n const classes = this.subsets\n .map((subset) => subset.generateIconsCSS())\n .flat()\n .join(\"\\n\");\n\n return `\\\n${this.generatePrefixClassDefinition(fonts, buffer)}\n${classes}\n`;\n }\n\n private remapCodePointsIfNeeded() {\n const PUA_START = 0xe000;\n const PUA_END = 0xf8ff;\n const SPUA_A_START = 0xf0000;\n const usedCodes = new Set();\n\n let next = PUA_START;\n function nextAvailableCodePoint() {\n while (usedCodes.has(next)) {\n next += 1;\n if (next === PUA_END + 1) {\n next = SPUA_A_START;\n }\n }\n\n return next;\n }\n\n for (const subset of this.subsets) {\n for (const [key, codes] of subset.codes) {\n const [glyph, other] = subset.font.find({ unicode: codes });\n if (!glyph) {\n console.log(key, subset.glyphName(key), codes);\n throw new Error(\n `Glyph for code point 0x${codes[0]}${codes[1] ? `0x${codes[1]}` : \"\"} (${subset.glyphName(key)}) not found`,\n );\n }\n\n glyph.name = key;\n if (other) {\n other.name = `${key}_layer`;\n }\n\n const newCodes = codes.map((codePoint, i) => {\n if (usedCodes.has(codePoint)) {\n const newCodePoint = nextAvailableCodePoint();\n\n // Reassign in cmap\n const cmap = subset.font.get().cmap;\n const idx = cmap[codePoint];\n\n if (subset.weight === IconStyle.DUOTONE) {\n console.log({ codePoint, idx, codes });\n }\n\n delete cmap[codePoint];\n cmap[newCodePoint] = idx;\n\n // Reassign in local map\n codes[i] = newCodePoint;\n usedCodes.add(newCodePoint);\n return newCodePoint;\n } else {\n usedCodes.add(codePoint);\n return codePoint;\n }\n });\n\n // Reassign glyph code point\n glyph.unicode = [newCodes[0]];\n if (other) {\n other.unicode = [newCodes[1]];\n }\n }\n }\n }\n\n async generate(\n formats: FontEditor.FontType[] = [\"woff\", \"ttf\", \"svg\"],\n inline?: boolean,\n ): Promise {\n let woff2editor: FontEditor.Woff2;\n if (formats.includes(\"woff2\") && !woff2.isInited) {\n woff2editor = await woff2.init();\n }\n\n await Promise.all(this.subsets.map((subset) => subset.prepareFont()));\n this.remapCodePointsIfNeeded();\n\n let mergedFont: FontEditor.Font;\n if (this.subsets.length === 1) {\n mergedFont = this.subsets[0].font;\n } else if (this.subsets.length > 1) {\n mergedFont = this.subsets[0].font;\n for (let i = 1; i < this.subsets.length; i++) {\n mergedFont = mergedFont.merge(this.subsets[i].font, { scale: 1 });\n }\n } else {\n throw new Error(\"Font must contain at least 1 glyph!\");\n }\n\n const fonts = formats.reduce((acc, format) => {\n if (format === \"woff2\") {\n acc[format] = woff2editor.encode(\n mergedFont.write({\n type: \"ttf\",\n hinting: false,\n writeZeroContoursGlyfData: true,\n metadata: \"\", /*TODO*/\n toBuffer: true,\n }),\n );\n } else {\n try {\n acc[format] = mergedFont.write({\n type: format,\n hinting: false,\n writeZeroContoursGlyfData: true,\n metadata: \"\", /*TODO*/\n toBuffer: true,\n });\n } catch (e) {\n console.error(e);\n throw e;\n }\n }\n return acc;\n }, {});\n\n // TODO: preferred font!\n const css = this.mergeCSS(fonts, inline ? fonts[formats[0]]! : null);\n return { fonts, css };\n }\n}\n\ntype FontRequest = {\n icons: Partial>;\n version?: SemVer;\n formats?: FontEditor.FontType[];\n inline?: boolean;\n};\n\nfunction bufferToBase64(buffer: ArrayBuffer) {\n let binary = \"\";\n const bytes = new Uint8Array(buffer);\n const len = bytes.byteLength;\n for (let i = 0; i < len; i++) {\n binary += String.fromCharCode(bytes[i]);\n }\n\n return btoa(binary);\n}\n\nexport default async function(\n req: Request,\n): Promise {\n if (req.method !== \"POST\") {\n return Response.json({ error: \"This val responds to POST requests.\" }, {\n status: 400,\n });\n }\n const data = await req.json() as FontRequest;\n const packer = new FontPacker(data.icons, data.version);\n\n try {\n const pack = await packer.generate(data.formats, data.inline);\n return Response.json({\n ...pack,\n fonts: Object.entries(pack.fonts).reduce(\n (acc, [fmt, buff]) => {\n acc[fmt as FontEditor.FontType] = bufferToBase64(buff);\n return acc;\n },\n {},\n ),\n });\n } catch (error) {\n console.error(error);\n\n if (error instanceof Error) {\n return Response.json({ error: error.message });\n } else if (typeof error === \"string\") {\n return Response.json({ error });\n } else {\n return Response.json({ error: \"Unknown server error\" });\n }\n }\n}","deleted","label",[99],"permalink","https://www.val.town/x/rektdeckard/FontPack/code/main.tsx","extension","actionData","errors"]