docnest 0.1.20 → 0.1.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "docnest",
3
- "version": "0.1.20",
3
+ "version": "0.1.21",
4
4
  "description": "可复用的本地 Markdown 文档中心",
5
5
  "repository": {
6
6
  "type": "git",
@@ -0,0 +1,29 @@
1
+ .doc-reading-toggle {
2
+ position: absolute;
3
+ top: 4px;
4
+ right: var(--doc-reading-button-right, 40px);
5
+ z-index: 2;
6
+ display: flex;
7
+ align-items: center;
8
+ justify-content: center;
9
+ width: 36px;
10
+ height: 36px;
11
+ padding: 8px;
12
+ border: 1px solid var(--linear-border);
13
+ border-radius: 4px;
14
+ background: var(--linear-bg);
15
+ color: var(--linear-text);
16
+ cursor: pointer;
17
+ }
18
+ .doc-reading-toggle:hover { color: var(--linear-accent); }
19
+ .doc-reading-toggle:focus-visible { outline: 2px solid var(--linear-accent); outline-offset: 2px; }
20
+ .doc-reading-toggle svg { width: 20px; height: 20px; }
21
+ body.doc-reading-expanded .sidebar,
22
+ body.doc-reading-expanded .sidebar-chrome,
23
+ body.doc-reading-expanded .doc-toc { display: none !important; }
24
+ body.doc-reading-expanded .main-content {
25
+ padding-left: var(--doc-reading-left-margin) !important;
26
+ padding-right: var(--doc-reading-right-margin) !important;
27
+ }
28
+ body.doc-reading-expanded .doc-layout { width: 100% !important; max-width: none; }
29
+ @media print { .doc-reading-toggle { display: none; } }
@@ -0,0 +1,42 @@
1
+ (function () {
2
+ const layout = document.querySelector('.doc-layout');
3
+ const main = document.querySelector('.main-content');
4
+ const article = layout?.querySelector('.markdown-body');
5
+ if (!layout || !main || !article) return;
6
+
7
+ const button = document.createElement('button');
8
+ button.type = 'button';
9
+ button.className = 'doc-reading-toggle';
10
+ button.setAttribute('aria-controls', 'sidebar doc-toc');
11
+ function updateButton() {
12
+ const expanded = document.body.classList.contains('doc-reading-expanded');
13
+ const iconPath = expanded
14
+ ? 'M3 8h5V3M8 8 2 2M21 8h-5V3M16 8l6-6M3 16h5v5M8 16l-6 6M21 16h-5v5M16 16l6 6'
15
+ : 'M8 3H3v5M3 3l6 6M16 3h5v5M21 3l-6 6M3 16v5h5M3 21l6-6M21 16v5h-5M21 21l-6-6';
16
+ button.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${iconPath}"/></svg>`;
17
+ button.setAttribute('aria-label', expanded ? '缩小正文,恢复目录' : '放大正文,隐藏目录');
18
+ button.setAttribute('aria-pressed', String(expanded));
19
+ button.title = expanded ? '恢复默认阅读布局' : '扩大正文阅读区域';
20
+ }
21
+ function positionButton() {
22
+ const right = main.getBoundingClientRect().left + main.clientWidth - article.getBoundingClientRect().right;
23
+ main.style.setProperty('--doc-reading-button-right', `${Math.max(0, right)}px`);
24
+ }
25
+ window.addEventListener('resize', positionButton);
26
+ button.addEventListener('click', function () {
27
+ if (!document.body.classList.contains('doc-reading-expanded')) {
28
+ const mainBounds = main.getBoundingClientRect();
29
+ const articleRight = article.getBoundingClientRect().right;
30
+ const rightPadding = mainBounds.left + main.clientWidth - articleRight;
31
+ const outerMargin = document.documentElement.clientWidth - articleRight;
32
+ main.style.setProperty('--doc-reading-left-margin', `${Math.max(0, outerMargin)}px`);
33
+ main.style.setProperty('--doc-reading-right-margin', `${Math.max(0, rightPadding)}px`);
34
+ }
35
+ document.body.classList.toggle('doc-reading-expanded');
36
+ updateButton();
37
+ positionButton();
38
+ });
39
+ updateButton();
40
+ main.appendChild(button);
41
+ positionButton();
42
+ })();
@@ -9,6 +9,8 @@
9
9
  <link rel="stylesheet" href="/static/css/styles.css?v=<%= assetVersion %>">
10
10
  <link rel="stylesheet" href="/static/css/highlight.css?v=<%= assetVersion %>">
11
11
  <link rel="stylesheet" href="/static/css/themes.css?v=<%= assetVersion %>">
12
+ <link rel="stylesheet" href="/static/css/doc-reading-view.css?v=<%= assetVersion %>">
13
+ <script defer src="/static/js/core/doc-reading-view.js?v=<%= assetVersion %>"></script>
12
14
  <script src="/mermaid/mermaid.min.js?v=<%= assetVersion %>"></script>
13
15
  <%- include('partials/appearance-head') %>
14
16
  <!-- 基础功能模块 -->