lightly tint background with accent color
This commit is contained in:
parent
0e4248e29e
commit
ba82aa78cf
@ -51,7 +51,7 @@
|
||||
"react-cool-dimensions": "^2.0.7",
|
||||
"react-div-100vh": "^0.7.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-helmet": "latest",
|
||||
"react-stately": "^3.19.0",
|
||||
"react-tiny-popover": "^7.2.0",
|
||||
"sass": "^1.34.0",
|
||||
|
||||
@ -3,6 +3,7 @@ import { graphql, navigate, Link } from "gatsby";
|
||||
import { GatsbyImage, getImage } from "gatsby-plugin-image";
|
||||
import { Helmet } from "react-helmet";
|
||||
import classnames from "classnames";
|
||||
import chroma, { Color } from "chroma-js";
|
||||
|
||||
import ChevronLeft from "@spectrum-icons/workflow/ChevronLeft";
|
||||
import ChevronRight from "@spectrum-icons/workflow/ChevronRight";
|
||||
@ -25,6 +26,7 @@ import {
|
||||
hasName,
|
||||
getCanonicalSize,
|
||||
getGalleryPageUrl,
|
||||
getVibrantStyle,
|
||||
} from "../../utils";
|
||||
import MetadataItem from "./MetadataItem";
|
||||
import Nav from "../Nav";
|
||||
@ -41,9 +43,9 @@ const logKeyShortcut = (keyCode) => {
|
||||
};
|
||||
|
||||
const IconStyle = {
|
||||
width: '24px',
|
||||
margin: '0 4px'
|
||||
}
|
||||
width: "24px",
|
||||
margin: "0 4px",
|
||||
};
|
||||
|
||||
const ArrowLinkClasses = `hover:underline text-black
|
||||
lg:px-4 self-stretch flex items-center hover:bg-black/50 max-h-screen sticky top-0
|
||||
@ -133,6 +135,9 @@ const GalleryImage = ({ data, location: { state } }) => {
|
||||
locationString = location.join(", ");
|
||||
}
|
||||
const vibrant = getVibrant(image, true);
|
||||
const darkAccent = chroma
|
||||
.mix(vibrant.Vibrant, "hsla(216, 12%, 90%, 1)", 0.7)
|
||||
.hex();
|
||||
const canonicalSize = getCanonicalSize(image);
|
||||
|
||||
const orientationClasses =
|
||||
@ -142,7 +147,10 @@ const GalleryImage = ({ data, location: { state } }) => {
|
||||
const verticalPad = ar > 1 ? "250px" : "100px";
|
||||
|
||||
const shutterSpeed = React.useMemo(
|
||||
() => meta.ExposureTime ? getShutterFractionFromExposureTime(meta.ExposureTime) : null,
|
||||
() =>
|
||||
meta.ExposureTime
|
||||
? getShutterFractionFromExposureTime(meta.ExposureTime)
|
||||
: null,
|
||||
[meta]
|
||||
);
|
||||
const dateTaken = React.useMemo(() => new Date(dt), [dt]);
|
||||
@ -151,8 +159,11 @@ const GalleryImage = ({ data, location: { state } }) => {
|
||||
<Helmet>
|
||||
<title>{name} - Gallery | Chuck Dries</title>
|
||||
<body
|
||||
className="text-black bg-white transition-colors"
|
||||
style={getHelmetSafeBodyStyle(vibrant)}
|
||||
className="text-black transition-colors"
|
||||
// style={getHelmetSafeBodyStyle(vibrant)}
|
||||
style={getHelmetSafeBodyStyle({
|
||||
background: chroma.mix(vibrant.Vibrant, "white", 0.7).hex(),
|
||||
})}
|
||||
/>
|
||||
</Helmet>
|
||||
<div className="min-h-screen flex flex-col justify-between overflow-x-hidden">
|
||||
@ -167,7 +178,13 @@ const GalleryImage = ({ data, location: { state } }) => {
|
||||
),
|
||||
label: (
|
||||
<>
|
||||
Gallery <kbd className="font-normal">esc</kbd>
|
||||
Gallery{" "}
|
||||
<kbd
|
||||
className="font-normal"
|
||||
style={{ background: darkAccent }}
|
||||
>
|
||||
esc
|
||||
</kbd>
|
||||
</>
|
||||
),
|
||||
},
|
||||
@ -186,7 +203,12 @@ const GalleryImage = ({ data, location: { state } }) => {
|
||||
}}
|
||||
to={`/photogallery/${prevImage}/`}
|
||||
>
|
||||
<span className="p-1 lg:p-4 bg-gray-300 rounded-full">
|
||||
<span
|
||||
className="p-1 lg:p-4 rounded-full"
|
||||
style={{
|
||||
background: darkAccent,
|
||||
}}
|
||||
>
|
||||
<ChevronLeft UNSAFE_style={IconStyle} />
|
||||
</span>
|
||||
</Link>
|
||||
@ -232,39 +254,69 @@ const GalleryImage = ({ data, location: { state } }) => {
|
||||
: "flex-row landscape:container portrait:pt-5 portrait:flex-col portrait:text-right portrait:items-end"
|
||||
)}
|
||||
>
|
||||
<div className="mr-2">
|
||||
<p className="font-mono text-sm m-0 mt-1">
|
||||
{image.base}
|
||||
</p>
|
||||
<div className="mr-2 flex flex-col">
|
||||
<p className="font-mono text-sm m-0 mt-1">{image.base}</p>
|
||||
{hasName(image) && (
|
||||
<h1 className="text-4xl mt-0 font-sans">{name}</h1>
|
||||
)}
|
||||
<p className="landscape:mr-2">{meta.Caption}</p>
|
||||
<div className="grid grid-cols-6 h-[40px] w-[240px]">
|
||||
<div className="bg-vibrant"></div>
|
||||
<div className="bg-vibrant-light"></div>
|
||||
<div className="bg-vibrant-dark"></div>
|
||||
<div className="bg-muted"></div>
|
||||
<div className="bg-muted-light"></div>
|
||||
<div className="bg-muted-dark"></div>
|
||||
</div>
|
||||
<a
|
||||
className="cursor-pointer inline-block bg-gray-300 text-black font-sans p-1 my-1 rounded"
|
||||
download
|
||||
href={image.publicURL}
|
||||
onClick={() => {
|
||||
try {
|
||||
window.plausible("Download Wallpaper", {
|
||||
props: { image: image.base },
|
||||
});
|
||||
} catch {
|
||||
// do nothing
|
||||
}
|
||||
}}
|
||||
<div
|
||||
className={classnames(
|
||||
"grid grid-cols-6 h-[40px] w-[240px]",
|
||||
ar <= 1 && "self-end"
|
||||
)}
|
||||
style={getVibrantStyle(vibrant)}
|
||||
>
|
||||
Download wallpaper
|
||||
</a>
|
||||
</div><div className="flex-auto"></div>
|
||||
<div
|
||||
style={{ background: `rgba(${vibrant.Vibrant.join(",")})` }}
|
||||
></div>
|
||||
<div
|
||||
style={{
|
||||
background: `rgb(${vibrant.LightVibrant.join(",")})`,
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
style={{
|
||||
background: `rgb(${vibrant.DarkVibrant.join(",")})`,
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
style={{ background: `rgb(${vibrant.Muted.join(",")})` }}
|
||||
></div>
|
||||
<div
|
||||
style={{
|
||||
background: `rgb(${vibrant.LightMuted.join(",")})`,
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
style={{
|
||||
background: `rgb(${vibrant.DarkMuted.join(",")})`,
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
<div className="my-2">
|
||||
<a
|
||||
className="cursor-pointer text-black font-sans p-1 rounded"
|
||||
download
|
||||
href={image.publicURL}
|
||||
onClick={() => {
|
||||
try {
|
||||
window.plausible("Download Wallpaper", {
|
||||
props: { image: image.base },
|
||||
});
|
||||
} catch {
|
||||
// do nothing
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
background: darkAccent,
|
||||
}}
|
||||
>
|
||||
Download wallpaper
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-auto"></div>
|
||||
{
|
||||
<div
|
||||
className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1"
|
||||
@ -315,7 +367,7 @@ const GalleryImage = ({ data, location: { state } }) => {
|
||||
)}
|
||||
{(meta.LensModel || meta.FocalLength) && (
|
||||
<MetadataItem
|
||||
data={ meta.LensModel === "----" ? null : meta.LensModel}
|
||||
data={meta.LensModel === "----" ? null : meta.LensModel}
|
||||
icon={<Circle UNSAFE_style={IconStyle} />}
|
||||
title="lens"
|
||||
/>
|
||||
@ -334,7 +386,12 @@ const GalleryImage = ({ data, location: { state } }) => {
|
||||
}}
|
||||
to={`/photogallery/${nextImage}/`}
|
||||
>
|
||||
<span className="p-1 lg:p-4 bg-gray-300 rounded-full">
|
||||
<span
|
||||
className="p-1 lg:p-4 rounded-full"
|
||||
style={{
|
||||
background: darkAccent,
|
||||
}}
|
||||
>
|
||||
<ChevronRight UNSAFE_style={IconStyle} />
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
@ -25,6 +25,7 @@ interface MasonryGalleryProps {
|
||||
debugHue?: boolean;
|
||||
debugRating?: boolean;
|
||||
linkState?: object;
|
||||
showPalette?: boolean;
|
||||
}
|
||||
|
||||
const MasonryGallery = ({
|
||||
@ -33,6 +34,7 @@ const MasonryGallery = ({
|
||||
debugHue,
|
||||
debugRating,
|
||||
linkState,
|
||||
showPalette,
|
||||
}: MasonryGalleryProps) => {
|
||||
const [isClient, setIsClient] = React.useState(false);
|
||||
React.useEffect(() => {
|
||||
@ -124,7 +126,7 @@ const MasonryGallery = ({
|
||||
const rowAspectRatioSum = currentRow.aspect;
|
||||
const ar = getAspectRatio(image);
|
||||
let width;
|
||||
let height = `calc(${galleryWidth} / ${rowAspectRatioSum} + 10px)`;
|
||||
let height = `calc(${galleryWidth} / ${rowAspectRatioSum} ${showPalette ? "+ 10px" : "- 10px"})`;
|
||||
if (rowAspectRatioSum < targetAspect * 0.66) {
|
||||
// incomplete row, render stuff at "ideal" sizes instead of filling width
|
||||
width = `calc(calc(100vw - 160px) / ${targetAspect / ar})`;
|
||||
@ -137,9 +139,7 @@ const MasonryGallery = ({
|
||||
const img = getImage(image);
|
||||
return (
|
||||
<Link
|
||||
className={classNames(
|
||||
"border-8 border-white overflow-hidden"
|
||||
)}
|
||||
className={classNames("border-8 border-white overflow-hidden")}
|
||||
id={image.base}
|
||||
key={`${image.base}`}
|
||||
state={{
|
||||
@ -166,13 +166,22 @@ const MasonryGallery = ({
|
||||
</span>
|
||||
)}
|
||||
{img && (
|
||||
<div className={`h-full ${showPalette && "grid grid-rows-[1fr_20px]"}`}>
|
||||
<GatsbyImage
|
||||
alt={getName(image)}
|
||||
className="w-full h-full"
|
||||
className="w-full"
|
||||
image={img}
|
||||
objectFit="cover"
|
||||
/>
|
||||
|
||||
{ showPalette && <div className="grid grid-cols-6 flex-shrink-0 h-[20px] w-full" style={getVibrantStyle(getVibrant(image))}>
|
||||
<div className="bg-vibrant"></div>
|
||||
<div className="bg-vibrant-light"></div>
|
||||
<div className="bg-vibrant-dark"></div>
|
||||
<div className="bg-muted"></div>
|
||||
<div className="bg-muted-light"></div>
|
||||
<div className="bg-muted-dark"></div>
|
||||
</div>}
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
|
||||
60
src/components/Switch.tsx
Normal file
60
src/components/Switch.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import * as React from "react";
|
||||
import { useToggleState } from "react-stately";
|
||||
import {
|
||||
AriaSwitchProps,
|
||||
useFocusRing,
|
||||
useSwitch,
|
||||
VisuallyHidden,
|
||||
} from "react-aria";
|
||||
|
||||
export function Switch(props: AriaSwitchProps) {
|
||||
let state = useToggleState(props);
|
||||
let ref = React.useRef<HTMLInputElement>(null);
|
||||
let { inputProps } = useSwitch(props, state, ref);
|
||||
let { isFocusVisible, focusProps } = useFocusRing();
|
||||
|
||||
return (
|
||||
<label
|
||||
className="text-sm p-2"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
opacity: props.isDisabled ? 0.4 : 1,
|
||||
}}
|
||||
>
|
||||
<VisuallyHidden>
|
||||
<input {...inputProps} {...focusProps} ref={ref} />
|
||||
</VisuallyHidden>
|
||||
<svg
|
||||
className="flex-shrink-0"
|
||||
width={40}
|
||||
height={24}
|
||||
aria-hidden="true"
|
||||
style={{ marginRight: 4 }}
|
||||
>
|
||||
<rect
|
||||
x={4}
|
||||
y={4}
|
||||
width={32}
|
||||
height={16}
|
||||
rx={8}
|
||||
fill={state.isSelected ? "orange" : "gray"}
|
||||
/>
|
||||
<circle cx={state.isSelected ? 28 : 12} cy={12} r={5} fill="white" />
|
||||
{isFocusVisible && (
|
||||
<rect
|
||||
x={1}
|
||||
y={1}
|
||||
width={38}
|
||||
height={22}
|
||||
rx={11}
|
||||
fill="none"
|
||||
stroke="orange"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
)}
|
||||
</svg>
|
||||
{props.children}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
2
src/gatsby-types.d.ts
vendored
2
src/gatsby-types.d.ts
vendored
@ -2550,7 +2550,7 @@ type GalleryImageQuery = { readonly file: { readonly base: string, readonly publ
|
||||
type GalleryPageQueryQueryVariables = Exact<{ [key: string]: never; }>;
|
||||
|
||||
|
||||
type GalleryPageQueryQuery = { readonly allFile: { readonly nodes: ReadonlyArray<{ readonly relativePath: string, readonly base: string, readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData, readonly fluid: { readonly aspectRatio: number } | null } | null, readonly fields: { readonly imageMeta: { readonly vibrantHue: number | null, readonly dominantHue: ReadonlyArray<number | null> | null, readonly dateTaken: string | null, readonly meta: { readonly Keywords: ReadonlyArray<string | null> | null, readonly Rating: number | null, readonly ObjectName: string | null } | null, readonly vibrant: { readonly Vibrant: ReadonlyArray<number | null> | null } | null } | null } | null }> } };
|
||||
type GalleryPageQueryQuery = { readonly allFile: { readonly nodes: ReadonlyArray<{ readonly relativePath: string, readonly base: string, readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData, readonly fluid: { readonly aspectRatio: number } | null } | null, readonly fields: { readonly imageMeta: { readonly vibrantHue: number | null, readonly dominantHue: ReadonlyArray<number | null> | null, readonly dateTaken: string | null, readonly meta: { readonly Keywords: ReadonlyArray<string | null> | null, readonly Rating: number | null, readonly ObjectName: string | null } | null, readonly vibrant: { readonly DarkMuted: ReadonlyArray<number | null> | null, readonly DarkVibrant: ReadonlyArray<number | null> | null, readonly LightMuted: ReadonlyArray<number | null> | null, readonly LightVibrant: ReadonlyArray<number | null> | null, readonly Vibrant: ReadonlyArray<number | null> | null, readonly Muted: ReadonlyArray<number | null> | null } | null } | null } | null }> } };
|
||||
|
||||
type GatsbyImageSharpFixedFragment = { readonly base64: string | null, readonly width: number, readonly height: number, readonly src: string, readonly srcSet: string };
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ import { Helmet } from "react-helmet";
|
||||
// import { take } from "ramda";
|
||||
import classnames from "classnames";
|
||||
|
||||
import { getHelmetSafeBodyStyle, getAspectRatio } from "../utils";
|
||||
import { getHelmetSafeBodyStyle, getAspectRatio, getVibrantStyle } from "../utils";
|
||||
import Nav from "../components/Nav";
|
||||
// import ActionButtons from "../components/index/ActionButtons";
|
||||
import { use100vh } from "react-div-100vh";
|
||||
@ -73,14 +73,14 @@ const IndexPage = ({
|
||||
<body
|
||||
className="bg-white transition-colors"
|
||||
// @ts-ignore
|
||||
style={getHelmetSafeBodyStyle({
|
||||
style={getHelmetSafeBodyStyle(getVibrantStyle({
|
||||
Muted: [0, 0, 0],
|
||||
LightMuted: [0, 0, 0],
|
||||
Vibrant: [0, 0, 0],
|
||||
LightVibrant: [0, 0, 0],
|
||||
DarkMuted: [238, 238, 238],
|
||||
DarkVibrant: [238, 238, 238],
|
||||
})}
|
||||
}))}
|
||||
/>
|
||||
</Helmet>
|
||||
<main className="font-sans flex flex-col h-screen">
|
||||
|
||||
@ -6,9 +6,10 @@ import { Helmet } from "react-helmet";
|
||||
|
||||
import MasonryGallery from "../components/MasonryGallery";
|
||||
import KeywordsPicker from "../components/KeywordsPicker";
|
||||
import { getGalleryPageUrl, getHelmetSafeBodyStyle } from "../utils";
|
||||
import { getGalleryPageUrl, getHelmetSafeBodyStyle, getVibrantStyle } from "../utils";
|
||||
import Nav from "../components/Nav";
|
||||
import { Item, Select } from "../components/Select";
|
||||
import { Switch } from "../components/Switch";
|
||||
|
||||
const SORT_KEYS = {
|
||||
hue: ["fields", "imageMeta", "vibrantHue"],
|
||||
@ -31,6 +32,7 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
|
||||
const showDebug =
|
||||
typeof window !== "undefined" &&
|
||||
window.location.search.includes("debug=true");
|
||||
const [showPalette, setShowPalette] = React.useState(false);
|
||||
|
||||
const setKeyword = React.useCallback(
|
||||
(newKeyword: string | null) => {
|
||||
@ -166,14 +168,14 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
|
||||
<body
|
||||
className="bg-white transition-color"
|
||||
// @ts-ignore
|
||||
style={getHelmetSafeBodyStyle({
|
||||
style={getHelmetSafeBodyStyle(getVibrantStyle({
|
||||
Muted: [0, 0, 0],
|
||||
LightMuted: [0, 0, 0],
|
||||
Vibrant: [0, 0, 0],
|
||||
LightVibrant: [0, 0, 0],
|
||||
DarkMuted: [238, 238, 238],
|
||||
DarkVibrant: [238, 238, 238],
|
||||
})}
|
||||
}))}
|
||||
/>
|
||||
</Helmet>
|
||||
<div className="top-0 z-10">
|
||||
@ -186,7 +188,7 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between px-4 md:px-8 sm:mx-auto">
|
||||
<div className="flex flex-col lg:flex-row lg:items-end justify-between px-4 md:px-8 sm:mx-auto">
|
||||
<KeywordsPicker
|
||||
keywords={[
|
||||
"Boyce Thompson Arboretum",
|
||||
@ -207,7 +209,13 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
|
||||
onChange={setKeyword}
|
||||
value={filterKeyword}
|
||||
/>
|
||||
<div className="m-2">
|
||||
<div className="m-2 flex flex-row items-end">
|
||||
<Switch
|
||||
isSelected={showPalette}
|
||||
onChange={(val) => setShowPalette(val)}
|
||||
>
|
||||
Show palettes
|
||||
</Switch>
|
||||
<Select
|
||||
label="Sort by..."
|
||||
// @ts-ignore
|
||||
@ -238,42 +246,50 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
|
||||
sortKey,
|
||||
filterKeyword,
|
||||
}}
|
||||
showPalette={showPalette}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const query = graphql`query GalleryPageQuery {
|
||||
allFile(
|
||||
filter: {sourceInstanceName: {eq: "gallery"}}
|
||||
sort: {fields: {imageMeta: {dateTaken: DESC}}}
|
||||
) {
|
||||
nodes {
|
||||
relativePath
|
||||
base
|
||||
childImageSharp {
|
||||
fluid {
|
||||
aspectRatio
|
||||
}
|
||||
gatsbyImageData(layout: CONSTRAINED, height: 550, placeholder: DOMINANT_COLOR)
|
||||
}
|
||||
fields {
|
||||
imageMeta {
|
||||
vibrantHue
|
||||
dominantHue
|
||||
dateTaken
|
||||
meta {
|
||||
Keywords
|
||||
Rating
|
||||
ObjectName
|
||||
export const query = graphql`
|
||||
query GalleryPageQuery {
|
||||
allFile(
|
||||
filter: { sourceInstanceName: { eq: "gallery" } }
|
||||
sort: { fields: { imageMeta: { dateTaken: DESC } } }
|
||||
) {
|
||||
nodes {
|
||||
relativePath
|
||||
base
|
||||
childImageSharp {
|
||||
fluid {
|
||||
aspectRatio
|
||||
}
|
||||
vibrant {
|
||||
Vibrant
|
||||
gatsbyImageData(
|
||||
layout: CONSTRAINED
|
||||
height: 550
|
||||
placeholder: DOMINANT_COLOR
|
||||
)
|
||||
}
|
||||
fields {
|
||||
imageMeta {
|
||||
vibrantHue
|
||||
dominantHue
|
||||
dateTaken
|
||||
meta {
|
||||
Keywords
|
||||
Rating
|
||||
ObjectName
|
||||
}
|
||||
vibrant {
|
||||
# Vibrant
|
||||
...VibrantColors
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}`;
|
||||
`;
|
||||
|
||||
export default GalleryPage;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// import kebabCase from 'lodash/kebabCase';
|
||||
|
||||
import React from "react";
|
||||
import { HomepageImage } from "./pages";
|
||||
import { GalleryImage } from "./pages/photogallery";
|
||||
|
||||
@ -35,8 +36,7 @@ export const getVibrantStyle = (vibrant: Queries.FileFieldsImageMetaVibrant, scr
|
||||
});
|
||||
|
||||
// work around SSR bug in react-helmet
|
||||
export const getHelmetSafeBodyStyle = (vibrant: Queries.FileFieldsImageMetaVibrant, screenHeight?: number) => {
|
||||
const style = getVibrantStyle(vibrant, screenHeight);
|
||||
export const getHelmetSafeBodyStyle = (style: React.CSSProperties) => {
|
||||
if (typeof window === "undefined") {
|
||||
return style;
|
||||
}
|
||||
|
||||
@ -6506,7 +6506,7 @@ __metadata:
|
||||
react-cool-dimensions: ^2.0.7
|
||||
react-div-100vh: ^0.7.0
|
||||
react-dom: ^18.2.0
|
||||
react-helmet: ^6.1.0
|
||||
react-helmet: latest
|
||||
react-stately: ^3.19.0
|
||||
react-tiny-popover: ^7.2.0
|
||||
sass: ^1.34.0
|
||||
@ -13794,7 +13794,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-helmet@npm:^6.1.0":
|
||||
"react-helmet@npm:latest":
|
||||
version: 6.1.0
|
||||
resolution: "react-helmet@npm:6.1.0"
|
||||
dependencies:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user