Skip to content

docs: Add logo image and style introductory text in introduction.mdx. #21

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
KUASWoodyLIN merged 1 commit into from
Nov 28, 2025
Merged

docs: Add logo image and style introductory text in introduction.mdx. #21

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
15 changes: 13 additions & 2 deletions src/content/docs/introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,19 @@ description: Overview of OtterScale.
---

import { Card, CardGrid, LinkCard, Steps, Aside } from '@astrojs/starlight/components';

OtterScale is a **Hyper-Converged Infrastructure (HCI)** platform that unifies compute, storage, networking, and virtualization into a single, software-defined system. By collapsing traditional infrastructure silos, OtterScale simplifies deployment and management while delivering the scalability needed for modern enterprise workloads.
import { Image } from 'astro:assets';
import logo2 from '../../assets/logo2.png';

<div class="flex gap-6 mb-4 items-start">
<Image src={logo2} alt="OtterScale Logo" width="200" />
Copy link

Copilot AI Nov 28, 2025

Choose a reason for hiding this comment

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

Consider adding a height attribute to the Image component to prevent layout shift during page load. For example: <Image src={logo2} alt="OtterScale Logo" width="200" height="200" /> (adjust the height value to match your logo's aspect ratio).

Suggested change
<Image src={logo2} alt="OtterScale Logo" width="200" />
<Image src={logo2} alt="OtterScale Logo" width="200" height="200" />

Copilot uses AI. Check for mistakes.
<div>
<span class="text-xl font-bold">OtterScale</span> is a{' '}
<span class="text-xl font-bold">Hyper-Converged Infrastructure (HCI)</span>
Comment on lines +13 to +14
Copy link

@gemini-code-assist gemini-code-assist bot Nov 28, 2025

Choose a reason for hiding this comment

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

medium

For semantic correctness and better accessibility, it's preferable to use the <strong> tag for text with strong importance, rather than a generic <span> with a bolding class. The <strong> tag conveys that the content is important, not just visually styled. Browsers render <strong> as bold by default, so the font-bold class becomes redundant.

		<strong class="text-xl">OtterScale</strong> is a{' '}
		<strong class="text-xl">Hyper-Converged Infrastructure (HCI)</strong>

platform that unifies compute, storage, networking, and virtualization into a single, software-defined
system. By collapsing traditional infrastructure silos, OtterScale simplifies deployment and management
Comment on lines +13 to +16
Copy link

Copilot AI Nov 28, 2025

Choose a reason for hiding this comment

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

The {' '} syntax is unnecessary here. In MDX/JSX, a regular space between text elements works fine. You can simply write: <span class="text-xl font-bold">OtterScale</span> is a <span class="text-xl font-bold">Hyper-Converged Infrastructure (HCI)</span> with a normal space.

Suggested change
<span class="text-xl font-bold">OtterScale</span> is a{' '}
<span class="text-xl font-bold">Hyper-Converged Infrastructure (HCI)</span>
platform that unifies compute, storage, networking, and virtualization into a single, software-defined
system. By collapsing traditional infrastructure silos, OtterScale simplifies deployment and management
<span class="text-xl font-bold">OtterScale</span> is a <span class="text-xl font-bold">Hyper-Converged Infrastructure (HCI)</span>
platform that unifies compute, storage, networking, and virtualization into a single, software-defined
system. By collapsing traditional infrastructure silos, OtterScale simplifies deployment and management
system. By collapsing traditional infrastructure silos, OtterScale simplifies deployment and management

Copilot uses AI. Check for mistakes.
while delivering the scalability needed for modern enterprise workloads.
</div>
</div>

<Aside type="tip">
OtterScale is purpose-built for high-performance computing, offering robust **computation**
Expand Down
Loading