@draftbase/renderer 0.2.1 → 0.3.2
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/README.md +2 -0
- package/dist/styles.css +21 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -233,6 +233,8 @@ function EntryLink({ id, children }: { id: string; children: React.ReactNode })
|
|
|
233
233
|
- Extra classes: `<MDXContent source={...} className="prose" />`.
|
|
234
234
|
- Custom wrapper/error element (e.g. React Native's `View`/`Text`): `<MDXContent source={...} wrapperTag={View} errorTag={Text} />`.
|
|
235
235
|
|
|
236
|
+
If your site has a sticky header, set the anchor offset once on your own page — `html { scroll-padding-top: 5rem }` — so heading links don't land underneath it. The renderer deliberately ships no offset of its own, since `scroll-padding-top` and `scroll-margin-top` sum when both are set.
|
|
237
|
+
|
|
236
238
|
## Using with Claude Code / AI coding agents
|
|
237
239
|
|
|
238
240
|
If you're an agent wiring this into a project, follow this checklist:
|
package/dist/styles.css
CHANGED
|
@@ -6,6 +6,20 @@
|
|
|
6
6
|
.db-content {
|
|
7
7
|
line-height: 1.6;
|
|
8
8
|
color: inherit;
|
|
9
|
+
overflow-wrap: break-word;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/* remark-gfm emits the footnotes label as .sr-only; define it so it stays hidden
|
|
13
|
+
without the consumer needing Tailwind or their own utility. */
|
|
14
|
+
.db-content .sr-only {
|
|
15
|
+
position: absolute;
|
|
16
|
+
width: 1px;
|
|
17
|
+
height: 1px;
|
|
18
|
+
padding: 0;
|
|
19
|
+
margin: -1px;
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
clip-path: inset(50%);
|
|
22
|
+
white-space: nowrap;
|
|
9
23
|
}
|
|
10
24
|
|
|
11
25
|
.db-content > :first-child {
|
|
@@ -25,12 +39,11 @@
|
|
|
25
39
|
line-height: 1.25;
|
|
26
40
|
margin: 1.5em 0 0.5em;
|
|
27
41
|
color: inherit;
|
|
28
|
-
scroll-margin-top: 96px;
|
|
29
42
|
}
|
|
30
43
|
|
|
31
44
|
/* Highlights a footnote/citation anchor when the URL hash lands on it, e.g. #fn-1. */
|
|
32
45
|
.db-content :target {
|
|
33
|
-
background: var(--
|
|
46
|
+
background: var(--db-target-bg, rgba(127, 127, 127, 0.15));
|
|
34
47
|
}
|
|
35
48
|
|
|
36
49
|
.db-content h1 {
|
|
@@ -175,9 +188,14 @@
|
|
|
175
188
|
background: none;
|
|
176
189
|
}
|
|
177
190
|
|
|
191
|
+
/* display:block so wide tables scroll instead of overflowing the page on mobile;
|
|
192
|
+
costs full-bleed stretch for narrow tables. */
|
|
178
193
|
.db-content table {
|
|
179
194
|
border-collapse: collapse;
|
|
180
|
-
|
|
195
|
+
display: block;
|
|
196
|
+
width: max-content;
|
|
197
|
+
max-width: 100%;
|
|
198
|
+
overflow-x: auto;
|
|
181
199
|
}
|
|
182
200
|
|
|
183
201
|
.db-content th,
|