Add Markdown download for work experience#259
Conversation
- Refactor work experience data into a shared data file. - Implement a DownloadExperience component to export work history. - Add a download icon to the Icon primitive. - Integrate the download button into the /work page UI. - Ensure consistent styling and mobile responsiveness. Co-authored-by: jayvicsanantonio <20731321+jayvicsanantonio@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (6)
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a feature to download work experience as a Markdown file. Key changes include the creation of a DownloadExperience component, the centralization of experience data into a shared _data file to eliminate redundancy, and the addition of a new download icon. Review feedback suggests optimizing the Markdown generation by pre-computing static content and enhancing accessibility by marking decorative UI elements as hidden from screen readers.
| const handleDownload = () => { | ||
| const markdown = EXPERIENCES.map((exp) => { | ||
| return `## ${exp.title} | ${exp.company} | ||
| ${exp.period} | ||
|
|
||
| ${exp.bullets.map((bullet) => `- ${bullet}`).join("\n")} | ||
|
|
||
| **Tags:** ${exp.tags.join(", ")} | ||
| `; | ||
| }).join("\n---\n\n"); | ||
|
|
||
| const header = `# Jayvic San Antonio - Professional Experience\n\n`; | ||
| const fullMarkdown = header + markdown; | ||
|
|
||
| const blob = new Blob([fullMarkdown], { type: "text/markdown" }); | ||
| const url = URL.createObjectURL(blob); | ||
| const link = document.createElement("a"); | ||
| link.href = url; | ||
| link.download = "jayvic-san-antonio-experience.md"; | ||
| document.body.appendChild(link); | ||
| link.click(); | ||
| document.body.removeChild(link); | ||
| URL.revokeObjectURL(url); | ||
| }; |
There was a problem hiding this comment.
The handleDownload function contains logic that can be optimized for both performance and maintainability. Since the EXPERIENCES data is static and imported at the module level, the Markdown string generation can be extracted and pre-computed outside the component. This avoids re-calculating the string on every click. Additionally, resource cleanup for the created object URL should be wrapped in a try...finally block to ensure URL.revokeObjectURL is called even if an error occurs during the download trigger.
const MARKDOWN_CONTENT = `# Jayvic San Antonio - Professional Experience\n\n` +
EXPERIENCES.map((exp) => {
return `## ${exp.title} | ${exp.company}\n${exp.period}\n\n${exp.bullets.map((bullet) => `- ${bullet}`).join("\n")}\n\n**Tags:** ${exp.tags.join(", ")}`;
}).join("\n\n---\n\n");
export default function DownloadExperience() {
const handleDownload = () => {
const blob = new Blob([MARKDOWN_CONTENT], { type: "text/markdown" });
const url = URL.createObjectURL(blob);
try {
const link = document.createElement("a");
link.href = url;
link.download = "jayvic-san-antonio-experience.md";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} finally {
URL.revokeObjectURL(url);
}
};
| className="transition-transform group-hover:-translate-y-0.5" | ||
| /> | ||
| <span>Download .md</span> | ||
| <span className="absolute -bottom-px left-1/2 h-px w-0 -translate-x-1/2 bg-linear-to-r from-transparent via-cyan-300/50 to-transparent transition-all group-hover:w-2/3" /> |
There was a problem hiding this comment.
The decorative span used for the hover underline should be hidden from assistive technologies to avoid cluttering the accessibility tree.
| <span className="absolute -bottom-px left-1/2 h-px w-0 -translate-x-1/2 bg-linear-to-r from-transparent via-cyan-300/50 to-transparent transition-all group-hover:w-2/3" /> | |
| <span aria-hidden="true" className="absolute -bottom-px left-1/2 h-px w-0 -translate-x-1/2 bg-linear-to-r from-transparent via-cyan-300/50 to-transparent transition-all group-hover:w-2/3" /> |
1 participant
Implemented a new feature that allows users to download the full work experience in Markdown format from the
/workpage.Key changes:
WorkTimeline.tsxtoapp/work/_data/experiences.tsto ensure consistency across the UI, SEO metadata, and the download functionality.downloadicon to the standardIconprimitive component.DownloadExperiencecomponent that dynamically generates a Markdown file based on the centralized data and triggers a browser download.PR created automatically by Jules for task 12196215783298108633 started by @jayvicsanantonio