Skip to content

Commit b5728b7

Browse files
pwfisherpwfisher
committed
add DrawingPage
1 parent a92e079 commit b5728b7

File tree

9 files changed

+160
-18
lines changed

9 files changed

+160
-18
lines changed

‎explorer/__fixtures__/drawings.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
export const drawingYears = [
1+
import { Drawing, YearDrawingSets } from '../types'
2+
3+
export const drawingYears: number[] = [
24
2000,
35
2001,
46
2002,
@@ -16,3 +18,12 @@ export const drawingYears = [
1618
2014,
1719
2015,
1820
]
21+
22+
export const yearDrawingSets: YearDrawingSets = drawingYears.reduce((accumulator, year) => {
23+
accumulator[year] = require(`./drawings/${year}.json`)
24+
return accumulator
25+
}, {} as Partial<YearDrawingSets>) as YearDrawingSets
26+
27+
export const drawings: Drawing[] = drawingYears.reduce((accumulator, year) => {
28+
return [...accumulator, ...yearDrawingSets[year]] as Drawing[]
29+
}, [] as Drawing[])

‎explorer/components/AppStyle.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { createGlobalStyle } from 'styled-components'
22

33
export const AppStyle = createGlobalStyle`
4-
body, ul, ol {
4+
body, ul, ol, figure, h1 {
55
list-style: none;
66
margin: 0;
77
padding: 0;

‎explorer/components/DrawingPage.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import React from 'react'
2+
import { Drawing } from '../types'
3+
import Link from 'next/link'
4+
import { assetPrefix } from '../lib/assetPrefix'
5+
import styled from 'styled-components'
6+
import { getPreviousSlug, getNextSlug } from '../lib/drawings'
7+
8+
export const DrawingPage: React.FC<{ drawing: Drawing, year: number }> = ({ drawing, year }) => {
9+
return (
10+
<Container>
11+
<Title>{drawing.title}</Title>
12+
<ImageWrap>
13+
<Image src={`${assetPrefix}/images/${drawing.image}`} alt={drawing.title} />
14+
</ImageWrap>
15+
<NavBar>
16+
<Link href="/drawing/[id]" as={`/drawing/${getPreviousSlug(drawing.slug)}`}>
17+
<Arrow>&lt;</Arrow>
18+
</Link>
19+
<Link href="/year/[id]" as={`/year/${year}`}>
20+
<YearLink>{year}</YearLink>
21+
</Link>
22+
<a href={`http://explodingdog.com/title/${drawing.slug}.html`}>
23+
<DrawingId>#{drawing.id.split('.').slice(-1)}</DrawingId>
24+
</a>
25+
<Date>{drawing.date}</Date>
26+
<Link href="/drawing/[id]" as={`/drawing/${getNextSlug(drawing.slug)}`}>
27+
<Arrow>&gt;</Arrow>
28+
</Link>
29+
</NavBar>
30+
</Container>
31+
)
32+
}
33+
34+
const Container = styled.main.attrs({ className: 'Explorer__DrawingPage__Container'})`
35+
display: flex;
36+
flex-direction: column;
37+
justify-content: space-between;
38+
min-height: 100vh;
39+
max-height: 100vh;
40+
`
41+
42+
const Title = styled.h1.attrs({ className: 'Explorer__DrawingPage__Title'})`
43+
font-size: 32px;
44+
font-weight: bold;
45+
padding: 16px 24px;
46+
text-align: center;
47+
`
48+
49+
const ImageWrap = styled.figure.attrs({ className: 'Explorer__DrawingPage__ImageWrap'})`
50+
flex-grow: 1;
51+
position: relative;
52+
`
53+
54+
const Image = styled.img.attrs({ className: 'Explorer__DrawingPage__Image'})`
55+
display: block;
56+
height: 100%;
57+
object-fit: contain;
58+
position: absolute;
59+
width: 100%;
60+
`
61+
62+
const NavBar = styled.nav.attrs({ className: 'Explorer__DrawingPage__Header'})`
63+
color: #BBB;
64+
display: flex;
65+
justify-content: space-between;
66+
font-size: 14px;
67+
font-weight: bold;
68+
height: 40px;
69+
line-height: 40px;
70+
`
71+
72+
const Arrow = styled.div.attrs({ className: 'Explorer__DrawingPage__Arrow'})`
73+
color: black;
74+
cursor: pointer;
75+
font-size: 24px;
76+
padding: 0 32px;
77+
user-select: none;
78+
79+
&:hover {
80+
background: #f8f8f8;
81+
}
82+
`
83+
84+
const YearLink = styled.a.attrs({ className: 'Explorer__DrawingPage__YearLink'})`
85+
cursor: pointer;
86+
color: black;
87+
`
88+
89+
const DrawingId = styled.span.attrs({ className: 'Explorer__DrawingPage__DrawingId'})``
90+
91+
const Date = styled.span.attrs({ classNamne: 'Explorer__DrawingPage__Date'})``

‎explorer/components/DrawingTile.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,18 @@ import React from 'react'
22
import { Drawing } from '../types/drawing-models'
33
import styled from 'styled-components'
44
import { assetPrefix } from '../lib/assetPrefix'
5+
import Link from 'next/link'
56

67
export const DrawingTile: React.FC<Drawing> = ({ date, title, slug, image }) => {
78
return (
89
<Container>
910
<Date>{date}</Date>
1011
<Title>{title}</Title>
11-
<a href={`http://explodingdog.com/title/${slug}.html`} target='_blank'>
12-
<Image src={`${assetPrefix}/images/${image}`} alt={title} />
13-
</a>
12+
<Link href="/drawing/[id]" as={`/drawing/${slug}`}>
13+
<a>
14+
<Image src={`${assetPrefix}/images/${image}`} alt={title} />
15+
</a>
16+
</Link>
1417
</Container>
1518
)
1619
}

‎explorer/components/YearPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const YearPage = ({ year, drawings }: {
1414
<YearHeading>{year}</YearHeading>
1515
<DrawingSection>
1616
{drawings && drawings.map(drawing => (
17-
<DrawingTile key={drawing.slug} {...drawing} />
17+
<DrawingTile key={`${drawing.date} ${drawing.slug}`} {...drawing} />
1818
))}
1919
</DrawingSection>
2020
</PageLayout>

‎explorer/lib/drawings.ts‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,26 @@
1-
import { YearDrawingSets, Drawing } from '../types'
2-
import { drawingYears } from '../__fixtures__/drawings'
1+
import { Drawing } from '../types'
2+
import { drawings } from '../__fixtures__/drawings'
33

4-
export const getYearDrawingSets = (): YearDrawingSets => {
5-
return drawingYears.reduce((accumulator, year) => {
6-
accumulator[year] = require(`../__fixtures__/drawings/${year}.json`)
7-
return accumulator
8-
}, {} as Partial<YearDrawingSets>) as YearDrawingSets
4+
export const getDrawingBySlug = (slug: string): Drawing | undefined => {
5+
return drawings.find(o => o.slug === slug)
96
}
107

11-
export const getYearDrawingSet = (year: number): Drawing[] => {
12-
return require(`../__fixtures__/drawings/${year}.json`)
8+
export const getDrawingYear = (drawing: Drawing): number => {
9+
return parseInt(drawing.date.slice(0, 4), 10)
10+
}
11+
12+
export const getPreviousSlug = (slug: string): string => {
13+
const drawing = getDrawingBySlug(slug)
14+
if (!drawing) return 'something'
15+
const index = drawings.indexOf(drawing)
16+
const previousDrawing = drawings[index - 1] || drawings.slice(-1)[0]
17+
return previousDrawing.slug
18+
}
19+
20+
export const getNextSlug = (slug: string): string => {
21+
const drawing = getDrawingBySlug(slug)
22+
if (!drawing) return 'something'
23+
const index = drawings.indexOf(drawing)
24+
const nextDrawing = drawings[index + 1] || drawings[0]
25+
return nextDrawing.slug
1326
}

‎explorer/lib/next.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export function singleQueryParamValue(
2+
queryParamValue: string | string[] | undefined,
3+
defaultValue: string = ''
4+
): string {
5+
return (Array.isArray(queryParamValue) ? queryParamValue[0] : queryParamValue) || defaultValue
6+
}

‎explorer/pages/drawing/[id].tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { DrawingPage } from '../../components/DrawingPage'
2+
import { GetStaticProps, GetStaticPaths } from 'next'
3+
import { drawings } from '../../__fixtures__/drawings'
4+
import { getDrawingBySlug, getDrawingYear } from '../../lib/drawings'
5+
import { singleQueryParamValue } from '../../lib/next'
6+
7+
export default DrawingPage
8+
9+
export const getStaticPaths: GetStaticPaths = async () => {
10+
const paths = drawings.map(({ slug }) => ({ params: { id: slug }}))
11+
return { paths, fallback: false }
12+
}
13+
14+
export const getStaticProps: GetStaticProps = async ({ params }) => {
15+
const slug = singleQueryParamValue(params?.id)
16+
const drawing = getDrawingBySlug(slug) || getDrawingBySlug('something')
17+
const year = getDrawingYear(drawing!)
18+
return { props: { year, drawing } }
19+
}

‎explorer/pages/year/[id].tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { YearPage } from '../../components/YearPage'
22
import { GetStaticProps, GetStaticPaths } from 'next'
3-
import { drawingYears } from '../../__fixtures__/drawings'
4-
import { getYearDrawingSet } from '../../lib/drawings'
3+
import { drawingYears, yearDrawingSets } from '../../__fixtures__/drawings'
54

65
export default YearPage
76

@@ -12,5 +11,5 @@ export const getStaticPaths: GetStaticPaths = async () => {
1211

1312
export const getStaticProps: GetStaticProps = async ({ params }) => {
1413
const year = Number(params?.id)
15-
return { props: { year, drawings: getYearDrawingSet(year) } }
14+
return { props: { year, drawings: yearDrawingSets[year] } }
1615
}

0 commit comments

Comments
 (0)