Feature/developer docs update #363
Conversation
- Added docs/Developer/developer.md with complete guide for creating and submitting apps and plugins - Covers Docker app templates, PLG plugin development, submission process, and best practices - Includes examples, testing procedures, and moderation policies - Documents sync frequency and update processes for Community Applications store
📝 WalkthroughPre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (3)
src/components/Card/index.js (1)
10-12: Prop naming: considertoinstead ofhreffor consistency with Docusaurus Link.Aligning the API reduces mental overhead for contributors using
@docusaurus/Link.If you adopt this, update usages in MDX accordingly.
docs/Developer/docker-apps.mdx (1)
19-33: Small content hardening suggestions.
- Explicitly note that leaving Host Port blank lets CA assign a free port at install time.
- Add a reminder to validate via CA “Statistics” until zero errors remain.
Happy to propose exact phrasing if desired.
Also applies to: 57-63
docs/Developer/plugins.mdx (1)
18-35: Minor a11y/security guidance suggestion.Add notes to avoid executing unverified scripts and to sign downloads/check hashes in PLG steps.
I can draft a short “Security considerations” subsection if helpful.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
docs/Developer/_category_.json(1 hunks)docs/Developer/docker-apps.mdx(1 hunks)docs/Developer/index.mdx(1 hunks)docs/Developer/plugins.mdx(1 hunks)src/components/Card/index.js(1 hunks)
🔇 Additional comments (4)
src/components/Card/index.js (1)
9-15: Shadow sizes and icon classes—verify they exist in your theme.Confirm
shadow--lw|md|tlandicon icon-{docker|plugin}are valid in your Infima/theme build.Run locally and check computed styles on the Card; ensure no missing classes/icons.
Also applies to: 17-21
docs/Developer/index.mdx (2)
21-33: Check relative links in Cards resolve correctly in build.
href="./docker-apps"/"./plugins"rely on relative routing. Docusaurus sometimes prefersto="docker-apps"(no./) or absolute doc slugs. Please verify in preview and production builds.If renaming the folder to lowercase, update these to match the final slugs.
35-45: I need to clarify the project scope to conduct an accurate search. Based on the review comment context—specifically the GitHub reference toSquidly271/AppFeed, mentions of "apps and plugins," and the "Refresh Apps button"—this appears to refer to Community Applications (CA) for unRAID, not a Certificate Authority.Let me search with that context:
Let me search for more specific documentation on CA's sync frequency:
Verify that the ~2-hour sync frequency claim is accurate and current.
The feed URL is correct: Andrew (aka Squid) maintains Community Applications and the endpoint matches the GitHub repository. However, I could not find official documentation specifying the "~2 hours" sync frequency in public sources—neither in the Community Applications GitHub repository, AppFeed documentation, unRAID official docs, nor forums. While no contradictory information exists, the sync interval is not explicitly documented in accessible sources.
Recommend confirming this timing with the maintainer or reviewing AppFeed's automation configuration to ensure the documentation reflects the current behavior.
docs/Developer/docker-apps.mdx (1)
84-88: I need to search for the current official Unraid Community Applications submission form URL.Let me search for more recent information about the Community Applications submission process.
Let me search for more specific information on where developers can find the Community Applications submission form.
Update the Community Applications submission form link and reference.
The official Unraid documentation references "the Community Applications submission form", but the specific Asana URL in your documentation file cannot be verified as the current official submission method. The form is mentioned in official docs, however the exact link (https://form.asana.com/?k=qtIUrf5ydiXvXzPI57BiJw&d=714739274360802) is not published in official Unraid documentation and cannot be confirmed as current.
Action: Verify the correct submission form URL directly with Unraid maintainers or the Community Applications support thread on the Unraid forums before linking it in the docs. The current reference may be outdated or an internal/unpublished form.
docs/Developer/_category_.json
Outdated
| { | ||
| "label": "Developer", | ||
| "position": 4 | ||
| } No newline at end of file |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
🧩 Analysis chain
Folder name casing likely violates repo convention.
PR checklist says “all new documentation files are lowercase with dash-separated names,” but the folder is docs/Developer/. Recommend renaming to docs/developer/ (and adjusting links/paths).
Use this to find non‑lowercase names under docs:
🏁 Script executed:
#!/bin/bash
fd . docs | grep -E '/[A-Z]'Length of output: 790
---
🏁 Script executed:
```shell
#!/bin/bash
# Check for any README or documentation about naming conventions
find . -type f \( -name "README*" -o -name "CONTRIBUTING*" -o -name ".github/PULL_REQUEST_TEMPLATE*" \) -exec grep -l "lowercase\|naming.*convention\|folder.*name" {} \;
# List all top-level folders under docs to understand existing structure
echo "=== All docs folders ==="
find docs -maxdepth 1 -type d | sort
Length of output: 104
---
🏁 Script executed:
```shell
#!/bin/bash
# Search for PR checklist, PULL_REQUEST_TEMPLATE, or contribution guidelines
find .github -type f -name "*.md" -o -name "*.yml" -o -name "*.yaml" 2>/dev/null | head -20
# Also check root level for docs/guidelines
find . -maxdepth 2 -type f \( -name "CONTRIBUTING.md" -o -name "PULL_REQUEST*" -o -name "*CHECKLIST*" \) 2>/dev/null
# Search for any mention of naming convention or lowercase requirement
rg -i "lowercase.*dash|dash.*separated.*name|documentation.*files.*lowercase" --type md --type txt -A2 -B2
Length of output: 122
---
🏁 Script executed:
```shell
#!/bin/bash
# Read the PR template to find the checklist item about naming conventions
cat .github/pull_request_template.md
Length of output: 543
---
🏁 Script executed:
```shell
#!/bin/bash
# Search for any references to Developer folder in documentation
rg "Developer" docs/ -n --type mdx --type md --type json
# Also check for relative imports or path references
rg "developer|Developer" . --type mdx --type md --type json -g 'docs/**' -C2
Length of output: 55
---
🏁 Script executed:
```shell
#!/bin/bash
# Search for any references to "Developer" folder in docs
rg -i "developer" docs/ -n
# Also specifically look for sidebar references or index files that might link to Developer
cat docs/Developer/_category_.json
cat docs/Developer/index.mdx 2>/dev/null | head -20
Length of output: 7428
Rename docs/Developer/ to docs/developer/ to comply with PR checklist requirement.
The PR template explicitly requires: "Are all new documentation files lowercase, with dash separated names (ex. unraid-os.mdx)?". The new docs/Developer/ folder violates this convention. Rename it to docs/developer/; the _category_.json label can remain "Developer" for display purposes.
🤖 Prompt for AI Agents
In docs/Developer/_category_.json around lines 1 to 4, the new documentation
folder uses a capitalized directory name "Developer", which violates the PR
checklist requiring lowercase filenames; rename the directory from
docs/Developer/ to docs/developer/ and move the _category_.json file into
docs/developer/_category_.json (keeping the "label": "Developer" value
unchanged) and update any references or links in the repo that point to
docs/Developer/ to the new lowercase path.
|
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/components/Card/index.js (1)
16-21: Consider making heading level configurable.The title is always wrapped in an
h3element, which might not be semantically correct in all contexts (e.g., if the Card is used within sections with different heading hierarchies). Consider adding aheadingLevelprop to make this flexible.Example:
const Card = ({ className, style, children, shadow, href, title, icon, + headingLevel = 'h3', // Allow customization, default to h3 }) => { const cardShadow = shadow ? `item shadow--${shadow}` : ''; + const HeadingTag = headingLevel; const Header = (title || icon) ? ( <div className="card__header"> {icon && <span className={`icon icon-${icon}`} aria-hidden="true"></span>} - {title && <h3 className="card__title">{title}</h3>} + {title && <HeadingTag className="card__title">{title}</HeadingTag>} </div> ) : null;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
docs/Developer/_category_.json(1 hunks)docs/Developer/plugins.mdx(1 hunks)src/components/Card/index.js(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- docs/Developer/category.json
- docs/Developer/plugins.mdx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: deploy-preview
🔇 Additional comments (3)
src/components/Card/index.js (3)
1-3: LGTM! Imports are correct.The
CSSPropertiesissue from the previous review has been resolved. All imports are valid runtime exports.
5-13: LGTM! Props are well-defined.The new props (
href,title,icon) are clearly documented and integrate well with the existing API.
32-37: LGTM! Default rendering is consistent.The fallback
divrendering maintains the same structure and styling as the Link variant, ensuring consistent behavior.
| if (href) { | ||
| return ( | ||
| <Link to={href} className={clsx('card', className, cardShadow)} style={style} aria-label={title}> | ||
| {Header} | ||
| {children} | ||
| </Link> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Fix undefined aria-label value.
If href is provided but title is not, the aria-label will be undefined, which degrades accessibility for screen reader users.
Apply this diff:
if (href) {
return (
- <Link to={href} className={clsx('card', className, cardShadow)} style={style} aria-label={title}>
+ <Link to={href} className={clsx('card', className, cardShadow)} style={style} {...(title && { 'aria-label': title })}>
{Header}
{children}
</Link>
);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (href) { | |
| return ( | |
| <Link to={href} className={clsx('card', className, cardShadow)} style={style} aria-label={title}> | |
| {Header} | |
| {children} | |
| </Link> | |
| ); | |
| } | |
| if (href) { | |
| return ( | |
| <Link to={href} className={clsx('card', className, cardShadow)} style={style} {...(title && { 'aria-label': title })}> | |
| {Header} | |
| {children} | |
| </Link> | |
| ); | |
| } |
🤖 Prompt for AI Agents
In src/components/Card/index.js around lines 23 to 30, the Link currently sets
aria-label={title} which becomes undefined when title is missing; update the JSX
to set aria-label to title if present, otherwise derive a fallback from the
children text or omit the attribute—e.g. set aria-label={title ?? (typeof
children === 'string' ? children : undefined)} so screen readers don’t receive
an undefined label.
🛠️ Refactor suggestion | 🟠 Major
🧩 Analysis chain
Verify Card usage doesn't create nested anchors.
When href is provided, the entire card becomes a Link. If children contain other links or interactive elements, this creates nested anchors (invalid HTML) and keyboard navigation issues. Verify that Card components with href don't wrap content containing links.
🏁 Script executed:
#!/bin/bash
# Search for Card usage with href that might contain nested links
# Look for patterns where Card has href and children might contain Link/a tags
echo "=== Searching for Card components with href prop ==="
rg -n --type=mdx --type=jsx --type=tsx -C 5 '<Card\s+[^>]*href=' || echo "No matches in mdx/jsx/tsx"
echo ""
echo "=== Searching for Card imports and usage patterns ==="
rg -n -A 10 "import.*Card.*from.*components/Card"
echo ""
echo "=== Checking if Card children commonly include links ==="
ast-grep --pattern $'<Card $$$>
$$$
<Link $$$>$$$</Link>
$$$
</Card>'Length of output: 6998
Now I need to examine the actual Card implementation to verify the complete context:
Based on my comprehensive verification through web searches and codebase analysis:
**Reconsider Card implementation pattern when href is provided—current approach violates accessible card design.**
The current implementation wraps all Card content in a Link element when `href` is provided. This can result in the entire contents of the card being read out to screen reader users. Additionally, best practice is to not wrap the whole card with a link, and instead link your main distinctive piece of information and expand its hitbox with CSS, which offers a better experience when listing links and enables cards to contain other interactive elements.
Use an overlay prop approach to make an entire component clickable as a link, ensuring proper accessibility with the Card component. Consider:
- Using a Link with `overlay` positioning instead of making it the root wrapper
- Limiting Card to only render content without `href` support, requiring users to compose navigation separately
- Applying a CSS pseudo-element approach for the clickable area without nesting structure
The current pattern creates nested link risks if children contain interactive elements, but the real issue is the implementation approach itself.
---
🏁 Script executed:
```shell
#!/bin/bash
# Retrieve the full Card component implementation
cat src/components/Card/index.js
Length of output: 1208
Refactor Card to use accessible link pattern instead of wrapping entire card in Link.
The current implementation wraps all Card content in a Link element when href is provided. This violates accessibility best practices: wrapping an entire card in a single <a> element causes screen reader users to hear all contents read as link text. Additionally, this pattern prevents the card from containing other interactive elements without creating nested anchors (invalid HTML).
Recommended approaches:
- Remove
hrefsupport entirely and require users to compose navigation separately (e.g., Card with Link inside) - Use overlay Link pattern: position the Link with overlay styling over the card without nesting content inside it, allowing other interactive elements
- Link only primary content: link the card's title/header instead of the entire card, expanding its hitbox with CSS
Current codebase has no Card components using href, making this safe to refactor before establishing problematic usage patterns.
🤖 Prompt for AI Agents
In src/components/Card/index.js lines 23-30, the card currently wraps all
content in a Link when href is provided; stop wrapping the entire card in an
anchor. Instead render the card root as a non-link container regardless of href,
and when href is present render a separate Link element that uses the "overlay"
pattern (absolutely positioned, visually covers the card but does not wrap inner
content) or alternatively only wrap the title/header in a Link; keep className,
style and cardShadow on the root, ensure the overlay Link has an accessible
aria-label (from title) and does not contain other interactive children, and
update props/type docs to deprecate/warn about the old href behavior.
|
@ljm42 prcoessed forum posts re submitting containers & plugins to a docs section called developer |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
docs/Developer/index.mdx (2)
37-37: Simplify redundant URL markdown syntax.Line 37 uses redundant markdown syntax
[URL](URL)where the display text and link are identical. Consider using angle bracket notation for clarity:-CA maintains a centralized feed of approved apps and plugins, hosted at [https://raw.githubusercontent.com/Squidly271/AppFeed/master/applicationFeed.json](https://raw.githubusercontent.com/Squidly271/AppFeed/master/applicationFeed.json). +CA maintains a centralized feed of approved apps and plugins, hosted at <https://raw.githubusercontent.com/Squidly271/AppFeed/master/applicationFeed.json>.Alternatively, give the link a descriptive label:
-CA maintains a centralized feed of approved apps and plugins, hosted at [https://raw.githubusercontent.com/Squidly271/AppFeed/master/applicationFeed.json](https://raw.githubusercontent.com/Squidly271/AppFeed/master/applicationFeed.json). +CA maintains a centralized feed of approved apps and plugins, hosted at [AppFeed repository](https://raw.githubusercontent.com/Squidly271/AppFeed/master/applicationFeed.json).
21-33: Clean up Card component children formatting.The Card components have unnecessary newlines around the children text (lines 23 and 29). While this renders correctly, removing the extra whitespace improves readability:
- <Card title="Learn how to create & submit" icon="docker" href="./docker-apps"> - - Docker applications - - </Card> + <Card title="Learn how to create & submit" icon="docker" href="./docker-apps"> + Docker applications + </Card>Apply the same change to the plugin Card on lines 28-32.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
docs/Developer/docker-apps.mdx(1 hunks)docs/Developer/index.mdx(1 hunks)docs/unraid-os/system-administration/maintain-and-update/changing-the-flash-device.mdx(1 hunks)docs/unraid-os/using-unraid-to/manage-storage/apple-time-machine.mdx(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- docs/unraid-os/using-unraid-to/manage-storage/apple-time-machine.mdx
- docs/unraid-os/system-administration/maintain-and-update/changing-the-flash-device.mdx
🚧 Files skipped from review as they are similar to previous changes (1)
- docs/Developer/docker-apps.mdx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: deploy-preview
🔇 Additional comments (2)
docs/Developer/index.mdx (2)
1-9: Content looks well-structured and comprehensive.The documentation page provides a clear overview with well-organized sections covering prerequisites, submission workflow (via Card grid), sync timelines, best practices, and policies. The content aligns with the PR objectives and checklist requirements.
22-22: The relative link syntax is correct and follows the established codebase pattern.Existing documentation already uses this exact syntax: docs/API/index.mdx contains
./cli,./how-to-use-the-api,./oidc-provider-setup, and./upcoming-features. The new docs/Developer/index.mdx links./docker-appsand./pluginsfollow the same pattern. No files in the codebase use.mdxextensions in href attributes, confirming this is the standard approach supported by your Docusaurus configuration.Likely an incorrect or invalid review comment.
1 participant
Before Submitting This PR, Please Ensure You Have Completed The Following:
Summary by CodeRabbit
New Features
Documentation