Skip to content

docs: clean up and redesign docs#189

Merged
kmendell merged 12 commits intomainfrom
docs/refactor
May 16, 2025
Merged

docs: clean up and redesign docs#189
kmendell merged 12 commits intomainfrom
docs/refactor

Conversation

@kmendell
Copy link
Member

@kmendell kmendell commented May 15, 2025

Summary by CodeRabbit

  • New Features
    • Expanded homepage feature list with detailed descriptions and new icons for improved clarity.
    • Enhanced hero section with a "Beta" badge, feature highlights, and icon-enhanced buttons.
    • Added new icon components and updated styling for a more modern and interactive look.
  • Documentation
    • Rewrote and condensed configuration documentation for clarity and ease of use.
    • Integrated Single Sign-On (OIDC) setup instructions into user management docs; removed standalone OIDC configuration page.
    • Simplified Docker and environment variable setup instructions with clearer tables and examples.
  • Style
    • Improved homepage and hero section styling for better layout, responsiveness, and interactivity.
  • Chores
    • Updated dependencies to include new icon libraries.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented May 15, 2025

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

📝 Walkthrough

Walkthrough

This update focuses on significant improvements to the documentation and the visual presentation of the Arcane application's homepage. The configuration and user management docs were restructured and condensed, with OIDC setup content consolidated into user management and removed as a standalone page. The homepage was visually enhanced with new features, icons, and interactive hero section elements, supported by additional icon components and updated CSS. Minor site configuration and dependency updates were also made.

Changes

Files / Grouped Paths Change Summary
docs/docs/getting-started/configuration.md Rewrote and condensed configuration documentation: clarified storage, emphasized web UI usage, added example settings.json, simplified Docker and environment variable sections, and formalized tone.
docs/docs/getting-started/oidc-configuration.md Deleted detailed OIDC configuration documentation; content now consolidated elsewhere.
docs/docs/getting-started/user-management.md Expanded and restructured to include OIDC/SSO setup; added UI and environment variable configuration instructions and troubleshooting.
docs/docusaurus.config.ts Updated site tagline and production URL.
docs/package.json Added react-feather and react-icons to dependencies.
docs/src/components/HomepageFeatures/index.tsx
docs/src/components/HomepageFeatures/styles.module.css
Expanded homepage features from three to six, added header and subtitle, improved layout and styling, introduced new icons and responsive design.
docs/src/components/icons/ChartIcon.tsx
docs/src/components/icons/CodeIcon.tsx
docs/src/components/icons/LogIcon.tsx
docs/src/components/icons/MaturityIcon.tsx
docs/src/components/icons/ShieldIcon.tsx
docs/src/components/icons/StackIcon.tsx
docs/src/components/icons/VolumeIcons.tsx
Added new React icon components for use in homepage features and documentation.
docs/src/components/icons/index.ts Exported additional icon components: ChartIcon, ShieldIcon, CodeIcon, MaturityIcon.
docs/src/pages/index.module.css Added and enhanced styles for hero section, feature list, interactive mockup window, and responsive adjustments.
docs/src/pages/index.tsx Refactored hero section to include a "Beta" badge, feature list with icons, and buttons with icons; improved layout and removed unused imports.

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
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented May 15, 2025

Deploying arcane with  Cloudflare Pages  Cloudflare Pages

Latest commit: e2c9368
Status: ✅  Deploy successful!
Preview URL: https://f286ca4f.arcane-7v3.pages.dev
Branch Preview URL: https://docs-refactor.arcane-7v3.pages.dev

View logs

@kmendell kmendell marked this pull request as ready for review May 15, 2025 04:39
Copy link
Contributor

@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: 3

🔭 Outside diff range comments (1)
docs/src/components/icons/index.ts (1)

1-8: ⚠️ Potential issue

Export all newly added icon components.
The index currently exports only ChartIcon, ShieldIcon, CodeIcon, and MaturityIcon. Omitting LogIcon, StackIcon, and VolumeIcon means consumers importing from the index will not have access to these icons.

Proposed diff:

 export { default as ContainersIcon } from './ContainersIcon';
 export { default as ImagesIcon } from './ImagesIcon';
 export { default as NetworkIcon } from './NetworkIcon';
 export { default as ChartIcon } from './ChartIcon';
 export { default as ShieldIcon } from './ShieldIcon';
 export { default as CodeIcon } from './CodeIcon';
 export { default as MaturityIcon } from './MaturityIcon';
+export { default as LogIcon } from './LogIcon';
+export { default as StackIcon } from './StackIcon';
+export { default as VolumeIcon } from './VolumeIcon';
🧹 Nitpick comments (13)
docs/src/components/icons/CodeIcon.tsx (1)

1-10: Enhance SVG icon accessibility
Add accessibility attributes such as role="img" with either a <title> element or aria-hidden="true" if the icon is purely decorative. You can also annotate the return type for clarity:

-export default function CodeIcon() {
+export default function CodeIcon(): JSX.Element {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role="img"
+      aria-hidden="true">
       <polyline points="16 18 22 12 16 6"/>
       <polyline points="8 6 2 12 8 18"/>
     </svg>
docs/src/components/icons/LogIcon.tsx (2)

1-2: Remove redundant React import
If your project uses React 17+ with the new JSX transform enabled, the import React from 'react'; statement can be safely removed to reduce boilerplate.


3-9: Add accessibility metadata to SVG
Enhance this icon’s accessibility by adding role="img" and either a <title> element for non-decorative icons or aria-hidden="true" if it’s purely decorative:

-export default function LogIcon() {
+export default function LogIcon(): JSX.Element {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role="img"
+      aria-hidden="true">
       <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
     </svg>
docs/src/components/icons/ShieldIcon.tsx (2)

1-2: Remove unused React import
With React 17+’s automatic JSX runtime, explicit import React is often unnecessary in .tsx files—consider removing it to clean up the code.


3-9: Improve SVG accessibility
Add role="img" and either a <title> element or aria-hidden="true" to support screen readers:

-export default function ShieldIcon() {
+export default function ShieldIcon(): JSX.Element {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role="img"
+      aria-hidden="true">
       <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
     </svg>
docs/src/components/icons/ChartIcon.tsx (1)

3-11: Unify icon API and improve accessibility.
Currently ChartIcon accepts no props, making it hard to pass className, inline styles, event handlers, or accessibility attributes from the parent. Consider updating the signature to accept all native SVG props and spreading them onto the <svg>, and add sensible defaults for role and aria-label.

Proposed diff:

-export default function ChartIcon() {
+export default function ChartIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role={props.role ?? 'img'}
+      aria-label={props['aria-label'] ?? 'Chart icon'}
+    >
       <line x1="18" y1="20" x2="18" y2="10"/>
       <line x1="12" y1="20" x2="12" y2="4"/>
       <line x1="6" y1="20" x2="6" y2="14"/>
docs/src/components/icons/StackIcon.tsx (1)

3-9: Unify icon API and improve accessibility.
Apply the same pattern as other icons: accept React.SVGProps<SVGSVGElement>, spread props onto <svg>, and include role/aria-label.

Proposed diff:

-export default function StackIcon() {
+export default function StackIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role={props.role ?? 'img'}
+      aria-label={props['aria-label'] ?? 'Stack icon'}
+    >
       <rect x="2" y="13" width="20" height="5" rx="1"/>
       <rect x="2" y="6" width="20" height="5" rx="1"/>
docs/src/components/icons/VolumeIcons.tsx (1)

4-9: Unify icon API and improve accessibility.
As with other icon components, accept full SVG props, spread them onto the <svg>, and add role/aria-label.

Proposed diff:

-export default function VolumeIcon() {
+export default function VolumeIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role={props.role ?? 'img'}
+      aria-label={props['aria-label'] ?? 'Volume icon'}
+    >
       <path d="M21 9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/>
       <path d="M16 2v6h6"/>
docs/src/components/icons/MaturityIcon.tsx (1)

3-20: Strongly type props and extend SVG attributes.
Currently MaturityIcon only destructures a className prop without type annotations. To allow full customization (styles, event handlers, ARIA attributes), define a props interface extending React.SVGProps<SVGSVGElement> and spread them onto the <svg>.

Proposed diff:

-export default function MaturityIcon({ className }) {
+interface MaturityIconProps extends React.SVGProps<SVGSVGElement> {}
+
+export default function MaturityIcon(props: MaturityIconProps) {
   return (
-    <svg 
+    <svg
-      xmlns="http://www.w3.org/2000/svg" 
-      viewBox="0 0 24 24" 
-      fill="none" 
-      stroke="currentColor" 
-      strokeWidth="2" 
-      strokeLinecap="round" 
-      strokeLinejoin="round"
-      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     >
       <path d="M12 2L2 19h20L12 2z"/>
       <path d="M12 16v2"/>
       <path d="M12 10v4"/>
docs/src/components/HomepageFeatures/index.tsx (1)

8-39: Consider using unique icons for different container-related features

The features array has been expanded with detailed descriptions, which is excellent. However, the same ContainersIcon is used for three different features (Container Overview, Container Details, and Container Stats on lines 11, 16, and 36).

Consider using distinct icons for each feature to help users visually distinguish between them:

-  icon: <ContainersIcon className={styles.featureIcon} />,
+  // Use more specific icons for Container Details and Stats
docs/docs/getting-started/user-management.md (1)

27-27: Fix punctuation in abbreviation

In American English, abbreviations like "etc." require a period.

- Enter your OIDC provider details (Issuer URL, Client ID, Client Secret, Redirect URI, etc).
+ Enter your OIDC provider details (Issuer URL, Client ID, Client Secret, Redirect URI, etc.).
🧰 Tools
🪛 LanguageTool

[style] ~27-~27: In American English, abbreviations like “etc.” require a period.
Context: ...Client ID, Client Secret, Redirect URI, etc). - Save and test the connection. - The...

(ETC_PERIOD)

docs/src/pages/index.module.css (1)

61-70: Add vendor prefix for better browser support
The .heroTitleBadge uses backdrop-filter: blur(4px) but omits the -webkit- prefix. Adding it ensures compatibility with WebKit-based browsers:

 .heroTitleBadge {
-  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
 }
docs/docs/getting-started/configuration.md (1)

12-13: Fix punctuation and spelling
The first bullet merges two sentences without a period and has a typo in “recommended.” Suggested cleanup:

- All settings are stored in `/app/data/settings/settings.dat` inside the container All the `sensitive` settings are encrypted.
- While it is possible to edit certain settings from the file directly, IT is recomended to use the Settings UI to configure all settings.
+ All settings are stored in `/app/data/settings/settings.dat` inside the container. All the `sensitive` settings are encrypted.
+ While it is possible to edit certain settings from the file directly, it is recommended to use the Settings UI to configure all settings.
🧰 Tools
🪛 LanguageTool

[uncategorized] ~12-~12: A period might be missing here.
Context: .../data/settings/settings.datinside the container All thesensitive` settings are encryp...

(AI_EN_LECTOR_MISSING_PUNCTUATION_PERIOD)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 81481dd and 5f52579.

⛔ Files ignored due to path filters (9)
  • docs/package-lock.json is excluded by !**/package-lock.json
  • docs/static/img/arcane-dash1.png is excluded by !**/*.png
  • docs/static/img/docusaurus-social-card.jpg is excluded by !**/*.jpg
  • docs/static/img/docusaurus.png is excluded by !**/*.png
  • docs/static/img/favicon.ico is excluded by !**/*.ico
  • docs/static/img/logo.svg is excluded by !**/*.svg
  • docs/static/img/undraw_docusaurus_mountain.svg is excluded by !**/*.svg
  • docs/static/img/undraw_docusaurus_react.svg is excluded by !**/*.svg
  • docs/static/img/undraw_docusaurus_tree.svg is excluded by !**/*.svg
📒 Files selected for processing (17)
  • docs/docs/getting-started/configuration.md (1 hunks)
  • docs/docs/getting-started/oidc-configuration.md (0 hunks)
  • docs/docs/getting-started/user-management.md (1 hunks)
  • docs/docusaurus.config.ts (1 hunks)
  • docs/package.json (1 hunks)
  • docs/src/components/HomepageFeatures/index.tsx (1 hunks)
  • docs/src/components/HomepageFeatures/styles.module.css (1 hunks)
  • docs/src/components/icons/ChartIcon.tsx (1 hunks)
  • docs/src/components/icons/CodeIcon.tsx (1 hunks)
  • docs/src/components/icons/LogIcon.tsx (1 hunks)
  • docs/src/components/icons/MaturityIcon.tsx (1 hunks)
  • docs/src/components/icons/ShieldIcon.tsx (1 hunks)
  • docs/src/components/icons/StackIcon.tsx (1 hunks)
  • docs/src/components/icons/VolumeIcons.tsx (1 hunks)
  • docs/src/components/icons/index.ts (1 hunks)
  • docs/src/pages/index.module.css (5 hunks)
  • docs/src/pages/index.tsx (1 hunks)
💤 Files with no reviewable changes (1)
  • docs/docs/getting-started/oidc-configuration.md
🧰 Additional context used
🧬 Code Graph Analysis (1)
docs/src/components/HomepageFeatures/index.tsx (6)
docs/src/components/icons/ContainersIcon.tsx (1)
  • ContainersIcon (3-10)
docs/src/components/icons/ImagesIcon.tsx (1)
  • ImagesIcon (3-11)
docs/src/components/icons/MaturityIcon.tsx (1)
  • MaturityIcon (3-20)
docs/src/components/icons/NetworkIcon.tsx (1)
  • NetworkIcon (3-12)
docs/src/components/FeatureGrid/index.tsx (1)
  • FeatureGrid (4-10)
docs/src/components/FeatureCard/index.tsx (1)
  • FeatureCard (5-13)
🪛 LanguageTool
docs/docs/getting-started/configuration.md

[uncategorized] ~12-~12: A period might be missing here.
Context: .../data/settings/settings.datinside the container All thesensitive` settings are encryp...

(AI_EN_LECTOR_MISSING_PUNCTUATION_PERIOD)

docs/docs/getting-started/user-management.md

[style] ~27-~27: In American English, abbreviations like “etc.” require a period.
Context: ...Client ID, Client Secret, Redirect URI, etc). - Save and test the connection. - The...

(ETC_PERIOD)

🪛 markdownlint-cli2 (0.17.2)
docs/docs/getting-started/configuration.md

26-26: Hard tabs
Column: 1

(MD010, no-hard-tabs)


27-27: Hard tabs
Column: 1

(MD010, no-hard-tabs)


28-28: Hard tabs
Column: 1

(MD010, no-hard-tabs)


29-29: Hard tabs
Column: 1

(MD010, no-hard-tabs)


30-30: Hard tabs
Column: 1

(MD010, no-hard-tabs)


31-31: Hard tabs
Column: 1

(MD010, no-hard-tabs)


32-32: Hard tabs
Column: 1

(MD010, no-hard-tabs)


33-33: Hard tabs
Column: 1

(MD010, no-hard-tabs)


34-34: Hard tabs
Column: 1

(MD010, no-hard-tabs)


35-35: Hard tabs
Column: 1

(MD010, no-hard-tabs)


36-36: Hard tabs
Column: 1

(MD010, no-hard-tabs)


37-37: Hard tabs
Column: 1

(MD010, no-hard-tabs)


38-38: Hard tabs
Column: 1

(MD010, no-hard-tabs)


39-39: Hard tabs
Column: 1

(MD010, no-hard-tabs)


40-40: Hard tabs
Column: 1

(MD010, no-hard-tabs)


41-41: Hard tabs
Column: 1

(MD010, no-hard-tabs)


42-42: Hard tabs
Column: 1

(MD010, no-hard-tabs)


43-43: Hard tabs
Column: 1

(MD010, no-hard-tabs)


44-44: Hard tabs
Column: 1

(MD010, no-hard-tabs)


45-45: Hard tabs
Column: 1

(MD010, no-hard-tabs)


75-75: Table column count
Expected: 4; Actual: 3; Too few cells, row will be missing data

(MD056, table-column-count)


76-76: Table column count
Expected: 4; Actual: 3; Too few cells, row will be missing data

(MD056, table-column-count)


77-77: Table column count
Expected: 4; Actual: 3; Too few cells, row will be missing data

(MD056, table-column-count)


78-78: Table column count
Expected: 4; Actual: 3; Too few cells, row will be missing data

(MD056, table-column-count)


79-79: Table column count
Expected: 4; Actual: 3; Too few cells, row will be missing data

(MD056, table-column-count)


80-80: Table column count
Expected: 4; Actual: 3; Too few cells, row will be missing data

(MD056, table-column-count)


81-81: Table column count
Expected: 4; Actual: 3; Too few cells, row will be missing data

(MD056, table-column-count)


82-82: Table column count
Expected: 4; Actual: 3; Too few cells, row will be missing data

(MD056, table-column-count)

🔇 Additional comments (33)
docs/docusaurus.config.ts (2)

9-9: Approve tagline update
The new tagline “Modern Docker management, designed for everyone” is concise, on-brand, and aligns with the refreshed documentation tone.


13-13: Verify production URL change
Updating the url to https://arcane.ofkm.dev is essential for proper deployment. Please ensure DNS records, SSL certificates, and any CI/CD or hosting configurations reflect this new domain.

docs/src/pages/index.tsx (4)

7-7: Well-structured icon imports with clear naming

The import statement effectively uses descriptive aliases (e.g., Star as RocketIcon) to clarify each icon's purpose in the UI.


12-56: Excellent hero section redesign with improved visual hierarchy

The hero section has been greatly enhanced with:

  • Clear visual hierarchy with title, badge, and feature list
  • Informative feature items with appropriate icons
  • Well-structured buttons with visual indicators

The code organization is clean with logical nesting and semantic class names that match the visual structure.


57-121: Great interactive mockup that showcases the application

The detailed mockup effectively demonstrates the application's interface, giving users a visual preview of the container management UI. The structure is well-organized with clear separation of mockup components.


129-137: Improved formatting with consistent SEO metadata

The Home component maintains proper functionality while improving code formatting. The title and description are informative and helpful for SEO.

docs/src/components/HomepageFeatures/index.tsx (2)

5-5: Good icon import organization

Clean import of specific icon components allows for proper tree-shaking.


41-63: Well-structured feature section with clear hierarchy

The added header section provides helpful context, and the explicit columns prop ensures consistent layout. Good use of mapping for rendering feature cards with proper React keys.

docs/src/components/HomepageFeatures/styles.module.css (4)

4-4: Good padding adjustment

Reducing padding creates a more compact and efficient layout for content-rich sections.


9-25: Well-designed header styles with proper typography

The header styles create clear visual hierarchy with:

  • Centered alignment for prominence
  • Appropriate spacing with margins
  • Strong typographic contrast between title and subtitle
  • Controlled line length for readability with max-width

This enhances both aesthetics and usability.


27-30: Excellent card and grid styling with interactive elements

The combination of grid layout, card styling, and hover effects creates a polished, interactive experience:

  • Grid spacing provides proper visual separation
  • Card styling uses consistent variables for borders and colors
  • Hover transform and shadow adds depth and feedback
  • Icon sizing ensures visual consistency

These styles effectively support the expanded feature presentation.

Also applies to: 32-43, 45-50


57-69: Good responsive adjustments

The media query properly scales down spacing and typography for smaller screens, ensuring the layout remains effective at various viewport sizes.

docs/docs/getting-started/user-management.md (5)

2-8: Clear title and introduction for expanded content

The updated title, sidebar position, and introduction paragraph effectively communicate the expanded scope of this documentation, now covering both local user management and SSO.


10-16: Well-formatted local user management section

The bullet points provide clear and concise instructions for the default admin setup and user management.


18-30: Comprehensive UI-based OIDC configuration instructions

The information about version compatibility and UI-based setup is clearly presented with helpful bullet points guiding users through the process.

🧰 Tools
🪛 LanguageTool

[style] ~27-~27: In American English, abbreviations like “etc.” require a period.
Context: ...Client ID, Client Secret, Redirect URI, etc). - Save and test the connection. - The...

(ETC_PERIOD)


33-67: Excellent environment variable documentation with example

The detailed table of OIDC environment variables with descriptions and examples, followed by a practical docker-compose snippet, provides a complete reference for users preferring configuration via environment variables.


69-73: Helpful troubleshooting notes

The notes about environment variables overriding UI settings and troubleshooting tips are valuable additions that will help users resolve common issues.

docs/src/pages/index.module.css (10)

54-59: Great use of flex layout for the title wrapper
The .heroTitleWrapper class neatly aligns the title and badge with appropriate spacing and margin.


89-93: Solid feature container styling
The .heroFeatures flex container with gap and bottom margin provides a clean, responsive layout for feature items.


95-101: Consistent feature item alignment
The .heroFeatureItem class correctly centers icons and text with a clear gap—this is both readable and visually appealing.


103-107: Icon size and color are on point
.heroFeatureIcon maintains a consistent size and leverages the primary theme color for visual harmony.


141-145: Button icon spacing is clear
The .buttonIcon class ensures icons inside buttons are consistently sized and separated from text.


177-179: Engaging 3D mockup transform
Applying perspective and rotation to .mockupWindow adds appealing depth to the homepage mockup.


181-183: Subtle hover interaction
Reducing the rotation angles on hover creates a refined, interactive effect without being overwhelming.


471-476: Responsive hero features adjustment
Switching .heroFeatures to a column layout with reduced gap under 996px ensures the feature list remains legible on narrower screens.


478-481: Disable 3D effect on small viewports
Removing the transform and adding top margin for .mockupWindow under 996px improves usability on mobile devices.


483-485: Prevent hover transforms on touch devices
Disabling the hover transform for .mockupWindow under 996px avoids unintended interactions on touchscreens.

docs/docs/getting-started/configuration.md (6)

6-6: Approve new section title
The # Arcane Configuration header clearly signals the content scope.


8-8: Concise introductory sentence
The line effectively communicates that settings are managed via the web UI.


17-20: Approve configuration steps list
The numbered list clearly walks users through changing settings in the UI.


24-47: Approve example JSON snippet
The settings.json example is comprehensive, syntactically correct, and well-indented for readability.

🧰 Tools
🪛 markdownlint-cli2 (0.17.2)

26-26: Hard tabs
Column: 1

(MD010, no-hard-tabs)


27-27: Hard tabs
Column: 1

(MD010, no-hard-tabs)


28-28: Hard tabs
Column: 1

(MD010, no-hard-tabs)


29-29: Hard tabs
Column: 1

(MD010, no-hard-tabs)


30-30: Hard tabs
Column: 1

(MD010, no-hard-tabs)


31-31: Hard tabs
Column: 1

(MD010, no-hard-tabs)


32-32: Hard tabs
Column: 1

(MD010, no-hard-tabs)


33-33: Hard tabs
Column: 1

(MD010, no-hard-tabs)


34-34: Hard tabs
Column: 1

(MD010, no-hard-tabs)


35-35: Hard tabs
Column: 1

(MD010, no-hard-tabs)


36-36: Hard tabs
Column: 1

(MD010, no-hard-tabs)


37-37: Hard tabs
Column: 1

(MD010, no-hard-tabs)


38-38: Hard tabs
Column: 1

(MD010, no-hard-tabs)


39-39: Hard tabs
Column: 1

(MD010, no-hard-tabs)


40-40: Hard tabs
Column: 1

(MD010, no-hard-tabs)


41-41: Hard tabs
Column: 1

(MD010, no-hard-tabs)


42-42: Hard tabs
Column: 1

(MD010, no-hard-tabs)


43-43: Hard tabs
Column: 1

(MD010, no-hard-tabs)


44-44: Hard tabs
Column: 1

(MD010, no-hard-tabs)


45-45: Hard tabs
Column: 1

(MD010, no-hard-tabs)


49-56: Approve Docker setup instructions
The quick-start example for mounting volumes is accurate and easy to implement.


65-74: Approve environment variables table header
The table clearly lists core variables with Purpose, Default/Example, and Notes columns.

@kmendell kmendell enabled auto-merge (squash) May 16, 2025 00:09
@kmendell kmendell disabled auto-merge May 16, 2025 00:09
@kmendell kmendell merged commit 49aff66 into main May 16, 2025
4 checks passed
@kmendell kmendell deleted the docs/refactor branch May 16, 2025 00:09
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.

1 participant