From 6d6bd949e83c6529e57644d7dfdf8da45f3bf890 Mon Sep 17 00:00:00 2001 From: Mats Jun Larsen Date: Thu, 12 Jun 2025 17:18:31 +0900 Subject: [PATCH] Enumerate all logo files for webpack When we move to Vite we won't have the `require.context`-like functionality that webpack has. For this reason we have to enumerate all the files and import them individually. I will be opening a similar patch for the site template screenshot images. The `logoUrl` and `logoUrlDark` fields have been renamed to `logoFilename` to be more accurate for what the keys are now. Sonar file was also renamed for consistency sake. --- docs/AddingALanguage.md | 7 +- etc/config/c++.amazon.properties | 4 +- etc/config/c.amazon.properties | 4 +- lib/languages.ts | 348 +++++++++--------- static/client.d.ts | 33 ++ static/logos.ts | 264 +++++++++++++ static/main.ts | 16 +- static/panes/compiler.ts | 7 +- test/app/config-tests.ts | 4 +- test/check-img.ts | 8 +- tsconfig.frontend.json | 2 +- types/languages.interfaces.ts | 4 +- .../logos/{Sonar-dark.svg => sonar-dark.svg} | 0 .../resources/logos/{Sonar.svg => sonar.svg} | 0 14 files changed, 499 insertions(+), 202 deletions(-) create mode 100644 static/client.d.ts create mode 100644 static/logos.ts rename views/resources/logos/{Sonar-dark.svg => sonar-dark.svg} (100%) rename views/resources/logos/{Sonar.svg => sonar.svg} (100%) diff --git a/docs/AddingALanguage.md b/docs/AddingALanguage.md index 5a8363580..260e95dc0 100644 --- a/docs/AddingALanguage.md +++ b/docs/AddingALanguage.md @@ -12,8 +12,8 @@ If you want to add a new language to the site, you should follow this steps: monaco: MONACO_MODE_ID, extensions: ARRAY_OF_FILE_EXTENSIONS_OF_YOUR_LANGUAGE, alias: [], // Leave empty unless needed, - logoUrl: PATH_TO_LOGO, - logoUrlDark: PATH_TO_DARK_LOGO, // Optional if not needed + logoFilename: NAME_OF_LOGO_FILE, // Name of the logo file in views/resources/logos/ + logoFilenameDark: NAME_OF_DARK_LOGO_FILE, // Optional, if there is a dark version of the logo } ``` @@ -24,8 +24,9 @@ If you want to add a new language to the site, you should follow this steps: _require_ your mode file in `static/modes/_all.ts`, in alphabetical order - `language-key` is how your language will be referred internally by the code. In the rest of this document, replace `{language-key}` by the corresponding value in the real files. - - Add a logo file to the `views/resources/logos/` folder and add its path to the `logoUrl{Dark}` key(s) in the + - Add a logo file to the `views/resources/logos/` folder and add its path to the `logoFilename{Dark}` key(s) in the language object + - Add the logo keys to the `static/logos.ts` file, in alphabetical order. - Add `{language-key}` to type list in `types/languages.interfaces.ts` - Add a `lib/compilers/{language-key}.ts` file using the template below: diff --git a/etc/config/c++.amazon.properties b/etc/config/c++.amazon.properties index 65930f6c0..44696e730 100644 --- a/etc/config/c++.amazon.properties +++ b/etc/config/c++.amazon.properties @@ -6593,8 +6593,8 @@ tools.strings.stdinHint=disabled tools.Sonar.name=Sonar tools.Sonar.exe=/opt/compiler-explorer/sonar/sonar.sh -tools.Sonar.icon=./Sonar.svg -tools.Sonar.darkIcon=./Sonar-dark.svg +tools.Sonar.icon=sonar.svg +tools.Sonar.darkIcon=sonar-dark.svg tools.Sonar.type=independent tools.Sonar.class=sonar-tool tools.Sonar.stdinHint=disabled diff --git a/etc/config/c.amazon.properties b/etc/config/c.amazon.properties index e8e4209b4..9dbd59f65 100644 --- a/etc/config/c.amazon.properties +++ b/etc/config/c.amazon.properties @@ -4244,8 +4244,8 @@ tools.nm.stdinHint=disabled tools.Sonar.name=Sonar tools.Sonar.exe=/opt/compiler-explorer/sonar/sonar.sh -tools.Sonar.icon=./Sonar.svg -tools.Sonar.darkIcon=./Sonar-dark.svg +tools.Sonar.icon=./sonar.svg +tools.Sonar.darkIcon=./sonar-dark.svg tools.Sonar.type=independent tools.Sonar.class=sonar-tool tools.Sonar.stdinHint=disabled diff --git a/lib/languages.ts b/lib/languages.ts index a3a622a87..7e9b6776c 100644 --- a/lib/languages.ts +++ b/lib/languages.ts @@ -35,8 +35,8 @@ type DefKeys = | 'alias' | 'previewFilter' | 'formatter' - | 'logoUrl' - | 'logoUrlDark' + | 'logoFilename' + | 'logoFilenameDark' | 'monacoDisassembly' | 'tooltip' | 'digitSeparator'; @@ -48,8 +48,8 @@ const definitions: Record = { monaco: 'jakt', extensions: ['.jakt'], alias: [], - logoUrl: '', - logoUrlDark: null, + logoFilename: null, + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: 'cppp', @@ -59,8 +59,8 @@ const definitions: Record = { monaco: 'cppp', extensions: ['.cpp', '.cxx', '.h', '.hpp', '.hxx', '.c', '.cc', '.ixx'], alias: ['gcc', 'cpp'], - logoUrl: 'c++.svg', - logoUrlDark: null, + logoFilename: 'c++.svg', + logoFilenameDark: null, formatter: 'clangformat', previewFilter: /^\s*#include/, monacoDisassembly: null, @@ -71,8 +71,8 @@ const definitions: Record = { monaco: 'ada', extensions: ['.adb', '.ads'], alias: [], - logoUrl: 'ada.svg', - logoUrlDark: 'ada-dark.svg', + logoFilename: 'ada.svg', + logoFilenameDark: 'ada-dark.svg', formatter: null, previewFilter: null, monacoDisassembly: null, @@ -82,8 +82,8 @@ const definitions: Record = { monaco: 'algol68', extensions: ['.a68'], alias: [], - logoUrl: '', - logoUrlDark: '', + logoFilename: null, + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -93,8 +93,8 @@ const definitions: Record = { monaco: 'asm', extensions: ['.asm'], // maybe add more? Change to a unique one? alias: ['tool', 'tools'], - logoUrl: 'analysis.png', // TODO: Find a better alternative - logoUrlDark: null, + logoFilename: 'analysis.png', // TODO: Find a better alternative + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -105,8 +105,8 @@ const definitions: Record = { monaco: 'java', extensions: ['.java'], alias: [], - logoUrl: 'android.svg', - logoUrlDark: 'android-dark.svg', + logoFilename: 'android.svg', + logoFilenameDark: 'android-dark.svg', formatter: null, previewFilter: null, monacoDisassembly: null, @@ -117,8 +117,8 @@ const definitions: Record = { monaco: 'kotlin', extensions: ['.kt'], alias: [], - logoUrl: 'android.svg', - logoUrlDark: 'android-dark.svg', + logoFilename: 'android.svg', + logoFilenameDark: 'android-dark.svg', formatter: null, previewFilter: null, monacoDisassembly: null, @@ -129,8 +129,8 @@ const definitions: Record = { monaco: 'asm', extensions: ['.asm', '.6502', '.s'], alias: ['asm'], - logoUrl: 'assembly.png', // TODO: Find a better alternative - logoUrlDark: null, + logoFilename: 'assembly.png', // TODO: Find a better alternative + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -140,8 +140,8 @@ const definitions: Record = { monaco: 'nc', extensions: ['.c', '.h'], alias: [], - logoUrl: 'c.svg', - logoUrlDark: null, + logoFilename: 'c.svg', + logoFilenameDark: null, formatter: 'clangformat', previewFilter: /^\s*#include/, monacoDisassembly: null, @@ -152,8 +152,8 @@ const definitions: Record = { monaco: 'c3', extensions: ['.c3'], alias: [], - logoUrl: 'c3.svg', - logoUrlDark: null, + logoFilename: 'c3.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -163,8 +163,8 @@ const definitions: Record = { monaco: 'carbon', extensions: ['.carbon'], alias: [], - logoUrl: 'carbon.png', - logoUrlDark: null, + logoFilename: 'carbon.png', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -174,8 +174,8 @@ const definitions: Record = { monaco: 'nc', extensions: ['.c', '.h'], alias: [], - logoUrl: 'c.svg', - logoUrlDark: null, + logoFilename: 'c.svg', + logoFilenameDark: null, formatter: 'clangformat', previewFilter: /^\s*#include/, monacoDisassembly: null, @@ -186,8 +186,8 @@ const definitions: Record = { monaco: 'cppp', extensions: ['.cpp', '.h'], alias: [], - logoUrl: 'c++.svg', - logoUrlDark: null, + logoFilename: 'c++.svg', + logoFilenameDark: null, formatter: 'clangformat', previewFilter: /^\s*#include/, monacoDisassembly: null, @@ -199,8 +199,8 @@ const definitions: Record = { extensions: ['.cpp', '.cxx', '.h', '.hpp', '.hxx', '.c'], alias: [], previewFilter: /^\s*#include/, - logoUrl: 'c++.svg', // TODO: Find a better alternative - logoUrlDark: null, + logoFilename: 'c++.svg', // TODO: Find a better alternative + logoFilenameDark: null, formatter: null, monacoDisassembly: null, digitSeparator: "'", @@ -210,9 +210,9 @@ const definitions: Record = { monaco: 'mlir', extensions: ['.mlir'], alias: [], - logoUrl: 'circt.svg', + logoFilename: 'circt.svg', formatter: null, - logoUrlDark: null, + logoFilenameDark: null, previewFilter: null, monacoDisassembly: 'mlir', }, @@ -221,8 +221,8 @@ const definitions: Record = { monaco: 'clean', extensions: ['.icl'], alias: [], - logoUrl: 'clean.svg', // TODO: Find a better alternative - logoUrlDark: null, + logoFilename: 'clean.svg', // TODO: Find a better alternative + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -232,8 +232,8 @@ const definitions: Record = { monaco: 'cmake', extensions: ['.txt'], alias: [], - logoUrl: 'cmake.svg', - logoUrlDark: null, + logoFilename: 'cmake.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -243,8 +243,8 @@ const definitions: Record = { monaco: 'cmake', extensions: ['.cmake'], alias: [], - logoUrl: 'cmake.svg', - logoUrlDark: null, + logoFilename: 'cmake.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -254,9 +254,9 @@ const definitions: Record = { monaco: 'cobol', extensions: ['.cob', '.cbl', '.cobol'], alias: [], - logoUrl: null, // TODO: Find a better alternative + logoFilename: null, // TODO: Find a better alternative formatter: null, - logoUrlDark: null, + logoFilenameDark: null, previewFilter: null, monacoDisassembly: null, }, @@ -265,8 +265,8 @@ const definitions: Record = { monaco: 'cpp-for-opencl', extensions: ['.clcpp', '.cl', '.ocl'], alias: [], - logoUrl: 'opencl.svg', // TODO: Find a better alternative - logoUrlDark: 'opencl-dark.svg', + logoFilename: 'opencl.svg', // TODO: Find a better alternative + logoFilenameDark: 'opencl-dark.svg', formatter: null, previewFilter: null, monacoDisassembly: null, @@ -277,9 +277,9 @@ const definitions: Record = { monaco: 'mlir', extensions: ['.mlir'], alias: [], - logoUrl: 'mlir.svg', + logoFilename: 'mlir.svg', formatter: null, - logoUrlDark: null, + logoFilenameDark: null, previewFilter: null, monacoDisassembly: null, }, @@ -288,8 +288,8 @@ const definitions: Record = { monaco: 'cppp', extensions: ['.cpp', '.cxx', '.h', '.hpp', '.hxx', '.c'], alias: [], - logoUrl: 'c++.svg', - logoUrlDark: null, + logoFilename: 'c++.svg', + logoFilenameDark: null, formatter: null, previewFilter: /^\s*#include/, monacoDisassembly: null, @@ -300,8 +300,8 @@ const definitions: Record = { monaco: 'cppx-blue', extensions: ['.blue', '.cpp', '.cxx', '.h', '.hpp', '.hxx', '.c'], alias: [], - logoUrl: 'c++.svg', // TODO: Find a better alternative - logoUrlDark: null, + logoFilename: 'c++.svg', // TODO: Find a better alternative + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -311,8 +311,8 @@ const definitions: Record = { monaco: 'cppx-gold', extensions: ['.usyntax', '.cpp', '.cxx', '.h', '.hpp', '.hxx', '.c'], alias: [], - logoUrl: 'c++.svg', // TODO: Find a better alternative - logoUrlDark: null, + logoFilename: 'c++.svg', // TODO: Find a better alternative + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -323,8 +323,8 @@ const definitions: Record = { monaco: 'cpp2-cppfront', extensions: ['.cpp2'], alias: [], - logoUrl: 'c++.svg', // TODO: Find a better alternative - logoUrlDark: null, + logoFilename: 'c++.svg', // TODO: Find a better alternative + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: 'cppp', @@ -335,8 +335,8 @@ const definitions: Record = { monaco: 'crystal', extensions: ['.cr'], alias: [], - logoUrl: 'crystal.svg', - logoUrlDark: 'crystal-dark.svg', + logoFilename: 'crystal.svg', + logoFilenameDark: 'crystal-dark.svg', formatter: null, previewFilter: null, monacoDisassembly: null, @@ -347,8 +347,8 @@ const definitions: Record = { monaco: 'csharp', extensions: ['.cs'], alias: [], - logoUrl: 'dotnet.svg', - logoUrlDark: null, + logoFilename: 'dotnet.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -359,8 +359,8 @@ const definitions: Record = { monaco: 'cuda', extensions: ['.cu'], alias: ['nvcc'], - logoUrl: 'cuda.svg', - logoUrlDark: 'cuda-dark.svg', + logoFilename: 'cuda.svg', + logoFilenameDark: 'cuda-dark.svg', formatter: null, previewFilter: null, monacoDisassembly: null, @@ -371,8 +371,8 @@ const definitions: Record = { monaco: 'd', extensions: ['.d'], alias: [], - logoUrl: 'd.svg', - logoUrlDark: null, + logoFilename: 'd.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -382,8 +382,8 @@ const definitions: Record = { monaco: 'dart', extensions: ['.dart'], alias: [], - logoUrl: 'dart.svg', - logoUrlDark: null, + logoFilename: 'dart.svg', + logoFilenameDark: null, formatter: 'dartformat', previewFilter: null, monacoDisassembly: null, @@ -393,8 +393,8 @@ const definitions: Record = { monaco: 'elixir', extensions: ['.ex'], alias: [], - logoUrl: 'elixir.svg', - logoUrlDark: null, + logoFilename: 'elixir.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -404,8 +404,8 @@ const definitions: Record = { monaco: 'erlang', extensions: ['.erl', '.hrl'], alias: [], - logoUrl: 'erlang.svg', - logoUrlDark: null, + logoFilename: 'erlang.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -415,8 +415,8 @@ const definitions: Record = { monaco: 'fortran', extensions: ['.f90', '.F90', '.f95', '.F95', '.f'], alias: [], - logoUrl: 'fortran.svg', - logoUrlDark: null, + logoFilename: 'fortran.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -426,8 +426,8 @@ const definitions: Record = { monaco: 'fsharp', extensions: ['.fs'], alias: [], - logoUrl: 'fsharp.svg', - logoUrlDark: null, + logoFilename: 'fsharp.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -437,8 +437,8 @@ const definitions: Record = { monaco: 'glsl', extensions: ['.glsl'], alias: [], - logoUrl: 'glsl.svg', - logoUrlDark: 'glsl-dark.svg', + logoFilename: 'glsl.svg', + logoFilenameDark: 'glsl-dark.svg', formatter: null, previewFilter: null, monacoDisassembly: null, @@ -448,8 +448,8 @@ const definitions: Record = { monaco: 'go', extensions: ['.go'], alias: [], - logoUrl: 'go.svg', - logoUrlDark: null, + logoFilename: 'go.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -460,8 +460,8 @@ const definitions: Record = { monaco: 'haskell', extensions: ['.hs', '.haskell'], alias: [], - logoUrl: 'haskell.png', - logoUrlDark: null, + logoFilename: 'haskell.png', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -472,8 +472,8 @@ const definitions: Record = { monaco: 'hlsl', extensions: ['.hlsl', '.hlsli'], alias: [], - logoUrl: 'hlsl.png', - logoUrlDark: null, + logoFilename: 'hlsl.png', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -483,8 +483,8 @@ const definitions: Record = { monaco: 'hook', extensions: ['.hk', '.hook'], alias: [], - logoUrl: 'hook.png', - logoUrlDark: 'hook-dark.png', + logoFilename: 'hook.png', + logoFilenameDark: 'hook-dark.png', formatter: null, previewFilter: null, monacoDisassembly: null, @@ -494,8 +494,8 @@ const definitions: Record = { monaco: 'hylo', extensions: ['.hylo'], alias: [], - logoUrl: 'hylo.svg', - logoUrlDark: null, + logoFilename: 'hylo.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -505,8 +505,8 @@ const definitions: Record = { monaco: 'asm', extensions: ['.il'], alias: [], - logoUrl: 'dotnet.svg', - logoUrlDark: null, + logoFilename: 'dotnet.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -516,8 +516,8 @@ const definitions: Record = { monaco: 'ispc', extensions: ['.ispc'], alias: [], - logoUrl: 'ispc.png', - logoUrlDark: null, + logoFilename: 'ispc.png', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -527,8 +527,8 @@ const definitions: Record = { monaco: 'java', extensions: ['.java'], alias: [], - logoUrl: 'java.svg', - logoUrlDark: null, + logoFilename: 'java.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -539,8 +539,8 @@ const definitions: Record = { monaco: 'julia', extensions: ['.jl'], alias: [], - logoUrl: 'julia.svg', - logoUrlDark: null, + logoFilename: 'julia.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -551,8 +551,8 @@ const definitions: Record = { monaco: 'kotlin', extensions: ['.kt'], alias: [], - logoUrl: 'kotlin.svg', - logoUrlDark: null, + logoFilename: 'kotlin.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -563,8 +563,8 @@ const definitions: Record = { monaco: 'llvm-ir', extensions: ['.ll'], alias: [], - logoUrl: 'llvm.png', - logoUrlDark: null, + logoFilename: 'llvm.png', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -574,8 +574,8 @@ const definitions: Record = { monaco: 'llvm-ir', extensions: ['.mir'], alias: [], - logoUrl: 'llvm.png', - logoUrlDark: null, + logoFilename: 'llvm.png', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -585,8 +585,8 @@ const definitions: Record = { monaco: 'modula2', extensions: ['.mod'], alias: [], - logoUrl: null, - logoUrlDark: null, + logoFilename: null, + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -596,8 +596,8 @@ const definitions: Record = { monaco: 'mojo', extensions: ['.mojo', '.🔥'], alias: [], - logoUrl: 'mojo.svg', - logoUrlDark: null, + logoFilename: 'mojo.svg', + logoFilenameDark: null, formatter: 'mblack', previewFilter: null, monacoDisassembly: null, @@ -608,8 +608,8 @@ const definitions: Record = { monaco: 'nim', extensions: ['.nim'], alias: [], - logoUrl: 'nim.svg', - logoUrlDark: null, + logoFilename: 'nim.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -619,8 +619,8 @@ const definitions: Record = { monaco: 'python', extensions: ['.py'], alias: [], - logoUrl: 'numba.svg', - logoUrlDark: null, + logoFilename: 'numba.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -630,8 +630,8 @@ const definitions: Record = { monaco: 'nix', extensions: ['.nix'], alias: [], - logoUrl: 'nix.svg', - logoUrlDark: null, + logoFilename: 'nix.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -641,8 +641,8 @@ const definitions: Record = { monaco: 'objective-c', extensions: ['.m'], alias: [], - logoUrl: null, - logoUrlDark: null, + logoFilename: null, + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -652,8 +652,8 @@ const definitions: Record = { monaco: 'objective-c', extensions: ['.mm'], alias: [], - logoUrl: null, - logoUrlDark: null, + logoFilename: null, + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -664,8 +664,8 @@ const definitions: Record = { monaco: 'ocaml', extensions: ['.ml', '.mli'], alias: [], - logoUrl: 'ocaml.svg', - logoUrlDark: null, + logoFilename: 'ocaml.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -675,8 +675,8 @@ const definitions: Record = { monaco: 'odin', extensions: ['.odin'], alias: [], - logoUrl: 'odin.png', - logoUrlDark: null, + logoFilename: 'odin.png', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -686,8 +686,8 @@ const definitions: Record = { monaco: 'openclc', extensions: ['.cl', '.ocl'], alias: [], - logoUrl: 'opencl.svg', - logoUrlDark: 'opencl-dark.svg', + logoFilename: 'opencl.svg', + logoFilenameDark: 'opencl-dark.svg', formatter: null, previewFilter: null, monacoDisassembly: null, @@ -697,8 +697,8 @@ const definitions: Record = { monaco: 'pascal', extensions: ['.pas', '.dpr'], alias: [], - logoUrl: 'pascal.svg', // TODO: Find a better alternative - logoUrlDark: 'pascal-dark.svg', + logoFilename: 'pascal.svg', // TODO: Find a better alternative + logoFilenameDark: 'pascal-dark.svg', formatter: null, previewFilter: null, monacoDisassembly: null, @@ -708,8 +708,8 @@ const definitions: Record = { monaco: 'pony', extensions: ['.pony'], alias: [], - logoUrl: 'pony.svg', - logoUrlDark: null, + logoFilename: 'pony.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -719,8 +719,8 @@ const definitions: Record = { monaco: 'ptx', extensions: ['.ptx'], alias: [], - logoUrl: 'cuda.svg', - logoUrlDark: 'cuda-dark.svg', + logoFilename: 'cuda.svg', + logoFilenameDark: 'cuda-dark.svg', formatter: null, previewFilter: null, monacoDisassembly: null, @@ -730,8 +730,8 @@ const definitions: Record = { monaco: 'python', extensions: ['.py'], alias: [], - logoUrl: 'python.svg', - logoUrlDark: null, + logoFilename: 'python.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -742,8 +742,8 @@ const definitions: Record = { monaco: 'scheme', extensions: ['.rkt'], alias: [], - logoUrl: 'racket.svg', - logoUrlDark: null, + logoFilename: 'racket.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: 'scheme', @@ -753,8 +753,8 @@ const definitions: Record = { monaco: 'perl', extensions: ['.raku', '.rakutest', '.rakumod', '.rakudoc'], alias: ['Perl 6'], - logoUrl: 'camelia.svg', - logoUrlDark: null, + logoFilename: 'camelia.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -764,8 +764,8 @@ const definitions: Record = { monaco: 'ruby', extensions: ['.rb'], alias: [], - logoUrl: 'ruby.svg', - logoUrlDark: null, + logoFilename: 'ruby.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: 'asmruby', @@ -776,8 +776,8 @@ const definitions: Record = { monaco: 'rustp', extensions: ['.rs'], alias: [], - logoUrl: 'rust.svg', - logoUrlDark: 'rust-dark.svg', + logoFilename: 'rust.svg', + logoFilenameDark: 'rust-dark.svg', formatter: 'rustfmt', previewFilter: null, monacoDisassembly: null, @@ -788,8 +788,8 @@ const definitions: Record = { monaco: 'sail', extensions: ['.sail'], alias: [], - logoUrl: 'sail.svg', - logoUrlDark: null, + logoFilename: 'sail.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -799,8 +799,8 @@ const definitions: Record = { monaco: 'swift', extensions: ['.sn'], alias: [], - logoUrl: 'snowball.svg', - logoUrlDark: 'snowball.svg', + logoFilename: 'snowball.svg', + logoFilenameDark: 'snowball.svg', formatter: null, previewFilter: null, monacoDisassembly: null, @@ -810,8 +810,8 @@ const definitions: Record = { monaco: 'scala', extensions: ['.scala'], alias: [], - logoUrl: 'scala.png', - logoUrlDark: null, + logoFilename: 'scala.png', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -822,8 +822,8 @@ const definitions: Record = { monaco: 'slang', extensions: ['.slang'], alias: [], - logoUrl: 'slang.svg', - logoUrlDark: 'slang-dark.svg', + logoFilename: 'slang.svg', + logoFilenameDark: 'slang-dark.svg', formatter: null, previewFilter: null, monacoDisassembly: null, @@ -833,8 +833,8 @@ const definitions: Record = { monaco: 'sol', extensions: ['.sol'], alias: [], - logoUrl: 'solidity.svg', - logoUrlDark: null, + logoFilename: 'solidity.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -844,8 +844,8 @@ const definitions: Record = { monaco: 'spice', extensions: ['.spice'], alias: [], - logoUrl: 'spice.png', - logoUrlDark: null, + logoFilename: 'spice.png', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -855,8 +855,8 @@ const definitions: Record = { monaco: 'spirv', extensions: ['.spvasm'], alias: [], - logoUrl: 'spirv.svg', - logoUrlDark: 'spirv-dark.svg', + logoFilename: 'spirv.svg', + logoFilenameDark: 'spirv-dark.svg', formatter: null, previewFilter: null, monacoDisassembly: null, @@ -866,8 +866,8 @@ const definitions: Record = { monaco: 'swift', extensions: ['.swift'], alias: [], - logoUrl: 'swift.svg', - logoUrlDark: null, + logoFilename: 'swift.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -878,8 +878,8 @@ const definitions: Record = { monaco: 'tablegen', extensions: ['.td'], alias: [], - logoUrl: 'llvm.png', - logoUrlDark: null, + logoFilename: 'llvm.png', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -889,8 +889,8 @@ const definitions: Record = { monaco: 'toit', extensions: ['.toit'], alias: [], - logoUrl: 'toit.svg', - logoUrlDark: null, + logoFilename: 'toit.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -900,8 +900,8 @@ const definitions: Record = { monaco: 'typescript', extensions: ['.ts', '.d.ts'], alias: [], - logoUrl: 'ts.svg', - logoUrlDark: null, + logoFilename: 'ts.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -912,8 +912,8 @@ const definitions: Record = { monaco: 'v', extensions: ['.v', '.vsh'], alias: [], - logoUrl: 'v.svg', - logoUrlDark: null, + logoFilename: 'v.svg', + logoFilenameDark: null, formatter: 'vfmt', previewFilter: null, monacoDisassembly: 'nc', @@ -923,8 +923,8 @@ const definitions: Record = { monaco: 'vala', extensions: ['.vala'], alias: [], - logoUrl: 'vala.svg', - logoUrlDark: null, + logoFilename: 'vala.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -934,8 +934,8 @@ const definitions: Record = { monaco: 'vb', extensions: ['.vb'], alias: [], - logoUrl: 'dotnet.svg', - logoUrlDark: null, + logoFilename: 'dotnet.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -945,8 +945,8 @@ const definitions: Record = { monaco: 'python', extensions: ['.vy'], alias: [], - logoUrl: 'vyper.svg', - logoUrlDark: null, + logoFilename: 'vyper.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -956,8 +956,8 @@ const definitions: Record = { monaco: 'wat', extensions: ['.wat'], alias: [], - logoUrl: 'wasm.svg', - logoUrlDark: null, + logoFilename: 'wasm.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -967,8 +967,8 @@ const definitions: Record = { monaco: 'zig', extensions: ['.zig'], alias: [], - logoUrl: 'zig.svg', - logoUrlDark: null, + logoFilename: 'zig.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -979,8 +979,8 @@ const definitions: Record = { monaco: 'typescript', extensions: ['.mjs'], alias: [], - logoUrl: 'js.svg', - logoUrlDark: null, + logoFilename: 'js.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -991,8 +991,8 @@ const definitions: Record = { monaco: 'nc', extensions: ['.c'], alias: [], - logoUrl: 'gimple.svg', - logoUrlDark: null, + logoFilename: 'gimple.svg', + logoFilenameDark: null, formatter: null, previewFilter: /^\s*#include/, monacoDisassembly: null, @@ -1002,8 +1002,8 @@ const definitions: Record = { monaco: 'llvm-ir', extensions: ['.yl'], alias: [], - logoUrl: null, // ygen does not yet have a logo ping me if it requires one (@Cr0a3) - logoUrlDark: null, + logoFilename: null, // ygen does not yet have a logo ping me if it requires one (@Cr0a3) + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, @@ -1013,8 +1013,8 @@ const definitions: Record = { monaco: 'sway', extensions: ['.sw'], alias: [], - logoUrl: 'sway.svg', - logoUrlDark: null, + logoFilename: 'sway.svg', + logoFilenameDark: null, formatter: null, previewFilter: null, monacoDisassembly: null, diff --git a/static/client.d.ts b/static/client.d.ts new file mode 100644 index 000000000..1cbb77d25 --- /dev/null +++ b/static/client.d.ts @@ -0,0 +1,33 @@ +// Copyright (c) 2025, Compiler Explorer Authors +// All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are met: +// +// * Redistributions of source code must retain the above copyright notice, +// this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above copyright +// notice, this list of conditions and the following disclaimer in the +// documentation and/or other materials provided with the distribution. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE +// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE +// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR +// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF +// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN +// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) +// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE +// POSSIBILITY OF SUCH DAMAGE. + +declare module '*.svg' { + const src: string; + export default src; +} + +declare module '*.png' { + const src: string; + export default src; +} diff --git a/static/logos.ts b/static/logos.ts new file mode 100644 index 000000000..b05f8d1ba --- /dev/null +++ b/static/logos.ts @@ -0,0 +1,264 @@ +// Copyright (c) 2025, Compiler Explorer Authors +// All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are met: +// +// * Redistributions of source code must retain the above copyright notice, +// this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above copyright +// notice, this list of conditions and the following disclaimer in the +// documentation and/or other materials provided with the distribution. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE +// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE +// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR +// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF +// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN +// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) +// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE +// POSSIBILITY OF SUCH DAMAGE. + +import adaDark from '../views/resources/logos/ada-dark.svg'; +import ada from '../views/resources/logos/ada.svg'; +import analysis from '../views/resources/logos/analysis.png'; +import androidDark from '../views/resources/logos/android-dark.svg'; +import android from '../views/resources/logos/android.svg'; +import assembly from '../views/resources/logos/assembly.png'; +import cpp from '../views/resources/logos/c++.svg'; +import c from '../views/resources/logos/c.svg'; +import c3 from '../views/resources/logos/c3.svg'; +import camelia from '../views/resources/logos/camelia.svg'; +import carbon from '../views/resources/logos/carbon.png'; +import circt from '../views/resources/logos/circt.svg'; +import clean from '../views/resources/logos/clean.svg'; +import cmake from '../views/resources/logos/cmake.svg'; +import crystalDark from '../views/resources/logos/crystal-dark.svg'; +import crystal from '../views/resources/logos/crystal.svg'; +import cudaDark from '../views/resources/logos/cuda-dark.svg'; +import cuda from '../views/resources/logos/cuda.svg'; +import d from '../views/resources/logos/d.svg'; +import dart from '../views/resources/logos/dart.svg'; +import dotnet from '../views/resources/logos/dotnet.svg'; +import elixir from '../views/resources/logos/elixir.svg'; +import erlang from '../views/resources/logos/erlang.svg'; +import fortran from '../views/resources/logos/fortran.svg'; +import fsharp from '../views/resources/logos/fsharp.svg'; +import gimple from '../views/resources/logos/gimple.svg'; +import glslDark from '../views/resources/logos/glsl-dark.svg'; +import glsl from '../views/resources/logos/glsl.svg'; +import go from '../views/resources/logos/go.svg'; +import haskell from '../views/resources/logos/haskell.png'; +import hlsl from '../views/resources/logos/hlsl.png'; +import hookDark from '../views/resources/logos/hook-dark.png'; +import hook from '../views/resources/logos/hook.png'; +import hylo from '../views/resources/logos/hylo.svg'; +import ispc from '../views/resources/logos/ispc.png'; +import java from '../views/resources/logos/java.svg'; +import js from '../views/resources/logos/js.svg'; +import julia from '../views/resources/logos/julia.svg'; +import kotlin from '../views/resources/logos/kotlin.svg'; +import llvm from '../views/resources/logos/llvm.png'; +import mlir from '../views/resources/logos/mlir.svg'; +import mojo from '../views/resources/logos/mojo.svg'; +import nim from '../views/resources/logos/nim.svg'; +import nix from '../views/resources/logos/nix.svg'; +import numba from '../views/resources/logos/numba.svg'; +import ocaml from '../views/resources/logos/ocaml.svg'; +import odin from '../views/resources/logos/odin.png'; +import openclDark from '../views/resources/logos/opencl-dark.svg'; +import opencl from '../views/resources/logos/opencl.svg'; +import pascalDark from '../views/resources/logos/pascal-dark.svg'; +import pascal from '../views/resources/logos/pascal.svg'; +import pony from '../views/resources/logos/pony.svg'; +import python from '../views/resources/logos/python.svg'; +import racket from '../views/resources/logos/racket.svg'; +import ruby from '../views/resources/logos/ruby.svg'; +import rustDark from '../views/resources/logos/rust-dark.svg'; +import rust from '../views/resources/logos/rust.svg'; +import sail from '../views/resources/logos/sail.svg'; +import scala from '../views/resources/logos/scala.png'; +import slangDark from '../views/resources/logos/slang-dark.svg'; +import slang from '../views/resources/logos/slang.svg'; +import snowball from '../views/resources/logos/snowball.svg'; +import solidity from '../views/resources/logos/solidity.svg'; +import sonarDark from '../views/resources/logos/sonar-dark.svg'; +import sonar from '../views/resources/logos/sonar.svg'; +import spice from '../views/resources/logos/spice.png'; +import spirvDark from '../views/resources/logos/spirv-dark.svg'; +import spirv from '../views/resources/logos/spirv.svg'; +import sway from '../views/resources/logos/sway.svg'; +import swift from '../views/resources/logos/swift.svg'; +import toit from '../views/resources/logos/toit.svg'; +import ts from '../views/resources/logos/ts.svg'; +import v from '../views/resources/logos/v.svg'; +import vala from '../views/resources/logos/vala.svg'; +import vyper from '../views/resources/logos/vyper.svg'; +import wasm from '../views/resources/logos/wasm.svg'; +import zig from '../views/resources/logos/zig.svg'; + +/** Get the logo base64 URL for an image */ +export function getLogoImage(key: string | null): string | null { + switch (key) { + case null: + return null; + case 'ada.svg': + return ada; + case 'ada-dark.svg': + return adaDark; + case 'analysis.png': + return analysis; + case 'android.svg': + return android; + case 'android-dark.svg': + return androidDark; + case 'assembly.png': + return assembly; + case 'c++.svg': + return cpp; + case 'c.svg': + return c; + case 'c3.svg': + return c3; + case 'camelia.svg': + return camelia; + case 'carbon.png': + return carbon; + case 'circt.svg': + return circt; + case 'clean.svg': + return clean; + case 'cmake.svg': + return cmake; + case 'crystal.svg': + return crystal; + case 'crystal-dark.svg': + return crystalDark; + case 'cuda.svg': + return cuda; + case 'cuda-dark.svg': + return cudaDark; + case 'd.svg': + return d; + case 'dart.svg': + return dart; + case 'dotnet.svg': + return dotnet; + case 'elixir.svg': + return elixir; + case 'erlang.svg': + return erlang; + case 'fortran.svg': + return fortran; + case 'fsharp.svg': + return fsharp; + case 'gimple.svg': + return gimple; + case 'glsl.svg': + return glsl; + case 'glsl-dark.svg': + return glslDark; + case 'go.svg': + return go; + case 'haskell.png': + return haskell; + case 'hlsl.png': + return hlsl; + case 'hook.png': + return hook; + case 'hook-dark.png': + return hookDark; + case 'hylo.svg': + return hylo; + case 'ispc.png': + return ispc; + case 'java.svg': + return java; + case 'js.svg': + return js; + case 'julia.svg': + return julia; + case 'kotlin.svg': + return kotlin; + case 'llvm.png': + return llvm; + case 'mlir.svg': + return mlir; + case 'mojo.svg': + return mojo; + case 'nim.svg': + return nim; + case 'nix.svg': + return nix; + case 'numba.svg': + return numba; + case 'ocaml.svg': + return ocaml; + case 'odin.png': + return odin; + case 'opencl.svg': + return opencl; + case 'opencl-dark.svg': + return openclDark; + case 'pascal.svg': + return pascal; + case 'pascal-dark.svg': + return pascalDark; + case 'pony.svg': + return pony; + case 'python.svg': + return python; + case 'racket.svg': + return racket; + case 'ruby.svg': + return ruby; + case 'rust.svg': + return rust; + case 'rust-dark.svg': + return rustDark; + case 'sail.svg': + return sail; + case 'scala.png': + return scala; + case 'slang.svg': + return slang; + case 'slang-dark.svg': + return slangDark; + case 'snowball.svg': + return snowball; + case 'solidity.svg': + return solidity; + case 'sonar.svg': + return sonar; + case 'sonar-dark.svg': + return sonarDark; + case 'spice.png': + return spice; + case 'spirv.svg': + return spirv; + case 'spirv-dark.svg': + return spirvDark; + case 'sway.svg': + return sway; + case 'swift.svg': + return swift; + case 'toit.svg': + return toit; + case 'ts.svg': + return ts; + case 'v.svg': + return v; + case 'vala.svg': + return vala; + case 'vyper.svg': + return vyper; + case 'wasm.svg': + return wasm; + case 'zig.svg': + return zig; + } + throw new Error(`Unknown logo key: ${key}`); +} diff --git a/static/main.ts b/static/main.ts index 69b32b2bf..5eff51b18 100644 --- a/static/main.ts +++ b/static/main.ts @@ -65,12 +65,11 @@ import * as utils from '../shared/common-utils.js'; import * as BootstrapUtils from './bootstrap-utils.js'; import {ParseFiltersAndOutputOptions} from './features/filters.interfaces.js'; import {localStorage, sessionThenLocalStorage} from './local.js'; +import {getLogoImage} from './logos'; import {Printerinator} from './print-view.js'; import {setupRealDark, takeUsersOutOfRealDark} from './real-dark.js'; import {formatISODate, updateAndCalcTopBarHeight} from './utils.js'; -const logos = require.context('../views/resources/logos', false, /\.(png|svg)$/); - const siteTemplateScreenshots = require.context('../views/resources/template_screenshots', false, /\.png$/); if (!window.PRODUCTION && !options.embedded) { @@ -483,13 +482,14 @@ function removeOrphanedMaximisedItemFromConfig(config) { function setupLanguageLogos(languages: Partial>) { for (const lang of Object.values(languages)) { try { - if (lang.logoUrl !== null) { - lang.logoData = logos('./' + lang.logoUrl); - if (lang.logoUrlDark !== null) { - lang.logoDataDark = logos('./' + lang.logoUrlDark); - } + if (lang.logoFilename !== null) { + lang.logoData = getLogoImage(lang.logoFilename); } - } catch (ignored) { + if (lang.logoFilenameDark !== null) { + lang.logoDataDark = getLogoImage(lang.logoFilenameDark); + } + } catch { + // It doesn't really matter to us if the logo is not found, we will just not show it. lang.logoData = ''; } } diff --git a/static/panes/compiler.ts b/static/panes/compiler.ts index cc32480af..22d156597 100644 --- a/static/panes/compiler.ts +++ b/static/panes/compiler.ts @@ -81,11 +81,10 @@ import {CompilerShared} from '../compiler-shared.js'; import {SourceAndFiles} from '../download-service.js'; import {InstructionSet} from '../instructionsets.js'; import {LanguageKey} from '../languages.interfaces.js'; +import {getLogoImage} from '../logos'; import {SentryCapture} from '../sentry.js'; import {CompilerVersionInfo, setCompilerVersionPopoverForPane} from '../widgets/compiler-version-info.js'; -const toolIcons = require.context('../../views/resources/logos', false, /\.(png|svg)$/); - type CachedOpcode = { found: boolean; data: AssemblyInstructionInfo | string; @@ -2756,8 +2755,8 @@ export class Compiler extends MonacoPane' + '