From 8e3283c77af5791f2fdcc32b737eff00b05c9487 Mon Sep 17 00:00:00 2001 From: Jannik Zschiesche Date: Tue, 12 Mar 2024 18:19:52 +0100 Subject: [PATCH 1/4] Add docs for ClientOnlyPortal --- docs/ts-scss/dune/client-only-portal.mdx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 docs/ts-scss/dune/client-only-portal.mdx diff --git a/docs/ts-scss/dune/client-only-portal.mdx b/docs/ts-scss/dune/client-only-portal.mdx new file mode 100644 index 0000000..219c6b8 --- /dev/null +++ b/docs/ts-scss/dune/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"; + + +
My content
+ +``` + +You can pass an explicit `container` prop, to specify in which element the portal should point to. +By default, the `` is used. From daa25c79e2eaa9df449c9d13dfafe074867dccab Mon Sep 17 00:00:00 2001 From: Jannik Zschiesche Date: Tue, 12 Mar 2024 18:25:52 +0100 Subject: [PATCH 2/4] Add anchor integration docs --- docs/ts-scss/dune/anchor-integration.mdx | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 docs/ts-scss/dune/anchor-integration.mdx diff --git a/docs/ts-scss/dune/anchor-integration.mdx b/docs/ts-scss/dune/anchor-integration.mdx new file mode 100644 index 0000000..74b3563 --- /dev/null +++ b/docs/ts-scss/dune/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"; + + +``` + +By default, the component waits 250ms after the initial render, you can adjust this value by explicitly passing the `timeout` prop. From 44c9470d659a492099ca57e4368fa63659f5527e Mon Sep 17 00:00:00 2001 From: Jannik Zschiesche Date: Tue, 12 Mar 2024 18:29:48 +0100 Subject: [PATCH 3/4] Move docs + restructure --- docs/ts-scss/dune/{ => react}/anchor-integration.mdx | 0 docs/ts-scss/dune/{ => react}/client-only-portal.mdx | 0 docs/ts-scss/dune/{ => react}/cookiebot.mdx | 0 docs/ts-scss/dune/react/index.mdx | 10 ++++++++++ 4 files changed, 10 insertions(+) rename docs/ts-scss/dune/{ => react}/anchor-integration.mdx (100%) rename docs/ts-scss/dune/{ => react}/client-only-portal.mdx (100%) rename docs/ts-scss/dune/{ => react}/cookiebot.mdx (100%) create mode 100644 docs/ts-scss/dune/react/index.mdx diff --git a/docs/ts-scss/dune/anchor-integration.mdx b/docs/ts-scss/dune/react/anchor-integration.mdx similarity index 100% rename from docs/ts-scss/dune/anchor-integration.mdx rename to docs/ts-scss/dune/react/anchor-integration.mdx diff --git a/docs/ts-scss/dune/client-only-portal.mdx b/docs/ts-scss/dune/react/client-only-portal.mdx similarity index 100% rename from docs/ts-scss/dune/client-only-portal.mdx rename to docs/ts-scss/dune/react/client-only-portal.mdx diff --git a/docs/ts-scss/dune/cookiebot.mdx b/docs/ts-scss/dune/react/cookiebot.mdx similarity index 100% rename from docs/ts-scss/dune/cookiebot.mdx rename to 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 new file mode 100644 index 0000000..b0b6ef7 --- /dev/null +++ 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) From eec1ed6863c1982afade8dadf5402364820fee38 Mon Sep 17 00:00:00 2001 From: Jannik Zschiesche Date: Tue, 12 Mar 2024 18:30:59 +0100 Subject: [PATCH 4/4] Add blog post --- blog/2024-03-12-dune-additions.mdx | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 blog/2024-03-12-dune-additions.mdx diff --git a/blog/2024-03-12-dune-additions.mdx b/blog/2024-03-12-dune-additions.mdx new file mode 100644 index 0000000..52d89d6 --- /dev/null +++ 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