├── .env.template ├── .eslintrc ├── .github ├── actions │ ├── run-playwright │ │ └── action.yml │ └── setup-playwright │ │ └── action.yml ├── dependabot.yml └── workflows │ ├── combine-prs.yml │ ├── netlify-e2e.yml │ └── vercel-e2e.yml ├── .gitignore ├── .idea ├── .gitignore ├── codeStyles │ ├── Project.xml │ └── codeStyleConfig.xml ├── inspectionProfiles │ └── Project_Default.xml ├── jsLinters │ └── eslint.xml ├── libraries │ └── cache.xml ├── misc.xml ├── modules.xml ├── vcs.xml └── wix-cms-nextjs-template.iml ├── .npmrc ├── .nvmrc ├── .prettierrc.js ├── .yarn └── releases │ └── yarn-3.3.0.cjs ├── .yarnrc.yml ├── LICENSE ├── README.md ├── app ├── about │ └── page.tsx ├── components │ ├── Carousel │ │ └── Carousel.tsx │ ├── Image │ │ └── WixMediaImage.tsx │ ├── Layout │ │ ├── Footer.tsx │ │ ├── Header.tsx │ │ ├── NavBar │ │ │ ├── LoginAvatar.tsx │ │ │ ├── NavBar.tsx │ │ │ └── NavLink.tsx │ │ └── footer.css │ └── Logo │ │ └── Logo.tsx ├── constants.ts ├── contact │ └── page.tsx ├── globals.css ├── hooks │ └── useWixClientServer.ts ├── layout.tsx ├── news │ ├── [slug] │ │ └── page.tsx │ └── page.tsx ├── page.tsx ├── projects │ ├── [slug] │ │ └── page.tsx │ └── page.tsx ├── team │ └── page.tsx └── utils │ ├── date-formatter.ts │ └── test-ids.ts ├── docs ├── integration-guide.md └── media │ ├── github-action.png │ ├── project-business-solutions.png │ └── template-showcase.gif ├── netlify.toml ├── next.config.js ├── package.json ├── playwright-report ├── data │ ├── 1a3fd942def58d8d73864ce612fa28c115afab77.zip │ ├── 1fe778f5639b60ef8f99c73d7c7c3909cb8034c8.zip │ ├── a42cc3bd0ac361d776de26b7a531a407c1a51b04.zip │ ├── b4e27ae71faa27fc78306c45d2ed3c699c04c138.zip │ ├── ded07751d8c7bb32d1c9c6b50a34ee472b83c2a3.zip │ ├── ebee76e04f9a0fbacd8dac22341b51cb0051f55c.zip │ └── f65bb65740e2c310db6ccf5249dd53a7036bd0c8.zip ├── index.html └── trace │ ├── assets │ ├── codeMirrorModule-aea9c42f.js │ └── wsPort-fb5048bf.js │ ├── codeMirrorModule.5d0f417c.css │ ├── codicon.dcd00fb4.ttf │ ├── icon-16x16.png │ ├── icon-192x192.png │ ├── icon-256x256.png │ ├── icon-32x32.png │ ├── icon-384x384.png │ ├── icon-512x512.png │ ├── index.3960872c.js │ ├── index.html │ ├── popout.html │ ├── sw.bundle.js │ ├── uiMode.6f708c89.js │ ├── uiMode.922a7b48.css │ ├── uiMode.html │ ├── wsPort.9e506779.css │ └── xtermModule.6428296b.css ├── playwright.config.ts ├── postcss.config.js ├── public └── images │ └── placeholder.jpg ├── tailwind.config.js ├── test-results ├── home-Home-Page-look-and-feel---highlights-chromium │ └── trace.zip ├── home-Home-Page-navigation---Our-Initiatives-navigates-to-Projects-page-chromium │ └── trace.zip ├── news-News-Page-look-and-feel---News-navigates-to-News-Details--chromium │ └── trace.zip ├── news-News-Page-look-and-feel---news-chromium │ └── trace.zip ├── projects-Projects-Page-look-and-feel---Projects-navigates-to-Project-Details--chromium │ └── trace.zip ├── projects-Projects-Page-look-and-feel---projects-chromium │ └── trace.zip └── team-Team-Page-look-and-feel---team-chromium │ └── trace.zip ├── tests └── e2e │ ├── __screenshots__ │ ├── .gitignore │ ├── netlify │ │ └── chromium │ │ │ ├── home.spec.ts │ │ │ └── home-highlights.png │ │ │ ├── news.spec.ts │ │ │ ├── news-details.png │ │ │ └── news-list.png │ │ │ ├── projects.spec.ts │ │ │ ├── project-details.png │ │ │ └── project-list.png │ │ │ └── team.spec.ts │ │ │ └── team-members.png │ └── vercel │ │ └── chromium │ │ ├── home.spec.ts │ │ └── home-highlights.png │ │ ├── news.spec.ts │ │ ├── news-details.png │ │ └── news-list.png │ │ ├── projects.spec.ts │ │ ├── project-details.png │ │ └── project-list.png │ │ └── team.spec.ts │ │ └── team-members.png │ ├── home.spec.ts │ ├── news.spec.ts │ ├── projects.spec.ts │ └── team.spec.ts ├── tsconfig.json └── yarn.lock /.env.template: -------------------------------------------------------------------------------- 1 | # this is a template, copy to .env.local with proper values for local development (do not store API Key in git) 2 | NEXT_PUBLIC_WIX_CLIENT_ID= -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["prettier"], 3 | "extends": ["next/core-web-vitals", "prettier"], 4 | "rules": { 5 | "prettier/prettier": "error", 6 | "react-hooks/rules-of-hooks": "warn" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.github/actions/run-playwright/action.yml: -------------------------------------------------------------------------------- 1 | name: 'Store Playwright Results' 2 | description: 'Store Playwright Results' 3 | inputs: 4 | provider-deployment-url: 5 | description: 'The deployment URL to test with' 6 | required: true 7 | provider: 8 | description: 'Which next deployment provider is used' 9 | required: true 10 | githubToken: 11 | description: 'GitHub Token' 12 | required: true 13 | prNumber: 14 | description: 'Pull request ID (optional)' 15 | required: false 16 | outputs: 17 | conclusion: 18 | description: 'E2E result' 19 | runs: 20 | using: "composite" 21 | steps: 22 | - name: Run E2E Tests on Netlify URL 23 | id: playwright-e2e 24 | run: REMOTE_PROVIDER=${{ inputs.provider }} yarn e2e 25 | shell: bash 26 | env: 27 | PLAYWRIGHT_TEST_BASE_URL: ${{ inputs.provider-deployment-url }} 28 | - uses: actions/upload-artifact@v4 29 | id: playwright-report-artifact 30 | if: always() 31 | with: 32 | name: playwright-report-${{ inputs.provider }} 33 | path: playwright-report/ 34 | retention-days: 10 35 | - uses: actions/upload-artifact@v4 36 | id: playwright-screenshots-artifact 37 | if: always() 38 | with: 39 | name: screenshots-${{inputs.provider}} 40 | path: tests/e2e/__screenshots__/${{inputs.provider}} 41 | retention-days: 10 42 | - uses: actions/github-script@v6 43 | if: always() 44 | with: 45 | github-token: ${{ inputs.githubToken }} 46 | script: | 47 | const conclusion = '${{ steps.playwright-e2e.outcome }}'; 48 | const prNumber = '${{ inputs.prNumber }}'; 49 | const provider = '${{ inputs.provider }}'; 50 | const deploymentUrl = '${{ inputs.provider-deployment-url }}'; 51 | 52 | if (prNumber && conclusion) { 53 | core.setOutput('conclusion', conclusion); 54 | const owner = context.repo.owner; 55 | const repo = context.repo.repo; 56 | const jobName = context.job; 57 | const runId = context.runId; 58 | 59 | const pullRequest = await github.rest.pulls.get({ 60 | owner, 61 | repo, 62 | pull_number: prNumber, 63 | }); 64 | const checksForPr = await github.rest.checks.listForRef({ 65 | owner: owner, 66 | repo: repo, 67 | ref: pullRequest.data.head.ref, 68 | }); 69 | 70 | let checkRunId = null; 71 | for (const checkRun of checksForPr.data.check_runs) { 72 | if (checkRun.name === jobName) { 73 | checkRunId = checkRun.id; 74 | console.log(`Found Check Run ID: ${checkRunId}`); 75 | break; 76 | } 77 | } 78 | 79 | if (checkRunId) { 80 | const checkInput = { 81 | owner, 82 | repo, 83 | check_run_id: checkRunId, 84 | pull_request: prNumber, 85 | status: 'completed', 86 | conclusion: conclusion, 87 | output: { 88 | title: `e2e ${provider}`, 89 | summary: `e2e ${provider}: ${conclusion}`, 90 | }, 91 | }; 92 | github.rest.checks.update(checkInput).catch((error) => { 93 | console.warn('Error updating check:', error, ' flow continues'); 94 | }); 95 | } 96 | // Create a comment with the artifact links on the pull request 97 | const artifactLinks = [ 98 | `## ${conclusion === 'success' ? ':green_circle:' : ':red_circle:'} Playwright E2E for ${provider.toUpperCase()}`, 99 | `| Name | Info |`, 100 | `|------|---------|`, 101 | `| Summary | [Action Summary](https://github.com/${owner}/${repo}/actions/runs/${runId}/) |`, 102 | `| Site URL | [${deploymentUrl}](${deploymentUrl}) |`, 103 | ]; 104 | const comment = artifactLinks.join('\n'); 105 | github.rest.issues.createComment({ 106 | owner, 107 | repo, 108 | issue_number: pullRequest.data.number, 109 | body: comment 110 | }).catch((error) => { 111 | console.warn('Error creating comment:', error, ' flow continues'); 112 | }); 113 | } 114 | -------------------------------------------------------------------------------- /.github/actions/setup-playwright/action.yml: -------------------------------------------------------------------------------- 1 | name: 'Setup Playwright With Cache' 2 | description: 'Setup Playwright With Cache' 3 | runs: 4 | using: "composite" 5 | steps: 6 | - name: Store Playwright's Version 7 | id: store-playwright-version 8 | run: | 9 | PLAYWRIGHT_VERSION=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//') 10 | echo "Playwright's Version: $PLAYWRIGHT_VERSION" 11 | echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_OUTPUT 12 | shell: bash 13 | - name: Cache Playwright Browsers for Playwright's Version 14 | id: cache-playwright-browsers 15 | uses: actions/cache@v3 16 | with: 17 | path: ~/.cache/ms-playwright 18 | key: playwright-browsers-${{ steps.store-playwright-version.outputs.PLAYWRIGHT_VERSION }} 19 | - name: Setup Playwright 20 | if: steps.cache-playwright-browsers.outputs.cache-hit != 'true' 21 | run: yarn playwright install --with-deps 22 | shell: bash 23 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for all configuration options: 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates 5 | 6 | version: 2 7 | updates: 8 | - package-ecosystem: "npm" 9 | directory: "/" 10 | open-pull-requests-limit: 10 11 | versioning-strategy: lockfile-only 12 | schedule: 13 | interval: "weekly" 14 | # Check for npm updates on Saturdays 15 | day: "saturday" 16 | -------------------------------------------------------------------------------- /.github/workflows/combine-prs.yml: -------------------------------------------------------------------------------- 1 | name: 'Combine PRs' 2 | 3 | # Controls when the action will run - in this case triggered manually 4 | on: 5 | workflow_dispatch: 6 | inputs: 7 | branchPrefix: 8 | description: 'Branch prefix to find combinable PRs based on' 9 | required: true 10 | default: 'dependabot' 11 | mustBeGreen: 12 | description: 'Only combine PRs that are green (status is success). Set to false if repo does not run checks' 13 | type: boolean 14 | required: true 15 | default: true 16 | combineBranchName: 17 | description: 'Name of the branch to combine PRs into' 18 | required: true 19 | default: 'combine-prs-branch' 20 | pullRequestLabel: 21 | description: 'Label to add to the created PR' 22 | required: true 23 | default: 'combine-deps' 24 | ignoreLabel: 25 | description: 'Exclude PRs with this label' 26 | required: true 27 | default: 'nocombine' 28 | 29 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 30 | jobs: 31 | # This workflow contains a single job called "combine-prs" 32 | combine-prs: 33 | # The type of runner that the job will run on 34 | runs-on: ubuntu-latest 35 | 36 | # Steps represent a sequence of tasks that will be executed as part of the job 37 | steps: 38 | - uses: actions/github-script@v6 39 | id: create-combined-pr 40 | name: Create Combined PR 41 | with: 42 | github-token: ${{secrets.GITHUB_TOKEN}} 43 | script: | 44 | const pulls = await github.paginate('GET /repos/:owner/:repo/pulls', { 45 | owner: context.repo.owner, 46 | repo: context.repo.repo 47 | }); 48 | let branchesAndPRStrings = []; 49 | let baseBranch = null; 50 | let baseBranchSHA = null; 51 | for (const pull of pulls) { 52 | const branch = pull['head']['ref']; 53 | console.log('Pull for branch: ' + branch); 54 | if (branch.startsWith('${{ github.event.inputs.branchPrefix }}')) { 55 | console.log('Branch matched prefix: ' + branch); 56 | let statusOK = true; 57 | if(${{ github.event.inputs.mustBeGreen }}) { 58 | console.log('Checking green status: ' + branch); 59 | const stateQuery = `query($owner: String!, $repo: String!, $pull_number: Int!) { 60 | repository(owner: $owner, name: $repo) { 61 | pullRequest(number:$pull_number) { 62 | commits(last: 1) { 63 | nodes { 64 | commit { 65 | statusCheckRollup { 66 | state 67 | } 68 | } 69 | } 70 | } 71 | } 72 | } 73 | }` 74 | const vars = { 75 | owner: context.repo.owner, 76 | repo: context.repo.repo, 77 | pull_number: pull['number'] 78 | }; 79 | const result = await github.graphql(stateQuery, vars); 80 | const [{ commit }] = result.repository.pullRequest.commits.nodes; 81 | const state = commit.statusCheckRollup.state 82 | console.log('Validating status: ' + state); 83 | if(state != 'SUCCESS') { 84 | console.log('Discarding ' + branch + ' with status ' + state); 85 | statusOK = false; 86 | } 87 | } 88 | console.log('Checking labels: ' + branch); 89 | const labels = pull['labels']; 90 | for(const label of labels) { 91 | const labelName = label['name']; 92 | console.log('Checking label: ' + labelName); 93 | if(labelName == '${{ github.event.inputs.ignoreLabel }}') { 94 | console.log('Discarding ' + branch + ' with label ' + labelName); 95 | statusOK = false; 96 | } 97 | } 98 | if (statusOK) { 99 | console.log('Adding branch to array: ' + branch); 100 | const prString = '#' + pull['number'] + ' ' + pull['title']; 101 | branchesAndPRStrings.push({ branch, prString }); 102 | baseBranch = pull['base']['ref']; 103 | baseBranchSHA = pull['base']['sha']; 104 | } 105 | } 106 | } 107 | if (branchesAndPRStrings.length == 0) { 108 | core.setFailed('No PRs/branches matched criteria'); 109 | return; 110 | } 111 | try { 112 | await github.rest.git.createRef({ 113 | owner: context.repo.owner, 114 | repo: context.repo.repo, 115 | ref: 'refs/heads/' + '${{ github.event.inputs.combineBranchName }}', 116 | sha: baseBranchSHA 117 | }); 118 | } catch (error) { 119 | console.log(error); 120 | core.setFailed('Failed to create combined branch - maybe a branch by that name already exists?'); 121 | return; 122 | } 123 | 124 | let combinedPRs = []; 125 | let mergeFailedPRs = []; 126 | for(const { branch, prString } of branchesAndPRStrings) { 127 | try { 128 | await github.rest.repos.merge({ 129 | owner: context.repo.owner, 130 | repo: context.repo.repo, 131 | base: '${{ github.event.inputs.combineBranchName }}', 132 | head: branch, 133 | }); 134 | console.log('Merged branch ' + branch); 135 | combinedPRs.push(prString); 136 | } catch (error) { 137 | console.log('Failed to merge branch ' + branch); 138 | mergeFailedPRs.push(prString); 139 | } 140 | } 141 | 142 | console.log('Creating combined PR'); 143 | const combinedPRsString = combinedPRs.join('\n'); 144 | let body = '✅ This PR was created by the Combine PRs action by combining the following PRs:\n' + combinedPRsString; 145 | if(mergeFailedPRs.length > 0) { 146 | const mergeFailedPRsString = mergeFailedPRs.join('\n'); 147 | body += '\n\n⚠️ The following PRs were left out due to merge conflicts:\n' + mergeFailedPRsString 148 | } 149 | const createdPullRequest = await github.rest.pulls.create({ 150 | owner: context.repo.owner, 151 | repo: context.repo.repo, 152 | title: 'Combined PR', 153 | head: '${{ github.event.inputs.combineBranchName }}', 154 | base: baseBranch, 155 | body: body 156 | }); 157 | console.log('Repo created, adding label to PR number: ', createdPullRequest.data.number); 158 | await github.rest.issues.addLabels({ 159 | issue_number: createdPullRequest.data.number, 160 | owner: context.repo.owner, 161 | repo: context.repo.repo, 162 | labels: ['${{ github.event.inputs.pullRequestLabel }}'] 163 | }) 164 | -------------------------------------------------------------------------------- /.github/workflows/netlify-e2e.yml: -------------------------------------------------------------------------------- 1 | name: Netlify E2E 2 | on: 3 | pull_request: 4 | branches: [ main ] 5 | workflow_dispatch: 6 | inputs: 7 | deploymentUrl: 8 | description: 'The deployment URL to test with' 9 | required: true 10 | prNumber: 11 | description: 'Pull request number (optional)' 12 | required: false 13 | jobs: 14 | netlify-e2e: 15 | timeout-minutes: 60 16 | runs-on: ubuntu-latest 17 | steps: 18 | - uses: actions/checkout@v3 19 | - uses: actions/setup-node@v3 20 | with: 21 | node-version: 16 22 | cache: 'yarn' 23 | - name: Install dependencies 24 | run: yarn 25 | - uses: ./.github/actions/setup-playwright 26 | - name: Waiting for 200 from the Netlify Preview 27 | if: ${{ !github.event.inputs.deploymentUrl }} 28 | uses: jakepartusch/wait-for-netlify-action@v1.4 29 | id: waitFor200 30 | with: 31 | site_name: "wix-cms-nextjs-template" # TODO: change to your site name 32 | max_timeout: 120 # 2 Minutes, depends on your build pipeline duration 33 | - name: Set Run with URL 34 | run: | 35 | echo "DEPLOYMENT_URL=${{ github.event.inputs.deploymentUrl || steps.waitFor200.outputs.url }}" >> $GITHUB_ENV 36 | - uses: ./.github/actions/run-playwright 37 | id: runPlaywright 38 | with: 39 | provider: 'netlify' 40 | githubToken: ${{ secrets.GITHUB_TOKEN }} 41 | prNumber: ${{ github.event.inputs.prNumber || github.event.pull_request.number }} 42 | provider-deployment-url: ${{ env.DEPLOYMENT_URL }} 43 | -------------------------------------------------------------------------------- /.github/workflows/vercel-e2e.yml: -------------------------------------------------------------------------------- 1 | # This workflow uses actions/cache@v3, but it would always get cache miss since it runs on deployment_status trigger 2 | # See - https://github.com/actions/cache/issues/319 3 | # If GitHub would allow deployment_status trigger to access cache, it would work here too 4 | name: Vercel E2E 5 | on: 6 | deployment_status: 7 | workflow_dispatch: 8 | inputs: 9 | deploymentUrl: 10 | description: 'The deployment URL to test with' 11 | required: true 12 | prNumber: 13 | description: 'Pull request number (optional)' 14 | required: false 15 | jobs: 16 | vercel-e2e: 17 | if: github.event.inputs.deploymentUrl || (github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success' && contains(github.event.deployment_status.target_url, 'vercel-demo-wix-cms')) # TODO: change to your site name 18 | timeout-minutes: 60 19 | runs-on: ubuntu-latest 20 | steps: 21 | - uses: actions/checkout@v3 22 | - uses: actions/setup-node@v3 23 | with: 24 | node-version: 16 25 | cache: 'yarn' 26 | - name: Install dependencies 27 | run: yarn 28 | - uses: ./.github/actions/setup-playwright 29 | - name: Set Run with URL 30 | run: | 31 | echo "setting DEPLOYMENT_URL=${{ github.event.inputs.deploymentUrl || github.event.deployment_status.target_url }}" 32 | echo "DEPLOYMENT_URL=${{ github.event.inputs.deploymentUrl || github.event.deployment_status.target_url }}" >> $GITHUB_ENV 33 | - uses: ./.github/actions/run-playwright 34 | id: runPlaywright 35 | with: 36 | provider: 'vercel' 37 | githubToken: ${{ secrets.GITHUB_TOKEN }} 38 | prNumber: ${{ github.event.inputs.prNumber }} 39 | provider-deployment-url: ${{ env.DEPLOYMENT_URL }} 40 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | 38 | .vscode 39 | 40 | # Yarn Berry 41 | .pnp.* 42 | .yarn/* 43 | !.yarn/patches 44 | !.yarn/plugins 45 | !.yarn/releases 46 | !.yarn/sdks 47 | !.yarn/versions 48 | .yarn/install-state.gz 49 | #IDEA 50 | .idea 51 | #Playwright 52 | /test-results/ 53 | /playwright-report/ 54 | /playwright/.cache/ 55 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Editor-based HTTP Client requests 5 | /httpRequests/ 6 | # Datasource local storage ignored files 7 | /dataSources/ 8 | /dataSources.local.xml 9 | -------------------------------------------------------------------------------- /.idea/codeStyles/Project.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 13 | 14 | 15 | 19 | 20 | 21 | 22 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /.idea/codeStyles/codeStyleConfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /.idea/jsLinters/eslint.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/wix-cms-nextjs-template.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org 2 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 18 -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: true, 3 | onTrailingComma: true, 4 | singleQuote: true, 5 | }; 6 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | yarnPath: .yarn/releases/yarn-3.3.0.cjs 2 | 3 | nodeLinker: node-modules 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Wix.com 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # A Wix CMS Next.js Education Template 2 | 3 | ![Template showcase](docs/media/template-showcase.gif) 4 | 5 | This template is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). It uses [Wix Headless](https://dev.wix.com/api/sdk/about-wix-headless/overview) to leverage the Wix CMS business solution for managing the content on an education site. 6 | 7 | ## Local Development 8 | 9 | Prerequisites: 10 | 11 | 1. [Create a Wix Headless project](https://dev.wix.com/docs/go-headless/getting-started/setup/general-setup/create-a-project) 12 | 2. [Add the Content Manager app to your project](https://dev.wix.com/docs/go-headless/getting-started/setup/general-setup/add-apps-to-a-project) 13 | 3. Authorize the template with [quick start deployment](https://manage.wix.com/headless-funnel-nextjs/select-platform?templateName=cms) or by [creating an OAuth app](https://dev.wix.com/docs/go-headless/getting-started/setup/authorization/create-an-o-auth-app-for-visitors-and-members) 14 | 15 | Set up environment variables to consume Wix Headless APIs: 16 | 17 | 1. In the template's root folder, create a file for the local environment variables: 18 | ```sh 19 | cp .env.template .env.local. 20 | ``` 21 | 2. In the new **.env.local** file, paste the OAuth app client ID after `NEXT_PUBLIC_WIX_CLIENT_ID=`. 22 | 23 | Run the development server: 24 | 25 | 1. Run either: 26 | 27 | ```sh 28 | yarn dev 29 | ``` 30 | 31 | or 32 | 33 | ```sh 34 | npm i 35 | npm run dev 36 | ``` 37 | 38 | 2. Open http://localhost:3000 in your browser to see the template home page. 39 | 40 | Edit the template: 41 | 42 | - Start editing the homepage by modifying **app/page.tsx**. The page auto-updates as you edit the file. 43 | - Edit any other page using the pattern **app/page.tsx**. For more information, see [Defining Routes](https://beta.nextjs.org/docs/routing/defining-routes) in the Next.js documentation. 44 | 45 | # Deployment 46 | 47 | You can deploy this repository using any platform which supports Next.js Version 13 and [App Router](https://nextjs.org/docs/app). 48 | 49 | The repository requires a single environment variable: `NEXT_PUBLIC_WIX_CLIENT_ID`, which should contain a client ID authorizing access to a Wix project's data. 50 | 51 | # Learn More 52 | 53 | To learn how to customize the template and add more functionality using Wix APIs, see the [Wix JavaScript SDK reference](https://dev.wix.com/api/sdk). 54 | 55 | This template is written in [Next.js](https://nextjs.org/docs) 13 using the [Next.js App Router](https://nextjs.org/docs/app). 56 | 57 | To learn more about Next.js, see: 58 | 59 | - [Next.js documentation](https://nextjs.org/docs): Learn about Next.js features and APIs. 60 | - [Learn Next.js](https://nextjs.org/learn): An interactive Next.js tutorial. 61 | 62 | Additionally, this template uses the following libraries and features: 63 | 64 | - [React Server Components](https://nextjs.org/docs/advanced-features/react-18/server-components) 65 | - [TypeScript](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html) 66 | - [TanStack Query v4](https://tanstack.com/query/latest) 67 | - [Tailwind CSS](https://tailwindcss.com/) 68 | - [Flowbite](https://flowbite.com/) 69 | - [Wix client SDK](https://dev.wix.com/api/sdk/introduction) 70 | 71 | # Next.js and Wix Integration Guide 72 | 73 | See the comprehensive [integration guide](./docs/integration-guide.md) for step-by-step instructions on how to configure Wix as your headless Booking solution using Next.js on Vercel. 74 | -------------------------------------------------------------------------------- /app/about/page.tsx: -------------------------------------------------------------------------------- 1 | import { WixMediaImage } from '@app/components/Image/WixMediaImage'; 2 | export default async function About() { 3 | return ( 4 |
5 |
6 | 13 |
14 |
15 |

About ChoosEquality

16 |

17 | ChoosEquality is a non-profit organization that aims to bring 18 | education to everyone, regardless of age, background, or location. We 19 | believe that education is a human right and a powerful force for 20 | positive change in the world. We provide training, tools, resources, 21 | and support to help schools achieve their educational goals and 22 | aspirations. We also advocate for policies and reforms that promote 23 | quality education for all. 24 |

25 |

26 | We envision a world where everyone has the opportunity to learn, grow, 27 | and thrive. Our mission is to empower people and communities with the 28 | knowledge and skills they need to create a better future for 29 | themselves and others. 30 |

31 |

32 | We are ChoosEquality and we invite you to join us in making a 33 | difference. 34 |

35 |
36 | 37 | 2035 Financial Statement 38 | 39 | 40 | Certification Registry 41 | 42 |
43 |

44 | Our Goals 45 |

46 |
47 |
48 | 76 | 77 | Spread empathy 78 |
through education 79 | 80 |
81 |
82 | 145 | 146 | Increase donations equally
across 24 countries 147 | 148 |
149 |
150 | 258 | 259 | Help more children and teens
graduate from high school 260 | 261 |
262 |
263 |
264 |
265 | ); 266 | } 267 | -------------------------------------------------------------------------------- /app/components/Carousel/Carousel.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import { Carousel } from 'flowbite-react'; 3 | 4 | export const CarouselClient = () => { 5 | const texts = [ 6 | '“I have been volunteering with ChoosEquality for over a year now and I can say that it has been a rewarding and meaningful experience.”', 7 | '“ChoosEquality is a movement that is transforming education for the better. I am proud to be part of it and I encourage anyone who cares about education to join us.”', 8 | '“I have also seen the positive impact that ChoosEquality has on the kids and the schools they work with.”', 9 | ]; 10 | 11 | return ( 12 |
13 | 14 | {texts.map((text, i) => ( 15 |
19 |

20 | {text} 21 |

22 |

Nora Jacobs, Teacher

23 |
24 | ))} 25 | 26 |
27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /app/components/Image/WixMediaImage.tsx: -------------------------------------------------------------------------------- 1 | import { media as wixMedia } from '@wix/sdk'; 2 | import Image, { ImageProps } from 'next/image'; 3 | import { PLACEHOLDER_IMAGE } from '@app/constants'; 4 | 5 | function getImageUrlForMedia(media: string, width: number, height: number) { 6 | if (media.startsWith('wix:image')) { 7 | return wixMedia.getScaledToFillImageUrl(media, width, height, {}); 8 | } else { 9 | return media; 10 | } 11 | } 12 | 13 | export function WixMediaImage({ 14 | media, 15 | height = 320, 16 | width = 640, 17 | alt = 'no info available for image', 18 | className, 19 | sizes = '10vw', 20 | objectFit, 21 | disableZoom = false, 22 | }: { 23 | media?: string; 24 | alt?: string; 25 | width?: number; 26 | height?: number; 27 | sizes?: string; 28 | className?: string; 29 | disableZoom?: boolean; 30 | objectFit?: 'cover' | 'contain'; 31 | }) { 32 | const imageUrl = media 33 | ? getImageUrlForMedia(media || '', width, height) 34 | : PLACEHOLDER_IMAGE; 35 | 36 | const styleProps: Partial = { 37 | ...(objectFit 38 | ? { style: { objectFit }, fill: true, sizes } 39 | : { width, height }), 40 | }; 41 | 42 | return ( 43 |
44 |
45 | {alt} 53 |
54 |
55 | ); 56 | } 57 | -------------------------------------------------------------------------------- /app/components/Layout/Footer.tsx: -------------------------------------------------------------------------------- 1 | import './footer.css'; 2 | import { Logo } from '@app/components/Logo/Logo'; 3 | import testIds from '@app/utils/test-ids'; 4 | 5 | const Footer = () => ( 6 | 52 | ); 53 | 54 | export default Footer; 55 | -------------------------------------------------------------------------------- /app/components/Layout/Header.tsx: -------------------------------------------------------------------------------- 1 | import { NavBar } from '@app/components/Layout/NavBar/NavBar'; 2 | import { Logo } from '@app/components/Logo/Logo'; 3 | import testIds from '@app/utils/test-ids'; 4 | 5 | const Header = () => ( 6 | <> 7 |
11 |
12 |

13 | 17 | 18 |
19 | ChoosEquality 20 | Education for All 21 |
22 | 23 |

24 |
25 | 26 |
27 |
28 |
29 | 30 | ); 31 | 32 | export default Header; 33 | -------------------------------------------------------------------------------- /app/components/Layout/NavBar/LoginAvatar.tsx: -------------------------------------------------------------------------------- 1 | import { SVGProps } from 'react'; 2 | 3 | const LoginAvatar = (props: SVGProps) => ( 4 | 13 | 14 | 15 | 16 | 17 | ); 18 | 19 | export default LoginAvatar; 20 | -------------------------------------------------------------------------------- /app/components/Layout/NavBar/NavBar.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import { NavLink } from './NavLink'; 3 | import { useCallback, useState } from 'react'; 4 | import type { LinkProps } from 'next/link'; 5 | import { usePathname } from 'next/navigation'; 6 | 7 | const navbarItems = [ 8 | { ref: '/', label: 'Home' }, 9 | { ref: '/about', label: 'About' }, 10 | { ref: '/projects', label: 'Projects' }, 11 | { ref: '/team', label: 'Team' }, 12 | { ref: '/news', label: 'News' }, 13 | { ref: '/contact', label: 'Contact' }, 14 | ]; 15 | 16 | const StyledNavLink = ({ 17 | isActive, 18 | className, 19 | ...linkProps 20 | }: LinkProps & { 21 | isActive: boolean; 22 | children: React.ReactNode; 23 | className?: string; 24 | }) => ( 25 | 31 | ); 32 | 33 | export function NavBar() { 34 | const [isMenuShown, setIsMenuShown] = useState(false); 35 | const pathname = usePathname(); 36 | const [linkRef, setLinkRef] = useState(pathname!); 37 | const toggleOpen = useCallback( 38 | () => setIsMenuShown(!isMenuShown), 39 | [isMenuShown] 40 | ); 41 | return ( 42 | <> 43 | 66 | 91 | 92 | ); 93 | } 94 | -------------------------------------------------------------------------------- /app/components/Layout/NavBar/NavLink.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import Link, { LinkProps } from 'next/link'; 3 | 4 | export type NavLinkProps = LinkProps & { 5 | children: React.ReactNode; 6 | className: string; 7 | }; 8 | 9 | export function NavLink(props: NavLinkProps) { 10 | const { children, ...linkProps } = props; 11 | 12 | return {props.children}; 13 | } 14 | -------------------------------------------------------------------------------- /app/components/Layout/footer.css: -------------------------------------------------------------------------------- 1 | @tailwind components; 2 | 3 | @layer components { 4 | .footer-form-field { 5 | @apply my-1; 6 | } 7 | 8 | .footer-form-label { 9 | @apply text-sm; 10 | @apply mb-3; 11 | @apply inline-block; 12 | } 13 | 14 | .footer-form-label[aria-required]::after { 15 | content: ' *'; 16 | } 17 | 18 | .footer-form-input { 19 | @apply block; 20 | @apply w-full; 21 | @apply px-3; 22 | @apply py-1; 23 | @apply text-black; 24 | @apply border; 25 | @apply border-2; 26 | @apply border-black; 27 | @apply rounded-none; 28 | @apply bg-transparent; 29 | @apply focus:border-black; 30 | @apply focus:ring-black text-xs; 31 | @apply leading-5; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /app/components/Logo/Logo.tsx: -------------------------------------------------------------------------------- 1 | export const Logo = () => { 2 | return ( 3 | 14 | 15 | 20 | 25 | 30 | 35 | 40 | 41 | 42 | ); 43 | }; 44 | -------------------------------------------------------------------------------- /app/constants.ts: -------------------------------------------------------------------------------- 1 | export const WIX_ACCESS_TOKEN = 'wix_accessToken'; 2 | export const WIX_REFRESH_TOKEN = 'wix_refreshToken'; 3 | 4 | export const PLACEHOLDER_IMAGE = '/images/placeholder.jpg'; 5 | -------------------------------------------------------------------------------- /app/contact/page.tsx: -------------------------------------------------------------------------------- 1 | import { WixMediaImage } from '@app/components/Image/WixMediaImage'; 2 | export default async function Page() { 3 | return ( 4 |
5 |
6 | 13 |
14 |
15 |

Contact

16 |
17 |

Volunteer

18 |
19 |
20 |
21 | 24 | 31 | 34 | 41 |
42 |
43 | 46 | 47 | 50 | 51 |
52 |
53 | 56 | 57 | 60 |
61 |
62 |
63 |

Partner

64 |
65 |
66 |
67 | 70 | 76 | 79 | 85 |
86 |
87 | 90 | 96 | 99 | 100 |
101 |
102 | 105 | 106 | 109 |
110 |
111 |
112 |
113 | ); 114 | } 115 | -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @font-face { 6 | font-display: block; 7 | font-family: Avenir-LT-W01_35-Light1475496; 8 | src: url(//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/edefe737-dc78-4aa3-ad03-3c6f908330ed.eot?#iefix); 9 | src: url(//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/edefe737-dc78-4aa3-ad03-3c6f908330ed.eot?#iefix) format("eot"),url(//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/0078f486-8e52-42c0-ad81-3c8d3d43f48e.woff2) format("woff2"),url(//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/908c4810-64db-4b46-bb8e-823eb41f68c0.woff) format("woff"),url(//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/4577388c-510f-4366-addb-8b663bcc762a.ttf) format("truetype"),url(//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/b0268c31-e450-4159-bfea-e0d20e2b5c0c.svg#b0268c31-e450-4159-bfea-e0d20e2b5c0c) format("svg") 10 | } 11 | 12 | @font-face {font-family: "Helvetica-W01-Light"; src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/03805817-4611-4dbc-8c65-0f73031c3973.woff") format("woff");} 13 | 14 | @font-face { 15 | font-display: block; 16 | font-family: "Oswald-Medium"; 17 | font-weight: 700; 18 | src: url("//static.parastorage.com/tag-bundler/api/v1/fonts-cache/googlefont/woff2/s/oswald/v16/dI-qzxlKVQA6TUC5RKSb31tXRa8TVwTICgirnJhmVJw.woff2") format("woff2"), 19 | url("//static.parastorage.com/tag-bundler/api/v1/fonts-cache/googlefont/woff/s/oswald/v16/dI-qzxlKVQA6TUC5RKSb3z8E0i7KZn-EPnyo3HZu7kw.woff") format("woff") 20 | } 21 | @font-face { 22 | font-display: block; 23 | font-family: 'Oswald'; 24 | font-style: normal; 25 | font-weight: 400; 26 | src: url("//static.parastorage.com/tag-bundler/api/v1/fonts-cache/googlefont/woff2/s/oswald/v29/TK3iWkUHHAIjg752FD8Gl-1PK62t.woff2") format('woff2'); 27 | unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; 28 | } 29 | 30 | @layer components { 31 | .btn-main { 32 | @apply text-white; 33 | @apply text-sm; 34 | @apply font-medium; 35 | @apply bg-blue-site; 36 | @apply font-site; 37 | @apply hover:bg-purple-800; 38 | @apply focus:outline-none; 39 | @apply focus:ring-4; 40 | @apply focus:ring-gray-300; 41 | @apply rounded-none; 42 | @apply px-6; 43 | @apply py-3; 44 | } 45 | 46 | .btn-main[disabled] { 47 | @apply hover:text-white; 48 | @apply bg-gray-400; 49 | @apply border-gray-400; 50 | @apply hover:bg-gray-400; 51 | } 52 | 53 | .font-site { 54 | font-family: Oswald-Medium,Oswald, sans-serif; 55 | } 56 | 57 | .font-helvetica { 58 | font-family: Helvetica-W01-Light, sans-serif; 59 | } 60 | 61 | .input { 62 | @apply block; 63 | @apply w-full; 64 | @apply border-0; 65 | @apply border-b; 66 | @apply border-blue-site; 67 | @apply focus:outline-none; 68 | @apply mb-4; 69 | } 70 | 71 | h1, .title { 72 | @apply text-4xl; 73 | @apply font-bold; 74 | } 75 | 76 | h2 { 77 | @apply text-base; 78 | @apply sm:text-xl; 79 | } 80 | } 81 | 82 | html, 83 | body { 84 | padding: 0; 85 | margin: 0; 86 | font: normal normal normal 18px/1.4em avenir-lt-w01_35-light1475496, sans-serif; 87 | @apply text-black; 88 | @apply font-helvetica; 89 | } 90 | 91 | a { 92 | color: inherit; 93 | text-decoration: none; 94 | } 95 | 96 | * { 97 | box-sizing: border-box; 98 | } -------------------------------------------------------------------------------- /app/hooks/useWixClientServer.ts: -------------------------------------------------------------------------------- 1 | import { createClient, OAuthStrategy } from '@wix/sdk'; 2 | import { items } from '@wix/data'; 3 | export const getWixClient = async () => { 4 | const wixClient = createClient({ 5 | modules: { items }, 6 | auth: OAuthStrategy({ clientId: process.env.NEXT_PUBLIC_WIX_CLIENT_ID! }), 7 | }); 8 | const tokens = await wixClient.auth.generateVisitorTokens(); 9 | wixClient.auth.setTokens(tokens); 10 | return wixClient; 11 | }; 12 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import './globals.css'; 2 | import Footer from '@app/components/Layout/Footer'; 3 | import Header from '@app/components/Layout/Header'; 4 | 5 | /** 6 | * Using force dynamic so changes in business assets (e.g. services) are immediately reflected. 7 | * If you prefer having it reflected only after redeploy (not recommended) please remove it 8 | * **/ 9 | export const revalidate = 0; 10 | 11 | export default function RootLayout({ 12 | children, 13 | }: { 14 | children: React.ReactNode; 15 | }) { 16 | return ( 17 | 18 | 19 | Create Wix Education Site 20 | 24 | 25 | 26 | 27 | 28 | {process.env.NEXT_PUBLIC_WIX_CLIENT_ID ? ( 29 | <> 30 |
31 |
{children}
32 |
33 |
34 |
35 | 36 | ) : ( 37 |
38 | Page not available. Please add an environment variable called 39 | NEXT_PUBLIC_WIX_CLIENT_ID, containing the client ID, to your 40 | deployment provider. 41 |
42 | )} 43 | 44 | 45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /app/news/[slug]/page.tsx: -------------------------------------------------------------------------------- 1 | import { getWixClient } from '@app/hooks/useWixClientServer'; 2 | import { WixMediaImage } from '@app/components/Image/WixMediaImage'; 3 | import testIds from '@app/utils/test-ids'; 4 | 5 | export default async function New({ params }: any) { 6 | const wixClient = await getWixClient(); 7 | const { items } = await wixClient.items 8 | .query('News') 9 | .eq('slug', params.slug) 10 | .find(); 11 | const item = items![0]; 12 | 13 | return ( 14 |
15 |
16 | 23 |
24 |
25 |

{item.title}

26 |

27 | {item.shortDescription} 28 |

29 |
30 | 36 |
37 |

41 |

42 |
43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /app/news/page.tsx: -------------------------------------------------------------------------------- 1 | import { getWixClient } from '@app/hooks/useWixClientServer'; 2 | import { formatDate } from '@app/utils/date-formatter'; 3 | import { WixMediaImage } from '@app/components/Image/WixMediaImage'; 4 | import testIds from '@app/utils/test-ids'; 5 | export default async function News() { 6 | const wixClient = await getWixClient(); 7 | const { items } = await wixClient.items.query('News').find(); 8 | 9 | return ( 10 |
11 |
12 | 19 |
20 |
21 |

25 | News & Updates 26 |

27 |

28 | Read the latest news and stay up to date about our organization, our 29 | projects, our events, and the impact we’re making. 30 |

31 |
35 | {items!.map((item) => ( 36 |
41 |
42 | 48 | 49 | {formatDate(new Date(item.date?.$date ?? item.date))} 50 | 51 |
52 |
53 |

{item.title}

54 |

{item.shortDescription}

55 | 60 | Read More 61 | 62 |
63 |
64 | ))} 65 |
66 |
67 |
68 | ); 69 | } 70 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | import { CarouselClient } from '@app/components/Carousel/Carousel'; 2 | import { WixMediaImage } from '@app/components/Image/WixMediaImage'; 3 | import testIds from '@app/utils/test-ids'; 4 | 5 | export default function Home() { 6 | return ( 7 |
8 |
9 |
10 | 16 |
17 |

FREE & ACCESSIBLE

18 |

19 | EDUCATION FOR ALL 20 |

21 |
22 |
23 |

24 | Take action to help us grow 25 |

26 | 30 | DONATE 31 | 32 |
33 |
34 | 35 |
39 |
40 |
41 | 47 |
48 |
49 |

Our Initiatives

50 |

51 | Our initiatives bring people together to help solve real problems 52 | and evoke a positive change. Explore our initiatives and see what 53 | you can do to help. 54 |

55 | 60 | Read More 61 | 62 |
63 |
64 |
65 |
66 | 72 |
73 |
74 |

Our Mission

75 |

76 | We believe that education is a human right and a powerful tool for 77 | social change. We provide educational projects, learning resources 78 | and mentoring programs for kids of all ages and backgrounds. We 79 | aim to create a world where everyone has the opportunity to learn 80 | and grow. 81 |

82 | 83 | Read More 84 | 85 |
86 |
87 |
88 |
89 |
90 |
91 | 97 |
98 |
99 |

Recent News

100 |

101 | Get caught up on recent news and our latest achievements in the 102 | world of education. 103 |

104 | 105 | Read More 106 | 107 |
108 |
109 |
110 |
111 | 117 |
118 |
119 |

Take Part

120 |

121 | We welcome contributions in whatever form they come. Whether you 122 | want to contribute your time as a volunteer, join us as a partner 123 | or donate resources towards helping us achieve our goals, there is 124 | always an opportunity to make a difference. 125 |

126 | 127 | Read More 128 | 129 |
130 |
131 |
132 |

133 | 2035 in Numbers 134 |

135 |
136 |
137 | 138 | 40K 139 | 140 | 141 | Dollars 142 |
143 | Raised 144 | 145 |
146 |
147 | 148 | 8K 149 | 150 | 151 | Graduate 152 |
153 | Students 154 | 155 |
156 |
157 | 158 | 120 159 | 160 | 161 | Technology 162 |
163 | Centers 164 | 165 |
166 |
167 | 168 |
169 | ); 170 | } 171 | -------------------------------------------------------------------------------- /app/projects/[slug]/page.tsx: -------------------------------------------------------------------------------- 1 | import { getWixClient } from '@app/hooks/useWixClientServer'; 2 | import { WixMediaImage } from '@app/components/Image/WixMediaImage'; 3 | import testIds from '@app/utils/test-ids'; 4 | 5 | export default async function Project({ params }: any) { 6 | const wixClient = await getWixClient(); 7 | const { items } = await wixClient.items 8 | .query('Our-Projects') 9 | .eq('slug', params.slug) 10 | .find(); 11 | const project = items![0]; 12 | 13 | return ( 14 |
18 |
19 | 26 |
27 |
28 |

{project.title}

29 |

30 | {project.shortDescription} 31 |

32 |

33 | {project.longDescription} 34 |

35 | 36 | Donate 37 | 38 |
39 | {project.gallery?.map((image: any, i: number) => ( 40 |
41 | 42 |
43 | ))} 44 |
45 |
46 |
47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /app/projects/page.tsx: -------------------------------------------------------------------------------- 1 | import { getWixClient } from '@app/hooks/useWixClientServer'; 2 | import { WixMediaImage } from '@app/components/Image/WixMediaImage'; 3 | import testIds from '@app/utils/test-ids'; 4 | export default async function Projects() { 5 | const wixClient = await getWixClient(); 6 | const { items } = await wixClient.items.query('Our-Projects').find(); 7 | 8 | return ( 9 |
10 |
11 | 18 |
19 |
20 |

24 | Our Projects 25 |

26 |

27 | At ChoosEquality, we are always working on projects to improve the 28 | quality and accessibility of education for everyone. Take a look at 29 | some of our current and past projects. 30 |

31 |
35 | {items!.map((item) => ( 36 |
41 |
42 | 47 |
48 |
49 |

{item.title}

50 |

{item.shortDescription}

51 | 56 | Read More 57 | 58 |
59 |
60 | ))} 61 |
62 |
63 |
64 | ); 65 | } 66 | -------------------------------------------------------------------------------- /app/team/page.tsx: -------------------------------------------------------------------------------- 1 | import { getWixClient } from '@app/hooks/useWixClientServer'; 2 | import { WixMediaImage } from '@app/components/Image/WixMediaImage'; 3 | import testIds from '@app/utils/test-ids'; 4 | export default async function Team() { 5 | const wixClient = await getWixClient(); 6 | const { items: team } = await wixClient.items.query('Our-Team').find(); 7 | const { items: volunteers } = await wixClient.items 8 | .query('Volunteers') 9 | .find(); 10 | return ( 11 |
12 |
13 | 20 |
21 |
22 |

Our Team

23 |

24 | ChoosEquality is more than an organization. It is a family of 25 | passionate and dedicated people who share a common vision and mission 26 | of improving education for everyone. Meet some of our amazing team 27 | members below and learn more about their roles and stories. 28 |

29 |
33 | {team!.map((item) => ( 34 |
35 |
36 | 41 |
42 |
43 |

{item.name}

44 |

{item.about}

45 | {item.email} 46 |
47 |
48 | ))} 49 |
50 |

51 | Our Volunteers 52 |

53 |

54 | ChoosEquality is powered by the passion and dedication of our 55 | volunteers, who are the heart and soul of our organization. Our 56 | volunteers are people from all walks of life, who share our vision and 57 | mission of improving education for everyone. 58 |

59 |
60 | {volunteers!.map((item) => ( 61 |
62 |
63 |

64 | {item.name} 65 |

66 |

{item.about}

67 | {item.email} 68 |
69 |
70 | ))} 71 |
72 |
73 |
74 | ); 75 | } 76 | -------------------------------------------------------------------------------- /app/utils/date-formatter.ts: -------------------------------------------------------------------------------- 1 | const LOCALE = 'en-US'; 2 | 3 | export function formatDate(date: Date): string { 4 | return Intl.DateTimeFormat(LOCALE, { 5 | month: 'short', 6 | day: 'numeric', 7 | year: 'numeric', 8 | }).format(date); 9 | } 10 | -------------------------------------------------------------------------------- /app/utils/test-ids.ts: -------------------------------------------------------------------------------- 1 | const ids = { 2 | LAYOUT: { 3 | HEADER: 'page.header', 4 | FOOTER: 'page.footer', 5 | }, 6 | HOME_PAGE: { 7 | HIGHLIGHTS: 'home.section.highlights', 8 | OUR_INITIATIVES_CTA: 'home.initiatives.cta', 9 | }, 10 | PROJECTS_PAGE: { 11 | HEADER: 'projects-page.header', 12 | PROJECT_LIST: 'projects-page.project-list', 13 | PROJECT_ITEM_CONTAINER: 'projects-page.project-item.container', 14 | PROJECT_ITEM_CTA: 'projects-page.project-item.cta', 15 | }, 16 | PROJECT_DETAILS_PAGE: { 17 | CONTAINER: 'project-details-page.container', 18 | }, 19 | TEAM_PAGE: { 20 | CONTAINER: 'team-page.container', 21 | TEAM_MEMBERS: 'team-page.team-members', 22 | }, 23 | NEWS_PAGE: { 24 | HEADER: 'news-page.header', 25 | NEWS_LIST: 'news-page.news-list', 26 | NEWS_ITEM_CONTAINER: 'news-page.news-item.container', 27 | NEWS_ITEM_CTA: 'news-page.news-item.cta', 28 | }, 29 | NEWS_DETAILS_PAGE: { 30 | CONTAINER: 'news-details-page.container', 31 | }, 32 | }; 33 | 34 | export default ids; 35 | -------------------------------------------------------------------------------- /docs/integration-guide.md: -------------------------------------------------------------------------------- 1 | 2 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://manage.wix.com/headless-funnel-nextjs/netlify?repository=https://github.com/wix/wix-cms-nextjs-template)   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?integration-ids=oac_LZ0wUqGylqzgr8bE8a1R7JTE&skippable-integrations=1&build-command=yarn+build&deploymentIds=dpl_9Gtegfcme9RUmTXFvVGrP8BwDGUV&s=https%3A%2F%2Fgithub.com%2Fwix%2Fwix-cms-nextjs-template&demo-image=%2F%2Fgithub.com%2Fwix%2Fwix-cms-nextjs-template%2Fraw%2Fmain%2Fdocs%2Fmedia%2Ftemplate-showcase.gif&external-id=%7B%22repo%22%3A%22https%3A%2F%2Fgithub.com%2Fwix%2Fwix-cms-nextjs-template%22%2C%22referralInfo%22%3A%22repo-readme_education%22%7D&demo-title=Education+Starter&demo-description=Education+starter+template+with+Wix%E2%80%99s+Content+Management+solution.&demo-url=https%3A%2F%2Fvercel.cms-demo.wix.dev&repository-name=wix-cms-nextjs-template&referralInfo=repo-readme_education) 3 | 4 | # A Wix Data Next.js Education Template 5 | 6 | ![Template showcase](./media/template-showcase.gif) 7 | 8 | This template is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). It uses [Wix Headless](https://dev.wix.com/api/sdk/about-wix-headless/overview) to leverage the Wix CMS business solution for managing the content on an education site. 9 | 10 | ## Part I: Get started 11 | 12 | To integrate the Wix Content Manager business solution with the template, first create and set up a project on Wix: 13 | 14 | ### Step 1: Create a project on Wix 15 | 16 | Create a [new Wix Headless project](https://www.wix.com/intro/headless?ref=netlify_github_education). For instructions on creating a Wix project, see [Create a Wix Headless Project](https://dev.wix.com/docs/go-headless/getting-started/setup/general-setup/create-a-project). 17 | 18 | When prompted to add functionalities to your new project, you don't need to select any business solutions, since every Wix Headless project includes CMS support: 19 | 20 | ![Apps Menu - select Bookings and Pricing Plans](./media/project-business-solutions.png) 21 | 22 | If needed, you can add business solutions to your project later. See [Add Apps to a Project](https://dev.wix.com/docs/go-headless/getting-started/setup/general-setup/add-apps-to-a-project). 23 | 24 | ### Step 2: Set up the Wix business solutions you need 25 | 26 | In the project [dashboard](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Fhome), click **Content Manager** in the sidebar menu to access the Content Manager. 27 | 28 | For information on creating and managing collections, see [Getting Started with the Content Manager](https://support.wix.com/en/article/about-the-content-manager-7160473). 29 | 30 | ### Step 3: Authorize the template 31 | 32 | There are 2 ways to authorize the template to access your Wix project: 33 | 34 | + [Option A: Quick start deployment](#option-a-quick-start-deployment). 35 | + [Option B: Create an OAuth client ID in the Wix dashboard](#option-b-create-an-oauth-client-id-in-the-wix-dashboard). 36 | 37 | #### Option A: Quick start deployment 38 | 39 | Click the quick start deployment link below to automatically authorize your template and configure your project. You'll be prompted to log in to your Wix account and to authorize the platform to access your project or site. 40 | 41 | Authentication credentials are automatically incorporated into the template, making it easy to get started coding and customizing. 42 | 43 | --- 44 | 45 | ##### Netlify 46 | [![Netlify Status](https://api.netlify.com/api/v1/badges/3dc4d147-be85-4063-bf14-01cc80da8125/deploy-status)](https://app.netlify.com/sites/wix-cms-nextjs-template/deploys) 47 | 48 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://manage.wix.com/headless-funnel-nextjs/netlify?repository=https://github.com/wix/wix-cms-nextjs-template) 49 | 50 | 51 | For more information, see [How to Deploy Next.js Sites to Netlify](https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/). 52 | 53 | You can also view our [live demo site](https://netlify.cms-demo.wix.dev/). 54 | 55 | --- 56 | 57 | ##### Vercel 58 | ![Vercel](https://vercelbadge.vercel.app/api/wix/wix-cms-nextjs-template?style=flat-square) 59 | 60 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?integration-ids=oac_LZ0wUqGylqzgr8bE8a1R7JTE&skippable-integrations=1&build-command=yarn+build&deploymentIds=dpl_9Gtegfcme9RUmTXFvVGrP8BwDGUV&s=https%3A%2F%2Fgithub.com%2Fwix%2Fwix-cms-nextjs-template&demo-image=%2F%2Fgithub.com%2Fwix%2Fwix-cms-nextjs-template%2Fraw%2Fmain%2Fdocs%2Fmedia%2Ftemplate-showcase.gif&external-id=%7B%22repo%22%3A%22https%3A%2F%2Fgithub.com%2Fwix%2Fwix-cms-nextjs-template%22%2C%22referralInfo%22%3A%22repo-readme_education%22%7D&demo-title=Education+Starter&demo-description=Education+starter+template+with+Wix%E2%80%99s+Content+Management+solution.&demo-url=https%3A%2F%2Fvercel.cms-demo.wix.dev&repository-name=wix-cms-nextjs-template&referralInfo=repo-readme_education) 61 | 62 | For more information, see [How to Deploy Next.js Sites to Vercel](https://vercel.com/docs/frameworks/nextjs). 63 | 64 | You can also view our [live demo site](https://vercel.cms-demo.wix.dev/). 65 | 66 | --- 67 | 68 | #### Option B: Create an OAuth client ID in the Wix dashboard 69 | 70 | If you don't want to use quick-start deployment, begin by forking this repo to your git account. 71 | 72 | Read [Set Up Authorization](https://dev.wix.com/api/sdk/auth:-headless-visitors/authorization:-create-an-oauth-app) in the Wix SDK documentation for instructions on how to manually create an OAuth app and generate a client ID in the [Headless Settings](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Foauth-apps-settings) menu of the Wix dashboard. 73 | 74 | After creating an OAuth app, store the Client ID in a secure location. 75 | 76 | > **Note:** Do not push the client ID to your source control. 77 | 78 | To set up environment variables for consuming Wix Headless APIs, follow these steps: 79 | 80 | ##### Local development environment 81 | 82 | 1. At the terminal, in the template's root folder, type `cp .env.template .env.local`. 83 | 2. In the new `.env.local` file, paste the client ID after `NEXT_PUBLIC_WIX_CLIENT_ID=`. 84 | 85 | ##### Production environment 86 | 87 | In your deployment provider, add an environment variable called `NEXT_PUBLIC_WIX_CLIENT_ID` containing the client ID. 88 | 89 | ## Part II: Local Development 90 | 91 | Once you’ve [authorized and configured](#part-i-get-started) your client, run the development server: 92 | 93 | ```shell 94 | yarn 95 | yarn dev 96 | ``` 97 | 98 | or 99 | 100 | ```shell 101 | npm i 102 | npm run dev 103 | ``` 104 | 105 | Open http://localhost:3000 with your browser to see the template home page. 106 | 107 | You can start editing the homepage by modifying `app/page.tsx`. The page auto-updates as you edit the file. 108 | 109 | Similarly, you can edit any other page on the pattern `app//page.tsx`. For more information, see [Defining Routes](https://beta.nextjs.org/docs/routing/defining-routes) in the Next.js documentation. 110 | 111 | ## Part III: Learn more about the tech stack 112 | 113 | To learn how to customize the template and add more functionality using Wix APIs, see the [Wix JavaScript SDK reference documentation](https://dev.wix.com/api/sdk). 114 | 115 | This template is written in [Next.js](https://nextjs.org/docs) 13 using [Next.js app directory](https://beta.nextjs.org/docs/app-directory-roadmap). To learn more about `Next.js`, see the following resources: 116 | 117 | + [Next.js documentation](https://nextjs.org/docs): Learn about Next.js features and APIs. 118 | + [Learn Next.js](https://nextjs.org/learn): An interactive Next.js tutorial. 119 | + [Next.js app directory](https://beta.nextjs.org/docs/app-directory-roadmap): Information on the Next.js App Router Roadmap. 120 | 121 | Additionally, this template uses the following libraries and features: 122 | + [React Server Components](https://nextjs.org/docs/advanced-features/react-18/server-components) 123 | + [TypeScript](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html) 124 | + [TanStack Query v4](https://tanstack.com/query/latest) 125 | + [Tailwind CSS](https://tailwindcss.com/) 126 | + [Flowbite](https://flowbite.com/) 127 | + [Wix client SDK](https://dev.wix.com/api/sdk/introduction) 128 | 129 | ## Part IV: Deployment 130 | 131 | You can deploy this repository using any platform which supports Next.js Version 13 and the [App Router Roadmap](https://beta.nextjs.org/docs/app-directory-roadmap). 132 | 133 | The repository only requires a single environment variable: `NEXT_PUBLIC_WIX_CLIENT_ID`, which should contain a client ID authorizing access to a Wix project's data. 134 | 135 | ## Part V :Package dependency management 136 | 137 | To ensure this repo always uses the latest APIs from the Wix JavaScript SDK, the repo is preconfigured with [Dependabot](https://docs.github.com/en/code-security/dependabot), GitHub's automated dependency management system. Due to the numerous pull requests generated by Dependabot, the repo also includes a preconfigured GitHub Action called "Combine PRs." This action can be executed manually to merge all of Dependabot's pull requests into a single PR, allowing for sanity checks to be performed only once. If the sanity check fails, each Dependabot PR can be inspected individually. 138 | 139 | ## Part VII :Testing 140 | 141 | This repo is preconfigured with [Playwright](https://playwright.dev/) for both functional and UI (screenshots) testing. 142 | It contains GitHub actions (for PRs) for both Netlify: [netlify-e2e.yml](../.github/workflows/netlify-e2e.yml) and Vercel: [vercel-e2e.yml](../.github/workflows/vercel-e2e.yml). 143 | 144 | Feel free to delete the one you are not using.
145 | **Note**: there is a `# TODO: change to your site name` in both `YAML` files, please change the site name to the actual site name in the relevant deployment platform 146 | 147 | ### Screenshot Testing 148 | This repo includes the screenshots to validate the initial site provided by this repo. Obviously, changing it to your needs would break these tests.
149 | To update the screenshots simply delete the failing ones under [location](../tests/e2e/__screenshots__), create a pull request and let the PR build fail, then head to `Netlify E2E / netlify-e2e`/`Vercel E2E / vercel-e2e` status checks, and under `Summary`, the screenshots generated by Playwright are available to download and update in the folder [location](../tests/e2e/__screenshots__) 150 | 151 | ![Github Action Summary](./media/github-action.png) 152 | -------------------------------------------------------------------------------- /docs/media/github-action.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/docs/media/github-action.png -------------------------------------------------------------------------------- /docs/media/project-business-solutions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/docs/media/project-business-solutions.png -------------------------------------------------------------------------------- /docs/media/template-showcase.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/docs/media/template-showcase.gif -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "npm run build" 3 | publish = ".next" 4 | 5 | [[plugins]] 6 | package = "@netlify/plugin-nextjs" 7 | 8 | [template] 9 | incoming-hooks = ["WixData"] 10 | 11 | [template.environment] 12 | NEXT_PUBLIC_WIX_CLIENT_ID = "Wix Headless Client ID" 13 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | env: {}, 4 | reactStrictMode: true, 5 | swcMinify: true, 6 | experimental: {}, 7 | eslint: { 8 | dirs: ['app'], 9 | }, 10 | images: { 11 | domains: ['static.wixstatic.com'], 12 | formats: ['image/webp'], 13 | }, 14 | }; 15 | 16 | module.exports = nextConfig; 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wix-cms-nextjs-template", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "debug": "NODE_OPTIONS='--inspect' next dev -p 3005", 8 | "test": "yarn e2e", 9 | "e2e": "yarn playwright test", 10 | "build": "next build", 11 | "start": "next start", 12 | "lint": "next lint --fix" 13 | }, 14 | "dependencies": { 15 | "@netlify/plugin-nextjs": "^4.36.0", 16 | "@wix/data": "^1.0.47", 17 | "@wix/sdk": "^1.5.0", 18 | "flowbite": "^1.5.4", 19 | "flowbite-react": "^0.4.4", 20 | "next": "^13.4.9", 21 | "react": "^18.2.0", 22 | "react-dom": "^18.2.0" 23 | }, 24 | "devDependencies": { 25 | "@playwright/test": "^1.34.3", 26 | "@types/node": "18.11.8", 27 | "@types/react": "18.0.24", 28 | "@types/react-dom": "18.0.8", 29 | "autoprefixer": "^10.4.13", 30 | "eslint": "^8.28.0", 31 | "eslint-config-next": "^13.4.9", 32 | "eslint-config-prettier": "^8.5.0", 33 | "eslint-plugin-prettier": "^4.2.1", 34 | "postcss": "^8.4.19", 35 | "prettier": "^2.8.0", 36 | "tailwindcss": "^3.2.4", 37 | "typescript": "4.8.4" 38 | }, 39 | "packageManager": "yarn@3.3.0" 40 | } 41 | -------------------------------------------------------------------------------- /playwright-report/data/1a3fd942def58d8d73864ce612fa28c115afab77.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/playwright-report/data/1a3fd942def58d8d73864ce612fa28c115afab77.zip -------------------------------------------------------------------------------- /playwright-report/data/1fe778f5639b60ef8f99c73d7c7c3909cb8034c8.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/playwright-report/data/1fe778f5639b60ef8f99c73d7c7c3909cb8034c8.zip -------------------------------------------------------------------------------- /playwright-report/data/a42cc3bd0ac361d776de26b7a531a407c1a51b04.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/playwright-report/data/a42cc3bd0ac361d776de26b7a531a407c1a51b04.zip -------------------------------------------------------------------------------- /playwright-report/data/b4e27ae71faa27fc78306c45d2ed3c699c04c138.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/playwright-report/data/b4e27ae71faa27fc78306c45d2ed3c699c04c138.zip -------------------------------------------------------------------------------- /playwright-report/data/ded07751d8c7bb32d1c9c6b50a34ee472b83c2a3.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/playwright-report/data/ded07751d8c7bb32d1c9c6b50a34ee472b83c2a3.zip -------------------------------------------------------------------------------- /playwright-report/data/ebee76e04f9a0fbacd8dac22341b51cb0051f55c.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/playwright-report/data/ebee76e04f9a0fbacd8dac22341b51cb0051f55c.zip -------------------------------------------------------------------------------- /playwright-report/data/f65bb65740e2c310db6ccf5249dd53a7036bd0c8.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/playwright-report/data/f65bb65740e2c310db6ccf5249dd53a7036bd0c8.zip -------------------------------------------------------------------------------- /playwright-report/trace/codeMirrorModule.5d0f417c.css: -------------------------------------------------------------------------------- 1 | .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:transparent}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:transparent}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error,.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:#ff06}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none} 2 | -------------------------------------------------------------------------------- /playwright-report/trace/codicon.dcd00fb4.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/playwright-report/trace/codicon.dcd00fb4.ttf -------------------------------------------------------------------------------- /playwright-report/trace/icon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/playwright-report/trace/icon-16x16.png -------------------------------------------------------------------------------- /playwright-report/trace/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/playwright-report/trace/icon-192x192.png -------------------------------------------------------------------------------- /playwright-report/trace/icon-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/playwright-report/trace/icon-256x256.png -------------------------------------------------------------------------------- /playwright-report/trace/icon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/playwright-report/trace/icon-32x32.png -------------------------------------------------------------------------------- /playwright-report/trace/icon-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/playwright-report/trace/icon-384x384.png -------------------------------------------------------------------------------- /playwright-report/trace/icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/playwright-report/trace/icon-512x512.png -------------------------------------------------------------------------------- /playwright-report/trace/index.3960872c.js: -------------------------------------------------------------------------------- 1 | import{M as E,r as a,c as x,j as c,a as t,T as M,t as C,W as j,b as F,d as O}from"./assets/wsPort-fb5048bf.js";const I=()=>{const[l,P]=a.useState(!1),[d,h]=a.useState([]),[p,W]=a.useState([]),[f,N]=a.useState(L),[m,v]=a.useState({done:0,total:0}),[b,u]=a.useState(!1),[S,w]=a.useState(null),[y,U]=a.useState(null),g=a.useCallback(e=>{const o=[],s=[],r=new URL(window.location.href);for(let i=0;i{e.preventDefault(),g(e.dataTransfer.files)},[g]),R=a.useCallback(e=>{e.preventDefault(),e.target.files&&g(e.target.files)},[g]);return a.useEffect(()=>{const e=new URL(window.location.href).searchParams,o=e.getAll("trace");P(e.has("isServer"));for(const s of o)if(s.startsWith("file:")){U(s||null);return}e.has("isServer")?x({onEvent(s,r){s==="loadTrace"&&(h(r.url?[r.url]:[]),u(!1),w(null))},onClose(){}}).then(s=>{s("ready")}):o.some(s=>s.startsWith("blob:"))||h(o)},[]),a.useEffect(()=>{(async()=>{if(d.length){const e=r=>{r.data.method==="progress"&&v(r.data.params)};navigator.serviceWorker.addEventListener("message",e),v({done:0,total:1});const o=[];for(let r=0;r{e.preventDefault(),u(!0)},children:[c("div",{className:"hbox header",children:[t("div",{className:"logo",children:"🎭"}),t("div",{className:"product",children:"Playwright"}),f.title&&t("div",{className:"title",children:f.title}),t("div",{className:"spacer"}),t(M,{icon:"color-mode",title:"Toggle color mode",toggled:!1,onClick:()=>C()})]}),t("div",{className:"progress",children:t("div",{className:"inner-progress",style:{width:m.total?100*m.done/m.total+"%":0}})}),t(j,{model:f}),y&&c("div",{className:"drop-target",children:[t("div",{children:"Trace Viewer uses Service Workers to show traces. To view trace:"}),c("div",{style:{paddingTop:20},children:[c("div",{children:["1. Click ",t("a",{href:y,children:"here"})," to put your trace into the download shelf"]}),c("div",{children:["2. Go to ",t("a",{href:"https://trace.playwright.dev",children:"trace.playwright.dev"})]}),t("div",{children:"3. Drop the trace from the download shelf into the page"})]})]}),!l&&!b&&!y&&(!d.length||S)&&c("div",{className:"drop-target",children:[t("div",{className:"processing-error",children:S}),t("div",{className:"title",children:"Drop Playwright Trace to load"}),t("div",{children:"or"}),t("button",{onClick:()=>{const e=document.createElement("input");e.type="file",e.multiple=!0,e.click(),e.addEventListener("change",o=>R(o))},children:"Select file(s)"}),t("div",{style:{maxWidth:400},children:"Playwright Trace Viewer is a Progressive Web App, it does not send your trace anywhere, it opens it locally."})]}),l&&!d.length&&t("div",{className:"drop-target",children:t("div",{className:"title",children:"Select test to see the trace"})}),b&&t("div",{className:"drop-target",onDragLeave:()=>{u(!1)},onDrop:e=>D(e),children:t("div",{className:"title",children:"Release to analyse the Playwright Trace"})})]})},L=new E([]);(async()=>(F(),window.location.protocol!=="file:"&&(window.location.href.includes("isUnderTest=true")&&await new Promise(l=>setTimeout(l,1e3)),navigator.serviceWorker.register("sw.bundle.js"),navigator.serviceWorker.controller||await new Promise(l=>{navigator.serviceWorker.oncontrollerchange=()=>l()}),setInterval(function(){fetch("ping")},1e4)),O.render(t(I,{}),document.querySelector("#root"))))(); 2 | -------------------------------------------------------------------------------- /playwright-report/trace/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Playwright Trace Viewer 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 |

The Playwright Trace Viewer must be loaded over the http:// or https:// protocols.

20 |

For more information, please see the docs.

21 | 22 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /playwright-report/trace/popout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /playwright-report/trace/uiMode.6f708c89.js: -------------------------------------------------------------------------------- 1 | import{u as ve,r as A,e as Se,_ as be,f as we,g as _e,a as p,R as g,h as ke,c as Te,s as de,j as E,S as Ee,i as Q,T as M,t as xe,E as Ce,m as ye,k as ae,W as Me,M as Re,l as Ne,b as Be,d as De}from"./assets/wsPort-fb5048bf.js";class Fe{constructor(e,t,s){this._tests=new Map,this._clearPreviousResultsWhenTestBegins=!1,this._rootSuite=new I("","root"),this._pathSeparator=e,this._reporter=t,this._reportConfig=s}dispatch(e){const{method:t,params:s}=e;if(t==="onBegin"){this._onBegin(s.config,s.projects);return}if(t==="onTestBegin"){this._onTestBegin(s.testId,s.result);return}if(t==="onTestEnd"){this._onTestEnd(s.test,s.result);return}if(t==="onStepBegin"){this._onStepBegin(s.testId,s.resultId,s.step);return}if(t==="onStepEnd"){this._onStepEnd(s.testId,s.resultId,s.step);return}if(t==="onError"){this._onError(s.error);return}if(t==="onStdIO"){this._onStdIO(s.type,s.testId,s.resultId,s.data,s.isBase64);return}if(t==="onEnd")return this._onEnd(s.result);if(t==="onExit")return this._onExit()}_setClearPreviousResultsWhenTestBegins(){this._clearPreviousResultsWhenTestBegins=!0}_onBegin(e,t){var s,n,r;this._rootDir=((s=this._reportConfig)==null?void 0:s.rootDir)||e.rootDir;for(const o of t){let c=this._rootSuite.suites.find(h=>h.project().id===o.id);c||(c=new I(o.name,"project"),this._rootSuite.suites.push(c),c.parent=this._rootSuite);const d=this._parseProject(o);if(c.project=()=>d,this._mergeSuitesInto(o.suites,c),e.listOnly){const h=new Set,u=f=>{f.tests.map(a=>a.testId).forEach(a=>h.add(a)),f.suites.forEach(u)};o.suites.forEach(u);const m=f=>{f.tests=f.tests.filter(a=>h.has(a.id)),f.suites.forEach(m)};m(c)}}(r=(n=this._reporter).onBegin)==null||r.call(n,this._parseConfig(e),this._rootSuite)}_onTestBegin(e,t){var r,o;const s=this._tests.get(e);this._clearPreviousResultsWhenTestBegins&&s._clearResults();const n=s._createTestResult(t.id);n.retry=t.retry,n.workerIndex=t.workerIndex,n.parallelIndex=t.parallelIndex,n.startTime=new Date(t.startTime),n.statusEx="running",(o=(r=this._reporter).onTestBegin)==null||o.call(r,s,n)}_onTestEnd(e,t){var r,o;const s=this._tests.get(e.testId);s.timeout=e.timeout,s.expectedStatus=e.expectedStatus,s.annotations=e.annotations;const n=s.resultsMap.get(t.id);n.duration=t.duration,n.status=t.status,n.statusEx=t.status,n.errors=t.errors,n.attachments=t.attachments,(o=(r=this._reporter).onTestEnd)==null||o.call(r,s,n)}_onStepBegin(e,t,s){var d,h;const n=this._tests.get(e),r=n.resultsMap.get(t),o=s.parentStepId?r.stepMap.get(s.parentStepId):void 0,c={titlePath:()=>[],title:s.title,category:s.category,location:this._absoluteLocation(s.location),parent:o,startTime:new Date(s.startTime),duration:0,steps:[]};o?o.steps.push(c):r.steps.push(c),r.stepMap.set(s.id,c),(h=(d=this._reporter).onStepBegin)==null||h.call(d,n,r,c)}_onStepEnd(e,t,s){var c,d;const n=this._tests.get(e),r=n.resultsMap.get(t),o=r.stepMap.get(s.id);o.duration=s.duration,o.error=s.error,(d=(c=this._reporter).onStepEnd)==null||d.call(c,n,r,o)}_onError(e){var t,s;(s=(t=this._reporter).onError)==null||s.call(t,e)}_onStdIO(e,t,s,n,r){var h,u,m,f;const o=r?globalThis.Buffer?Buffer.from(n,"base64"):atob(n):n,c=t?this._tests.get(t):void 0,d=c&&s?c.resultsMap.get(s):void 0;e==="stdout"?(u=(h=this._reporter).onStdOut)==null||u.call(h,o,c,d):(f=(m=this._reporter).onStdErr)==null||f.call(m,o,c,d)}_onEnd(e){var t,s;return((s=(t=this._reporter).onEnd)==null?void 0:s.call(t,e))||void 0}_onExit(){var e,t;return(t=(e=this._reporter).onExit)==null?void 0:t.call(e)}_parseConfig(e){const t={...fe,...e};return this._reportConfig&&(t.configFile=this._reportConfig.configFile,t.rootDir=this._reportConfig.rootDir,t.reportSlowTests=this._reportConfig.reportSlowTests,t.quiet=this._reportConfig.quiet),t}_parseProject(e){return{id:e.id,metadata:e.metadata,name:e.name,outputDir:this._absolutePath(e.outputDir),repeatEach:e.repeatEach,retries:e.retries,testDir:this._absolutePath(e.testDir),testIgnore:J(e.testIgnore),testMatch:J(e.testMatch),timeout:e.timeout,grep:J(e.grep),grepInvert:J(e.grepInvert),dependencies:e.dependencies,teardown:e.teardown,snapshotDir:this._absolutePath(e.snapshotDir),use:{}}}_mergeSuitesInto(e,t){for(const s of e){let n=t.suites.find(r=>r.title===s.title);n||(n=new I(s.title,s.type),n.parent=t,t.suites.push(n)),n.location=this._absoluteLocation(s.location),n._fileId=s.fileId,n._parallelMode=s.parallelMode,this._mergeSuitesInto(s.suites,n),this._mergeTestsInto(s.tests,n)}}_mergeTestsInto(e,t){for(const s of e){let n=t.tests.find(r=>r.title===s.title);n||(n=new Le(s.testId,s.title,this._absoluteLocation(s.location)),n.parent=t,t.tests.push(n),this._tests.set(n.id,n)),this._updateTest(s,n)}}_updateTest(e,t){return t.id=e.testId,t.location=this._absoluteLocation(e.location),t.retries=e.retries,t}_absoluteLocation(e){return e&&{...e,file:this._absolutePath(e.file)}}_absolutePath(e){return e&&this._rootDir+this._pathSeparator+e}}class I{constructor(e,t){this._requireFile="",this.suites=[],this.tests=[],this._parallelMode="none",this.title=e,this._type=t}allTests(){const e=[],t=s=>{for(const n of[...s.suites,...s.tests])n instanceof I?t(n):e.push(n)};return t(this),e}titlePath(){const e=this.parent?this.parent.titlePath():[];return(this.title||this._type!=="describe")&&e.push(this.title),e}project(){}}class Le{constructor(e,t,s){this.fn=()=>{},this.results=[],this.expectedStatus="passed",this.timeout=0,this.annotations=[],this.retries=0,this.repeatEachIndex=0,this.resultsMap=new Map,this.id=e,this.title=t,this.location=s}titlePath(){const e=this.parent?this.parent.titlePath():[];return e.push(this.title),e}outcome(){const e=this.results.filter(t=>t.status!=="skipped"&&t.status!=="interrupted");return e.length?e.every(t=>t.status===this.expectedStatus)?"expected":e.some(t=>t.status===this.expectedStatus)?"flaky":"unexpected":"skipped"}ok(){const e=this.outcome();return e==="expected"||e==="flaky"||e==="skipped"}_clearResults(){this.results=[],this.resultsMap.clear()}_createTestResult(e){const t={retry:this.results.length,parallelIndex:-1,workerIndex:-1,duration:-1,startTime:new Date,stdout:[],stderr:[],attachments:[],status:"skipped",statusEx:"scheduled",steps:[],errors:[],stepMap:new Map};return this.results.push(t),this.resultsMap.set(e,t),t}}const fe={forbidOnly:!1,fullyParallel:!1,globalSetup:null,globalTeardown:null,globalTimeout:0,grep:/.*/,grepInvert:null,maxFailures:0,metadata:{},preserveOutput:"always",projects:[],reporter:[[{}.CI?"dot":"list"]],reportSlowTests:{max:5,threshold:15e3},configFile:"",rootDir:"",quiet:!1,shard:null,updateSnapshots:"missing",version:"",workers:0,webServer:null};function J(i){return i.map(e=>e.s?e.s:new RegExp(e.r.source,e.r.flags))}const Pe=({source:i})=>{const[e,t]=ve(),[s,n]=A.useState(Se()),[r]=A.useState(be(()=>import("./assets/xtermModule-443332e6.js"),["./assets/xtermModule-443332e6.js","./xtermModule.6428296b.css"],import.meta.url).then(c=>c.default)),o=A.useRef(null);return A.useEffect(()=>(we(n),()=>_e(n)),[]),A.useEffect(()=>{const c=i.write,d=i.clear;return(async()=>{const{Terminal:h,FitAddon:u}=await r,m=t.current;if(!m)return;const f=s==="dark-mode"?Oe:We;if(o.current&&o.current.terminal.options.theme===f)return;o.current&&(m.textContent="");const a=new h({convertEol:!0,fontSize:13,scrollback:1e4,fontFamily:"var(--vscode-editor-font-family)",theme:f}),v=new u;a.loadAddon(v);for(const b of i.pending)a.write(b);i.write=b=>{i.pending.push(b),a.write(b)},i.clear=()=>{i.pending=[],a.clear()},a.open(m),v.fit(),o.current={terminal:a,fitAddon:v}})(),()=>{i.clear=d,i.write=c}},[r,o,t,i,s]),A.useEffect(()=>{setTimeout(()=>{o.current&&(o.current.fitAddon.fit(),i.resize(o.current.terminal.cols,o.current.terminal.rows))},250)},[e,i]),p("div",{"data-testid":"output",className:"xterm-wrapper",style:{flex:"auto"},ref:t})},We={foreground:"#383a42",background:"#fafafa",cursor:"#383a42",black:"#000000",red:"#e45649",green:"#50a14f",yellow:"#c18401",blue:"#4078f2",magenta:"#a626a4",cyan:"#0184bc",white:"#a0a0a0",brightBlack:"#000000",brightRed:"#e06c75",brightGreen:"#98c379",brightYellow:"#d19a66",brightBlue:"#4078f2",brightMagenta:"#a626a4",brightCyan:"#0184bc",brightWhite:"#383a42",selectionBackground:"#d7d7d7",selectionForeground:"#383a42"},Oe={foreground:"#f8f8f2",background:"#1e1e1e",cursor:"#f8f8f0",black:"#000000",red:"#ff5555",green:"#50fa7b",yellow:"#f1fa8c",blue:"#bd93f9",magenta:"#ff79c6",cyan:"#8be9fd",white:"#bfbfbf",brightBlack:"#4d4d4d",brightRed:"#ff6e6e",brightGreen:"#69ff94",brightYellow:"#ffffa5",brightBlue:"#d6acff",brightMagenta:"#ff92df",brightCyan:"#a4ffff",brightWhite:"#e6e6e6",selectionBackground:"#44475a",selectionForeground:"#f8f8f2"};function je(i){return`.playwright-artifacts-${i}`}let oe=()=>{},he=i=>{},pe={cols:80,rows:24},H=async()=>{};const W={pending:[],clear:()=>{},write:i=>W.pending.push(i),resize:(i,e)=>{pe={cols:i,rows:e},q("resizeTerminal",{cols:i,rows:e})}},ze=({})=>{var le;const[i,e]=g.useState(""),[t,s]=g.useState(!1),[n,r]=g.useState(new Map([["passed",!1],["failed",!1],["skipped",!1]])),[o,c]=g.useState(new Map),[d,h]=g.useState({config:void 0,rootSuite:void 0,loadErrors:[]}),[u,m]=g.useState(),[f,a]=g.useState({}),[v,b]=g.useState(new Set),[k,C]=g.useState(!1),[y,N]=g.useState(),[R,Y]=ke("watch-all",!1),[ee,V]=g.useState({value:new Set}),l=g.useRef(Promise.resolve()),_=g.useRef(new Set),[S,w]=g.useState(0),[T,x]=g.useState(!1),te=g.useRef(null),se=g.useCallback(()=>{C(!0),V({value:new Set}),oe(fe,new I("","root"),[],void 0),ge(!0).then(()=>{C(!1)})},[]);g.useEffect(()=>{var D;(D=te.current)==null||D.focus(),C(!0),Te({onEvent:Ue,onClose:()=>x(!0)}).then(F=>{H=F,se()})},[se]),oe=g.useCallback((D,F,L,j)=>{const P=D.configFile?de.getObject(D.configFile+":projects",void 0):void 0;for(const B of o.keys())F.suites.find(X=>X.title===B)||o.delete(B);for(const B of F.suites)o.has(B.title)||o.set(B.title,!!(P!=null&&P.includes(B.title)));!P&&o.size&&![...o.values()].includes(!0)&&o.set(o.entries().next().value[0],!0),h({config:D,rootSuite:F,loadErrors:L}),c(new Map(o)),y&&j?m({...j,total:y.testIds.size}):j||m(void 0)},[o,y]);const ie=g.useCallback((D,F)=>{D==="bounce-if-busy"&&y||(_.current=new Set([..._.current,...F]),l.current=l.current.then(async()=>{var P,B,X;const L=_.current;if(_.current=new Set,!L.size)return;{for(const z of((P=d.rootSuite)==null?void 0:P.allTests())||[])L.has(z.id)&&(z._clearResults(),z._createTestResult("pending"));h({...d})}const j=" ["+new Date().toLocaleTimeString()+"]";W.write("\x1B[2m—".repeat(Math.max(0,pe.cols-j.length))+j+"\x1B[22m"),m({total:L.size,passed:0,failed:0,skipped:0}),N({testIds:L}),await H("run",{testIds:[...L]});for(const z of((B=d.rootSuite)==null?void 0:B.allTests())||[])((X=z.results[0])==null?void 0:X.duration)===-1&&z._clearResults();h({...d}),N(void 0)}))},[y,d]),O=!!y;return E("div",{className:"vbox ui-mode",children:[T&&p("div",{className:"drop-target",children:p("div",{className:"title",children:"Process disconnected"})}),E(Ee,{sidebarSize:250,orientation:"horizontal",sidebarIsFirst:!0,children:[E("div",{className:"vbox",children:[E("div",{className:"vbox"+(t?"":" hidden"),children:[E(Q,{children:[p("div",{className:"section-title",style:{flex:"none"},children:"Output"}),p(M,{icon:"circle-slash",title:"Clear output",onClick:()=>W.clear()}),p("div",{className:"spacer"}),p(M,{icon:"close",title:"Close",onClick:()=>s(!1)})]}),p(Pe,{source:W})]}),p("div",{className:"vbox"+(t?" hidden":""),children:p(Ke,{item:f,rootDir:(le=d.config)==null?void 0:le.rootDir})})]}),E("div",{className:"vbox ui-mode-sidebar",children:[E(Q,{noShadow:!0,noMinHeight:!0,children:[p("img",{src:"icon-32x32.png"}),p("div",{className:"section-title",children:"Playwright"}),p(M,{icon:"color-mode",title:"Toggle color mode",onClick:()=>xe()}),p(M,{icon:"refresh",title:"Reload",onClick:()=>se(),disabled:O||k}),p(M,{icon:"terminal",title:"Toggle output",toggled:t,onClick:()=>{s(!t)}})]}),p(Ae,{filterText:i,setFilterText:e,statusFilters:n,setStatusFilters:r,projectFilters:o,setProjectFilters:c,testModel:d,runTests:()=>ie("bounce-if-busy",v)}),E(Q,{noMinHeight:!0,children:[!O&&!u&&p("div",{className:"section-title",children:"Tests"}),!O&&u&&p("div",{"data-testid":"status-line",className:"status-line",children:E("div",{children:[u.passed,"/",u.total," passed (",u.passed/u.total*100|0,"%)"]})}),O&&u&&p("div",{"data-testid":"status-line",className:"status-line",children:E("div",{children:["Running ",u.passed,"/",y.testIds.size," passed (",u.passed/y.testIds.size*100|0,"%)"]})}),p(M,{icon:"play",title:"Run all",onClick:()=>ie("bounce-if-busy",v),disabled:O||k}),p(M,{icon:"debug-stop",title:"Stop",onClick:()=>q("stop"),disabled:!O||k}),p(M,{icon:"eye",title:"Watch all",toggled:R,onClick:()=>Y(!R)}),p(M,{icon:"collapse-all",title:"Collapse all",onClick:()=>{w(S+1)}})]}),p(Ve,{statusFilters:n,projectFilters:o,filterText:i,testModel:d,runningState:y,runTests:ie,onItemSelected:a,setVisibleTestIds:b,watchAll:R,watchedTreeIds:ee,setWatchedTreeIds:V,isLoading:k,requestedCollapseAllCount:S})]})]})]})},Ae=({filterText:i,setFilterText:e,statusFilters:t,setStatusFilters:s,projectFilters:n,setProjectFilters:r,testModel:o,runTests:c})=>{const[d,h]=g.useState(!1),u=g.useRef(null);g.useEffect(()=>{var a;(a=u.current)==null||a.focus()},[]);const m=[...t.entries()].filter(([a,v])=>v).map(([a])=>a).join(" ")||"all",f=[...n.entries()].filter(([a,v])=>v).map(([a])=>a).join(" ")||"all";return E("div",{className:"filters",children:[p(Ce,{expanded:d,setExpanded:h,title:p("input",{ref:u,type:"search",placeholder:"Filter (e.g. text, @tag)",spellCheck:!1,value:i,onChange:a=>{e(a.target.value)},onKeyDown:a=>{a.key==="Enter"&&c()}})}),E("div",{className:"filter-summary",title:"Status: "+m+` 2 | Projects: `+f,onClick:()=>h(!d),children:[p("span",{className:"filter-label",children:"Status:"})," ",m,p("span",{className:"filter-label",children:"Projects:"})," ",f]}),d&&E("div",{className:"hbox",style:{marginLeft:14},children:[p("div",{className:"filter-list",children:[...t.entries()].map(([a,v])=>p("div",{className:"filter-entry",children:E("label",{children:[p("input",{type:"checkbox",checked:v,onClick:()=>{const b=new Map(t);b.set(a,!b.get(a)),s(b)}}),p("div",{children:a})]})}))}),p("div",{className:"filter-list",children:[...n.entries()].map(([a,v])=>p("div",{className:"filter-entry",children:E("label",{children:[p("input",{type:"checkbox",checked:v,onClick:()=>{var C;const b=new Map(n);b.set(a,!b.get(a)),r(b);const k=(C=o==null?void 0:o.config)==null?void 0:C.configFile;k&&de.setObject(k+":projects",[...b.entries()].filter(([y,N])=>N).map(([y])=>y))}}),p("div",{children:a})]})}))})]})]})},Ie=Ne,Ve=({statusFilters:i,projectFilters:e,filterText:t,testModel:s,runTests:n,runningState:r,watchAll:o,watchedTreeIds:c,setWatchedTreeIds:d,isLoading:h,onItemSelected:u,setVisibleTestIds:m,requestedCollapseAllCount:f})=>{const[a,v]=g.useState({expandedItems:new Map}),[b,k]=g.useState(),[C,y]=g.useState(f),{rootItem:N,treeItemMap:R,fileNames:Y}=g.useMemo(()=>{let l=He(s.rootSuite,s.loadErrors,e);Ye(l,t,i,r==null?void 0:r.testIds),me(l),l=Xe(l),Je(l);const _=new Map,S=new Set,w=new Set,T=x=>{x.kind==="group"&&x.location.file&&w.add(x.location.file),x.kind==="case"&&x.tests.forEach(te=>S.add(te.id)),x.children.forEach(T),_.set(x.id,x)};return T(l),m(S),{rootItem:l,treeItemMap:_,fileNames:w}},[t,s,i,e,m,r]);g.useEffect(()=>{if(C!==f){a.expandedItems.clear();for(const S of R.keys())a.expandedItems.set(S,!1);y(f),k(void 0),v({...a});return}if(!r||r.itemSelectedByUser)return;let l;const _=S=>{var w;S.children.forEach(_),!l&&S.status==="failed"&&(S.kind==="test"&&r.testIds.has(S.test.id)||S.kind==="case"&&r.testIds.has((w=S.tests[0])==null?void 0:w.id))&&(l=S)};_(N),l&&k(l.id)},[r,k,N,C,y,f,a,v,R]);const{selectedTreeItem:ee}=g.useMemo(()=>{const l=b?R.get(b):void 0;let _;l&&(_={file:l.location.file,line:l.location.line,source:{errors:s.loadErrors.filter(w=>{var T;return((T=w.location)==null?void 0:T.file)===l.location.file}).map(w=>({line:w.location.line,message:w.message})),content:void 0}});let S;return(l==null?void 0:l.kind)==="test"?S=l.test:(l==null?void 0:l.kind)==="case"&&l.tests.length===1&&(S=l.tests[0]),u({testCase:S,testFile:_}),{selectedTreeItem:l}},[u,b,s,R]);g.useEffect(()=>{if(!h)if(o)q("watch",{fileNames:[...Y]});else{const l=new Set;for(const _ of c.value){const S=R.get(_),w=S==null?void 0:S.location.file;w&&l.add(w)}q("watch",{fileNames:[...l]})}},[h,N,Y,o,c,R]);const V=l=>{k(l.id),n("bounce-if-busy",ne(l))};return he=l=>{const _=[],S=new Set(l);if(o){const w=T=>{const x=T.location.file;x&&S.has(x)&&_.push(...ne(T)),T.kind==="group"&&T.subKind==="folder"&&T.children.forEach(w)};w(N)}else for(const w of c.value){const T=R.get(w),x=T==null?void 0:T.location.file;x&&S.has(x)&&_.push(...ne(T))}n("queue-if-busy",new Set(_))},p(Ie,{treeState:a,setTreeState:v,rootItem:N,dataTestId:"test-tree",render:l=>E("div",{className:"hbox ui-mode-list-item",children:[p("div",{className:"ui-mode-list-item-title",children:l.title}),!!l.duration&&l.status!=="skipped"&&p("div",{className:"ui-mode-list-item-time",children:ye(l.duration)}),E(Q,{noMinHeight:!0,noShadow:!0,children:[p(M,{icon:"play",title:"Run",onClick:()=>V(l),disabled:!!r}),p(M,{icon:"go-to-file",title:"Open in VS Code",onClick:()=>q("open",{location:qe(l)}),style:l.kind==="group"&&l.subKind==="folder"?{visibility:"hidden"}:{}}),!o&&p(M,{icon:"eye",title:"Watch",onClick:()=>{c.value.has(l.id)?c.value.delete(l.id):c.value.add(l.id),d({...c})},toggled:c.value.has(l.id)})]})]}),icon:l=>l.status==="scheduled"?"codicon-clock":l.status==="running"?"codicon-loading":l.status==="failed"?"codicon-error":l.status==="passed"?"codicon-check":l.status==="skipped"?"codicon-circle-slash":"codicon-circle-outline",selectedItem:ee,onAccepted:V,onSelected:l=>{r&&(r.itemSelectedByUser=!0),k(l.id)},isError:l=>l.kind==="group"?l.hasLoadErrors:!1,autoExpandDepth:t?5:1,noItemsMessage:h?"Loading…":"No tests"})},Ke=({item:i,rootDir:e})=>{const[t,s]=g.useState(),[n,r]=g.useState(0),o=g.useRef(null),{outputDir:c}=g.useMemo(()=>({outputDir:i.testCase?$e(i.testCase):void 0}),[i]),[d,h]=g.useState(),u=g.useCallback(f=>h(ae(f)),[h]),m=d?t==null?void 0:t.model.actions.find(f=>ae(f)===d):void 0;return g.useEffect(()=>{var b,k;o.current&&clearTimeout(o.current);const f=(b=i.testCase)==null?void 0:b.results[0];if(!f){s(void 0);return}const a=f&&f.duration>=0&&f.attachments.find(C=>C.name==="trace");if(a&&a.path){ue(a.path).then(C=>s({model:C,isLive:!1}));return}if(!c){s(void 0);return}const v=`${c}/${je(f.workerIndex)}/traces/${(k=i.testCase)==null?void 0:k.id}.json`;return o.current=setTimeout(async()=>{try{const C=await ue(v);s({model:C,isLive:!0})}catch{s(void 0)}finally{r(n+1)}},500),()=>{o.current&&clearTimeout(o.current)}},[c,i,s,n,r]),p(Me,{model:t==null?void 0:t.model,hideTimelineBars:!0,hideStackFrames:!0,showSourcesFirst:!0,rootDir:e,initialSelection:m,onSelectionChanged:u,fallbackLocation:i.testFile,isLive:t==null?void 0:t.isLive,drawer:"bottom"},"workbench")};let $,Z,U;const ce=()=>{clearTimeout(Z),Z=void 0,oe(U.config,U.rootSuite,U.loadErrors,U.progress)},K=(i,e,t,s,n=!1)=>{U={config:i,rootSuite:e,loadErrors:t,progress:s},n?ce():Z||(Z=setTimeout(ce,250))},ge=i=>{if(!i)return H("list",{});let e,t;const s={passed:0,failed:0,skipped:0};let n;return $=new Fe(G,{onBegin:(r,o)=>{e||(e=o,t=[]),n=r,s.passed=0,s.failed=0,s.skipped=0,K(n,e,t,s,!0)},onEnd:()=>{K(n,e,t,s,!0)},onTestBegin:()=>{K(n,e,t,s)},onTestEnd:r=>{r.outcome()==="skipped"?++s.skipped:r.outcome()==="unexpected"?++s.failed:++s.passed,K(n,e,t,s)},onError:r=>{W.write((r.stack||r.value||"")+` 3 | `),t.push(r),K(n,e,t,s)}}),$._setClearPreviousResultsWhenTestBegins(),H("list",{})},q=(i,e)=>{if(window._overrideProtocolForTest){window._overrideProtocolForTest({method:i,params:e}).catch(()=>{});return}H(i,e).catch(t=>{console.error(t)})},Ue=(i,e)=>{var t;if(i==="listChanged"){ge(!1).catch(()=>{});return}if(i==="testFilesChanged"){he(e.testFileNames);return}if(i==="stdio"){if(e.buffer){const s=atob(e.buffer);W.write(s)}else W.write(e.text);return}(t=$==null?void 0:$.dispatch({method:i,params:e}))==null||t.catch(()=>{})},$e=i=>{var e;for(let t=i.parent;t;t=t.parent)if(t.project())return(e=t.project())==null?void 0:e.outputDir},qe=i=>{if(i)return i.location.file+":"+i.location.line},ne=i=>{const e=new Set;if(!i)return e;const t=s=>{var n;s.kind==="case"?s.tests.map(r=>r.id).forEach(r=>e.add(r)):s.kind==="test"?e.add(s.id):(n=s.children)==null||n.forEach(t)};return t(i),e};function re(i,e,t,s){if(e.length===0)return i;const n=e.join(G),r=s.get(n);if(r)return r;const o=re(i,e.slice(0,e.length-1),!1,s),c={kind:"group",subKind:t?"file":"folder",id:n,title:e[e.length-1],location:{file:n,line:0,column:0},duration:0,parent:o,children:[],status:"none",hasLoadErrors:!1};return o.children.push(c),s.set(n,c),c}function He(i,e,t){const s=[...t.values()].some(Boolean),n={kind:"group",subKind:"folder",id:"root",title:"",location:{file:"",line:0,column:0},duration:0,parent:void 0,children:[],status:"none",hasLoadErrors:!1},r=(c,d,h)=>{for(const u of d.suites){const m=u.title||"";let f=h.children.find(a=>a.title===m);f||(f={kind:"group",subKind:"describe",id:h.id+""+m,title:m,location:u.location,duration:0,parent:h,children:[],status:"none",hasLoadErrors:!1},h.children.push(f)),r(c,u,f)}for(const u of d.tests){const m=u.title;let f=h.children.find(b=>b.title===m);f||(f={kind:"case",id:h.id+""+m,title:m,parent:h,children:[],tests:[],location:u.location,duration:0,status:"none"},h.children.push(f));const a=u.results[0];let v="none";(a==null?void 0:a.statusEx)==="scheduled"?v="scheduled":(a==null?void 0:a.statusEx)==="running"?v="running":(a==null?void 0:a.status)==="skipped"?v="skipped":(a==null?void 0:a.status)==="interrupted"?v="none":a&&u.outcome()!=="expected"?v="failed":a&&u.outcome()==="expected"&&(v="passed"),f.tests.push(u),f.children.push({kind:"test",id:u.id,title:c,location:u.location,test:u,parent:f,children:[],status:v,duration:u.results.length?Math.max(0,u.results[0].duration):0,project:c}),f.duration=f.children.reduce((b,k)=>b+k.duration,0)}},o=new Map;for(const c of(i==null?void 0:i.suites)||[])if(!(s&&!t.get(c.title))){for(const d of c.suites){const h=re(n,d.location.file.split(G),!0,o);r(c.title,d,h)}for(const d of e){if(!d.location)continue;const h=re(n,d.location.file.split(G),!0,o);h.hasLoadErrors=!0}}return n}function Ye(i,e,t,s){const n=e.trim().toLowerCase().split(" "),r=[...t.values()].some(Boolean),o=d=>{const h=d.tests[0].titlePath().join(" ").toLowerCase();return!n.every(u=>h.includes(u))&&!d.tests.some(u=>s==null?void 0:s.has(u.id))?!1:(d.children=d.children.filter(u=>!r||(s==null?void 0:s.has(u.id))||t.get(u.status)),d.tests=d.children.map(u=>u.test),!!d.children.length)},c=d=>{const h=[];for(const u of d.children)u.kind==="case"?o(u)&&h.push(u):(c(u),(u.children.length||u.hasLoadErrors)&&h.push(u));d.children=h};c(i)}function me(i){for(const o of i.children)me(o);i.kind==="group"&&i.children.sort((o,c)=>o.location.file.localeCompare(c.location.file)||o.location.line-c.location.line);let e=i.children.length>0,t=i.children.length>0,s=!1,n=!1,r=!1;for(const o of i.children)t=t&&o.status==="skipped",e=e&&(o.status==="passed"||o.status==="skipped"),s=s||o.status==="failed",n=n||o.status==="running",r=r||o.status==="scheduled";n?i.status="running":r?i.status="scheduled":s?i.status="failed":t?i.status="skipped":e&&(i.status="passed")}function Xe(i){let e=i;for(;e.children.length===1&&e.children[0].kind==="group"&&e.children[0].subKind==="folder";)e=e.children[0];return e.location=i.location,e}function Je(i){const e=t=>{t.kind==="case"&&t.children.length===1?t.children=[]:t.children.forEach(e)};e(i)}async function ue(i){const e=new URLSearchParams;e.set("trace",i);const s=await(await fetch(`contexts?${e.toString()}`)).json();return new Re(s)}const G=navigator.userAgent.toLowerCase().includes("windows")?"\\":"/";(async()=>(Be(),window.location.protocol!=="file:"&&(window.location.href.includes("isUnderTest=true")&&await new Promise(i=>setTimeout(i,1e3)),navigator.serviceWorker.register("sw.bundle.js"),navigator.serviceWorker.controller||await new Promise(i=>{navigator.serviceWorker.oncontrollerchange=()=>i()}),setInterval(function(){fetch("ping")},1e4)),De.render(p(ze,{}),document.querySelector("#root"))))(); 4 | -------------------------------------------------------------------------------- /playwright-report/trace/uiMode.922a7b48.css: -------------------------------------------------------------------------------- 1 | .ui-mode-sidebar{background-color:var(--vscode-sideBar-background)}.ui-mode-sidebar input[type=search]{flex:auto}.ui-mode-sidebar .toolbar-button:not([disabled]) .codicon-play{color:var(--vscode-debugIcon-restartForeground)}.ui-mode-sidebar .toolbar-button:not([disabled]) .codicon-debug-stop{color:var(--vscode-debugIcon-stopForeground)}.ui-mode-list-item{flex:auto}.ui-mode-list-item-title{flex:auto;text-overflow:ellipsis;overflow:hidden}.ui-mode-list-item-time{flex:none;color:var(--vscode-editorCodeLens-foreground);margin:0 4px;user-select:none}.list-view-entry.selected .ui-mode-list-item-time,.list-view-entry.highlighted .ui-mode-list-item-time{display:none}.ui-mode .section-title{display:flex;flex:auto;flex-direction:row;align-items:center;font-size:11px;text-transform:uppercase;font-weight:700;text-overflow:ellipsis;overflow:hidden;padding:8px;height:30px}.ui-mode-sidebar img{flex:none;margin-left:6px;width:24px;height:24px}.ui-mode .disconnected{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1000;background-color:#00000080}.status-line{flex:auto;white-space:nowrap;line-height:22px;padding-left:10px;display:flex;flex-direction:row;align-items:center;height:30px}.status-line>div{overflow:hidden;text-overflow:ellipsis}.list-view-entry:not(.highlighted):not(.selected) .toolbar-button:not(.toggled){display:none}.ui-mode-sidebar input[type=search]{flex:auto;padding:0 5px;line-height:24px;outline:none;margin:0 4px;border:none;color:var(--vscode-input-foreground);background-color:var(--vscode-input-background)}.filters{flex:none;display:flex;flex-direction:column;margin:2px 0}.filter-list{padding:0 10px 10px}.filter-title,.filter-summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:none;cursor:pointer}.filter-label{color:var(--vscode-disabledForeground)}.filter-summary{line-height:24px;margin-left:24px}.filter-summary .filter-label{margin-left:5px}.filter-entry{line-height:24px}.filter-entry label{display:flex;align-items:center;cursor:pointer}.filter-entry input{flex:none;display:flex;align-items:center;cursor:pointer}.filter-entry label div{overflow:hidden;text-overflow:ellipsis}body{--vscode-font-family: system-ui, "Ubuntu", "Droid Sans", sans-serif;--vscode-font-weight: normal;--vscode-font-size: 13px;--vscode-editor-font-family: "Droid Sans Mono", "monospace", monospace;--vscode-editor-font-weight: normal;--vscode-editor-font-size: 14px;--vscode-foreground: #616161;--vscode-disabledForeground: rgba(97, 97, 97, .5);--vscode-errorForeground: #a1260d;--vscode-descriptionForeground: #717171;--vscode-icon-foreground: #424242;--vscode-focusBorder: #0090f1;--vscode-textSeparator-foreground: rgba(0, 0, 0, .18);--vscode-textLink-foreground: #006ab1;--vscode-textLink-activeForeground: #006ab1;--vscode-textPreformat-foreground: #a31515;--vscode-textBlockQuote-background: rgba(127, 127, 127, .1);--vscode-textBlockQuote-border: rgba(0, 122, 204, .5);--vscode-textCodeBlock-background: rgba(220, 220, 220, .4);--vscode-widget-shadow: rgba(0, 0, 0, .16);--vscode-input-background: #ffffff;--vscode-input-foreground: #616161;--vscode-inputOption-activeBorder: #007acc;--vscode-inputOption-hoverBackground: rgba(184, 184, 184, .31);--vscode-inputOption-activeBackground: rgba(0, 144, 241, .2);--vscode-inputOption-activeForeground: #000000;--vscode-input-placeholderForeground: #767676;--vscode-inputValidation-infoBackground: #d6ecf2;--vscode-inputValidation-infoBorder: #007acc;--vscode-inputValidation-warningBackground: #f6f5d2;--vscode-inputValidation-warningBorder: #b89500;--vscode-inputValidation-errorBackground: #f2dede;--vscode-inputValidation-errorBorder: #be1100;--vscode-dropdown-background: #ffffff;--vscode-dropdown-border: #cecece;--vscode-checkbox-background: #ffffff;--vscode-checkbox-border: #cecece;--vscode-button-foreground: #ffffff;--vscode-button-separator: rgba(255, 255, 255, .4);--vscode-button-background: #007acc;--vscode-button-hoverBackground: #0062a3;--vscode-button-secondaryForeground: #ffffff;--vscode-button-secondaryBackground: #5f6a79;--vscode-button-secondaryHoverBackground: #4c5561;--vscode-badge-background: #c4c4c4;--vscode-badge-foreground: #333333;--vscode-scrollbar-shadow: #dddddd;--vscode-scrollbarSlider-background: rgba(100, 100, 100, .4);--vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, .7);--vscode-scrollbarSlider-activeBackground: rgba(0, 0, 0, .6);--vscode-progressBar-background: #0e70c0;--vscode-editorError-foreground: #e51400;--vscode-editorWarning-foreground: #bf8803;--vscode-editorInfo-foreground: #1a85ff;--vscode-editorHint-foreground: #6c6c6c;--vscode-sash-hoverBorder: #0090f1;--vscode-editor-background: #ffffff;--vscode-editor-foreground: #000000;--vscode-editorStickyScroll-background: #ffffff;--vscode-editorStickyScrollHover-background: #f0f0f0;--vscode-editorWidget-background: #f3f3f3;--vscode-editorWidget-foreground: #616161;--vscode-editorWidget-border: #c8c8c8;--vscode-quickInput-background: #f3f3f3;--vscode-quickInput-foreground: #616161;--vscode-quickInputTitle-background: rgba(0, 0, 0, .06);--vscode-pickerGroup-foreground: #0066bf;--vscode-pickerGroup-border: #cccedb;--vscode-keybindingLabel-background: rgba(221, 221, 221, .4);--vscode-keybindingLabel-foreground: #555555;--vscode-keybindingLabel-border: rgba(204, 204, 204, .4);--vscode-keybindingLabel-bottomBorder: rgba(187, 187, 187, .4);--vscode-editor-selectionBackground: #add6ff;--vscode-editor-inactiveSelectionBackground: #e5ebf1;--vscode-editor-selectionHighlightBackground: rgba(173, 214, 255, .5);--vscode-editor-findMatchBackground: #a8ac94;--vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, .33);--vscode-editor-findRangeHighlightBackground: rgba(180, 180, 180, .3);--vscode-searchEditor-findMatchBackground: rgba(234, 92, 0, .22);--vscode-editor-hoverHighlightBackground: rgba(173, 214, 255, .15);--vscode-editorHoverWidget-background: #f3f3f3;--vscode-editorHoverWidget-foreground: #616161;--vscode-editorHoverWidget-border: #c8c8c8;--vscode-editorHoverWidget-statusBarBackground: #e7e7e7;--vscode-editorLink-activeForeground: #0000ff;--vscode-editorInlayHint-foreground: rgba(51, 51, 51, .8);--vscode-editorInlayHint-background: rgba(196, 196, 196, .3);--vscode-editorInlayHint-typeForeground: rgba(51, 51, 51, .8);--vscode-editorInlayHint-typeBackground: rgba(196, 196, 196, .3);--vscode-editorInlayHint-parameterForeground: rgba(51, 51, 51, .8);--vscode-editorInlayHint-parameterBackground: rgba(196, 196, 196, .3);--vscode-editorLightBulb-foreground: #ddb100;--vscode-editorLightBulbAutoFix-foreground: #007acc;--vscode-diffEditor-insertedTextBackground: rgba(156, 204, 44, .4);--vscode-diffEditor-removedTextBackground: rgba(255, 0, 0, .3);--vscode-diffEditor-insertedLineBackground: rgba(155, 185, 85, .2);--vscode-diffEditor-removedLineBackground: rgba(255, 0, 0, .2);--vscode-diffEditor-diagonalFill: rgba(34, 34, 34, .2);--vscode-list-focusOutline: #0090f1;--vscode-list-focusAndSelectionOutline: #90c2f9;--vscode-list-activeSelectionBackground: #0060c0;--vscode-list-activeSelectionForeground: #ffffff;--vscode-list-activeSelectionIconForeground: #ffffff;--vscode-list-inactiveSelectionBackground: #e4e6f1;--vscode-list-hoverBackground: #e8e8e8;--vscode-list-dropBackground: #d6ebff;--vscode-list-highlightForeground: #0066bf;--vscode-list-focusHighlightForeground: #bbe7ff;--vscode-list-invalidItemForeground: #b89500;--vscode-list-errorForeground: #b01011;--vscode-list-warningForeground: #855f00;--vscode-listFilterWidget-background: #f3f3f3;--vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);--vscode-listFilterWidget-noMatchesOutline: #be1100;--vscode-listFilterWidget-shadow: rgba(0, 0, 0, .16);--vscode-list-filterMatchBackground: rgba(234, 92, 0, .33);--vscode-tree-indentGuidesStroke: #a9a9a9;--vscode-tree-tableColumnsBorder: rgba(97, 97, 97, .13);--vscode-tree-tableOddRowsBackground: rgba(97, 97, 97, .04);--vscode-list-deemphasizedForeground: #8e8e90;--vscode-quickInputList-focusForeground: #ffffff;--vscode-quickInputList-focusIconForeground: #ffffff;--vscode-quickInputList-focusBackground: #0060c0;--vscode-menu-foreground: #616161;--vscode-menu-background: #ffffff;--vscode-menu-selectionForeground: #ffffff;--vscode-menu-selectionBackground: #0060c0;--vscode-menu-separatorBackground: #d4d4d4;--vscode-toolbar-hoverBackground: rgba(184, 184, 184, .31);--vscode-toolbar-activeBackground: rgba(166, 166, 166, .31);--vscode-editor-snippetTabstopHighlightBackground: rgba(10, 50, 100, .2);--vscode-editor-snippetFinalTabstopHighlightBorder: rgba(10, 50, 100, .5);--vscode-breadcrumb-foreground: rgba(97, 97, 97, .8);--vscode-breadcrumb-background: #ffffff;--vscode-breadcrumb-focusForeground: #4e4e4e;--vscode-breadcrumb-activeSelectionForeground: #4e4e4e;--vscode-breadcrumbPicker-background: #f3f3f3;--vscode-merge-currentHeaderBackground: rgba(64, 200, 174, .5);--vscode-merge-currentContentBackground: rgba(64, 200, 174, .2);--vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, .5);--vscode-merge-incomingContentBackground: rgba(64, 166, 255, .2);--vscode-merge-commonHeaderBackground: rgba(96, 96, 96, .4);--vscode-merge-commonContentBackground: rgba(96, 96, 96, .16);--vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, .5);--vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, .5);--vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, .4);--vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, .49);--vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, .8);--vscode-minimap-findMatchHighlight: #d18616;--vscode-minimap-selectionOccurrenceHighlight: #c9c9c9;--vscode-minimap-selectionHighlight: #add6ff;--vscode-minimap-errorHighlight: rgba(255, 18, 18, .7);--vscode-minimap-warningHighlight: #bf8803;--vscode-minimap-foregroundOpacity: #000000;--vscode-minimapSlider-background: rgba(100, 100, 100, .2);--vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, .35);--vscode-minimapSlider-activeBackground: rgba(0, 0, 0, .3);--vscode-problemsErrorIcon-foreground: #e51400;--vscode-problemsWarningIcon-foreground: #bf8803;--vscode-problemsInfoIcon-foreground: #1a85ff;--vscode-charts-foreground: #616161;--vscode-charts-lines: rgba(97, 97, 97, .5);--vscode-charts-red: #e51400;--vscode-charts-blue: #1a85ff;--vscode-charts-yellow: #bf8803;--vscode-charts-orange: #d18616;--vscode-charts-green: #388a34;--vscode-charts-purple: #652d90;--vscode-editor-lineHighlightBorder: #eeeeee;--vscode-editor-rangeHighlightBackground: rgba(253, 255, 0, .2);--vscode-editor-symbolHighlightBackground: rgba(234, 92, 0, .33);--vscode-editorCursor-foreground: #000000;--vscode-editorWhitespace-foreground: rgba(51, 51, 51, .2);--vscode-editorIndentGuide-background: #d3d3d3;--vscode-editorIndentGuide-activeBackground: #939393;--vscode-editorLineNumber-foreground: #237893;--vscode-editorActiveLineNumber-foreground: #0b216f;--vscode-editorLineNumber-activeForeground: #0b216f;--vscode-editorRuler-foreground: #d3d3d3;--vscode-editorCodeLens-foreground: #919191;--vscode-editorBracketMatch-background: rgba(0, 100, 0, .1);--vscode-editorBracketMatch-border: #b9b9b9;--vscode-editorOverviewRuler-border: rgba(127, 127, 127, .3);--vscode-editorGutter-background: #ffffff;--vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, .47);--vscode-editorGhostText-foreground: rgba(0, 0, 0, .47);--vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, .6);--vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, .7);--vscode-editorOverviewRuler-warningForeground: #bf8803;--vscode-editorOverviewRuler-infoForeground: #1a85ff;--vscode-editorBracketHighlight-foreground1: #0431fa;--vscode-editorBracketHighlight-foreground2: #319331;--vscode-editorBracketHighlight-foreground3: #7b3814;--vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0);--vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0);--vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0);--vscode-editorBracketHighlight-unexpectedBracket\.foreground: rgba(255, 18, 18, .8);--vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);--vscode-editorUnicodeHighlight-border: #cea33d;--vscode-editorUnicodeHighlight-background: rgba(206, 163, 61, .08);--vscode-symbolIcon-arrayForeground: #616161;--vscode-symbolIcon-booleanForeground: #616161;--vscode-symbolIcon-classForeground: #d67e00;--vscode-symbolIcon-colorForeground: #616161;--vscode-symbolIcon-constantForeground: #616161;--vscode-symbolIcon-constructorForeground: #652d90;--vscode-symbolIcon-enumeratorForeground: #d67e00;--vscode-symbolIcon-enumeratorMemberForeground: #007acc;--vscode-symbolIcon-eventForeground: #d67e00;--vscode-symbolIcon-fieldForeground: #007acc;--vscode-symbolIcon-fileForeground: #616161;--vscode-symbolIcon-folderForeground: #616161;--vscode-symbolIcon-functionForeground: #652d90;--vscode-symbolIcon-interfaceForeground: #007acc;--vscode-symbolIcon-keyForeground: #616161;--vscode-symbolIcon-keywordForeground: #616161;--vscode-symbolIcon-methodForeground: #652d90;--vscode-symbolIcon-moduleForeground: #616161;--vscode-symbolIcon-namespaceForeground: #616161;--vscode-symbolIcon-nullForeground: #616161;--vscode-symbolIcon-numberForeground: #616161;--vscode-symbolIcon-objectForeground: #616161;--vscode-symbolIcon-operatorForeground: #616161;--vscode-symbolIcon-packageForeground: #616161;--vscode-symbolIcon-propertyForeground: #616161;--vscode-symbolIcon-referenceForeground: #616161;--vscode-symbolIcon-snippetForeground: #616161;--vscode-symbolIcon-stringForeground: #616161;--vscode-symbolIcon-structForeground: #616161;--vscode-symbolIcon-textForeground: #616161;--vscode-symbolIcon-typeParameterForeground: #616161;--vscode-symbolIcon-unitForeground: #616161;--vscode-symbolIcon-variableForeground: #007acc;--vscode-editorHoverWidget-highlightForeground: #0066bf;--vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;--vscode-editor-foldBackground: rgba(173, 214, 255, .3);--vscode-editorGutter-foldingControlForeground: #424242;--vscode-editor-linkedEditingBackground: rgba(255, 0, 0, .3);--vscode-editor-wordHighlightBackground: rgba(87, 87, 87, .25);--vscode-editor-wordHighlightStrongBackground: rgba(14, 99, 156, .25);--vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, .8);--vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, .8);--vscode-peekViewTitle-background: rgba(26, 133, 255, .1);--vscode-peekViewTitleLabel-foreground: #000000;--vscode-peekViewTitleDescription-foreground: #616161;--vscode-peekView-border: #1a85ff;--vscode-peekViewResult-background: #f3f3f3;--vscode-peekViewResult-lineForeground: #646465;--vscode-peekViewResult-fileForeground: #1e1e1e;--vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, .2);--vscode-peekViewResult-selectionForeground: #6c6c6c;--vscode-peekViewEditor-background: #f2f8fc;--vscode-peekViewEditorGutter-background: #f2f8fc;--vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, .3);--vscode-peekViewEditor-matchHighlightBackground: rgba(245, 216, 2, .87);--vscode-editorMarkerNavigationError-background: #e51400;--vscode-editorMarkerNavigationError-headerBackground: rgba(229, 20, 0, .1);--vscode-editorMarkerNavigationWarning-background: #bf8803;--vscode-editorMarkerNavigationWarning-headerBackground: rgba(191, 136, 3, .1);--vscode-editorMarkerNavigationInfo-background: #1a85ff;--vscode-editorMarkerNavigationInfo-headerBackground: rgba(26, 133, 255, .1);--vscode-editorMarkerNavigation-background: #ffffff;--vscode-editorSuggestWidget-background: #f3f3f3;--vscode-editorSuggestWidget-border: #c8c8c8;--vscode-editorSuggestWidget-foreground: #000000;--vscode-editorSuggestWidget-selectedForeground: #ffffff;--vscode-editorSuggestWidget-selectedIconForeground: #ffffff;--vscode-editorSuggestWidget-selectedBackground: #0060c0;--vscode-editorSuggestWidget-highlightForeground: #0066bf;--vscode-editorSuggestWidget-focusHighlightForeground: #bbe7ff;--vscode-editorSuggestWidgetStatus-foreground: rgba(0, 0, 0, .5);--vscode-tab-activeBackground: #ffffff;--vscode-tab-unfocusedActiveBackground: #ffffff;--vscode-tab-inactiveBackground: #ececec;--vscode-tab-unfocusedInactiveBackground: #ececec;--vscode-tab-activeForeground: #333333;--vscode-tab-inactiveForeground: rgba(51, 51, 51, .7);--vscode-tab-unfocusedActiveForeground: rgba(51, 51, 51, .7);--vscode-tab-unfocusedInactiveForeground: rgba(51, 51, 51, .35);--vscode-tab-border: #f3f3f3;--vscode-tab-lastPinnedBorder: rgba(97, 97, 97, .19);--vscode-tab-activeModifiedBorder: #33aaee;--vscode-tab-inactiveModifiedBorder: rgba(51, 170, 238, .5);--vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 170, 238, .7);--vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 170, 238, .25);--vscode-editorPane-background: #ffffff;--vscode-editorGroupHeader-tabsBackground: #f3f3f3;--vscode-editorGroupHeader-noTabsBackground: #ffffff;--vscode-editorGroup-border: #e7e7e7;--vscode-editorGroup-dropBackground: rgba(38, 119, 203, .18);--vscode-editorGroup-dropIntoPromptForeground: #616161;--vscode-editorGroup-dropIntoPromptBackground: #f3f3f3;--vscode-sideBySideEditor-horizontalBorder: #e7e7e7;--vscode-sideBySideEditor-verticalBorder: #e7e7e7;--vscode-panel-background: #ffffff;--vscode-panel-border: rgba(128, 128, 128, .35);--vscode-panelTitle-activeForeground: #424242;--vscode-panelTitle-inactiveForeground: rgba(66, 66, 66, .75);--vscode-panelTitle-activeBorder: #424242;--vscode-panelInput-border: #dddddd;--vscode-panel-dropBorder: #424242;--vscode-panelSection-dropBackground: rgba(38, 119, 203, .18);--vscode-panelSectionHeader-background: rgba(128, 128, 128, .2);--vscode-panelSection-border: rgba(128, 128, 128, .35);--vscode-banner-background: #004386;--vscode-banner-foreground: #ffffff;--vscode-banner-iconForeground: #1a85ff;--vscode-statusBar-foreground: #ffffff;--vscode-statusBar-noFolderForeground: #ffffff;--vscode-statusBar-background: #007acc;--vscode-statusBar-noFolderBackground: #68217a;--vscode-statusBar-focusBorder: #ffffff;--vscode-statusBarItem-activeBackground: rgba(255, 255, 255, .18);--vscode-statusBarItem-focusBorder: #ffffff;--vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, .12);--vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, .2);--vscode-statusBarItem-prominentForeground: #ffffff;--vscode-statusBarItem-prominentBackground: rgba(0, 0, 0, .5);--vscode-statusBarItem-prominentHoverBackground: rgba(0, 0, 0, .3);--vscode-statusBarItem-errorBackground: #c72e0f;--vscode-statusBarItem-errorForeground: #ffffff;--vscode-statusBarItem-warningBackground: #725102;--vscode-statusBarItem-warningForeground: #ffffff;--vscode-activityBar-background: #2c2c2c;--vscode-activityBar-foreground: #ffffff;--vscode-activityBar-inactiveForeground: rgba(255, 255, 255, .4);--vscode-activityBar-activeBorder: #ffffff;--vscode-activityBar-dropBorder: #ffffff;--vscode-activityBarBadge-background: #007acc;--vscode-activityBarBadge-foreground: #ffffff;--vscode-statusBarItem-remoteBackground: #16825d;--vscode-statusBarItem-remoteForeground: #ffffff;--vscode-extensionBadge-remoteBackground: #007acc;--vscode-extensionBadge-remoteForeground: #ffffff;--vscode-sideBar-background: #f3f3f3;--vscode-sideBarTitle-foreground: #6f6f6f;--vscode-sideBar-dropBackground: rgba(38, 119, 203, .18);--vscode-sideBarSectionHeader-background: rgba(0, 0, 0, 0);--vscode-sideBarSectionHeader-border: rgba(97, 97, 97, .19);--vscode-titleBar-activeForeground: #333333;--vscode-titleBar-inactiveForeground: rgba(51, 51, 51, .6);--vscode-titleBar-activeBackground: #dddddd;--vscode-titleBar-inactiveBackground: rgba(221, 221, 221, .6);--vscode-menubar-selectionForeground: #333333;--vscode-menubar-selectionBackground: rgba(184, 184, 184, .31);--vscode-notifications-foreground: #616161;--vscode-notifications-background: #f3f3f3;--vscode-notificationLink-foreground: #006ab1;--vscode-notificationCenterHeader-background: #e7e7e7;--vscode-notifications-border: #e7e7e7;--vscode-notificationsErrorIcon-foreground: #e51400;--vscode-notificationsWarningIcon-foreground: #bf8803;--vscode-notificationsInfoIcon-foreground: #1a85ff;--vscode-commandCenter-foreground: #333333;--vscode-commandCenter-activeForeground: #333333;--vscode-commandCenter-activeBackground: rgba(184, 184, 184, .31);--vscode-commandCenter-border: rgba(128, 128, 128, .35);--vscode-editorCommentsWidget-resolvedBorder: rgba(97, 97, 97, .5);--vscode-editorCommentsWidget-unresolvedBorder: #1a85ff;--vscode-editorCommentsWidget-rangeBackground: rgba(26, 133, 255, .1);--vscode-editorCommentsWidget-rangeBorder: rgba(26, 133, 255, .4);--vscode-editorCommentsWidget-rangeActiveBackground: rgba(26, 133, 255, .1);--vscode-editorCommentsWidget-rangeActiveBorder: rgba(26, 133, 255, .4);--vscode-editorGutter-commentRangeForeground: #d5d8e9;--vscode-debugToolBar-background: #f3f3f3;--vscode-debugIcon-startForeground: #388a34;--vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 102, .45);--vscode-editor-focusedStackFrameHighlightBackground: rgba(206, 231, 206, .45);--vscode-mergeEditor-change\.background: rgba(155, 185, 85, .2);--vscode-mergeEditor-change\.word\.background: rgba(156, 204, 44, .4);--vscode-mergeEditor-conflict\.unhandledUnfocused\.border: rgba(255, 166, 0, .48);--vscode-mergeEditor-conflict\.unhandledFocused\.border: #ffa600;--vscode-mergeEditor-conflict\.handledUnfocused\.border: rgba(134, 134, 134, .29);--vscode-mergeEditor-conflict\.handledFocused\.border: rgba(193, 193, 193, .8);--vscode-mergeEditor-conflict\.handled\.minimapOverViewRuler: rgba(173, 172, 168, .93);--vscode-mergeEditor-conflict\.unhandled\.minimapOverViewRuler: #fcba03;--vscode-mergeEditor-conflictingLines\.background: rgba(255, 234, 0, .28);--vscode-settings-headerForeground: #444444;--vscode-settings-modifiedItemIndicator: #66afe0;--vscode-settings-headerBorder: rgba(128, 128, 128, .35);--vscode-settings-sashBorder: rgba(128, 128, 128, .35);--vscode-settings-dropdownBackground: #ffffff;--vscode-settings-dropdownBorder: #cecece;--vscode-settings-dropdownListBorder: #c8c8c8;--vscode-settings-checkboxBackground: #ffffff;--vscode-settings-checkboxBorder: #cecece;--vscode-settings-textInputBackground: #ffffff;--vscode-settings-textInputForeground: #616161;--vscode-settings-textInputBorder: #cecece;--vscode-settings-numberInputBackground: #ffffff;--vscode-settings-numberInputForeground: #616161;--vscode-settings-numberInputBorder: #cecece;--vscode-settings-focusedRowBackground: rgba(232, 232, 232, .6);--vscode-settings-rowHoverBackground: rgba(232, 232, 232, .3);--vscode-settings-focusedRowBorder: rgba(0, 0, 0, .12);--vscode-terminal-foreground: #333333;--vscode-terminal-selectionBackground: #add6ff;--vscode-terminal-inactiveSelectionBackground: #e5ebf1;--vscode-terminalCommandDecoration-defaultBackground: rgba(0, 0, 0, .25);--vscode-terminalCommandDecoration-successBackground: #2090d3;--vscode-terminalCommandDecoration-errorBackground: #e51400;--vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, .8);--vscode-terminal-border: rgba(128, 128, 128, .35);--vscode-terminal-findMatchBackground: #a8ac94;--vscode-terminal-findMatchHighlightBackground: rgba(234, 92, 0, .33);--vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, .49);--vscode-terminal-dropBackground: rgba(38, 119, 203, .18);--vscode-testing-iconFailed: #f14c4c;--vscode-testing-iconErrored: #f14c4c;--vscode-testing-iconPassed: #73c991;--vscode-testing-runAction: #73c991;--vscode-testing-iconQueued: #cca700;--vscode-testing-iconUnset: #848484;--vscode-testing-iconSkipped: #848484;--vscode-testing-peekBorder: #e51400;--vscode-testing-peekHeaderBackground: rgba(229, 20, 0, .1);--vscode-testing-message\.error\.decorationForeground: #e51400;--vscode-testing-message\.error\.lineBackground: rgba(255, 0, 0, .2);--vscode-testing-message\.info\.decorationForeground: rgba(0, 0, 0, .5);--vscode-welcomePage-tileBackground: #f3f3f3;--vscode-welcomePage-tileHoverBackground: #dbdbdb;--vscode-welcomePage-tileShadow: rgba(0, 0, 0, .16);--vscode-welcomePage-progress\.background: #ffffff;--vscode-welcomePage-progress\.foreground: #006ab1;--vscode-debugExceptionWidget-border: #a31515;--vscode-debugExceptionWidget-background: #f1dfde;--vscode-ports-iconRunningProcessForeground: #369432;--vscode-statusBar-debuggingBackground: #cc6633;--vscode-statusBar-debuggingForeground: #ffffff;--vscode-editor-inlineValuesForeground: rgba(0, 0, 0, .5);--vscode-editor-inlineValuesBackground: rgba(255, 200, 0, .2);--vscode-editorGutter-modifiedBackground: #2090d3;--vscode-editorGutter-addedBackground: #48985d;--vscode-editorGutter-deletedBackground: #e51400;--vscode-minimapGutter-modifiedBackground: #2090d3;--vscode-minimapGutter-addedBackground: #48985d;--vscode-minimapGutter-deletedBackground: #e51400;--vscode-editorOverviewRuler-modifiedForeground: rgba(32, 144, 211, .6);--vscode-editorOverviewRuler-addedForeground: rgba(72, 152, 93, .6);--vscode-editorOverviewRuler-deletedForeground: rgba(229, 20, 0, .6);--vscode-debugIcon-breakpointForeground: #e51400;--vscode-debugIcon-breakpointDisabledForeground: #848484;--vscode-debugIcon-breakpointUnverifiedForeground: #848484;--vscode-debugIcon-breakpointCurrentStackframeForeground: #be8700;--vscode-debugIcon-breakpointStackframeForeground: #89d185;--vscode-notebook-cellBorderColor: #e8e8e8;--vscode-notebook-focusedEditorBorder: #0090f1;--vscode-notebookStatusSuccessIcon-foreground: #388a34;--vscode-notebookStatusErrorIcon-foreground: #a1260d;--vscode-notebookStatusRunningIcon-foreground: #616161;--vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, .35);--vscode-notebook-selectedCellBackground: rgba(200, 221, 241, .31);--vscode-notebook-selectedCellBorder: #e8e8e8;--vscode-notebook-focusedCellBorder: #0090f1;--vscode-notebook-inactiveFocusedCellBorder: #e8e8e8;--vscode-notebook-cellStatusBarItemHoverBackground: rgba(0, 0, 0, .08);--vscode-notebook-cellInsertionIndicator: #0090f1;--vscode-notebookScrollbarSlider-background: rgba(100, 100, 100, .4);--vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, .7);--vscode-notebookScrollbarSlider-activeBackground: rgba(0, 0, 0, .6);--vscode-notebook-symbolHighlightBackground: rgba(253, 255, 0, .2);--vscode-notebook-cellEditorBackground: #f3f3f3;--vscode-notebook-editorBackground: #ffffff;--vscode-keybindingTable-headerBackground: rgba(97, 97, 97, .04);--vscode-keybindingTable-rowsBackground: rgba(97, 97, 97, .04);--vscode-scm-providerBorder: #c8c8c8;--vscode-searchEditor-textInputBorder: #cecece;--vscode-debugTokenExpression-name: #9b46b0;--vscode-debugTokenExpression-value: rgba(108, 108, 108, .8);--vscode-debugTokenExpression-string: #a31515;--vscode-debugTokenExpression-boolean: #0000ff;--vscode-debugTokenExpression-number: #098658;--vscode-debugTokenExpression-error: #e51400;--vscode-debugView-exceptionLabelForeground: #ffffff;--vscode-debugView-exceptionLabelBackground: #a31515;--vscode-debugView-stateLabelForeground: #616161;--vscode-debugView-stateLabelBackground: rgba(136, 136, 136, .27);--vscode-debugView-valueChangedHighlight: #569cd6;--vscode-debugConsole-infoForeground: #1a85ff;--vscode-debugConsole-warningForeground: #bf8803;--vscode-debugConsole-errorForeground: #a1260d;--vscode-debugConsole-sourceForeground: #616161;--vscode-debugConsoleInputIcon-foreground: #616161;--vscode-debugIcon-pauseForeground: #007acc;--vscode-debugIcon-stopForeground: #a1260d;--vscode-debugIcon-disconnectForeground: #a1260d;--vscode-debugIcon-restartForeground: #388a34;--vscode-debugIcon-stepOverForeground: #007acc;--vscode-debugIcon-stepIntoForeground: #007acc;--vscode-debugIcon-stepOutForeground: #007acc;--vscode-debugIcon-continueForeground: #007acc;--vscode-debugIcon-stepBackForeground: #007acc;--vscode-extensionButton-prominentBackground: #007acc;--vscode-extensionButton-prominentForeground: #ffffff;--vscode-extensionButton-prominentHoverBackground: #0062a3;--vscode-extensionIcon-starForeground: #df6100;--vscode-extensionIcon-verifiedForeground: #006ab1;--vscode-extensionIcon-preReleaseForeground: #1d9271;--vscode-extensionIcon-sponsorForeground: #b51e78;--vscode-terminal-ansiBlack: #000000;--vscode-terminal-ansiRed: #cd3131;--vscode-terminal-ansiGreen: #00bc00;--vscode-terminal-ansiYellow: #949800;--vscode-terminal-ansiBlue: #0451a5;--vscode-terminal-ansiMagenta: #bc05bc;--vscode-terminal-ansiCyan: #0598bc;--vscode-terminal-ansiWhite: #555555;--vscode-terminal-ansiBrightBlack: #666666;--vscode-terminal-ansiBrightRed: #cd3131;--vscode-terminal-ansiBrightGreen: #14ce14;--vscode-terminal-ansiBrightYellow: #b5ba00;--vscode-terminal-ansiBrightBlue: #0451a5;--vscode-terminal-ansiBrightMagenta: #bc05bc;--vscode-terminal-ansiBrightCyan: #0598bc;--vscode-terminal-ansiBrightWhite: #a5a5a5;--vscode-interactive-activeCodeBorder: #1a85ff;--vscode-interactive-inactiveCodeBorder: #e4e6f1;--vscode-gitDecoration-addedResourceForeground: #587c0c;--vscode-gitDecoration-modifiedResourceForeground: #895503;--vscode-gitDecoration-deletedResourceForeground: #ad0707;--vscode-gitDecoration-renamedResourceForeground: #007100;--vscode-gitDecoration-untrackedResourceForeground: #007100;--vscode-gitDecoration-ignoredResourceForeground: #8e8e90;--vscode-gitDecoration-stageModifiedResourceForeground: #895503;--vscode-gitDecoration-stageDeletedResourceForeground: #ad0707;--vscode-gitDecoration-conflictingResourceForeground: #ad0707;--vscode-gitDecoration-submoduleResourceForeground: #1258a7}body.dark-mode{--vscode-font-family: system-ui, "Ubuntu", "Droid Sans", sans-serif;--vscode-font-weight: normal;--vscode-font-size: 13px;--vscode-editor-font-family: "Droid Sans Mono", "monospace", monospace;--vscode-editor-font-weight: normal;--vscode-editor-font-size: 14px;--vscode-foreground: #cccccc;--vscode-disabledForeground: rgba(204, 204, 204, .5);--vscode-errorForeground: #f48771;--vscode-descriptionForeground: rgba(204, 204, 204, .7);--vscode-icon-foreground: #c5c5c5;--vscode-focusBorder: #007fd4;--vscode-textSeparator-foreground: rgba(255, 255, 255, .18);--vscode-textLink-foreground: #3794ff;--vscode-textLink-activeForeground: #3794ff;--vscode-textPreformat-foreground: #d7ba7d;--vscode-textBlockQuote-background: rgba(127, 127, 127, .1);--vscode-textBlockQuote-border: rgba(0, 122, 204, .5);--vscode-textCodeBlock-background: rgba(10, 10, 10, .4);--vscode-widget-shadow: rgba(0, 0, 0, .36);--vscode-input-background: #3c3c3c;--vscode-input-foreground: #cccccc;--vscode-inputOption-activeBorder: #007acc;--vscode-inputOption-hoverBackground: rgba(90, 93, 94, .5);--vscode-inputOption-activeBackground: rgba(0, 127, 212, .4);--vscode-inputOption-activeForeground: #ffffff;--vscode-input-placeholderForeground: #a6a6a6;--vscode-inputValidation-infoBackground: #063b49;--vscode-inputValidation-infoBorder: #007acc;--vscode-inputValidation-warningBackground: #352a05;--vscode-inputValidation-warningBorder: #b89500;--vscode-inputValidation-errorBackground: #5a1d1d;--vscode-inputValidation-errorBorder: #be1100;--vscode-dropdown-background: #3c3c3c;--vscode-dropdown-foreground: #f0f0f0;--vscode-dropdown-border: #3c3c3c;--vscode-checkbox-background: #3c3c3c;--vscode-checkbox-foreground: #f0f0f0;--vscode-checkbox-border: #3c3c3c;--vscode-button-foreground: #ffffff;--vscode-button-separator: rgba(255, 255, 255, .4);--vscode-button-background: #0e639c;--vscode-button-hoverBackground: #1177bb;--vscode-button-secondaryForeground: #ffffff;--vscode-button-secondaryBackground: #3a3d41;--vscode-button-secondaryHoverBackground: #45494e;--vscode-badge-background: #4d4d4d;--vscode-badge-foreground: #ffffff;--vscode-scrollbar-shadow: #000000;--vscode-scrollbarSlider-background: rgba(121, 121, 121, .4);--vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, .7);--vscode-scrollbarSlider-activeBackground: rgba(191, 191, 191, .4);--vscode-progressBar-background: #0e70c0;--vscode-editorError-foreground: #f14c4c;--vscode-editorWarning-foreground: #cca700;--vscode-editorInfo-foreground: #3794ff;--vscode-editorHint-foreground: rgba(238, 238, 238, .7);--vscode-sash-hoverBorder: #007fd4;--vscode-editor-background: #1e1e1e;--vscode-editor-foreground: #d4d4d4;--vscode-editorStickyScroll-background: #1e1e1e;--vscode-editorStickyScrollHover-background: #2a2d2e;--vscode-editorWidget-background: #252526;--vscode-editorWidget-foreground: #cccccc;--vscode-editorWidget-border: #454545;--vscode-quickInput-background: #252526;--vscode-quickInput-foreground: #cccccc;--vscode-quickInputTitle-background: rgba(255, 255, 255, .1);--vscode-pickerGroup-foreground: #3794ff;--vscode-pickerGroup-border: #3f3f46;--vscode-keybindingLabel-background: rgba(128, 128, 128, .17);--vscode-keybindingLabel-foreground: #cccccc;--vscode-keybindingLabel-border: rgba(51, 51, 51, .6);--vscode-keybindingLabel-bottomBorder: rgba(68, 68, 68, .6);--vscode-editor-selectionBackground: #264f78;--vscode-editor-inactiveSelectionBackground: #3a3d41;--vscode-editor-selectionHighlightBackground: rgba(173, 214, 255, .15);--vscode-editor-findMatchBackground: #515c6a;--vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, .33);--vscode-editor-findRangeHighlightBackground: rgba(58, 61, 65, .4);--vscode-searchEditor-findMatchBackground: rgba(234, 92, 0, .22);--vscode-editor-hoverHighlightBackground: rgba(38, 79, 120, .25);--vscode-editorHoverWidget-background: #252526;--vscode-editorHoverWidget-foreground: #cccccc;--vscode-editorHoverWidget-border: #454545;--vscode-editorHoverWidget-statusBarBackground: #2c2c2d;--vscode-editorLink-activeForeground: #4e94ce;--vscode-editorInlayHint-foreground: rgba(255, 255, 255, .8);--vscode-editorInlayHint-background: rgba(77, 77, 77, .6);--vscode-editorInlayHint-typeForeground: rgba(255, 255, 255, .8);--vscode-editorInlayHint-typeBackground: rgba(77, 77, 77, .6);--vscode-editorInlayHint-parameterForeground: rgba(255, 255, 255, .8);--vscode-editorInlayHint-parameterBackground: rgba(77, 77, 77, .6);--vscode-editorLightBulb-foreground: #ffcc00;--vscode-editorLightBulbAutoFix-foreground: #75beff;--vscode-diffEditor-insertedTextBackground: rgba(156, 204, 44, .2);--vscode-diffEditor-removedTextBackground: rgba(255, 0, 0, .4);--vscode-diffEditor-insertedLineBackground: rgba(155, 185, 85, .2);--vscode-diffEditor-removedLineBackground: rgba(255, 0, 0, .2);--vscode-diffEditor-diagonalFill: rgba(204, 204, 204, .2);--vscode-list-focusOutline: #007fd4;--vscode-list-activeSelectionBackground: #04395e;--vscode-list-activeSelectionForeground: #ffffff;--vscode-list-activeSelectionIconForeground: #ffffff;--vscode-list-inactiveSelectionBackground: #37373d;--vscode-list-hoverBackground: #2a2d2e;--vscode-list-dropBackground: #383b3d;--vscode-list-highlightForeground: #2aaaff;--vscode-list-focusHighlightForeground: #2aaaff;--vscode-list-invalidItemForeground: #b89500;--vscode-list-errorForeground: #f88070;--vscode-list-warningForeground: #cca700;--vscode-listFilterWidget-background: #252526;--vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);--vscode-listFilterWidget-noMatchesOutline: #be1100;--vscode-listFilterWidget-shadow: rgba(0, 0, 0, .36);--vscode-list-filterMatchBackground: rgba(234, 92, 0, .33);--vscode-tree-indentGuidesStroke: #585858;--vscode-tree-tableColumnsBorder: rgba(204, 204, 204, .13);--vscode-tree-tableOddRowsBackground: rgba(204, 204, 204, .04);--vscode-list-deemphasizedForeground: #8c8c8c;--vscode-quickInputList-focusForeground: #ffffff;--vscode-quickInputList-focusIconForeground: #ffffff;--vscode-quickInputList-focusBackground: #04395e;--vscode-menu-foreground: #cccccc;--vscode-menu-background: #303031;--vscode-menu-selectionForeground: #ffffff;--vscode-menu-selectionBackground: #04395e;--vscode-menu-separatorBackground: #606060;--vscode-toolbar-hoverBackground: rgba(90, 93, 94, .31);--vscode-toolbar-activeBackground: rgba(99, 102, 103, .31);--vscode-editor-snippetTabstopHighlightBackground: rgba(124, 124, 124, .3);--vscode-editor-snippetFinalTabstopHighlightBorder: #525252;--vscode-breadcrumb-foreground: rgba(204, 204, 204, .8);--vscode-breadcrumb-background: #1e1e1e;--vscode-breadcrumb-focusForeground: #e0e0e0;--vscode-breadcrumb-activeSelectionForeground: #e0e0e0;--vscode-breadcrumbPicker-background: #252526;--vscode-merge-currentHeaderBackground: rgba(64, 200, 174, .5);--vscode-merge-currentContentBackground: rgba(64, 200, 174, .2);--vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, .5);--vscode-merge-incomingContentBackground: rgba(64, 166, 255, .2);--vscode-merge-commonHeaderBackground: rgba(96, 96, 96, .4);--vscode-merge-commonContentBackground: rgba(96, 96, 96, .16);--vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, .5);--vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, .5);--vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, .4);--vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, .49);--vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, .8);--vscode-minimap-findMatchHighlight: #d18616;--vscode-minimap-selectionOccurrenceHighlight: #676767;--vscode-minimap-selectionHighlight: #264f78;--vscode-minimap-errorHighlight: rgba(255, 18, 18, .7);--vscode-minimap-warningHighlight: #cca700;--vscode-minimap-foregroundOpacity: #000000;--vscode-minimapSlider-background: rgba(121, 121, 121, .2);--vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, .35);--vscode-minimapSlider-activeBackground: rgba(191, 191, 191, .2);--vscode-problemsErrorIcon-foreground: #f14c4c;--vscode-problemsWarningIcon-foreground: #cca700;--vscode-problemsInfoIcon-foreground: #3794ff;--vscode-charts-foreground: #cccccc;--vscode-charts-lines: rgba(204, 204, 204, .5);--vscode-charts-red: #f14c4c;--vscode-charts-blue: #3794ff;--vscode-charts-yellow: #cca700;--vscode-charts-orange: #d18616;--vscode-charts-green: #89d185;--vscode-charts-purple: #b180d7;--vscode-editor-lineHighlightBorder: #282828;--vscode-editor-rangeHighlightBackground: rgba(255, 255, 255, .04);--vscode-editor-symbolHighlightBackground: rgba(234, 92, 0, .33);--vscode-editorCursor-foreground: #aeafad;--vscode-editorWhitespace-foreground: rgba(227, 228, 226, .16);--vscode-editorIndentGuide-background: #404040;--vscode-editorIndentGuide-activeBackground: #707070;--vscode-editorLineNumber-foreground: #858585;--vscode-editorActiveLineNumber-foreground: #c6c6c6;--vscode-editorLineNumber-activeForeground: #c6c6c6;--vscode-editorRuler-foreground: #5a5a5a;--vscode-editorCodeLens-foreground: #999999;--vscode-editorBracketMatch-background: rgba(0, 100, 0, .1);--vscode-editorBracketMatch-border: #888888;--vscode-editorOverviewRuler-border: rgba(127, 127, 127, .3);--vscode-editorGutter-background: #1e1e1e;--vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, .67);--vscode-editorGhostText-foreground: rgba(255, 255, 255, .34);--vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, .6);--vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, .7);--vscode-editorOverviewRuler-warningForeground: #cca700;--vscode-editorOverviewRuler-infoForeground: #3794ff;--vscode-editorBracketHighlight-foreground1: #ffd700;--vscode-editorBracketHighlight-foreground2: #da70d6;--vscode-editorBracketHighlight-foreground3: #179fff;--vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0);--vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0);--vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0);--vscode-editorBracketHighlight-unexpectedBracket\.foreground: rgba(255, 18, 18, .8);--vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);--vscode-editorUnicodeHighlight-border: #bd9b03;--vscode-editorUnicodeHighlight-background: rgba(189, 155, 3, .15);--vscode-symbolIcon-arrayForeground: #cccccc;--vscode-symbolIcon-booleanForeground: #cccccc;--vscode-symbolIcon-classForeground: #ee9d28;--vscode-symbolIcon-colorForeground: #cccccc;--vscode-symbolIcon-constantForeground: #cccccc;--vscode-symbolIcon-constructorForeground: #b180d7;--vscode-symbolIcon-enumeratorForeground: #ee9d28;--vscode-symbolIcon-enumeratorMemberForeground: #75beff;--vscode-symbolIcon-eventForeground: #ee9d28;--vscode-symbolIcon-fieldForeground: #75beff;--vscode-symbolIcon-fileForeground: #cccccc;--vscode-symbolIcon-folderForeground: #cccccc;--vscode-symbolIcon-functionForeground: #b180d7;--vscode-symbolIcon-interfaceForeground: #75beff;--vscode-symbolIcon-keyForeground: #cccccc;--vscode-symbolIcon-keywordForeground: #cccccc;--vscode-symbolIcon-methodForeground: #b180d7;--vscode-symbolIcon-moduleForeground: #cccccc;--vscode-symbolIcon-namespaceForeground: #cccccc;--vscode-symbolIcon-nullForeground: #cccccc;--vscode-symbolIcon-numberForeground: #cccccc;--vscode-symbolIcon-objectForeground: #cccccc;--vscode-symbolIcon-operatorForeground: #cccccc;--vscode-symbolIcon-packageForeground: #cccccc;--vscode-symbolIcon-propertyForeground: #cccccc;--vscode-symbolIcon-referenceForeground: #cccccc;--vscode-symbolIcon-snippetForeground: #cccccc;--vscode-symbolIcon-stringForeground: #cccccc;--vscode-symbolIcon-structForeground: #cccccc;--vscode-symbolIcon-textForeground: #cccccc;--vscode-symbolIcon-typeParameterForeground: #cccccc;--vscode-symbolIcon-unitForeground: #cccccc;--vscode-symbolIcon-variableForeground: #75beff;--vscode-editorHoverWidget-highlightForeground: #2aaaff;--vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;--vscode-editor-foldBackground: rgba(38, 79, 120, .3);--vscode-editorGutter-foldingControlForeground: #c5c5c5;--vscode-editor-linkedEditingBackground: rgba(255, 0, 0, .3);--vscode-editor-wordHighlightBackground: rgba(87, 87, 87, .72);--vscode-editor-wordHighlightStrongBackground: rgba(0, 73, 114, .72);--vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, .8);--vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, .8);--vscode-peekViewTitle-background: rgba(55, 148, 255, .1);--vscode-peekViewTitleLabel-foreground: #ffffff;--vscode-peekViewTitleDescription-foreground: rgba(204, 204, 204, .7);--vscode-peekView-border: #3794ff;--vscode-peekViewResult-background: #252526;--vscode-peekViewResult-lineForeground: #bbbbbb;--vscode-peekViewResult-fileForeground: #ffffff;--vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, .2);--vscode-peekViewResult-selectionForeground: #ffffff;--vscode-peekViewEditor-background: #001f33;--vscode-peekViewEditorGutter-background: #001f33;--vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, .3);--vscode-peekViewEditor-matchHighlightBackground: rgba(255, 143, 0, .6);--vscode-editorMarkerNavigationError-background: #f14c4c;--vscode-editorMarkerNavigationError-headerBackground: rgba(241, 76, 76, .1);--vscode-editorMarkerNavigationWarning-background: #cca700;--vscode-editorMarkerNavigationWarning-headerBackground: rgba(204, 167, 0, .1);--vscode-editorMarkerNavigationInfo-background: #3794ff;--vscode-editorMarkerNavigationInfo-headerBackground: rgba(55, 148, 255, .1);--vscode-editorMarkerNavigation-background: #1e1e1e;--vscode-editorSuggestWidget-background: #252526;--vscode-editorSuggestWidget-border: #454545;--vscode-editorSuggestWidget-foreground: #d4d4d4;--vscode-editorSuggestWidget-selectedForeground: #ffffff;--vscode-editorSuggestWidget-selectedIconForeground: #ffffff;--vscode-editorSuggestWidget-selectedBackground: #04395e;--vscode-editorSuggestWidget-highlightForeground: #2aaaff;--vscode-editorSuggestWidget-focusHighlightForeground: #2aaaff;--vscode-editorSuggestWidgetStatus-foreground: rgba(212, 212, 212, .5);--vscode-tab-activeBackground: #1e1e1e;--vscode-tab-unfocusedActiveBackground: #1e1e1e;--vscode-tab-inactiveBackground: #2d2d2d;--vscode-tab-unfocusedInactiveBackground: #2d2d2d;--vscode-tab-activeForeground: #ffffff;--vscode-tab-inactiveForeground: rgba(255, 255, 255, .5);--vscode-tab-unfocusedActiveForeground: rgba(255, 255, 255, .5);--vscode-tab-unfocusedInactiveForeground: rgba(255, 255, 255, .25);--vscode-tab-border: #252526;--vscode-tab-lastPinnedBorder: rgba(204, 204, 204, .2);--vscode-tab-activeModifiedBorder: #3399cc;--vscode-tab-inactiveModifiedBorder: rgba(51, 153, 204, .5);--vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 153, 204, .5);--vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 153, 204, .25);--vscode-editorPane-background: #1e1e1e;--vscode-editorGroupHeader-tabsBackground: #252526;--vscode-editorGroupHeader-noTabsBackground: #1e1e1e;--vscode-editorGroup-border: #444444;--vscode-editorGroup-dropBackground: rgba(83, 89, 93, .5);--vscode-editorGroup-dropIntoPromptForeground: #cccccc;--vscode-editorGroup-dropIntoPromptBackground: #252526;--vscode-sideBySideEditor-horizontalBorder: #444444;--vscode-sideBySideEditor-verticalBorder: #444444;--vscode-panel-background: #1e1e1e;--vscode-panel-border: rgba(128, 128, 128, .35);--vscode-panelTitle-activeForeground: #e7e7e7;--vscode-panelTitle-inactiveForeground: rgba(231, 231, 231, .6);--vscode-panelTitle-activeBorder: #e7e7e7;--vscode-panel-dropBorder: #e7e7e7;--vscode-panelSection-dropBackground: rgba(83, 89, 93, .5);--vscode-panelSectionHeader-background: rgba(128, 128, 128, .2);--vscode-panelSection-border: rgba(128, 128, 128, .35);--vscode-banner-background: #04395e;--vscode-banner-foreground: #ffffff;--vscode-banner-iconForeground: #3794ff;--vscode-statusBar-foreground: #ffffff;--vscode-statusBar-noFolderForeground: #ffffff;--vscode-statusBar-background: #007acc;--vscode-statusBar-noFolderBackground: #68217a;--vscode-statusBar-focusBorder: #ffffff;--vscode-statusBarItem-activeBackground: rgba(255, 255, 255, .18);--vscode-statusBarItem-focusBorder: #ffffff;--vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, .12);--vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, .2);--vscode-statusBarItem-prominentForeground: #ffffff;--vscode-statusBarItem-prominentBackground: rgba(0, 0, 0, .5);--vscode-statusBarItem-prominentHoverBackground: rgba(0, 0, 0, .3);--vscode-statusBarItem-errorBackground: #c72e0f;--vscode-statusBarItem-errorForeground: #ffffff;--vscode-statusBarItem-warningBackground: #7a6400;--vscode-statusBarItem-warningForeground: #ffffff;--vscode-activityBar-background: #333333;--vscode-activityBar-foreground: #ffffff;--vscode-activityBar-inactiveForeground: rgba(255, 255, 255, .4);--vscode-activityBar-activeBorder: #ffffff;--vscode-activityBar-dropBorder: #ffffff;--vscode-activityBarBadge-background: #007acc;--vscode-activityBarBadge-foreground: #ffffff;--vscode-statusBarItem-remoteBackground: #16825d;--vscode-statusBarItem-remoteForeground: #ffffff;--vscode-extensionBadge-remoteBackground: #007acc;--vscode-extensionBadge-remoteForeground: #ffffff;--vscode-sideBar-background: #252526;--vscode-sideBarTitle-foreground: #bbbbbb;--vscode-sideBar-dropBackground: rgba(83, 89, 93, .5);--vscode-sideBarSectionHeader-background: rgba(0, 0, 0, 0);--vscode-sideBarSectionHeader-border: rgba(204, 204, 204, .2);--vscode-titleBar-activeForeground: #cccccc;--vscode-titleBar-inactiveForeground: rgba(204, 204, 204, .6);--vscode-titleBar-activeBackground: #3c3c3c;--vscode-titleBar-inactiveBackground: rgba(60, 60, 60, .6);--vscode-menubar-selectionForeground: #cccccc;--vscode-menubar-selectionBackground: rgba(90, 93, 94, .31);--vscode-notifications-foreground: #cccccc;--vscode-notifications-background: #252526;--vscode-notificationLink-foreground: #3794ff;--vscode-notificationCenterHeader-background: #303031;--vscode-notifications-border: #303031;--vscode-notificationsErrorIcon-foreground: #f14c4c;--vscode-notificationsWarningIcon-foreground: #cca700;--vscode-notificationsInfoIcon-foreground: #3794ff;--vscode-commandCenter-foreground: #cccccc;--vscode-commandCenter-activeForeground: #cccccc;--vscode-commandCenter-activeBackground: rgba(90, 93, 94, .31);--vscode-commandCenter-border: rgba(128, 128, 128, .35);--vscode-editorCommentsWidget-resolvedBorder: rgba(204, 204, 204, .5);--vscode-editorCommentsWidget-unresolvedBorder: #3794ff;--vscode-editorCommentsWidget-rangeBackground: rgba(55, 148, 255, .1);--vscode-editorCommentsWidget-rangeBorder: rgba(55, 148, 255, .4);--vscode-editorCommentsWidget-rangeActiveBackground: rgba(55, 148, 255, .1);--vscode-editorCommentsWidget-rangeActiveBorder: rgba(55, 148, 255, .4);--vscode-editorGutter-commentRangeForeground: #37373d;--vscode-debugToolBar-background: #333333;--vscode-debugIcon-startForeground: #89d185;--vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 0, .2);--vscode-editor-focusedStackFrameHighlightBackground: rgba(122, 189, 122, .3);--vscode-mergeEditor-change\.background: rgba(155, 185, 85, .2);--vscode-mergeEditor-change\.word\.background: rgba(156, 204, 44, .2);--vscode-mergeEditor-conflict\.unhandledUnfocused\.border: rgba(255, 166, 0, .48);--vscode-mergeEditor-conflict\.unhandledFocused\.border: #ffa600;--vscode-mergeEditor-conflict\.handledUnfocused\.border: rgba(134, 134, 134, .29);--vscode-mergeEditor-conflict\.handledFocused\.border: rgba(193, 193, 193, .8);--vscode-mergeEditor-conflict\.handled\.minimapOverViewRuler: rgba(173, 172, 168, .93);--vscode-mergeEditor-conflict\.unhandled\.minimapOverViewRuler: #fcba03;--vscode-mergeEditor-conflictingLines\.background: rgba(255, 234, 0, .28);--vscode-settings-headerForeground: #e7e7e7;--vscode-settings-modifiedItemIndicator: #0c7d9d;--vscode-settings-headerBorder: rgba(128, 128, 128, .35);--vscode-settings-sashBorder: rgba(128, 128, 128, .35);--vscode-settings-dropdownBackground: #3c3c3c;--vscode-settings-dropdownForeground: #f0f0f0;--vscode-settings-dropdownBorder: #3c3c3c;--vscode-settings-dropdownListBorder: #454545;--vscode-settings-checkboxBackground: #3c3c3c;--vscode-settings-checkboxForeground: #f0f0f0;--vscode-settings-checkboxBorder: #3c3c3c;--vscode-settings-textInputBackground: #3c3c3c;--vscode-settings-textInputForeground: #cccccc;--vscode-settings-numberInputBackground: #3c3c3c;--vscode-settings-numberInputForeground: #cccccc;--vscode-settings-focusedRowBackground: rgba(42, 45, 46, .6);--vscode-settings-rowHoverBackground: rgba(42, 45, 46, .3);--vscode-settings-focusedRowBorder: rgba(255, 255, 255, .12);--vscode-terminal-foreground: #cccccc;--vscode-terminal-selectionBackground: #264f78;--vscode-terminal-inactiveSelectionBackground: #3a3d41;--vscode-terminalCommandDecoration-defaultBackground: rgba(255, 255, 255, .25);--vscode-terminalCommandDecoration-successBackground: #1b81a8;--vscode-terminalCommandDecoration-errorBackground: #f14c4c;--vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, .8);--vscode-terminal-border: rgba(128, 128, 128, .35);--vscode-terminal-findMatchBackground: #515c6a;--vscode-terminal-findMatchHighlightBackground: rgba(234, 92, 0, .33);--vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, .49);--vscode-terminal-dropBackground: rgba(83, 89, 93, .5);--vscode-testing-iconFailed: #f14c4c;--vscode-testing-iconErrored: #f14c4c;--vscode-testing-iconPassed: #73c991;--vscode-testing-runAction: #73c991;--vscode-testing-iconQueued: #cca700;--vscode-testing-iconUnset: #848484;--vscode-testing-iconSkipped: #848484;--vscode-testing-peekBorder: #f14c4c;--vscode-testing-peekHeaderBackground: rgba(241, 76, 76, .1);--vscode-testing-message\.error\.decorationForeground: #f14c4c;--vscode-testing-message\.error\.lineBackground: rgba(255, 0, 0, .2);--vscode-testing-message\.info\.decorationForeground: rgba(212, 212, 212, .5);--vscode-welcomePage-tileBackground: #252526;--vscode-welcomePage-tileHoverBackground: #2c2c2d;--vscode-welcomePage-tileShadow: rgba(0, 0, 0, .36);--vscode-welcomePage-progress\.background: #3c3c3c;--vscode-welcomePage-progress\.foreground: #3794ff;--vscode-debugExceptionWidget-border: #a31515;--vscode-debugExceptionWidget-background: #420b0d;--vscode-ports-iconRunningProcessForeground: #369432;--vscode-statusBar-debuggingBackground: #cc6633;--vscode-statusBar-debuggingForeground: #ffffff;--vscode-editor-inlineValuesForeground: rgba(255, 255, 255, .5);--vscode-editor-inlineValuesBackground: rgba(255, 200, 0, .2);--vscode-editorGutter-modifiedBackground: #1b81a8;--vscode-editorGutter-addedBackground: #487e02;--vscode-editorGutter-deletedBackground: #f14c4c;--vscode-minimapGutter-modifiedBackground: #1b81a8;--vscode-minimapGutter-addedBackground: #487e02;--vscode-minimapGutter-deletedBackground: #f14c4c;--vscode-editorOverviewRuler-modifiedForeground: rgba(27, 129, 168, .6);--vscode-editorOverviewRuler-addedForeground: rgba(72, 126, 2, .6);--vscode-editorOverviewRuler-deletedForeground: rgba(241, 76, 76, .6);--vscode-debugIcon-breakpointForeground: #e51400;--vscode-debugIcon-breakpointDisabledForeground: #848484;--vscode-debugIcon-breakpointUnverifiedForeground: #848484;--vscode-debugIcon-breakpointCurrentStackframeForeground: #ffcc00;--vscode-debugIcon-breakpointStackframeForeground: #89d185;--vscode-notebook-cellBorderColor: #37373d;--vscode-notebook-focusedEditorBorder: #007fd4;--vscode-notebookStatusSuccessIcon-foreground: #89d185;--vscode-notebookStatusErrorIcon-foreground: #f48771;--vscode-notebookStatusRunningIcon-foreground: #cccccc;--vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, .35);--vscode-notebook-selectedCellBackground: #37373d;--vscode-notebook-selectedCellBorder: #37373d;--vscode-notebook-focusedCellBorder: #007fd4;--vscode-notebook-inactiveFocusedCellBorder: #37373d;--vscode-notebook-cellStatusBarItemHoverBackground: rgba(255, 255, 255, .15);--vscode-notebook-cellInsertionIndicator: #007fd4;--vscode-notebookScrollbarSlider-background: rgba(121, 121, 121, .4);--vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, .7);--vscode-notebookScrollbarSlider-activeBackground: rgba(191, 191, 191, .4);--vscode-notebook-symbolHighlightBackground: rgba(255, 255, 255, .04);--vscode-notebook-cellEditorBackground: #252526;--vscode-notebook-editorBackground: #1e1e1e;--vscode-keybindingTable-headerBackground: rgba(204, 204, 204, .04);--vscode-keybindingTable-rowsBackground: rgba(204, 204, 204, .04);--vscode-scm-providerBorder: #454545;--vscode-debugTokenExpression-name: #c586c0;--vscode-debugTokenExpression-value: rgba(204, 204, 204, .6);--vscode-debugTokenExpression-string: #ce9178;--vscode-debugTokenExpression-boolean: #4e94ce;--vscode-debugTokenExpression-number: #b5cea8;--vscode-debugTokenExpression-error: #f48771;--vscode-debugView-exceptionLabelForeground: #cccccc;--vscode-debugView-exceptionLabelBackground: #6c2022;--vscode-debugView-stateLabelForeground: #cccccc;--vscode-debugView-stateLabelBackground: rgba(136, 136, 136, .27);--vscode-debugView-valueChangedHighlight: #569cd6;--vscode-debugConsole-infoForeground: #3794ff;--vscode-debugConsole-warningForeground: #cca700;--vscode-debugConsole-errorForeground: #f48771;--vscode-debugConsole-sourceForeground: #cccccc;--vscode-debugConsoleInputIcon-foreground: #cccccc;--vscode-debugIcon-pauseForeground: #75beff;--vscode-debugIcon-stopForeground: #f48771;--vscode-debugIcon-disconnectForeground: #f48771;--vscode-debugIcon-restartForeground: #89d185;--vscode-debugIcon-stepOverForeground: #75beff;--vscode-debugIcon-stepIntoForeground: #75beff;--vscode-debugIcon-stepOutForeground: #75beff;--vscode-debugIcon-continueForeground: #75beff;--vscode-debugIcon-stepBackForeground: #75beff;--vscode-extensionButton-prominentBackground: #0e639c;--vscode-extensionButton-prominentForeground: #ffffff;--vscode-extensionButton-prominentHoverBackground: #1177bb;--vscode-extensionIcon-starForeground: #ff8e00;--vscode-extensionIcon-verifiedForeground: #3794ff;--vscode-extensionIcon-preReleaseForeground: #1d9271;--vscode-extensionIcon-sponsorForeground: #d758b3;--vscode-terminal-ansiBlack: #000000;--vscode-terminal-ansiRed: #cd3131;--vscode-terminal-ansiGreen: #0dbc79;--vscode-terminal-ansiYellow: #e5e510;--vscode-terminal-ansiBlue: #2472c8;--vscode-terminal-ansiMagenta: #bc3fbc;--vscode-terminal-ansiCyan: #11a8cd;--vscode-terminal-ansiWhite: #e5e5e5;--vscode-terminal-ansiBrightBlack: #666666;--vscode-terminal-ansiBrightRed: #f14c4c;--vscode-terminal-ansiBrightGreen: #23d18b;--vscode-terminal-ansiBrightYellow: #f5f543;--vscode-terminal-ansiBrightBlue: #3b8eea;--vscode-terminal-ansiBrightMagenta: #d670d6;--vscode-terminal-ansiBrightCyan: #29b8db;--vscode-terminal-ansiBrightWhite: #e5e5e5;--vscode-interactive-activeCodeBorder: #3794ff;--vscode-interactive-inactiveCodeBorder: #37373d;--vscode-gitDecoration-addedResourceForeground: #81b88b;--vscode-gitDecoration-modifiedResourceForeground: #e2c08d;--vscode-gitDecoration-deletedResourceForeground: #c74e39;--vscode-gitDecoration-renamedResourceForeground: #73c991;--vscode-gitDecoration-untrackedResourceForeground: #73c991;--vscode-gitDecoration-ignoredResourceForeground: #8c8c8c;--vscode-gitDecoration-stageModifiedResourceForeground: #e2c08d;--vscode-gitDecoration-stageDeletedResourceForeground: #c74e39;--vscode-gitDecoration-conflictingResourceForeground: #e4676b;--vscode-gitDecoration-submoduleResourceForeground: #8db9e2}.xterm-wrapper{padding-left:5px}.xterm-wrapper .xterm-viewport{background-color:var(--vscode-panel-background)!important;color:var(--vscode-foreground)!important} 2 | -------------------------------------------------------------------------------- /playwright-report/trace/uiMode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Playwright Test 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /playwright-report/trace/xtermModule.6428296b.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2014 The xterm.js authors. All rights reserved. 3 | * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License) 4 | * https://github.com/chjj/term.js 5 | * @license MIT 6 | * 7 | * Permission is hereby granted, free of charge, to any person obtaining a copy 8 | * of this software and associated documentation files (the "Software"), to deal 9 | * in the Software without restriction, including without limitation the rights 10 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | * copies of the Software, and to permit persons to whom the Software is 12 | * furnished to do so, subject to the following conditions: 13 | * 14 | * The above copyright notice and this permission notice shall be included in 15 | * all copies or substantial portions of the Software. 16 | * 17 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 23 | * THE SOFTWARE. 24 | * 25 | * Originally forked from (with the author's permission): 26 | * Fabrice Bellard's javascript vt100 for jslinux: 27 | * http://bellard.org/jslinux/ 28 | * Copyright (c) 2011 Fabrice Bellard 29 | * The original design remains. The terminal itself 30 | * has been extended to include xterm CSI codes, among 31 | * other features. 32 | */.xterm{cursor:text;position:relative;user-select:none;-ms-user-select:none;-webkit-user-select:none}.xterm.focus,.xterm:focus{outline:none}.xterm .xterm-helpers{position:absolute;top:0;z-index:5}.xterm .xterm-helper-textarea{padding:0;border:0;margin:0;position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-5;white-space:nowrap;overflow:hidden;resize:none}.xterm .composition-view{background:#000;color:#fff;display:none;position:absolute;white-space:nowrap;z-index:1}.xterm .composition-view.active{display:block}.xterm .xterm-viewport{background-color:#000;overflow-y:scroll;cursor:default;position:absolute;right:0;left:0;top:0;bottom:0}.xterm .xterm-screen{position:relative}.xterm .xterm-screen canvas{position:absolute;left:0;top:0}.xterm .xterm-scroll-area{visibility:hidden}.xterm-char-measure-element{display:inline-block;visibility:hidden;position:absolute;top:0;left:-9999em;line-height:normal}.xterm.enable-mouse-events{cursor:default}.xterm.xterm-cursor-pointer,.xterm .xterm-cursor-pointer{cursor:pointer}.xterm.column-select.focus{cursor:crosshair}.xterm .xterm-accessibility,.xterm .xterm-message{position:absolute;left:0;top:0;bottom:0;z-index:10;color:transparent}.xterm .live-region{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.xterm-dim{opacity:.5}.xterm-underline-1{text-decoration:underline}.xterm-underline-2{text-decoration:double underline}.xterm-underline-3{text-decoration:wavy underline}.xterm-underline-4{text-decoration:dotted underline}.xterm-underline-5{text-decoration:dashed underline}.xterm-strikethrough{text-decoration:line-through}.xterm-screen .xterm-decoration-container .xterm-decoration{z-index:6;position:absolute}.xterm-decoration-overview-ruler{z-index:7;position:absolute;top:0;right:0;pointer-events:none}.xterm-decoration-top{z-index:2;position:relative} 33 | -------------------------------------------------------------------------------- /playwright.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, devices } from '@playwright/test'; 2 | import * as process from 'process'; 3 | 4 | /** 5 | * Read environment variables from file. 6 | * https://github.com/motdotla/dotenv 7 | */ 8 | // require('dotenv').config(); 9 | 10 | /** 11 | * See https://playwright.dev/docs/test-configuration. 12 | */ 13 | const config = defineConfig({ 14 | testDir: './tests/e2e', 15 | /* Run tests in files in parallel */ 16 | fullyParallel: true, 17 | /* Fail the build on CI if you accidentally left test.only in the source code. */ 18 | forbidOnly: !!process.env.CI, 19 | /* Retry on CI only */ 20 | retries: process.env.CI ? 1 : 0, 21 | /* Opt out of parallel tests on CI. */ 22 | workers: process.env.CI ? 1 : undefined, 23 | /* Reporter to use. See https://playwright.dev/docs/test-reporters */ 24 | reporter: 'html', 25 | snapshotPathTemplate: `{testDir}/__screenshots__/${ 26 | process.env.REMOTE_PROVIDER ?? 'local' 27 | }{/projectName}/{testFilePath}/{arg}{ext}`, 28 | /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ 29 | use: { 30 | /* Base URL to use in actions like `await page.goto('/')`. */ 31 | baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://127.0.0.1:3000', 32 | 33 | /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ 34 | trace: process.env.CI ? 'on-first-retry' : 'on', 35 | screenshot: 'only-on-failure', 36 | }, 37 | 38 | /* Configure projects for major browsers */ 39 | projects: [ 40 | { 41 | name: 'chromium', 42 | use: { ...devices['Desktop Chrome'] }, 43 | }, 44 | // 45 | // { 46 | // name: 'firefox', 47 | // use: { ...devices['Desktop Firefox'] }, 48 | // }, 49 | // 50 | // { 51 | // name: 'webkit', 52 | // use: { ...devices['Desktop Safari'] }, 53 | // }, 54 | 55 | /* Test against mobile viewports. */ 56 | // { 57 | // name: 'Mobile Chrome', 58 | // use: { ...devices['Pixel 5'] }, 59 | // }, 60 | // { 61 | // name: 'Mobile Safari', 62 | // use: { ...devices['iPhone 12'] }, 63 | // }, 64 | 65 | /* Test against branded browsers. */ 66 | // { 67 | // name: 'Microsoft Edge', 68 | // use: { ...devices['Desktop Edge'], channel: 'msedge' }, 69 | // }, 70 | // { 71 | // name: 'Google Chrome', 72 | // use: { ..devices['Desktop Chrome'], channel: 'chrome' }, 73 | // }, 74 | ], 75 | 76 | /* Run your local dev server before starting the tests */ 77 | webServer: process.env.REMOTE_PROVIDER 78 | ? undefined 79 | : { 80 | command: 'yarn start', 81 | url: 'http://127.0.0.1:3000', 82 | }, 83 | }); 84 | 85 | export default config; 86 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: [ 3 | './app/**/*.{js,ts,jsx,tsx}', 4 | './src/**/*.{js,ts,jsx,tsx}', 5 | './components/**/*.{js,ts,jsx,tsx}', 6 | ], 7 | plugins: { 8 | tailwindcss: {}, 9 | autoprefixer: {}, 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /public/images/placeholder.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/public/images/placeholder.jpg -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | './node_modules/flowbite-react/**/*.js', 5 | './app/**/*.{js,ts,jsx,tsx}', 6 | './pages/**/*.{js,ts,jsx,tsx}', 7 | './components/**/*.{js,ts,jsx,tsx}', 8 | ], 9 | theme: { 10 | extend: { 11 | fontSize: { 12 | 12: '12px', 13 | }, 14 | colors: { 15 | 'purple-site': '#8751BD', 16 | 'blue-site': '#2859B6', 17 | }, 18 | keyframes: { 19 | fade: { 20 | '0%': { opacity: 0 }, 21 | '50%': { opacity: 0.5 }, 22 | '100%': { opacity: 1 }, 23 | }, 24 | }, 25 | animation: { 26 | 'fade-in': 'fade 3s ease-in-out', 27 | }, 28 | }, 29 | }, 30 | plugins: [require('flowbite/plugin')], 31 | }; 32 | -------------------------------------------------------------------------------- /test-results/home-Home-Page-look-and-feel---highlights-chromium/trace.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/test-results/home-Home-Page-look-and-feel---highlights-chromium/trace.zip -------------------------------------------------------------------------------- /test-results/home-Home-Page-navigation---Our-Initiatives-navigates-to-Projects-page-chromium/trace.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/test-results/home-Home-Page-navigation---Our-Initiatives-navigates-to-Projects-page-chromium/trace.zip -------------------------------------------------------------------------------- /test-results/news-News-Page-look-and-feel---News-navigates-to-News-Details--chromium/trace.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/test-results/news-News-Page-look-and-feel---News-navigates-to-News-Details--chromium/trace.zip -------------------------------------------------------------------------------- /test-results/news-News-Page-look-and-feel---news-chromium/trace.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/test-results/news-News-Page-look-and-feel---news-chromium/trace.zip -------------------------------------------------------------------------------- /test-results/projects-Projects-Page-look-and-feel---Projects-navigates-to-Project-Details--chromium/trace.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/test-results/projects-Projects-Page-look-and-feel---Projects-navigates-to-Project-Details--chromium/trace.zip -------------------------------------------------------------------------------- /test-results/projects-Projects-Page-look-and-feel---projects-chromium/trace.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/test-results/projects-Projects-Page-look-and-feel---projects-chromium/trace.zip -------------------------------------------------------------------------------- /test-results/team-Team-Page-look-and-feel---team-chromium/trace.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/test-results/team-Team-Page-look-and-feel---team-chromium/trace.zip -------------------------------------------------------------------------------- /tests/e2e/__screenshots__/.gitignore: -------------------------------------------------------------------------------- 1 | # Since each browser version might render a bit differently local run results are not stored in git 2 | /local 3 | -------------------------------------------------------------------------------- /tests/e2e/__screenshots__/netlify/chromium/home.spec.ts/home-highlights.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/tests/e2e/__screenshots__/netlify/chromium/home.spec.ts/home-highlights.png -------------------------------------------------------------------------------- /tests/e2e/__screenshots__/netlify/chromium/news.spec.ts/news-details.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/tests/e2e/__screenshots__/netlify/chromium/news.spec.ts/news-details.png -------------------------------------------------------------------------------- /tests/e2e/__screenshots__/netlify/chromium/news.spec.ts/news-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/tests/e2e/__screenshots__/netlify/chromium/news.spec.ts/news-list.png -------------------------------------------------------------------------------- /tests/e2e/__screenshots__/netlify/chromium/projects.spec.ts/project-details.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/tests/e2e/__screenshots__/netlify/chromium/projects.spec.ts/project-details.png -------------------------------------------------------------------------------- /tests/e2e/__screenshots__/netlify/chromium/projects.spec.ts/project-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/tests/e2e/__screenshots__/netlify/chromium/projects.spec.ts/project-list.png -------------------------------------------------------------------------------- /tests/e2e/__screenshots__/netlify/chromium/team.spec.ts/team-members.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/tests/e2e/__screenshots__/netlify/chromium/team.spec.ts/team-members.png -------------------------------------------------------------------------------- /tests/e2e/__screenshots__/vercel/chromium/home.spec.ts/home-highlights.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/tests/e2e/__screenshots__/vercel/chromium/home.spec.ts/home-highlights.png -------------------------------------------------------------------------------- /tests/e2e/__screenshots__/vercel/chromium/news.spec.ts/news-details.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/tests/e2e/__screenshots__/vercel/chromium/news.spec.ts/news-details.png -------------------------------------------------------------------------------- /tests/e2e/__screenshots__/vercel/chromium/news.spec.ts/news-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/tests/e2e/__screenshots__/vercel/chromium/news.spec.ts/news-list.png -------------------------------------------------------------------------------- /tests/e2e/__screenshots__/vercel/chromium/projects.spec.ts/project-details.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/tests/e2e/__screenshots__/vercel/chromium/projects.spec.ts/project-details.png -------------------------------------------------------------------------------- /tests/e2e/__screenshots__/vercel/chromium/projects.spec.ts/project-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/tests/e2e/__screenshots__/vercel/chromium/projects.spec.ts/project-list.png -------------------------------------------------------------------------------- /tests/e2e/__screenshots__/vercel/chromium/team.spec.ts/team-members.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/wix-cms-nextjs-template/c4f19931e9b51685eed64432e35fe0974e47d9aa/tests/e2e/__screenshots__/vercel/chromium/team.spec.ts/team-members.png -------------------------------------------------------------------------------- /tests/e2e/home.spec.ts: -------------------------------------------------------------------------------- 1 | import { test, expect } from '@playwright/test'; 2 | import testIds from '@app/utils/test-ids'; 3 | 4 | test.describe('Home Page', () => { 5 | const PATH = '/'; 6 | 7 | test('look and feel - highlights', async ({ page }) => { 8 | await page.goto(PATH); 9 | 10 | await expect( 11 | await page.getByTestId(testIds.HOME_PAGE.HIGHLIGHTS) 12 | ).toHaveScreenshot('home-highlights.png', { 13 | mask: [page.getByTestId(testIds.LAYOUT.HEADER)], 14 | }); 15 | }); 16 | 17 | test('navigation - "Our Initiatives" navigates to "Projects" page', async ({ 18 | page, 19 | }) => { 20 | await page.goto(PATH); 21 | 22 | await page.getByTestId(testIds.HOME_PAGE.OUR_INITIATIVES_CTA).click(); 23 | 24 | await expect( 25 | await page.getByTestId(testIds.PROJECTS_PAGE.HEADER) 26 | ).toBeVisible(); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /tests/e2e/news.spec.ts: -------------------------------------------------------------------------------- 1 | import { test, expect } from '@playwright/test'; 2 | import testIds from '@app/utils/test-ids'; 3 | 4 | test.describe('News Page', () => { 5 | const PATH = '/news'; 6 | 7 | test('look and feel - news', async ({ page }) => { 8 | await page.goto(PATH); 9 | 10 | await expect( 11 | await page.getByTestId(testIds.NEWS_PAGE.NEWS_LIST) 12 | ).toHaveScreenshot('news-list.png', { 13 | mask: [page.getByTestId(testIds.LAYOUT.HEADER)], 14 | }); 15 | }); 16 | 17 | test('look and feel - "News" navigates to "News Details"', async ({ 18 | page, 19 | }) => { 20 | await page.goto(PATH); 21 | 22 | await page.getByTestId(testIds.NEWS_PAGE.NEWS_ITEM_CTA).first().click(); 23 | 24 | await expect( 25 | await page.getByTestId(testIds.NEWS_DETAILS_PAGE.CONTAINER) 26 | ).toBeVisible(); 27 | await expect( 28 | await page.getByTestId(testIds.NEWS_DETAILS_PAGE.CONTAINER) 29 | ).toHaveScreenshot('news-details.png', { 30 | mask: [page.getByTestId(testIds.LAYOUT.HEADER)], 31 | }); 32 | }); 33 | }); 34 | -------------------------------------------------------------------------------- /tests/e2e/projects.spec.ts: -------------------------------------------------------------------------------- 1 | import { test, expect } from '@playwright/test'; 2 | import testIds from '@app/utils/test-ids'; 3 | 4 | test.describe('Projects Page', () => { 5 | const PATH = '/projects'; 6 | 7 | test('look and feel - projects', async ({ page }) => { 8 | await page.goto(PATH); 9 | 10 | await expect( 11 | await page.getByTestId(testIds.PROJECTS_PAGE.PROJECT_LIST) 12 | ).toHaveScreenshot('project-list.png', { 13 | mask: [page.getByTestId(testIds.LAYOUT.HEADER)], 14 | }); 15 | }); 16 | 17 | test('look and feel - "Projects" navigates to "Project Details"', async ({ 18 | page, 19 | }) => { 20 | await page.goto(PATH); 21 | 22 | await page 23 | .getByTestId(testIds.PROJECTS_PAGE.PROJECT_ITEM_CTA) 24 | .first() 25 | .click(); 26 | 27 | await expect( 28 | await page.getByTestId(testIds.PROJECT_DETAILS_PAGE.CONTAINER) 29 | ).toBeVisible(); 30 | await expect( 31 | await page.getByTestId(testIds.PROJECT_DETAILS_PAGE.CONTAINER) 32 | ).toHaveScreenshot('project-details.png', { 33 | mask: [page.getByTestId(testIds.LAYOUT.HEADER)], 34 | }); 35 | }); 36 | }); 37 | -------------------------------------------------------------------------------- /tests/e2e/team.spec.ts: -------------------------------------------------------------------------------- 1 | import { test, expect } from '@playwright/test'; 2 | import testIds from '@app/utils/test-ids'; 3 | 4 | test.describe('Team Page', () => { 5 | const PATH = '/team'; 6 | 7 | test('look and feel - team', async ({ page }) => { 8 | await page.goto(PATH); 9 | 10 | await expect( 11 | await page.getByTestId(testIds.TEAM_PAGE.TEAM_MEMBERS) 12 | ).toHaveScreenshot('team-members.png', { 13 | mask: [page.getByTestId(testIds.LAYOUT.HEADER)], 14 | }); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "@statics/*": ["public/*"], 6 | "@app/*": ["app/*"], 7 | "@tests/*": ["tests/*"], 8 | "@api/*": ["src/pages/api/*"] 9 | }, 10 | "target": "es2015", 11 | "lib": ["dom", "dom.iterable", "esnext"], 12 | "allowJs": true, 13 | "skipLibCheck": true, 14 | "strict": true, 15 | "forceConsistentCasingInFileNames": true, 16 | "noEmit": true, 17 | "esModuleInterop": true, 18 | "module": "esnext", 19 | "moduleResolution": "node", 20 | "resolveJsonModule": true, 21 | "isolatedModules": true, 22 | "jsx": "preserve", 23 | "incremental": true, 24 | "plugins": [ 25 | { 26 | "name": "next" 27 | } 28 | ] 29 | }, 30 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 31 | "exclude": ["node_modules"] 32 | } 33 | --------------------------------------------------------------------------------