pullread/viewer.html at main · shellen/pullread · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pull Read</title>
<link rel="manifest" href="/manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Pull Read">
<link rel="apple-touch-icon" href="/icon-256.png">
<link rel="icon" type="image/png" sizes="256x256" href="/icon-256.png">
<!-- All libraries bundled inline by embed-viewer.ts (marked, hljs, mermaid, DOMPurify, hls.js) -->
<!-- INJECT:HLJS_THEMES -->
<style>
/* INJECT:CSS */
</style>
</head>
<body data-theme="light" class="font-instrument-serif size-medium">
<a href="#content-scroll" class="skip-link">Skip to content</a>
<!-- SVG icon sprite (generated from heroicons package by embed-viewer.ts, plus manual brand/custom icons) -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
  <!-- INJECT:ICONS -->
  <!-- Brand icons (FontAwesome Free 6.x Brands, CC BY 4.0 — kept as filled) -->
  <symbol id="i-bluesky" viewBox="0 0 512 512"><path d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"/></symbol>
  <symbol id="i-threads" viewBox="0 0 448 512"><path d="M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z"/></symbol>
  <symbol id="i-linkedin" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"/></symbol>
  <symbol id="i-mastodon" viewBox="0 0 448 512"><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></symbol>
  <symbol id="i-facebook" viewBox="0 0 320 512"><path d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"/></symbol>
  <!-- Custom icons (not in Heroicons) -->
  <symbol id="i-headphones" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3v5zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3v5z"/></symbol>
  <symbol id="i-video" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25z"/></symbol>
  <symbol id="i-keyboard" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M10 13h.01M14 13h.01M18 13h.01M8 17h8"/></symbol>
  <symbol id="i-magic-hat" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19h16"/><path d="M6.5 19l1.5-8 4 3 4-9 2 14"/><path d="M9.5 4.5l1 .8M14.5 3.5l-.8 1M12 2.5v1.5"/></symbol>
</svg>
<div class="app" role="application" aria-label="Pull Read article reader">

  <div class="mobile-header" id="mobile-header">
    <button class="mobile-header-btn" onclick="toggleMobileSidebar()" aria-label="Open menu"><svg class="icon" aria-hidden="true"><use href="#i-bars"/></svg></button>
    <span class="mobile-header-brand">Pull Read</span>
    <button class="mobile-header-btn" onclick="toggleMobileSidebar();setTimeout(function(){document.getElementById('search').focus()},200)" aria-label="Search"><svg class="icon" aria-hidden="true"><use href="#i-search"/></svg></button>
  </div>
  <div class="sidebar-overlay" id="sidebar-overlay" onclick="closeMobileSidebar()"></div>

  <div class="main">
    <aside class="sidebar" id="sidebar" aria-label="Navigation">
      <div class="sidebar-header">
        <span class="brand" onclick="goHome()" role="heading" aria-level="1" title="Explore"><div class="brand-icon-box" aria-hidden="true"><svg fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><rect x="3" y="3" width="15" height="19" rx="2"/><line x1="7" y1="10.5" x2="14" y2="10.5"/><line x1="7" y1="14" x2="12.5" y2="14"/><line x1="7" y1="17.5" x2="11" y2="17.5"/><path d="M14 2v7l2.25-1.75L18.5 9V2z" fill="currentColor" stroke="none"/></svg></div>Pull Read</span>
        <div class="sidebar-header-actions">
          <button class="toolbar-icon-btn" onclick="toggleQuickAdd()" aria-label="Add article by URL" title="Add URL" id="quick-add-btn"><svg class="icon" aria-hidden="true"><use href="#i-plus"/></svg></button>
          <button class="toolbar-icon-btn" onclick="refreshArticleList()" aria-label="Refresh articles" title="Refresh" id="refresh-btn"><svg class="icon" aria-hidden="true"><use href="#i-refresh"/></svg></button>
          <button class="toolbar-icon-btn" onclick="collapseSidebar()" aria-label="Collapse sidebar" title="Collapse ([)" id="sidebar-collapse-btn"><svg class="icon" aria-hidden="true"><use href="#i-chevron-left"/></svg></button>
        </div>
      </div>
      <div class="sidebar-search" role="search">
        <label for="search" class="sr-only">Search</label>
        <input type="text" id="search" placeholder="Search..." oninput="filterFiles()" />
        <button class="search-clear" id="search-clear" onclick="clearSearch()" aria-label="Clear search">&times;</button>
        <button class="search-pin" id="search-pin" onclick="pinCurrentSearch()" aria-label="Pin this filter" title="Pin this filter">
          <svg class="icon icon-sm" aria-hidden="true"><use href="#i-pin"/></svg>
        </button>
      </div>
      <div class="pinned-filters" id="pinned-filters"></div>
      <nav class="sidebar-nav" id="sidebar-nav">
        <button class="sidebar-nav-item active" data-nav="explore" onclick="sidebarNavFilter('explore')"><svg class="icon icon-sm" aria-hidden="true"><use href="#i-home"/></svg><span class="sidebar-nav-label">Explore</span></button>
        <button class="sidebar-nav-item" data-nav="all" onclick="sidebarNavFilter('all')"><svg class="icon icon-sm" aria-hidden="true"><use href="#i-inbox"/></svg><span class="sidebar-nav-label">All Items</span><span class="sidebar-nav-count" id="nav-count-all"></span></button>
        <button class="sidebar-nav-item" data-nav="sources" onclick="sidebarNavFilter('sources')"><svg class="icon icon-sm" aria-hidden="true"><use href="#i-squares"/></svg><span class="sidebar-nav-label">Sources</span><span class="sidebar-nav-count" id="nav-count-sources"></span><svg class="icon icon-xs sidebar-nav-chevron" aria-hidden="true"><use href="#i-chevron-right"/></svg></button>
        <button class="sidebar-nav-item" data-nav="starred" onclick="sidebarNavFilter('starred')"><svg class="icon icon-sm" aria-hidden="true"><use href="#i-heart"/></svg><span class="sidebar-nav-label">Starred</span><span class="sidebar-nav-count" id="nav-count-starred"></span></button>
        <button class="sidebar-nav-item" data-nav="notebook" onclick="sidebarNavFilter('notebook')"><svg class="icon icon-sm" aria-hidden="true"><use href="#i-pen"/></svg><span class="sidebar-nav-label">Notebook</span></button>
        <button class="sidebar-nav-item" data-nav="research" id="nav-research" onclick="sidebarNavFilter('research')" style="display:none"><svg class="icon icon-sm" aria-hidden="true"><use href="#i-beaker"/></svg><span class="sidebar-nav-label">Research</span></button>
      </nav>
      <div class="quick-add-row" id="quick-add-row" style="display:none">
        <input type="url" id="quick-add-input" placeholder="Paste article URL and press Enter" onkeydown="if(event.key==='Enter')quickAddUrl()" />
        <button class="btn-primary" onclick="quickAddUrl()" id="quick-add-save" style="font-size:12px;padding:4px 10px;white-space:nowrap">Save</button>
      </div>
      <div class="file-count" id="file-count" aria-live="polite" aria-atomic="true">
        <span class="sort-label">Sort:</span>
        <span class="magic-sort-toggle" id="magic-sort-toggle" onclick="toggleMagicSort()" title="Surfaces articles you're most likely to want to read. Prioritizes sources you engage with, recency, and unread status. Limits any single source to 3 top slots. Podcast episodes decay faster."><svg class="icon icon-sm" aria-hidden="true"><use href="#i-magic-hat"/></svg> Magic</span>
        <span class="hide-read-toggle" id="hide-read-toggle" onclick="toggleHideRead()" title="Show only unread articles">Unread</span>
      </div>
      <div class="source-filter-bar" id="source-filter-bar" style="display:none">
        <span class="source-filter-name" id="source-filter-name"></span>
        <button class="source-filter-clear" onclick="clearSourceFilter()" aria-label="Clear filter">&times;</button>
      </div>
      <div class="file-list" id="file-list" role="listbox" aria-label="Articles"></div>
      <div class="sync-status" id="sync-status" aria-live="polite"></div>
      <div id="player-mini-mount" class="player-mini-mount"></div>
      <div class="sidebar-status-bar" id="sidebar-status-bar" aria-live="polite" aria-atomic="true">
        <span id="file-count-text"></span>
      </div>
      <div class="sidebar-footer">
        <button class="sidebar-footer-btn" onclick="toggleFocusMode()" aria-label="Focus mode" title="Focus mode (f)" id="focus-btn"><svg class="icon icon-sm" aria-hidden="true"><use href="#i-focus"/></svg> Focus</button>
        <button class="sidebar-footer-btn" onclick="showFeedbackModal()" aria-label="Send feedback" title="Send feedback"><svg class="icon icon-sm" aria-hidden="true"><use href="#i-comment"/></svg> Feedback</button>
        <button class="sidebar-footer-btn" onclick="showSettingsPage()" aria-label="Settings" title="Settings"><svg class="icon icon-sm" aria-hidden="true"><use href="#i-gear"/></svg> Settings</button>
      </div>
    </aside>

    <button class="sidebar-expand-btn" onclick="expandSidebar()" aria-label="Expand sidebar" title="Expand sidebar ([)"><svg class="icon" aria-hidden="true"><use href="#i-chevron-right"/></svg></button>

    <div class="drawer" id="drawer" aria-label="Source and tag browser">
      <div class="drawer-header">
        <span class="drawer-title" id="drawer-title">Sources</span>
        <button class="toolbar-icon-btn" onclick="closeDrawer()" aria-label="Back" title="Back"><svg class="icon" aria-hidden="true"><use href="#i-chevron-left"/></svg></button>
      </div>
      <div class="drawer-content" id="drawer-content"></div>
      <div class="drawer-footer" id="drawer-footer" style="display:none"></div>
    </div>

    <main class="content-pane" id="content-pane" aria-label="Article content">
      <div class="reader-toolbar" id="reader-toolbar" style="display:none">
        <div class="reader-toolbar-left" id="reader-toolbar-actions"></div>
        <div class="reader-toolbar-right">
          <div class="more-dropdown" id="more-dropdown">
            <button onclick="toggleMoreMenu(event)" class="toolbar-nav-btn" aria-label="More actions"><svg class="icon icon-sm" aria-hidden="true"><use href="#i-ellipsis"/></svg></button>
          </div>
          <button onclick="navigateArticle(-1)" aria-label="Previous article" title="Previous" class="toolbar-nav-btn">
            <svg class="icon icon-sm"><use href="#i-chevron-up"/></svg>
          </button>
          <button onclick="navigateArticle(1)" aria-label="Next article" title="Next" class="toolbar-nav-btn">
            <svg class="icon icon-sm"><use href="#i-chevron-down"/></svg>
          </button>
          <div class="toolbar-divider"></div>
          <button class="toolbar-aa-btn" onclick="toggleSettingsDropdown()" aria-label="Reader settings" aria-expanded="false">Aa</button>
        </div>
      </div>
      <div class="content-scroll" id="content-scroll">
        <div class="reading-progress" aria-hidden="true"><div class="reading-progress-bar" id="reading-progress-bar"></div></div>
        <div class="empty-state" id="empty-state">
          <div class="dashboard" id="dashboard"></div>
        </div>
        <article class="content-wrap" id="content" style="display:none;" aria-live="polite"></article>
        <div class="margin-notes" id="margin-notes" aria-hidden="true"></div>
        <div class="toc-container" id="toc-container" aria-label="Table of contents"></div>
      </div>
      <pr-player></pr-player>
    </main>
  </div>

</div>

<div class="onboarding-overlay" id="onboarding" style="display:none" role="dialog" aria-modal="true" aria-label="Welcome to Pull Read">
  <div class="onboarding-card" id="onboarding-card"></div>
</div>

<script>
/* INJECT:JS */
</script>
</body>
</html>