-
Notifications
You must be signed in to change notification settings - Fork 14
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.
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
enhance(apps/docs): add about page #4376
Conversation
Current Aviator status
This PR was merged manually (without Aviator). Merging manually can negatively impact the performance of the queue. Consider using Aviator next time.
See the real-time status of this PR on the
Aviator webapp.
Use the Aviator Chrome Extension
to see the status of your PR within GitHub.
|
📝 WalkthroughWalkthroughThis pull request introduces updates to the documentation website for KlickerUZH, focusing on adding an "About" page and refining the development page. The changes include creating a new Changes
Possibly related PRs
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Caution
Inline review comments failed to post. This is likely due to GitHub's limits when posting large numbers of comments.
Actionable comments posted: 6
🧹 Outside diff range and nitpick comments (5)
apps/docs/src/pages/development.tsx (1)
148-150
: Enhance video section descriptionThe current description "Video Explanation" is too generic. Consider adding more context about the video's content.
Suggested improvement:
<div className="m-0 flex flex-col items-center pb-0"> - <p className="mb-2"> Video Explanation</p> + <p className="mb-2">Overview of KlickerUZH Development Process and Goals</p> </div>apps/docs/src/pages/about.tsx (4)
13-29
: Consider externalizing metrics data.The metrics are currently hardcoded within the component. Consider moving this data to a separate configuration file for easier maintenance and updates.
+ // metrics.config.ts + export const kpiMetrics = [ + { + value: '1894', + label: 'Lecturers', + description: 'use KlickerUZH', + }, + // ... other metrics + ]
60-91
: Consider extracting feature list into a reusable component.The feature lists for both Standard and Catalyst tiers share similar structure. Consider extracting this into a reusable component to reduce code duplication.
interface Feature { text: string; icon?: IconDefinition; } interface FeatureListProps { features: Feature[]; } const FeatureList: React.FC<FeatureListProps> = ({ features }) => ( <ul className="mb-2 mt-8 space-y-2 pl-0"> {features.map((feature, index) => ( <li key={index} className="flex gap-x-3"> <div> <FontAwesomeIcon icon={feature.icon ?? faCheck} /> </div> <div>{feature.text}</div> </li> ))} </ul> );Also applies to: 98-139
158-158
: Remove empty flex containers.There are empty flex containers that serve no purpose and should be removed.
<h1 className="mt-2 flex w-max flex-row gap-4 md:text-5xl"> <div>Purpose of KlickerUZH</div> - <div className="flex justify-center"></div> </h1> <h1 className="mt-2 flex w-max flex-row gap-4 md:text-5xl"> <div>Team</div> - <div className="flex justify-center"></div> </h1>Also applies to: 174-174
203-209
: DRY: Extract form link to a constant.The form link is duplicated from the Models component. Consider extracting it to a constant to maintain DRY principles.
+ const INQUIRY_FORM_URL = 'https://forms.office.com/e/4AsWW1uck2'; // Then use INQUIRY_FORM_URL in both locations <a href={INQUIRY_FORM_URL} target="_blank" rel="noopener noreferrer" > form </a>
🛑 Comments failed to post (6)
apps/docs/src/pages/development.tsx (2)
140-147: 🛠️ Refactor suggestion
Enhance iframe security and accessibility
The iframe implementation needs improvements in several areas:
- Add sandbox attribute to restrict iframe capabilities
- Add loading="lazy" for performance
- Use a more descriptive title
- Consider error handling for video loading failures
Apply these improvements:
<iframe src="https://api.cast.switch.ch/p/106/embedPlaykitJs/uiconf_id/23449004/partner_id/106?iframeembed=true&playerId=kaltura_player&entry_id=0_ol91rao1" width="100%" height="360" allowFullScreen allow="fullscreen" - title="Video Player" + title="KlickerUZH Development Overview Video" + loading="lazy" + sandbox="allow-scripts allow-same-origin allow-popups" + onError={(e) => console.error('Failed to load video player:', e)} />📝 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.<iframe src="https://api.cast.switch.ch/p/106/embedPlaykitJs/uiconf_id/23449004/partner_id/106?iframeembed=true&playerId=kaltura_player&entry_id=0_ol91rao1" width="100%" height="360" allowFullScreen allow="fullscreen" title="KlickerUZH Development Overview Video" loading="lazy" sandbox="allow-scripts allow-same-origin allow-popups" onError={(e) => console.error('Failed to load video player:', e)} />
138-152: 💡 Codebase verification
Video configuration should be centralized
Based on the search results, there are multiple video embeds across the documentation and frontend with hardcoded configuration:
- Different
uiConfId
values are used (23448425 and 23449004)- Multiple video URLs follow two different patterns:
api.cast.switch.ch/p/106/embedPlaykitJs/...
(in development.tsx)uzh.mediaspace.cast.switch.ch/embed/secure/iframe/...
(in other files)- Configuration IDs like
partner_id
andentry_id
are hardcoded in each fileRecommendation:
- Create a centralized configuration for the video player settings
- Consider environment-specific configurations for different environments (development, production)
- Standardize the video URL pattern across all embeds
🔗 Analysis chain
Consider environment configuration for video source
The video URL contains specific IDs (partner_id, entry_id, etc.) that might need to be configurable based on the environment.
Let's check if these IDs are used elsewhere or if they should be moved to configuration:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for cast.switch.ch URLs or similar video player configurations rg -l "cast.switch.ch|entry_id|partner_id" --type=typescript --type=javascriptLength of output: 115
Script:
#!/bin/bash # Search for cast.switch.ch URLs or similar video player configurations with proper file extensions rg -l "cast\.switch\.ch|entry_id|partner_id" --type=ts --type=tsx --type=js --type=jsxLength of output: 116
Script:
#!/bin/bash # Search for cast.switch.ch URLs or similar video player configurations in all files rg "cast\.switch\.ch|entry_id|partner_id" -lLength of output: 602
Script:
#!/bin/bash # Let's check the actual content to see how these IDs are used in other files rg "cast\.switch\.ch|entry_id|partner_id" -A 2 -B 2Length of output: 7960
Script:
#!/bin/bash # Let's check if there are any environment variables or configuration files that might be related to these video settings rg -l "CAST_SWITCH|VIDEO|MEDIA|KALTURA" --type=env --type=json --type=yamlLength of output: 104
apps/docs/src/pages/about.tsx (4)
171-171: 🛠️ Refactor suggestion
Use proper JSX syntax for component rendering.
Components are being invoked directly as functions instead of using JSX syntax.
- {Purpose} + <Purpose /> - {Models()} + <Models /> - {KPIs()} + <KPIs />Also applies to: 184-184, 211-211
143-145:
⚠️ Potential issueAdd security attributes to external link.
External links should include proper security attributes to prevent potential security vulnerabilities.
- <a href="https://forms.office.com/e/4AsWW1uck2" target="_blank"> + <a + href="https://forms.office.com/e/4AsWW1uck2" + target="_blank" + rel="noopener noreferrer" + >📝 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.<a href="https://forms.office.com/e/4AsWW1uck2" target="_blank" rel="noopener noreferrer" > form </a>
37-46: 🛠️ Refactor suggestion
Enhance accessibility with ARIA labels.
The metrics cards lack proper accessibility attributes. Consider adding appropriate ARIA labels and roles.
<div key={index} className="bg-uzh-blue-80 flex flex-col items-center justify-center rounded-lg p-6 text-center text-white" + role="region" + aria-label={`${metric.label} metric`} >📝 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.{metrics.map((metric, index) => ( <div key={index} className="bg-uzh-blue-80 flex flex-col items-center justify-center rounded-lg p-6 text-center text-white" role="region" aria-label={`${metric.label} metric`} > <div className="text-3xl font-bold">{metric.value}</div> <div className="mt-2 text-xl font-semibold">{metric.label}</div> <div className="mt-1 text-sm">{metric.description}</div> </div> ))}
154-164:
⚠️ Potential issueRefactor Purpose component and replace placeholder text.
The Purpose component has two issues:
- It's incorrectly defined as a constant with JSX fragment instead of a proper function component
- Contains Lorem ipsum placeholder text that needs to be replaced with actual content
- const Purpose = ( - <> + const Purpose: React.FC = () => ( + <div className="purpose-section"> <h1 className="mt-2 flex w-max flex-row gap-4 md:text-5xl"> <div>Purpose of KlickerUZH</div> <div className="flex justify-center"></div> </h1> <p className="text-center"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do + {/* TODO: Add actual purpose description */} </p> - </> + </div> )📝 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.const Purpose: React.FC = () => ( <div className="purpose-section"> <h1 className="mt-2 flex w-max flex-row gap-4 md:text-5xl"> <div>Purpose of KlickerUZH</div> <div className="flex justify-center"></div> </h1> <p className="text-center"> {/* TODO: Add actual purpose description */} </p> </div> )
klicker-uzh
|
Project |
klicker-uzh
|
Branch Review |
docs_about_page
|
Run status |
|
Run duration | 13m 43s |
Commit |
|
Committer | Chris |
View all properties for this run ↗︎ |
Test results | |
---|---|
|
0
|
|
0
|
|
0
|
|
0
|
|
172
|
View all changes introduced in this branch ↗︎ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Have not looked at the contents yet -> please remove the .idea folder and the func-migration folders, as they should not be committed or have been removed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Caution
Inline review comments failed to post. This is likely due to GitHub's limits when posting large numbers of comments.
Actionable comments posted: 1
🛑 Comments failed to post (1)
apps/docs/docusaurus.config.ts (1)
158-162: 💡 Codebase verification
The about page exists but is incorrectly named as
Catalyst
The file at
apps/docs/src/pages/about.tsx
exists but is incorrectly named asCatalyst
component. This creates confusion as there's anotherCatalyst
component incatalyst.tsx
. The about page should be renamed toAbout
to match its route and avoid naming conflicts.
apps/docs/src/pages/about.tsx
: Rename the component fromCatalyst
toAbout
- Consider moving the models and pricing information to
catalyst.tsx
as it seems more relevant there🔗 Analysis chain
Verify the about page implementation.
Please ensure that the corresponding about page component exists at
apps/docs/src/pages/about.tsx
as mentioned in the AI summary.
The about page exists but there might be a naming conflict with the Catalyst component
The verification reveals that
about.tsx
exists at the correct location, but there are two components namedCatalyst
- one inabout.tsx
and another incatalyst.tsx
. Let's verify if this is intentional by checking their implementations.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence of the about page component and its imports # Check if the about page component exists fd "about.tsx" "apps/docs/src/pages" # Check for Catalyst component references rg -A 5 "Catalyst" "apps/docs/src/pages"Length of output: 1969
Script:
#!/bin/bash # Check the full content of both files to understand their relationship cat apps/docs/src/pages/about.tsx cat apps/docs/src/pages/catalyst.tsxLength of output: 15553
who else to add, ensuring image scales as well.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Caution
Inline review comments failed to post. This is likely due to GitHub's limits when posting large numbers of comments.
Actionable comments posted: 6
🧹 Outside diff range and nitpick comments (1)
apps/docs/src/pages/about.tsx (1)
67-167
: Improve Models component structure and accessibilityThe Models component could benefit from better semantic structure and accessibility.
- Add proper semantic structure:
- <div className="space-y-4 rounded-lg bg-slate-100 p-6 sm:rounded-xl sm:p-8"> + <section aria-labelledby="model-standard" className="space-y-4 rounded-lg bg-slate-100 p-6 sm:rounded-xl sm:p-8"> + <h2 id="model-standard" className="text-4xl font-semibold tracking-tight md:text-5xl"> Standard + </h2>
- Consider extracting feature lists to a configuration file for better maintainability.
🛑 Comments failed to post (6)
apps/docs/src/pages/about.tsx (6)
27-65: 🛠️ Refactor suggestion
Add TypeScript interfaces and improve accessibility
The KPIs component needs type safety and better accessibility support.
- Add TypeScript interface:
interface Metric { value: string label: string description: string }
- Add aria labels and roles:
<div key={index} + role="article" + aria-label={`${metric.label}: ${metric.value} ${metric.description}`} className="bg-uzh-blue-80 flex flex-col items-center justify-center rounded-lg p-6 text-center text-white" >
- Consider moving metrics data to a configuration file:
// config/metrics.ts export const metrics: Metric[] = [ { value: '1894', label: 'Lecturers', description: 'use KlickerUZH', }, // ... ]
242-262: 🛠️ Refactor suggestion
Improve About component composition and error handling
The main About component needs improvements in component composition and error handling.
- Fix Purpose component usage:
- {Purpose} + <Purpose />
- Add error boundary:
import { ErrorBoundary } from '@/components/ErrorBoundary' function About() { return ( <Layout> <ErrorBoundary> <div className="flex max-w-7xl flex-col items-center text-center md:mx-auto lg:px-8"> {/* ... */} </div> </ErrorBoundary> </Layout> ) }
- Consider adding loading states for dynamic content
158-160:
⚠️ Potential issueEnhance external link security and accessibility
The external form link needs security and accessibility improvements.
<a href="https://forms.office.com/e/4AsWW1uck2" target="_blank" + rel="noopener noreferrer" + aria-label="Access request form (opens in new tab)" > form </a>📝 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.<a href="https://forms.office.com/e/4AsWW1uck2" target="_blank" rel="noopener noreferrer" aria-label="Access request form (opens in new tab)" > form </a>
11-25: 🛠️ Refactor suggestion
Consider externalizing team member data
The hardcoded team member data should be moved to a separate configuration file for better maintainability. Additionally, the image URLs point directly to production, which might not be ideal for development/staging environments.
Consider:
- Moving the data to a separate config file (e.g.,
config/team.ts
)- Using environment variables for the base URL of images
- Adding proper alt text descriptions for accessibility
- const people = [ - { - name: 'Roland Schläfli', - imageUrl: 'https://www.df.uzh.ch/contacts/df/admin/teaching-center/rschl%C3%A4fli/photo/Schl%C3%A4fli-Roland.jpg.jpg', - githubUrl: 'https://github.com/rschaefli', - }, - // ... - ] + import { team } from '@/config/team'Committable suggestion skipped: line range outside the PR's diff.
169-178:
⚠️ Potential issueFix Purpose component implementation and add real content
The Purpose component has several issues:
- Incorrect implementation as a JSX fragment instead of a proper function component
- Contains Lorem ipsum placeholder text
- Missing semantic structure
- const Purpose = ( - <> - <h1 className="mt-2 flex w-max flex-row gap-4 md:text-5xl"> - <div> Purpose of KlickerUZH</div> - </h1> - <p className="text-left"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do - </p> - </> - ) + function Purpose() { + return ( + <section aria-labelledby="purpose-title"> + <h1 id="purpose-title" className="mt-2 flex w-max flex-row gap-4 md:text-5xl"> + Purpose of KlickerUZH + </h1> + <p className="text-left"> + {/* TODO: Add actual content describing the purpose of KlickerUZH */} + </p> + </section> + ) + }Committable suggestion skipped: line range outside the PR's diff.
180-240: 🛠️ Refactor suggestion
Optimize images and enhance accessibility
The Team component needs improvements in image handling and accessibility.
- Use Next.js Image component for optimization:
- <img - alt="" - src={person.imageUrl} - className="h-full w-full object-cover" - /> + <Image + alt={`${person.name}'s profile picture`} + src={person.imageUrl} + width={64} + height={64} + className="h-full w-full object-cover" + />
- Add proper aria labels for GitHub links:
<a href={person.githubUrl} target="_blank" rel="noopener noreferrer" + aria-label={`${person.name}'s GitHub profile (opens in new tab)`} className="text-gray-500 hover:text-gray-700" >
📝 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.function Team() { return ( <div className="bg-white py-24 sm:py-32"> <div className="mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3"> <div className="max-w-xl"> <h2 className="text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl"> Team </h2> <p className="mt-6 text-lg/8 text-gray-600"> We're a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients. </p> </div> <ul role="list" className="grid list-none gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" > {people.map((person) => ( <li key={person.name}> <div className="flex items-center gap-x-6"> <div className="h-16 w-16 flex-shrink-0 overflow-hidden rounded-full"> <Image alt={`${person.name}'s profile picture`} src={person.imageUrl} width={64} height={64} className="h-full w-full object-cover" /> </div> <div> <h3 className="text-base/7 font-semibold tracking-tight text-gray-900"> {person.name} </h3> <div className="flex items-center gap-x-2"> <a href={person.githubUrl} target="_blank" rel="noopener noreferrer" aria-label={`${person.name}'s GitHub profile (opens in new tab)`} className="text-gray-500 hover:text-gray-700" > <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" > <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" /> </svg> </a> </div> </div> </div> </li> ))} </ul> </div> </div> ) }
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/docs/src/pages/about.tsx
(1 hunks)apps/docs/src/pages/development.tsx
(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/docs/src/pages/development.tsx
🔇 Additional comments (2)
apps/docs/src/pages/about.tsx (2)
1-2
: LGTM! Clean imports following project conventions.
The imports are well-organized and properly utilize the project's design system components.
148-148
: LGTM! Clean export statement.
The export follows React conventions.
There was a problem hiding this 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
♻️ Duplicate comments (2)
apps/docs/src/pages/about.tsx (2)
4-4
: 🛠️ Refactor suggestionEnhance type safety with a comprehensive interface.
The current type definition is minimal and doesn't capture all the necessary information about team members.
Consider implementing a more robust interface:
interface TeamMember { name: string; role: string; imageUrl?: string; contactUrl?: string; isAlumnus: boolean; department?: string; }
154-157
: 🛠️ Refactor suggestionAdd alt text to sponsor logos.
The sponsor logos are missing alt text, which is important for accessibility.
<div className="mb-4 flex h-12 flex-row items-start"> - <img src="/img/logo_swissuniversities.png" className="mr-8 h-full" /> - <img src="/img/logo_uzh.jpeg" className="h-full" /> + <img + src="/img/logo_swissuniversities.png" + alt="swissuniversities logo" + className="mr-8 h-full" + /> + <img + src="/img/logo_uzh.jpeg" + alt="University of Zurich logo" + className="h-full" + /> </div>
🧹 Nitpick comments (1)
apps/docs/src/pages/about.tsx (1)
48-90
: Standardize data structure for team members without profile images.Several team members are missing profile images and contact information. Consider:
- Adding profile images for all current team members
- Using a consistent format for alumni entries
- Including contact information where appropriate
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
apps/docs/static/img_v3/anonymousUser.svg
is excluded by!**/*.svg
📒 Files selected for processing (1)
apps/docs/src/pages/about.tsx
(1 hunks)
🔇 Additional comments (2)
apps/docs/src/pages/about.tsx (2)
1-2
: LGTM! Appropriate imports are used.The imports from theme and design system components are correctly utilized.
118-124
: Enhance video iframe accessibility and performance.The video iframe could benefit from additional attributes for better accessibility and performance.
<iframe src="https://api.cast.switch.ch/p/106/embedPlaykitJs/uiconf_id/23449004/partner_id/106?iframeembed=true&playerId=kaltura_player&entry_id=0_ol91rao1" className="aspect-video w-full max-w-3xl border-2 border-solid border-black" allowFullScreen allow="fullscreen" title="Video Player" + loading="lazy" + aria-label="Introduction to KlickerUZH" />
<span | ||
onClick={() => | ||
window.open('https://github.com/uzh-bf/klicker-uzh', '_blank') | ||
} | ||
className="cursor-pointer text-blue-800 hover:underline" | ||
> | ||
entirely open-source | ||
</span> | ||
, allowing for further extensibility and collaboration. | ||
</p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Replace onClick handler with proper link component.
Using raw onClick handlers for navigation is not recommended. Consider using a proper link component for better accessibility and SEO.
-<span
- onClick={() =>
- window.open('https://github.com/uzh-bf/klicker-uzh', '_blank')
- }
- className="cursor-pointer text-blue-800 hover:underline"
->
- entirely open-source
-</span>
+<a
+ href="https://github.com/uzh-bf/klicker-uzh"
+ target="_blank"
+ rel="noopener noreferrer"
+ className="text-blue-800 hover:underline"
+>
+ entirely open-source
+</a>
📝 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.
<span | |
onClick={() => | |
window.open('https://github.com/uzh-bf/klicker-uzh', '_blank') | |
} | |
className="cursor-pointer text-blue-800 hover:underline" | |
> | |
entirely open-source | |
</span> | |
, allowing for further extensibility and collaboration. | |
</p> | |
<a | |
href="https://github.com/uzh-bf/klicker-uzh" | |
target="_blank" | |
rel="noopener noreferrer" | |
className="text-blue-800 hover:underline" | |
> | |
entirely open-source | |
</a> | |
, allowing for further extensibility and collaboration. | |
</p> |
|
klicker-uzh
|
Project |
klicker-uzh
|
Branch Review |
v3
|
Run status |
|
Run duration | 13m 28s |
Commit |
|
Committer | Chris |
View all properties for this run ↗︎ |
Test results | |
---|---|
|
0
|
|
0
|
|
0
|
|
0
|
|
172
|
View all changes introduced in this branch ↗︎ |
Summary by CodeRabbit