Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Dune docs #29

Merged
merged 4 commits into from
Mar 12, 2024
Merged

Add Dune docs #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8e3283c
Add docs for ClientOnlyPortal
apfelbox Mar 12, 2024
daa25c7
Add anchor integration docs
apfelbox Mar 12, 2024
44c9470
Move docs + restructure
apfelbox Mar 12, 2024
eec1ed6
Add blog post
apfelbox Mar 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions blog/2024-03-12-dune-additions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
slug: dune-additions
title: New Features + Docs for Dune
authors: [jannik]
tags: [dune]
---

[Dune] now has some docs, with focus on the new React components.

[Dune]: /docs/ts-scss/dune
23 changes: 23 additions & 0 deletions docs/ts-scss/dune/react/anchor-integration.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# Anchor Integration

The anchor integration is a helper to fix weird anchor (URL fragment) positioning issues in React pages.

The main issue is that there is a race condition between the positioning of the browser window and React rendering. If React is finished rendering before the browser is trying to position to window to the anchor, everything is fine: the window will end up at the right place.

However, if the viewport is positioned before React is finished rendering, the temporary position of the anchored element might shift (e.g. because above the element a large container is rendered and pushes the following content down).

There is no proper fix, as we can't tell the browser to wait with the positioning.

This element circumvents the issue, by waiting after the initial render (and then 250ms by default) to reposition the viewport explicitly once again.

## Usage

You should load this component once in your app. If you are using Next.js, a (fairly top-level) layout would be the correct place for it.

```tsx
import {AnchorIntegration} from "@21torr/dune/next/components/Structure/AnchorIntegration.js";

<AnchorIntegration />
```

By default, the component waits 250ms after the initial render, you can adjust this value by explicitly passing the `timeout` prop.
15 changes: 15 additions & 0 deletions docs/ts-scss/dune/react/client-only-portal.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# Client Only Portal

The ClientOnlyPortal is a React portal, that is only rendered on the client.
On the server it will render to `null`.

```tsx
import {ClientOnlyPortal} from "@21torr/dune/react/components/Structure/ClientOnlyPortal.js";

<ClientOnlyPortal>
<div>My content</div>
</ClientOnlyPortal>
```

You can pass an explicit `container` prop, to specify in which element the portal should point to.
By default, the `<body>` is used.
0 docs/ts-scss/dune/cookiebot.mdx → docs/ts-scss/dune/react/cookiebot.mdx
View file
Open in desktop
File renamed without changes.
10 changes: 10 additions & 0 deletions docs/ts-scss/dune/react/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# React Components

This is a list of all React components.

Some of these components are intended to be used in Next.js only, some can be used in a standalone React project.


- [AnchorIntegration](./anchor-integration)
- [ClientOnlyPortal](./client-only-portal)
- [Cookiebot component and hooks](./cookiebot)