CSS-Tricks / coding-fonts

https://coding-fonts.css-tricks.com/
MIT License
461 stars 67 forks source link

take_screenshots.js not using the specified font when the font isn't lowercase #91

Closed KasimAhmic closed 3 years ago

KasimAhmic commented 3 years ago

Issue

When using the take_screenshots.js file, lines 7-10 read the .md files in the fonts directory and store their names in whatever case the name of the file is in, i.e. if the file is Menlo.md, it's read as Menlo. This is then passed in the URL when navigating to the code sample page with Puppeteer where it proceeds to not render the sample in the specified font if the font isn't in all lowercase. I've attached some screenshots below that show this.

Solutions

One solution is to is to rename all the font directories so that they're all in lowercase and continue to maintain this style moving forward.

Another solution is to simply add a toLowerCase() method call when declaring the allFonts variable. This has the benefit of not concerning itself with the case of the font files themselves. Example below.

const allFonts = fs
  .readdirSync('./src/fonts')
  .filter((file) => file.endsWith('.md'))
  .map((file) => file.replace('.md', '').toLowerCase());

Personally I think the second solution is better though I'll leave it up to you. Let me know which solution is more preferable and I'll make a pull request.

image image

KasimAhmic commented 3 years ago

This is addressed in #93

chriscoyier commented 3 years ago

thanks for handling!