Move the timestamp data into the rst file

Also get rid of the custom styling for the timestamp list

docs/_static/timestamps.css

@@ -1,99 +1,12 @@
-:root {
+.timestamp-list dl {
-    --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%;
     display: grid;
-    max-width: 900px;
+    grid-template-columns: max-content auto;
-    grid-auto-rows: 2rem;
-    line-height: 1.2;
-    font-size: 16px;
 }
 
-#timestamps .row {
+.timestamp-list dt {
-    display: flex;
+    grid-column-start: 1;
-    align-items: center;
-    gap: 1rem .5rem;
 }
 
-#timestamps time:hover {
+.timestamp-list dd {
-    text-decoration: underline;
+    grid-column-start: 2;
-    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;
-
 }

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: <kbd>Ctrl+Shift+g</kbd>"
-    },
-    {
-        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: <kbd>Ctrl+Shift+Right-click</kbd>"
-    },
-    {
-        time: "04:04",
-        description: "Open files from ls output with keyboard: <kbd>Ctrl+Shift+P>y</kbd>"
-    },
-    {
-        time: "04:26",
-        description: "Open files on click: <code>ls --hyperlink=auto</code>"
-    },
-    {
-        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: <kbd>Ctrl+Shift+&lt;win_nr&gt;</kbd>"
-    },
-    {
-        time: "13:48",
-        description: "Windows: Visual selection: <kbd>Ctrl+Shift+F7</kbd>"
-    },
-    {
-        time: "13:58",
-        description: "Windows: Simultaneous input"
-    },
-    {
-        time: "14:15",
-        description: "Interactive Kitty Shell: <kbd>Ctrl+Shift+Esc</kbd>"
-    },
-    {
-        time: "14:36",
-        description: "Broadcast text: <code>launch --allow-remote-control kitty +kitten broadcast</code>"
-    },
-    {
-        time: "15:18",
-        description: "Kitty Remote Control Protocol"
-    },
-    {
-        time: "15:52",
-        description: "Interactive Kitty Shell: Help"
-    },
-    {
-        time: "16:34",
-        description: "Choose theme interactively: <code>kitty +kitten themes -h</code>"
-    },
-    {
-        time: "17:23",
-        description: "Choose theme by name: <code>kitty +kitten themes [options] [theme_name]</code>"
-    }
-];
-
 function init_timestamps() {
     var loc = document.getElementById('timestamps-for-intro-video');
     if (loc) {
-        const timestamps_element = get_timestamps_container(data);
+        var dl = loc.querySelector('dl');
-        timestamps_element.addEventListener('click', handle_timestamp_click);
+        dl.querySelectorAll('dt').forEach(dt => {
-        loc.appendChild(timestamps_element);
+            dt.innerHTML = '<a href="javascript:void(0)" style="text-decoration: none"><time>' + dt.innerHTML + '</time></a>';
+            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);
 })();

docs/index.rst

@@ -77,6 +77,65 @@ To get started see :doc:`quickstart`.
 
     .. raw:: html
 
-       <div id="timestamps-for-intro-video">
+        <div id="timestamps-for-intro-video" class="timestamp-list">
-       <p>Timestamps for the above video:</p>
+
-       </div>
+    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
+
+        </div>