+ {props.children}
+
+ );
+}
\ No newline at end of file
diff --git a/src/gatsby-types.d.ts b/src/gatsby-types.d.ts
index 6339c77..e2d2cc4 100644
--- a/src/gatsby-types.d.ts
+++ b/src/gatsby-types.d.ts
@@ -1532,6 +1532,7 @@ type Query = {
readonly allSiteFunction: SiteFunctionConnection;
readonly allSitePage: SitePageConnection;
readonly allSitePlugin: SitePluginConnection;
+ readonly allStaticImage: StaticImageConnection;
readonly directory: Maybe
;
readonly file: Maybe;
readonly imageSharp: Maybe;
@@ -1540,6 +1541,7 @@ type Query = {
readonly siteFunction: Maybe;
readonly sitePage: Maybe;
readonly sitePlugin: Maybe;
+ readonly staticImage: Maybe;
};
@@ -1607,6 +1609,14 @@ type Query_allSitePluginArgs = {
};
+type Query_allStaticImageArgs = {
+ filter: InputMaybe;
+ limit: InputMaybe;
+ skip: InputMaybe;
+ sort: InputMaybe>>;
+};
+
+
type Query_directoryArgs = {
absolutePath: InputMaybe;
accessTime: InputMaybe;
@@ -1776,6 +1786,46 @@ type Query_sitePluginArgs = {
version: InputMaybe;
};
+
+type Query_staticImageArgs = {
+ absolutePath: InputMaybe;
+ accessTime: InputMaybe;
+ atime: InputMaybe;
+ atimeMs: InputMaybe;
+ base: InputMaybe;
+ birthTime: InputMaybe;
+ birthtime: InputMaybe;
+ birthtimeMs: InputMaybe;
+ blksize: InputMaybe;
+ blocks: InputMaybe;
+ changeTime: InputMaybe;
+ children: InputMaybe;
+ ctime: InputMaybe;
+ ctimeMs: InputMaybe;
+ dev: InputMaybe;
+ dir: InputMaybe;
+ ext: InputMaybe;
+ extension: InputMaybe;
+ id: InputMaybe;
+ ino: InputMaybe;
+ internal: InputMaybe;
+ mode: InputMaybe;
+ modifiedTime: InputMaybe;
+ mtime: InputMaybe;
+ mtimeMs: InputMaybe;
+ name: InputMaybe;
+ nlink: InputMaybe;
+ parent: InputMaybe;
+ prettySize: InputMaybe;
+ rdev: InputMaybe;
+ relativeDirectory: InputMaybe;
+ relativePath: InputMaybe;
+ root: InputMaybe;
+ size: InputMaybe;
+ sourceInstanceName: InputMaybe;
+ uid: InputMaybe;
+};
+
type Site = Node & {
readonly buildTime: Maybe;
readonly children: ReadonlyArray;
@@ -2542,6 +2592,312 @@ type SortOrderEnum =
| 'ASC'
| 'DESC';
+type StaticImage = Node & {
+ readonly absolutePath: Maybe;
+ readonly accessTime: Maybe;
+ readonly atime: Maybe;
+ readonly atimeMs: Maybe;
+ readonly base: Maybe;
+ readonly birthTime: Maybe;
+ readonly birthtime: Maybe;
+ readonly birthtimeMs: Maybe;
+ readonly blksize: Maybe;
+ readonly blocks: Maybe;
+ readonly changeTime: Maybe;
+ readonly children: ReadonlyArray;
+ readonly ctime: Maybe;
+ readonly ctimeMs: Maybe;
+ readonly dev: Maybe;
+ readonly dir: Maybe;
+ readonly ext: Maybe;
+ readonly extension: Maybe;
+ readonly id: Scalars['ID'];
+ readonly ino: Maybe;
+ readonly internal: Internal;
+ readonly mode: Maybe;
+ readonly modifiedTime: Maybe;
+ readonly mtime: Maybe;
+ readonly mtimeMs: Maybe;
+ readonly name: Maybe;
+ readonly nlink: Maybe;
+ readonly parent: Maybe;
+ readonly prettySize: Maybe;
+ readonly rdev: Maybe;
+ readonly relativeDirectory: Maybe;
+ readonly relativePath: Maybe;
+ readonly root: Maybe;
+ readonly size: Maybe;
+ readonly sourceInstanceName: Maybe;
+ readonly uid: Maybe;
+};
+
+
+type StaticImage_accessTimeArgs = {
+ difference: InputMaybe;
+ formatString: InputMaybe;
+ fromNow: InputMaybe;
+ locale: InputMaybe;
+};
+
+
+type StaticImage_atimeArgs = {
+ difference: InputMaybe;
+ formatString: InputMaybe;
+ fromNow: InputMaybe;
+ locale: InputMaybe;
+};
+
+
+type StaticImage_birthTimeArgs = {
+ difference: InputMaybe;
+ formatString: InputMaybe;
+ fromNow: InputMaybe;
+ locale: InputMaybe;
+};
+
+
+type StaticImage_birthtimeArgs = {
+ difference: InputMaybe;
+ formatString: InputMaybe;
+ fromNow: InputMaybe;
+ locale: InputMaybe;
+};
+
+
+type StaticImage_changeTimeArgs = {
+ difference: InputMaybe;
+ formatString: InputMaybe;
+ fromNow: InputMaybe;
+ locale: InputMaybe;
+};
+
+
+type StaticImage_ctimeArgs = {
+ difference: InputMaybe;
+ formatString: InputMaybe;
+ fromNow: InputMaybe;
+ locale: InputMaybe;
+};
+
+
+type StaticImage_modifiedTimeArgs = {
+ difference: InputMaybe;
+ formatString: InputMaybe;
+ fromNow: InputMaybe;
+ locale: InputMaybe;
+};
+
+
+type StaticImage_mtimeArgs = {
+ difference: InputMaybe;
+ formatString: InputMaybe;
+ fromNow: InputMaybe;
+ locale: InputMaybe;
+};
+
+type StaticImageConnection = {
+ readonly distinct: ReadonlyArray;
+ readonly edges: ReadonlyArray;
+ readonly group: ReadonlyArray;
+ readonly max: Maybe;
+ readonly min: Maybe;
+ readonly nodes: ReadonlyArray;
+ readonly pageInfo: PageInfo;
+ readonly sum: Maybe;
+ readonly totalCount: Scalars['Int'];
+};
+
+
+type StaticImageConnection_distinctArgs = {
+ field: StaticImageFieldSelector;
+};
+
+
+type StaticImageConnection_groupArgs = {
+ field: StaticImageFieldSelector;
+ limit: InputMaybe;
+ skip: InputMaybe;
+};
+
+
+type StaticImageConnection_maxArgs = {
+ field: StaticImageFieldSelector;
+};
+
+
+type StaticImageConnection_minArgs = {
+ field: StaticImageFieldSelector;
+};
+
+
+type StaticImageConnection_sumArgs = {
+ field: StaticImageFieldSelector;
+};
+
+type StaticImageEdge = {
+ readonly next: Maybe;
+ readonly node: StaticImage;
+ readonly previous: Maybe;
+};
+
+type StaticImageFieldSelector = {
+ readonly absolutePath: InputMaybe;
+ readonly accessTime: InputMaybe;
+ readonly atime: InputMaybe;
+ readonly atimeMs: InputMaybe;
+ readonly base: InputMaybe;
+ readonly birthTime: InputMaybe;
+ readonly birthtime: InputMaybe;
+ readonly birthtimeMs: InputMaybe;
+ readonly blksize: InputMaybe;
+ readonly blocks: InputMaybe;
+ readonly changeTime: InputMaybe;
+ readonly children: InputMaybe;
+ readonly ctime: InputMaybe;
+ readonly ctimeMs: InputMaybe;
+ readonly dev: InputMaybe;
+ readonly dir: InputMaybe;
+ readonly ext: InputMaybe;
+ readonly extension: InputMaybe;
+ readonly id: InputMaybe;
+ readonly ino: InputMaybe;
+ readonly internal: InputMaybe;
+ readonly mode: InputMaybe;
+ readonly modifiedTime: InputMaybe;
+ readonly mtime: InputMaybe;
+ readonly mtimeMs: InputMaybe;
+ readonly name: InputMaybe;
+ readonly nlink: InputMaybe;
+ readonly parent: InputMaybe;
+ readonly prettySize: InputMaybe;
+ readonly rdev: InputMaybe;
+ readonly relativeDirectory: InputMaybe;
+ readonly relativePath: InputMaybe;
+ readonly root: InputMaybe;
+ readonly size: InputMaybe;
+ readonly sourceInstanceName: InputMaybe;
+ readonly uid: InputMaybe;
+};
+
+type StaticImageFilterInput = {
+ readonly absolutePath: InputMaybe;
+ readonly accessTime: InputMaybe;
+ readonly atime: InputMaybe;
+ readonly atimeMs: InputMaybe;
+ readonly base: InputMaybe;
+ readonly birthTime: InputMaybe;
+ readonly birthtime: InputMaybe;
+ readonly birthtimeMs: InputMaybe;
+ readonly blksize: InputMaybe;
+ readonly blocks: InputMaybe;
+ readonly changeTime: InputMaybe;
+ readonly children: InputMaybe;
+ readonly ctime: InputMaybe;
+ readonly ctimeMs: InputMaybe;
+ readonly dev: InputMaybe;
+ readonly dir: InputMaybe;
+ readonly ext: InputMaybe;
+ readonly extension: InputMaybe;
+ readonly id: InputMaybe;
+ readonly ino: InputMaybe;
+ readonly internal: InputMaybe;
+ readonly mode: InputMaybe;
+ readonly modifiedTime: InputMaybe;
+ readonly mtime: InputMaybe;
+ readonly mtimeMs: InputMaybe;
+ readonly name: InputMaybe;
+ readonly nlink: InputMaybe;
+ readonly parent: InputMaybe;
+ readonly prettySize: InputMaybe;
+ readonly rdev: InputMaybe;
+ readonly relativeDirectory: InputMaybe;
+ readonly relativePath: InputMaybe;
+ readonly root: InputMaybe;
+ readonly size: InputMaybe;
+ readonly sourceInstanceName: InputMaybe;
+ readonly uid: InputMaybe;
+};
+
+type StaticImageGroupConnection = {
+ readonly distinct: ReadonlyArray;
+ readonly edges: ReadonlyArray;
+ readonly field: Scalars['String'];
+ readonly fieldValue: Maybe;
+ readonly group: ReadonlyArray;
+ readonly max: Maybe;
+ readonly min: Maybe;
+ readonly nodes: ReadonlyArray;
+ readonly pageInfo: PageInfo;
+ readonly sum: Maybe;
+ readonly totalCount: Scalars['Int'];
+};
+
+
+type StaticImageGroupConnection_distinctArgs = {
+ field: StaticImageFieldSelector;
+};
+
+
+type StaticImageGroupConnection_groupArgs = {
+ field: StaticImageFieldSelector;
+ limit: InputMaybe;
+ skip: InputMaybe;
+};
+
+
+type StaticImageGroupConnection_maxArgs = {
+ field: StaticImageFieldSelector;
+};
+
+
+type StaticImageGroupConnection_minArgs = {
+ field: StaticImageFieldSelector;
+};
+
+
+type StaticImageGroupConnection_sumArgs = {
+ field: StaticImageFieldSelector;
+};
+
+type StaticImageSortInput = {
+ readonly absolutePath: InputMaybe;
+ readonly accessTime: InputMaybe;
+ readonly atime: InputMaybe;
+ readonly atimeMs: InputMaybe;
+ readonly base: InputMaybe;
+ readonly birthTime: InputMaybe;
+ readonly birthtime: InputMaybe;
+ readonly birthtimeMs: InputMaybe;
+ readonly blksize: InputMaybe;
+ readonly blocks: InputMaybe;
+ readonly changeTime: InputMaybe;
+ readonly children: InputMaybe;
+ readonly ctime: InputMaybe;
+ readonly ctimeMs: InputMaybe;
+ readonly dev: InputMaybe;
+ readonly dir: InputMaybe;
+ readonly ext: InputMaybe;
+ readonly extension: InputMaybe;
+ readonly id: InputMaybe;
+ readonly ino: InputMaybe;
+ readonly internal: InputMaybe;
+ readonly mode: InputMaybe;
+ readonly modifiedTime: InputMaybe;
+ readonly mtime: InputMaybe;
+ readonly mtimeMs: InputMaybe;
+ readonly name: InputMaybe;
+ readonly nlink: InputMaybe;
+ readonly parent: InputMaybe;
+ readonly prettySize: InputMaybe;
+ readonly rdev: InputMaybe;
+ readonly relativeDirectory: InputMaybe;
+ readonly relativePath: InputMaybe;
+ readonly root: InputMaybe;
+ readonly size: InputMaybe;
+ readonly sourceInstanceName: InputMaybe;
+ readonly uid: InputMaybe;
+};
+
type StringQueryOperatorInput = {
readonly eq: InputMaybe;
readonly glob: InputMaybe;
diff --git a/src/pages/photogallery.tsx b/src/pages/photogallery.tsx
index 6d7fa1e..c9fb21a 100644
--- a/src/pages/photogallery.tsx
+++ b/src/pages/photogallery.tsx
@@ -17,6 +17,7 @@ import Nav from "../components/Nav";
import { Item, Select } from "../components/Select";
import { Switch } from "../components/Switch";
import ColorPalette from "@spectrum-icons/workflow/ColorPalette";
+import { ToggleButton } from "../components/ToggleButton";
const SORT_KEYS = {
hue: ["fields", "imageMeta", "vibrantHue"],
@@ -80,26 +81,23 @@ const GalleryPage = ({
getGalleryPageUrl(
{ sortKey: newSortKey, keyword: filterKeyword, showDebug },
hash
- ),
- { replace: true }
+ )
+ // { replace: true }
);
},
[filterKeyword, hash, showDebug]
);
- const removeHash = React.useCallback(
- () => {
- if (!hash.length) {
- return;
- }
- navigate(
- getGalleryPageUrl({ sortKey, keyword: filterKeyword, showDebug }, ""),
- // { replace: false }
- );
- window.removeEventListener("scroll", removeHash);
- },
- [hash, sortKey, filterKeyword, showDebug]
- );
+ const removeHash = React.useCallback(() => {
+ if (!hash.length) {
+ return;
+ }
+ navigate(
+ getGalleryPageUrl({ sortKey, keyword: filterKeyword, showDebug }, ""),
+ { replace: true }
+ );
+ window.removeEventListener("scroll", removeHash);
+ }, [hash, sortKey, filterKeyword, showDebug]);
React.useEffect(() => {
// window.addEventListener("scroll", removeHash);
@@ -123,15 +121,13 @@ const GalleryPage = ({
console.log("scrolling into view manually", el.offsetTop);
el.scrollIntoView({
block: hash.startsWith("all") ? "start" : "center",
+ behavior: "smooth",
});
setTimeout(() => {
window.addEventListener("scroll", removeHash);
- }, 100)
+ }, 100);
});
- }, [
- hash,
- removeHash
- ]);
+ }, [hash, removeHash]);
const images: GalleryImage[] = React.useMemo(() => {
const sort =
@@ -173,24 +169,44 @@ const GalleryPage = ({
);
}, [data]);
+ const [dbgTags, setDbgTags] = React.useState(false);
+ const [dbgSortKey, setDbgSortKey] = React.useState(false);
+ const [dbgName, setDbgName] = React.useState(false);
const dataFn = React.useCallback(
- (image: GalleryImage): string | null => {
+ (image: GalleryImage): string[] | null => {
if (!showDebug) {
return null;
}
- if (sortKey === "rating") {
- return `[${R.pathOr(null, SORT_KEYS.rating, image)}] ${image.base}`;
+ let data: string[] = [];
+ if (dbgName) {
+ data.push(image.base);
}
- if (sortKey === "datePublished") {
- const date = R.pathOr(null, SORT_KEYS.datePublished, image);
- if (!date) {
- return null;
+ if (dbgSortKey) {
+ switch (sortKey) {
+ case "hue":
+ case "rating": {
+ data.push(`[${R.pathOr(null, SORT_KEYS[sortKey], image)}]`);
+ break;
+ }
+ case "date":
+ case "datePublished": {
+ const date = R.pathOr(null, SORT_KEYS[sortKey], image);
+ if (date) {
+ data.push(`[${new Date(date).toLocaleString()}]`);
+ }
+ break;
+ }
}
- return new Date(date).toLocaleString();
}
- return null;
+ if (dbgTags) {
+ const keywords = image.fields?.imageMeta?.meta?.Keywords?.join(',')
+ if (keywords) {
+ data.push(keywords);
+ }
+ }
+ return data;
},
- [showDebug, sortKey]
+ [showDebug, sortKey, dbgName, dbgSortKey, dbgTags]
);
return (
@@ -283,7 +299,20 @@ const GalleryPage = ({
onPick={onKeywordPick}
value={filterKeyword}
/>
-
+
+ {showDebug && (
+
+