Merge pull request #29 from 21TORR/dune

Add Dune docs
21TORR · Mar 12, 2024 · 3fc2afe · 3fc2afe
2 parents 831d960 + eec1ed6
commit 3fc2afe
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 0 deletions.
diff --git a/blog/2024-03-12-dune-additions.mdx b/blog/2024-03-12-dune-additions.mdx
@@ -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
diff --git a/docs/ts-scss/dune/react/anchor-integration.mdx b/docs/ts-scss/dune/react/anchor-integration.mdx
@@ -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.
diff --git a/docs/ts-scss/dune/react/client-only-portal.mdx b/docs/ts-scss/dune/react/client-only-portal.mdx
@@ -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.
diff --git a/docs/ts-scss/dune/cookiebot.mdx → docs/ts-scss/dune/react/cookiebot.mdx b/docs/ts-scss/dune/cookiebot.mdx → docs/ts-scss/dune/react/cookiebot.mdx
diff --git a/docs/ts-scss/dune/react/index.mdx b/docs/ts-scss/dune/react/index.mdx
@@ -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)