This commit aims to improve the UX when navigating the docs using links
to subsections. Previously the browser would scroll down to the section
body, skipping the section heading. Using `scroll-margin-top` CSS
property, we can fix this behavior (at least on some browsers).
Links to other versions are now updated with the current targeted hash
to improve the UX when navigating from docs of one release line to
another.
I've also removed syntax not parsable by older browsers (arrow functions
and array destructuring) since the diff is pretty small and should
improve UX on those browsers.
PR-URL: https://github.com/nodejs/node/pull/42739
Reviewed-By: Paolo Insogna <paolo@cowtech.it>
Reviewed-By: Tobias Nießen <tniessen@tnie.de>
Reviewed-By: James M Snell <jasnell@gmail.com>
This makes the version picker usable on mobile devices.
Previously, the version picker was difficult to select from. This
change makes the #gtoc > ul > li elements have a display
of `block` instead of `inline`.
PR-URL: https://github.com/nodejs/node/pull/39958
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com>
Reviewed-By: Tobias Nießen <tniessen@tnie.de>
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Derek Lewis <DerekNonGeneric@inf.is>
Safari needs a vendor prefix on the appearance of the checkbox.
PR-URL: https://github.com/nodejs/node/pull/40135
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com>
Reviewed-By: Michaël Zasso <targos@protonmail.com>
There is a color contrast issue with links in light mode on the API
highlight background. This only appears in modules.md. This change fixes
it without introducing other contrast issues in either light or dark
mode. Previously, the color contrast for some text on modules.html was
failing WCAG AA in light mode.
PR-URL: https://github.com/nodejs/node/pull/39660
Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com>
Reviewed-By: Tobias Nießen <tniessen@tnie.de>
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Derek Lewis <DerekNonGeneric@inf.is>
Judging from https://github.com/logos, we are misusing the GitHub mark.
That page indicates to not change the color (we change it from black to
green). Less clear, it says "Use the Mark in social buttons to link to
your GitHub profile or project" which isn't exactly what we're doing but
also isn't not what we're doing?
This might be an indication of my eyesight getting worse as I get older,
but I think the size that we display the mark at by default makes it not
entirely recognizable as the GitHub mark. Lastly, there's the
philosophical issue of whether we should display a commercial entity's
mark on our web pages in this particular instance. (For me, the answer
is "maybe".)
All told, I think we can remove it without damaging usability on the
website, so let's do it.
PR-URL: https://github.com/nodejs/node/pull/39251
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: James M Snell <jasnell@gmail.com>
Currently, in its dark mode, our website background color is #090C15 and
our anchor marks are #707070 for a contrast ratio of 3.94 to 1, falling
short of the WCAG AA 4.5 to 1. This changes the mark color in dark mode
only to #7A7A7A for a color contrast of 4.55 to 1.
PR-URL: https://github.com/nodejs/node/pull/39168
Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com>
The CSS variables are not in any particular logical order as far as I
can tell, with certain items that would seem to go together not grouped.
This puts them in alphabetical order.
PR-URL: https://github.com/nodejs/node/pull/39169
Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com>
Reviewed-By: Darshan Sen <raisinten@gmail.com>
Reviewed-By: Harshitha K P <harshitha014@gmail.com>
PR-URL: https://github.com/nodejs/node/pull/37950
Reviewed-By: Pooja D P <Pooja.D.P@ibm.com>
Reviewed-By: Harshitha K P <harshitha014@gmail.com>
Reviewed-By: Rich Trott <rtrott@gmail.com>
Enable code example using both modern ESM syntax and legacy CJS syntax.
It adds a toggle on the web interface to let users switch from one
JavaScript flavor to the other.
PR-URL: https://github.com/nodejs/node/pull/37162
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Rich Trott <rtrott@gmail.com>
Reviewed-By: Michaël Zasso <targos@protonmail.com>
Defer rendering sections of docs until they are displayed on
the user's screen.
PR-URL: https://github.com/nodejs/node/pull/37301
Reviewed-By: Darshan Sen <raisinten@gmail.com>
Reviewed-By: James M Snell <jasnell@gmail.com>
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
PR-URL: https://github.com/nodejs/node/pull/36313
Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com>
Reviewed-By: Rich Trott <rtrott@gmail.com>
* better vertical alignment with text
* slightly larger "key" size
* remove top light area (from box-shadow)
PR-URL: https://github.com/nodejs/node/pull/35497
Reviewed-By: Anna Henningsen <anna@addaleax.net>
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
I believe this is the last change to make in the docs for color contrast
accessibility per WCAG AA.
Currently, the current item in the nav is #43853d on a #333333
background for a color contrast of 2.8:1, failing WCAG AA. This swaps in
removes a confusing bottom border on the item, replacing it with
bolding to preserve the item's highlighting.
PR-URL: https://github.com/nodejs/node/pull/35141
Reviewed-By: Daijiro Wachi <daijiro.wachi@gmail.com>
Reviewed-By: Benjamin Gruenbaum <benjamingr@gmail.com>
Reviewed-By: Derek Lewis <DerekNonGeneric@inf.is>
Reviewed-By: Trivikram Kamat <trivikr.dev@gmail.com>
A previous change altered the rendering of visited links. This restores
it.
PR-URL: https://github.com/nodejs/node/pull/35108
Reviewed-By: Tobias Nießen <tniessen@tnie.de>
Reviewed-By: Derek Lewis <DerekNonGeneric@inf.is>
Reviewed-By: Franziska Hinkelmann <franziska.hinkelmann@gmail.com>
Current contrast ratio (2.51) does not pass WCAG AA. This PR increases
the contrast to 4.50, which passes WCAG AA. The color, of course, is
still green.
PR-URL: https://github.com/nodejs/node/pull/35061
Reviewed-By: Tobias Nießen <tniessen@tnie.de>
Reviewed-By: Derek Lewis <DerekNonGeneric@inf.is>
The HTML <hr> element represents a thematic break between
paragraph-level elements: for example, a change of scene in a story,
or a shift of topic within a section.
The HTML Content Division element (<div>) is the generic container
for flow content and does not inherently represent anything.
The <hr> tag semantically fits better the meaning of the line between
the lists.
Refs: https://html.spec.whatwg.org/multipage/grouping-content.html#the-hr-element
PR-URL: https://github.com/nodejs/node/pull/34660
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Rich Trott <rtrott@gmail.com>
Reviewed-By: Anna Henningsen <anna@addaleax.net>
Prior to this commit, [src] link overlapped sharped (#) sub-header link
PR-URL: https://github.com/nodejs/node/pull/33664
Reviewed-By: James M Snell <jasnell@gmail.com>
This commit improves overall usability on desktop by removing the "dead"
(non-interactive) regions between links in the API section's navigation.
No visible changes have been made; this enhancement is purely tactile in
nature.
PR-URL: https://github.com/nodejs/node/pull/33469
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Ruben Bridgewater <ruben@bridgewater.de>
Tables on some pages (e.g. https://nodejs.org/api/crypto.html) are
quite wide because of long content (e.g. URLs) that don't break.
With this change, cell padding is smaller on small screens, and the
table content is allowed to break.
PR-URL: https://github.com/nodejs/node/pull/31859
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Ruben Bridgewater <ruben@bridgewater.de>
Reviewed-By: James M Snell <jasnell@gmail.com>
Allow use of <code> in header elements without styling side effects. We
can add styling later if desired. The goal here is to allow code to be
set off in markdown without needing to escape characters and do lint
exceptions for terms. This is probably a win in terms of accessibility
too although it would be moreso if we had some visual differentiation
for <code> inside of headers. As mentioned above, that can always be
added at a later time.
PR-URL: https://github.com/nodejs/node/pull/31086
Reviewed-By: Anna Henningsen <anna@addaleax.net>
Reviewed-By: Ruben Bridgewater <ruben@bridgewater.de>
* split selectors to one per line
* remove units from 0
* use double colon pseudo selectors consistently
* use `background-color` instead of the `background` shorthand since
only the color is supposed to change
* remove leading zeros from numbers
* remove redundant values from shorthands
* use lowercase hex for colors
* use numeric values for `font-weight`
PR-URL: https://github.com/nodejs/node/pull/29669
Reviewed-By: Benjamin Gruenbaum <benjamingr@gmail.com>
Parse source code using acorn; extracting exports. When producing
documentation, match exports to headers. When a match is found, add a [src]
link.
This first commit handles simple exported classes and functions, and does so
without requiring any changes to the source code or markdown. Subsequent
commits will attempt to match more headers, and some of these changes are
likely to require changes to the source code and/or markdown.
PR-URL: https://github.com/nodejs/node/pull/22405
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Refael Ackermann <refack@gmail.com>
Reviewed-By: Vse Mozhet Byt <vsemozhetbyt@gmail.com>
Proof of concept for an "Edit on GitHub" link, inspired by the
Serverless docs.
One issue is that the link is to the version of the docs on the master
branch even if the person was reading a different version of the doc. I
don't consider that a big problem, although we can always remove the
link if it turns out to be a big problem. I don't think there is a good
solution. PRs need to be opened against the master branch generally.
Having a bunch of PRs against staging branches is probably not what we
want. If there's an update to one version of the doc, there will usually
be an update to other versions.
PR-URL: https://github.com/nodejs/node/pull/21703
Reviewed-By: Anatoli Papirovski <apapirovski@mac.com>
Reviewed-By: Franziska Hinkelmann <franziska.hinkelmann@gmail.com>
Reviewed-By: Yuta Hiroto <hello@hiroppy.me>
Reviewed-By: Minwoo Jung <minwoo@nodesource.com>
Reviewed-By: Roman Reiss <me@silverwind.io>
There appear to be rendering issues with inconsistent glyph width when
using the Monaco font on non-macOS machines. This change updates the
native CSS font stack to use the same font stack as Boostrap does, minus
the Monaco font.
PR-URL: https://github.com/nodejs/node/pull/21036
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Yazhong Liu <yorkiefixer@gmail.com>
Reviewed-By: Gus Caplan <me@gus.host>
Reviewed-By: Trivikram Kamat <trivikr.dev@gmail.com>
1. Merge rule sets for identical selectors.
2. Delete impossible selector block: we have only stability indexes
0, 1, and 2, so there can't be `.api_stability_3` class.
Refs: nodejs.org/api/documentation.html#documentation_stability_index
PR-URL: https://github.com/nodejs/node/pull/20601
Refs: https://nodejs.org/api/documentation.html#documentation_stability_index
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Jon Moss <me@jonathanmoss.me>
Reviewed-By: Trivikram Kamat <trivikr.dev@gmail.com>
Reviewed-By: Tobias Nießen <tniessen@tnie.de>
Fix a line-height issue introduced in #15660 where paragraphs
containing <code> blocks would have unequal line heights.
Fixes: https://github.com/nodejs/nodejs.org/issues/1399
PR-URL: https://github.com/nodejs/node/pull/16200
Reviewed-By: Gireesh Punathil <gpunathi@in.ibm.com>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Yuta Hiroto <hello@about-hiroppy.com>
Reviewed-By: Vse Mozhet Byt <vsemozhetbyt@gmail.com>
Reviewed-By: Tobias Nießen <tniessen@tnie.de>
This makes the docs much more mobile-friendly by adding a viewport meta
tag which makes mobile browers properly scale fonts. Additionally the
font sizes have been cleaned up to use `rem` units where possible. Also
included are some fixes for the version dropdown.
PR-URL: https://github.com/nodejs/node/pull/15660
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
