Skip to content

Add screenshots placeholder and adjust styles across documentation and components#4

Merged
ditahkk merged 6 commits into
mainfrom
issues/keep-2ndDomain
Jun 1, 2026
Merged

Add screenshots placeholder and adjust styles across documentation and components#4
ditahkk merged 6 commits into
mainfrom
issues/keep-2ndDomain

Conversation

@ditahkk
Copy link
Copy Markdown
Contributor

@ditahkk ditahkk commented May 31, 2026

  • Updated various documentation files to include placeholders for upcoming screenshots.
  • Adjusted font sizes in Hero and TableOfContents components for better readability.
  • Implemented a sidebar resizer feature for improved user experience in PageFrame component.
  • Enhanced styling for action buttons and content areas to ensure consistency and accessibility.
  • Added media queries to maintain layout integrity across different screen sizes.

What changed

Why

Checklist

  • pnpm fmt && pnpm lint && pnpm typecheck && pnpm build all pass
  • Content is accurate and tested against the live portal/CLI/API
  • No internal infrastructure details, credentials, or IPs included
  • Screenshots replaced with :::note Screenshot pending::: if unavailable

Summary by CodeRabbit

  • New Features

    • Resizable left sidebar and right TOC with persistent widths; TOC gains copy/edit/feedback actions and a “Last updated” badge.
    • Added an API Quickstart and S3 usage guide with multi-language examples.
  • Documentation

    • Rewrote API authentication guidance; refreshed API reference naming and interactive links.
    • Replaced many “Screenshot pending” notes with standardized “Screenshots coming.”
    • Expanded and reorganized DNS/domain documentation and billing/signup details.
  • Style

    • Increased hero and sidebar typography sizes.

…d components

- Updated various documentation files to include placeholders for upcoming screenshots.
- Adjusted font sizes in Hero and TableOfContents components for better readability.
- Implemented a sidebar resizer feature for improved user experience in PageFrame component.
- Enhanced styling for action buttons and content areas to ensure consistency and accessibility.
- Added media queries to maintain layout integrity across different screen sizes.
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 31, 2026

Review Change Stack

Warning

Review limit reached

@ditahkk, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 28 minutes and 25 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: cb79a30d-47c7-4c8a-858d-bd4f730eb0e3

📥 Commits

Reviewing files that changed from the base of the PR and between ef1619d and a805ece.

📒 Files selected for processing (11)
  • CLAUDE.md
  • src/content/docs/public-cloud/api/authentication.md
  • src/content/docs/public-cloud/api/quickstart.mdx
  • src/content/docs/public-cloud/api/reference.md
  • src/content/docs/public-cloud/dns/domains.md
  • src/content/docs/public-cloud/getting-started/introduction.md
  • src/content/docs/public-cloud/storage/object-storage/create-bucket.md
  • src/content/docs/public-cloud/storage/object-storage/s3-usage.mdx
  • src/overrides/Hero.astro
  • src/overrides/PageFrame.astro
  • src/overrides/TableOfContents.astro
📝 Walkthrough

Walkthrough

Updated site configuration to add Expressive Code config and lastUpdated, reorganized Starlight sidebar, suppressed a Rollup warning, standardized “Screenshots coming” notes across many docs, added API Quickstart and S3 usage pages, and implemented TOC action buttons plus sidebar/TOC resize and typography/CSS updates.

Changes

Site Configuration Setup

Layer / File(s) Summary
Expressive Code Configuration Module
ec.config.mjs
New module exports Expressive Code configuration via defineEcConfig, setting inline stylesheet behavior, frame disabled for code blocks, and padding overrides.
Starlight Navigation and Rollup Configuration
astro.config.mjs
Starlight plugin comments and lastUpdated: true; sidebar navigation reworked (public "ZCP" groups including CLI/API), ZPCP transition adjusted; vite.build.rollupOptions.onwarn added to suppress a specific Rollup warning.

Documentation Content Updates

Layer / File(s) Summary
Compute Instance and VM Management Documentation
src/content/docs/public-cloud/compute/*, src/content/docs/public-cloud/backups-snapshots/*
Instance creation, overview, console access, RDP/SSH, power management, and VM settings now use standardized :::note blocks saying “Screenshots coming” and some admonitions were reformatted to multi-line caution/warning blocks.
Networking and VPC Documentation
src/content/docs/public-cloud/networking/*, src/content/docs/public-cloud/networking/vpc/*
Public network and VPC pages updated with repeated section-level :::note placeholders and consistent formatting.
Storage, Backups, and Object Storage Documentation
src/content/docs/public-cloud/storage/*
Backups, snapshots, block storage, create-bucket, access-keys, and s3 usage pages updated; Object Locking guidance reflowed and s3-usage added with multi-SDK examples.
Kubernetes, Load Balancer, Affinity, Auto-scaling
src/content/docs/public-cloud/kubernetes/*, src/content/docs/public-cloud/load-balancer/*, src/content/docs/public-cloud/affinity-groups/*, src/content/docs/public-cloud/auto-scaling/*
Multiple infrastructure docs standardized to use :::note placeholders for screenshots and minor content reorganizations.
Getting Started and Account Management
src/content/docs/public-cloud/getting-started/*
Account signup adds coupon redemption and a Postpaid subsection; profile-setup and related pages standardize screenshot placeholders across sections.
API Docs & Examples
src/content/docs/public-cloud/api/*, src/content/docs/index.mdx
Authentication doc rewritten for Bearer token usage; removed old quickstart.md and added new api/quickstart.mdx with multi-language examples; API reference renamed "Instances" → "Virtual Machines"; docs index text adjusted.

UI Component and Styling Enhancements

Layer / File(s) Summary
Sidebar Resizing Interaction Feature
src/overrides/PageFrame.astro, src/styles/custom.css
Adds accessible sidebar and TOC resizer handles, client script for mouse-drag and keyboard resizing, clamped min/max widths, rem-based CSS variable updates, and persistence to localStorage; CSS adds fixed resizer visuals hidden on small screens.
Table of Contents Panel Redesign
src/overrides/TableOfContents.astro
Custom TOC panel that conditionally renders Starlight TOC, shows a localized “Last updated” badge from entry.data.lastUpdated, and vertical action stack: copy as Markdown (htmlToMarkdown updated), edit this page, give feedback, copy all code. New CSS for panel and actions.
Typography and Layout
src/overrides/Hero.astro, src/styles/custom.css
Hero tagline font-size increased to 1rem; hero pillars and sidebar typography slightly increased; wide-screen elastic layout and content-panel sizing added.

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers:

  • ClintonChe
  • godsonten
  • ditahm6

"A rabbit hops through the docs with glee,
Sidebar now resizes—stretchy and free!
Screenshots coming, the notes all align,
TOC redesigned with buttons so fine. ✨
Config's now clear, the site feels divine!"

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description is incomplete—it lists bullet points but does not follow the required template structure, lacks a cohesive 'What changed' section, missing 'Why' rationale, and all checklist items remain unchecked. Fill in the template properly: provide a single sentence describing the primary change under 'What changed', add a 'Why' section explaining the motivation, and verify all checklist items before marking as complete.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main changes: adding screenshot placeholders and adjusting styles across documentation and components, which are reflected throughout the PR.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch issues/keep-2ndDomain

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 6

🧹 Nitpick comments (1)
src/content/docs/public-cloud/storage/object-storage/s3-usage.md (1)

85-87: ⚡ Quick win

Convert the inline :::tip ... ::: callout to block form (consistency/readability).

The ... compatibility. ::: inline-close style is already used elsewhere in the docs, so this is mainly a formatting consistency tweak rather than a parsing fix.

Suggested fix
-:::tip Use `forcePathStyle: true` (Node.js) when working with Ceph-backed S3 to ensure
-compatibility. :::
+:::tip
+Use `forcePathStyle: true` (Node.js) when working with Ceph-backed S3 to ensure compatibility.
+:::
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/content/docs/public-cloud/storage/object-storage/s3-usage.md` around
lines 85 - 87, Replace the inline callout usage of :::tip Use `forcePathStyle:
true` (Node.js) when working with Ceph-backed S3 to ensure compatibility. :::
with a proper block callout so it renders as a standalone tip block (i.e.,
convert the inline `:::tip ... :::` sequence into the block form that begins
with `:::tip` on its own line, the content on following lines, and a closing
`:::` on its own line) to match the other callouts in the docs and improve
readability.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@astro.config.mjs`:
- Around line 21-24: The "last updated" badge code in TableOfContents.astro
should read the Starlight-provided value from
Astro.locals.starlightRoute.lastUpdated (falling back to entry.data.lastUpdated
if desired) because setting lastUpdated: true does not populate
entry.data.lastUpdated; update the badge rendering logic in
TableOfContents.astro to use Astro.locals.starlightRoute.lastUpdated (or use
Astro.locals.starlightRoute.lastUpdated ?? entry.data.lastUpdated) wherever the
component currently checks entry.data.lastUpdated so the badge appears
correctly.

In `@src/content/docs/public-cloud/compute/settings/change-os.md`:
- Around line 11-13: Replace the malformed inline admonition that begins
"Changing the OS will erase all existing data and configurations on the VM. Back
up critical data before proceeding. Delete snapshots and backups before changing
the OS." with a proper block-style warning admonition so it renders correctly;
locate the paragraph containing that exact warning text in change-os.md and wrap
it using the standard warning block syntax used across the docs (a dedicated
warning block with a clear title and the same warning copy), ensuring the
content is a single contiguous block so the admonition renderer recognizes it.

In `@src/content/docs/public-cloud/storage/object-storage/create-bucket.md`:
- Around line 41-43: The Starlight aside for "Object Locking" has its closing
delimiter placed inline ("storage costs. :::"), which breaks parsing; edit the
aside block so the closing triple-colon appears alone on its own line (i.e., end
the paragraph with "storage costs." then put ":::” on the next line) to restore
proper aside parsing for the note text.

In `@src/overrides/PageFrame.astro`:
- Line 100: Wrap all localStorage access in PageFrame.astro (both setItem and
getItem for STORAGE_KEY) with try/catch to avoid exceptions in private browsing
or disabled storage; specifically, around the call that sets STORAGE_KEY
(String(currentWidthPx)) and the corresponding getItem usage ensure errors are
caught and ignored or fallback values are used so the resize feature doesn't
break, and log or silently handle the error inside the catch block.

In `@src/overrides/TableOfContents.astro`:
- Line 155: The copy handlers call navigator.clipboard.writeText(...) directly
which will throw in non-secure or unsupported environments; update both the
handler containing await navigator.clipboard.writeText(combined) and the
markdown copy handler referenced near the second occurrence to first check for
availability (e.g. verify navigator.clipboard and navigator.clipboard.writeText
exist) and wrap the writeText call in a try/catch so failures are handled
gracefully (fall back to selection/execCommand or show a user-friendly
error/toast) instead of breaking the feature.
- Around line 29-30: The edit link currently uses raw filePath built from
entry.id and can break for special characters; update the code so the path is
URL-encoded before interpolation into editUrl (use entry.id to produce an
encodedPath by splitting on '/' and applying encodeURIComponent to each segment,
then joining with '/'), then build editUrl as
`${DOCS_REPO}/edit/main/${encodedPath}` (references:
filePath/editUrl/entry.id/DOCS_REPO).

---

Nitpick comments:
In `@src/content/docs/public-cloud/storage/object-storage/s3-usage.md`:
- Around line 85-87: Replace the inline callout usage of :::tip Use
`forcePathStyle: true` (Node.js) when working with Ceph-backed S3 to ensure
compatibility. ::: with a proper block callout so it renders as a standalone tip
block (i.e., convert the inline `:::tip ... :::` sequence into the block form
that begins with `:::tip` on its own line, the content on following lines, and a
closing `:::` on its own line) to match the other callouts in the docs and
improve readability.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 633cd232-75ee-43c3-bb17-17bc3a97e94b

📥 Commits

Reviewing files that changed from the base of the PR and between 863f1ac and efa67a3.

📒 Files selected for processing (46)
  • astro.config.mjs
  • ec.config.mjs
  • src/content/docs/public-cloud/affinity-groups/index.md
  • src/content/docs/public-cloud/auto-scaling/index.md
  • src/content/docs/public-cloud/backups-snapshots/backups.md
  • src/content/docs/public-cloud/backups-snapshots/vm-snapshots.md
  • src/content/docs/public-cloud/compute/activity-logs.md
  • src/content/docs/public-cloud/compute/connect-rdp.md
  • src/content/docs/public-cloud/compute/connect-ssh.md
  • src/content/docs/public-cloud/compute/console-access.md
  • src/content/docs/public-cloud/compute/create-instance.md
  • src/content/docs/public-cloud/compute/instance-overview.md
  • src/content/docs/public-cloud/compute/power-management.md
  • src/content/docs/public-cloud/compute/settings/block-storage.md
  • src/content/docs/public-cloud/compute/settings/change-os.md
  • src/content/docs/public-cloud/compute/settings/firewall.md
  • src/content/docs/public-cloud/compute/settings/networks.md
  • src/content/docs/public-cloud/compute/settings/port-forwarding.md
  • src/content/docs/public-cloud/compute/settings/resize-plan.md
  • src/content/docs/public-cloud/compute/settings/ssh-keys.md
  • src/content/docs/public-cloud/compute/settings/startup-scripts.md
  • src/content/docs/public-cloud/dns/domains.md
  • src/content/docs/public-cloud/getting-started/account-signup.md
  • src/content/docs/public-cloud/getting-started/profile-setup.md
  • src/content/docs/public-cloud/kubernetes/cluster-overview.md
  • src/content/docs/public-cloud/kubernetes/create-cluster.md
  • src/content/docs/public-cloud/load-balancer/index.md
  • src/content/docs/public-cloud/networking/public-network/create.md
  • src/content/docs/public-cloud/networking/public-network/egress-rules.md
  • src/content/docs/public-cloud/networking/public-network/overview.md
  • src/content/docs/public-cloud/networking/public-network/public-ips.md
  • src/content/docs/public-cloud/networking/vpc/add-subnet.md
  • src/content/docs/public-cloud/networking/vpc/create-vpc.md
  • src/content/docs/public-cloud/networking/vpc/network-acls.md
  • src/content/docs/public-cloud/networking/vpc/public-ips.md
  • src/content/docs/public-cloud/networking/vpc/site-vpn.md
  • src/content/docs/public-cloud/networking/vpc/vpn-users.md
  • src/content/docs/public-cloud/storage/block-storage/create-volume.md
  • src/content/docs/public-cloud/storage/block-storage/snapshots.md
  • src/content/docs/public-cloud/storage/object-storage/access-keys.md
  • src/content/docs/public-cloud/storage/object-storage/create-bucket.md
  • src/content/docs/public-cloud/storage/object-storage/s3-usage.md
  • src/overrides/Hero.astro
  • src/overrides/PageFrame.astro
  • src/overrides/TableOfContents.astro
  • src/styles/custom.css
💤 Files with no reviewable changes (2)
  • src/content/docs/public-cloud/compute/settings/startup-scripts.md
  • src/content/docs/public-cloud/compute/activity-logs.md

Comment thread astro.config.mjs
Comment thread src/content/docs/public-cloud/compute/settings/change-os.md Outdated
Comment thread src/content/docs/public-cloud/storage/object-storage/create-bucket.md Outdated
Comment thread src/overrides/PageFrame.astro Outdated
Comment thread src/overrides/TableOfContents.astro Outdated
Comment thread src/overrides/TableOfContents.astro
- Updated API domains table for clarity, changing "Instances" to "Virtual Machines".
- Enhanced caution messages in the Change OS, Resize Plan, and SSH Keys documentation to improve user awareness of data loss risks.
- Expanded the DNS domains documentation to provide a comprehensive guide on managing DNS, including registrar-specific instructions and propagation verification.
- Introduced a new S3 API Usage guide with examples in multiple programming languages, ensuring users can effectively utilize ZSoftly's S3-compatible object storage.
- Implemented a resizable layout for the documentation interface, allowing users to adjust sidebar and TOC widths for improved navigation.
- Updated CSS styles to support the new resizable layout and ensure a responsive design across different screen sizes.
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/overrides/PageFrame.astro (1)

59-77: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Update ARIA value semantics for keyboard-resizable role="separator" handles

#sidebar-resizer and #toc-resizer are focusable role="separator" elements, but they don’t define aria-valuemin/aria-valuemax/aria-valuenow, and initHandle only updates the CSS custom property (via apply() triggered by the keydown handler) without setting any ARIA value attributes. Initialize aria-valuemin/aria-valuemax from min/max, and set aria-valuenow whenever apply() clamps/updates the current size, for both handles.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/overrides/PageFrame.astro` around lines 59 - 77, The separator handles
`#sidebar-resizer` and `#toc-resizer` must expose ARIA value semantics: in
initHandle (the function that wires up each handle) set aria-valuemin and
aria-valuemax from the handle's min and max values, and initialize aria-valuenow
to the starting size; then update aria-valuenow whenever apply() clamps or
updates the current size (including inside the keydown handler that triggers
apply()), ensuring both handles always reflect the current numeric size via
aria-valuenow while keeping aria-valuemin/aria-valuemax in sync with min/max.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/content/docs/public-cloud/storage/object-storage/s3-usage.mdx`:
- Around line 10-11: The sentence "ZSoftly object storage is S3-compatible
(backed by Ceph RGW). Any tool or SDK that supports S3 works with it." reveals
internal backend details; remove the parenthetical "backed by Ceph RGW" and make
the statement vendor-neutral — e.g., change it to "ZSoftly object storage is
S3-compatible. Any tool or SDK that supports S3 works with it." Ensure the edit
is applied where that exact sentence appears in
src/content/docs/public-cloud/storage/object-storage/s3-usage.mdx.

---

Outside diff comments:
In `@src/overrides/PageFrame.astro`:
- Around line 59-77: The separator handles `#sidebar-resizer` and `#toc-resizer`
must expose ARIA value semantics: in initHandle (the function that wires up each
handle) set aria-valuemin and aria-valuemax from the handle's min and max
values, and initialize aria-valuenow to the starting size; then update
aria-valuenow whenever apply() clamps or updates the current size (including
inside the keydown handler that triggers apply()), ensuring both handles always
reflect the current numeric size via aria-valuenow while keeping
aria-valuemin/aria-valuemax in sync with min/max.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 605c0afe-4329-49a7-98d6-f079cb51cd9f

📥 Commits

Reviewing files that changed from the base of the PR and between efa67a3 and ef1619d.

📒 Files selected for processing (16)
  • src/content/docs/index.mdx
  • src/content/docs/public-cloud/api/authentication.md
  • src/content/docs/public-cloud/api/quickstart.md
  • src/content/docs/public-cloud/api/quickstart.mdx
  • src/content/docs/public-cloud/api/reference.md
  • src/content/docs/public-cloud/compute/settings/change-os.md
  • src/content/docs/public-cloud/compute/settings/resize-plan.md
  • src/content/docs/public-cloud/compute/settings/ssh-keys.md
  • src/content/docs/public-cloud/dns/domains.md
  • src/content/docs/public-cloud/getting-started/introduction.md
  • src/content/docs/public-cloud/storage/object-storage/access-keys.md
  • src/content/docs/public-cloud/storage/object-storage/create-bucket.md
  • src/content/docs/public-cloud/storage/object-storage/s3-usage.md
  • src/content/docs/public-cloud/storage/object-storage/s3-usage.mdx
  • src/overrides/PageFrame.astro
  • src/styles/custom.css
💤 Files with no reviewable changes (2)
  • src/content/docs/public-cloud/api/quickstart.md
  • src/content/docs/public-cloud/storage/object-storage/s3-usage.md
✅ Files skipped from review due to trivial changes (5)
  • src/content/docs/public-cloud/getting-started/introduction.md
  • src/content/docs/public-cloud/api/reference.md
  • src/content/docs/public-cloud/storage/object-storage/access-keys.md
  • src/content/docs/public-cloud/storage/object-storage/create-bucket.md
  • src/content/docs/public-cloud/compute/settings/change-os.md
🚧 Files skipped from review as they are similar to previous changes (2)
  • src/content/docs/public-cloud/compute/settings/ssh-keys.md
  • src/styles/custom.css

Comment thread src/content/docs/public-cloud/storage/object-storage/s3-usage.mdx Outdated
ditahkk added 3 commits May 31, 2026 16:07
The Swagger UI links rendered the raw endpoint URL as their link text, so
"ceph" and "nimbo" still showed in the page body. Replace the link text with
"Open the Swagger UI" (the bold label already names each API) while keeping the
real endpoint hrefs, which cannot change without breaking the links.
@ditahkk ditahkk force-pushed the issues/keep-2ndDomain branch from 8654921 to d02d408 Compare May 31, 2026 20:21
@ditahkk ditahkk merged commit 05287a8 into main Jun 1, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants