Apply ResizeObserver to main element in nextra-theme-docs (#567)

* Apply ResizeObserver to main element in nextra-theme-docs

* * Replace use of native scrollIntoView with scroll-into-view-if-needed package
* Add test page

* Added language variations of scroll-with-dynamic-height test page

* chore: add changeset

* test: update snapshot

Co-authored-by: Yixuan Xu <yixuanxu94@outlook.com>

.changeset/brave-dogs-lick.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+fix: should update scroll when height is dynamic

examples/swr-site/pages/docs/meta.en-US.json

@@ -39,5 +39,6 @@
     "href": "https://github.com/shuding/nextra",
     "type": "page",
     "newWindow": true
-  }
+  },
+  "scroll-with-dynamic-height": "Scroll With Dynamic Height"
 }

examples/swr-site/pages/docs/meta.es-ES.json

@@ -15,5 +15,6 @@
   "suspense": "Suspense",
   "middleware": "Middleware",
   "advanced": "Avanzado",
-  "change-log": "Registro de cambios"
+  "change-log": "Registro de cambios",
+  "scroll-with-dynamic-height": "Desplazarse con altura dinámica"
 }

examples/swr-site/pages/docs/meta.ja.json

@@ -15,5 +15,6 @@
   "suspense": "サスペンス",
   "middleware": "ミドルウェア",
   "advanced": "高度な使い方",
-  "change-log": "変更履歴"
+  "change-log": "変更履歴",
+  "scroll-with-dynamic-height": "動的な高さでスクロールする"
 }

examples/swr-site/pages/docs/meta.ko.json

@@ -15,5 +15,6 @@
   "suspense": "서스펜스",
   "middleware": "Middleware",
   "advanced": "고급",
-  "change-log": "변경 로그"
+  "change-log": "변경 로그",
+  "scroll-with-dynamic-height": "동적 높이로 스크롤"
 }

examples/swr-site/pages/docs/meta.ru.json

@@ -15,5 +15,6 @@
   "suspense": "Задержка (Suspense)",
   "middleware": "Промежуточное ПО (Middleware)",
   "advanced": "Продвинутые",
-  "change-log": "Журнал изменений"
+  "change-log": "Журнал изменений",
+  "scroll-with-dynamic-height": "Прокрутка с динамической высотой"
 }

examples/swr-site/pages/docs/meta.zh-CN.json

@@ -15,5 +15,6 @@
   "suspense": "Suspense",
   "middleware": "中间件",
   "advanced": "高级",
-  "change-log": "更新日志"
+  "change-log": "更新日志",
+  "scroll-with-dynamic-height": "以動態高度滾動"
 }

examples/swr-site/pages/docs/scroll-with-dynamic-height.en-US.mdx

@@ -0,0 +1,30 @@
+# Scroll with dynamic height
+
+Tests whether the scroll position is correctly updated when the page height changes due to dynamic content.
+This page loads an image file with a 2-second delay, affecting the page height.
+
+Try the right-clicking the `Section 2` link in the table of contents to the right, and open the link in a new tab.
+
+In the new tab, after the 2-second delay load of the image, the `Section 2` link should remain at the top of the page.
+
+## Section 1
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus egestas sed sed risus pretium quam vulputate. Imperdiet proin fermentum leo vel orci porta non pulvinar. Commodo elit at imperdiet dui. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at. Purus gravida quis blandit turpis cursus in. Pharetra pharetra massa massa ultricies mi. Pretium lectus quam id leo. Cursus turpis massa tincidunt dui ut. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est. Et netus et malesuada fames. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Molestie a iaculis at erat pellentesque adipiscing. Leo vel fringilla est ullamcorper. Faucibus interdum posuere lorem ipsum. Sed arcu non odio euismod.
+
+Massa enim nec dui nunc mattis enim ut tellus elementum. Diam maecenas sed enim ut sem viverra aliquet eget. Non sodales neque sodales ut etiam. Ultrices in iaculis nunc sed. A lacus vestibulum sed arcu. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Dictum varius duis at consectetur. Consectetur adipiscing elit pellentesque habitant. Est ante in nibh mauris cursus mattis molestie. Viverra mauris in aliquam sem fringilla. Suscipit tellus mauris a diam. Enim sit amet venenatis urna.
+
+<img src="https://deelay.me/2000/http://placekitten.com/g/600/400" />
+
+Et egestas quis ipsum suspendisse. Sodales ut eu sem integer vitae justo eget. Commodo quis imperdiet massa tincidunt. Lacus viverra vitae congue eu consequat ac felis. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Id leo in vitae turpis massa sed. Risus ultricies tristique nulla aliquet. Sed sed risus pretium quam vulputate dignissim suspendisse in. Tortor id aliquet lectus proin nibh. Pharetra convallis posuere morbi leo urna molestie. Consectetur a erat nam at lectus urna duis convallis. Mattis pellentesque id nibh tortor id aliquet.
+
+## Section 2
+
+Duis convallis convallis tellus id interdum velit. Porta lorem mollis aliquam ut porttitor leo. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Mi quis hendrerit dolor magna eget. Viverra ipsum nunc aliquet bibendum enim facilisis gravida. Lectus quam id leo in. Porta non pulvinar neque laoreet suspendisse. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Amet risus nullam eget felis eget nunc lobortis. Risus nec feugiat in fermentum posuere urna nec. Tristique magna sit amet purus. Vel fringilla est ullamcorper eget. Vivamus arcu felis bibendum ut tristique et egestas quis ipsum. Massa sed elementum tempus egestas sed sed risus pretium. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Non blandit massa enim nec dui nunc mattis enim. Turpis egestas sed tempus urna. Lacus sed turpis tincidunt id aliquet risus feugiat in.
+
+## Section 3
+
+Duis convallis convallis tellus id interdum velit. Porta lorem mollis aliquam ut porttitor leo. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Mi quis hendrerit dolor magna eget. Viverra ipsum nunc aliquet bibendum enim facilisis gravida. Lectus quam id leo in. Porta non pulvinar neque laoreet suspendisse. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Amet risus nullam eget felis eget nunc lobortis. Risus nec feugiat in fermentum posuere urna nec. Tristique magna sit amet purus. Vel fringilla est ullamcorper eget. Vivamus arcu felis bibendum ut tristique et egestas quis ipsum. Massa sed elementum tempus egestas sed sed risus pretium. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Non blandit massa enim nec dui nunc mattis enim. Turpis egestas sed tempus urna. Lacus sed turpis tincidunt id aliquet risus feugiat in.
+
+Et egestas quis ipsum suspendisse. Sodales ut eu sem integer vitae justo eget. Commodo quis imperdiet massa tincidunt. Lacus viverra vitae congue eu consequat ac felis. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Id leo in vitae turpis massa sed. Risus ultricies tristique nulla aliquet. Sed sed risus pretium quam vulputate dignissim suspendisse in. Tortor id aliquet lectus proin nibh. Pharetra convallis posuere morbi leo urna molestie. Consectetur a erat nam at lectus urna duis convallis. Mattis pellentesque id nibh tortor id aliquet.
+
+Quam elementum pulvinar etiam non quam lacus suspendisse. Aenean sed adipiscing diam donec adipiscing tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Vivamus at augue eget arcu. Odio facilisis mauris sit amet massa vitae tortor. Quis varius quam quisque id diam vel quam. Consectetur lorem donec massa sapien faucibus et molestie ac feugiat. Sollicitudin nibh sit amet commodo nulla facilisi. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Non tellus orci ac auctor augue mauris. Eget dolor morbi non arcu risus quis varius. Vitae aliquet nec ullamcorper sit amet risus. Neque ornare aenean euismod elementum nisi quis eleifend. Nisi lacus sed viverra tellus in hac habitasse platea dictumst. Ut ornare lectus sit amet est placerat in. Velit laoreet id donec ultrices tincidunt arcu non sodales neque. Amet porttitor eget dolor morbi non arcu risus quis. Libero volutpat sed cras ornare arcu dui.

examples/swr-site/pages/docs/scroll-with-dynamic-height.es-ES.mdx

@@ -0,0 +1,26 @@
+# Scroll with dynamic height
+
+Comprueba si la posición de desplazamiento se actualiza correctamente cuando cambia la altura de la página debido al contenido dinámico.
+Esta página carga un archivo de imagen con un retraso de 2 segundos, lo que afecta la altura de la página.
+
+## Section 1
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus egestas sed sed risus pretium quam vulputate. Imperdiet proin fermentum leo vel orci porta non pulvinar. Commodo elit at imperdiet dui. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at. Purus gravida quis blandit turpis cursus in. Pharetra pharetra massa massa ultricies mi. Pretium lectus quam id leo. Cursus turpis massa tincidunt dui ut. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est. Et netus et malesuada fames. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Molestie a iaculis at erat pellentesque adipiscing. Leo vel fringilla est ullamcorper. Faucibus interdum posuere lorem ipsum. Sed arcu non odio euismod.
+
+Massa enim nec dui nunc mattis enim ut tellus elementum. Diam maecenas sed enim ut sem viverra aliquet eget. Non sodales neque sodales ut etiam. Ultrices in iaculis nunc sed. A lacus vestibulum sed arcu. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Dictum varius duis at consectetur. Consectetur adipiscing elit pellentesque habitant. Est ante in nibh mauris cursus mattis molestie. Viverra mauris in aliquam sem fringilla. Suscipit tellus mauris a diam. Enim sit amet venenatis urna.
+
+<img src="https://deelay.me/2000/http://placekitten.com/g/600/400" />
+
+Et egestas quis ipsum suspendisse. Sodales ut eu sem integer vitae justo eget. Commodo quis imperdiet massa tincidunt. Lacus viverra vitae congue eu consequat ac felis. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Id leo in vitae turpis massa sed. Risus ultricies tristique nulla aliquet. Sed sed risus pretium quam vulputate dignissim suspendisse in. Tortor id aliquet lectus proin nibh. Pharetra convallis posuere morbi leo urna molestie. Consectetur a erat nam at lectus urna duis convallis. Mattis pellentesque id nibh tortor id aliquet.
+
+## Section 2
+
+Duis convallis convallis tellus id interdum velit. Porta lorem mollis aliquam ut porttitor leo. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Mi quis hendrerit dolor magna eget. Viverra ipsum nunc aliquet bibendum enim facilisis gravida. Lectus quam id leo in. Porta non pulvinar neque laoreet suspendisse. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Amet risus nullam eget felis eget nunc lobortis. Risus nec feugiat in fermentum posuere urna nec. Tristique magna sit amet purus. Vel fringilla est ullamcorper eget. Vivamus arcu felis bibendum ut tristique et egestas quis ipsum. Massa sed elementum tempus egestas sed sed risus pretium. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Non blandit massa enim nec dui nunc mattis enim. Turpis egestas sed tempus urna. Lacus sed turpis tincidunt id aliquet risus feugiat in.
+
+## Section 3
+
+Duis convallis convallis tellus id interdum velit. Porta lorem mollis aliquam ut porttitor leo. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Mi quis hendrerit dolor magna eget. Viverra ipsum nunc aliquet bibendum enim facilisis gravida. Lectus quam id leo in. Porta non pulvinar neque laoreet suspendisse. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Amet risus nullam eget felis eget nunc lobortis. Risus nec feugiat in fermentum posuere urna nec. Tristique magna sit amet purus. Vel fringilla est ullamcorper eget. Vivamus arcu felis bibendum ut tristique et egestas quis ipsum. Massa sed elementum tempus egestas sed sed risus pretium. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Non blandit massa enim nec dui nunc mattis enim. Turpis egestas sed tempus urna. Lacus sed turpis tincidunt id aliquet risus feugiat in.
+
+Et egestas quis ipsum suspendisse. Sodales ut eu sem integer vitae justo eget. Commodo quis imperdiet massa tincidunt. Lacus viverra vitae congue eu consequat ac felis. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Id leo in vitae turpis massa sed. Risus ultricies tristique nulla aliquet. Sed sed risus pretium quam vulputate dignissim suspendisse in. Tortor id aliquet lectus proin nibh. Pharetra convallis posuere morbi leo urna molestie. Consectetur a erat nam at lectus urna duis convallis. Mattis pellentesque id nibh tortor id aliquet.
+
+Quam elementum pulvinar etiam non quam lacus suspendisse. Aenean sed adipiscing diam donec adipiscing tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Vivamus at augue eget arcu. Odio facilisis mauris sit amet massa vitae tortor. Quis varius quam quisque id diam vel quam. Consectetur lorem donec massa sapien faucibus et molestie ac feugiat. Sollicitudin nibh sit amet commodo nulla facilisi. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Non tellus orci ac auctor augue mauris. Eget dolor morbi non arcu risus quis varius. Vitae aliquet nec ullamcorper sit amet risus. Neque ornare aenean euismod elementum nisi quis eleifend. Nisi lacus sed viverra tellus in hac habitasse platea dictumst. Ut ornare lectus sit amet est placerat in. Velit laoreet id donec ultrices tincidunt arcu non sodales neque. Amet porttitor eget dolor morbi non arcu risus quis. Libero volutpat sed cras ornare arcu dui.

examples/swr-site/pages/docs/scroll-with-dynamic-height.ja.mdx

@@ -0,0 +1,26 @@
+# Scroll with dynamic height
+
+動的コンテンツによってページの高さが変化したときに、スクロール位置が正しく更新されるかどうかをテストします。
+このページは2秒の遅延で画像ファイルをロードし、ページの高さに影響します。
+
+## Section 1
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus egestas sed sed risus pretium quam vulputate. Imperdiet proin fermentum leo vel orci porta non pulvinar. Commodo elit at imperdiet dui. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at. Purus gravida quis blandit turpis cursus in. Pharetra pharetra massa massa ultricies mi. Pretium lectus quam id leo. Cursus turpis massa tincidunt dui ut. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est. Et netus et malesuada fames. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Molestie a iaculis at erat pellentesque adipiscing. Leo vel fringilla est ullamcorper. Faucibus interdum posuere lorem ipsum. Sed arcu non odio euismod.
+
+Massa enim nec dui nunc mattis enim ut tellus elementum. Diam maecenas sed enim ut sem viverra aliquet eget. Non sodales neque sodales ut etiam. Ultrices in iaculis nunc sed. A lacus vestibulum sed arcu. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Dictum varius duis at consectetur. Consectetur adipiscing elit pellentesque habitant. Est ante in nibh mauris cursus mattis molestie. Viverra mauris in aliquam sem fringilla. Suscipit tellus mauris a diam. Enim sit amet venenatis urna.
+
+<img src="https://deelay.me/2000/http://placekitten.com/g/600/400" />
+
+Et egestas quis ipsum suspendisse. Sodales ut eu sem integer vitae justo eget. Commodo quis imperdiet massa tincidunt. Lacus viverra vitae congue eu consequat ac felis. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Id leo in vitae turpis massa sed. Risus ultricies tristique nulla aliquet. Sed sed risus pretium quam vulputate dignissim suspendisse in. Tortor id aliquet lectus proin nibh. Pharetra convallis posuere morbi leo urna molestie. Consectetur a erat nam at lectus urna duis convallis. Mattis pellentesque id nibh tortor id aliquet.
+
+## Section 2
+
+Duis convallis convallis tellus id interdum velit. Porta lorem mollis aliquam ut porttitor leo. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Mi quis hendrerit dolor magna eget. Viverra ipsum nunc aliquet bibendum enim facilisis gravida. Lectus quam id leo in. Porta non pulvinar neque laoreet suspendisse. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Amet risus nullam eget felis eget nunc lobortis. Risus nec feugiat in fermentum posuere urna nec. Tristique magna sit amet purus. Vel fringilla est ullamcorper eget. Vivamus arcu felis bibendum ut tristique et egestas quis ipsum. Massa sed elementum tempus egestas sed sed risus pretium. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Non blandit massa enim nec dui nunc mattis enim. Turpis egestas sed tempus urna. Lacus sed turpis tincidunt id aliquet risus feugiat in.
+
+## Section 3
+
+Duis convallis convallis tellus id interdum velit. Porta lorem mollis aliquam ut porttitor leo. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Mi quis hendrerit dolor magna eget. Viverra ipsum nunc aliquet bibendum enim facilisis gravida. Lectus quam id leo in. Porta non pulvinar neque laoreet suspendisse. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Amet risus nullam eget felis eget nunc lobortis. Risus nec feugiat in fermentum posuere urna nec. Tristique magna sit amet purus. Vel fringilla est ullamcorper eget. Vivamus arcu felis bibendum ut tristique et egestas quis ipsum. Massa sed elementum tempus egestas sed sed risus pretium. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Non blandit massa enim nec dui nunc mattis enim. Turpis egestas sed tempus urna. Lacus sed turpis tincidunt id aliquet risus feugiat in.
+
+Et egestas quis ipsum suspendisse. Sodales ut eu sem integer vitae justo eget. Commodo quis imperdiet massa tincidunt. Lacus viverra vitae congue eu consequat ac felis. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Id leo in vitae turpis massa sed. Risus ultricies tristique nulla aliquet. Sed sed risus pretium quam vulputate dignissim suspendisse in. Tortor id aliquet lectus proin nibh. Pharetra convallis posuere morbi leo urna molestie. Consectetur a erat nam at lectus urna duis convallis. Mattis pellentesque id nibh tortor id aliquet.
+
+Quam elementum pulvinar etiam non quam lacus suspendisse. Aenean sed adipiscing diam donec adipiscing tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Vivamus at augue eget arcu. Odio facilisis mauris sit amet massa vitae tortor. Quis varius quam quisque id diam vel quam. Consectetur lorem donec massa sapien faucibus et molestie ac feugiat. Sollicitudin nibh sit amet commodo nulla facilisi. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Non tellus orci ac auctor augue mauris. Eget dolor morbi non arcu risus quis varius. Vitae aliquet nec ullamcorper sit amet risus. Neque ornare aenean euismod elementum nisi quis eleifend. Nisi lacus sed viverra tellus in hac habitasse platea dictumst. Ut ornare lectus sit amet est placerat in. Velit laoreet id donec ultrices tincidunt arcu non sodales neque. Amet porttitor eget dolor morbi non arcu risus quis. Libero volutpat sed cras ornare arcu dui.