1+
2+ <!DOCTYPE html>
3+ < html >
4+ < head >
5+ < title > card.tsx</ title >
6+ < link href ="
https://cdn.jsdelivr.net/npm/[email protected] /dist/semantic.min.css "
type ="
text/css "
rel ="
stylesheet "
> 7+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.min.js " type ="text/javascript " charset ="utf-8 "> </ script >
8+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/mode/javascript/javascript.min.js " type ="text/javascript " charset ="utf-8 "> </ script >
9+ < link href ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.min.css " type ="text/css " rel ="stylesheet ">
10+ < script src ="../../../assets/source-file.js " type ="text/javascript " charset ="utf-8 "> </ script >
11+ < link href ="../../../assets/source-file.css " type ="text/css " rel ="stylesheet ">
12+ </ head >
13+ < body >
14+ < div style ="margin-top:3em " class ="ui container "> < h1 class ="ui header "> < a href ="../../../index.html "> TypeScript coverage report</ a > </ h1 > < table style ="margin-top:2em " class ="ui celled table "> < thead class =""> < tr class =""> < th class =""> Filename</ th > < th class =""> Percent</ th > < th class =""> Threshold</ th > < th class =""> Total</ th > < th class =""> Covered</ th > < th class =""> Uncovered</ th > </ tr > </ thead > < tbody class =""> < tr class ="positive "> < td class =""> components/card/card.tsx</ td > < td class =""> 91.19%</ td > < td class =""> 80%</ td > < td class =""> 193</ td > < td class =""> 176</ td > < td class =""> 17</ td > </ tr > </ tbody > </ table > < textarea id ="editor " readonly ="" style ="margin-top:3em "> import React from 'react';
15+ import Link from 'next/link';
16+ import { Box, BoxProps } from '@sparkpost/matchbox';
17+ import { SimplePortableText } from '@lib/sanity';
18+ import { ArrowForward } from '@sparkpost/matchbox-icons';
19+ import styled from 'styled-components';
20+ import css from '@styled-system/css';
21+ import { formatDate } from '@utils/date';
22+ import { Category, categoryColors } from '@components/category';
23+
24+ // Turns block content into plain text
25+ function toPlainText(blocks = []) {
26+ return (
27+ blocks
28+ // loop through each block
29+ .map((block) => {
30+ // if it's not a text block with children or if it is a header,
31+ // return nothing
32+ if (block._type !== 'block' || !block.children || /^h\d/.test(block.style)) {
33+ return '';
34+ }
35+ // loop through the children spans, and join the
36+ // text strings
37+ return block.children.map((child) => child.text).join('');
38+ })
39+ // join the paragraphs leaving split by two linebreaks
40+ .join('\n\n')
41+ );
42+ }
43+
44+ // TODO: this is temporary, need to find a better way to scale cards
45+ function getRatio(span) {
46+ if (span > 5) {
47+ return '25%';
48+ }
49+
50+ return ['40%', null, '82%', '60%', '44%'];
51+ }
52+
53+ const HoverBox = styled.div<BoxProps & { $index: number; $span: number; $url: string }>`
54+ position: absolute;
55+ width: 100%;
56+ height: 100%;
57+ top: 0;
58+ left: 0;
59+ transform: translate3d(0, 0, 0);
60+ transition: transform 200ms ease-in-out, z-index 200ms linear;
61+ z-index: 0;
62+
63+ ${({ $url, $index }) => {
64+ return `
65+ cursor: ${$url ? 'pointer' : ''};
66+ &:hover {
67+ transition: transform 200ms ease-in-out, z-index 200ms linear;
68+ z-index: ${$url ? ($index === 0 ? 2 : 1) : 0};
69+ }
70+ `;
71+ }};
72+
73+ ${({ $index, $span, $url }) =>
74+ css({
75+ bg: 'scheme.bg',
76+ p: ['300', null, null, '400', '600'],
77+ border: 'thick',
78+ 'user-select': ['none', null, 'inherit'],
79+ '&:hover, &:active': {
80+ transform: [
81+ `translate3d(0, 0, 0)`,
82+ null,
83+ $url
84+ ? `translate3d(${($index * $span) % 12 === 0 ? '12px' : '-12px'}, -12px, 0)`
85+ : 'translate3d(0, 0, 0)'
86+ ]
87+ }
88+ })}
89+ `;
90+
91+ const BorderBox = styled(Box)<BoxProps>`
92+ margin-top: -1px;
93+ margin-left: -1px;
94+ margin-bottom: -1px;
95+ margin-right: -1px;
96+ text-decoration: none;
97+ display: block;
98+
99+ &,
100+ &:visited,
101+ &:hover {
102+ ${css({ color: 'scheme.fg' })}
103+ }
104+ &:focus {
105+ outline: none;
106+ }
107+ `;
108+
109+ const NegateMargins = styled.div`
110+ * {
111+ margin-bottom: 0;
112+ padding-top: 0;
113+ }
114+ `;
115+
116+ type CardProps = {
117+ content?: Array<any>;
118+ date?: string;
119+ enableCategory?: boolean;
120+ excerpt?: object[];
121+ index?: number; // Used to animate to the right instead of left
122+ span: number;
123+ mobileSpan?: number;
124+ subtitle?: string;
125+ title?: string;
126+ url: string;
127+ };
128+
129+ const Card: React.FC<CardProps> = (props: CardProps) => {
130+ const { url, span, mobileSpan, index, content, title, subtitle, enableCategory, date, excerpt } =
131+ props;
132+
133+ const category = React.useMemo(() => {
134+ if (!url) {
135+ return '';
136+ }
137+ return url.split('/')?.[1];
138+ }, [url]);
139+
140+ const accentColor = React.useMemo(() => {
141+ if (!url) {
142+ return 'scheme.heavyAccent';
143+ }
144+
145+ return categoryColors[category]?.bg || 'scheme.heavyAccent';
146+ }, [category, url]);
147+
148+ const smallSpan = mobileSpan || '6';
149+
150+ const card = (
151+ <BorderBox
152+ gridColumn={[`span ${smallSpan}`, null, `span ${span}`]}
153+ pb={getRatio(span)}
154+ minHeight="12rem"
155+ position="relative"
156+ as={url ? 'a' : 'div'}
157+ >
158+ <Box
159+ position="absolute"
160+ width="100%"
161+ height="100%"
162+ top="0"
163+ left="0"
164+ bg={accentColor}
165+ border="thick"
166+ />
167+ <HoverBox $url={url} p={['200', null, '600']} $index={index} $span={span}>
168+ {enableCategory && url && <Category category={category} />}
169+ {date && (
170+ <Box fontSize="100" mb="0" lineHeight="100">
171+ {formatDate(date)}
172+ </Box>
173+ )}
174+ {title && (
175+ <Box fontSize="300" fontWeight="500" mb="200">
176+ {title}
177+ </Box>
178+ )}
179+ {subtitle && (
180+ <Box fontSize="200" lineHeight="200" mb="200">
181+ {subtitle}
182+ </Box>
183+ )}
184+ {excerpt && (
185+ <Box fontSize="200" lineHeight="200" mb="200">
186+ {toPlainText(excerpt).substring(0, 180)}
187+ {toPlainText(excerpt).substring(0, 180).length > 179 ? '...' : ''}
188+ </Box>
189+ )}
190+ {content && (
191+ <NegateMargins>
192+ <SimplePortableText blocks={content} />
193+ </NegateMargins>
194+ )}
195+ {url && (
196+ <Box mt="100">
197+ <ArrowForward />
198+ </Box>
199+ )}
200+ </HoverBox>
201+ </BorderBox>
202+ );
203+
204+ return url ? (
205+ <Link href={url} passHref>
206+ {card}
207+ </Link>
208+ ) : (
209+ <>{card}</>
210+ );
211+ };
212+
213+ export default Card;
214+ </ textarea > < pre id ="annotations " style ="display:none "> [{"file":"components/card/card.tsx","line":15,"character":12,"text":"block","kind":1},{"file":"components/card/card.tsx","line":18,"character":12,"text":"block","kind":1},{"file":"components/card/card.tsx","line":18,"character":18,"text":"_type","kind":1},{"file":"components/card/card.tsx","line":18,"character":40,"text":"block","kind":1},{"file":"components/card/card.tsx","line":18,"character":46,"text":"children","kind":1},{"file":"components/card/card.tsx","line":18,"character":70,"text":"block","kind":1},{"file":"components/card/card.tsx","line":18,"character":76,"text":"style","kind":1},{"file":"components/card/card.tsx","line":23,"character":15,"text":"block","kind":1},{"file":"components/card/card.tsx","line":23,"character":21,"text":"children","kind":1},{"file":"components/card/card.tsx","line":23,"character":30,"text":"map","kind":1},{"file":"components/card/card.tsx","line":23,"character":35,"text":"child","kind":1},{"file":"components/card/card.tsx","line":23,"character":45,"text":"child","kind":1},{"file":"components/card/card.tsx","line":23,"character":51,"text":"text","kind":1},{"file":"components/card/card.tsx","line":23,"character":57,"text":"join","kind":1},{"file":"components/card/card.tsx","line":31,"character":18,"text":"span","kind":1},{"file":"components/card/card.tsx","line":32,"character":6,"text":"span","kind":1},{"file":"components/card/card.tsx","line":126,"character":8,"text":"accentColor","kind":1}]</ pre > </ div >
215+ < p class ="footer-text "> TypeScript Coverage Report generated by < a href ="https://github.com/plantain-00/type-coverage "> type-coverage</ a > and < a href ="https://github.com/alexcanessa/typescript-coverage-report "> typescript-coverage-report</ a > at Thu, 11 Aug 2022 15:27:29 GMT</ p >
216+ </ body >
217+ </ html >
218+
0 commit comments