From b7f136962a2bec5ce741f4ecbfe6d55da9a55570 Mon Sep 17 00:00:00 2001 From: Kovid Goyal Date: Wed, 31 May 2023 21:25:56 +0530 Subject: [PATCH] Move the timestamp data into the rst file Also get rid of the custom styling for the timestamp list --- docs/_static/timestamps.css | 99 ++------------------- docs/_static/timestamps.js | 168 ++---------------------------------- docs/index.rst | 65 +++++++++++++- 3 files changed, 75 insertions(+), 257 deletions(-) diff --git a/docs/_static/timestamps.css b/docs/_static/timestamps.css index 752d1595d..4bf38e134 100644 --- a/docs/_static/timestamps.css +++ b/docs/_static/timestamps.css @@ -1,99 +1,12 @@ -:root { - --border-radius: 5.5px; -} - -body[data-theme="dark"] { ---kbd-bg: #ed9d13; ---code-bg: #3c3c3c; ---code-fg: var(--kbd-bg); ---span-fg: #a6aaa7; -} - -body[data-theme="light"] { ---kbd-bg: #ed9d13; ---code-bg: #3c3c3c; ---code-fg: #ffffff; ---code-bg: #888888; -} - -* { - box-sizing: border-box; -} - -#timestamps { - font-family: inherit; - width: 100%; +.timestamp-list dl { display: grid; - max-width: 900px; - grid-auto-rows: 2rem; - line-height: 1.2; - font-size: 16px; + grid-template-columns: max-content auto; } -#timestamps .row { - display: flex; - align-items: center; - gap: 1rem .5rem; +.timestamp-list dt { + grid-column-start: 1; } -#timestamps time:hover { - text-decoration: underline; - padding-bottom: .2rem; -} -#timestamps time { - color: var(--color-link); -} -#timestamps time:hover { - cursor:pointer; -} -#timestamps time:focus { - text-decoration: underline; -} -#timestamps span { - margin: 0; -} -#timestamps p { - margin: 0.5rem; - line-height: 1.2; - display: flex; - align-items: center; -} -#timestamps kbd { - border-radius: var(--border-radius); - padding: .2rem; - padding-top: 0.4rem; - background: var(--kbd-bg); - color: black; - font-size: 0.9rem; - display: flex; - align-items: center; - justify-content: center; - border: none; - box-shadow: none; -} -@-moz-document url-prefix() { - #timestamps kbd { - padding: 0.2rem; - } -} - -#timestamps span { - color: var(--tabs--label-text); -} -#timestamps strong { - font-weight: normal; - min-width: max-content; -} -#timestamps code { - background: var(--code-bg); - color: var(--code-fg); - padding: 0.2rem 0.3rem; - margin-left: .2rem; - border-radius: var(--border-radius); - min-width: max-content; - font-size: 0.9rem; - display: grid; - place-items: center; - padding-top: 0.4rem; - +.timestamp-list dd { + grid-column-start: 2; } diff --git a/docs/_static/timestamps.js b/docs/_static/timestamps.js index 25128bbcc..2e8f08253 100644 --- a/docs/_static/timestamps.js +++ b/docs/_static/timestamps.js @@ -1,129 +1,21 @@ /*jshint esversion: 6 */ (function() { -var data = [ - { - time: "00:00", - description: "Intro" - }, - { - time: "00:39", - description: "Pager: View command output in same window: Ctrl+Shift+g" - }, - { - time: "01:43", - description: "Pager: View command output in a separate window" - }, - { - time: "02:14", - description: "Pager: Uses shell integration in kitty" - }, - { - time: "02:27", - description: "Tab text: The output of cwd and last cmd " - }, - { - time: "03:03", - description: "Open files from ls output with mouse: Ctrl+Shift+Right-click" - }, - { - time: "04:04", - description: "Open files from ls output with keyboard: Ctrl+Shift+P>y" - }, - { - time: "04:26", - description: "Open files on click: ls --hyperlink=auto" - }, - { - time: "05:03", - description: "Open files on click: Filetype settings in open-actions.conf" - }, - { - time: "05:45", - description: "hyperlinked-grep kitten: Open grep output in editor" - }, - { - time: "07:18", - description: "Remote-file kitten: View remote files locally" - }, - { - time: "08:31", - description: "Remote-file kitten: Edit remote files locally" - }, - { - time: "10:01", - description: "icat kitten: View images directly" - }, - { - time: "10:36", - description: "icat kitten: Download & display image/gif from internet" - }, - { - time: "11:03", - description: "Kitty Graphics Protocol: Live image preview in ranger" - }, - { - time: "11:25", - description: "icat kitten: Display image from remote server" - }, - { - time: "12:04", - description: "unicode-input kitten: Emojis in terminal " - }, - { - time: "12:54", - description: "Windows: Intro" - }, - { - time: "13:36", - description: "Windows: Switch focus: Ctrl+Shift+<win_nr>" - }, - { - time: "13:48", - description: "Windows: Visual selection: Ctrl+Shift+F7" - }, - { - time: "13:58", - description: "Windows: Simultaneous input" - }, - { - time: "14:15", - description: "Interactive Kitty Shell: Ctrl+Shift+Esc" - }, - { - time: "14:36", - description: "Broadcast text: launch --allow-remote-control kitty +kitten broadcast" - }, - { - time: "15:18", - description: "Kitty Remote Control Protocol" - }, - { - time: "15:52", - description: "Interactive Kitty Shell: Help" - }, - { - time: "16:34", - description: "Choose theme interactively: kitty +kitten themes -h" - }, - { - time: "17:23", - description: "Choose theme by name: kitty +kitten themes [options] [theme_name]" - } -]; - function init_timestamps() { var loc = document.getElementById('timestamps-for-intro-video'); if (loc) { - const timestamps_element = get_timestamps_container(data); - timestamps_element.addEventListener('click', handle_timestamp_click); - loc.appendChild(timestamps_element); + var dl = loc.querySelector('dl'); + dl.querySelectorAll('dt').forEach(dt => { + dt.innerHTML = ''; + dt.style.display = 'inline'; + }); + dl.addEventListener('click', handle_timestamp_click); } } function handle_timestamp_click(e) { if (e.target.tagName.toUpperCase() === 'TIME') { - const timestamp = e.target.getAttribute('datetime'); + const timestamp = e.target.textContent; if (timestamp) { const [minutes, seconds] = timestamp.split(':'); const totalSeconds = parseInt(minutes) * 60 + parseInt(seconds); @@ -134,51 +26,5 @@ function handle_timestamp_click(e) { } } -function get_timestamps_container(file) { - const timestamps_container = document.createElement('section'); - - const rows_array = file.map(entry => { - const [row_element, timestamp_element, description_element] = get_timestamp_elements(entry); - - row_element.append(timestamp_element, description_element); - - return row_element; - }); - rows_array.forEach(row => timestamps_container.appendChild(row)); - - timestamps_container.id = 'timestamps'; - return timestamps_container; -} - -function get_timestamp_elements(entry) { - return [ - get_simple_element('div', null, 'row'), - get_simple_element('time', entry.time), - get_updated_description_element(entry.description) - ]; -} - -function get_simple_element(element, text_content = null, class_name = null) { - const new_element = document.createElement(element); - if (element === 'time') { - new_element.dateTime = new_element.textContent = text_content; - return new_element; - } - if (element === 'kbd' && !text_content) { - return; - } - if (text_content) { - new_element.textContent = text_content; - } - if (class_name) new_element.className = class_name; - return new_element; -} - -function get_updated_description_element(description) { - const description_element = get_simple_element('p'); - description_element.innerHTML = description; - return description_element; -} - window.addEventListener('load', init_timestamps); })(); diff --git a/docs/index.rst b/docs/index.rst index 0b7051f6a..256eb3535 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -77,6 +77,65 @@ To get started see :doc:`quickstart`. .. raw:: html -
-

Timestamps for the above video:

-
+
+ + Timestamps for the above video: + + 00:00 + Intro + 00:39 + Pager: View command output in same window: :kbd:`Ctrl+Shift+g` + 01:43 + Pager: View command output in a separate window + 02:14 + Pager: Uses shell integration in kitty + 02:27 + Tab text: The output of cwd and last cmd + 03:03 + Open files from ls output with mouse: :kbd:`Ctrl+Shift+Right-click` + 04:04 + Open files from ls output with keyboard: :kbd:`Ctrl+Shift+P>y` + 04:26 + Open files on click: ``ls --hyperlink=auto`` + 05:03 + Open files on click: Filetype settings in open-actions.conf + 05:45 + hyperlinked-grep kitten: Open grep output in editor + 07:18 + Remote-file kitten: View remote files locally + 08:31 + Remote-file kitten: Edit remote files locally + 10:01 + icat kitten: View images directly + 10:36 + icat kitten: Download & display image/gif from internet + 11:03 + Kitty Graphics Protocol: Live image preview in ranger + 11:25 + icat kitten: Display image from remote server + 12:04 + unicode-input kitten: Emojis in terminal + 12:54 + Windows: Intro + 13:36 + Windows: Switch focus: :kbd:`Ctrl+Shift+win_nr` + 13:48 + Windows: Visual selection: :kbd:`Ctrl+Shift+F7` + 13:58 + Windows: Simultaneous input + 14:15 + Interactive Kitty Shell: :kbd:`Ctrl+Shift+Esc` + 14:36 + Broadcast text: ``launch --allow-remote-control kitty +kitten broadcast`` + 15:18 + Kitty Remote Control Protocol + 15:52 + Interactive Kitty Shell: Help + 16:34 + Choose theme interactively: ``kitty +kitten themes -h`` + 17:23 + Choose theme by name: ``kitty +kitten themes [options] [theme_name]`` + + .. raw:: html + +