| #
3a141dca |
| 12-Sep-2023 |
Keith Kurak <[email protected]> |
[docs] Make Copiable header links / Anchor tags for collapsible headers (#24293)
# Why
https://linear.app/expo/issue/ENG-9863/make-collapsible-headers-as-anchor-links
Fun story:
1. I origina
[docs] Make Copiable header links / Anchor tags for collapsible headers (#24293)
# Why
https://linear.app/expo/issue/ENG-9863/make-collapsible-headers-as-anchor-links
Fun story:
1. I originally though @brentvatne was asking for a quick copy button
for the anchor links for headers
2. So I did that, and __then__ I read @amandeepmittal's Linear issue.
3. So then I made anchor tags for collapsible headers
4. ...which required the quick copy button to be useful.
# How
## Copiable header links
I took inspiration from the [React Native Upgrade
Advisor](https://react-native-community.github.io/upgrade-helper/?from=0.71.11&to=0.72.1):
<img width="428" alt="image"
src="https://github.com/expo/expo/assets/8053974/d6bf26e5-2ade-481a-ad01-16a264b3e480">
Right now, it only shows the first tooltip. I would like it have it
change on copy like the upgrade advisor, but the tooltip disappears on
copy, and then when you hover over it again, it shows both tooltips, so
there's some figuring out about how tippy.js works to do to make this
work:
<img width="221" alt="image"
src="https://github.com/expo/expo/assets/8053974/304639f9-e146-4a6e-87b8-249a0cbec029">
Like the Upgrade Advisor links, I made the anchor button itself not move
the page/ set the URL, since it seemed kind of nice to be able to do
just do the copy. I could see going the other way, though
## Anchors for collapsible links
Some of this code is copied from `Permalink` in order to make the
`details` component be aware of the anchor tag, opening the details when
navigating to the anchor.
These headers/ anchor links definitely do not set the URL, so the page
doesn't jump while it's also expanding an element. Thus, the only way to
get the anchor is by pressing the copy icon. But pasting in the URL will
take you to the collapsible section and expand it, while still allowing
you to collapse it again.
# Test Plan
- [x] didn't break existing headers/ permalink functionality
- [x] copy works
- [x] didn't break existing collapsible functionality
- [x] can copy a collapsible link
- [x] can navigate directly to a collapsible and it expands
- [x] can still collapse a collapsible after navigating
# Checklist
<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [ ] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [ ] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Bartosz Kaszubowski <[email protected]>
show more ...
|
| #
5e14cbf7 |
| 09-Feb-2022 |
Cedric van Putten <[email protected]> |
[docs] Partially add redesigned sidebar navigation (#16192)
* [docs] Add first draft sidebar navigation components
* [docs] Add active page marker and fix spacing
* [docs] Add navigation sideb
[docs] Partially add redesigned sidebar navigation (#16192)
* [docs] Add first draft sidebar navigation components
* [docs] Add active page marker and fix spacing
* [docs] Add navigation sidebar renderer and fix section list
* [docs] Add semi-optimized active node detection
* [docs] Add tests for navigation active node detection
* [docs] Add navigation render tests
* [docs] Fix linting issues
* [docs] Stop the iteration early if the active nodes are found
* [docs] Align group titles with text
* [docs] Make the error message in navigation renders a bit clearer
show more ...
|