Skip to content

Commit c9d673c

Browse files
mathewjordanmathewjordan
authored
Merge pull request #144 from samvera-labs/4070-lighthouse
Add non-next dev ability. Address accessibility concerns.
2 parents d0105d1 + 6358494 commit c9d673c

File tree

11 files changed

+107
-26
lines changed

11 files changed

+107
-26
lines changed

‎src/index.html‎ renamed to ‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
</head>
99
<body>
1010
<div id="root"></div>
11-
<script type="module" src="./index.tsx"></script>
11+
<script type="module" src="/src/dev.tsx"></script>
1212
</body>
1313
</html>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"clean": "rimraf dist",
3737
"coverage": "vitest --ui --coverage",
3838
"dev": "next dev",
39+
"dev:vite": "vite",
3940
"prepublishOnly": "npm run build",
4041
"start": "next start",
4142
"test": "vitest",

‎pages/index.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,16 @@ import "swiper/css/pagination";
2424
<HomepageHeader />
2525
<Splash>
2626
<SplashElement
27-
css={{ height: "61.8vh" }}
27+
css={{ height: "820px" }}
2828
text="Viewer"
2929
component={
3030
<Viewer
3131
iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/71153379-4283-43be-8b0f-4e7e3bfda275?as=iiif"
3232
options={{
33-
showTitle: false,
34-
showInformationToggle: false,
35-
showIIIFBadge: false,
36-
canvasBackgroundColor: "transparent"
33+
canvasHeight: "600px",
34+
informationPanel: {
35+
open: true,
36+
}
3737
}}
3838
/>
3939
}
@@ -45,7 +45,7 @@ import "swiper/css/pagination";
4545
</SplashElement>
4646
<SplashElement
4747
text="Slider"
48-
css={{ height: "38.2vh" }}
48+
css={{ height: "600px" }}
4949
component={
5050
<Slider collectionId="https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif" />
5151
}

‎src/components/Slider/Header/Control.styled.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,12 @@ const ControlStyled = styled("button", {
3838

3939
[`&:disabled`]: {
4040
[`> ${Icon}`]: {
41-
backgroundColor: "$secondaryAlt",
41+
backgroundColor: "#6663",
4242
boxShadow: "none",
4343

4444
svg: {
45-
fill: "$secondaryMuted",
46-
stroke: "$secondaryMuted",
45+
fill: "$secondary",
46+
stroke: "$secondary",
4747
filter: "unset",
4848
},
4949
},

‎src/components/Slider/Header/Header.styled.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ const HeaderStyled = styled("div", {
3333
},
3434

3535
".clover-slider-header-homepage": {
36-
color: "$accent",
3736
textDecoration: "none",
3837
},
3938

‎src/components/Slider/Header/Header.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,10 @@ const Header: React.FC<HeaderProps> = ({
7676
</Icon>
7777
</ControlStyled>
7878
{hasHomepage && (
79-
<Homepage
80-
// @ts-ignore
79+
<ViewAll
8180
homepage={homepage}
8281
className="clover-slider-header-view-all"
83-
>
84-
<ViewAll />
85-
</Homepage>
82+
/>
8683
)}
8784
</HeaderControls>
8885
</HeaderStyled>

‎src/components/Slider/Header/ViewAll.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
1+
import { Homepage } from "src/components/Primitives";
12
import React from "react";
23
import { styled } from "src/styles/stitches.config";
34

4-
const ViewAllStyled = styled("span", {
5+
const ViewAllStyled = styled(Homepage, {
56
display: "flex",
6-
background: "none",
7+
backgroundColor: "$accent",
8+
color: "$secondary",
79
height: "2rem !important",
810
padding: "0 $3",
911
margin: "0 0 0 $3",
1012
borderRadius: "2rem",
11-
backgroundColor: "$accent",
12-
color: "$secondary",
1313
cursor: "pointer",
1414
boxSizing: "content-box !important",
1515
transition: "$all",
1616
justifyContent: "center",
1717
alignItems: "center",
18-
fontSize: "0.8333rem",
1918
lineBreak: "none",
2019
whiteSpace: "nowrap",
20+
textDecoration: "none !important",
21+
fontSize: "0.8333rem",
2122

2223
[`&:hover`]: {
2324
backgroundColor: "$accentAlt",
@@ -29,8 +30,8 @@ const ViewAllStyled = styled("span", {
2930
},
3031
});
3132

32-
const ViewAll = () => {
33-
return <ViewAllStyled>View All</ViewAllStyled>;
33+
const ViewAll = (props) => {
34+
return <ViewAllStyled {...props}>View All</ViewAllStyled>;
3435
};
3536

3637
export default ViewAll;

‎src/components/Viewer/Viewer/Header.styled.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ const Header = styled("header", {
5959
backgroundColor: "transparent !important",
6060
justifyContent: "space-between",
6161
alignItems: "flex-start",
62+
width: "100%",
6263

6364
[`> ${CollectionStyled}`]: {
6465
flexGrow: "1",
@@ -74,9 +75,10 @@ const Header = styled("header", {
7475
const HeaderOptions = styled("div", {
7576
display: "flex",
7677
alignItems: "flex-end",
78+
justifyContent: "flex-end",
7779
padding: "1rem",
7880
flexShrink: "0",
79-
flexGrow: "0",
81+
flexGrow: "1",
8082
});
8183

8284
export {

‎src/components/Viewer/Viewer/Toggle.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ const Toggle = () => {
2929
checked={checked}
3030
onCheckedChange={() => setChecked(!checked)}
3131
id="information-toggle"
32+
aria-label="information panel toggle"
33+
name="toggled?"
3234
>
3335
<StyledThumb />
3436
</StyledSwitch>

‎src/dev.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import "swiper/css";
2+
import "swiper/css/navigation";
3+
import "swiper/css/pagination";
4+
5+
import {
6+
Homepage,
7+
Label,
8+
Metadata,
9+
PartOf,
10+
RequiredStatement,
11+
SeeAlso,
12+
Summary,
13+
Thumbnail,
14+
} from "src/components/Primitives";
15+
import {
16+
IIIFExternalWebResource,
17+
InternationalString,
18+
Manifest,
19+
MetadataItem,
20+
} from "@iiif/presentation-3";
21+
import {
22+
PrimitivesExternalWebResource,
23+
PrimitivesIIIFResource,
24+
} from "./types/primitives";
25+
import React, { useEffect, useState } from "react";
26+
27+
import ReactDOM from "react-dom/client";
28+
import Slider from "src/components/Slider";
29+
import Viewer from "src/components/Viewer";
30+
31+
const App = () => {
32+
const [manifest, setManifest] = useState<Manifest>();
33+
34+
const manifestId =
35+
"https://api.dc.library.northwestern.edu/api/v2/works/71153379-4283-43be-8b0f-4e7e3bfda275?as=iiif";
36+
const collectionId =
37+
"https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif";
38+
39+
useEffect(() => {
40+
(async () => {
41+
const data = await fetch(manifestId).then((response) => response.json());
42+
setManifest(data);
43+
})();
44+
}, [manifest]);
45+
46+
if (!manifest) return null;
47+
48+
return (
49+
<div style={{ padding: "1rem" }}>
50+
<Viewer iiifContent={manifestId} />
51+
<Slider iiifContent={collectionId} />
52+
<article>
53+
<Label label={manifest.label} as="h1" />
54+
<Summary summary={manifest.summary as InternationalString} />
55+
<Metadata metadata={manifest.metadata as MetadataItem[]} />
56+
<RequiredStatement
57+
requiredStatement={manifest.requiredStatement as MetadataItem}
58+
/>
59+
<Homepage
60+
homepage={manifest.homepage as PrimitivesExternalWebResource[]}
61+
/>
62+
<PartOf partOf={manifest.partOf as PrimitivesIIIFResource[]} />
63+
<SeeAlso
64+
seeAlso={manifest.seeAlso as PrimitivesExternalWebResource[]}
65+
/>
66+
<Thumbnail
67+
thumbnail={manifest.thumbnail as IIIFExternalWebResource[]}
68+
altAsLabel={manifest.label as InternationalString}
69+
/>
70+
</article>
71+
</div>
72+
);
73+
};
74+
75+
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
76+
<React.StrictMode>
77+
<App />
78+
</React.StrictMode>
79+
);

0 commit comments

Comments
 (0)