diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 2e7cea2..08f9a47 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1420,6 +1420,63 @@ "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz", "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==" }, + "file-loader": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.1.0.tgz", + "integrity": "sha512-26qPdHyTsArQ6gU4P1HJbAbnFTyT2r0pG7czh1GFAd9TZbj0n94wWbupgixZH/ET/meqi2/5+F7DhW4OAXD+Lg==", + "requires": { + "loader-utils": "^2.0.0", + "schema-utils": "^2.7.1" + }, + "dependencies": { + "ajv": { + "version": "6.12.5", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz", + "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==", + "requires": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + }, + "ajv-keywords": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" + }, + "emojis-list": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", + "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==" + }, + "fast-deep-equal": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" + }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "schema-utils": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz", + "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==", + "requires": { + "@types/json-schema": "^7.0.5", + "ajv": "^6.12.4", + "ajv-keywords": "^3.5.2" + } + } + } + }, "file-uri-to-path": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", @@ -2084,6 +2141,13 @@ "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==", "requires": { "minimist": "^1.2.5" + }, + "dependencies": { + "minimist": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" + } } }, "kind-of": { diff --git a/frontend/package.json b/frontend/package.json index b6bbad0..e31069f 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,6 +12,7 @@ "dependencies": { "copy-webpack-plugin": "^6.0.0", "css-loader": "^3.6.0", + "file-loader": "^6.1.0", "style-loader": "^0.23.1", "ts-loader": "^6.2.2", "typescript": "^3.9.7", diff --git a/frontend/static/fonts/Sauce_Code_Pro.ttf b/frontend/static/fonts/Sauce_Code_Pro.ttf new file mode 100644 index 0000000..c6696a3 Binary files /dev/null and b/frontend/static/fonts/Sauce_Code_Pro.ttf differ diff --git a/frontend/static/fonts/Sauce_Code_Pro_Black.ttf b/frontend/static/fonts/Sauce_Code_Pro_Black.ttf new file mode 100644 index 0000000..25db024 Binary files /dev/null and b/frontend/static/fonts/Sauce_Code_Pro_Black.ttf differ diff --git a/frontend/static/fonts/Sauce_Code_Pro_Black_Italic.ttf b/frontend/static/fonts/Sauce_Code_Pro_Black_Italic.ttf new file mode 100644 index 0000000..f01d737 Binary files /dev/null and b/frontend/static/fonts/Sauce_Code_Pro_Black_Italic.ttf differ diff --git a/frontend/static/fonts/Sauce_Code_Pro_Bold.ttf b/frontend/static/fonts/Sauce_Code_Pro_Bold.ttf new file mode 100644 index 0000000..d4472d3 Binary files /dev/null and b/frontend/static/fonts/Sauce_Code_Pro_Bold.ttf differ diff --git a/frontend/static/fonts/Sauce_Code_Pro_Bold_Italic.ttf b/frontend/static/fonts/Sauce_Code_Pro_Bold_Italic.ttf new file mode 100644 index 0000000..66de8e3 Binary files /dev/null and b/frontend/static/fonts/Sauce_Code_Pro_Bold_Italic.ttf differ diff --git a/frontend/static/fonts/Sauce_Code_Pro_ExtraLight.ttf b/frontend/static/fonts/Sauce_Code_Pro_ExtraLight.ttf new file mode 100644 index 0000000..673bd4b Binary files /dev/null and b/frontend/static/fonts/Sauce_Code_Pro_ExtraLight.ttf differ diff --git a/frontend/static/fonts/Sauce_Code_Pro_ExtraLight_Italic.ttf b/frontend/static/fonts/Sauce_Code_Pro_ExtraLight_Italic.ttf new file mode 100644 index 0000000..fc1d222 Binary files /dev/null and b/frontend/static/fonts/Sauce_Code_Pro_ExtraLight_Italic.ttf differ diff --git a/frontend/static/fonts/Sauce_Code_Pro_Italic.ttf b/frontend/static/fonts/Sauce_Code_Pro_Italic.ttf new file mode 100644 index 0000000..101a54c Binary files /dev/null and b/frontend/static/fonts/Sauce_Code_Pro_Italic.ttf differ diff --git a/frontend/static/fonts/Sauce_Code_Pro_Light.ttf b/frontend/static/fonts/Sauce_Code_Pro_Light.ttf new file mode 100644 index 0000000..4fb6ac7 Binary files /dev/null and b/frontend/static/fonts/Sauce_Code_Pro_Light.ttf differ diff --git a/frontend/static/fonts/Sauce_Code_Pro_Light_Italic.ttf b/frontend/static/fonts/Sauce_Code_Pro_Light_Italic.ttf new file mode 100644 index 0000000..4e2374d Binary files /dev/null and b/frontend/static/fonts/Sauce_Code_Pro_Light_Italic.ttf differ diff --git a/frontend/static/fonts/Sauce_Code_Pro_Medium.ttf b/frontend/static/fonts/Sauce_Code_Pro_Medium.ttf new file mode 100644 index 0000000..a6a4637 Binary files /dev/null and b/frontend/static/fonts/Sauce_Code_Pro_Medium.ttf differ diff --git a/frontend/static/fonts/Sauce_Code_Pro_Medium_Italic.ttf b/frontend/static/fonts/Sauce_Code_Pro_Medium_Italic.ttf new file mode 100644 index 0000000..fa5a5a8 Binary files /dev/null and b/frontend/static/fonts/Sauce_Code_Pro_Medium_Italic.ttf differ diff --git a/frontend/static/fonts/Sauce_Code_Pro_Semibold.ttf b/frontend/static/fonts/Sauce_Code_Pro_Semibold.ttf new file mode 100644 index 0000000..dde8c7b Binary files /dev/null and b/frontend/static/fonts/Sauce_Code_Pro_Semibold.ttf differ diff --git a/frontend/static/fonts/Sauce_Code_Pro_Semibold_Italic.ttf b/frontend/static/fonts/Sauce_Code_Pro_Semibold_Italic.ttf new file mode 100644 index 0000000..cde7879 Binary files /dev/null and b/frontend/static/fonts/Sauce_Code_Pro_Semibold_Italic.ttf differ diff --git a/frontend/static/fonts/fmt_fonts.py b/frontend/static/fonts/fmt_fonts.py new file mode 100644 index 0000000..a4394ce --- /dev/null +++ b/frontend/static/fonts/fmt_fonts.py @@ -0,0 +1,55 @@ +import re + +from pathlib import Path + +family = "Sauce_Code_Pro" + +pat = r"^" + family + r"_?(?P[a-zA-Z]*)_?(?P[a-zA-Z]*)\.ttf" + +weights = { + "medium" : 400, + "" : 400, + "extralight" : 250, + "light" : 300, + "semibold" : 600, + "bold" : 700, + "black": 800 +} + +styles = { + "italic" : "italic", + "" : "normal" +} + +p = Path('.') +out = [] + +for font in p.iterdir(): + m = re.match(pat, font.name) + + match_dict = {"weight" : "", "italic" : ""} + if m: + match_dict = m.groupdict(default = "") + else: + print(f"No match for: {font.name}!") + + weight = match_dict["weight"].lower() + italic = match_dict["italic"].lower() + + css_weight = weights[""] + css_style = styles[""] + if weight in weights: css_weight = weights[weight] + if italic in styles: css_style = styles[italic] + + out += [f""" +@font-face {{ + font-family: {family}; + font-style: {css_style}; + font-weight: {css_weight}; + src: url("assets/fonts/{font.name}") format("truetype"); +}} +"""] + +for f in out: + print(f) + diff --git a/frontend/tty-receiver/main.css b/frontend/tty-receiver/main.css index 696d641..9891046 100644 --- a/frontend/tty-receiver/main.css +++ b/frontend/tty-receiver/main.css @@ -1,3 +1,123 @@ +/* Sauce Code Pro / Source Code Pro + * Courtesy of: + * https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/SourceCodePro + * Licensed under OFL 1.1 + * https://raw.githubusercontent.com/ryanoasis/nerd-fonts/c41890f/patched-fonts/SourceCodePro/Regular/complete/LICENSE.txt + * + * Fonts used are "Windows Compatible Monospaced" + * */ + +@font-face { + font-family: SauceCodePro; + font-style: italic; + font-weight: 800; + src: url("../static/fonts/Sauce_Code_Pro_Black_Italic.ttf") format("truetype"); +} + + +@font-face { + font-family: SauceCodePro; + font-style: normal; + font-weight: 800; + src: url("../static/fonts/Sauce_Code_Pro_Black.ttf") format("truetype"); +} + + +@font-face { + font-family: SauceCodePro; + font-style: italic; + font-weight: 700; + src: url("../static/fonts/Sauce_Code_Pro_Bold_Italic.ttf") format("truetype"); +} + + +@font-face { + font-family: SauceCodePro; + font-style: normal; + font-weight: 700; + src: url("../static/fonts/Sauce_Code_Pro_Bold.ttf") format("truetype"); +} + + +@font-face { + font-family: SauceCodePro; + font-style: italic; + font-weight: 250; + src: url("../static/fonts/Sauce_Code_Pro_ExtraLight_Italic.ttf") format("truetype"); +} + + +@font-face { + font-family: SauceCodePro; + font-style: normal; + font-weight: 250; + src: url("../static/fonts/Sauce_Code_Pro_ExtraLight.ttf") format("truetype"); +} + + +@font-face { + font-family: SauceCodePro; + font-style: normal; + font-weight: 400; + src: url("../static/fonts/Sauce_Code_Pro_Italic.ttf") format("truetype"); +} + + +@font-face { + font-family: SauceCodePro; + font-style: italic; + font-weight: 300; + src: url("../static/fonts/Sauce_Code_Pro_Light_Italic.ttf") format("truetype"); +} + + +@font-face { + font-family: SauceCodePro; + font-style: normal; + font-weight: 300; + src: url("../static/fonts/Sauce_Code_Pro_Light.ttf") format("truetype"); +} + + +@font-face { + font-family: SauceCodePro; + font-style: italic; + font-weight: 400; + src: url("../static/fonts/Sauce_Code_Pro_Medium_Italic.ttf") format("truetype"); +} + + +@font-face { + font-family: SauceCodePro; + font-style: normal; + font-weight: 400; + src: url("../static/fonts/Sauce_Code_Pro_Medium.ttf") format("truetype"); +} + + +@font-face { + font-family: SauceCodePro; + font-style: normal; + font-weight: 400; + src: url("../static/fonts/Sauce_Code_Pro.ttf") format("truetype"); +} + + +@font-face { + font-family: SauceCodePro; + font-style: italic; + font-weight: 600; + src: url("../static/fonts/Sauce_Code_Pro_Semibold_Italic.ttf") format("truetype"); +} + + +@font-face { + font-family: SauceCodePro; + font-style: normal; + font-weight: 600; + src: url("../static/fonts/Sauce_Code_Pro_Semibold.ttf") format("truetype"); +} + html, body { width: 100%; height: 100%; diff --git a/frontend/tty-receiver/tty-receiver.ts b/frontend/tty-receiver/tty-receiver.ts index 19abb2f..f5d56e2 100644 --- a/frontend/tty-receiver/tty-receiver.ts +++ b/frontend/tty-receiver/tty-receiver.ts @@ -20,6 +20,7 @@ class TTYReceiver { scrollback: 0, fontSize: 12, letterSpacing: 0, + fontFamily: 'SauceCodePro, courier-new, monospace' }); this.containerElement = container; diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index 18b4787..3bab563 100644 --- a/frontend/webpack.config.js +++ b/frontend/webpack.config.js @@ -26,7 +26,21 @@ let mainConfig = { { test: /\.css$/, use: ['style-loader', 'css-loader'] - } + }, + { + test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, + use: [ + { + loader: 'file-loader', + options: { + name: '[name].[ext]', + outputPath: 'fonts/', + esModule: false, + publicPath: '/static/fonts/' + } + } + ] + } ] }, resolve: {