{children}
7 | );
8 |
--------------------------------------------------------------------------------
/src/components/Card/s.module.scss:
--------------------------------------------------------------------------------
1 | .card {
2 | border: 2px solid black;
3 | border-radius: var(--round-corner);
4 | padding: .5em 1.5em;
5 | margin: 0 auto 1em;
6 | box-shadow: #222 4px 4px 0 0;
7 | }
--------------------------------------------------------------------------------
/src/components/ExternalLinkIcon/index.jsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import s from './s.module.scss';
3 |
4 | const ExternalLinkIcon = () => (
5 |
12 | );
13 |
14 | export default ExternalLinkIcon;
15 |
--------------------------------------------------------------------------------
/src/components/ExternalLinkIcon/s.module.scss:
--------------------------------------------------------------------------------
1 | .externalLinkIcon {
2 | vertical-align: top;
3 | width: 1.5em;
4 | height: 1.5em;
5 | margin-left: 0.5em;
6 | }
--------------------------------------------------------------------------------
/src/components/Footer/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { graphql, StaticQuery } from 'gatsby';
3 | import s from './s.module.scss';
4 |
5 | const Friend = ({ name, link }) => (
6 |
7 |
22 | {name}
23 |
24 | );
25 |
26 | const Footer = () => (
27 |
26 |
27 |
28 | {usedTitle}
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
77 | {children}
78 |
79 |
80 | );
81 | };
82 |
--------------------------------------------------------------------------------
/src/components/Layout/s.module.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --round-corner: 2px;
3 | }
4 |
5 | // naïve default layout
6 | // header and footer are full-width
7 | // main takes --main-width and aside takes --aside width
8 | // meant to be overwritten
9 | .defaultLayout {
10 | --aside-width: 440px;
11 | --main-width: 900px;
12 | background: white;
13 | min-height: 100vh;
14 | aside div {
15 | width: 100%;
16 | }
17 | @media (min-width: 1145px) {
18 | display: -ms-grid;
19 | display: grid;
20 | // -ms-grid-columns: minmax(900px, 1fr) minmax(440px, 1fr);
21 | grid-template-columns: minmax(--main-width, 1fr) minmax(--aside-width, 1fr);
22 | header, footer {
23 | -ms-grid-column: 1;
24 | -ms-grid-column-span: 2;
25 | grid-column: 1 / -1;
26 | }
27 | main {
28 | -ms-grid-row: 2;
29 | grid-column: 1;
30 | grid-row: 2;
31 | }
32 | aside:first-of-type {
33 | -ms-grid-row: 2;
34 | }
35 | aside:nth-of-type(2) {
36 | -ms-grid-row: 3;
37 | }
38 | aside {
39 | -ms-grid-column: 2;
40 | grid-column: 2;
41 | }
42 | }
43 | }
44 |
45 | .logo {
46 | vertical-align: middle;
47 | width: 4rem;
48 | margin-right: .5rem;
49 | }
50 |
51 | :global {
52 | .twitter-tweet-rendered {
53 | margin: 1.666rem auto;
54 | }
55 | }
56 |
57 | .speakAtRK {
58 | background: rgba(255, 255, 255, 0.75);
59 | display: flex;
60 | align-items: center;
61 | padding: 0.25em;
62 | position: fixed;
63 | top: .5em;
64 | right: .5em;
65 | border: 1px solid black;
66 | border-radius: var(--round-corner);
67 | padding: 0.25em 0.5em;
68 | box-shadow: #222 2px 2px 0 0;
69 | }
70 | .speakAtRKLogo {
71 | width: 1em;
72 | height: 1em;
73 | margin-right: 0.25em;
74 | }
75 |
76 | input {
77 | border: solid 1px black;
78 | box-shadow: #222 2px 2px 0 0;
79 | padding: 0.25em;
80 | max-width: 100%;
81 | }
--------------------------------------------------------------------------------
/src/components/Participants/index.jsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Avatar from '../../components/Avatar';
3 |
4 | const getAvatarProps = username => ({
5 | avatarUrl: `https://github.com/${username}.png?size=80`,
6 | url: `https://github.com/${username}`,
7 | login: username,
8 | });
9 |
10 | const Participants = ({ rawParticipants }) => {
11 | const participants = new Set();
12 | rawParticipants.map(({ node: { data: { Github_Username: username } } }) => {
13 | // dedupe
14 | return participants.add(username ? username.toLowerCase() : 'react-knowledgeable');
15 | });
16 | const numberOfSecretParticipants = rawParticipants.filter(
17 | ({
18 | node: {
19 | data: { Github_Username: username },
20 | },
21 | }) => !username || username === 'react-knowledgeable'
22 | ).length;
23 |
24 | return participants.size > 0 ? (
25 | <>
26 | 40 | 55 | React Knowledgeable 56 |
57 |
58 | React Knowledgeable, nicknamed <RK />, is a fun and
59 | friendly podium to share what we learn about React.
60 |
27 | 28 | 👥 29 | {' '} 30 | Attendees{' '} 31 | 32 | 👥 33 | 34 |
35 |36 | {participants.size > 1 ? ( 37 | {participants.size} amazing RK kids are going 38 | ) : ( 39 | an amazing RK kid is going 40 | )} 41 | {participants.size && numberOfSecretParticipants > 0 && ( 42 | 43 | , {numberOfSecretParticipants} more are going but prefer not to let 44 | us know. 45 | 46 | )} 47 |
48 | {/* @TODO: Put this back when we have added the ability for people to hide their profile */ 49 | Array.from(participants).map(username => { 50 | return117 | See you there :) Would you like to{' '} 118 | 119 | add this to your calendar 120 | 121 | ? 122 |
123 | )} 124 |11 | {title} 12 |
13 |Topics
90 |
91 | {!!labels &&
92 | labels
93 | .filter(
94 | label =>
95 | // GH doesn't have query filters on labels
96 | !['talk', 'event', 'react updates'].includes(label.name) &&
97 | label.issues.nodes.length
98 | )
99 | .map(({ name, issues: { nodes: issues } }) => (
100 |
101 |
109 |
110 | {title}
111 | {!closed ? (
112 | upcoming
113 | ) : null}
114 |
120 |
123 |
127 | )
128 | )}
129 |
130 | ))}
131 |
132 | {name}
102 | {!!issues && 103 | issues 104 | // sorts by created descending, later talk comes up 105 | .sort((a, b) => (a.createdAt > b.createdAt ? -1 : 1)) 106 | .map( 107 | ({ title, body, url, closed, createdAt, number }) => ( 108 |
110 | {title}
111 | {!closed ? (
112 | upcoming
113 | ) : null}
114 |
120 |
123 | 124 | {parseBodyText(body)} 125 |
126 |{title}
255 |256 | {parseDate(date)}, 7:30pm 257 |
258 |
260 |
262 |
263 |
265 | {content && content}
266 | 268 | 269 | 🎙 270 | {' '} 271 | Talk Line-up{' '} 272 | 273 | 🎙 274 | 275 |
276 |-
277 | {talkIssueIds &&
278 | talkIssueIds.length &&
279 | talkIssueIds.map(talkIssueId => {
280 | const talkData = talks.find(
281 | ({ number }) => number === talkIssueId
282 | );
283 | const { title, url } = talkData;
284 | return (
285 |
- 286 | 287 | {title} 288 | 289 | 290 | ); 291 | })} 292 |
talk
;
3 |
--------------------------------------------------------------------------------
/src/templates/Story/index.jsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { graphql } from 'gatsby';
3 | import parseDate from '../../utils/parseDate';
4 | import Layout from '../../components/Layout';
5 | import s from './s.module.scss';
6 |
7 | export default ({
8 | data: {
9 | site: {
10 | siteMetadata: {
11 | title: siteTitle,
12 | description,
13 | url,
14 | image,
15 | twitter,
16 | titleTemplate,
17 | },
18 | },
19 | markdownRemark: {
20 | frontmatter: { title, speaker, date, cover },
21 | html,
22 | },
23 | },
24 | }) => (
25 | {title}
40 |41 | {speaker} on {parseDate(date)} 42 |
43 |{title}
24 |25 | {login} on {parseDate(createdAt)} 26 |
27 |