diff options
| -rw-r--r-- | api/routes/github.js | 9 | ||||
| -rw-r--r-- | api/services/github/files.js | 17 | ||||
| -rw-r--r-- | api/services/github/index.js | 2 | ||||
| -rw-r--r-- | application/components/app.vue | 42 | ||||
| -rw-r--r-- | application/github.js | 11 |
5 files changed, 73 insertions, 8 deletions
diff --git a/api/routes/github.js b/api/routes/github.js index 19d87ad..9594b5c 100644 --- a/api/routes/github.js +++ b/api/routes/github.js @@ -10,7 +10,8 @@ const { fetchKeyboardFiles, createOauthFlowUrl, createOauthReturnUrl, - commitChanges + commitChanges, + InvalidRepoError, } = require('../services/github') const { parseKeymap } = require('../services/zmk/keymap') @@ -88,6 +89,12 @@ const getKeyboardFiles = async (req, res, next) => { keyboardFiles.keymap = parseKeymap(keyboardFiles.keymap) res.json(keyboardFiles) } catch (err) { + if (err instanceof InvalidRepoError) { + return res.status(400).json({ + error: 'InvalidRepoError' + }) + } + next(err) } } diff --git a/api/services/github/files.js b/api/services/github/files.js index 5f5837f..40bcb41 100644 --- a/api/services/github/files.js +++ b/api/services/github/files.js @@ -4,12 +4,22 @@ const zmk = require('../zmk') const MODE_FILE = '100644' +class InvalidRepoError extends Error {} + async function fetchKeyboardFiles (installationId, repository) { const { data: { token: installationToken } } = await auth.createInstallationToken(installationId) - const { data: info } = await fetchFile(installationToken, repository, 'config/info.json', true) - const { data: keymap } = await fetchFile(installationToken, repository, 'config/keymap.json', true) + try { + const { data: info } = await fetchFile(installationToken, repository, 'config/info.json', true) + const { data: keymap } = await fetchFile(installationToken, repository, 'config/keymap.json', true) + + return { info, keymap } + } catch (err) { + if (err.response && err.response.status === 404) { + throw new InvalidRepoError() + } - return { info, keymap } + throw err + } } function fetchFile (installationToken, repository, path, raw = false) { @@ -76,6 +86,7 @@ async function commitChanges (installationId, repository, layout, keymap) { } module.exports = { + InvalidRepoError, fetchKeyboardFiles, commitChanges } diff --git a/api/services/github/index.js b/api/services/github/index.js index 34a0654..8443dd7 100644 --- a/api/services/github/index.js +++ b/api/services/github/index.js @@ -13,6 +13,7 @@ const { } = require('./installations') const { + InvalidRepoError, fetchKeyboardFiles, commitChanges } = require('./files') @@ -26,6 +27,7 @@ module.exports = { verifyUserToken, fetchInstallation, fetchInstallationRepos, + InvalidRepoError, fetchKeyboardFiles, commitChanges } diff --git a/application/components/app.vue b/application/components/app.vue index 80a14d4..6aed63d 100644 --- a/application/components/app.vue +++ b/application/components/app.vue @@ -36,6 +36,7 @@ export default { behaviours: [], indexedBehaviours: {}, tooManyRepos: false, + loadKeyboardError: null, keymap: {}, layout: [], layers: [], @@ -57,7 +58,13 @@ export default { } const loadKeyboardData = async () => { if (config.enableGitHub && github.isGitHubAuthorized()) { - return github.fetchLayoutAndKeymap() + const response = await github.fetchLayoutAndKeymap() + if (response.error) { + this.loadKeyboardError = response.error + return { layout: [], keymap: { layers: [] } } + } + + return response } else if (config.enableLocal) { const [layout, keymap] = await Promise.all([ loadLayout(), @@ -113,7 +120,6 @@ export default { }) }, getInstallationUrl() { - console.log(github.installation, github.repositories, github) return `https://github.com/settings/installations/${github.installation.id}` }, async doReadyCheck() { @@ -139,6 +145,19 @@ export default { </div> </modal> </div> + <div v-else-if="loadKeyboardError === 'InvalidRepoError'"> + <modal> + <div class="dialog"> + <h2>Hold up a second!</h2> + <p>The selected repository does not contain <code>info.json</code> or <code>keymap.json</code>.</p> + <p> + This app depends on some additional metadata to render the keymap. + For an example repository ready to use now or metadata you can apply + to your own keyboard repo, have a look at <a href="https://github.com/nickcoutsos/zmk-config-corne-demo/">zmk-config-corne-demo</a>. + </p> + </div> + </modal> + </div> <template v-else> <keymap :layout="layout" :keymap="editingKeymap.keyboard ? editingKeymap : keymap" @update="handleUpdateKeymap" /> <div id="actions"> @@ -164,6 +183,9 @@ export default { /> </div> </template> + <a class="github-link" href="https://github.com/nickcoutsos/keymap-editor"> + <i class="fab fa-github" />/nickcoutsos/keymap-editor + </a> </loader> </template> @@ -192,4 +214,20 @@ button[disabled] { max-width: 500px; } +.github-link { + display: inline-block; + position: absolute; + z-index: 100; + bottom: 5px; + left: 5px; + font-size: 110%; + font-style: italic; + background-color: white; + border-radius: 20px; + padding: 5px 10px; + text-decoration: none; + + color: royalblue; +} + </style> diff --git a/application/github.js b/application/github.js index 5a06f54..08fd664 100644 --- a/application/github.js +++ b/application/github.js @@ -48,10 +48,17 @@ export function isGitHubAuthorized() { } export async function fetchLayoutAndKeymap() { - const data = await request( + const response = await request( `${config.apiBaseUrl}/github/keyboard-files/${encodeURIComponent(installation.id)}/${encodeURIComponent(repositories[0].full_name)}`, { headers: { Authorization: `Bearer ${localStorage.auth_token}`} } - ).then(res => res.json()) + ) + + if (response.status === 400) { + console.error('Failed to load keymap and layout from github') + return response.json() + } + + const data = await response.json() const defaultLayout = data.info.layouts.default || data.info.layouts[Object.keys(data.info.layouts)[0]] return { layout: defaultLayout.layout, |