diff --git a/app/assets/stylesheets/components/_terminal.scss b/app/assets/stylesheets/components/_terminal.scss index 74e926d..1bca699 100644 --- a/app/assets/stylesheets/components/_terminal.scss +++ b/app/assets/stylesheets/components/_terminal.scss @@ -38,9 +38,25 @@ pre { margin: 0; - overflow-x: auto; padding: .875rem 1rem; + // Wrap, do not scroll. + // + // This block sits in a one-third column on /get-started and the ipctool + // URL is longer than the column is wide, so overflow-x: auto ended the + // visible line at "https://github.com/OpenI" and put the rest behind a + // horizontal scrollbar -- which most systems do not draw until you touch + // it, so there was nothing to suggest the command continued at all. + // + // The command being clipped is one a reader is about to paste into a root + // shell on their camera. Being able to read it to the end before running + // it is the whole point of showing it rather than just linking a script. + white-space: pre-wrap; + // Break inside the URL when there is nowhere else to break. `anywhere` + // rather than `break-all`, so ordinary prose still breaks at spaces and + // only an unbreakable token is split. + overflow-wrap: anywhere; + code { color: inherit; font-size: .875rem; diff --git a/app/javascript/src/copy.js b/app/javascript/src/copy.js index 7035b4b..21fa882 100644 --- a/app/javascript/src/copy.js +++ b/app/javascript/src/copy.js @@ -7,7 +7,12 @@ export default function initCopy() { const source = document.querySelector(btn.dataset.copyTarget) if (!source) return - navigator.clipboard.writeText(source.innerText.trim()).then(() => { + // textContent, not innerText. innerText is the *rendered* text, so with the + // terminal block now soft-wrapping a long URL there is no guarantee an + // engine will not fold those visual breaks into the string. textContent is + // the markup's own text: exactly the command, with only the newlines that + // were actually written. + navigator.clipboard.writeText(source.textContent.trim()).then(() => { const icon = btn.querySelector('i') || btn const original = icon.className icon.className = 'bi bi-check-lg' diff --git a/app/views/pages/get_started.html.erb b/app/views/pages/get_started.html.erb index 8490a2c..9e9a5b9 100644 --- a/app/views/pages/get_started.html.erb +++ b/app/views/pages/get_started.html.erb @@ -9,8 +9,6 @@
<%= t('.step1_text_html') %>
- <%= render 'shared/terminal', id: 'ipctool-cmd', title: 'camera shell', - code: "curl -L -o /tmp/ipctool https://github.com/OpenIPC/ipctool/releases/download/latest/ipctool\nchmod +x /tmp/ipctool && /tmp/ipctool" %>