dailp-encoding/website/src/pages/cwkw/cwkw-layout.tsx at 8ab32c373d20ea9591409ed2da7687df9ffaadc6 · NEU-DSG/dailp-encoding · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import "@fontsource/quattrocento-sans/latin.css"
import "normalize.css"
import React from "react"
import { Helmet } from "react-helmet"
import { CreativeCommonsBy, Link } from "src/components"
import Sidebar, { MobileSidebar } from "src/components/sidebar"
import { useMediaQuery } from "src/custom-hooks"
import { DashboardButton } from "src/layout"
import { HeaderPrefDrawer } from "src/mode"
import { PreferencesProvider } from "src/preferences-context"
import { useRouteParams } from "src/renderer/PageShell"
import { collectionRoute } from "src/routes"
import { colors, mediaQueries } from "src/style/constants"
import "src/style/global.css"
import { LoginHeaderButton } from "../auth/user-auth-layout"
import { useDialog } from "../edited-collections/edited-collection-context"
import CWKWBanner from "./assets/cwkw-banner.svg"
import MobileCWKWBanner from "./assets/mobile-cwkw-banner.svg"
import * as css from "./cwkw-layout.css"
import { themeClass } from "./theme.css"

/** Wrapper for cwkw site pages, providing them with a navigation header and footer. */
const CWKWLayout: React.FC = ({ children }) => {
  const isDesktop = useMediaQuery(mediaQueries.medium)
  const dialog = useDialog()

  const { collectionSlug } = useRouteParams()

  return (
    <PreferencesProvider>
      <Helmet titleTemplate="%s - DAILP" defaultTitle="DAILP">
        <html lang="en" />
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <body className={themeClass} />
      </Helmet>

      <header
        aria-label="Site Header"
        id="header"
        className={dialog.visible && isDesktop ? css.openHeader : css.header}
      >
        <div
          className={
            dialog.visible && isDesktop
              ? css.openHeaderContents
              : css.headerContents
          }
        >
          {isDesktop ? <Sidebar /> : <MobileSidebar />}
          <div className={css.contentContainer}>
            <h1 className={css.siteTitle}>
              <Link
                className={css.siteLink}
                href={collectionRoute(collectionSlug!)}
              >
                <img
                  src={isDesktop ? CWKWBanner : MobileCWKWBanner}
                  alt="Red basket with the text CWKW Cherokees Writing the Keetoowah Way"
                  className={css.banner}
                />
              </Link>
            </h1>
          </div>
          <div className={css.navButtons}>
            <LoginHeaderButton className={css.loginHeader} />
            <DashboardButton color={colors.body} />
            <HeaderPrefDrawer color={colors.body} />
          </div>
        </div>
      </header>
      {children}
      <footer
        aria-label="Site Footer"
        className={dialog.visible && isDesktop ? css.openHeader : css.header}
        id="footer"
      >
        <div
          className={
            dialog.visible && isDesktop
              ? css.openHeaderContents
              : css.headerContents
          }
        >
          <div className={css.noticeText}>
            <CreativeCommonsBy
              title="Cherokees Writing the Keetoowah Way"
              authors={[
                {
                  name: "Ellen Cushman",
                  link: "https://www.ellencushman.com/",
                },
                {
                  name: "Ben Frey",
                  link: "https://americanstudies.unc.edu/ben-frey/",
                },
                {
                  name: "Rachel Jackson",
                  link: "https://www.ou.edu/cas/english/about/faculty/rachel-jackson",
                },
                { name: "Ernestine Berry" },
                { name: "Clara Proctor" },
                { name: "Naomi Trevino" },
                { name: "Jeffrey Bourns" },
                { name: "Oleta Pritchett" },
                { name: "Tyler Hodges" },
                { name: "John Chewey" },
                { name: "Shelby Snead", link: "https://snead.xyz" },
                { name: "Chan Mi Oh", link: "https://chanmioh.github.io" },
                { name: "Kush Patel" },
                { name: "Shashwat Patel" },
                { name: "Nop Lertsumitkul" },
                { name: "Henry Volchonok" },
                { name: "Hazelyn Aroian" },
                { name: "Victor Mendevil" },
              ]}
            />
          </div>
        </div>
      </footer>
    </PreferencesProvider>
  )
}

export default CWKWLayout