-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsrc.77de5100.js.map
1 lines (1 loc) · 14.7 KB
/
src.77de5100.js.map
1
{"version":3,"sources":["preferred-theme.ts","configuration-component.ts","index.ts"],"names":[],"mappings":"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","file":"src.77de5100.js","sourceRoot":"..\\src","sourcesContent":["export const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches\r\n ? 'github-dark'\r\n : 'github-light';\r\n\r\nexport const preferredThemeId = 'preferred-color-scheme';","import { preferredThemeId, preferredTheme } from './preferred-theme';\r\n\r\nexport class ConfigurationComponent {\r\n public readonly element: HTMLFormElement;\r\n private readonly script: HTMLDivElement;\r\n private readonly repo: HTMLInputElement;\r\n private readonly label: HTMLInputElement;\r\n private readonly theme: HTMLSelectElement;\r\n\r\n constructor() {\r\n this.element = document.createElement('form');\r\n this.element.innerHTML = `\r\n <h3 id=\"heading-repository\">Repository</h3>\r\n <p>\r\n Choose the repository utterances will connect to.\r\n </p>\r\n <ol>\r\n <li>Make sure the repo is public, otherwise your readers will not be able to view the issues/comments.</li>\r\n <li>Make sure the <a href=\"https://github.com/apps/utterances\">utterances app</a>\r\n is installed on the repo, otherwise users will not be able to post comments.\r\n </li>\r\n <li>If your repo is a fork, navigate to its <em>settings</em> tab and confirm\r\n the <em>issues</em> feature is turned on. </li>\r\n </ol>\r\n <fieldset>\r\n <div>\r\n <label for=\"repo\">repo:</label><br/>\r\n <input id=\"repo\" class=\"form-control\" type=\"text\" placeholder=\"owner/repo\">\r\n <p class=\"note\">\r\n A <strong>public</strong> GitHub repository. This is where the blog\r\n post issues and issue-comments will be posted.\r\n </p>\r\n </div>\r\n </fieldset>\r\n\r\n <h3 id=\"heading-mapping\">Blog Post ↔️ Issue Mapping</h3>\r\n <p>Choose the mapping between blog posts and GitHub issues.</p>\r\n <fieldset>\r\n <div class=\"form-checkbox\">\r\n <label>\r\n <input type=\"radio\" value=\"pathname\" name=\"mapping\" checked=\"checked\">\r\n Issue title contains page pathname\r\n <p class=\"note\">\r\n Utterances will search for an issue whose title contains the blog post's pathname\r\n URL component. If a matching issue is not found, Utterances will automatically\r\n create one the first time someone comments on your post.\r\n </p>\r\n </label>\r\n </div>\r\n <div class=\"form-checkbox\">\r\n <label>\r\n <input type=\"radio\" value=\"url\" name=\"mapping\">\r\n Issue title contains page URL\r\n <p class=\"note\">\r\n Utterances will search for an issue whose title contains the blog post's URL.\r\n If a matching issue is not found, Utterances will automatically create one the first\r\n time someone comments on your post.\r\n </p>\r\n </label>\r\n </div>\r\n <div class=\"form-checkbox\">\r\n <label>\r\n <input type=\"radio\" value=\"title\" name=\"mapping\">\r\n Issue title contains page title\r\n <p class=\"note\">\r\n Utterances will search for an issue whose title contains the blog post's title.\r\n If a matching issue is not found, Utterances will automatically create one the first\r\n time someone comments on your post.\r\n </p>\r\n </label>\r\n </div>\r\n <div class=\"form-checkbox\">\r\n <label>\r\n <input type=\"radio\" value=\"og:title\" name=\"mapping\">\r\n Issue title contains page og:title\r\n <p class=\"note\">\r\n Utterances will search for an issue whose title contains the page's\r\n <a href=\"http://ogp.me/\">Open Graph</a> title meta.\r\n If a matching issue is not found, Utterances will automatically create one the first\r\n time someone comments on your post.\r\n </p>\r\n </label>\r\n </div>\r\n <div class=\"form-checkbox\">\r\n <label>\r\n <input type=\"radio\" value=\"issue-number\" name=\"mapping\">\r\n Specific issue number\r\n <p class=\"note\">\r\n You configure Utterances to load a specific issue by number. Issues are not automatically\r\n created.\r\n </p>\r\n </label>\r\n </div>\r\n <div class=\"form-checkbox\">\r\n <label>\r\n <input type=\"radio\" value=\"specific-term\" name=\"mapping\">\r\n Issue title contains specific term\r\n <p class=\"note\">\r\n You configure Utterances to search for an issue whose title contains a specific term of your choosing.\r\n If a matching issue is not found, Utterances will automatically create one the first\r\n time someone comments on your post. The issue's title will be the term you chose.\r\n </p>\r\n </label>\r\n </div>\r\n </fieldset>\r\n\r\n <h3 id=\"heading-issue-label\">Issue Label</h3>\r\n <p>\r\n Choose the label that will be assigned to issues created by Utterances.\r\n </p>\r\n <fieldset>\r\n <div>\r\n <label for=\"label\">label (optional):</label><br/>\r\n <input id=\"label\" class=\"form-control\" type=\"text\" placeholder=\"Comment\">\r\n <p class=\"note\">\r\n Label names are case sensitive.\r\n The label must exist in your repo-\r\n Utterances cannot attach labels that do not exist.\r\n Emoji are supported in label names.✨💬✨\r\n </p>\r\n </div>\r\n </fieldset>\r\n\r\n <h3 id=\"heading-theme\">Theme</h3>\r\n <p>\r\n Choose an Utterances theme that matches your blog.\r\n Can't find a theme you like?\r\n <a href=\"https://github.com/utterance/utterances/blob/master/CONTRIBUTING.md\">Contribute</a> a custom theme.\r\n </p>\r\n\r\n <select id=\"theme\" class=\"form-select\" value=\"github-light\" aria-label=\"Theme\">\r\n <option value=\"github-light\">GitHub Light</option>\r\n <option value=\"github-dark\">GitHub Dark</option>\r\n <option value=\"preferred-color-scheme\">Preferred Color Scheme</option>\r\n <option value=\"github-dark-orange\">GitHub Dark Orange</option>\r\n <option value=\"icy-dark\">Icy Dark</option>\r\n <option value=\"dark-blue\">Dark Blue</option>\r\n <option value=\"photon-dark\">Photon Dark</option>\r\n </select>\r\n\r\n <h3 id=\"heading-enable\">Enable Utterances</h3>\r\n\r\n <p>Add the following script tag to your blog's template. Position it where you want the\r\n comments to appear. Customize the layout using the <code>.utterances</code> and\r\n <code>.utterances-frame</code> selectors.\r\n </p>\r\n <div class=\"config-field\" id=\"script\" class=\"highlight highlight-text-html-basic\"></div>\r\n <button id=\"copy-button\" type=\"button\" class=\"btn btn-blue code-action\">Copy</button>\r\n <br/>\r\n <br/>`;\r\n\r\n this.element.addEventListener('submit', event => event.preventDefault());\r\n this.element.action = 'javascript:';\r\n\r\n this.script = this.element.querySelector('#script') as HTMLDivElement;\r\n\r\n this.repo = this.element.querySelector('#repo') as HTMLInputElement;\r\n\r\n this.label = this.element.querySelector('#label') as HTMLInputElement;\r\n\r\n this.theme = this.element.querySelector('#theme') as HTMLSelectElement;\r\n\r\n const themeStylesheet = document.getElementById('theme-stylesheet') as HTMLLinkElement;\r\n this.theme.addEventListener('change', () => {\r\n let theme = this.theme.value;\r\n if (theme === preferredThemeId) {\r\n theme = preferredTheme\r\n }\r\n themeStylesheet.href = `/stylesheets/themes/${theme}/index.css`;\r\n const message = {\r\n type: 'set-theme',\r\n theme\r\n };\r\n const utterances = document.querySelector('iframe')!;\r\n utterances.contentWindow!.postMessage(message, location.origin);\r\n });\r\n\r\n const copyButton = this.element.querySelector('#copy-button') as HTMLButtonElement;\r\n copyButton.addEventListener(\r\n 'click',\r\n () => this.copyTextToClipboard(this.script.textContent as string));\r\n\r\n this.element.addEventListener('change', () => this.outputConfig());\r\n this.element.addEventListener('input', () => this.outputConfig());\r\n this.outputConfig();\r\n }\r\n\r\n private outputConfig() {\r\n const mapping = this.element.querySelector('input[name=\"mapping\"]:checked') as HTMLInputElement;\r\n let mappingAttr: string;\r\n // tslint:disable-next-line:prefer-conditional-expression\r\n if (mapping.value === 'issue-number') {\r\n mappingAttr = this.makeConfigScriptAttribute('issue-number', '[ENTER ISSUE NUMBER HERE]');\r\n } else if (mapping.value === 'specific-term') {\r\n mappingAttr = this.makeConfigScriptAttribute('issue-term', '[ENTER TERM HERE]');\r\n } else {\r\n mappingAttr = this.makeConfigScriptAttribute('issue-term', mapping.value);\r\n }\r\n this.script.innerHTML = this.makeConfigScript(\r\n this.makeConfigScriptAttribute('repo', this.repo.value === '' ? '[ENTER REPO HERE]' : this.repo.value) + '\\n' +\r\n mappingAttr + '\\n' +\r\n (this.label.value ? this.makeConfigScriptAttribute('label', this.label.value) + '\\n' : '') +\r\n this.makeConfigScriptAttribute('theme', this.theme.value) + '\\n' +\r\n this.makeConfigScriptAttribute('crossorigin', 'anonymous') + '\\n' +\r\n this.makeConfigScriptAttribute('autocreate', 'true'));\r\n }\r\n\r\n private makeConfigScriptAttribute(name: string, value: string) {\r\n // tslint:disable-next-line:max-line-length\r\n return `<span class=\"pl-s1\"> <span class=\"pl-e\">${name}</span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"</span>${value}<span class=\"pl-pds\">\"</span></span></span>`;\r\n }\r\n\r\n private makeConfigScript(attrs: string) {\r\n // tslint:disable-next-line:max-line-length\r\n return `<pre><span class=\"pl-s1\"><<span class=\"pl-ent\">script</span> <span class=\"pl-e\">src</span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"</span>https://utteranc.es/client.js<span class=\"pl-pds\">\"</span></span></span>\\n${attrs}\\n<span class=\"pl-s1\"> <span class=\"pl-e\">async</span>></span>\\n<span class=\"pl-s1\"></<span class=\"pl-ent\">script</span>></span></pre>`;\r\n }\r\n\r\n private copyTextToClipboard(text: string) {\r\n const textArea = document.createElement('textarea');\r\n // tslint:disable-next-line:max-line-length\r\n textArea.style.cssText = `position:fixed;top:0;left:0;width:2em;height:2em;padding:0;border:none;outline:none;box-shadow:none;background:transparent`;\r\n textArea.value = text;\r\n document.body.appendChild(textArea);\r\n textArea.select();\r\n try {\r\n document.execCommand('copy');\r\n // tslint:disable-next-line:no-empty\r\n } catch (err) { }\r\n document.body.removeChild(textArea);\r\n }\r\n}\r\n","import { ConfigurationComponent } from './configuration-component';\r\n\r\ndocument.querySelector('h2#configuration')!\r\n .insertAdjacentElement('afterend', new ConfigurationComponent().element);\r\n"]}