-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
commit a27efd8 Author: Surgie Finesse <finesserus@gmail.com> Date: Tue Nov 3 20:27:05 2020 +1000 Publish the playground only from the master branch commit 2c38116 Author: Surgie Finesse <finesserus@gmail.com> Date: Tue Nov 3 19:50:56 2020 +1000 Amend the look, fix an HTTPS detection code mistake commit 5eae849 Author: Surgie Finesse <finesserus@gmail.com> Date: Tue Nov 3 15:37:17 2020 +1000 Increase the demo page contrast commit a58e25e Merge: 94bc121 ae52f61 Author: Surgie Finesse <finesserus@gmail.com> Date: Tue Nov 3 00:00:13 2020 +1000 Merge branch 'master' into feature/556-playground # Conflicts: # playground/index.ts commit 94bc121 Author: Surgie Finesse <finesserus@gmail.com> Date: Mon Nov 2 22:55:52 2020 +1000 Fix the shadow commit d790c1d Author: Surgie Finesse <finesserus@gmail.com> Date: Mon Nov 2 22:53:11 2020 +1000 Add an alert that tells why the Share button is disabled commit 6b1b66c Author: Surgie Finesse <finesserus@gmail.com> Date: Mon Nov 2 18:54:43 2020 +1000 Add a favicon commit b782efe Author: Surgie Finesse <finesserus@gmail.com> Date: Mon Nov 2 18:45:41 2020 +1000 Add demo links to the pages commit 02384cf Author: Surgie Finesse <finesserus@gmail.com> Date: Mon Nov 2 18:39:14 2020 +1000 Redesign the playground, show the debug information on the playground commit 5f4a8d9 Author: Surgie Finesse <finesserus@gmail.com> Date: Mon Nov 2 11:06:21 2020 +1000 Beautify the playground distributive file structure commit 98d55db Author: Surgie Finesse <finesserus@gmail.com> Date: Mon Nov 2 10:31:37 2020 +1000 Deploy the playground to GitHub Pages automatically commit 732c2a3 Author: Surgie Finesse <finesserus@gmail.com> Date: Sun Nov 1 22:53:48 2020 +1000 Update Webpack, use the logo image on the playground Webpack 5 is broken, it's too early to update to it
- Loading branch information
Showing
11 changed files
with
395 additions
and
118 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| # Reference on this file: https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions | ||
| # To make it work, go to the repository settings, then Options, GitHub Pages and select `gh-pages` under Source. | ||
| name: Publish the demo | ||
| on: | ||
| push: | ||
| branches: | ||
| - master | ||
| jobs: | ||
| publish: | ||
| name: Publish the demo | ||
| runs-on: ubuntu-latest | ||
| timeout-minutes: 5 | ||
| steps: | ||
| - name: Checkout | ||
| uses: actions/checkout@master | ||
| - name: Install Node packages | ||
| run: yarn install | ||
| - name: Build the demo | ||
| run: yarn playground:build | ||
| - name: Deploy to GitHub Pages | ||
| uses: JamesIves/github-pages-deploy-action@3.7.1 | ||
| with: | ||
| GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} | ||
| BRANCH: gh-pages | ||
| FOLDER: playground/dist | ||
| CLEAN: true | ||
| SINGLE_COMMIT: true | ||
| - name: Print the demo URL | ||
| run: echo "✅ The demo has been deployed to https://$(cut -d'/' -f1 <<< $GITHUB_REPOSITORY).github.io/$(cut -d'/' -f2 <<< $GITHUB_REPOSITORY)/" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,58 +1,146 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <title><%= htmlWebpackPlugin.options.title %></title> | ||
| <link rel="icon" type="image/x-icon" href="<%= require('../resources/favicon.ico').default %>" /> | ||
| <style> | ||
| html, body { | ||
| /* The full-height solution for IE 11 is taken from https://gist.github.com/palicko/26b327cd2198e52c25b13485b4dd02bc */ | ||
| html { | ||
| display: flex; | ||
| min-height: 100%; | ||
| flex: 1; | ||
| } | ||
| body { | ||
| color: #333; | ||
| font-family: sans-serif; | ||
| display: flex; | ||
| flex-direction: column; | ||
| width: 100%; | ||
| min-height: 100vh; | ||
| padding: 0; | ||
| margin: 0; | ||
| font-family: sans-serif; | ||
| } | ||
| .content { | ||
| flex: 1; | ||
| width: 100%; | ||
| max-width: 60em; | ||
| box-sizing: border-box; | ||
| margin: 0 auto; | ||
| padding: 1.25em; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| header { | ||
| flex: none; | ||
| margin-bottom: 1.2vh; | ||
| } | ||
| main { | ||
| margin: auto; | ||
| max-width: 800px; | ||
| padding: 20px; | ||
| header img { | ||
| height: 5vh; | ||
| max-width: 100%; | ||
| } | ||
| button { | ||
| border: none; | ||
| background: #f04405; | ||
| color: #fff; | ||
| font: inherit; | ||
| font-size: 88%; | ||
| font-weight: 600; | ||
| line-height: 1.2; | ||
| border-radius: 0.57em; | ||
| cursor: pointer; | ||
| margin: 0; | ||
| padding: 0.85em 1.7em; | ||
| text-align: center; | ||
| outline: none; | ||
| transition: all 0.25s ease-out; | ||
| } | ||
| button:hover { | ||
| background: #8c2703; | ||
| } | ||
| h1 { | ||
| margin: 0 0 1.3em; | ||
| color: #393e9e; | ||
| button:active { | ||
| background: #cd3f10; | ||
| } | ||
| .visitorIdHeader { | ||
| font-size: 16px; | ||
| color: #999; | ||
| button:disabled { | ||
| cursor: not-allowed; | ||
| background: #e9987c; | ||
| } | ||
| .visitorId { | ||
| font-size: 24px; | ||
| font-weight: 500; | ||
| .buttons { | ||
| flex: none; | ||
| } | ||
| .buttons button { | ||
| margin: 0 0.8em 0.8em 0; | ||
| } | ||
| .outputHolder { | ||
| flex: 1; | ||
| min-height: 4em; | ||
| position: relative; | ||
| } | ||
| .output { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| box-sizing: border-box; | ||
| background: #282c34; | ||
| box-shadow: 0 0 1.25em rgba(0, 0, 0, 0.2); | ||
| border-radius: 0.7em; | ||
| padding: 1em 1.25em; | ||
| color: #e1e5ea; | ||
| overflow: auto; | ||
| } | ||
| .output pre { | ||
| padding: 0; | ||
| margin: 0; | ||
| font-size: 123%; | ||
| font-family: monospace; | ||
| white-space: pre-wrap; | ||
| word-break: break-all; | ||
| } | ||
| .visitorId.loading { | ||
| opacity: 0.3; | ||
| font-family: inherit; | ||
| .output pre.big { | ||
| font-size: 200%; | ||
| } | ||
| .output pre.small { | ||
| font-size: 100%; | ||
| } | ||
| .hint { | ||
| font-size: 14px; | ||
| .output .heading { | ||
| font-size: 81%; | ||
| margin-bottom: 0.5em; | ||
| color: #eac4a6; | ||
| } | ||
| .output .heading:not(:first-child) { | ||
| margin-top: 2em; | ||
| color: #555; | ||
| } | ||
|
|
||
| @media (max-width: 768px), (max-height: 568px) { | ||
| .content { | ||
| padding: 1em; | ||
| } | ||
| button { | ||
| padding: 0.7em 1em; | ||
| } | ||
| .output { | ||
| padding: 0.75em 1em; | ||
| } | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <main> | ||
| <h1>FingerprintJS</h1> | ||
| <div class="visitorIdHeader">Visitor ID:</div> | ||
| <div class="visitorId loading">Getting the visitor ID...</div> | ||
| <div class="hint">See the browser console for debug data.</div> | ||
| </main> | ||
| <div class="content"> | ||
| <header> | ||
| <a href="<%= require('../package.json').homepage %>"> | ||
| <img src="<%= require('../resources/logo.svg').default %>" alt="FingerprintJS"> | ||
| </a> | ||
| </header> | ||
| <div class="buttons"> | ||
| <button disabled id="debugCopy">Copy Debug Data</button> | ||
| <button disabled id="debugShare">Share Debug Data</button> | ||
| </div> | ||
| <div class="outputHolder"> | ||
| <section class="output"> | ||
| <div class="heading">Getting the visitor identifier...</div> | ||
| </section> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,108 @@ | ||
| import 'promise-polyfill/src/polyfill' | ||
| import FingerprintJS from '../src' | ||
| import * as FingerprintJS from '../src' | ||
|
|
||
| async function getVisitorId() { | ||
| async function getVisitorData() { | ||
| const fp = await FingerprintJS.load() | ||
| const result = await fp.get({ debug: true }) | ||
| return result.visitorId | ||
| return await fp.get({ debug: true }) | ||
| } | ||
|
|
||
| async function startPlayground() { | ||
| const display = document.querySelector('.visitorId') | ||
| if (!display) { | ||
| throw new Error("The display element isn't found in the HTML code") | ||
| const output = document.querySelector('.output') | ||
| if (!output) { | ||
| throw new Error("The output element isn't found in the HTML code") | ||
| } | ||
|
|
||
| try { | ||
| const visitorId = await getVisitorId() | ||
| display.textContent = visitorId | ||
| display.classList.remove('loading') | ||
| const startTime = Date.now() | ||
| const { visitorId, components } = await getVisitorData() | ||
| output.innerHTML = '' | ||
| addOutputSection(output, 'Visitor identifier:', visitorId, 'big') | ||
| addOutputSection(output, 'Time took to get the identifier:', `${Date.now() - startTime}ms`) | ||
| addOutputSection(output, 'Entropy components:', FingerprintJS.componentsToDebugString(components), 'small') | ||
| initializeDebugButtons(`${visitorId}: | ||
| \`\`\` | ||
| ${FingerprintJS.componentsToDebugString(components)} | ||
| \`\`\``) | ||
| } catch (error) { | ||
| display.textContent = 'Unexpected error' | ||
| const errorData = { | ||
| message: error.message, | ||
| stack: error.stack.split('\n'), | ||
| ...error, | ||
| } | ||
| output.innerHTML = '' | ||
| addOutputSection(output, 'Unexpected error:', JSON.stringify(errorData, null, 2)) | ||
| initializeDebugButtons(`Unexpected error:\n | ||
| \`\`\` | ||
| ${JSON.stringify(errorData, null, 2)} | ||
| \`\`\``) | ||
| throw error | ||
| } | ||
| } | ||
|
|
||
| function addOutputSection(output: Node, header: string, content: string, size?: 'small' | 'big') { | ||
| const headerElement = document.createElement('div') | ||
| headerElement.classList.add('heading') | ||
| headerElement.textContent = header | ||
| output.appendChild(headerElement) | ||
|
|
||
| const contentElement = document.createElement('pre') | ||
| if (size) { | ||
| contentElement.classList.add(size) | ||
| } | ||
| contentElement.textContent = content | ||
| output.appendChild(contentElement) | ||
| } | ||
|
|
||
| function initializeDebugButtons(debugText: string) { | ||
| const copyButton = document.querySelector('#debugCopy') | ||
| if (copyButton instanceof HTMLButtonElement) { | ||
| copyButton.disabled = false | ||
| copyButton.addEventListener('click', (event) => { | ||
| event.preventDefault() | ||
| copy(debugText) | ||
| }) | ||
| } | ||
|
|
||
| const shareButton = document.querySelector('#debugShare') | ||
| if (shareButton instanceof HTMLButtonElement) { | ||
| shareButton.disabled = false | ||
| shareButton.addEventListener('click', (event) => { | ||
| event.preventDefault() | ||
| share(debugText) | ||
| }) | ||
| } | ||
| } | ||
|
|
||
| function copy(text: string) { | ||
| const textarea = document.createElement('textarea') | ||
| textarea.value = text | ||
| document.body.appendChild(textarea) | ||
| textarea.focus() | ||
| textarea.select() | ||
| try { | ||
| document.execCommand('copy') | ||
| } catch { | ||
| // Do nothing in case of a copying error | ||
| } | ||
| document.body.removeChild(textarea) | ||
| } | ||
|
|
||
| async function share(text: string) { | ||
| if (!navigator.share) { | ||
| alert(`Sharing is unavailable. | ||
| Sharing is available in mobile browsers and only on HTTPS websites. ${ | ||
| location.protocol === 'https:' | ||
| ? 'Use a mobile device or the Copy button instead.' | ||
| : `Open https://${location.host}${location.pathname}${location.search} instead.` | ||
| }`) | ||
| return | ||
| } | ||
| try { | ||
| await navigator.share({ text }) | ||
| } catch { | ||
| // Do nothing in case of a share abort | ||
| } | ||
| } | ||
|
|
||
| startPlayground() |
Oops, something went wrong.