{"id":14971243,"url":"https://github.com/psmb/typo-reporter","last_synced_at":"2025-10-26T14:31:39.101Z","repository":{"id":55454472,"uuid":"81433885","full_name":"psmb/typo-reporter","owner":"psmb","description":"Report typos on a web page","archived":false,"fork":false,"pushed_at":"2017-02-14T15:37:48.000Z","size":126,"stargazers_count":19,"open_issues_count":2,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-31T20:55:52.553Z","etag":null,"topics":["codeceptjs","javascript","nightmarejs","spellcheck","yarn"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/psmb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-09T09:37:00.000Z","updated_at":"2024-09-06T06:57:36.000Z","dependencies_parsed_at":"2022-08-15T00:40:17.877Z","dependency_job_id":null,"html_url":"https://github.com/psmb/typo-reporter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psmb%2Ftypo-reporter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psmb%2Ftypo-reporter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psmb%2Ftypo-reporter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psmb%2Ftypo-reporter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/psmb","download_url":"https://codeload.github.com/psmb/typo-reporter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238347872,"owners_count":19457009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codeceptjs","javascript","nightmarejs","spellcheck","yarn"],"created_at":"2024-09-24T13:44:54.895Z","updated_at":"2025-10-26T14:31:38.730Z","avatar_url":"https://github.com/psmb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![CircleCI](https://img.shields.io/circleci/project/github/psmb/typo-reporter.svg)](https://circleci.com/gh/psmb/typo-reporter/tree/master)\n[![npm](https://img.shields.io/npm/v/typo-reporter.svg)](https://www.npmjs.com/package/typo-reporter)\n\n# Description\n\nThis JS script allows your website visitors to easily report mistakes and typos on your website by selecting some text with a mistake and clicking `ctrl+enter`. The error reports would be gathered to a Google Forms Spreadsheet.\n\n![demo](https://github.com/psmb/typo-reporter/blob/master/demo.gif)\n\n# Installation\n\n## Get the script\n\nThe package is built in UMD format, so you can include it both as a link tag or consume it in JS.\n\n### Install via npm\n\n```\nnpm install --save typo-reporter\n```\n\n### Install via plain old html tag\n\n```\n\u003cscript src=\"https://npmcdn.com/typo-reporter@0.1.0/lib/TypoReporter.min.js\"\u003e\u003c/script\u003e\n```\n## Create a target Google Form to gather feedback\n\nCreate a copy of this spreadsheet: https://docs.google.com/spreadsheets/d/1R5z4waXhx4VsCgkfhZHP_Rvpf6VWQqwmqzpqeulwws8/copy\n\nRename it to whatever you like. You can subscribe to email notifications in `Tools -\u003e Notification rules`.\n\nNow go to `Form -\u003e Edit form` and note the id of the cloned form. You would need it at the next step.\n\n## Init the plugin\n\nConfiguration example:\n\n```\n  var rootNode = document.createElement('div');\n  document.body.appendChild(rootNode);\n  var typo = new TypoReporter({\n    formId: '1FAIpQLWd4bAaZYLlY38abAVosRCuZw9jJpe18sXK522IyftFYQdkvkg', // required, see previous step\n\n    // Optional example stuff below\n    locale: 'fr', // optional language, defaults to 'en'\n    translations: { // optinal object with translated strings\n      fr: {\n        // see source code for keys to translate\n      }\n    },\n    offset: 100, // amount of context text to grab from before and after the selection, defaults to 50\n    endpointUrl: 'https://custom-endpoint-url', // optional, defaults to Google Forms\n    snippetFieldName: 'entry.13240190', // optional, if using custom form\n    commentFieldName: 'entry.1447231081', // optional, if using custom form\n    urlFieldName: 'entry.238687347' // optional, if using custom form\n  }, rootNode);\n```\n\nCheck out the [demo.html]('https://github.com/psmb/typo-reporter/blob/master/demo.html') for an example integration.\n\n## Add styles\n\nYou should add your own styles for the dialog. They may look somehow like this:\n\n```\n.ReportTypo {font-family: sans; position: fixed; margin: auto; padding: 12px; top: 30%; left: 0; right: 0; max-width: 480px; background: #d7d7d7; border: 1px solid #aaa;}\n.ReportTypo-message {font-family: mono; width: 100%; height: 50px; margin: 12px 0;}\n.ReportTypo-comment {display: block; width: 100%; height: 100px;}\n.ReportTypo-header {font-size: 21px; font-weight: bold;}\n.ReportTypo-label {margin: 12px 0 6px 0;}\n.ReportTypo-heighlight {color: red; font-weight: bold; text-decoration: underline;}\n```\n\n## Add some hint text for users to submit errors\n\nA website editor can report errors now but selecting some text on a page and pressing `ctrl+enter`. You can add some small hinting banner somehwere below in the footer to tell them about that.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpsmb%2Ftypo-reporter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpsmb%2Ftypo-reporter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpsmb%2Ftypo-reporter/lists"}