feat(web): add web generator #285
Conversation
Codecov ReportAttention: Patch coverage is
✅ All tests successful. No failed tests found. Additional details and impacted files@@ Coverage Diff @@
## main #285 +/- ##
==========================================
+ Coverage 48.90% 54.08% +5.18%
==========================================
Files 82 88 +6
Lines 6825 7105 +280
Branches 277 302 +25
==========================================
+ Hits 3338 3843 +505
+ Misses 3484 3258 -226
- Partials 3 4 +1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
| const language = matches?.groups?.language ?? ''; | ||
| const [copyText, setCopyText] = useState('Copy to clipboard'); | ||
|
|
||
| const handleCopy = async text => { |
There was a problem hiding this comment.
Why not including useCopyToClipord in ui lib ?
There was a problem hiding this comment.
IIRC I didn't include it since it didn't fall under the "UI Component" category, it's a hook, however, if you disagree, I won't block.
| "estree-util-value-to-estree": "^3.4.0", | ||
| "estree-util-visit": "^2.0.0", | ||
| "github-slugger": "^2.0.0", | ||
| "glob": "^11.0.2", | ||
| "hast-util-to-string": "^3.0.1", | ||
| "hastscript": "^9.0.1", | ||
| "html-minifier-terser": "^7.2.0", | ||
| "mustache": "^4.2.0", |
There was a problem hiding this comment.
I tried to use __<VARIABLE>__ like in the other generators, however, the JavaScript I was trying to add to the HTML broke the structure of the file. Using a library like Mustache properly escapes anything injected.
There was a problem hiding this comment.
export const TEMPLATE = ({...props}) => dedent`
<html>
${props.foo}
</html>
`; this can work
There was a problem hiding this comment.
Sorry if I wasn’t clear, the compiled JavaScript broke the HTML structure because it contained characters that need to be escaped to be in an HTML script.
For example, in your scenario, if props.foo contains a </html>, it’ll escape the sandbox.
Mustache performs all the needed escaping.
There was a problem hiding this comment.
I don't like that we're using yet another layer of whatever freakery here. Mustache is great, but it feels like you're throing a nuke at an ant's sized problem. Not to mention adding yet another engine here will make things even more complex and costly-performance wise. Let's try to avoid throwing npm packages to any problem we encounter, shall we?
|
🎉 The code now dehydrates to the client so it can render without JavaScript! |
Wow 😵💫 and what about codetab |
|
It rehydrates and runs with JS, but if you don't have JS, you can still view the docs. I used React's SSRing |
|
@AugustinMauroy and I got search to finally work 🎉 |
avivkeller
force-pushed
the
feat/web/gen
branch
2 times, most recently
from
024bbea to
dbfe55d
Compare
|
@nodejs/nodejs-website @nodejs/web-infra |
|
IDK how next-themes do but on this implementation at loading time there are a big flash |
|
When using Toc it's focus the header and it's have the default focus style. We should probaly disable that 
|
|
@AugustinMauroy I've resolved the flickering, can you confirm? |
|
Flashing I fixed |
|
Link in a stability index isn't parsed as link it's just text so it's not clickable. |
|
I've fixed that, I'm pushing the commit now |
|
Do we need reading time. that not make a lot of sense for a doc, because docs isn't continue text it's punctual information. |
|
I think we should fix this on the node/nodejs.org side, but shouldn't the numerical index of the StabilityIndex component be at the top left? 
|
|
“About,” “Synopsis,” and ‘Index’ must be hard-coded values so that they appear first in the sidebar. Currently, “Synopsis,” which has the title “Usage and Example,” appears near the end of the navigation, which is not logical. |
| setCopyText('Copied to clipboard!'); | ||
| setTimeout(() => { | ||
| setCopyText('Copy to clipboard'); | ||
| }, 500); |
There was a problem hiding this comment.
| }, 500); | |
| }, 1000); |
you can give the user time to see that the action has taken place
I think we should keep it in, I don't see a reason to have it everywhere else except docs |
Fixes #7.
This PR adds the web generator, and some of its components. A few of the components are yet to be implemented.
To Implement
ChangeHistory(Assignee: Unassigned)Get a preview