git.iko.soy/urbit.org
on master help sign in
reset scroll on docs nav
d046c66Gavin Atkinson
components/ContentArea.js+25−2
compare with master
unifiedsplit
@@ -1,5 +1,6 @@
1import Section from "./Section";
1import Section from "./Section";
2−import { useState, useEffect } from "react";
2+import { useState, useEffect, useRef } from "react";
3+import { useRouter } from "next/router";
3import { TableOfContents } from "./TableOfContents";
4import { TableOfContents } from "./TableOfContents";
4
5
5export default function ContentArea(props) {
6export default function ContentArea(props) {
@@ -20,9 +21,31 @@ export default function ContentArea(props) {
20 setShortcut(detectOS());
21 setShortcut(detectOS());
21 }, []);
22 }, []);
22
23
24+ const scrollBox = useRef();
25+
26+ const router = useRouter();
27+
28+ useEffect(() => {
29+ const handleRouteChange = () => {
30+ if (scrollBox.current === null) return;
31+ scrollBox.current.scrollTop = 0;
32+ };
33+
34+ router.events.on("routeChangeComplete", handleRouteChange);
35+
36+ // If the component is unmounted, unsubscribe
37+ // from the event with the `off` method:
38+ return () => {
39+ router.events.off("routeChangeStart", handleRouteChange);
40+ };
41+ }, []);
42+
23 return (
43 return (
24 <div className="w-full min-w-0 flex flex-col items-center">
44 <div className="w-full min-w-0 flex flex-col items-center">
45+ <div
46+ ref={scrollBox}
25− <div className="px-4 md:px-12 lg:px-24 pb-24 pt-8 md:pt-10 lg:pt-16 flex flex-col w-full max-w-screen-xl max-h-screen h-screen overflow-y-scroll">
47+ className="px-4 md:px-12 lg:px-24 pb-24 pt-8 md:pt-10 lg:pt-16 flex flex-col w-full max-w-screen-xl max-h-screen h-screen overflow-y-scroll"
48+ >
26 <div className="flex justify-between w-full items-center flex-shrink-0">
49 <div className="flex justify-between w-full items-center flex-shrink-0">
27 <div className="type-ui text-gray">{props.breadcrumbs}</div>
50 <div className="type-ui text-gray">{props.breadcrumbs}</div>
28 <div className="hidden md:block">
51 <div className="hidden md:block">
pages/docs/[[...slug]].js+1
@@ -112,6 +112,7 @@ export default function DocsLayout({
112 nextPost,
112 nextPost,
113}) {
113}) {
114 const router = useRouter();
114 const router = useRouter();
115+
115 const isSelected = "/docs".includes(router.asPath);
116 const isSelected = "/docs".includes(router.asPath);
116 const selectedClasses = classnames({
117 const selectedClasses = classnames({
117 dot: isSelected,
118 dot: isSelected,
pages/updates.js+1−1
@@ -10,7 +10,7 @@ import Section from "../components/Section";
10import { getAllPosts, formatDate } from "../lib/lib";
10import { getAllPosts, formatDate } from "../lib/lib";
11import { contact } from "../lib/constants";
11import { contact } from "../lib/constants";
12
12
13−export default function Blog({ posts, search }) {
13+export default function Updates({ posts, search }) {
14 const post = {
14 const post = {
15 title: "Updates",
15 title: "Updates",
16 description: "Missives from the Urbit Foundation.",
16 description: "Missives from the Urbit Foundation.",