chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

integrate gatsby shouldUpdateScroll api

Browse Source
This commit is contained in:
Chuck Dries
2023-03-10 18:04:54 -08:00
parent 713aa58b77
commit f15f8213b2
6 changed files with 34 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
gatsby-browser.tsx
View File

@@ -14,6 +14,29 @@ export const onRouteUpdate = function () {
window.plausible("pageview");
}
};
// docs say you can return a scroll position from this fn, but that's a bold-faced lie
export const shouldUpdateScroll = ({
prevRouterProps,
routerProps: { location },
pathname,
}) => {
if (pathname.startsWith('/photogallery/') && pathname !== '/photogallery/' ) {
console.log('scroll to image')
requestAnimationFrame(() => {
window.scrollTo(0, 180);
})
return false;
}
if (prevRouterProps?.location.pathname === pathname) {
return false;
}
if (pathname === "/photogallery/" && location.hash.length) {
return false;
}
return true;
}
// import * as React from 'react';
// import { MDXProvider } from '@mdx-js/react';

6
src/components/GalleryImage/GalleryImage.js
View File

@@ -63,12 +63,6 @@ const GalleryImage = ({ data, location: { state } }) => {
setIsClient(true);
}, []);
useEffect(() => {
requestAnimationFrame(() => {
window.scrollTo(0, 180);
});
}, [image.base]);
const nextIndex =
sortedImageList && currentIndex < sortedImageList.length
? currentIndex + 1

6
src/components/MasonryGallery.tsx
View File

@@ -47,14 +47,8 @@ const MasonryGallery = ({
[aspectTargetsByBreakpoint]
);
// const { observe, currentBreakpoint } = useDimensions({
// breakpoints,
// });
const { breakpoint } = useBreakpoint(breakpoints, "xs");
console.log("🚀 ~ file: MasonryGallery.tsx:55 ~ breakpoint:", breakpoint)
// const breakpoint = currentBreakpoint.length ? currentBreakpoint : "xs";
const galleryWidth = `calc(100vw - ${
breakpoint === "xs" || breakpoint === "sm" ? "32" : "160"
}px)`;

356
src/gatsby-types.d.ts vendored
View File

@@ -1532,7 +1532,6 @@ type Query = {
readonly allSiteFunction: SiteFunctionConnection;
readonly allSitePage: SitePageConnection;
readonly allSitePlugin: SitePluginConnection;
readonly allStaticImage: StaticImageConnection;
readonly directory: Maybe<Directory>;
readonly file: Maybe<File>;
readonly imageSharp: Maybe<ImageSharp>;
@@ -1541,7 +1540,6 @@ type Query = {
readonly siteFunction: Maybe<SiteFunction>;
readonly sitePage: Maybe<SitePage>;
readonly sitePlugin: Maybe<SitePlugin>;
readonly staticImage: Maybe<StaticImage>;
};
@@ -1609,14 +1607,6 @@ type Query_allSitePluginArgs = {
};
type Query_allStaticImageArgs = {
filter: InputMaybe<StaticImageFilterInput>;
limit: InputMaybe<Scalars['Int']>;
skip: InputMaybe<Scalars['Int']>;
sort: InputMaybe<ReadonlyArray<InputMaybe<StaticImageSortInput>>>;
};
type Query_directoryArgs = {
absolutePath: InputMaybe<StringQueryOperatorInput>;
accessTime: InputMaybe<DateQueryOperatorInput>;
@@ -1786,46 +1776,6 @@ type Query_sitePluginArgs = {
version: InputMaybe<StringQueryOperatorInput>;
};
type Query_staticImageArgs = {
absolutePath: InputMaybe<StringQueryOperatorInput>;
accessTime: InputMaybe<DateQueryOperatorInput>;
atime: InputMaybe<DateQueryOperatorInput>;
atimeMs: InputMaybe<FloatQueryOperatorInput>;
base: InputMaybe<StringQueryOperatorInput>;
birthTime: InputMaybe<DateQueryOperatorInput>;
birthtime: InputMaybe<DateQueryOperatorInput>;
birthtimeMs: InputMaybe<FloatQueryOperatorInput>;
blksize: InputMaybe<IntQueryOperatorInput>;
blocks: InputMaybe<IntQueryOperatorInput>;
changeTime: InputMaybe<DateQueryOperatorInput>;
children: InputMaybe<NodeFilterListInput>;
ctime: InputMaybe<DateQueryOperatorInput>;
ctimeMs: InputMaybe<FloatQueryOperatorInput>;
dev: InputMaybe<IntQueryOperatorInput>;
dir: InputMaybe<StringQueryOperatorInput>;
ext: InputMaybe<StringQueryOperatorInput>;
extension: InputMaybe<StringQueryOperatorInput>;
id: InputMaybe<StringQueryOperatorInput>;
ino: InputMaybe<IntQueryOperatorInput>;
internal: InputMaybe<InternalFilterInput>;
mode: InputMaybe<IntQueryOperatorInput>;
modifiedTime: InputMaybe<DateQueryOperatorInput>;
mtime: InputMaybe<DateQueryOperatorInput>;
mtimeMs: InputMaybe<FloatQueryOperatorInput>;
name: InputMaybe<StringQueryOperatorInput>;
nlink: InputMaybe<IntQueryOperatorInput>;
parent: InputMaybe<NodeFilterInput>;
prettySize: InputMaybe<StringQueryOperatorInput>;
rdev: InputMaybe<IntQueryOperatorInput>;
relativeDirectory: InputMaybe<StringQueryOperatorInput>;
relativePath: InputMaybe<StringQueryOperatorInput>;
root: InputMaybe<StringQueryOperatorInput>;
size: InputMaybe<IntQueryOperatorInput>;
sourceInstanceName: InputMaybe<StringQueryOperatorInput>;
uid: InputMaybe<IntQueryOperatorInput>;
};
type Site = Node & {
readonly buildTime: Maybe<Scalars['Date']>;
readonly children: ReadonlyArray<Node>;
@@ -2592,312 +2542,6 @@ type SortOrderEnum =
| 'ASC'
| 'DESC';
type StaticImage = Node & {
readonly absolutePath: Maybe<Scalars['String']>;
readonly accessTime: Maybe<Scalars['Date']>;
readonly atime: Maybe<Scalars['Date']>;
readonly atimeMs: Maybe<Scalars['Float']>;
readonly base: Maybe<Scalars['String']>;
readonly birthTime: Maybe<Scalars['Date']>;
readonly birthtime: Maybe<Scalars['Date']>;
readonly birthtimeMs: Maybe<Scalars['Float']>;
readonly blksize: Maybe<Scalars['Int']>;
readonly blocks: Maybe<Scalars['Int']>;
readonly changeTime: Maybe<Scalars['Date']>;
readonly children: ReadonlyArray<Node>;
readonly ctime: Maybe<Scalars['Date']>;
readonly ctimeMs: Maybe<Scalars['Float']>;
readonly dev: Maybe<Scalars['Int']>;
readonly dir: Maybe<Scalars['String']>;
readonly ext: Maybe<Scalars['String']>;
readonly extension: Maybe<Scalars['String']>;
readonly id: Scalars['ID'];
readonly ino: Maybe<Scalars['Int']>;
readonly internal: Internal;
readonly mode: Maybe<Scalars['Int']>;
readonly modifiedTime: Maybe<Scalars['Date']>;
readonly mtime: Maybe<Scalars['Date']>;
readonly mtimeMs: Maybe<Scalars['Float']>;
readonly name: Maybe<Scalars['String']>;
readonly nlink: Maybe<Scalars['Int']>;
readonly parent: Maybe<Node>;
readonly prettySize: Maybe<Scalars['String']>;
readonly rdev: Maybe<Scalars['Int']>;
readonly relativeDirectory: Maybe<Scalars['String']>;
readonly relativePath: Maybe<Scalars['String']>;
readonly root: Maybe<Scalars['String']>;
readonly size: Maybe<Scalars['Int']>;
readonly sourceInstanceName: Maybe<Scalars['String']>;
readonly uid: Maybe<Scalars['Int']>;
};
type StaticImage_accessTimeArgs = {
difference: InputMaybe<Scalars['String']>;
formatString: InputMaybe<Scalars['String']>;
fromNow: InputMaybe<Scalars['Boolean']>;
locale: InputMaybe<Scalars['String']>;
};
type StaticImage_atimeArgs = {
difference: InputMaybe<Scalars['String']>;
formatString: InputMaybe<Scalars['String']>;
fromNow: InputMaybe<Scalars['Boolean']>;
locale: InputMaybe<Scalars['String']>;
};
type StaticImage_birthTimeArgs = {
difference: InputMaybe<Scalars['String']>;
formatString: InputMaybe<Scalars['String']>;
fromNow: InputMaybe<Scalars['Boolean']>;
locale: InputMaybe<Scalars['String']>;
};
type StaticImage_birthtimeArgs = {
difference: InputMaybe<Scalars['String']>;
formatString: InputMaybe<Scalars['String']>;
fromNow: InputMaybe<Scalars['Boolean']>;
locale: InputMaybe<Scalars['String']>;
};
type StaticImage_changeTimeArgs = {
difference: InputMaybe<Scalars['String']>;
formatString: InputMaybe<Scalars['String']>;
fromNow: InputMaybe<Scalars['Boolean']>;
locale: InputMaybe<Scalars['String']>;
};
type StaticImage_ctimeArgs = {
difference: InputMaybe<Scalars['String']>;
formatString: InputMaybe<Scalars['String']>;
fromNow: InputMaybe<Scalars['Boolean']>;
locale: InputMaybe<Scalars['String']>;
};
type StaticImage_modifiedTimeArgs = {
difference: InputMaybe<Scalars['String']>;
formatString: InputMaybe<Scalars['String']>;
fromNow: InputMaybe<Scalars['Boolean']>;
locale: InputMaybe<Scalars['String']>;
};
type StaticImage_mtimeArgs = {
difference: InputMaybe<Scalars['String']>;
formatString: InputMaybe<Scalars['String']>;
fromNow: InputMaybe<Scalars['Boolean']>;
locale: InputMaybe<Scalars['String']>;
};
type StaticImageConnection = {
readonly distinct: ReadonlyArray<Scalars['String']>;
readonly edges: ReadonlyArray<StaticImageEdge>;
readonly group: ReadonlyArray<StaticImageGroupConnection>;
readonly max: Maybe<Scalars['Float']>;
readonly min: Maybe<Scalars['Float']>;
readonly nodes: ReadonlyArray<StaticImage>;
readonly pageInfo: PageInfo;
readonly sum: Maybe<Scalars['Float']>;
readonly totalCount: Scalars['Int'];
};
type StaticImageConnection_distinctArgs = {
field: StaticImageFieldSelector;
};
type StaticImageConnection_groupArgs = {
field: StaticImageFieldSelector;
limit: InputMaybe<Scalars['Int']>;
skip: InputMaybe<Scalars['Int']>;
};
type StaticImageConnection_maxArgs = {
field: StaticImageFieldSelector;
};
type StaticImageConnection_minArgs = {
field: StaticImageFieldSelector;
};
type StaticImageConnection_sumArgs = {
field: StaticImageFieldSelector;
};
type StaticImageEdge = {
readonly next: Maybe<StaticImage>;
readonly node: StaticImage;
readonly previous: Maybe<StaticImage>;
};
type StaticImageFieldSelector = {
readonly absolutePath: InputMaybe<FieldSelectorEnum>;
readonly accessTime: InputMaybe<FieldSelectorEnum>;
readonly atime: InputMaybe<FieldSelectorEnum>;
readonly atimeMs: InputMaybe<FieldSelectorEnum>;
readonly base: InputMaybe<FieldSelectorEnum>;
readonly birthTime: InputMaybe<FieldSelectorEnum>;
readonly birthtime: InputMaybe<FieldSelectorEnum>;
readonly birthtimeMs: InputMaybe<FieldSelectorEnum>;
readonly blksize: InputMaybe<FieldSelectorEnum>;
readonly blocks: InputMaybe<FieldSelectorEnum>;
readonly changeTime: InputMaybe<FieldSelectorEnum>;
readonly children: InputMaybe<NodeFieldSelector>;
readonly ctime: InputMaybe<FieldSelectorEnum>;
readonly ctimeMs: InputMaybe<FieldSelectorEnum>;
readonly dev: InputMaybe<FieldSelectorEnum>;
readonly dir: InputMaybe<FieldSelectorEnum>;
readonly ext: InputMaybe<FieldSelectorEnum>;
readonly extension: InputMaybe<FieldSelectorEnum>;
readonly id: InputMaybe<FieldSelectorEnum>;
readonly ino: InputMaybe<FieldSelectorEnum>;
readonly internal: InputMaybe<InternalFieldSelector>;
readonly mode: InputMaybe<FieldSelectorEnum>;
readonly modifiedTime: InputMaybe<FieldSelectorEnum>;
readonly mtime: InputMaybe<FieldSelectorEnum>;
readonly mtimeMs: InputMaybe<FieldSelectorEnum>;
readonly name: InputMaybe<FieldSelectorEnum>;
readonly nlink: InputMaybe<FieldSelectorEnum>;
readonly parent: InputMaybe<NodeFieldSelector>;
readonly prettySize: InputMaybe<FieldSelectorEnum>;
readonly rdev: InputMaybe<FieldSelectorEnum>;
readonly relativeDirectory: InputMaybe<FieldSelectorEnum>;
readonly relativePath: InputMaybe<FieldSelectorEnum>;
readonly root: InputMaybe<FieldSelectorEnum>;
readonly size: InputMaybe<FieldSelectorEnum>;
readonly sourceInstanceName: InputMaybe<FieldSelectorEnum>;
readonly uid: InputMaybe<FieldSelectorEnum>;
};
type StaticImageFilterInput = {
readonly absolutePath: InputMaybe<StringQueryOperatorInput>;
readonly accessTime: InputMaybe<DateQueryOperatorInput>;
readonly atime: InputMaybe<DateQueryOperatorInput>;
readonly atimeMs: InputMaybe<FloatQueryOperatorInput>;
readonly base: InputMaybe<StringQueryOperatorInput>;
readonly birthTime: InputMaybe<DateQueryOperatorInput>;
readonly birthtime: InputMaybe<DateQueryOperatorInput>;
readonly birthtimeMs: InputMaybe<FloatQueryOperatorInput>;
readonly blksize: InputMaybe<IntQueryOperatorInput>;
readonly blocks: InputMaybe<IntQueryOperatorInput>;
readonly changeTime: InputMaybe<DateQueryOperatorInput>;
readonly children: InputMaybe<NodeFilterListInput>;
readonly ctime: InputMaybe<DateQueryOperatorInput>;
readonly ctimeMs: InputMaybe<FloatQueryOperatorInput>;
readonly dev: InputMaybe<IntQueryOperatorInput>;
readonly dir: InputMaybe<StringQueryOperatorInput>;
readonly ext: InputMaybe<StringQueryOperatorInput>;
readonly extension: InputMaybe<StringQueryOperatorInput>;
readonly id: InputMaybe<StringQueryOperatorInput>;
readonly ino: InputMaybe<IntQueryOperatorInput>;
readonly internal: InputMaybe<InternalFilterInput>;
readonly mode: InputMaybe<IntQueryOperatorInput>;
readonly modifiedTime: InputMaybe<DateQueryOperatorInput>;
readonly mtime: InputMaybe<DateQueryOperatorInput>;
readonly mtimeMs: InputMaybe<FloatQueryOperatorInput>;
readonly name: InputMaybe<StringQueryOperatorInput>;
readonly nlink: InputMaybe<IntQueryOperatorInput>;
readonly parent: InputMaybe<NodeFilterInput>;
readonly prettySize: InputMaybe<StringQueryOperatorInput>;
readonly rdev: InputMaybe<IntQueryOperatorInput>;
readonly relativeDirectory: InputMaybe<StringQueryOperatorInput>;
readonly relativePath: InputMaybe<StringQueryOperatorInput>;
readonly root: InputMaybe<StringQueryOperatorInput>;
readonly size: InputMaybe<IntQueryOperatorInput>;
readonly sourceInstanceName: InputMaybe<StringQueryOperatorInput>;
readonly uid: InputMaybe<IntQueryOperatorInput>;
};
type StaticImageGroupConnection = {
readonly distinct: ReadonlyArray<Scalars['String']>;
readonly edges: ReadonlyArray<StaticImageEdge>;
readonly field: Scalars['String'];
readonly fieldValue: Maybe<Scalars['String']>;
readonly group: ReadonlyArray<StaticImageGroupConnection>;
readonly max: Maybe<Scalars['Float']>;
readonly min: Maybe<Scalars['Float']>;
readonly nodes: ReadonlyArray<StaticImage>;
readonly pageInfo: PageInfo;
readonly sum: Maybe<Scalars['Float']>;
readonly totalCount: Scalars['Int'];
};
type StaticImageGroupConnection_distinctArgs = {
field: StaticImageFieldSelector;
};
type StaticImageGroupConnection_groupArgs = {
field: StaticImageFieldSelector;
limit: InputMaybe<Scalars['Int']>;
skip: InputMaybe<Scalars['Int']>;
};
type StaticImageGroupConnection_maxArgs = {
field: StaticImageFieldSelector;
};
type StaticImageGroupConnection_minArgs = {
field: StaticImageFieldSelector;
};
type StaticImageGroupConnection_sumArgs = {
field: StaticImageFieldSelector;
};
type StaticImageSortInput = {
readonly absolutePath: InputMaybe<SortOrderEnum>;
readonly accessTime: InputMaybe<SortOrderEnum>;
readonly atime: InputMaybe<SortOrderEnum>;
readonly atimeMs: InputMaybe<SortOrderEnum>;
readonly base: InputMaybe<SortOrderEnum>;
readonly birthTime: InputMaybe<SortOrderEnum>;
readonly birthtime: InputMaybe<SortOrderEnum>;
readonly birthtimeMs: InputMaybe<SortOrderEnum>;
readonly blksize: InputMaybe<SortOrderEnum>;
readonly blocks: InputMaybe<SortOrderEnum>;
readonly changeTime: InputMaybe<SortOrderEnum>;
readonly children: InputMaybe<NodeSortInput>;
readonly ctime: InputMaybe<SortOrderEnum>;
readonly ctimeMs: InputMaybe<SortOrderEnum>;
readonly dev: InputMaybe<SortOrderEnum>;
readonly dir: InputMaybe<SortOrderEnum>;
readonly ext: InputMaybe<SortOrderEnum>;
readonly extension: InputMaybe<SortOrderEnum>;
readonly id: InputMaybe<SortOrderEnum>;
readonly ino: InputMaybe<SortOrderEnum>;
readonly internal: InputMaybe<InternalSortInput>;
readonly mode: InputMaybe<SortOrderEnum>;
readonly modifiedTime: InputMaybe<SortOrderEnum>;
readonly mtime: InputMaybe<SortOrderEnum>;
readonly mtimeMs: InputMaybe<SortOrderEnum>;
readonly name: InputMaybe<SortOrderEnum>;
readonly nlink: InputMaybe<SortOrderEnum>;
readonly parent: InputMaybe<NodeSortInput>;
readonly prettySize: InputMaybe<SortOrderEnum>;
readonly rdev: InputMaybe<SortOrderEnum>;
readonly relativeDirectory: InputMaybe<SortOrderEnum>;
readonly relativePath: InputMaybe<SortOrderEnum>;
readonly root: InputMaybe<SortOrderEnum>;
readonly size: InputMaybe<SortOrderEnum>;
readonly sourceInstanceName: InputMaybe<SortOrderEnum>;
readonly uid: InputMaybe<SortOrderEnum>;
};
type StringQueryOperatorInput = {
readonly eq: InputMaybe<Scalars['String']>;
readonly glob: InputMaybe<Scalars['String']>;

18
src/pages/photogallery.tsx
View File

@@ -96,17 +96,17 @@ const GalleryPage = ({
getGalleryPageUrl({ sortKey, keyword: filterKeyword, showDebug }, ""),
{ replace: true, state: { suppressAutoscroll: true } }
);
// window.removeEventListener("scroll", removeHash);
window.removeEventListener("scroll", removeHash);
},
[hash, sortKey, filterKeyword, showDebug]
);
// React.useEffect(() => {
// window.addEventListener("scroll", removeHash);
// return () => {
// window.removeEventListener("scroll", removeHash);
// };
// }, [removeHash]);
React.useEffect(() => {
// window.addEventListener("scroll", removeHash);
return () => {
window.removeEventListener("scroll", removeHash);
};
}, [removeHash]);
React.useEffect(() => {
// hacky but it works for now
@@ -125,8 +125,8 @@ const GalleryPage = ({
block: hash.startsWith("all") ? "start" : "center",
});
setTimeout(() => {
removeHash();
}, 500)
window.addEventListener("scroll", removeHash);
}, 900)
});
}, [
hash,

2
src/styles/global.css
View File

@@ -8,6 +8,8 @@
* {
box-sizing: border-box;
}
:root {
scroll-behavior: smooth;
}
/* .hero * {