react-native-website icon indicating copy to clipboard operation
react-native-website copied to clipboard

Better codeblock titles

Open clicktodev opened this issue 10 months ago • 5 comments

Enhance codeblocks by mapping languages to their corresponding titles.

example of available titles: https://prismjs.com/index.html#supported-languages

before image

after image

before image

after image

before image

after image

Click to expand: decided to simplify and just provide the compiled array directly, keeping the original code used to generate the mapping array for reference
  //  the code below is taken from the prismjs source code and simplified to only handle languages
  //  it is used to convert the language name to a title

  // https://github.com/PrismJS/prism/blob/master/components.json
  // https://github.com/PrismJS/prism/blob/master/components.js
  const prismLanguageModules = {
    markup: {
      title: 'Markup',
      alias: ['html', 'xml', 'svg', 'mathml', 'ssml', 'atom', 'rss'],
      aliasTitles: {
        html: 'HTML',
        xml: 'XML',
        svg: 'SVG',
        mathml: 'MathML',
        ssml: 'SSML',
        atom: 'Atom',
        rss: 'RSS',
      },
      option: 'default',
    },
    css: {title: 'CSS', option: 'default', modify: 'markup'},
    clike: {title: 'C-like', option: 'default'},
    javascript: {
      title: 'JavaScript',
      require: 'clike',
      modify: 'markup',
      optional: 'regex',
      alias: 'js',
      option: 'default',
    },
    abap: {title: 'ABAP', owner: 'dellagustin'},
    abnf: {title: 'ABNF', owner: 'RunDevelopment'},
    actionscript: {
      title: 'ActionScript',
      require: 'javascript',
      modify: 'markup',
      owner: 'Golmote',
    },
    ada: {title: 'Ada', owner: 'Lucretia'},
    agda: {title: 'Agda', owner: 'xy-ren'},
    al: {title: 'AL', owner: 'RunDevelopment'},
    antlr4: {title: 'ANTLR4', alias: 'g4', owner: 'RunDevelopment'},
    apacheconf: {title: 'Apache Configuration', owner: 'GuiTeK'},
    apex: {title: 'Apex', require: ['clike', 'sql'], owner: 'RunDevelopment'},
    apl: {title: 'APL', owner: 'ngn'},
    applescript: {title: 'AppleScript', owner: 'Golmote'},
    aql: {title: 'AQL', owner: 'RunDevelopment'},
    arduino: {title: 'Arduino', require: 'cpp', alias: 'ino', owner: 'dkern'},
    arff: {title: 'ARFF', owner: 'Golmote'},
    armasm: {title: 'ARM Assembly', alias: 'arm-asm', owner: 'RunDevelopment'},
    arturo: {
      title: 'Arturo',
      alias: 'art',
      optional: ['bash', 'css', 'javascript', 'markup', 'markdown', 'sql'],
      owner: 'drkameleon',
    },
    asciidoc: {alias: 'adoc', title: 'AsciiDoc', owner: 'Golmote'},
    aspnet: {
      title: 'ASP.NET (C#)',
      require: ['markup', 'csharp'],
      owner: 'nauzilus',
    },
    asm6502: {title: '6502 Assembly', owner: 'kzurawel'},
    asmatmel: {title: 'Atmel AVR Assembly', owner: 'cerkit'},
    autohotkey: {title: 'AutoHotkey', owner: 'aviaryan'},
    autoit: {title: 'AutoIt', owner: 'Golmote'},
    avisynth: {title: 'AviSynth', alias: 'avs', owner: 'Zinfidel'},
    'avro-idl': {title: 'Avro IDL', alias: 'avdl', owner: 'RunDevelopment'},
    awk: {
      title: 'AWK',
      alias: 'gawk',
      aliasTitles: {gawk: 'GAWK'},
      owner: 'RunDevelopment',
    },
    bash: {
      title: 'Bash',
      alias: ['sh', 'shell'],
      aliasTitles: {sh: 'Shell', shell: 'Shell'},
      owner: 'zeitgeist87',
    },
    basic: {title: 'BASIC', owner: 'Golmote'},
    batch: {title: 'Batch', owner: 'Golmote'},
    bbcode: {
      title: 'BBcode',
      alias: 'shortcode',
      aliasTitles: {shortcode: 'Shortcode'},
      owner: 'RunDevelopment',
    },
    bbj: {title: 'BBj', owner: 'hyyan'},
    bicep: {title: 'Bicep', owner: 'johnnyreilly'},
    birb: {title: 'Birb', require: 'clike', owner: 'Calamity210'},
    bison: {title: 'Bison', require: 'c', owner: 'Golmote'},
    bnf: {
      title: 'BNF',
      alias: 'rbnf',
      aliasTitles: {rbnf: 'RBNF'},
      owner: 'RunDevelopment',
    },
    bqn: {title: 'BQN', owner: 'yewscion'},
    brainfuck: {title: 'Brainfuck', owner: 'Golmote'},
    brightscript: {title: 'BrightScript', owner: 'RunDevelopment'},
    bro: {title: 'Bro', owner: 'wayward710'},
    bsl: {
      title: 'BSL (1C:Enterprise)',
      alias: 'oscript',
      aliasTitles: {oscript: 'OneScript'},
      owner: 'Diversus23',
    },
    c: {title: 'C', require: 'clike', owner: 'zeitgeist87'},
    csharp: {
      title: 'C#',
      require: 'clike',
      alias: ['cs', 'dotnet'],
      owner: 'mvalipour',
    },
    cpp: {title: 'C++', require: 'c', owner: 'zeitgeist87'},
    cfscript: {
      title: 'CFScript',
      require: 'clike',
      alias: 'cfc',
      owner: 'mjclemente',
    },
    chaiscript: {
      title: 'ChaiScript',
      require: ['clike', 'cpp'],
      owner: 'RunDevelopment',
    },
    cil: {title: 'CIL', owner: 'sbrl'},
    cilkc: {title: 'Cilk/C', require: 'c', alias: 'cilk-c', owner: 'OpenCilk'},
    cilkcpp: {
      title: 'Cilk/C++',
      require: 'cpp',
      alias: ['cilk-cpp', 'cilk'],
      owner: 'OpenCilk',
    },
    clojure: {title: 'Clojure', owner: 'troglotit'},
    cmake: {title: 'CMake', owner: 'mjrogozinski'},
    cobol: {title: 'COBOL', owner: 'RunDevelopment'},
    coffeescript: {
      title: 'CoffeeScript',
      require: 'javascript',
      alias: 'coffee',
      owner: 'R-osey',
    },
    concurnas: {title: 'Concurnas', alias: 'conc', owner: 'jasontatton'},
    csp: {title: 'Content-Security-Policy', owner: 'ScottHelme'},
    cooklang: {title: 'Cooklang', owner: 'ahue'},
    coq: {title: 'Coq', owner: 'RunDevelopment'},
    crystal: {title: 'Crystal', require: 'ruby', owner: 'MakeNowJust'},
    'css-extras': {
      title: 'CSS Extras',
      require: 'css',
      modify: 'css',
      owner: 'milesj',
    },
    csv: {title: 'CSV', owner: 'RunDevelopment'},
    cue: {title: 'CUE', owner: 'RunDevelopment'},
    cypher: {title: 'Cypher', owner: 'RunDevelopment'},
    d: {title: 'D', require: 'clike', owner: 'Golmote'},
    dart: {title: 'Dart', require: 'clike', owner: 'Golmote'},
    dataweave: {title: 'DataWeave', owner: 'machaval'},
    dax: {title: 'DAX', owner: 'peterbud'},
    dhall: {title: 'Dhall', owner: 'RunDevelopment'},
    diff: {title: 'Diff', owner: 'uranusjr'},
    django: {
      title: 'Django/Jinja2',
      require: 'markup-templating',
      alias: 'jinja2',
      owner: 'romanvm',
    },
    'dns-zone-file': {
      title: 'DNS zone file',
      owner: 'RunDevelopment',
      alias: 'dns-zone',
    },
    docker: {title: 'Docker', alias: 'dockerfile', owner: 'JustinBeckwith'},
    dot: {
      title: 'DOT (Graphviz)',
      alias: 'gv',
      optional: 'markup',
      owner: 'RunDevelopment',
    },
    ebnf: {title: 'EBNF', owner: 'RunDevelopment'},
    editorconfig: {title: 'EditorConfig', owner: 'osipxd'},
    eiffel: {title: 'Eiffel', owner: 'Conaclos'},
    ejs: {
      title: 'EJS',
      require: ['javascript', 'markup-templating'],
      owner: 'RunDevelopment',
      alias: 'eta',
      aliasTitles: {eta: 'Eta'},
    },
    elixir: {title: 'Elixir', owner: 'Golmote'},
    elm: {title: 'Elm', owner: 'zwilias'},
    etlua: {
      title: 'Embedded Lua templating',
      require: ['lua', 'markup-templating'],
      owner: 'RunDevelopment',
    },
    erb: {
      title: 'ERB',
      require: ['ruby', 'markup-templating'],
      owner: 'Golmote',
    },
    erlang: {title: 'Erlang', owner: 'Golmote'},
    'excel-formula': {
      title: 'Excel Formula',
      alias: ['xlsx', 'xls'],
      owner: 'RunDevelopment',
    },
    fsharp: {title: 'F#', require: 'clike', owner: 'simonreynolds7'},
    factor: {title: 'Factor', owner: 'catb0t'},
    false: {title: 'False', owner: 'edukisto'},
    'firestore-security-rules': {
      title: 'Firestore security rules',
      require: 'clike',
      owner: 'RunDevelopment',
    },
    flow: {title: 'Flow', require: 'javascript', owner: 'Golmote'},
    fortran: {title: 'Fortran', owner: 'Golmote'},
    ftl: {
      title: 'FreeMarker Template Language',
      require: 'markup-templating',
      owner: 'RunDevelopment',
    },
    gml: {
      title: 'GameMaker Language',
      alias: 'gamemakerlanguage',
      require: 'clike',
      owner: 'LiarOnce',
    },
    gap: {title: 'GAP (CAS)', owner: 'RunDevelopment'},
    gcode: {title: 'G-code', owner: 'RunDevelopment'},
    gdscript: {title: 'GDScript', owner: 'RunDevelopment'},
    gedcom: {title: 'GEDCOM', owner: 'Golmote'},
    gettext: {title: 'gettext', alias: 'po', owner: 'RunDevelopment'},
    gherkin: {title: 'Gherkin', owner: 'hason'},
    git: {title: 'Git', owner: 'lgiraudel'},
    glsl: {title: 'GLSL', require: 'c', owner: 'Golmote'},
    gn: {title: 'GN', alias: 'gni', owner: 'RunDevelopment'},
    'linker-script': {
      title: 'GNU Linker Script',
      alias: 'ld',
      owner: 'RunDevelopment',
    },
    go: {title: 'Go', require: 'clike', owner: 'arnehormann'},
    'go-module': {title: 'Go module', alias: 'go-mod', owner: 'RunDevelopment'},
    gradle: {
      title: 'Gradle',
      require: 'clike',
      owner: 'zeabdelkhalek-badido18',
    },
    graphql: {title: 'GraphQL', optional: 'markdown', owner: 'Golmote'},
    groovy: {title: 'Groovy', require: 'clike', owner: 'robfletcher'},
    haml: {
      title: 'Haml',
      require: 'ruby',
      optional: [
        'css',
        'css-extras',
        'coffeescript',
        'erb',
        'javascript',
        'less',
        'markdown',
        'scss',
        'textile',
      ],
      owner: 'Golmote',
    },
    handlebars: {
      title: 'Handlebars',
      require: 'markup-templating',
      alias: ['hbs', 'mustache'],
      aliasTitles: {mustache: 'Mustache'},
      owner: 'Golmote',
    },
    haskell: {title: 'Haskell', alias: 'hs', owner: 'bholst'},
    haxe: {
      title: 'Haxe',
      require: 'clike',
      optional: 'regex',
      owner: 'Golmote',
    },
    hcl: {title: 'HCL', owner: 'outsideris'},
    hlsl: {title: 'HLSL', require: 'c', owner: 'RunDevelopment'},
    hoon: {title: 'Hoon', owner: 'matildepark'},
    http: {
      title: 'HTTP',
      optional: [
        'csp',
        'css',
        'hpkp',
        'hsts',
        'javascript',
        'json',
        'markup',
        'uri',
      ],
      owner: 'danielgtaylor',
    },
    hpkp: {title: 'HTTP Public-Key-Pins', owner: 'ScottHelme'},
    hsts: {title: 'HTTP Strict-Transport-Security', owner: 'ScottHelme'},
    ichigojam: {title: 'IchigoJam', owner: 'BlueCocoa'},
    icon: {title: 'Icon', owner: 'Golmote'},
    'icu-message-format': {
      title: 'ICU Message Format',
      owner: 'RunDevelopment',
    },
    idris: {title: 'Idris', alias: 'idr', owner: 'KeenS', require: 'haskell'},
    ignore: {
      title: '.ignore',
      owner: 'osipxd',
      alias: ['gitignore', 'hgignore', 'npmignore'],
      aliasTitles: {
        gitignore: '.gitignore',
        hgignore: '.hgignore',
        npmignore: '.npmignore',
      },
    },
    inform7: {title: 'Inform 7', owner: 'Golmote'},
    ini: {title: 'Ini', owner: 'aviaryan'},
    io: {title: 'Io', owner: 'AlesTsurko'},
    j: {title: 'J', owner: 'Golmote'},
    java: {title: 'Java', require: 'clike', owner: 'sherblot'},
    javadoc: {
      title: 'JavaDoc',
      require: ['markup', 'java', 'javadoclike'],
      modify: 'java',
      optional: 'scala',
      owner: 'RunDevelopment',
    },
    javadoclike: {
      title: 'JavaDoc-like',
      modify: ['java', 'javascript', 'php'],
      owner: 'RunDevelopment',
    },
    javastacktrace: {title: 'Java stack trace', owner: 'RunDevelopment'},
    jexl: {title: 'Jexl', owner: 'czosel'},
    jolie: {title: 'Jolie', require: 'clike', owner: 'thesave'},
    jq: {title: 'JQ', owner: 'RunDevelopment'},
    jsdoc: {
      title: 'JSDoc',
      require: ['javascript', 'javadoclike', 'typescript'],
      modify: 'javascript',
      optional: ['actionscript', 'coffeescript'],
      owner: 'RunDevelopment',
    },
    'js-extras': {
      title: 'JS Extras',
      require: 'javascript',
      modify: 'javascript',
      optional: ['actionscript', 'coffeescript', 'flow', 'n4js', 'typescript'],
      owner: 'RunDevelopment',
    },
    json: {
      title: 'JSON',
      alias: 'webmanifest',
      aliasTitles: {webmanifest: 'Web App Manifest'},
      owner: 'CupOfTea696',
    },
    json5: {title: 'JSON5', require: 'json', owner: 'RunDevelopment'},
    jsonp: {title: 'JSONP', require: 'json', owner: 'RunDevelopment'},
    jsstacktrace: {title: 'JS stack trace', owner: 'sbrl'},
    'js-templates': {
      title: 'JS Templates',
      require: 'javascript',
      modify: 'javascript',
      optional: ['css', 'css-extras', 'graphql', 'markdown', 'markup', 'sql'],
      owner: 'RunDevelopment',
    },
    julia: {title: 'Julia', owner: 'cdagnino'},
    keepalived: {title: 'Keepalived Configure', owner: 'dev-itsheng'},
    keyman: {title: 'Keyman', owner: 'mcdurdin'},
    kotlin: {
      title: 'Kotlin',
      alias: ['kt', 'kts'],
      aliasTitles: {kts: 'Kotlin Script'},
      require: 'clike',
      owner: 'Golmote',
    },
    kumir: {title: 'KuMir (КуМир)', alias: 'kum', owner: 'edukisto'},
    kusto: {title: 'Kusto', owner: 'RunDevelopment'},
    latex: {
      title: 'LaTeX',
      alias: ['tex', 'context'],
      aliasTitles: {tex: 'TeX', context: 'ConTeXt'},
      owner: 'japborst',
    },
    latte: {
      title: 'Latte',
      require: ['clike', 'markup-templating', 'php'],
      owner: 'nette',
    },
    less: {
      title: 'Less',
      require: 'css',
      optional: 'css-extras',
      owner: 'Golmote',
    },
    lilypond: {
      title: 'LilyPond',
      require: 'scheme',
      alias: 'ly',
      owner: 'RunDevelopment',
    },
    liquid: {title: 'Liquid', require: 'markup-templating', owner: 'cinhtau'},
    lisp: {
      title: 'Lisp',
      alias: ['emacs', 'elisp', 'emacs-lisp'],
      owner: 'JuanCaicedo',
    },
    livescript: {title: 'LiveScript', owner: 'Golmote'},
    llvm: {title: 'LLVM IR', owner: 'porglezomp'},
    log: {
      title: 'Log file',
      optional: 'javastacktrace',
      owner: 'RunDevelopment',
    },
    lolcode: {title: 'LOLCODE', owner: 'Golmote'},
    lua: {title: 'Lua', owner: 'Golmote'},
    magma: {title: 'Magma (CAS)', owner: 'RunDevelopment'},
    makefile: {title: 'Makefile', owner: 'Golmote'},
    markdown: {
      title: 'Markdown',
      require: 'markup',
      optional: 'yaml',
      alias: 'md',
      owner: 'Golmote',
    },
    'markup-templating': {
      title: 'Markup templating',
      require: 'markup',
      owner: 'Golmote',
    },
    mata: {title: 'Mata', owner: 'RunDevelopment'},
    matlab: {title: 'MATLAB', owner: 'Golmote'},
    maxscript: {title: 'MAXScript', owner: 'RunDevelopment'},
    mel: {title: 'MEL', owner: 'Golmote'},
    mermaid: {title: 'Mermaid', owner: 'RunDevelopment'},
    metafont: {title: 'METAFONT', owner: 'LaeriExNihilo'},
    mizar: {title: 'Mizar', owner: 'Golmote'},
    mongodb: {title: 'MongoDB', owner: 'airs0urce', require: 'javascript'},
    monkey: {title: 'Monkey', owner: 'Golmote'},
    moonscript: {title: 'MoonScript', alias: 'moon', owner: 'RunDevelopment'},
    n1ql: {title: 'N1QL', owner: 'TMWilds'},
    n4js: {
      title: 'N4JS',
      require: 'javascript',
      optional: 'jsdoc',
      alias: 'n4jsd',
      owner: 'bsmith-n4',
    },
    'nand2tetris-hdl': {title: 'Nand To Tetris HDL', owner: 'stephanmax'},
    naniscript: {title: 'Naninovel Script', owner: 'Elringus', alias: 'nani'},
    nasm: {title: 'NASM', owner: 'rbmj'},
    neon: {title: 'NEON', owner: 'nette'},
    nevod: {title: 'Nevod', owner: 'nezaboodka'},
    nginx: {title: 'nginx', owner: 'volado'},
    nim: {title: 'Nim', owner: 'Golmote'},
    nix: {title: 'Nix', owner: 'Golmote'},
    nsis: {title: 'NSIS', owner: 'idleberg'},
    objectivec: {
      title: 'Objective-C',
      require: 'c',
      alias: 'objc',
      owner: 'uranusjr',
    },
    ocaml: {title: 'OCaml', owner: 'Golmote'},
    odin: {title: 'Odin', owner: 'edukisto'},
    opencl: {
      title: 'OpenCL',
      require: 'c',
      modify: ['c', 'cpp'],
      owner: 'Milania1',
    },
    openqasm: {title: 'OpenQasm', alias: 'qasm', owner: 'RunDevelopment'},
    oz: {title: 'Oz', owner: 'Golmote'},
    parigp: {title: 'PARI/GP', owner: 'Golmote'},
    parser: {title: 'Parser', require: 'markup', owner: 'Golmote'},
    pascal: {
      title: 'Pascal',
      alias: 'objectpascal',
      aliasTitles: {objectpascal: 'Object Pascal'},
      owner: 'Golmote',
    },
    pascaligo: {title: 'Pascaligo', owner: 'DefinitelyNotAGoat'},
    psl: {title: 'PATROL Scripting Language', owner: 'bertysentry'},
    pcaxis: {title: 'PC-Axis', alias: 'px', owner: 'RunDevelopment'},
    peoplecode: {title: 'PeopleCode', alias: 'pcode', owner: 'RunDevelopment'},
    perl: {title: 'Perl', owner: 'Golmote'},
    php: {title: 'PHP', require: 'markup-templating', owner: 'milesj'},
    phpdoc: {
      title: 'PHPDoc',
      require: ['php', 'javadoclike'],
      modify: 'php',
      owner: 'RunDevelopment',
    },
    'php-extras': {
      title: 'PHP Extras',
      require: 'php',
      modify: 'php',
      owner: 'milesj',
    },
    'plant-uml': {
      title: 'PlantUML',
      alias: 'plantuml',
      owner: 'RunDevelopment',
    },
    plsql: {title: 'PL/SQL', require: 'sql', owner: 'Golmote'},
    powerquery: {
      title: 'PowerQuery',
      alias: ['pq', 'mscript'],
      owner: 'peterbud',
    },
    powershell: {title: 'PowerShell', owner: 'nauzilus'},
    processing: {title: 'Processing', require: 'clike', owner: 'Golmote'},
    prolog: {title: 'Prolog', owner: 'Golmote'},
    promql: {title: 'PromQL', owner: 'arendjr'},
    properties: {title: '.properties', owner: 'Golmote'},
    protobuf: {
      title: 'Protocol Buffers',
      require: 'clike',
      owner: 'just-boris',
    },
    pug: {
      title: 'Pug',
      require: ['markup', 'javascript'],
      optional: [
        'coffeescript',
        'ejs',
        'handlebars',
        'less',
        'livescript',
        'markdown',
        'scss',
        'stylus',
        'twig',
      ],
      owner: 'Golmote',
    },
    puppet: {title: 'Puppet', owner: 'Golmote'},
    pure: {title: 'Pure', optional: ['c', 'cpp', 'fortran'], owner: 'Golmote'},
    purebasic: {
      title: 'PureBasic',
      require: 'clike',
      alias: 'pbfasm',
      owner: 'HeX0R101',
    },
    purescript: {
      title: 'PureScript',
      require: 'haskell',
      alias: 'purs',
      owner: 'sriharshachilakapati',
    },
    python: {title: 'Python', alias: 'py', owner: 'multipetros'},
    qsharp: {title: 'Q#', require: 'clike', alias: 'qs', owner: 'fedonman'},
    q: {title: 'Q (kdb+ database)', owner: 'Golmote'},
    qml: {title: 'QML', require: 'javascript', owner: 'RunDevelopment'},
    qore: {title: 'Qore', require: 'clike', owner: 'temnroegg'},
    r: {title: 'R', owner: 'Golmote'},
    racket: {
      title: 'Racket',
      require: 'scheme',
      alias: 'rkt',
      owner: 'RunDevelopment',
    },
    cshtml: {
      title: 'Razor C#',
      alias: 'razor',
      require: ['markup', 'csharp'],
      optional: ['css', 'css-extras', 'javascript', 'js-extras'],
      owner: 'RunDevelopment',
    },
    jsx: {
      title: 'React JSX',
      require: ['markup', 'javascript'],
      optional: ['jsdoc', 'js-extras', 'js-templates'],
      owner: 'vkbansal',
    },
    tsx: {title: 'React TSX', require: ['jsx', 'typescript']},
    reason: {title: 'Reason', require: 'clike', owner: 'Golmote'},
    regex: {title: 'Regex', owner: 'RunDevelopment'},
    rego: {title: 'Rego', owner: 'JordanSh'},
    renpy: {title: "Ren'py", alias: 'rpy', owner: 'HyuchiaDiego'},
    rescript: {title: 'ReScript', alias: 'res', owner: 'vmarcosp'},
    rest: {title: 'reST (reStructuredText)', owner: 'Golmote'},
    rip: {title: 'Rip', owner: 'ravinggenius'},
    roboconf: {title: 'Roboconf', owner: 'Golmote'},
    robotframework: {
      title: 'Robot Framework',
      alias: 'robot',
      owner: 'RunDevelopment',
    },
    ruby: {title: 'Ruby', require: 'clike', alias: 'rb', owner: 'samflores'},
    rust: {title: 'Rust', owner: 'Golmote'},
    sas: {title: 'SAS', optional: ['groovy', 'lua', 'sql'], owner: 'Golmote'},
    sass: {
      title: 'Sass (Sass)',
      require: 'css',
      optional: 'css-extras',
      owner: 'Golmote',
    },
    scss: {
      title: 'Sass (SCSS)',
      require: 'css',
      optional: 'css-extras',
      owner: 'MoOx',
    },
    scala: {title: 'Scala', require: 'java', owner: 'jozic'},
    scheme: {title: 'Scheme', owner: 'bacchus123'},
    'shell-session': {
      title: 'Shell session',
      require: 'bash',
      alias: ['sh-session', 'shellsession'],
      owner: 'RunDevelopment',
    },
    smali: {title: 'Smali', owner: 'RunDevelopment'},
    smalltalk: {title: 'Smalltalk', owner: 'Golmote'},
    smarty: {
      title: 'Smarty',
      require: 'markup-templating',
      optional: 'php',
      owner: 'Golmote',
    },
    sml: {
      title: 'SML',
      alias: 'smlnj',
      aliasTitles: {smlnj: 'SML/NJ'},
      owner: 'RunDevelopment',
    },
    solidity: {
      title: 'Solidity (Ethereum)',
      alias: 'sol',
      require: 'clike',
      owner: 'glachaud',
    },
    'solution-file': {
      title: 'Solution file',
      alias: 'sln',
      owner: 'RunDevelopment',
    },
    soy: {
      title: 'Soy (Closure Template)',
      require: 'markup-templating',
      owner: 'Golmote',
    },
    sparql: {
      title: 'SPARQL',
      require: 'turtle',
      owner: 'Triply-Dev',
      alias: 'rq',
    },
    'splunk-spl': {title: 'Splunk SPL', owner: 'RunDevelopment'},
    sqf: {
      title: 'SQF: Status Quo Function (Arma 3)',
      require: 'clike',
      owner: 'RunDevelopment',
    },
    sql: {title: 'SQL', owner: 'multipetros'},
    squirrel: {title: 'Squirrel', require: 'clike', owner: 'RunDevelopment'},
    stan: {title: 'Stan', owner: 'RunDevelopment'},
    stata: {
      title: 'Stata Ado',
      require: ['mata', 'java', 'python'],
      owner: 'RunDevelopment',
    },
    iecst: {title: 'Structured Text (IEC 61131-3)', owner: 'serhioromano'},
    stylus: {title: 'Stylus', owner: 'vkbansal'},
    supercollider: {
      title: 'SuperCollider',
      alias: 'sclang',
      owner: 'RunDevelopment',
    },
    swift: {title: 'Swift', owner: 'chrischares'},
    systemd: {title: 'Systemd configuration file', owner: 'RunDevelopment'},
    't4-templating': {title: 'T4 templating', owner: 'RunDevelopment'},
    't4-cs': {
      title: 'T4 Text Templates (C#)',
      require: ['t4-templating', 'csharp'],
      alias: 't4',
      owner: 'RunDevelopment',
    },
    't4-vb': {
      title: 'T4 Text Templates (VB)',
      require: ['t4-templating', 'vbnet'],
      owner: 'RunDevelopment',
    },
    tap: {title: 'TAP', owner: 'isaacs', require: 'yaml'},
    tcl: {title: 'Tcl', owner: 'PeterChaplin'},
    tt2: {
      title: 'Template Toolkit 2',
      require: ['clike', 'markup-templating'],
      owner: 'gflohr',
    },
    textile: {
      title: 'Textile',
      require: 'markup',
      optional: 'css',
      owner: 'Golmote',
    },
    toml: {title: 'TOML', owner: 'RunDevelopment'},
    tremor: {
      title: 'Tremor',
      alias: ['trickle', 'troy'],
      owner: 'darach',
      aliasTitles: {trickle: 'trickle', troy: 'troy'},
    },
    turtle: {
      title: 'Turtle',
      alias: 'trig',
      aliasTitles: {trig: 'TriG'},
      owner: 'jakubklimek',
    },
    twig: {title: 'Twig', require: 'markup-templating', owner: 'brandonkelly'},
    typescript: {
      title: 'TypeScript',
      require: 'javascript',
      optional: 'js-templates',
      alias: 'ts',
      owner: 'vkbansal',
    },
    typoscript: {
      title: 'TypoScript',
      alias: 'tsconfig',
      aliasTitles: {tsconfig: 'TSConfig'},
      owner: 'dkern',
    },
    unrealscript: {
      title: 'UnrealScript',
      alias: ['uscript', 'uc'],
      owner: 'RunDevelopment',
    },
    uorazor: {title: 'UO Razor Script', owner: 'jaseowns'},
    uri: {
      title: 'URI',
      alias: 'url',
      aliasTitles: {url: 'URL'},
      owner: 'RunDevelopment',
    },
    v: {title: 'V', require: 'clike', owner: 'taggon'},
    vala: {
      title: 'Vala',
      require: 'clike',
      optional: 'regex',
      owner: 'TemplarVolk',
    },
    vbnet: {title: 'VB.Net', require: 'basic', owner: 'Bigsby'},
    velocity: {title: 'Velocity', require: 'markup', owner: 'Golmote'},
    verilog: {title: 'Verilog', owner: 'a-rey'},
    vhdl: {title: 'VHDL', owner: 'a-rey'},
    vim: {title: 'vim', owner: 'westonganger'},
    'visual-basic': {
      title: 'Visual Basic',
      alias: ['vb', 'vba'],
      aliasTitles: {vba: 'VBA'},
      owner: 'Golmote',
    },
    warpscript: {title: 'WarpScript', owner: 'RunDevelopment'},
    wasm: {title: 'WebAssembly', owner: 'Golmote'},
    'web-idl': {title: 'Web IDL', alias: 'webidl', owner: 'RunDevelopment'},
    wgsl: {title: 'WGSL', owner: 'Dr4gonthree'},
    wiki: {title: 'Wiki markup', require: 'markup', owner: 'Golmote'},
    wolfram: {
      title: 'Wolfram language',
      alias: ['mathematica', 'nb', 'wl'],
      aliasTitles: {mathematica: 'Mathematica', nb: 'Mathematica Notebook'},
      owner: 'msollami',
    },
    wren: {title: 'Wren', owner: 'clsource'},
    xeora: {
      title: 'Xeora',
      require: 'markup',
      alias: 'xeoracube',
      aliasTitles: {xeoracube: 'XeoraCube'},
      owner: 'freakmaxi',
    },
    'xml-doc': {
      title: 'XML doc (.net)',
      require: 'markup',
      modify: ['csharp', 'fsharp', 'vbnet'],
      owner: 'RunDevelopment',
    },
    xojo: {title: 'Xojo (REALbasic)', owner: 'Golmote'},
    xquery: {title: 'XQuery', require: 'markup', owner: 'Golmote'},
    yaml: {title: 'YAML', alias: 'yml', owner: 'hason'},
    yang: {title: 'YANG', owner: 'RunDevelopment'},
    zig: {title: 'Zig', owner: 'RunDevelopment'},
  };

  // https://github.com/PrismJS/prism/blob/59e5a3471377057de1f401ba38337aca27b80e03/gulpfile.js/index.js#L112
  /** @type {Record<string, string | null>} */
  const languagesMap = {};

  /**
   * @param {string} key
   * @param {string} title
   */
  function addLanguageTitle(key, title) {
    if (!(key in languagesMap)) {
      languagesMap[key] = title;
    }
  }

  // https://github.com/PrismJS/prism/blob/59e5a3471377057de1f401ba38337aca27b80e03/gulpfile.js/index.js#L145
  for (const id in prismLanguageModules) {
    const language = prismLanguageModules[id];
    const title = language.displayTitle || language.title;

    addLanguageTitle(id, title);

    for (const name in language.aliasTitles) {
      addLanguageTitle(name, language.aliasTitles[name]);
    }

    if (language.alias) {
      if (typeof language.alias === 'string') {
        addLanguageTitle(language.alias, title);
      } else {
        language.alias.forEach(function (alias) {
          addLanguageTitle(alias, title);
        });
      }
    }
  }

clicktodev avatar Jan 05 '25 08:01 clicktodev

Deploy Preview for react-native ready!

Name Link
Latest commit ed4b47b7084002428b267eae468a0b0339ea4927
Latest deploy log https://app.netlify.com/sites/react-native/deploys/677a4a01dcde5c0008a0e177
Deploy Preview https://deploy-preview-4425--react-native.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] avatar Jan 05 '25 08:01 netlify[bot]

@Abbondanzo this is a continuation of the previous PR

clicktodev avatar Jan 08 '25 22:01 clicktodev

I still don't think that those automated titles based on the snippets languages are necessary to display. I would prefer to retain previous behaviour and usage, where title need to be specified, and was reserved for file name or example description.

Simek avatar Jan 09 '25 11:01 Simek

There are cases where we just repeat ourselves, which feels really redundant, and it also exposes a lot of incorrectly set languages cross the website content (often mistakes are marking JSX as TSX, or vice-versa).

Screenshot 2025-01-09 123303

Screenshot 2025-01-09 123530

In general, I think that it would be more helpful for the readers if we go manually thought the pages and add meaningful titles or correct filenames rather than trying to automate the labeling process, which results in not that helpful titles.

Simek avatar Jan 09 '25 11:01 Simek

I understand your pov and here are some arguments i've thought about:

  • Identifying and Surfacing Mistakes

    • Issue: Errors such as marking JSX as TSX are highlighted as a problem.
    • The plugin helps surface these mistakes by exposing mismatches or incorrect language labels. Without automation, such errors might remain hidden. Once identified, contributors can easily address the mislabeled blocks, improving accuracy over time.
  • Baseline Automation with Manual Refinement

    • Issue: Mistakes in labeling or lack of meaningful titles degrade the reader’s experience.
    • The plugin encourages contributors to ensure that every code block has a title by default. Even when manual adjustments are needed, the process becomes more intentional and deliberate, striking a balance between automation and human judgment.
  • Efficiency in Large Documentation Sets

    • Issue: Manually reviewing and labeling code blocks is time-consuming and error-prone, especially considering the size of the react native documentation.
    • The plugin significantly reduces the workload by handling a large portion of the labeling process automatically. Contributors can focus on reviewing a smaller subset of cases where the language metadata might need to be overridden or refined.
  • Self-Contained Code Blocks

    • Issue: Relying on external or surrounding context for code block titles can lead to confusion if the context changes or isn't easily accessible.
    • By automatically generating titles based on the code block's language, the plugin ensures that each code block is a self-contained component with all the necessary information readily available. This improves portability, as readers can understand the purpose and context of the code block without relying on external or surrounding content.

clicktodev avatar Jan 09 '25 12:01 clicktodev