feat(website): Initialize VitePress documentation site#241
Conversation
|
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #241 +/- ##
=======================================
Coverage 92.26% 92.26%
=======================================
Files 44 44
Lines 2106 2106
Branches 462 462
=======================================
Hits 1943 1943
Misses 163 163 ☔ View full report in Codecov by Sentry. |
📝 WalkthroughWalkthroughThis pull request introduces a comprehensive setup for the Repomix website using VitePress, a static site generator. The changes include creating a new documentation site with custom components, styling, and configuration. The project focuses on presenting Repomix as a tool for transforming repositories into AI-friendly formats, with a clean, modern design and responsive layout. The implementation covers configuration files, Vue components, CSS styling, and documentation content. Changes
Sequence DiagramsequenceDiagram
participant User
participant WebsiteUI as Repomix Website
participant TryItComponent as Try It Component
User->>WebsiteUI: Visits homepage
WebsiteUI->>User: Displays project overview
User->>TryItComponent: Enters GitHub repo URL
User->>TryItComponent: Selects output format
User->>TryItComponent: Configures output options
TryItComponent->>User: Logs submission details
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 (
|
![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 (9)
website/client/.vitepress/theme/components/TryIt.vue (1)
108-237: Add missing styles for error and loading states.The current styles need to be enhanced for better user feedback:
- Add styles for error messages
- Add visual feedback for loading states
- Improve focus states for better accessibility
Add these additional styles:
.checkbox-input { width: 16px; height: 16px; accent-color: var(--vp-c-brand-1); } +.error-message { + margin-top: 8px; + color: var(--vp-c-danger); + font-size: 14px; +} + +.pack-button:disabled { + opacity: 0.7; + cursor: not-allowed; + background: var(--vp-c-gray); +} + +.repository-input:disabled { + opacity: 0.7; + cursor: not-allowed; +} + +/* Improve focus visibility for keyboard navigation */ +.repository-input:focus-visible, +.pack-button:focus-visible, +.format-button:focus-visible, +.checkbox-input:focus-visible { + outline: 2px solid var(--vp-c-brand-1); + outline-offset: 2px; +} @media (max-width: 640px) {website/client/.vitepress/theme/components/Hero.vue (2)
10-11: Consider adding a brief docstring or comment for clarityWhile the template is straightforward, a short comment or docstring clarifying how
site.titleis populated could help future maintainers unfamiliar with VitePress.
49-53: Remove unused class or document intended usageThe
.hero-taglinestyle definition is unused in the template. If it's not planned for future usage, removing it keeps the codebase maintainable. Otherwise, consider adding it to improve the hero section.website/client/.vitepress/theme/index.ts (2)
1-5: Question abouthimport usage
Althoughhis imported from 'vue', it appears to be unused in this snippet since the custom layout code is commented out. Unless you plan to usehin future customizations, consider removing the import to keep code clean and consistent.
7-14: Consider activating or removing commented-out layout code
You have a placeholder for a custom layout at lines 9–13. If you plan on providing a unique layout experience, uncomment and adjust it as needed. Otherwise, removing the commented code may help maintain clarity.website/client/index.md (3)
7-16: Hero configuration looks solid
Defining the hero name, text, and image sources is clear. Consider adding additional action buttons or links if you intend to guide users to multiple resources (e.g., docs, demos) from this hero section.
18-34: Features section is well-structured
The features are well-organized with clear icons and descriptive details. Ensure that emojis are accessible by including an appropriate aria-label or accessible text if needed for screen readers.
37-41: In-line CSS block
The.hero-description__accentclass highlights text effectively. If you plan to reuse this accent style in multiple places or have more extensive styling in future expansions, consider moving it to a dedicated CSS or the global style file for maintainability.website/client/.vitepress/theme/style.css (1)
93-107: Hero component style
The gradient background adds a fresh look to the hero section. Monitor load performance if you plan to layer multiple gradients with effects likeblur().Would you like help measuring performance impacts or exploring alternate gradient solutions?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
website/client/package-lock.jsonis excluded by!**/package-lock.jsonwebsite/client/public/repomix-logo.svgis excluded by!**/*.svg
📒 Files selected for processing (10)
website/client/.gitignore(1 hunks)website/client/.vitepress/config.mts(1 hunks)website/client/.vitepress/theme/components/Hero.vue(1 hunks)website/client/.vitepress/theme/components/Home.vue(1 hunks)website/client/.vitepress/theme/components/TryIt.vue(1 hunks)website/client/.vitepress/theme/custom.css(1 hunks)website/client/.vitepress/theme/index.ts(1 hunks)website/client/.vitepress/theme/style.css(1 hunks)website/client/index.md(1 hunks)website/client/package.json(1 hunks)
✅ Files skipped from review due to trivial changes (4)
- website/client/.vitepress/theme/components/Home.vue
- website/client/.vitepress/config.mts
- website/client/.gitignore
- website/client/.vitepress/theme/custom.css
🔇 Additional comments (12)
website/client/package.json (2)
2-6: LGTM! Scripts configuration looks good.The standard VitePress scripts are correctly configured for development, building, and previewing the documentation site.
7-9: 🛠️ Refactor suggestionAdd required peer dependencies for VitePress.
VitePress requires Vue as a peer dependency. Consider adding the following dependencies to ensure proper functionality:
{ "devDependencies": { - "vitepress": "^1.5.0" + "vitepress": "^1.5.0", + "vue": "^3.3.0" } }Let's verify the VitePress peer dependencies:
website/client/.vitepress/theme/components/TryIt.vue (1)
1-237: Add unit tests for the component.Please ensure proper test coverage for this component, including:
- Form validation
- User interactions (submit, format selection, options)
- Loading and error states
- Responsive behavior
Would you like me to help create a test suite for this component using Vitest or Jest?
website/client/.vitepress/theme/components/Hero.vue (3)
2-6: Use of Composition API looks goodYou're correctly extracting the
siteobject from VitePress'suseDatahook. This is a clean solution that leverages the Composition API effectively.
19-35: Validate gradient support on different browsersThe usage of
-webkit-linear-gradientcombined with-webkit-background-clip: textmight not be fully supported by older browsers. If you need broader compatibility, consider adding a standardlinear-gradientfallback or specifying additional vendor prefixes.
55-67: Responsive design is well-structuredYour media queries correctly handle the font sizes for smaller screens, maintaining readability across devices. Great job!
website/client/index.md (1)
1-7: Great use of frontmatter
The frontmatter is clean, clearly specifies important metadata (layout, title, etc.), and aligns well with VitePress conventions.website/client/.vitepress/theme/style.css (5)
1-71: Confirm color contrast and accessibility
You have well-structured color scales. Just confirm that the brand and default colors meet WCAG contrast ratios when used for text on any background color (including the-softvariants). This step helps ensure accessibility for all users.
77-87: Button variables enhanced
Defining comprehensive states (normal, hover, active) via custom properties is a best practice for consistent styling across the site. The usage of accessible text colors (white on darker backgrounds) is appreciated.
109-119: Responsive design
The incremental blur changes at breakpoints show strong attention to responsive design. Test across various device sizes to ensure the hero images still display correctly on high-resolution screens.
125-130: Custom block tip styling
Using brand-soft variables for background and code blocks gives consistency to the site’s helper messages. Great approach for theming.
136-138: Algolia search color
Overriding the primary color for the search component helps tie it neatly into the site’s brand. Keep an eye out for any upcoming Algolia UI updates that might require further adjustments.
| const url = ref('') | ||
| const format = ref('xml') | ||
| const removeComments = ref(false) | ||
| const removeEmptyLines = ref(false) | ||
| const showLineNumbers = ref(false) | ||
|
|
||
| const handleSubmit = () => { | ||
| // Handle form submission | ||
| console.log({ | ||
| url: url.value, | ||
| format: format.value, | ||
| options: { | ||
| removeComments: removeComments.value, | ||
| removeEmptyLines: removeEmptyLines.value, | ||
| showLineNumbers: showLineNumbers.value | ||
| } | ||
| }) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add form validation and error handling.
The current implementation lacks several essential features:
- URL validation to ensure it's a valid GitHub repository
- Loading states during form submission
- Error handling for failed submissions
- Actual API integration instead of console.log
Consider implementing these improvements:
const url = ref('')
const format = ref('xml')
const removeComments = ref(false)
const removeEmptyLines = ref(false)
const showLineNumbers = ref(false)
+const isLoading = ref(false)
+const error = ref(null)
+
+const isValidGithubUrl = (url) => {
+ const githubUrlPattern = /^(https?:\/\/)?(www\.)?github\.com\/[a-zA-Z0-9-]+\/[a-zA-Z0-9-._]+$/
+ return githubUrlPattern.test(url) || /^[a-zA-Z0-9-]+\/[a-zA-Z0-9-._]+$/.test(url)
+}
const handleSubmit = () => {
- // Handle form submission
- console.log({
- url: url.value,
- format: format.value,
- options: {
- removeComments: removeComments.value,
- removeEmptyLines: removeEmptyLines.value,
- showLineNumbers: showLineNumbers.value
- }
- })
+ error.value = null
+ if (!url.value) {
+ error.value = 'Please enter a GitHub repository URL'
+ return
+ }
+ if (!isValidGithubUrl(url.value)) {
+ error.value = 'Please enter a valid GitHub repository URL'
+ return
+ }
+
+ isLoading.value = true
+ // TODO: Implement API call
+ try {
+ // await apiClient.packRepository({ ... })
+ } catch (e) {
+ error.value = 'Failed to process repository. Please try again.'
+ } finally {
+ isLoading.value = false
+ }
}Committable suggestion skipped: line range outside the PR's diff.
| <template> | ||
| <div class="container"> | ||
| <div class="try-it-container"> | ||
| <div class="input-group"> | ||
| <div class="url-input-container"> | ||
| <input | ||
| v-model="url" | ||
| type="text" | ||
| placeholder="GitHub repo URL or name (e.g., facebook/react)" | ||
| class="repository-input" | ||
| /> | ||
| <button @click="handleSubmit" class="pack-button"> | ||
| Pack | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | ||
| <path d="M5 12h14"/> | ||
| <path d="m12 5 7 7-7 7"/> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="options-container"> | ||
| <div class="option-group"> | ||
| <p class="option-label">Output Format</p> | ||
| <div class="format-buttons"> | ||
| <button | ||
| class="format-button" | ||
| :class="{ active: format === 'xml' }" | ||
| @click="format = 'xml'" | ||
| > | ||
| XML | ||
| </button> | ||
| <button | ||
| class="format-button" | ||
| :class="{ active: format === 'markdown' }" | ||
| @click="format = 'markdown'" | ||
| > | ||
| Markdown | ||
| </button> | ||
| <button | ||
| class="format-button" | ||
| :class="{ active: format === 'text' }" | ||
| @click="format = 'text'" | ||
| > | ||
| Text | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="option-group"> | ||
| <p class="option-label">Output Options</p> | ||
| <div class="checkbox-group"> | ||
| <label class="checkbox-label"> | ||
| <input | ||
| v-model="removeComments" | ||
| type="checkbox" | ||
| class="checkbox-input" | ||
| /> | ||
| <span>Remove Comments</span> | ||
| </label> | ||
| <label class="checkbox-label"> | ||
| <input | ||
| v-model="removeEmptyLines" | ||
| type="checkbox" | ||
| class="checkbox-input" | ||
| /> | ||
| <span>Remove Empty Lines</span> | ||
| </label> | ||
| <label class="checkbox-label"> | ||
| <input | ||
| v-model="showLineNumbers" | ||
| type="checkbox" | ||
| class="checkbox-input" | ||
| /> | ||
| <span>Show Line Numbers</span> | ||
| </label> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve accessibility and form semantics.
The template structure needs improvements for better accessibility and user experience:
- Use semantic
<form>element - Add proper ARIA labels
- Display loading and error states
- Add keyboard navigation support
Here's how to improve the template:
<template>
<div class="container">
<div class="try-it-container">
- <div class="input-group">
+ <form @submit.prevent="handleSubmit" class="input-group">
<div class="url-input-container">
<input
v-model="url"
type="text"
+ aria-label="GitHub repository URL"
placeholder="GitHub repo URL or name (e.g., facebook/react)"
class="repository-input"
+ :disabled="isLoading"
/>
- <button @click="handleSubmit" class="pack-button">
- Pack
+ <button type="submit" class="pack-button" :disabled="isLoading">
+ {{ isLoading ? 'Processing...' : 'Pack' }}
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"/>
<path d="m12 5 7 7-7 7"/>
</svg>
</button>
</div>
+ <div v-if="error" class="error-message" role="alert">
+ {{ error }}
+ </div>
- </div>
+ </form>
<div class="options-container">
<div class="option-group">
<p class="option-label">Output Format</p>
<div class="format-buttons" role="radiogroup" aria-label="Output format selection">Committable suggestion skipped: line range outside the PR's diff.
1 participant
Checklist
npm run testnpm run lint