Mirror
/
programmingfonts
mirror of https://github.com/braver/programmingfonts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

start displaying font descriptions

This commit is contained in:
Koen Lagveen 2023-07-21 22:45:18 +02:00
parent 1db18ba0a3
commit 805cdcb23e
5 changed files with 94 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
fonts-schema.json
View File

@ -55,12 +55,19 @@
"enum": ["empty", "slashed", "dotted"]
},
"variants": {
"type": "array",
"items": {
"type": "string",
"pattern": "^([a-z-]+|\\d00)$"
},
"minItems": 1
"oneOf": [
{
"type": "array",
"items": {
"type": "string",
"pattern": "^([a-z-]+|\\d00)$"
},
"minItems": 1
},
{
"type": "string"
}
]
}
},
"additionalProperties": false,

71
fonts.json
View File

@ -1,7 +1,7 @@
{
"agave": {
"author": "agaric",
"description": "Although in intention simple and systematic, Agave has lots of quirky character. Distinct, readable and well aligned characters round out a font that should cover all characters in most code use cases if not all languages of the world. The capital Q is particularly cool. Sadly, like a lot of alternatives, it doesn’t offer true bold and italic.",
"description": "Although in intention simple and systematic, Agave has lots of quirky character.",
"license": "MIT",
"ligatures": false,
"name": "Agave",
@ -31,7 +31,7 @@
},
"anonymous-pro": {
"author": "Mark Simonson",
"description": "Anonymous Pro is an evolution of the original Anonymous, adding lots of character sets and styles. It covers all the characters (624 glyphs), styles and weights anyone will ever need, and with all characters easily distinguishable. For fans of having lots of code on screen, it even features bitmap versions for really tiny characters (without anti-aliasing). It’s a truly professional option with a splash of character.",
"description": "Anonymous Pro is an evolution of the original Anonymous, adding lots of character sets and styles.",
"license": "SIL OFL",
"ligatures": false,
"name": "Anonymous Pro",
@ -109,25 +109,7 @@
"rendering": "vector",
"style": "sans",
"zerostyle": "empty",
"variants": [
"thin",
"thin-italic",
"light",
"light-italic",
"extrabold",
"extrabold-italic",
"black",
"black-italic",
"extralight",
"extralight-italic",
"medium",
"medium-italic",
"semibold",
"semibold-italic",
"regular",
"italic",
"variable"
],
"variants": "A variable font, available in various weights.",
"website": "https://github.com/displaay/Azeret",
"year": 2020
},
@ -246,31 +228,14 @@
},
"cartograph": {
"author": "Connary Fagen",
"description": "A monospaced typeface with character and warmth, Cartograph is a handsome font family featuring a lush, cursive italic, code-friendly ligatures, and a proportional set accessible via OpenType. A tribute to the utilitarian beauty of terminals and typewriters, Cartograph excels in code and prose.",
"description": "A monospaced typeface with character and warmth, Cartograph is a handsome font family featuring a lush, cursive italic, code-friendly ligatures, and a proportional set accessible via OpenType.",
"license": "commercial",
"ligatures": true,
"name": "Cartograph",
"rendering": "vector",
"style": "sans",
"zerostyle": "dotted",
"variants": [
"regular",
"italic",
"bold",
"bold-italic",
"demi-bold",
"demi-bold-italic",
"extra-bold",
"extra-bold-italic",
"heavy",
"heavy-italic",
"light",
"light-italic",
"extra-light",
"extra-light-italic",
"thin",
"thin-italic"
],
"variants": "8 weights and various alternatives via OpenType sets, including ligatures.",
"website": "https://connary.com/cartograph.html",
"year": 2016
},
@ -278,23 +243,11 @@
"author": "Aaron Bell",
"ligatures": true,
"name": "Cascadia Code",
"description": "This is a fun, new monospaced font that includes programming ligatures and is designed to enhance the modern look and feel of the Windows Terminal.",
"rendering": "vector",
"style": "sans",
"zerostyle": "dotted",
"variants": [
"regular",
"italic",
"bold",
"bold-italic",
"semi-bold",
"semi-bold-italic",
"light",
"light-italic",
"semi-light",
"semi-light-italic",
"extra-light",
"extra-light-italic"
],
"variants": "6 weights and various alternatives via OpenType sets, including slashed zeroes and cursive italics.",
"website": "https://github.com/microsoft/cascadia-code",
"year": 2019
},
@ -326,7 +279,7 @@
},
"comic-shanns": {
"author": "Shannon Miwa",
"description": "Like if someone made a dumbass version of Comic Sans that is monospaced.",
"description": "Do you lie awake every night dreaming about a world where you could write your code in Comic Sans where it looks just as beautiful as on your dear presentations?",
"license": "MIT",
"ligatures": false,
"name": "Comic Shanns",
@ -348,9 +301,7 @@
"rendering": "vector",
"style": "sans",
"zerostyle": "slashed",
"variants": [
"variable"
],
"variants": "A download can be customized with various of weights, ligatures, dotted or slashed zeroes, and other styles.",
"website": "https://commitmono.com",
"year": 2023
},
@ -418,7 +369,7 @@
},
"cousine": {
"author": "Steve Matteson",
"description": "This font was designed by Steve Matteson, more widely known for his work on the Droid fontfaces you’ll find on any Android device. It was created especially for on-screen use, and covers regular, bold and italic in an amazing 2391 Glyphs. Compatibility might be its strongest feat, but it’s a serious font for every day use.",
"description": "An innovative, refreshing sans serif design that is metrically compatible with Courier New.",
"license": "Apache",
"ligatures": false,
"name": "Cousine",
@ -984,10 +935,12 @@
"author": "David Jonathan Ross",
"ligatures": false,
"name": "Input",
"description": "Input is a flexible system of fonts designed specifically for code",
"rendering": "vector",
"style": "sans",
"zerostyle": "dotted",
"website": "http://input.fontbureau.com",
"variants": "A download can be customized with dozens of weights, widths, dotted or slashed zeroes, and other styles.",
"year": 2014
},
"intel-one-mono": {

39
index.css
View File

@ -85,6 +85,7 @@ html {
}
body {
display: flex;
height: 100%;
min-height: 100%;
background: var(--paper-white);
@ -96,6 +97,12 @@ h1 {
font-weight: bold;
font-size: 14px;
}
h2 {
margin: 0;
padding: 0;
font-weight: bold;
font-size: 14px;
}
p {
padding: 0;
}
@ -136,6 +143,35 @@ a:active {
border-right-color: var(--paper-white);
}
}
.codemirror-wrapper {
flex: 1;
position: relative;
}
.info-wrapper {
position: absolute;
bottom: 1rem;
right: 2rem;
left: 2rem;
z-index: 1;
padding: 1em 1.4em;
font-size: 10px;
background: var(--light-grey);
color: var(--dark-grey);
}
.info-wrapper a:hover {
color: var(--ink-black);
text-decoration: underline;
}
.info-wrapper p {
line-height: 14px;
}
.info-wrapper p:empty {
display: none;
}
.info-wrapper p.variants::before {
content: 'Variants: ';
font-weight: bold;
}
main {
display: flex;
flex-direction: column;
@ -445,6 +481,9 @@ footer .logo:last-child {
}
@media screen and (max-width: 56em) {
body {
display: block;
}
.main-wrapper,
form {
width: 100%;

20
index.html
View File

@ -289,9 +289,10 @@
</main>
</div>
<form>
<label for="code" class="screenreader-only">Code area</label>
<textarea id="code" name="code">
<div class="codemirror-wrapper">
<form>
<label for="code" class="screenreader-only">Code area</label>
<textarea id="code" name="code">
// Type some code ->
console.log "oO08 iIlL1 g9qCGQ ~-+=>";
@ -323,8 +324,17 @@ function updateGutters(cm) {
return false;
}
</textarea>
</form>
</textarea>
</form>
<aside class="info-wrapper">
<h2><a href=""></a></h2>
<p class="info"></p>
<p class="variants"></p>
</aside>
</div>
<script src="index.js" type="module"></script>
</body>

17
index.js
View File

@ -43,14 +43,27 @@ function getFont () {
return font
}
function setDetails (data) {
const box = document.querySelector('.info-wrapper')
box.querySelector('a').href = data.website
box.querySelector('h2 a').textContent = data.name
box.querySelector('p.info').textContent = data.description ?? ''
if (typeof data.variants === 'string') {
box.querySelector('p.variants').textContent = data.variants
} else if (data.variants && data.variants.length > 1) {
box.querySelector('p.variants').textContent = data.variants.join(', ')
} else {
box.querySelector('p.variants').textContent = ''
}
}
// ProgrammingFonts font selector
function selectFont () {
const msg = document.querySelector('footer .subtitle')
const codeMirror = document.querySelector('.CodeMirror')
const font = getFont()
if (typeof fontData !== 'undefined') {
msg.innerHTML = `Test drive <a rel="external" href="${fontData[font].website}">${fontData[font].name}!</a>`
setDetails(fontData[font])
}
if (typeof fontData !== 'undefined' && fontData[font].rendering === 'bitmap') {