Skip to content

fix: optimized the docs images #291

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

Merged
MathurAditya724 merged 2 commits into from
Feb 24, 2026
Merged

fix: optimized the docs images #291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
52fc4de
fix: shifted the images from public to assets folder
MathurAditya724 Feb 24, 2026
626eddc
fix: corrected the components
MathurAditya724 Feb 24, 2026
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
0 docs/public/bg.png → docs/src/assets/bg.png
View file
Open in desktop
File renamed without changes
0 docs/public/section-bg-1.png → docs/src/assets/section-bg-1.png
View file
Open in desktop
File renamed without changes
0 docs/public/section-bg-2.png → docs/src/assets/section-bg-2.png
View file
Open in desktop
File renamed without changes
0 docs/public/section-bg-3.png → docs/src/assets/section-bg-3.png
View file
Open in desktop
File renamed without changes
24 changes: 24 additions & 0 deletions docs/src/components/FeatureVisual.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
import { getImage } from 'astro:assets';

interface Props {
/** Image import from src/assets/ — processed by Astro's image pipeline */
image: ImageMetadata;
class?: string;
}

const { image, class: className } = Astro.props;

const optimized = await getImage({
src: image,
format: 'webp',
Comment on lines +10 to +14
Copy link

@sentry sentry bot Feb 24, 2026

Choose a reason for hiding this comment

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

Bug: The getImage() function may not prepend the base path to image URLs, causing broken images in deployments with a non-root base path, such as PR previews.
Severity: MEDIUM

Suggested Fix

Manually prepend the base path to the URL generated by getImage(). The base path can be accessed via import.meta.env.BASE_URL. Ensure the final URL is correctly constructed before being used in the inline style.

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: docs/src/components/FeatureVisual.astro#L10-L14

Potential issue: The refactoring from manual URL concatenation to using Astro's
`getImage()` function introduces a potential issue in deployments with a non-root base
path. The `getImage()` function may not automatically prepend the configured `base` path
(e.g., `/pr-preview/pr-123/`) to the `src` attribute of the optimized image. This would
result in broken image links because the browser would try to fetch them from the root
of the domain. This issue would manifest in specific environments like PR previews,
which are configured to use a sub-path, while production deployments to the root domain
would appear to work correctly.

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

quality: 80,
});
---

<div
class:list={['feature-visual', className]}
style={`background-image: url('${optimized.src}');`}
Copy link

@sentry sentry bot Feb 24, 2026

Choose a reason for hiding this comment

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

Bug: The getImage() function does not prepend the site's base path, causing background images to fail to load when the site is deployed on a subpath.
Severity: MEDIUM

Suggested Fix

Manually prepend the import.meta.env.BASE_URL to the src property of the object returned by getImage(). Ensure a trailing slash is handled correctly to construct the valid, full image path for use in the CSS url(). For example: const baseUrl = import.meta.env.BASE_URL; const base = baseUrl.endsWith('/') ? baseUrl : baseUrl + '/'; const finalSrc = base + optimized.src.replace(/^\//, '');

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: docs/src/components/FeatureVisual.astro#L21

Potential issue: The refactoring to use Astro's `getImage()` function for background
images removes the explicit handling of the site's base path. The `getImage()` function
does not automatically prepend the `base` path configured in `astro.config.mjs`.
Consequently, when the documentation site is deployed to a non-root path (e.g., for PR
previews like `/pr-preview/pr-291/`), the generated image URLs will be incorrect. The
browser will attempt to load images from the root of the domain, resulting in 404 errors
and missing background images on affected pages.

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

>
<slot />
</div>
13 changes: 10 additions & 3 deletions docs/src/components/Terminal.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
---
import { getImage } from 'astro:assets';
import bgImage from '../assets/bg.png';

interface Props {
title?: string;
background?: 'custom';
}

const { title = "Terminal", background } = Astro.props;
const bgClass = background ? `bg-${background}` : '';
const baseUrl = import.meta.env.BASE_URL;
const base = baseUrl.endsWith('/') ? baseUrl : baseUrl + '/';

let bgStyle = '';
if (background) {
const optimized = await getImage({ src: bgImage, format: 'webp', quality: 80 });
bgStyle = `--bg-image: url('${optimized.src}');`;
}
---

<div class={`terminal-wrapper ${bgClass}`} style={background ? `--bg-image: url('${base}bg.png');` : ''}>
<div class={`terminal-wrapper ${bgClass}`} style={bgStyle}>
<div class="terminal">
<div class="terminal-header">
<div class="terminal-dots">
Expand Down
20 changes: 11 additions & 9 deletions docs/src/content/docs/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,10 @@ import CommandBox from '../../components/CommandBox.astro';
import InstallSelector from '../../components/InstallSelector.astro';
import Terminal from '../../components/Terminal.astro';
import FeatureTerminal from '../../components/FeatureTerminal.astro';

export const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BASE_URL : import.meta.env.BASE_URL + '/';
import FeatureVisual from '../../components/FeatureVisual.astro';
import sectionBg1 from '../../assets/section-bg-1.png';
import sectionBg2 from '../../assets/section-bg-2.png';
import sectionBg3 from '../../assets/section-bg-3.png';

<div class="hero-command">
<InstallSelector options={[
Expand All @@ -44,7 +46,7 @@ export const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BAS
<p>No config files. No flags. The CLI reads your <code>.env</code>, detects your project from the codebase, and just works. Monorepos, multiple orgs, complex setups — all handled automatically.</p>
<p>Stop memorizing project slugs and DSNs. Start typing commands that make sense.</p>
</div>
<div class="feature-visual" style={`background-image: url('${base}section-bg-1.png');`}>
<FeatureVisual image={sectionBg1}>
<FeatureTerminal title="Terminal">
<div class="line"><span class="prompt">$</span> <span class="command">sentry issue list</span></div>
<div class="line dimmed">Detected project: my-app (from .env)</div>
Expand All @@ -70,7 +72,7 @@ export const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BAS
<span class="col-count">34</span>
</div>
</FeatureTerminal>
</div>
</FeatureVisual>
</div>
</section>

Expand All @@ -81,7 +83,7 @@ export const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BAS
<p>Get AI-powered root cause analysis right in your terminal. Seer analyzes stack traces, related events, and your codebase to explain exactly what went wrong and why.</p>
<p>Then run <code>sentry issue plan</code> to get a step-by-step fix you can apply immediately.</p>
</div>
<div class="feature-visual" style={`background-image: url('${base}section-bg-2.png');`}>
<FeatureVisual image={sectionBg2}>
<FeatureTerminal title="Terminal">
<div class="line"><span class="prompt">$</span> <span class="command">sentry issue explain WQ</span></div>
<div class="line dimmed">Analyzing MYAPP-WQ...</div>
Expand All @@ -92,7 +94,7 @@ export const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BAS
<div class="line dimmed">Affected: src/hooks/useUser.ts:42</div>
<div class="line dimmed">Run `sentry issue plan` for a fix.</div>
</FeatureTerminal>
</div>
</FeatureVisual>
</div>
</section>

Expand All @@ -103,7 +105,7 @@ export const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BAS
<p>Structured JSON output for scripts and pipelines. Open issues directly in your browser. Pipe to <code>jq</code>, <code>fzf</code>, or your favorite tools.</p>
<p>Built for humans and AI agents alike — every command is predictable, composable, and automation-ready.</p>
</div>
<div class="feature-visual" style={`background-image: url('${base}section-bg-3.png');`}>
<FeatureVisual image={sectionBg3}>
<FeatureTerminal title="Terminal">
<div class="line"><span class="prompt">$</span> <span class="command">sentry org list --json | jq '.[0]'</span></div>
<div class="spacer"></div>
Expand All @@ -114,6 +116,6 @@ export const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BAS
<div class="line"> <span class="highlight">"members"</span>: 8</div>
<div class="line">{"}"}</div>
</FeatureTerminal>
</div>
</FeatureVisual>
</div>
</section>
</section>
Loading