[ { "path": ".cursor/rules/content-migration.mdc", "content": "---\ndescription: When user requests migrating old roadmap content to new folder from content-old to content folder\nglobs: \nalwaysApply: false\n---\n# Content Migration Rule\n\n## Rule Name: content-migration\n\n## Description\nThis rule provides a complete process for migrating roadmap content from old structure to new structure using migration mapping files.\n\n## When to Use\nUse this rule when you need to:\n- Migrate content from content-old directories to content directories\n- Use a migration-mapping.json file to map topic paths to content IDs\n- Populate empty content files with existing content from legacy structure\n\n## Process\n\n### 1. Prerequisites Check\n- Verify the roadmap directory has a `migration-mapping.json` file\n- Confirm `content-old/` directory exists with source content\n- Confirm `content/` directory exists with target files\n\n### 2. Migration Script Creation\nCreate a Node.js script with the following functionality:\n\n```javascript\nconst fs = require('fs');\nconst path = require('path');\n\n// Load the migration mapping\nconst migrationMapping = JSON.parse(fs.readFileSync('migration-mapping.json', 'utf8'));\n\n// Function to find old content file based on topic path\nfunction findOldContentFile(topicPath) {\n const parts = topicPath.split(':');\n \n if (parts.length === 1) {\n // Top level file like \"introduction\"\n return path.join('content-old', parts[0], 'index.md');\n } else if (parts.length === 2) {\n // Like \"introduction:what-is-rust\"\n const [folder, filename] = parts;\n return path.join('content-old', folder, `${filename}.md`);\n } else if (parts.length === 3) {\n // Like \"language-basics:syntax:variables\"\n const [folder, subfolder, filename] = parts;\n return path.join('content-old', folder, subfolder, `${filename}.md`);\n }\n \n return null;\n}\n\n// Function to find new content file based on content ID\nfunction findNewContentFile(contentId) {\n const contentDir = 'content';\n const files = fs.readdirSync(contentDir);\n \n // Find file that ends with the content ID\n const matchingFile = files.find(file => file.includes(`@${contentId}.md`));\n \n if (matchingFile) {\n return path.join(contentDir, matchingFile);\n }\n \n return null;\n}\n\n// Process each mapping\nconsole.log('Starting content migration...\\n');\n\nlet migratedCount = 0;\nlet skippedCount = 0;\n\nfor (const [topicPath, contentId] of Object.entries(migrationMapping)) {\n const oldFilePath = findOldContentFile(topicPath);\n const newFilePath = findNewContentFile(contentId);\n \n if (!oldFilePath) {\n console.log(`❌ Could not determine old file path for: ${topicPath}`);\n skippedCount++;\n continue;\n }\n \n if (!newFilePath) {\n console.log(`❌ Could not find new file for content ID: ${contentId} (topic: ${topicPath})`);\n skippedCount++;\n continue;\n }\n \n if (!fs.existsSync(oldFilePath)) {\n console.log(`❌ Old file does not exist: ${oldFilePath} (topic: ${topicPath})`);\n skippedCount++;\n continue;\n }\n \n try {\n // Read old content\n const oldContent = fs.readFileSync(oldFilePath, 'utf8');\n \n // Write to new file\n fs.writeFileSync(newFilePath, oldContent);\n \n console.log(`✅ Migrated: ${topicPath} -> ${path.basename(newFilePath)}`);\n migratedCount++;\n } catch (error) {\n console.log(`❌ Error migrating ${topicPath}: ${error.message}`);\n skippedCount++;\n }\n}\n\nconsole.log(`\\n📊 Migration complete:`);\nconsole.log(` Migrated: ${migratedCount} files`);\nconsole.log(` Skipped: ${skippedCount} files`);\nconsole.log(` Total: ${Object.keys(migrationMapping).length} mappings`);\n```\n\n### 3. Execution Steps\n1. Navigate to the roadmap directory (e.g., `src/data/roadmaps/[roadmap-name]`)\n2. Create the migration script as `migrate_content.cjs`\n3. Run: `node migrate_content.cjs`\n4. Review the migration results\n5. Clean up the temporary script file\n\n### 4. Validation\nAfter migration:\n- Verify a few migrated files have proper content (not just titles)\n- Check that the content structure matches the old content\n- Ensure proper markdown formatting is preserved\n\n## File Structure Expected\n```\nroadmap-directory/\n├── migration-mapping.json\n├── content/\n│ ├── file1@contentId1.md\n│ ├── file2@contentId2.md\n│ └── ...\n└── content-old/\n ├── section1/\n │ ├── index.md\n │ ├── topic1.md\n │ └── subsection1/\n │ └── subtopic1.md\n └── section2/\n └── ...\n```\n\n## Notes\n- The migration mapping uses colons (`:`) to separate nested paths\n- Content files in the new structure use the pattern `filename@contentId.md`\n- The script handles 1-3 levels of nesting in the old structure\n- Always create the script with `.cjs` extension to avoid ES module issues\n" }, { "path": ".cursor/rules/gh-cli.mdc", "content": "---\ndescription: GitHub pull requests\nglobs: \nalwaysApply: false\n---\n# gh cli\n\nWork seamlessly with GitHub from the command line.\n\nUSAGE\n gh [flags]\n\nCORE COMMANDS\n auth: Authenticate gh and git with GitHub\n browse: Open repositories, issues, pull requests, and more in the browser\n codespace: Connect to and manage codespaces\n gist: Manage gists\n issue: Manage issues\n org: Manage organizations\n pr: Manage pull requests\n project: Work with GitHub Projects.\n release: Manage releases\n repo: Manage repositories\n\nGITHUB ACTIONS COMMANDS\n cache: Manage GitHub Actions caches\n run: View details about workflow runs\n workflow: View details about GitHub Actions workflows\n\nALIAS COMMANDS\n co: Alias for \"pr checkout\"\n\nADDITIONAL COMMANDS\n alias: Create command shortcuts\n api: Make an authenticated GitHub API request\n attestation: Work with artifact attestations\n completion: Generate shell completion scripts\n config: Manage configuration for gh\n extension: Manage gh extensions\n gpg-key: Manage GPG keys\n label: Manage labels\n preview: Execute previews for gh features\n ruleset: View info about repo rulesets\n search: Search for repositories, issues, and pull requests\n secret: Manage GitHub secrets\n ssh-key: Manage SSH keys\n status: Print information about relevant issues, pull requests, and notifications across repositories\n variable: Manage GitHub Actions variables\n\nHELP TOPICS\n accessibility: Learn about GitHub CLI's accessibility experiences\n actions: Learn about working with GitHub Actions\n environment: Environment variables that can be used with gh\n exit-codes: Exit codes used by gh\n formatting: Formatting options for JSON data exported from gh\n mintty: Information about using gh with MinTTY\n reference: A comprehensive reference of all gh commands\n\nFLAGS\n --help Show help for command\n --version Show gh version\n\nEXAMPLES\n $ gh issue create\n $ gh repo clone cli/cli\n $ gh pr checkout 321\n\nLEARN MORE\n Use `gh --help` for more information about a command.\n Read the manual at https://cli.github.com/manual\n Learn about exit codes using `gh help exit-codes`\n Learn about accessibility experiences using `gh help accessibility`\n\n## gh pr\n\nWork with GitHub pull requests.\n\nUSAGE\n gh pr [flags]\n\nGENERAL COMMANDS\n create: Create a pull request\n list: List pull requests in a repository\n status: Show status of relevant pull requests\n\nTARGETED COMMANDS\n checkout: Check out a pull request in git\n checks: Show CI status for a single pull request\n close: Close a pull request\n comment: Add a comment to a pull request\n diff: View changes in a pull request\n edit: Edit a pull request\n lock: Lock pull request conversation\n merge: Merge a pull request\n ready: Mark a pull request as ready for review\n reopen: Reopen a pull request\n review: Add a review to a pull request\n unlock: Unlock pull request conversation\n update-branch: Update a pull request branch\n view: View a pull request\n\nFLAGS\n -R, --repo [HOST/]OWNER/REPO Select another repository using the [HOST/]OWNER/REPO format\n\nINHERITED FLAGS\n --help Show help for command\n\nARGUMENTS\n A pull request can be supplied as argument in any of the following formats:\n - by number, e.g. \"123\";\n - by URL, e.g. \"https://github.com/OWNER/REPO/pull/123\"; or\n - by the name of its head branch, e.g. \"patch-1\" or \"OWNER:patch-1\".\n\nEXAMPLES\n $ gh pr checkout 353\n $ gh pr create --fill\n $ gh pr view --web\n\nLEARN MORE\n Use `gh --help` for more information about a command.\n Read the manual at https://cli.github.com/manual\n Learn about exit codes using `gh help exit-codes`\n Learn about accessibility experiences using `gh help accessibility`\n\n## gh pr list\n\nList pull requests in a GitHub repository. By default, this only lists open PRs.\n\nThe search query syntax is documented here:\n\n\nFor more information about output formatting flags, see `gh help formatting`.\n\nUSAGE\n gh pr list [flags]\n\nALIASES\n gh pr ls\n\nFLAGS\n --app string Filter by GitHub App author\n -a, --assignee string Filter by assignee\n -A, --author string Filter by author\n -B, --base string Filter by base branch\n -d, --draft Filter by draft state\n -H, --head string Filter by head branch (\":\" syntax not supported)\n -q, --jq expression Filter JSON output using a jq expression\n --json fields Output JSON with the specified fields\n -l, --label strings Filter by label\n -L, --limit int Maximum number of items to fetch (default 30)\n -S, --search query Search pull requests with query\n -s, --state string Filter by state: {open|closed|merged|all} (default \"open\")\n -t, --template string Format JSON output using a Go template; see \"gh help formatting\"\n -w, --web List pull requests in the web browser\n\nINHERITED FLAGS\n --help Show help for command\n -R, --repo [HOST/]OWNER/REPO Select another repository using the [HOST/]OWNER/REPO format\n\nJSON FIELDS\n additions, assignees, author, autoMergeRequest, baseRefName, baseRefOid, body,\n changedFiles, closed, closedAt, closingIssuesReferences, comments, commits,\n createdAt, deletions, files, fullDatabaseId, headRefName, headRefOid,\n headRepository, headRepositoryOwner, id, isCrossRepository, isDraft, labels,\n latestReviews, maintainerCanModify, mergeCommit, mergeStateStatus, mergeable,\n mergedAt, mergedBy, milestone, number, potentialMergeCommit, projectCards,\n projectItems, reactionGroups, reviewDecision, reviewRequests, reviews, state,\n statusCheckRollup, title, updatedAt, url\n\nEXAMPLES\n # List PRs authored by you\n $ gh pr list --author \"@me\"\n \n # List PRs with a specific head branch name\n $ gh pr list --head \"typo\"\n \n # List only PRs with all of the given labels\n $ gh pr list --label bug --label \"priority 1\"\n \n # Filter PRs using search syntax\n $ gh pr list --search \"status:success review:required\"\n \n # Find a PR that introduced a given commit\n $ gh pr list --search \"\" --state merged\n\nLEARN MORE\n Use `gh --help` for more information about a command.\n Read the manual at https://cli.github.com/manual\n Learn about exit codes using `gh help exit-codes`\n Learn about accessibility experiences using `gh help accessibility`\n\n## gh pr diff\n\nView changes in a pull request.\n\nWithout an argument, the pull request that belongs to the current branch\nis selected.\n\nWith `--web` flag, open the pull request diff in a web browser instead.\n\n\nUSAGE\n gh pr diff [ | | ] [flags]\n\nFLAGS\n --color string Use color in diff output: {always|never|auto} (default \"auto\")\n --name-only Display only names of changed files\n --patch Display diff in patch format\n -w, --web Open the pull request diff in the browser\n\nINHERITED FLAGS\n --help Show help for command\n -R, --repo [HOST/]OWNER/REPO Select another repository using the [HOST/]OWNER/REPO format\n\nLEARN MORE\n Use `gh --help` for more information about a command.\n Read the manual at https://cli.github.com/manual\n Learn about exit codes using `gh help exit-codes`\n Learn about accessibility experiences using `gh help accessibility`\n\n## gh pr merge\n\nMerge a pull request on GitHub.\n\nWithout an argument, the pull request that belongs to the current branch\nis selected.\n\nWhen targeting a branch that requires a merge queue, no merge strategy is required.\nIf required checks have not yet passed, auto-merge will be enabled.\nIf required checks have passed, the pull request will be added to the merge queue.\nTo bypass a merge queue and merge directly, pass the `--admin` flag.\n\n\nUSAGE\n gh pr merge [ | | ] [flags]\n\nFLAGS\n --admin Use administrator privileges to merge a pull request that does not meet requirements\n -A, --author-email text Email text for merge commit author\n --auto Automatically merge only after necessary requirements are met\n -b, --body text Body text for the merge commit\n -F, --body-file file Read body text from file (use \"-\" to read from standard input)\n -d, --delete-branch Delete the local and remote branch after merge\n --disable-auto Disable auto-merge for this pull request\n --match-head-commit SHA Commit SHA that the pull request head must match to allow merge\n -m, --merge Merge the commits with the base branch\n -r, --rebase Rebase the commits onto the base branch\n -s, --squash Squash the commits into one commit and merge it into the base branch\n -t, --subject text Subject text for the merge commit\n\nINHERITED FLAGS\n --help Show help for command\n -R, --repo [HOST/]OWNER/REPO Select another repository using the [HOST/]OWNER/REPO format\n\nLEARN MORE\n Use `gh --help` for more information about a command.\n Read the manual at https://cli.github.com/manual\n Learn about exit codes using `gh help exit-codes`\n Learn about accessibility experiences using `gh help accessibility`\n\n## gh pr review \n\nAdd a review to a pull request.\n\nWithout an argument, the pull request that belongs to the current branch is reviewed.\n\n\nUSAGE\n gh pr review [ | | ] [flags]\n\nFLAGS\n -a, --approve Approve pull request\n -b, --body string Specify the body of a review\n -F, --body-file file Read body text from file (use \"-\" to read from standard input)\n -c, --comment Comment on a pull request\n -r, --request-changes Request changes on a pull request\n\nINHERITED FLAGS\n --help Show help for command\n -R, --repo [HOST/]OWNER/REPO Select another repository using the [HOST/]OWNER/REPO format\n\nEXAMPLES\n # Approve the pull request of the current branch\n $ gh pr review --approve\n \n # Leave a review comment for the current branch\n $ gh pr review --comment -b \"interesting\"\n \n # Add a review for a specific pull request\n $ gh pr review 123\n \n # Request changes on a specific pull request\n $ gh pr review 123 -r -b \"needs more ASCII art\"\n\nLEARN MORE\n Use `gh --help` for more information about a command.\n Read the manual at https://cli.github.com/manual\n Learn about exit codes using `gh help exit-codes`\n Learn about accessibility experiences using `gh help accessibility`\n\n## gh pr checkout\n\nCheck out a pull request in git\n\nUSAGE\n gh pr checkout [ | | ] [flags]\n\nFLAGS\n -b, --branch string Local branch name to use (default [the name of the head branch])\n --detach Checkout PR with a detached HEAD\n -f, --force Reset the existing local branch to the latest state of the pull request\n --recurse-submodules Update all submodules after checkout\n\nINHERITED FLAGS\n --help Show help for command\n -R, --repo [HOST/]OWNER/REPO Select another repository using the [HOST/]OWNER/REPO format\n\nEXAMPLES\n # Interactively select a PR from the 10 most recent to check out\n $ gh pr checkout\n \n # Checkout a specific PR\n $ gh pr checkout 32\n $ gh pr checkout https://github.com/OWNER/REPO/pull/32\n $ gh pr checkout feature\n\nLEARN MORE\n Use `gh --help` for more information about a command.\n Read the manual at https://cli.github.com/manual\n Learn about exit codes using `gh help exit-codes`\n Learn about accessibility experiences using `gh help accessibility`\n\n ## gh pr close\n\n Close a pull request\n\nUSAGE\n gh pr close { | | } [flags]\n\nFLAGS\n -c, --comment string Leave a closing comment\n -d, --delete-branch Delete the local and remote branch after close\n\nINHERITED FLAGS\n --help Show help for command\n -R, --repo [HOST/]OWNER/REPO Select another repository using the [HOST/]OWNER/REPO format\n\nLEARN MORE\n Use `gh --help` for more information about a command.\n Read the manual at https://cli.github.com/manual\n Learn about exit codes using `gh help exit-codes`\n Learn about accessibility experiences using `gh help accessibility`\n\n## gh pr comment\n\nAdd a comment to a GitHub pull request.\n\nWithout the body text supplied through flags, the command will interactively\nprompt for the comment text.\n\n\nUSAGE\n gh pr comment [ | | ] [flags]\n\nFLAGS\n -b, --body text The comment body text\n -F, --body-file file Read body text from file (use \"-\" to read from standard input)\n --create-if-none Create a new comment if no comments are found. Can be used only with --edit-last\n --delete-last Delete the last comment of the current user\n --edit-last Edit the last comment of the current user\n -e, --editor Skip prompts and open the text editor to write the body in\n -w, --web Open the web browser to write the comment\n --yes Skip the delete confirmation prompt when --delete-last is provided\n\nINHERITED FLAGS\n --help Show help for command\n -R, --repo [HOST/]OWNER/REPO Select another repository using the [HOST/]OWNER/REPO format\n\nEXAMPLES\n $ gh pr comment 13 --body \"Hi from GitHub CLI\"\n\nLEARN MORE\n Use `gh --help` for more information about a command.\n Read the manual at https://cli.github.com/manual\n Learn about exit codes using `gh help exit-codes`\n Learn about accessibility experiences using `gh help accessibility`\n\n\n\n" }, { "path": ".github/FUNDING.yml", "content": "# These are supported funding model platforms\ngithub: kamranahmedse\n" }, { "path": ".github/ISSUE_TEMPLATE/01-suggest-changes.yml", "content": "name: \"✍️ ​ ​Missing or Deprecated Roadmap Topics\"\ndescription: Help us improve the roadmaps by suggesting changes\nlabels: [topic-change]\nassignees: []\nbody:\n - type: markdown\n attributes:\n value: |\n Thanks for taking the time to help us improve the roadmaps with your suggestions.\n - type: input\n id: url\n attributes:\n label: Roadmap URL\n description: Please provide the URL of the roadmap you are suggesting changes to.\n placeholder: https://roadmap.sh\n validations:\n required: true\n - type: textarea\n id: roadmap-suggestions\n attributes:\n label: Suggestions\n description: What changes would you like to suggest?\n placeholder: Enter your suggestions here.\n validations:\n required: true" }, { "path": ".github/ISSUE_TEMPLATE/02-bug-report.yml", "content": "name: \"🐛 ​ ​Bug Report\"\ndescription: Report an issue or possible bug\nlabels: [bug]\nassignees: []\nbody:\n - type: input\n id: url\n attributes:\n label: What is the URL where the issue is happening\n placeholder: https://roadmap.sh\n validations:\n required: true\n - type: dropdown\n id: browsers\n attributes:\n label: What browsers are you seeing the problem on?\n multiple: true\n options:\n - Firefox\n - Chrome\n - Safari\n - Microsoft Edge\n - Other\n - type: textarea\n id: bug-description\n attributes:\n label: Describe the Bug\n description: A clear and concise description of what the bug is.\n validations:\n required: true\n - type: textarea\n id: logs\n attributes:\n label: Output from browser console (if any)\n description: Please copy and paste any relevant log output.\n - type: checkboxes\n id: will-pr\n attributes:\n label: Participation\n options:\n - label: I am willing to submit a pull request for this issue.\n required: false\n" }, { "path": ".github/ISSUE_TEMPLATE/03-feature-suggestion.yml", "content": "name: \"✨ ​ ​Feature Suggestion\"\ndescription: Is there a feature you'd like to see on Roadmap.sh? Let us know!\nlabels: [feature request]\nassignees: []\nbody:\n - type: textarea\n id: feature-description\n attributes:\n label: Feature Description\n description: Please provide a detailed description of the feature you are suggesting and how it would help you/others.\n validations:\n required: true" }, { "path": ".github/ISSUE_TEMPLATE/04-roadmap-contribution.yml", "content": "name: \"🙏 ​ ​Submit a Roadmap\"\ndescription: Help us launch a new roadmap with your expertise.\nlabels: [roadmap contribution]\nassignees: []\nbody:\n - type: markdown\n attributes:\n value: |\n Thanks for taking the time to submit a roadmap! Please fill out the information below and we'll get back to you as soon as we can.\n - type: input\n id: roadmap-title\n attributes:\n label: What is the title of the roadmap you are submitting?\n placeholder: e.g. Roadmap to learn Data Science\n validations:\n required: true\n - type: textarea\n id: roadmap-description\n attributes:\n label: Roadmap Link\n description: Please create the roadmap [using our roadmap editor](https://twitter.com/kamrify/status/1708293162693767426) and submit the roadmap link.\n placeholder: |\n https://roadmap.sh/xyz\n validations:\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE/05-something-else.yml", "content": "name: \"🤷‍♂️ ​ ​Something else\"\ndescription: If none of the above templates fit your needs, please use this template to submit your issue.\nlabels: []\nassignees: []\nbody:\n - type: textarea\n id: issue-description\n attributes:\n label: Detailed Description\n description: Please provide a detailed description of the issue.\n validations:\n required: true" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\ncontact_links:\n - name: ✋ ​ ​Roadmap Request\n url: https://roadmap.sh/discord\n about: Please do not open issues with roadmap requests, hop onto the discord server for that.\n - name: 📝 ​ ​Typo or Grammatical Mistake\n url: https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data\n about: Please submit a pull request instead of reporting it as an issue.\n - name: 💬 ​ ​Chat on Discord\n url: https://roadmap.sh/discord\n about: Join the community on our Discord server.\n - name: 🤝 ​ ​Guidance\n url: https://roadmap.sh/discord\n about: Join the community in our Discord server.\n" }, { "path": ".github/workflows/aws-costs.yml", "content": "name: Sends Daily AWS Costs to Slack\non:\n # Allow manual Run\n workflow_dispatch:\n # Run at 7:00 UTC every day\n schedule:\n - cron: \"0 7 * * *\"\njobs:\n aws_costs:\n runs-on: ubuntu-latest\n steps:\n - name: Get Costs\n env:\n AWS_KEY: ${{ secrets.COST_AWS_ACCESS_KEY }}\n AWS_SECRET: ${{ secrets.COST_AWS_SECRET_KEY }}\n AWS_REGION: ${{ secrets.COST_AWS_REGION }}\n SLACK_CHANNEL: ${{ secrets.SLACK_COST_CHANNEL }}\n SLACK_TOKEN: ${{ secrets.SLACK_TOKEN }}\n run: |\n npm install -g aws-cost-cli\n aws-cost -k $AWS_KEY -s $AWS_SECRET -r $AWS_REGION -S $SLACK_TOKEN -C $SLACK_CHANNEL\n" }, { "path": ".github/workflows/cleanup-orphaned-content.yml", "content": "name: Cleanup Orphaned Content\n\non:\n workflow_dispatch:\n inputs:\n roadmap_slug:\n description: \"The ID of the roadmap to clean up\"\n required: true\n\njobs:\n cleanup-content:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n\n - name: Setup pnpm@v9\n uses: pnpm/action-setup@v4\n with:\n version: 9\n run_install: false\n\n - name: Setup Node.js Version 20 (LTS)\n uses: actions/setup-node@v4\n with:\n node-version: 20\n cache: 'pnpm'\n\n - name: Install Dependencies and Run Cleanup\n run: |\n echo \"Installing Dependencies\"\n pnpm install\n echo \"Running Orphaned Content Cleanup\"\n npm run cleanup:orphaned-content -- --roadmap-slug=${{ inputs.roadmap_slug }}\n\n - name: Read cleanup summary\n id: read-summary\n run: |\n if [ -f .cleanup-summary.md ]; then\n {\n echo 'summary<> $GITHUB_OUTPUT\n fi\n\n - name: Check for changes\n id: verify-changed-files\n run: |\n if [ -n \"$(git status --porcelain)\" ]; then\n echo \"changed=true\" >> $GITHUB_OUTPUT\n else\n echo \"changed=false\" >> $GITHUB_OUTPUT\n fi\n\n - name: Delete summary file\n if: steps.verify-changed-files.outputs.changed == 'true'\n run: rm -f .cleanup-summary.md\n\n - name: Create PR\n if: steps.verify-changed-files.outputs.changed == 'true'\n uses: peter-evans/create-pull-request@v7\n with:\n delete-branch: false\n branch: \"chore/cleanup-orphaned-content-${{ inputs.roadmap_slug }}\"\n base: \"master\"\n labels: |\n automated pr\n reviewers: jcanalesluna,kamranahmedse\n commit-message: \"chore: cleanup orphaned content files\"\n title: \"chore: cleanup orphaned content - ${{ inputs.roadmap_slug }}\"\n body: |\n ${{ steps.read-summary.outputs.summary }}\n\n > [!IMPORTANT]\n > This PR removes orphaned/duplicate content files for: ${{ inputs.roadmap_slug }}\n >\n > Commit: ${{ github.sha }}\n > Workflow Path: ${{ github.workflow_ref }}\n\n **Please review the changes and merge the PR if everything looks correct.**\n" }, { "path": ".github/workflows/close-feedback-pr.yml", "content": "name: Close PRs with Feedback\non:\n workflow_dispatch:\n schedule:\n - cron: '0 0 * * *'\njobs:\n close-pr:\n runs-on: ubuntu-latest\n steps:\n - name: Close PR if it has label \"feedback left\" and no changes in 7 days\n uses: actions/github-script@v3\n with:\n github-token: ${{ secrets.GITHUB_TOKEN }}\n script: |\n const { data: pullRequests } = await github.pulls.list({\n owner: context.repo.owner,\n repo: context.repo.repo,\n state: 'open',\n base: 'master',\n });\n\n for (const pullRequest of pullRequests) {\n const { data: labels } = await github.issues.listLabelsOnIssue({\n owner: context.repo.owner,\n repo: context.repo.repo,\n issue_number: pullRequest.number,\n });\n\n const feedbackLabel = labels.find((label) => label.name === 'feedback left');\n if (feedbackLabel) {\n const lastUpdated = new Date(pullRequest.updated_at);\n const sevenDaysAgo = new Date();\n sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);\n\n if (lastUpdated < sevenDaysAgo) {\n await github.issues.createComment({\n owner: context.repo.owner,\n repo: context.repo.repo,\n issue_number: pullRequest.number,\n body: 'Closing this PR because there has been no activity for the past 7 days. Feel free to reopen if you have any feedback.',\n });\n await github.pulls.update({\n owner: context.repo.owner,\n repo: context.repo.repo,\n pull_number: pullRequest.number,\n state: 'closed',\n });\n }\n }\n }" }, { "path": ".github/workflows/cloudfront-api-cache.yml", "content": "name: Clears API Cloudfront Cache\non:\n workflow_dispatch:\njobs:\n cloudfront_api_cache:\n runs-on: ubuntu-latest\n steps:\n - name: Clear Cloudfront Caching\n run: |\n curl -L \\\n -X POST \\\n -H \"Accept: application/vnd.github+json\" \\\n -H \"Authorization: Bearer ${{ secrets.GH_PAT }}\" \\\n -H \"X-GitHub-Api-Version: 2022-11-28\" \\\n https://api.github.com/repos/roadmapsh/infra-ansible/actions/workflows/playbook.yml/dispatches \\\n -d '{ \"ref\":\"master\", \"inputs\": { \"playbook\": \"roadmap_web.yml\", \"tags\": \"cloudfront-api\", \"is_verbose\": false } }'\n" }, { "path": ".github/workflows/cloudfront-fe-cache.yml", "content": "name: Clears Frontend Cloudfront Cache\non:\n workflow_dispatch:\njobs:\n cloudfront_fe_cache:\n runs-on: ubuntu-latest\n steps:\n - name: Clear Cloudfront Caching\n run: |\n curl -L \\\n -X POST \\\n -H \"Accept: application/vnd.github+json\" \\\n -H \"Authorization: Bearer ${{ secrets.GH_PAT }}\" \\\n -H \"X-GitHub-Api-Version: 2022-11-28\" \\\n https://api.github.com/repos/roadmapsh/infra-ansible/actions/workflows/playbook.yml/dispatches \\\n -d '{ \"ref\":\"master\", \"inputs\": { \"playbook\": \"roadmap_web.yml\", \"tags\": \"cloudfront,cloudfront-course\", \"is_verbose\": false } }'\n" }, { "path": ".github/workflows/deployment.yml", "content": "name: Deploy to EC2\n\non:\n workflow_dispatch:\n\njobs:\n deploy:\n runs-on: ubuntu-latest\n steps:\n - name: Checkout Repository\n uses: actions/checkout@v4\n with:\n fetch-depth: 2\n - uses: actions/setup-node@v4\n with:\n node-version: 20\n - uses: pnpm/action-setup@v4.0.0\n with:\n version: 9\n\n # -------------------\n # Setup configuration\n # -------------------\n - name: Prepare configuration files\n run: |\n git clone https://${{ secrets.GH_PAT }}@github.com/roadmapsh/infra-config.git configuration --depth 1\n - name: Copy configuration files\n run: |\n cp configuration/dist/github/developer-roadmap.env .env\n\n # -----------------\n # Prepare the Build\n # -----------------\n - name: Install Dependencies\n run: |\n pnpm install\n\n - name: Generate Production Build\n run: |\n git clone https://${{ secrets.GH_PAT }}@github.com/roadmapsh/web-draw.git .temp/web-draw --depth 1\n npm run generate-renderer\n npm run compress:images\n npm run build\n\n # --------------------\n # Deploy to EC2\n # --------------------\n - uses: webfactory/ssh-agent@v0.7.0\n with:\n ssh-private-key: ${{ secrets.EC2_PRIVATE_KEY }}\n - name: Deploy Application to EC2\n run: |\n rsync -apvz --delete --no-times --exclude \"configuration\" -e \"ssh -o StrictHostKeyChecking=no\" -p ./ ${{ secrets.EC2_USERNAME }}@${{ secrets.EC2_HOST }}:/var/www/roadmap.sh/\n - name: Restart PM2\n uses: appleboy/ssh-action@master\n with:\n host: ${{ secrets.EC2_HOST }}\n username: ${{ secrets.EC2_USERNAME }}\n key: ${{ secrets.EC2_PRIVATE_KEY }}\n script: |\n cd /var/www/roadmap.sh\n sudo pm2 restart web-roadmap\n\n # ----------------------\n # Clear cloudfront cache\n # ----------------------\n - name: Clear Cloudfront Caching\n run: |\n curl -L \\\n -X POST \\\n -H \"Accept: application/vnd.github+json\" \\\n -H \"Authorization: Bearer ${{ secrets.GH_PAT }}\" \\\n -H \"X-GitHub-Api-Version: 2022-11-28\" \\\n https://api.github.com/repos/roadmapsh/infra-ansible/actions/workflows/playbook.yml/dispatches \\\n -d '{ \"ref\":\"master\", \"inputs\": { \"playbook\": \"roadmap_web.yml\", \"tags\": \"cloudfront\", \"is_verbose\": false } }'" }, { "path": ".github/workflows/label-issue.yml", "content": "name: Label Issue\n\non:\n issues:\n types: [ opened, edited ]\n \njobs:\n label-topic-change-issue:\n runs-on: ubuntu-latest\n steps:\n - name: Add Labels To Issue\n uses: actions/github-script@v7\n with:\n github-token: ${{ secrets.GITHUB_TOKEN }}\n script: |\n const issue = context.payload.issue;\n const roadmapUrl = issue.body.match(/https?:\\/\\/roadmap.sh\\/[^ ]+/);\n\n // if the issue is labeled as a topic-change, add the roadmap slug as a label\n if (issue.labels.some(label => label.name === 'topic-change')) {\n if (roadmapUrl) {\n const roadmapSlug = new URL(roadmapUrl[0]).pathname.replace(/\\//, '');\n github.rest.issues.addLabels({\n owner: context.repo.owner,\n repo: context.repo.repo,\n issue_number: issue.number,\n labels: [roadmapSlug]\n });\n }\n \n // Close the issue if it has no roadmap URL\n if (!roadmapUrl) {\n github.rest.issues.update({\n owner: context.repo.owner,\n repo: context.repo.repo,\n issue_number: issue.number,\n state: 'closed'\n });\n }\n }" }, { "path": ".github/workflows/sync-content-to-repo.yml", "content": "name: Sync Content to Repo\n\non:\n workflow_dispatch:\n inputs:\n roadmap_slug:\n description: \"The ID of the roadmap to sync\"\n required: true\n default: \"__default__\"\n\njobs:\n sync-content:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n\n - name: Setup pnpm@v9\n uses: pnpm/action-setup@v4\n with:\n version: 9\n run_install: false\n\n - name: Setup Node.js Version 20 (LTS)\n uses: actions/setup-node@v4\n with:\n node-version: 20\n cache: 'pnpm'\n\n - name: Install Dependencies and Sync Content\n run: |\n echo \"Installing Dependencies\"\n pnpm install\n echo \"Syncing Content to Repo\"\n npm run sync:content-to-repo -- --roadmap-slug=${{ inputs.roadmap_slug }} --secret=${{ secrets.GH_SYNC_SECRET }}\n\n - name: Check for changes\n id: verify-changed-files\n run: |\n if [ -n \"$(git status --porcelain)\" ]; then\n echo \"changed=true\" >> $GITHUB_OUTPUT\n else\n echo \"changed=false\" >> $GITHUB_OUTPUT\n fi\n \n - name: Create PR\n if: steps.verify-changed-files.outputs.changed == 'true'\n uses: peter-evans/create-pull-request@v7\n with:\n delete-branch: false\n branch: \"chore/sync-content-to-repo-${{ inputs.roadmap_slug }}\"\n base: \"master\"\n labels: |\n automated pr\n reviewers: jcanalesluna,kamranahmedse\n commit-message: \"chore: sync content to repo\"\n title: \"chore: sync content to repository - ${{ inputs.roadmap_slug }}\"\n body: |\n ## Sync Content to Repo\n \n > [!IMPORTANT]\n > This PR Syncs the Content to the Repo for the Roadmap: ${{ inputs.roadmap_slug }}\n >\n > Commit: ${{ github.sha }}\n > Workflow Path: ${{ github.workflow_ref }}\n\n **Please Review the Changes and Merge the PR if everything is fine.** \n" }, { "path": ".github/workflows/sync-repo-to-database.yml", "content": "name: Sync Repo to Database\n\non:\n workflow_dispatch:\n inputs:\n roadmap_slug:\n description: \"The slug of the roadmap to sync (e.g., frontend, backend)\"\n required: true\n\njobs:\n sync-roadmap:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n\n - name: Setup pnpm@v9\n uses: pnpm/action-setup@v4\n with:\n version: 9\n run_install: false\n\n - name: Setup Node.js Version 20 (LTS)\n uses: actions/setup-node@v4\n with:\n node-version: 20\n cache: 'pnpm'\n\n - name: Get all roadmap files\n id: roadmap-files\n run: |\n ROADMAP_DIR=\"src/data/roadmaps/${{ inputs.roadmap_slug }}\"\n\n if [ ! -d \"$ROADMAP_DIR\" ]; then\n echo \"Error: Roadmap directory '$ROADMAP_DIR' does not exist\"\n exit 1\n fi\n\n echo \"Getting all files in $ROADMAP_DIR\"\n\n ALL_FILES=$(find \"$ROADMAP_DIR\" -type f | tr '\\n' ',')\n\n echo \"Files to sync:\"\n echo \"$ALL_FILES\"\n\n echo \"files=$ALL_FILES\" >> $GITHUB_OUTPUT\n\n - name: Install Dependencies\n run: |\n echo \"Installing Dependencies\"\n pnpm install\n\n - name: Run sync script\n run: |\n echo \"Running sync script for roadmap: ${{ inputs.roadmap_slug }}\"\n echo \"Files: ${{ steps.roadmap-files.outputs.files }}\"\n\n npm run sync:repo-to-database -- --files=\"${{ steps.roadmap-files.outputs.files }}\" --secret=${{ secrets.GH_SYNC_SECRET }}\n" }, { "path": ".github/workflows/upgrade-dependencies.yml", "content": "name: Upgrade Dependencies\n\non:\n workflow_dispatch:\n schedule:\n - cron: '0 0 * * 0'\n\njobs:\n upgrade-deps:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n\n - name: Setup Node.js Version 20 (LTS)\n uses: actions/setup-node@v4\n with:\n node-version: 20\n\n - name: Setup pnpm@v9\n uses: pnpm/action-setup@v4\n with:\n version: 9\n\n - name: Install & Upgrade Dependencies\n run: |\n pnpm install\n npm run upgrade\n pnpm install --lockfile-only\n\n - name: Create Pull Request\n uses: peter-evans/create-pull-request@v7\n with:\n delete-branch: false\n branch: \"update-deps\"\n base: \"master\"\n labels: |\n dependencies\n automated pr\n reviewers: kamranahmedse\n commit-message: \"chore: update dependencies to latest\"\n title: \"Upgrade Dependencies To Latest - Automated\"\n body: |\n ## Updated all Dependencies to Latest Versions.\n\n > [!IMPORTANT]\n > This PR Upgrades the Dependencies to the their latest versions.\n >\n > Commit: ${{ github.sha }}\n > Workflow Path: ${{ github.workflow_ref }}\n\n **Please Review the Changes and Merge the PR if everything is fine.**" }, { "path": ".gitignore", "content": ".idea\n.temp\n.astro\n\n# build output\ndist/\n.output/\n\n# dependencies\nnode_modules/\n\nscripts/developer-roadmap\n\n# logs\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\n\n\n# environment variables\n.env\n.env.production\n\n# macOS-specific files\n.DS_Store\n/test-results/\n/playwright-report/\n/playwright/.cache/\ntests-examples\n*.csveditor/\n\npackages/editor" }, { "path": ".npmrc", "content": "auto-install-peers=true\nstrict-peer-dependencies=false" }, { "path": ".prettierignore", "content": "app-dist\ndist\n.idea\n.github\npublic\nnode_modules\npnpm-lock.yaml\n" }, { "path": ".prettierrc.cjs", "content": "module.exports = {\n semi: true,\n singleQuote: true,\n overrides: [\n {\n files: '*.astro',\n options: {\n parser: 'astro',\n singleQuote: true,\n jsxSingleQuote: true,\n },\n },\n ],\n plugins: [\n require.resolve('prettier-plugin-astro'),\n 'prettier-plugin-tailwindcss',\n ],\n};\n" }, { "path": ".vscode/extensions.json", "content": "{\n \"recommendations\": [\"astro-build.astro-vscode\"],\n \"unwantedRecommendations\": []\n}\n" }, { "path": ".vscode/launch.json", "content": "{\n \"version\": \"0.2.0\",\n \"configurations\": [\n {\n \"command\": \"./node_modules/.bin/astro dev\",\n \"name\": \"Development server\",\n \"request\": \"launch\",\n \"type\": \"node-terminal\"\n }\n ]\n}\n" }, { "path": ".vscode/settings.json", "content": "{\n \"prettier.documentSelectors\": [\"**/*.astro\"],\n \"[astro]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"tailwindCSS.experimental.classRegex\": [\n [\"\\\\b\\\\w+[cC]lassName\\\\s*=\\\\s*[\\\"']([^\\\"']*)[\\\"']\"],\n [\"\\\\b\\\\w+[cC]lassName\\\\s*=\\\\s*`([^`]*)`\"],\n [\"[\\\\w]+[cC]lassName[\\\"']?\\\\s*:\\\\s*[\\\"']([^\\\"']*)[\\\"']\"],\n [\"[\\\\w]+[cC]lassName[\\\"']?\\\\s*:\\\\s*`([^`]*)`\"],\n [\"cva\\\\(((?:[^()]|\\\\([^()]*\\\\))*)\\\\)\", \"[\\\"'`]([^\\\"'`]*).*?[\\\"'`]\"],\n [\"cx\\\\(((?:[^()]|\\\\([^()]*\\\\))*)\\\\)\", \"(?:'|\\\"|`)([^']*)(?:'|\\\"|`)\"]\n ]\n}\n" }, { "path": "astro.config.mjs", "content": "// https://astro.build/config\nimport sitemap from '@astrojs/sitemap';\nimport node from '@astrojs/node';\nimport { defineConfig } from 'astro/config';\nimport rehypeExternalLinks from 'rehype-external-links';\nimport { serializeSitemap, shouldIndexPage } from './sitemap.mjs';\nimport tailwindcss from '@tailwindcss/vite';\n\nimport react from '@astrojs/react';\n\n// https://astro.build/config\nexport default defineConfig({\n site: 'https://roadmap.sh/',\n redirects: {\n '/devops/devops-engineer': {\n status: 301,\n destination: '/devops',\n },\n '/ai-tutor': {\n status: 301,\n destination: '/ai',\n },\n '/best-practices': {\n status: 301,\n destination: '/roadmaps',\n },\n '/best-practices/aws': {\n status: 301,\n destination: '/aws-best-practices',\n },\n '/best-practices/backend-performance': {\n status: 301,\n destination: '/backend-performance-best-practices',\n },\n '/best-practices/frontend-performance': {\n status: 301,\n destination: '/frontend-performance-best-practices',\n },\n '/best-practices/api-security': {\n status: 301,\n destination: '/api-security-best-practices',\n },\n '/best-practices/code-review': {\n status: 301,\n destination: '/code-review-best-practices',\n },\n },\n markdown: {\n shikiConfig: {\n theme: 'dracula',\n },\n rehypePlugins: [\n [\n rehypeExternalLinks,\n {\n target: '_blank',\n rel: function (element) {\n const href = element.properties.href;\n const whiteListedStarts = [\n '/',\n '#',\n 'mailto:',\n 'https://github.com/kamranahmedse',\n 'https://thenewstack.io',\n 'https://kamranahmed.info',\n 'https://roadmap.sh',\n ];\n if (whiteListedStarts.some((start) => href.startsWith(start))) {\n return [];\n }\n return 'noopener noreferrer nofollow';\n },\n },\n ],\n ],\n },\n output: 'server',\n adapter: node({\n mode: 'standalone',\n }),\n trailingSlash: 'never',\n integrations: [\n sitemap({\n filter: shouldIndexPage,\n serialize: serializeSitemap,\n }),\n react(),\n ],\n vite: {\n plugins: [tailwindcss()],\n ssr: {\n noExternal: [/^@roadmapsh\\/editor.*$/],\n },\n server: {\n allowedHosts: ['roadmap.sh', 'port3k.kamranahmed.info'],\n },\n },\n});\n" }, { "path": "code_of_conduct.md", "content": "# Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to make participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and expression,\nlevel of experience, education, socio-economic status, nationality, personal\nappearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n- Using welcoming and inclusive language\n- Being respectful of differing viewpoints and experiences\n- Gracefully accepting constructive criticism\n- Focusing on what is best for the community\n- Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n- Trolling, insulting/derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies within all project spaces, and it also applies when\nan individual is representing the project or its community in public spaces.\nExamples of representing a project or community include using an official\nproject e-mail address, posting via an official social media account, or acting\nas an appointed representative at an online or offline event. Representation of\na project may be further defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at . All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see\nhttps://www.contributor-covenant.org/faq\n" }, { "path": "contributing.md", "content": "# ✨ Contribution Guidelines ✨\n\nFirst of all, thank you for considering to contribute. Please look at the details below:\n\n- [New Roadmaps](#new-roadmaps)\n- [Existing Roadmaps](#existing-roadmaps)\n- [Adding Projects](#adding-projects)\n- [Adding Content](#adding-content)\n - [How To Structure Content](#how-to-structure-content)\n- [Guidelines](#guidelines)\n- [Good vs. Not So Good Contributions](#good-vs-not-so-good-contributions)\n- [Local Development](#local-development)\n\n## New Roadmaps\n\nFor new roadmaps, you can either:\n\n- Submit a roadmap by providing [a textual roadmap similar to this roadmap](https://gist.github.com/kamranahmedse/98758d2c73799b3a6ce17385e4c548a5) in an [issue](https://github.com/kamranahmedse/developer-roadmap/issues).\n- Create an interactive roadmap yourself using [our roadmap editor](https://draw.roadmap.sh/) & submit the link to that roadmap in an [issue](https://github.com/kamranahmedse/developer-roadmap/issues).\n\n## Existing Roadmaps\n\nFor the existing roadmaps, please follow the details listed for the nature of contribution:\n\n- **Fixing Typos** — Make your changes in the [roadmap markdown file](https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/roadmaps) and submit a [PR](https://github.com/kamranahmedse/developer-roadmap/pulls).\n- **Adding/Removing Nodes and Modifying Node Titles** — Please open an [issue](https://github.com/kamranahmedse/developer-roadmap/issues) with your suggestion.\n\n**Note:** Please note that our goal is **not to have the biggest list of items**. Our goal is to list items or skills most relevant today.\n\n## Adding Projects\n\nIf you have a project idea that you think we should add to the roadmap, feel free to open an issue with as many details about the project as possible and the roadmap you think it should be added to.\n\nThe detailed format for the issue should be as follows:\n\n```md\n## What is this project about?\n\n(Add an introduction to the project.)\n\n## Skills this Project Covers\n\n(Comma separated list of skills, e.g. Programming Knowledge, Database, etc.)\n\n## Requirements\n\n( Detailed list of requirements, i.e. input, output, hints to help build this, etc.)\n```\n\nHave a look at this project to get an idea of [what we are looking for](https://roadmap.sh/projects/github-user-activity).\n\n## Adding Content\n\nFind [the content directory inside the relevant roadmap](https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/roadmaps). Please keep the following guidelines in mind when submitting content:\n\n- Content must be in English.\n- Maximum of 8 links per topic.\n- **No GeeksforGeeks links** — Links to geeksforgeeks.org are not accepted.\n- Follow the below style guide for content.\n\nPlease note that we are intentionally keeping the content under the topic popup concise. You MUST always aim to explain the topic simply in a **single paragraph** or so and provide external resources where users can learn more about the topic.\n\n### How To Structure Content\n\nPlease adhere to the following style when adding content to a topic:\n\n```md\n# Topic Title\n\n(Content)\n\nVisit the following resources to learn more:\n\n- [@type@Title/Description of Link](Link)\n```\n\n`@type@` must be one of the following and describe the type of content you are adding:\n\n- `@official@`\n- `@opensource@`\n- `@article@`\n- `@course@`\n- `@podcast@`\n- `@video@`\n- `@book@`\n\nIt's important to add a valid type, this will help us categorize the content and display it properly on the roadmap. The order of the links based on type is same as above.\n\n## Guidelines\n\n-

Please don't use the project for self-promotion!
\n\n We believe this project is a valuable asset to the developer community, and it includes numerous helpful resources. We kindly ask you to avoid submitting pull requests for the sole purpose of self-promotion. We appreciate contributions that genuinely add value, such as guides from maintainers of well-known frameworks, and will consider accepting these even if they're self authored. Thank you for your understanding and cooperation!\n\n-

Adding everything available out there is not the goal!
\n\n The roadmaps represent the skillset most valuable today, i.e., if you were to enter any of the listed fields today, what would you learn? There might be things that are of-course being used today, but prioritize the things that are most in demand today, e.g., agree that lots of people are using angular.js today, but you wouldn't want to learn that instead of React, Angular, or Vue. Use your critical thinking to filter out non-essential stuff. Give honest arguments for why the resource should be included.

\n\n-

Do not add things you have not evaluated personally!
\n\n Use your critical thinking to filter out non-essential stuff. Give honest arguments for why the resource should be included. Have you read this book? Can you give a short article?

\n\n-

Create a Single PR for Content Additions

\n\n If you are planning to contribute by adding content to the roadmaps, I recommend you to clone the repository, add content to the [content directory of the roadmap](./src/data/roadmaps/) and create a single PR to make it easier for me to review and merge the PR.\n\n-

Write meaningful commit messages
\n\n Meaningful commit messages help speed up the review process as well as help other contributors gain a good overview of the repositories commit history without having to dive into every commit.\n\n

\n-

Look at the existing issues/pull requests before opening new ones

\n\n## Good vs. Not So Good Contributions\n\nGood\n\n- New Roadmaps.\n- Engaging and fresh content links.\n- Typos and grammatical fixes.\n- Enhanced Existing Content.\n- Content copy in topics that do not have any (or minimal copy exists).\n\nNot So Good\n\n- Adding whitespace that doesn't add to the readability of the content.\n- Rewriting content in a way that doesn't add any value.\n- Non-English content.\n- PR's that don't follow our style guide, have no description, and a default title.\n- Links to your own blog articles.\n\n## Local Development\n\nFor local development, you can use the following commands:\n\n```bash\ngit clone git@github.com:kamranahmedse/developer-roadmap.git --depth 1\ncd developer-roadmap\npnpm add @roadmapsh/editor@npm:@roadmapsh/dummy-editor -w\npnpm install\n```\nRun the development server with:\n\n```bash\npnpm dev\n```\n\n***\n\nHave a look at the [License](./license) file.\n" }, { "path": "license", "content": "Everything including text and images in this project are protected by the copyright laws.\nYou are allowed to use this material for personal use but are not allowed to use it for\nany other purpose including publishing the images, the project files or the content in\nthe images in any form either digital, non-digital, textual, graphical or written formats.\nYou are allowed to share the links to the repository or the website roadmap.sh but not\nthe content for any sort of usage that involves the content of this repository taken out\nof the repository and be shared from any other medium including but not limited to blog\nposts, articles, newsletters, you must get prior consent from the understated. These\nconditions do not apply to the readonly GitHub forks created using the Fork button on\nGitHub with the whole purpose of contributing to the project.\n\nCopyright © 2017 - Present. Kamran Ahmed \n" }, { "path": "package.json", "content": "{\n \"name\": \"roadmap.sh\",\n \"type\": \"module\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"astro dev --port 3000\",\n \"start\": \"astro dev\",\n \"build\": \"astro build\",\n \"preview\": \"astro preview\",\n \"format\": \"prettier --write .\",\n \"gh-labels\": \"./scripts/create-roadmap-labels.sh\",\n \"astro\": \"astro\",\n \"deploy\": \"NODE_DEBUG=gh-pages gh-pages -d dist -t\",\n \"upgrade\": \"ncu -u\",\n \"roadmap-links\": \"node scripts/roadmap-links.cjs\",\n \"roadmap-dirs\": \"node scripts/roadmap-dirs.cjs\",\n \"roadmap-assets\": \"tsx scripts/editor-roadmap-assets.ts\",\n \"refresh-assets\": \"tsx scripts/refresh-assets.ts\",\n \"editor-roadmap-dirs\": \"tsx scripts/editor-roadmap-dirs.ts\",\n \"editor-roadmap-content\": \"tsx scripts/editor-roadmap-content.ts\",\n \"roadmap-content\": \"node scripts/roadmap-content.cjs\",\n \"generate-renderer\": \"sh scripts/generate-renderer.sh\",\n \"generate-renderer-dummy\": \"sh scripts/generate-renderer-dummy.sh\",\n \"best-practice-dirs\": \"node scripts/best-practice-dirs.cjs\",\n \"best-practice-content\": \"node scripts/best-practice-content.cjs\",\n \"generate:og\": \"node ./scripts/generate-og-images.mjs\",\n \"warm:urls\": \"sh ./scripts/warm-urls.sh https://roadmap.sh/sitemap-0.xml\",\n \"compress:images\": \"tsx ./scripts/compress-images.ts\",\n \"generate:roadmap-content-json\": \"tsx ./scripts/editor-roadmap-content-json.ts\",\n \"migrate:editor-roadmaps\": \"tsx ./scripts/migrate-editor-roadmap.ts\",\n \"sync:content-to-repo\": \"tsx ./scripts/sync-content-to-repo.ts\",\n \"sync:repo-to-database\": \"tsx ./scripts/sync-repo-to-database.ts\",\n \"sync:roadmap\": \"tsx ./scripts/sync-roadmap-to-database.ts\",\n \"migrate:content-repo-to-database\": \"tsx ./scripts/migrate-content-repo-to-database.ts\",\n \"cleanup:orphaned-content\": \"tsx ./scripts/cleanup-orphaned-content.ts\",\n \"official:roadmap-assets\": \"tsx ./scripts/official-roadmap-assets.ts\",\n \"test:e2e\": \"playwright test\"\n },\n \"dependencies\": {\n \"@ai-sdk/react\": \"2.0.0-beta.34\",\n \"@astrojs/node\": \"^9.2.1\",\n \"@astrojs/react\": \"^4.2.7\",\n \"@astrojs/sitemap\": \"^3.4.0\",\n \"@fingerprintjs/fingerprintjs\": \"^4.6.2\",\n \"@microsoft/clarity\": \"^1.0.0\",\n \"@nanostores/react\": \"^1.0.0\",\n \"@napi-rs/image\": \"^1.9.2\",\n \"@radix-ui/react-dropdown-menu\": \"^2.1.15\",\n \"@radix-ui/react-popover\": \"^1.1.14\",\n \"@resvg/resvg-js\": \"^2.6.2\",\n \"@roadmapsh/editor\": \"workspace:*\",\n \"@shikijs/transformers\": \"^3.9.2\",\n \"@tailwindcss/vite\": \"^4.1.7\",\n \"@tanstack/react-query\": \"^5.76.1\",\n \"@tiptap/core\": \"^2.12.0\",\n \"@tiptap/extension-document\": \"^2.12.0\",\n \"@tiptap/extension-paragraph\": \"^2.12.0\",\n \"@tiptap/extension-placeholder\": \"^2.12.0\",\n \"@tiptap/extension-text\": \"^2.12.0\",\n \"@tiptap/pm\": \"^2.12.0\",\n \"@tiptap/react\": \"^2.12.0\",\n \"@tiptap/suggestion\": \"^2.12.0\",\n \"@types/react\": \"^19.1.4\",\n \"@types/react-dom\": \"^19.1.5\",\n \"astro\": \"^5.7.13\",\n \"clsx\": \"^2.1.1\",\n \"dayjs\": \"^1.11.13\",\n \"dom-to-image\": \"^2.6.0\",\n \"dracula-prism\": \"^2.1.16\",\n \"gray-matter\": \"^4.0.3\",\n \"htm\": \"^3.1.1\",\n \"image-size\": \"^2.0.2\",\n \"jose\": \"^6.0.11\",\n \"js-cookie\": \"^3.0.5\",\n \"katex\": \"^0.16.22\",\n \"lucide-react\": \"^0.511.0\",\n \"luxon\": \"^3.6.1\",\n \"markdown-it-async\": \"^2.2.0\",\n \"nanoid\": \"^5.1.5\",\n \"nanostores\": \"^1.0.1\",\n \"node-html-parser\": \"^7.0.1\",\n \"npm-check-updates\": \"^18.0.1\",\n \"playwright\": \"^1.52.0\",\n \"prismjs\": \"^1.30.0\",\n \"radix-ui\": \"^1.4.2\",\n \"react\": \"^19.1.0\",\n \"react-calendar-heatmap\": \"^1.10.0\",\n \"react-confetti\": \"^6.4.0\",\n \"react-dom\": \"^19.1.0\",\n \"react-dropzone\": \"^14.3.8\",\n \"react-markdown\": \"^10.1.0\",\n \"react-resizable-panels\": \"^3.0.2\",\n \"react-textarea-autosize\": \"^8.5.9\",\n \"react-tooltip\": \"^5.28.1\",\n \"rehype-external-links\": \"^3.0.0\",\n \"rehype-katex\": \"^7.0.1\",\n \"remark-gfm\": \"^4.0.1\",\n \"remark-math\": \"^6.0.0\",\n \"remark-parse\": \"^11.0.0\",\n \"roadmap-renderer\": \"^1.0.7\",\n \"sanitize-html\": \"^2.17.0\",\n \"satori\": \"^0.13.1\",\n \"satori-html\": \"^0.3.2\",\n \"sharp\": \"^0.34.1\",\n \"shiki\": \"^3.4.2\",\n \"slugify\": \"^1.6.6\",\n \"tailwind-merge\": \"^3.3.0\",\n \"tailwindcss\": \"^4.1.7\",\n \"tippy.js\": \"^6.3.7\",\n \"tiptap-markdown\": \"^0.8.10\",\n \"turndown\": \"^7.2.0\",\n \"unified\": \"^11.0.5\",\n \"zod\": \"^4.0.17\",\n \"zustand\": \"^5.0.4\"\n },\n \"devDependencies\": {\n \"@ai-sdk/google\": \"^1.2.18\",\n \"@playwright/test\": \"^1.52.0\",\n \"@tailwindcss/typography\": \"^0.5.16\",\n \"@types/dom-to-image\": \"^2.6.7\",\n \"@types/js-cookie\": \"^3.0.6\",\n \"@types/luxon\": \"^3.6.2\",\n \"@types/markdown-it\": \"^14.1.2\",\n \"@types/prismjs\": \"^1.26.5\",\n \"@types/react-calendar-heatmap\": \"^1.9.0\",\n \"@types/react-slick\": \"^0.23.13\",\n \"@types/sanitize-html\": \"^2.16.0\",\n \"@types/turndown\": \"^5.0.5\",\n \"ai\": \"5.0.0-beta.34\",\n \"csv-parser\": \"^3.2.0\",\n \"gh-pages\": \"^6.3.0\",\n \"js-yaml\": \"^4.1.0\",\n \"markdown-it\": \"^14.1.0\",\n \"openai\": \"^4.100.0\",\n \"prettier\": \"^3.5.3\",\n \"prettier-plugin-astro\": \"^0.14.1\",\n \"prettier-plugin-tailwindcss\": \"^0.6.11\",\n \"tailwind-scrollbar\": \"^4.0.2\",\n \"tsx\": \"^4.19.4\"\n }\n}\n" }, { "path": "packages/.gitkeep", "content": "" }, { "path": "playwright.config.ts", "content": "import type { PlaywrightTestConfig } from '@playwright/test';\nimport { devices } from '@playwright/test';\n\n/**\n * Read environment variables from file.\n * https://github.com/motdotla/dotenv\n */\n// require('dotenv').config();\n\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nconst config: PlaywrightTestConfig = {\n testDir: './tests',\n /* Maximum time one test can run for. */\n timeout: 30 * 1000,\n expect: {\n /**\n * Maximum time expect() should wait for the condition to be met.\n * For example in `await expect(locator).toHaveText();`\n */\n timeout: 5000,\n },\n /* Run tests in files in parallel */\n fullyParallel: true,\n /* Fail the build on CI if you accidentally left test.only in the source code. */\n forbidOnly: !!process.env.CI,\n /* Retry on CI only */\n retries: process.env.CI ? 2 : 0,\n /* Opt out of parallel tests on CI. */\n workers: process.env.CI ? 1 : undefined,\n /* Reporter to use. See https://playwright.dev/docs/test-reporters */\n reporter: 'html',\n /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */\n use: {\n /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */\n actionTimeout: 0,\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL: 'http://localhost:3000',\n\n /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */\n trace: 'on-first-retry',\n },\n\n /* Configure projects for major browsers */\n projects: [\n {\n name: 'chromium',\n use: {\n ...devices['Desktop Chrome'],\n },\n },\n\n // {\n // name: 'firefox',\n // use: {\n // ...devices['Desktop Firefox'],\n // },\n // },\n\n // {\n // name: 'webkit',\n // use: {\n // ...devices['Desktop Safari'],\n // },\n // },\n\n /* Test against mobile viewports. */\n // {\n // name: 'Mobile Chrome',\n // use: {\n // ...devices['Pixel 5'],\n // },\n // },\n // {\n // name: 'Mobile Safari',\n // use: {\n // ...devices['iPhone 12'],\n // },\n // },\n\n /* Test against branded browsers. */\n // {\n // name: 'Microsoft Edge',\n // use: {\n // channel: 'msedge',\n // },\n // },\n // {\n // name: 'Google Chrome',\n // use: {\n // channel: 'chrome',\n // },\n // },\n ],\n\n /* Folder for test artifacts such as screenshots, videos, traces, etc. */\n // outputDir: 'test-results/',\n\n /* Run your local dev server before starting the tests */\n webServer: {\n command: 'npm run dev',\n url: 'http://localhost:3000',\n reuseExistingServer: !process.env.CI,\n },\n};\n\nexport default config;\n" }, { "path": "pnpm-workspace.yaml", "content": "packages:\n - packages/*\n" }, { "path": "public/manifest/manifest.json", "content": "{\n \"dir\": \"ltr\",\n \"lang\": \"en\",\n \"name\": \"Roadmap\",\n \"scope\": \"/\",\n \"display\": \"standalone\",\n \"start_url\": \"https://roadmap.sh/\",\n \"short_name\": \"Roadmap\",\n \"theme_color\": \"#EDD07E\",\n \"description\": \"Roadmaps to becoming a Modern Developer – roadmap.sh\",\n \"orientation\": \"any\",\n \"background_color\": \"#101010\",\n \"related_applications\": [],\n \"prefer_related_applications\": false,\n \"icons\": [\n {\n \"src\": \"/manifest/icon152.png\",\n \"sizes\": \"152x152\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/manifest/icon196.png\",\n \"sizes\": \"196x196\",\n \"type\": \"image/png\"\n }\n ]\n}\n" }, { "path": "readme.md", "content": "

\n \n

roadmap.sh

\n

Community driven roadmaps, articles and resources for developers

\n

\n \n \t\"roadmaps\"\n \n \n \t\"best\n \n \n \t\"videos\"\n \n \n \t\"roadmaps\"\n \n

\n

\n\n
\n\n![](https://i.imgur.com/waxVImv.png)\n\nRoadmaps are now interactive, you can click the nodes to read more about the topics.\n\n### [View all Roadmaps](https://roadmap.sh)  ·  [Best Practices](https://roadmap.sh/best-practices)  ·  [Questions](https://roadmap.sh/questions)\n\n![](https://i.imgur.com/waxVImv.png)\n\nHere is the list of available roadmaps with more being actively worked upon.\n\n> Have a look at the [get started](https://roadmap.sh/get-started) page that might help you pick up a path.\n\n- [Frontend Roadmap](https://roadmap.sh/frontend) / [Frontend Beginner Roadmap](https://roadmap.sh/frontend?r=frontend-beginner)\n- [Backend Roadmap](https://roadmap.sh/backend) / [Backend Beginner Roadmap](https://roadmap.sh/backend?r=backend-beginner)\n- [DevOps Roadmap](https://roadmap.sh/devops) / [DevOps Beginner Roadmap](https://roadmap.sh/devops?r=devops-beginner)\n- [DevSecOps Roadmap](https://roadmap.sh/devsecops)\n- [Full Stack Roadmap](https://roadmap.sh/full-stack)\n- [HTML Roadmap](https://roadmap.sh/html)\n- [CSS Roadmap](https://roadmap.sh/css)\n- [JavaScript Roadmap](https://roadmap.sh/javascript)\n- [TypeScript Roadmap](https://roadmap.sh/typescript)\n- [Git and GitHub](https://roadmap.sh/git-github) / [Git and GitHub Beginner](https://roadmap.sh/git-github?r=git-github-beginner)\n- [API Design Roadmap](https://roadmap.sh/api-design)\n- [Computer Science Roadmap](https://roadmap.sh/computer-science)\n- [Data Structures and Algorithms Roadmap](https://roadmap.sh/datastructures-and-algorithms)\n- [AI and Data Scientist Roadmap](https://roadmap.sh/ai-data-scientist)\n- [AI Engineer Roadmap](https://roadmap.sh/ai-engineer)\n- [AWS Roadmap](https://roadmap.sh/aws)\n- [Cloudflare Roadmap](https://roadmap.sh/cloudflare)\n- [Linux Roadmap](https://roadmap.sh/linux)\n- [Terraform Roadmap](https://roadmap.sh/terraform)\n- [Data Analyst Roadmap](https://roadmap.sh/data-analyst)\n- [BI Analyst Roadmap](https://roadmap.sh/bi-analyst)\n- [Data Engineer Roadmap](https://roadmap.sh/data-engineer)\n- [Machine Learning Roadmap](https://roadmap.sh/machine-learning)\n- [MLOps Roadmap](https://roadmap.sh/mlops)\n- [Product Manager Roadmap](https://roadmap.sh/product-manager)\n- [Engineering Manager Roadmap](https://roadmap.sh/engineering-manager)\n- [QA Roadmap](https://roadmap.sh/qa)\n- [Python Roadmap](https://roadmap.sh/python) \n- [Django Roadmap](https://roadmap.sh/django)\n- [Software Architect Roadmap](https://roadmap.sh/software-architect)\n- [Game Developer Roadmap](https://roadmap.sh/game-developer) / [Server Side Game Developer](https://roadmap.sh/server-side-game-developer)\n- [Software Design and Architecture Roadmap](https://roadmap.sh/software-design-architecture)\n- [C++ Roadmap](https://roadmap.sh/cpp)\n- [React Roadmap](https://roadmap.sh/react)\n- [Next.js Roadmap](https://roadmap.sh/nextjs)\n- [React Native Roadmap](https://roadmap.sh/react-native)\n- [Vue Roadmap](https://roadmap.sh/vue)\n- [Angular Roadmap](https://roadmap.sh/angular)\n- [Node.js Roadmap](https://roadmap.sh/nodejs)\n- [PHP Roadmap](https://roadmap.sh/php)\n- [WordPress Roadmap](https://roadmap.sh/wordpress)\n- [Laravel Roadmap](https://roadmap.sh/laravel)\n- [GraphQL Roadmap](https://roadmap.sh/graphql)\n- [Android Roadmap](https://roadmap.sh/android)\n- [iOS Roadmap](https://roadmap.sh/ios)\n- [Swift/Swift UI Roadmap](https://roadmap.sh/swift-ui)\n- [Flutter Roadmap](https://roadmap.sh/flutter)\n- [Go Roadmap](https://roadmap.sh/golang)\n- [Rust Roadmap](https://roadmap.sh/rust)\n- [Java Roadmap](https://roadmap.sh/java)\n- [Kotlin Roadmap](https://roadmap.sh/kotlin)\n- [Spring Boot Roadmap](https://roadmap.sh/spring-boot)\n- [Design System Roadmap](https://roadmap.sh/design-system)\n- [PostgreSQL Roadmap](https://roadmap.sh/postgresql-dba)\n- [ElasticSearch Roadmap](https://roadmap.sh/elasticsearch)\n- [SQL Roadmap](https://roadmap.sh/sql)\n- [Redis Roadmap](https://roadmap.sh/redis)\n- [Blockchain Roadmap](https://roadmap.sh/blockchain)\n- [ASP.NET Core Roadmap](https://roadmap.sh/aspnet-core)\n- [System Design Roadmap](https://roadmap.sh/system-design)\n- [Kubernetes Roadmap](https://roadmap.sh/kubernetes)\n- [Cyber Security Roadmap](https://roadmap.sh/cyber-security)\n- [MongoDB Roadmap](https://roadmap.sh/mongodb)\n- [UX Design Roadmap](https://roadmap.sh/ux-design)\n- [Docker Roadmap](https://roadmap.sh/docker)\n- [Prompt Engineering Roadmap](https://roadmap.sh/prompt-engineering)\n- [Technical Writer Roadmap](https://roadmap.sh/technical-writer)\n- [DevRel Engineer Roadmap](https://roadmap.sh/devrel)\n- [AI Red Teaming Roadmap](https://roadmap.sh/ai-red-teaming)\n- [AI Agents Roadmap](https://roadmap.sh/ai-agents)\n- [Bash/Shell Roadmap](https://roadmap.sh/shell-bash)\n\nThere are also interactive best practices:\n\n- [Backend Performance Best Practices](https://roadmap.sh/best-practices/backend-performance)\n- [Frontend Performance Best Practices](https://roadmap.sh/best-practices/frontend-performance)\n- [Code Review Best Practices](https://roadmap.sh/best-practices/code-review)\n- [API Security Best Practices](https://roadmap.sh/best-practices/api-security)\n- [AWS Best Practices](https://roadmap.sh/best-practices/aws)\n\n..and questions to help you test, rate and improve your knowledge\n\n- [JavaScript Questions](https://roadmap.sh/questions/javascript)\n- [Node.js Questions](https://roadmap.sh/questions/nodejs)\n- [React Questions](https://roadmap.sh/questions/react)\n- [Backend Questions](https://roadmap.sh/questions/backend)\n- [Frontend Questions](https://roadmap.sh/questions/frontend)\n\n![](https://i.imgur.com/waxVImv.png)\n\n## Share with the community\n\nPlease consider sharing a post about [roadmap.sh](https://roadmap.sh) and the value it provides. It really does help!\n\n[![GitHub Repo stars](https://img.shields.io/badge/share%20on-reddit-red?logo=reddit)](https://reddit.com/submit?url=https://roadmap.sh&title=Interactive%20roadmaps,%20guides%20and%20other%20educational%20content%20for%20Developers)\n[![GitHub Repo stars](https://img.shields.io/badge/share%20on-hacker%20news-orange?logo=ycombinator)](https://news.ycombinator.com/submitlink?u=https://roadmap.sh)\n[![GitHub Repo stars](https://img.shields.io/badge/share%20on-twitter-03A9F4?logo=twitter)](https://twitter.com/share?url=https://roadmap.sh&text=Interactive%20roadmaps,%20guides%20and%20other%20educational%20content%20for%20Developers)\n[![GitHub Repo stars](https://img.shields.io/badge/share%20on-facebook-1976D2?logo=facebook)](https://www.facebook.com/sharer/sharer.php?u=https://roadmap.sh)\n[![GitHub Repo stars](https://img.shields.io/badge/share%20on-linkedin-3949AB?logo=linkedin)](https://www.linkedin.com/shareArticle?url=https://roadmap.sh&title=Interactive%20roadmaps,%20guides%20and%20other%20educational%20content%20for%20Developers)\n\n## Development\n\nClone the repository, install the dependencies and start the application\n\n```bash\ngit clone git@github.com:kamranahmedse/developer-roadmap.git --depth 1\ncd developer-roadmap\npnpm add @roadmapsh/editor@npm:@roadmapsh/dummy-editor -w\npnpm install\n```\n\nRun the development server with:\n\n```bash\npnpm dev\n```\n> Make sure to rename `.env.example` to `.env` before running the app.\n\n## Contribution\n\n> Have a look at [contribution docs](./contributing.md) for how to update any of the roadmaps\n\n- Add content to roadmaps\n- Add new roadmaps\n- Suggest changes to existing roadmaps\n- Discuss ideas in issues\n- Spread the word\n\n## Thanks to all contributors ❤\n\n \n \n \n\n## License\n\nHave a look at the [license file](./license) for details\n" }, { "path": "scripts/assign-label-types.cjs", "content": "const fs = require('node:fs');\nconst path = require('node:path');\n\nconst allRoadmapDirs = fs.readdirSync(\n path.join(__dirname, '../src/data/roadmaps'),\n);\n\nallRoadmapDirs.forEach((roadmapId) => {\n const roadmapDir = path.join(\n __dirname,\n `../src/data/roadmaps/${roadmapId}/content`,\n );\n\n function getHostNameWithoutTld(hostname) {\n const parts = hostname.split('.');\n return parts.slice(0, parts.length - 1).join('.');\n }\n\n function isOfficialWebsite(hostname, fileName, roadmapId) {\n fileName = fileName.replace('/index.md', '').replace('.md', '');\n\n const parts = fileName.split('/');\n const lastPart = parts[parts.length - 1];\n\n const normalizedFilename = lastPart.replace(/\\d+/g, '').replace(/-/g, '');\n const normalizedHostname = getHostNameWithoutTld(hostname);\n\n if (normalizedFilename === normalizedHostname) {\n return true;\n }\n\n if (normalizedFilename.includes(normalizedHostname)) {\n return true;\n }\n\n return !!roadmapId.includes(normalizedHostname);\n }\n\n // websites are educational websites that are of following types:\n // - @official@\n // - @article@\n // - @course@\n // - @opensource@\n // - @podcast@\n // - @video@\n // - @website@\n // content is only educational websites\n function getTypeFromHostname(hostname, fileName, roadmapId) {\n hostname = hostname.replace('www.', '');\n\n const videoHostnames = ['youtube.com', 'vimeo.com', 'youtu.be'];\n const courseHostnames = ['coursera.org', 'udemy.com', 'edx.org'];\n const podcastHostnames = ['spotify.com', 'apple.com'];\n const opensourceHostnames = ['github.com', 'gitlab.com'];\n const articleHostnames = [\n 'neilpatel.com',\n 'learningseo.io',\n 'htmlreference.io',\n 'docs.gitlab.com',\n 'docs.github.com',\n 'skills.github.com',\n 'cloudflare.com',\n 'w3schools.com',\n 'medium.com',\n 'dev.to',\n 'web.dev',\n 'css-tricks.com',\n 'developer.mozilla.org',\n 'smashingmagazine.com',\n 'freecodecamp.org',\n 'cs.fyi',\n 'thenewstack.io',\n 'html5rocks.com',\n 'html.com',\n 'javascript.info',\n 'css-tricks.com',\n 'developer.apple.com',\n ];\n\n if (articleHostnames.includes(hostname)) {\n return 'article';\n }\n\n if (videoHostnames.includes(hostname)) {\n return 'video';\n }\n\n if (courseHostnames.includes(hostname)) {\n return 'course';\n }\n\n if (podcastHostnames.includes(hostname)) {\n return 'podcast';\n }\n\n if (opensourceHostnames.includes(hostname)) {\n return 'opensource';\n }\n\n if (hostname === 'roadmap.sh') {\n return 'roadmap.sh';\n }\n\n if (isOfficialWebsite(hostname, fileName, roadmapId)) {\n return 'official';\n }\n\n return 'article';\n }\n\n function readNestedMarkdownFiles(dir, files = []) {\n const dirEnts = fs.readdirSync(dir, { withFileTypes: true });\n\n for (const dirent of dirEnts) {\n const fullPath = path.join(dir, dirent.name);\n if (dirent.isDirectory()) {\n readNestedMarkdownFiles(fullPath, files);\n } else {\n if (path.extname(fullPath) === '.md') {\n files.push(fullPath);\n }\n }\n }\n\n return files;\n }\n\n const files = readNestedMarkdownFiles(roadmapDir);\n\n // for each of the files, assign the type of link to the beginning of each markdown link\n // i.e. - [@article@abc](xyz) where @article@ is the type of link. Possible types:\n // - @official@\n // - @opensource@\n // - @article@\n // - @course@\n // - @opensource@\n // - @podcast@\n // - @video@\n files.forEach((file) => {\n const content = fs.readFileSync(file, 'utf-8');\n const lines = content.split('\\n');\n\n const newContent = lines\n .map((line) => {\n if (line.startsWith('- [') && !line.startsWith('- [@')) {\n const type = line.match(/@(\\w+)@/);\n if (type) {\n return line;\n }\n\n let urlMatches = line.match(/\\((https?:\\/\\/[^)]+)\\)/);\n let fullUrl = urlMatches?.[1];\n\n if (!fullUrl) {\n // is it slashed URL i.e. - [abc](/xyz)\n fullUrl = line.match(/\\((\\/[^)]+)\\)/)?.[1];\n if (fullUrl) {\n fullUrl = `https://roadmap.sh${fullUrl}`;\n }\n\n if (!fullUrl) {\n console.error('Invalid URL found in:', file);\n return line;\n }\n }\n\n const url = new URL(fullUrl);\n const hostname = url.hostname;\n\n let urlType = getTypeFromHostname(hostname, file, roadmapId);\n const linkText = line.match(/\\[([^\\]]+)\\]/)[1];\n\n if (\n linkText.toLowerCase().startsWith('visit dedicated') &&\n linkText.toLowerCase().endsWith('roadmap')\n ) {\n urlType = 'roadmap';\n }\n\n return line.replace('- [', `- [@${urlType}@`).replace('](', '](');\n }\n\n return line;\n })\n .join('\\n');\n\n fs.writeFileSync(file, newContent);\n });\n});\n" }, { "path": "scripts/best-practice-content.cjs", "content": "const fs = require('fs');\nconst path = require('path');\n\nconst OPEN_AI_API_KEY = process.env.OPEN_AI_API_KEY;\nconst ALL_BEST_PRACTICES_DIR = path.join(\n __dirname,\n '../src/data/best-practices',\n);\n\nconst bestPracticeId = process.argv[2];\nconst bestPracticeTitle = bestPracticeId.replace(/-/g, ' ');\n\nconst allowedBestPracticeIds = fs.readdirSync(ALL_BEST_PRACTICES_DIR);\nif (!bestPracticeId) {\n console.error('bestPracticeId is required');\n process.exit(1);\n}\n\nif (!allowedBestPracticeIds.includes(bestPracticeId)) {\n console.error(`Invalid bestPractice key ${bestPracticeId}`);\n console.error(`Allowed keys are ${allowedBestPracticeIds.join(', ')}`);\n process.exit(1);\n}\n\nconst BEST_PRACTICE_CONTENT_DIR = path.join(\n ALL_BEST_PRACTICES_DIR,\n bestPracticeId,\n 'content',\n);\nconst OpenAI = require('openai');\n\nconst openai = new OpenAI({\n apiKey: OPEN_AI_API_KEY,\n});\n\nfunction getFilesInFolder(folderPath, fileList = {}) {\n const files = fs.readdirSync(folderPath);\n\n files.forEach((file) => {\n const filePath = path.join(folderPath, file);\n const stats = fs.statSync(filePath);\n\n if (stats.isDirectory()) {\n getFilesInFolder(filePath, fileList);\n } else if (stats.isFile()) {\n const fileUrl = filePath\n .replace(BEST_PRACTICE_CONTENT_DIR, '') // Remove the content folder\n .replace(/\\/\\d+-/g, '/') // Remove ordering info `/101-ecosystem`\n .replace(/\\/index\\.md$/, '') // Make the `/index.md` to become the parent folder only\n .replace(/\\.md$/, ''); // Remove `.md` from the end of file\n\n fileList[fileUrl] = filePath;\n }\n });\n\n return fileList;\n}\n\nfunction writeTopicContent(topicTitle) {\n let prompt = `I will give you a topic and you need to write a brief paragraph with examples (if possible) about why it is important for the \"${bestPracticeTitle}\". Just reply to the question without adding any other information about the prompt and use simple language. Also do not start your sentences with \"XYZ is important because..\". Your format should be as follows:\n\n# (Put a heading for the topic)\n\n(Write a brief paragraph about why it is important for the \"${bestPracticeTitle})\n \nFirst topic is: ${topicTitle}`;\n\n console.log(`Generating '${topicTitle}'...`);\n\n return new Promise((resolve, reject) => {\n openai.chat.completions\n .create({\n model: 'gpt-4',\n messages: [\n {\n role: 'user',\n content: prompt,\n },\n ],\n })\n .then((response) => {\n const article = response.choices[0].message.content;\n\n resolve(article);\n })\n .catch((err) => {\n reject(err);\n });\n });\n}\n\nasync function writeFileForGroup(group, topicUrlToPathMapping) {\n const topicId = group?.properties?.controlName;\n const topicTitle = group?.children?.controls?.control\n ?.filter((control) => control?.typeID === 'Label')\n .map((control) => control?.properties?.text)\n .join(' ')\n .toLowerCase();\n\n const currTopicUrl = `/${topicId}`;\n if (currTopicUrl.startsWith('/check:')) {\n return;\n }\n\n const contentFilePath = topicUrlToPathMapping[currTopicUrl];\n\n if (!contentFilePath) {\n console.log(`Missing file for: ${currTopicUrl}`);\n return;\n }\n\n const currentFileContent = fs.readFileSync(contentFilePath, 'utf8');\n const isFileEmpty = currentFileContent.replace(/^#.+/, ``).trim() === '';\n\n if (!isFileEmpty) {\n console.log(`Ignoring ${topicId}. Not empty.`);\n return;\n }\n\n let newFileContent = `# ${topicTitle}`;\n\n if (!OPEN_AI_API_KEY) {\n console.log(`Writing ${topicId}..`);\n\n fs.writeFileSync(contentFilePath, newFileContent, 'utf8');\n return;\n }\n\n if (!topicTitle) {\n console.log(`Skipping ${topicId}. No title.`);\n return;\n }\n\n const topicContent = await writeTopicContent(topicTitle);\n newFileContent = `${topicContent}`;\n\n console.log(`Writing ${topicId}..`);\n fs.writeFileSync(contentFilePath, newFileContent, 'utf8');\n\n // console.log(currentFileContent);\n // console.log(currTopicUrl);\n // console.log(topicTitle);\n // console.log(topicUrlToPathMapping[currTopicUrl]);\n}\n\nasync function run() {\n const topicUrlToPathMapping = getFilesInFolder(BEST_PRACTICE_CONTENT_DIR);\n\n const bestPracticeJson = require(\n path.join(ALL_BEST_PRACTICES_DIR, `${bestPracticeId}/${bestPracticeId}`),\n );\n\n const groups = bestPracticeJson?.mockup?.controls?.control?.filter(\n (control) =>\n control.typeID === '__group__' &&\n !control.properties?.controlName?.startsWith('ext_link'),\n );\n\n if (!OPEN_AI_API_KEY) {\n console.log('----------------------------------------');\n console.log('OPEN_AI_API_KEY not found. Skipping openai api calls...');\n console.log('----------------------------------------');\n }\n\n const writePromises = [];\n for (let group of groups) {\n writePromises.push(writeFileForGroup(group, topicUrlToPathMapping));\n }\n\n console.log('Waiting for all files to be written...');\n await Promise.all(writePromises);\n}\n\nrun()\n .then(() => {\n console.log('Done');\n })\n .catch((err) => {\n console.error(err);\n process.exit(1);\n });\n" }, { "path": "scripts/best-practice-dirs.cjs", "content": "const fs = require('fs');\nconst path = require('path');\n\nconst CONTENT_DIR = path.join(__dirname, '../content');\n// Directory containing the best-practices\nconst BEST_PRACTICE_CONTENT_DIR = path.join(\n __dirname,\n '../src/data/best-practices',\n);\nconst bestPracticeId = process.argv[2];\n\nconst allowedBestPracticeId = fs.readdirSync(BEST_PRACTICE_CONTENT_DIR);\nif (!bestPracticeId) {\n console.error('bestPractice is required');\n process.exit(1);\n}\n\nif (!allowedBestPracticeId.includes(bestPracticeId)) {\n console.error(`Invalid best practice key ${bestPracticeId}`);\n console.error(`Allowed keys are ${allowedBestPracticeId.join(', ')}`);\n process.exit(1);\n}\n\n// Directory holding the best parctice content files\nconst bestPracticeDirName = fs\n .readdirSync(BEST_PRACTICE_CONTENT_DIR)\n .find((dirName) => dirName.replace(/\\d+-/, '') === bestPracticeId);\n\nif (!bestPracticeDirName) {\n console.error('Best practice directory not found');\n process.exit(1);\n}\n\nconst bestPracticeDirPath = path.join(\n BEST_PRACTICE_CONTENT_DIR,\n bestPracticeDirName,\n);\nconst bestPracticeContentDirPath = path.join(\n BEST_PRACTICE_CONTENT_DIR,\n bestPracticeDirName,\n 'content',\n);\n\n// If best practice content already exists do not proceed as it would override the files\nif (fs.existsSync(bestPracticeContentDirPath)) {\n console.error(\n `Best Practice content already exists @ ${bestPracticeContentDirPath}`,\n );\n process.exit(1);\n}\n\nfunction prepareDirTree(control, dirTree) {\n // Directories are only created for groups\n if (control.typeID !== '__group__') {\n return;\n }\n\n // e.g. 104-testing-your-apps:other-options\n const controlName = control?.properties?.controlName || '';\n\n // No directory for a group without control name\n if (\n !controlName ||\n controlName.startsWith('check:') ||\n controlName.startsWith('ext_link:')\n ) {\n return;\n }\n\n // e.g. ['testing-your-apps', 'other-options']\n const dirParts = controlName.split(':');\n\n // Nest the dir path in the dirTree\n let currDirTree = dirTree;\n dirParts.forEach((dirPart) => {\n currDirTree[dirPart] = currDirTree[dirPart] || {};\n currDirTree = currDirTree[dirPart];\n });\n\n const childrenControls = control.children.controls.control;\n // No more children\n if (childrenControls.length) {\n childrenControls.forEach((childControl) => {\n prepareDirTree(childControl, dirTree);\n });\n }\n\n return { dirTree };\n}\n\nconst bestPractice = require(\n path.join(\n __dirname,\n `../src/data/best-practices/${bestPracticeId}/${bestPracticeId}`,\n ),\n);\nconst controls = bestPractice.mockup.controls.control;\n\n// Prepare the dir tree that we will be creating\nconst dirTree = {};\n\ncontrols.forEach((control) => {\n prepareDirTree(control, dirTree);\n});\n\n/**\n * @param parentDir Parent directory in which directory is to be created\n * @param dirTree Nested dir tree to be created\n * @param filePaths The mapping from groupName to file path\n */\nfunction createDirTree(parentDir, dirTree, filePaths = {}) {\n const childrenDirNames = Object.keys(dirTree);\n const hasChildren = childrenDirNames.length !== 0;\n\n // @todo write test for this, yolo for now\n const groupName = parentDir\n .replace(bestPracticeContentDirPath, '') // Remove base dir path\n .replace(/(^\\/)|(\\/$)/g, '') // Remove trailing slashes\n .replaceAll('/', ':') // Replace slashes with `:`\n .replace(/:\\d+-/, ':');\n\n const humanizedGroupName = groupName\n .split(':')\n .pop()\n ?.replaceAll('-', ' ')\n .replace(/^\\w/, ($0) => $0.toUpperCase());\n\n // If no children, create a file for this under the parent directory\n if (!hasChildren) {\n let fileName = `${parentDir}.md`;\n fs.writeFileSync(fileName, `# ${humanizedGroupName}`);\n\n filePaths[groupName || 'home'] = fileName.replace(CONTENT_DIR, '');\n return filePaths;\n }\n\n // There *are* children, so create the parent as a directory\n // and create `index.md` as the content file for this\n fs.mkdirSync(parentDir);\n\n let readmeFilePath = path.join(parentDir, 'index.md');\n fs.writeFileSync(readmeFilePath, `# ${humanizedGroupName}`);\n\n filePaths[groupName || 'home'] = readmeFilePath.replace(CONTENT_DIR, '');\n\n // For each of the directory names, create a\n // directory inside the given directory\n childrenDirNames.forEach((dirName) => {\n createDirTree(path.join(parentDir, dirName), dirTree[dirName], filePaths);\n });\n\n return filePaths;\n}\n\n// Create directories and get back the paths for created directories\ncreateDirTree(bestPracticeContentDirPath, dirTree);\nconsole.log('Created best practice content directory structure');\n" }, { "path": "scripts/cleanup-orphaned-content.ts", "content": "import type { Node } from '@roadmapsh/editor';\nimport matter from 'gray-matter';\nimport fs from 'node:fs/promises';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport { slugify } from '../src/lib/slugger';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nconst ROADMAP_CONTENT_DIR = path.join(__dirname, '../src/data/roadmaps');\n\nconst args = process.argv.slice(2);\nconst roadmapSlug = args?.[0]?.replace('--roadmap-slug=', '');\n\nif (!roadmapSlug) {\n console.error('Usage: tsx scripts/cleanup-orphaned-content.ts --roadmap-slug=');\n process.exit(1);\n}\n\ninterface OrphanEntry {\n file: string;\n reason: string;\n duplicateOf: string;\n action: 'deleted' | 'renamed';\n renamedTo?: string;\n}\n\nasync function fetchRoadmapJson(slug: string): Promise<{ nodes: Node[] }> {\n try {\n const response = await fetch(\n `https://roadmap.sh/api/v1-official-roadmap/${slug}`,\n );\n\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}`);\n }\n\n const data = await response.json();\n if (data.error) {\n throw new Error(data.error);\n }\n\n return data;\n } catch (err) {\n console.log(` API fetch failed for ${slug}, falling back to local JSON`);\n const localPath = path.join(ROADMAP_CONTENT_DIR, slug, `${slug}.json`);\n const raw = await fs.readFile(localPath, 'utf-8');\n return JSON.parse(raw);\n }\n}\n\nasync function isEditorRoadmap(slug: string): Promise {\n const mdPath = path.join(ROADMAP_CONTENT_DIR, slug, `${slug}.md`);\n try {\n const raw = await fs.readFile(mdPath, 'utf-8');\n const { data } = matter(raw);\n return data.renderer === 'editor';\n } catch {\n return false;\n }\n}\n\nasync function getEditorRoadmapSlugs(): Promise {\n const allDirs = await fs.readdir(ROADMAP_CONTENT_DIR);\n const results: string[] = [];\n\n for (const dir of allDirs) {\n const stat = await fs.stat(path.join(ROADMAP_CONTENT_DIR, dir)).catch(() => null);\n if (!stat?.isDirectory()) {\n continue;\n }\n if (await isEditorRoadmap(dir)) {\n results.push(dir);\n }\n }\n\n return results;\n}\n\nfunction parseContentFilename(filename: string): { slug: string; nodeId: string } | null {\n const match = filename.match(/^(.+)@([^.]+)\\.md$/);\n if (!match) {\n return null;\n }\n return { slug: match[1], nodeId: match[2] };\n}\n\nasync function cleanupRoadmap(slug: string): Promise {\n console.log(`\\nProcessing: ${slug}`);\n\n const contentDir = path.join(ROADMAP_CONTENT_DIR, slug, 'content');\n const stat = await fs.stat(contentDir).catch(() => null);\n if (!stat?.isDirectory()) {\n console.log(` No content directory found, skipping`);\n return [];\n }\n\n const roadmapData = await fetchRoadmapJson(slug);\n if (!roadmapData?.nodes) {\n console.log(` No nodes found in roadmap JSON, skipping`);\n return [];\n }\n\n const topicNodes = roadmapData.nodes.filter(\n (node) =>\n node?.type &&\n ['topic', 'subtopic'].includes(node.type) &&\n node.data?.label,\n );\n\n const validNodeIds = new Set();\n const nodeIdToExpectedSlug = new Map();\n\n for (const node of topicNodes) {\n validNodeIds.add(node.id);\n nodeIdToExpectedSlug.set(node.id, slugify(node.data.label as string));\n }\n\n const files = await fs.readdir(contentDir);\n const orphans: OrphanEntry[] = [];\n\n const validFilesBySlug = new Map();\n for (const file of files) {\n const parsed = parseContentFilename(file);\n if (!parsed) {\n continue;\n }\n if (validNodeIds.has(parsed.nodeId) && nodeIdToExpectedSlug.get(parsed.nodeId) === parsed.slug) {\n validFilesBySlug.set(parsed.slug, file);\n }\n }\n\n for (const file of files) {\n const parsed = parseContentFilename(file);\n if (!parsed) {\n continue;\n }\n\n const { slug: fileSlug, nodeId } = parsed;\n\n if (validNodeIds.has(nodeId)) {\n const expectedSlug = nodeIdToExpectedSlug.get(nodeId)!;\n if (fileSlug === expectedSlug) {\n continue;\n }\n\n const correctFile = `${expectedSlug}@${nodeId}.md`;\n const correctFileExists = files.includes(correctFile);\n\n if (correctFileExists) {\n orphans.push({\n file,\n reason: 'Same nodeId, old slug',\n duplicateOf: correctFile,\n action: 'deleted',\n });\n } else {\n orphans.push({\n file,\n reason: 'Same nodeId, old slug',\n duplicateOf: correctFile,\n action: 'renamed',\n renamedTo: correctFile,\n });\n }\n continue;\n }\n\n const validFile = validFilesBySlug.get(fileSlug);\n if (validFile) {\n orphans.push({\n file,\n reason: 'Same slug, old nodeId',\n duplicateOf: validFile,\n action: 'deleted',\n });\n } else {\n orphans.push({\n file,\n reason: 'Topic removed from roadmap',\n duplicateOf: 'N/A',\n action: 'deleted',\n });\n }\n }\n\n for (const orphan of orphans) {\n const filePath = path.join(contentDir, orphan.file);\n if (orphan.action === 'renamed') {\n const newPath = path.join(contentDir, orphan.renamedTo!);\n await fs.rename(filePath, newPath);\n console.log(` Renamed: ${orphan.file} -> ${orphan.renamedTo} (${orphan.reason})`);\n } else {\n await fs.unlink(filePath);\n console.log(` Deleted: ${orphan.file} (${orphan.reason})`);\n }\n }\n\n if (orphans.length === 0) {\n console.log(` No orphans found`);\n }\n\n return orphans;\n}\n\nasync function main() {\n const slugs =\n roadmapSlug === '__all__'\n ? await getEditorRoadmapSlugs()\n : [roadmapSlug];\n\n if (roadmapSlug !== '__all__') {\n if (!(await isEditorRoadmap(roadmapSlug))) {\n console.error(`${roadmapSlug} is not an editor-rendered roadmap`);\n process.exit(1);\n }\n }\n\n console.log(`Processing ${slugs.length} roadmap(s)...`);\n\n const allOrphans = new Map();\n let totalOrphans = 0;\n\n for (const slug of slugs) {\n const orphans = await cleanupRoadmap(slug);\n if (orphans.length > 0) {\n allOrphans.set(slug, orphans);\n totalOrphans += orphans.length;\n }\n }\n\n const roadmapsAffected = allOrphans.size;\n\n let summary = `## Orphaned Content Cleanup\\n\\n`;\n summary += `Cleaned up **${totalOrphans}** orphaned content file(s) across **${roadmapsAffected}** roadmap(s).\\n\\n`;\n\n for (const [slug, orphans] of allOrphans) {\n summary += `### ${slug}\\n\\n`;\n summary += `| File | Action | Reason | Duplicate Of |\\n`;\n summary += `|---|---|---|---|\\n`;\n for (const orphan of orphans) {\n const action = orphan.action === 'renamed' ? `Renamed to \\`${orphan.renamedTo}\\`` : 'Deleted';\n const dupOf = orphan.duplicateOf === 'N/A' ? 'N/A' : `\\`${orphan.duplicateOf}\\``;\n summary += `| \\`${orphan.file}\\` | ${action} | ${orphan.reason} | ${dupOf} |\\n`;\n }\n summary += `\\n`;\n }\n\n const summaryPath = path.join(__dirname, '..', '.cleanup-summary.md');\n await fs.writeFile(summaryPath, summary);\n console.log(`\\nSummary written to .cleanup-summary.md`);\n console.log(`Total: ${totalOrphans} orphaned file(s) cleaned up across ${roadmapsAffected} roadmap(s)`);\n}\n\nmain().catch((err) => {\n console.error(err);\n process.exit(1);\n});\n" }, { "path": "scripts/close-issues.sh", "content": "#!/usr/bin/env bash\n\n# Fetch issues JSON data and parse it properly\nissues=$(gh issue list --repo kamranahmedse/developer-roadmap --search \"sort:created-asc\" --state open --limit 500 --json number,title,createdAt,updatedAt,state,url,comments,reactionGroups,body | jq -c '.[]')\n\n# Loop through the issues and delete the ones created in 2022 and not updated in the past year\nwhile IFS= read -r issue; do\n created_at=$(echo \"$issue\" | jq -r '.createdAt')\n updated_at=$(echo \"$issue\" | jq -r '.updatedAt')\n issue_number=$(echo \"$issue\" | jq -r '.number')\n issue_title=$(echo \"$issue\" | jq -r '.title')\n reaction_groups=$(echo \"$issue\" | jq -r '.reactionGroups')\n has_reactions=$(echo \"$issue\" | jq -r '.reactionGroups | length')\n comment_count=$(echo \"$issue\" | jq -r '.comments | length')\n body_characters=$(echo \"$issue\" | jq -r '.body | length')\n\n # if has empty body\n if [[ \"$created_at\" == 2024-01* ]]; then\n\n comment=\"Hey there!\n\nLooks like this issue has been hanging around for a bit without much action. Our roadmaps have evolved quite a bit since then, and a bunch of older issues aren't really applicable anymore. So, we're tidying things up by closing out the older ones to keep our issue tracker nice and organized for future feedback.\n\nIf you still think this problem needs addressing, don't hesitate to reopen the issue. We're here to help!\n\nThanks a bunch!\"\n\n gh issue comment \"$issue_number\" --body \"$comment\"\n gh issue close \"$issue_number\"\n fi\ndone <<< \"$issues\"\n" }, { "path": "scripts/compress-images.ts", "content": "import fs from 'node:fs/promises';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport sharp from 'sharp';\n\n// ERROR: `__dirname` is not defined in ES module scope\n// https://iamwebwiz.medium.com/how-to-fix-dirname-is-not-defined-in-es-module-scope-34d94a86694d\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nconst allowedFileExtensions = [\n '.avif',\n '.gif',\n '.heif',\n '.jpeg',\n '.png',\n '.raw',\n '.tiff',\n '.webp',\n] as const;\ntype AllowedFileExtension = (typeof allowedFileExtensions)[number];\n\nconst publicDir = path.join(__dirname, '../public');\nconst cacheFile = path.join(__dirname, '/compressed-images.json');\n\nconst KB_IN_BYTES = 1024;\nconst COMPRESS_CONFIG = {\n avif: {\n chromaSubsampling: '4:4:4',\n effort: 9.0,\n },\n gif: {\n effort: 10.0,\n },\n jpeg: {\n chromaSubsampling: '4:4:4',\n mozjpeg: true,\n trellisQuantisation: true,\n overshootDeringing: true,\n optimiseScans: true,\n },\n png: {\n compressionLevel: 9.0,\n palette: true,\n },\n raw: {},\n tiff: {\n compression: 'lzw',\n },\n webp: {\n effort: 6.0,\n },\n};\n\n(async () => {\n let cache: string[] = [];\n const isCacheFileExists = await fs\n .access(cacheFile)\n .then(() => true)\n .catch(() => false);\n\n if (isCacheFileExists) {\n const cacheFileContent = await fs.readFile(cacheFile, 'utf8');\n cache = JSON.parse(cacheFileContent);\n }\n\n const images = await recursiveGetImages(publicDir);\n for (const image of images) {\n const extname = path.extname(image).toLowerCase() as AllowedFileExtension;\n if (\n !allowedFileExtensions.includes(extname) ||\n image.includes('node_modules') ||\n image.includes('.astro') ||\n image.includes('.vscode') ||\n image.includes('.git')\n ) {\n continue;\n }\n\n const stats = await fs.stat(image);\n const relativeImagePath = path.relative(path.join(__dirname, '..'), image);\n if (cache.includes(relativeImagePath)) {\n continue;\n }\n\n const prevSize = stats.size / KB_IN_BYTES;\n\n let imageBuffer: Buffer | undefined;\n switch (extname) {\n case '.avif':\n imageBuffer = await sharp(image).avif(COMPRESS_CONFIG.avif).toBuffer();\n break;\n case '.heif':\n imageBuffer = await sharp(image).heif().toBuffer();\n break;\n case '.jpeg':\n imageBuffer = await sharp(image).jpeg(COMPRESS_CONFIG.jpeg).toBuffer();\n break;\n case '.png':\n imageBuffer = await sharp(image).png(COMPRESS_CONFIG.png).toBuffer();\n break;\n case '.raw':\n imageBuffer = await sharp(image).raw().toBuffer();\n break;\n case '.tiff':\n imageBuffer = await sharp(image).tiff(COMPRESS_CONFIG.tiff).toBuffer();\n break;\n case '.webp':\n imageBuffer = await sharp(image).webp(COMPRESS_CONFIG.webp).toBuffer();\n break;\n case '.gif':\n continue;\n }\n\n if (!imageBuffer) {\n console.error(`❌ ${image} Compressing failed!`);\n continue;\n }\n\n const newSize = imageBuffer.length / KB_IN_BYTES;\n const diff = prevSize - newSize;\n if (diff <= 0) {\n console.log(`📦 Skipped ${relativeImagePath}`);\n continue;\n }\n\n const diffPercent = ((diff / prevSize) * 100).toFixed(2);\n console.log(\n `📦 Reduced ${prevSize.toFixed(2)}KB → ${newSize.toFixed(2)}KB (${diff.toFixed(2)}KB, ${diffPercent}%) for ${relativeImagePath}`,\n );\n\n await fs.writeFile(image, imageBuffer);\n cache.push(relativeImagePath);\n\n // So that we don't lose the cache if the script crashes\n await fs.writeFile(cacheFile, JSON.stringify(cache, null, 2), 'utf8');\n }\n\n await fs.writeFile(cacheFile, JSON.stringify(cache, null, 2), 'utf8');\n})();\n\nasync function recursiveGetImages(dir: string): Promise {\n const subdirs = await fs.readdir(dir, { withFileTypes: true });\n\n const files = await Promise.all(\n subdirs.map((dirent) => {\n const res = path.resolve(dir, dirent.name);\n return dirent.isDirectory() ? recursiveGetImages(res) : res;\n }),\n );\n\n return Array.prototype.concat(...files);\n}\n" }, { "path": "scripts/compressed-images.json", "content": "[\n \"public/authors/dmytrobol.png\",\n \"public/authors/ebrahimbharmal007.png\",\n \"public/authors/jesse.png\",\n \"public/authors/peter-thaleikis.png\",\n \"public/best-practices/api-security.png\",\n \"public/best-practices/aws.png\",\n \"public/best-practices/backend-performance.png\",\n \"public/best-practices/frontend-performance.png\",\n \"public/guides/asymptotic-notation.png\",\n \"public/guides/avoid-render-blocking-javascript-with-async-defer.png\",\n \"public/guides/backend-languages/back-vs-front.png\",\n \"public/guides/backend-languages/backend-roadmap-part.png\",\n \"public/guides/backend-languages/javascript-interest.png\",\n \"public/guides/backend-languages/pypl-go-index.png\",\n \"public/guides/bash-vs-shell.jpeg\",\n \"public/guides/basic-authentication/chrome-basic-auth.png\",\n \"public/guides/basic-authentication/safari-basic-auth.png\",\n \"public/guides/basic-authentication.png\",\n \"public/guides/big-o-notation.png\",\n \"public/guides/character-encodings.png\",\n \"public/guides/ci-cd.png\",\n \"public/guides/dhcp.png\",\n \"public/guides/jwt-authentication.png\",\n \"public/guides/llms.png\",\n \"public/guides/project-history.png\",\n \"public/guides/proxy/forward-proxy.png\",\n \"public/guides/proxy/proxy-example.png\",\n \"public/guides/proxy/reverse-proxy.png\",\n \"public/guides/random-numbers.png\",\n \"public/guides/session-authentication.png\",\n \"public/guides/sli-slo-sla.jpeg\",\n \"public/guides/ssl-tls-https-ssh.png\",\n \"public/guides/token-authentication.png\",\n \"public/guides/torrent-client/download.png\",\n \"public/guides/torrent-client/pipelining.png\",\n \"public/guides/unfamiliar-codebase.png\",\n \"public/guides/web-vitals.png\",\n \"public/img/brand.png\",\n \"public/img/default-avatar.png\",\n \"public/img/features/in-progress.png\",\n \"public/img/icons8-wand.gif\",\n \"public/img/partners/ambassador-graphic-1.png\",\n \"public/img/partners/ambassador-graphic-2.png\",\n \"public/img/partners/apollo-workshop.png\",\n \"public/img/partners/graphql-summit.png\",\n \"public/img/partners/nginx.png\",\n \"public/img/roadmap-editor.jpeg\",\n \"public/img/system-design.png\",\n \"public/img/team-promo/contact.png\",\n \"public/img/team-promo/documentation.png\",\n \"public/img/team-promo/growth-plans.png\",\n \"public/img/team-promo/hero-img.png\",\n \"public/img/team-promo/hero.png\",\n \"public/img/team-promo/invite-members.png\",\n \"public/img/team-promo/many-roadmaps.png\",\n \"public/img/team-promo/onboarding.png\",\n \"public/img/team-promo/our-roadmaps.png\",\n \"public/img/team-promo/progress-tracking.png\",\n \"public/img/team-promo/roadmap-editor.png\",\n \"public/img/team-promo/sharing-settings.png\",\n \"public/img/team-promo/skill-gap.png\",\n \"public/img/team-promo/team-dashboard.png\",\n \"public/img/team-promo/team-insights.png\",\n \"public/img/team-promo/update-progress.png\",\n \"public/manifest/apple-touch-icon.png\",\n \"public/manifest/icon152.png\",\n \"public/manifest/icon196.png\",\n \"public/manifest/icon32.png\",\n \"public/og-images/best-practices/api-security.png\",\n \"public/og-images/best-practices/aws.png\",\n \"public/og-images/best-practices/backend-performance.png\",\n \"public/og-images/best-practices/code-review.png\",\n \"public/og-images/best-practices/frontend-performance.png\",\n \"public/og-images/guides/asymptotic-notation.png\",\n \"public/og-images/guides/avoid-render-blocking-javascript-with-async-defer.png\",\n \"public/og-images/guides/backend-developer-skills.png\",\n \"public/og-images/guides/backend-developer-tools.png\",\n \"public/og-images/guides/backend-languages.png\",\n \"public/og-images/guides/basic-authentication.png\",\n \"public/og-images/guides/basics-of-authentication.png\",\n \"public/og-images/guides/big-o-notation.png\",\n \"public/og-images/guides/character-encodings.png\",\n \"public/og-images/guides/ci-cd.png\",\n \"public/og-images/guides/consistency-patterns-in-distributed-systems.png\",\n \"public/og-images/guides/design-patterns-for-humans.png\",\n \"public/og-images/guides/dhcp-in-one-picture.png\",\n \"public/og-images/guides/dns-in-one-picture.png\",\n \"public/og-images/guides/free-resources-to-learn-llms.png\",\n \"public/og-images/guides/history-of-javascript.png\",\n \"public/og-images/guides/how-to-setup-a-jump-server.png\",\n \"public/og-images/guides/http-basic-authentication.png\",\n \"public/og-images/guides/http-caching.png\",\n \"public/og-images/guides/introduction-to-llms.png\",\n \"public/og-images/guides/journey-to-http2.png\",\n \"public/og-images/guides/jwt-authentication.png\",\n \"public/og-images/guides/levels-of-seniority.png\",\n \"public/og-images/guides/oauth.png\",\n \"public/og-images/guides/proxy-servers.png\",\n \"public/og-images/guides/random-numbers.png\",\n \"public/og-images/guides/scaling-databases.png\",\n \"public/og-images/guides/session-authentication.png\",\n \"public/og-images/guides/session-based-authentication.png\",\n \"public/og-images/guides/setup-and-auto-renew-ssl-certificates.png\",\n \"public/og-images/guides/single-command-database-setup.png\",\n \"public/og-images/guides/ssl-tls-https-ssh.png\",\n \"public/og-images/guides/sso.png\",\n \"public/og-images/guides/token-authentication.png\",\n \"public/og-images/guides/torrent-client.png\",\n \"public/og-images/guides/unfamiliar-codebase.png\",\n \"public/og-images/guides/what-are-web-vitals.png\",\n \"public/og-images/guides/what-is-internet.png\",\n \"public/og-images/guides/what-is-sli-slo-sla.png\",\n \"public/og-images/guides/why-build-it-and-they-will-come-wont-work-anymore.png\",\n \"public/og-images/roadmaps/android.png\",\n \"public/og-images/roadmaps/angular.png\",\n \"public/og-images/roadmaps/aspnet-core.png\",\n \"public/og-images/roadmaps/aws.png\",\n \"public/og-images/roadmaps/backend.png\",\n \"public/og-images/roadmaps/blockchain.png\",\n \"public/og-images/roadmaps/code-review.png\",\n \"public/og-images/roadmaps/computer-science.png\",\n \"public/og-images/roadmaps/cpp.png\",\n \"public/og-images/roadmaps/cyber-security.png\",\n \"public/og-images/roadmaps/data-analyst.png\",\n \"public/og-images/roadmaps/datastructures-and-algorithms.png\",\n \"public/og-images/roadmaps/design-system.png\",\n \"public/og-images/roadmaps/devops.png\",\n \"public/og-images/roadmaps/docker.png\",\n \"public/og-images/roadmaps/flutter.png\",\n \"public/og-images/roadmaps/frontend.png\",\n \"public/og-images/roadmaps/full-stack.png\",\n \"public/og-images/roadmaps/game-developer.png\",\n \"public/og-images/roadmaps/golang.png\",\n \"public/og-images/roadmaps/graphql.png\",\n \"public/og-images/roadmaps/java.png\",\n \"public/og-images/roadmaps/javascript.png\",\n \"public/og-images/roadmaps/kubernetes.png\",\n \"public/og-images/roadmaps/mlops.png\",\n \"public/og-images/roadmaps/mongodb.png\",\n \"public/og-images/roadmaps/nodejs.png\",\n \"public/og-images/roadmaps/postgresql-dba.png\",\n \"public/og-images/roadmaps/prompt-engineering.png\",\n \"public/og-images/roadmaps/python.png\",\n \"public/og-images/roadmaps/qa.png\",\n \"public/og-images/roadmaps/react-native.png\",\n \"public/og-images/roadmaps/react.png\",\n \"public/og-images/roadmaps/rust.png\",\n \"public/og-images/roadmaps/server-side-game-developer.png\",\n \"public/og-images/roadmaps/software-architect.png\",\n \"public/og-images/roadmaps/software-design-architecture.png\",\n \"public/og-images/roadmaps/spring-boot.png\",\n \"public/og-images/roadmaps/sql.png\",\n \"public/og-images/roadmaps/system-design.png\",\n \"public/og-images/roadmaps/technical-writer.png\",\n \"public/og-images/roadmaps/typescript.png\",\n \"public/og-images/roadmaps/ux-design.png\",\n \"public/og-images/roadmaps/vue.png\",\n \"public/og-images/sql-roadmap.png\",\n \"public/roadmaps/android.png\",\n \"public/roadmaps/aspnet-core.png\",\n \"public/roadmaps/aws.png\",\n \"public/roadmaps/backend.png\",\n \"public/roadmaps/blockchain.png\",\n \"public/roadmaps/computer-science.png\",\n \"public/roadmaps/cpp.png\",\n \"public/roadmaps/cyber-security.png\",\n \"public/roadmaps/data-analyst.png\",\n \"public/roadmaps/design-system.png\",\n \"public/roadmaps/devops.png\",\n \"public/roadmaps/docker.png\",\n \"public/roadmaps/flutter.png\",\n \"public/roadmaps/frontend.png\",\n \"public/roadmaps/full-stack.png\",\n \"public/roadmaps/game-developer.png\",\n \"public/roadmaps/graphql.png\",\n \"public/roadmaps/intro.png\",\n \"public/roadmaps/java.png\",\n \"public/roadmaps/javascript.png\",\n \"public/roadmaps/kubernetes.png\",\n \"public/roadmaps/mlops.png\",\n \"public/roadmaps/mongodb.png\",\n \"public/roadmaps/nodejs.png\",\n \"public/roadmaps/python.png\",\n \"public/roadmaps/qa.png\",\n \"public/roadmaps/react.png\",\n \"public/roadmaps/rust.png\",\n \"public/roadmaps/software-architect.png\",\n \"public/roadmaps/software-design-architecture.png\",\n \"public/roadmaps/sql.png\",\n \"public/roadmaps/technical-writer.png\",\n \"public/roadmaps/typescript.png\",\n \"public/roadmaps/ux-design.png\",\n \"public/roadmaps/vue.png\",\n \"public/og-images/roadmaps/ai-data-scientist.png\",\n \"public/og-images/roadmaps/linux.png\",\n \"public/roadmaps/ai-data-scientist.png\",\n \"public/roadmaps/linux.png\"\n]" }, { "path": "scripts/create-roadmap-labels.sh", "content": "#!/usr/bin/env bash\n\n# get all the folder names inside src/data/roadmaps\nroadmap_ids=$(ls src/data/roadmaps)\n\n# create a label for each roadmap name on github issues using gh cli\nfor roadmap_id in $roadmap_ids\ndo\n random_color=$(openssl rand -hex 3)\n gh label create \"$roadmap_id\" --color $random_color --description \"Roadmap: $roadmap_id\"\ndone" }, { "path": "scripts/editor-roadmap-assets.ts", "content": "import playwright from 'playwright';\n\n// Usage: tsx ./scripts/editor-roadmap-dirs.ts \n\nconst roadmapId = process.argv[2];\n\nif (!roadmapId) {\n console.error('Roadmap Id is required');\n process.exit(1);\n}\n\n// Fetch roadmap data from API\nconst apiUrl = `https://roadmap.sh/api/v1-official-roadmap/${roadmapId}`;\nconsole.log(`Fetching roadmap data from ${apiUrl}`);\n\nlet roadmapData: any;\ntry {\n const response = await fetch(apiUrl);\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n roadmapData = await response.json();\n} catch (error) {\n console.error(`Failed to fetch roadmap data: ${error}`);\n process.exit(1);\n}\n\n// Check if dimensions exist in the API response\nif (!roadmapData.dimensions) {\n console.error('Invalid roadmap data: missing dimensions');\n process.exit(1);\n}\n\nconsole.log(`Launching chromium`);\nconst browser = await playwright.chromium.launch();\nconst context = await browser.newContext();\nconst page = await context.newPage();\n\nconst pageUrl = `http://localhost:3000/${roadmapId}/svg`;\nconsole.log(`Opening page ${pageUrl}`);\nawait page.goto(pageUrl);\nawait page.waitForSelector('#resource-svg-wrap');\nawait page.waitForTimeout(5000);\nconsole.log(`Generating PDF ${pageUrl}`);\nawait page.pdf({\n path: `./public/pdfs/roadmaps/${roadmapId}.pdf`,\n margin: { top: 0, right: 0, bottom: 0, left: 0 },\n height: roadmapData.dimensions?.height || 2000,\n width: roadmapData.dimensions?.width || 968,\n});\n\n// @todo generate png from the pdf\nconsole.log(`Generating png ${pageUrl}`);\nawait page.locator('#resource-svg-wrap>svg').screenshot({\n path: `./public/roadmaps/${roadmapId}.png`,\n type: 'png',\n scale: 'device',\n});\n\nawait browser.close();\n" }, { "path": "scripts/editor-roadmap-content-json.ts", "content": "import type { Node } from '@roadmapsh/editor';\nimport matter from 'gray-matter';\nimport { HTMLElement, parse } from 'node-html-parser';\nimport fs from 'node:fs/promises';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport { htmlToMarkdown } from '../src/lib/html';\nimport { markdownToHtml } from '../src/lib/markdown';\nimport type { RoadmapFrontmatter } from '../src/lib/roadmap';\nimport { slugify } from '../src/lib/slugger';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nexport const allowedLinkTypes = [\n 'video',\n 'article',\n 'opensource',\n 'course',\n 'website',\n 'podcast',\n] as const;\n\nexport async function fetchRoadmapJson(roadmapId: string) {\n const response = await fetch(\n `https://roadmap.sh/api/v1-official-roadmap/${roadmapId}`,\n );\n\n if (!response.ok) {\n throw new Error(`Failed to fetch roadmap json: ${response.statusText}`);\n }\n\n const data = await response.json();\n if (data.error) {\n throw new Error(`Failed to fetch roadmap json: ${data.error}`);\n }\n\n return data;\n}\n\n// Directory containing the roadmaps\nconst ROADMAP_CONTENT_DIR = path.join(__dirname, '../src/data/roadmaps');\nconst allRoadmaps = await fs.readdir(ROADMAP_CONTENT_DIR);\n\nconst editorRoadmapIds = new Set();\nfor (const roadmapId of allRoadmaps) {\n const roadmapFrontmatterDir = path.join(\n ROADMAP_CONTENT_DIR,\n roadmapId,\n `${roadmapId}.md`,\n );\n const roadmapFrontmatterRaw = await fs.readFile(\n roadmapFrontmatterDir,\n 'utf-8',\n );\n const { data } = matter(roadmapFrontmatterRaw);\n\n const roadmapFrontmatter = data as RoadmapFrontmatter;\n if (roadmapFrontmatter.renderer === 'editor') {\n editorRoadmapIds.add(roadmapId);\n }\n}\n\nconst publicRoadmapsContentDir = path.join('./public', 'roadmap-content');\nconst stats = await fs.stat(publicRoadmapsContentDir).catch(() => null);\nif (!stats || !stats.isDirectory()) {\n await fs.mkdir(publicRoadmapsContentDir, { recursive: true });\n}\n\nfor (const roadmapId of editorRoadmapIds) {\n console.log(`🚀 Starting ${roadmapId}`);\n\n const data = await fetchRoadmapJson(roadmapId).catch((error) => {\n console.error(error);\n return null;\n });\n\n if (!data) {\n console.error(`Failed to fetch roadmap json: ${roadmapId}`);\n continue;\n }\n\n let { nodes } = data as {\n nodes: Node[];\n };\n nodes = nodes.filter(\n (node) =>\n node?.type &&\n ['topic', 'subtopic', 'todo'].includes(node.type) &&\n node.data?.label,\n );\n\n const roadmapContentDir = path.join(\n ROADMAP_CONTENT_DIR,\n roadmapId,\n 'content',\n );\n const stats = await fs.stat(roadmapContentDir).catch(() => null);\n if (!stats || !stats.isDirectory()) {\n await fs.mkdir(roadmapContentDir, { recursive: true });\n }\n\n const roadmapContentFiles = await fs.readdir(roadmapContentDir, {\n recursive: true,\n });\n\n const contentMap: Record<\n string,\n {\n title: string;\n description: string;\n links: {\n title: string;\n url: string;\n type: string;\n }[];\n }\n > = {};\n\n for (const node of nodes) {\n const nodeDirPatternWithoutExt = `${slugify(node?.data?.label as string)}@${node.id}`;\n const nodeDirPattern = `${nodeDirPatternWithoutExt}.md`;\n if (!roadmapContentFiles.includes(nodeDirPattern)) {\n contentMap[nodeDirPattern] = {\n title: node?.data?.label as string,\n description: '',\n links: [],\n };\n\n continue;\n }\n\n const content = await fs.readFile(\n path.join(roadmapContentDir, nodeDirPattern),\n 'utf-8',\n );\n const html = markdownToHtml(content, false);\n const rootHtml = parse(html);\n\n let ulWithLinks: HTMLElement | undefined;\n rootHtml.querySelectorAll('ul').forEach((ul) => {\n const listWithJustLinks = Array.from(ul.querySelectorAll('li')).filter(\n (li) => {\n const link = li.querySelector('a');\n return link && link.textContent?.trim() === li.textContent?.trim();\n },\n );\n\n if (listWithJustLinks.length > 0) {\n ulWithLinks = ul;\n }\n });\n\n const listLinks =\n ulWithLinks !== undefined\n ? Array.from(ulWithLinks.querySelectorAll('li > a'))\n .map((link) => {\n const typePattern = /@([a-z.]+)@/;\n let linkText = link.textContent || '';\n const linkHref = link.getAttribute('href') || '';\n let linkType = linkText.match(typePattern)?.[1] || 'article';\n linkType = allowedLinkTypes.includes(linkType as any)\n ? linkType\n : 'article';\n\n linkText = linkText.replace(typePattern, '');\n\n return {\n title: linkText,\n url: linkHref,\n type: linkType,\n };\n })\n .sort((a, b) => {\n const order = [\n 'official',\n 'opensource',\n 'article',\n 'video',\n 'feed',\n ];\n return order.indexOf(a.type) - order.indexOf(b.type);\n })\n : [];\n\n const title = rootHtml.querySelector('h1');\n ulWithLinks?.remove();\n title?.remove();\n const htmlStringWithoutLinks = rootHtml.toString();\n const description = htmlToMarkdown(htmlStringWithoutLinks);\n\n contentMap[node.id] = {\n title: node.data.label as string,\n description,\n links: listLinks,\n };\n }\n\n await fs.writeFile(\n path.join(publicRoadmapsContentDir, `${roadmapId}.json`),\n JSON.stringify(contentMap, null, 2),\n );\n console.log(`✅ Finished ${roadmapId}`);\n console.log('-'.repeat(20));\n}\n" }, { "path": "scripts/editor-roadmap-content.ts", "content": "import fs from 'node:fs/promises';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport type { Edge, Node } from '@roadmapsh/editor';\nimport matter from 'gray-matter';\nimport type { RoadmapFrontmatter } from '../src/lib/roadmap';\nimport { slugify } from '../src/lib/slugger';\nimport OpenAI from 'openai';\nimport { runPromisesInBatchSequentially } from '../src/lib/promise';\nimport { httpGet } from '../src/lib/http';\n\n// ERROR: `__dirname` is not defined in ES module scope\n// https://iamwebwiz.medium.com/how-to-fix-dirname-is-not-defined-in-es-module-scope-34d94a86694d\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\n// Usage: tsx ./scripts/editor-roadmap-content.ts \nconst OPEN_AI_API_KEY = process.env.OPEN_AI_API_KEY;\nconsole.log('OPEN_AI_API_KEY:', OPEN_AI_API_KEY);\nconst ROADMAP_CONTENT_DIR = path.join(__dirname, '../src/data/roadmaps');\nconst roadmapId = process.argv[2];\n\nconst allowedRoadmapIds = await fs.readdir(ROADMAP_CONTENT_DIR);\nif (!roadmapId) {\n console.error('Roadmap Id is required');\n process.exit(1);\n}\n\nif (!allowedRoadmapIds.includes(roadmapId)) {\n console.error(`Invalid roadmap key ${roadmapId}`);\n console.error(`Allowed keys are ${allowedRoadmapIds.join(', ')}`);\n process.exit(1);\n}\n\nconst roadmapFrontmatterDir = path.join(\n ROADMAP_CONTENT_DIR,\n roadmapId,\n `${roadmapId}.md`,\n);\nconst roadmapFrontmatterRaw = await fs.readFile(roadmapFrontmatterDir, 'utf-8');\nconst { data } = matter(roadmapFrontmatterRaw);\n\nconst roadmapFrontmatter = data as RoadmapFrontmatter;\nif (!roadmapFrontmatter) {\n console.error('Invalid roadmap frontmatter');\n process.exit(1);\n}\n\nif (roadmapFrontmatter.renderer !== 'editor') {\n console.error('Only Editor Rendered Roadmaps are allowed');\n process.exit(1);\n}\n\nconst { response: roadmapContent, error } = await httpGet(\n `${import.meta.env.PUBLIC_API_URL}/v1-official-roadmap/${roadmapId}`,\n);\n\nif (error) {\n console.error(error);\n process.exit(1);\n}\n\nlet { nodes, edges } = roadmapContent as {\n nodes: Node[];\n edges: Edge[];\n};\nconst enrichedNodes = nodes\n .filter(\n (node) =>\n node?.type &&\n ['topic', 'subtopic'].includes(node.type) &&\n node.data?.label,\n )\n .map((node) => {\n // Because we only need the parent id and title for subtopics\n if (node.type !== 'subtopic') {\n return node;\n }\n\n const parentNodeId =\n edges.find((edge) => edge.target === node.id)?.source || '';\n const parentNode = nodes.find((n) => n.id === parentNodeId);\n\n return {\n ...node,\n parentId: parentNodeId,\n parentTitle: parentNode?.data?.label || '',\n };\n }) as (Node & { parentId?: string; parentTitle?: string })[];\n\nconst roadmapContentDir = path.join(ROADMAP_CONTENT_DIR, roadmapId, 'content');\nconst stats = await fs.stat(roadmapContentDir).catch(() => null);\nif (!stats || !stats.isDirectory()) {\n await fs.mkdir(roadmapContentDir, { recursive: true });\n}\n\nlet openai: OpenAI | undefined;\nif (OPEN_AI_API_KEY) {\n openai = new OpenAI({\n apiKey: OPEN_AI_API_KEY,\n });\n}\n\nfunction writeTopicContent(\n roadmapTitle: string,\n childTopic: string,\n parentTopic?: string,\n) {\n let prompt = `I will give you a topic and you need to write a brief introduction for that with regards to \"${roadmapTitle}\". Your format should be as follows and be in strictly markdown format:\n\n# (Put a heading for the topic without adding parent \"Subtopic in Topic\" or \"Topic in Roadmap\" or \"Subtopic under XYZ\" etc.)\n\n(Briefly explain the topic in one paragraph using simple english with regards to \"${roadmapTitle}\". Don't start with explaining how important the topic is with regard to \"${roadmapTitle}\". Don't say something along the lines of \"XYZ plays a crucial role in ${roadmapTitle}\". Don't include anything saying \"In the context of ${roadmapTitle}\". Instead, start with a simple explanation of the topic itself. For example, if the topic is \"React\", you can start with \"React is a JavaScript library for building user interfaces.\" and then you can explain how it is used in \"${roadmapTitle}\".)\n`;\n\n if (!parentTopic) {\n prompt += `First topic is: ${childTopic}`;\n } else {\n prompt += `First topic is: ${childTopic} under ${parentTopic}`;\n }\n\n return new Promise((resolve, reject) => {\n openai?.chat.completions\n .create({\n model: 'gpt-4',\n messages: [\n {\n role: 'user',\n content: prompt,\n },\n ],\n })\n .then((response) => {\n const article = response.choices[0].message.content;\n\n resolve(article);\n })\n .catch((err) => {\n reject(err);\n });\n });\n}\n\nasync function writeNodeContent(node: Node & { parentTitle?: string }) {\n const nodeDirPattern = `${slugify(node?.data?.label as string)}@${node.id}.md`;\n if (!roadmapContentFiles.includes(nodeDirPattern)) {\n console.log(`Missing file for: ${nodeDirPattern}`);\n return;\n }\n\n const nodeDir = path.join(roadmapContentDir, nodeDirPattern);\n const nodeContent = await fs.readFile(nodeDir, 'utf-8');\n const isFileEmpty = !nodeContent.replace(`# ${node.data.label}`, '').trim();\n if (!isFileEmpty) {\n console.log(`❌ Ignoring ${nodeDirPattern}. Not empty.`);\n return;\n }\n\n const topic = node.data.label as string;\n const parentTopic = node.parentTitle;\n\n console.log(`⏳ Generating content for ${topic}...`);\n let newContentFile = '';\n if (OPEN_AI_API_KEY) {\n newContentFile = (await writeTopicContent(\n roadmapFrontmatter.title,\n topic,\n parentTopic,\n )) as string;\n } else {\n newContentFile = `# ${topic}`;\n }\n\n await fs.writeFile(nodeDir, newContentFile, 'utf-8');\n console.log(`✅ Content generated for ${topic}`);\n}\n\nlet roadmapContentFiles = await fs.readdir(roadmapContentDir, {\n recursive: true,\n});\n\nif (!OPEN_AI_API_KEY) {\n console.log('----------------------------------------');\n console.log('OPEN_AI_API_KEY not found. Skipping openai api calls...');\n console.log('----------------------------------------');\n}\nconst promises = enrichedNodes.map((node) => () => writeNodeContent(node));\nawait runPromisesInBatchSequentially(promises, 20);\nconsole.log('✅ All content generated');\n" }, { "path": "scripts/editor-roadmap-dirs.ts", "content": "import type { Node } from '@roadmapsh/editor';\nimport matter from 'gray-matter';\nimport fs from 'node:fs/promises';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport type { RoadmapFrontmatter } from '../src/lib/roadmap';\nimport { slugify } from '../src/lib/slugger';\n\n// ERROR: `__dirname` is not defined in ES module scope\n// https://iamwebwiz.medium.com/how-to-fix-dirname-is-not-defined-in-es-module-scope-34d94a86694d\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\n// Usage: tsx ./scripts/editor-roadmap-dirs.ts \n\n// Directory containing the roadmaps\nconst ROADMAP_CONTENT_DIR = path.join(__dirname, '../src/data/roadmaps');\nconst roadmapId = process.argv[2];\n\nconst allowedRoadmapIds = await fs.readdir(ROADMAP_CONTENT_DIR);\nif (!roadmapId) {\n console.error('Roadmap Id is required');\n process.exit(1);\n}\n\nif (!allowedRoadmapIds.includes(roadmapId)) {\n console.error(`Invalid roadmap key ${roadmapId}`);\n console.error(`Allowed keys are ${allowedRoadmapIds.join(', ')}`);\n process.exit(1);\n}\n\nconst roadmapFrontmatterDir = path.join(\n ROADMAP_CONTENT_DIR,\n roadmapId,\n `${roadmapId}.md`,\n);\nconst roadmapFrontmatterRaw = await fs.readFile(roadmapFrontmatterDir, 'utf-8');\nconst { data } = matter(roadmapFrontmatterRaw);\n\nconst roadmapFrontmatter = data as RoadmapFrontmatter;\nif (!roadmapFrontmatter) {\n console.error('Invalid roadmap frontmatter');\n process.exit(1);\n}\n\nif (roadmapFrontmatter.renderer !== 'editor') {\n console.error('Only Editor Rendered Roadmaps are allowed');\n process.exit(1);\n}\n\nexport async function fetchRoadmapJson(roadmapId: string) {\n const response = await fetch(\n `https://roadmap.sh/api/v1-official-roadmap/${roadmapId}`,\n );\n\n if (!response.ok) {\n throw new Error(`Failed to fetch roadmap json: ${response.statusText}`);\n }\n\n const data = await response.json();\n if (data.error) {\n throw new Error(`Failed to fetch roadmap json: ${data.error}`);\n }\n\n return data;\n}\n\nconst roadmapContent = await fetchRoadmapJson(roadmapId);\n\nif (!roadmapContent) {\n console.error(`Failed to fetch roadmap json: ${roadmapId}`);\n process.exit(1);\n}\n\nlet { nodes } = roadmapContent as {\n nodes: Node[];\n};\nnodes = nodes.filter(\n (node) =>\n node?.type && ['topic', 'subtopic'].includes(node.type) && node.data?.label,\n);\n\nconst roadmapContentDir = path.join(ROADMAP_CONTENT_DIR, roadmapId, 'content');\nconst stats = await fs.stat(roadmapContentDir).catch(() => null);\nif (!stats || !stats.isDirectory()) {\n await fs.mkdir(roadmapContentDir, { recursive: true });\n}\n\nconst roadmapContentFiles = await fs.readdir(roadmapContentDir, {\n recursive: true,\n});\n\nnodes.forEach(async (node, index) => {\n const nodeDirPattern = `${slugify(node.data.label as string)}@${node.id}.md`;\n if (roadmapContentFiles.includes(nodeDirPattern)) {\n console.log(`Skipping ${nodeDirPattern}`);\n return;\n }\n\n await fs.writeFile(\n path.join(roadmapContentDir, nodeDirPattern),\n `# ${node.data.label}`,\n );\n});\n" }, { "path": "scripts/extract-guide-images.cjs", "content": "// get all the base64 encoded images and save them to a file from the given markdown file\n\nconst fs = require('fs');\nconst path = require('path');\nconst matter = require('gray-matter');\n\nconst guidePath = path.join(process.cwd(), 'src/data/guides');\nconst tempDir = path.join(process.cwd(), '.temp');\n\nconst guideId = process.argv[2];\nif (!guideId) {\n console.error('Guide ID is required');\n process.exit(1);\n}\n\nconst guideContent = fs.readFileSync(\n path.join(guidePath, `${guideId}.md`),\n 'utf8',\n);\n\n// Create temp directory if it doesn't exist\nconst guideTempDir = path.join(tempDir, guideId);\nif (!fs.existsSync(guideTempDir)) {\n fs.mkdirSync(guideTempDir, { recursive: true });\n}\n\nconst { data, content } = matter(guideContent);\n\n// Find all base64 image references in the content\nconst images = content.match(/\\[(.+?)\\]:\\s+? {\n const imageName = image.match(/\\[(.+?)\\]/)[1];\n const imageExtension = image.match(/\nconst GEMINI_API_KEY = process.env.GEMINI_API_KEY;\nconsole.log('GEMINI_API_KEY:', GEMINI_API_KEY);\nconst ROADMAP_CONTENT_DIR = path.join(__dirname, '../src/data/roadmaps');\nconst roadmapId = process.argv[2];\n\nconst google = createGoogleGenerativeAI({\n apiKey: process.env.GEMINI_API_KEY,\n});\n\nconst allowedRoadmapIds = await fs.readdir(ROADMAP_CONTENT_DIR);\nif (!roadmapId) {\n console.error('Roadmap Id is required');\n process.exit(1);\n}\n\nif (!allowedRoadmapIds.includes(roadmapId)) {\n console.error(`Invalid roadmap key ${roadmapId}`);\n console.error(`Allowed keys are ${allowedRoadmapIds.join(', ')}`);\n process.exit(1);\n}\n\nconst roadmapFrontmatterDir = path.join(\n ROADMAP_CONTENT_DIR,\n roadmapId,\n `${roadmapId}.md`,\n);\nconst roadmapFrontmatterRaw = await fs.readFile(roadmapFrontmatterDir, 'utf-8');\nconst { data } = matter(roadmapFrontmatterRaw);\n\nconst roadmapFrontmatter = data as RoadmapFrontmatter;\nif (!roadmapFrontmatter) {\n console.error('Invalid roadmap frontmatter');\n process.exit(1);\n}\n\nif (roadmapFrontmatter.renderer !== 'editor') {\n console.error('Only Editor Rendered Roadmaps are allowed');\n process.exit(1);\n}\n\nconst roadmapDir = path.join(\n ROADMAP_CONTENT_DIR,\n roadmapId,\n `${roadmapId}.json`,\n);\nconst roadmapContent = await fs.readFile(roadmapDir, 'utf-8');\nlet { nodes, edges } = JSON.parse(roadmapContent) as {\n nodes: Node[];\n edges: Edge[];\n};\nconst enrichedNodes = nodes\n .filter(\n (node) =>\n node?.type &&\n ['topic', 'subtopic'].includes(node.type) &&\n node.data?.label,\n )\n .map((node) => {\n // Because we only need the parent id and title for subtopics\n if (node.type !== 'subtopic') {\n return node;\n }\n\n const parentNodeId =\n edges.find((edge) => edge.target === node.id)?.source || '';\n const parentNode = nodes.find((n) => n.id === parentNodeId);\n\n return {\n ...node,\n parentId: parentNodeId,\n parentTitle: parentNode?.data?.label || '',\n };\n }) as (Node & { parentId?: string; parentTitle?: string })[];\n\nconst roadmapContentDir = path.join(ROADMAP_CONTENT_DIR, roadmapId, 'content');\nconst stats = await fs.stat(roadmapContentDir).catch(() => null);\nif (!stats || !stats.isDirectory()) {\n await fs.mkdir(roadmapContentDir, { recursive: true });\n}\n\nfunction writeTopicContent(\n roadmapTitle: string,\n childTopic: string,\n parentTopic?: string,\n) {\n const updatedTitle = roadmapTitle.replace('Roadmap', '').trim().replace('Developer', '');\n let prompt = `I will give you a topic and you need to write a brief introduction for that in \"${roadmapTitle}\". Your format should be as follows and be in strictly markdown format:\n\n# (Put a heading for the topic without adding parent \"Subtopic in Topic\" or \"Topic in Roadmap\" or \"Subtopic under XYZ\" etc.)\n\n(Briefly explain the topic in one paragraph using simple english. Don't start with explaining how important the topic is with regard to \"${roadmapTitle}\". Don't say something along the lines of \"XYZ plays a crucial role in ${roadmapTitle}\". Don't include anything saying \"In the context of ${roadmapTitle}\". Instead, start with a simple explanation of the topic itself. For example, if the topic is \"React\", you can start with \"React is a JavaScript library for building user interfaces.\"\".)\n`;\n\n if (!parentTopic) {\n prompt += `First topic is: ${childTopic}`;\n } else {\n prompt += `First topic is: \"${parentTopic} > ${childTopic}\"`;\n }\n\n return new Promise((resolve, reject) => {\n generateText({\n model: google('gemini-2.0-flash'),\n prompt: prompt,\n providerOptions: {\n }\n })\n .then((response) => {\n const article = response.text;\n\n resolve(article);\n })\n .catch((err) => {\n reject(err);\n });\n });\n}\n\nasync function writeNodeContent(node: Node & { parentTitle?: string }) {\n const nodeDirPattern = `${slugify(node.data.label)}@${node.id}.md`;\n if (!roadmapContentFiles.includes(nodeDirPattern)) {\n console.log(`Missing file for: ${nodeDirPattern}`);\n return;\n }\n\n const nodeDir = path.join(roadmapContentDir, nodeDirPattern);\n const nodeContent = await fs.readFile(nodeDir, 'utf-8');\n const isFileEmpty = !nodeContent.replace(`# ${node.data.label}`, '').trim();\n if (!isFileEmpty) {\n console.log(`❌ Ignoring ${nodeDirPattern}. Not empty.`);\n return;\n }\n\n const topic = node.data.label;\n const parentTopic = node.parentTitle;\n\n console.log(`⏳ Generating content for ${topic}...`);\n let newContentFile = '';\n if (GEMINI_API_KEY) {\n newContentFile = (await writeTopicContent(\n roadmapFrontmatter.title,\n topic,\n parentTopic,\n )) as string;\n } else {\n newContentFile = `# ${topic}`;\n }\n\n await fs.writeFile(nodeDir, newContentFile, 'utf-8');\n console.log(`✅ Content generated for ${topic}`);\n}\n\nlet roadmapContentFiles = await fs.readdir(roadmapContentDir, {\n recursive: true,\n});\n\nif (!GEMINI_API_KEY) {\n console.log('----------------------------------------');\n console.log('GEMINI_API_KEY not found. Skipping gemini api calls...');\n console.log('----------------------------------------');\n}\nconst promises = enrichedNodes.map((node) => () => writeNodeContent(node));\nawait runPromisesInBatchSequentially(promises, 20);\nconsole.log('✅ All content generated');\n" }, { "path": "scripts/generate-og-images.mjs", "content": "import path from 'node:path';\nimport fs from 'node:fs/promises';\nimport matter from 'gray-matter';\nimport { html } from 'satori-html';\nimport satori from 'satori';\nimport sharp from 'sharp';\nimport imageSize from 'image-size';\nimport { Resvg } from '@resvg/resvg-js';\n\nconst ALL_ROADMAP_DIR = path.join(process.cwd(), '/src/data/roadmaps');\nconst ALL_BEST_PRACTICE_DIR = path.join(\n process.cwd(),\n '/src/data/best-practices',\n);\nconst ALL_GUIDE_DIR = path.join(process.cwd(), '/src/data/guides');\nconst ALl_AUTHOR_DIR = path.join(process.cwd(), '/src/data/authors');\nconst ALL_ROADMAP_IMAGE_DIR = path.join(process.cwd(), '/public/roadmaps');\nconst ALL_BEST_PRACTICE_IMAGE_DIR = path.join(\n process.cwd(),\n '/public/best-practices',\n);\nconst ALL_AUTHOR_IMAGE_DIR = path.join(process.cwd(), '/public');\n\nconst alreadyGeneratedImages = await fs.readdir(\n path.join(process.cwd(), '/public/og-images'),\n {\n recursive: true,\n },\n);\n\nasync function getAllRoadmaps() {\n const allRoadmapDirNames = await fs.readdir(ALL_ROADMAP_DIR);\n\n const allRoadmapFrontmatter = await Promise.all(\n allRoadmapDirNames.map(async (roadmapDirName) => {\n const roadmapDirPath = path.join(\n ALL_ROADMAP_DIR,\n roadmapDirName,\n `${roadmapDirName}.md`,\n );\n\n const markdown = await fs.readFile(roadmapDirPath, 'utf8');\n const { data } = matter(markdown);\n\n return {\n id: roadmapDirName,\n title: data?.briefTitle,\n description: data?.briefDescription,\n };\n }),\n );\n\n return allRoadmapFrontmatter;\n}\n\nasync function getAllBestPractices() {\n const allBestPracticeDirNames = await fs.readdir(ALL_BEST_PRACTICE_DIR);\n\n const allBestPracticeFrontmatter = await Promise.all(\n allBestPracticeDirNames.map(async (bestPracticeDirName) => {\n const bestPracticeDirPath = path.join(\n ALL_BEST_PRACTICE_DIR,\n bestPracticeDirName,\n `${bestPracticeDirName}.md`,\n );\n\n const markdown = await fs.readFile(bestPracticeDirPath, 'utf8');\n const { data } = matter(markdown);\n\n return {\n id: bestPracticeDirName,\n title: data?.briefTitle,\n description: data?.briefDescription,\n };\n }),\n );\n\n return allBestPracticeFrontmatter;\n}\n\nasync function getAllGuides() {\n const allGuideDirNames = await fs.readdir(ALL_GUIDE_DIR);\n\n const allGuideFrontmatter = await Promise.all(\n allGuideDirNames.map(async (guideDirName) => {\n const guideDirPath = path.join(ALL_GUIDE_DIR, guideDirName);\n\n const markdown = await fs.readFile(guideDirPath, 'utf8');\n const { data } = matter(markdown);\n\n return {\n id: guideDirName?.replace('.md', ''),\n title: data?.title,\n description: data?.description,\n authorId: data?.authorId,\n };\n }),\n );\n\n return allGuideFrontmatter;\n}\n\nasync function getAllAuthors() {\n const allAuthorDirNames = await fs.readdir(ALl_AUTHOR_DIR);\n\n const allAuthorFrontmatter = await Promise.all(\n allAuthorDirNames.map(async (authorDirName) => {\n const authorDirPath = path.join(ALl_AUTHOR_DIR, authorDirName);\n\n const markdown = await fs.readFile(authorDirPath, 'utf8');\n const { data } = matter(markdown);\n\n return {\n id: authorDirName?.replace('.md', ''),\n name: data?.name,\n imageUrl: data?.imageUrl,\n };\n }),\n );\n\n return allAuthorFrontmatter;\n}\n\nasync function getAllRoadmapImageIds() {\n const allRoadmapImageDirNames = await fs.readdir(ALL_ROADMAP_IMAGE_DIR);\n\n return allRoadmapImageDirNames?.reduce((acc, image) => {\n acc[image.replace(/(\\.[^.]*)$/, '')] = image;\n return acc;\n }, {});\n}\n\nasync function getAllBestPracticeImageIds() {\n const allBestPracticeImageDirNames = await fs.readdir(\n ALL_BEST_PRACTICE_IMAGE_DIR,\n );\n\n return allBestPracticeImageDirNames?.reduce((acc, image) => {\n acc[image.replace(/(\\.[^.]*)$/, '')] = image;\n return acc;\n }, {});\n}\n\nasync function generateResourceOpenGraph() {\n const allRoadmaps = (await getAllRoadmaps()).filter(\n (roadmap) => !alreadyGeneratedImages.includes(`roadmaps/${roadmap.id}.png`),\n );\n const allBestPractices = (await getAllBestPractices()).filter(\n (bestPractice) =>\n !alreadyGeneratedImages.includes(`best-practices/${bestPractice.id}.png`),\n );\n const allRoadmapImageIds = await getAllRoadmapImageIds();\n const allBestPracticeImageIds = await getAllBestPracticeImageIds();\n\n const resources = [];\n allRoadmaps.forEach((roadmap) => {\n const hasImage = allRoadmapImageIds?.[roadmap.id];\n resources.push({\n type: 'roadmaps',\n id: roadmap.id,\n title: roadmap.title,\n description: roadmap.description,\n image: hasImage\n ? path.join(ALL_ROADMAP_IMAGE_DIR, allRoadmapImageIds[roadmap.id])\n : null,\n });\n });\n\n allBestPractices.forEach((bestPractice) => {\n const hasImage = allBestPracticeImageIds?.[bestPractice.id];\n resources.push({\n type: 'best-practices',\n id: bestPractice.id,\n title: bestPractice.title,\n description: bestPractice.description,\n image: hasImage\n ? path.join(\n ALL_BEST_PRACTICE_IMAGE_DIR,\n allBestPracticeImageIds[bestPractice.id],\n )\n : null,\n });\n });\n\n for (const resource of resources) {\n if (!resource.image) {\n let template = getRoadmapDefaultTemplate(resource);\n if (\n hasSpecialCharacters(resource.title) ||\n hasSpecialCharacters(resource.description)\n ) {\n // For some reason special characters are not being rendered properly\n // https://github.com/natemoo-re/satori-html/issues/20\n // So we need to unescape the html\n template = JSON.parse(unescapeHtml(JSON.stringify(template)));\n }\n await generateOpenGraph(\n template,\n resource.type,\n resource.id + '.png',\n 'resvg',\n );\n } else {\n const image = await fs.readFile(resource.image);\n const dimensions = imageSize(image);\n\n const widthRatio = 1200 / dimensions.width;\n let width = dimensions.width * widthRatio * 0.85;\n let height = dimensions.height * widthRatio * 0.85;\n\n let template = getRoadmapImageTemplate({\n ...resource,\n image: `data:image/${dimensions.type};base64,${image.toString('base64')}`,\n width,\n height,\n });\n\n if (\n hasSpecialCharacters(resource.title) ||\n hasSpecialCharacters(resource.description)\n ) {\n // For some reason special characters are not being rendered properly\n // https://github.com/natemoo-re/satori-html/issues/20\n // So we need to unescape the html\n template = JSON.parse(unescapeHtml(JSON.stringify(template)));\n }\n\n await generateOpenGraph(template, resource.type, resource.id + '.png');\n }\n }\n}\n\nasync function generateGuideOpenGraph() {\n const allGuides = (await getAllGuides()).filter(\n (guide) => !alreadyGeneratedImages.includes(`guides/${guide.id}.png`),\n );\n const allAuthors = await getAllAuthors();\n\n for (const guide of allGuides) {\n const author = allAuthors.find((author) => author.id === guide.authorId);\n const image =\n author?.imageUrl || 'https://roadmap.sh/img/default-avatar.png';\n const isExternalImage = image?.startsWith('http');\n let authorImageExtension = '';\n let authorAvatar;\n if (!isExternalImage) {\n authorAvatar = await fs.readFile(path.join(ALL_AUTHOR_IMAGE_DIR, image));\n authorImageExtension = image?.split('.')[1];\n }\n\n let template = getGuideTemplate({\n ...guide,\n authorName: author.name,\n authorAvatar: isExternalImage\n ? image\n : `data:image/${authorImageExtension};base64,${authorAvatar.toString('base64')}`,\n });\n if (\n hasSpecialCharacters(guide.title) ||\n hasSpecialCharacters(guide.description)\n ) {\n // For some reason special characters are not being rendered properly\n // https://github.com/natemoo-re/satori-html/issues/20\n // So we need to unescape the html\n template = JSON.parse(unescapeHtml(JSON.stringify(template)));\n }\n await generateOpenGraph(template, 'guides', guide.id + '.png');\n }\n}\n\nasync function generateOpenGraph(\n htmlString,\n type,\n fileName,\n renderer = 'sharp',\n) {\n console.log('Started 🚀', `${type}/${fileName}`);\n const svg = await satori(htmlString, {\n width: 1200,\n height: 630,\n fonts: [\n {\n name: 'balsamiq',\n data: await fs.readFile(\n path.join(process.cwd(), '/public/fonts/BalsamiqSans-Regular.ttf'),\n ),\n weight: 400,\n style: 'normal',\n },\n ],\n });\n\n await fs.mkdir(path.join(process.cwd(), '/public/og-images/' + type), {\n recursive: true,\n });\n // It will be used to generate the default image\n // for some reasone sharp is not working with this\n // FIXME: Investigate why sharp is not working with this\n if (renderer === 'resvg') {\n const resvg = new Resvg(svg, {\n fitTo: {\n mode: 'width',\n value: 2500,\n },\n });\n const pngData = resvg.render();\n const pngBuffer = pngData.asPng();\n await fs.writeFile(\n path.join(process.cwd(), '/public/og-images/' + `${type}/${fileName}`),\n pngBuffer,\n );\n } else {\n await sharp(Buffer.from(svg), { density: 150 })\n .png()\n .toFile(\n path.join(process.cwd(), '/public/og-images/' + `${type}/${fileName}`),\n );\n }\n\n console.log('Completed ✅', `${type}/${fileName}`);\n}\n\nawait generateResourceOpenGraph();\nawait generateGuideOpenGraph();\n\nfunction getRoadmapDefaultTemplate({ title, description }) {\n return html`
\n
\n
\n
\n \n \n \n\n
\n
\n
\n
${title}
\n \n ${description}\n
\n
\n\n
\n
\n \n \n \n \n
\n
\n 7th most starred GitHub project\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n
\n
\n Created and maintained by community\n
\n
\n
\n \n \n \n \n \n
\n
Up-to-date roadmap
\n \n \n \n \n `;\n}\n\nfunction getRoadmapImageTemplate({ title, description, image, height, width }) {\n return html`
\n
\n
\n
\n ${title?.replace('&', `{\"&\"}`)}\n
\n \n ${description}\n
\n
\n
\n\n \n `;\n}\n\nfunction getGuideTemplate({ title, description, authorName, authorAvatar }) {\n return html`
\n
\n
\n
\n \n \n \n\n
\n
\n
\n
\n \n
\n ${authorName}\n
\n
\n
${title}
\n
\n ${description}\n
\n
\n
\n
\n `;\n}\n\nfunction unescapeHtml(html) {\n return html\n .replace(/&/g, '&')\n .replace(/</g, '<')\n .replace(/>/g, '>')\n .replace(/"/g, '\"')\n .replace(/'/g, \"'\");\n}\n\nfunction hasSpecialCharacters(str) {\n return /[&<>\"]/.test(str);\n}\n" }, { "path": "scripts/generate-renderer.sh", "content": "#!/usr/bin/env bash\n\nset -e\n\n# Remove old editor\nrm -rf editor\n\nif [ ! -d \".temp/web-draw\" ]; then\n git clone ssh://git@github.com/roadmapsh/web-draw.git .temp/web-draw --depth 1\nfi\n\n# Make dir\nmkdir -p packages/editor\nmkdir -p packages/editor/dist\n\n# Copy the editor dist, package.json\ncp -rf .temp/web-draw/packages/editor/dist packages/editor\ncp -rf .temp/web-draw/packages/editor/package.json packages/editor\n\n# Remove temp directory\nrm -rf .temp\n\n# Reinstall so that the editor which was setup gets used\nrm -rf node_modules\npnpm install\n" }, { "path": "scripts/label-issues.sh", "content": "#!/usr/bin/env bash\n\n# Fetch issues JSON data and parse it properly\nissues=$(gh issue list --repo kamranahmedse/developer-roadmap --search \"sort:created-asc\" --state open --limit 500 --json number,title,createdAt,updatedAt,state,url,comments,reactionGroups,body | jq -c '.[]')\n\n# checks the body of issue, identifies the slug from the roadmap URLs\n# and labels the issue with the corresponding slug\nwhile IFS= read -r issue; do\n created_at=$(echo \"$issue\" | jq -r '.createdAt')\n updated_at=$(echo \"$issue\" | jq -r '.updatedAt')\n issue_number=$(echo \"$issue\" | jq -r '.number')\n issue_title=$(echo \"$issue\" | jq -r '.title')\n reaction_groups=$(echo \"$issue\" | jq -r '.reactionGroups')\n has_reactions=$(echo \"$issue\" | jq -r '.reactionGroups | length')\n comment_count=$(echo \"$issue\" | jq -r '.comments | length')\n body_characters=$(echo \"$issue\" | jq -r '.body | length')\n\n # If the issue has no body, then skip it\n if [ \"$body_characters\" -eq 0 ]; then\n continue\n fi\n\n # Extract the roadmap URLs from the issue body\n roadmap_urls=$(echo \"$issue\" | jq -r '.body' | grep -o 'https://roadmap\\.sh/[^ ]*')\n\n # If no roadmap URLs found, then skip it\n if [ -z \"$roadmap_urls\" ]; then\n continue\n fi\n\n # URL is like https://roadmap.sh/frontend\n # Extract the slug from the URL\n slug_of_first_url=$(echo \"$roadmap_urls\" | head -n 1 | sed 's/https:\\/\\/roadmap\\.sh\\///')\n\n if [ -z \"$slug_of_first_url\" ]; then\n continue\n fi\n\n # Label the issue with the slug\n gh issue edit \"$issue_number\" --add-label \"$slug_of_first_url\"\ndone <<< \"$issues\"\n" }, { "path": "scripts/migrate-content-repo-to-database.ts", "content": "import fs from 'node:fs/promises';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport type { OfficialRoadmapDocument } from '../src/queries/official-roadmap';\nimport { parse } from 'node-html-parser';\nimport { markdownToHtml } from '../src/lib/markdown';\nimport { htmlToMarkdown } from '../src/lib/html';\nimport matter from 'gray-matter';\nimport type { RoadmapFrontmatter } from '../src/lib/roadmap';\nimport {\n allowedOfficialRoadmapTopicResourceType,\n type AllowedOfficialRoadmapTopicResourceType,\n type SyncToDatabaseTopicContent,\n} from '../src/queries/official-roadmap-topic';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nconst args = process.argv.slice(2);\nconst secret = args\n .find((arg) => arg.startsWith('--secret='))\n ?.replace('--secret=', '');\nif (!secret) {\n throw new Error('Secret is required');\n}\n\nlet roadmapJsonCache: Map = new Map();\nexport async function fetchRoadmapJson(\n roadmapId: string,\n): Promise {\n if (roadmapJsonCache.has(roadmapId)) {\n return roadmapJsonCache.get(roadmapId)!;\n }\n\n const response = await fetch(\n `https://roadmap.sh/api/v1-official-roadmap/${roadmapId}`,\n );\n\n if (!response.ok) {\n throw new Error(\n `Failed to fetch roadmap json: ${response.statusText} for ${roadmapId}`,\n );\n }\n\n const data = await response.json();\n if (data.error) {\n throw new Error(\n `Failed to fetch roadmap json: ${data.error} for ${roadmapId}`,\n );\n }\n\n roadmapJsonCache.set(roadmapId, data);\n return data;\n}\n\nexport async function syncContentToDatabase(\n topics: SyncToDatabaseTopicContent[],\n) {\n const response = await fetch(\n `https://roadmap.sh/api/v1-sync-official-roadmap-topics`,\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n topics,\n secret,\n }),\n },\n );\n\n if (!response.ok) {\n const error = await response.json();\n throw new Error(\n `Failed to sync content to database: ${response.statusText} ${JSON.stringify(error, null, 2)}`,\n );\n }\n\n return response.json();\n}\n\n// Directory containing the roadmaps\nconst ROADMAP_CONTENT_DIR = path.join(__dirname, '../src/data/roadmaps');\nconst allRoadmaps = await fs.readdir(ROADMAP_CONTENT_DIR);\n\nconst editorRoadmapIds = new Set();\nfor (const roadmapId of allRoadmaps) {\n const roadmapFrontmatterDir = path.join(\n ROADMAP_CONTENT_DIR,\n roadmapId,\n `${roadmapId}.md`,\n );\n const roadmapFrontmatterRaw = await fs.readFile(\n roadmapFrontmatterDir,\n 'utf-8',\n );\n const { data } = matter(roadmapFrontmatterRaw);\n\n const roadmapFrontmatter = data as RoadmapFrontmatter;\n if (roadmapFrontmatter.renderer === 'editor') {\n editorRoadmapIds.add(roadmapId);\n }\n}\n\nfor (const roadmapId of editorRoadmapIds) {\n try {\n const roadmap = await fetchRoadmapJson(roadmapId);\n\n const files = await fs.readdir(\n path.join(ROADMAP_CONTENT_DIR, roadmapId, 'content'),\n );\n\n console.log(`🚀 Starting ${files.length} files for ${roadmapId}`);\n const topics: SyncToDatabaseTopicContent[] = [];\n\n for (const file of files) {\n const isContentFile = file.endsWith('.md');\n if (!isContentFile) {\n console.log(`🚨 Skipping ${file} because it is not a content file`);\n continue;\n }\n\n const nodeSlug = file.replace('.md', '');\n if (!nodeSlug) {\n console.error(`🚨 Node id is required: ${file}`);\n continue;\n }\n\n const nodeId = nodeSlug.split('@')?.[1];\n if (!nodeId) {\n console.error(`🚨 Node id is required: ${file}`);\n continue;\n }\n\n const node = roadmap.nodes.find((node) => node.id === nodeId);\n if (!node) {\n console.error(`🚨 Node not found: ${file}`);\n continue;\n }\n\n const filePath = path.join(\n ROADMAP_CONTENT_DIR,\n roadmapId,\n 'content',\n `${nodeSlug}.md`,\n );\n\n const fileExists = await fs\n .stat(filePath)\n .then(() => true)\n .catch(() => false);\n if (!fileExists) {\n console.log(`🚨 File not found: ${filePath}`);\n continue;\n }\n\n const content = await fs.readFile(filePath, 'utf8');\n const html = markdownToHtml(content, false);\n const rootHtml = parse(html);\n\n let ulWithLinks: HTMLElement | undefined;\n rootHtml.querySelectorAll('ul').forEach((ul) => {\n const listWithJustLinks = Array.from(ul.querySelectorAll('li')).filter(\n (li) => {\n const link = li.querySelector('a');\n return link && link.textContent?.trim() === li.textContent?.trim();\n },\n );\n\n if (listWithJustLinks.length > 0) {\n // @ts-expect-error - TODO: fix this\n ulWithLinks = ul;\n }\n });\n\n const listLinks: SyncToDatabaseTopicContent['resources'] =\n ulWithLinks !== undefined\n ? Array.from(ulWithLinks.querySelectorAll('li > a'))\n .map((link) => {\n const typePattern = /@([a-z.]+)@/;\n let linkText = link.textContent || '';\n const linkHref = link.getAttribute('href') || '';\n let linkType = linkText.match(typePattern)?.[1] || 'article';\n linkType = allowedOfficialRoadmapTopicResourceType.includes(\n linkType as any,\n )\n ? linkType\n : 'article';\n\n linkText = linkText.replace(typePattern, '');\n\n if (!linkText || !linkHref) {\n return null;\n }\n\n return {\n title: linkText,\n url: linkHref,\n type: linkType as AllowedOfficialRoadmapTopicResourceType,\n };\n })\n .filter((link) => link !== null)\n .sort((a, b) => {\n const order = [\n 'official',\n 'opensource',\n 'article',\n 'video',\n 'feed',\n ];\n return order.indexOf(a!.type) - order.indexOf(b!.type);\n })\n : [];\n\n const title = rootHtml.querySelector('h1');\n ulWithLinks?.remove();\n title?.remove();\n\n const allParagraphs = rootHtml.querySelectorAll('p');\n if (listLinks.length > 0 && allParagraphs.length > 0) {\n // to remove the view more see more from the description\n const lastParagraph = allParagraphs[allParagraphs.length - 1];\n lastParagraph?.remove();\n }\n\n const htmlStringWithoutLinks = rootHtml.toString();\n const description = htmlToMarkdown(htmlStringWithoutLinks);\n\n const updatedDescription =\n `# ${title?.textContent}\\n\\n${description}`.trim();\n\n const label = node?.data?.label as string;\n if (!label) {\n console.error(`🚨 Label is required: ${file}`);\n continue;\n }\n\n topics.push({\n roadmapSlug: roadmapId,\n nodeId,\n description: updatedDescription,\n resources: listLinks,\n });\n }\n\n await syncContentToDatabase(topics);\n console.log(\n `✅ Synced ${topics.length} topics to database for ${roadmapId}`,\n );\n } catch (error) {\n console.error(error);\n process.exit(1);\n }\n}\n" }, { "path": "scripts/migrate-editor-roadmap.ts", "content": "import fs from 'node:fs/promises';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport type { Node } from '@roadmapsh/editor';\nimport matter from 'gray-matter';\nimport type { RoadmapFrontmatter } from '../src/lib/roadmap';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\n// Directory containing the roadmaps\nconst ROADMAP_CONTENT_DIR = path.join(__dirname, '../src/data/roadmaps');\nconst allRoadmaps = await fs.readdir(ROADMAP_CONTENT_DIR);\n\nconst editorRoadmapIds = new Set();\nfor (const roadmapId of allRoadmaps) {\n const roadmapFrontmatterDir = path.join(\n ROADMAP_CONTENT_DIR,\n roadmapId,\n `${roadmapId}.md`,\n );\n const roadmapFrontmatterRaw = await fs.readFile(\n roadmapFrontmatterDir,\n 'utf-8',\n );\n const { data } = matter(roadmapFrontmatterRaw);\n\n const roadmapFrontmatter = data as RoadmapFrontmatter;\n if (roadmapFrontmatter.renderer === 'editor') {\n editorRoadmapIds.add(roadmapId);\n }\n}\n\nfor (const roadmapId of editorRoadmapIds) {\n const roadmapJSONDir = path.join(\n ROADMAP_CONTENT_DIR,\n roadmapId,\n `${roadmapId}.json`,\n );\n\n const roadmapJSONRaw = await fs.readFile(roadmapJSONDir, 'utf-8');\n const roadmapJSON = JSON.parse(roadmapJSONRaw);\n\n const roadmapNodes = roadmapJSON.nodes as Node[];\n const updatedNodes = roadmapNodes.map((node) => {\n const width = +(node?.width || node?.style?.width || 0);\n const height = +(node?.height || node?.style?.height || 0);\n\n const ADDITIONAL_WIDTH = 1;\n // adding one `1px` in width to avoid the node to be cut in half\n // this is a quick fix to avoid the issue\n if (node?.style?.width) {\n node.style.width = width + ADDITIONAL_WIDTH;\n }\n\n if (node?.width) {\n node.width = width + ADDITIONAL_WIDTH;\n }\n\n return {\n ...node,\n measured: {\n width: width + ADDITIONAL_WIDTH,\n height,\n },\n };\n });\n\n const updatedRoadmapJSON = {\n ...roadmapJSON,\n nodes: updatedNodes,\n };\n\n const updatedRoadmapJSONString = JSON.stringify(updatedRoadmapJSON, null, 2);\n await fs.writeFile(roadmapJSONDir, updatedRoadmapJSONString, 'utf-8');\n}\n" }, { "path": "scripts/official-roadmap-assets.ts", "content": "import playwright from 'playwright';\nimport type { OfficialRoadmapDocument } from '../src/queries/official-roadmap';\n\nasync function listAllRoadmaps(): Promise {\n const response = await fetch(\n 'https://roadmap.sh/api/v1-list-official-roadmaps',\n );\n const mainRoadmaps = await response.json();\n const beginnerResponse = await fetch(\n 'https://roadmap.sh/api/v1-list-official-beginner-roadmaps',\n );\n const beginnerRoadmaps = await beginnerResponse.json();\n const data = [...mainRoadmaps, ...beginnerRoadmaps];\n return data;\n}\n\n// Usage: tsx ./scripts/official-roadmap-assets.ts \n\nconst roadmapSlug = process.argv?.[2];\n\nconst allRoadmaps = await listAllRoadmaps();\nconst allowedRoadmapSlugs = allRoadmaps.map((roadmap) => roadmap.slug);\n\nconst roadmapSlugs = roadmapSlug ? [roadmapSlug] : allowedRoadmapSlugs;\n\nconsole.log(`Launching chromium`);\nconst browser = await playwright.chromium.launch();\n\nfor (const roadmapSlug of roadmapSlugs) {\n const roadmap = allRoadmaps.find((roadmap) => roadmap.slug === roadmapSlug);\n if (!roadmap) {\n console.error(`Roadmap ${roadmapSlug} not found`);\n continue;\n }\n\n const context = await browser.newContext();\n const page = await context.newPage();\n\n const pageUrl = `http://roadmap.sh/${roadmapSlug}/svg`;\n console.log(`Opening page ${pageUrl}`);\n await page.goto(pageUrl);\n await page.waitForSelector('#resource-svg-wrap');\n await page.waitForTimeout(5000);\n\n console.log(`Generating PDF ${pageUrl}`);\n await page.pdf({\n path: `./public/pdfs/roadmaps/${roadmapSlug}.pdf`,\n margin: { top: 0, right: 0, bottom: 0, left: 0 },\n height: roadmap?.dimensions?.height || 2000,\n width: roadmap?.dimensions?.width || 968,\n });\n\n console.log(`Generating png ${pageUrl}`);\n await page.locator('#resource-svg-wrap>svg').screenshot({\n path: `./public/roadmaps/${roadmapSlug}.png`,\n type: 'png',\n scale: 'device',\n });\n}\n\nconsole.log(`Closing browser`);\nawait browser.close();\n" }, { "path": "scripts/page-data-agg.cjs", "content": "const csv = require('csv-parser');\nconst fs = require('fs');\nconst path = require('path');\n\nconst csvFilePath = path.join(__dirname, '../data.csv');\n\nconst results = {};\nconst pageSummary = {};\n\nfs.createReadStream(csvFilePath)\n .pipe(\n csv({\n separator: ',',\n mapHeaders: ({ header, index }) =>\n header.toLowerCase().replace(/ /g, '_'),\n mapValues: ({ header, index, value }) => {\n if (header === 'page') {\n return (\n value\n .replace(/\"/g, '')\n .replace(/'/g, '')\n .replace(/`/g, '')\n .replace(/\\?r=/g, '#r#')\n .replace(/\\?.+?$/g, '')\n .replace(/#r#/g, '?r=')\n .replace(/\\/$/g, '') || '/'\n );\n }\n\n if (header !== 'month_of_year') {\n return parseInt(value, 10);\n }\n\n return value;\n },\n })\n )\n .on('data', (data) => {\n const { page, month_of_year, unique_pageviews, users } = data;\n const pageData = results[page] || {};\n const existingPageMonthData = pageData[month_of_year] || {};\n\n const existingViews = existingPageMonthData.views || 0;\n const existingUsers = existingPageMonthData.users || 0;\n\n const newViews = existingViews + unique_pageviews;\n const newUsers = existingUsers + users;\n\n pageData[month_of_year] = {\n views: newViews,\n users: newUsers,\n };\n\n results[page] = pageData;\n\n pageSummary[page] = pageSummary[page] || { views: 0, users: 0 };\n pageSummary[page].views += unique_pageviews;\n pageSummary[page].users += users;\n })\n .on('end', () => {\n const csvHeader = [\n 'Page',\n 'Jan 2022',\n 'Feb 2022',\n 'Mar 2022',\n 'Apr 2022',\n 'May 2022',\n 'Jun 2022',\n 'Jul 2022',\n 'Aug 2022',\n 'Sep 2022',\n 'Oct 2022',\n 'Nov 2022',\n 'Dec 2022',\n 'Jan 2023',\n 'Feb 2023',\n 'Mar 2023',\n 'Apr 2023',\n 'May 2023',\n 'Jun 2023',\n 'Jul 2023',\n 'Aug 2023',\n 'Sep 2023',\n 'Oct 2023',\n 'Nov 2023',\n 'Dec 2023',\n ];\n\n const csvRows = Object.keys(pageSummary)\n .filter(pageUrl => pageSummary[pageUrl].views > 10)\n .filter(pageUrl => !['/upcoming', '/pdfs', '/signup', '/login', '/@'].includes(pageUrl))\n .sort((pageA, pageB) => {\n const aViews = pageSummary[pageA].views;\n const bViews = pageSummary[pageB].views;\n\n return bViews - aViews;\n })\n .map((pageUrl) => {\n const rawPageResult = results[pageUrl];\n const pageResultCsvRow = [];\n\n csvHeader.forEach((csvHeaderItem) => {\n if (csvHeaderItem === 'Page') {\n pageResultCsvRow.push(pageUrl);\n return;\n }\n\n const csvHeaderItemAlt = csvHeaderItem\n .replace(/ /g, '_')\n .toLowerCase();\n\n const result = rawPageResult[csvHeaderItem || csvHeaderItemAlt] || {};\n const views = result.views || 0;\n const users = result.users || 0;\n\n pageResultCsvRow.push(users);\n });\n\n return pageResultCsvRow;\n });\n\n const finalCsvRows = [csvHeader, ...csvRows];\n const csvRowStrings = finalCsvRows.map((row) => {\n return row.join(',');\n });\n\n const csvString = csvRowStrings.join('\\n');\n fs.writeFileSync(path.join(__dirname, '../data-agg.csv'), csvString);\n });\n" }, { "path": "scripts/readme.md", "content": "## CLI Tools\n\n> A bunch of CLI scripts to make the development easier\n\n## `roadmap-links.cjs`\n\nGenerates a list of all the resources links in any roadmap file.\n\n## `compress-jsons.cjs`\n\nCompresses all the JSON files in the `public/jsons` folder\n\n## `update-sponsors.cjs`\n\nUpdates the sponsor ads on each roadmap page with the latest sponsor information in the Excel sheet.\n\n## `roadmap-content.cjs`\n\nCurrently, for any new roadmaps that we add, we do create the interactive roadmap but we end up leaving the content empty in the roadmap till we get time to fill it up manually.\n\nThis script populates all the content files with some minimal content from OpenAI so that the users visiting the website have something to read in the interactive roadmap till we get time to fill it up manually.\n\n## `roadmap-dirs.cjs`\n\nThis command is used to create the content folders and files for the interactivity of the roadmap. You can use the below command to generate the roadmap skeletons inside a roadmap directory:\n\n```bash\nnpm run roadmap-dirs [frontend|backend|devops|...]\n```\n\nFor the content skeleton to be generated, we should have proper grouping, and the group names in the project files. You can follow the steps listed below in order to add the meta information to the roadmap.\n\n- Remove all the groups from the roadmaps through the project editor. Select all and press `cmd+shift+g`\n- Identify the boxes that should be clickable and group them together with `cmd+shift+g`\n- Assign the name to the groups.\n - Group names have the format of `[sort]-[slug]` e.g. `100-internet`. Each group name should start with a number starting from 100 which helps with sorting of the directories and the files. Groups at the same level have the sequential sorting information.\n - Each groups children have a separate group and have the name similar to `[sort]-[parent-slug]:[child-slug]` where sort refers to the sorting of the `child-slug` and not the parent. Also parent-slug does not need to have the sorting information as a part of slug e.g. if parent was `100-internet` the children would be `100-internet:how-does-the-internet-work`, `101-internet:what-is-http`, `102-internet:browsers`.\n" }, { "path": "scripts/refresh-assets.ts", "content": "#!/usr/bin/env tsx\n\nimport { execSync } from 'child_process';\nimport * as fs from 'fs';\nimport * as path from 'path';\n\nconst roadmapsDir = path.join(process.cwd(), 'src/data/roadmaps');\n\nconst roadmapIds = fs.readdirSync(roadmapsDir)\n .filter(item => {\n const fullPath = path.join(roadmapsDir, item);\n return fs.statSync(fullPath).isDirectory();\n });\n\nconsole.log(`Found ${roadmapIds.length} roadmaps to process...`);\n\nconst promises = roadmapIds.map(roadmapId => {\n return new Promise((resolve, reject) => {\n console.log(`Processing: ${roadmapId}`);\n \n try {\n execSync(`npm run roadmap-assets ${roadmapId}`, {\n stdio: 'inherit',\n cwd: process.cwd()\n });\n console.log(`✓ Completed: ${roadmapId}`);\n resolve(roadmapId);\n } catch (error) {\n console.error(`✗ Failed: ${roadmapId}`, error);\n reject(error);\n }\n });\n});\n\nPromise.allSettled(promises).then(results => {\n const successful = results.filter(r => r.status === 'fulfilled').length;\n const failed = results.filter(r => r.status === 'rejected').length;\n \n console.log(`\\n=== Summary ===`);\n console.log(`✓ Successful: ${successful}/${roadmapIds.length}`);\n if (failed > 0) {\n console.log(`✗ Failed: ${failed}/${roadmapIds.length}`);\n }\n});" }, { "path": "scripts/rename-content.ts", "content": "import fs from 'fs';\nimport path from 'path';\n\nconst roadmapDirs = fs.readdirSync(\n path.join(__dirname, '..', 'src', 'data', 'roadmaps'),\n);\n\nroadmapDirs.forEach((roadmapDir) => {\n const roadmapDirPath = path.join(\n __dirname,\n '..',\n 'src',\n 'data',\n 'roadmaps',\n roadmapDir,\n 'content',\n );\n\n const roadmapDirContent = fs.readdirSync(roadmapDirPath);\n\n roadmapDirContent.forEach((content) => {\n const contentPath = path.join(roadmapDirPath, content);\n const contentStats = fs.statSync(contentPath);\n\n const oldName = path.basename(contentPath);\n const newName = oldName.replace(/^(\\d+)-/, '');\n\n fs.renameSync(contentPath, path.join(roadmapDirPath, newName));\n\n if (contentStats.isDirectory()) {\n const contentDirContent = fs.readdirSync(contentPath);\n \n contentDirContent.forEach((contentDir) => {\n const contentDirPath = path.join(contentPath, contentDir);\n const contentDirStats = fs.statSync(contentDirPath);\n\n const oldName = path.basename(contentDirPath);\n const newName = oldName.replace(/^(\\d+)-/, '');\n\n fs.renameSync(contentDirPath, path.join(contentPath, newName));\n\n if (contentDirStats.isDirectory()) {\n const contentDirContent = fs.readdirSync(contentDirPath);\n\n contentDirContent.forEach((contentDir) => {\n const contentDirPath2 = path.join(contentDirPath, contentDir);\n const contentDirStats2 = fs.statSync(contentDirPath2);\n\n const oldName2 = path.basename(contentDirPath2);\n const newName2 = oldName2.replace(/^(\\d+)-/, '');\n\n fs.renameSync(contentDirPath2, path.join(contentDirPath, newName2));\n });\n }\n });\n }\n });\n});\n" }, { "path": "scripts/roadmap-content.cjs", "content": "const fs = require('fs');\nconst path = require('path');\n\nconst OPEN_AI_API_KEY = process.env.OPEN_AI_API_KEY;\nconst ALL_ROADMAPS_DIR = path.join(__dirname, '../src/data/roadmaps');\n\nconst roadmapId = process.argv[2];\n\nconst allowedRoadmapIds = fs.readdirSync(ALL_ROADMAPS_DIR);\nif (!roadmapId) {\n console.error('roadmapId is required');\n process.exit(1);\n}\n\nif (!allowedRoadmapIds.includes(roadmapId)) {\n console.error(`Invalid roadmap key ${roadmapId}`);\n console.error(`Allowed keys are ${allowedRoadmapIds.join(', ')}`);\n process.exit(1);\n}\n\nconst ROADMAP_CONTENT_DIR = path.join(ALL_ROADMAPS_DIR, roadmapId, 'content');\nconst OpenAI = require('openai');\n\nconst openai = new OpenAI({\n apiKey: OPEN_AI_API_KEY,\n});\n\nfunction getFilesInFolder(folderPath, fileList = {}) {\n const files = fs.readdirSync(folderPath);\n\n files.forEach((file) => {\n const filePath = path.join(folderPath, file);\n const stats = fs.statSync(filePath);\n\n if (stats.isDirectory()) {\n getFilesInFolder(filePath, fileList);\n } else if (stats.isFile()) {\n const fileUrl = filePath\n .replace(ROADMAP_CONTENT_DIR, '') // Remove the content folder\n .replace(/\\/\\d+-/g, '/') // Remove ordering info `/101-ecosystem`\n .replace(/\\/index\\.md$/, '') // Make the `/index.md` to become the parent folder only\n .replace(/\\.md$/, ''); // Remove `.md` from the end of file\n\n fileList[fileUrl] = filePath;\n }\n });\n\n return fileList;\n}\n\n/**\n * Write the topic content for the given topic\n * @param currTopicUrl\n * @returns {Promise}\n */\nfunction writeTopicContent(currTopicUrl) {\n const [parentTopic, childTopic] = currTopicUrl\n .replace(/^\\d+-/g, '/')\n .replace(/:/g, '/')\n .replace(/^\\//, '')\n .split('/')\n .slice(-2)\n .map((topic) => topic.replace(/-/g, ' '));\n\n const roadmapTitle = roadmapId.replace(/-/g, ' ');\n\n let prompt = `I will give you a topic and you need to write a brief introduction for that with regards to \"${roadmapTitle}\". Your format should be as follows and be in strictly markdown format:\n\n# (Put a heading for the topic without adding parent \"Subtopic in Topic\" or \"Topic in Roadmap\" etc.)\n\n(Write me a brief introduction for the topic with regards to \"${roadmapTitle}\")\n\n(add any code snippets ONLY if necessary and makes sense)\n\n`;\n\n if (!childTopic) {\n prompt += `First topic is: ${parentTopic}`;\n } else {\n prompt += `First topic is: ${childTopic} under ${parentTopic}`;\n }\n\n console.log(`Generating '${childTopic || parentTopic}'...`);\n\n return new Promise((resolve, reject) => {\n openai.chat.completions\n .create({\n model: 'gpt-4',\n messages: [\n {\n role: 'user',\n content: prompt,\n },\n ],\n })\n .then((response) => {\n const article = response.choices[0].message.content;\n\n resolve(article);\n })\n .catch((err) => {\n reject(err);\n });\n });\n}\n\nasync function writeFileForGroup(group, topicUrlToPathMapping) {\n const topicId = group?.properties?.controlName;\n const topicTitle = group?.children?.controls?.control?.find(\n (control) => control?.typeID === 'Label',\n )?.properties?.text;\n const currTopicUrl = topicId?.replace(/^\\d+-/g, '/')?.replace(/:/g, '/');\n if (!currTopicUrl) {\n return;\n }\n\n const contentFilePath = topicUrlToPathMapping[currTopicUrl];\n\n if (!contentFilePath) {\n console.log(`Missing file for: ${currTopicUrl}`);\n return;\n }\n\n const currentFileContent = fs.readFileSync(contentFilePath, 'utf8');\n const isFileEmpty = currentFileContent.replace(/^#.+/, ``).trim() === '';\n\n if (!isFileEmpty) {\n console.log(`Ignoring ${topicId}. Not empty.`);\n return;\n }\n\n let newFileContent = `# ${topicTitle}`;\n\n if (!OPEN_AI_API_KEY) {\n console.log(`Writing ${topicId}..`);\n\n fs.writeFileSync(contentFilePath, newFileContent, 'utf8');\n return;\n }\n\n const topicContent = await writeTopicContent(currTopicUrl);\n\n console.log(`Writing ${topicId}..`);\n fs.writeFileSync(contentFilePath, topicContent, 'utf8');\n\n // console.log(currentFileContent);\n // console.log(currTopicUrl);\n // console.log(topicTitle);\n // console.log(topicUrlToPathMapping[currTopicUrl]);\n}\n\nasync function run() {\n const topicUrlToPathMapping = getFilesInFolder(ROADMAP_CONTENT_DIR);\n\n const roadmapJson = require(\n path.join(ALL_ROADMAPS_DIR, `${roadmapId}/${roadmapId}`),\n );\n\n const groups = roadmapJson?.mockup?.controls?.control?.filter(\n (control) =>\n control.typeID === '__group__' &&\n !control.properties?.controlName?.startsWith('ext_link'),\n );\n\n if (!OPEN_AI_API_KEY) {\n console.log('----------------------------------------');\n console.log('OPEN_AI_API_KEY not found. Skipping openai api calls...');\n console.log('----------------------------------------');\n }\n\n const writePromises = [];\n for (let group of groups) {\n writePromises.push(writeFileForGroup(group, topicUrlToPathMapping));\n }\n\n console.log('Waiting for all files to be written...');\n await Promise.all(writePromises);\n}\n\nrun()\n .then(() => {\n console.log('Done');\n })\n .catch((err) => {\n console.error(err);\n process.exit(1);\n });\n" }, { "path": "scripts/roadmap-dirs.cjs", "content": "const fs = require('fs');\nconst path = require('path');\n\nconst CONTENT_DIR = path.join(__dirname, '../content');\n// Directory containing the roadmaps\nconst ROADMAP_CONTENT_DIR = path.join(__dirname, '../src/data/roadmaps');\nconst roadmapId = process.argv[2];\n\nconst allowedRoadmapIds = fs.readdirSync(ROADMAP_CONTENT_DIR);\nif (!roadmapId) {\n console.error('roadmapId is required');\n process.exit(1);\n}\n\nif (!allowedRoadmapIds.includes(roadmapId)) {\n console.error(`Invalid roadmap key ${roadmapId}`);\n console.error(`Allowed keys are ${allowedRoadmapIds.join(', ')}`);\n process.exit(1);\n}\n\n// Directory holding the roadmap content files\nconst roadmapDirName = fs\n .readdirSync(ROADMAP_CONTENT_DIR)\n .find((dirName) => dirName.replace(/\\d+-/, '') === roadmapId);\n\nif (!roadmapDirName) {\n console.error('Roadmap directory not found');\n process.exit(1);\n}\n\nconst roadmapDirPath = path.join(ROADMAP_CONTENT_DIR, roadmapDirName);\nconst roadmapContentDirPath = path.join(\n ROADMAP_CONTENT_DIR,\n roadmapDirName,\n 'content'\n);\n\n// If roadmap content already exists do not proceed as it would override the files\nif (fs.existsSync(roadmapContentDirPath)) {\n console.error(`Roadmap content already exists @ ${roadmapContentDirPath}`);\n process.exit(1);\n}\n\nfunction prepareDirTree(control, dirTree, dirSortOrders) {\n // Directories are only created for groups\n if (control.typeID !== '__group__') {\n return;\n }\n\n // e.g. 104-testing-your-apps:other-options\n const controlName = control?.properties?.controlName || '';\n // e.g. 104\n const sortOrder = controlName.match(/^\\d+/)?.[0];\n\n // No directory for a group without control name\n if (!controlName || (!sortOrder && !controlName.startsWith('check:'))) {\n return;\n }\n\n // e.g. testing-your-apps:other-options\n const controlNameWithoutSortOrder = controlName.replace(/^\\d+-/, '').replace(/^check:/, '');\n // e.g. ['testing-your-apps', 'other-options']\n const dirParts = controlNameWithoutSortOrder.split(':');\n\n // Nest the dir path in the dirTree\n let currDirTree = dirTree;\n dirParts.forEach((dirPart) => {\n currDirTree[dirPart] = currDirTree[dirPart] || {};\n currDirTree = currDirTree[dirPart];\n });\n\n dirSortOrders[controlNameWithoutSortOrder] = Number(sortOrder);\n\n const childrenControls = control.children.controls.control;\n // No more children\n if (childrenControls.length) {\n childrenControls.forEach((childControl) => {\n prepareDirTree(childControl, dirTree, dirSortOrders);\n });\n }\n\n return { dirTree, dirSortOrders };\n}\n\nconst roadmap = require(path.join(\n __dirname,\n `../src/data/roadmaps/${roadmapId}/${roadmapId}`\n));\n\nconst controls = roadmap.mockup.controls.control;\n\n// Prepare the dir tree that we will be creating and also calculate the sort orders\nconst dirTree = {};\nconst dirSortOrders = {};\n\ncontrols.forEach((control) => {\n prepareDirTree(control, dirTree, dirSortOrders);\n});\n\n/**\n * @param parentDir Parent directory in which directory is to be created\n * @param dirTree Nested dir tree to be created\n * @param sortOrders Mapping from groupName to sort order\n * @param filePaths The mapping from groupName to file path\n */\nfunction createDirTree(parentDir, dirTree, sortOrders, filePaths = {}) {\n const childrenDirNames = Object.keys(dirTree);\n const hasChildren = childrenDirNames.length !== 0;\n\n // @todo write test for this, yolo for now\n const groupName = parentDir\n .replace(roadmapContentDirPath, '') // Remove base dir path\n .replace(/(^\\/)|(\\/$)/g, '') // Remove trailing slashes\n .replace(/(^\\d+?-)/g, '') // Remove sorting information\n .replaceAll('/', ':') // Replace slashes with `:`\n .replace(/:\\d+-/, ':');\n\n const humanizedGroupName = groupName\n .split(':')\n .pop()\n ?.replaceAll('-', ' ')\n .replace(/^\\w/, ($0) => $0.toUpperCase());\n\n const sortOrder = sortOrders[groupName] || '';\n\n // Attach sorting information to dirname\n // e.g. /roadmaps/100-frontend/content/internet\n // ———> /roadmaps/100-frontend/content/103-internet\n if (sortOrder) {\n parentDir = parentDir.replace(/(.+?)([^\\/]+)?$/, `$1${sortOrder}-$2`);\n }\n\n // If no children, create a file for this under the parent directory\n if (!hasChildren) {\n let fileName = `${parentDir}.md`;\n fs.writeFileSync(fileName, `# ${humanizedGroupName}`);\n\n filePaths[groupName || 'home'] = fileName.replace(CONTENT_DIR, '');\n return filePaths;\n }\n\n // There *are* children, so create the parent as a directory\n // and create `index.md` as the content file for this\n fs.mkdirSync(parentDir);\n\n let readmeFilePath = path.join(parentDir, 'index.md');\n fs.writeFileSync(readmeFilePath, `# ${humanizedGroupName}`);\n\n filePaths[groupName || 'home'] = readmeFilePath.replace(CONTENT_DIR, '');\n\n // For each of the directory names, create a\n // directory inside the given directory\n childrenDirNames.forEach((dirName) => {\n createDirTree(\n path.join(parentDir, dirName),\n dirTree[dirName],\n dirSortOrders,\n filePaths\n );\n });\n\n return filePaths;\n}\n\n// Create directories and get back the paths for created directories\ncreateDirTree(roadmapContentDirPath, dirTree, dirSortOrders);\nconsole.log('Created roadmap content directory structure');\n" }, { "path": "scripts/roadmap-links.cjs", "content": "const fs = require('fs');\nconst path = require('path');\n\nconst roadmapId = process.argv[2];\nif (!roadmapId) {\n console.error('Error: roadmapId is required');\n}\n\nconst fullPath = path.join(__dirname, `../src/data/roadmaps/${roadmapId}`);\nif (!fs.existsSync(fullPath)) {\n console.error(`Error: path not found: ${fullPath}!`);\n process.exit(1);\n}\n\nfunction readFiles(folderPath) {\n const stats = fs.lstatSync(folderPath);\n\n if (stats.isFile()) {\n return [folderPath];\n }\n\n const folderContent = fs.readdirSync(folderPath);\n let files = [];\n\n for (const file of folderContent) {\n const filePath = path.join(folderPath, file);\n\n files = [...files, ...readFiles(filePath)];\n }\n\n return files;\n}\n\nconst files = readFiles(fullPath);\nlet allLinks = [];\n\nfiles.forEach((file) => {\n const fileContent = fs.readFileSync(file, 'utf-8');\n const matches = [...fileContent.matchAll(/\\[[^\\]]+]\\((https?:\\/\\/[^)]+)\\)/g)];\n\n allLinks = [...allLinks, ...matches.map((match) => match[1])];\n});\n\nallLinks.map((link) => console.log(link));\n" }, { "path": "scripts/roadmap-tree-content.js", "content": "import OpenAI from 'openai';\nimport path from 'path';\nimport fs from 'fs';\nimport { fileURLToPath } from 'url';\nimport { dirname } from 'path';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = dirname(__filename);\n\n/**\n * @typedef {Object} Node\n * @property {string} id - The unique identifier for the node\n * @property {string} text - The text content of the node\n */\n\nconst roadmapId = 'ai-agents';\n\n/** @type {Node[]} */\nconst nodes = [\n {\n id: 'ZF5_5Y5zqa75Ov22JACX6',\n text: 'AI Agents > Transformer Models and LLMs',\n },\n {\n id: 'GAjuWyJl9CI1nqXBp6XCf',\n text: 'AI Agents > LLM Fundamentals > Model Mechanis > Tokenization',\n },\n {\n id: 'dyn1LSioema-Bf9lLTgUZ',\n text: 'AI Agents > LLM Fundamentals > Model Mechanis > Context Windows',\n },\n {\n id: '1fiWPBV99E2YncqdCgUw2',\n text: 'AI Agents > LLM Fundamentals > Model Mechanis > Token Based Pricing',\n },\n {\n id: 'L1zL1GzqjSAjF06pIIXhy',\n text: 'AI Agents > LLM Fundamentals > Generation Controls > Temperature',\n },\n {\n id: 'icbp1NjurQfdM0dHnz6v2',\n text: 'AI Agents > LLM Fundamentals > Generation Controls > Top-p',\n },\n {\n id: 'z_N-Y0zGkv8_qHPuVtimL',\n text: 'AI Agents > LLM Fundamentals > Generation Controls > Frequency Penalty',\n },\n {\n id: 'Vd8ycw8pW-ZKvg5WYFtoh',\n text: 'AI Agents > LLM Fundamentals > Generation Controls > Presence Penalty',\n },\n {\n id: 'K0G-Lw069jXUJwZqHtybd',\n text: 'AI Agents > LLM Fundamentals > Generation Controls > Stopping Criteria',\n },\n {\n id: 'Bn_BkthrVX_vOuwQzvPZa',\n text: 'AI Agents > LLM Fundamentals > Generation Controls > Max Length',\n },\n {\n id: 'DSJAhQhc1dQmBHQ8ZkTau',\n text: 'AI Agents > Model Families and Licences > Open Weight Models',\n },\n {\n id: 'tJYmEDDwK0LtEux-kwp9B',\n text: 'AI Agents > Model Families and Licences > Closed Weight Models',\n },\n {\n id: 'i2NE6haX9-7mdoV5LQ3Ah',\n text: 'AI Agents > Understand the Basics > Streamed vs Unstreamed Responses',\n },\n {\n id: 'N3yZfUxphxjiupqGpyaS9',\n text: 'AI Agents > Understand the Basics > Reasoning vs Standard Models',\n },\n {\n id: '5OW_6o286mj470ElFyJ_5',\n text: 'AI Agents > Understand the Basics > Fine-tuning vs Prompt Engineering',\n },\n {\n id: 'UIm54UmICKgep6s8Itcyv',\n text: 'AI Agents > Understand the Basics > Embeddings and Vector Search',\n },\n {\n id: 'qwVQOwBTLA2yUgRISzC8k',\n text: 'AI Agents > Understand the Basics > Understand the Basics of RAG',\n },\n {\n id: 'B8dzg61TGaknuruBgkEJd',\n text: 'AI Agents > Understand the Basics > Pricing of Common Models',\n },\n {\n id: 'aFZAm44nP5NefX_9TpT0A',\n text: 'AI Agents > AI Agents 101 > What are AI Agents?',\n },\n {\n id: '2zsOUWJQ8e7wnoHmq1icG',\n text: 'AI Agents > AI Agents 101 > What are Tools?',\n },\n {\n id: 'Eih4eybuYB3C2So8K0AT3',\n text: 'AI Agents > AI Agents 101 > Agent Loop',\n },\n {\n id: 'LU76AhCYDjxdBhpMQ4eMU',\n text: 'AI Agents > AI Agents 101 > Agent Loop > Perception / User Input',\n },\n {\n id: 'ycPRgRYR4lEBQr_xxHKnM',\n text: 'AI Agents > AI Agents 101 > Agent Loop > Reason and Plan',\n },\n {\n id: 'sHYd4KsKlmw5Im3nQ19W8',\n text: 'AI Agents > AI Agents 101 > Agent Loop > Acting / Tool Invocation',\n },\n {\n id: 'ZJTrun3jK3zBGOTm1jdMI',\n text: 'AI Agents > AI Agents 101 > Agent Loop > Observation & Reflection',\n },\n {\n id: 'PPdAutqJF5G60Eg9lYBND',\n text: 'AI Agents > AI Agents 101 > Example Usecases > Personal assistant',\n },\n {\n id: 'PK8w31GlvtmAuU92sHaqr',\n text: 'AI Agents > AI Agents 101 > Example Usecases > Code generation',\n },\n {\n id: 'wKYEaPWNsR30TIpHaxSsq',\n text: 'AI Agents > AI Agents 101 > Example Usecases > Data analysis',\n },\n {\n id: '5oLc-235bvKhApxzYFkEc',\n text: 'AI Agents > AI Agents 101 > Example Usecases > Web Scraping / Crawling',\n },\n {\n id: 'ok8vN7VtCgyef5x6aoQaL',\n text: 'AI Agents > AI Agents 101 > Example Usecases > NPC / Game AI',\n },\n {\n id: 'Y8EqzFx3qxtrSh7bWbbV8',\n text: 'AI Agents > Prompt Engineering > What is Prompt Engineering',\n },\n {\n id: 'qFKFM2qNPEN7EoD0V-1SM',\n text: 'AI Agents > Prompt Engineering > Writing Good Prompts > Be specific in what you want',\n },\n {\n id: '6I42CoeWX-kkFXTKAY7rw',\n text: 'AI Agents > Prompt Engineering > Writing Good Prompts > Provide additional context',\n },\n {\n id: 'sUwdtOX550tSdceaeFPmF',\n text: 'AI Agents > Prompt Engineering > Writing Good Prompts > Use relevant technical terms',\n },\n {\n id: 'yulzE4ZNLhXOgHhG7BtZQ',\n text: 'AI Agents > Prompt Engineering > Writing Good Prompts > Use Examples in your Prompt',\n },\n {\n id: 'noTuUFnHSBzn7GKG9UZEi',\n text: 'AI Agents > Prompt Engineering > Writing Good Prompts > Iterate and Test your Prompts',\n },\n {\n id: 'wwHHlEoPAx0TLxbtY6nMA',\n text: 'AI Agents > Prompt Engineering > Writing Good Prompts > Specify Length, format etc',\n },\n {\n id: 'qakbxB8xe7Y8gejC5cZnK',\n text: 'AI Agents > AI Agents 101 > Tools / Actions > Tool Definition',\n },\n {\n id: 'kBtqT8AduLoYDWopj-V9_',\n text: 'AI Agents > Tools / Actions > Examples of Tools > Web Search',\n },\n {\n id: 'mS0EVCkWuPN_GkVPng4A2',\n text: 'AI Agents > Tools / Actions > Examples of Tools > Code Execution / REPL',\n },\n {\n id: 'sV1BnA2-qBnXoKpUn-8Ub',\n text: 'AI Agents > Tools / Actions > Examples of Tools > Database Queries',\n },\n {\n id: '52qxjZILV-X1isup6dazC',\n text: 'AI Agents > Tools / Actions > Examples of Tools > API Requests > Tools / Actions > Examples of Tools > API Requests',\n },\n {\n id: 'qaNr5I-NQPnfrRH7ynGTl',\n text: 'AI Agents > Tools / Actions > Examples of Tools > Email / Slack / SMS',\n },\n {\n id: 'BoJqZvdGam4cd6G6yK2IV',\n text: 'AI Agents > Tools / Actions > Examples of Tools > File System Access',\n },\n {\n id: '1B0IqRNYdtbHDi1jHSXuI',\n text: 'AI Agents > Model Context Protocol (MCP)',\n },\n {\n id: '9FryAIrWRHh8YlzKX3et5',\n text: 'AI Agents > Model Context Protocol (MCP) > Core Components > MCP Hosts',\n },\n {\n id: 'CGVstUxVXLJcYZrwk3iNQ',\n text: 'AI Agents > Model Context Protocol (MCP) > Core Components > MCP Client',\n },\n {\n id: 'yv_-87FVM7WKn5iv6LW9q',\n text: 'AI Agents > Model Context Protocol (MCP) > Core Components > MCP Servers',\n },\n {\n id: '1NXIN-Hbjl5rPy_mqxQYW',\n text: 'AI Agents > Model Context Protocol (MCP) > Creating MCP Servers',\n },\n {\n id: 'iBtJp24F_kJE3YlBsW60s',\n text: 'AI Agents > Model Context Protocol (MCP) > Creating MCP Servers > Deployment Modes > Local Desktop',\n },\n {\n id: 'dHNMX3_t1KSDdAWqgdJXv',\n text: 'AI Agents > Model Context Protocol (MCP) > Creating MCP Servers > Deployment Modes > Remote / Cloud',\n },\n {\n id: 'TBH_DZTAfR8Daoh-njNFC',\n text: 'AI Agents > Agent Memory > What is Agent Memory?',\n },\n {\n id: 'M3U6RfIqaiut2nuOibY8W',\n text: 'AI Agents > Agent Memory > Short Term Memory',\n },\n {\n id: 'Ue633fz6Xu2wa2-KOAtdP',\n text: 'AI Agents > Agent Memory > What is Agent Memory? > Long Term Memory',\n },\n {\n id: 'EfCCNqLMJpWKKtamUa5gK',\n text: 'AI Agents > Agent Memory > What is Agent Memory? > Episodic vs Semantic Memory',\n },\n {\n id: 'wkS4yOJ3JdZQE_yBID8K7',\n text: 'AI Agents > Agent Memory > What is Agent Memory? > Maintaining Memory > RAG and Vector Databases',\n },\n {\n id: 'QJqXHV8VHPTnfYfmKPzW7',\n text: 'AI Agents > Agent Memory > What is Agent Memory? > Maintaining Memory > User Profile Storage',\n },\n {\n id: 'jTDC19BTWCqxqMizrIJHr',\n text: 'AI Agents > Agent Memory > Maintaining Memory > Summarization / Compression',\n },\n {\n id: 'm-97m7SI0XpBnhEE8-_1S',\n text: 'AI Agents > Agent Memory > Maintaining Memory > Forgetting / Aging Strategies',\n },\n {\n id: 'cW8O4vLLKEG-Q0dE8E5Zp',\n text: 'AI Agents > Agent Architectures > Common Architectures > RAG Agent',\n },\n {\n id: '53xDks6JQ33fHMa3XcuCd',\n text: 'AI Agents > Agent Architectures > Common Architectures > ReAct (Reason + Act)',\n },\n {\n id: 'qwdh5pkBbrF8LKPxbZp4F',\n text: 'AI Agents > Agent Architectures > Common Architectures > Chain of Thought (CoT)',\n },\n {\n id: '6YLCMWzystao6byCYCTPO',\n text: 'AI Agents > Agent Architectures > Common Architectures > Planner Executor',\n },\n {\n id: 'Ep8RoZSy_Iq_zWXlGQLZo',\n text: 'AI Agents > Agent Architectures > Common Architectures > DAG Agents',\n },\n {\n id: 'Nmy1PoB32DcWZnPM8l8jT',\n text: 'AI Agents > Agent Architectures > Common Architectures > Tree-of-Thought',\n },\n {\n id: 'hj1adjkG9nalXKZ-Youn0',\n text: 'AI Agents > Agent Architectures > Common Architectures > Tree-of-Thought',\n },\n {\n id: 'US6T5dXM8IY9V2qZnTOFW',\n text: 'AI Agents > Building Agents > Manual (from scratch)',\n },\n {\n id: 'aafZxtjxiwzJH1lwHBODi',\n text: 'AI Agents > Building Agents > LLM Native \"Function Calling\"',\n },\n {\n id: 'AQtxTTxmBpfl8BMgJbGzc',\n text: 'AI Agents > Building Agents > LLM Native \"Function Calling\" > OpenAI Functions Calling',\n },\n {\n id: '37GBFVZ2J2d5r8bd1ViHq',\n text: 'AI Agents > Building Agents > LLM Native \"Function Calling\" > OpenAI Assistant API',\n },\n {\n id: '_iIsBJTVS6OBf_dsdmbVO',\n text: 'AI Agents > Building Agents > LLM Native \"Function Calling\" > Gemini Function Calling',\n },\n {\n id: '1EZFbDHA5J5_5BPMLMxXb',\n text: 'AI Agents > Building Agents > LLM Native \"Function Calling\" > Anthropic Tool Use',\n },\n {\n id: 'Ka6VpCEnqABvwiF9vba7t',\n text: 'AI Agents > Building Agents > Building Using Frameworks > Langchain',\n },\n {\n id: 'iEHF-Jm3ck-Iu85EbCoDi',\n text: 'AI Agents > Building Agents > Building Using Frameworks > LlamaIndex',\n },\n {\n id: 'XS-FsvtrXGZ8DPrwOsnlI',\n text: 'AI Agents > Building Agents > Building Using Frameworks > Haystack',\n },\n {\n id: '7YtnQ9-KIvGPSpDzEDexl',\n text: 'AI Agents > Building Agents > Building Using Frameworks > AutoGen',\n },\n {\n id: 'uFPJqgU4qGvZyxTv-osZA',\n text: 'AI Agents > Building Agents > Building Using Frameworks > CrewAI',\n },\n {\n id: 'eWxQiBrxIUG2JNcrdfIHS',\n text: 'AI Agents > Building Agents > Building Using Frameworks > Smol Depot',\n },\n {\n id: 'v8qLnyFRnEumodBYxQSXQ',\n text: 'AI Agents > Building Agents > Evaluation and Testing > Metrics to Track',\n },\n {\n id: 'qo_O4YAe4-MTP_ZJoXJHR',\n text: 'AI Agents > Evaluation and Testing > Unit Testing for Individual Tools',\n },\n {\n id: 'P9-SiIda3TSjHsfkI5OUV',\n text: 'AI Agents > Evaluation and Testing > Integration Testing for Flows',\n },\n {\n id: 'rHxdxN97ZcU7MPl8L1jzN',\n text: 'AI Agents > Evaluation and Testing > Human in the Loop Evaluation',\n },\n {\n id: 'xp7TCTRE9HP60_rGzTUF6',\n text: 'AI Agents > Evaluation and Testing > Frameworks > LangSmith',\n },\n {\n id: '0924QUH1wV7Mp-Xu0FAhF',\n text: 'AI Agents > Evaluation and Testing > Frameworks > DeepEval',\n },\n {\n id: 'YzEDtGEaMaMWVt0W03HRt',\n text: 'AI Agents > Evaluation and Testing > Frameworks > Ragas',\n },\n {\n id: 'zs6LM8WEnb0ERWpiaQCgc',\n text: 'AI Agents > Debugging and Monitoring > Structured logging & tracing',\n },\n {\n id: 'zs6LM8WEnb0ERWpiaQCgc',\n text: 'AI Agents > Debugging and Monitoring > Structured logging & tracing',\n },\n {\n id: 'SS8mGqf9wfrNqenIWvN8Z',\n text: 'AI Agents > Observability Tools > LangSmith',\n },\n {\n id: 'MLxP5N0Vrmwh-kyvNeGXn',\n text: 'AI Agents > Observability Tools > Helicone',\n },\n {\n id: 'UoIheaJlShiceafrWALEH',\n text: 'AI Agents > Observability Tools > LangFuse',\n },\n {\n id: '7UqPXUzqKYXklnB3x-tsv',\n text: 'AI Agents > Observability Tools > openllmetry',\n },\n {\n id: 'SU2RuicMUo8tiAsQtDI1k',\n text: 'AI Agents > Security & Ethics > Prompt Injection / Jailbreaks',\n },\n {\n id: 'UVzLGXG6K7HQVHmw8ZAv2',\n text: 'AI Agents > Security & Ethics > Tool sandboxing / Permissioning',\n },\n {\n id: 'rdlYBJNNyZUshzsJawME4',\n text: 'AI Agents > Security & Ethics > Data Privacy + PII Redaction',\n },\n {\n id: 'EyLo2j8IQsIK91SKaXkmK',\n text: 'AI Agents > Security & Ethics > Bias & Toxicity Guardrails',\n },\n {\n id: '63nsfJFO1BwjLX_ZVaPFC',\n text: 'AI Agents > Security & Ethics > Safety + Red Team Testing',\n },\n];\n\nconst OPENAI_API_KEY = process.env.OPENAI_API_KEY;\n\nif (!OPENAI_API_KEY) {\n console.error('OPENAI_API_KEY is not set');\n process.exit(1);\n}\n\nconst openai = new OpenAI({\n apiKey: OPENAI_API_KEY,\n});\n\nconst prompt = `\n You are a helpful assistant that can help me generate content for a roadmap tree.\n You will be given a roadmap topic in the form of \"Parent > Child > Leaf\". You need\n to generate a single paragraph explaining the topic.\n Also, I hate it when you say \"In the realm of...\" \n or \"In the context of...\" or \"..in the context of...\" or \"when we talk about...\" or something\n similar.\n IMPORTANT: Use simple and clear English. Avoid complex words and jargon when possible.\n Write in a way that is easy to understand. Use short sentences and common words.\n`;\n\n/**\n * Generates content for a given node using OpenAI's GPT model\n * @param {Node} node - The node to generate content for\n * @returns {Promise} The generated content\n */\nconst generateContent = async (node) => {\n try {\n const content = await openai.chat.completions.create({\n model: 'o3',\n messages: [\n { role: 'system', content: prompt },\n {\n role: 'user',\n content: `Node: ${node.text}`,\n },\n ],\n });\n\n return content.choices[0].message.content;\n } catch (error) {\n console.error(\n `Error generating content for node ${node.id}:`,\n error.message,\n );\n throw error;\n }\n};\n\nconst roadmapContentDir = path.join(\n __dirname,\n `../src/data/roadmaps/${roadmapId}/content`,\n);\nconst contentFiles = fs.readdirSync(roadmapContentDir);\n\n/**\n * Processes a single node by generating content and writing to file\n * @param {Node} node - The node to process\n * @param {string} roadmapContentDir - Directory path for content files\n * @param {string[]} contentFiles - List of existing content files\n * @returns {Promise}\n */\nconst processNode = async (node, roadmapContentDir, contentFiles) => {\n try {\n const nodeId = node.id;\n const relevantFileName = contentFiles.find((file) =>\n file.endsWith(`${nodeId}.md`),\n );\n\n if (!relevantFileName) {\n console.warn(`No matching file found for node ${nodeId}`);\n return;\n }\n\n const fileTitle = node.text\n .replace(/\\s+>\\s+/g, '>')\n .split('>')\n .pop();\n\n const content = await generateContent(node);\n const filePath = path.join(roadmapContentDir, relevantFileName);\n\n await fs.promises.writeFile(filePath, `# ${fileTitle}\\n\\n${content}`);\n console.log(`Successfully processed node ${nodeId}`);\n } catch (error) {\n console.error(`Failed to process node ${node.id}:`, error.message);\n }\n};\n\n/**\n * Main function to run the content generation\n * @returns {Promise}\n */\nconst main = async () => {\n try {\n // Process nodes in parallel with concurrency limit\n const BATCH_SIZE = 20; // Adjust based on API rate limits\n\n for (let i = 0; i < nodes.length; i += BATCH_SIZE) {\n const batch = nodes.slice(i, i + BATCH_SIZE);\n const promises = batch.map((node) =>\n processNode(node, roadmapContentDir, contentFiles),\n );\n\n await Promise.allSettled(promises);\n\n // Add a small delay between batches to avoid rate limiting\n if (i + BATCH_SIZE < nodes.length) {\n await new Promise((resolve) => setTimeout(resolve, 1000));\n }\n }\n\n console.log('Content generation completed');\n } catch (error) {\n console.error('Fatal error in main process:', error);\n process.exit(1);\n }\n};\n\n// Add error handling for uncaught exceptions\nprocess.on('uncaughtException', (error) => {\n console.error('Uncaught Exception:', error);\n process.exit(1);\n});\n\nprocess.on('unhandledRejection', (error) => {\n console.error('Unhandled Rejection:', error);\n process.exit(1);\n});\n\nmain();\n" }, { "path": "scripts/sync-content-to-repo.ts", "content": "import fs from 'node:fs/promises';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport { slugify } from '../src/lib/slugger';\nimport type { OfficialRoadmapDocument } from '../src/queries/official-roadmap';\nimport type { OfficialRoadmapTopicContentDocument } from '../src/queries/official-roadmap-topic';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nconst args = process.argv.slice(2);\nconst roadmapSlug = args?.[0]?.replace('--roadmap-slug=', '');\nconst secret = args?.[1]?.replace('--secret=', '');\nif (!secret) {\n throw new Error('Secret is required');\n}\n\nif (!roadmapSlug || roadmapSlug === '__default__') {\n throw new Error('Roadmap slug is required');\n}\n\nconsole.log(`🚀 Starting ${roadmapSlug}`);\n\nexport async function roadmapTopics(\n roadmapId: string,\n secret: string,\n): Promise {\n const path = `https://roadmap.sh/api/v1-list-official-roadmap-topics/${roadmapId}?secret=${secret}`;\n const response = await fetch(path);\n if (!response.ok) {\n throw new Error(`Failed to fetch roadmap topics: ${response.statusText}`);\n }\n\n const data = await response.json();\n if (data.error) {\n throw new Error(`Failed to fetch roadmap topics: ${data.error}`);\n }\n\n return data;\n}\n\nexport async function fetchRoadmapJson(\n roadmapId: string,\n): Promise {\n const response = await fetch(\n `https://roadmap.sh/api/v1-official-roadmap/${roadmapId}`,\n );\n\n if (!response.ok) {\n throw new Error(`Failed to fetch roadmap json: ${response.statusText}`);\n }\n\n const data = await response.json();\n if (data.error) {\n throw new Error(`Failed to fetch roadmap json: ${data.error}`);\n }\n\n return data;\n}\n\n// Directory containing the roadmaps\nconst ROADMAP_CONTENT_DIR = path.join(\n __dirname,\n '../src/data/roadmaps',\n roadmapSlug,\n);\n\nconst allTopics = await roadmapTopics(roadmapSlug, secret);\nconst roadmap = await fetchRoadmapJson(roadmapSlug);\nconst { nodes } = roadmap;\n\nfor (const topic of allTopics) {\n const { nodeId } = topic;\n\n const node = nodes.find((node) => node.id === nodeId);\n if (!node) {\n console.error(`Node not found: ${nodeId}`);\n continue;\n }\n\n const label = node?.data?.label as string;\n if (!label) {\n console.error(`Label not found: ${nodeId}`);\n continue;\n }\n\n const topicSlug = `${slugify(label)}@${nodeId}.md`;\n\n const topicPath = path.join(ROADMAP_CONTENT_DIR, 'content', topicSlug);\n const topicDir = path.dirname(topicPath);\n const topicDirExists = await fs\n .stat(topicDir)\n .then(() => true)\n .catch(() => false);\n if (!topicDirExists) {\n await fs.mkdir(topicDir, { recursive: true });\n }\n\n const topicContent = prepareTopicContent(topic);\n await fs.writeFile(topicPath, topicContent);\n console.log(`✅ Synced ${topicSlug}`);\n}\n\nfunction prepareTopicContent(topic: OfficialRoadmapTopicContentDocument) {\n const { description, resources = [] } = topic;\n\n let content = description;\n if (resources.length > 0) {\n content += `\\n\\nVisit the following resources to learn more:\\n\\n${resources.map((resource) => `- [@${resource.type}@${resource.title}](${resource.url})`).join('\\n')}`;\n }\n\n return content;\n}\n" }, { "path": "scripts/sync-repo-to-database.ts", "content": "import fs from 'node:fs/promises';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport type { OfficialRoadmapDocument } from '../src/queries/official-roadmap';\nimport { parse } from 'node-html-parser';\nimport { markdownToHtml } from '../src/lib/markdown';\nimport { htmlToMarkdown } from '../src/lib/html';\nimport {\n allowedOfficialRoadmapTopicResourceType,\n type AllowedOfficialRoadmapTopicResourceType,\n type SyncToDatabaseTopicContent,\n} from '../src/queries/official-roadmap-topic';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nconst args = process.argv.slice(2);\nconst allFiles = args\n .find((arg) => arg.startsWith('--files='))\n ?.replace('--files=', '');\nconst secret = args\n .find((arg) => arg.startsWith('--secret='))\n ?.replace('--secret=', '');\n\nif (!secret) {\n throw new Error('Secret is required');\n}\n\nlet roadmapJsonCache: Map = new Map();\nexport async function fetchRoadmapJson(\n roadmapId: string,\n): Promise {\n if (roadmapJsonCache.has(roadmapId)) {\n return roadmapJsonCache.get(roadmapId)!;\n }\n\n const response = await fetch(\n `https://roadmap.sh/api/v1-official-roadmap/${roadmapId}`,\n {\n headers: {\n 'User-Agent': 'Mozilla/5.0 (compatible; roadmap-sync/1.0)',\n },\n },\n );\n\n if (!response.ok) {\n throw new Error(\n `Failed to fetch roadmap json: ${response.statusText} for ${roadmapId}`,\n );\n }\n\n const data = await response.json();\n if (data.error) {\n throw new Error(\n `Failed to fetch roadmap json: ${data.error} for ${roadmapId}`,\n );\n }\n\n roadmapJsonCache.set(roadmapId, data);\n return data;\n}\n\nexport async function syncContentToDatabase(\n topics: SyncToDatabaseTopicContent[],\n) {\n const response = await fetch(\n `https://roadmap.sh/api/v1-sync-official-roadmap-topics`,\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'User-Agent': 'Mozilla/5.0 (compatible; roadmap-sync/1.0)',\n },\n body: JSON.stringify({\n topics,\n secret,\n }),\n },\n );\n\n const responseText = await response.text();\n\n if (!response.ok) {\n throw new Error(\n `Failed to sync content to database: ${response.status} ${response.statusText}\\n${responseText}`,\n );\n }\n\n try {\n return JSON.parse(responseText);\n } catch {\n throw new Error(\n `Failed to parse response as JSON: ${responseText.substring(0, 500)}`,\n );\n }\n}\n\nconst files =\n allFiles\n ?.split(',')\n .map((file) => file.trim())\n .filter(Boolean) || [];\nif (files.length === 0) {\n console.log('No files to sync');\n process.exit(0);\n}\n\nconsole.log(`🚀 Starting ${files.length} files`);\nconst ROADMAP_CONTENT_DIR = path.join(__dirname, '../src/data/roadmaps');\n\ntry {\n const topics: SyncToDatabaseTopicContent[] = [];\n\n for (const file of files) {\n const isContentFile = file.endsWith('.md') && file.includes('content/');\n if (!isContentFile) {\n console.log(`🚨 Skipping ${file} because it is not a content file`);\n continue;\n }\n\n const pathParts = file.replace('src/data/roadmaps/', '').split('/');\n const roadmapSlug = pathParts?.[0];\n if (!roadmapSlug) {\n console.error(`🚨 Roadmap slug is required: ${file}`);\n continue;\n }\n\n const nodeSlug = pathParts?.[2]?.replace('.md', '');\n if (!nodeSlug) {\n console.error(`🚨 Node id is required: ${file}`);\n continue;\n }\n\n const nodeId = nodeSlug.split('@')?.[1];\n if (!nodeId) {\n console.error(`🚨 Node id is required: ${file}`);\n continue;\n }\n\n const roadmap = await fetchRoadmapJson(roadmapSlug);\n const node = roadmap.nodes.find((node) => node.id === nodeId);\n if (!node) {\n console.error(`🚨 Node not found: ${file}`);\n continue;\n }\n\n const filePath = path.join(\n ROADMAP_CONTENT_DIR,\n roadmapSlug,\n 'content',\n `${nodeSlug}.md`,\n );\n\n const fileExists = await fs\n .stat(filePath)\n .then(() => true)\n .catch(() => false);\n if (!fileExists) {\n console.log(`🚨 File not found: ${filePath}`);\n continue;\n }\n\n const content = await fs.readFile(filePath, 'utf8');\n const html = markdownToHtml(content, false);\n const rootHtml = parse(html);\n\n let ulWithLinks: HTMLElement | undefined;\n rootHtml.querySelectorAll('ul').forEach((ul) => {\n const listWithJustLinks = Array.from(ul.querySelectorAll('li')).filter(\n (li) => {\n const link = li.querySelector('a');\n return link && link.textContent?.trim() === li.textContent?.trim();\n },\n );\n\n if (listWithJustLinks.length > 0) {\n // @ts-expect-error - TODO: fix this\n ulWithLinks = ul;\n }\n });\n\n const listLinks: SyncToDatabaseTopicContent['resources'] =\n ulWithLinks !== undefined\n ? Array.from(ulWithLinks.querySelectorAll('li > a'))\n .map((link) => {\n const typePattern = /@([a-z.]+)@/;\n let linkText = link.textContent || '';\n const linkHref = link.getAttribute('href') || '';\n let linkType = linkText.match(typePattern)?.[1] || 'article';\n linkType = allowedOfficialRoadmapTopicResourceType.includes(\n linkType as any,\n )\n ? linkType\n : 'article';\n\n linkText = linkText.replace(typePattern, '');\n\n return {\n title: linkText,\n url: linkHref,\n type: linkType as AllowedOfficialRoadmapTopicResourceType,\n };\n })\n .sort((a, b) => {\n const order = [\n 'official',\n 'opensource',\n 'article',\n 'video',\n 'feed',\n ];\n return order.indexOf(a.type) - order.indexOf(b.type);\n })\n : [];\n\n const title = rootHtml.querySelector('h1');\n ulWithLinks?.remove();\n title?.remove();\n\n const allParagraphs = rootHtml.querySelectorAll('p');\n if (listLinks.length > 0 && allParagraphs.length > 0) {\n // to remove the view more see more from the description\n const lastParagraph = allParagraphs[allParagraphs.length - 1];\n lastParagraph?.remove();\n }\n\n const htmlStringWithoutLinks = rootHtml.toString();\n const description = htmlToMarkdown(htmlStringWithoutLinks);\n\n const updatedDescription =\n `# ${title?.textContent}\\n\\n${description}`.trim();\n\n const label = node?.data?.label as string;\n if (!label) {\n console.error(`🚨 Label is required: ${file}`);\n continue;\n }\n\n topics.push({\n roadmapSlug,\n nodeId,\n description: updatedDescription,\n resources: listLinks,\n });\n }\n\n console.log(`📤 Syncing ${topics.length} topics to database...`);\n await syncContentToDatabase(topics);\n console.log(`✅ Successfully synced ${topics.length} topics`);\n} catch (error) {\n console.error('❌ Sync failed with error:');\n console.error(error);\n if (error instanceof Error) {\n console.error('\\nError message:', error.message);\n console.error('\\nStack trace:', error.stack);\n }\n process.exit(1);\n}\n" }, { "path": "scripts/sync-roadmap-to-database.ts", "content": "import { execSync } from 'node:child_process';\nimport fs from 'node:fs';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nconst args = process.argv.slice(2);\nconst roadmapSlug = args\n .find((arg) => arg.startsWith('--roadmap='))\n ?.replace('--roadmap=', '');\nconst secret = args\n .find((arg) => arg.startsWith('--secret='))\n ?.replace('--secret=', '');\n\nif (!roadmapSlug) {\n console.error('❌ Roadmap slug is required. Use --roadmap=');\n console.error(' Example: npm run sync:roadmap -- --roadmap=frontend --secret=');\n process.exit(1);\n}\n\nif (!secret) {\n console.error('❌ Secret is required. Use --secret=');\n console.error(' Example: npm run sync:roadmap -- --roadmap=frontend --secret=');\n process.exit(1);\n}\n\nconst roadmapDir = path.join(__dirname, '../src/data/roadmaps', roadmapSlug);\n\nif (!fs.existsSync(roadmapDir)) {\n console.error(`❌ Roadmap directory not found: ${roadmapDir}`);\n process.exit(1);\n}\n\nconsole.log(`🔍 Finding all content files in: ${roadmapDir}`);\n\nfunction getAllFiles(dir: string): string[] {\n const files: string[] = [];\n const entries = fs.readdirSync(dir, { withFileTypes: true });\n\n for (const entry of entries) {\n const fullPath = path.join(dir, entry.name);\n if (entry.isDirectory()) {\n files.push(...getAllFiles(fullPath));\n } else {\n files.push(fullPath);\n }\n }\n\n return files;\n}\n\nconst allFiles = getAllFiles(roadmapDir);\nconst relativeFiles = allFiles.map((file) =>\n file.replace(path.join(__dirname, '../'), ''),\n);\n\nconsole.log(`📁 Found ${relativeFiles.length} files`);\n\nif (relativeFiles.length === 0) {\n console.log('⚠️ No files found to sync');\n process.exit(0);\n}\n\nconst filesArg = relativeFiles.join(',');\n\nconsole.log(`🚀 Syncing roadmap \"${roadmapSlug}\" to database...`);\n\ntry {\n execSync(\n `npx tsx ./scripts/sync-repo-to-database.ts --files=\"${filesArg}\" --secret=${secret}`,\n {\n cwd: path.join(__dirname, '..'),\n stdio: 'inherit',\n },\n );\n console.log(`✅ Successfully synced roadmap \"${roadmapSlug}\" to database`);\n} catch (error) {\n console.error(`❌ Failed to sync roadmap \"${roadmapSlug}\" to database`);\n process.exit(1);\n}\n" }, { "path": "scripts/update-sponsors.cjs", "content": "const path = require('path');\nconst fs = require('fs');\nconst yaml = require('js-yaml');\n\nconst apiKey = process.env.SPONSOR_SHEET_API_KEY;\nconst sheetId = process.env.SPONSOR_SHEET_ID;\n\nif (!apiKey || !sheetId) {\n console.error('Missing API key or sheet ID');\n process.exit(1);\n}\n\nconst sheetRange = 'A3:I1001';\nconst sheetUrl = `https://sheets.googleapis.com/v4/spreadsheets/${sheetId}/values/${sheetRange}?key=${apiKey}`;\n\nfunction removeAllSponsors(baseContentDir) {\n console.log('------------------------');\n console.log('Removing sponsors from: ', baseContentDir);\n console.log('------------------------');\n const dataDirPath = path.join(__dirname, '../src/data');\n const contentDirPath = path.join(dataDirPath, baseContentDir);\n\n const contentDir = fs.readdirSync(contentDirPath);\n contentDir.forEach((content) => {\n console.log('Removing sponsors from: ', content);\n\n const pageFilePath = path.join(contentDirPath, content, `${content}.md`);\n const pageFileContent = fs.readFileSync(pageFilePath, 'utf8');\n\n const frontMatterRegex = /---\\n([\\s\\S]*?)\\n---/;\n\n const existingFrontmatter = pageFileContent.match(frontMatterRegex)[1];\n const contentWithoutFrontmatter = pageFileContent\n .replace(frontMatterRegex, ``)\n .trim();\n\n let frontmatterObj = yaml.load(existingFrontmatter);\n delete frontmatterObj.sponsors;\n\n const newFrontmatter = yaml.dump(frontmatterObj, {\n lineWidth: 10000,\n forceQuotes: true,\n quotingType: \"'\",\n });\n const newContent = `---\\n${newFrontmatter}---\\n${contentWithoutFrontmatter}`;\n\n fs.writeFileSync(pageFilePath, newContent, 'utf8');\n });\n}\n\nfunction addPageSponsor({\n pageUrl,\n company,\n redirectUrl,\n imageUrl,\n adTitle,\n adDescription,\n}) {\n const urlPart = pageUrl\n .replace('https://roadmap.sh/', '')\n .replace(/\\?.+?$/, '');\n\n const parentDir = urlPart.startsWith('best-practices/')\n ? 'best-practices'\n : 'roadmaps';\n const pageId = urlPart.replace(`${parentDir}/`, '');\n\n const pageFilePath = path.join(\n __dirname,\n `../src/data/${parentDir}`,\n `${pageId}/${pageId}.md`\n );\n\n if (!fs.existsSync(pageFilePath)) {\n console.error(`Page file not found: ${pageFilePath}`);\n process.exit(1);\n }\n\n console.log(`Updating page: ${urlPart}`);\n const pageFileContent = fs.readFileSync(pageFilePath, 'utf8');\n\n const frontMatterRegex = /---\\n([\\s\\S]*?)\\n---/;\n\n const existingFrontmatter = pageFileContent.match(frontMatterRegex)[1];\n const contentWithoutFrontmatter = pageFileContent\n .replace(frontMatterRegex, ``)\n .trim();\n\n let frontmatterObj = yaml.load(existingFrontmatter);\n const sponsors = frontmatterObj.sponsors || [];\n\n const frontmatterValues = Object.entries(frontmatterObj);\n const roadmapLabel = frontmatterObj.briefTitle;\n\n sponsors.push({\n url: redirectUrl,\n title: adTitle,\n imageUrl,\n description: adDescription,\n page: roadmapLabel,\n company,\n });\n\n // Insert sponsor data at 10 index i.e. after\n // roadmap dimensions in the frontmatter\n frontmatterValues.splice(10, 0, ['sponsors', sponsors]);\n\n frontmatterObj = Object.fromEntries(frontmatterValues);\n\n const newFrontmatter = yaml.dump(frontmatterObj, {\n lineWidth: 10000,\n forceQuotes: true,\n quotingType: \"'\",\n });\n const newContent = `---\\n${newFrontmatter}---\\n\\n${contentWithoutFrontmatter}`;\n\n fs.writeFileSync(pageFilePath, newContent, 'utf8');\n}\n\n// Remove sponsors from all roadmaps\nremoveAllSponsors('roadmaps');\nremoveAllSponsors('best-practices');\n\nconsole.log('------------------------');\nconsole.log('Adding sponsors');\nconsole.log('------------------------');\nfetch(sheetUrl)\n .then((res) => res.json())\n .then((rawData) => {\n const rows = rawData.values;\n\n rows.map((row) => {\n // prettier-ignore\n const [\n pageUrl,\n company,\n redirectUrl,\n imageUrl,\n adTitle,\n adDescription,\n startDate,\n endDate,\n isActive,\n ] = row;\n\n const isConfiguredActive = isActive?.toLowerCase() === 'yes';\n const currentDate = new Date();\n const isDateInRange =\n currentDate >= new Date(startDate) && currentDate <= new Date(endDate);\n\n if (!isConfiguredActive || !isDateInRange) {\n return;\n }\n\n addPageSponsor({\n pageUrl,\n company,\n redirectUrl,\n imageUrl,\n adTitle,\n adDescription,\n startDate,\n endDate,\n isActive,\n });\n });\n });\n" }, { "path": "scripts/warm-urls.sh", "content": "#!/usr/bin/env bash\n\n# Usage: warm-urls.sh \n# Example: warm-urls.sh https://www.example.com/sitemap.xml\n\n# Check if sitemap url is provided\nif [ -z \"$1\" ]; then\n echo \"Please provide sitemap URL\" >&2\n exit 1\nfi\n\n# Get all URLs from sitemap\nurls=$(curl -s \"$1\" | grep -o \"[^<]*\" | sed 's#\\(.*\\)#\\1#')\n\nfailed_urls=()\n\n# Warm up URLs\nfor url in $urls; do\n # Fetch the og:image URL from the meta tags\n og_image_url=$(curl -s \"$url\" | grep -o \" /dev/null; then\n failed_urls+=(\"$url\")\n fi\n\n # Warm up the og:image URL\n if [ -n \"$og_image_url\" ]; then\n echo \"Warming up OG: $og_image_url\"\n if ! curl -s -I \"$og_image_url\" > /dev/null; then\n failed_urls+=(\"$og_image_url\")\n fi\n else\n echo \"No og:image found for $url\"\n fi\ndone\n\n# Print failed URLs\nif [ ${#failed_urls[@]} -gt 0 ]; then\n echo \"Failed to warm up the following URLs:\" >&2\n for failed_url in \"${failed_urls[@]}\"; do\n echo \"$failed_url\" >&2\n done\nfi\n" }, { "path": "sitemap.mjs", "content": "import path from 'node:path';\nimport fs from 'node:fs/promises';\n\nasync function getRoadmapIds() {\n return fs.readdir(path.join(process.cwd(), 'src/data/roadmaps'));\n}\n\nasync function getBestPracticesIds() {\n return fs.readdir(path.join(process.cwd(), 'src/data/best-practices'));\n}\n\nexport function shouldIndexPage(pageUrl) {\n return ![\n 'https://roadmap.sh/404',\n 'https://roadmap.sh/terms',\n 'https://roadmap.sh/privacy',\n 'https://roadmap.sh/pdfs',\n 'https://roadmap.sh/g',\n ].includes(pageUrl);\n}\n\nexport async function serializeSitemap(item) {\n const highPriorityPages = [\n 'https://roadmap.sh',\n 'https://roadmap.sh/about',\n 'https://roadmap.sh/roadmaps',\n 'https://roadmap.sh/best-practices',\n 'https://roadmap.sh/guides',\n 'https://roadmap.sh/videos',\n ...(await getRoadmapIds()).flatMap((id) => [\n `https://roadmap.sh/${id}`,\n `https://roadmap.sh/${id}/topics`,\n ]),\n ...(await getBestPracticesIds()).map(\n (id) => `https://roadmap.sh/best-practices/${id}`\n ),\n ];\n\n // Roadmaps and other high priority pages\n for (let pageUrl of highPriorityPages) {\n if (item.url === pageUrl) {\n return {\n ...item,\n // @ts-ignore\n changefreq: 'monthly',\n priority: 1,\n };\n }\n }\n\n // Guide and video pages\n if (\n item.url.startsWith('https://roadmap.sh/guides') ||\n item.url.startsWith('https://roadmap.sh/videos')\n ) {\n return {\n ...item,\n // @ts-ignore\n changefreq: 'monthly',\n priority: 0.9,\n };\n }\n\n return undefined;\n}\n" }, { "path": "src/api/ai-roadmap.ts", "content": "import { type APIContext } from 'astro';\nimport { api } from './api.ts';\n\nexport type GetAIRoadmapBySlugResponse = {\n id: string;\n term: string;\n title: string;\n data: string;\n isAuthenticatedUser: boolean;\n};\n\nexport function aiRoadmapApi(context: APIContext) {\n return {\n getAIRoadmapBySlug: async function (roadmapSlug: string) {\n return api(context).get(\n `${import.meta.env.PUBLIC_API_URL}/v1-get-ai-roadmap-by-slug/${roadmapSlug}`,\n );\n },\n };\n}\n\nexport interface AICourseDocument {\n _id: string;\n userId: string;\n title: string;\n slug?: string;\n keyword: string;\n difficulty: string;\n data: string;\n viewCount: number;\n createdAt: Date;\n updatedAt: Date;\n}" }, { "path": "src/api/api.ts", "content": "import { TOKEN_COOKIE_NAME } from '../lib/jwt.ts';\nimport type { APIContext } from 'astro';\n\ntype HttpOptionsType = RequestInit | { headers: Record };\n\ntype AppResponse = Record;\n\nexport type FetchError = {\n status: number;\n message: string;\n};\n\nexport type AppError = {\n status: number;\n message: string;\n errors?: { message: string; location: string }[];\n};\n\nexport type ApiReturn = {\n response?: ResponseType;\n error?: ErrorType | FetchError;\n};\n\nexport function api(context: APIContext) {\n const token = context.cookies.get(TOKEN_COOKIE_NAME)?.value;\n\n async function apiCall(\n url: string,\n options?: HttpOptionsType,\n ): Promise> {\n try {\n const response = await fetch(url, {\n credentials: 'include',\n ...options,\n headers: new Headers({\n 'Content-Type': 'application/json',\n Accept: 'application/json',\n ...(token ? { Authorization: `Bearer ${token}` } : {}),\n ...(options?.headers ?? {}),\n }),\n });\n\n // @ts-ignore\n const doesAcceptHtml = options?.headers?.['Accept'] === 'text/html';\n\n const data = doesAcceptHtml\n ? await response.text()\n : await response.json();\n\n if (response.ok) {\n return {\n response: data as ResponseType,\n error: undefined,\n };\n }\n\n // Logout user if token is invalid\n if (data.status === 401) {\n context.cookies.delete(TOKEN_COOKIE_NAME);\n context.redirect(context.request.url);\n\n return { response: undefined, error: data as ErrorType };\n }\n\n if (data.status === 403) {\n return { response: undefined, error: data as ErrorType };\n }\n\n return {\n response: undefined,\n error: data as ErrorType,\n };\n } catch (error: any) {\n return {\n response: undefined,\n error: {\n status: 0,\n message: error.message,\n },\n };\n }\n }\n\n return {\n get: function apiGet(\n url: string,\n queryParams?: Record,\n options?: HttpOptionsType,\n ): Promise> {\n const searchParams = new URLSearchParams(queryParams).toString();\n const queryUrl = searchParams ? `${url}?${searchParams}` : url;\n\n return apiCall(queryUrl, {\n ...options,\n method: 'GET',\n });\n },\n post: async function apiPost<\n ResponseType = AppResponse,\n ErrorType = AppError,\n >(\n url: string,\n body: Record,\n options?: HttpOptionsType,\n ): Promise> {\n return apiCall(url, {\n ...options,\n method: 'POST',\n body: JSON.stringify(body),\n });\n },\n patch: async function apiPatch<\n ResponseType = AppResponse,\n ErrorType = AppError,\n >(\n url: string,\n body: Record,\n options?: HttpOptionsType,\n ): Promise> {\n return apiCall(url, {\n ...options,\n method: 'PATCH',\n body: JSON.stringify(body),\n });\n },\n put: async function apiPut<\n ResponseType = AppResponse,\n ErrorType = AppError,\n >(\n url: string,\n body: Record,\n options?: HttpOptionsType,\n ): Promise> {\n return apiCall(url, {\n ...options,\n method: 'PUT',\n body: JSON.stringify(body),\n });\n },\n delete: async function apiDelete<\n ResponseType = AppResponse,\n ErrorType = AppError,\n >(\n url: string,\n options?: HttpOptionsType,\n ): Promise> {\n return apiCall(url, {\n ...options,\n method: 'DELETE',\n });\n },\n };\n}\n" }, { "path": "src/api/leaderboard.ts", "content": "import { type APIContext } from 'astro';\nimport { api } from './api.ts';\n\nexport type LeaderboardUserDetails = {\n id: string;\n name: string;\n avatar?: string;\n count: number;\n};\n\nexport type ListLeaderboardStatsResponse = {\n streaks: {\n active: LeaderboardUserDetails[];\n lifetime: LeaderboardUserDetails[];\n };\n projectSubmissions: {\n currentMonth: LeaderboardUserDetails[];\n lifetime: LeaderboardUserDetails[];\n };\n githubContributors: {\n currentMonth: LeaderboardUserDetails[];\n };\n referrals: {\n currentMonth: LeaderboardUserDetails[];\n lifetime: LeaderboardUserDetails[];\n };\n};\n\nexport function leaderboardApi(context: APIContext) {\n return {\n listLeaderboardStats: async function () {\n return api(context).get(\n `${import.meta.env.PUBLIC_API_URL}/v1-list-leaderboard-stats`,\n {},\n );\n },\n };\n}\n" }, { "path": "src/api/project.ts", "content": "import { type APIContext } from 'astro';\nimport { api } from './api.ts';\n\nexport function projectApi(context: APIContext) {\n return {\n listProjectsUserCount: async function (projectIds: string[]) {\n return api(context).post>(\n `${import.meta.env.PUBLIC_API_URL}/v1-list-projects-user-count`,\n {\n projectIds,\n },\n );\n },\n };\n}\n" }, { "path": "src/api/roadmap.ts", "content": "import { type APIContext } from 'astro';\nimport { api } from './api.ts';\nimport type { RoadmapDocument } from '../components/CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx';\nimport type { PageType } from '../components/CommandMenu/CommandMenu.tsx';\n\nexport type ListShowcaseRoadmapResponse = {\n data: Pick<\n RoadmapDocument,\n | '_id'\n | 'title'\n | 'description'\n | 'slug'\n | 'creatorId'\n | 'visibility'\n | 'createdAt'\n | 'topicCount'\n | 'ratings'\n >[];\n totalCount: number;\n totalPages: number;\n currPage: number;\n perPage: number;\n};\n\nexport function roadmapApi(context: APIContext) {\n return {\n listShowcaseRoadmap: async function () {\n const searchParams = new URLSearchParams(context.url.searchParams);\n return api(context).get(\n `${import.meta.env.PUBLIC_API_URL}/v1-list-showcase-roadmap`,\n searchParams,\n );\n },\n isShowcaseRoadmap: async function (slug: string) {\n return api(context).get<{\n isShowcase: boolean;\n }>(`${import.meta.env.PUBLIC_API_URL}/v1-is-showcase-roadmap/${slug}`);\n },\n };\n}\n\nexport type ProjectPageType = {\n id: string;\n title: string;\n url: string;\n};\n\nexport async function getProjectList() {\n const baseUrl = import.meta.env.DEV\n ? 'http://localhost:3000'\n : 'https://roadmap.sh';\n const pages = await fetch(`${baseUrl}/pages.json`).catch((err) => {\n console.error(err);\n return [];\n });\n\n const pagesJson = await (pages as any).json();\n const projects: ProjectPageType[] = pagesJson\n .filter((page: any) => page?.group?.toLowerCase() === 'projects')\n .map((page: any) => ({\n id: page.id,\n title: page.title,\n url: page.url,\n }));\n\n return projects;\n}\n" }, { "path": "src/api/user.ts", "content": "import { type APIContext } from 'astro';\nimport { api } from './api.ts';\nimport type { ResourceType } from '../lib/resource-progress.ts';\nimport type { ProjectStatusDocument } from '../components/Projects/ListProjectSolutions.tsx';\n\nexport const allowedRoadmapVisibility = ['all', 'none', 'selected'] as const;\nexport type AllowedRoadmapVisibility =\n (typeof allowedRoadmapVisibility)[number];\n\nexport const allowedCustomRoadmapVisibility = [\n 'all',\n 'none',\n 'selected',\n] as const;\nexport type AllowedCustomRoadmapVisibility =\n (typeof allowedCustomRoadmapVisibility)[number];\n\nexport const allowedProfileVisibility = ['public', 'private'] as const;\nexport type AllowedProfileVisibility =\n (typeof allowedProfileVisibility)[number];\n\nexport const allowedOnboardingStatus = ['done', 'pending', 'ignored'] as const;\nexport type AllowedOnboardingStatus = (typeof allowedOnboardingStatus)[number];\n\nexport interface UserDocument {\n _id?: string;\n name: string;\n email: string;\n avatar?: string;\n password: string;\n isEnabled: boolean;\n authProvider: 'github' | 'google' | 'email' | 'linkedin';\n metadata: Record;\n calculatedStats: {\n activityCount: number;\n totalVisitCount: number;\n longestVisitStreak: number;\n currentVisitStreak: number;\n updatedAt: Date;\n };\n verificationCode: string;\n resetPasswordCode: string;\n isSyncedWithSendy: boolean;\n links?: {\n github?: string;\n linkedin?: string;\n twitter?: string;\n dailydev?: string;\n website?: string;\n };\n username?: string;\n profileVisibility: AllowedProfileVisibility;\n publicConfig?: {\n isAvailableForHire: boolean;\n isEmailVisible: boolean;\n headline: string;\n roadmaps: string[];\n customRoadmaps: string[];\n roadmapVisibility: AllowedRoadmapVisibility;\n customRoadmapVisibility: AllowedCustomRoadmapVisibility;\n };\n resetPasswordCodeAt: string;\n verifiedAt: string;\n\n // Onboarding fields\n onboardingStatus?: AllowedOnboardingStatus;\n onboarding?: {\n updateProgress: AllowedOnboardingStatus;\n publishProfile: AllowedOnboardingStatus;\n customRoadmap: AllowedOnboardingStatus;\n addFriends: AllowedOnboardingStatus;\n roadCard: AllowedOnboardingStatus;\n inviteTeam: AllowedOnboardingStatus;\n };\n\n createdAt: string;\n updatedAt: string;\n}\n\nexport type UserActivityCount = {\n activityCount: Record;\n totalActivityCount: number;\n};\n\ntype ProgressResponse = {\n updatedAt: string;\n title: string;\n id: string;\n learning: number;\n skipped: number;\n done: number;\n total: number;\n isCustomResource?: boolean;\n roadmapSlug?: string;\n};\n\nexport type GetPublicProfileResponse = Omit<\n UserDocument,\n 'password' | 'verificationCode' | 'resetPasswordCode' | 'resetPasswordCodeAt'\n> & {\n activity: UserActivityCount;\n roadmaps: ProgressResponse[];\n projects: ProjectStatusDocument[];\n isOwnProfile: boolean;\n};\n\nexport type GetUserProfileRoadmapResponse = {\n title: string;\n topicCount: number;\n roadmapSlug?: string;\n isCustomResource?: boolean;\n done: string[];\n learning: string[];\n skipped: string[];\n nodes: any[];\n edges: any[];\n};\n\nexport function userApi(context: APIContext) {\n return {\n getPublicProfile: async function (username: string) {\n return api(context).get(\n `${import.meta.env.PUBLIC_API_URL}/v1-get-public-profile/${username}`,\n );\n },\n getUserProfileRoadmap: async function (\n username: string,\n resourceId: string,\n resourceType: ResourceType = 'roadmap',\n ) {\n return api(context).get(\n `${\n import.meta.env.PUBLIC_API_URL\n }/v1-get-user-profile-roadmap/${username}`,\n {\n resourceId,\n resourceType,\n },\n );\n },\n };\n}\n" }, { "path": "src/components/AIChat/AIChat.css", "content": ".ai-chat .prose ul li > code,\n.ai-chat .prose ol li > code,\n.ai-chat p code,\n.ai-chat a > code,\n.ai-chat strong > code,\n.ai-chat em > code,\n.ai-chat h1 > code,\n.ai-chat h2 > code,\n.ai-chat h3 > code {\n background: #ebebeb !important;\n color: currentColor !important;\n font-size: 14px;\n font-weight: normal !important;\n}\n\n.ai-chat .course-ai-content.course-content.prose ul li > code,\n.ai-chat .course-ai-content.course-content.prose ol li > code,\n.ai-chat .course-ai-content.course-content.prose p code,\n.ai-chat .course-ai-content.course-content.prose a > code,\n.ai-chat .course-ai-content.course-content.prose strong > code,\n.ai-chat .course-ai-content.course-content.prose em > code,\n.ai-chat .course-ai-content.course-content.prose h1 > code,\n.ai-chat .course-ai-content.course-content.prose h2 > code,\n.ai-chat .course-ai-content.course-content.prose h3 > code,\n.ai-chat .course-notes-content.prose ul li > code,\n.ai-chat .course-notes-content.prose ol li > code,\n.ai-chat .course-notes-content.prose p code,\n.ai-chat .course-notes-content.prose a > code,\n.ai-chat .course-notes-content.prose strong > code,\n.ai-chat .course-notes-content.prose em > code,\n.ai-chat .course-notes-content.prose h1 > code,\n.ai-chat .course-notes-content.prose h2 > code,\n.ai-chat .course-notes-content.prose h3 > code {\n font-size: 12px !important;\n}\n\n.ai-chat .course-ai-content pre {\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n\n.ai-chat .course-ai-content pre::-webkit-scrollbar {\n display: none;\n}\n\n.ai-chat .course-ai-content pre,\n.ai-chat .course-notes-content pre {\n overflow: scroll;\n font-size: 15px;\n margin: 10px 0;\n}\n\n.ai-chat .prose ul li > code:before,\n.ai-chat p > code:before,\n.ai-chat .prose ul li > code:after,\n.prose ol li > code:before,\np > code:before,\n.ai-chat .prose ol li > code:after,\n.ai-chat .course-content h1 > code:after,\n.ai-chat .course-content h1 > code:before,\n.ai-chat .course-content h2 > code:after,\n.ai-chat .course-content h2 > code:before,\n.ai-chat .course-content h3 > code:after,\n.ai-chat .course-content h3 > code:before,\n.ai-chat .course-content h4 > code:after,\n.ai-chat .course-content h4 > code:before,\n.ai-chat p > code:after,\n.ai-chat a > code:after,\n.ai-chat a > code:before {\n content: '' !important;\n}\n\n.ai-chat .course-content.prose ul li > code,\n.ai-chat .course-content.prose ol li > code,\n.ai-chat .course-content p code,\n.ai-chat .course-content a > code,\n.ai-chat .course-content strong > code,\n.ai-chat .course-content em > code,\n.ai-chat .course-content h1 > code,\n.ai-chat .course-content h2 > code,\n.ai-chat .course-content h3 > code,\n.ai-chat .course-content table code {\n background: #f4f4f5 !important;\n border: 1px solid #282a36 !important;\n color: #282a36 !important;\n padding: 2px 4px;\n border-radius: 5px;\n font-size: 16px !important;\n white-space: pre;\n font-weight: normal;\n}\n\n.ai-chat .course-content blockquote {\n font-style: normal;\n}\n\n.ai-chat .course-content.prose blockquote h1,\n.ai-chat .course-content.prose blockquote h2,\n.ai-chat .course-content.prose blockquote h3,\n.ai-chat .course-content.prose blockquote h4 {\n font-style: normal;\n margin-bottom: 8px;\n}\n\n.ai-chat .course-content.prose ul li > code:before,\n.ai-chat .course-content p > code:before,\n.ai-chat .course-content.prose ul li > code:after,\n.ai-chat .course-content p > code:after,\n.ai-chat .course-content h2 > code:after,\n.ai-chat .course-content h2 > code:before,\n.ai-chat .course-content table code:before,\n.ai-chat .course-content table code:after,\n.ai-chat .course-content a > code:after,\n.ai-chat .course-content a > code:before,\n.ai-chat .course-content h2 code:after,\n.ai-chat .course-content h2 code:before,\n.ai-chat .course-content h2 code:after,\n.ai-chat .course-content h2 code:before {\n content: '' !important;\n}\n\n.ai-chat .course-content table {\n border-collapse: collapse;\n border: 1px solid black;\n border-radius: 5px;\n}\n\n.ai-chat .course-content table td,\n.ai-chat .course-content table th {\n padding: 5px 10px;\n}\n" }, { "path": "src/components/AIChat/AIChat.tsx", "content": "import './AIChat.css';\nimport {\n ArrowDownIcon,\n FileUpIcon,\n LockIcon,\n PersonStandingIcon,\n SendIcon,\n TrashIcon,\n} from 'lucide-react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { flushSync } from 'react-dom';\nimport AutogrowTextarea from 'react-textarea-autosize';\nimport { QuickHelpPrompts } from './QuickHelpPrompts';\nimport { QuickActionButton } from './QuickActionButton';\nimport { aiLimitOptions } from '../../queries/ai-course';\nimport { isLoggedIn, removeAuthToken } from '../../lib/jwt';\nimport { useMutation, useQuery } from '@tanstack/react-query';\nimport { queryClient } from '../../stores/query-client';\nimport { billingDetailsOptions } from '../../queries/billing';\nimport { useToast } from '../../hooks/use-toast';\nimport { markdownToHtml } from '../../lib/markdown';\nimport { ChatHistory } from './ChatHistory';\nimport { PersonalizedResponseForm } from './PersonalizedResponseForm';\nimport { userPersonaOptions } from '../../queries/user-persona';\nimport { UploadResumeModal } from './UploadResumeModal';\nimport { userResumeOptions } from '../../queries/user-resume';\nimport { httpPost } from '../../lib/query-http';\nimport {\n renderMessage,\n type MessagePartRenderer,\n} from '../../lib/render-chat-message';\nimport { RoadmapRecommendations } from '../RoadmapAIChat/RoadmapRecommendations';\nimport { AIChatCourse } from './AIChatCouse';\nimport { showLoginPopup } from '../../lib/popup';\nimport { readChatStream } from '../../lib/chat';\nimport { chatHistoryOptions } from '../../queries/chat-history';\nimport { cn } from '../../lib/classname';\nimport type { RoadmapAIChatHistoryType } from '../../hooks/use-roadmap-ai-chat';\n\nexport const aiChatRenderer: Record = {\n 'roadmap-recommendations': (options) => {\n return ;\n },\n 'generate-course': (options) => {\n return ;\n },\n};\n\ntype AIChatProps = {\n messages?: RoadmapAIChatHistoryType[];\n chatHistoryId?: string;\n setChatHistoryId?: (chatHistoryId: string) => void;\n onUpgrade?: () => void;\n};\n\nexport function AIChat(props: AIChatProps) {\n const {\n messages: defaultMessages,\n chatHistoryId: defaultChatHistoryId,\n setChatHistoryId: setDefaultChatHistoryId,\n onUpgrade,\n } = props;\n\n const toast = useToast();\n\n const [message, setMessage] = useState('');\n const [isStreamingMessage, setIsStreamingMessage] = useState(false);\n const [streamedMessage, setStreamedMessage] =\n useState(null);\n const [aiChatHistory, setAiChatHistory] = useState<\n RoadmapAIChatHistoryType[]\n >(defaultMessages ?? []);\n\n const [isPersonalizedResponseFormOpen, setIsPersonalizedResponseFormOpen] =\n useState(false);\n const [isUploadResumeModalOpen, setIsUploadResumeModalOpen] = useState(false);\n\n const [showScrollToBottomButton, setShowScrollToBottomButton] =\n useState(false);\n\n const scrollableContainerRef = useRef(null);\n const chatContainerRef = useRef(null);\n const textareaMessageRef = useRef(null);\n\n const { data: tokenUsage, isLoading } = useQuery(\n aiLimitOptions(),\n queryClient,\n );\n\n const { data: userBillingDetails, isLoading: isBillingDetailsLoading } =\n useQuery(billingDetailsOptions(), queryClient);\n const { data: userPersona, isLoading: isUserPersonaLoading } = useQuery(\n userPersonaOptions(),\n queryClient,\n );\n const { data: userResume, isLoading: isUserResumeLoading } = useQuery(\n userResumeOptions(),\n queryClient,\n );\n const { mutate: deleteChatMessage, isPending: isDeletingChatMessage } =\n useMutation(\n {\n mutationFn: (messages: RoadmapAIChatHistoryType[]) => {\n if (!defaultChatHistoryId) {\n return Promise.resolve({\n status: 200,\n message: 'Chat history not found',\n });\n }\n\n return httpPost(`/v1-delete-chat-message/${defaultChatHistoryId}`, {\n messages,\n });\n },\n onSuccess: () => {\n textareaMessageRef.current?.focus();\n\n queryClient.invalidateQueries(\n chatHistoryOptions(defaultChatHistoryId),\n );\n },\n onError: (error) => {\n toast.error(error?.message || 'Failed to delete message');\n },\n },\n queryClient,\n );\n\n const isLimitExceeded = (tokenUsage?.used || 0) >= (tokenUsage?.limit || 0);\n const isPaidUser = userBillingDetails?.status === 'active';\n\n const handleChatSubmit = () => {\n if (!isLoggedIn()) {\n showLoginPopup();\n return;\n }\n\n if (isLimitExceeded) {\n if (!isPaidUser) {\n onUpgrade?.();\n }\n\n toast.error('Limit reached for today. Please wait until tomorrow.');\n return;\n }\n\n const trimmedMessage = message.trim();\n if (!trimmedMessage || isStreamingMessage) {\n return;\n }\n\n const newMessages: RoadmapAIChatHistoryType[] = [\n ...aiChatHistory,\n {\n role: 'user',\n content: trimmedMessage,\n // it's just a simple message, so we can use markdownToHtml\n html: markdownToHtml(trimmedMessage),\n },\n ];\n\n flushSync(() => {\n setAiChatHistory(newMessages);\n setMessage('');\n });\n\n setTimeout(() => {\n scrollToBottom();\n }, 0);\n\n textareaMessageRef.current?.focus();\n completeAIChat(newMessages);\n };\n\n const canScrollToBottom = useCallback(() => {\n const scrollableContainer = scrollableContainerRef?.current;\n if (!scrollableContainer) {\n return false;\n }\n\n const paddingBottom = parseInt(\n getComputedStyle(scrollableContainer).paddingBottom,\n );\n\n const distanceFromBottom =\n scrollableContainer.scrollHeight -\n (scrollableContainer.scrollTop + scrollableContainer.clientHeight) -\n paddingBottom;\n\n return distanceFromBottom > -(paddingBottom - 80);\n }, []);\n\n const scrollToBottom = useCallback(\n (behavior: 'instant' | 'smooth' = 'smooth') => {\n const scrollableContainer = scrollableContainerRef?.current;\n if (!scrollableContainer) {\n return;\n }\n\n scrollableContainer.scrollTo({\n top: scrollableContainer.scrollHeight,\n behavior: behavior === 'instant' ? 'instant' : 'smooth',\n });\n },\n [scrollableContainerRef],\n );\n\n const completeAIChat = async (\n messages: RoadmapAIChatHistoryType[],\n force: boolean = false,\n ) => {\n setIsStreamingMessage(true);\n\n const response = await fetch(`${import.meta.env.PUBLIC_API_URL}/v1-chat`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify({\n chatHistoryId: defaultChatHistoryId,\n messages,\n force,\n }),\n });\n\n if (!response.ok) {\n const data = await response.json();\n\n toast.error(data?.message || 'Something went wrong');\n setAiChatHistory([...messages].slice(0, messages.length - 1));\n setIsStreamingMessage(false);\n\n if (data.status === 401) {\n removeAuthToken();\n window.location.reload();\n }\n }\n\n const stream = response.body;\n if (!stream) {\n setIsStreamingMessage(false);\n toast.error('Something went wrong');\n return;\n }\n\n await readChatStream(stream, {\n onMessage: async (content) => {\n const jsx = await renderMessage(content, aiChatRenderer, {\n isLoading: true,\n });\n\n flushSync(() => {\n setStreamedMessage(jsx);\n });\n setShowScrollToBottomButton(canScrollToBottom());\n },\n onMessageEnd: async (content) => {\n const jsx = await renderMessage(content, aiChatRenderer, {\n isLoading: false,\n });\n\n const newMessages: RoadmapAIChatHistoryType[] = [\n ...messages,\n {\n role: 'assistant',\n content,\n jsx,\n },\n ];\n\n flushSync(() => {\n setStreamedMessage(null);\n setIsStreamingMessage(false);\n setAiChatHistory(newMessages);\n });\n\n queryClient.invalidateQueries(aiLimitOptions());\n queryClient.invalidateQueries({\n predicate: (query) => {\n return query.queryKey[0] === 'list-chat-history';\n },\n });\n },\n onDetails: (details) => {\n const chatHistoryId = details?.chatHistoryId;\n if (!chatHistoryId) {\n return;\n }\n\n setDefaultChatHistoryId?.(chatHistoryId);\n },\n });\n\n setIsStreamingMessage(false);\n };\n\n const { mutate: uploadResume, isPending: isUploading } = useMutation(\n {\n mutationFn: (formData: FormData) => {\n return httpPost('/v1-upload-resume', formData);\n },\n onSuccess: () => {\n toast.success('Resume uploaded successfully');\n setIsUploadResumeModalOpen(false);\n queryClient.invalidateQueries(userResumeOptions());\n },\n onError: (error) => {\n toast.error(error?.message || 'Failed to upload resume');\n },\n onMutate: () => {\n setIsUploadResumeModalOpen(false);\n },\n },\n queryClient,\n );\n\n useEffect(() => {\n const scrollableContainer = scrollableContainerRef.current;\n if (!scrollableContainer) {\n return;\n }\n\n const abortController = new AbortController();\n let timeoutId: NodeJS.Timeout;\n const debouncedHandleScroll = () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n\n timeoutId = setTimeout(() => {\n setShowScrollToBottomButton(canScrollToBottom());\n }, 100);\n };\n\n debouncedHandleScroll();\n scrollableContainer.addEventListener('scroll', debouncedHandleScroll, {\n signal: abortController.signal,\n });\n\n return () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n abortController.abort();\n };\n }, [aiChatHistory]);\n\n const handleRegenerate = useCallback(\n (index: number) => {\n if (isLimitExceeded) {\n if (!isPaidUser) {\n onUpgrade?.();\n }\n\n toast.error('Limit reached for today. Please wait until tomorrow.');\n return;\n }\n\n const filteredChatHistory = aiChatHistory.slice(0, index);\n\n flushSync(() => {\n setAiChatHistory(filteredChatHistory);\n });\n scrollToBottom();\n completeAIChat(filteredChatHistory, true);\n },\n [aiChatHistory],\n );\n\n const handleDelete = useCallback(\n (index: number) => {\n const filteredChatHistory = aiChatHistory.filter((_, i) => i !== index);\n setAiChatHistory(filteredChatHistory);\n deleteChatMessage(filteredChatHistory);\n },\n [aiChatHistory],\n );\n\n const shouldShowQuickHelpPrompts =\n message.length === 0 && aiChatHistory.length === 0;\n const isDataLoading =\n isLoading ||\n isBillingDetailsLoading ||\n isUserPersonaLoading ||\n isUserResumeLoading;\n\n useEffect(() => {\n scrollToBottom('instant');\n }, []);\n\n const shouldShowUpgradeBanner = !isPaidUser && aiChatHistory.length > 0;\n\n return (\n
\n \n
\n {shouldShowQuickHelpPrompts && (\n {\n textareaMessageRef.current?.focus();\n setMessage(question);\n }}\n />\n )}\n {!shouldShowQuickHelpPrompts && (\n \n )}\n
\n
\n\n {isPersonalizedResponseFormOpen && (\n setIsPersonalizedResponseFormOpen(false)}\n />\n )}\n\n {isUploadResumeModalOpen && (\n setIsUploadResumeModalOpen(false)}\n userResume={userResume}\n isUploading={isUploading}\n uploadResume={uploadResume}\n />\n )}\n\n \n
\n
\n {\n if (!isLoggedIn()) {\n showLoginPopup();\n return;\n }\n\n setIsPersonalizedResponseFormOpen(true);\n }}\n />\n {\n if (!isLoggedIn()) {\n showLoginPopup();\n return;\n }\n\n setIsUploadResumeModalOpen(true);\n }}\n isLoading={isUploading}\n />\n
\n\n
\n {showScrollToBottomButton && (\n \n )}\n {aiChatHistory.length > 0 && !isPaidUser && (\n {\n setAiChatHistory([]);\n deleteChatMessage([]);\n }}\n />\n )}\n
\n
\n\n {\n e.preventDefault();\n if (isDataLoading) {\n return;\n }\n\n handleChatSubmit();\n }}\n >\n setMessage(e.target.value)}\n className=\"min-h-10 w-full resize-none bg-transparent text-sm focus:outline-none\"\n placeholder=\"Ask me anything...\"\n disabled={isStreamingMessage}\n autoFocus\n onKeyDown={(e) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n if (isDataLoading) {\n return;\n }\n\n e.preventDefault();\n handleChatSubmit();\n }\n }}\n />\n\n {isLimitExceeded && isLoggedIn() && !isDataLoading && (\n
\n \n

\n Limit reached for today\n {isPaidUser ? '. Please wait until tomorrow.' : ''}\n

\n {!isPaidUser && (\n {\n onUpgrade?.();\n }}\n className=\"rounded-md bg-white px-2 py-1 text-xs font-medium text-black hover:bg-gray-300\"\n >\n Upgrade for more\n \n )}\n
\n )}\n\n
\n \n \n \n
\n \n \n \n );\n}\n" }, { "path": "src/components/AIChat/AIChatCouse.tsx", "content": "import { Book } from 'lucide-react';\n\ntype AIChatCourseType = {\n keyword: string;\n difficulty: string;\n};\n\nfunction parseAIChatCourse(content: string): AIChatCourseType | null {\n const courseKeywordRegex = /(.*?)<\\/keyword>/;\n const courseKeyword = content.match(courseKeywordRegex)?.[1]?.trim();\n if (!courseKeyword) {\n return null;\n }\n\n const courseDifficultyRegex = /(.*?)<\\/difficulty>/;\n const courseDifficulty = content.match(courseDifficultyRegex)?.[1]?.trim();\n if (!courseDifficulty) {\n return null;\n }\n\n return { keyword: courseKeyword, difficulty: courseDifficulty || 'beginner' };\n}\n\ntype AIChatCourseProps = {\n content: string;\n};\n\nexport function AIChatCourse(props: AIChatCourseProps) {\n const { content } = props;\n\n const course = parseAIChatCourse(content);\n if (!course) {\n return null;\n }\n\n const courseSearchUrl = `/ai/course?term=${course?.keyword}&difficulty=${course?.difficulty}`;\n\n return (\n
\n \n \n {course?.keyword}\n \n
\n );\n}\n" }, { "path": "src/components/AIChat/ChatHistory.tsx", "content": "import { Fragment, memo } from 'react';\nimport { cn } from '../../lib/classname';\nimport {\n CopyIcon,\n CheckIcon,\n TrashIcon,\n type LucideIcon,\n RotateCwIcon,\n} from 'lucide-react';\nimport { useCopyText } from '../../hooks/use-copy-text';\nimport { Tooltip } from '../Tooltip';\nimport type { RoadmapAIChatHistoryType } from '../../hooks/use-roadmap-ai-chat';\n\ntype ChatHistoryProps = {\n chatHistory: RoadmapAIChatHistoryType[];\n onDelete?: (index: number) => void;\n onRegenerate?: (index: number) => void;\n isStreamingMessage: boolean;\n streamedMessage: React.ReactNode;\n};\n\nexport const ChatHistory = memo((props: ChatHistoryProps) => {\n const {\n chatHistory,\n onDelete,\n isStreamingMessage,\n streamedMessage,\n onRegenerate,\n } = props;\n\n return (\n
\n
\n
\n {chatHistory.map((chat, index) => {\n return (\n \n {\n onDelete?.(index);\n }}\n onRegenerate={() => {\n onRegenerate?.(index);\n }}\n />\n \n );\n })}\n\n {isStreamingMessage && !streamedMessage && (\n Thinking...

\"\n showActions={false}\n />\n )}\n\n {streamedMessage && (\n \n )}\n
\n
\n
\n );\n});\n\ntype AIChatCardProps = RoadmapAIChatHistoryType & {\n onDelete?: () => void;\n onRegenerate?: () => void;\n showActions?: boolean;\n};\n\nexport const AIChatCard = memo((props: AIChatCardProps) => {\n const {\n role,\n content,\n jsx,\n html,\n showActions = true,\n onDelete,\n onRegenerate,\n } = props;\n const { copyText, isCopied } = useCopyText();\n\n return (\n \n \n {!!jsx && jsx}\n\n {!!html && (\n \n )}\n \n\n {showActions && (\n \n copyText(content ?? '')}\n tooltip={isCopied ? 'Copied' : 'Copy'}\n />\n\n {role === 'assistant' && onRegenerate && (\n \n )}\n\n {onDelete && (\n \n )}\n \n )}\n \n );\n});\n\ntype ActionButtonProps = {\n icon: LucideIcon;\n tooltip?: string;\n onClick: () => void;\n};\n\nfunction ActionButton(props: ActionButtonProps) {\n const { icon: Icon, onClick, tooltip } = props;\n\n return (\n
\n \n \n \n\n {tooltip && (\n \n {tooltip}\n \n )}\n
\n );\n}\n" }, { "path": "src/components/AIChat/PersonalizedResponseForm.tsx", "content": "import { Loader2Icon } from 'lucide-react';\nimport { MessageCircle } from 'lucide-react';\nimport { memo, useId, useRef, useState } from 'react';\nimport { Modal } from '../Modal';\nimport { cn } from '../../lib/classname';\nimport { SelectNative } from '../SelectNative';\nimport { useMutation } from '@tanstack/react-query';\nimport { queryClient } from '../../stores/query-client';\nimport { httpPost } from '../../lib/query-http';\nimport { userPersonaOptions } from '../../queries/user-persona';\nimport { useToast } from '../../hooks/use-toast';\nimport { isLoggedIn } from '../../lib/jwt';\nimport { showLoginPopup } from '../../lib/popup';\n\nexport type ChatPreferencesFormData = {\n expertise: string;\n goal: string;\n about: string;\n specialInstructions?: string;\n};\n\ntype PersonalizedResponseFormProps = {\n defaultValues?: ChatPreferencesFormData;\n onClose: () => void;\n};\n\nexport const PersonalizedResponseForm = memo(\n (props: PersonalizedResponseFormProps) => {\n const { defaultValues, onClose } = props;\n const toast = useToast();\n\n const [expertise, setExpertise] = useState(defaultValues?.expertise ?? '');\n const [about, setAbout] = useState(defaultValues?.about ?? '');\n const [specialInstructions, setSpecialInstructions] = useState(\n defaultValues?.specialInstructions ?? ''\n );\n\n const goalOptions = [\n 'Finding a job',\n 'Learning for fun',\n 'Building a side project',\n 'Switching careers',\n 'Getting a promotion',\n 'Filling knowledge gaps',\n 'Other',\n ];\n\n const getInitialGoalSelection = () => {\n if (!defaultValues?.goal) {\n return '';\n }\n\n for (const option of goalOptions.slice(0, -1)) {\n if (defaultValues.goal.startsWith(option)) {\n return option;\n }\n }\n\n return 'Other';\n };\n\n const [selectedGoal, setSelectedGoal] = useState(getInitialGoalSelection());\n const [goal, setGoal] = useState(defaultValues?.goal ?? '');\n\n const expertiseFieldId = useId();\n const goalFieldId = useId();\n const goalSelectId = useId();\n const aboutFieldId = useId();\n const specialInstructionsFieldId = useId();\n\n const goalRef = useRef(null);\n\n const handleGoalSelectionChange = (value: string) => {\n setSelectedGoal(value);\n\n if (value === 'Other') {\n setGoal('');\n setTimeout(() => {\n goalRef.current?.focus();\n }, 0);\n } else {\n setGoal(value);\n }\n };\n\n const { mutate: setChatPreferences, isPending } = useMutation(\n {\n mutationFn: (data: ChatPreferencesFormData) => {\n return httpPost('/v1-set-chat-preferences', data);\n },\n onSuccess: () => {\n onClose();\n queryClient.invalidateQueries(userPersonaOptions());\n },\n onError: (error) => {\n toast.error(error?.message ?? 'Something went wrong');\n },\n },\n queryClient\n );\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n\n if (!isLoggedIn()) {\n showLoginPopup();\n return;\n }\n\n setChatPreferences({\n expertise,\n goal,\n about,\n specialInstructions,\n });\n };\n\n const hasFormCompleted = !!expertise && !!goal && !!about;\n\n return (\n \n
\n
\n
\n \n Rate your Experience\n \n setExpertise(e.target.value)}\n className=\"h-[40px] border-gray-300 text-sm focus:border-gray-500 focus:ring-1 focus:ring-gray-500\"\n >\n \n {[\n 'No experience (just starting out)',\n 'Beginner (less than 1 year of experience)',\n 'Intermediate (1-3 years of experience)',\n 'Expert (3-5 years of experience)',\n 'Master (5+ years of experience)',\n ].map((expertise) => (\n \n ))}\n \n
\n\n
\n \n What is your goal?\n \n\n handleGoalSelectionChange(e.target.value)}\n className=\"h-[40px] border-gray-300 text-sm focus:border-gray-500 focus:ring-1 focus:ring-gray-500\"\n >\n \n {goalOptions.map((goalOption) => (\n \n ))}\n \n\n {selectedGoal === 'Other' && (\n setGoal(e.target.value)}\n />\n )}\n
\n\n
\n \n Tell us more about yourself\n \n\n setAbout(e.target.value)}\n />\n
\n\n
\n \n Special Instructions\n \n\n setSpecialInstructions(e.target.value)}\n />\n
\n\n \n {isPending ? (\n \n ) : (\n <>\n \n {defaultValues ? 'Update Preferences' : 'Set Preferences'}\n \n )}\n \n \n
\n \n );\n }\n);\n" }, { "path": "src/components/AIChat/QuickActionButton.tsx", "content": "import { Loader2Icon, type LucideIcon } from 'lucide-react';\nimport { cn } from '../../lib/classname';\n\ntype QuickActionButtonProps = {\n icon?: LucideIcon;\n label?: string;\n onClick?: () => void;\n className?: string;\n isLoading?: boolean;\n};\n\nexport function QuickActionButton(props: QuickActionButtonProps) {\n const { icon: Icon, label, onClick, className, isLoading } = props;\n\n return (\n \n {Icon && !isLoading && }\n {isLoading && Icon && }\n {label}\n \n );\n}\n" }, { "path": "src/components/AIChat/QuickHelpPrompts.tsx", "content": "import { useState } from 'react';\nimport { cn } from '../../lib/classname';\n\ntype QuickHelpPromptsProps = {\n onQuestionClick: (question: string) => void;\n};\n\nexport function QuickHelpPrompts(props: QuickHelpPromptsProps) {\n const { onQuestionClick } = props;\n\n const [selectedActionIndex, setSelectedActionIndex] = useState(0);\n\n const quickActions = [\n {\n label: 'Help select a career path',\n questions: [\n 'What roadmap should I pick?',\n 'What are the best jobs for me?',\n 'Recommend me a project based on my expertise',\n 'Recommend me a topic I can learn in an hour',\n ],\n },\n {\n label: 'Help me find a job',\n questions: [\n 'How can I improve my resume?',\n 'How to make a tech resume?',\n 'What’s asked in coding interviews?',\n 'Where to find remote dev jobs?',\n ],\n },\n {\n label: 'Learn a Topic',\n questions: [\n 'What is the best way to learn React?',\n 'What is an API?',\n 'How do databases work?',\n 'What is async in JS?',\n ],\n },\n {\n label: 'Test my Knowledge',\n questions: [\n 'Quiz me on arrays.',\n 'Test my SQL skills.',\n 'Ask about REST basics.',\n 'Test my JS async knowledge.',\n ],\n },\n ];\n\n const selectedAction = quickActions[selectedActionIndex];\n\n return (\n
\n

How can I help you?

\n
\n {quickActions.map((action, index) => (\n setSelectedActionIndex(index)}\n >\n {action.label}\n \n ))}\n
\n\n
\n {selectedAction.questions.map((question) => (\n onQuestionClick(question)}\n >\n {question}\n \n ))}\n
\n
\n );\n}\n" }, { "path": "src/components/AIChat/UploadResumeModal.tsx", "content": "import { useCallback, useState, type FormEvent } from 'react';\nimport { Modal } from '../Modal';\nimport {\n useDropzone,\n type DropEvent,\n type FileRejection,\n} from 'react-dropzone';\nimport { cn } from '../../lib/classname';\nimport { Loader2Icon, PlusIcon, XIcon } from 'lucide-react';\nimport { useMutation } from '@tanstack/react-query';\nimport { httpDelete } from '../../lib/query-http';\nimport { useToast } from '../../hooks/use-toast';\nimport { queryClient } from '../../stores/query-client';\nimport {\n userResumeOptions,\n type UserResumeDocument,\n} from '../../queries/user-resume';\nimport { isLoggedIn } from '../../lib/jwt';\nimport { showLoginPopup } from '../../lib/popup';\n\ntype OnDrop = (\n acceptedFiles: T[],\n fileRejections: FileRejection[],\n event: DropEvent,\n) => void;\n\ntype UploadResumeModalProps = {\n userResume?: UserResumeDocument;\n onClose: () => void;\n isUploading: boolean;\n uploadResume: (formData: FormData) => void;\n};\n\nexport function UploadResumeModal(props: UploadResumeModalProps) {\n const {\n onClose,\n userResume: defaultUserResume,\n isUploading,\n uploadResume,\n } = props;\n\n const toast = useToast();\n const [showLinkedInExport, setShowLinkedInExport] = useState(false);\n const [file, setFile] = useState(\n defaultUserResume?.resumeUrl\n ? new File([], defaultUserResume.fileName, {\n type: defaultUserResume.fileType,\n })\n : null,\n );\n\n const onDrop: OnDrop = useCallback((acceptedFiles) => {\n setFile(acceptedFiles[0]);\n }, []);\n\n const { mutate: deleteResume, isPending: isDeletingResume } = useMutation(\n {\n mutationFn: async () => {\n return httpDelete('/v1-delete-resume');\n },\n onSuccess: () => {\n setFile(null);\n },\n onSettled: () => {\n return queryClient.invalidateQueries(userResumeOptions());\n },\n onError: (error) => {\n toast.error(error?.message || 'Failed to delete resume');\n },\n },\n queryClient,\n );\n\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n onDrop,\n accept: {\n 'application/pdf': ['.pdf'],\n },\n maxFiles: 1,\n maxSize: 5 * 1024 * 1024, // 5MB\n });\n\n const handleSubmit = (e: FormEvent) => {\n e.preventDefault();\n\n if (!isLoggedIn()) {\n showLoginPopup();\n return;\n }\n\n if (!file) {\n return;\n }\n\n const formData = new FormData();\n formData.append('resume', file);\n uploadResume(formData);\n };\n\n const size = file?.size || defaultUserResume?.fileSize || 0;\n const fileSize = (size / 1024 / 1024).toFixed(2);\n\n return (\n \n {showLinkedInExport ? (\n
\n

\n How to export LinkedIn Resume\n

\n

\n Visit your LinkedIn profile and export your resume as a PDF.\n

\n \n setShowLinkedInExport(false)}\n className=\"mt-4 flex w-full cursor-pointer items-center justify-center rounded-lg bg-black p-1 py-3 leading-none tracking-wide text-white transition-colors hover:bg-gray-900\"\n >\n Back to Upload\n \n
\n ) : (\n \n

\n Upload your resume\n

\n

\n Upload your resume to get personalized responses to your questions.\n

\n\n {file && (\n
\n
\n
\n

\n {file.name}\n

\n

{fileSize} MB

\n
\n\n deleteResume()}\n >\n {isDeletingResume ? (\n \n ) : (\n \n )}\n \n
\n
\n )}\n\n {!file && (\n <>\n \n \n
\n \n

\n Drag and drop your resume here or{' '}\n \n click to browse\n \n

\n
\n \n\n

\n Only PDF files (max 2MB in size) are supported\n

\n \n )}\n\n {!defaultUserResume && (\n <>\n \n {isUploading ? (\n \n ) : (\n 'Upload Resume'\n )}\n \n\n

\n You can also export your resume from{' '}\n setShowLinkedInExport(true)}\n className=\"text-black underline underline-offset-2 hover:text-gray-600\"\n >\n LinkedIn\n \n

\n \n )}\n \n )}\n \n );\n}\n" }, { "path": "src/components/AIChatHistory/AIChatHistory.tsx", "content": "import { useQuery } from '@tanstack/react-query';\nimport { queryClient } from '../../stores/query-client';\nimport { chatHistoryOptions } from '../../queries/chat-history';\nimport { AIChat, aiChatRenderer } from '../AIChat/AIChat';\nimport { Loader2Icon } from 'lucide-react';\nimport { useEffect, useState, useCallback } from 'react';\nimport { AIChatLayout } from './AIChatLayout';\nimport { ListChatHistory } from './ListChatHistory';\nimport { billingDetailsOptions } from '../../queries/billing';\nimport { ChatHistoryError } from './ChatHistoryError';\nimport { useClientMount } from '../../hooks/use-client-mount';\nimport { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';\n\ntype AIChatHistoryProps = {\n chatHistoryId?: string;\n};\n\nexport function AIChatHistory(props: AIChatHistoryProps) {\n const { chatHistoryId: defaultChatHistoryId } = props;\n\n const isClientMounted = useClientMount();\n const [keyTrigger, setKeyTrigger] = useState(0);\n const [showUpgradeModal, setShowUpgradeModal] = useState(false);\n const [isChatHistoryLoading, setIsChatHistoryLoading] = useState(true);\n const [chatHistoryId, setChatHistoryId] = useState(\n defaultChatHistoryId || undefined,\n );\n\n const { data, error: chatHistoryError } = useQuery(\n chatHistoryOptions(chatHistoryId, aiChatRenderer),\n queryClient,\n );\n\n const {\n data: userBillingDetails,\n isLoading: isBillingDetailsLoading,\n error: billingDetailsError,\n } = useQuery(billingDetailsOptions(), queryClient);\n\n const handleChatHistoryClick = useCallback(\n (nextChatHistoryId: string | null) => {\n setKeyTrigger((key) => key + 1);\n\n if (nextChatHistoryId === null) {\n setChatHistoryId(undefined);\n window.history.replaceState(null, '', '/ai/chat');\n return;\n }\n\n // show loader only if the chat history hasn't been fetched before (avoids UI flash)\n const hasAlreadyFetched = queryClient.getQueryData(\n chatHistoryOptions(nextChatHistoryId).queryKey,\n );\n\n if (!hasAlreadyFetched) {\n setIsChatHistoryLoading(true);\n }\n\n setChatHistoryId(nextChatHistoryId);\n window.history.replaceState(null, '', `/ai/chat/${nextChatHistoryId}`);\n },\n [],\n );\n\n const handleDelete = useCallback(\n (deletedChatHistoryId: string) => {\n if (deletedChatHistoryId !== chatHistoryId) {\n return;\n }\n\n setChatHistoryId(undefined);\n window.history.replaceState(null, '', '/ai/chat');\n setKeyTrigger((key) => key + 1);\n },\n [chatHistoryId],\n );\n\n const isPaidUser = userBillingDetails?.status === 'active';\n\n const hasError = chatHistoryError || billingDetailsError;\n\n const showLoader = isChatHistoryLoading && !hasError;\n const showError = !isChatHistoryLoading && Boolean(hasError);\n\n useEffect(() => {\n if (!chatHistoryId) {\n setIsChatHistoryLoading(false);\n return;\n }\n\n if (!data) {\n return;\n }\n\n setIsChatHistoryLoading(false);\n }, [data, chatHistoryId]);\n\n useEffect(() => {\n if (!hasError) {\n return;\n }\n\n setIsChatHistoryLoading(false);\n }, [hasError]);\n\n if (!isClientMounted || isBillingDetailsLoading) {\n return (\n \n
\n
\n \n
\n
\n \n );\n }\n\n return (\n \n
\n {\n setShowUpgradeModal(true);\n }}\n />\n\n
\n {showLoader && (\n
\n \n
\n )}\n\n {showError && (\n
\n \n
\n )}\n\n {!showLoader && !showError && (\n {\n setChatHistoryId(id);\n window.history.replaceState(null, '', `/ai/chat/${id}`);\n queryClient.invalidateQueries({\n predicate: (query) => {\n return query.queryKey[0] === 'list-chat-history';\n },\n });\n }}\n onUpgrade={() => {\n setShowUpgradeModal(true);\n }}\n />\n )}\n
\n
\n\n {showUpgradeModal && (\n setShowUpgradeModal(false)} />\n )}\n \n );\n}\n" }, { "path": "src/components/AIChatHistory/AIChatLayout.tsx", "content": "import { AITutorLayout } from '../AITutor/AITutorLayout';\nimport { CheckSubscriptionVerification } from '../Billing/CheckSubscriptionVerification';\nimport { Loader2Icon } from 'lucide-react';\n\ntype AIChatLayoutProps = {\n children: React.ReactNode;\n};\n\nexport function AIChatLayout(props: AIChatLayoutProps) {\n const { children } = props;\n\n return (\n \n {children}\n \n \n );\n}\n" }, { "path": "src/components/AIChatHistory/ChatHistoryAction.tsx", "content": "import { EllipsisVerticalIcon, Loader2Icon, Trash2Icon } from 'lucide-react';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '../DropdownMenu';\nimport { queryClient } from '../../stores/query-client';\nimport { useMutation } from '@tanstack/react-query';\nimport { httpDelete } from '../../lib/query-http';\nimport { listChatHistoryOptions } from '../../queries/chat-history';\nimport { useState } from 'react';\nimport { useToast } from '../../hooks/use-toast';\n\ntype ChatHistoryActionProps = {\n chatHistoryId: string;\n onDelete?: () => void;\n};\n\nexport function ChatHistoryAction(props: ChatHistoryActionProps) {\n const { chatHistoryId, onDelete } = props;\n\n const toast = useToast();\n const [isOpen, setIsOpen] = useState(false);\n const [isDeleting, setIsDeleting] = useState(false);\n\n const { mutate: deleteChatHistory, isPending: isDeletingLoading } =\n useMutation(\n {\n mutationFn: (chatHistoryId: string) => {\n return httpDelete(`/v1-delete-chat/${chatHistoryId}`);\n },\n onSettled: () => {\n return queryClient.invalidateQueries({\n predicate: (query) => {\n return query.queryKey[0] === 'list-chat-history';\n },\n });\n },\n onSuccess: () => {\n toast.success('Chat history deleted');\n setIsOpen(false);\n onDelete?.();\n },\n onError: (error) => {\n toast.error(error?.message || 'Failed to delete chat history');\n },\n },\n queryClient,\n );\n\n return (\n \n \n \n \n \n {!isDeleting && (\n {\n e.preventDefault();\n setIsDeleting(true);\n }}\n disabled={isDeletingLoading}\n >\n {isDeletingLoading ? (\n <>\n \n Deleting...\n \n ) : (\n <>\n \n Delete\n \n )}\n \n )}\n {isDeleting && (\n {\n e.preventDefault();\n }}\n disabled={isDeletingLoading}\n >\n
\n Are you sure?\n
\n {\n deleteChatHistory(chatHistoryId);\n setIsDeleting(false);\n }}\n className=\"cursor-pointer text-red-500 underline hover:text-red-800\"\n disabled={isDeletingLoading}\n >\n Yes\n \n setIsDeleting(false)}\n className=\"cursor-pointer text-red-500 underline hover:text-red-800\"\n disabled={isDeletingLoading}\n >\n No\n \n
\n
\n \n )}\n \n \n );\n}\n" }, { "path": "src/components/AIChatHistory/ChatHistoryError.tsx", "content": "import { AlertCircleIcon } from 'lucide-react';\nimport { cn } from '../../lib/classname';\n\ntype ChatHistoryErrorProps = {\n error: Error | null;\n className?: string;\n};\n\nexport function ChatHistoryError(props: ChatHistoryErrorProps) {\n const { error, className } = props;\n\n return (\n \n \n

\n Something went wrong\n

\n

\n {error?.message}\n

\n \n );\n}\n" }, { "path": "src/components/AIChatHistory/ChatHistoryGroup.tsx", "content": "import type { ChatHistoryWithoutMessages } from '../../queries/chat-history';\nimport { ChatHistoryItem } from './ChatHistoryItem';\n\ntype ChatHistoryGroupProps = {\n title: string;\n histories: ChatHistoryWithoutMessages[];\n activeChatHistoryId?: string;\n onChatHistoryClick: (id: string) => void;\n onDelete: (id: string) => void;\n};\n\nexport function ChatHistoryGroup(props: ChatHistoryGroupProps) {\n const {\n title,\n histories,\n activeChatHistoryId,\n onChatHistoryClick,\n onDelete,\n } = props;\n\n return (\n
\n

{title}

\n\n
    \n {histories.map((chatHistory) => {\n return (\n {\n onDelete?.(chatHistory._id);\n }}\n />\n );\n })}\n
\n
\n );\n}\n" }, { "path": "src/components/AIChatHistory/ChatHistoryItem.tsx", "content": "import { cn } from '../../lib/classname';\nimport type { ChatHistoryDocument } from '../../queries/chat-history';\nimport { ChatHistoryAction } from './ChatHistoryAction';\n\ntype ChatHistoryItemProps = {\n chatHistory: Omit;\n isActive: boolean;\n onChatHistoryClick: (chatHistoryId: string) => void;\n onDelete?: () => void;\n};\n\nexport function ChatHistoryItem(props: ChatHistoryItemProps) {\n const { chatHistory, isActive, onChatHistoryClick, onDelete } = props;\n\n return (\n
  • \n onChatHistoryClick(chatHistory._id)}\n >\n {chatHistory.title}\n \n\n
    \n \n
    \n
    • \n );\n}\n" }, { "path": "src/components/AIChatHistory/ListChatHistory.tsx", "content": "import { useInfiniteQuery } from '@tanstack/react-query';\nimport { listChatHistoryOptions } from '../../queries/chat-history';\nimport { queryClient } from '../../stores/query-client';\nimport {\n Loader2Icon,\n LockIcon,\n PanelLeftCloseIcon,\n PanelLeftIcon,\n PlusIcon,\n} from 'lucide-react';\nimport { useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { ListChatHistorySkeleton } from './ListChatHistorySkeleton';\nimport { ChatHistoryError } from './ChatHistoryError';\nimport { cn } from '../../lib/classname';\nimport { getTailwindScreenDimension } from '../../lib/is-mobile';\nimport { groupChatHistory } from '../../helper/grouping';\nimport { SearchAIChatHistory } from './SearchAIChatHistory';\nimport { ChatHistoryGroup } from './ChatHistoryGroup';\nimport { isLoggedIn } from '../../lib/jwt';\nimport { CheckIcon } from '../ReactIcons/CheckIcon';\n\ntype ListChatHistoryProps = {\n activeChatHistoryId?: string;\n onChatHistoryClick: (chatHistoryId: string | null) => void;\n onDelete?: (chatHistoryId: string) => void;\n isPaidUser?: boolean;\n onUpgrade?: () => void;\n};\n\nexport function ListChatHistory(props: ListChatHistoryProps) {\n const {\n activeChatHistoryId,\n onChatHistoryClick,\n onDelete,\n isPaidUser,\n onUpgrade,\n } = props;\n\n const [isOpen, setIsOpen] = useState(true);\n const [isLoading, setIsLoading] = useState(true);\n const [isMobile, setIsMobile] = useState(false);\n\n useLayoutEffect(() => {\n const deviceType = getTailwindScreenDimension();\n const isMediumSize = ['sm', 'md'].includes(deviceType);\n\n // Only set initial state from localStorage if not on mobile\n if (!isMediumSize) {\n const storedState = localStorage.getItem('chat-history-sidebar-open');\n setIsOpen(storedState === null ? true : storedState === 'true');\n } else {\n setIsOpen(!isMediumSize);\n }\n\n setIsMobile(isMediumSize);\n }, []);\n\n // Save state to localStorage when it changes, but only if not on mobile\n useEffect(() => {\n if (!isMobile) {\n localStorage.setItem('chat-history-sidebar-open', isOpen.toString());\n }\n }, [isOpen, isMobile]);\n\n const [query, setQuery] = useState('');\n\n const {\n data,\n fetchNextPage,\n hasNextPage,\n isFetchingNextPage,\n isError,\n error,\n isLoading: isLoadingInfiniteQuery,\n } = useInfiniteQuery(listChatHistoryOptions({ query }), queryClient);\n\n useEffect(() => {\n if (!data) {\n return;\n }\n\n setIsLoading(false);\n }, [data?.pages]);\n\n const groupedChatHistory = useMemo(() => {\n const allHistories = data?.pages?.flatMap((page) => page.data);\n return groupChatHistory(allHistories ?? []);\n }, [data?.pages]);\n\n if (!isLoggedIn()) {\n return null;\n }\n\n if (!isOpen) {\n return (\n
    \n {\n setIsOpen(true);\n }}\n >\n \n \n {\n if (isMobile) {\n setIsOpen(false);\n }\n onChatHistoryClick(null);\n }}\n >\n \n \n
    \n );\n }\n\n const isEmptyHistory = Object.values(groupedChatHistory ?? {}).every(\n (group) => group.histories.length === 0,\n );\n\n const classNames = cn(\n 'flex w-[255px] shrink-0 flex-col justify-start border-r border-gray-200 bg-white p-2',\n 'max-md:absolute max-md:inset-0 max-md:z-20 max-md:w-full',\n !isOpen && 'hidden',\n );\n\n const closeButton = (\n {\n setIsOpen(false);\n }}\n >\n \n \n );\n\n if (!isPaidUser) {\n return (\n \n );\n }\n\n return (\n
    \n {isLoading && }\n {!isLoading && isError && }\n\n {!isLoading && !isError && (\n <>\n
    \n
    \n

    Chat History

    \n {closeButton}\n
    \n\n {\n if (isMobile) {\n setIsOpen(false);\n }\n onChatHistoryClick(null);\n }}\n >\n \n New Chat\n \n\n \n
    \n\n
    \n {isEmptyHistory && !isLoadingInfiniteQuery && (\n
    \n

    No chat history

    \n
    \n )}\n\n {Object.entries(groupedChatHistory ?? {}).map(([key, value]) => {\n if (value.histories.length === 0) {\n return null;\n }\n\n return (\n {\n if (isMobile) {\n setIsOpen(false);\n }\n\n onChatHistoryClick(id);\n }}\n onDelete={(id) => {\n onDelete?.(id);\n }}\n />\n );\n })}\n\n {hasNextPage && (\n
    \n {\n fetchNextPage();\n }}\n disabled={isFetchingNextPage}\n >\n {isFetchingNextPage && (\n <>\n \n Loading more...\n \n )}\n {!isFetchingNextPage && 'Load More'}\n \n
    \n )}\n
    \n \n )}\n
    \n );\n}\n\ntype UpgradeToProMessageProps = {\n className?: string;\n onUpgrade?: () => void;\n closeButton?: React.ReactNode;\n};\n\nexport function UpgradeToProMessage(props: UpgradeToProMessageProps) {\n const { className, onUpgrade, closeButton } = props;\n\n return (\n
    \n
    \n {closeButton}\n
    \n\n
    \n
    \n
    \n \n
    \n

    \n Unlock History\n

    \n

    \n Save conversations and pick up right where you left off.\n

    \n
    \n\n
    \n
    \n \n Unlimited history\n
    \n
    \n \n Search old chats\n
    \n
    \n\n {\n onUpgrade?.();\n }}\n >\n Upgrade to Pro\n \n
    \n
    \n );\n}\n" }, { "path": "src/components/AIChatHistory/ListChatHistorySkeleton.tsx", "content": "export function ListChatHistorySkeleton() {\n return (\n <>\n
    \n
    \n
    \n\n
    \n
    \n\n
    \n\n
    \n
    \n
    \n
    \n\n
    \n {['Today', 'Last 7 Days', 'Older'].map((group) => (\n
    \n
    \n
      \n {[1, 2, 3].map((i) => (\n \n ))}\n
    \n
    \n ))}\n
    \n \n );\n}\n" }, { "path": "src/components/AIChatHistory/SearchAIChatHistory.tsx", "content": "import { useEffect, useState } from 'react';\nimport { useDebounceValue } from '../../hooks/use-debounce';\nimport { Loader2Icon, XIcon, SearchIcon } from 'lucide-react';\nimport { cn } from '../../lib/classname';\n\ntype SearchAIChatHistoryProps = {\n onSearch: (search: string) => void;\n isLoading?: boolean;\n className?: string;\n inputClassName?: string;\n};\n\nexport function SearchAIChatHistory(props: SearchAIChatHistoryProps) {\n const { onSearch, isLoading, className, inputClassName } = props;\n\n const [search, setSearch] = useState('');\n const debouncedSearch = useDebounceValue(search, 300);\n\n useEffect(() => {\n onSearch(debouncedSearch);\n }, [debouncedSearch, onSearch]);\n\n return (\n {\n e.preventDefault();\n onSearch(search);\n }}\n >\n setSearch(e.target.value)}\n />\n\n
    \n {isLoading ? (\n \n ) : (\n \n )}\n
    \n {search && (\n
    \n {\n setSearch('');\n }}\n className=\"rounded-lg p-1 hover:bg-gray-100\"\n >\n \n \n
    \n )}\n \n );\n}\n" }, { "path": "src/components/AIGuide/AIGuideActions.tsx", "content": "import { ArrowUpRightIcon, MoreVertical, Play, Trash2 } from 'lucide-react';\nimport { useRef, useState } from 'react';\nimport { useOutsideClick } from '../../hooks/use-outside-click';\nimport { useKeydown } from '../../hooks/use-keydown';\nimport { useToast } from '../../hooks/use-toast';\nimport { useMutation } from '@tanstack/react-query';\nimport { queryClient } from '../../stores/query-client';\nimport { httpDelete } from '../../lib/query-http';\n\ntype AIGuideActionsType = {\n guideSlug: string;\n onDeleted?: () => void;\n};\n\nexport function AIGuideActions(props: AIGuideActionsType) {\n const { guideSlug, onDeleted } = props;\n\n const toast = useToast();\n const dropdownRef = useRef(null);\n\n const [isOpen, setIsOpen] = useState(false);\n const [isConfirming, setIsConfirming] = useState(false);\n\n const { mutate: deleteCourse, isPending: isDeleting } = useMutation(\n {\n mutationFn: async () => {\n return httpDelete(`/v1-delete-ai-guide/${guideSlug}`);\n },\n onSuccess: () => {\n toast.success('Guide deleted');\n queryClient.invalidateQueries({\n predicate: (query) => query.queryKey?.[0] === 'user-ai-guides',\n });\n onDeleted?.();\n },\n onError: (error) => {\n toast.error(error?.message || 'Failed to delete guide');\n },\n },\n queryClient,\n );\n\n useOutsideClick(dropdownRef, () => {\n setIsOpen(false);\n });\n\n useKeydown('Escape', () => {\n setIsOpen(false);\n });\n\n return (\n
    \n {\n e.stopPropagation();\n setIsOpen(!isOpen);\n }}\n >\n \n \n\n {isOpen && (\n
    \n \n \n View Guide\n \n {!isConfirming && (\n setIsConfirming(true)}\n disabled={isDeleting}\n >\n {!isDeleting ? (\n <>\n \n Delete Guide\n \n ) : (\n 'Deleting...'\n )}\n \n )}\n\n {isConfirming && (\n \n Are you sure?\n
    \n {\n setIsConfirming(false);\n deleteCourse();\n }}\n disabled={isDeleting}\n className=\"text-red-500 underline hover:text-red-800\"\n >\n Yes\n \n setIsConfirming(false)}\n className=\"text-red-500 underline hover:text-red-800\"\n >\n No\n \n
    \n     \n )}\n
    \n )}\n
    \n );\n}\n" }, { "path": "src/components/AIGuide/AIGuideCard.tsx", "content": "import type { ListUserAIGuidesResponse } from '../../queries/ai-guide';\nimport { AIGuideActions } from './AIGuideActions';\n\ntype AIGuideCardProps = {\n guide: ListUserAIGuidesResponse['data'][number] & {\n html: string;\n };\n showActions?: boolean;\n};\n\nexport function AIGuideCard(props: AIGuideCardProps) {\n const { guide, showActions = true } = props;\n\n return (\n
    \n \n
    \n \n\n
    \n
    \n \n\n {showActions && guide.slug && (\n
    \n \n
    \n )}\n
    \n );\n}\n" }, { "path": "src/components/AIGuide/AILibraryLayout.tsx", "content": "import { useState } from 'react';\nimport { AITutorHeader } from '../AITutor/AITutorHeader';\nimport { AITutorLayout } from '../AITutor/AITutorLayout';\nimport { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';\nimport { LibraryTabs } from '../Library/LibraryTab';\n\ntype AILibraryLayoutProps = {\n activeTab: 'courses' | 'guides' | 'roadmaps' | 'quizzes';\n children: React.ReactNode;\n};\n\nexport function AILibraryLayout(props: AILibraryLayoutProps) {\n const { activeTab, children } = props;\n\n const [showUpgradePopup, setShowUpgradePopup] = useState(false);\n\n return (\n \n {showUpgradePopup && (\n setShowUpgradePopup(false)} />\n )}\n
    \n setShowUpgradePopup(true)}\n />\n\n \n {children}\n
    \n     \n );\n}\n" }, { "path": "src/components/AIQuiz/AIMCQQuestion.tsx", "content": "import type { QuizQuestion } from '../../queries/ai-quiz';\nimport { cn } from '../../lib/classname';\nimport {\n CheckIcon,\n XIcon,\n InfoIcon,\n AlertTriangleIcon,\n SkipForwardIcon,\n} from 'lucide-react';\nimport { markdownToHtml } from '../../lib/markdown';\nimport type { QuestionState } from './AIQuizContent';\n\nexport const markdownClassName =\n 'prose prose-base prose-p:mb-3 prose-p:text-base prose-p:font-normal prose-pre:my-5 prose-p:prose-code:whitespace-nowrap prose-p:prose-code:text-sm prose-p:prose-code:px-2 prose-p:prose-code:py-1 prose-p:prose-code:rounded-md prose-p:prose-code:border prose-p:prose-code:border-gray-300 prose-p:prose-code:bg-gray-50 text-left text-gray-800';\n\ntype AIMCQQuestionProps = {\n question: QuizQuestion;\n questionState: QuestionState;\n\n setSelectedOptions: (options: number[]) => void;\n onSubmit: (status: QuestionState['status']) => void;\n onNext: () => void;\n onSkip: () => void;\n isLastQuestion: boolean;\n onComplete: () => void;\n};\n\nexport function AIMCQQuestion(props: AIMCQQuestionProps) {\n const {\n question,\n questionState,\n setSelectedOptions,\n onSubmit,\n onSkip,\n onNext,\n isLastQuestion,\n onComplete,\n } = props;\n const { title: questionText, options, answerExplanation } = question;\n\n const { isSubmitted, selectedOptions = [] } = questionState;\n\n const canSubmitMultipleAnswers =\n options.filter((option) => option.isCorrect).length > 1;\n\n const handleSelectOption = (index: number) => {\n if (isSubmitted) {\n return;\n }\n\n if (!canSubmitMultipleAnswers) {\n const newSelectedOptions = [index];\n setSelectedOptions(newSelectedOptions);\n return;\n }\n\n const newSelectedOptions = selectedOptions.includes(index)\n ? selectedOptions.filter((id) => id !== index)\n : [...selectedOptions, index];\n setSelectedOptions(newSelectedOptions);\n };\n\n const handleSubmit = () => {\n if (isSubmitted) {\n if (isLastQuestion) {\n onComplete();\n } else {\n onNext();\n }\n return;\n }\n\n const isCorrect =\n selectedOptions.every((index) => options[index].isCorrect) &&\n selectedOptions.length ===\n options.filter((option) => option.isCorrect).length;\n\n onSubmit(isCorrect ? 'correct' : 'incorrect');\n };\n\n const hasAnySelected = selectedOptions.length > 0;\n const canSubmit = hasAnySelected || questionState.status === 'skipped';\n\n return (\n
    \n \n\n
    \n {options.map((option, index) => {\n const isSelected = selectedOptions.includes(index);\n const isCorrectOption = option.isCorrect;\n\n const isSelectedAndCorrect =\n isSubmitted && isSelected && isCorrectOption;\n const isSelectedAndIncorrect =\n isSubmitted && isSelected && !isCorrectOption;\n const isNotSelectedAndCorrect =\n isSubmitted && !isSelected && isCorrectOption;\n\n const html = markdownToHtml(option.title, false);\n\n const isOptionDisabled =\n isSubmitted && !isSelected && !isCorrectOption;\n\n return (\n handleSelectOption(index)}\n disabled={isOptionDisabled}\n >\n \n {isSelected && !isSubmitted && (\n
    \n )}\n {isSelectedAndCorrect && }\n\n {isSelectedAndIncorrect && }\n\n {isNotSelectedAndCorrect && }\n
    \n \n \n );\n })}\n
    \n\n {isSubmitted && answerExplanation && (\n \n )}\n\n
    \n \n Skip Question\n \n \n {isSubmitted\n ? isLastQuestion\n ? 'Finish Quiz'\n : 'Next Question'\n : 'Check Answer'}\n \n
    \n
    \n );\n}\n\ntype QuestionTitleProps = {\n title: string;\n};\n\nexport function QuestionTitle(props: QuestionTitleProps) {\n const { title } = props;\n\n const titleHtml = markdownToHtml(title, false);\n\n return (\n \n );\n}\n\ntype QuestionExplanationProps = {\n explanation: string;\n title?: string;\n status?: 'correct' | 'incorrect' | 'can_be_improved' | 'skipped' | 'pending';\n};\n\nexport function QuestionExplanation(props: QuestionExplanationProps) {\n const { explanation, title, status } = props;\n\n const explanationHtml = markdownToHtml(explanation, false);\n\n const getStatusConfig = () => {\n switch (status) {\n case 'correct':\n return {\n bgColor: 'bg-green-50',\n borderColor: 'border-green-200',\n iconBgColor: 'bg-green-500',\n textColor: 'text-green-800',\n icon: CheckIcon,\n defaultTitle: 'Correct Answer',\n };\n case 'incorrect':\n return {\n bgColor: 'bg-red-50',\n borderColor: 'border-red-200',\n iconBgColor: 'bg-red-500',\n textColor: 'text-red-800',\n icon: XIcon,\n defaultTitle: 'Incorrect Answer',\n };\n case 'can_be_improved':\n return {\n bgColor: 'bg-yellow-50',\n borderColor: 'border-yellow-200',\n iconBgColor: 'bg-yellow-500',\n textColor: 'text-yellow-800',\n icon: AlertTriangleIcon,\n defaultTitle: 'Can Be Improved',\n };\n case 'skipped':\n return {\n bgColor: 'bg-gray-50',\n borderColor: 'border-gray-200',\n iconBgColor: 'bg-gray-500',\n textColor: 'text-gray-800',\n icon: SkipForwardIcon,\n defaultTitle: 'Question Skipped',\n };\n default:\n return {\n bgColor: 'bg-blue-50',\n borderColor: 'border-blue-200',\n iconBgColor: 'bg-blue-500',\n textColor: 'text-blue-800',\n icon: InfoIcon,\n defaultTitle: 'Explanation',\n };\n }\n };\n\n const config = getStatusConfig();\n const IconComponent = config.icon;\n const displayTitle = title || config.defaultTitle;\n\n return (\n \n
    \n \n \n
    \n

    \n {displayTitle}\n

    \n
    \n \n
    \n );\n}\n" }, { "path": "src/components/AIQuiz/AIOpenEndedQuestion.tsx", "content": "import { type QuizQuestion } from '../../queries/ai-quiz';\nimport { cn } from '../../lib/classname';\nimport { Loader2Icon } from 'lucide-react';\nimport { QuestionExplanation, QuestionTitle } from './AIMCQQuestion';\nimport type { QuestionState } from './AIQuizContent';\nimport { useVerifyAnswer } from '../../hooks/use-verify-answer';\n\nexport type VerifyQuizAnswerResponse = {\n status: 'correct' | 'incorrect' | 'can_be_improved';\n feedback: string;\n};\n\ntype AIOpenEndedQuestionProps = {\n quizSlug: string;\n question: QuizQuestion;\n questionState: QuestionState;\n\n onSubmit: (status: QuestionState['status']) => void;\n onNext: () => void;\n\n setUserAnswer: (answer: string) => void;\n setCorrectAnswer: (answer: string) => void;\n\n isLastQuestion: boolean;\n onComplete: () => void;\n\n onSkip: () => void;\n};\n\nexport function AIOpenEndedQuestion(props: AIOpenEndedQuestionProps) {\n const {\n quizSlug,\n question,\n questionState,\n onSubmit,\n onNext,\n setUserAnswer,\n setCorrectAnswer,\n isLastQuestion,\n onComplete,\n onSkip,\n } = props;\n const { title: questionText } = question;\n\n const {\n isSubmitted,\n userAnswer = '',\n correctAnswer = '',\n status,\n } = questionState;\n\n const {\n verifyAnswer,\n data: verificationData,\n status: verifyStatus,\n } = useVerifyAnswer({\n quizSlug,\n question: questionText,\n userAnswer,\n onFinish: (data) => {\n if (!data || !data.status) {\n console.error('No data or status', data);\n onSubmit('incorrect');\n return;\n }\n\n setCorrectAnswer(data.feedback || '');\n onSubmit(data?.status || 'incorrect');\n },\n });\n\n const handleSubmit = async () => {\n if (isSubmittedAndNotSkipped) {\n if (isLastQuestion) {\n onComplete();\n } else {\n onNext();\n }\n return;\n }\n\n await verifyAnswer();\n };\n\n const canSubmit = userAnswer.trim().length > 0;\n const isVerifying =\n verifyStatus === 'loading' || verifyStatus === 'streaming';\n const feedback = verificationData?.feedback || correctAnswer;\n const feedbackStatus = verificationData?.status || status;\n\n const isSubmittedAndNotSkipped = isSubmitted && status !== 'skipped';\n\n return (\n
    \n \n\n
    \n setUserAnswer(e.target.value)}\n disabled={isSubmittedAndNotSkipped || isVerifying}\n />\n
    \n\n {feedback && (\n \n )}\n\n
    \n \n Skip Question\n \n\n \n {isVerifying ? (\n \n ) : isSubmittedAndNotSkipped ? (\n isLastQuestion ? (\n 'Finish Quiz'\n ) : (\n 'Next Question'\n )\n ) : (\n 'Verify Answer'\n )}\n \n
    \n
    \n );\n}\n" }, { "path": "src/components/AIQuiz/AIQuiz.tsx", "content": "import { useQuery } from '@tanstack/react-query';\nimport { useState } from 'react';\nimport { queryClient } from '../../stores/query-client';\nimport { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';\nimport { AlertCircleIcon } from 'lucide-react';\nimport { aiLimitOptions } from '../../queries/ai-course';\nimport { billingDetailsOptions } from '../../queries/billing';\nimport { AIQuizLayout } from './AIQuizLayout';\nimport { GenerateAIQuiz } from './GenerateAIQuiz';\nimport { aiQuizOptions, generateAIQuiz } from '../../queries/ai-quiz';\nimport { AIQuizContent } from './AIQuizContent';\nimport { LoadingChip } from '../LoadingChip';\n\ntype AIQuizProps = {\n quizSlug?: string;\n};\n\nexport function AIQuiz(props: AIQuizProps) {\n const { quizSlug: defaultQuizSlug } = props;\n const [quizSlug, setQuizSlug] = useState(defaultQuizSlug);\n\n const [showUpgradeModal, setShowUpgradeModal] = useState(false);\n const [isRegenerating, setIsRegenerating] = useState(false);\n\n // only fetch the guide if the guideSlug is provided\n // otherwise we are still generating the guide\n const {\n data: aiQuiz,\n isLoading: isLoadingBySlug,\n error: aiQuizError,\n } = useQuery(aiQuizOptions(quizSlug), queryClient);\n\n const {\n data: tokenUsage,\n isLoading: isTokenUsageLoading,\n refetch: refetchTokenUsage,\n } = useQuery(aiLimitOptions(), queryClient);\n\n const { data: userBillingDetails, isLoading: isBillingDetailsLoading } =\n useQuery(billingDetailsOptions(), queryClient);\n\n const isLoading =\n isLoadingBySlug ||\n isRegenerating ||\n isTokenUsageLoading ||\n isBillingDetailsLoading;\n\n return (\n \n {showUpgradeModal && (\n setShowUpgradeModal(false)} />\n )}\n\n
    \n {isLoading && (\n
    \n \n
    \n )}\n\n {!isLoading && aiQuizError && (\n
    \n
    \n \n

    \n {aiQuizError?.message || 'Something went wrong'}\n

    \n
    \n
    \n )}\n\n {quizSlug && !aiQuizError && (\n \n )}\n {!quizSlug && !aiQuizError && (\n \n )}\n
    \n     \n );\n}\n" }, { "path": "src/components/AIQuiz/AIQuizActions.tsx", "content": "import { MoreVertical, Play, Trash2 } from 'lucide-react';\nimport { useRef, useState } from 'react';\nimport { useOutsideClick } from '../../hooks/use-outside-click';\nimport { useKeydown } from '../../hooks/use-keydown';\nimport { useToast } from '../../hooks/use-toast';\nimport { useMutation } from '@tanstack/react-query';\nimport { queryClient } from '../../stores/query-client';\nimport { httpDelete } from '../../lib/query-http';\n\ntype AIQuizActionsType = {\n quizSlug: string;\n onDeleted?: () => void;\n};\n\nexport function AIQuizActions(props: AIQuizActionsType) {\n const { quizSlug, onDeleted } = props;\n\n const toast = useToast();\n const dropdownRef = useRef(null);\n\n const [isOpen, setIsOpen] = useState(false);\n const [isConfirming, setIsConfirming] = useState(false);\n\n const { mutate: deleteQuiz, isPending: isDeleting } = useMutation(\n {\n mutationFn: async () => {\n return httpDelete(`/v1-delete-ai-quiz/${quizSlug}`);\n },\n onSuccess: () => {\n toast.success('Quiz deleted');\n queryClient.invalidateQueries({\n predicate: (query) => query.queryKey?.[0] === 'user-ai-quizzes',\n });\n onDeleted?.();\n },\n onError: (error) => {\n toast.error(error?.message || 'Failed to delete quiz');\n },\n },\n queryClient,\n );\n\n useOutsideClick(dropdownRef, () => {\n setIsOpen(false);\n });\n\n useKeydown('Escape', () => {\n setIsOpen(false);\n });\n\n return (\n
    \n {\n e.stopPropagation();\n setIsOpen(!isOpen);\n }}\n >\n \n \n\n {isOpen && (\n
    \n \n \n Take Quiz\n \n {!isConfirming && (\n setIsConfirming(true)}\n disabled={isDeleting}\n >\n {!isDeleting ? (\n <>\n \n Delete Quiz\n \n ) : (\n 'Deleting...'\n )}\n \n )}\n\n {isConfirming && (\n \n Are you sure?\n
    \n {\n setIsConfirming(false);\n deleteQuiz();\n }}\n disabled={isDeleting}\n className=\"text-red-500 underline hover:text-red-800\"\n >\n Yes\n \n setIsConfirming(false)}\n className=\"text-red-500 underline hover:text-red-800\"\n >\n No\n \n
    \n     \n )}\n
    \n )}\n
    \n );\n}\n" }, { "path": "src/components/AIQuiz/AIQuizCard.tsx", "content": "import { CalendarIcon, ClipboardCheck } from 'lucide-react';\nimport { cn } from '../../lib/classname';\nimport { getRelativeTimeString } from '../../lib/date';\nimport type { AIQuizDocument } from '../../queries/ai-quiz';\nimport { AIQuizActions } from './AIQuizActions';\n\ntype AIQuizCardProps = {\n quiz: Omit;\n variant?: 'row' | 'column';\n showActions?: boolean;\n};\n\nexport function AIQuizCard(props: AIQuizCardProps) {\n const { quiz, variant = 'row', showActions = true } = props;\n\n const updatedAgo = getRelativeTimeString(quiz?.updatedAt);\n\n return (\n
    \n \n
    \n

    \n {quiz.title}\n

    \n
    \n\n
    \n
    \n \n {updatedAgo}\n\n
    \n \n \n {quiz.format === 'mcq' ? 'MCQ' : quiz.format}\n \n
    \n
    \n
    \n \n\n {showActions && quiz.slug && (\n
    \n \n
    \n )}\n
    \n );\n}\n" }, { "path": "src/components/AIQuiz/AIQuizContent.tsx", "content": "import { useState } from 'react';\nimport type { QuizQuestion } from '../../queries/ai-quiz';\nimport { AIMCQQuestion } from './AIMCQQuestion';\nimport { AIOpenEndedQuestion } from './AIOpenEndedQuestion';\nimport { QuizTopNavigation } from './QuizTopNavigation';\nimport { getPercentage } from '../../lib/number';\nimport { AIQuizResults } from './AIQuizResults';\nimport { flushSync } from 'react-dom';\nimport { AIQuizResultStrip } from './AIQuizResultStrip';\nimport { cn } from '../../lib/classname';\nimport { httpPost } from '../../lib/query-http';\nimport { useMutation } from '@tanstack/react-query';\nimport { queryClient } from '../../stores/query-client';\n\ntype AIQuizResultFeedbackBody = {\n questionsWithAnswers: string;\n};\n\ntype AIQuizResultFeedbackQuery = {};\n\nexport type AIQuizResultFeedbackResponse = {\n summary?: string;\n guideTopics?: string[];\n courseTopics?: string[];\n};\n\nexport type QuestionState = {\n isSubmitted: boolean;\n selectedOptions?: number[];\n userAnswer?: string;\n correctAnswer?: string;\n status: 'correct' | 'incorrect' | 'skipped' | 'pending' | 'can_be_improved';\n};\n\nconst DEFAULT_QUESTION_STATE: QuestionState = {\n isSubmitted: false,\n selectedOptions: [],\n userAnswer: '',\n correctAnswer: '',\n status: 'pending',\n};\n\ntype QuizStatus = 'answering' | 'submitted' | 'reviewing';\n\ntype AIQuizContentProps = {\n quizSlug?: string;\n questions: QuizQuestion[];\n isLoading?: boolean;\n isStreaming?: boolean;\n};\n\nexport function AIQuizContent(props: AIQuizContentProps) {\n const { quizSlug, questions, isLoading, isStreaming = false } = props;\n\n const [activeQuestionIndex, setActiveQuestionIndex] = useState(0);\n const activeQuestion = questions[activeQuestionIndex];\n\n const [questionStates, setQuestionStates] = useState<\n Record\n >({});\n const [quizStatus, setQuizStatus] = useState('answering');\n\n const activeQuestionState =\n questionStates[activeQuestionIndex] ?? DEFAULT_QUESTION_STATE;\n const isLastQuestion = activeQuestionIndex === questions.length - 1;\n\n const {\n mutate: userQuizResultFeedback,\n isPending: isUserQuizResultFeedbackPending,\n data: userQuizResultFeedbackData,\n status: userQuizResultFeedbackStatus,\n reset: resetUserQuizResultFeedback,\n } = useMutation(\n {\n mutationKey: ['user-quiz-result-feedback', quizSlug],\n mutationFn: (body: AIQuizResultFeedbackBody) => {\n return httpPost(\n `/v1-ai-quiz-result-feedback/${quizSlug}`,\n body,\n );\n },\n },\n queryClient,\n );\n\n const handleSubmit = (status: QuestionState['status']) => {\n const oldState =\n questionStates[activeQuestionIndex] ?? DEFAULT_QUESTION_STATE;\n\n const newQuestionStates = {\n ...questionStates,\n [activeQuestionIndex]: {\n ...oldState,\n isSubmitted: true,\n status,\n },\n };\n\n setQuestionStates(newQuestionStates);\n return newQuestionStates;\n };\n\n const handleSetUserAnswer = (userAnswer: string) => {\n setQuestionStates((prev) => {\n const oldState = prev[activeQuestionIndex] ?? DEFAULT_QUESTION_STATE;\n\n const newSelectedOptions = {\n ...prev,\n [activeQuestionIndex]: {\n ...oldState,\n userAnswer,\n },\n };\n\n return newSelectedOptions;\n });\n };\n\n const handleSetCorrectAnswer = (correctAnswer: string) => {\n flushSync(() => {\n setQuestionStates((prev) => {\n const oldState = prev[activeQuestionIndex] ?? DEFAULT_QUESTION_STATE;\n\n const newSelectedOptions = {\n ...prev,\n [activeQuestionIndex]: {\n ...oldState,\n correctAnswer,\n },\n };\n\n return newSelectedOptions;\n });\n });\n };\n\n const handleSelectOptions = (options: number[]) => {\n setQuestionStates((prev) => {\n const oldState = prev[activeQuestionIndex] ?? DEFAULT_QUESTION_STATE;\n\n const newSelectedOptions = {\n ...prev,\n [activeQuestionIndex]: {\n ...oldState,\n selectedOptions: options,\n },\n };\n\n return newSelectedOptions;\n });\n };\n\n const handleRetry = () => {\n setActiveQuestionIndex(0);\n setQuestionStates({});\n setQuizStatus('answering');\n resetUserQuizResultFeedback();\n };\n\n const hasNextQuestion = activeQuestionIndex < questions.length - 1;\n const hasPreviousQuestion = activeQuestionIndex > 0;\n const totalQuestions = questions?.length ?? 0;\n const isAllQuestionsSubmitted =\n Object.values(questionStates).filter((state) => state.status !== 'pending')\n .length === totalQuestions;\n\n const progressPercentage = isLoading\n ? 0\n : getPercentage(activeQuestionIndex + 1, totalQuestions);\n\n const shouldShowQuestions =\n quizStatus === 'answering' || quizStatus === 'reviewing';\n\n const handleNextQuestion = () => {\n if (!hasNextQuestion) {\n setQuizStatus(isAllQuestionsSubmitted ? 'submitted' : 'reviewing');\n return;\n }\n\n setActiveQuestionIndex(activeQuestionIndex + 1);\n };\n\n const handleSkip = () => {\n const prevStatus = questionStates[activeQuestionIndex]?.status ?? 'pending';\n const newQuestionStates = handleSubmit(\n prevStatus === 'pending' ? 'skipped' : prevStatus,\n );\n\n if (hasNextQuestion) {\n handleNextQuestion();\n } else {\n handleComplete(newQuestionStates);\n }\n };\n\n const handleComplete = (\n newQuestionStates?: Record,\n ) => {\n const states = newQuestionStates ?? questionStates;\n setQuizStatus('submitted');\n\n const questionsWithAnswers = questions\n .map((question, index) => {\n const questionState = states[index];\n\n let questionWithAnswer = `## Question ${index + 1} (${question.type === 'mcq' ? 'MCQ' : 'Open Ended'}): ${question.title}`;\n if (question.type === 'mcq') {\n questionWithAnswer += `\\n### Options:`;\n question?.options?.forEach((option, optionIndex) => {\n questionWithAnswer += `\\n${optionIndex + 1}. ${option.title} (${option.isCorrect ? 'Correct' : 'Incorrect'})`;\n });\n\n if (questionState?.selectedOptions?.length) {\n questionWithAnswer += `\\n### User Selected Answer:`;\n questionState?.selectedOptions?.forEach((optionIndex) => {\n questionWithAnswer += `\\n${optionIndex + 1}. ${question.options[optionIndex].title}`;\n });\n }\n } else {\n if (questionState?.userAnswer) {\n questionWithAnswer += `\\n### User Answer: ${questionState?.userAnswer}`;\n }\n\n if (questionState?.correctAnswer) {\n questionWithAnswer += `\\n### AI Feedback: ${questionState?.correctAnswer}`;\n }\n }\n\n questionWithAnswer += `\\n### Final Status: ${questionState?.status}`;\n\n return questionWithAnswer;\n })\n .join('\\n\\n');\n\n if (userQuizResultFeedbackStatus === 'idle') {\n userQuizResultFeedback({ questionsWithAnswers });\n }\n };\n\n return (\n \n \n
    \n
    \n {shouldShowQuestions && (\n {\n if (!hasPreviousQuestion) {\n return;\n }\n\n setActiveQuestionIndex(activeQuestionIndex - 1);\n }}\n onNext={handleNextQuestion}\n />\n )}\n\n {quizStatus === 'submitted' && (\n {\n window.location.href = '/ai/quiz';\n }}\n onReview={(questionIndex) => {\n setActiveQuestionIndex(questionIndex);\n setQuizStatus('reviewing');\n }}\n isFeedbackLoading={isUserQuizResultFeedbackPending}\n feedback={userQuizResultFeedbackData}\n />\n )}\n\n {shouldShowQuestions && (\n <>\n {activeQuestion && activeQuestion.type === 'mcq' && (\n \n )}\n\n {activeQuestion && activeQuestion.type === 'open-ended' && (\n \n )}\n \n )}\n
    \n
    \n
    \n\n {quizStatus === 'reviewing' && (\n {\n setActiveQuestionIndex(questionIndex);\n setQuizStatus('reviewing');\n }}\n onComplete={() => {\n setQuizStatus('submitted');\n }}\n />\n )}\n
    \n );\n}\n" }, { "path": "src/components/AIQuiz/AIQuizGenerator.tsx", "content": "import {\n FileTextIcon,\n ListIcon,\n ListTodoIcon,\n SparklesIcon,\n type LucideIcon,\n} from 'lucide-react';\nimport { useEffect, useId, useState } from 'react';\nimport { isLoggedIn } from '../../lib/jwt';\nimport { showLoginPopup } from '../../lib/popup';\nimport { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';\nimport { billingDetailsOptions } from '../../queries/billing';\nimport {\n clearQuestionAnswerChatMessages,\n storeQuestionAnswerChatMessages,\n} from '../../lib/ai-questions';\nimport {\n QuestionAnswerChat,\n type QuestionAnswerChatMessage,\n} from '../ContentGenerator/QuestionAnswerChat';\nimport { useToast } from '../../hooks/use-toast';\nimport { cn } from '../../lib/classname';\nimport { getUrlParams } from '../../lib/browser';\nimport { FormatItem } from '../ContentGenerator/FormatItem';\nimport { queryClient } from '../../stores/query-client';\nimport { useQuery } from '@tanstack/react-query';\nimport { aiLimitOptions } from '../../queries/ai-course';\nimport { showUpgradeModal } from '../../stores/subscription';\n\nconst allowedFormats = ['mcq', 'open-ended', 'mixed'] as const;\nexport type AllowedFormat = (typeof allowedFormats)[number];\n\nexport function AIQuizGenerator() {\n const [isUpgradeModalOpen, setIsUpgradeModalOpen] = useState(false);\n\n const toast = useToast();\n const [title, setTitle] = useState('');\n const [selectedFormat, setSelectedFormat] = useState('mcq');\n\n const [showFineTuneOptions, setShowFineTuneOptions] = useState(false);\n const [questionAnswerChatMessages, setQuestionAnswerChatMessages] = useState<\n QuestionAnswerChatMessage[]\n >([]);\n\n const {\n data: tokenUsage,\n isLoading: isTokenUsageLoading,\n refetch: refetchTokenUsage,\n } = useQuery(aiLimitOptions(), queryClient);\n\n const { data: userBillingDetails, isLoading: isBillingDetailsLoading } =\n useQuery(billingDetailsOptions(), queryClient);\n\n const isLimitExceeded = (tokenUsage?.used || 0) >= (tokenUsage?.limit || 0);\n const isPaidUser = userBillingDetails?.status === 'active';\n\n const selectedLimit = tokenUsage?.quiz;\n const showLimitWarning =\n !isPaidUser &&\n !isBillingDetailsLoading &&\n !isTokenUsageLoading &&\n isLoggedIn();\n\n const titleFieldId = useId();\n const fineTuneOptionsId = useId();\n\n useEffect(() => {\n const params = getUrlParams();\n const format = params.format as AllowedFormat;\n if (format && allowedFormats.find((f) => f.value === format)) {\n setSelectedFormat(format);\n }\n }, []);\n\n const allowedFormats: {\n label: string;\n formatTitle: string;\n icon: LucideIcon;\n value: AllowedFormat;\n }[] = [\n {\n label: 'Multi-Choice',\n formatTitle: 'Multiple Choice Question',\n icon: ListTodoIcon,\n value: 'mcq',\n },\n {\n label: 'Open-Ended',\n formatTitle: 'Open-Ended Question',\n icon: FileTextIcon,\n value: 'open-ended',\n },\n {\n label: 'Mixed',\n formatTitle: 'Mixed Question (MCQ + Open-Ended)',\n icon: ListIcon,\n value: 'mixed',\n },\n ];\n\n const handleSubmit = () => {\n if (!isLoggedIn()) {\n showLoginPopup();\n return;\n }\n\n if (!isPaidUser && isLimitExceeded) {\n setIsUpgradeModalOpen(true);\n return;\n }\n\n if (\n !isPaidUser &&\n selectedLimit &&\n selectedLimit?.used >= selectedLimit?.limit\n ) {\n showUpgradeModal();\n return;\n }\n\n let sessionId = '';\n if (showFineTuneOptions) {\n clearQuestionAnswerChatMessages();\n sessionId = storeQuestionAnswerChatMessages(questionAnswerChatMessages);\n }\n\n window.location.href = `/ai/quiz/search?term=${title}&format=${selectedFormat}&id=${sessionId}`;\n };\n\n useEffect(() => {\n window?.fireEvent({\n action: 'tutor_user',\n category: 'ai_tutor',\n label: 'Visited AI Quiz Generator Page',\n });\n }, []);\n\n const trimmedTitle = title.trim();\n const canGenerate = trimmedTitle && trimmedTitle.length >= 3;\n const selectedFormatTitle = allowedFormats.find(\n (f) => f.value === selectedFormat,\n )?.formatTitle;\n\n return (\n
    \n
    \n {isUpgradeModalOpen && (\n setIsUpgradeModalOpen(false)} />\n )}\n\n {showLimitWarning && (\n
    \n {selectedLimit?.used} of {selectedLimit?.limit} quizzes\n setIsUpgradeModalOpen(true)}\n className=\"ml-2 rounded-xl bg-yellow-600 px-2 py-1 text-sm text-white hover:opacity-80\"\n >\n Need more? Upgrade\n \n
    \n )}\n

    \n Test your Knowledge\n

    \n

    \n Create a personalized quiz to test your understanding of any topic\n

    \n
    \n\n {\n e.preventDefault();\n handleSubmit();\n }}\n >\n
    \n \n {\n setTitle(e.target.value);\n setShowFineTuneOptions(false);\n }}\n className=\"block w-full rounded-xl border border-gray-200 bg-white p-4 outline-none placeholder:text-gray-500 focus:border-gray-500\"\n required\n minLength={3}\n data-clarity-unmask=\"true\"\n />\n
    \n
    \n \n
    \n {allowedFormats.map((format) => {\n const isSelected = format.value === selectedFormat;\n\n return (\n setSelectedFormat(format.value)}\n icon={format.icon}\n isSelected={isSelected}\n />\n );\n })}\n
    \n
    \n\n \n {\n if (!isLoggedIn()) {\n showLoginPopup();\n return;\n }\n\n if (!isPaidUser && isLimitExceeded) {\n setIsUpgradeModalOpen(true);\n return;\n }\n\n if (!trimmedTitle) {\n toast.error('Please enter a topic first');\n return;\n }\n\n if (trimmedTitle.length < 3) {\n toast.error('Topic must be at least 3 characters long');\n return;\n }\n\n setShowFineTuneOptions(e.target.checked);\n }}\n />\n \n Answer the following questions for a better result\n \n Customize your quiz\n \n\n {showFineTuneOptions && (\n \n )}\n\n \n \n Generate Quiz\n \n \n
    \n );\n}\n" }, { "path": "src/components/AIQuiz/AIQuizLayout.tsx", "content": "import { AITutorLayout } from '../AITutor/AITutorLayout';\n\ntype AIQuizLayoutProps = {\n children: React.ReactNode;\n};\n\nexport function AIQuizLayout(props: AIQuizLayoutProps) {\n const { children } = props;\n return (\n \n {children}\n \n );\n}\n" }, { "path": "src/components/AIQuiz/AIQuizResultStrip.tsx", "content": "import { cn } from '../../lib/classname';\nimport {\n ArrowRightIcon,\n CheckIcon,\n CircleAlertIcon,\n Minus, XIcon\n} from 'lucide-react';\nimport type { QuestionState } from './AIQuizContent';\n\ntype AIQuizResultStripProps = {\n activeQuestionIndex: number;\n questionStates: Record;\n onReview?: (questionIndex: number) => void;\n onComplete?: () => void;\n};\n\nexport function AIQuizResultStrip(props: AIQuizResultStripProps) {\n const { activeQuestionIndex, questionStates, onReview, onComplete } = props;\n const states = Object.values(questionStates);\n\n return (\n
    \n
    \n
    \n {states.map((state, quizIndex) => (\n \n ))}\n
    \n\n \n Show Results \n \n
    \n
    \n );\n}\n\ntype QuizStateButtonProps = {\n state: QuestionState;\n quizIndex: number;\n isActive: boolean;\n onReview?: (questionIndex: number) => void;\n className?: string;\n variant?: 'default' | 'small';\n};\n\nexport function QuizStateButton(props: QuizStateButtonProps) {\n const {\n state,\n quizIndex,\n isActive,\n onReview,\n className,\n variant = 'default',\n } = props;\n const { status } = state;\n\n const isCorrect = status === 'correct';\n const isIncorrect = status === 'incorrect';\n const isSkipped = status === 'skipped';\n const isCanBeImproved = status === 'can_be_improved';\n\n return (\n onReview?.(quizIndex)}\n className={cn(\n 'flex aspect-square flex-col items-center justify-center rounded-xl border p-1 hover:opacity-80',\n isCorrect && 'border-green-700 bg-green-700 text-white',\n isIncorrect && 'border-red-700 bg-red-700 text-white',\n isSkipped && 'border-gray-400 bg-gray-400 text-white',\n isCanBeImproved && 'border-yellow-700 bg-yellow-700 text-white',\n !isActive && 'opacity-50',\n variant === 'small' && 'rounded-lg',\n className,\n )}\n >\n {isCorrect && (\n \n )}\n {isIncorrect && (\n \n )}\n {isSkipped && (\n \n )}\n {isCanBeImproved && (\n \n )}\n \n );\n}\n" }, { "path": "src/components/AIQuiz/AIQuizResults.tsx", "content": "import {\n RotateCcw,\n BarChart3,\n Zap,\n Check,\n X,\n Minus,\n BookOpenIcon,\n FileTextIcon,\n} from 'lucide-react';\nimport { cn } from '../../lib/classname';\nimport { getPercentage } from '../../lib/number';\nimport type {\n AIQuizResultFeedbackResponse,\n QuestionState,\n} from './AIQuizContent';\nimport { QuizStateButton } from './AIQuizResultStrip';\nimport { CircularProgress } from './CircularProgress';\nimport { markdownToHtml } from '../../lib/markdown';\nimport { markdownClassName } from './AIMCQQuestion';\n\ntype AIQuizResultsProps = {\n questionStates: Record;\n totalQuestions: number;\n onRetry: () => void;\n onNewQuiz: () => void;\n onReview?: (questionIndex: number) => void;\n\n isFeedbackLoading?: boolean;\n feedback?: AIQuizResultFeedbackResponse;\n};\n\nexport function AIQuizResults(props: AIQuizResultsProps) {\n const {\n questionStates,\n totalQuestions,\n onRetry,\n onNewQuiz,\n onReview,\n isFeedbackLoading,\n feedback,\n } = props;\n\n const states = Object.values(questionStates);\n const correctCount = states.filter(\n (state) => state.status === 'correct',\n ).length;\n\n const incorrectCount = states.filter(\n (state) => state.status === 'incorrect',\n ).length;\n\n const skippedCount = states.filter(\n (state) => state.status === 'skipped',\n ).length;\n\n const accuracy = getPercentage(correctCount, totalQuestions);\n\n const getPerformanceLevel = (): {\n level: string;\n color: 'emerald' | 'green' | 'blue' | 'orange' | 'red';\n } => {\n if (accuracy >= 90) return { level: 'Excellent', color: 'emerald' };\n if (accuracy >= 75) return { level: 'Great', color: 'green' };\n if (accuracy >= 60) return { level: 'Good', color: 'blue' };\n if (accuracy >= 40) return { level: 'Fair', color: 'orange' };\n return { level: 'Needs Work', color: 'red' };\n };\n\n const performance = getPerformanceLevel();\n\n const canReview = onReview && states.some((state) => state.isSubmitted);\n\n return (\n
    \n {/* Header Card with Performance Overview */}\n
    \n
    \n
    \n

    \n Quiz Complete!\n

    \n \n {performance.level}\n

    \n

    \n You scored {correctCount} out of {totalQuestions} questions\n correctly\n

    \n
    \n\n \n
    \n
    \n\n {/* Compact Stats */}\n
    \n

    \n Results Breakdown\n

    \n
    \n }\n label=\"Correct\"\n value={correctCount}\n total={totalQuestions}\n color=\"green\"\n />\n }\n label=\"Incorrect\"\n value={incorrectCount}\n total={totalQuestions}\n color=\"red\"\n />\n }\n label=\"Skipped\"\n value={skippedCount}\n total={totalQuestions}\n color=\"gray\"\n />\n
    \n
    \n\n {/* Question Review Section */}\n {canReview && totalQuestions <= 20 && (\n
    \n
    \n
    \n \n

    \n Question Breakdown\n

    \n
    \n \n Click to review\n \n
    \n \n {states.map((state, quizIndex) => (\n \n ))}\n
    \n
    \n )}\n\n
    \n }\n onClick={onRetry}\n >\n Try Again\n \n }\n onClick={onNewQuiz}\n >\n New Quiz\n \n
    \n\n {feedback && (\n <>\n
    \n {feedback.summary && (\n
    \n

    \n Summary of your quiz\n

    \n\n \n
    \n )}\n\n {feedback.guideTopics?.length && feedback.courseTopics?.length && (\n <>\n
    \n
    \n

    \n Suggested Resources\n

    \n\n

    \n You can follow these courses or guides to improve your\n understanding of the topic you missed in the quiz\n

    \n
    \n\n
    \n {feedback.courseTopics?.map((topic, index) => (\n }\n title={topic}\n type=\"course\"\n href={`/ai/course?term=${encodeURIComponent(topic)}&format=course`}\n />\n ))}\n {feedback.guideTopics?.map((topic, index) => (\n }\n title={topic}\n type=\"guide\"\n href={`/ai/guide?term=${encodeURIComponent(topic)}&format=guide`}\n />\n ))}\n
    \n
    \n \n )}\n
    \n \n )}\n\n {isFeedbackLoading && (\n
    \n
    \n
    \n
    \n \n Generating personalized feedback...\n \n
    \n
    \n
    \n )}\n
    \n );\n}\n\ntype StatRowProps = {\n icon: React.ReactNode;\n label: string;\n value: number;\n total: number;\n color: 'green' | 'red' | 'gray';\n};\n\nfunction StatRow(props: StatRowProps) {\n const { icon, label, value, total, color } = props;\n const percentage = total > 0 ? Math.round((value / total) * 100) : 0;\n\n return (\n
    \n
    \n \n {icon}\n
    \n {label}\n
    \n
    \n
    \n {value}\n ({percentage}%)\n
    \n
    \n \n
    \n
    \n
    \n );\n}\n\ntype ActionButtonProps = {\n variant: 'primary' | 'secondary';\n icon: React.ReactNode;\n onClick: () => void;\n children: React.ReactNode;\n};\n\nfunction ActionButton(props: ActionButtonProps) {\n const { variant, icon, onClick, children } = props;\n\n return (\n \n {icon}\n {children}\n \n );\n}\n\ntype ActionLinkProps = {\n href: string;\n label: string;\n description: string;\n variant: 'primary' | 'secondary';\n};\n\nfunction ActionLink(props: ActionLinkProps) {\n const { href, label, description, variant } = props;\n\n return (\n \n
    {label}
    \n \n {description}\n
    \n \n );\n}\n\n// Keep the old components for backward compatibility\ntype ResultCardProps = {\n count: number;\n label: string;\n icon: React.ReactNode;\n className?: string;\n};\n\nexport function ResultCard(props: ResultCardProps) {\n const { count, label, icon, className } = props;\n\n return (\n \n {icon}\n
    {count}
    \n
    {label}
    \n \n );\n}\n\ntype ResultActionProps = {\n label: string;\n icon: React.ReactNode;\n onClick: () => void;\n className?: string;\n};\n\nexport function ResultAction(props: ResultActionProps) {\n const { label, icon, onClick, className } = props;\n\n return (\n \n {icon}\n {label}\n \n );\n}\n\ntype ResourceCardProps = {\n icon: React.ReactNode;\n title: string;\n type: 'guide' | 'course';\n href: string;\n};\n\nfunction ResourceCard(props: ResourceCardProps) {\n const { icon, title, type, href } = props;\n\n return (\n \n
    \n
    {icon}
    \n
    {title}
    \n
    \n \n );\n}\n" }, { "path": "src/components/AIQuiz/CircularProgress.tsx", "content": "import { cn } from '../../lib/classname';\n\ntype CircularProgressProps = {\n accuracy: number;\n color: 'emerald' | 'green' | 'blue' | 'orange' | 'red';\n size?: 'sm' | 'md' | 'lg';\n};\n\nexport function CircularProgress(props: CircularProgressProps) {\n const { accuracy, color, size = 'md' } = props;\n\n const circumference = 2 * Math.PI * 45;\n const strokeDashoffset = circumference - (accuracy / 100) * circumference;\n\n const sizeClasses = {\n sm: 'h-16 w-16',\n md: 'h-20 w-20 md:h-24 md:w-24',\n lg: 'h-28 w-28 md:h-32 md:w-32',\n };\n\n const textSizeClasses = {\n sm: 'text-base font-bold',\n md: 'text-lg md:text-xl font-bold',\n lg: 'text-xl md:text-2xl font-bold',\n };\n\n return (\n
    \n \n \n \n \n
    \n \n {accuracy}%\n \n
    \n
    \n );\n}\n" }, { "path": "src/components/AIQuiz/GenerateAIQuiz.tsx", "content": "import { useEffect, useRef, useState } from 'react';\nimport { getUrlParams } from '../../lib/browser';\nimport { isLoggedIn } from '../../lib/jwt';\nimport { LoadingChip } from '../LoadingChip';\nimport type { QuestionAnswerChatMessage } from '../ContentGenerator/QuestionAnswerChat';\nimport { getQuestionAnswerChatMessages } from '../../lib/ai-questions';\nimport {\n aiQuizOptions,\n generateAIQuiz,\n type QuizQuestion,\n} from '../../queries/ai-quiz';\nimport { queryClient } from '../../stores/query-client';\nimport { AIQuizContent } from './AIQuizContent';\nimport { AlertCircleIcon } from 'lucide-react';\nimport { useIsPaidUser } from '../../queries/billing';\nimport { useQuery } from '@tanstack/react-query';\nimport { aiLimitOptions } from '../../queries/ai-course';\nimport { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';\n\ntype GenerateAIQuizProps = {\n onQuizSlugChange?: (quizSlug: string) => void;\n};\n\nexport function GenerateAIQuiz(props: GenerateAIQuizProps) {\n const { onQuizSlugChange } = props;\n\n const [isLoading, setIsLoading] = useState(true);\n const [isStreaming, setIsStreaming] = useState(false);\n const [error, setError] = useState('');\n\n const [questions, setQuestions] = useState([]);\n const questionsRef = useRef([]);\n\n const [showUpgradeModal, setShowUpgradeModal] = useState(false);\n const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();\n const { data: limits, isLoading: isLimitLoading } = useQuery(\n aiLimitOptions(),\n queryClient,\n );\n\n const isLimitDataLoading = isPaidUserLoading || isLimitLoading;\n\n useEffect(() => {\n if (isLimitDataLoading) {\n return;\n }\n\n if (!isPaidUser && limits && limits?.quiz?.used >= limits?.quiz?.limit) {\n setError('You have reached the limit for this format');\n setIsLoading(false);\n setShowUpgradeModal(true);\n return;\n }\n\n const params = getUrlParams();\n const paramsTerm = params?.term;\n const paramsFormat = params?.format;\n const paramsSrc = params?.src || 'search';\n if (!paramsTerm) {\n return;\n }\n\n let questionAndAnswers: QuestionAnswerChatMessage[] = [];\n const sessionId = params?.id;\n if (sessionId) {\n questionAndAnswers = getQuestionAnswerChatMessages(sessionId);\n }\n\n handleGenerateQuiz({\n term: paramsTerm,\n format: paramsFormat,\n src: paramsSrc,\n questionAndAnswers,\n });\n }, [isLimitDataLoading, isPaidUser]);\n\n const handleGenerateQuiz = async (options: {\n term: string;\n format: string;\n isForce?: boolean;\n prompt?: string;\n src?: string;\n questionAndAnswers?: QuestionAnswerChatMessage[];\n }) => {\n const { term, format, isForce, prompt, src, questionAndAnswers } = options;\n\n if (!isLoggedIn()) {\n window.location.href = '/ai';\n return;\n }\n\n await generateAIQuiz({\n term,\n format,\n isForce,\n prompt,\n questionAndAnswers,\n onDetailsChange: (details) => {\n const { quizId, quizSlug, title, userId } = details;\n const aiQuizData = {\n _id: quizId,\n userId,\n title,\n slug: quizSlug,\n keyword: term,\n format,\n content: '',\n questionAndAnswers: questionAndAnswers || [],\n questions: questionsRef.current || [],\n viewCount: 0,\n lastVisitedAt: new Date(),\n createdAt: new Date(),\n updatedAt: new Date(),\n };\n queryClient.setQueryData(aiQuizOptions(quizSlug).queryKey, aiQuizData);\n onQuizSlugChange?.(quizSlug);\n window.history.replaceState(null, '', `/ai/quiz/${quizSlug}`);\n },\n onLoadingChange: setIsLoading,\n onError: setError,\n onStreamingChange: setIsStreaming,\n onQuestionsChange: (questions) => {\n setQuestions(questions);\n questionsRef.current = questions;\n },\n });\n };\n\n const upgradeModal = showUpgradeModal ? (\n {\n window.location.href = '/ai/quiz';\n }}\n />\n ) : null;\n\n if (error) {\n return (\n <>\n {upgradeModal}\n
    \n
    \n \n

    {error}

    \n
    \n
    \n \n );\n }\n\n if (isLoading) {\n return (\n <>\n {upgradeModal}\n
    \n \n
    \n \n );\n }\n\n return (\n <>\n {upgradeModal}\n \n \n );\n}\n" }, { "path": "src/components/AIQuiz/QuizTopNavigation.tsx", "content": "import {\n ChevronLeftIcon,\n ChevronRightIcon,\n Loader2Icon,\n type LucideIcon,\n} from 'lucide-react';\nimport { cn } from '../../lib/classname';\n\ntype QuizTopNavigationProps = {\n activeQuestionIndex: number;\n totalQuestions: number;\n progressPercentage: number;\n onSkip: () => void;\n onPrevious: () => void;\n onNext: () => void;\n isStreaming?: boolean;\n};\n\nexport function QuizTopNavigation(props: QuizTopNavigationProps) {\n const {\n activeQuestionIndex,\n totalQuestions,\n progressPercentage,\n onPrevious,\n onNext,\n onSkip,\n isStreaming = false,\n } = props;\n\n return (\n
    \n {/* Header with question count and navigation */}\n
    \n
    \n \n \n Question{' '}\n {activeQuestionIndex + 1} of{' '}\n {totalQuestions}\n \n \n
    \n\n {!isStreaming && (\n \n {Math.round(progressPercentage)}% complete\n
    \n )}\n {isStreaming && (\n
    \n \n
    \n )}\n
    \n\n {/* Enhanced progress bar */}\n
    \n \n {/* Subtle shine effect */}\n \n
    \n \n );\n}\n\ntype NavigationButtonProps = {\n disabled: boolean;\n onClick: () => void;\n icon: LucideIcon;\n};\n\nfunction NavigationButton(props: NavigationButtonProps) {\n const { disabled, onClick, icon: Icon } = props;\n return (\n \n \n \n );\n}\n" }, { "path": "src/components/AIQuiz/UserQuizzesList.tsx", "content": "import { useQuery } from '@tanstack/react-query';\nimport { BookOpen, Loader2 } from 'lucide-react';\nimport { useEffect, useState } from 'react';\nimport { deleteUrlParam, getUrlParams, setUrlParams } from '../../lib/browser';\nimport { queryClient } from '../../stores/query-client';\nimport { AITutorTallMessage } from '../AITutor/AITutorTallMessage';\nimport { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';\nimport { Pagination } from '../Pagination/Pagination';\nimport { isLoggedIn } from '../../lib/jwt';\nimport { showLoginPopup } from '../../lib/popup';\nimport { AICourseSearch } from '../GenerateCourse/AICourseSearch';\nimport {\n listUserAiQuizzesOptions,\n type ListUserAiQuizzesQuery,\n} from '../../queries/ai-quiz';\nimport { AIQuizCard } from './AIQuizCard';\nimport { aiLimitOptions } from '../../queries/ai-course';\nimport { useIsPaidUser } from '../../queries/billing';\nimport { AIUsageWarning } from '../AIUsageWarning/AIUsageWarning';\n\nexport function UserQuizzesList() {\n const [isInitialLoading, setIsInitialLoading] = useState(true);\n const [showUpgradePopup, setShowUpgradePopup] = useState(false);\n\n const [pageState, setPageState] = useState({\n perPage: '21',\n currPage: '1',\n query: '',\n });\n\n const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();\n const { data: limits, isLoading: isLimitLoading } = useQuery(\n aiLimitOptions(),\n queryClient,\n );\n\n const selectedLimit = limits?.quiz;\n\n const { data: userAiQuizzes, isFetching: isUserAiQuizzesLoading } = useQuery(\n listUserAiQuizzesOptions(pageState),\n queryClient,\n );\n\n useEffect(() => {\n setIsInitialLoading(false);\n }, [userAiQuizzes]);\n\n const quizzes = userAiQuizzes?.data ?? [];\n\n useEffect(() => {\n const queryParams = getUrlParams();\n\n setPageState({\n ...pageState,\n currPage: queryParams?.p || '1',\n query: queryParams?.q || '',\n });\n }, []);\n\n useEffect(() => {\n if (pageState?.currPage !== '1' || pageState?.query !== '') {\n setUrlParams({\n p: pageState?.currPage || '1',\n q: pageState?.query || '',\n });\n } else {\n deleteUrlParam('p');\n deleteUrlParam('q');\n }\n }, [pageState]);\n\n const isUserAuthenticated = isLoggedIn();\n const isAnyLoading =\n isUserAiQuizzesLoading ||\n isInitialLoading ||\n isPaidUserLoading ||\n isLimitLoading;\n\n return (\n <>\n {showUpgradePopup && (\n setShowUpgradePopup(false)} />\n )}\n\n {\n setPageState({\n ...pageState,\n query: value,\n currPage: '1',\n });\n }}\n placeholder=\"Search Quizzes...\"\n disabled={isAnyLoading}\n />\n\n {isAnyLoading && (\n

    \n \n Loading your quizzes...\n

    \n )}\n\n {!isAnyLoading && (\n <>\n setShowUpgradePopup(true)}\n />\n\n {isUserAuthenticated && !isAnyLoading && quizzes.length > 0 && (\n
    \n
    \n {quizzes.map((quiz) => (\n \n ))}\n
    \n\n {\n setPageState({ ...pageState, currPage: String(page) });\n }}\n className=\"rounded-lg border border-gray-200 bg-white p-4\"\n />\n
    \n )}\n\n {!isAnyLoading && quizzes.length === 0 && (\n {\n if (isUserAuthenticated) {\n window.location.href = '/ai/quiz';\n } else {\n showLoginPopup();\n }\n }}\n />\n )}\n \n )}\n \n );\n}\n" }, { "path": "src/components/AIRoadmap/AIRoadmap.css", "content": "@font-face {\n font-family: 'balsamiq';\n src: url('/fonts/balsamiq.woff2');\n}\n\nsvg text tspan {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeSpeed;\n}\n\nsvg > g[data-type='topic'],\nsvg > g[data-type='subtopic'],\nsvg > g > g[data-type='link-item'],\nsvg > g[data-type='button'] {\n cursor: pointer;\n}\n\nsvg > g[data-type='topic']:hover > rect {\n fill: #d6d700;\n}\n\nsvg > g[data-type='subtopic']:hover > rect {\n fill: #f3c950;\n}\nsvg > g[data-type='button']:hover {\n opacity: 0.8;\n}\n\nsvg .done rect {\n fill: #cbcbcb !important;\n}\n\nsvg .done text,\nsvg .skipped text {\n text-decoration: line-through;\n}\n\nsvg > g[data-type='topic'].learning > rect + text,\nsvg > g[data-type='topic'].done > rect + text {\n fill: black;\n}\n\nsvg > g[data-type='subtipic'].done > rect + text,\nsvg > g[data-type='subtipic'].learning > rect + text {\n fill: #cbcbcb;\n}\n\nsvg .learning rect {\n fill: #dad1fd !important;\n}\nsvg .learning text {\n text-decoration: underline;\n}\n\nsvg .skipped rect {\n fill: #496b69 !important;\n}\n" }, { "path": "src/components/AIRoadmap/AIRoadmap.tsx", "content": "import './AIRoadmap.css';\n\nimport { useQuery } from '@tanstack/react-query';\nimport { useCallback, useRef, useState } from 'react';\nimport { flushSync } from 'react-dom';\nimport { useToast } from '../../hooks/use-toast';\nimport { queryClient } from '../../stores/query-client';\nimport { AITutorLayout } from '../AITutor/AITutorLayout';\nimport { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';\nimport { aiRoadmapOptions, generateAIRoadmap } from '../../queries/ai-roadmap';\nimport { GenerateAIRoadmap } from './GenerateAIRoadmap';\nimport { AIRoadmapContent, type RoadmapNodeDetails } from './AIRoadmapContent';\nimport { AIRoadmapChat } from './AIRoadmapChat';\nimport { AlertCircleIcon } from 'lucide-react';\nimport { isLoggedIn } from '../../lib/jwt';\nimport { showLoginPopup } from '../../lib/popup';\nimport { aiLimitOptions } from '../../queries/ai-course';\nimport { billingDetailsOptions } from '../../queries/billing';\n\nexport type AIRoadmapChatActions = {\n handleNodeClick: (node: RoadmapNodeDetails) => void;\n};\n\ntype AIRoadmapProps = {\n roadmapSlug?: string;\n};\n\nexport function AIRoadmap(props: AIRoadmapProps) {\n const { roadmapSlug: defaultRoadmapSlug } = props;\n const [roadmapSlug, setRoadmapSlug] = useState(defaultRoadmapSlug);\n\n const toast = useToast();\n const [showUpgradeModal, setShowUpgradeModal] = useState(false);\n const [isRegenerating, setIsRegenerating] = useState(false);\n const [regeneratedSvgHtml, setRegeneratedSvgHtml] = useState(\n null,\n );\n\n const aiChatActionsRef = useRef(null);\n\n // only fetch the guide if the guideSlug is provided\n // otherwise we are still generating the guide\n const {\n data: aiRoadmap,\n isLoading: isLoadingBySlug,\n error: aiRoadmapError,\n } = useQuery(aiRoadmapOptions(roadmapSlug), queryClient);\n\n const {\n data: tokenUsage,\n isLoading: isTokenUsageLoading,\n refetch: refetchTokenUsage,\n } = useQuery(aiLimitOptions(), queryClient);\n\n const { data: userBillingDetails, isLoading: isBillingDetailsLoading } =\n useQuery(billingDetailsOptions(), queryClient);\n\n const isLimitExceeded = (tokenUsage?.used || 0) >= (tokenUsage?.limit || 0);\n const isPaidUser = userBillingDetails?.status === 'active';\n\n const handleRegenerate = async (prompt?: string) => {\n if (!isLoggedIn()) {\n showLoginPopup();\n return;\n }\n\n if (!isPaidUser && isLimitExceeded) {\n setShowUpgradeModal(true);\n return;\n }\n\n flushSync(() => {\n setIsRegenerating(true);\n setRegeneratedSvgHtml(null);\n });\n\n queryClient.cancelQueries(aiRoadmapOptions(roadmapSlug));\n queryClient.setQueryData(aiRoadmapOptions(roadmapSlug).queryKey, (old) => {\n if (!old) {\n return old;\n }\n\n return {\n ...old,\n data: '',\n svgHtml: '',\n };\n });\n\n setRegeneratedSvgHtml('');\n await generateAIRoadmap({\n roadmapSlug: aiRoadmap?.slug || '',\n term: aiRoadmap?.term || '',\n prompt,\n isForce: true,\n onStreamingChange: setIsRegenerating,\n onRoadmapSvgChange: (svg) => {\n setRegeneratedSvgHtml(svg.outerHTML);\n },\n onError: (error) => {\n toast.error(error);\n },\n onFinish: () => {\n setIsRegenerating(false);\n refetchTokenUsage();\n queryClient.invalidateQueries(aiRoadmapOptions(roadmapSlug));\n },\n });\n };\n\n const isLoading =\n isLoadingBySlug ||\n isRegenerating ||\n isTokenUsageLoading ||\n isBillingDetailsLoading;\n\n const handleNodeClick = useCallback(\n (node: RoadmapNodeDetails) => {\n aiChatActionsRef.current?.handleNodeClick(node);\n },\n [aiChatActionsRef],\n );\n\n return (\n \n {showUpgradeModal && (\n setShowUpgradeModal(false)} />\n )}\n\n {!isLoading && aiRoadmapError && (\n
    \n
    \n \n

    \n {aiRoadmapError?.message || 'Something went wrong'}\n

    \n
    \n
    \n )}\n\n
    \n {roadmapSlug && !aiRoadmapError && (\n \n )}\n {!roadmapSlug && !aiRoadmapError && (\n \n )}\n
    \n\n setShowUpgradeModal(true)}\n aiChatActionsRef={aiChatActionsRef}\n />\n \n );\n}\n" }, { "path": "src/components/AIRoadmap/AIRoadmapActions.tsx", "content": "import { MoreVertical, Play, Trash2 } from 'lucide-react';\nimport { useRef, useState } from 'react';\nimport { useOutsideClick } from '../../hooks/use-outside-click';\nimport { useKeydown } from '../../hooks/use-keydown';\nimport { useToast } from '../../hooks/use-toast';\nimport { useMutation } from '@tanstack/react-query';\nimport { queryClient } from '../../stores/query-client';\nimport { httpDelete } from '../../lib/query-http';\n\ntype AIRoadmapActionsType = {\n roadmapSlug: string;\n onDeleted?: () => void;\n};\n\nexport function AIRoadmapActions(props: AIRoadmapActionsType) {\n const { roadmapSlug, onDeleted } = props;\n\n const toast = useToast();\n const dropdownRef = useRef(null);\n\n const [isOpen, setIsOpen] = useState(false);\n const [isConfirming, setIsConfirming] = useState(false);\n\n const { mutate: deleteRoadmap, isPending: isDeleting } = useMutation(\n {\n mutationFn: async () => {\n return httpDelete(`/v1-delete-ai-roadmap/${roadmapSlug}`);\n },\n onSuccess: () => {\n toast.success('Roadmap deleted');\n queryClient.invalidateQueries({\n predicate: (query) => query.queryKey?.[0] === 'user-ai-roadmaps',\n });\n onDeleted?.();\n },\n onError: (error) => {\n toast.error(error?.message || 'Failed to delete roadmap');\n },\n },\n queryClient,\n );\n\n useOutsideClick(dropdownRef, () => {\n setIsOpen(false);\n });\n\n useKeydown('Escape', () => {\n setIsOpen(false);\n });\n\n return (\n
    \n {\n e.stopPropagation();\n setIsOpen(!isOpen);\n }}\n >\n \n \n\n {isOpen && (\n
    \n \n \n Visit Roadmap\n \n {!isConfirming && (\n setIsConfirming(true)}\n disabled={isDeleting}\n >\n {!isDeleting ? (\n <>\n \n Delete Roadmap\n \n ) : (\n 'Deleting...'\n )}\n \n )}\n\n {isConfirming && (\n \n Are you sure?\n
    \n {\n setIsConfirming(false);\n deleteRoadmap();\n }}\n disabled={isDeleting}\n className=\"text-red-500 underline hover:text-red-800\"\n >\n Yes\n \n setIsConfirming(false)}\n className=\"text-red-500 underline hover:text-red-800\"\n >\n No\n \n
    \n     \n )}\n
    \n )}\n
    \n );\n}\n" }, { "path": "src/components/AIRoadmap/AIRoadmapCard.tsx", "content": "import { CalendarIcon } from 'lucide-react';\nimport { getRelativeTimeString } from '../../lib/date';\nimport { cn } from '../../lib/classname';\nimport type { AIRoadmapDocument } from '../../queries/ai-roadmap';\nimport { AIRoadmapActions } from './AIRoadmapActions';\n\ntype AIRoadmapCardProps = {\n roadmap: Omit;\n variant?: 'row' | 'column';\n showActions?: boolean;\n};\n\nexport function AIRoadmapCard(props: AIRoadmapCardProps) {\n const { roadmap, variant = 'row', showActions = true } = props;\n\n const updatedAgo = getRelativeTimeString(roadmap?.updatedAt);\n\n return (\n
    \n \n
    \n

    \n {roadmap.title}\n

    \n
    \n\n
    \n
    \n \n {updatedAgo}\n
    \n
    \n \n\n {showActions && roadmap.slug && (\n
    \n \n
    \n )}\n
    \n );\n}\n" }, { "path": "src/components/AIRoadmap/AIRoadmapChat.tsx", "content": "import {\n useCallback,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n useState,\n type RefObject,\n} from 'react';\nimport { useChat, type ChatMessage } from '../../hooks/use-chat';\nimport { RoadmapAIChatCard } from '../RoadmapAIChat/RoadmapAIChatCard';\nimport {\n ArrowDownIcon,\n BotIcon,\n LockIcon,\n MessageCircleIcon,\n PauseCircleIcon,\n SendIcon,\n Trash2Icon,\n XIcon,\n} from 'lucide-react';\nimport { ChatHeaderButton } from '../FrameRenderer/RoadmapFloatingChat';\nimport { isLoggedIn } from '../../lib/jwt';\nimport { showLoginPopup } from '../../lib/popup';\nimport { flushSync } from 'react-dom';\nimport { markdownToHtml } from '../../lib/markdown';\nimport { aiLimitOptions } from '../../queries/ai-course';\nimport { useQuery } from '@tanstack/react-query';\nimport { queryClient } from '../../stores/query-client';\nimport { billingDetailsOptions } from '../../queries/billing';\nimport { LoadingChip } from '../LoadingChip';\nimport { getTailwindScreenDimension } from '../../lib/is-mobile';\nimport { useToast } from '../../hooks/use-toast';\nimport type { AIRoadmapChatActions } from './AIRoadmap';\nimport type { RoadmapNodeDetails } from './AIRoadmapContent';\n\ntype AIRoadmapChatProps = {\n roadmapSlug?: string;\n isRoadmapLoading?: boolean;\n onUpgrade?: () => void;\n aiChatActionsRef?: RefObject;\n};\n\nexport function AIRoadmapChat(props: AIRoadmapChatProps) {\n const { roadmapSlug, isRoadmapLoading, onUpgrade, aiChatActionsRef } = props;\n\n const toast = useToast();\n const scrollareaRef = useRef(null);\n const inputRef = useRef(null);\n\n const [inputValue, setInputValue] = useState('');\n const [showScrollToBottom, setShowScrollToBottom] = useState(false);\n const [isChatOpen, setIsChatOpen] = useState(true);\n const [isMobile, setIsMobile] = useState(false);\n\n const {\n data: tokenUsage,\n isLoading: isTokenUsageLoading,\n refetch: refetchTokenUsage,\n } = useQuery(aiLimitOptions(), queryClient);\n\n const { data: userBillingDetails, isLoading: isBillingDetailsLoading } =\n useQuery(billingDetailsOptions(), queryClient);\n\n const isLimitExceeded = (tokenUsage?.used || 0) >= (tokenUsage?.limit || 0);\n const isPaidUser = userBillingDetails?.status === 'active';\n\n const {\n messages,\n status,\n streamedMessageHtml,\n sendMessages,\n setMessages,\n stop,\n } = useChat({\n endpoint: `${import.meta.env.PUBLIC_API_URL}/v1-ai-roadmap-chat`,\n onError: (error) => {\n console.error(error);\n toast.error(error?.message || 'Something went wrong');\n },\n data: {\n aiRoadmapSlug: roadmapSlug,\n },\n onFinish: () => {\n refetchTokenUsage();\n },\n });\n\n const scrollToBottom = useCallback(\n (behavior: 'smooth' | 'instant' = 'smooth') => {\n scrollareaRef.current?.scrollTo({\n top: scrollareaRef.current.scrollHeight,\n behavior,\n });\n },\n [scrollareaRef],\n );\n\n const isStreamingMessage = status === 'streaming';\n const hasMessages = messages.length > 0;\n\n const handleSubmitInput = useCallback(\n (defaultInputValue?: string) => {\n const message = defaultInputValue || inputValue;\n if (!isLoggedIn()) {\n showLoginPopup();\n return;\n }\n\n if (isStreamingMessage) {\n return;\n }\n\n const newMessages: ChatMessage[] = [\n ...messages,\n {\n role: 'user',\n content: message,\n html: markdownToHtml(message),\n },\n ];\n flushSync(() => {\n setMessages(newMessages);\n });\n sendMessages(newMessages);\n setInputValue('');\n\n setTimeout(() => {\n scrollToBottom('smooth');\n }, 0);\n },\n [inputValue, isStreamingMessage, messages, sendMessages, setMessages],\n );\n\n const checkScrollPosition = useCallback(() => {\n const scrollArea = scrollareaRef.current;\n if (!scrollArea) {\n return;\n }\n\n const { scrollTop, scrollHeight, clientHeight } = scrollArea;\n const isAtBottom = scrollTop + clientHeight >= scrollHeight - 50; // 50px threshold\n setShowScrollToBottom(!isAtBottom && messages.length > 0);\n }, [messages.length]);\n\n useEffect(() => {\n const scrollArea = scrollareaRef.current;\n if (!scrollArea) {\n return;\n }\n\n scrollArea.addEventListener('scroll', checkScrollPosition);\n return () => scrollArea.removeEventListener('scroll', checkScrollPosition);\n }, [checkScrollPosition]);\n\n const isLoading =\n isRoadmapLoading || isTokenUsageLoading || isBillingDetailsLoading;\n\n useLayoutEffect(() => {\n const deviceType = getTailwindScreenDimension();\n const isMediumSize = ['sm', 'md'].includes(deviceType);\n\n if (!isMediumSize) {\n const storedState = localStorage.getItem('chat-history-sidebar-open');\n setIsChatOpen(storedState === null ? true : storedState === 'true');\n } else {\n setIsChatOpen(!isMediumSize);\n }\n\n setIsMobile(isMediumSize);\n }, []);\n\n useEffect(() => {\n if (!isMobile) {\n localStorage.setItem('chat-history-sidebar-open', isChatOpen.toString());\n }\n }, [isChatOpen, isMobile]);\n\n useImperativeHandle(aiChatActionsRef, () => ({\n handleNodeClick: (node: RoadmapNodeDetails) => {\n handleSubmitInput(`Explain what is \"${node.nodeTitle}\" topic in detail.`);\n },\n }));\n\n if (!isChatOpen) {\n return (\n
    \n {\n setIsChatOpen(true);\n }}\n >\n \n Open Chat\n \n
    \n );\n }\n\n return (\n
    \n
    \n

    \n \n AI Roadmap\n

    \n\n {\n setIsChatOpen(false);\n }}\n >\n \n \n
    \n\n {isLoading && (\n
    \n \n
    \n )}\n\n {!isLoading && (\n <>\n
    \n
    \n
    \n
    \n \n\n {messages.map((chat, index) => {\n return (\n \n );\n })}\n\n {status === 'streaming' && !streamedMessageHtml && (\n \n )}\n\n {status === 'streaming' && streamedMessageHtml && (\n \n )}\n
    \n
    \n
    \n
    \n\n {(hasMessages || showScrollToBottom) && (\n
    \n }\n className=\"rounded-md bg-gray-200 py-1 pr-2 pl-1.5 text-gray-500 hover:bg-gray-300\"\n onClick={() => {\n setMessages([]);\n }}\n >\n Clear\n \n {showScrollToBottom && (\n }\n className=\"rounded-md bg-gray-200 py-1 pr-2 pl-1.5 text-gray-500 hover:bg-gray-300\"\n onClick={() => {\n scrollToBottom('smooth');\n }}\n >\n Scroll to bottom\n \n )}\n
    \n )}\n\n
    \n {isLimitExceeded && isLoggedIn() && (\n
    \n \n

    \n Limit reached for today\n {isPaidUser ? '. Please wait until tomorrow.' : ''}\n

    \n {!isPaidUser && (\n {\n onUpgrade?.();\n }}\n className=\"rounded-md bg-white px-2 py-1 text-xs font-medium text-black hover:bg-gray-300\"\n >\n Upgrade for more\n \n )}\n
    \n )}\n\n {!isLoggedIn() && (\n
    \n \n

    Please login to continue

    \n {\n showLoginPopup();\n }}\n className=\"rounded-md bg-white px-2 py-1 text-xs font-medium text-black hover:bg-gray-300\"\n >\n Login / Register\n \n
    \n )}\n\n setInputValue(e.target.value)}\n autoFocus\n data-clarity-unmask=\"true\"\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (isStreamingMessage) {\n return;\n }\n handleSubmitInput();\n }\n }}\n placeholder=\"Ask me anything about this roadmap...\"\n className=\"w-full resize-none px-3 py-4 outline-none\"\n />\n\n {\n if (!isLoggedIn()) {\n showLoginPopup();\n return;\n }\n\n if (status !== 'idle') {\n stop();\n return;\n }\n\n handleSubmitInput();\n }}\n >\n {isStreamingMessage ? (\n \n ) : (\n \n )}\n \n
    \n \n )}\n
    \n );\n}\n" }, { "path": "src/components/AIRoadmap/AIRoadmapContent.tsx", "content": "import { cn } from '../../lib/classname';\nimport { AIRoadmapRegenerate } from './AIRoadmapRegenerate';\nimport { LoadingChip } from '../LoadingChip';\nimport { type MouseEvent, useCallback } from 'react';\n\nexport type RoadmapNodeDetails = {\n nodeId: string;\n nodeType: string;\n targetGroup?: SVGElement;\n nodeTitle?: string;\n parentTitle?: string;\n parentId?: string;\n};\n\nexport function getNodeDetails(\n svgElement: SVGElement,\n): RoadmapNodeDetails | null {\n const targetGroup = (svgElement?.closest('g') as SVGElement) || {};\n\n const nodeId = targetGroup?.dataset?.nodeId;\n const nodeType = targetGroup?.dataset?.type;\n const nodeTitle = targetGroup?.dataset?.title;\n const parentTitle = targetGroup?.dataset?.parentTitle;\n const parentId = targetGroup?.dataset?.parentId;\n if (!nodeId || !nodeType) return null;\n\n return { nodeId, nodeType, targetGroup, nodeTitle, parentTitle, parentId };\n}\n\nexport const allowedClickableNodeTypes = [\n 'topic',\n 'subtopic',\n 'button',\n 'link-item',\n];\n\ntype AIRoadmapContentProps = {\n isLoading?: boolean;\n svgHtml: string;\n onRegenerate?: (prompt?: string) => void;\n roadmapSlug?: string;\n\n onNodeClick?: (node: RoadmapNodeDetails) => void;\n};\n\nexport function AIRoadmapContent(props: AIRoadmapContentProps) {\n const { isLoading, svgHtml, onRegenerate, roadmapSlug, onNodeClick } = props;\n\n const handleNodeClick = useCallback(\n (e: MouseEvent) => {\n if (isLoading) {\n return;\n }\n\n const target = e.target as SVGElement;\n const { nodeId, nodeType, targetGroup, nodeTitle, parentTitle } =\n getNodeDetails(target) || {};\n if (\n !nodeId ||\n !nodeType ||\n !allowedClickableNodeTypes.includes(nodeType) ||\n !nodeTitle\n )\n return;\n\n if (nodeType === 'button' || nodeType === 'link-item') {\n const link = targetGroup?.dataset?.link || '';\n const isExternalLink = link.startsWith('http');\n if (isExternalLink) {\n window.open(link, '_blank');\n } else {\n window.location.href = link;\n }\n return;\n }\n\n onNodeClick?.({\n nodeId,\n nodeType,\n nodeTitle,\n ...(nodeType === 'subtopic' && { parentTitle }),\n });\n },\n [isLoading, onNodeClick],\n );\n\n return (\n \n svg]:mx-auto\"\n dangerouslySetInnerHTML={{ __html: svgHtml }}\n onClick={handleNodeClick}\n />\n\n {isLoading && !svgHtml && (\n
    \n \n
    \n )}\n\n {onRegenerate && !isLoading && roadmapSlug && (\n
    \n \n
    \n )}\n \n );\n}\n" }, { "path": "src/components/AIRoadmap/AIRoadmapRegenerate.tsx", "content": "import {\n Loader2Icon,\n PenSquare,\n RefreshCcw,\n SaveIcon,\n SettingsIcon,\n type LucideIcon,\n} from 'lucide-react';\nimport { useRef, useState } from 'react';\nimport { useOutsideClick } from '../../hooks/use-outside-click';\nimport { cn } from '../../lib/classname';\nimport { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';\nimport { ModifyCoursePrompt } from '../GenerateCourse/ModifyCoursePrompt';\nimport type { QuestionAnswerChatMessage } from '../ContentGenerator/QuestionAnswerChat';\nimport { useMutation, useQuery } from '@tanstack/react-query';\nimport { queryClient } from '../../stores/query-client';\nimport { httpPost } from '../../lib/query-http';\nimport { aiRoadmapOptions } from '../../queries/ai-roadmap';\nimport { UpdatePreferences } from '../GenerateGuide/UpdatePreferences';\nimport { generateAIRoadmapFromText } from '@roadmapsh/editor';\nimport { useToast } from '../../hooks/use-toast';\nimport { showLoginPopup } from '../../lib/popup';\nimport { isLoggedIn } from '../../lib/jwt';\nimport { useAuth } from '../../hooks/use-auth';\n\ntype AIRoadmapRegenerateProps = {\n onRegenerate: (prompt?: string) => void;\n roadmapSlug: string;\n};\n\nexport function AIRoadmapRegenerate(props: AIRoadmapRegenerateProps) {\n const { onRegenerate, roadmapSlug } = props;\n\n const toast = useToast();\n const [isDropdownVisible, setIsDropdownVisible] = useState(false);\n const [showUpgradeModal, setShowUpgradeModal] = useState(false);\n const [showPromptModal, setShowPromptModal] = useState(false);\n const [showUpdatePreferencesModal, setShowUpdatePreferencesModal] =\n useState(false);\n const currentUser = useAuth();\n\n const ref = useRef(null);\n\n useOutsideClick(ref, () => setIsDropdownVisible(false));\n\n const { data: aiRoadmap } = useQuery(\n aiRoadmapOptions(roadmapSlug),\n queryClient,\n );\n const { mutate: updatePreferences, isPending: isUpdating } = useMutation(\n {\n mutationFn: (questionAndAnswers: QuestionAnswerChatMessage[]) => {\n return httpPost(`/v1-update-ai-roadmap-preferences/${roadmapSlug}`, {\n questionAndAnswers,\n });\n },\n onSuccess: (_, vars) => {\n queryClient.setQueryData(\n aiRoadmapOptions(roadmapSlug).queryKey,\n (old) => {\n if (!old) {\n return old;\n }\n\n return {\n ...old,\n questionAndAnswers: vars,\n };\n },\n );\n\n setShowUpdatePreferencesModal(false);\n setIsDropdownVisible(false);\n onRegenerate();\n },\n },\n queryClient,\n );\n\n const handleSaveAIRoadmap = async () => {\n const { nodes, edges } = generateAIRoadmapFromText(aiRoadmap?.data || '');\n return httpPost<{\n roadmapId: string;\n roadmapSlug: string;\n }>(`/v1-save-ai-roadmap/${aiRoadmap?._id}`, {\n title: aiRoadmap?.term,\n nodes: nodes.map((node) => ({\n ...node,\n\n // To reset the width and height of the node\n // so that it can be calculated based on the content in the editor\n width: undefined,\n height: undefined,\n style: {\n ...node.style,\n width: undefined,\n height: undefined,\n },\n measured: {\n width: undefined,\n height: undefined,\n },\n })),\n edges,\n });\n };\n\n const { mutate: saveAIRoadmap, isPending: isSavingAIRoadmap } = useMutation(\n {\n mutationFn: handleSaveAIRoadmap,\n onSuccess: (data) => {\n if (!data?.roadmapId) {\n toast.error('Something went wrong');\n return;\n }\n window.location.href = `/r/${data?.roadmapSlug}`;\n },\n },\n queryClient,\n );\n\n const { mutate: editAIRoadmap, isPending: isEditingAIRoadmap } = useMutation(\n {\n mutationFn: handleSaveAIRoadmap,\n onSuccess: (data) => {\n if (!data?.roadmapId) {\n toast.error('Something went wrong');\n return;\n }\n window.open(\n `${import.meta.env.PUBLIC_EDITOR_APP_URL}/${data?.roadmapId}`,\n '_blank',\n );\n },\n },\n queryClient,\n );\n\n const isCurrentUserCreator = currentUser?.id === aiRoadmap?.userId;\n const showUpdatePreferences =\n aiRoadmap?.questionAndAnswers &&\n aiRoadmap.questionAndAnswers.length > 0 &&\n isCurrentUserCreator;\n\n return (\n <>\n {showUpgradeModal && (\n {\n setShowUpgradeModal(false);\n }}\n />\n )}\n\n {showPromptModal && (\n setShowPromptModal(false)}\n onSubmit={(prompt) => {\n setShowPromptModal(false);\n onRegenerate(prompt);\n }}\n />\n )}\n\n {showUpdatePreferencesModal && (\n setShowUpdatePreferencesModal(false)}\n questionAndAnswers={aiRoadmap?.questionAndAnswers}\n term={aiRoadmap?.term || ''}\n format=\"roadmap\"\n onUpdatePreferences={(questionAndAnswers) => {\n updatePreferences(questionAndAnswers);\n }}\n isUpdating={isUpdating}\n />\n )}\n\n
    \n setIsDropdownVisible(!isDropdownVisible)}\n >\n \n \n {isDropdownVisible && (\n
    \n {isCurrentUserCreator && (\n <>\n {showUpdatePreferences && (\n {\n if (!isLoggedIn()) {\n showLoginPopup();\n return;\n }\n\n setIsDropdownVisible(false);\n setShowUpdatePreferencesModal(true);\n }}\n icon={SettingsIcon}\n label=\"Update Preferences\"\n />\n )}\n\n {\n if (!isLoggedIn()) {\n showLoginPopup();\n return;\n }\n\n setIsDropdownVisible(false);\n onRegenerate();\n }}\n icon={RefreshCcw}\n label=\"Regenerate\"\n />\n {\n if (!isLoggedIn()) {\n showLoginPopup();\n return;\n }\n\n setIsDropdownVisible(false);\n setShowPromptModal(true);\n }}\n icon={PenSquare}\n label=\"Modify Prompt\"\n />\n\n
    \n \n )}\n\n {\n if (!isLoggedIn()) {\n showLoginPopup();\n return;\n }\n\n saveAIRoadmap();\n }}\n icon={SaveIcon}\n label=\"Start Learning\"\n isLoading={isSavingAIRoadmap}\n />\n\n {\n if (!isLoggedIn()) {\n showLoginPopup();\n return;\n }\n\n editAIRoadmap();\n }}\n icon={PenSquare}\n label=\"Edit in Editor\"\n isLoading={isEditingAIRoadmap}\n />\n
    \n )}\n
    \n \n );\n}\n\ntype ActionButtonProps = {\n onClick: () => void;\n isLoading?: boolean;\n icon: LucideIcon;\n label: string;\n};\n\nfunction ActionButton(props: ActionButtonProps) {\n const { onClick, isLoading, icon: Icon, label } = props;\n\n return (\n \n {isLoading ? (\n \n ) : (\n \n )}\n\n {label}\n \n );\n}\n" }, { "path": "src/components/AIRoadmap/GenerateAIRoadmap.tsx", "content": "import { useEffect, useRef, useState } from 'react';\nimport { getUrlParams } from '../../lib/browser';\nimport { isLoggedIn } from '../../lib/jwt';\nimport { queryClient } from '../../stores/query-client';\nimport { LoadingChip } from '../LoadingChip';\nimport type { QuestionAnswerChatMessage } from '../ContentGenerator/QuestionAnswerChat';\nimport { getQuestionAnswerChatMessages } from '../../lib/ai-questions';\nimport { aiRoadmapOptions, generateAIRoadmap } from '../../queries/ai-roadmap';\nimport { AIRoadmapContent } from './AIRoadmapContent';\nimport { useIsPaidUser } from '../../queries/billing';\nimport { useQuery } from '@tanstack/react-query';\nimport { aiLimitOptions } from '../../queries/ai-course';\nimport { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';\n\ntype GenerateAIRoadmapProps = {\n onRoadmapSlugChange?: (roadmapSlug: string) => void;\n};\n\nexport function GenerateAIRoadmap(props: GenerateAIRoadmapProps) {\n const { onRoadmapSlugChange } = props;\n\n const [isLoading, setIsLoading] = useState(true);\n const [isStreaming, setIsStreaming] = useState(false);\n const [error, setError] = useState('');\n const [showUpgradeModal, setShowUpgradeModal] = useState(false);\n\n const [svgHtml, setSvgHtml] = useState('');\n const [content, setContent] = useState('');\n const svgRef = useRef(null);\n\n const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();\n const { data: limits, isLoading: isLimitLoading } = useQuery(\n aiLimitOptions(),\n queryClient,\n );\n\n const isLimitDataLoading = isPaidUserLoading || isLimitLoading;\n\n useEffect(() => {\n if (isLimitDataLoading) {\n return;\n }\n\n if (\n !isPaidUser &&\n limits &&\n limits?.roadmap?.used >= limits?.roadmap?.limit\n ) {\n setError('You have reached the limit for this format');\n setIsLoading(false);\n setShowUpgradeModal(true);\n return;\n }\n\n const params = getUrlParams();\n const paramsTerm = params?.term;\n const paramsSrc = params?.src || 'search';\n if (!paramsTerm) {\n return;\n }\n\n let questionAndAnswers: QuestionAnswerChatMessage[] = [];\n const sessionId = params?.id;\n if (sessionId) {\n questionAndAnswers = getQuestionAnswerChatMessages(sessionId);\n }\n\n handleGenerateDocument({\n term: paramsTerm,\n src: paramsSrc,\n questionAndAnswers,\n });\n }, [isLimitDataLoading, isPaidUser]);\n\n const handleGenerateDocument = async (options: {\n term: string;\n isForce?: boolean;\n prompt?: string;\n src?: string;\n questionAndAnswers?: QuestionAnswerChatMessage[];\n }) => {\n const { term, isForce, prompt, src, questionAndAnswers } = options;\n\n if (!isLoggedIn()) {\n window.location.href = '/ai';\n return;\n }\n\n await generateAIRoadmap({\n term,\n isForce,\n prompt,\n questionAndAnswers,\n onDetailsChange: (details) => {\n const { roadmapId, roadmapSlug, title, userId } = details;\n\n const aiRoadmapData = {\n _id: roadmapId,\n userId,\n title,\n term,\n data: content,\n questionAndAnswers,\n viewCount: 0,\n svgHtml: svgRef.current || '',\n lastVisitedAt: new Date(),\n createdAt: new Date(),\n updatedAt: new Date(),\n };\n\n queryClient.setQueryData(\n aiRoadmapOptions(roadmapSlug).queryKey,\n aiRoadmapData,\n );\n\n onRoadmapSlugChange?.(roadmapSlug);\n window.history.replaceState(null, '', `/ai-roadmaps/${roadmapSlug}`);\n },\n onLoadingChange: setIsLoading,\n onError: setError,\n onStreamingChange: setIsStreaming,\n onRoadmapSvgChange: (svg) => {\n const svgHtml = svg.outerHTML;\n svgRef.current = svgHtml;\n setSvgHtml(svgHtml);\n },\n });\n };\n\n const upgradeModal = showUpgradeModal ? (\n {\n window.location.href = '/ai';\n }}\n />\n ) : null;\n\n if (error) {\n return (\n <>\n {upgradeModal}\n
    {error}
    \n \n );\n }\n\n if (isLoading) {\n return (\n <>\n {upgradeModal}\n
    \n \n
    \n \n );\n }\n\n return (\n <>\n {upgradeModal}\n\n \n \n );\n}\n" }, { "path": "src/components/AIRoadmap/UserRoadmapsList.tsx", "content": "import { useQuery } from '@tanstack/react-query';\nimport { BookOpen, Loader2 } from 'lucide-react';\nimport { useEffect, useState } from 'react';\nimport { deleteUrlParam, getUrlParams, setUrlParams } from '../../lib/browser';\nimport { queryClient } from '../../stores/query-client';\nimport { AITutorTallMessage } from '../AITutor/AITutorTallMessage';\nimport { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';\nimport { Pagination } from '../Pagination/Pagination';\nimport { isLoggedIn } from '../../lib/jwt';\nimport { showLoginPopup } from '../../lib/popup';\nimport { AICourseSearch } from '../GenerateCourse/AICourseSearch';\nimport {\n listUserAiRoadmapsOptions,\n type ListUserAiRoadmapsQuery,\n} from '../../queries/ai-roadmap';\nimport { AIRoadmapCard } from './AIRoadmapCard';\nimport { aiLimitOptions } from '../../queries/ai-course';\nimport { useIsPaidUser } from '../../queries/billing';\nimport { AIUsageWarning } from '../AIUsageWarning/AIUsageWarning';\n\nexport function UserRoadmapsList() {\n const [isInitialLoading, setIsInitialLoading] = useState(true);\n const [showUpgradePopup, setShowUpgradePopup] = useState(false);\n\n const [pageState, setPageState] = useState({\n perPage: '21',\n currPage: '1',\n query: '',\n });\n\n const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();\n const { data: limits, isLoading: isLimitLoading } = useQuery(\n aiLimitOptions(),\n queryClient,\n );\n\n const selectedLimit = limits?.roadmap;\n\n const { data: userAiRoadmaps, isFetching: isUserAiRoadmapsLoading } =\n useQuery(listUserAiRoadmapsOptions(pageState), queryClient);\n\n useEffect(() => {\n setIsInitialLoading(false);\n }, [userAiRoadmaps]);\n\n const roadmaps = userAiRoadmaps?.data ?? [];\n\n useEffect(() => {\n const queryParams = getUrlParams();\n\n setPageState({\n ...pageState,\n currPage: queryParams?.p || '1',\n query: queryParams?.q || '',\n });\n }, []);\n\n useEffect(() => {\n if (pageState?.currPage !== '1' || pageState?.query !== '') {\n setUrlParams({\n p: pageState?.currPage || '1',\n q: pageState?.query || '',\n });\n } else {\n deleteUrlParam('p');\n deleteUrlParam('q');\n }\n }, [pageState]);\n\n const isUserAuthenticated = isLoggedIn();\n const isAnyLoading =\n isUserAiRoadmapsLoading ||\n isInitialLoading ||\n isPaidUserLoading ||\n isLimitLoading;\n\n return (\n <>\n {showUpgradePopup && (\n setShowUpgradePopup(false)} />\n )}\n\n {\n setPageState({\n ...pageState,\n query: value,\n currPage: '1',\n });\n }}\n placeholder=\"Search Roadmaps...\"\n disabled={isAnyLoading}\n />\n\n {isAnyLoading && (\n

    \n \n Loading your roadmaps...\n

    \n )}\n\n {!isAnyLoading && (\n <>\n setShowUpgradePopup(true)}\n />\n\n {isUserAuthenticated && !isAnyLoading && roadmaps.length > 0 && (\n
    \n
    \n {roadmaps.map((roadmap) => (\n \n ))}\n
    \n\n {\n setPageState({ ...pageState, currPage: String(page) });\n }}\n className=\"rounded-lg border border-gray-200 bg-white p-4\"\n />\n
    \n )}\n\n {!isAnyLoading && roadmaps.length === 0 && (\n {\n if (isUserAuthenticated) {\n window.location.href = '/ai';\n } else {\n showLoginPopup();\n }\n }}\n />\n )}\n \n )}\n \n );\n}\n" }, { "path": "src/components/AITutor/AIExploreCourseListing.tsx", "content": "import { useQuery } from '@tanstack/react-query';\nimport { useEffect, useState } from 'react';\nimport { AICourseCard } from '../GenerateCourse/AICourseCard';\nimport { AITutorHeader } from './AITutorHeader';\nimport { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';\nimport {\n listExploreAiCoursesOptions,\n type ListExploreAiCoursesQuery,\n} from '../../queries/ai-course';\nimport { queryClient } from '../../stores/query-client';\nimport { deleteUrlParam, getUrlParams, setUrlParams } from '../../lib/browser';\nimport { Pagination } from '../Pagination/Pagination';\nimport { AICourseSearch } from '../GenerateCourse/AICourseSearch';\nimport { AITutorTallMessage } from './AITutorTallMessage';\nimport { BookOpen, Loader2 } from 'lucide-react';\nimport { humanizeNumber } from '../../lib/number';\n\nexport function AIExploreCourseListing() {\n const [isInitialLoading, setIsInitialLoading] = useState(true);\n const [showUpgradePopup, setShowUpgradePopup] = useState(false);\n\n const [pageState, setPageState] = useState({\n perPage: '42',\n currPage: '1',\n query: '',\n });\n\n const {\n data: exploreAiCourses,\n isFetching: isExploreAiCoursesLoading,\n isRefetching: isExploreAiCoursesRefetching,\n } = useQuery(listExploreAiCoursesOptions(pageState), queryClient);\n\n useEffect(() => {\n setIsInitialLoading(false);\n }, [exploreAiCourses]);\n\n const courses = exploreAiCourses?.data ?? [];\n const isAnyLoading = isExploreAiCoursesLoading || isInitialLoading;\n\n useEffect(() => {\n const queryParams = getUrlParams();\n setPageState({\n ...pageState,\n currPage: queryParams?.p || '1',\n });\n }, []);\n\n useEffect(() => {\n if (pageState?.currPage !== '1') {\n setUrlParams({\n p: pageState?.currPage || '1',\n });\n } else {\n deleteUrlParam('p');\n }\n }, [pageState]);\n\n return (\n <>\n {showUpgradePopup && (\n setShowUpgradePopup(false)} />\n )}\n\n setShowUpgradePopup(true)}\n />\n {\n setPageState({\n ...pageState,\n query: value,\n currPage: '1',\n });\n }}\n disabled={isAnyLoading}\n />\n\n {isAnyLoading && (\n

    \n \n Loading courses...\n

    \n )}\n\n {!isAnyLoading && (\n <>\n
    \n

    \n Community has generated{' '}\n {humanizeNumber(exploreAiCourses?.totalCount || 0)} courses\n

    \n\n
    \n {\n setPageState({ ...pageState, currPage: String(page) });\n }}\n className=\"\"\n />\n
    \n
    \n\n {courses && courses.length > 0 && (\n
    \n
    \n {courses.map((course) => (\n \n ))}\n
    \n\n {\n setPageState({ ...pageState, currPage: String(page) });\n }}\n className=\"rounded-lg border border-gray-200 bg-white p-4\"\n />\n
    \n )}\n\n {courses.length === 0 && (\n {\n window.location.href = '/ai';\n }}\n />\n )}\n \n )}\n \n );\n}\n" }, { "path": "src/components/AITutor/AIFeaturedCoursesListing.tsx", "content": "import { useQuery } from '@tanstack/react-query';\nimport {\n listFeaturedAiCoursesOptions,\n type ListUserAiCoursesQuery,\n} from '../../queries/ai-course';\nimport { queryClient } from '../../stores/query-client';\nimport { useEffect, useState } from 'react';\nimport { getUrlParams, setUrlParams, deleteUrlParam } from '../../lib/browser';\nimport { AICourseCard } from '../GenerateCourse/AICourseCard';\nimport { Pagination } from '../Pagination/Pagination';\nimport { AITutorHeader } from './AITutorHeader';\nimport { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';\nimport { AITutorTallMessage } from './AITutorTallMessage';\nimport { BookOpen } from 'lucide-react';\nimport { AILoadingState } from './AILoadingState';\nimport { AICourseSearch } from '../GenerateCourse/AICourseSearch';\n\nexport function AIFeaturedCoursesListing() {\n const [isInitialLoading, setIsInitialLoading] = useState(true);\n const [showUpgradePopup, setShowUpgradePopup] = useState(false);\n\n const [pageState, setPageState] = useState({\n perPage: '42',\n currPage: '1',\n query: '',\n });\n\n const { data: featuredAiCourses, isFetching: isFeaturedAiCoursesLoading } =\n useQuery(listFeaturedAiCoursesOptions(pageState), queryClient);\n\n useEffect(() => {\n setIsInitialLoading(false);\n }, [featuredAiCourses]);\n\n const courses = featuredAiCourses?.data ?? [];\n\n useEffect(() => {\n const queryParams = getUrlParams();\n\n setPageState({\n ...pageState,\n currPage: queryParams?.p || '1',\n query: queryParams?.q || '',\n });\n }, []);\n\n useEffect(() => {\n if (pageState?.currPage !== '1' || pageState?.query !== '') {\n setUrlParams({\n p: pageState?.currPage || '1',\n q: pageState?.query || '',\n });\n } else {\n deleteUrlParam('p');\n deleteUrlParam('q');\n }\n }, [pageState]);\n\n return (\n <>\n {showUpgradePopup && (\n setShowUpgradePopup(false)} />\n )}\n\n setShowUpgradePopup(true)}\n >\n {\n setPageState({\n ...pageState,\n query: value,\n currPage: '1',\n });\n }}\n />\n \n\n {(isFeaturedAiCoursesLoading || isInitialLoading) && (\n \n )}\n\n {!isFeaturedAiCoursesLoading &&\n !isInitialLoading &&\n courses.length > 0 && (\n
    \n
    \n {courses.map((course) => (\n \n ))}\n
    \n\n {\n setPageState({ ...pageState, currPage: String(page) });\n }}\n className=\"rounded-lg border border-gray-200 bg-white p-4\"\n />\n
    \n )}\n\n {!isFeaturedAiCoursesLoading &&\n !isInitialLoading &&\n courses.length === 0 && (\n {\n window.location.href = '/ai';\n }}\n />\n )}\n \n );\n}\n" }, { "path": "src/components/AITutor/AILoadingState.tsx", "content": "import { Loader2 } from 'lucide-react';\n\ntype AILoadingStateProps = {\n title: string;\n subtitle?: string;\n};\n\nexport function AILoadingState(props: AILoadingStateProps) {\n const { title, subtitle } = props;\n\n return (\n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n

    {title}

    \n {subtitle && (\n

    {subtitle}

    \n )}\n
    \n
    \n );\n} " }, { "path": "src/components/AITutor/AITutorHeader.tsx", "content": "import { useQuery } from '@tanstack/react-query';\nimport { aiLimitOptions } from '../../queries/ai-course';\nimport { queryClient } from '../../stores/query-client';\nimport { useIsPaidUser } from '../../queries/billing';\nimport { PlusIcon } from 'lucide-react';\n\ntype AITutorHeaderProps = {\n title: string;\n subtitle?: string;\n onUpgradeClick: () => void;\n children?: React.ReactNode;\n};\n\nexport function AITutorHeader(props: AITutorHeaderProps) {\n const { title, subtitle, onUpgradeClick, children } = props;\n\n const { data: limits } = useQuery(aiLimitOptions(), queryClient);\n const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();\n\n const { used, limit } = limits ?? { used: 0, limit: 0 };\n\n return (\n
    \n
    \n
    \n

    \n {title}\n

    \n {subtitle &&

    {subtitle}

    }\n
    \n
    \n \n \n New\n \n
    \n
    \n
    \n );\n}\n" }, { "path": "src/components/AITutor/AITutorLayout.tsx", "content": "import { Menu } from 'lucide-react';\nimport { useState } from 'react';\nimport { AITutorSidebar, type AITutorTab } from './AITutorSidebar';\nimport { RoadmapLogoIcon } from '../ReactIcons/RoadmapLogo';\nimport { cn } from '../../lib/classname';\n\ntype AITutorLayoutProps = {\n children: React.ReactNode;\n activeTab?: AITutorTab;\n wrapperClassName?: string;\n containerClassName?: string;\n};\n\nexport function AITutorLayout(props: AITutorLayoutProps) {\n const { children, activeTab, wrapperClassName, containerClassName } = props;\n\n const [isSidebarFloating, setIsSidebarFloating] = useState(false);\n\n return (\n <>\n
    \n \n \n \n setIsSidebarFloating(!isSidebarFloating)}\n >\n \n \n
    \n\n \n setIsSidebarFloating(false)}\n isFloating={isSidebarFloating}\n activeTab={activeTab}\n />\n \n {children}\n \n \n \n );\n}\n" }, { "path": "src/components/AITutor/AITutorLimits.tsx", "content": "import { Gift } from 'lucide-react';\nimport { cn } from '../../lib/classname';\n\ntype AITutorLimitsProps = {\n used: number;\n limit: number;\n isPaidUser: boolean;\n isPaidUserLoading: boolean;\n onUpgradeClick: () => void;\n};\n\nexport function AITutorLimits(props: AITutorLimitsProps) {\n const limitUsedPercentage = Math.round((props.used / props.limit) * 100);\n\n if (props.limit <= 0 || props.isPaidUserLoading) {\n return null;\n }\n\n return (\n \n

    \n \n {limitUsedPercentage}% of daily limit used{' '}\n \n {limitUsedPercentage}% used\n \n \n Upgrade\n \n

    \n \n );\n}\n" }, { "path": "src/components/AITutor/AITutorSidebar.tsx", "content": "import { useQuery } from '@tanstack/react-query';\nimport {\n BookOpen,\n ChevronDown,\n ChevronRight,\n Compass,\n FileText,\n Map,\n MessageCircle,\n Star,\n Swords,\n X,\n Zap\n} from 'lucide-react';\nimport { useEffect, useState } from 'react';\nimport { getUrlParams } from '../../lib/browser';\nimport { cn } from '../../lib/classname';\nimport { isLoggedIn } from '../../lib/jwt';\nimport { aiLimitOptions } from '../../queries/ai-course';\nimport { useIsPaidUser } from '../../queries/billing';\nimport { queryClient } from '../../stores/query-client';\nimport { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';\nimport { AILimitsPopup } from '../GenerateCourse/AILimitsPopup';\nimport { AITutorLogo } from '../ReactIcons/AITutorLogo';\nimport { UpgradeSidebarCard } from './UpgradeSidebarCard';\nimport { UserDropdown } from './UserDropdown';\n\ntype AITutorSidebarProps = {\n isFloating: boolean;\n activeTab?: AITutorTab;\n onClose: () => void;\n};\n\nconst sidebarItems = [\n {\n key: 'new',\n label: 'Create with AI',\n href: '/ai',\n icon: Zap,\n children: [\n {\n key: 'create-course',\n label: 'Course',\n href: '/ai?format=course',\n icon: BookOpen,\n },\n {\n key: 'create-guide',\n label: 'Guide',\n href: '/ai?format=guide',\n icon: FileText,\n },\n {\n key: 'create-roadmap',\n label: 'Roadmap',\n href: '/ai?format=roadmap',\n icon: Map,\n },\n {\n key: 'quiz',\n label: 'Quiz',\n href: '/ai/quiz',\n icon: Swords,\n },\n ],\n },\n {\n key: 'chat',\n label: 'Ask AI Tutor',\n href: '/ai/chat',\n icon: MessageCircle,\n },\n {\n key: 'roadmap-chat',\n label: 'Roadmap Chat',\n href: '/ai/roadmap-chat',\n icon: Map,\n },\n {\n key: 'library',\n label: 'My Learning',\n href: '/ai/courses',\n icon: BookOpen,\n },\n {\n key: 'staff-picks',\n label: 'Staff Picks',\n href: '/ai/staff-picks',\n icon: Star,\n },\n {\n key: 'community',\n label: 'Community',\n href: '/ai/community',\n icon: Compass,\n },\n];\n\nexport type AITutorTab = (typeof sidebarItems)[number]['key'];\n\nexport function AITutorSidebar(props: AITutorSidebarProps) {\n const { activeTab, isFloating, onClose } = props;\n\n const [format, setFormat] = useState('');\n const [isInitialLoad, setIsInitialLoad] = useState(true);\n const [expandedItems, setExpandedItems] = useState>({\n new: true, // Keep \"Create with AI\" expanded by default\n });\n\n const [showAILimitsPopup, setShowAILimitsPopup] = useState(false);\n const [isUpgradeModalOpen, setIsUpgradeModalOpen] = useState(false);\n const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();\n\n const { data: limits, isLoading: isLimitsLoading } = useQuery(\n aiLimitOptions(),\n queryClient,\n );\n\n useEffect(() => {\n const { format } = getUrlParams();\n setFormat(format || 'course');\n setIsInitialLoad(false);\n }, []);\n\n const isLoading = isPaidUserLoading || isLimitsLoading;\n\n const toggleExpanded = (key: string) => {\n setExpandedItems((prev) => ({\n ...prev,\n [key]: !prev[key],\n }));\n };\n\n return (\n <>\n {isUpgradeModalOpen && (\n setIsUpgradeModalOpen(false)} />\n )}\n\n {showAILimitsPopup && (\n setShowAILimitsPopup(false)}\n onUpgrade={() => {\n setIsUpgradeModalOpen(true);\n setShowAILimitsPopup(false);\n }}\n />\n )}\n\n \n {isFloating && (\n \n )}\n
    \n
    \n \n
    \n
    \n

    \n AI Tutor\n

    \n \n by{' '}\n \n roadmap.sh\n \n \n
    \n

    \n Your personalized learning companion for any topic\n

    \n
    \n\n
      \n {sidebarItems.map((item) => (\n
    • \n toggleExpanded(item.key)}\n />\n {item.children && expandedItems[item.key] && (\n
        \n
        \n {item.children.map((child) => (\n
      • \n \n
        • \n ))}\n
      \n )}\n
      • \n ))}\n\n {!isInitialLoad && isLoggedIn() && !isPaidUser && !isLoading && (\n
    • \n setIsUpgradeModalOpen(true)}\n />\n
      • \n )}\n
    \n
    \n \n
    \n \n {isFloating && (\n
    \n )}\n \n );\n}\n\ntype SidebarItem = {\n key: string;\n label: string;\n href: string;\n icon: any;\n children?: {\n key: string;\n label: string;\n href: string;\n icon: any;\n }[];\n};\n\ntype ChildItem = {\n key: string;\n label: string;\n href: string;\n icon: any;\n};\n\ntype AITutorSidebarItemProps = {\n item: SidebarItem | ChildItem;\n as?: 'a' | 'button';\n onClick?: () => void;\n className?: string;\n isActive?: boolean;\n isExpanded?: boolean;\n onToggleExpanded?: () => void;\n isChild?: boolean;\n};\n\nfunction AITutorSidebarItem(props: AITutorSidebarItemProps) {\n const {\n item,\n as = 'a',\n onClick,\n className,\n isActive,\n isExpanded,\n onToggleExpanded,\n isChild,\n } = props;\n\n const hasChildren = 'children' in item && item.children;\n const Component = hasChildren ? 'button' : as;\n\n return (\n \n \n {!isChild && }\n {item.label}\n \n {hasChildren && (\n \n {isExpanded ? (\n \n ) : (\n \n )}\n \n )}\n \n );\n}\n" }, { "path": "src/components/AITutor/AITutorSidebarProps.tsx", "content": "import { Zap } from 'lucide-react';\n\n
  • \n
    \n
    \n \n Free Tier\n
    \n

    \n Upgrade to Pro to unlock unlimited AI tutoring sessions\n

    \n
    \n
    • " }, { "path": "src/components/AITutor/AITutorTallMessage.tsx", "content": "import { type LucideIcon } from 'lucide-react';\n\ntype AITutorTallMessageProps = {\n title: string;\n subtitle?: string;\n icon: LucideIcon;\n buttonText?: string;\n onButtonClick?: () => void;\n};\n\nexport function AITutorTallMessage(props: AITutorTallMessageProps) {\n const { title, subtitle, icon: Icon, buttonText, onButtonClick } = props;\n\n return (\n
    \n \n
    \n

    {title}

    \n {subtitle &&

    {subtitle}

    }\n
    \n {buttonText && onButtonClick && (\n \n {buttonText}\n \n )}\n
    \n );\n}\n" }, { "path": "src/components/AITutor/BaseDropdown.tsx", "content": "import { ChevronDown } from 'lucide-react';\nimport { useState, useRef, useEffect } from 'react';\nimport { cn } from '../../lib/classname';\nimport type { LucideIcon } from 'lucide-react';\n\ntype BaseDropdownProps = {\n value: T;\n options: readonly T[];\n onChange: (value: T) => void;\n icons?: Record;\n};\n\nexport function BaseDropdown(props: BaseDropdownProps) {\n const { value, options, onChange, icons } = props;\n\n const [isOpen, setIsOpen] = useState(false);\n const dropdownRef = useRef(null);\n\n useEffect(() => {\n function handleClickOutside(event: MouseEvent) {\n if (\n dropdownRef.current &&\n !dropdownRef.current.contains(event.target as Node)\n ) {\n setIsOpen(false);\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n const Icon = icons?.[value];\n\n return (\n
    \n setIsOpen(!isOpen)}\n className={cn(\n 'flex items-center gap-2 rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-700 hover:bg-gray-200 hover:text-black',\n )}\n >\n {Icon && }\n {value}\n \n \n\n {isOpen && (\n
    \n {options.map((option) => {\n const OptionIcon = icons?.[option];\n return (\n {\n onChange(option);\n setIsOpen(false);\n }}\n className={cn(\n 'flex items-center gap-2 px-5 py-2 text-left text-sm capitalize hover:bg-gray-100',\n value === option && 'bg-gray-200 font-medium hover:bg-gray-200',\n )}\n >\n {OptionIcon && }\n {option}\n \n );\n })}\n
    \n )}\n
    \n );\n} " }, { "path": "src/components/AITutor/DifficultyDropdown.tsx", "content": "import { BaseDropdown } from './BaseDropdown';\nimport {\n difficultyLevels,\n type DifficultyLevel,\n} from '../GenerateCourse/AICourse';\n\ntype DifficultyDropdownProps = {\n value: DifficultyLevel;\n onChange: (value: DifficultyLevel) => void;\n};\n\nexport function DifficultyDropdown(props: DifficultyDropdownProps) {\n const { value, onChange } = props;\n\n return (\n \n );\n}\n" }, { "path": "src/components/AITutor/LoginToView.tsx", "content": "import { LockIcon } from 'lucide-react';\n\nimport { showLoginPopup } from '../../lib/popup';\nimport { cn } from '../../lib/classname';\n\ntype LoginToViewProps = {\n className?: string;\n};\n\nexport function LoginToView(props: LoginToViewProps) {\n const { className } = props;\n\n return (\n \n \n\n
    \n

    Login Required

    \n

    \n Please login to access the content and all the features of the AI Tutor.\n

    \n
    \n\n showLoginPopup()}\n className=\"rounded-full bg-black px-6 py-2 text-sm font-medium text-white transition-all duration-300 hover:opacity-80 hover:shadow-md active:scale-[0.98] active:transform\"\n >\n Login to Continue\n \n
    \n );\n}\n" }, { "path": "src/components/AITutor/NatureDropdown.tsx", "content": "import { BaseDropdown } from './BaseDropdown';\nimport { BookOpen, FileText } from 'lucide-react';\n\nexport const natureTypes = ['course', 'document'] as const;\nexport type NatureType = (typeof natureTypes)[number];\n\nconst natureIcons = {\n course: BookOpen,\n document: FileText,\n} as const;\n\ntype NatureDropdownProps = {\n value: NatureType;\n onChange: (value: NatureType) => void;\n};\n\nexport function NatureDropdown(props: NatureDropdownProps) {\n const { value, onChange } = props;\n\n return (\n \n );\n} " }, { "path": "src/components/AITutor/UpgradeSidebarCard.tsx", "content": "import { useQuery } from '@tanstack/react-query';\nimport { Zap } from 'lucide-react';\nimport { queryClient } from '../../stores/query-client';\nimport { aiLimitOptions } from '../../queries/ai-course';\nimport { getPercentage } from '../../lib/number';\nimport { cn } from '../../lib/classname';\n\ntype UpgradeSidebarCardProps = {\n onUpgrade: () => void;\n className?: string;\n descriptionClassName?: string;\n titleClassName?: string;\n title?: string;\n description?: string;\n showLimit?: boolean;\n};\n\nexport function UpgradeSidebarCard(props: UpgradeSidebarCardProps) {\n const {\n onUpgrade,\n title = 'Upgrade',\n description = 'Get access to all features and benefits of the AI Tutor.',\n descriptionClassName,\n titleClassName,\n className,\n showLimit = true,\n } = props;\n\n const { data: limits, isLoading: isLimitsLoading } = useQuery(\n aiLimitOptions(),\n queryClient,\n );\n\n const { used, limit } = limits ?? { used: 0, limit: 0 };\n const totalPercentage = getPercentage(used, limit);\n\n return (\n \n \n \n \n {title}\n \n \n \n {description}\n \n\n {showLimit && (\n
    \n
    \n
    \n
    \n \n {totalPercentage}% of the daily limit used\n \n \n )}\n \n );\n}\n" }, { "path": "src/components/AITutor/UserDropdown.tsx", "content": "import {\n ChevronDown,\n CreditCardIcon,\n LogInIcon,\n LogOutIcon,\n Settings,\n User2,\n} from 'lucide-react';\nimport { useAuth } from '../../hooks/use-auth';\nimport { useClientMount } from '../../hooks/use-client-mount';\nimport { logout } from '../../lib/auth';\nimport { showLoginPopup } from '../../lib/popup';\nimport { useIsPaidUser } from '../../queries/billing';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '../DropdownMenu';\n\ntype UserDropdownProps = {};\n\nexport function UserDropdown(props: UserDropdownProps) {\n const currentUser = useAuth();\n const { isPaidUser, isLoading } = useIsPaidUser();\n const isMounted = useClientMount();\n\n if (!isMounted || isLoading) {\n return null;\n }\n\n if (!currentUser) {\n return (\n \n \n Free Signup or Login\n \n );\n }\n\n const userAvatar = currentUser?.avatar\n ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${currentUser?.avatar}`\n : '/img/default-avatar.png';\n\n return (\n \n \n \n \n\n \n
    \n \n \n \n Account\n \n \n\n \n \n \n Billing\n \n \n\n \n \n \n Settings\n \n \n
    \n\n \n\n {\n logout();\n }}\n >\n \n Logout\n \n     \n     \n );\n}\n" }, { "path": "src/components/AIUsageWarning/AIUsageWarning.tsx", "content": "import { isLoggedIn } from '../../lib/jwt';\n\ntype AIUsageWarningProps = {\n type: 'course' | 'guide' | 'roadmap' | 'quiz';\n totalCount?: number;\n isPaidUser?: boolean;\n usedCount?: number;\n limitCount?: number;\n onUpgrade: () => void;\n};\n\nexport function AIUsageWarning(props: AIUsageWarningProps) {\n const { type, totalCount, isPaidUser, usedCount, limitCount, onUpgrade } =\n props;\n\n const isUserAuthenticated = isLoggedIn();\n\n const typeLabels = {\n course: 'courses',\n guide: 'guides',\n roadmap: 'roadmaps',\n quiz: 'quizzes',\n };\n\n const typeLabel = typeLabels[type];\n\n return (\n

    \n {isUserAuthenticated ? (\n isPaidUser ? (\n `You have generated ${totalCount} ${typeLabel} so far.`\n ) : (\n <>\n You have used{' '}\n \n {usedCount} of {limitCount} {typeLabel}\n \n \n Need more? Upgrade\n \n \n )\n ) : (\n `Sign up or login to generate your first ${type}. Takes 2s to do so.`\n )}\n

    \n );\n}\n" }, { "path": "src/components/AccountSidebar/AccountSidebarUpgrade.tsx", "content": "import { useIsMounted } from '../../hooks/use-is-mounted';\nimport { isLoggedIn } from '../../lib/jwt';\nimport { useIsPaidUser } from '../../queries/billing';\nimport { UpgradeSidebarCard } from '../AITutor/UpgradeSidebarCard';\nimport { useState } from 'react';\nimport { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';\n\nexport function AccountSidebarUpgrade() {\n const isMounted = useIsMounted();\n const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();\n const [isUpgradeModalOpen, setIsUpgradeModalOpen] = useState(false);\n\n if (!isMounted || isPaidUserLoading || !isLoggedIn() || isPaidUser) {\n return null;\n }\n\n return (\n <>\n {isUpgradeModalOpen && (\n setIsUpgradeModalOpen(false)} />\n )}\n\n setIsUpgradeModalOpen(true)}\n className=\"mt-4 -mr-px rounded-r-none ml-0\"\n descriptionClassName=\"leading-normal\"\n title=\"Upgrade\"\n description=\"Unlock premium features including AI tutor and more.\"\n showLimit={false}\n />\n \n );\n}\n" }, { "path": "src/components/AccountSidebar.astro", "content": "---\nimport AstroIcon from './AstroIcon.astro';\nimport { TeamDropdown } from './TeamDropdown/TeamDropdown';\nimport { SidebarFriendsCounter } from './Friends/SidebarFriendsCounter';\nimport { Map } from 'lucide-react';\nimport { AccountSidebarUpgrade } from './AccountSidebar/AccountSidebarUpgrade';\n\nexport interface Props {\n activePageId: string;\n activePageTitle: string;\n hasDesktopSidebar?: boolean;\n}\n\nconst { hasDesktopSidebar = true, activePageId, activePageTitle } = Astro.props;\n\nconst sidebarLinks = [\n {\n href: '/account',\n title: 'Activity',\n id: 'activity',\n isNew: false,\n icon: {\n glyph: 'analytics',\n classes: 'h-3 w-4',\n },\n },\n {\n href: '/account/update-profile',\n title: 'Profile',\n id: 'profile',\n isNew: false,\n icon: {\n glyph: 'user',\n classes: 'h-4 w-4',\n },\n },\n {\n href: '/account/friends',\n title: 'Friends',\n id: 'friends',\n isNew: false,\n icon: {\n glyph: 'users',\n classes: 'h-4 w-4',\n },\n },\n {\n href: '/account/roadmaps',\n title: 'Roadmaps',\n id: 'roadmaps',\n isNew: false,\n icon: {\n glyph: 'users',\n classes: 'h-4 w-4',\n component: Map,\n },\n },\n {\n href: '/account/road-card',\n title: 'Road Card',\n id: 'road-card',\n isNew: false,\n icon: {\n glyph: 'badge',\n classes: 'h-4 w-4',\n },\n },\n {\n href: '/account/billing',\n title: 'Billing',\n id: 'billing',\n isNew: false,\n icon: {\n glyph: 'credit-card',\n classes: 'h-4 w-4',\n },\n },\n {\n href: '/account/settings',\n title: 'Settings',\n id: 'settings',\n isNew: false,\n icon: {\n glyph: 'cog',\n classes: 'h-4 w-4',\n },\n },\n];\n---\n\n
    \n \n {activePageTitle}\n \n \n
    \n\n
    \n \n {\n hasDesktopSidebar && (\n \n )\n }\n \n\n \n \n
    \n\n\n\n" }, { "path": "src/components/AccountStreak/AccountStreak.tsx", "content": "import { useEffect, useRef, useState } from 'react';\nimport { isLoggedIn } from '../../lib/jwt';\nimport { httpGet } from '../../lib/http';\nimport { useToast } from '../../hooks/use-toast';\nimport { Zap, ZapOff } from 'lucide-react';\nimport { useOutsideClick } from '../../hooks/use-outside-click';\nimport { StreakDay } from './StreakDay';\nimport {\n navigationDropdownOpen,\n roadmapsDropdownOpen,\n} from '../../stores/page.ts';\nimport { useStore } from '@nanostores/react';\nimport { cn } from '../../lib/classname.ts';\nimport { $accountStreak, type StreakResponse } from '../../stores/streak.ts';\nimport { InviteFriends } from './InviteFriends.tsx';\n\ntype AccountStreakProps = {};\n\nexport function AccountStreak(props: AccountStreakProps) {\n const toast = useToast();\n const dropdownRef = useRef(null);\n\n const [isLoading, setIsLoading] = useState(true);\n const accountStreak = useStore($accountStreak);\n const [showDropdown, setShowDropdown] = useState(false);\n\n const $roadmapsDropdownOpen = useStore(roadmapsDropdownOpen);\n const $navigationDropdownOpen = useStore(navigationDropdownOpen);\n\n useEffect(() => {\n if ($roadmapsDropdownOpen || $navigationDropdownOpen) {\n setShowDropdown(false);\n }\n }, [$roadmapsDropdownOpen, $navigationDropdownOpen]);\n\n const loadAccountStreak = async () => {\n if (!isLoggedIn()) {\n return;\n }\n\n if (accountStreak) {\n setIsLoading(false);\n return;\n }\n\n setIsLoading(true);\n const { response, error } = await httpGet(\n `${import.meta.env.PUBLIC_API_URL}/v1-streak`,\n );\n\n if (error || !response) {\n toast.error(error?.message || 'Failed to load account streak');\n setIsLoading(false);\n return;\n }\n\n $accountStreak.set(response);\n setIsLoading(false);\n };\n\n useOutsideClick(dropdownRef, () => {\n setShowDropdown(false);\n });\n\n useEffect(() => {\n loadAccountStreak().finally(() => {});\n }, []);\n\n if (!isLoggedIn() || isLoading) {\n return null;\n }\n\n let { count: currentCount = 0 } = accountStreak || {};\n const previousCount =\n accountStreak?.previousCount || accountStreak?.count || 0;\n\n // Adding one to show the current day\n const currentCircleCount = Math.min(currentCount, 5) + 1;\n // Adding one day to show the streak they broke\n const leftCircleCount = Math.min(5 - currentCircleCount, previousCount) + 1;\n // In the maximum case, we will show 10 circles\n const remainingCount = Math.max(0, 10 - leftCircleCount - currentCircleCount);\n const totalCircles = leftCircleCount + currentCircleCount + remainingCount;\n\n return (\n
    \n setShowDropdown(true)}\n >\n \n \n {accountStreak?.count}\n \n \n\n {showDropdown && (\n \n
    \n
    \n

    \n Current Streak\n \n {accountStreak?.count || 0}\n \n

    \n

    \n Longest Streak\n \n {accountStreak?.longestCount || 0}\n \n

    \n
    \n\n
    \n
    \n {Array.from({ length: totalCircles }).map((_, index) => {\n let dayCount,\n icon,\n isPreviousStreakDay,\n isBrokenStreakDay,\n isCurrentStreakDay,\n isRemainingStreakDay,\n isToday;\n\n if (index < leftCircleCount) {\n // Previous streak days\n dayCount = previousCount - leftCircleCount + index + 1 + 1;\n isPreviousStreakDay = true;\n isBrokenStreakDay = index === leftCircleCount - 1;\n\n icon = isBrokenStreakDay ? (\n \n ) : (\n \n );\n } else if (index < leftCircleCount + currentCircleCount) {\n // Current streak days\n const currentIndex = index - leftCircleCount;\n dayCount =\n currentCount - currentCircleCount + currentIndex + 1 + 1;\n isCurrentStreakDay = true;\n isToday = currentIndex === currentCircleCount - 1;\n icon = ;\n } else {\n // Remaining streak days\n const remainingIndex =\n index - leftCircleCount - currentCircleCount;\n dayCount = currentCount + remainingIndex + 1 + 1;\n isRemainingStreakDay = true;\n }\n\n return (\n \n );\n })}\n
    \n
    \n\n

    \n Visit every day to keep your streak going!\n

    \n\n \n
    \n
    \n )}\n \n );\n}\n" }, { "path": "src/components/AccountStreak/AccountStreakHeatmap.css", "content": ".react-calendar-heatmap text {\n fill: rgb(148, 163, 184) !important;\n}\n\n.react-calendar-heatmap rect:hover {\n stroke: rgb(148, 163, 184) !important;\n}" }, { "path": "src/components/AccountStreak/InviteFriends.tsx", "content": "import { Copy, Heart } from 'lucide-react';\nimport { useAuth } from '../../hooks/use-auth';\nimport { useCopyText } from '../../hooks/use-copy-text';\nimport { cn } from '../../lib/classname';\nimport { CheckIcon } from '../ReactIcons/CheckIcon';\n\ntype InviteFriendsProps = {\n refByUserCount: number;\n};\n\nexport function InviteFriends(props: InviteFriendsProps) {\n const { refByUserCount } = props;\n\n const user = useAuth();\n const { copyText, isCopied } = useCopyText();\n\n const referralLink = new URL(\n `/signup?rc=${user?.id}`,\n import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh',\n ).toString();\n\n return (\n
    \n

    Invite people to join roadmap.sh

    \n\n
    \n

    \n {refByUserCount === 0 && <>You haven't invited anyone yet.}\n {refByUserCount > 0 && refByUserCount < 10 && (\n <>{refByUserCount} of 10 users joined\n )}\n

    \n\n {refByUserCount >= 10 && <>🎉 You've invited {refByUserCount} users}\n\n
    \n {Array.from({ length: 10 }).map((_, index) => (\n \n ))}\n
    \n

    \n Share the link below with anyone you think would benefit from using\n roadmap.sh\n

    \n

    \n {\n copyText(referralLink);\n }}\n className={cn(\n 'rounded-md hover:bg-slate-500/80 hover:text-slate-100 px-3 py-1 text-xs text-slate-300 bg-slate-600',\n {\n 'bg-green-500 text-black hover:text-black hover:bg-green-500': isCopied,\n },\n )}\n >\n {!isCopied ? 'Copy Invite Link' : 'Invite Link Copied'}{' '}\n {!isCopied && (\n \n )}\n {isCopied && (\n \n )}\n \n

    \n
    \n\n

    \n \n See how you rank on the leaderboard\n \n

    \n
    \n );\n}\n" }, { "path": "src/components/AccountStreak/StreakDay.tsx", "content": "import type { ReactNode } from 'react';\nimport { cn } from '../../lib/classname';\nimport { ChevronDown } from 'lucide-react';\n\ntype StreakDayProps = {\n isToday?: boolean;\n isCurrentStreakDay?: boolean;\n isPreviousStreakDay?: boolean;\n isBrokenStreakDay?: boolean;\n isRemainingStreakDay?: boolean;\n dayCount: number;\n icon?: ReactNode;\n};\n\nexport function StreakDay(props: StreakDayProps) {\n const {\n isCurrentStreakDay,\n isPreviousStreakDay,\n isBrokenStreakDay,\n isRemainingStreakDay,\n dayCount,\n icon,\n isToday = false,\n } = props;\n\n return (\n \n \n {isToday ? null : icon}\n \n {dayCount}\n {isToday && (\n \n )}\n \n );\n}\n" }, { "path": "src/components/AccountTerms.tsx", "content": "export function AccountTerms() {\n return (\n
    \n By continuing to use our services, you acknowledge that you have both read\n and agree to our{' '}\n \n Terms of Service\n {' '}\n and{' '}\n \n Privacy Policy\n \n .\n
    \n );\n}\n" }, { "path": "src/components/Activity/ActivityStream.tsx", "content": "import { useState } from 'react';\nimport { getRelativeTimeString } from '../../lib/date';\nimport type { ResourceType } from '../../lib/resource-progress';\nimport { EmptyStream } from './EmptyStream';\nimport { ActivityTopicsModal } from './ActivityTopicsModal.tsx';\nimport { ChevronsDown, ChevronsUp } from 'lucide-react';\nimport { ActivityTopicTitles } from './ActivityTopicTitles.tsx';\nimport { cn } from '../../lib/classname.ts';\n\nexport const allowedActivityActionType = [\n 'in_progress',\n 'done',\n 'answered',\n] as const;\nexport type AllowedActivityActionType =\n (typeof allowedActivityActionType)[number];\n\nexport type UserStreamActivity = {\n _id?: string;\n resourceType: ResourceType | 'question';\n resourceId: string;\n resourceTitle: string;\n resourceSlug?: string;\n isCustomResource?: boolean;\n actionType: AllowedActivityActionType;\n topicTitles?: string[];\n createdAt: Date;\n updatedAt: Date;\n};\n\ntype ActivityStreamProps = {\n activities: UserStreamActivity[];\n className?: string;\n onResourceClick?: (\n resourceId: string,\n resourceType: ResourceType,\n isCustomResource: boolean,\n ) => void;\n};\n\nexport function ActivityStream(props: ActivityStreamProps) {\n const { activities, className, onResourceClick } = props;\n\n const [showAll, setShowAll] = useState(false);\n const [selectedActivity, setSelectedActivity] =\n useState(null);\n\n const sortedActivities = activities\n .filter(\n (activity) => activity?.topicTitles && activity.topicTitles.length > 0,\n )\n .sort((a, b) => {\n return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();\n })\n .slice(0, showAll ? activities.length : 10);\n\n return (\n
    \n {activities.length > 0 && (\n

    \n Learning Activity\n

    \n )}\n\n {selectedActivity && (\n setSelectedActivity(null)}\n activityId={selectedActivity._id!}\n resourceId={selectedActivity.resourceId}\n resourceType={selectedActivity.resourceType}\n isCustomResource={selectedActivity.isCustomResource}\n topicTitles={selectedActivity.topicTitles || []}\n topicCount={selectedActivity.topicTitles?.length || 0}\n actionType={selectedActivity.actionType}\n />\n )}\n\n {activities.length > 0 ? (\n
      \n {sortedActivities.map((activity) => {\n const {\n _id,\n resourceType,\n resourceId,\n resourceTitle,\n actionType,\n updatedAt,\n topicTitles,\n isCustomResource,\n resourceSlug,\n } = activity;\n\n const resourceUrl =\n resourceType === 'question'\n ? `/questions/${resourceId}`\n : resourceType === 'best-practice'\n ? `/best-practices/${resourceId}`\n : isCustomResource && resourceType === 'roadmap'\n ? `/r/${resourceSlug}`\n : `/${resourceId}`;\n\n const resourceLinkComponent =\n onResourceClick && resourceType !== 'question' ? (\n \n onResourceClick(resourceId, resourceType, isCustomResource!)\n }\n >\n {resourceTitle}\n \n ) : (\n \n {resourceTitle}\n \n );\n\n const topicCount = topicTitles?.length || 0;\n\n const timeAgo = (\n \n {getRelativeTimeString(new Date(updatedAt).toISOString())}\n \n );\n\n return (\n
    • \n {actionType === 'in_progress' && (\n <>\n

      \n Started {topicCount} topic\n {topicCount > 1 ? 's' : ''} in \n {resourceLinkComponent} \n {timeAgo}\n

      \n \n \n )}\n {actionType === 'done' && (\n <>\n

      \n Completed {topicCount} topic\n {topicCount > 1 ? 's' : ''} in \n {resourceLinkComponent} \n {timeAgo}\n

      \n \n \n )}\n {actionType === 'answered' && (\n <>\n

      \n Answered {topicCount} question\n {topicCount > 1 ? 's' : ''} in \n {resourceLinkComponent} \n {timeAgo}\n

      \n \n \n )}\n
      • \n );\n })}\n
    \n ) : (\n \n )}\n\n {activities.length > 10 && (\n setShowAll(!showAll)}\n >\n {showAll ? (\n <>\n \n Show less\n \n ) : (\n <>\n \n Show more\n \n )}\n \n )}\n
    \n );\n}\n" }, { "path": "src/components/Activity/ActivityTopicTitles.tsx", "content": "import { useState } from 'react';\nimport { cn } from '../../lib/classname';\n\ntype ActivityTopicTitlesProps = {\n topicTitles: string[];\n className?: string;\n onSelectActivity?: () => void;\n};\n\nexport function ActivityTopicTitles(props: ActivityTopicTitlesProps) {\n const { topicTitles, onSelectActivity, className } = props;\n\n const [showAll, setShowAll] = useState(false);\n const filteredTopicTitles = topicTitles.slice(\n 0,\n showAll ? topicTitles.length : 3,\n );\n\n const shouldShowButton = topicTitles.length > 3;\n\n return (\n \n {filteredTopicTitles.map((topicTitle, index) => (\n \n {topicTitle}\n \n ))}\n {shouldShowButton && !showAll && (\n setShowAll(!showAll)}\n className=\"bg-white border border-black text-black rounded-md px-1.5 hover:bg-black text-xs h-[20px] hover:text-white\"\n >\n {showAll ? '- Show less' : `+${topicTitles.length - 3}`}\n \n )}\n \n );\n}\n" }, { "path": "src/components/Activity/ActivityTopicsModal.tsx", "content": "import { useEffect, useState } from 'react';\nimport type { ResourceType } from '../../lib/resource-progress';\nimport type { AllowedActivityActionType } from './ActivityStream';\nimport { httpPost } from '../../lib/http';\nimport { Modal } from '../Modal.tsx';\nimport { ModalLoader } from '../UserProgress/ModalLoader.tsx';\nimport { ArrowUpRight, BookOpen, Check } from 'lucide-react';\n\ntype ActivityTopicDetailsProps = {\n activityId: string;\n resourceId: string;\n resourceType: ResourceType | 'question';\n isCustomResource?: boolean;\n topicTitles: string[];\n topicCount: number;\n actionType: AllowedActivityActionType;\n onClose: () => void;\n};\n\nexport function ActivityTopicsModal(props: ActivityTopicDetailsProps) {\n const {\n resourceId,\n resourceType,\n isCustomResource,\n topicTitles = [],\n topicCount,\n actionType,\n onClose,\n } = props;\n\n let pageUrl = '';\n if (resourceType === 'roadmap') {\n pageUrl = isCustomResource ? `/r/${resourceId}` : `/${resourceId}`;\n } else if (resourceType === 'best-practice') {\n pageUrl = `/best-practices/${resourceId}`;\n } else {\n pageUrl = `/questions/${resourceId}`;\n }\n\n return (\n {\n onClose();\n }}\n >\n
    \n \n \n {actionType.replace('_', ' ')}\n \n \n Visit Page{' '}\n \n \n \n
      \n {topicTitles.map((topicTitle) => {\n const ActivityIcon =\n actionType === 'done'\n ? Check\n : actionType === 'in_progress'\n ? BookOpen\n : Check;\n\n return (\n
    • \n \n {topicTitle}\n
      • \n );\n })}\n
    \n
    \n \n );\n}\n" }, { "path": "src/components/Activity/EmptyStream.tsx", "content": "import { List } from 'lucide-react';\n\nexport function EmptyStream() {\n return (\n
    \n
    \n \n\n

    No Activity

    \n

    \n Activities will appear here as you start tracking your progress.\n

    \n
    \n
    \n );\n}\n" }, { "path": "src/components/Activity/ProjectProgress.tsx", "content": "import { getUser } from '../../lib/jwt';\nimport { ProjectProgressActions } from './ProjectProgressActions';\nimport { cn } from '../../lib/classname';\nimport type { ProjectStatusDocument } from '../Projects/ListProjectSolutions';\nimport { ProjectStatus } from './ProjectStatus';\nimport { ThumbsUp } from 'lucide-react';\n\ntype ProjectProgressType = {\n projectStatus: ProjectStatusDocument & {\n title: string;\n };\n showActions?: boolean;\n userId?: string;\n};\n\nexport function ProjectProgress(props: ProjectProgressType) {\n const {\n projectStatus,\n showActions = true,\n userId: defaultUserId = getUser()?.id,\n } = props;\n\n const shouldShowActions =\n projectStatus.submittedAt &&\n projectStatus.submittedAt !== null &&\n showActions;\n\n return (\n
    \n \n \n {projectStatus?.title}\n \n {projectStatus.upvotes}\n \n \n \n\n {shouldShowActions && (\n
    \n \n
    \n )}\n
    \n );\n}\n" }, { "path": "src/components/Activity/ProjectProgressActions.tsx", "content": "import { MoreVertical, X } from 'lucide-react';\nimport { useRef, useState } from 'react';\nimport { useOutsideClick } from '../../hooks/use-outside-click';\nimport { useKeydown } from '../../hooks/use-keydown';\nimport { cn } from '../../lib/classname';\nimport { useCopyText } from '../../hooks/use-copy-text';\nimport { CheckIcon } from '../ReactIcons/CheckIcon';\nimport { ShareIcon } from '../ReactIcons/ShareIcon';\n\ntype ProjectProgressActionsType = {\n userId: string;\n projectId: string;\n};\n\nexport function ProjectProgressActions(props: ProjectProgressActionsType) {\n const { userId, projectId } = props;\n\n const dropdownRef = useRef(null);\n const [isOpen, setIsOpen] = useState(false);\n\n const { copyText, isCopied } = useCopyText();\n\n const projectSolutionUrl = `${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/projects/${projectId}/solutions?u=${userId}`;\n\n useOutsideClick(dropdownRef, () => {\n setIsOpen(false);\n });\n\n useKeydown('Escape', () => {\n setIsOpen(false);\n });\n\n return (\n
    \n setIsOpen(!isOpen)}\n >\n \n \n\n {isOpen && (\n
    \n {\n copyText(projectSolutionUrl);\n }}\n >\n {isCopied ? (\n <>\n Link Copied\n \n ) : (\n <>\n Share\n Solution\n \n )}\n \n
    \n )}\n
    \n );\n}\n" }, { "path": "src/components/Activity/ProjectStatus.tsx", "content": "import { CircleDashed } from 'lucide-react';\nimport type { ProjectStatusDocument } from '../Projects/ListProjectSolutions';\nimport { CheckIcon } from '../ReactIcons/CheckIcon';\n\ntype ProjectStatusType = {\n projectStatus: ProjectStatusDocument & {\n title: string;\n };\n};\n\nexport function ProjectStatus(props: ProjectStatusType) {\n const { projectStatus } = props;\n\n const { submittedAt, repositoryUrl } = projectStatus;\n const status = submittedAt && repositoryUrl ? 'submitted' : 'started';\n\n if (status === 'submitted') {\n return ;\n }\n\n return (\n \n );\n}\n" }, { "path": "src/components/Activity/ResourceProgress.tsx", "content": "import { getUser } from '../../lib/jwt';\nimport { ResourceProgressActions } from './ResourceProgressActions';\nimport { cn } from '../../lib/classname';\nimport { getPercentage } from '../../lib/number';\n\ntype ResourceProgressType = {\n resourceType: 'roadmap' | 'best-practice';\n resourceId: string;\n title: string;\n updatedAt: string;\n totalCount: number;\n doneCount: number;\n learningCount: number;\n skippedCount: number;\n onCleared?: () => void;\n showClearButton?: boolean;\n isCustomResource: boolean;\n roadmapSlug?: string;\n showActions?: boolean;\n onResourceClick?: () => void;\n};\n\nexport function ResourceProgress(props: ResourceProgressType) {\n const {\n showClearButton = true,\n isCustomResource,\n showActions = true,\n onResourceClick,\n } = props;\n\n const userId = getUser()?.id;\n\n const {\n updatedAt,\n resourceType,\n resourceId,\n title,\n totalCount,\n learningCount,\n doneCount,\n skippedCount,\n onCleared,\n roadmapSlug,\n } = props;\n\n let url =\n resourceType === 'roadmap'\n ? `/${resourceId}`\n : `/best-practices/${resourceId}`;\n\n if (isCustomResource) {\n url = `/r/${roadmapSlug}`;\n }\n\n const totalMarked = doneCount + skippedCount;\n const progressPercentage = getPercentage(totalMarked, totalCount);\n\n const Slot = onResourceClick ? 'button' : 'a';\n\n return (\n
    \n \n {title}\n \n {parseInt(progressPercentage, 10)}%\n \n\n \n \n\n {showActions && (\n
    \n \n
    \n )}\n
    \n );\n}\n" }, { "path": "src/components/Activity/ResourceProgressActions.tsx", "content": "import { MoreVertical, X } from 'lucide-react';\nimport { useRef, useState } from 'react';\nimport { useOutsideClick } from '../../hooks/use-outside-click';\nimport { useKeydown } from '../../hooks/use-keydown';\nimport { ProgressShareButton } from '../UserProgress/ProgressShareButton';\nimport type { ResourceType } from '../../lib/resource-progress';\nimport { httpPost } from '../../lib/http';\nimport { useToast } from '../../hooks/use-toast';\n\ntype ResourceProgressActionsType = {\n userId: string;\n resourceType: ResourceType;\n resourceId: string;\n isCustomResource: boolean;\n showClearButton?: boolean;\n onCleared?: () => void;\n};\n\nexport function ResourceProgressActions(props: ResourceProgressActionsType) {\n const {\n userId,\n resourceType,\n resourceId,\n isCustomResource,\n showClearButton = true,\n onCleared,\n } = props;\n\n const toast = useToast();\n const dropdownRef = useRef(null);\n\n const [isOpen, setIsOpen] = useState(false);\n const [isClearing, setIsClearing] = useState(false);\n const [isConfirming, setIsConfirming] = useState(false);\n\n async function clearProgress() {\n setIsClearing(true);\n const { error, response } = await httpPost(\n `${import.meta.env.PUBLIC_API_URL}/v1-clear-resource-progress`,\n {\n resourceId,\n resourceType,\n },\n );\n\n if (error || !response) {\n toast.error('Error clearing progress. Please try again.');\n console.error(error);\n setIsClearing(false);\n return;\n }\n\n localStorage.removeItem(`${resourceType}-${resourceId}-${userId}-favorite`);\n localStorage.removeItem(`${resourceType}-${resourceId}-${userId}-progress`);\n\n setIsClearing(false);\n setIsConfirming(false);\n if (onCleared) {\n onCleared();\n }\n }\n\n useOutsideClick(dropdownRef, () => {\n setIsOpen(false);\n });\n\n useKeydown('Escape', () => {\n setIsOpen(false);\n });\n\n return (\n
    \n setIsOpen(!isOpen)}\n >\n \n \n\n {isOpen && (\n
    \n \n {showClearButton && (\n <>\n {!isConfirming && (\n setIsConfirming(true)}\n disabled={isClearing}\n >\n {!isClearing ? (\n <>\n \n Clear Progress\n \n ) : (\n 'Processing...'\n )}\n \n )}\n\n {isConfirming && (\n \n Are you sure?\n
    \n \n Yes\n \n setIsConfirming(false)}\n className=\"text-red-500 underline hover:text-red-800\"\n >\n No\n \n
    \n     \n )}\n \n )}\n
    \n )}\n
    \n );\n}\n" }, { "path": "src/components/AddTeamRoadmap.tsx", "content": "import { useRef, useState } from 'react';\nimport { useOutsideClick } from '../hooks/use-outside-click';\nimport { type OptionType, SearchSelector } from './SearchSelector';\nimport type { PageType } from './CommandMenu/CommandMenu';\nimport { CheckIcon } from './ReactIcons/CheckIcon';\nimport { httpPut } from '../lib/http';\nimport type { TeamResourceConfig } from './CreateTeam/RoadmapSelector';\nimport { Spinner } from './ReactIcons/Spinner';\n\ntype AddTeamRoadmapProps = {\n teamId: string;\n allRoadmaps: PageType[];\n availableRoadmaps: PageType[];\n onClose: () => void;\n onMakeChanges: (roadmapId: string) => void;\n setResourceConfigs: (config: TeamResourceConfig) => void;\n};\n\nexport function AddTeamRoadmap(props: AddTeamRoadmapProps) {\n const {\n teamId,\n onMakeChanges,\n onClose,\n allRoadmaps,\n availableRoadmaps,\n setResourceConfigs,\n } = props;\n const [error, setError] = useState('');\n const [isLoading, setIsLoading] = useState(false);\n const [selectedRoadmap, setSelectedRoadmap] = useState('');\n const popupBodyEl = useRef(null);\n\n async function addTeamResource(roadmapId: string) {\n if (!teamId) {\n return;\n }\n\n setIsLoading(true);\n const { error, response } = await httpPut(\n `${\n import.meta.env.PUBLIC_API_URL\n }/v1-update-team-resource-config/${teamId}`,\n {\n teamId: teamId,\n resourceId: roadmapId,\n resourceType: 'roadmap',\n removed: [],\n }\n );\n\n if (error || !response) {\n setError(error?.message || 'Error adding roadmap');\n return;\n }\n\n setResourceConfigs(response);\n }\n\n useOutsideClick(popupBodyEl, () => {\n onClose();\n });\n\n const selectedRoadmapTitle = allRoadmaps.find(\n (roadmap) => roadmap.id === selectedRoadmap\n )?.title;\n\n return (\n
    \n
    \n \n {isLoading && (\n <>\n
    \n \n

    Loading...

    \n
    \n \n )}\n {!isLoading && !error && selectedRoadmap && (\n
    \n \n

    \n {selectedRoadmapTitle} Added\n

    \n

    \n onMakeChanges(selectedRoadmap)}\n className=\"underline underline-offset-2 hover:text-gray-900\"\n >\n Click here\n {' '}\n to make changes to the roadmap.\n

    \n\n
    \n \n Done\n \n {\n setSelectedRoadmap('');\n setError('');\n setIsLoading(false);\n }}\n type=\"button\"\n className=\"grow cursor-pointer rounded-lg bg-black py-2 text-center text-white\"\n >\n + Add More\n \n
    \n
    \n )}\n {!isLoading && error && (\n <>\n

    Error

    \n

    {error}

    \n\n
    \n \n Cancel\n \n
    \n \n )}\n {!isLoading && !error && !selectedRoadmap && (\n <>\n

    Add Roadmap

    \n

    \n Search and add a roadmap\n

    \n\n ({\n value: roadmap.id,\n label: roadmap.title,\n }))}\n onSelect={(option: OptionType) => {\n const roadmapId = option.value;\n addTeamResource(roadmapId).finally(() => {\n setIsLoading(false);\n setSelectedRoadmap(roadmapId);\n });\n }}\n inputClassName=\"mt-2 mb-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-hidden placeholder:text-gray-400 focus:border-gray-400\"\n placeholder={'Search for roadmap'}\n />\n\n
    \n \n Cancel\n \n
    \n \n )}\n
    \n
    \n \n );\n}\n" }, { "path": "src/components/AdvertiseForm.tsx", "content": "import React, { useState } from 'react';\nimport { CheckIcon } from './ReactIcons/CheckIcon.tsx';\nimport { pageProgressMessage } from '../stores/page.ts';\nimport { httpPost } from '../lib/http.ts';\n\ntype InputProps = {\n label: string;\n name: string;\n type: string;\n value: string;\n onChange: (\n e: React.ChangeEvent,\n ) => void;\n required?: boolean;\n rows?: number;\n};\n\nfunction Input(props: InputProps) {\n const { label, name, type, value, onChange, required, rows } = props;\n return (\n
    \n \n {type === 'textarea' ? (\n \n ) : (\n \n )}\n
    \n );\n}\n\nexport function AdvertiseForm() {\n const [status, setStatus] = useState<'submitting' | 'submitted'>();\n const [error, setError] = useState(null);\n\n const [formData, setFormData] = useState({\n firstName: '',\n lastName: '',\n title: '',\n company: '',\n email: '',\n phone: '',\n message: '',\n updates: false,\n });\n\n const handleInputChange = (\n e: React.ChangeEvent,\n ) => {\n const { name, value, type, checked } = e.target as any;\n setFormData({\n ...formData,\n [name]: type === 'checkbox' ? checked : value,\n });\n };\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n\n pageProgressMessage.set('Please wait');\n\n const { response, error } = await httpPost(\n `${import.meta.env.PUBLIC_API_URL}/v1-advertise`,\n formData,\n );\n if (!response || error) {\n pageProgressMessage.set('');\n setError(error?.message || 'Something went wrong. Please try again.');\n return;\n }\n\n setStatus('submitted');\n pageProgressMessage.set('');\n }\n\n if (status === 'submitted') {\n return (\n
    \n \n

    \n Thank you for your interest in advertising with roadmap.sh\n

    \n

    \n We will get back to you soon.\n

    \n
    \n );\n }\n\n return (\n <>\n

    \n Ready to learn more? Fill out the form below to get started!\n

    \n {error && (\n
    \n {error}\n
    \n )}\n
    \n
    \n \n \n
    \n\n
    \n \n\n \n
    \n\n
    \n \n\n \n
    \n\n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n\n
    \n \n Send\n \n
    \n \n \n );\n}\n" }, { "path": "src/components/Analytics/Analytics.astro", "content": "---\n---\n\n\n\n" }, { "path": "src/components/Analytics/Bluconic.astro", "content": "\n" }, { "path": "src/components/Analytics/Clarity.astro", "content": "\n" }, { "path": "src/components/Analytics/GoogleAd.astro", "content": "\n\n" }, { "path": "src/components/Analytics/GoogleAdSlot.astro", "content": "\n \n\n\n\n" }, { "path": "src/components/Analytics/Hubspot.astro", "content": "\n" }, { "path": "src/components/Analytics/LinkedIn.astro", "content": "---\n// LinkedIn Analytics component\n---\n\n\n\n" }, { "path": "src/components/Analytics/OneTrust.astro", "content": "\n\n\n\n" }, { "path": "src/components/Analytics/RedditPixel.astro", "content": "\n" }, { "path": "src/components/Analytics/analytics.ts", "content": "import { httpPost } from '../../lib/query-http';\nimport { getPageTrackingData } from '../../lib/browser';\n\ndeclare global {\n interface Window {\n gtag: any;\n fireEvent: (props: {\n action: string;\n category: string;\n label?: string;\n value?: string;\n callback?: () => void;\n }) => void;\n }\n}\n\n/**\n * Tracks the event on google analytics\n * @see https://developers.google.com/analytics/devguides/collection/gtagjs/events\n * @param props Event properties\n * @returns void\n */\nwindow.fireEvent = (props) => {\n const { action, category, label, value, callback } = props;\n\n const eventId = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;\n\n if (['course', 'ai_tutor'].includes(category)) {\n const trackingData = getPageTrackingData();\n const url = new URL(import.meta.env.PUBLIC_API_URL);\n url.pathname = '/api/_t';\n url.searchParams.set('action', action);\n url.searchParams.set('category', category);\n url.searchParams.set('label', label ?? '');\n url.searchParams.set('value', value ?? '');\n url.searchParams.set('event_id', eventId);\n\n httpPost(url.toString(), {\n page_location: trackingData.page_location,\n page_path: trackingData.page_path,\n page_referrer: trackingData.page_referrer,\n page_title: trackingData.page_title,\n user_agent: trackingData.user_agent,\n screen_resolution: trackingData.screen_resolution,\n viewport_size: trackingData.viewport_size,\n session_id: trackingData.session_id,\n gclid: trackingData.gclid,\n utm_source: trackingData.utm_source,\n utm_medium: trackingData.utm_medium,\n utm_campaign: trackingData.utm_campaign,\n utm_content: trackingData.utm_content,\n utm_term: trackingData.utm_term,\n }).catch(console.error);\n\n return;\n }\n\n if (!window.gtag) {\n console.warn('Missing GTAG - Analytics disabled');\n return;\n }\n\n if (import.meta.env.DEV) {\n console.log('Analytics event fired', props);\n callback?.();\n return;\n }\n\n const trackingData = getPageTrackingData();\n\n window.gtag('event', action, {\n event_category: category,\n event_label: label,\n value: value,\n event_id: eventId,\n source: 'client',\n page_location: trackingData.page_location,\n page_path: trackingData.page_path,\n page_referrer: trackingData.page_referrer,\n page_title: trackingData.page_title,\n session_id: trackingData.session_id,\n gclid: trackingData.gclid,\n utm_source: trackingData.utm_source,\n utm_medium: trackingData.utm_medium,\n utm_campaign: trackingData.utm_campaign,\n utm_content: trackingData.utm_content,\n utm_term: trackingData.utm_term,\n ...(callback ? { event_callback: callback } : {}),\n });\n};\n\nexport {};\n" }, { "path": "src/components/AppChecklist.tsx", "content": "import { PartyPopper } from 'lucide-react';\n\nexport function AppChecklist() {\n return (\n
    \n \n \n Welcome! Start here\n \n
    \n );\n}\n" }, { "path": "src/components/AstroIcon.astro", "content": "---\nimport { parse } from 'node-html-parser';\n\nexport interface Props {\n icon: string;\n class?: string;\n}\n\nasync function getSVG(name: string) {\n const filepath = `/src/icons/${name}.svg`;\n\n const files = import.meta.glob('/src/icons/**/*.svg', {\n query: '?raw',\n eager: true,\n });\n\n if (!(filepath in files)) {\n throw new Error(`${filepath} not found`);\n }\n\n const root = parse((files[filepath] as any).default as string);\n\n const svg = root.querySelector('svg');\n\n return {\n attributes: svg?.attributes,\n innerHTML: svg?.innerHTML,\n };\n}\n\nconst { icon, ...attributes } = Astro.props as Props;\nconst { attributes: baseAttributes, innerHTML } = await getSVG(icon);\n\nconst svgAttributes = { ...baseAttributes, ...attributes };\n---\n\n\n" }, { "path": "src/components/AuthenticationFlow/AuthenticationForm.tsx", "content": "import { useState } from 'react';\nimport { GitHubButton } from './GitHubButton';\nimport { GoogleButton } from './GoogleButton';\nimport { LinkedInButton } from './LinkedInButton';\nimport { EmailLoginForm } from './EmailLoginForm';\nimport { EmailSignupForm } from './EmailSignupForm';\n\ntype AuthenticationFormProps = {\n type?: 'login' | 'signup';\n};\n\nexport function AuthenticationForm(props: AuthenticationFormProps) {\n const { type = 'login' } = props;\n\n const [isDisabled, setIsDisabled] = useState(false);\n\n return (\n <>\n
    \n \n \n \n
    \n\n
    \n
    \n OR\n
    \n
    \n\n {type === 'login' ? (\n \n ) : (\n \n )}\n \n );\n}\n" }, { "path": "src/components/AuthenticationFlow/CourseLoginPopup.tsx", "content": "import { useEffect, useState } from 'react';\nimport { Modal } from '../Modal';\nimport { GitHubButton } from './GitHubButton';\nimport { GoogleButton } from './GoogleButton';\nimport { LinkedInButton } from './LinkedInButton';\nimport { EmailLoginForm } from './EmailLoginForm';\nimport { EmailSignupForm } from './EmailSignupForm';\n\ntype CourseLoginPopupProps = {\n onClose: () => void;\n checkoutAfterLogin?: boolean;\n};\n\nexport const CHECKOUT_AFTER_LOGIN_KEY = 'checkoutAfterLogin';\nexport const SAMPLE_AFTER_LOGIN_KEY = 'sampleAfterLogin';\n\nexport function CourseLoginPopup(props: CourseLoginPopupProps) {\n const { onClose: parentOnClose, checkoutAfterLogin = true } = props;\n\n const [isDisabled, setIsDisabled] = useState(false);\n const [isUsingEmail, setIsUsingEmail] = useState(false);\n\n const [emailNature, setEmailNature] = useState<'login' | 'signup' | null>(\n null,\n );\n\n function onClose() {\n // if user didn't login and closed the popup, we remove the checkoutAfterLogin flag\n // so that login from other buttons on course page will trigger purchase\n localStorage.removeItem(CHECKOUT_AFTER_LOGIN_KEY);\n localStorage.removeItem(SAMPLE_AFTER_LOGIN_KEY);\n parentOnClose();\n }\n\n useEffect(() => {\n localStorage.setItem(\n CHECKOUT_AFTER_LOGIN_KEY,\n checkoutAfterLogin ? '1' : '0',\n );\n }, [checkoutAfterLogin]);\n\n if (emailNature) {\n const emailHeader = (\n
    \n

    \n {emailNature === 'login'\n ? 'Login to your account'\n : 'Create an account'}\n

    \n

    \n Fill in the details below to continue\n

    \n
    \n );\n\n return (\n \n {emailHeader}\n {emailNature === 'login' && (\n \n )}\n {emailNature === 'signup' && (\n \n )}\n\n setEmailNature(null)}\n >\n Back to Options\n \n \n );\n }\n\n return (\n \n
    \n

    \n Create or login to Enroll\n

    \n

    \n Login or sign up for an account to start learning\n

    \n
    \n\n
    \n \n \n \n
    \n\n
    \n
    \n OR\n
    \n
    \n\n
    \n {!isUsingEmail && (\n setIsUsingEmail(true)}\n >\n Use your email address\n \n )}\n {isUsingEmail && (\n <>\n setEmailNature('login')}\n >\n Already have an account\n \n setEmailNature('signup')}\n >\n Create an account\n \n \n )}\n
    \n \n );\n}\n" }, { "path": "src/components/AuthenticationFlow/Divider.astro", "content": "
    \n
    \n OR\n
    \n
    \n" }, { "path": "src/components/AuthenticationFlow/EmailLoginForm.tsx", "content": "import type { FormEvent } from 'react';\nimport { useId, useState } from 'react';\nimport { httpPost } from '../../lib/http';\nimport {\n COURSE_PURCHASE_PARAM,\n FIRST_LOGIN_PARAM,\n setAuthToken,\n} from '../../lib/jwt';\n\ntype EmailLoginFormProps = {\n isDisabled?: boolean;\n setIsDisabled?: (isDisabled: boolean) => void;\n};\n\nexport function EmailLoginForm(props: EmailLoginFormProps) {\n const { isDisabled, setIsDisabled } = props;\n\n const [email, setEmail] = useState('');\n const [password, setPassword] = useState('');\n const [error, setError] = useState('');\n\n const [isLoading, setIsLoading] = useState(false);\n\n const handleFormSubmit = async (e: FormEvent) => {\n e.preventDefault();\n setIsLoading(true);\n setIsDisabled?.(true);\n setError('');\n\n const { response, error } = await httpPost<{\n token: string;\n isNewUser: boolean;\n }>(`${import.meta.env.PUBLIC_API_URL}/v1-login`, {\n email,\n password,\n });\n\n // Log the user in and reload the page\n if (response?.token) {\n setAuthToken(response.token);\n\n const currentLocation = window.location.href;\n const url = new URL(currentLocation, window.location.origin);\n\n url.searchParams.set(FIRST_LOGIN_PARAM, response?.isNewUser ? '1' : '0');\n url.searchParams.set(COURSE_PURCHASE_PARAM, '1');\n\n window.location.href = url.toString();\n return;\n }\n\n // @todo use proper types\n if ((error as any).type === 'user_not_verified') {\n window.location.href = `/verification-pending?email=${encodeURIComponent(\n email,\n )}`;\n return;\n }\n\n setIsLoading(false);\n setIsDisabled?.(false);\n setError(error?.message || 'Something went wrong. Please try again later.');\n };\n\n const emailFieldId = `form:${useId()}`;\n const passwordFieldId = `form:${useId()}`;\n\n return (\n \n \n setEmail(String((e.target as any).value))}\n />\n \n setPassword(String((e.target as any).value))}\n />\n\n

    \n \n Reset your password?\n \n

    \n\n {error && (\n

    {error}

    \n )}\n\n \n {isLoading ? 'Please wait...' : 'Continue'}\n \n \n );\n}\n" }, { "path": "src/components/AuthenticationFlow/EmailSignupForm.tsx", "content": "import { type FormEvent, useEffect, useState } from 'react';\nimport { httpPost } from '../../lib/http';\nimport {\n deleteUrlParam,\n getLastPath,\n getUrlParams,\n urlToId,\n} from '../../lib/browser';\nimport { isLoggedIn, setAIReferralCode } from '../../lib/jwt';\n\ntype EmailSignupFormProps = {\n isDisabled?: boolean;\n setIsDisabled?: (isDisabled: boolean) => void;\n};\n\nexport function EmailSignupForm(props: EmailSignupFormProps) {\n const { isDisabled, setIsDisabled } = props;\n\n const { rc: referralCode } = getUrlParams() as {\n rc?: string;\n };\n const [email, setEmail] = useState('');\n const [password, setPassword] = useState('');\n const [name, setName] = useState('');\n\n const [error, setError] = useState('');\n const [isLoading, setIsLoading] = useState(false);\n\n const onSubmit = async (e: FormEvent) => {\n e.preventDefault();\n\n setIsLoading(true);\n setIsDisabled?.(true);\n setError('');\n\n const { response, error } = await httpPost<{ status: 'ok' }>(\n `${import.meta.env.PUBLIC_API_URL}/v1-register`,\n {\n email,\n password,\n name,\n src: urlToId(getLastPath() || window.location.pathname),\n },\n );\n\n if (error || response?.status !== 'ok') {\n setIsLoading(false);\n setIsDisabled?.(false);\n setError(\n error?.message || 'Something went wrong. Please try again later.',\n );\n\n return;\n }\n\n window.location.href = `/verification-pending?email=${encodeURIComponent(\n email,\n )}`;\n };\n\n useEffect(() => {\n if (!referralCode || isLoggedIn()) {\n deleteUrlParam('rc');\n return;\n }\n\n setAIReferralCode(referralCode);\n deleteUrlParam('rc');\n }, []);\n\n return (\n
    \n \n setName(String((e.target as any).value))}\n />\n \n setEmail(String((e.target as any).value))}\n />\n \n setPassword(String((e.target as any).value))}\n />\n\n {error && (\n

    {error}.

    \n )}\n\n \n {isLoading ? 'Please wait...' : 'Continue to Verify Email'}\n \n \n );\n}\n" }, { "path": "src/components/AuthenticationFlow/ForgotPasswordForm.tsx", "content": "import { type FormEvent, useState } from 'react';\nimport { httpPost } from '../../lib/http';\n\nexport function ForgotPasswordForm() {\n const [email, setEmail] = useState('');\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState('');\n const [success, setSuccess] = useState('');\n\n const handleSubmit = async (e: FormEvent) => {\n e.preventDefault();\n setIsLoading(true);\n setError('');\n\n const { response, error } = await httpPost(\n `${import.meta.env.PUBLIC_API_URL}/v1-forgot-password`,\n {\n email,\n }\n );\n\n setIsLoading(false);\n if (error) {\n setError(error.message);\n } else {\n setEmail('');\n setSuccess('Check your email for a link to reset your password.');\n }\n };\n\n return (\n
    \n setEmail((e.target as HTMLInputElement).value)}\n />\n\n {error && (\n

    \n {error}\n

    \n )}\n\n {success && (\n

    \n {success}\n

    \n )}\n\n \n {isLoading ? 'Please wait...' : 'Continue'}\n \n \n );\n}\n" }, { "path": "src/components/AuthenticationFlow/GitHubButton.tsx", "content": "import { useEffect, useState } from 'react';\nimport { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';\nimport {\n FIRST_LOGIN_PARAM,\n COURSE_PURCHASE_PARAM,\n setAuthToken,\n} from '../../lib/jwt';\nimport { cn } from '../../lib/classname.ts';\nimport { httpGet } from '../../lib/http';\nimport { Spinner } from '../ReactIcons/Spinner.tsx';\nimport { CHECKOUT_AFTER_LOGIN_KEY } from './CourseLoginPopup.tsx';\nimport { getLastPath, triggerUtmRegistration, urlToId } from '../../lib/browser.ts';\n\ntype GitHubButtonProps = {\n isDisabled?: boolean;\n setIsDisabled?: (isDisabled: boolean) => void;\n className?: string;\n};\n\nconst GITHUB_REDIRECT_AT = 'githubRedirectAt';\nconst GITHUB_LAST_PAGE = 'githubLastPage';\n\nexport function GitHubButton(props: GitHubButtonProps) {\n const { isDisabled, setIsDisabled, className } = props;\n\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState('');\n\n useEffect(() => {\n const urlParams = new URLSearchParams(window.location.search);\n const code = urlParams.get('code');\n const state = urlParams.get('state');\n const provider = urlParams.get('provider');\n\n if (!code || !state || provider !== 'github') {\n return;\n }\n\n setIsLoading(true);\n setIsDisabled?.(true);\n const lastPageBeforeGithub = localStorage.getItem(GITHUB_LAST_PAGE);\n\n httpGet<{ token: string; isNewUser: boolean }>(\n `${import.meta.env.PUBLIC_API_URL}/v1-github-callback${\n window.location.search\n }&src=${urlToId(lastPageBeforeGithub || getLastPath() || window.location.pathname)}`,\n )\n .then(({ response, error }) => {\n if (!response?.token) {\n const errMessage = error?.message || 'Something went wrong.';\n setError(errMessage);\n setIsLoading(false);\n setIsDisabled?.(false);\n\n return;\n }\n\n triggerUtmRegistration();\n\n let redirectUrl = new URL('/', window.location.origin);\n const gitHubRedirectAt = localStorage.getItem(GITHUB_REDIRECT_AT);\n\n // If the social redirect is there and less than 30 seconds old\n // redirect to the page that user was on before they clicked the github login button\n if (gitHubRedirectAt && lastPageBeforeGithub) {\n const socialRedirectAtTime = parseInt(gitHubRedirectAt, 10);\n const now = Date.now();\n const timeSinceRedirect = now - socialRedirectAtTime;\n\n if (timeSinceRedirect < 30 * 1000) {\n redirectUrl = new URL(lastPageBeforeGithub, window.location.origin);\n }\n }\n\n const authRedirectUrl = localStorage.getItem('authRedirect');\n if (authRedirectUrl) {\n localStorage.removeItem('authRedirect');\n redirectUrl = new URL(authRedirectUrl, window.location.origin);\n }\n\n localStorage.removeItem(GITHUB_REDIRECT_AT);\n localStorage.removeItem(GITHUB_LAST_PAGE);\n setAuthToken(response.token);\n\n redirectUrl.searchParams.set(\n FIRST_LOGIN_PARAM,\n response?.isNewUser ? '1' : '0',\n );\n\n const shouldTriggerPurchase =\n localStorage.getItem(CHECKOUT_AFTER_LOGIN_KEY) !== '0';\n\n if (\n redirectUrl.pathname.includes('/courses/sql') &&\n shouldTriggerPurchase\n ) {\n redirectUrl.searchParams.set(COURSE_PURCHASE_PARAM, '1');\n localStorage.removeItem(CHECKOUT_AFTER_LOGIN_KEY);\n }\n\n window.location.href = redirectUrl.toString();\n })\n .catch((err) => {\n setError('Something went wrong. Please try again later.');\n setIsLoading(false);\n setIsDisabled?.(false);\n });\n }, []);\n\n const handleClick = async () => {\n setIsLoading(true);\n setIsDisabled?.(true);\n\n const { response, error } = await httpGet<{ loginUrl: string }>(\n `${import.meta.env.PUBLIC_API_URL}/v1-github-login`,\n );\n\n if (error || !response?.loginUrl) {\n setError(\n error?.message || 'Something went wrong. Please try again later.',\n );\n\n setIsLoading(false);\n setIsDisabled?.(false);\n return;\n }\n\n // For non authentication pages, we want to redirect back to the page\n // the user was on before they clicked the social login button\n if (!['/login', '/signup'].includes(window.location.pathname)) {\n const pagePath = [\n '/respond-invite',\n '/befriend',\n '/r',\n '/ai-roadmaps',\n ].includes(window.location.pathname)\n ? window.location.pathname + window.location.search\n : window.location.pathname;\n\n localStorage.setItem(GITHUB_REDIRECT_AT, Date.now().toString());\n localStorage.setItem(GITHUB_LAST_PAGE, pagePath);\n }\n\n window.location.href = response.loginUrl;\n };\n\n return (\n <>\n \n {isLoading ? (\n \n ) : (\n \n )}\n Continue with GitHub\n \n {error && (\n

    {error}

    \n )}\n \n );\n}\n" }, { "path": "src/components/AuthenticationFlow/GoogleButton.tsx", "content": "import { useEffect, useState } from 'react';\nimport { FIRST_LOGIN_PARAM, setAuthToken } from '../../lib/jwt';\nimport { httpGet } from '../../lib/http';\nimport { COURSE_PURCHASE_PARAM } from '../../lib/jwt';\nimport { GoogleIcon } from '../ReactIcons/GoogleIcon.tsx';\nimport { Spinner } from '../ReactIcons/Spinner.tsx';\nimport { CHECKOUT_AFTER_LOGIN_KEY } from './CourseLoginPopup.tsx';\nimport { triggerUtmRegistration, urlToId, getLastPath } from '../../lib/browser.ts';\nimport { cn } from '../../lib/classname.ts';\n\ntype GoogleButtonProps = {\n isDisabled?: boolean;\n setIsDisabled?: (isDisabled: boolean) => void;\n className?: string;\n};\n\nconst GOOGLE_REDIRECT_AT = 'googleRedirectAt';\nconst GOOGLE_LAST_PAGE = 'googleLastPage';\n\nexport function GoogleButton(props: GoogleButtonProps) {\n const { isDisabled, setIsDisabled, className } = props;\n\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState('');\n\n useEffect(() => {\n const urlParams = new URLSearchParams(window.location.search);\n const code = urlParams.get('code');\n const state = urlParams.get('state');\n const provider = urlParams.get('provider');\n\n if (!code || !state || provider !== 'google') {\n return;\n }\n\n setIsLoading(true);\n setIsDisabled?.(true);\n const lastPageBeforeGoogle = localStorage.getItem(GOOGLE_LAST_PAGE);\n\n httpGet<{ token: string; isNewUser: boolean }>(\n `${import.meta.env.PUBLIC_API_URL}/v1-google-callback${\n window.location.search\n }&src=${urlToId(lastPageBeforeGoogle || getLastPath() || window.location.pathname)}`,\n )\n .then(({ response, error }) => {\n if (!response?.token) {\n setError(error?.message || 'Something went wrong.');\n setIsLoading(false);\n setIsDisabled?.(false);\n\n return;\n }\n\n triggerUtmRegistration();\n\n let redirectUrl = new URL('/', window.location.origin);\n const googleRedirectAt = localStorage.getItem(GOOGLE_REDIRECT_AT);\n\n // If the social redirect is there and less than 30 seconds old\n // redirect to the page that user was on before they clicked the github login button\n if (googleRedirectAt && lastPageBeforeGoogle) {\n const socialRedirectAtTime = parseInt(googleRedirectAt, 10);\n const now = Date.now();\n const timeSinceRedirect = now - socialRedirectAtTime;\n\n if (timeSinceRedirect < 30 * 1000) {\n redirectUrl = new URL(lastPageBeforeGoogle, window.location.origin);\n }\n }\n\n const authRedirectUrl = localStorage.getItem('authRedirect');\n if (authRedirectUrl) {\n localStorage.removeItem('authRedirect');\n redirectUrl = new URL(authRedirectUrl, window.location.origin);\n }\n\n redirectUrl.searchParams.set(\n FIRST_LOGIN_PARAM,\n response?.isNewUser ? '1' : '0',\n );\n\n const shouldTriggerPurchase =\n localStorage.getItem(CHECKOUT_AFTER_LOGIN_KEY) !== '0';\n if (\n redirectUrl.pathname.includes('/courses/sql') &&\n shouldTriggerPurchase\n ) {\n redirectUrl.searchParams.set(COURSE_PURCHASE_PARAM, '1');\n\n localStorage.removeItem(CHECKOUT_AFTER_LOGIN_KEY);\n }\n\n localStorage.removeItem(GOOGLE_REDIRECT_AT);\n localStorage.removeItem(GOOGLE_LAST_PAGE);\n setAuthToken(response.token);\n\n window.location.href = redirectUrl.toString();\n })\n .catch((err) => {\n setError('Something went wrong. Please try again later.');\n setIsLoading(false);\n setIsDisabled?.(false);\n });\n }, []);\n\n const handleClick = () => {\n setIsLoading(true);\n setIsDisabled?.(true);\n httpGet<{ loginUrl: string }>(\n `${import.meta.env.PUBLIC_API_URL}/v1-google-login`,\n )\n .then(({ response, error }) => {\n if (!response?.loginUrl) {\n setError(error?.message || 'Something went wrong.');\n setIsLoading(false);\n setIsDisabled?.(false);\n\n return;\n }\n\n // For non authentication pages, we want to redirect back to the page\n // the user was on before they clicked the social login button\n if (!['/login', '/signup'].includes(window.location.pathname)) {\n const pagePath = [\n '/respond-invite',\n '/befriend',\n '/r',\n '/ai-roadmaps',\n ].includes(window.location.pathname)\n ? window.location.pathname + window.location.search\n : window.location.pathname;\n\n localStorage.setItem(GOOGLE_REDIRECT_AT, Date.now().toString());\n localStorage.setItem(GOOGLE_LAST_PAGE, pagePath);\n }\n\n window.location.href = response.loginUrl;\n })\n .catch((err) => {\n setError('Something went wrong. Please try again later.');\n setIsLoading(false);\n setIsDisabled?.(false);\n });\n };\n\n return (\n <>\n \n {isLoading ? (\n \n ) : (\n \n )}\n Continue with Google\n \n {error && (\n

    {error}

    \n )}\n \n );\n}\n" }, { "path": "src/components/AuthenticationFlow/LinkedInButton.tsx", "content": "import { useEffect, useState } from 'react';\nimport {\n FIRST_LOGIN_PARAM,\n COURSE_PURCHASE_PARAM,\n setAuthToken,\n} from '../../lib/jwt';\nimport { cn } from '../../lib/classname.ts';\nimport { httpGet } from '../../lib/http';\nimport { LinkedInIcon } from '../ReactIcons/LinkedInIcon.tsx';\nimport { Spinner } from '../ReactIcons/Spinner.tsx';\nimport { CHECKOUT_AFTER_LOGIN_KEY } from './CourseLoginPopup.tsx';\nimport { getLastPath, triggerUtmRegistration, urlToId } from '../../lib/browser.ts';\n\ntype LinkedInButtonProps = {\n isDisabled?: boolean;\n setIsDisabled?: (isDisabled: boolean) => void;\n className?: string;\n};\n\nconst LINKEDIN_REDIRECT_AT = 'linkedInRedirectAt';\nconst LINKEDIN_LAST_PAGE = 'linkedInLastPage';\n\nexport function LinkedInButton(props: LinkedInButtonProps) {\n const { isDisabled, setIsDisabled, className } = props;\n\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState('');\n\n useEffect(() => {\n const urlParams = new URLSearchParams(window.location.search);\n const code = urlParams.get('code');\n const state = urlParams.get('state');\n const provider = urlParams.get('provider');\n\n if (!code || !state || provider !== 'linkedin') {\n return;\n }\n\n setIsLoading(true);\n setIsDisabled?.(true);\n const lastPageBeforeLinkedIn = localStorage.getItem(LINKEDIN_LAST_PAGE);\n\n httpGet<{ token: string; isNewUser: boolean }>(\n `${import.meta.env.PUBLIC_API_URL}/v1-linkedin-callback${\n window.location.search\n }&src=${urlToId(lastPageBeforeLinkedIn || getLastPath() || window.location.pathname)}`,\n )\n .then(({ response, error }) => {\n if (!response?.token) {\n setError(error?.message || 'Something went wrong.');\n setIsLoading(false);\n setIsDisabled?.(false);\n\n return;\n }\n\n triggerUtmRegistration();\n\n let redirectUrl = new URL('/', window.location.origin);\n const linkedInRedirectAt = localStorage.getItem(LINKEDIN_REDIRECT_AT);\n\n // If the social redirect is there and less than 30 seconds old\n // redirect to the page that user was on before they clicked the github login button\n if (linkedInRedirectAt && lastPageBeforeLinkedIn) {\n const socialRedirectAtTime = parseInt(linkedInRedirectAt, 10);\n const now = Date.now();\n const timeSinceRedirect = now - socialRedirectAtTime;\n\n if (timeSinceRedirect < 30 * 1000) {\n redirectUrl = new URL(\n lastPageBeforeLinkedIn,\n window.location.origin,\n );\n }\n }\n\n const authRedirectUrl = localStorage.getItem('authRedirect');\n if (authRedirectUrl) {\n localStorage.removeItem('authRedirect');\n redirectUrl = new URL(authRedirectUrl, window.location.origin);\n }\n\n redirectUrl.searchParams.set(\n FIRST_LOGIN_PARAM,\n response?.isNewUser ? '1' : '0',\n );\n\n const shouldTriggerPurchase =\n localStorage.getItem(CHECKOUT_AFTER_LOGIN_KEY) !== '0';\n if (\n redirectUrl.pathname.includes('/courses/sql') &&\n shouldTriggerPurchase\n ) {\n redirectUrl.searchParams.set(COURSE_PURCHASE_PARAM, '1');\n localStorage.removeItem(CHECKOUT_AFTER_LOGIN_KEY);\n }\n\n localStorage.removeItem(LINKEDIN_REDIRECT_AT);\n localStorage.removeItem(LINKEDIN_LAST_PAGE);\n setAuthToken(response.token);\n\n window.location.href = redirectUrl.toString();\n })\n .catch((err) => {\n setError('Something went wrong. Please try again later.');\n setIsLoading(false);\n setIsDisabled?.(false);\n });\n }, []);\n\n const handleClick = () => {\n setIsLoading(true);\n setIsDisabled?.(true);\n httpGet<{ loginUrl: string }>(\n `${import.meta.env.PUBLIC_API_URL}/v1-linkedin-login`,\n )\n .then(({ response, error }) => {\n if (!response?.loginUrl) {\n setError(error?.message || 'Something went wrong.');\n setIsLoading(false);\n setIsDisabled?.(false);\n\n return;\n }\n\n // For non authentication pages, we want to redirect back to the page\n // the user was on before they clicked the social login button\n if (!['/login', '/signup'].includes(window.location.pathname)) {\n const pagePath = [\n '/respond-invite',\n '/befriend',\n '/r',\n '/ai-roadmaps',\n ].includes(window.location.pathname)\n ? window.location.pathname + window.location.search\n : window.location.pathname;\n\n localStorage.setItem(LINKEDIN_REDIRECT_AT, Date.now().toString());\n localStorage.setItem(LINKEDIN_LAST_PAGE, pagePath);\n }\n\n window.location.href = response.loginUrl;\n })\n .catch((err) => {\n setError('Something went wrong. Please try again later.');\n setIsLoading(false);\n setIsDisabled?.(false);\n });\n };\n\n return (\n <>\n \n {isLoading ? (\n \n ) : (\n \n )}\n Continue with LinkedIn\n \n {error && (\n

    {error}

    \n )}\n \n );\n}\n" }, { "path": "src/components/AuthenticationFlow/LoginPopup.astro", "content": "---\nimport Popup from '../Popup/Popup.astro';\nimport { AccountTerms } from '../AccountTerms';\nimport { AuthenticationForm } from './AuthenticationForm';\n---\n\n\n
    \n

    \n Login or Signup\n

    \n

    \n You must be logged in to perform this action.\n

    \n
    \n \n \n Don't have an account?{' '}\n \n Sign up\n \n
    \n\n \n\n" }, { "path": "src/components/AuthenticationFlow/ResetPasswordForm.tsx", "content": "import { type FormEvent, useEffect, useState } from 'react';\nimport { httpPost } from '../../lib/http';\nimport Cookies from 'js-cookie';\nimport { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';\n\nexport function ResetPasswordForm() {\n const [code, setCode] = useState('');\n const [password, setPassword] = useState('');\n const [passwordConfirm, setPasswordConfirm] = useState('');\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState('');\n\n useEffect(() => {\n const urlParams = new URLSearchParams(window.location.search);\n const code = urlParams.get('code');\n\n if (!code) {\n window.location.href = '/login';\n } else {\n setCode(code);\n }\n }, []);\n\n const handleSubmit = async (e: FormEvent) => {\n e.preventDefault();\n setIsLoading(true);\n\n if (password !== passwordConfirm) {\n setIsLoading(false);\n setError('Passwords do not match.');\n return;\n }\n\n const { response, error } = await httpPost(\n `${import.meta.env.PUBLIC_API_URL}/v1-reset-forgotten-password`,\n {\n newPassword: password,\n confirmPassword: passwordConfirm,\n code,\n },\n );\n\n if (error?.message) {\n setIsLoading(false);\n setError(error.message);\n return;\n }\n\n if (!response?.token) {\n setIsLoading(false);\n setError('Something went wrong. Please try again later.');\n return;\n }\n\n const token = response.token;\n setAuthToken(response.token);\n window.location.href = '/';\n };\n\n return (\n
    \n setPassword((e.target as HTMLInputElement).value)}\n />\n\n \n setPasswordConfirm((e.target as HTMLInputElement).value)\n }\n />\n\n {error && (\n

    {error}

    \n )}\n\n \n {isLoading ? 'Please wait...' : 'Reset Password'}\n \n \n );\n}\n" }, { "path": "src/components/AuthenticationFlow/TriggerVerifyAccount.tsx", "content": "import { useEffect, useState } from 'react';\nimport Cookies from 'js-cookie';\nimport { httpPost } from '../../lib/http';\nimport {\n FIRST_LOGIN_PARAM,\n TOKEN_COOKIE_NAME,\n setAuthToken,\n} from '../../lib/jwt';\nimport { Spinner } from '../ReactIcons/Spinner';\nimport { ErrorIcon2 } from '../ReactIcons/ErrorIcon2';\nimport { triggerUtmRegistration } from '../../lib/browser.ts';\n\nexport function TriggerVerifyAccount() {\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState('');\n\n const triggerVerify = (code: string) => {\n setIsLoading(true);\n\n httpPost<{ token: string; isNewUser: boolean }>(\n `${import.meta.env.PUBLIC_API_URL}/v1-verify-account`,\n {\n code,\n },\n )\n .then(({ response, error }) => {\n if (!response?.token) {\n setError(error?.message || 'Something went wrong. Please try again.');\n setIsLoading(false);\n\n return;\n }\n\n triggerUtmRegistration();\n\n setAuthToken(response.token);\n\n const url = new URL('/', window.location.origin);\n url.searchParams.set(\n FIRST_LOGIN_PARAM,\n response?.isNewUser ? '1' : '0',\n );\n window.location.href = url.toString();\n })\n .catch((err) => {\n setIsLoading(false);\n setError('Something went wrong. Please try again.');\n });\n };\n\n useEffect(() => {\n const urlParams = new URLSearchParams(window.location.search);\n const code = urlParams.get('code')!;\n\n if (!code) {\n setIsLoading(false);\n setError('Something went wrong. Please try again later.');\n return;\n }\n\n triggerVerify(code);\n }, []);\n\n return (\n
    \n
    \n {isLoading && }\n {error && }\n

    \n Verifying your account\n

    \n
    \n {isLoading &&

    Please wait while we verify your account..

    }\n {error &&

    {error}

    }\n
    \n
    \n
    \n );\n}\n" }, { "path": "src/components/AuthenticationFlow/TriggerVerifyEmail.tsx", "content": "import { useEffect, useState } from 'react';\nimport { httpPatch } from '../../lib/http';\nimport { setAuthToken } from '../../lib/jwt';\nimport { Spinner } from '../ReactIcons/Spinner';\nimport { ErrorIcon2 } from '../ReactIcons/ErrorIcon2';\nimport { getUrlParams } from '../../lib/browser';\nimport { CheckIcon } from '../ReactIcons/CheckIcon';\n\nexport function TriggerVerifyEmail() {\n const { code } = getUrlParams() as { code: string };\n\n // const [isLoading, setIsLoading] = useState(true);\n const [status, setStatus] = useState<'loading' | 'error' | 'success'>(\n 'loading',\n );\n const [error, setError] = useState('');\n\n const triggerVerify = (code: string) => {\n setStatus('loading');\n\n httpPatch<{ token: string }>(\n `${import.meta.env.PUBLIC_API_URL}/v1-verify-new-email/${code}`,\n {},\n )\n .then(({ response, error }) => {\n if (!response?.token) {\n setError(error?.message || 'Something went wrong. Please try again.');\n setStatus('error');\n\n return;\n }\n\n setAuthToken(response.token);\n setStatus('success');\n })\n .catch((err) => {\n setStatus('error');\n setError('Something went wrong. Please try again.');\n });\n };\n\n useEffect(() => {\n if (!code) {\n setStatus('error');\n setError('Something went wrong. Please try again later.');\n return;\n }\n\n triggerVerify(code);\n }, [code]);\n\n const isLoading = status === 'loading';\n if (status === 'success') {\n return (\n
    \n \n

    \n Email Update Successful\n

    \n

    \n Your email has been changed successfully. Happy learning!\n

    \n
    \n );\n }\n\n return (\n
    \n
    \n {isLoading && }\n {error && }\n

    \n Verifying your new Email\n

    \n
    \n {isLoading &&

    Please wait while we verify your new Email.

    }\n {error &&

    {error}

    }\n
    \n
    \n
    \n );\n}\n" }, { "path": "src/components/AuthenticationFlow/VerificationEmailMessage.tsx", "content": "import { useEffect, useState } from 'react';\nimport { httpPost } from '../../lib/http';\nimport { VerifyLetterIcon } from '../ReactIcons/VerifyLetterIcon';\n\nexport function VerificationEmailMessage() {\n const [email, setEmail] = useState('..');\n const [error, setError] = useState('');\n const [isLoading, setIsLoading] = useState(false);\n const [isEmailResent, setIsEmailResent] = useState(false);\n\n useEffect(() => {\n const urlParams = new URLSearchParams(window.location.search);\n\n setEmail(urlParams.get('email')!);\n }, []);\n\n const resendVerificationEmail = () => {\n httpPost(`${import.meta.env.PUBLIC_API_URL}/v1-send-verification-email`, {\n email,\n })\n .then(({ response, error }) => {\n if (error) {\n setIsEmailResent(false);\n setError(error?.message || 'Something went wrong.');\n setIsLoading(false);\n return;\n }\n\n setIsEmailResent(true);\n })\n .catch(() => {\n setIsEmailResent(false);\n setIsLoading(false);\n setError('Something went wrong. Please try again later.');\n });\n };\n\n return (\n
    \n \n

    \n Verify your email address\n

    \n
    \n

    \n We have sent you an email at{' '}\n {email}. Please click the link to\n verify your account. This link will expire shortly, so please verify\n soon!\n

    \n\n
    \n\n {!isEmailResent && (\n <>\n {isLoading &&

    Sending the email ..

    }\n {!isLoading && !error && (\n

    \n Please make sure to check your spam folder. If you still don't\n have the email click to{' '}\n \n resend verification email.\n \n

    \n )}\n\n {error &&

    {error}

    }\n \n )}\n\n {isEmailResent && (\n

    Verification email has been sent!

    \n )}\n
    \n
    \n );\n}\n" }, { "path": "src/components/Authenticator/Authenticator.astro", "content": "---\n---\n\n\n" }, { "path": "src/components/Authenticator/authenticator.ts", "content": "import Cookies from 'js-cookie';\nimport { TOKEN_COOKIE_NAME } from '../../lib/jwt';\nimport { REDIRECT_PAGE_AFTER_AUTH } from '../../lib/auth';\n\nfunction easeInElement(el: Element) {\n el.classList.add('opacity-0', 'transition-opacity', 'duration-300');\n el.classList.remove('hidden', 'hidden!');\n setTimeout(() => {\n el.classList.remove('opacity-0');\n });\n}\n\nfunction showHideAuthElements(hideOrShow: 'hide' | 'show' = 'hide') {\n document.querySelectorAll('[data-auth-required]').forEach((el) => {\n if (hideOrShow === 'hide') {\n el.classList.add('hidden');\n } else {\n easeInElement(el);\n }\n });\n}\n\nfunction showHideGuestElements(hideOrShow: 'hide' | 'show' = 'hide') {\n document.querySelectorAll('[data-guest-required]').forEach((el) => {\n if (hideOrShow === 'hide') {\n el.classList.add('hidden');\n } else {\n easeInElement(el);\n }\n });\n}\n\n// Prepares the UI for the user who is logged in\nfunction handleGuest() {\n const authenticatedRoutes = [\n '/account/update-profile',\n '/account/notification',\n '/account/update-password',\n '/account/settings',\n '/account/roadmaps',\n '/account/road-card',\n '/account/friends',\n '/account',\n '/team',\n '/team/progress',\n '/team/activity',\n '/team/roadmaps',\n '/team/new',\n '/team/members',\n '/team/member',\n '/team/settings',\n '/dashboard',\n ];\n\n showHideAuthElements('hide');\n showHideGuestElements('show');\n\n // If the user is on an authenticated route, redirect them to the home page\n if (authenticatedRoutes.includes(window.location.pathname)) {\n localStorage.setItem(REDIRECT_PAGE_AFTER_AUTH, window.location.pathname);\n window.location.href = '/login';\n }\n}\n\n// Prepares the UI for the user who is logged out\nfunction handleAuthenticated() {\n const guestRoutes = [\n '/login',\n '/signup',\n '/verify-account',\n '/verification-pending',\n '/reset-password',\n '/forgot-password',\n ];\n\n showHideGuestElements('hide');\n showHideAuthElements('show');\n\n // If the user is on a guest route, redirect them to the home page\n if (guestRoutes.includes(window.location.pathname)) {\n const authRedirect = window.localStorage.getItem('authRedirect') || '/';\n window.localStorage.removeItem('authRedirect');\n\n window.location.href = authRedirect;\n }\n}\n\nexport function handleAuthRequired() {\n const token = Cookies.get(TOKEN_COOKIE_NAME);\n if (token) {\n const pageAfterAuth = localStorage.getItem(REDIRECT_PAGE_AFTER_AUTH);\n if (pageAfterAuth) {\n localStorage.removeItem(REDIRECT_PAGE_AFTER_AUTH);\n window.location.href = pageAfterAuth;\n\n return;\n }\n\n handleAuthenticated();\n } else {\n handleGuest();\n }\n}\n\nwindow.setTimeout(() => {\n handleAuthRequired();\n}, 0);\n" }, { "path": "src/components/Badge.tsx", "content": "type BadgeProps = {\n variant: 'blue' | 'green' | 'red' | 'yellow' | 'grey' | 'white';\n text: string;\n};\n\nexport function Badge(type: BadgeProps) {\n const { variant, text } = type;\n\n const colors = {\n blue: 'bg-blue-100 text-blue-700 border-blue-200',\n green: 'bg-green-100 text-green-700 border-green-200',\n red: 'bg-red-100 text-red-700 border-red-200',\n yellow: 'bg-yellow-100 text-yellow-700 border-yellow-200',\n grey: 'bg-gray-100 text-gray-700 border-gray-200',\n white: 'bg-white text-black border-gray-200',\n teal: 'bg-teal-100 text-teal-700 border-teal-200',\n black: 'bg-gray-500 text-white border-gray-500',\n };\n\n return (\n \n {text}\n \n );\n}\n" }, { "path": "src/components/Befriend.tsx", "content": "import { useEffect, useState } from 'react';\nimport { httpDelete, httpGet, httpPost } from '../lib/http';\nimport { pageProgressMessage } from '../stores/page';\nimport { isLoggedIn } from '../lib/jwt';\nimport { showLoginPopup } from '../lib/popup';\nimport { getUrlParams } from '../lib/browser';\nimport { CheckIcon } from './ReactIcons/CheckIcon';\nimport { DeleteUserIcon } from './ReactIcons/DeleteUserIcon';\nimport { useToast } from '../hooks/use-toast';\nimport { useAuth } from '../hooks/use-auth';\nimport { AddedUserIcon } from './ReactIcons/AddedUserIcon';\nimport { StopIcon } from './ReactIcons/StopIcon';\nimport { ErrorIcon } from './ReactIcons/ErrorIcon';\n\nexport type FriendshipStatus =\n | 'none'\n | 'sent'\n | 'received'\n | 'accepted'\n | 'rejected'\n | 'got_rejected';\n\ntype UserResponse = {\n id: string;\n links: Record;\n avatar: string;\n name: string;\n status: FriendshipStatus;\n};\n\nexport function Befriend() {\n const { u: inviteId } = getUrlParams();\n\n const toast = useToast();\n const currentUser = useAuth();\n\n const [isConfirming, setIsConfirming] = useState(false);\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState('');\n const [user, setUser] = useState();\n const isAuthenticated = isLoggedIn();\n\n async function loadUser(userId: string) {\n const { response, error } = await httpGet(\n `${import.meta.env.PUBLIC_API_URL}/v1-get-friend/${userId}`\n );\n if (error || !response) {\n setError(error?.message || 'Something went wrong');\n return;\n }\n\n if (response.status === 'accepted') {\n window.location.href = '/account/friends?c=fa';\n return;\n }\n\n setUser(response);\n }\n\n useEffect(() => {\n if (inviteId) {\n loadUser(inviteId).finally(() => {\n pageProgressMessage.set('');\n setIsLoading(false);\n });\n } else {\n setIsLoading(false);\n setError('Missing invite ID in URL');\n pageProgressMessage.set('');\n }\n }, [inviteId]);\n\n async function addFriend(userId: string, successMessage: string) {\n pageProgressMessage.set('Please wait...');\n setError('');\n const { response, error } = await httpPost(\n `${import.meta.env.PUBLIC_API_URL}/v1-add-friend/${userId}`,\n {}\n );\n\n if (error || !response) {\n setError(error?.message || 'Something went wrong');\n return;\n }\n\n if (response.status === 'accepted') {\n window.location.href = '/account/friends?c=fa';\n return;\n }\n\n setUser(response);\n }\n\n async function deleteFriend(userId: string, successMessage: string) {\n pageProgressMessage.set('Please wait...');\n setError('');\n const { response, error } = await httpDelete(\n `${import.meta.env.PUBLIC_API_URL}/v1-delete-friend/${userId}`,\n {}\n );\n\n if (error || !response) {\n setError(error?.message || 'Something went wrong');\n return;\n }\n\n setUser(response);\n toast.success(successMessage);\n }\n\n if (isLoading) {\n return null;\n }\n\n if (!user) {\n return (\n
    \n \n\n

    Error

    \n

    \n {error || 'There was a problem, please try again.'}\n

    \n\n
    \n \n Back to home\n \n
    \n
    \n );\n }\n\n const userAvatar = user.avatar\n ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${user.avatar}`\n : '/img/default-avatar.png';\n\n const isMe = currentUser?.id === user.id;\n\n return (\n
    \n \n\n

    {user.name}

    \n

    \n After you add {user.name} as a friend, you will be able to view each\n other's skills and progress.\n

    \n\n
    \n
    \n {user.status === 'none' && (\n {\n if (!isAuthenticated) {\n return showLoginPopup();\n }\n\n addFriend(user.id, 'Friend request sent').finally(() => {\n pageProgressMessage.set('');\n });\n }}\n type=\"button\"\n className=\"w-full grow cursor-pointer rounded-lg bg-black px-3 py-2 text-center text-white disabled:cursor-not-allowed disabled:opacity-40\"\n >\n {isMe ? \"You can't add yourself\" : 'Add Friend'}\n \n )}\n\n {user.status === 'sent' && (\n <>\n \n \n Request Sent\n \n\n {!isConfirming && (\n {\n setIsConfirming(true);\n }}\n type=\"button\"\n className=\"flex w-full grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700\"\n >\n \n Withdraw Request\n \n )}\n\n {isConfirming && (\n \n Are you sure?{' '}\n {\n deleteFriend(user.id, 'Friend request withdrawn').finally(\n () => {\n pageProgressMessage.set('');\n }\n );\n }}\n >\n Yes\n {' '}\n {\n setIsConfirming(false);\n }}\n className=\"ml-2 text-red-600 underline\"\n >\n No\n \n \n )}\n \n )}\n\n {user.status === 'accepted' && (\n <>\n \n \n You are friends\n \n\n {!isConfirming && (\n {\n setIsConfirming(true);\n }}\n type=\"button\"\n className=\"flex w-full grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700\"\n >\n \n Remove Friend\n \n )}\n\n {isConfirming && (\n \n Are you sure?{' '}\n {\n deleteFriend(user.id, 'Friend removed').finally(() => {\n pageProgressMessage.set('');\n });\n }}\n >\n Yes\n {' '}\n {\n setIsConfirming(false);\n }}\n className=\"ml-2 text-red-600 underline\"\n >\n No\n \n \n )}\n \n )}\n\n {user.status === 'rejected' && (\n <>\n \n \n Request Rejected\n \n\n \n Changed your mind?{' '}\n {\n addFriend(user.id, 'Friend request accepted').finally(\n () => {\n pageProgressMessage.set('');\n }\n );\n }}\n >\n Click here to Accept\n \n \n \n )}\n\n {user.status === 'got_rejected' && (\n <>\n \n \n Request Rejected\n \n \n )}\n\n {user.status === 'received' && (\n <>\n {\n addFriend(user.id, 'Friend request accepted').finally(() => {\n pageProgressMessage.set('');\n });\n }}\n className=\"flex w-full grow cursor-pointer items-center justify-center rounded-lg border border-gray-800 bg-gray-800 px-3 py-2 text-center text-white hover:bg-black\"\n >\n \n Accept Request\n \n\n {!isConfirming && (\n {\n setIsConfirming(true);\n }}\n type=\"button\"\n className=\"flex w-full grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-white px-3 py-2 text-center text-red-600 hover:bg-red-100\"\n >\n \n Reject Request\n \n )}\n\n {isConfirming && (\n \n Are you sure?{' '}\n {\n deleteFriend(user.id, 'Friend request rejected').finally(\n () => {\n pageProgressMessage.set('');\n }\n );\n }}\n >\n Yes\n {' '}\n {\n setIsConfirming(false);\n }}\n className=\"ml-2 text-red-600 underline\"\n >\n No\n \n \n )}\n \n )}\n
    \n
    \n\n {error && (\n

    {error}

    \n )}\n
    \n );\n}\n" }, { "path": "src/components/BestPracticeHeader.astro", "content": "---\nimport Icon from './AstroIcon.astro';\nimport LoginPopup from './AuthenticationFlow/LoginPopup.astro';\nimport BestPracticeHint from './BestPracticeHint.astro';\nimport { MarkFavorite } from './FeaturedItems/MarkFavorite';\nimport ProgressHelpPopup from './ProgressHelpPopup.astro';\n\nexport interface Props {\n title: string;\n description: string;\n bestPracticeId: string;\n isUpcoming?: boolean;\n}\n\nconst { title, description, bestPracticeId, isUpcoming = false } = Astro.props;\nconst isBestPracticeReady = !isUpcoming;\n---\n\n\n\n\n
    \n
    \n
    \n

    \n {title}\n svg]:stroke-[0.4] [&>svg]:stroke-gray-400 [&>svg]:hover:stroke-gray-600 [&>svg]:h-4 [&>svg]:w-4 sm:[&>svg]:h-5 sm:[&>svg]:w-5 ml-1.5 relative focus:outline-0\"\n client:load\n />\n

    \n

    {description}

    \n
    \n\n
    \n
    \n \n ← All Best Practices\n \n\n {\n isBestPracticeReady && (\n \n \n \n \n )\n }\n\n {\n isBestPracticeReady && (\n \n \n \n \n )\n }\n
    \n\n {\n isBestPracticeReady && (\n \n \n \n Suggest\n \n )\n }\n
    \n\n \n
    \n
    \n" }, { "path": "src/components/BestPracticeHint.astro", "content": "---\nimport ResourceProgressStats from './ResourceProgressStats.astro';\nexport interface Props {\n bestPracticeId: string;\n}\nconst { bestPracticeId } = Astro.props;\n---\n\n
    \n \n
    \n" }, { "path": "src/components/Billing/BillingPage.tsx", "content": "import { useEffect, useState } from 'react';\nimport { pageProgressMessage } from '../../stores/page';\nimport { useToast } from '../../hooks/use-toast';\nimport { useMutation, useQuery } from '@tanstack/react-query';\nimport {\n billingDetailsOptions,\n USER_SUBSCRIPTION_PLAN_PRICES,\n} from '../../queries/billing';\nimport { queryClient } from '../../stores/query-client';\nimport { httpPost } from '../../lib/query-http';\nimport { UpgradeAccountModal } from './UpgradeAccountModal';\nimport { getUrlParams } from '../../lib/browser';\nimport { VerifyUpgrade } from './VerifyUpgrade';\nimport { EmptyBillingScreen } from './EmptyBillingScreen';\nimport {\n Calendar,\n RefreshCw,\n Loader2,\n CreditCard,\n ArrowRightLeft,\n CircleX,\n AlertCircle,\n} from 'lucide-react';\nimport { BillingWarning } from './BillingWarning';\nimport { cn } from '../../lib/classname';\n\nexport type CreateCustomerPortalBody = {};\n\nexport type CreateCustomerPortalResponse = {\n url: string;\n};\n\nexport function BillingPage() {\n const toast = useToast();\n\n const [showUpgradeModal, setShowUpgradeModal] = useState(false);\n const [showVerifyUpgradeModal, setShowVerifyUpgradeModal] = useState(false);\n\n const { data: billingDetails, isPending: isLoadingBillingDetails } = useQuery(\n billingDetailsOptions(),\n queryClient,\n );\n\n const willBeCanceled = billingDetails?.cancelAtPeriodEnd;\n const isCanceled = billingDetails?.status === 'canceled';\n\n const isPastDue = billingDetails?.status === 'past_due';\n const isIncomplete = billingDetails?.status === 'incomplete';\n const isIncompleteExpired = billingDetails?.status === 'incomplete_expired';\n\n const {\n mutate: createCustomerPortal,\n isSuccess: isCreatingCustomerPortalSuccess,\n isPending: isCreatingCustomerPortal,\n } = useMutation(\n {\n mutationFn: (body: CreateCustomerPortalBody) => {\n return httpPost(\n '/v1-create-customer-portal',\n body,\n );\n },\n onSuccess: (data) => {\n window.location.href = data.url;\n },\n onError: (error) => {\n console.error(error);\n toast.error(error?.message || 'Failed to Create Customer Portal');\n },\n },\n queryClient,\n );\n\n useEffect(() => {\n if (isLoadingBillingDetails) {\n return;\n }\n\n pageProgressMessage.set('');\n const shouldVerifyUpgrade = getUrlParams()?.s === '1';\n if (shouldVerifyUpgrade) {\n setShowVerifyUpgradeModal(true);\n }\n }, [isLoadingBillingDetails]);\n\n if (isLoadingBillingDetails || !billingDetails) {\n return null;\n }\n\n const selectedPlanDetails = USER_SUBSCRIPTION_PLAN_PRICES.find(\n (plan) => plan.priceId === billingDetails?.priceId,\n );\n const priceDetails = selectedPlanDetails;\n\n const formattedNextBillDate = new Date(\n billingDetails?.currentPeriodEnd || '',\n ).toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n });\n\n const modals = (\n <>\n {showUpgradeModal && (\n {\n setShowUpgradeModal(false);\n }}\n />\n )}\n\n {showVerifyUpgradeModal && }\n \n );\n\n if (billingDetails?.status === 'none' || isIncompleteExpired) {\n return (\n <>\n {modals}\n setShowUpgradeModal(true)} />\n \n );\n }\n\n if (isCanceled) {\n return (\n <>\n {modals}\n {\n if (willBeCanceled) {\n createCustomerPortal({});\n } else {\n setShowUpgradeModal(true);\n }\n }}\n isLoading={\n isCreatingCustomerPortal || isCreatingCustomerPortalSuccess\n }\n />\n\n setShowUpgradeModal(true)} />\n \n );\n }\n\n if (isIncomplete) {\n return (\n <>\n {modals}\n {\n createCustomerPortal({});\n }}\n isLoading={\n isCreatingCustomerPortal || isCreatingCustomerPortalSuccess\n }\n />\n\n setShowUpgradeModal(true)} />\n \n );\n }\n\n if (!priceDetails) {\n return (\n
    \n

    Uh oh!

    \n

    \n We couldn't find your subscription details. Please contact support at\n \n info@roadmap.sh\n \n .\n

    \n
    \n );\n }\n\n return (\n <>\n {modals}\n\n
    \n {isPastDue && (\n {\n createCustomerPortal({});\n }}\n isLoading={\n isCreatingCustomerPortal || isCreatingCustomerPortalSuccess\n }\n />\n )}\n\n {willBeCanceled && (\n {\n createCustomerPortal({});\n }}\n isLoading={\n isCreatingCustomerPortal || isCreatingCustomerPortalSuccess\n }\n />\n )}\n\n

    \n Current Subscription\n

    \n\n

    \n Thank you for being a pro member. Your plan details are below.\n

    \n\n
    \n
    \n
    \n \n
    \n
    \n \n Payment\n \n

    \n ${priceDetails.amount}\n \n / {priceDetails.interval}\n \n

    \n
    \n
    \n
    \n\n \n
    \n
    \n \n
    \n
    \n \n {willBeCanceled ? 'Expires On' : 'Renews On'}\n \n

    \n {formattedNextBillDate}\n

    \n
    \n
    \n\n
    \n {!willBeCanceled && (\n {\n setShowUpgradeModal(true);\n }}\n >\n \n Switch Plan\n \n )}\n {\n createCustomerPortal({});\n }}\n disabled={\n isCreatingCustomerPortal || isCreatingCustomerPortalSuccess\n }\n >\n {isCreatingCustomerPortal || isCreatingCustomerPortalSuccess ? (\n \n ) : (\n \n )}\n Manage Subscription\n \n
    \n
    \n
    \n \n );\n}\n" }, { "path": "src/components/Billing/BillingWarning.tsx", "content": "import { AlertTriangle, type LucideIcon } from 'lucide-react';\n\nexport type BillingWarningProps = {\n icon?: LucideIcon;\n message: string;\n onButtonClick?: () => void;\n buttonText?: string;\n isLoading?: boolean;\n};\n\nexport function BillingWarning(props: BillingWarningProps) {\n const {\n message,\n onButtonClick,\n buttonText,\n isLoading,\n icon: Icon = AlertTriangle,\n } = props;\n\n return (\n
    \n \n \n {message}\n {buttonText && (\n {\n onButtonClick?.();\n }}\n className=\"font-semibold underline underline-offset-4 disabled:cursor-not-allowed disabled:opacity-50 ml-0.5\"\n >\n {buttonText}\n \n )}\n \n
    \n );\n}\n" }, { "path": "src/components/Billing/CheckSubscriptionVerification.tsx", "content": "import { useEffect, useState } from 'react';\nimport { getUrlParams } from '../../lib/browser';\nimport { VerifyUpgrade } from \"./VerifyUpgrade\";\n\nexport function CheckSubscriptionVerification() {\n const [shouldVerifyUpgrade, setShouldVerifyUpgrade] = useState(false);\n\n useEffect(() => {\n const params = getUrlParams();\n if (params.s !== '1') {\n return;\n }\n\n setShouldVerifyUpgrade(true);\n }, []);\n\n if (!shouldVerifyUpgrade) {\n return null;\n }\n\n return ;\n}\n" }, { "path": "src/components/Billing/EmptyBillingScreen.tsx", "content": "import {\n CreditCard,\n Ellipsis,\n HeartHandshake,\n MessageCircleIcon,\n SparklesIcon,\n Zap,\n} from 'lucide-react';\n\ntype EmptyBillingScreenProps = {\n onUpgrade: () => void;\n};\n\nconst perks = [\n {\n icon: Zap,\n text: 'Unlimited AI course generations',\n },\n {\n icon: MessageCircleIcon,\n text: 'Unlimited AI Chat feature usage',\n },\n {\n icon: SparklesIcon,\n text: 'Early access to new features',\n },\n {\n icon: HeartHandshake,\n text: 'Support the development of platform',\n },\n {\n icon: Ellipsis,\n text: 'more perks coming soon!',\n },\n];\n\nexport function EmptyBillingScreen(props: EmptyBillingScreenProps) {\n const { onUpgrade } = props;\n\n return (\n
    \n \n

    \n No Active Subscription\n

    \n\n

    \n Unlock pro benefits by upgrading to a subscription\n

    \n\n
    \n {perks.map((perk) => (\n

    \n \n {perk.text}\n

    \n ))}\n
    \n\n \n Upgrade Account\n \n
    \n );\n}\n" }, { "path": "src/components/Billing/GlobalUpgradeModal.tsx", "content": "import { useStore } from '@nanostores/react';\nimport {\n hideUpgradeModal,\n isUpgradeModalOpen,\n} from '../../stores/subscription';\nimport { UpgradeAccountModal } from './UpgradeAccountModal';\n\nexport function GlobalUpgradeModal() {\n const isOpen = useStore(isUpgradeModalOpen);\n\n if (!isOpen) {\n return null;\n }\n\n return ;\n}\n" }, { "path": "src/components/Billing/UpdatePlanConfirmation.tsx", "content": "import { useMutation } from '@tanstack/react-query';\nimport type { USER_SUBSCRIPTION_PLAN_PRICES } from '../../queries/billing';\nimport { Modal } from '../Modal';\nimport { queryClient } from '../../stores/query-client';\nimport { useToast } from '../../hooks/use-toast';\nimport { VerifyUpgrade } from './VerifyUpgrade';\nimport { Loader2Icon } from 'lucide-react';\nimport { httpPost } from '../../lib/query-http';\n\ntype UpdatePlanBody = {\n priceId: string;\n};\n\ntype UpdatePlanResponse = {\n status: 'ok';\n};\n\ntype UpdatePlanConfirmationProps = {\n planDetails: (typeof USER_SUBSCRIPTION_PLAN_PRICES)[number];\n onClose: () => void;\n onCancel: () => void;\n};\n\nexport function UpdatePlanConfirmation(props: UpdatePlanConfirmationProps) {\n const { planDetails, onClose, onCancel } = props;\n\n const toast = useToast();\n const {\n mutate: updatePlan,\n isPending,\n status,\n } = useMutation(\n {\n mutationFn: (body: UpdatePlanBody) => {\n return httpPost(\n '/v1-update-subscription-plan',\n body,\n );\n },\n onError: (error) => {\n console.error(error);\n toast.error(error?.message || 'Failed to Create Customer Portal');\n },\n },\n queryClient,\n );\n\n if (!planDetails) {\n return null;\n }\n\n const selectedPrice = planDetails;\n if (status === 'success') {\n return ;\n }\n\n return (\n {} : onClose}\n bodyClassName=\"rounded-xl bg-white p-6\"\n >\n

    Subscription Update

    \n

    \n Your plan will be updated to the{' '}\n {planDetails.interval} plan, and will be\n charged{' '}\n \n ${selectedPrice.amount}/{selectedPrice.interval}\n \n .\n

    \n\n
    \n \n Cancel\n \n {\n updatePlan({ priceId: selectedPrice.priceId });\n }}\n >\n {isPending && (\n \n )}\n {!isPending && 'Confirm'}\n \n
    \n     \n );\n}\n" }, { "path": "src/components/Billing/UpgradeAccountModal.tsx", "content": "import { useMutation, useQuery } from '@tanstack/react-query';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n Archive,\n Crown,\n Loader2,\n Map,\n MessageCircleIcon,\n X,\n Zap,\n} from 'lucide-react';\nimport { useEffect, useState } from 'react';\nimport { useToast } from '../../hooks/use-toast';\nimport { getUser } from '../../lib/jwt';\nimport { httpPost } from '../../lib/query-http';\nimport {\n billingDetailsOptions,\n USER_SUBSCRIPTION_PLAN_PRICES,\n type AllowedSubscriptionInterval,\n} from '../../queries/billing';\nimport { queryClient } from '../../stores/query-client';\nimport { Modal } from '../Modal';\nimport { UpdatePlanConfirmation } from './UpdatePlanConfirmation';\n\ntype Perk = {\n icon: LucideIcon;\n title: string;\n description: string;\n highlight?: boolean;\n};\n\nconst PREMIUM_PERKS: Perk[] = [\n {\n icon: Zap,\n title: 'Unlimited Courses and Guides',\n description: 'No limits on number of courses, guides, and quizzes',\n highlight: true,\n },\n {\n icon: MessageCircleIcon,\n title: 'Extended Chat Limits',\n description: 'Chat with AI Tutor and Roadmaps without limits',\n },\n {\n icon: Archive,\n title: 'Chat History',\n description: 'Access your AI Tutor and roadmap chats later',\n },\n {\n icon: Map,\n title: 'Custom Roadmaps',\n description: 'Create upto 100 custom roadmaps',\n },\n];\n\ntype CreateSubscriptionCheckoutSessionBody = {\n priceId: string;\n success?: string;\n cancel?: string;\n};\n\ntype CreateSubscriptionCheckoutSessionResponse = {\n checkoutUrl: string;\n};\n\ntype UpgradeAccountModalProps = {\n onClose: () => void;\n success?: string;\n cancel?: string;\n};\n\nexport function UpgradeAccountModal(props: UpgradeAccountModalProps) {\n const { onClose, success, cancel } = props;\n\n const [selectedPlan, setSelectedPlan] =\n useState('year');\n const [isUpdatingPlan, setIsUpdatingPlan] = useState(false);\n\n const user = getUser();\n\n const {\n data: userBillingDetails,\n isLoading,\n error: billingError,\n } = useQuery(billingDetailsOptions(), queryClient);\n\n const toast = useToast();\n\n const {\n mutate: createCheckoutSession,\n isPending: isCreatingCheckoutSession,\n } = useMutation(\n {\n mutationFn: (body: CreateSubscriptionCheckoutSessionBody) => {\n return httpPost(\n '/v1-create-subscription-checkout-session',\n body,\n );\n },\n onSuccess: (data) => {\n window.location.href = data.checkoutUrl;\n },\n onError: (error) => {\n console.error(error);\n toast.error(error?.message || 'Failed to create checkout session');\n },\n },\n queryClient,\n );\n\n const isCanceled = ['canceled', 'incomplete_expired'].includes(\n userBillingDetails?.status || '',\n );\n\n const selectedPlanDetails = USER_SUBSCRIPTION_PLAN_PRICES.find(\n (plan) => plan.interval === selectedPlan,\n );\n const currentPlanPriceId = isCanceled ? null : userBillingDetails?.priceId;\n const currentPlan = USER_SUBSCRIPTION_PLAN_PRICES.find(\n (plan) => plan.priceId === currentPlanPriceId,\n );\n\n const monthlyPlan = USER_SUBSCRIPTION_PLAN_PRICES.find(\n (p) => p.interval === 'month',\n );\n const yearlyPlan = USER_SUBSCRIPTION_PLAN_PRICES.find(\n (p) => p.interval === 'year',\n );\n\n useEffect(() => {\n if (!currentPlan) {\n return;\n }\n setSelectedPlan(currentPlan.interval);\n }, [currentPlan]);\n\n useEffect(() => {\n window?.fireEvent({\n action: 'tutor_pricing',\n category: 'ai_tutor',\n label: 'Clicked Upgrade to Pro',\n });\n }, []);\n\n if (!user) {\n return null;\n }\n\n if (isLoading) {\n return (\n \n
    \n \n
    \n \n );\n }\n\n if (billingError) {\n return (\n \n
    \n
    \n \n
    \n

    Error

    \n

    \n {billingError?.message ||\n 'An error occurred while loading billing details.'}\n

    \n
    \n \n );\n }\n\n if (isUpdatingPlan && selectedPlanDetails) {\n return (\n setIsUpdatingPlan(false)}\n onCancel={() => setIsUpdatingPlan(false)}\n />\n );\n }\n\n const handlePlanSelect = (plan: typeof selectedPlanDetails) => {\n if (!plan) return;\n\n setSelectedPlan(plan.interval);\n\n if (!currentPlanPriceId) {\n const currentUrlPath = window.location.pathname;\n const encodedCurrentUrlPath = encodeURIComponent(currentUrlPath);\n const successPage = `/thank-you?next=${encodedCurrentUrlPath}&s=1`;\n\n window?.fireEvent({\n action: 'tutor_checkout',\n category: 'ai_tutor',\n label: 'Checkout Started',\n });\n\n createCheckoutSession(\n {\n priceId: plan.priceId,\n success: success || successPage,\n cancel: cancel || `${currentUrlPath}?s=0`,\n },\n {\n onSuccess: () => {\n window?.fireEvent({\n action: `tutor_checkout_${plan.interval === 'month' ? 'mo' : 'an'}`,\n category: 'ai_tutor',\n label: `${plan.interval} Plan Checkout Started`,\n });\n },\n },\n );\n return;\n }\n setIsUpdatingPlan(true);\n };\n\n return (\n \n
    \n {/* Close button */}\n \n \n \n\n {/* Header */}\n
    \n
    \n \n
    \n

    \n Upgrade to Premium\n

    \n

    \n Unlock all features and supercharge your learning\n

    \n
    \n\n {/* Features List */}\n
    \n
    \n {PREMIUM_PERKS.map((perk, index) => {\n const Icon = perk.icon;\n return (\n
    \n \n
    \n

    \n {perk.title}\n

    \n

    {perk.description}

    \n
    \n
    \n );\n })}\n
    \n
    \n\n {/* Buttons */}\n
    \n
    \n {/* Yearly Button */}\n {yearlyPlan && (\n handlePlanSelect(yearlyPlan)}\n disabled={\n isCreatingCheckoutSession || currentPlan?.interval === 'year'\n }\n className={`flex h-11 w-full items-center justify-center rounded-lg px-4 text-sm font-medium transition-colors disabled:opacity-50 ${\n currentPlan?.interval === 'year'\n ? 'cursor-not-allowed bg-yellow-300 text-gray-700'\n : 'bg-yellow-400 text-black hover:bg-yellow-500'\n }`}\n >\n {isCreatingCheckoutSession && selectedPlan === 'year' ? (\n \n ) : (\n
    \n Yearly Plan - ${yearlyPlan.amount}/year\n {currentPlan?.interval === 'year' ? (\n \n Current Plan\n \n ) : (\n monthlyPlan && (\n \n {Math.round(\n (monthlyPlan.amount * 12 - yearlyPlan.amount) /\n monthlyPlan.amount,\n )}{' '}\n months free\n \n )\n )}\n
    \n )}\n \n )}\n\n {/* Monthly Button */}\n {monthlyPlan && (\n handlePlanSelect(monthlyPlan)}\n disabled={\n isCreatingCheckoutSession || currentPlan?.interval === 'month'\n }\n className={`flex h-11 w-full items-center justify-center rounded-lg border px-4 text-sm font-medium transition-colors disabled:opacity-50 ${\n currentPlan?.interval === 'month'\n ? 'cursor-not-allowed border-yellow-300 bg-yellow-50 text-gray-700'\n : 'border-yellow-400 bg-yellow-50 text-black hover:bg-yellow-100'\n }`}\n >\n {isCreatingCheckoutSession && selectedPlan === 'month' ? (\n \n ) : (\n
    \n Monthly Plan - ${monthlyPlan.amount}/month\n {currentPlan?.interval === 'month' && (\n \n Current Plan\n \n )}\n
    \n )}\n \n )}\n
    \n\n {/* Trust indicators */}\n
    \n

    \n By upgrading you agree to our{' '}\n \n terms and conditions\n \n

    \n
    \n
    \n
    \n \n );\n}\n" }, { "path": "src/components/Billing/VerifyUpgrade.tsx", "content": "import { useEffect } from 'react';\nimport { Loader2, CheckCircle } from 'lucide-react';\nimport { useQuery } from '@tanstack/react-query';\nimport { billingDetailsOptions } from '../../queries/billing';\nimport { queryClient } from '../../stores/query-client';\nimport { Modal } from '../Modal';\nimport { deleteUrlParam } from '../../lib/browser';\n\ntype VerifyUpgradeProps = {\n newPriceId?: string;\n};\n\nexport function VerifyUpgrade(props: VerifyUpgradeProps) {\n const { newPriceId } = props;\n\n const { data: userBillingDetails } = useQuery(\n {\n ...billingDetailsOptions(),\n refetchInterval: 1000,\n },\n queryClient,\n );\n\n useEffect(() => {\n if (!userBillingDetails) {\n return;\n }\n\n if (\n userBillingDetails.status === 'active' &&\n (newPriceId ? userBillingDetails.priceId === newPriceId : true)\n ) {\n if (!newPriceId) {\n // it means that the user is subscribing for the first time\n // not changing the plan\n window?.fireEvent({\n action: `tutor_purchase_${userBillingDetails.interval === 'month' ? 'mo' : 'an'}`,\n category: 'ai_tutor',\n label: `${userBillingDetails.interval} Plan Purchased`,\n });\n }\n\n deleteUrlParam('s');\n window.location.reload();\n }\n }, [userBillingDetails]);\n\n useEffect(() => {\n // it means that the user is changing the plan\n // not subscribing for the first time\n if (newPriceId) {\n return;\n }\n\n window?.fireEvent({\n action: 'tutor_purchase',\n category: 'ai_tutor',\n label: 'Subscription Activated',\n });\n window?.fireEvent({\n action: 'tutor_ty',\n category: 'ai_tutor',\n label: 'Thank You Page Visited',\n });\n }, [newPriceId]);\n\n return (\n {}}\n bodyClassName=\"rounded-xl bg-white p-6\"\n >\n
    \n \n

    Subscription Activated

    \n
    \n\n

    \n Your subscription has been activated successfully.\n

    \n\n

    \n It might take a minute for the changes to reflect. We will{' '}\n reload the page for you.\n

    \n\n
    \n \n Please wait...\n
    \n\n

    \n If it takes longer than expected, please email us at{' '}\n \n info@roadmap.sh\n \n .\n

    \n \n );\n}\n" }, { "path": "src/components/Changelog/ChangelogItem.astro", "content": "---\nimport { DateTime } from 'luxon';\nimport ChangelogImages from '../ChangelogImages';\nimport type { ChangelogDocument } from '../../queries/changelog';\n\ninterface Props {\n changelog: ChangelogDocument;\n}\n\nconst { changelog } = Astro.props;\n\nconst formattedDate = DateTime.fromISO(changelog.createdAt).toFormat(\n 'dd LLL, yyyy',\n);\n---\n\n
    \n \n\n \n \n {formattedDate}\n \n \n {changelog.title}\n \n
    \n\n
    \n {\n changelog.images && (\n \n )\n }\n\n \n
    \n
    \n" }, { "path": "src/components/Changelog/ChangelogLaunch.astro", "content": "---\nimport { DateTime } from 'luxon';\n\nconst formattedDate = DateTime.fromISO('2024-09-13').toFormat('dd LLL, yyyy');\n---\n\n
    \n \n\n \n \n {formattedDate}\n \n \n Changelog page is launched\n \n
    \n\n \n \n

    Changelog page is launched

    \n

    \n We will be sharing a selected list of updates, improvements, and fixes made to\n the website. Stay tuned!\n

    \n
    \n\n" }, { "path": "src/components/ChangelogBanner.astro", "content": "---\nimport { listChangelog } from '../queries/changelog';\nimport { DateTime } from 'luxon';\nimport AstroIcon from './AstroIcon.astro';\n\nconst changelogs = await listChangelog({ limit: 10 });\n---\n\n
    \n
    \n

    \n

    \n \n We are always improving our content, adding new resources and adding\n features to enhance your learning experience.\n

    \n\n
    \n
    \n
      \n {\n changelogs.map((changelog) => {\n const formattedDate = DateTime.fromISO(\n changelog.createdAt,\n ).toFormat('dd LLL, yyyy');\n return (\n
    • \n \n \n {formattedDate}\n \n
      • \n );\n })\n }\n
    \n
    \n \n \n View Full Changelog\n \n \n \n Subscribe for Notifications\n \n
    \n \n\n" }, { "path": "src/components/ChangelogImages.tsx", "content": "import { ChevronLeft, ChevronRight } from 'lucide-react';\nimport React, { useState, useEffect, useCallback } from 'react';\nimport type { ChangelogImage } from '../queries/changelog';\n\ninterface ChangelogImagesProps {\n images: ChangelogImage[];\n}\n\nconst ChangelogImages: React.FC = ({ images }) => {\n const [enlargedImage, setEnlargedImage] = useState(null);\n const imageArray = images.map((image) => [image.title, image.url]);\n\n const handleImageClick = (src: string) => {\n setEnlargedImage(src);\n };\n\n const handleCloseEnlarged = () => {\n setEnlargedImage(null);\n };\n\n const handleNavigation = useCallback(\n (direction: 'prev' | 'next') => {\n if (!enlargedImage) return;\n const currentIndex = imageArray.findIndex(\n ([_, src]) => src === enlargedImage,\n );\n let newIndex;\n if (direction === 'prev') {\n newIndex = currentIndex > 0 ? currentIndex - 1 : imageArray.length - 1;\n } else {\n newIndex = currentIndex < imageArray.length - 1 ? currentIndex + 1 : 0;\n }\n setEnlargedImage(imageArray[newIndex][1]);\n },\n [enlargedImage, imageArray],\n );\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n handleCloseEnlarged();\n } else if (event.key === 'ArrowLeft') {\n handleNavigation('prev');\n } else if (event.key === 'ArrowRight') {\n handleNavigation('next');\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [handleNavigation]);\n\n return (\n <>\n
    \n {imageArray.map(([title, src]) => (\n handleImageClick(src)}\n >\n \n \n\n
    \n {title}\n
    \n
    \n ))}\n \n {enlargedImage && (\n \n \n {\n e.stopPropagation();\n handleNavigation('prev');\n }}\n >\n \n \n {\n e.stopPropagation();\n handleNavigation('next');\n }}\n >\n \n \n \n )}\n \n );\n};\n\nexport default ChangelogImages;\n" }, { "path": "src/components/ChatEditor/ChatEditor.css", "content": ".chat-editor .tiptap p.is-editor-empty:first-child::before {\n color: #adb5bd;\n content: attr(data-placeholder);\n float: left;\n height: 0;\n pointer-events: none;\n}\n\n.chat-editor .tiptap p:first-child.is-empty::before {\n color: #adb5bd;\n content: attr(data-placeholder);\n float: left;\n height: 0;\n pointer-events: none;\n}\n\n.chat-editor .tiptap [data-type='variable'] {\n font-size: 12px;\n font-weight: 500;\n line-height: 1.5;\n padding: 2px 4px;\n border-radius: 8px;\n background-color: #f0f5ff;\n color: #2c5df1;\n}\n" }, { "path": "src/components/ChatEditor/ChatEditor.tsx", "content": "import './ChatEditor.css';\n\nimport {\n Editor,\n EditorContent,\n useEditor,\n type JSONContent,\n} from '@tiptap/react';\nimport DocumentExtension from '@tiptap/extension-document';\nimport ParagraphExtension from '@tiptap/extension-paragraph';\nimport TextExtension from '@tiptap/extension-text';\nimport Placeholder from '@tiptap/extension-placeholder';\nimport { VariableExtension } from './VariableExtension/VariableExtension';\nimport { variableSuggestion } from './VariableExtension/VariableSuggestion';\nimport { queryClient } from '../../stores/query-client';\nimport { roadmapTreeMappingOptions } from '../../queries/roadmap-tree';\nimport { useQuery } from '@tanstack/react-query';\nimport { useEffect, type RefObject } from 'react';\nimport { roadmapDetailsOptions } from '../../queries/roadmap';\n\nconst extensions = [\n DocumentExtension,\n ParagraphExtension,\n TextExtension,\n Placeholder.configure({\n placeholder: 'Ask AI anything about the roadmap...',\n }),\n VariableExtension.configure({\n suggestion: variableSuggestion(),\n }),\n];\n\nconst content = '

    ';\n\ntype ChatEditorProps = {\n editorRef: RefObject;\n roadmapId: string;\n onSubmit: (content: JSONContent) => void;\n};\n\nexport function ChatEditor(props: ChatEditorProps) {\n const { roadmapId, onSubmit, editorRef } = props;\n\n const { data: roadmapTreeData } = useQuery(\n roadmapTreeMappingOptions(roadmapId),\n queryClient,\n );\n\n const { data: roadmapDetailsData } = useQuery(\n roadmapDetailsOptions(roadmapId),\n queryClient,\n );\n\n const editor = useEditor({\n extensions,\n content,\n editorProps: {\n attributes: {\n class: 'focus:outline-none w-full px-4 py-2 min-h-[40px]',\n },\n handleKeyDown(_, event) {\n if (!editor) {\n return false;\n }\n\n if (event.key === 'Enter' && !event.shiftKey) {\n // check if the variable suggestion list is focused\n // if it is, return false so the default behavior is not triggered\n const variableSuggestionList = document.getElementById(\n 'variable-suggestion-list',\n );\n if (variableSuggestionList) {\n return false;\n }\n\n event.preventDefault();\n onSubmit(editor.getJSON());\n return true;\n }\n\n if (event.key === 'Enter' && event.shiftKey) {\n event.preventDefault();\n editor.commands.insertContent([\n { type: 'text', text: ' ' },\n { type: 'paragraph' },\n ]);\n return true;\n }\n\n return false;\n },\n },\n onUpdate: ({ editor }) => {\n editorRef.current = editor;\n },\n onDestroy: () => {\n editorRef.current = null;\n },\n });\n\n useEffect(() => {\n if (!editor || !roadmapTreeData || !roadmapDetailsData) {\n return;\n }\n\n editor.storage.variable.variables = roadmapTreeData.map((mapping) => {\n return {\n id: mapping.nodeId,\n // to remove the title of the roadmap\n // and only keep the path\n // e.g. \"Roadmap > Topic > Subtopic\" -> \"Topic > Subtopic\"\n label: mapping.text.split(' > ').slice(1).join(' > '),\n };\n });\n }, [editor, roadmapTreeData, roadmapDetailsData]);\n\n return (\n
    \n \n
    \n );\n}\n" }, { "path": "src/components/ChatEditor/VariableExtension/VariableExtension.tsx", "content": "import { mergeAttributes, Node } from '@tiptap/core';\nimport { type DOMOutputSpec, Node as ProseMirrorNode } from '@tiptap/pm/model';\nimport { PluginKey } from '@tiptap/pm/state';\nimport Suggestion, { type SuggestionOptions } from '@tiptap/suggestion';\n\n// See `addAttributes` below\nexport interface VariableNodeAttrs {\n /**\n * The identifier for the selected item that was mentioned, stored as a `data-id`\n * attribute.\n */\n id: string | null;\n /**\n * The label to be rendered by the editor as the displayed text for this mentioned\n * item, if provided. Stored as a `data-label` attribute. See `renderLabel`.\n */\n label?: string | null;\n}\n\nexport type VariableOptions<\n SuggestionItem = any,\n Attrs extends Record = VariableNodeAttrs,\n> = {\n /**\n * The HTML attributes for a mention node.\n * @default {}\n * @example { class: 'foo' }\n */\n HTMLAttributes: Record;\n\n /**\n * A function to render the label of a mention.\n * @deprecated use renderText and renderHTML instead\n * @param props The render props\n * @returns The label\n * @example ({ options, node }) => `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`\n */\n renderLabel?: (props: {\n options: VariableOptions;\n node: ProseMirrorNode;\n }) => string;\n\n /**\n * A function to render the text of a mention.\n * @param props The render props\n * @returns The text\n * @example ({ options, node }) => `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`\n */\n renderText: (props: {\n options: VariableOptions;\n node: ProseMirrorNode;\n }) => string;\n\n /**\n * A function to render the HTML of a mention.\n * @param props The render props\n * @returns The HTML as a ProseMirror DOM Output Spec\n * @example ({ options, node }) => ['span', { 'data-type': 'mention' }, `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`]\n */\n renderHTML: (props: {\n options: VariableOptions;\n node: ProseMirrorNode;\n }) => DOMOutputSpec;\n\n /**\n * Whether to delete the trigger character with backspace.\n * @default false\n */\n deleteTriggerWithBackspace: boolean;\n\n /**\n * The suggestion options.\n * @default {}\n * @example { char: '@', pluginKey: MentionPluginKey, command: ({ editor, range, props }) => { ... } }\n */\n suggestion: Omit, 'editor'>;\n};\n\nexport type VariableType = {\n id: string;\n label: string;\n};\n\nexport type VariableStorage = {\n variables: VariableType[];\n};\n\n/**\n * The plugin key for the variable plugin.\n * @default 'variable'\n */\nexport const VariablePluginKey = new PluginKey('variable');\n\nexport const VariableExtension = Node.create({\n name: 'variable',\n\n priority: 101,\n\n addStorage() {\n return {\n variables: [],\n };\n },\n\n addOptions() {\n return {\n HTMLAttributes: {},\n renderText({ options, node }) {\n return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`;\n },\n deleteTriggerWithBackspace: false,\n renderHTML({ options, node }) {\n return [\n 'span',\n mergeAttributes(this.HTMLAttributes, options.HTMLAttributes),\n `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`,\n ];\n },\n suggestion: {\n char: '@',\n pluginKey: VariablePluginKey,\n command: ({ editor, range, props }) => {\n // increase range.to by one when the next node is of type \"text\"\n // and starts with a space character\n const nodeAfter = editor.view.state.selection.$to.nodeAfter;\n const overrideSpace = nodeAfter?.text?.startsWith(' ');\n\n if (overrideSpace) {\n range.to += 1;\n }\n\n editor\n .chain()\n .focus()\n .insertContentAt(range, [\n {\n type: this.name,\n attrs: props,\n },\n {\n type: 'text',\n text: ' ',\n },\n ])\n .run();\n\n // get reference to `window` object from editor element, to support cross-frame JS usage\n editor.view.dom.ownerDocument.defaultView\n ?.getSelection()\n ?.collapseToEnd();\n },\n allow: ({ state, range }) => {\n const $from = state.doc.resolve(range.from);\n const type = state.schema.nodes[this.name];\n const allow = !!$from.parent.type.contentMatch.matchType(type);\n\n return allow;\n },\n },\n };\n },\n\n group: 'inline',\n\n inline: true,\n\n selectable: false,\n\n atom: true,\n\n addAttributes() {\n return {\n id: {\n default: null,\n parseHTML: (element) => element.getAttribute('data-id'),\n renderHTML: (attributes) => {\n if (!attributes.id) {\n return {};\n }\n\n return {\n 'data-id': attributes.id,\n };\n },\n },\n\n label: {\n default: null,\n parseHTML: (element) => element.getAttribute('data-label'),\n renderHTML: (attributes) => {\n if (!attributes.label) {\n return {};\n }\n\n return {\n 'data-label': attributes.label,\n };\n },\n },\n };\n },\n\n parseHTML() {\n return [\n {\n tag: `span[data-type=\"${this.name}\"]`,\n },\n ];\n },\n\n renderHTML({ node, HTMLAttributes }) {\n if (this.options.renderLabel !== undefined) {\n console.warn(\n 'renderLabel is deprecated use renderText and renderHTML instead',\n );\n return [\n 'span',\n mergeAttributes(\n { 'data-type': this.name },\n this.options.HTMLAttributes,\n HTMLAttributes,\n ),\n this.options.renderLabel({\n options: this.options,\n node,\n }),\n ];\n }\n const mergedOptions = { ...this.options };\n\n mergedOptions.HTMLAttributes = mergeAttributes(\n { 'data-type': this.name },\n this.options.HTMLAttributes,\n HTMLAttributes,\n );\n const html = this.options.renderHTML({\n options: mergedOptions,\n node,\n });\n\n if (typeof html === 'string') {\n return [\n 'span',\n mergeAttributes(\n { 'data-type': this.name },\n this.options.HTMLAttributes,\n HTMLAttributes,\n ),\n html,\n ];\n }\n return html;\n },\n\n renderText({ node }) {\n if (this.options.renderLabel !== undefined) {\n console.warn(\n 'renderLabel is deprecated use renderText and renderHTML instead',\n );\n return this.options.renderLabel({\n options: this.options,\n node,\n });\n }\n return this.options.renderText({\n options: this.options,\n node,\n });\n },\n\n addKeyboardShortcuts() {\n return {\n Backspace: () =>\n this.editor.commands.command(({ tr, state }) => {\n let isVariable = false;\n const { selection } = state;\n const { empty, anchor } = selection;\n\n if (!empty) {\n return false;\n }\n\n state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {\n if (node.type.name === this.name) {\n isVariable = true;\n tr.insertText(\n this.options.deleteTriggerWithBackspace\n ? ''\n : this.options.suggestion.char || '',\n pos,\n pos + node.nodeSize,\n );\n\n return false;\n }\n });\n\n return isVariable;\n }),\n };\n },\n\n addProseMirrorPlugins() {\n return [\n Suggestion({\n editor: this.editor,\n ...this.options.suggestion,\n }),\n ];\n },\n});\n" }, { "path": "src/components/ChatEditor/VariableExtension/VariableSuggestion.tsx", "content": "import { ReactRenderer } from '@tiptap/react';\nimport type { SuggestionOptions } from '@tiptap/suggestion';\nimport tippy, { type GetReferenceClientRect } from 'tippy.js';\n\nimport {\n forwardRef,\n Fragment,\n useEffect,\n useImperativeHandle,\n useState,\n} from 'react';\nimport { cn } from '../../../lib/classname';\nimport type { VariableStorage, VariableType } from './VariableExtension';\nimport { ChevronRight } from 'lucide-react';\n\nexport type VariableListProps = {\n command: (variable: VariableType) => void;\n items: VariableType[];\n} & SuggestionOptions;\n\nexport const VariableList = forwardRef((props: VariableListProps, ref) => {\n const { items, command } = props;\n const [selectedIndex, setSelectedIndex] = useState(0);\n\n const selectItem = (index: number) => {\n const item = props.items[index];\n\n if (!item) {\n return;\n }\n\n command(item);\n };\n\n useEffect(() => {\n setSelectedIndex(0);\n }, [items]);\n\n useImperativeHandle(ref, () => ({\n onKeyDown: ({ event }: { event: KeyboardEvent }) => {\n if (event.key === 'ArrowUp') {\n setSelectedIndex((selectedIndex + items.length - 1) % items.length);\n return true;\n }\n\n if (event.key === 'ArrowDown') {\n setSelectedIndex((selectedIndex + 1) % items.length);\n return true;\n }\n\n if (event.key === 'Enter') {\n selectItem(selectedIndex);\n return true;\n }\n\n return false;\n },\n }));\n\n return (\n \n {items.length ? (\n items.map((item, index) => {\n const labelParts = item?.label.split('>');\n\n return (\n selectItem(index)}\n >\n {labelParts.map((labelPart, counter) => {\n const isLast = counter === labelParts.length - 1;\n return (\n \n \n {labelPart.trim()}\n \n {!isLast && (\n \n )}\n \n );\n })}\n \n );\n })\n ) : (\n
    No result
    \n )}\n \n );\n});\n\nVariableList.displayName = 'VariableList';\n\nexport function variableSuggestion(): Omit {\n return {\n items: ({ editor, query }) => {\n const storage = editor.storage.variable as VariableStorage;\n\n return storage.variables\n .filter((variable) =>\n variable?.label?.toLowerCase().includes(query.toLowerCase()),\n )\n .slice(0, 5);\n },\n\n render: () => {\n let component: ReactRenderer;\n let popup: InstanceType | null = null;\n\n return {\n onStart: (props) => {\n component = new ReactRenderer(VariableList, {\n props,\n editor: props.editor,\n });\n\n if (!props.clientRect) {\n return;\n }\n\n popup = tippy('body', {\n getReferenceClientRect: props.clientRect as GetReferenceClientRect,\n appendTo: () => document.body,\n content: component.element,\n showOnCreate: true,\n interactive: true,\n trigger: 'manual',\n placement: 'top-start',\n });\n },\n\n onUpdate(props) {\n component.updateProps(props);\n\n if (!props.clientRect) {\n return;\n }\n\n popup[0].setProps({\n getReferenceClientRect: props.clientRect,\n });\n },\n\n onKeyDown(props) {\n if (props.event.key === 'Escape') {\n popup[0].hide();\n\n return true;\n }\n\n return component.ref?.onKeyDown(props);\n },\n\n onExit() {\n popup[0].destroy();\n component.destroy();\n },\n };\n },\n };\n}\n" }, { "path": "src/components/ChatMessages/AIChat.css", "content": ".ai-chat {\n .prose ul li > code,\n .prose ol li > code,\n p code,\n a > code,\n strong > code,\n em > code,\n h1 > code,\n h2 > code,\n h3 > code {\n background: #ebebeb !important;\n color: currentColor !important;\n font-size: 14px;\n font-weight: normal !important;\n }\n\n .message-markdown.prose ul li > code,\n .message-markdown.prose ol li > code,\n .message-markdown.prose p code,\n .message-markdown.prose a > code,\n .message-markdown.prose strong > code,\n .message-markdown.prose em > code,\n .message-markdown.prose h1 > code,\n .message-markdown.prose h2 > code,\n .message-markdown.prose h3 > code {\n font-size: 12px !important;\n }\n\n .message-markdown pre {\n -ms-overflow-style: none;\n scrollbar-width: none;\n }\n\n .message-markdown pre::-webkit-scrollbar {\n display: none;\n }\n\n .message-markdown pre,\n .message-markdown pre {\n overflow: scroll;\n }\n\n .prose ul li > code:before,\n p > code:before,\n .prose ul li > code:after,\n .prose ol li > code:before,\n p > code:before,\n .prose ol li > code:after,\n .message-markdown h1 > code:after,\n .message-markdown h1 > code:before,\n .message-markdown h2 > code:after,\n .message-markdown h2 > code:before,\n .message-markdown h3 > code:after,\n .message-markdown h3 > code:before,\n .message-markdown h4 > code:after,\n .message-markdown h4 > code:before,\n p > code:after,\n a > code:after,\n a > code:before {\n content: '' !important;\n }\n\n .message-markdown.prose ul li > code,\n .message-markdown.prose ol li > code,\n .message-markdown p code,\n .message-markdown a > code,\n .message-markdown strong > code,\n .message-markdown em > code,\n .message-markdown h1 > code,\n .message-markdown h2 > code,\n .message-markdown h3 > code,\n .message-markdown table code {\n background: #f4f4f5 !important;\n border: 1px solid #282a36 !important;\n color: #282a36 !important;\n padding: 2px 4px;\n border-radius: 5px;\n white-space: pre;\n font-weight: normal;\n }\n\n .message-markdown blockquote {\n font-style: normal;\n }\n\n .message-markdown.prose blockquote h1,\n .message-markdown.prose blockquote h2,\n .message-markdown.prose blockquote h3,\n .message-markdown.prose blockquote h4 {\n font-style: normal;\n margin-bottom: 8px;\n }\n\n .message-markdown.prose ul li > code:before,\n .message-markdown p > code:before,\n .message-markdown.prose ul li > code:after,\n .message-markdown p > code:after,\n .message-markdown h2 > code:after,\n .message-markdown h2 > code:before,\n .message-markdown table code:before,\n .message-markdown table code:after,\n .message-markdown a > code:after,\n .message-markdown a > code:before,\n .message-markdown h2 code:after,\n .message-markdown h2 code:before,\n .message-markdown h2 code:after,\n .message-markdown h2 code:before {\n content: '' !important;\n }\n\n .message-markdown table {\n border-collapse: collapse;\n border: 1px solid black;\n border-radius: 5px;\n }\n\n .message-markdown table td,\n .message-markdown table th {\n padding: 5px 10px;\n }\n\n .chat-variable {\n font-size: 12px;\n font-weight: 500;\n line-height: 1.5;\n padding: 2px 4px;\n border-radius: 8px;\n background-color: #f0f5ff;\n color: #2c5df1;\n }\n}\n" }, { "path": "src/components/ChatMessages/RoadmapChatIntroMessage.tsx", "content": "import { useQuery } from '@tanstack/react-query';\nimport { officialRoadmapOptions } from '../../queries/official-roadmap';\nimport { queryClient } from '../../stores/query-client';\n\ntype RoadmapChatIntroMessageProps = {\n roadmapId: string;\n};\n\nexport function RoadmapChatIntroMessage(props: RoadmapChatIntroMessageProps) {\n const { roadmapId } = props;\n\n const { data: roadmapDetail } = useQuery(\n officialRoadmapOptions(roadmapId),\n queryClient,\n );\n const topicNodes = roadmapDetail?.nodes?.filter(\n (node) => node.type === 'topic',\n );\n\n const firstTopicNode = topicNodes?.[0];\n const firstTopicTitle = firstTopicNode?.data?.label || 'XYZ';\n\n const secondTopicNode = topicNodes?.[1];\n const secondTopicTitle = secondTopicNode?.data?.label || 'XYZ';\n\n const capabilities = [\n {\n icon: '📚',\n title: 'Learn concepts:',\n description: 'Ask me about any topics on the roadmap',\n examples:\n '\"Explain what React hooks are\" or \"How does async/await work?\"',\n },\n {\n icon: '📊',\n title: 'Track progress:',\n description: 'Mark topics as done, learning, or skipped',\n examples: `\"Mark ${firstTopicTitle} as done\" or \"Show my overall progress\"`,\n },\n {\n icon: '🎯',\n title: 'Recommendations:',\n description: 'Find what to learn next or explore other roadmaps',\n examples: `\"What should I learn next?\" or \"Recommend roadmaps for backend development\"`,\n },\n {\n icon: '🔍',\n title: 'Find resources:',\n description: 'Get learning materials for specific topics',\n examples: `\"Show me resources for learning ${secondTopicTitle}\"`,\n },\n {\n icon: '🔗',\n title: 'Share progress:',\n description: 'Get a link to share your learning progress',\n examples: '\"Give me my shareable progress link\"',\n },\n ];\n\n return (\n
    \n
    \n
    \n

    \n Hi! I'm your AI learning assistant 👋\n

    \n

    \n I'm here to guide you through your learning journey on this roadmap.\n I can help you understand concepts, track your progress, and provide\n personalized learning advice.\n

    \n
    \n
    \n\n
    \n

    \n Here's what I can help you with:\n

    \n\n
    \n {capabilities.map((capability, index) => (\n
    \n {capability.icon}\n
    \n \n {capability.title}\n {' '}\n {capability.description}\n
    \n Try: {capability.examples}\n
    \n
    \n
    \n ))}\n
    \n
    \n\n
    \n

    \n Tip: I can see your current\n progress on the roadmap, so my advice will be personalized to your\n learning journey. Just ask me anything about the topics you see on the\n roadmap!\n

    \n
    \n
    \n );\n}\n" }, { "path": "src/components/ChatMessages/RoadmapChatMessage.tsx", "content": "import { Markdown } from '../Global/Markdown';\nimport { BotIcon, User2Icon } from 'lucide-react';\nimport type { UIMessage } from 'ai';\nimport { parseMessageParts } from '../../lib/message-part';\nimport { RoadmapChatUserProgressList } from './UserProgressList';\nimport {\n parseUserProgress,\n UserProgressActionList,\n} from './UserPrgressActionList';\nimport { parseTopicList, RoadmapTopicList } from './RoadmapTopicList';\nimport { ShareResourceLink } from './ShareResourceLink';\nimport {\n parseRoadmapSlugList,\n RoadmapRecommendations,\n} from './RoadmapRecommendations';\nimport { cn } from '../../lib/classname';\n\ntype RoadmapMessageProps = {\n roadmapId: string;\n message: UIMessage;\n isStreaming: boolean;\n children?: React.ReactNode;\n onTopicClick?: (topicId: string, topicTitle: string) => void;\n};\n\nexport function RoadmapChatMessage(props: RoadmapMessageProps) {\n const { roadmapId, message, isStreaming, children, onTopicClick } = props;\n const { role } = message;\n\n return (\n \n
    \n \n {role === 'user' ? (\n \n ) : (\n \n )}\n
    \n\n {children || (\n
    \n {message.parts.map((part) => {\n const { type } = part;\n\n if (role === 'user' && type === 'text') {\n return (\n \n );\n }\n\n if (type === 'text') {\n const text = part.text;\n const parts = parseMessageParts(text, {\n 'user-progress': () => {\n return {};\n },\n 'update-progress': (opts) => {\n return parseUserProgress(opts.content);\n },\n 'roadmap-topics': (opts) => {\n return parseTopicList(opts.content);\n },\n 'resource-progress-link': () => {\n return {};\n },\n 'roadmap-recommendations': (opts) => {\n return parseRoadmapSlugList(opts.content);\n },\n });\n\n return parts.map((part, index) => {\n const { type } = part;\n const key = `message-${message.id}-part-${type}-${index}`;\n\n if (type === 'text') {\n return (\n \n {part.text ?? ''}\n \n );\n } else if (type === 'user-progress') {\n return (\n \n );\n } else if (type === 'update-progress') {\n return (\n \n );\n } else if (type === 'roadmap-topics') {\n return (\n \n );\n } else if (type === 'resource-progress-link') {\n return (\n \n );\n } else if (type === 'roadmap-recommendations') {\n return (\n \n );\n }\n\n return null;\n });\n }\n })}\n
    \n )}\n \n \n );\n}\n" }, { "path": "src/components/ChatMessages/RoadmapChatMessages.tsx", "content": "import type { ChatStatus, UIMessage } from 'ai';\nimport { memo } from 'react';\nimport { RoadmapChatMessage } from './RoadmapChatMessage';\nimport { useIsThinking } from '../../hooks/use-is-thinking';\n\ntype MessagesProps = {\n messages: UIMessage[];\n status: ChatStatus;\n roadmapId: string;\n onTopicClick?: (topicId: string, topicTitle: string) => void;\n defaultQuestions?: string[];\n onDefaultQuestionClick?: (question: string) => void;\n};\n\nfunction _RoadmapChatMessages(props: MessagesProps) {\n const {\n messages,\n status,\n roadmapId,\n defaultQuestions,\n onTopicClick,\n onDefaultQuestionClick,\n } = props;\n\n const isStreaming = status === 'streaming';\n const isThinking = useIsThinking(messages, status);\n\n return (\n
    \n
    \n
    \n \n\n {messages.length === 0 &&\n defaultQuestions &&\n defaultQuestions.length > 0 && (\n
    \n

    \n Some questions you might have about this roadmap:\n

    \n
    \n {defaultQuestions.map((question, index) => (\n onDefaultQuestionClick?.(question)}\n >\n {question}\n \n ))}\n
    \n
    \n )}\n\n {messages.map((message, index) => {\n const isLastMessage = index === messages.length - 1;\n\n // otherwise it will add an extra space at the end of the message\n // because the last message is not rendered\n if (isThinking && isLastMessage && message.role === 'assistant') {\n return null;\n }\n\n return (\n \n );\n })}\n\n {isThinking && (\n \n )}\n
    \n
    \n
    \n );\n}\n\nexport const RoadmapChatMessages = memo(_RoadmapChatMessages);\n" }, { "path": "src/components/ChatMessages/RoadmapRecommendations.tsx", "content": "import { useQuery } from '@tanstack/react-query';\nimport { useMemo } from 'react';\nimport { Loader2Icon, SquareArrowOutUpRightIcon } from 'lucide-react';\nimport { listBuiltInRoadmaps } from '../../queries/roadmap';\nimport { queryClient } from '../../stores/query-client';\n\ntype RoadmapSlugListType = {\n roadmapSlug: string;\n};\n\nexport function parseRoadmapSlugList(content: string): RoadmapSlugListType[] {\n const items: RoadmapSlugListType[] = [];\n\n const roadmapSlugListRegex = /.*?<\\/roadmap-slug>/gs;\n const roadmapSlugListItems = content.match(roadmapSlugListRegex);\n if (!roadmapSlugListItems) {\n return items;\n }\n\n for (const roadmapSlugListItem of roadmapSlugListItems) {\n const roadmapSlugRegex = /(.*?)<\\/roadmap-slug>/;\n const roadmapSlug = roadmapSlugListItem\n .match(roadmapSlugRegex)?.[1]\n ?.trim();\n if (!roadmapSlug) {\n continue;\n }\n\n items.push({\n roadmapSlug,\n });\n }\n\n return items;\n}\n\ntype RoadmapRecommendationsProps = {\n roadmapSlugs: RoadmapSlugListType[];\n};\n\nexport function RoadmapRecommendations(props: RoadmapRecommendationsProps) {\n const { roadmapSlugs } = props;\n\n const { data: roadmaps, isLoading } = useQuery(\n listBuiltInRoadmaps(),\n queryClient,\n );\n\n const progressItemWithText = useMemo(() => {\n return roadmapSlugs.map((item) => {\n const roadmap = roadmaps?.find(\n (mapping) => mapping.id === item.roadmapSlug,\n );\n\n return {\n ...item,\n title: roadmap?.title,\n };\n });\n }, [roadmapSlugs, roadmaps]);\n\n return (\n
    \n {progressItemWithText.map((item) => (\n \n {item.title}\n {isLoading && (\n \n )}\n {!isLoading && (\n \n )}\n \n ))}\n
    \n );\n}\n" }, { "path": "src/components/ChatMessages/RoadmapTopicList.tsx", "content": "import { useQuery } from '@tanstack/react-query';\nimport { Fragment, useMemo } from 'react';\nimport { ChevronRightIcon } from 'lucide-react';\nimport { roadmapTreeMappingOptions } from '../../queries/roadmap-tree';\nimport { queryClient } from '../../stores/query-client';\n\ntype TopicListType = {\n topicId: string;\n};\n\nexport function parseTopicList(content: string): TopicListType[] {\n const items: TopicListType[] = [];\n\n const topicListRegex = /.*?<\\/topic-id>/gs;\n const topicListItems = content.match(topicListRegex);\n if (!topicListItems) {\n return items;\n }\n\n for (const topicListItem of topicListItems) {\n const topicIdRegex = /(.*?)<\\/topic-id>/;\n const topicId = topicListItem.match(topicIdRegex)?.[1]?.trim();\n if (!topicId) {\n continue;\n }\n\n items.push({\n topicId,\n });\n }\n\n return items;\n}\n\ntype RoadmapTopicListProps = {\n roadmapId: string;\n onTopicClick?: (topicId: string, topicTitle: string) => void;\n topics: TopicListType[];\n};\n\nexport function RoadmapTopicList(props: RoadmapTopicListProps) {\n const { roadmapId, topics: topicListItems, onTopicClick } = props;\n\n const { data: roadmapTreeData } = useQuery(\n roadmapTreeMappingOptions(roadmapId),\n queryClient,\n );\n\n const progressItemWithText = useMemo(() => {\n return topicListItems.map((item) => {\n const roadmapTreeItem = roadmapTreeData?.find(\n (mapping) => mapping.nodeId === item.topicId,\n );\n\n return {\n ...item,\n text: (roadmapTreeItem?.text || item.topicId)\n ?.split(' > ')\n .slice(1)\n .join(' > '),\n };\n });\n }, [topicListItems, roadmapTreeData]);\n\n return (\n
    \n {progressItemWithText.map((item) => {\n const labelParts = item.text.split(' > ').slice(-2);\n const labelPartCount = labelParts.length;\n\n const title = item.text.split(' > ').pop();\n if (!title) {\n return;\n }\n\n return (\n {\n if (!title) {\n return;\n }\n\n onTopicClick?.(item.topicId, title);\n }}\n >\n {labelParts.map((part, index) => {\n return (\n \n {part}\n {index < labelPartCount - 1 && (\n \n )}\n \n );\n })}\n \n );\n })}\n
    \n );\n}\n" }, { "path": "src/components/ChatMessages/ShareResourceLink.tsx", "content": "import { ShareIcon } from 'lucide-react';\nimport { useCopyText } from '../../hooks/use-copy-text';\nimport { cn } from '../../lib/classname';\nimport { useAuth } from '../../hooks/use-auth';\nimport { CheckIcon } from '../ReactIcons/CheckIcon';\n\ntype ShareResourceLinkProps = {\n roadmapId: string;\n};\n\nexport function ShareResourceLink(props: ShareResourceLinkProps) {\n const { roadmapId } = props;\n\n const currentUser = useAuth();\n const { copyText, isCopied } = useCopyText();\n\n const handleShareResourceLink = () => {\n const url = `${import.meta.env.VITE_ASTRO_APP_URL}/${roadmapId}?s=${currentUser?.id}`;\n copyText(url);\n };\n\n return (\n
    \n \n {!isCopied && (\n <>\n \n Share Progress\n \n )}\n\n {isCopied && (\n <>\n \n Copied\n \n )}\n \n
    \n );\n}\n" }, { "path": "src/components/ChatMessages/TopicChatMessage.tsx", "content": "import { cn } from '../../lib/classname';\nimport { Markdown } from '../Global/Markdown';\nimport { BotIcon, User2Icon } from 'lucide-react';\nimport type { UIMessage } from 'ai';\nimport { promptLabelMapping } from '../TopicDetail/PredefinedActions';\n\ntype TopicChatMessageProps = {\n message: UIMessage;\n};\n\nexport function TopicChatMessage(props: TopicChatMessageProps) {\n const { message } = props;\n const { role } = message;\n\n return (\n \n
    \n \n {role === 'user' ? (\n \n ) : (\n \n )}\n
    \n\n
    \n {message.parts.map((part) => {\n const { type } = part;\n const key = `message-${message.id}-part-${type}`;\n\n if (type === 'text') {\n let content = part.text;\n if (role === 'user' && promptLabelMapping[content]) {\n content = promptLabelMapping[content];\n }\n\n return (\n \n {content}\n \n );\n }\n })}\n
    \n \n \n );\n}\n" }, { "path": "src/components/ChatMessages/TopicChatMessages.tsx", "content": "import type { ChatStatus, UIMessage } from 'ai';\nimport { TopicChatMessage } from './TopicChatMessage';\nimport { useIsThinking } from '../../hooks/use-is-thinking';\n\ntype TopicChatMessagesProps = {\n messages: UIMessage[];\n status: ChatStatus;\n};\n\nexport function TopicChatMessages(props: TopicChatMessagesProps) {\n const { messages, status } = props;\n\n const isThinking = useIsThinking(messages, status);\n\n return (\n
    \n
    \n
    \n \n\n {messages.map((message, index) => {\n const isLastMessage = index === messages.length - 1;\n\n // otherwise it will add an extra space at the end of the message\n // because the last message is not rendered\n if (isThinking && isLastMessage && message.role === 'assistant') {\n return null;\n }\n\n return ;\n })}\n\n {isThinking && (\n \n )}\n
    \n
    \n
    \n );\n}\n" }, { "path": "src/components/ChatMessages/UserPrgressActionList.tsx", "content": "import { useMutation, useQuery } from '@tanstack/react-query';\nimport { ChevronRightIcon, Loader2Icon } from 'lucide-react';\nimport { CheckIcon } from '../ReactIcons/CheckIcon';\nimport { Fragment, useMemo, useState } from 'react';\nimport { roadmapTreeMappingOptions } from '../../queries/roadmap-tree';\nimport { queryClient } from '../../stores/query-client';\nimport { httpPost } from '../../lib/query-http';\nimport {\n renderTopicProgress,\n updateResourceProgress,\n type ResourceProgressType,\n} from '../../lib/resource-progress';\nimport { userResourceProgressOptions } from '../../queries/resource-progress';\nimport { useToast } from '../../hooks/use-toast';\nimport { cn } from '../../lib/classname';\n\ntype UpdateUserProgress = {\n id: string;\n action: 'done' | 'learning' | 'skipped' | 'pending';\n};\n\nexport function parseUserProgress(content: string): UpdateUserProgress[] {\n const items: UpdateUserProgress[] = [];\n\n const progressRegex = /.*?<\\/update-progress-item>/gs;\n const progressItems = content.match(progressRegex);\n if (!progressItems) {\n return items;\n }\n\n for (const progressItem of progressItems) {\n const progressItemRegex = /(.*?)<\\/topic-id>/;\n const topicId = progressItem.match(progressItemRegex)?.[1]?.trim();\n const topicActionRegex = /(.*?)<\\/topic-action>/;\n const topicAction = progressItem\n .match(topicActionRegex)?.[1]\n .trim()\n ?.toLowerCase();\n\n if (!topicId || !topicAction) {\n continue;\n }\n\n items.push({\n id: topicId,\n action: topicAction as UpdateUserProgress['action'],\n });\n }\n\n return items;\n}\n\ntype BulkUpdateResourceProgressBody = {\n done: string[];\n learning: string[];\n skipped: string[];\n pending: string[];\n};\n\ntype BulkUpdateResourceProgressResponse = {\n done: string[];\n learning: string[];\n skipped: string[];\n};\n\ntype UserProgressActionListProps = {\n roadmapId: string;\n isLoading?: boolean;\n updateUserProgress: UpdateUserProgress[];\n};\n\nexport function UserProgressActionList(props: UserProgressActionListProps) {\n const { roadmapId, updateUserProgress, isLoading = false } = props;\n\n const toast = useToast();\n const { data: roadmapTreeData } = useQuery(\n roadmapTreeMappingOptions(roadmapId),\n queryClient,\n );\n\n const {\n mutate: bulkUpdateResourceProgress,\n isPending: isBulkUpdating,\n isSuccess: isBulkUpdateSuccess,\n } = useMutation(\n {\n mutationFn: (body: BulkUpdateResourceProgressBody) => {\n return httpPost(\n `/v1-bulk-update-resource-progress/${roadmapId}`,\n body,\n );\n },\n onSuccess: () => {\n updateUserProgress.forEach((item) => {\n renderTopicProgress(item.id, item.action);\n });\n\n return queryClient.invalidateQueries(\n userResourceProgressOptions('roadmap', roadmapId),\n );\n },\n onError: (error) => {\n toast.error(\n error?.message ?? 'Something went wrong, please try again.',\n );\n },\n },\n queryClient,\n );\n\n const progressItemWithText = useMemo(() => {\n return updateUserProgress.map((item) => {\n const roadmapTreeItem = roadmapTreeData?.find(\n (mapping) => mapping.nodeId === item.id,\n );\n\n return {\n ...item,\n text: (roadmapTreeItem?.text || item.id)\n ?.split(' > ')\n .slice(1)\n .join(' > '),\n };\n });\n }, [updateUserProgress, roadmapTreeData]);\n\n const [showAll, setShowAll] = useState(false);\n const itemCountToShow = 4;\n const itemsToShow = showAll\n ? progressItemWithText\n : progressItemWithText.slice(0, itemCountToShow);\n\n const hasMoreItemsToShow = progressItemWithText.length > itemCountToShow;\n\n return (\n
    \n
    \n {itemsToShow.map((item) => (\n \n ))}\n\n {hasMoreItemsToShow && (\n
    \n setShowAll(!showAll)}\n disabled={isLoading}\n >\n {isLoading && (\n <>\n \n {progressItemWithText.length} loaded ..\n \n )}\n\n {!isLoading && (\n <>\n {showAll\n ? '- Show Less'\n : `+ Show ${progressItemWithText.length - itemCountToShow} More`}\n \n )}\n \n\n {\n const done = updateUserProgress\n .filter((item) => item.action === 'done')\n .map((item) => item.id);\n const learning = updateUserProgress\n .filter((item) => item.action === 'learning')\n .map((item) => item.id);\n const skipped = updateUserProgress\n .filter((item) => item.action === 'skipped')\n .map((item) => item.id);\n const pending = updateUserProgress\n .filter((item) => item.action === 'pending')\n .map((item) => item.id);\n\n bulkUpdateResourceProgress({\n done,\n learning,\n skipped,\n pending,\n });\n }}\n >\n {isBulkUpdating && (\n \n )}\n {!isBulkUpdating && }\n Apply All\n \n
    \n )}\n
    \n
    \n );\n}\n\ntype ProgressItemProps = {\n roadmapId: string;\n topicId: string;\n text: string;\n action: UpdateUserProgress['action'];\n isStreaming: boolean;\n isBulkUpdating: boolean;\n isBulkUpdateSuccess: boolean;\n};\n\nfunction ProgressItem(props: ProgressItemProps) {\n const {\n roadmapId,\n topicId,\n text,\n action,\n isStreaming,\n isBulkUpdating,\n isBulkUpdateSuccess,\n } = props;\n\n const toast = useToast();\n const {\n mutate: updateTopicStatus,\n isSuccess,\n isPending: isUpdating,\n } = useMutation(\n {\n mutationFn: (action: ResourceProgressType) => {\n return updateResourceProgress(\n {\n resourceId: roadmapId,\n resourceType: 'roadmap',\n topicId,\n },\n action,\n );\n },\n onMutate: () => {},\n onSuccess: () => {\n renderTopicProgress(topicId, action);\n },\n onError: () => {\n toast.error('Something went wrong, please try again.');\n },\n onSettled: () => {\n return queryClient.invalidateQueries(\n userResourceProgressOptions('roadmap', roadmapId),\n );\n },\n },\n queryClient,\n );\n\n const textParts = text.split(' > ');\n const lastIndex = textParts.length - 1;\n\n return (\n
    \n \n {textParts.map((part, index) => {\n return (\n \n {part}\n {index !== lastIndex && (\n \n {' '}\n \n )}\n \n );\n })}\n \n {!isSuccess && !isBulkUpdateSuccess && (\n <>\n {!isStreaming && (\n updateTopicStatus(action)}\n disabled={isStreaming || isUpdating || isBulkUpdating}\n >\n {(isUpdating || isBulkUpdating) && (\n \n )}\n {!isUpdating && !isBulkUpdating && (\n <>\n \n Mark it as {action}\n \n )}\n \n )}\n {isStreaming && (\n \n \n \n )}\n \n )}\n {(isSuccess || isBulkUpdateSuccess) && (\n \n \n \n )}\n
    \n );\n}\n" }, { "path": "src/components/ChatMessages/UserProgressList.tsx", "content": "import { useQuery } from '@tanstack/react-query';\nimport { getPercentage } from '../../lib/number';\nimport { userResourceProgressOptions } from '../../queries/resource-progress';\nimport { queryClient } from '../../stores/query-client';\n\ntype RoadmapChatUserProgressListProps = {\n roadmapId: string;\n};\n\nexport function RoadmapChatUserProgressList(\n props: RoadmapChatUserProgressListProps,\n) {\n const { roadmapId } = props;\n\n const { data: userResourceProgressData } = useQuery(\n userResourceProgressOptions('roadmap', roadmapId),\n queryClient,\n );\n\n const doneCount = userResourceProgressData?.done?.length ?? 0;\n const skippedCount = userResourceProgressData?.skipped?.length ?? 0;\n\n const totalTopicCount = userResourceProgressData?.totalTopicCount ?? 0;\n const totalFinished = doneCount + skippedCount;\n const progressPercentage = getPercentage(totalFinished, totalTopicCount);\n\n return (\n
    \n
    \n
    \n Progress\n \n {progressPercentage}%\n \n
    \n \n {totalFinished} / {totalTopicCount} topics\n \n
    \n\n
    \n \n
    \n\n
    \n
    \n
    \n Completed: {doneCount}\n
    \n
    \n
    \n Skipped: {skippedCount}\n
    \n
    \n
    \n );\n}\n" }, { "path": "src/components/CommandMenu/CommandMenu.tsx", "content": "import {\n Fragment,\n type ReactElement,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useKeydown } from '../../hooks/use-keydown';\nimport { useOutsideClick } from '../../hooks/use-outside-click';\nimport { httpGet } from '../../lib/http';\nimport { isLoggedIn } from '../../lib/jwt';\nimport { BestPracticesIcon } from '../ReactIcons/BestPracticesIcon.tsx';\nimport { UserIcon } from '../ReactIcons/UserIcon.tsx';\nimport { GroupIcon } from '../ReactIcons/GroupIcon.tsx';\nimport { RoadmapIcon } from '../ReactIcons/RoadmapIcon.tsx';\nimport { ClipboardIcon } from '../ReactIcons/ClipboardIcon.tsx';\nimport { GuideIcon } from '../ReactIcons/GuideIcon.tsx';\nimport { HomeIcon } from '../ReactIcons/HomeIcon.tsx';\nimport { VideoIcon } from '../ReactIcons/VideoIcon.tsx';\nimport { cn } from '../../lib/classname.ts';\nimport type { AllowedRoadmapRenderer } from '../../lib/roadmap.ts';\n\nexport type PageType = {\n id: string;\n url: string;\n title: string;\n group: string;\n icon?: ReactElement;\n isProtected?: boolean;\n metadata?: Record;\n renderer?: AllowedRoadmapRenderer;\n};\n\nconst defaultPages: PageType[] = [\n {\n id: 'home',\n url: '/',\n title: 'Home',\n group: 'Pages',\n icon: ,\n },\n {\n id: 'account',\n url: '/account',\n title: 'Account',\n group: 'Pages',\n icon: ,\n isProtected: true,\n },\n {\n id: 'team',\n url: '/team',\n title: 'Teams',\n group: 'Pages',\n icon: ,\n isProtected: true,\n },\n {\n id: 'friends',\n url: '/account/friends',\n title: 'Friends',\n group: 'Pages',\n icon: ,\n isProtected: true,\n },\n {\n id: 'roadmaps',\n url: '/roadmaps',\n title: 'Roadmaps',\n group: 'Pages',\n icon: ,\n },\n {\n id: 'account-roadmaps',\n url: '/account/roadmaps',\n title: 'Custom Roadmaps',\n group: 'Pages',\n icon: ,\n isProtected: true,\n },\n {\n id: 'questions',\n url: '/questions',\n title: 'Questions',\n group: 'Pages',\n icon: ,\n },\n {\n id: 'guides',\n url: '/guides',\n title: 'Guides',\n group: 'Pages',\n icon: ,\n },\n {\n id: 'videos',\n url: '/videos',\n title: 'Videos',\n group: 'Pages',\n icon: ,\n },\n];\n\nfunction shouldShowPage(page: PageType) {\n const isUser = isLoggedIn();\n\n return !page.isProtected || isUser;\n}\n\nexport function CommandMenu() {\n const inputRef = useRef(null);\n const modalRef = useRef(null);\n const [isActive, setIsActive] = useState(false);\n const [allPages, setAllPages] = useState([]);\n const [searchResults, setSearchResults] = useState(defaultPages);\n const [searchedText, setSearchedText] = useState('');\n const [activeCounter, setActiveCounter] = useState(0);\n\n useKeydown('mod_k', () => {\n setIsActive(true);\n });\n\n useOutsideClick(modalRef, () => {\n setSearchedText('');\n setIsActive(false);\n });\n\n useEffect(() => {\n function handleToggleTopic(e: any) {\n setIsActive(true);\n }\n\n getAllPages();\n window.addEventListener(`command.k`, handleToggleTopic);\n return () => {\n window.removeEventListener(`command.k`, handleToggleTopic);\n };\n }, []);\n\n useEffect(() => {\n if (!isActive || !inputRef.current) {\n return;\n }\n\n inputRef.current.focus();\n }, [isActive]);\n\n async function getAllPages() {\n if (allPages.length > 0) {\n return allPages;\n }\n const { error, response } = await httpGet(`/pages.json`);\n if (!response) {\n return defaultPages.filter(shouldShowPage);\n }\n\n setAllPages([...defaultPages, ...response].filter(shouldShowPage));\n\n return response;\n }\n\n useEffect(() => {\n if (!searchedText) {\n setSearchResults(defaultPages.filter(shouldShowPage));\n return;\n }\n\n const normalizedSearchText = searchedText.trim().toLowerCase();\n getAllPages().then((unfilteredPages = defaultPages) => {\n const filteredPages = unfilteredPages\n .filter((currPage: PageType) => {\n return (\n currPage.title.toLowerCase().indexOf(normalizedSearchText) !== -1\n );\n })\n .slice(0, 10);\n\n setActiveCounter(0);\n setSearchResults(filteredPages);\n });\n }, [searchedText]);\n\n if (!isActive) {\n return null;\n }\n\n return (\n
    \n
    \n
    \n {\n const value = (e.target as HTMLInputElement).value.trim();\n setSearchedText(value);\n }}\n onKeyDown={(e) => {\n if (e.key === 'ArrowDown') {\n const canGoNext = activeCounter < searchResults.length - 1;\n setActiveCounter(canGoNext ? activeCounter + 1 : 0);\n } else if (e.key === 'ArrowUp') {\n const canGoPrev = activeCounter > 0;\n setActiveCounter(\n canGoPrev ? activeCounter - 1 : searchResults.length - 1,\n );\n } else if (e.key === 'Tab') {\n e.preventDefault();\n } else if (e.key === 'Escape') {\n setSearchedText('');\n setIsActive(false);\n } else if (e.key === 'Enter') {\n const activePage = searchResults[activeCounter];\n if (activePage) {\n window.location.href = activePage.url;\n }\n }\n }}\n />\n\n
    \n
    \n {searchResults.length === 0 && (\n
    \n No results found\n
    \n )}\n\n {searchResults.map((page: PageType, counter: number) => {\n const prevPage = searchResults[counter - 1];\n const groupChanged = prevPage && prevPage.group !== page.group;\n\n return (\n \n {groupChanged && (\n
    \n )}\n setActiveCounter(counter)}\n href={page.url}\n >\n {!page.icon && (\n {page.group}\n )}\n {page.icon && page.icon}\n {page.title}\n \n     \n );\n })}\n
    \n
    \n
    \n
    \n
    \n );\n}\n" }, { "path": "src/components/Confetti.tsx", "content": "import { useEffect, useState } from 'react';\nimport ReactConfetti from 'react-confetti';\n\ntype ConfettiPosition = {\n x: number;\n y: number;\n w: number;\n h: number;\n};\n\ntype ConfettiProps = {\n pieces?: number;\n element?: HTMLElement | null;\n onDone?: () => void;\n};\n\nexport function Confetti(props: ConfettiProps) {\n const { element = document.body, onDone = () => null, pieces = 40 } = props;\n\n const [confettiPos, setConfettiPos] = useState<\n undefined | ConfettiPosition\n >();\n\n function populateConfettiPosition(element: HTMLElement) {\n const elRect = element.getBoundingClientRect();\n\n // set confetti position, keeping in mind the scroll values\n setConfettiPos({\n x: elRect?.x || 0,\n y: (elRect?.y || 0) + window.scrollY,\n w: elRect?.width || 0,\n h: elRect?.height || 0,\n });\n }\n\n useEffect(() => {\n if (!element) {\n setConfettiPos(undefined);\n return;\n }\n\n populateConfettiPosition(element);\n }, [element]);\n\n if (!confettiPos) {\n return null;\n }\n\n return (\n {\n setConfettiPos(undefined);\n onDone();\n }}\n initialVelocityX={4}\n initialVelocityY={8}\n tweenDuration={10}\n confettiSource={{\n x: confettiPos.x,\n y: confettiPos.y,\n w: confettiPos.w,\n h: confettiPos.h,\n }}\n />\n );\n}\n" }, { "path": "src/components/ContentGenerator/ContentGenerator.tsx", "content": "import {\n BookOpenIcon,\n FileTextIcon,\n MapIcon,\n SparklesIcon,\n type LucideIcon,\n} from 'lucide-react';\nimport { useEffect, useId, useState } from 'react';\nimport { FormatItem } from './FormatItem';\nimport { isLoggedIn } from '../../lib/jwt';\nimport { showLoginPopup } from '../../lib/popup';\nimport { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';\nimport { useIsPaidUser } from '../../queries/billing';\nimport {\n clearQuestionAnswerChatMessages,\n storeQuestionAnswerChatMessages,\n} from '../../lib/ai-questions';\nimport {\n QuestionAnswerChat,\n type QuestionAnswerChatMessage,\n} from './QuestionAnswerChat';\nimport { useToast } from '../../hooks/use-toast';\nimport { cn } from '../../lib/classname';\nimport { getUrlParams, setUrlParams } from '../../lib/browser';\nimport { useParams } from '../../hooks/use-params';\nimport { useQuery } from '@tanstack/react-query';\nimport { aiLimitOptions } from '../../queries/ai-course';\nimport { queryClient } from '../../stores/query-client';\nimport { showUpgradeModal } from '../../stores/subscription';\n\nconst allowedFormats = ['course', 'guide', 'roadmap'] as const;\nexport type AllowedFormat = (typeof allowedFormats)[number];\n\nexport function ContentGenerator() {\n const [isUpgradeModalOpen, setIsUpgradeModalOpen] = useState(false);\n const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();\n const params = useParams<{ format: AllowedFormat }>();\n\n const toast = useToast();\n const [title, setTitle] = useState('');\n const [selectedFormat, setSelectedFormat] = useState('course');\n\n const { data: limits, isLoading: isLimitLoading } = useQuery(\n aiLimitOptions(),\n queryClient,\n );\n\n useEffect(() => {\n const isValidFormat = allowedFormats.find(\n (format) => format.value === params.format,\n );\n\n if (isValidFormat) {\n setSelectedFormat(isValidFormat.value);\n } else {\n setSelectedFormat('course');\n }\n }, [params.format]);\n\n const [showFineTuneOptions, setShowFineTuneOptions] = useState(false);\n const [questionAnswerChatMessages, setQuestionAnswerChatMessages] = useState<\n QuestionAnswerChatMessage[]\n >([]);\n\n const titleFieldId = useId();\n const fineTuneOptionsId = useId();\n\n useEffect(() => {\n const params = getUrlParams();\n const format = params.format as AllowedFormat;\n if (format && allowedFormats.find((f) => f.value === format)) {\n setSelectedFormat(format);\n }\n }, []);\n\n const allowedFormats: {\n label: string;\n icon: LucideIcon;\n value: AllowedFormat;\n }[] = [\n {\n label: 'Course',\n icon: BookOpenIcon,\n value: 'course',\n },\n {\n label: 'Guide',\n icon: FileTextIcon,\n value: 'guide',\n },\n {\n label: 'Roadmap',\n icon: MapIcon,\n value: 'roadmap',\n },\n ];\n\n const selectedLimit = limits?.[selectedFormat];\n const showLimitWarning =\n !isPaidUser && !isPaidUserLoading && !isLimitLoading && isLoggedIn();\n\n const handleSubmit = () => {\n if (!isLoggedIn()) {\n showLoginPopup();\n return;\n }\n\n if (\n !isPaidUser &&\n selectedLimit &&\n selectedLimit?.used >= selectedLimit?.limit\n ) {\n showUpgradeModal();\n return;\n }\n\n let sessionId = '';\n if (showFineTuneOptions) {\n clearQuestionAnswerChatMessages();\n sessionId = storeQuestionAnswerChatMessages(questionAnswerChatMessages);\n }\n\n const trimmedTitle = title.trim();\n if (selectedFormat === 'course') {\n window.location.href = `/ai/course?term=${encodeURIComponent(trimmedTitle)}&id=${sessionId}&format=${selectedFormat}`;\n } else if (selectedFormat === 'guide') {\n window.location.href = `/ai/guide?term=${encodeURIComponent(trimmedTitle)}&id=${sessionId}&format=${selectedFormat}`;\n } else if (selectedFormat === 'roadmap') {\n window.location.href = `/ai/roadmap?term=${encodeURIComponent(trimmedTitle)}&id=${sessionId}&format=${selectedFormat}`;\n }\n };\n\n useEffect(() => {\n window?.fireEvent({\n action: 'tutor_user',\n category: 'ai_tutor',\n label: 'Visited AI Course Page',\n });\n }, []);\n\n const trimmedTitle = title.trim();\n const canGenerate = trimmedTitle && trimmedTitle.length >= 3;\n\n return (\n
    \n
    \n {isUpgradeModalOpen && (\n setIsUpgradeModalOpen(false)} />\n )}\n {showLimitWarning && (\n
    \n {selectedLimit?.used} of {selectedLimit?.limit} {selectedFormat}s\n setIsUpgradeModalOpen(true)}\n className=\"ml-2 rounded-xl bg-yellow-600 px-2 py-1 text-sm text-white hover:opacity-80\"\n >\n Need more? Upgrade\n \n
    \n )}\n\n

    \n What can I help you learn?\n

    \n

    \n Enter a topic below to generate a personalized course for it\n

    \n
    \n\n {\n e.preventDefault();\n handleSubmit();\n }}\n >\n
    \n \n {\n setTitle(e.target.value);\n setShowFineTuneOptions(false);\n }}\n className=\"block w-full rounded-xl border border-gray-200 bg-white p-4 outline-none placeholder:text-gray-500 focus:border-gray-500\"\n required\n minLength={3}\n data-clarity-unmask=\"true\"\n />\n
    \n
    \n \n
    \n {allowedFormats.map((format) => {\n const isSelected = format.value === selectedFormat;\n\n return (\n {\n setSelectedFormat(format.value);\n setUrlParams({ format: format.value });\n }}\n icon={format.icon}\n isSelected={isSelected}\n />\n );\n })}\n
    \n
    \n\n \n {\n if (!trimmedTitle) {\n toast.error('Please enter a topic first');\n return;\n }\n\n if (trimmedTitle.length < 3) {\n toast.error('Topic must be at least 3 characters long');\n return;\n }\n\n setShowFineTuneOptions(e.target.checked);\n }}\n />\n \n Answer the following questions for a better {selectedFormat}\n \n Customize your {selectedFormat}\n \n\n {showFineTuneOptions && (\n \n )}\n\n \n \n Generate\n \n \n
    \n );\n}\n" }, { "path": "src/components/ContentGenerator/FormatItem.tsx", "content": "import { type LucideIcon } from 'lucide-react';\nimport { cn } from '../../lib/classname';\n\ntype FormatItemProps = {\n label: string;\n onClick: () => void;\n icon: LucideIcon;\n isSelected: boolean;\n};\n\nexport function FormatItem(props: FormatItemProps) {\n const { label, onClick, icon: Icon, isSelected } = props;\n\n return (\n \n \n {label}\n \n );\n}\n" }, { "path": "src/components/ContentGenerator/QuestionAnswerChat.tsx", "content": "import { useQuery } from '@tanstack/react-query';\nimport { queryClient } from '../../stores/query-client';\nimport {\n aiQuestionSuggestionsOptions,\n type AIQuestionSuggestionsResponse,\n} from '../../queries/user-ai-session';\nimport type { AllowedFormat } from './ContentGenerator';\nimport { Loader2Icon, RefreshCcwIcon, SendIcon, Trash2 } from 'lucide-react';\nimport { useEffect, useRef, useState } from 'react';\nimport { cn } from '../../lib/classname';\nimport { flushSync } from 'react-dom';\nimport { CheckIcon } from '../ReactIcons/CheckIcon';\nimport { Tooltip } from '../Tooltip';\n\nexport type QuestionAnswerChatMessage =\n | { role: 'user'; answer: string }\n | {\n role: 'assistant';\n question: string;\n possibleAnswers: string[];\n };\n\ntype QuestionAnswerChatProps = {\n term: string;\n format: AllowedFormat | (string & {});\n questionAnswerChatMessages: QuestionAnswerChatMessage[];\n setQuestionAnswerChatMessages: (\n messages: QuestionAnswerChatMessage[],\n ) => void;\n defaultQuestions?: AIQuestionSuggestionsResponse['questions'];\n type?: 'create' | 'update';\n\n from?: 'content' | 'quiz';\n\n className?: string;\n};\n\nexport function QuestionAnswerChat(props: QuestionAnswerChatProps) {\n const {\n term,\n format,\n defaultQuestions,\n questionAnswerChatMessages,\n setQuestionAnswerChatMessages,\n type = 'create',\n className = '',\n from = 'content',\n } = props;\n\n const [activeMessageIndex, setActiveMessageIndex] = useState(\n defaultQuestions?.length ?? 0,\n );\n const [message, setMessage] = useState('');\n const [status, setStatus] = useState<'answering' | 'done'>('answering');\n\n const scrollAreaRef = useRef(null);\n const inputRef = useRef(null);\n\n const {\n data: aiQuestionSuggestions,\n isLoading: isLoadingAiQuestionSuggestions,\n } = useQuery(\n aiQuestionSuggestionsOptions({ term, format, from }, defaultQuestions),\n queryClient,\n );\n\n const activeMessage = aiQuestionSuggestions?.questions[activeMessageIndex];\n\n const scrollToBottom = () => {\n if (!scrollAreaRef.current) {\n return;\n }\n\n scrollAreaRef.current.scrollTo({\n top: scrollAreaRef.current.scrollHeight,\n behavior: 'instant',\n });\n };\n const handleAnswerSelect = (answer: string) => {\n const trimmedAnswer = answer.trim();\n if (!activeMessage || !trimmedAnswer) {\n return;\n }\n\n const newMessages: QuestionAnswerChatMessage[] = [\n ...questionAnswerChatMessages,\n {\n role: 'assistant',\n ...activeMessage,\n },\n {\n role: 'user',\n answer: trimmedAnswer,\n },\n ];\n\n setQuestionAnswerChatMessages(newMessages);\n setMessage('');\n\n const hasMoreMessages =\n activeMessageIndex < aiQuestionSuggestions.questions.length - 1;\n if (!hasMoreMessages) {\n setStatus('done');\n return;\n }\n\n flushSync(() => {\n setActiveMessageIndex(activeMessageIndex + 1);\n setStatus('answering');\n\n // focus the input\n inputRef.current?.focus();\n });\n\n scrollToBottom();\n };\n\n const handleReset = () => {\n setQuestionAnswerChatMessages([]);\n setActiveMessageIndex(0);\n setStatus('answering');\n };\n\n const handleEditMessage = (messageIndex: number) => {\n // Remove the assistant question and user answer pair\n // Since user messages are at odd indices, we want to remove both\n // the assistant message (at messageIndex - 1) and the user message (at messageIndex)\n const assistantMessageIndex = messageIndex - 1;\n const newMessages = questionAnswerChatMessages.slice(\n 0,\n assistantMessageIndex,\n );\n setQuestionAnswerChatMessages(newMessages);\n\n // Calculate which question should be active\n // Since we removed both assistant and user messages, the question index\n // is simply assistantMessageIndex / 2\n const questionIndex = Math.floor(assistantMessageIndex / 2);\n setActiveMessageIndex(questionIndex);\n setStatus('answering');\n\n setMessage('');\n setTimeout(() => {\n inputRef.current?.focus();\n }, 0);\n };\n\n useEffect(() => {\n scrollToBottom();\n }, [defaultQuestions, type]);\n\n return (\n <>\n \n {isLoadingAiQuestionSuggestions && (\n
    \n
    \n \n Generating personalized questions...\n
    \n
    \n )}\n\n {!isLoadingAiQuestionSuggestions && status === 'done' && (\n
    \n
    \n \n

    Preferences saved

    \n

    \n You can now start generating {format}\n

    \n\n \n \n Reanswer questions\n \n
    \n
    \n )}\n\n {!isLoadingAiQuestionSuggestions && status === 'answering' && (\n <>\n
    \n \n
    \n
    \n {questionAnswerChatMessages.map((message, index) => (\n handleEditMessage(index)\n : undefined\n }\n />\n ))}\n\n {activeMessage && (\n \n )}\n
    \n
    \n
    \n\n {!activeMessage && type === 'update' && (\n
    \n {\n setQuestionAnswerChatMessages([]);\n setActiveMessageIndex(0);\n setStatus('answering');\n }}\n >\n \n Reanswer all questions\n \n
    \n )}\n\n {activeMessage && (\n
    \n
    \n
    \n setMessage(e.target.value)}\n className=\"w-full bg-transparent text-sm focus:outline-none\"\n placeholder={\n activeMessage.possibleAnswers\n ? 'Type your answer...'\n : 'Or type your own answer...'\n }\n data-clarity-unmask=\"true\"\n autoFocus\n onKeyDown={(e) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n handleAnswerSelect(message);\n setMessage('');\n }\n }}\n />\n\n {\n handleAnswerSelect(message);\n setMessage('');\n }}\n >\n \n \n
    \n
    \n
    \n )}\n
    \n \n )}\n
    \n \n );\n}\n\ntype QuestionAnswerChatMessageProps = {\n role: 'user' | 'assistant';\n question?: string;\n answer?: string;\n possibleAnswers?: string[];\n onAnswerSelect?: (answer: string) => void;\n onEdit?: () => void;\n};\n\nfunction QuestionAnswerChatMessage(props: QuestionAnswerChatMessageProps) {\n const { role, question, answer, possibleAnswers, onAnswerSelect, onEdit } =\n props;\n\n const hasAnswers = possibleAnswers && possibleAnswers.length > 0;\n\n return (\n \n {role === 'assistant' && (\n
    \n
    {question}
    \n {hasAnswers && onAnswerSelect && (\n
    \n
    \n {possibleAnswers.map((answer) => (\n {\n onAnswerSelect(answer);\n }}\n >\n {answer}\n \n ))}\n
    \n
    \n )}\n
    \n )}\n {role === 'user' && (\n
    \n
    {answer}
    \n {onEdit && (\n
    \n \n \n \n \n Reanswer after this point\n \n
    \n )}\n
    \n )}\n \n );\n}\n" }, { "path": "src/components/CookieSettingsButton.tsx", "content": "import { cn } from '../lib/classname';\nimport { Cookie } from 'lucide-react';\n\nexport function CookieSettingsButton() {\n return (\n
    \n {\n // @ts-ignore\n const ot: any = window.OneTrust;\n // @ts-ignore\n const optanon: any = window.Optanon;\n\n if (ot) {\n ot.ToggleInfoDisplay();\n } else if (optanon) {\n optanon.ToggleInfoDisplay();\n } else {\n console.warn('OneTrust/Optanon SDK not found or not loaded yet.');\n }\n }}\n className={cn(\n 'flex items-center gap-2 rounded-md bg-slate-800/80 px-3 py-1.5 text-sm text-gray-400 transition-colors hover:bg-slate-700 hover:text-white',\n )}\n >\n \n Cookie Settings\n \n
    \n );\n}\n" }, { "path": "src/components/CreateTeam/ContentConfirmationModal.tsx", "content": "import { Modal } from '../Modal';\n\ntype ContentConfirmationModalProps = {\n onClose: () => void;\n onClick: (shouldCopy: boolean) => void;\n};\n\nexport function ContentConfirmationModal(props: ContentConfirmationModalProps) {\n const { onClose, onClick } = props;\n\n return (\n \n
    \n

    \n Copy Node Details and Resources?\n

    \n

    \n This will just copy the roadmap in your team. Would you like to copy\n the resource links and node details as well?\n

    \n
    \n {\n onClick(false);\n }}\n >\n No, copy roadmap only\n \n {\n onClick(true);\n }}\n >\n Yes, also copy resources\n \n
    \n
    \n     \n );\n}\n" }, { "path": "src/components/CreateTeam/CreateTeamForm.tsx", "content": "import { useEffect, useState } from 'react';\nimport { Stepper } from '../Stepper';\nimport { Step0, type ValidTeamType } from './Step0';\nimport { Step1, type ValidTeamSize } from './Step1';\nimport { Step2 } from './Step2';\nimport { httpGet } from '../../lib/http';\nimport { getUrlParams, setUrlParams } from '../../lib/browser';\nimport { pageProgressMessage } from '../../stores/page';\nimport type { TeamResourceConfig } from './RoadmapSelector';\nimport { Step3 } from './Step3';\nimport { Step4 } from './Step4';\nimport { useToast } from '../../hooks/use-toast';\n\nexport interface TeamDocument {\n _id?: string;\n name: string;\n avatar?: string;\n creatorId: string;\n links: {\n website?: string;\n github?: string;\n linkedIn?: string;\n };\n type: ValidTeamType;\n personalProgressOnly?: boolean;\n canMemberSendInvite: boolean;\n teamSize?: ValidTeamSize;\n createdAt: Date;\n updatedAt: Date;\n}\n\nexport function CreateTeamForm() {\n // Can't use hook `useParams` because it runs asynchronously\n const { s: queryStepIndex, t: teamId } = getUrlParams();\n\n const toast = useToast();\n const [team, setTeam] = useState();\n\n const [loadingTeam, setLoadingTeam] = useState(!!teamId && !team?._id);\n const [stepIndex, setStepIndex] = useState(0);\n\n async function loadTeam(\n teamIdToFetch: string,\n requiredStepIndex: number | string,\n ) {\n const { response, error } = await httpGet(\n `${import.meta.env.PUBLIC_API_URL}/v1-get-team/${teamIdToFetch}`,\n );\n\n if (error || !response) {\n toast.error(error?.message || 'Error loading team');\n window.location.href = '/account';\n return;\n }\n\n const requiredStepIndexNumber = parseInt(requiredStepIndex as string, 10);\n const completedSteps = Array(requiredStepIndexNumber)\n .fill(1)\n .map((_, counter) => counter);\n\n setTeam(response);\n setSelectedTeamType(response.type);\n setCompletedSteps(completedSteps);\n setStepIndex(requiredStepIndexNumber);\n\n await loadTeamResourceConfig(teamIdToFetch);\n }\n\n const [teamResourceConfig, setTeamResourceConfig] =\n useState([]);\n\n async function loadTeamResourceConfig(teamId: string) {\n const { error, response } = await httpGet(\n `${import.meta.env.PUBLIC_API_URL}/v1-get-team-resource-config/${teamId}`,\n );\n if (error || !Array.isArray(response)) {\n console.error(error);\n return;\n }\n\n setTeamResourceConfig(response);\n }\n\n useEffect(() => {\n if (!teamId || !queryStepIndex || team) {\n return;\n }\n\n pageProgressMessage.set('Fetching team');\n setLoadingTeam(true);\n loadTeam(teamId, queryStepIndex).finally(() => {\n setLoadingTeam(false);\n pageProgressMessage.set('');\n });\n\n // fetch team and move to step\n }, [teamId, queryStepIndex]);\n\n const [selectedTeamType, setSelectedTeamType] = useState(\n team?.type || 'company',\n );\n\n const [completedSteps, setCompletedSteps] = useState([0]);\n if (loadingTeam) {\n return null;\n }\n\n let stepForm = null;\n if (stepIndex === 0) {\n stepForm = (\n {\n if (team?._id) {\n setUrlParams({ t: team._id, s: '1' });\n }\n\n setCompletedSteps([0]);\n setStepIndex(1);\n }}\n />\n );\n } else if (stepIndex === 1) {\n stepForm = (\n {\n if (team?._id) {\n setUrlParams({ t: team._id, s: '0' });\n }\n\n setStepIndex(0);\n }}\n onStepComplete={(team: TeamDocument) => {\n const createdTeamId = team._id!;\n\n setUrlParams({ t: createdTeamId, s: '2' });\n\n setCompletedSteps([0, 1]);\n setStepIndex(2);\n setTeam(team);\n }}\n selectedTeamType={selectedTeamType}\n />\n );\n } else if (stepIndex === 2) {\n stepForm = (\n {\n if (team) {\n setUrlParams({ t: team._id!, s: '1' });\n }\n\n setStepIndex(1);\n }}\n onNext={() => {\n setUrlParams({ t: teamId!, s: '3' });\n setCompletedSteps([0, 1, 2]);\n setStepIndex(3);\n }}\n />\n );\n } else if (stepIndex === 3) {\n stepForm = (\n {\n if (team) {\n setUrlParams({ t: team._id!, s: '2' });\n }\n\n setStepIndex(2);\n }}\n onNext={() => {\n if (team) {\n setUrlParams({ t: team._id!, s: '4' });\n }\n\n setCompletedSteps([0, 1, 2, 3]);\n setStepIndex(4);\n }}\n />\n );\n } else if (stepIndex === 4) {\n stepForm = ;\n }\n\n return (\n
    \n \n

    Create Team

    \n

    \n Complete the steps below to create your team\n

    \n
    \n \n\n {stepForm}\n \n );\n}\n" }, { "path": "src/components/CreateTeam/NextButton.tsx", "content": "import { Spinner } from '../ReactIcons/Spinner';\n\ntype NextButtonProps = {\n isLoading?: boolean;\n loadingMessage?: string;\n text: string;\n hasNextArrow?: boolean;\n onClick?: () => void;\n type?: string;\n};\n\nexport function NextButton(props: NextButtonProps) {\n const {\n isLoading = false,\n text = 'Next Step',\n type = 'button',\n loadingMessage = 'Please wait ..',\n onClick = () => null,\n hasNextArrow = true,\n } = props;\n\n return (\n \n {isLoading ? (\n \n \n {loadingMessage}\n \n ) : (\n <>\n {text}\n {hasNextArrow && →}\n \n )}\n \n );\n}\n" }, { "path": "src/components/CreateTeam/RoadmapSelector.tsx", "content": "import { useEffect, useState } from 'react';\nimport { httpGet, httpPut } from '../../lib/http';\nimport type { PageType } from '../CommandMenu/CommandMenu';\nimport { pageProgressMessage } from '../../stores/page';\nimport { UpdateTeamResourceModal } from './UpdateTeamResourceModal';\nimport { SelectRoadmapModal } from './SelectRoadmapModal';\nimport { Map, Shapes } from 'lucide-react';\nimport type {\n AllowedRoadmapVisibility,\n RoadmapDocument,\n} from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';\nimport { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';\nimport { useToast } from '../../hooks/use-toast';\nimport { ContentConfirmationModal } from './ContentConfirmationModal';\n\nexport type TeamResourceConfig = {\n isCustomResource: boolean;\n roadmapSlug?: string;\n title: string;\n description?: string;\n visibility?: AllowedRoadmapVisibility;\n resourceId: string;\n resourceType: string;\n removed: string[];\n topics?: number;\n sharedTeamMemberIds: string[];\n sharedFriendIds: string[];\n defaultRoadmapId?: string;\n}[];\n\ntype RoadmapSelectorProps = {\n teamId: string;\n teamResources: TeamResourceConfig;\n setTeamResources: (config: TeamResourceConfig) => void;\n};\n\nexport function RoadmapSelector(props: RoadmapSelectorProps) {\n const { teamId, teamResources = [], setTeamResources } = props;\n\n const toast = useToast();\n const [removingRoadmapId, setRemovingRoadmapId] = useState('');\n const [showSelectRoadmapModal, setShowSelectRoadmapModal] = useState(false);\n const [allRoadmaps, setAllRoadmaps] = useState([]);\n const [changingRoadmapId, setChangingRoadmapId] = useState('');\n const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false);\n\n const [error, setError] = useState('');\n const [confirmationContentId, setConfirmationContentId] = useState();\n\n async function loadAllRoadmaps() {\n const { error, response } = await httpGet(`/pages.json`);\n\n if (error) {\n toast.error(error.message || 'Something went wrong. Please try again!');\n setError(error.message || 'Something went wrong. Please try again!');\n return;\n }\n\n if (!response) {\n return [];\n }\n\n const allRoadmaps = response\n .filter((page) => page.group === 'Roadmaps')\n .sort((a, b) => {\n if (a.title === 'Android') return 1;\n return a.title.localeCompare(b.title);\n });\n\n setAllRoadmaps(allRoadmaps);\n return response;\n }\n\n async function deleteResource(roadmapId: string) {\n if (!teamId) {\n return;\n }\n\n pageProgressMessage.set(`Deleting resource`);\n const { error, response } = await httpPut(\n `${\n import.meta.env.PUBLIC_API_URL\n }/v1-delete-team-resource-config/${teamId}`,\n {\n resourceId: roadmapId,\n resourceType: 'roadmap',\n },\n );\n\n if (error || !response) {\n setError(error?.message || 'Error deleting roadmap');\n return;\n }\n\n setTeamResources(response);\n }\n\n async function onRemove(resourceId: string) {\n pageProgressMessage.set('Removing roadmap');\n\n deleteResource(resourceId).finally(() => {\n pageProgressMessage.set('');\n });\n }\n\n async function addTeamResource(roadmapId: string, shouldCopyContent = false) {\n if (!teamId) {\n return;\n }\n\n pageProgressMessage.set(`Adding roadmap to team`);\n const renderer = allRoadmaps.find((r) => r.id === roadmapId)?.renderer;\n const { error, response } = await httpPut(\n `${\n import.meta.env.PUBLIC_API_URL\n }/v1-update-team-resource-config/${teamId}`,\n {\n teamId: teamId,\n resourceId: roadmapId,\n resourceType: 'roadmap',\n removed: [],\n renderer: renderer || 'balsamiq',\n shouldCopyContent,\n },\n );\n\n if (error || !response) {\n setError(error?.message || 'Error adding roadmap');\n return;\n }\n\n setTeamResources(response);\n if (renderer === 'editor') {\n setShowSelectRoadmapModal(false);\n }\n }\n\n useEffect(() => {\n loadAllRoadmaps().finally(() => {});\n }, []);\n\n function handleCustomRoadmapCreated(roadmap: RoadmapDocument) {\n const { _id: roadmapId } = roadmap;\n if (!roadmapId) {\n return;\n }\n\n loadAllRoadmaps().finally(() => {});\n addTeamResource(roadmapId).finally(() => {\n pageProgressMessage.set('');\n });\n }\n\n const confirmationContentIdModal = confirmationContentId && (\n {\n setConfirmationContentId('');\n }}\n onClick={(shouldCopy) => {\n addTeamResource(confirmationContentId, shouldCopy).finally(() => {\n pageProgressMessage.set('');\n setConfirmationContentId('');\n });\n }}\n />\n );\n\n return (\n
    \n {confirmationContentIdModal}\n\n {changingRoadmapId && (\n setChangingRoadmapId('')}\n resourceId={changingRoadmapId}\n resourceType={'roadmap'}\n teamId={teamId}\n setTeamResourceConfig={setTeamResources}\n defaultRemovedItems={\n teamResources.find((c) => c.resourceId === changingRoadmapId)\n ?.removed || []\n }\n />\n )}\n {showSelectRoadmapModal && (\n setShowSelectRoadmapModal(false)}\n teamResourceConfig={teamResources.map((r) => r.resourceId)}\n allRoadmaps={allRoadmaps.filter((r) => r.renderer === 'editor')}\n teamId={teamId}\n onRoadmapAdd={(roadmapId) => {\n const isEditorRoadmap = allRoadmaps.find(\n (r) => r.id === roadmapId && r.renderer === 'editor',\n );\n\n if (!isEditorRoadmap) {\n addTeamResource(roadmapId).finally(() => {\n pageProgressMessage.set('');\n });\n\n return;\n }\n\n setShowSelectRoadmapModal(false);\n setConfirmationContentId(roadmapId);\n }}\n onRoadmapRemove={(roadmapId) => {\n onRemove(roadmapId).finally(() => {});\n }}\n />\n )}\n\n
    \n {isCreatingRoadmap && (\n setIsCreatingRoadmap(false)}\n onCreated={(roadmap: RoadmapDocument) => {\n handleCustomRoadmapCreated(roadmap);\n setIsCreatingRoadmap(false);\n }}\n />\n )}\n\n {\n setShowSelectRoadmapModal(true);\n }}\n >\n \n Pick from our roadmaps\n \n\n or\n\n {\n setIsCreatingRoadmap(true);\n }}\n >\n \n Create Custom Roadmap\n \n
    \n\n {!teamResources.length && (\n
    \n \n

    No roadmaps selected.

    \n

    \n Pick from{' '}\n setShowSelectRoadmapModal(true)}\n className=\"cursor-pointer underline\"\n >\n our roadmaps\n {' '}\n or{' '}\n {\n setIsCreatingRoadmap(true);\n }}\n className=\"cursor-pointer underline\"\n >\n create a new one\n \n .\n

    \n
    \n )}\n\n {teamResources.length > 0 && (\n
    \n {teamResources.map(\n ({\n isCustomResource,\n title: roadmapTitle,\n resourceId,\n removed: removedTopics,\n topics,\n }) => {\n return (\n \n
    \n \n {roadmapTitle}\n \n {removedTopics.length > 0 || (topics && topics > 0) ? (\n \n {isCustomResource ? (\n <>\n Custom · {topics} topic\n {topics && topics > 1 ? 's' : ''}\n \n ) : (\n <>\n {removedTopics.length} topic\n {removedTopics.length > 1 ? 's' : ''} removed\n \n )}\n \n ) : (\n \n {isCustomResource\n ? 'Placeholder roadmap.'\n : 'No changes made ..'}\n \n )}\n
    \n\n {removingRoadmapId === resourceId && (\n \n \n Are you sure?{' '}\n onRemove(resourceId)}\n className=\"mx-0.5 text-red-500 underline underline-offset-1\"\n >\n Yes\n {' '}\n setRemovingRoadmapId('')}\n className=\"text-red-500 underline underline-offset-1\"\n >\n No\n \n \n
    \n )}\n {(!removingRoadmapId || removingRoadmapId !== resourceId) && (\n
    \n {\n if (isCustomResource) {\n window.open(\n `${\n import.meta.env.PUBLIC_EDITOR_APP_URL\n }/${resourceId}`,\n '_blank',\n );\n return;\n }\n setChangingRoadmapId(resourceId);\n }}\n >\n Customize\n \n\n setRemovingRoadmapId(resourceId)}\n >\n Remove\n \n
    \n )}\n
    \n );\n },\n )}\n \n )}\n \n );\n}\n" }, { "path": "src/components/CreateTeam/RoleDropdown.tsx", "content": "import { ChevronDownIcon } from '../ReactIcons/ChevronDownIcon';\nimport { useRef, useState } from 'react';\nimport { useOutsideClick } from '../../hooks/use-outside-click';\n\nconst allowedRoles = [\n {\n name: 'Admin',\n value: 'admin',\n description: 'Can do everything',\n },\n {\n name: 'Manager',\n value: 'manager',\n description: 'Can manage team and skills',\n },\n {\n name: 'Member',\n value: 'member',\n description: 'Can view team and skills',\n },\n] as const;\n\nexport type AllowedRoles = (typeof allowedRoles)[number]['value'];\n\ntype RoleDropdownProps = {\n className?: string;\n selectedRole: string;\n setSelectedRole: (role: AllowedRoles) => void;\n};\n\nexport function RoleDropdown(props: RoleDropdownProps) {\n const { selectedRole, setSelectedRole, className = 'w-[120px]' } = props;\n const dropdownRef = useRef(null);\n\n const [activeRoleIndex, setActiveRoleIndex] = useState(0);\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n useOutsideClick(dropdownRef, () => {\n setIsMenuOpen(false);\n });\n\n return (\n
    \n {\n const isUpOrDown = e.key === 'ArrowUp' || e.key === 'ArrowDown';\n if (isUpOrDown && !isMenuOpen) {\n e.preventDefault();\n setIsMenuOpen(true);\n return;\n }\n\n const isEnter = e.key === 'Enter';\n if (isEnter && isMenuOpen) {\n e.preventDefault();\n setSelectedRole(allowedRoles[activeRoleIndex].value);\n setIsMenuOpen(false);\n return;\n }\n\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n setActiveRoleIndex((prev) => {\n const nextIndex = prev + 1;\n if (nextIndex >= allowedRoles.length) {\n return 0;\n }\n return nextIndex;\n });\n }\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n setActiveRoleIndex((prev) => {\n const nextIndex = prev - 1;\n if (nextIndex < 0) {\n return allowedRoles.length - 1;\n }\n return nextIndex;\n });\n }\n }}\n onClick={() => setIsMenuOpen(!isMenuOpen)}\n className={`flex h-full w-full cursor-default items-center justify-between rounded-md border px-4 ${\n isMenuOpen ? 'border-gray-300 bg-gray-100' : ''\n }`}\n >\n \n {selectedRole || 'Select Role'}\n \n \n \n\n {isMenuOpen && (\n \n \n {allowedRoles.map((allowedRole, roleCounter) => (\n {\n setIsMenuOpen(false);\n setSelectedRole(allowedRole.value);\n }}\n >\n {allowedRole.name}\n \n {allowedRole.description}\n \n \n ))}\n
    \n \n )}\n \n );\n}\n" }, { "path": "src/components/CreateTeam/SelectRoadmapModal.tsx", "content": "import { useEffect, useRef, useState } from 'react';\nimport { useKeydown } from '../../hooks/use-keydown';\nimport { useOutsideClick } from '../../hooks/use-outside-click';\nimport type { PageType } from '../CommandMenu/CommandMenu';\nimport type { TeamResourceConfig } from './RoadmapSelector';\nimport { SelectRoadmapModalItem } from './SelectRoadmapModalItem';\nimport { XIcon } from 'lucide-react';\n\nexport type SelectRoadmapModalProps = {\n teamId: string;\n allRoadmaps: PageType[];\n onClose: () => void;\n teamResourceConfig: string[];\n onRoadmapAdd: (roadmapId: string) => void;\n onRoadmapRemove: (roadmapId: string) => void;\n};\n\nexport function SelectRoadmapModal(props: SelectRoadmapModalProps) {\n const {\n onClose,\n allRoadmaps,\n onRoadmapAdd,\n onRoadmapRemove,\n teamResourceConfig,\n } = props;\n const popupBodyEl = useRef(null);\n const searchInputEl = useRef(null);\n\n const [searchResults, setSearchResults] = useState(allRoadmaps);\n const [searchText, setSearchText] = useState('');\n\n useKeydown('Escape', () => {\n onClose();\n });\n\n useOutsideClick(popupBodyEl, () => {\n onClose();\n });\n\n useEffect(() => {\n if (!searchInputEl.current) {\n return;\n }\n\n searchInputEl.current.focus();\n }, [searchInputEl]);\n\n useEffect(() => {\n if (searchText.length === 0) {\n setSearchResults(allRoadmaps);\n return;\n }\n\n const searchResults = allRoadmaps.filter((roadmap) => {\n return (\n roadmap.title.toLowerCase().includes(searchText.toLowerCase()) ||\n roadmap.id.toLowerCase().includes(searchText.toLowerCase())\n );\n });\n setSearchResults(searchResults);\n }, [searchText, allRoadmaps]);\n\n const roleBasedRoadmaps = searchResults.filter((roadmap) =>\n roadmap?.metadata?.tags?.includes('role-roadmap'),\n );\n const skillBasedRoadmaps = searchResults.filter((roadmap) =>\n roadmap?.metadata?.tags?.includes('skill-roadmap'),\n );\n\n return (\n
    \n
    \n \n \n \n Close modal\n \n setSearchText((e.target as HTMLInputElement).value)}\n />\n
    \n \n Role Based Roadmaps\n \n {roleBasedRoadmaps.length === 0 && (\n

    \n )}\n {roleBasedRoadmaps.length > 0 && (\n
    \n {roleBasedRoadmaps.map((roadmap) => {\n const isSelected = teamResourceConfig.includes(roadmap.id);\n\n return (\n {\n if (isSelected) {\n onRoadmapRemove(roadmap.id);\n } else {\n onRoadmapAdd(roadmap.id);\n }\n }}\n />\n );\n })}\n
    \n )}\n \n Skill Based Roadmaps\n \n
    \n {skillBasedRoadmaps.map((roadmap) => {\n const isSelected = teamResourceConfig.includes(roadmap.id);\n\n return (\n {\n if (isSelected) {\n onRoadmapRemove(roadmap.id);\n } else {\n onRoadmapAdd(roadmap.id);\n }\n }}\n />\n );\n })}\n
    \n
    \n\n
    \n

    \n More Official Roadmaps Coming Soon\n

    \n

    \n We are currently adding more of our official roadmaps to this\n list. If you don't see the roadmap you are looking for, please\n check back later.\n

    \n
    \n
    \n
    \n \n );\n}\n" }, { "path": "src/components/CreateTeam/SelectRoadmapModalItem.tsx", "content": "import type { SelectRoadmapModalProps } from './SelectRoadmapModal';\n\ntype SelectRoadmapModalItemProps = {\n title: string;\n isSelected: boolean;\n onClick: () => void;\n};\n\nexport function SelectRoadmapModalItem(props: SelectRoadmapModalItemProps) {\n const { isSelected, onClick, title } = props;\n return (\n \n {title}\n {isSelected && (\n \n ×\n \n )}\n\n {!isSelected && (\n \n +\n \n )}\n \n );\n}\n" }, { "path": "src/components/CreateTeam/Step0.tsx", "content": "import type { TeamDocument } from './CreateTeamForm';\nimport { httpPut } from '../../lib/http';\nimport { useState } from 'react';\nimport { NextButton } from './NextButton';\nimport { BuildingIcon } from '../ReactIcons/BuildingIcon.tsx';\nimport { UsersIcon } from '../ReactIcons/UsersIcon.tsx';\n\nexport const validTeamTypes = [\n {\n value: 'company',\n label: 'Company',\n icon: BuildingIcon,\n description:\n 'Track the skills and learning progress of the tech team at your company',\n },\n {\n value: 'study_group',\n label: 'Study Group',\n icon: UsersIcon,\n description:\n 'Invite your friends or course-mates and track your learning progress together',\n },\n] as const;\n\nexport type ValidTeamType = (typeof validTeamTypes)[number]['value'];\n\ntype Step0Props = {\n team?: TeamDocument;\n selectedTeamType: ValidTeamType;\n setSelectedTeamType: (teamType: ValidTeamType) => void;\n onStepComplete: () => void;\n};\n\nexport function Step0(props: Step0Props) {\n const { team, selectedTeamType, onStepComplete, setSelectedTeamType } = props;\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState();\n\n async function onNextClick() {\n if (!team) {\n onStepComplete();\n return;\n }\n\n setIsLoading(true);\n setError('');\n\n const { response, error } = await httpPut(\n `${import.meta.env.PUBLIC_API_URL}/v1-update-team/${team._id}`,\n {\n name: team.name,\n website: team?.links?.website || undefined,\n type: selectedTeamType,\n gitHubUrl: team?.links?.github || undefined,\n ...(selectedTeamType === 'company' && {\n teamSize: team.teamSize,\n linkedInUrl: team?.links?.linkedIn || undefined,\n }),\n },\n );\n\n if (error || !response) {\n setIsLoading(false);\n setError(error?.message || 'Something went wrong');\n return;\n }\n\n setIsLoading(false);\n setError('');\n onStepComplete();\n }\n\n return (\n <>\n
    \n {validTeamTypes.map((validTeamType) => (\n setSelectedTeamType(validTeamType.value)}\n >\n {\n \n }\n \n {validTeamType.label}\n \n \n {validTeamType.description}\n \n \n ))}\n
    \n\n {/*Error message*/}\n {error &&
    {error}
    }\n\n
    \n \n Cancel\n \n \n
    \n \n );\n}\n" }, { "path": "src/components/CreateTeam/Step1.tsx", "content": "import { type FormEvent, useEffect, useRef, useState } from 'react';\nimport { type AppError, httpPost, httpPut } from '../../lib/http';\nimport type { ValidTeamType } from './Step0';\nimport type { TeamDocument } from './CreateTeamForm';\nimport { NextButton } from './NextButton';\n\nexport const validTeamSizes = [\n '1-5',\n '6-10',\n '11-25',\n '26-50',\n '51-100',\n '101-200',\n '201-500',\n '501-1000',\n '1000+',\n] as const;\n\nexport type ValidTeamSize = (typeof validTeamSizes)[number];\n\ntype Step1Props = {\n team?: TeamDocument;\n selectedTeamType: ValidTeamType;\n onStepComplete: (team: TeamDocument) => void;\n onBack: () => void;\n};\n\nexport function Step1(props: Step1Props) {\n const { team, selectedTeamType, onBack, onStepComplete } = props;\n const [error, setError] = useState('');\n\n const nameRef = useRef(null);\n\n useEffect(() => {\n if (!nameRef.current) {\n return;\n }\n\n nameRef.current.focus();\n }, [nameRef]);\n\n const [isLoading, setIsLoading] = useState(false);\n\n const [name, setName] = useState(team?.name || '');\n const [website, setWebsite] = useState(team?.links?.website || '');\n const [linkedInUrl, setLinkedInUrl] = useState(team?.links?.linkedIn || '');\n const [gitHubUrl, setGitHubUrl] = useState(team?.links?.github || '');\n const [teamSize, setTeamSize] = useState(\n team?.teamSize || ('' as any),\n );\n\n const handleSubmit = async (e: FormEvent) => {\n e.preventDefault();\n setIsLoading(true);\n if (!name || !selectedTeamType) {\n setIsLoading(false);\n return;\n }\n\n let response: TeamDocument | undefined;\n let error: AppError | undefined;\n\n if (!team?._id) {\n ({ response, error } = await httpPost(\n `${import.meta.env.PUBLIC_API_URL}/v1-create-team`,\n {\n name,\n website: website || undefined,\n type: selectedTeamType,\n gitHubUrl: gitHubUrl || undefined,\n ...(selectedTeamType === 'company' && {\n teamSize,\n linkedInUrl: linkedInUrl || undefined,\n }),\n roadmapIds: [],\n bestPracticeIds: [],\n },\n ));\n\n if (error || !response?._id) {\n setError(error?.message || 'Something went wrong. Please try again.');\n setIsLoading(false);\n return;\n }\n\n onStepComplete(response as TeamDocument);\n } else {\n ({ response, error } = await httpPut(\n `${import.meta.env.PUBLIC_API_URL}/v1-update-team/${team._id}`,\n {\n name,\n website: website || undefined,\n type: selectedTeamType,\n gitHubUrl: gitHubUrl || undefined,\n ...(selectedTeamType === 'company' && {\n teamSize,\n linkedInUrl: linkedInUrl || undefined,\n }),\n },\n ));\n\n if (error || (response as any)?.status !== 'ok') {\n setError(error?.message || 'Something went wrong. Please try again.');\n setIsLoading(false);\n return;\n }\n\n onStepComplete({\n ...team,\n name,\n _id: team._id,\n links: {\n website: website || team?.links?.website,\n linkedIn: linkedInUrl || team?.links?.linkedIn,\n github: gitHubUrl || team?.links?.github,\n },\n type: selectedTeamType,\n teamSize: teamSize!,\n });\n }\n };\n\n return (\n
    \n
    \n \n {selectedTeamType === 'company' ? 'Company Name' : 'Group Name'}\n \n setName((e.target as HTMLInputElement).value)}\n />\n
    \n\n {selectedTeamType === 'company' && (\n
    \n \n Website\n \n setWebsite((e.target as HTMLInputElement).value)}\n />\n
    \n )}\n\n {selectedTeamType === 'company' && (\n
    \n \n Company LinkedIn URL\n \n \n setLinkedInUrl((e.target as HTMLInputElement).value)\n }\n />\n
    \n )}\n\n
    \n \n GitHub Organization URL\n \n setGitHubUrl((e.target as HTMLInputElement).value)}\n />\n
    \n\n {selectedTeamType === 'company' && (\n
    \n \n Tech Team Size\n \n \n setTeamSize((e.target as HTMLSelectElement).value as any)\n }\n >\n \n {validTeamSizes.map((size) => (\n \n ))}\n \n
    \n )}\n\n {error && (\n
    \n {error}\n
    \n )}\n\n
    \n \n ←\n Previous Step\n \n \n
    \n
    \n );\n}\n" }, { "path": "src/components/CreateTeam/Step2.tsx", "content": "import { RoadmapSelector, type TeamResourceConfig } from './RoadmapSelector';\nimport type { TeamDocument } from './CreateTeamForm';\n\ntype Step2Props = {\n team: TeamDocument;\n teamResourceConfig: TeamResourceConfig;\n setTeamResourceConfig: (config: TeamResourceConfig) => void;\n onBack: () => void;\n onNext: () => void;\n};\n\nexport function Step2(props: Step2Props) {\n const { team, onBack, onNext, teamResourceConfig, setTeamResourceConfig } =\n props;\n\n return (\n <>\n
    \n
    \n

    \n Select Roadmaps\n

    \n

    \n You can always add and customize your roadmaps later.\n

    \n
    \n\n \n
    \n\n
    \n \n ←\n Previous Step\n \n\n
    \n \n Skip for Now\n \n \n Next Step\n →\n \n
    \n
    \n \n );\n}\n" }, { "path": "src/components/CreateTeam/Step3.tsx", "content": "import type { TeamDocument } from './CreateTeamForm';\nimport { NextButton } from './NextButton';\nimport { TrashIcon } from '../ReactIcons/TrashIcon';\nimport { type AllowedRoles, RoleDropdown } from './RoleDropdown';\nimport { useEffect, useRef, useState } from 'react';\nimport { httpPost } from '../../lib/http';\n\ntype Step3Props = {\n team?: TeamDocument;\n onNext: () => void;\n onBack: () => void;\n};\n\ntype InviteType = {\n id: string;\n email: string;\n role: AllowedRoles;\n};\n\nfunction generateId() {\n return `${new Date().getTime()}`;\n}\n\nexport function Step3(props: Step3Props) {\n const { onNext, onBack, team } = props;\n\n const [error, setError] = useState('');\n const [invitingTeam, setInvitingTeam] = useState(false);\n const emailInputRef = useRef(null);\n\n const [users, setUsers] = useState([\n {\n id: generateId(),\n email: '',\n role: 'member',\n },\n ]);\n\n async function inviteTeam() {\n setInvitingTeam(true);\n const { error, response } = await httpPost(\n `${import.meta.env.PUBLIC_API_URL}/v1-invite-team/${team?._id}`,\n {\n members: users,\n }\n );\n\n if (error || !response) {\n setError(error?.message || 'Something went wrong');\n setInvitingTeam(false);\n\n return;\n }\n\n onNext();\n }\n\n function focusLastEmailInput() {\n if (!emailInputRef.current) {\n return;\n }\n\n (emailInputRef.current as HTMLInputElement).focus();\n }\n\n function onSubmit(e: any) {\n e.preventDefault();\n\n inviteTeam().finally(() => null);\n }\n\n useEffect(() => {\n focusLastEmailInput();\n }, [users.length]);\n\n return (\n
    \n
    \n

    Invite your Team

    \n

    \n Use the form below to invite your team members to your team. You can\n also invite them later.\n

    \n
    \n
    \n {users.map((user, userCounter) => {\n return (\n
    \n {\n const newUsers = users.map((u) => {\n if (u.id === user.id) {\n return {\n ...u,\n email: (e.target as HTMLInputElement)?.value,\n };\n }\n\n return u;\n });\n\n setUsers(newUsers);\n }}\n className=\"grow rounded-md border border-gray-200 bg-white px-4 py-2 text-gray-900\"\n />\n {\n const newUsers = users.map((u) => {\n if (u.id === user.id) {\n return {\n ...u,\n role,\n };\n }\n\n return u;\n });\n\n setUsers(newUsers);\n }}\n />\n {\n setUsers(users.filter((u) => u.id !== user.id));\n }}\n >\n \n \n
    \n );\n })}\n
    \n {users.length <= 30 && (\n {\n setUsers([\n ...users,\n { id: generateId(), email: '', role: 'member' },\n ]);\n }}\n type=\"button\"\n className=\"mt-2 rounded-md border border-dashed border-gray-400 py-2 text-sm text-gray-500 hover:border-gray-500 hover:text-gray-800\"\n >\n + Add another\n \n )}\n\n {error && (\n
    \n {error}\n
    \n )}\n\n
    \n \n ←\n Previous Step\n \n
    \n u.email).length !== 0}\n className={\n 'rounded-md grow md:flex-auto border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black disabled:opacity-50 disabled:pointer-events-none'\n }\n >\n Skip for Now\n \n \n
    \n
    \n \n );\n}\n" }, { "path": "src/components/CreateTeam/Step4.tsx", "content": "import { CheckIcon } from '../ReactIcons/CheckIcon';\nimport type { TeamDocument } from './CreateTeamForm';\n\ntype Step4Props = {\n team: TeamDocument;\n};\n\nexport function Step4({ team }: Step4Props) {\n return (\n
    \n
    \n \n

    Team Created

    \n

    \n Your team has been created. Happy learning!\n

    \n \n View Team\n \n
    \n
    \n );\n}\n" }, { "path": "src/components/CreateTeam/UpdateTeamResourceModal.tsx", "content": "import { useEffect, useRef, useState } from 'react';\nimport { wireframeJSONToSVG } from 'roadmap-renderer';\nimport { Spinner } from '../ReactIcons/Spinner';\nimport { httpPut } from '../../lib/http';\nimport { renderTopicProgress } from '../../lib/resource-progress';\nimport '../FrameRenderer/FrameRenderer.css';\nimport { useOutsideClick } from '../../hooks/use-outside-click';\nimport { useKeydown } from '../../hooks/use-keydown';\nimport type { TeamResourceConfig } from './RoadmapSelector';\nimport { useToast } from '../../hooks/use-toast';\nimport {replaceChildren} from \"../../lib/dom.ts\";\n\nexport type ProgressMapProps = {\n teamId: string;\n resourceId: string;\n resourceType: 'roadmap' | 'best-practice';\n defaultRemovedItems?: string[];\n setTeamResourceConfig: (config: TeamResourceConfig) => void;\n onClose: () => void;\n};\n\nexport function UpdateTeamResourceModal(props: ProgressMapProps) {\n const {\n defaultRemovedItems = [],\n resourceId,\n resourceType,\n teamId,\n setTeamResourceConfig,\n onClose,\n } = props;\n\n const containerEl = useRef(null);\n const popupBodyEl = useRef(null);\n\n const toast = useToast();\n const [isLoading, setIsLoading] = useState(true);\n const [isUpdating, setIsUpdating] = useState(false);\n\n const [removedItems, setRemovedItems] =\n useState(defaultRemovedItems);\n\n useEffect(() => {\n function onTopicClick(e: any) {\n const groupEl = e.target.closest('.clickable-group');\n const groupId = groupEl?.dataset?.groupId;\n\n if (!groupId) {\n return;\n }\n\n const normalizedGroupId = groupId.replace(/^\\d+-/, '');\n if (removedItems.includes(normalizedGroupId)) {\n setRemovedItems((prev) =>\n prev.filter((id) => id !== normalizedGroupId)\n );\n renderTopicProgress(normalizedGroupId, 'reset' as any);\n } else {\n setRemovedItems((prev) => [...prev, normalizedGroupId]);\n renderTopicProgress(normalizedGroupId, 'removed');\n }\n }\n\n document.addEventListener('click', onTopicClick);\n return () => {\n document.removeEventListener('click', onTopicClick);\n };\n }, [removedItems]);\n\n let resourceJsonUrl = import.meta.env.DEV\n ? 'http://localhost:3000'\n : 'https://roadmap.sh';\n if (resourceType === 'roadmap') {\n resourceJsonUrl += `/${resourceId}.json`;\n } else {\n resourceJsonUrl += `/best-practices/${resourceId}.json`;\n }\n\n async function renderResource(jsonUrl: string) {\n const res = await fetch(jsonUrl);\n const json = await res.json();\n const svg = await wireframeJSONToSVG(json, {\n fontURL: '/fonts/balsamiq.woff2',\n });\n\n replaceChildren(containerEl.current!, svg);\n // containerEl.current?.replaceChildren(svg);\n\n // Render team configuration\n removedItems.forEach((topicId: string) => {\n renderTopicProgress(topicId, 'removed');\n });\n }\n\n useKeydown('Escape', () => {\n onClose();\n });\n\n useOutsideClick(popupBodyEl, () => {\n onClose();\n });\n\n async function onSaveChanges() {\n if (removedItems.length === 0) {\n return;\n }\n\n setIsUpdating(true);\n const { error, response } = await httpPut(\n `${\n import.meta.env.PUBLIC_API_URL\n }/v1-update-team-resource-config/${teamId}`,\n {\n teamId: teamId,\n resourceId: resourceId,\n resourceType: resourceType,\n removed: removedItems,\n }\n );\n\n if (error || !response) {\n toast.error(error?.message || 'Error adding roadmap');\n return;\n }\n\n setTeamResourceConfig(response);\n onClose();\n }\n\n useEffect(() => {\n if (\n !containerEl.current ||\n !resourceJsonUrl ||\n !resourceId ||\n !resourceType ||\n !teamId\n ) {\n return;\n }\n\n renderResource(resourceJsonUrl)\n .catch((err) => {\n console.error(err);\n toast.error('Something went wrong. Please try again!');\n })\n .finally(() => {\n setIsLoading(false);\n });\n }, []);\n\n return (\n
    \n
    \n \n \n

    \n Click and select the items to remove from the roadmap.\n

    \n
    \n \n onSaveChanges().finally(() => setIsUpdating(false))\n }\n className={\n 'rounded-md bg-blue-600 px-2.5 py-1.5 text-sm text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-blue-400'\n }\n >\n {isUpdating ? (\n \n {' '}\n Saving ..\n \n ) : (\n 'Save Changes'\n )}\n \n \n Cancel\n \n
    \n
    \n
    \n\n {isLoading && (\n
    \n \n
    \n )}\n
    \n \n \n );\n}\n" }, { "path": "src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapButton.tsx", "content": "import { Plus } from 'lucide-react';\nimport { isLoggedIn } from '../../../lib/jwt';\nimport { showLoginPopup } from '../../../lib/popup';\nimport { cn } from '../../../lib/classname';\nimport { CreateRoadmapModal } from './CreateRoadmapModal';\nimport { useState } from 'react';\nimport { useIsPaidUser } from '../../../queries/billing';\nimport { UpgradeAccountModal } from '../../Billing/UpgradeAccountModal';\nimport { MAX_ROADMAP_LIMIT } from '../RoadmapListPage';\n\ntype CreateRoadmapButtonProps = {\n className?: string;\n existingRoadmapCount?: number;\n text?: string;\n teamId?: string;\n};\n\nexport function CreateRoadmapButton(props: CreateRoadmapButtonProps) {\n const {\n teamId,\n className,\n text = 'Create your own Roadmap',\n existingRoadmapCount = 0,\n } = props;\n\n const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false);\n const [showUpgradeModal, setShowUpgradeModal] = useState(false);\n const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();\n\n function toggleCreateRoadmapHandler() {\n if (!isLoggedIn()) {\n return showLoginPopup();\n }\n\n const hasExceededLimit =\n !isPaidUser &&\n existingRoadmapCount > 0 &&\n existingRoadmapCount >= MAX_ROADMAP_LIMIT;\n\n if (hasExceededLimit) {\n setShowUpgradeModal(true);\n return;\n }\n\n setIsCreatingRoadmap(true);\n }\n\n return (\n <>\n {showUpgradeModal && (\n setShowUpgradeModal(false)} />\n )}\n\n {isCreatingRoadmap && (\n {\n setIsCreatingRoadmap(false);\n }}\n />\n )}\n\n \n \n {text}\n \n \n );\n}\n" }, { "path": "src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx", "content": "import {\n type FormEvent,\n type MouseEvent,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { Loader2 } from 'lucide-react';\nimport { Modal } from '../../Modal';\nimport { useToast } from '../../../hooks/use-toast';\nimport { httpPost } from '../../../lib/http';\nimport { cn } from '../../../lib/classname';\n\nexport const allowedRoadmapVisibility = [\n 'me',\n 'friends',\n 'team',\n 'public',\n] as const;\nexport type AllowedRoadmapVisibility =\n (typeof allowedRoadmapVisibility)[number];\nexport const allowedCustomRoadmapType = ['role', 'skill'] as const;\nexport type AllowedCustomRoadmapType =\n (typeof allowedCustomRoadmapType)[number];\n\nexport const allowedShowcaseStatus = [\n 'submitted',\n 'approved',\n 'rejected',\n 'rejected_with_reason',\n] as const;\nexport type AllowedShowcaseStatus = (typeof allowedShowcaseStatus)[number];\n\nexport interface RoadmapDocument {\n _id: string;\n title: string;\n description?: string;\n slug?: string;\n creatorId: string;\n aiRoadmapId?: string;\n teamId?: string;\n topicCount: number;\n visibility: AllowedRoadmapVisibility;\n sharedFriendIds?: string[];\n sharedTeamMemberIds?: string[];\n feedbacks?: {\n userId: string;\n email: string;\n feedback: string;\n }[];\n metadata?: {\n originalRoadmapId?: string;\n defaultRoadmapId?: string;\n };\n nodes: any[];\n edges: any[];\n\n isDiscoverable?: boolean;\n ratings: {\n average: number;\n totalCount: number;\n breakdown: {\n [key: number]: number;\n };\n };\n\n showcaseStatus?: AllowedShowcaseStatus;\n showcaseRejectedReason?: string;\n showcaseRejectedAt?: Date;\n showcaseSubmittedAt?: Date;\n showcaseApprovedAt?: Date;\n\n hasMigratedContent?: boolean;\n\n createdAt: Date;\n updatedAt: Date;\n}\n\ninterface CreateRoadmapModalProps {\n onClose: () => void;\n onCreated?: (roadmap: RoadmapDocument) => void;\n teamId?: string;\n visibility?: AllowedRoadmapVisibility;\n}\n\nexport function CreateRoadmapModal(props: CreateRoadmapModalProps) {\n const { onClose, onCreated, teamId } = props;\n\n const titleRef = useRef(null);\n const toast = useToast();\n\n const [isLoading, setIsLoading] = useState(false);\n const [title, setTitle] = useState('');\n const [description, setDescription] = useState('');\n const isInvalidDescription = description?.trim().length > 80;\n\n async function handleSubmit(\n e: FormEvent | MouseEvent,\n redirect: boolean = true,\n ) {\n e.preventDefault();\n if (isLoading) {\n return;\n }\n\n if (title.trim() === '' || isInvalidDescription) {\n toast.error('Please fill all the fields');\n return;\n }\n\n setIsLoading(true);\n const { response, error } = await httpPost(\n `${import.meta.env.PUBLIC_API_URL}/v1-create-roadmap`,\n {\n title,\n description,\n ...(teamId && {\n teamId,\n }),\n nodes: [],\n edges: [],\n },\n );\n\n if (error) {\n setIsLoading(false);\n toast.error(error?.message || 'Something went wrong, please try again');\n return;\n }\n\n toast.success('Roadmap created successfully');\n if (redirect) {\n window.location.href = `${\n import.meta.env.PUBLIC_EDITOR_APP_URL\n }/${response?._id}`;\n return;\n }\n\n if (onCreated) {\n onCreated(response as RoadmapDocument);\n return;\n }\n\n onClose();\n\n setTitle('');\n setDescription('');\n setIsLoading(false);\n }\n\n useEffect(() => {\n titleRef.current?.focus();\n }, []);\n\n return (\n \n
    \n

    Create Roadmap

    \n

    \n Add a title and description to your roadmap.\n

    \n
    \n
    \n
    \n \n Roadmap Title\n \n
    \n setTitle(e.target.value)}\n />\n
    \n
    \n
    \n \n Description\n \n
    \n setDescription(e.target.value)}\n />\n
    \n {description.length}/80\n
    \n
    \n
    \n\n \n \n Cancel\n \n\n
    \n {teamId && !isLoading && (\n handleSubmit(e, false)}\n className=\"flex h-9 items-center justify-center rounded-md border border-black bg-white px-4 py-2 text-sm font-medium text-black outline-hidden hover:bg-black hover:text-white focus:bg-black focus:text-white\"\n >\n {isLoading ? (\n \n ) : (\n 'Save as Placeholder'\n )}\n \n )}\n\n \n {isLoading ? (\n \n ) : teamId ? (\n 'Continue to Editor'\n ) : (\n 'Create'\n )}\n \n
    \n \n {teamId && (\n <>\n \n

    \n Create a placeholder now and prepare it later.\n

    \n \n )}\n \n \n );\n}\n" }, { "path": "src/components/CustomRoadmap/CustomRoadmap.tsx", "content": "import { useEffect, useState } from 'react';\nimport { getUrlParams } from '../../lib/browser';\nimport { RoadmapHeader } from './RoadmapHeader';\nimport { TopicDetail } from '../TopicDetail/TopicDetail';\nimport type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';\nimport { currentRoadmap } from '../../stores/roadmap';\nimport { RestrictedPage } from './RestrictedPage';\nimport { FlowRoadmapRenderer } from './FlowRoadmapRenderer';\nimport { useQuery } from '@tanstack/react-query';\nimport { queryClient } from '../../stores/query-client';\nimport { httpGet, type FetchError } from '../../lib/query-http';\nimport { useCustomRoadmap } from '../../hooks/use-custom-roadmap';\n\nexport const allowedLinkTypes = [\n 'video',\n 'article',\n 'opensource',\n 'course',\n 'website',\n 'podcast',\n 'roadmap.sh',\n 'official',\n 'roadmap',\n 'feed',\n] as const;\n\nexport type AllowedLinkTypes = (typeof allowedLinkTypes)[number];\n\nexport interface RoadmapContentDocument {\n _id?: string;\n roadmapId: string;\n nodeId: string;\n title: string;\n description: string;\n links: {\n id: string;\n type: AllowedLinkTypes;\n title: string;\n url: string;\n }[];\n}\n\nexport type CreatorType = {\n id: string;\n name: string;\n avatar: string;\n};\n\nexport type GetRoadmapResponse = RoadmapDocument & {\n canManage: boolean;\n creator?: CreatorType;\n team?: CreatorType;\n unseenRatingCount: number;\n};\n\nexport function hideRoadmapLoader() {\n const loaderEl = document.querySelector(\n '[data-roadmap-loader]',\n ) as HTMLElement;\n if (loaderEl) {\n loaderEl.remove();\n }\n}\n\ntype CustomRoadmapProps = {\n isEmbed?: boolean;\n slug?: string;\n};\n\nexport function CustomRoadmap(props: CustomRoadmapProps) {\n const { isEmbed = false, slug } = props;\n\n const { id, secret } = getUrlParams() as { id: string; secret: string };\n\n const [isLoading, setIsLoading] = useState(true);\n const [roadmap, setRoadmap] = useState(null);\n\n const { data, error } = useCustomRoadmap({\n id,\n secret,\n slug,\n });\n\n useEffect(() => {\n if (!data) {\n return;\n }\n\n document.title = `${data.title} - roadmap.sh`;\n setRoadmap(data);\n currentRoadmap.set(data);\n setIsLoading(false);\n hideRoadmapLoader();\n }, [data]);\n\n useEffect(() => {\n if (!error) {\n return;\n }\n\n setIsLoading(false);\n hideRoadmapLoader();\n }, [error]);\n\n if (isLoading) {\n return null;\n }\n\n if (error) {\n return ;\n }\n\n return (\n <>\n {!isEmbed && }\n \n \n \n );\n}\n" }, { "path": "src/components/CustomRoadmap/CustomRoadmapAlert.tsx", "content": "import {\n BadgeCheck,\n Heart,\n HeartHandshake,\n MessageCircleHeart,\n PencilRuler,\n Search,\n} from 'lucide-react';\nimport { showLoginPopup } from '../../lib/popup.ts';\nimport { isLoggedIn } from '../../lib/jwt.ts';\nimport { useState } from 'react';\nimport { CreateRoadmapModal } from './CreateRoadmap/CreateRoadmapModal.tsx';\nimport { RoadmapAlert } from '../RoadmapAlert.tsx';\n\nexport function CustomRoadmapAlert() {\n const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false);\n\n return (\n <>\n {isCreatingRoadmap && (\n {\n setIsCreatingRoadmap(false);\n }}\n />\n )}\n\n \n This is a custom roadmap made by a community member and is not\n verified by roadmap.sh\n \n }\n floatingIcon={MessageCircleHeart}\n className=\"mb-5 mt-0 sm:-mt-6 sm:mb-7\"\n />\n \n );\n}\n" }, { "path": "src/components/CustomRoadmap/CustomRoadmapRatings.tsx", "content": "import { useState } from 'react';\nimport { Rating } from '../Rating/Rating';\nimport type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';\nimport { CustomRoadmapRatingsModal } from './CustomRoadmapRatingsModal';\nimport { Star } from 'lucide-react';\nimport { isLoggedIn } from '../../lib/jwt.ts';\nimport { showLoginPopup } from '../../lib/popup.ts';\n\ntype CustomRoadmapRatingsProps = {\n roadmapSlug: string;\n ratings: RoadmapDocument['ratings'];\n canManage?: boolean;\n unseenRatingCount: number;\n};\n\nexport function CustomRoadmapRatings(props: CustomRoadmapRatingsProps) {\n const { ratings, roadmapSlug, canManage, unseenRatingCount } = props;\n const average = ratings?.average || 0;\n\n const totalPeopleWhoRated = Object.keys(ratings?.breakdown || {}).reduce(\n (acc, key) => acc + ratings?.breakdown[key as any],\n 0,\n );\n\n const [isDetailsOpen, setIsDetailsOpen] = useState(false);\n\n return (\n <>\n {isDetailsOpen && (\n {\n setIsDetailsOpen(false);\n }}\n ratings={ratings}\n canManage={canManage}\n />\n )}\n {average === 0 && (\n <>\n {!canManage && (\n {\n if (!isLoggedIn()) {\n showLoginPopup();\n return;\n }\n\n setIsDetailsOpen(true);\n }}\n >\n \n Rate this roadmap\n Rate\n \n )}\n {canManage && (\n \n \n No ratings yet\n Rate\n \n )}\n \n )}\n\n {average > 0 && (\n {\n setIsDetailsOpen(true);\n }}\n >\n {average.toFixed(1)}\n \n \n \n \n \n \n ({totalPeopleWhoRated})\n {canManage && unseenRatingCount > 0 && (\n \n {unseenRatingCount}\n \n )}\n \n )}\n \n );\n}\n" }, { "path": "src/components/CustomRoadmap/CustomRoadmapRatingsModal.tsx", "content": "import { useState } from 'react';\nimport { Modal } from '../Modal';\nimport type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';\nimport { RateRoadmapForm } from './RateRoadmapForm';\nimport { ListRoadmapRatings } from './ListRoadmapRatings';\n\ntype ActiveTab = 'ratings' | 'feedback';\n\ntype CustomRoadmapRatingsModalProps = {\n onClose: () => void;\n roadmapSlug: string;\n ratings: RoadmapDocument['ratings'];\n canManage?: boolean;\n};\n\nexport function CustomRoadmapRatingsModal(\n props: CustomRoadmapRatingsModalProps,\n) {\n const { onClose, ratings, roadmapSlug, canManage = false } = props;\n\n const [activeTab, setActiveTab] = useState(\n canManage ? 'feedback' : 'ratings',\n );\n\n const tabs: {\n id: ActiveTab;\n label: string;\n }[] = [\n {\n id: 'ratings',\n label: 'Ratings',\n },\n {\n id: 'feedback',\n label: 'Feedback',\n },\n ];\n\n return (\n \n {activeTab === 'ratings' && (\n \n )}\n {activeTab === 'feedback' && (\n \n )}\n \n );\n}\n" }, { "path": "src/components/CustomRoadmap/EmbedRoadmapModal.tsx", "content": "import { useStore } from '@nanostores/react';\nimport { Check, Copy } from 'lucide-react';\n\nimport { Modal } from '../Modal';\nimport { useToast } from '../../hooks/use-toast';\nimport { useCopyText } from '../../hooks/use-copy-text';\nimport { currentRoadmap, isCurrentRoadmapPersonal } from '../../stores/roadmap';\nimport { cn } from '../../lib/classname.ts';\n\ntype ShareRoadmapModalProps = {\n onClose: () => void;\n};\n\nexport function EmbedRoadmapModal(props: ShareRoadmapModalProps) {\n const { onClose } = props;\n\n const toast = useToast();\n const $currentRoadmap = useStore(currentRoadmap);\n const $isCurrentRoadmapPersonal = useStore(isCurrentRoadmapPersonal);\n const roadmapId = $currentRoadmap?._id!;\n\n const { copyText, isCopied } = useCopyText();\n\n const isDev = import.meta.env.DEV;\n const baseUrl = isDev ? 'http://localhost:3000' : 'https://roadmap.sh';\n\n const embedHtml = ``;\n\n return (\n \n
    \n

    \n Embed Roadmap\n

    \n
    \n\n
    \n

    \n Copy the following HTML code and paste it into your website.\n

    \n {\n e.currentTarget.select();\n copyText(embedHtml);\n }}\n className=\"w-full resize-none rounded-md border bg-gray-50 p-2 text-sm\"\n />\n
    \n\n
    \n {\n copyText(embedHtml);\n }}\n >\n {isCopied ? (\n <>\n \n Copied\n \n ) : (\n <>\n \n Copy Link\n \n )}\n \n
    \n     \n );\n}\n" }, { "path": "src/components/CustomRoadmap/EmptyRoadmap.tsx", "content": "import { CircleSlash, PenSquare, Shapes } from 'lucide-react';\nimport { cn } from '../../lib/classname';\n\ntype EmptyRoadmapProps = {\n roadmapId: string;\n canManage: boolean;\n className?: string;\n};\n\nexport function EmptyRoadmap(props: EmptyRoadmapProps) {\n const { roadmapId, canManage, className } = props;\n const editUrl = `${import.meta.env.PUBLIC_EDITOR_APP_URL}/${roadmapId}`;\n\n return (\n
    \n
    \n \n

    This roadmap is currently empty.

    \n\n {canManage && (\n \n \n Edit Roadmap\n \n )}\n
    \n
    \n );\n}\n" }, { "path": "src/components/CustomRoadmap/FlowRoadmapRenderer.tsx", "content": "import { ReadonlyEditor } from '@roadmapsh/editor';\nimport type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';\nimport {\n refreshProgressCounters,\n renderResourceProgress,\n renderTopicProgress,\n type ResourceProgressType,\n updateResourceProgress,\n} from '../../lib/resource-progress';\nimport { pageProgressMessage } from '../../stores/page';\nimport { useToast } from '../../hooks/use-toast';\nimport type { Node } from '@roadmapsh/editor';\nimport { type MouseEvent, useCallback, useRef, useState } from 'react';\nimport { EmptyRoadmap } from './EmptyRoadmap';\nimport { cn } from '../../lib/classname';\nimport { totalRoadmapNodes } from '../../stores/roadmap.ts';\n\ntype FlowRoadmapRendererProps = {\n isEmbed?: boolean;\n roadmap: RoadmapDocument & {\n canManage?: boolean\n };\n};\n\nexport function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {\n const { roadmap, isEmbed = false } = props;\n const roadmapId = String(roadmap._id!);\n\n const [hideRenderer, setHideRenderer] = useState(false);\n const editorWrapperRef = useRef(null);\n\n const toast = useToast();\n\n async function updateTopicStatus(\n topicId: string,\n newStatus: ResourceProgressType,\n ) {\n if (isEmbed) {\n return;\n }\n\n pageProgressMessage.set('Updating progress');\n updateResourceProgress(\n {\n resourceId: roadmapId,\n resourceType: 'roadmap',\n topicId,\n },\n newStatus,\n )\n .then(() => {\n renderTopicProgress(topicId, newStatus);\n })\n .catch((err) => {\n toast.error('Something went wrong, please try again.');\n console.error(err);\n })\n .finally(() => {\n pageProgressMessage.set('');\n refreshProgressCounters();\n });\n\n return;\n }\n\n const handleTopicRightClick = useCallback((e: MouseEvent, node: Node) => {\n const target =\n node?.type === 'todo'\n ? document.querySelector(`[data-id=\"${node.id}\"]`)\n : (e?.currentTarget as HTMLDivElement);\n if (!target) {\n return;\n }\n\n const isCurrentStatusDone = target?.classList.contains('done');\n updateTopicStatus(node.id, isCurrentStatusDone ? 'pending' : 'done');\n }, []);\n\n const handleTopicShiftClick = useCallback((e: MouseEvent, node: Node) => {\n const target = e?.currentTarget as HTMLDivElement;\n if (!target) {\n return;\n }\n\n const isCurrentStatusLearning = target?.classList.contains('learning');\n updateTopicStatus(\n node.id,\n isCurrentStatusLearning ? 'pending' : 'learning',\n );\n }, []);\n\n const handleTopicAltClick = useCallback((e: MouseEvent, node: Node) => {\n const target = e?.currentTarget as HTMLDivElement;\n if (!target) {\n return;\n }\n\n const isCurrentStatusSkipped = target?.classList.contains('skipped');\n updateTopicStatus(node.id, isCurrentStatusSkipped ? 'pending' : 'skipped');\n }, []);\n\n const handleTopicClick = useCallback((e: MouseEvent, node: Node) => {\n const target = e?.currentTarget as HTMLDivElement;\n if (!target) {\n return;\n }\n\n window.dispatchEvent(\n new CustomEvent('roadmap.node.click', {\n detail: {\n topicId: node.id,\n resourceId: roadmapId,\n resourceType: 'roadmap',\n isCustomResource: true,\n },\n }),\n );\n }, []);\n\n const handleLinkClick = useCallback((linkId: string, href: string) => {\n if (!href) {\n return;\n }\n\n const isExternalLink = href.startsWith('http');\n if (isExternalLink) {\n window.open(href, '_blank');\n } else {\n window.location.href = href;\n }\n }, []);\n\n const handleChecklistCheckboxClick = useCallback(\n (e: MouseEvent, checklistId: string) => {\n const target = e?.currentTarget as HTMLDivElement;\n if (!target) {\n return;\n }\n\n const isCurrentStatusDone = target?.classList.contains('done');\n updateTopicStatus(checklistId, isCurrentStatusDone ? 'pending' : 'done');\n },\n [],\n );\n\n const handleChecklistLabelClick = useCallback(\n (e: MouseEvent, checklistId: string) => {\n const target = e?.currentTarget as HTMLDivElement;\n if (!target) {\n return;\n }\n\n const isCurrentStatusDone = target?.classList.contains('done');\n updateTopicStatus(checklistId, isCurrentStatusDone ? 'pending' : 'done');\n },\n [],\n );\n\n return (\n <>\n {hideRenderer && (\n \n )}\n {\n renderResourceProgress('roadmap', roadmapId).then(() => {\n totalRoadmapNodes.set(\n roadmap?.nodes?.filter((node) => {\n return ['topic', 'subtopic'].includes(node.type);\n }).length || 0,\n );\n\n if (roadmap?.nodes?.length === 0) {\n setHideRenderer(true);\n editorWrapperRef?.current?.classList.add('hidden');\n }\n });\n }}\n onTopicClick={handleTopicClick}\n onTopicRightClick={handleTopicRightClick}\n onTopicShiftClick={handleTopicShiftClick}\n onTopicAltClick={handleTopicAltClick}\n onButtonNodeClick={handleLinkClick}\n onLinkClick={handleLinkClick}\n onChecklistCheckboxClick={handleChecklistCheckboxClick}\n onChecklistLableClick={handleChecklistLabelClick}\n fontFamily=\"Balsamiq Sans\"\n fontURL=\"/fonts/balsamiq.woff2\"\n />\n \n );\n}\n" }, { "path": "src/components/CustomRoadmap/ListRoadmapRatings.tsx", "content": "import { useEffect, useState } from 'react';\nimport { httpGet } from '../../lib/http';\nimport { useToast } from '../../hooks/use-toast';\nimport { isLoggedIn } from '../../lib/jwt';\nimport { Loader2, MessageCircle, ServerCrash } from 'lucide-react';\nimport { Rating } from '../Rating/Rating';\nimport { Spinner } from '../ReactIcons/Spinner.tsx';\nimport { getRelativeTimeString } from '../../lib/date.ts';\nimport { cn } from '../../lib/classname.ts';\nimport type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal.tsx';\nimport { Pagination } from '../Pagination/Pagination.tsx';\n\nexport interface RoadmapRatingDocument {\n _id?: string;\n roadmapId: string;\n userId: string;\n rating: number;\n feedback?: string;\n\n createdAt: Date;\n updatedAt: Date;\n}\n\ntype ListRoadmapRatingsResponse = {\n data: (RoadmapRatingDocument & {\n name: string;\n avatar?: string;\n })[];\n totalCount: number;\n totalPages: number;\n currPage: number;\n perPage: number;\n};\n\ntype ListRoadmapRatingsProps = {\n roadmapSlug: string;\n ratings: RoadmapDocument['ratings'];\n};\n\nexport function ListRoadmapRatings(props: ListRoadmapRatingsProps) {\n const { roadmapSlug, ratings: ratingSummary } = props;\n\n const totalWhoRated = Object.keys(ratingSummary.breakdown || {}).reduce(\n (acc, key) => acc + ratingSummary.breakdown[key as any],\n 0,\n );\n const averageRating = ratingSummary.average;\n\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState('');\n const [ratingsResponse, setRatingsResponse] =\n useState(null);\n\n const listRoadmapRatings = async (currPage: number = 1) => {\n setIsLoading(true);\n\n const { response, error } = await httpGet(\n `${import.meta.env.PUBLIC_API_URL}/v1-list-roadmap-ratings/${roadmapSlug}`,\n {\n currPage,\n },\n );\n\n if (!response || error) {\n setError(error?.message || 'Something went wrong');\n setIsLoading(false);\n return;\n }\n\n setRatingsResponse(response);\n setError('');\n setIsLoading(false);\n };\n\n useEffect(() => {\n if (!isLoggedIn()) {\n return;\n }\n\n listRoadmapRatings().then();\n }, []);\n\n if (error) {\n return (\n
    \n \n

    {error}

    \n
    \n );\n }\n\n const ratings = ratingsResponse?.data || [];\n\n return (\n
    \n {isLoading && (\n
    \n \n
    \n )}\n\n {!isLoading && ratings.length > 0 && (\n
    \n
    \n \n Rated{' '}\n {averageRating.toFixed(1)}\n \n \n by{' '}\n \n {totalWhoRated} user{totalWhoRated > 1 && 's'}\n \n
    \n\n
    \n {ratings.map((rating) => {\n const userAvatar = rating?.avatar\n ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${rating.avatar}`\n : '/img/default-avatar.png';\n\n const isLastRating =\n ratings[ratings.length - 1]._id === rating._id;\n\n return (\n \n
    \n
    \n \n {rating.name}\n
    \n \n {getRelativeTimeString(rating.createdAt)}\n \n
    \n\n
    \n \n\n {rating.feedback && (\n

    \n {rating.feedback}\n

    \n )}\n
    \n
    \n );\n })}\n
    \n\n {\n listRoadmapRatings(page).then();\n }}\n />\n
    \n )}\n\n {!isLoading && ratings.length === 0 && (\n
    \n \n

    No Feedbacks

    \n
    \n )}\n \n );\n}\n" }, { "path": "src/components/CustomRoadmap/PersonalRoadmapActionDropdown.tsx", "content": "import { useRef, useState } from 'react';\nimport { useOutsideClick } from '../../hooks/use-outside-click';\nimport { Lock, MoreVertical, Shapes, Trash2 } from 'lucide-react';\nimport { MoreVerticalIcon } from '../ReactIcons/MoreVerticalIcon.tsx';\n\ntype PersonalRoadmapActionDropdownProps = {\n onDelete?: () => void;\n onCustomize?: () => void;\n onUpdateSharing?: () => void;\n};\n\nexport function PersonalRoadmapActionDropdown(\n props: PersonalRoadmapActionDropdownProps,\n) {\n const { onDelete, onUpdateSharing, onCustomize } = props;\n\n const menuRef = useRef(null);\n const [isOpen, setIsOpen] = useState(false);\n\n useOutsideClick(menuRef, () => {\n setIsOpen(false);\n });\n\n return (\n
    \n setIsOpen(!isOpen)}\n className=\"hidden items-center opacity-60 transition-opacity hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30 sm:flex\"\n >\n \n \n\n setIsOpen(!isOpen)}\n className=\"flex items-center gap-1 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-hidden sm:hidden\"\n >\n \n Options\n \n\n {isOpen && (\n \n
      \n {onUpdateSharing && (\n
    • \n {\n setIsOpen(false);\n onUpdateSharing();\n }}\n className=\"flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700\"\n >\n \n Sharing\n \n
      • \n )}\n {onCustomize && (\n
    • \n {\n setIsOpen(false);\n onCustomize();\n }}\n className=\"flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700\"\n >\n \n Customize\n \n
      • \n )}\n {onDelete && (\n
    • \n {\n setIsOpen(false);\n onDelete();\n }}\n className=\"flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700\"\n >\n \n Delete\n \n
      • \n )}\n
    \n
    \n )}\n \n );\n}\n" }, { "path": "src/components/CustomRoadmap/PersonalRoadmapList.tsx", "content": "import { httpDelete } from '../../lib/http';\nimport { pageProgressMessage } from '../../stores/page';\nimport {\n ExternalLink,\n Shapes,\n type LucideIcon,\n Globe,\n LockIcon,\n Users,\n PenSquare,\n} from 'lucide-react';\nimport { useToast } from '../../hooks/use-toast';\nimport {\n type AllowedRoadmapVisibility,\n type RoadmapDocument,\n} from './CreateRoadmap/CreateRoadmapModal';\nimport { PersonalRoadmapActionDropdown } from './PersonalRoadmapActionDropdown';\nimport type { GetRoadmapListResponse } from './RoadmapListPage';\nimport { useState, type Dispatch, type SetStateAction } from 'react';\nimport { ShareOptionsModal } from '../ShareOptions/ShareOptionsModal';\nimport { RoadmapIcon } from '../ReactIcons/RoadmapIcon.tsx';\n\ntype PersonalRoadmapListType = {\n roadmaps: GetRoadmapListResponse['personalRoadmaps'];\n onDelete: (roadmapId: string) => void;\n onUpgrade: () => void;\n setAllRoadmaps: Dispatch>;\n maxLimit?: number;\n};\n\nexport function PersonalRoadmapList(props: PersonalRoadmapListType) {\n const {\n roadmaps: roadmapList,\n onDelete,\n setAllRoadmaps,\n onUpgrade,\n maxLimit = -1,\n } = props;\n\n const toast = useToast();\n\n const [selectedRoadmap, setSelectedRoadmap] = useState<\n GetRoadmapListResponse['personalRoadmaps'][number] | null\n >(null);\n\n async function deleteRoadmap(roadmapId: string) {\n const { response, error } = await httpDelete(\n `${import.meta.env.PUBLIC_API_URL}/v1-delete-roadmap/${roadmapId}`,\n );\n\n if (error || !response) {\n console.error(error);\n toast.error(error?.message || 'Something went wrong, please try again');\n\n return;\n }\n\n toast.success('Roadmap deleted');\n onDelete(roadmapId);\n }\n\n async function onRemove(roadmapId: string) {\n pageProgressMessage.set('Deleting roadmap');\n\n deleteRoadmap(roadmapId).finally(() => {\n pageProgressMessage.set('');\n });\n }\n\n const shareSettingsModal = selectedRoadmap && (\n setSelectedRoadmap(null)}\n onShareSettingsUpdate={(settings) => {\n setAllRoadmaps((prev) => {\n return {\n ...prev,\n personalRoadmaps: prev.personalRoadmaps.map((roadmap) => {\n if (roadmap._id === selectedRoadmap._id) {\n return {\n ...roadmap,\n ...settings,\n };\n }\n\n return roadmap;\n }),\n };\n });\n }}\n />\n );\n\n if (roadmapList.length === 0) {\n return (\n
    \n \n\n

    No roadmaps

    \n

    \n Create a roadmap to get started\n

    \n
    \n );\n }\n\n return (\n
    \n {shareSettingsModal}\n
    \n {maxLimit === -1 && <>{roadmapList.length} custom roadmap(s)}\n {maxLimit !== -1 && (\n <>\n {roadmapList.length} of {maxLimit} roadmaps{' '}\n \n Need more? Upgrade\n \n \n )}\n
    \n
      \n {roadmapList.map((roadmap) => {\n return (\n \n );\n })}\n
    \n
    \n );\n}\n\ntype CustomRoadmapItemProps = {\n roadmap: GetRoadmapListResponse['personalRoadmaps'][number];\n onRemove: (roadmapId: string) => Promise;\n setSelectedRoadmap: (\n roadmap: GetRoadmapListResponse['personalRoadmaps'][number] | null,\n ) => void;\n};\n\nfunction CustomRoadmapItem(props: CustomRoadmapItemProps) {\n const { roadmap, onRemove, setSelectedRoadmap } = props;\n\n const editorLink = `${import.meta.env.PUBLIC_EDITOR_APP_URL}/${roadmap._id}`;\n\n return (\n \n
    \n

    \n {roadmap.title}\n

    \n \n \n ·\n \n {roadmap.topics} topic\n \n
    \n
    \n {\n setSelectedRoadmap(roadmap);\n }}\n onCustomize={() => {\n window.open(editorLink, '_blank');\n }}\n onDelete={() => {\n if (confirm('Are you sure you want to remove this roadmap?')) {\n onRemove(roadmap._id!).finally(() => {});\n }\n }}\n />\n\n \n \n Edit\n \n \n \n Visit\n \n
    \n \n );\n}\n\ntype VisibilityLabelProps = {\n visibility: AllowedRoadmapVisibility;\n sharedFriendIds?: string[];\n};\n\nconst visibilityDetails: Record<\n AllowedRoadmapVisibility,\n {\n icon: LucideIcon;\n label: string;\n }\n> = {\n public: {\n icon: Globe,\n label: 'Public',\n },\n me: {\n icon: LockIcon,\n label: 'Only me',\n },\n team: {\n icon: Users,\n label: 'Team Member(s)',\n },\n friends: {\n icon: Users,\n label: 'Friend(s)',\n },\n} as const;\n\nfunction VisibilityBadge(props: VisibilityLabelProps) {\n const { visibility, sharedFriendIds = [] } = props;\n\n const { label, icon: Icon } = visibilityDetails[visibility];\n\n return (\n \n \n
    \n {visibility === 'friends' && sharedFriendIds?.length > 0 && (\n {sharedFriendIds.length}\n )}\n {label}\n
    \n \n );\n}\n" }, { "path": "src/components/CustomRoadmap/RateRoadmapForm.tsx", "content": "import { useEffect, useState } from 'react';\nimport type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';\nimport { formatCommaNumber } from '../../lib/number';\nimport { Rating } from '../Rating/Rating';\nimport { httpGet, httpPost } from '../../lib/http';\nimport { useToast } from '../../hooks/use-toast';\nimport { isLoggedIn } from '../../lib/jwt';\nimport { Loader2, Star } from 'lucide-react';\nimport { cn } from '../../lib/classname';\nimport { showLoginPopup } from '../../lib/popup';\nimport { Spinner } from '../ReactIcons/Spinner.tsx';\n\ntype GetMyRoadmapRatingResponse = {\n id?: string;\n rating: number;\n feedback?: string;\n};\n\ntype RateRoadmapFormProps = {\n ratings: RoadmapDocument['ratings'];\n roadmapSlug: string;\n canManage?: boolean;\n};\n\nexport function RateRoadmapForm(props: RateRoadmapFormProps) {\n const { ratings, canManage = false, roadmapSlug } = props;\n const { breakdown = {}, average: _average } = ratings || {};\n const average = _average || 0;\n\n const ratingsKeys = [5, 4, 3, 2, 1];\n const totalRatings = ratingsKeys.reduce(\n (total, rating) => total + breakdown?.[rating] || 0,\n 0,\n );\n\n // if no rating then only show the ratings breakdown if the user can manage the roadmap\n const showRatingsBreakdown = average > 0 || canManage;\n\n const toast = useToast();\n const [isLoading, setIsLoading] = useState(true);\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n const [isRatingRoadmap, setIsRatingRoadmap] = useState(!showRatingsBreakdown);\n const [userRatingId, setUserRatingId] = useState();\n const [userRating, setUserRating] = useState(0);\n const [userFeedback, setUserFeedback] = useState('');\n\n const loadMyRoadmapRating = async () => {\n // user can't have the rating for their own roadmap\n if (canManage) {\n setIsLoading(false);\n return;\n }\n\n const { response, error } = await httpGet(\n `${import.meta.env.PUBLIC_API_URL}/v1-get-my-roadmap-rating/${roadmapSlug}`,\n );\n\n if (!response || error) {\n toast.error(error?.message || 'Something went wrong');\n setIsLoading(false);\n return;\n }\n\n setUserRatingId(response?.id);\n setUserRating(response?.rating);\n setUserFeedback(response?.feedback || '');\n setIsLoading(false);\n };\n\n const submitMyRoadmapRating = async () => {\n if (userRating <= 0) {\n toast.error('At least give it a star');\n return;\n }\n\n setIsSubmitting(true);\n const path = userRatingId\n ? 'v1-update-custom-roadmap-rating'\n : 'v1-rate-custom-roadmap';\n const { response, error } = await httpPost<{\n id: string;\n }>(`${import.meta.env.PUBLIC_API_URL}/${path}/${roadmapSlug}`, {\n rating: userRating,\n feedback: userFeedback,\n });\n\n if (!response || error) {\n toast.error(error?.message || 'Something went wrong');\n setIsSubmitting(false);\n return;\n }\n\n window.location.reload();\n };\n\n useEffect(() => {\n if (!isLoggedIn() || !roadmapSlug) {\n setIsLoading(false);\n return;\n }\n\n loadMyRoadmapRating().then();\n }, [roadmapSlug]);\n\n return (\n
    \n {showRatingsBreakdown && !isRatingRoadmap && (\n <>\n
      \n {ratingsKeys.map((rating) => {\n const percentage =\n totalRatings <= 0\n ? 0\n : ((breakdown?.[rating] || 0) / totalRatings) * 100;\n\n return (\n \n {rating} star\n
      \n
      \n\n {percentage > 0 && (\n \n {formatCommaNumber(breakdown?.[rating] || 0)}\n \n )}\n
    \n\n \n {parseInt(`${percentage}`, 10)}%\n \n \n );\n })}\n \n \n )}\n\n {!canManage && !isRatingRoadmap && (\n
    \n {isLoading && (\n
    \n \n
    \n )}\n\n {!isLoading && !isRatingRoadmap && !userRatingId && (\n <>\n

    \n Rate and share your thoughts with the roadmap creator.\n

    \n {\n if (!isLoggedIn()) {\n showLoginPopup();\n return;\n }\n\n setIsRatingRoadmap(true);\n }}\n disabled={isLoading}\n >\n {isLoading ? (\n \n ) : (\n 'Rate Roadmap'\n )}\n \n \n )}\n\n {!isLoading && !isRatingRoadmap && userRatingId && (\n
    \n

    \n Your Feedback\n {\n setIsRatingRoadmap(true);\n }}\n >\n Edit Rating\n \n

    \n
    \n (\n {userRating})\n
    \n {userFeedback &&

    {userFeedback}

    }\n
    \n )}\n
    \n )}\n\n {!canManage && isRatingRoadmap && (\n
    \n

    Rate this roadmap

    \n

    \n Share your thoughts with the roadmap creator.\n

    \n\n {\n e.preventDefault();\n submitMyRoadmapRating().then();\n }}\n >\n {\n setUserRating(rating);\n }}\n starSize={32}\n />\n
    \n \n Feedback to Creator{' '}\n (Optional)\n \n {\n setUserFeedback(e.target.value);\n }}\n />\n
    \n\n
    \n {\n setIsRatingRoadmap(false);\n }}\n type=\"button\"\n disabled={isSubmitting}\n >\n Cancel\n \n \n {isSubmitting ? (\n \n ) : userRatingId ? (\n 'Update Rating'\n ) : (\n 'Submit Rating'\n )}\n \n
    \n \n
    \n )}\n \n );\n}\n" }, { "path": "src/components/CustomRoadmap/ResourceProgressStats.tsx", "content": "import { HelpCircle } from 'lucide-react';\nimport { cn } from '../../lib/classname';\nimport type { ResourceType } from '../../lib/resource-progress';\nimport { useState } from 'react';\nimport { useStore } from '@nanostores/react';\nimport { canManageCurrentRoadmap, currentRoadmap } from '../../stores/roadmap';\nimport { ShareOptionsModal } from '../ShareOptions/ShareOptionsModal';\n\ntype ResourceProgressStatsProps = {\n resourceId: string;\n resourceType: ResourceType;\n isSecondaryBanner?: boolean;\n};\n\nexport function ResourceProgressStats(props: ResourceProgressStatsProps) {\n const { isSecondaryBanner = false } = props;\n\n const [isSharing, setIsSharing] = useState(false);\n\n const $canManageCurrentRoadmap = useStore(canManageCurrentRoadmap);\n const $currentRoadmap = useStore(currentRoadmap);\n\n return (\n <>\n {isSharing && $canManageCurrentRoadmap && $currentRoadmap && (\n setIsSharing(false)}\n onShareSettingsUpdate={(settings) => {\n currentRoadmap.set({\n ...$currentRoadmap,\n ...settings,\n });\n }}\n />\n )}\n