diff --git a/github-chat.css b/github-chat.css new file mode 100644 index 0000000..2d84918 --- /dev/null +++ b/github-chat.css @@ -0,0 +1,105 @@ +#github-chat-extension-root { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + position: fixed; + right: 20px; + bottom: 20px; + z-index: 2147483647; +} + +.github-chat-toggle { + align-items: center; + background: #2da44e; + border: 1px solid rgba(27, 31, 36, 0.15); + border-radius: 999px; + box-shadow: 0 8px 24px rgba(27, 31, 36, 0.22); + color: #ffffff; + cursor: pointer; + display: inline-flex; + font-size: 14px; + font-weight: 600; + min-height: 44px; + padding: 0 18px; +} + +.github-chat-toggle:hover { + background: #2c974b; +} + +.github-chat-panel { + background: #ffffff; + border: 1px solid #d0d7de; + border-radius: 8px; + bottom: 58px; + box-shadow: 0 16px 48px rgba(27, 31, 36, 0.28); + display: flex; + flex-direction: column; + height: min(620px, calc(100vh - 96px)); + overflow: hidden; + position: absolute; + right: 0; + width: min(420px, calc(100vw - 32px)); +} + +.github-chat-panel[hidden] { + display: none; +} + +.github-chat-header { + align-items: center; + background: #f6f8fa; + border-bottom: 1px solid #d0d7de; + display: flex; + justify-content: space-between; + min-height: 52px; + padding: 10px 12px; +} + +.github-chat-header strong, +.github-chat-header span { + display: block; +} + +.github-chat-header span { + color: #57606a; + font-size: 12px; + margin-top: 2px; + max-width: 320px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.github-chat-close { + background: transparent; + border: 0; + color: #57606a; + cursor: pointer; + font-size: 24px; + height: 32px; + line-height: 1; + padding: 0; + width: 32px; +} + +.github-chat-close:hover { + color: #24292f; +} + +.github-chat-frame { + border: 0; + flex: 1; + width: 100%; +} + +@media (max-width: 520px) { + #github-chat-extension-root { + bottom: 12px; + right: 12px; + } + + .github-chat-panel { + bottom: 56px; + height: min(620px, calc(100vh - 80px)); + width: calc(100vw - 24px); + } +} diff --git a/github-chat.js b/github-chat.js new file mode 100644 index 0000000..92e5b59 --- /dev/null +++ b/github-chat.js @@ -0,0 +1,96 @@ +(function () { + const CHAT_APP_URL = 'https://inquid.github.io/github-chat/'; + const ROOT_ID = 'github-chat-extension-root'; + + function getRepositoryFromPath() { + const parts = window.location.pathname.split('/').filter(Boolean); + if (parts.length < 2) return ''; + return `${parts[0]}/${parts[1]}`; + } + + function createChatUrl() { + const url = new URL(CHAT_APP_URL); + const repository = getRepositoryFromPath(); + + if (repository) { + url.searchParams.set('repository', repository); + } + + url.searchParams.set('page', window.location.href); + return url.toString(); + } + + function createChatRoot() { + const root = document.createElement('div'); + root.id = ROOT_ID; + root.innerHTML = ` + + + `; + + document.body.appendChild(root); + return root; + } + + function initGithubChat() { + if (document.getElementById(ROOT_ID)) return; + + const root = createChatRoot(); + const toggle = root.querySelector('.github-chat-toggle'); + const panel = root.querySelector('.github-chat-panel'); + const close = root.querySelector('.github-chat-close'); + + function setOpen(isOpen) { + panel.hidden = !isOpen; + toggle.setAttribute('aria-expanded', String(isOpen)); + } + + toggle.addEventListener('click', function () { + setOpen(panel.hidden); + }); + + close.addEventListener('click', function () { + setOpen(false); + }); + + document.addEventListener('keydown', function (event) { + if (event.key === 'Escape' && !panel.hidden) { + setOpen(false); + } + }); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initGithubChat); + } else { + initGithubChat(); + } +})(); diff --git a/manifest.json b/manifest.json index db0a183..c05de99 100644 --- a/manifest.json +++ b/manifest.json @@ -17,16 +17,17 @@ "content_scripts": [ { "matches": [ - "https://github.com/", - "https://github.com/orgs/*" - ], - "js": [ - "content-script.js" - ], - "css": [ - "story-list.css", - "story-view.css" - ] + "https://github.com/*" +], +"js": [ + "content-script.js", + "github-chat.js" +], +"css": [ + "story-list.css", + "story-view.css", + "github-chat.css" +] } ], "icons": {