You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: _TODO.md
+35-15Lines changed: 35 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -84,21 +84,27 @@ if (window.matchMedia) {
84
84
}
85
85
```
86
86
87
-
- Need a workflow to generate PDF files from Markdown for downloads.
88
-
89
87
- Add a QR code at the bottom of printed pages so it's easier for someone to navigate to from a printed page.
90
88
91
-
- Need a layout alternative to Markup that formats for print. It needs to handle TOC differently as a full-width page. Need a fixed cover page format that adds article title, subtitle, and date.
92
-
93
-
- We have two print scenarios: black and white, and color for PDF output. Can use two different media queries to accomplish getting colored variables.
89
+
- Need a layout alternative to Markup that formats for print. It needs to handle TOC differently as a full-width page.
94
90
95
91
- Need to make sure that on print, when we have a tabbed code block with multiple languages, only the first language is printed and the other language tabs are hidden. The styling should be different for print for the code block. Maybe move other language code tabs to an appendix and add a link to them.
96
92
97
-
- Need to only load print style sheet when needed.
93
+
[This article](https://excessivelyadequate.com/posts/print.html) shows how to control the following properties in Chrome's Print Properties dialog box from CSS: Layout, Paper size, Margins, Headers and footers, and Background graphics. Headers and footers is the checkbox that by default is enabled and adds information on printed pages. It also shows how to use Chrome from the terminal in headless mode to output a PDF file from an HTML page.
98
94
99
-
[Paged.js](https://pagedjs.org/en/documentation/) polyfills `@page` properties, and lays out an HTML document in print format where it can have page numbers generated to update in a table of contents.
95
+
## PDF File Generation
100
96
101
-
[This article](https://excessivelyadequate.com/posts/print.html) shows how to control the following properties in Chrome's Print Properties dialog box from CSS: Layout, Paper size, Margins, Headers and footers, and Background graphics. Headers and footers is the checkbox that by default is enabled and adds information on printed pages. It also shows how to use Chrome from the terminal in headless mode to output a PDF file from an HTML page.
97
+
- Need a workflow to generate PDF files from Markdown for downloads.
98
+
99
+
- Need a fixed cover page format that adds article title, subtitle, and date.
100
+
101
+
- Table of Contents (Workarounds)
102
+
103
+
Because the browser doesn't know which page an element (like an <h1>) will land on until the PDF is fully rendered, you cannot generate a TOC with correct page numbers in a single pass. Common workarounds include:
104
+
105
+
Paged.js Polyfill: Use the Paged.js library to handle sophisticated print layouts (like TOCs and cross-references) within the browser before Puppeteer "prints" the result.
106
+
107
+
[Paged.js](https://pagedjs.org/en/documentation/) polyfills `@page` properties, and lays out an HTML document in print format where it can have page numbers generated to update in a table of contents.
102
108
103
109
This article has different approaches to [print pagination](https://www.customjs.space/blog/html-print-pagination-footer/). One approach overlaps with PagedJS's approach.
- There's a pretty long delay when you push the Content Switcher to go from short to deep dive, what's causing it? It should be fast - maybe it's a prefetch issue, prefetch on page load
172
178
173
-
- Suggestions on improving table layout for better visual experience. Consider adding a trim outline to tables
174
-
175
-
- Cap callout length at 80% or 90% of the column so they're not longer than any text
176
-
177
179
- Themepicker and search icon are too big in non-squished header. Logo too - the initial presentation should be smaller.
178
180
179
181
- Search box in header should have blue outline, not highlight
@@ -249,9 +251,7 @@ The first file to update is:
249
251
250
252
numbered-with-background-list, check-icons-list
251
253
252
-
We have lists in our current articles that are of two variants: those that are plain text lists (either ordered or unordered), and those that are lists with both leads and plain texts. Our List component layouts handle both lists with leads and those without. We can identify leads because that text is emphasized with markdown in some fashion: "_", "__", "*", or "**". We need to refactor the markdown lists in a file into either an ordered (numbered-with-background-list) or unordered (check-icons-list) list, and extract lead text if present into the optional lead prop if any lead text is present.
253
-
254
-
If there is a Further Reading" heading at the bottom of a file, ignore any list that may be contained in it.
254
+
We have lists in our current articles that are of two variants: those that are plain text lists (either ordered or unordered), and those that are lists with both leads and plain texts. Our List component layouts handle both lists with leads and those without. We can identify leads because that text is emphasized with markdown in some fashion: "_", "__", "*", or "**". We need to refactor the markdown lists in a file into either an ordered (numbered-with-background-list) or unordered (check-icons-list) list, and extract lead text if present into the optional lead prop if any lead text is present. The "lead" prop should come first and before the "text" prop in the object. The "lead" prop is the emphasized text that comes first in the list items we are converting to the List component
0 commit comments