Skip to content

add optional font inlining to presentation creator #88

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shellmayr wants to merge 1 commit into
base: main
Choose a base branch
from
Open

add optional font inlining to presentation creator #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions plugins/sentry-skills/skills/presentation-creator/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,3 +201,13 @@ A working React + Vite project that:
- Contains data-driven Recharts visualizations
- Builds to a single distributable HTML file
- Has smooth fade-in animations on slide transitions

## References

| File | Description |
|------|-------------|
| `references/design-system.md` | Color palette, typography, CSS variables, layout, animations |
| `references/chart-patterns.md` | Recharts component patterns, color usage rules, data generation |
| `references/offline-fonts.md` | How to inline fonts for fully offline single-file builds |
| `references/sentry-logo.svg` | Official Sentry wordmark SVG |
| `references/sentry-glyph.svg` | Official Sentry glyph SVG |
59 changes: 59 additions & 0 deletions plugins/sentry-skills/skills/presentation-creator/references/offline-fonts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
# Offline Font Inlining

By default, the presentation template loads Rubik and Material Symbols from Google Fonts via `<link>` tags. This works for development and online use, but the fonts will **not** be included in the single-file HTML build — `vite-plugin-singlefile` only inlines local assets.

If the presentation needs to work fully offline, follow these steps to inline the fonts.

## Step 1: Install @fontsource/rubik

Replace the Google Fonts `<link>` with the npm package:

```sh
npm install @fontsource/rubik
```

## Step 2: Import font weights in main.jsx

```jsx
import '@fontsource/rubik/300.css'
import '@fontsource/rubik/400.css'
import '@fontsource/rubik/500.css'
import '@fontsource/rubik/600.css'
import '@fontsource/rubik/700.css'
```

Comment on lines +20 to +24
Copy link
Copy Markdown

@sentry sentry Bot Mar 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: The documentation for creating offline presentations fails to instruct the removal of the Material Symbols font link, resulting in a build that is not fully self-contained.
Severity: MEDIUM

Suggested Fix

Update Step 3 in offline-fonts.md to explicitly show the removal of both the Rubik and Material Symbols font links. Alternatively, add a note in Step 3 clarifying that the Material Symbols link must also be removed and reference the dedicated section that recommends replacing the font with SVGs or Unicode symbols for a truly offline build.

Prompt for AI Agent 
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location:
plugins/sentry-skills/skills/presentation-creator/references/offline-fonts.md#L20-L24

Potential issue: The new documentation in `offline-fonts.md` for creating self-contained
presentations is incomplete. The instructions in Step 3, titled "Remove Google Fonts
links," only show the removal of the `Rubik` font link. It fails to instruct the user to
also remove the link for `Material Symbols`. If a user follows the steps literally, the
resulting presentation will not be fully self-contained as claimed. It will still
attempt to make a network request to Google Fonts to load the `Material Symbols` font,
which will fail in an offline environment, causing icons to not render correctly.

Did we get this right? 👍 / 👎 to inform future reviews.

## Step 3: Remove Google Fonts links from index.html

Replace:
```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
```

With:
```html
<!-- Rubik font loaded via @fontsource/rubik (inlined at build time) -->
```

## Step 4: Raise the asset inline limit in vite.config.js

Font files (woff2) are ~50–200KB each. Set a high limit so Vite base64-encodes them into the CSS, which `vite-plugin-singlefile` then embeds in the HTML:

```javascript
export default defineConfig({
plugins: [react(), viteSingleFile()],
build: { assetsInlineLimit: 1024 * 1024 },
})
```

## Step 5: Build

```sh
npm run build
```

The resulting `dist/index.html` will be ~1.5MB (vs ~200KB without fonts) but fully self-contained.

## Material Symbols

The `material-symbols` npm package can be installed similarly, but it is very large. For offline builds, prefer inline SVG or Unicode symbols for icons instead.