+
+ )
+ }
+
+ let thumbnail
+ if (this.props.showThumbnail) {
+ if (this.mediaType(this.state.pbcore) == 'Moving Image') {
+ // check here for digitized? if not show VIDEO THUMB
+ var ci_pbi =
+ this.state.pbcore.pbcoreDescriptionDocument.pbcoreIdentifier.find(
+ pbi => pbi.source == 'Sony Ci'
+ )
+ if (ci_pbi && ci_pbi.text) {
+ thumbnail = {
+ backgroundImage: `url(${this.aapbThumbnailURL(this.state.guid)})`,
+ }
+ } else {
+ // video THUMB
+ thumbnail = {
+ backgroundImage: `url(/VIDEO_SMALL.png)`,
+ }
+ }
+ } else {
+ // AUDIO THUMB
+ thumbnail = {
+ backgroundImage: `url(/AUDIO_SMALL.png)`,
+ }
+ }
+ }
+
+ if (this.state.showEmbed) {
+ recordBlock = this.embed(
+ this.state.guid,
+ this.props.startTime,
+ this.props.endTime,
+ this.state.wide
+ )
+ } else {
+ if (this.props.embedPlayer) {
+ recordBlock = (
+ this.setState({ showEmbed: true })}
+ >
+ {titleBar}
+ {this.aapbTitle(this.state.pbcore)}
+
+
+
+
+ )
+ } else {
+ // fake video player
+ recordBlock = (
+
+ {titleBar}
+
+
+
+
+ )
+ }
+ }
+ }
+
+ return recordBlock
+ }
+}
+
+export class AAPBRecords extends Component
+ {aapbRecords}
+
+ View all {this.state.numRecords} on AAPB >
+
+
+ )
+ }
+}
diff --git a/app/classes/collectionPresenter.jsx b/app/classes/collectionPresenter.jsx
index aa13b90..c477d8b 100644
--- a/app/classes/collectionPresenter.jsx
+++ b/app/classes/collectionPresenter.jsx
@@ -1,26 +1,15 @@
import { decode } from 'html-entities'
import { renderSidebar, renderPageTitleBar } from './pageHelpers'
import { renderBlocks } from './contentHelpers'
-
-export const SIDEBAR_TYPES = [
- 'heading',
- 'interviews',
- 'archival_footage',
- 'photographs',
- 'original_footage',
- 'programs',
- 'related_content',
- 'credits',
-]
+import { SIDEBAR_TYPES } from '../data/sidebarTypes'
export function renderCollection(collection) {
let sidebar
- console.log('rendering collection', collection)
+ // console.log('rendering collection', collection)
sidebar = renderSidebar(
- 'collections',
+ 'In This Collection',
collection.content.filter(block => SIDEBAR_TYPES.includes(block.type))
)
- console.log('sidebar', sidebar)
let titleBar
if (collection.title) {
diff --git a/app/classes/contentHelpers.jsx b/app/classes/contentHelpers.jsx
index f186026..c6fca29 100644
--- a/app/classes/contentHelpers.jsx
+++ b/app/classes/contentHelpers.jsx
@@ -1,5 +1,6 @@
import { decode } from "html-entities"
import { handleAapbRecordGroup, AAPBRecord } from "./aapbRecordHelpers"
+import { AAPB_BLOCK_TYPES } from '../data/aapbBlockTypes'
export function renderBlocks(blocks){
// jsx likes to be in an array to be concatted when rendered
@@ -15,7 +16,7 @@ export function renderBlock(block, key){
if(block.type == "text"){
return textContent(block, key)
- } else if(block.type == "interviews" || block.type == "archival_footage" || block.type == "photographs" || block.type == "original_footage" || block.type == "programs") {
+ } else if(AAPB_BLOCK_TYPES.some((bt) => bt == block.type)){
return aapbRecordsBlock(block, key)
} else if(block.type == "heading"){
return headingContent(block, key)
@@ -23,8 +24,6 @@ export function renderBlock(block, key){
return subHeadingContent(block, key)
} else if(block.type == "image"){
return imageContent(block, key)
- } else if(block.type == "related_content"){
- return relatedcontentContent(block, key)
} else if(block.type == "credits"){
return creditsContent(block, key)
} else {
@@ -77,15 +76,6 @@ export function creditsContent(block, key){
)
}
-export function relatedcontentContent(block, key){
- return (
-
-
- )
-}
-
// generic block
export function contentBlock(block, key){
return
diff --git a/app/classes/exhibitPresenter.jsx b/app/classes/exhibitPresenter.jsx
index c4e0280..b4f2abf 100644
--- a/app/classes/exhibitPresenter.jsx
+++ b/app/classes/exhibitPresenter.jsx
@@ -1,14 +1,16 @@
import { decode } from "html-entities"
import { Link, useLoaderData } from "@remix-run/react"
+import { useEffect } from 'react'
import { renderAuthorBubble, renderPageLink, renderPageLinks, renderSidebar, renderSidebarSection, renderPageTitleBar, renderFootnoteSection, renderFootnotesInBody } from "./pageHelpers"
import { renderBlocks, renderBlock, textContent, headingContent } from "./contentHelpers"
+import { SIDEBAR_TYPES } from '../data/sidebarTypes'
export function renderExhibit(exhibit){
+ // console.log( 'da ex', exhibit )
let showAuthors = exhibit.authors && exhibit.authors.length > 0 && exhibit.authors[0].name
let showFootnotes = exhibit.footnotes && exhibit.footnotes.length > 0
- let sidebar = renderSidebar("exhibit", exhibit.body.filter( (block) => block.type == "heading"), showAuthors, showFootnotes)
- // console.log( 'you know i exhibit that', exhibit )
+ let sidebar = renderSidebar("In This Exhibit", exhibit.body.filter( (block) => SIDEBAR_TYPES.includes(block.type)), showAuthors, showFootnotes)
let titleBar
if(exhibit.title){
@@ -70,7 +72,7 @@ export function renderExhibit(exhibit){
)
})
-
+
let byline = (
Related Content
- -By { exhibit.authors.map((author) => { return author.name }).join(", ") }
diff --git a/app/classes/pageHelpers.jsx b/app/classes/pageHelpers.jsx
index 07e7acc..b7a2990 100644
--- a/app/classes/pageHelpers.jsx
+++ b/app/classes/pageHelpers.jsx
@@ -58,8 +58,7 @@ export function renderPageLinks(pageType, pages){
)
}
-export function renderSidebar(pageType, sections, authors=false, footnotes=false){
- let pageTypeName = pageType === "exhibit" ? "Exhibit" : "Collection"
+export function renderSidebar(sidebarTitle, sections, authors=false, footnotes=false){
const [isOpen, setIsOpen] = useState(true)
useEffect(() => {
@@ -76,7 +75,6 @@ export function renderSidebar(pageType, sections, authors=false, footnotes=false
var sbLinks = document.getElementsByClassName("page-sidebar-link")
if(sbLinks.length > 0){
// there could be no sidebar elements if ex has no authors and no headings and no footnotes
-
var lastSbLink = sbLinks[ sbLinks.length - 1 ]
var sbRect = lastSbLink.getBoundingClientRect()
var clientTop = document.documentElement.clientTop || document.body.clientTop || 0
@@ -87,9 +85,9 @@ export function renderSidebar(pageType, sections, authors=false, footnotes=false
if(distanceFromBottom/document.body.scrollHeight < 0.36){
// bar is close enough (36vh) to the footer, stop
sidebarMenu.style.position = "sticky"
- }
+ }
}
-
+
} else {
// sidebar is in top position (page header showing)
@@ -102,44 +100,63 @@ export function renderSidebar(pageType, sections, authors=false, footnotes=false
let authorSectionLink
if(authors){
- authorSectionLink = { scrollSectionIntoView("authors-section") } } className="page-sidebar-link">Authors
+ authorSectionLink =
}
let footnoteSectionLink
if(footnotes){
- footnoteSectionLink = { scrollSectionIntoView("footnote-section") } } className="page-sidebar-link">Footnotes
+ footnoteSectionLink =
}
+ var sidebarSections = sections.map( (section, index) => {
+ // aapb data has title nested likea so
+ var title = section.type == "heading" ? section.value : section.value.title
+ return renderSidebarSection(title, section.id, index)
+ })
+
+ sidebarSections.push(authorSectionLink, footnoteSectionLink)
+
return (
In This { pageTypeName }
}
+ {{ sidebarTitle }
}
{collectionLinks}
}
diff --git a/app/routes/collections.masterpiece.jsx b/app/routes/collections.masterpiece.jsx
new file mode 100644
index 0000000..ab8dbbf
--- /dev/null
+++ b/app/routes/collections.masterpiece.jsx
@@ -0,0 +1,188 @@
+import {
+ useLoaderData,
+ useRouteError,
+ isRouteErrorResponse,
+ Link,
+} from '@remix-run/react'
+import { useState, useEffect } from 'react'
+
+import { getMasterpiece } from '../utils/masterpiece'
+
+export const meta = () => {
+ return [
+ {
+ title: `Alistair Cooke Masterpiece Theatre Collection | GBH Open Vault`,
+ },
+ {
+ name: 'description',
+ content: `The Andrew and Linda Egendorf Alistair Cooke Masterpiece Theatre Collection.`,
+ },
+ ]
+}
+
+export const loader = async () => {
+ return await getMasterpiece()
+}
+
+function renderSeriesLink(series) {
+ return (
+
+ {series.title}
+
+ )
+}
+
+function safeDate(seasonGroup) {
+ return (
+ seasonGroup &&
+ seasonGroup.ids &&
+ seasonGroup.ids[0] &&
+ seasonGroup.ids[0].broadcast_date &&
+ new Date(seasonGroup.ids[0].broadcast_date)
+ )
+}
+
+export default function Masterpiece() {
+ const data = useLoaderData()
+ const masterpieceData = data.masterpieceData
+
+ const [masterpieceSearch, setMasterpieceSearch] = useState(true)
+ let seasonLinks = Object.keys(masterpieceData).map((seasonNumber, index) => (
+
+ Season {seasonNumber}
+
+ ))
+
+ let seasonGroups = Object.keys(masterpieceData).map((seasonNumber, index) => {
+ let seasonGroup
+
+ if (masterpieceSearch.length > 0) {
+ seasonGroup = {}
+ var includeThese = Object.keys(masterpieceData[seasonNumber]).filter(
+ title => title.toLowerCase().includes(masterpieceSearch)
+ )
+ includeThese.forEach(title => {
+ seasonGroup[title] = masterpieceData[seasonNumber][title]
+ })
+ } else {
+ seasonGroup = masterpieceData[seasonNumber]
+ }
+
+ seasonGroup = Object.keys(seasonGroup)
+ .map((normalizedMiniseriesTitle, groupIndex) => (
+
+ {seasonGroup[normalizedMiniseriesTitle].nice_title}
+
+ ))
+ .sort((sg1, sg2) => safeDate(sg1) > safeDate(sg2))
+
+ return (
+
+
+ )
+ })
+
+ // duplicated from renderSidebar, because search etc on mp/series is too different to combine into one thing
+ // const [isOpen, setIsOpen] = useState(true)
+ useEffect(() => {
+ const sidebarMenu = document.getElementsByClassName('page-sidebar')[0]
+ const initialSidebarTop = sidebarMenu?.offsetTop
+
+ window.addEventListener('scroll', () => {
+ let scrollTop = document.documentElement.scrollTop
+
+ if (scrollTop > initialSidebarTop) {
+ // bar is at top position
+
+ var distanceFromBottom
+ var sbLinks = document.getElementsByClassName('page-sidebar-link')
+ if (sbLinks.length > 0) {
+ // there could be no sidebar elements if ex has no authors and no headings and no footnotes
+
+ var lastSbLink = sbLinks[sbLinks.length - 1]
+ var sbRect = lastSbLink.getBoundingClientRect()
+ var clientTop =
+ document.documentElement.clientTop || document.body.clientTop || 0
+ var top = sbRect.top + scrollTop - clientTop
+
+ var distanceFromBottom =
+ document.body.scrollHeight - top + sbRect.height
+
+ if (distanceFromBottom / document.body.scrollHeight < 0.36) {
+ // bar is close enough (36vh) to the footer, stop
+ sidebarMenu.style.position = 'sticky'
+ }
+ }
+ } else {
+ // sidebar is in top position (page header showing)
+ sidebarMenu.style.top = initialSidebarTop - scrollTop + 'px'
+ sidebarMenu.style.position = 'fixed'
+ }
+ })
+ }, [])
+
+ return (
+
+ Season {seasonNumber}
+
+ {seasonGroup}
+
+
+ )
+}
diff --git a/app/routes/exhibits.$exhibitSlug.tsx b/app/routes/exhibits.$exhibitSlug.tsx
index a7866f5..86764ab 100644
--- a/app/routes/exhibits.$exhibitSlug.tsx
+++ b/app/routes/exhibits.$exhibitSlug.tsx
@@ -9,7 +9,7 @@ import type {
LoaderFunctionArgs,
} from '@remix-run/node'
import { json } from '@remix-run/node'
-import { getPageBySlug } from '../fetch'
+import { getPageBySlug } from '../utils/fetch'
import { renderExhibit } from '../classes/exhibitPresenter'
import type { SitemapFunction } from 'remix-sitemap'
import { extractMeta } from '../classes/meta'
@@ -19,14 +19,11 @@ export const loader: LoaderFunction = async ({
request,
}: LoaderFunctionArgs) => {
let server_url = request.url
- // console.log('exx path ', params)
let exhibit = await getPageBySlug('exhibits', params.exhibitSlug)
- // console.log('exhibit loader', exhibit)
return json({ exhibit, server_url })
}
export const meta: MetaFunction
+
+
+ + Search the Masterpiece Collection +
+
+ setMasterpieceSearch(e.target.value.toLowerCase())}
+ type="text"
+ name="series-search"
+ placeholder="Series Name"
+ />
+
+
+
+ Jump To
+{seasonLinks}
+
+
+
+
+ + The Linda and Andrew Egendorf Masterpiece Theatre Alistair Cooke + Collection +
+ +
+
+ {seasonGroups}
+
+
+
+ The Linda and Andrew Egendorf Masterpiece Theatre Alistair Cooke
+ Collection features programs from the anthology series
+ Masterpiece Theatre presented during Alistair Cooke’s tenure as
+ host (1971-1992). Along with a complete list of those programs
+ with descriptions, the collection will also include Alistair
+ Cooke’s introductions and conclusions for each episode.
+ Additional materials in the collection will be made available
+ online or on-site at GBH as they are digitized. Read more about
+ the collection and our funders who made it possible.
+
+
+ 
+
+
+
@@ -70,8 +64,9 @@ export const sitemap: SitemapFunction = async ({ config, request }) => {
).then(res => {
return res.json()
})
- return exhibits.items.map(exhibit => {
+ return exhibits.items.map(exhibit, index => {
return {
+ key: index,
loc: `/exhibits/${exhibit.meta.slug}`,
priority: 0.8,
lastmod: exhibit.meta.last_published_at,
diff --git a/app/routes/exhibits._index.jsx b/app/routes/exhibits._index.jsx
index f70d84d..0f951fd 100644
--- a/app/routes/exhibits._index.jsx
+++ b/app/routes/exhibits._index.jsx
@@ -1,5 +1,5 @@
import { Link, useLoaderData } from '@remix-run/react'
-import { getExhibits } from '../fetch'
+import { getExhibits } from '../utils/fetch'
import { renderPageLinks } from '../classes/pageHelpers'
import { Meta } from '../classes/meta'
diff --git a/app/routes/preview.tsx b/app/routes/preview.tsx
index 3eeaa3f..7638fe1 100644
--- a/app/routes/preview.tsx
+++ b/app/routes/preview.tsx
@@ -1,12 +1,30 @@
import { useLoaderData } from '@remix-run/react'
import { LoaderFunctionArgs } from '@remix-run/server-runtime'
-import { getPreview } from '../preview'
+import { getPreview } from '../utils/preview'
import { renderCollection } from '../classes/collectionPresenter'
import { renderExhibit } from '../classes/exhibitPresenter'
import type { SitemapFunction } from 'remix-sitemap'
+import { getPageBySlug } from '../utils/fetch'
export const loader = async ({ request }: LoaderFunctionArgs) => {
var params = new URLSearchParams(request.url.replace(/.*\?/, ''))
+ // if(params.has("slug") && params.has("token") && params.has("content_type")){
+
+ // var slug = params.get("slug")
+ // var token = params.get("token")
+ // var content_type = params.get("content_type")
+ // var page_type = content_type == "exhibits.exhibitpage" ? "exhibits" : "collections"
+ // const resp = await getPageBySlug(page_type, slug)
+ // const data = await resp.json()
+
+ // console.log( 'herse hte data though', data )
+ // if(data && data.id && token && content_type){
+ // console.log( 'using these values', data.id, content_type, token )
+ // return await getPreview(data.id, content_type, token)
+ // }
+ // }
+
+ // leaving existing lookup by id, since current preview link provides only it
if (params.has('content_type') && params.has('token')) {
var id = params.get('token').split(':')[0].replace(/id=/g, '')
return await getPreview(id, params.get('content_type'), params.get('token'))
@@ -17,9 +35,8 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
export default function Preview() {
const preview = useLoaderData()
- console.log('preview gon give it to ya', preview)
- if (!preview) {
+ if (!(preview && preview.meta)) {
throw new Error('Not found!')
}
diff --git a/app/routes/series.jsx b/app/routes/series.jsx
index 4d4ae03..807f689 100644
--- a/app/routes/series.jsx
+++ b/app/routes/series.jsx
@@ -1,6 +1,7 @@
-import { Component } from 'react'
-import { seriesData } from '../data/seriesData'
+import { useLoaderData, Link } from '@remix-run/react'
+import { useEffect, useState } from 'react'
import { Meta } from '../classes/meta'
+import { seriesData } from '../data/seriesData'
export const meta = () => {
return [
@@ -15,111 +16,137 @@ export const meta = () => {
]
}
-export const SeriesLink = ({ title, host }) => (
-
-
- {title}
+export const loader = async () => {
+ return {
+ seriesData: seriesData,
+ AAPB_HOST: process.env.AAPB_HOST,
+ }
+}
+
+function renderSeriesLink(series) {
+ return (
+
+ {series.title}
-
-)
+ )
+}
-export default class Series extends Component {
- constructor(props) {
- super(props)
+export default function Series() {
+ const data = useLoaderData()
+ const seriesData = data.seriesData
+ const [seriesSearch, setSeriesSearch] = useState(true)
- this.state = {
- seriesSearch: '',
- }
- }
+ let alphabetLinks = Object.keys(seriesData).map((letter, index) => (
+
+ {letter}
+
+ ))
- componentDidMount() {
- // this is a bit annoying, but because we're injecting AAPB_HOST into window, use this hook to grab AAPB_HOST once its available
- this.setState({ aapb_host: window.ENV.AAPB_HOST })
- }
+ let seriesAlphaGroups = Object.keys(seriesData).map((letter, index) => {
+ let seriesGroup = seriesData[letter]
+ if (seriesSearch.length > 0) {
+ seriesGroup = seriesGroup.filter(title =>
+ title.toLowerCase().includes(seriesSearch)
+ )
+ }
- render() {
- let alphabetLinks = Object.keys(seriesData).map((letter, index) => {
+ seriesGroup = seriesGroup.map((title, groupIndex) => {
return (
- {letter}
+ {title}
)
})
- let seriesAlphaGroups = Object.keys(seriesData).map((letter, index) => {
- let seriesGroup = seriesData[letter]
- if (this.state.seriesSearch.length > 0) {
- seriesGroup = seriesGroup.filter(title =>
- title.toLowerCase().includes(this.state.seriesSearch)
- )
- }
-
- seriesGroup = seriesGroup.map((title, groupIndex) => {
- return (
- 0)
+ return (
+
+
- {title}
-
- )
- })
-
- if (seriesGroup.length > 0)
- return (
-
+ )
+ })
- // seriesAlphaGroups = seriesAlphaGroups.filter( (sG) => sG.length > 0 )
- return (
-
-
- )
- })
+ {seriesGroup}
+
- {letter}
-
- {seriesGroup}
+ {letter}
-
-
Search GBH Series
-
- {
- this.setState({ seriesSearch: e.target.value.toLowerCase() })
- }}
- type="text"
- name="series-search"
- placeholder="Series Name"
- />
-
-
+ const [isOpen, setIsOpen] = useState(true)
+ useEffect(() => {
+ const sidebarMenu = document.getElementsByClassName('page-sidebar')[0]
+ const initialSidebarTop = sidebarMenu?.offsetTop
+
+ window.addEventListener('scroll', () => {
+ let scrollTop = document.documentElement.scrollTop
+
+ if (scrollTop > initialSidebarTop) {
+ // bar is at top position
+
+ var distanceFromBottom
+ var sbLinks = document.getElementsByClassName('page-sidebar-link')
+ if (sbLinks.length > 0) {
+ // there could be no sidebar elements if ex has no authors and no headings and no footnotes
- Jump To
-{alphabetLinks}
+ var lastSbLink = sbLinks[sbLinks.length - 1]
+ var sbRect = lastSbLink.getBoundingClientRect()
+ var clientTop =
+ document.documentElement.clientTop || document.body.clientTop || 0
+ var top = sbRect.top + scrollTop - clientTop
+
+ var distanceFromBottom =
+ document.body.scrollHeight - top + sbRect.height
+
+ if (distanceFromBottom / document.body.scrollHeight < 0.36) {
+ // bar is close enough (36vh) to the footer, stop
+ sidebarMenu.style.position = 'sticky'
+ }
+ }
+ } else {
+ // sidebar is in top position (page header showing)
+ sidebarMenu.style.top = initialSidebarTop - scrollTop + 'px'
+ sidebarMenu.style.position = 'fixed'
+ }
+ })
+ }, [])
+ // seriesAlphaGroups = seriesAlphaGroups.filter( (sG) => sG.length > 0 )
+ return (
+
+
+
Search GBH Series
+
+ setSeriesSearch(e.target.value.toLowerCase())}
+ type="text"
+ name="series-search"
+ placeholder="Series Name"
+ />
+
-
-
+ )
}
diff --git a/app/styles/styles.css b/app/styles/styles.css
index 0b85720..22e0561 100644
--- a/app/styles/styles.css
+++ b/app/styles/styles.css
@@ -128,6 +128,52 @@ a:active {
background: var(--light-blue); /* Gecko Browsers */
}
+div.masterpiece-intro {
+ vertical-align: middle;
+ margin-bottom: 4rem;
+
+}
+
+div.masterpiece-summary {
+ font-size: 0.9em;
+ margin-right: 2vw;
+ text-align: left;
+}
+
+h1.masterpiece-bigtitle {
+ font-size: 2rem;
+ margin-bottom: 3rem;
+ margin-top: 2rem;
+ line-height: 5rem;
+}
+
+a.masterpiece-link {
+ display: inline-block;
+ font-size: 1.5rem;
+ font-weight: 500;
+ margin-bottom: 1.5rem;
+ margin-right: 1em;
+ width: 100%;
+}
+
+a.masterpiece-season-link {
+ display: block;
+ font-size: 1em;
+}
+
+div.season-group-content {
+ columns: 2;
+}
+
+div.season-group-number {
+ font-size: 2em;
+ font-weight: bold;
+ color: var(--dark-purple);
+ margin-bottom: 1.6vh;
+ display: block;
+ width: 100%;
+}
+
a.series-alphabet-link {
width: 4vw;
display: inline-block;
@@ -171,7 +217,7 @@ div.series-group-letter {
}
a.series-link {
- display: inline-block;
+ display: block;
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 1.5rem;
@@ -443,14 +489,23 @@ div.page-sidebar-border {
border-right: 1px solid var(--black);
}
-a.page-sidebar-link {
+
+div.page-sidebar-link {
+ margin-bottom: 1em;
+ margin-left: 4em;
+ display: block;
+}
+
+div.page-sidebar-link a {
+ display: inline-block;
cursor: pointer;
font-family: 'Red Hat Display', sans-serif;
color: var(--blue);
- display: block;
font-size: 1em;
- margin-bottom: 1em;
- margin-left: 4em;
+}
+
+div.page-sidebar-link a p {
+ margin: 0;
}
#sidebar-menu-icon > div {
@@ -458,7 +513,11 @@ a.page-sidebar-link {
padding: 0rem;
}
.sidebar-open {
- background-color: #fffd;
+ background-color: #fff;
+}
+
+h3#authors-section {
+ margin-bottom: 2vh;
}
div.page-body h3.page-authors-title {
@@ -466,6 +525,7 @@ div.page-body h3.page-authors-title {
}
div.page-authorbubble-stacked {
+ z-index: 1000;
margin-left: 20%;
margin-top: -2rem;
position: relative;
@@ -476,7 +536,6 @@ div.page-authorbubble-stacked {
div.page-authorbubble-bottom-container {
position: relative;
display: flex;
- align-items: center;
}
div.page-authorbubble-stacked div.author-bubble {
@@ -503,13 +562,12 @@ div.page-authorbubble-bottom-container div.author-extras-bottom {
margin-left: 2rem;
margin-top: 2rem;
- max-height: 4em;
- height: 4em;
}
div.author-bio,
div.author-byline {
display: block;
+ overflow: hidden;
}
div.author-bio {
@@ -519,6 +577,7 @@ div.author-bio {
/* footnotes */
a.footnote-link {
+ z-index: -1;
font-size: 0.6em;
top: -0.5em;
position: relative;
@@ -526,6 +585,7 @@ a.footnote-link {
}
li.footnote-content {
+ position: relative;
list-style: number;
/* display: block;
width: 20vw;*/
@@ -560,6 +620,13 @@ li.footnote-content:hover > a::before {
background-image: url('/backarrow.png');
}
+a.footnote-anchor {
+ position: absolute;
+ left: 0;
+ top: 10em;
+ height: 15em;
+}
+
/* ex and spec pages */
div.page-body-container {
@@ -728,6 +795,7 @@ div.pagelink-subtitle {
}
div.author-bubble {
+ vertical-align: top;
background-size: cover;
min-width: 6rem;
width: 6rem;
@@ -866,6 +934,7 @@ a.aapb-records-seemore {
a.content-aapbblock {
background-size: contain;
+ background-position: center;
margin-right: 1vw;
background-color: var(--black);
color: var(--dark-purple);
@@ -886,6 +955,13 @@ iframe.aapb-record-video {
width: 27vw;
}
+iframe.aapb-record-video-wide {
+ padding: 0;
+ height: 15.1875vw;
+ max-width: 27vw;
+ width: 27vw;
+}
+
a.content-aapbblock div.shade-bar {
vertical-align: middle;
font-size: 1vw;
@@ -991,6 +1067,10 @@ div.guids-block-title p {
border-radius: 5px;
}
+#sidebar-menu-icon {
+ background-color: #fff;
+}
+
#mobile-menu-icon {
float: right;
margin-right: 2rem;
@@ -1118,6 +1198,14 @@ div.guids-block-title p {
color: var(--gray);
}
+ .sidebar-open {
+ background-color: #cfe4ff;
+ }
+
+ #sidebar-menu-icon {
+ background-color: #cfe4ff;
+ }
+
div.page-titlebar {
/* display: none;*/
}
@@ -1231,9 +1319,19 @@ div.guids-block-title p {
margin-left: 2rem;
}
- a.page-sidebar-link {
+ div.page-sidebar-link {
margin-left: 2rem;
}
+
+ div.page-sidebar {
+ margin-left: 0;
+ top: 40vh;
+ }
+
+ div.page-titlebar {
+/* background-color: #ff0;*/
+ }
+
div.content-relatedcontent a {
display: block;
width: 92vw;
diff --git a/app/types/aapb.tsx b/app/types/aapb.tsx
new file mode 100644
index 0000000..9d6ccfc
--- /dev/null
+++ b/app/types/aapb.tsx
@@ -0,0 +1,32 @@
+import { Guid, PBCore } from './pbcore'
+
+export type AAPBRecordProps = {
+ guid: Guid
+ showThumbnail: boolean
+ showTitle: boolean
+ embedPlayer: boolean
+ startTime: string
+ endTime: string
+}
+
+export type AAPBRecordState = {
+ embedPlayer: boolean
+ showThumbnail: boolean
+ showTitle: boolean
+ showEmbed: boolean
+ guid: Guid
+ pbcore: PBCore
+ wide: boolean
+}
+
+export interface AAPBRecordBlockProps extends AAPBRecordProps {
+ guids: Guid[]
+ specialCollections: string
+}
+
+export interface AAPBRecordBlockState {
+ embedPlayer: boolean
+ showThumbnail: boolean
+ showTitle: boolean
+ numRecords: number
+}
diff --git a/app/types/pbcore.tsx b/app/types/pbcore.tsx
new file mode 100644
index 0000000..f94dc12
--- /dev/null
+++ b/app/types/pbcore.tsx
@@ -0,0 +1,120 @@
+export type MediaType = 'Moving Image' | 'Sound'
+
+export type Guid = `cpb-aacip${'-' | '_' | '/'}${string}`
+
+export type PBCore = {
+ pbcoreDescriptionDocument: PBCoreDescriptionDocument
+}
+export type PBCoreDescriptionDocument = {
+ pbcoreInstantiation: PBCoreInstantiation | PBCoreInstantiation[]
+ 'xsi:schemaLocation': string
+ pbcoreIdentifier: PBCoreIdentifier[]
+ pbcoreTitle: PBCoreTitle | PBCoreTitle[]
+ pbcoreDescription: string | PBCoreDescription[]
+ pbcoreAnnotation: PBCoreAnnotation[]
+ pbcoreCreator: PBCoreCreator[]
+ pbcoreSubject: PBCoreSubject[]
+ pbcoreGenre: PBCoreGenre
+ pbcoreRelation: PBCoreRelation
+ pbcoreCoverage: PBCoreCoverage
+ pbcoreContributor: PBCoreContributor[]
+ pbcorePublisher: PBCorePublisher
+ pbcoreRightsSummary: PBCoreRightsSummary
+}
+
+export type PBCoreDescription = {
+ descriptionType: string
+ text: string
+}
+
+export type PBCoreInstantiation = {
+ instantiationPhysical: string
+ instantiationLocation: string
+ instantiationMediaType: MediaType | 'other'
+ instantiationGenerations: string
+ instantiationDuration: string
+ instantiationTracks: string
+ instantiationAnnotation: PBCoreAnnotation[]
+ instantiationIdentifier: PBCoreIdentifier[]
+ instantiationDate: PBCoreDate
+ instantiationDimensions: string
+ instantiationDigital: string
+ instantiationStandard: string
+ instantiationColors: string
+ instantiationEssenceTrack: PBCoreEssenceTrack[]
+}
+
+export type PBCoreTitle = {
+ titleType: string
+ text: string
+}
+
+export type PBCoreAnnotation = {
+ annotationType: string
+ text: string
+}
+
+export type PBCoreIdentifier = {
+ source: string
+ text: string
+}
+
+export type PBCoreCreator = {
+ creator: string | PBCoreCreatorRef
+ creatorRole: string
+}
+
+export type PBCoreSubject = {
+ subjectType: string
+ text: string
+}
+
+export type PBCoreCreatorRef = {
+ ref: string
+ text: string
+}
+
+export type PBCoreGenre = {
+ source: string
+ annotation: string
+ text: string
+}
+
+export type PBCoreRelation = {
+ pbcoreRelationType: PBCoreIdentifier
+ pbcoreRelationIdentifier: string
+}
+
+export type PBCoreCoverage = {
+ coverage: string
+ coverageType: string
+}
+
+export type PBCoreContributor = {
+ contributor: string
+ contributorRole: string
+}
+
+export type PBCorePublisher = {
+ publisher: string
+ publisherRole: string
+}
+
+export type PBCoreRightsSummary = {
+ rightsSummary: string
+}
+
+export type PBCoreDate = {
+ dateType: string
+ text: string
+}
+
+export type PBCoreEssenceTrack = {
+ essenceTrackType: 'audio' | 'video' | 'other'
+ essenceTrackIdentifier: string
+ essenceTrackEncoding: string
+ essenceTrackSamplingRate: string
+ essenceTrackBitDepth: string
+ essenceTrackTimeStart: string
+ essenceTrackDuration: string
+}
diff --git a/app/fetch.jsx b/app/utils/fetch.jsx
similarity index 96%
rename from app/fetch.jsx
rename to app/utils/fetch.jsx
index 2fe00a9..b2d3f15 100644
--- a/app/fetch.jsx
+++ b/app/utils/fetch.jsx
@@ -24,7 +24,6 @@ export async function getPageBySlug(type, slug) {
statusText: 'Something went wrong. Try again later.',
})
})
- // console.log('exhibit body', body)
if (body.meta && body.meta.total_count === 0) {
console.log(`Page not found by slug`)
throw new Response(`No ${type} called: ${slug}`, { status: 404 })
diff --git a/app/utils/masterpiece.jsx b/app/utils/masterpiece.jsx
new file mode 100644
index 0000000..7b09495
--- /dev/null
+++ b/app/utils/masterpiece.jsx
@@ -0,0 +1,9 @@
+// separate file so we dont include this in every loader
+import { masterpieceData } from '../data/masterpieceData'
+
+export async function getMasterpiece() {
+ return {
+ masterpieceData: masterpieceData,
+ AAPB_HOST: process.env.AAPB_HOST,
+ }
+}
diff --git a/app/preview.jsx b/app/utils/preview.jsx
similarity index 100%
rename from app/preview.jsx
rename to app/utils/preview.jsx
diff --git a/public/AUDIO_SMALL.png b/public/AUDIO_SMALL.png
new file mode 100644
index 0000000..9f0f772
Binary files /dev/null and b/public/AUDIO_SMALL.png differ
diff --git a/public/VIDEO_SMALL.png b/public/VIDEO_SMALL.png
new file mode 100644
index 0000000..422be3c
Binary files /dev/null and b/public/VIDEO_SMALL.png differ
-
+
+ GBH Series
-
- Browse by title and explore records on AAPB
-
- {seriesAlphaGroups}
+ Jump To
+{alphabetLinks}
+
+
- )
- }
+
+
GBH Series
+
+ Browse by title and explore records on AAPB
+ {seriesAlphaGroups}