feat(site): add templates #3567
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
3 Skipped Deployments
|
|
Warning This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
How to use the Graphite Merge QueueAdd the label merge-queue to this PR to add it to the merge queue. You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
PR Review: Templates Page ImplementationOverviewThis PR adds a comprehensive templates browsing system to the website with search, filtering, and detail pages. The implementation is solid but there are several improvements to consider. ✅ Strengths
🔍 Issues & RecommendationsCritical Issues1. Hardcoded File Paths (Security & Reliability Risk)Location: The README loading uses a brittle relative path: const readmePath = path.join(process.cwd(), "..", "examples", templateName, "README.md");Issues:
Recommendation: Add input validation and path normalization: const EXAMPLES_BASE_PATH = path.join(process.cwd(), "..", "examples");
async function getReadmeContent(templateName: string): Promise<string> {
// Validate template name to prevent directory traversal
if (!/^[a-z0-9-]+$/.test(templateName)) {
return "# Invalid Template\n\nTemplate name contains invalid characters.";
}
try {
const readmePath = path.join(EXAMPLES_BASE_PATH, templateName, "README.md");
const normalizedPath = path.normalize(readmePath);
// Verify path is within expected directory
if (!normalizedPath.startsWith(path.normalize(EXAMPLES_BASE_PATH))) {
throw new Error("Invalid path");
}
const content = await fs.readFile(readmePath, "utf-8");
return content;
} catch (error) {
console.error(`Failed to read README for ${templateName}:`, error);
return `# README Not Available\n\nView it on [GitHub](https://github.com/rivet-dev/rivetkit/tree/main/examples/${templateName}).`;
}
}Code Quality Issues2. Inline Styles Instead of Tailwind ClassesLocation: style={{ color: "#FAFAFA" }}Issue: Mixing inline styles with Tailwind breaks consistency and makes theme changes harder. Recommendation: Use Tailwind classes like 3. useMemo Dependency ArraysLocation: Empty dependency arrays 4. Magic Numbers in UIValues like Accessibility Issues5. Missing ARIA Labels on Search InputLocation: Recommendation: Add User Experience Enhancements6. Clear All Filters PerformanceLocation: The clear button triggers multiple state updates sequentially: onClick={() => {
selectedTags.forEach((tag) => onTagToggle(tag));
selectedTechnologies.forEach((tech) => onTechnologyToggle(tech));
}}Recommendation: Expose a single 7. Template Data CompletenessMany templates have empty 8. Related Templates AlgorithmLocation: Falls back to first 3 templates if no shared tags. Consider prioritizing templates with shared technologies or randomizing for better exposure. 📋 Testing Recommendations
🎯 SummaryOverall Assessment: Well-structured feature following React and Next.js best practices. The main concerns are around file path security, accessibility, and minor performance optimizations. Priority:
Great work on this feature! The templates page will be a valuable resource for users. 🚀 |
NathanFlurry
force-pushed
the
11-30-feat_site_add_templates
branch
from
735dd6f to
d7f4e0d
Compare
NathanFlurry
force-pushed
the
11-30-feat_examples_add_user-generated-actors_example
branch
from
59757d7 to
cc69285
Compare
More templates
@rivetkit/cloudflare-workers
@rivetkit/db
@rivetkit/framework-base
@rivetkit/next-js
@rivetkit/react
rivetkit
@rivetkit/sql-loader
@rivetkit/engine-runner
@rivetkit/engine-runner-protocol
commit: |
No description provided.