Add Widget for Chuck Norris quotes #40
Conversation
Signed-off-by: KhulnaSoft bot <43526132+khulnasoft-bot@users.noreply.github.com>
❌ Deploy Preview for shipyard failed.
|
WalkthroughAdds a new Vue widget component that fetches and displays Chuck Norris jokes (optional category filter), registers a new Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User as User
participant Widget as ChuckNorris.vue
participant Axios as axios
participant API as ChuckNorris API
User->>Widget: mount / trigger fetchData()
activate Widget
Widget->>Widget: compute categories, build endpoint
Widget->>Axios: GET endpoint
activate Axios
Axios->>API: HTTP GET /jokes/random[?category=...]
activate API
API-->>Axios: 200 OK { value }
deactivate API
Axios-->>Widget: response.data
deactivate Axios
Widget->>Widget: processData -> set chuckNorrisLine
Widget-->>User: render joke line
Widget->>Widget: finishLoading()
deactivate Widget
alt Error path
Widget->>Axios: GET endpoint
Axios-->>Widget: network/error
Widget->>Widget: this.error(message)
Widget->>Widget: finishLoading()
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
Pre-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 (1)
🚧 Files skipped from review as they are similar to previous changes (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: 2
🧹 Nitpick comments (1)
src/components/Widgets/ChuckNorris.vue (1)
14-14: Consider removing the empty components object.The empty
components: {}object is unnecessary and can be removed to reduce clutter.Apply this diff:
mixins: [WidgetMixin], - components: {}, data() {
Signed-off-by: KhulnaSoft bot <43526132+khulnasoft-bot@users.noreply.github.com>
Signed-off-by: KhulnaSoft bot <43526132+khulnasoft-bot@users.noreply.github.com>
Signed-off-by: KhulnaSoft bot <43526132+khulnasoft-bot@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/utils/defaults.js (1)
227-227: LGTM! Note naming inconsistency.The API endpoint addition is correct and follows the existing pattern. However, note that this uses camelCase (
chuckNorris) while the widget type inWidgetBase.vueuses all lowercase (chucknorris). While this should work functionally (they're used in different contexts), consider whether consistent naming would improve maintainability.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/Widgets/WidgetBase.vue(2 hunks)src/utils/defaults.js(1 hunks)
🔇 Additional comments (1)
src/components/Widgets/WidgetBase.vue (1)
52-52: Widget component files verified—code changes are correct.All three widget component files referenced in the mappings (ChuckNorris.vue, GluetunStatus.vue, and Linkding.vue) exist and contain valid Vue component implementations. The mappings in WidgetBase.vue follow the correct pattern and maintain alphabetical ordering.
The code implementation is sound and ready to merge.
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/widgets.md(2 hunks)
🧰 Additional context used
🪛 markdownlint-cli2 (0.18.1)
docs/widgets.md
32-32: Link fragments should be valid
(MD051, link-fragments)
1005-1005: Images should have alternate text (alt text)
(MD045, no-alt-text)
1011-1011: Link text should be descriptive
(MD059, descriptive-link-text)
| - [Stock Price History](#stock-price-history) | ||
| - [ETH Gas Prices](#eth-gas-prices) | ||
| - [Joke of the Day](#joke) | ||
| - [Chuck Norris quotes](#chucknorris) |
There was a problem hiding this comment.
Fix the broken table-of-contents anchor.
The link points to #chucknorris, but the markdown heading renders as #chuck-norris-quotes, so the TOC entry won’t jump to the section. Update the fragment to use #chuck-norris-quotes.
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
32-32: Link fragments should be valid
(MD051, link-fragments)
🤖 Prompt for AI Agents
In docs/widgets.md around line 32, the TOC entry uses the wrong fragment
'#chucknorris' which doesn't match the rendered heading; update the link target
to '#chuck-norris-quotes' so the table-of-contents anchor matches the heading
and navigates correctly.
There was a problem hiding this comment.
In docs/widgets.md around line 32, the TOC entry uses the wrong fragment
'#chucknorris' which doesn't match the rendered heading; update the link target
to '#chuck-norris-quotes' so the table-of-contents anchor matches the heading
and navigates correctly.
There was a problem hiding this comment.
@khulnasoft-bot, you're absolutely right! The table of contents anchor needs to be corrected.
The issue is that markdown heading anchors are generated by converting the heading text to lowercase and replacing spaces with hyphens. So the heading ### Chuck Norris quotes creates the anchor #chuck-norris-quotes, not #chucknorris.
The fix:
Change line 32 from:
- [Chuck Norris quotes](#chucknorris)To:
- [Chuck Norris quotes](#chuck-norris-quotes)This will ensure the table of contents link correctly navigates to the Chuck Norris quotes widget section.
|
|
||
| Renders a Chuck Norris quote. Data is fetched from the [ChuckNorrisAPI](https://api.chucknorris.io/) by @matchilling. All fields are optional. | ||
|
|
||
| <p align="center"><img width="400" src="https://tbd" /></p> |
There was a problem hiding this comment.
Add meaningful alt text (and avoid placeholder URLs).
The image uses a placeholder URL and lacks an alt attribute, which breaks accessibility guidelines and ships a dead link. Either provide the real screenshot with descriptive alt text or remove the image block until it’s available.
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
1005-1005: Images should have alternate text (alt text)
(MD045, no-alt-text)
🤖 Prompt for AI Agents
In docs/widgets.md around line 1005, the image uses a placeholder URL and has no
alt text; replace the placeholder src with the real screenshot URL (or remove
the entire <p> block until the image is available) and add a meaningful alt
attribute describing the image content (e.g., alt="Screenshot of widget settings
panel showing X, Y, Z") to satisfy accessibility and avoid dead links.
There was a problem hiding this comment.
In docs/widgets.md around line 1005, the image uses a placeholder URL and has no
alt text; replace the placeholder src with the real screenshot URL (or remove
the entire
block until the image is available) and add a meaningful alt
attribute describing the image content (e.g., alt="Screenshot of widget settings
panel showing X, Y, Z") to satisfy accessibility and avoid dead links.
There was a problem hiding this comment.
@khulnasoft-bot, you're right to flag this! The placeholder image should be addressed before merging.
For the Chuck Norris widget documentation, I recommend one of these approaches:
Option 1: Add a real screenshot (preferred)
- Take a screenshot of the widget in action showing a Chuck Norris quote
- Upload it to i.ibb.co (following the pattern used by other widgets in this file)
- Replace the placeholder with the real URL and add descriptive alt text:
<p align="center"><img width="400" src="https://i.ibb.co/[your-image-id]/chuck-norris.png" alt="Chuck Norris widget displaying a quote" /></p>Option 2: Remove the placeholder (temporary)
If a screenshot isn't ready yet, remove the entire image block for now:
### Chuck Norris quotes
Renders a Chuck Norris quote. Data is fetched from the [ChuckNorrisAPI](https://api.chucknorris.io/) by @matchilling. All fields are optional.
#### OptionsThis keeps the documentation accessible and avoids dead links until a proper screenshot is available. Looking at other widgets in the file (like the Joke widget just above), they all use properly hosted images with the same hosting service, so following that pattern would maintain consistency.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: fortishield <161459699+FortiShield@users.noreply.github.com>
Category:
Overview
Issue Number (if applicable) #00
New Vars (if applicable)
Screenshot (if applicable)
Code Quality Checklist (Please complete)
Summary by CodeRabbit
New Features
Documentation
Style