const websiteData = { pushPage: { coordinates: { x: 0, y: 0 }, scale: 1, distance: 64, scaleOffset: 1.5, }, weight: 400, letterSpacing: 0, lineHeight: 1, fontName: "CommitMono", italic: false, invert: false, highContrast: false, tutorial: [ "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "1", "2", "3", "w", "a", "s", "d", "+", "-", "Enter", "Escape", ], enableFeaturesInDocs: false, sections: [ { name: "home", description: null, content: {}, }, { name: "concept", description: `The most effective font is the one you don’t notice. No super high x-height, no geometric construction, no eye-catching design and no confusing ligatures. Designed to be neutral and anonymous, Commit Mono is quietly useful. Tip: Press I to switch between italic and regular.`, content: {}, }, { name: "familiar", description: `All research suggests the most familiar fonts are the ones you read fastest and most precisely. Commit Mono takes inspiration in fonts tested by time. Tip: Press C to enable/disable high contrast mode.`, content: { svgs: { franklin_gothic: ``, letter_gothic: ``, fira_mono: ``, untitled_sans: ``, commit_mono_example: ``, }, timeline: [ { name: "franklin_gothic", src: "franklin_gothic.svg", description: [ "Franklin Gothic, 1896.", "Tried-and-true, but overly traditional for code.", "Inspiration was taken from most of the letter constructions, such as 'g'.", ], }, { name: "letter_gothic", src: "letter_gothic.svg", description: [ "Letter Gothic, 1956.", "Clear, simple and monospaced, but too quirky.", "The first simple monospaced sans-serif. Inspiration was taken in the simple shapes.", ], }, { name: "fira_mono", src: "fira_mono.svg", description: [ "Fira Mono, 2013.", "Great letter distinction, but overly complex and unique.", "Inspiration was taken in the way Fira handles monospace symbols.", ], }, { name: "untitled_sans", src: "untitled_sans.svg", description: [ "Untitled Sans, 2017.", "Intentionally neutral, but not optimised for code.", "Inspiration was taken in its neutral nature.", ], }, { name: "commit_mono_example", src: "commit_mono.svg", description: [ "Commit Mono, 2023.", "Neutral and functional, created and tested for code.", "Commit Mono takes the best of all the fonts before it and merges it into a clean package.", ], }, ], }, }, { name: "intelligent", description: `Commit Mono uses an innovative technique to improve kerning. Kerning is crucial for efficient reading, but it’s not possible if you want a monospaced font. ‘Smart Kerning’ combats this by sliding letters to better spacing positions – all while preserving monospacing. This gives Commit Mono a superior reading experience compared to other monospaced fonts. Tip: Press + and - to zoom in and out.`, content: {}, }, { name: "code", description: "Commit Mono is designed and tested for code first. Characters frequently used in code have been given extra care to look distinct and neat.", content: { characters: [ { value: "0", name: "zero", description: "0 (zero): The slashed '0' is easy to tell apart from 'O' at small sizes. Change to a dotted zero in '07 Customize'.", }, { value: "1", name: "one", description: "1 (one): The '1' is in Helvetica style because it's easy to tell apart from 'l' and 'I' – even at small sizes.", }, { value: "@", name: "at", description: "@ (at): The complex curves of the '@' function poorly at small sizes, hence the simplification of the design. Change to a more traditional '@' in '07 Customize'.", }, { value: "$", name: "dollar", description: "$ (dollar): The '$' is slashed all the way through to make it easily distinguishable from 'S'.", }, { value: "?", name: "question", description: "? (question): The '?' and exclam symbols are simple and recognisable.", }, { value: '"', name: "quotedbl", description: `" (double quote): The " and ' have been very carefully adjusted since they're used repeatedly in programming.`, }, { value: "%", name: "percent", description: "% (percent): The '%' is a quite wide symbol, so it will always look squashed in monospace. It fills all available space to look more natural.", }, { value: "&", name: "ampersand", description: "& (ampersand): Unlike most coding fonts, the '&' in Commit Mono looks normal and boring.", }, { value: "*", name: "asterisk", description: "* (asterisk): The '*' is centered like '+' and '='. This is more common in programming, but it can be changed in '07 Customize'.", }, { value: "-", name: "hyphen", description: "- Hyphen: The '-' is short but not too short. This is because it often works like a minus so it has to fit next to +.", }, { value: "(", name: "parenleft", description: "( (left parenthesis): The parentheses are crucial in programming fonts and much care has been given to make them distinguishable.", }, { value: "[", name: "bracketleft", description: "[ (left bracket): The brackets are tall and wide to make them stand out.", }, { value: "{", name: "braceleft", description: "{ (left brace): The braces are slightly bent but not overly. This results in a neutral aesthetic.", }, { value: "~", name: "asciitilde", description: "~ (tilde): The '~' has a slightly exaggerated curve to make it easy to tell apart in small sizes.", }, { value: ";", name: "semicolon", description: "; (semicolon): As seen in the semicolon, the period and the comma are very dissimilar so you always know what you're looking at", }, { value: "#", name: "numbersign", description: "# (hash/numbersign): The '#' is slightly tilted but remains stable.", }, { value: "`", name: "grave", description: "` (grave): The backtick or accent grave is overly tilted to distinguish it more from the single quote '.", }, { value: "<", name: "less", description: "< (less): Less and greater symbols are slightly more closed than some coding fonts, which ties it together better with the lowercase letters.", }, ], }, }, { name: "distinct", description: `With simple letter constructions and confident choices Commit Mono emphasises character distinction without compromising style consistency. Tip: Press M to switch between light and dark mode.`, content: { waterfall: { sizes: [2.5, 1.5, 1, 0.875, 0.75, 0.625, 0.5625, 0.5], texts: ["tl1I|!ij", "O0QDØ38B", `:;.,${"`"}‘'"`, "2Z5S7T6b"], }, gtcDifficulties: [ { name: "Easy", size: 2 }, { name: "Medium", size: 2 }, { name: "Hard", size: 2 }, { name: "Expert", size: 2 }, ], gtc: { Easy: [ { value: ["O", "0"], options: ["uppercase o", "zero"] }, { value: ["2", "Z"], options: ["two", "uppercase z"] }, { value: ["6", "b"], options: ["six", "lowercase B"] }, { value: ["8", "B"], options: ["eight", "uppercase b"] }, { value: ["5", "S"], options: ["five", "uppercase s"] }, ], Medium: [ { value: [".", ","], options: ["period", "comma"] }, { value: ["l", "1"], options: ["lowercase L", "one"] }, { value: ["$", "S"], options: ["dollar", "uppercase s"] }, { value: ["∆", "A"], options: ["delta", "uppercase a"] }, { value: ["+", "*"], options: ["plus", "asterisk"] }, ], Hard: [ { value: ["æ", "œ"], options: ["lowercase AE", "lowercase OE"] }, { value: ["Ø", "0"], options: ["slashed O", "zero"] }, { value: ["ß", "B"], options: ["german double S", "uppercase b"] }, { value: ["‹", "<"], options: ["angle quotation mark", "less"] }, { value: ["-", "—"], options: ["hyphen", "emdash"] }, ], Expert: [ { value: ["✓", "√"], options: ["check mark", "square root"] }, { value: ["×", "x"], options: ["multiply", "lowercase X"] }, { value: ["˚", "°"], options: ["ring", "degree"] }, { value: ["⁄", "/"], options: ["fraction", "slash"] }, { value: ["`", "'"], options: ["accent grave", "single quote"] }, ], }, }, }, { name: "customize", description: `Customize Commit Mono to your liking before you download.`, content: { fonts: [ { name: "Commit Mono", cssName: "CommitMono", id: "commit_mono", }, { name: "Fira Code", cssName: "FiraCode", id: "fira_code", }, { name: "JetBrains Mono", cssName: "JetBrainsMono", id: "jetbrains_mono", }, { name: "Source Code Pro", cssName: "SourceCodePro", id: "source_code_pro", }, { name: "Cascadia Code", cssName: "CascadiaCode", id: "cascadia_code", }, { name: "Consolas", cssName: "Consolas", id: "consolas", }, { name: "Menlo/Meslo", cssName: "Menlo", id: "menlo", }, { name: "Google Sans Code", cssName: "GoogleSansCode", id: "google_sans_code", }, ], weights: [ "200", "225", "250", "275", "300", "325", "350", "375", "400", "425", "450", "475", "500", "525", "550", "575", "600", "625", "650", "675", "700", ], features: [ { type: "alternate", name: "a", label: "Alt. 'a'", feature: "cv01", on: false, description: "Double storey |DEF| or single storey |ALT| lowercase 'a'.", docsExample: "aáä", }, { type: "alternate", name: "g", label: "Alt. 'g'", feature: "cv02", on: false, description: "Double storey |DEF| or single storey |ALT| lowercase 'g'.", docsExample: "gğĝ", }, { type: "alternate", name: "square", label: "Square dots .:ij", feature: "cv03", on: false, description: "Round |DEF| or square |ALT| dots in places of dots.", docsExample: ".:!?iä", }, { type: "alternate", name: "i", label: "Alt. 'i'", feature: "cv04", on: false, description: "Serif |DEF| or sans serif |ALT| lowercase 'i'.", docsExample: "iíï", }, { type: "alternate", name: "at", label: "Standard @", feature: "cv05", on: false, description: "Simplified |DEF| or traditional |ALT| at.", docsExample: "@", }, { type: "alternate", name: "six", label: "Alt. '6', '9'", feature: "cv06", on: false, description: "Closed |DEF| or open |ALT| terminal of 6 and 9.", docsExample: "69", }, { type: "alternate", name: "zero", label: "Dotted 0", feature: "cv07", on: false, description: "Slashed |DEF| or dotted |ALT| zero.", docsExample: "0", }, { type: "alternate", name: "slanted", label: "Alt. italic 'aefgy'", feature: "cv08", on: false, description: "Slanted version |DEF| or italic version |ALT| of 'aefgy' in italic. Press I to view difference.", docsExample: "aefgy", }, { type: "alternate", name: "asterisk", label: "Lifted *", feature: "cv09", on: false, description: "Math/code asterisk |DEF| or small asterisk |ALT|.", docsExample: "2*2", }, { type: "alternate", name: "l", label: "Alt. l", feature: "cv10", on: false, description: "Rounded bottom |DEF| or serif bottom |ALT| lowercase 'l'.", docsExample: "lĺŀ", }, { type: "alternate", name: "one", label: "Alt. 1", feature: "cv11", on: false, description: "Straight top |DEF| or rounded top |ALT| '1'.", docsExample: "1", }, { type: "feature", name: "less_equal", label: "Ligatures <= != === ", feature: "ss01", on: false, description: "No ligatures |OFF| or common sequences into a single symbol |ON|. Below is all supported. Works only with spaces on either side.", docsExample: "i <= j i >= k i == l i === m i != n i !== o", }, { type: "feature", name: "arrows", label: "Arrows >-> =>", feature: "ss02", on: false, description: "No arrows |OFF| or common arrow combination into connected arrows |ON|. Doesn’t make arrows with ~.", docsExample: "-> => <==< >--> <==> <->", }, { type: "feature", name: "case", label: "Smart case (1:1) 2+3", feature: "ss03", on: true, description: "Normal casing |OFF| or automatically put symbols in uppercase if next to uppercase letters |ON|.", docsExample: "H: e: H:o H : H H: o H : o", }, { type: "feature", name: "ellipsis", label: "Symbol spacing ... <<", feature: "ss04", on: true, description: "No change |OFF| or squeeze 2 or 3 symbols closer together |ON|. Leaves 4 or more untouched. Only affects symbols: !?.:;/|<>", docsExample: "... // <<< !?! /.. == ((( ....", }, { type: "feature", name: "smartkerning", label: "Smart kerning (immi)", feature: "ss05", on: true, description: "Normal monospace |OFF| or intelligently place letters in better spacing positions for easier reading |ON|.", docsExample: "moi mio imo normal", }, ], languages: [ { languageName: "JavaScript", codeExample: `const isPalindromic = (number) => { if (number <= 1) { console.log("Usage: please input a non-negative integer"); process.exit(1); } let reverse_number = 0, temp = number; while (temp > 0) { reverse_number = (reverse_number * 10) + (temp % 10); temp = Math.floor(temp / 10); } if (reverse_number == number) return true; else return false; }; const input = process.argv[2]; let number = Number(input) if (input !== '' && Number.isInteger(number) && number >= 0) { isPalindromic(input) ? console.log("true") : console.log("false"); } else { console.log("Usage: please input a non-negative integer") } `, }, { languageName: "TypeScript", codeExample: `function fibonacci(num: number) { let n = Number(num) let elementOne: number = 0 let elementTwo: number = 1 let result: number = 0 for (let i: number = 1; i <= n; i++) { result = elementOne + elementTwo elementOne = elementTwo elementTwo = result console.log(i + ": " + elementOne) } } let num_str = process.argv.length >= 3 ? process.argv[2] : "" let num: number = parseInt(num_str) if (isNaN(num)) { console.log("Usage: please input the count of fibonacci numbers to output") process.exit(0) } fibonacci(num) `, }, { languageName: "HTML/CSS", codeExample: `
`, }, { languageName: "Rust", codeExample: `// Requirement https://sample-programs.therenegadecoder.com/projects/prime-number/ // Accept a number on command line and print if it is Composite or Prime // Works till 39 digits, ... use std::env::args; use std::process::exit; use std::str::FromStr; fn usage() -> ! { println!("Usage: please input a non-negative integer"); exit(0); } fn parse_int