containers / containers/podman.io
Codebase audit: cleanup, font, TypeScript, and build issues found during audit
- Dominant language
- TypeScript
- Stars
- 108
- Forks
- 188
- Avg merge
- 6d 22h
- Merged PRs (30d)
- 12
Description
# Codebase audit — font/CSS, TypeScript, and build hygiene issues
I spent some time going through the codebase and noticed a handful of build and asset hygiene issues along the way. I verified each of these locally with the commands below before listing them here.
I wanted to put them together in one issue first rather than opening and spamming several PRs straight away, since some of these may already be known or intentional.
### 1. Missing `font-display` descriptor
```bash
$ grep -c 'font-display' src/css/fonts/*.css
src/css/fonts/montserrat.css:0
src/css/fonts/source-code-pro.css:0
src/css/fonts/source-sans-pro.css:0
```
None of the 46 `@font-face` blocks currently specify `font-display`, so they fall back to the default `auto` behaviour. This can leave text using a font that's still loading invisible for a short period instead of immediately falling back to a system font.
### 2. Invalid `font-style: regular`
```bash
$ grep -n "font-style: regular" src/css/fonts/*.css | wc -l
33
```
There are 33 instances of `font-style: regular`. The valid values are `normal`, `italic`, and `oblique`, so browsers discard `regular` and fall back to `normal`.
That happens to match the intended styling here, which is probably why it hasn't caused any visible problems, but the declarations themselves are still invalid CSS.
### 3. Malformed `font-family` name drops a font face from the build
`src/css/fonts/source-code-pro.css:85` declares:
```css
font-family: "Source CodeP ro";
```
There is an extra space in the family name, which makes that particular `@font-face` block unreachable under the expected `Source Code Pro` family.
I also noticed the source and production build contain different numbers of font-face declarations:
```bash
$ grep -o '@font-face' src/css/fonts/*.css | wc -l
46
$ grep -o '@font-face' build/assets/css/*.css | wc -l
45
```
### 4. Italic 900-weight faces reference the upright font files
The 900-weight italic declarations in:
* `montserrat.css:119`
* `source-sans-pro.css:80`
* `source-code-pro.css:107`
reference the upright `*-Black.ttf` files rather than their `*-BlackItalic.ttf` counterparts.
The correct italic files are already present in the repo. This doesn't appear to have a visible effect right now because nothing on the site seems to combine `font-black` with italic styling, but it would use the wrong face if that combination is introduced.
### 5. TypeScript parsing error in `get-started.tsx`
Running TypeScript directly gives:
```bash
$ npx tsc --noEmit
src/pages/get-started.tsx(102,116): error TS1382: Unexpected token. Did you mean `{'>'}` or `>`?
```
Line contains `` inside JSX, which TypeScript interprets as the start of a JSX tag.
The current build path doesn't expose this because Babel/Prettier handle the source before `tsc` is involved, but it does prevent a clean `tsc --noEmit` run and would surface if stricter type checking is added later.
### 6. Orphaned image with a malformed filename
There's a file at:
```text
static/images/raw/Screenshot from 2021-11-10 18-34-48.png-1.png
```
It has both spaces in the filename and a `.png-1.png` double extension. I couldn't find any reference to it in the source:
```bash
$ grep -r "Screenshot" src --include="*.tsx" --include="*.ts"
# no results
```
### 7. Unused `article-thumb` images
These three files also appear to be unused:
```text
article-thumb.png
article-thumb-2.png
article-thumb-3.png
```
They look like leftovers from before `ArticleCard`'s fallback image was changed to `podman-selkie-385w-358h.png`.
### 8. Montserrat font files are emitted twice in the production build
I noticed Montserrat appears in two locations after building:
```bash
$ find build/fonts/montserrat -name "*.ttf" | wc -l
20
$ find build/assets/fonts -name "Montserrat*" | wc -l
17
```
I compared one pair to check whether these were actually different files:
```bash
$ md5 build/fonts/montserrat/Montserrat-Bold.ttf
f47cf1db0d2b8c6cbaeae13c6d3b8e0d
$ md5 build/assets/fonts/Montserrat-Bold-*.ttf
f47cf1db0d2b8c6cbaeae13c6d3b8e0d
```
They're identical, so this looks like roughly 3–4 MB of duplicated font assets in the production output.
I only see this happening with Montserrat, not the other two font families. It looks like both a direct `static/` copy and a Webpack-emitted copy may be active for Montserrat, but I'd prefer some maintainer input on which path is intended before changing this.
## Proposed next steps
My initial thought would be to group items 1–4 into one focused font/CSS cleanup PR.
Item 5 and items 6–7 are independent and small enough to handle separately. For item 8, I'd prefer to confirm which build path should be right before making changes.
I'm happy to pick up whichever of these would be most useful and split the work into focused PRs accordingly. Would appreciate your guidance on what you'd prefer me to prioritise.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by confirming which items the maintainer wants separated, then inspect the named font files under src/css/fonts/, src/pages/get-started.tsx, the listed static image paths, and the production build output. Re-run the issue's grep, npx tsc --noEmit, and asset-count checks. Done means each selected cleanup is focused, the TypeScript check is clean where applicable, and the relevant source and build counts or references are corrected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript, webpack
- Domain
- build-system, frontend
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 43/100