From 14dbd31800049d56d4c6685d1b635973d87616a7 Mon Sep 17 00:00:00 2001 From: Jacob Wenger Date: Mon, 17 Jun 2024 00:47:02 -0700 Subject: [PATCH] Updated more files to TypeScript (#141) * Updated more files to TypeScript * And more --- website/src/components/blog/Blog.tsx | 98 ++++++++++++ website/src/components/blog/Blog/index.js | 49 ------ .../src/components/blog/Blog/index.styles.js | 59 ------- .../blog/{BlogPost/index.js => BlogPost.tsx} | 14 +- .../components/blog/BlogPost/index.styles.js | 115 -------------- .../components/blog/NewsletterSignupForm.tsx | 136 ++++++++++++++++ .../blog/NewsletterSignupForm/index.js | 74 --------- .../blog/NewsletterSignupForm/index.styles.js | 83 ---------- .../SearchResultsAnalysisPost.tsx} | 146 +++++++++++++++--- .../data.js | 0 .../elevenDegreesOfSeparationSearch.png | Bin .../queries.txt | 0 .../charts/{BarChart/index.js => BarChart.js} | 45 +++++- .../charts/BarChart/index.styles.js | 51 ------ website/src/components/charts/Table.tsx | 85 ++++++++++ website/src/components/charts/Table/index.js | 40 ----- .../components/charts/Table/index.styles.js | 44 ------ website/src/index.tsx | 8 +- 18 files changed, 500 insertions(+), 547 deletions(-) create mode 100644 website/src/components/blog/Blog.tsx delete mode 100644 website/src/components/blog/Blog/index.js delete mode 100644 website/src/components/blog/Blog/index.styles.js rename website/src/components/blog/{BlogPost/index.js => BlogPost.tsx} (60%) delete mode 100644 website/src/components/blog/BlogPost/index.styles.js create mode 100644 website/src/components/blog/NewsletterSignupForm.tsx delete mode 100644 website/src/components/blog/NewsletterSignupForm/index.js delete mode 100644 website/src/components/blog/NewsletterSignupForm/index.styles.js rename website/src/components/blog/posts/{SearchResultsAnalysisPost/index.js => searchResultsAnalysis/SearchResultsAnalysisPost.tsx} (79%) rename website/src/components/blog/posts/{SearchResultsAnalysisPost => searchResultsAnalysis}/data.js (100%) rename website/src/components/blog/posts/{SearchResultsAnalysisPost => searchResultsAnalysis}/elevenDegreesOfSeparationSearch.png (100%) rename website/src/components/blog/posts/{SearchResultsAnalysisPost => searchResultsAnalysis}/queries.txt (100%) rename website/src/components/charts/{BarChart/index.js => BarChart.js} (80%) delete mode 100644 website/src/components/charts/BarChart/index.styles.js create mode 100644 website/src/components/charts/Table.tsx delete mode 100644 website/src/components/charts/Table/index.js delete mode 100644 website/src/components/charts/Table/index.styles.js diff --git a/website/src/components/blog/Blog.tsx b/website/src/components/blog/Blog.tsx new file mode 100644 index 0000000..8de7ce2 --- /dev/null +++ b/website/src/components/blog/Blog.tsx @@ -0,0 +1,98 @@ +import React from 'react'; +import {Helmet} from 'react-helmet'; +import styled from 'styled-components'; + +import {Logo} from '../common/Logo.tsx'; +import {StyledTextLink} from '../common/StyledTextLink.tsx'; +import {NewsletterSignupForm} from './NewsletterSignupForm.tsx'; +import posts from './posts/index.json'; + +const Wrapper = styled.div` + max-width: 740px; + padding: 4px 20px; + margin: 20px auto; + background-color: ${({theme}) => theme.colors.creme}; + border: solid 3px ${({theme}) => theme.colors.darkGreen}; + + @media (max-width: 600px) { + padding: 2px 16px; + margin-bottom: 0; + border: none; + border-top: solid 3px ${({theme}) => theme.colors.darkGreen}; + } +`; + +const Title = styled.h1` + margin: 20px auto; + text-align: center; + font-size: 32px; + font-weight: bold; + color: ${({theme}) => theme.colors.darkGreen}; + + @media (max-width: 600px) { + font-size: 28px; + } +`; + +const Divider = styled.div` + border-top: solid 1px ${({theme}) => theme.colors.darkGreen}; + margin: 20px auto; + + &::after { + content: ''; + } +`; + +const BlogPostCardWrapper = styled.div` + a { + font-size: 28px; + + @media (max-width: 600px) { + font-size: 24px; + } + } +`; + +const BlogPostDate = styled.p` + font-size: 16px; + margin: 12px 0; + color: ${({theme}) => theme.colors.darkGreen}; +`; + +const BlogPostDescription = styled.p` + font-size: 20px; + line-height: 1.5; + color: ${({theme}) => theme.colors.darkGreen}; +`; + +const BlogPostCard = ({id, date, title, description}) => ( + + + {date} + {description} + +); + +export const Blog = () => ( + <> + + Blog | Six Degrees of Wikipedia + + + + + + A blog about building, maintaining, and promoting Six Degrees of Wikipedia + + + {posts.map((postInfo) => ( + + + + + ))} + + + + +); diff --git a/website/src/components/blog/Blog/index.js b/website/src/components/blog/Blog/index.js deleted file mode 100644 index b76f701..0000000 --- a/website/src/components/blog/Blog/index.js +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import {Helmet} from 'react-helmet'; - -import {Logo} from '../../common/Logo.tsx'; -import {StyledTextLink} from '../../common/StyledTextLink.tsx'; -import NewsletterSignupForm from '../NewsletterSignupForm'; -import posts from '../posts/index.json'; -import { - BlogPostCardWrapper, - BlogPostDate, - BlogPostDescription, - Divider, - Title, - Wrapper, -} from './index.styles'; - -const BlogPostCard = ({id, date, title, description}) => ( - - - {date} - {description} - -); - -const Blog = () => ( - <> - - Blog | Six Degrees of Wikipedia - - - - - - A blog about building, maintaining, and promoting Six Degrees of Wikipedia - - - {posts.map((postInfo) => ( - - - - - ))} - - - - -); - -export default Blog; diff --git a/website/src/components/blog/Blog/index.styles.js b/website/src/components/blog/Blog/index.styles.js deleted file mode 100644 index 8c3869d..0000000 --- a/website/src/components/blog/Blog/index.styles.js +++ /dev/null @@ -1,59 +0,0 @@ -import styled from 'styled-components'; - -export const Wrapper = styled.div` - max-width: 740px; - padding: 4px 20px; - margin: 20px auto; - background-color: ${({theme}) => theme.colors.creme}; - border: solid 3px ${({theme}) => theme.colors.darkGreen}; - - @media (max-width: 600px) { - padding: 2px 16px; - margin-bottom: 0; - border: none; - border-top: solid 3px ${({theme}) => theme.colors.darkGreen}; - } -`; - -export const Title = styled.h1` - margin: 20px auto; - text-align: center; - font-size: 32px; - font-weight: bold; - color: ${({theme}) => theme.colors.darkGreen}; - - @media (max-width: 600px) { - font-size: 28px; - } -`; - -export const Divider = styled.div` - border-top: solid 1px ${({theme}) => theme.colors.darkGreen}; - margin: 20px auto; - - &::after { - content: ''; - } -`; - -export const BlogPostCardWrapper = styled.div` - a { - font-size: 28px; - - @media (max-width: 600px) { - font-size: 24px; - } - } -`; - -export const BlogPostDate = styled.p` - font-size: 16px; - margin: 12px 0; - color: ${({theme}) => theme.colors.darkGreen}; -`; - -export const BlogPostDescription = styled.p` - font-size: 20px; - line-height: 1.5; - color: ${({theme}) => theme.colors.darkGreen}; -`; diff --git a/website/src/components/blog/BlogPost/index.js b/website/src/components/blog/BlogPost.tsx similarity index 60% rename from website/src/components/blog/BlogPost/index.js rename to website/src/components/blog/BlogPost.tsx index 1f77c7e..ef734b9 100644 --- a/website/src/components/blog/BlogPost/index.js +++ b/website/src/components/blog/BlogPost.tsx @@ -1,9 +1,13 @@ import React, {lazy, Suspense} from 'react'; import {Redirect, useParams} from 'react-router-dom'; -import {Logo} from '../../common/Logo.tsx'; +import {Logo} from '../common/Logo.tsx'; -const AsyncSearchResultsAnalysisPost = lazy(() => import('../posts/SearchResultsAnalysisPost')); +const AsyncSearchResultsAnalysisPost = lazy(() => + import('./posts/searchResultsAnalysis/SearchResultsAnalysisPost.tsx').then((module) => ({ + default: module.SearchResultsAnalysisPost, + })) +); const getBlogPostContent = (postId) => { switch (postId) { @@ -18,8 +22,8 @@ const getBlogPostContent = (postId) => { } }; -const BlogPost = () => { - let {postId} = useParams(); +export const BlogPost = () => { + const {postId} = useParams(); return ( <> @@ -28,5 +32,3 @@ const BlogPost = () => { ); }; - -export default BlogPost; diff --git a/website/src/components/blog/BlogPost/index.styles.js b/website/src/components/blog/BlogPost/index.styles.js deleted file mode 100644 index a76fdcd..0000000 --- a/website/src/components/blog/BlogPost/index.styles.js +++ /dev/null @@ -1,115 +0,0 @@ -import styled from 'styled-components'; - -export const Wrapper = styled.div` - max-width: 740px; - padding: 4px 20px; - margin: 20px auto; - background-color: ${({theme}) => theme.colors.creme}; - border: solid 3px ${({theme}) => theme.colors.darkGreen}; - - @media (max-width: 600px) { - padding: 2px 16px; - margin-bottom: 0; - border: none; - border-top: solid 3px ${({theme}) => theme.colors.darkGreen}; - } -`; - -export const Title = styled.h1` - margin: 20px auto; - text-align: center; - font-size: 36px; - font-weight: bold; - font-family: 'Quicksand', serif; - color: ${({theme}) => theme.colors.red}; -`; - -export const Subtitle = styled.p` - text-align: center; - margin: 20px auto; - font-size: 20px; - font-family: 'Quicksand', serif; - color: ${({theme}) => theme.colors.darkGreen}; -`; - -export const SectionTitle = styled.h2` - margin: 20px auto; - font-size: 28px; - font-weight: bold; - font-family: 'Quicksand', serif; - color: ${({theme}) => theme.colors.red}; -`; - -export const P = styled.p` - margin: 20px auto; - font-size: 20px; - line-height: 1.5; - font-family: 'Quicksand', serif; - text-align: justify; - color: ${({theme}) => theme.colors.darkGreen}; -`; - -export const Image = styled.img` - display: block; - width: 100%; -`; - -export const StatsWrapper = styled.div` - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-around; - margin: -10px 0; - - @media (max-width: 600px) { - justify-content: center; - } -`; - -export const Stat = styled.div` - display: flex; - flex-direction: column; - width: calc(50% - 12px); - margin: 10px 0; - text-align: center; - background-color: ${({theme}) => theme.colors.creme}; - border: solid 3px ${({theme}) => theme.colors.darkGreen}; - - p:first-of-type { - background-color: ${({theme}) => theme.colors.darkGreen}; - padding: 12px; - font-size: 20px; - font-weight: bold; - color: ${({theme}) => theme.colors.creme}; - } - - p:last-of-type { - display: flex; - height: 100%; - justify-content: center; - align-items: center; - padding: 8px; - font-size: 32px; - font-weight: bold; - color: ${({theme}) => theme.colors.darkGreen}; - } - - a { - max-width: 90%; - font-size: 28px; - margin: 12px auto 4px auto; - } - - @media (max-width: 600px) { - width: 100%; - } -`; - -export const Divider = styled.div` - border-top: solid 1px ${({theme}) => theme.colors.darkGreen}; - margin: 20px auto; - - &::after { - content: ''; - } -`; diff --git a/website/src/components/blog/NewsletterSignupForm.tsx b/website/src/components/blog/NewsletterSignupForm.tsx new file mode 100644 index 0000000..fb3ac04 --- /dev/null +++ b/website/src/components/blog/NewsletterSignupForm.tsx @@ -0,0 +1,136 @@ +import React, {useState} from 'react'; +import styled from 'styled-components'; + +import {Button} from '../common/Button.tsx'; + +const Wrapper = styled.div` + display: flex; + margin: 20px auto; + flex-direction: column; + align-items: center; + justify-content: center; + + /* Fix weird input button styling on iOS */ + input { + appearance: none; + } +`; + +const Intro = styled.div` + width: 90%; + max-width: 500px; + text-align: center; + + p:first-of-type { + color: ${({theme}) => theme.colors.red}; + font-size: 32px; + font-weight: bold; + margin-bottom: 10px; + + @media (max-width: 600px) { + font-size: 28px; + } + } + + p:nth-of-type(2) { + font-size: 20px; + color: ${({theme}) => theme.colors.darkGreen}; + } +`; + +const Form = styled.form` + width: 100%; +`; + +const HiddenBotInput = styled.input` + position: absolute; + left: -5000px; +`; + +const FormInput = styled.input` + display: block; + width: 100%; + max-width: 360px; + height: 60px; + margin: 20px auto; + padding: 10px; + color: ${({theme}) => theme.colors.darkGreen}; + border: solid 3px ${({theme}) => theme.colors.darkGreen}; + background-color: ${({theme}) => theme.colors.creme}; + font-size: 24px; + text-align: center; + + &::placeholder { + color: ${({theme}) => theme.colors.darkGreen}; + opacity: 0.5; + transition: opacity 0.35s ease-in-out; + } + + &:hover::placeholder { + opacity: 0.75; + } + + &:focus::placeholder { + opacity: 0; + } +`; + +const SubscribeButton = styled(Button)` + width: 200px; + height: 60px; + margin: auto; + font-size: 28px; + border-radius: 8px; +`; + +export const NewsletterSignupForm: React.FC = () => { + const [email, setEmail] = useState(''); + const [firstName, setFirstName] = useState(''); + + return ( + + +

Enjoy this content?

+

+ Subscribe to my low-volume newsletter to get notified when a new post is published or when + I release content from one of my other projects. +

+ + +
+ setEmail(e.target.value)} + /> + + setFirstName(e.target.value)} + /> + + {/* From MailChimp: do not remove this or risk form bot signups */} + + + Subscribe + +
+ ); +}; diff --git a/website/src/components/blog/NewsletterSignupForm/index.js b/website/src/components/blog/NewsletterSignupForm/index.js deleted file mode 100644 index 8f4c768..0000000 --- a/website/src/components/blog/NewsletterSignupForm/index.js +++ /dev/null @@ -1,74 +0,0 @@ -import React, {Component} from 'react'; - -import {Form, FormInput, HiddenBotInput, Intro, SubscribeButton, Wrapper} from './index.styles'; - -class NewsletterSignupForm extends Component { - constructor(props) { - super(props); - - this.state = { - email: '', - firstName: '', - }; - - this.onEmailChange = this.onInputChange.bind(this, 'email'); - this.onFirstNameChange = this.onInputChange.bind(this, 'firstName'); - } - - onInputChange(name, event) { - this.setState({ - [name]: event.target.value, - }); - } - - render() { - return ( - - -

Enjoy this content?

-

- Subscribe to my low-volume newsletter to get notified when a new post is published or - when I release content from one of my other projects. -

- - -
- - - - - {/* From MailChimp: do not remove this or risk form bot signups */} - - - Subscribe - -
- ); - } -} - -export default NewsletterSignupForm; diff --git a/website/src/components/blog/NewsletterSignupForm/index.styles.js b/website/src/components/blog/NewsletterSignupForm/index.styles.js deleted file mode 100644 index 0f4a96d..0000000 --- a/website/src/components/blog/NewsletterSignupForm/index.styles.js +++ /dev/null @@ -1,83 +0,0 @@ -import styled from 'styled-components'; - -import {Button} from '../../common/Button.tsx'; - -export const Wrapper = styled.div` - display: flex; - margin: 20px auto; - flex-direction: column; - align-items: center; - justify-content: center; - - /* Fix weird input button styling on iOS */ - input { - appearance: none; - } -`; - -export const Intro = styled.div` - width: 90%; - max-width: 500px; - text-align: center; - - p:first-of-type { - color: ${({theme}) => theme.colors.red}; - font-size: 32px; - font-weight: bold; - margin-bottom: 10px; - - @media (max-width: 600px) { - font-size: 28px; - } - } - - p:nth-of-type(2) { - font-size: 20px; - color: ${({theme}) => theme.colors.darkGreen}; - } -`; - -export const Form = styled.form` - width: 100%; -`; - -export const HiddenBotInput = styled.input` - position: absolute; - left: -5000px; -`; - -export const FormInput = styled.input` - display: block; - width: 100%; - max-width: 360px; - height: 60px; - margin: 20px auto; - padding: 10px; - color: ${({theme}) => theme.colors.darkGreen}; - border: solid 3px ${({theme}) => theme.colors.darkGreen}; - background-color: ${({theme}) => theme.colors.creme}; - font-size: 24px; - text-align: center; - - &::placeholder { - color: ${({theme}) => theme.colors.darkGreen}; - opacity: 0.5; - transition: opacity 0.35s ease-in-out; - } - - &:hover::placeholder { - opacity: 0.75; - } - - &:focus::placeholder { - opacity: 0; - } -`; - -export const SubscribeButton = styled(Button)` - width: 200px; - height: 60px; - margin: auto; - font-size: 28px; - border-radius: 8px; -`; diff --git a/website/src/components/blog/posts/SearchResultsAnalysisPost/index.js b/website/src/components/blog/posts/searchResultsAnalysis/SearchResultsAnalysisPost.tsx similarity index 79% rename from website/src/components/blog/posts/SearchResultsAnalysisPost/index.js rename to website/src/components/blog/posts/searchResultsAnalysis/SearchResultsAnalysisPost.tsx index ba0e757..7eae1b4 100644 --- a/website/src/components/blog/posts/SearchResultsAnalysisPost/index.js +++ b/website/src/components/blog/posts/searchResultsAnalysis/SearchResultsAnalysisPost.tsx @@ -1,34 +1,138 @@ import React from 'react'; import {Helmet} from 'react-helmet'; +import styled from 'styled-components'; import {getNumberWithCommas} from '../../../../utils.ts'; import {BarChart} from '../../../charts/BarChart'; -import {Table} from '../../../charts/Table'; +import {Table} from '../../../charts/Table.tsx'; import {StyledTextLink} from '../../../common/StyledTextLink.tsx'; -import { - Divider, - Image, - P, - SectionTitle, - Stat, - StatsWrapper, - Subtitle, - Title, - Wrapper, -} from '../../BlogPost/index.styles'; -import NewsletterSignupForm from '../../NewsletterSignupForm'; -import * as data from './data'; +import {NewsletterSignupForm} from '../../NewsletterSignupForm.tsx'; +import * as data from './data.js'; import elevenDegreesOfSeparationSearchImage from './elevenDegreesOfSeparationSearch.png'; -const title = 'Insights On Hitler And More From The First 500,000 Searches'; - -const SearchResultsAnalysisPost = () => ( +const TITLE = 'Insights On Hitler And More From The First 500,000 Searches'; + +const Wrapper = styled.div` + max-width: 740px; + padding: 4px 20px; + margin: 20px auto; + background-color: ${({theme}) => theme.colors.creme}; + border: solid 3px ${({theme}) => theme.colors.darkGreen}; + + @media (max-width: 600px) { + padding: 2px 16px; + margin-bottom: 0; + border: none; + border-top: solid 3px ${({theme}) => theme.colors.darkGreen}; + } +`; + +const Title = styled.h1` + margin: 20px auto; + text-align: center; + font-size: 36px; + font-weight: bold; + font-family: 'Quicksand', serif; + color: ${({theme}) => theme.colors.red}; +`; + +const Subtitle = styled.p` + text-align: center; + margin: 20px auto; + font-size: 20px; + font-family: 'Quicksand', serif; + color: ${({theme}) => theme.colors.darkGreen}; +`; + +const SectionTitle = styled.h2` + margin: 20px auto; + font-size: 28px; + font-weight: bold; + font-family: 'Quicksand', serif; + color: ${({theme}) => theme.colors.red}; +`; + +const P = styled.p` + margin: 20px auto; + font-size: 20px; + line-height: 1.5; + font-family: 'Quicksand', serif; + text-align: justify; + color: ${({theme}) => theme.colors.darkGreen}; +`; + +const Image = styled.img` + display: block; + width: 100%; +`; + +const StatsWrapper = styled.div` + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + margin: -10px 0; + + @media (max-width: 600px) { + justify-content: center; + } +`; + +const Stat = styled.div` + display: flex; + flex-direction: column; + width: calc(50% - 12px); + margin: 10px 0; + text-align: center; + background-color: ${({theme}) => theme.colors.creme}; + border: solid 3px ${({theme}) => theme.colors.darkGreen}; + + p:first-of-type { + background-color: ${({theme}) => theme.colors.darkGreen}; + padding: 12px; + font-size: 20px; + font-weight: bold; + color: ${({theme}) => theme.colors.creme}; + } + + p:last-of-type { + display: flex; + height: 100%; + justify-content: center; + align-items: center; + padding: 8px; + font-size: 32px; + font-weight: bold; + color: ${({theme}) => theme.colors.darkGreen}; + } + + a { + max-width: 90%; + font-size: 28px; + margin: 12px auto 4px auto; + } + + @media (max-width: 600px) { + width: 100%; + } +`; + +const Divider = styled.div` + border-top: solid 1px ${({theme}) => theme.colors.darkGreen}; + margin: 20px auto; + + &::after { + content: ''; + } +`; + +export const SearchResultsAnalysisPost = () => ( - {`${title} | Blog | Six Degrees of Wikipedia`} + {`${TITLE} | Blog | Six Degrees of Wikipedia`} - {title} + {TITLE} | March 14, 2018 @@ -277,7 +381,7 @@ const SearchResultsAnalysisPost = () => ( these stats, you can find them all on{' '} . I will likely go into more detail on my server and database setup in a future post.

@@ -304,5 +408,3 @@ const SearchResultsAnalysisPost = () => ( ); - -export default SearchResultsAnalysisPost; diff --git a/website/src/components/blog/posts/SearchResultsAnalysisPost/data.js b/website/src/components/blog/posts/searchResultsAnalysis/data.js similarity index 100% rename from website/src/components/blog/posts/SearchResultsAnalysisPost/data.js rename to website/src/components/blog/posts/searchResultsAnalysis/data.js diff --git a/website/src/components/blog/posts/SearchResultsAnalysisPost/elevenDegreesOfSeparationSearch.png b/website/src/components/blog/posts/searchResultsAnalysis/elevenDegreesOfSeparationSearch.png similarity index 100% rename from website/src/components/blog/posts/SearchResultsAnalysisPost/elevenDegreesOfSeparationSearch.png rename to website/src/components/blog/posts/searchResultsAnalysis/elevenDegreesOfSeparationSearch.png diff --git a/website/src/components/blog/posts/SearchResultsAnalysisPost/queries.txt b/website/src/components/blog/posts/searchResultsAnalysis/queries.txt similarity index 100% rename from website/src/components/blog/posts/SearchResultsAnalysisPost/queries.txt rename to website/src/components/blog/posts/searchResultsAnalysis/queries.txt diff --git a/website/src/components/charts/BarChart/index.js b/website/src/components/charts/BarChart.js similarity index 80% rename from website/src/components/charts/BarChart/index.js rename to website/src/components/charts/BarChart.js index b3c7c29..3b809df 100644 --- a/website/src/components/charts/BarChart/index.js +++ b/website/src/components/charts/BarChart.js @@ -1,11 +1,52 @@ import * as d3 from 'd3'; import debounce from 'lodash/debounce'; import React, {Component} from 'react'; - -import {BarChartSvg, BarChartWrapper} from './index.styles'; +import styled from 'styled-components'; const DEFAULT_CHART_HEIGHT = 300; +const BarChartWrapper = styled.div` + margin: 20px auto; + overflow: hidden; + background-color: ${({theme}) => theme.colors.creme}; + border: solid 3px ${({theme}) => theme.colors.darkGreen}; +`; + +const BarChartSvg = styled.svg` + .bar rect { + fill: ${({theme}) => theme.colors.darkGreen}; + } + text { + fill: ${({theme}) => theme.colors.darkGreen}; + } + .bar text { + font-size: 14px; + text-anchor: middle; + @media (max-width: 600px) { + font-size: 8px; + } + } + .x-axis, + .y-axis { + font-size: 14px; + path, + line { + stroke: ${({theme}) => theme.colors.darkGreen}; + } + @media (max-width: 600px) { + font-size: 10px; + } + } + .x-axis-label, + .y-axis-label { + font-size: 20px; + text-anchor: middle; + @media (max-width: 600px) { + font-size: 14px; + } + } +`; + export class BarChart extends Component { constructor() { super(); diff --git a/website/src/components/charts/BarChart/index.styles.js b/website/src/components/charts/BarChart/index.styles.js deleted file mode 100644 index 09f5c81..0000000 --- a/website/src/components/charts/BarChart/index.styles.js +++ /dev/null @@ -1,51 +0,0 @@ -import styled from 'styled-components'; - -export const BarChartWrapper = styled.div` - margin: 20px auto; - overflow: hidden; - background-color: ${({theme}) => theme.colors.creme}; - border: solid 3px ${({theme}) => theme.colors.darkGreen}; -`; - -export const BarChartSvg = styled.svg` - .bar rect { - fill: ${({theme}) => theme.colors.darkGreen}; - } - - text { - fill: ${({theme}) => theme.colors.darkGreen}; - } - - .bar text { - font-size: 14px; - text-anchor: middle; - - @media (max-width: 600px) { - font-size: 8px; - } - } - - .x-axis, - .y-axis { - font-size: 14px; - - path, - line { - stroke: ${({theme}) => theme.colors.darkGreen}; - } - - @media (max-width: 600px) { - font-size: 10px; - } - } - - .x-axis-label, - .y-axis-label { - font-size: 20px; - text-anchor: middle; - - @media (max-width: 600px) { - font-size: 14px; - } - } -`; diff --git a/website/src/components/charts/Table.tsx b/website/src/components/charts/Table.tsx new file mode 100644 index 0000000..8d57dc0 --- /dev/null +++ b/website/src/components/charts/Table.tsx @@ -0,0 +1,85 @@ +import React from 'react'; +import styled from 'styled-components'; + +const TableWrapper = styled.div` + margin: 20px auto; + overflow: scroll; + + table { + margin: auto; + width: 100%; + color: ${({theme}) => theme.colors.darkGreen}; + border: solid 3px ${({theme}) => theme.colors.darkGreen}; + border-collapse: collapse; + + th, + td { + font-size: 20px; + padding: 8px 12px; + text-align: center; + border-right: solid 2px ${({theme}) => theme.colors.darkGreen}; + + @media (max-width: 700px) { + font-size: 16px; + } + } + + th { + color: ${({theme}) => theme.colors.creme}; + background-color: ${({theme}) => theme.colors.darkGreen}; + } + + tr { + background-color: ${({theme}) => theme.colors.gray}; + } + + tr:nth-of-type(2n) { + background-color: ${({theme}) => theme.colors.creme}; + } + + a { + text-decoration: none; + color: ${({theme}) => theme.colors.darkGreen}; + } + } +`; + +export const Table: React.FC<{ + readonly headers: string[]; + readonly rows: string[][]; +}> = ({headers, rows}) => { + const headerRow = ( + + {headers.map((header, i) => { + if (typeof header === 'string') { + return {header}; + } else { + return ( + + {header.text} + + ); + } + })} + + ); + + const dataRows = rows.map((row, i) => { + return ( + + {row.map((item, j) => ( + {item} + ))} + + ); + }); + + return ( + + + {headerRow} + {dataRows} +
+ + ); +}; diff --git a/website/src/components/charts/Table/index.js b/website/src/components/charts/Table/index.js deleted file mode 100644 index e2c2c3b..0000000 --- a/website/src/components/charts/Table/index.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; - -import {TableWrapper} from './index.styles'; - -export const Table = ({headers, rows}) => { - const headerRow = ( - - {headers.map((header, i) => { - if (typeof header === 'string') { - return {header}; - } else { - return ( - - {header.text} - - ); - } - })} - - ); - - const dataRows = rows.map((row, i) => { - return ( - - {row.map((item, j) => ( - {item} - ))} - - ); - }); - - return ( - - - {headerRow} - {dataRows} -
- - ); -}; diff --git a/website/src/components/charts/Table/index.styles.js b/website/src/components/charts/Table/index.styles.js deleted file mode 100644 index ab04601..0000000 --- a/website/src/components/charts/Table/index.styles.js +++ /dev/null @@ -1,44 +0,0 @@ -import styled from 'styled-components'; - -export const TableWrapper = styled.div` - margin: 20px auto; - overflow: scroll; - - table { - margin: auto; - width: 100%; - color: ${({theme}) => theme.colors.darkGreen}; - border: solid 3px ${({theme}) => theme.colors.darkGreen}; - border-collapse: collapse; - - th, - td { - font-size: 20px; - padding: 8px 12px; - text-align: center; - border-right: solid 2px ${({theme}) => theme.colors.darkGreen}; - - @media (max-width: 700px) { - font-size: 16px; - } - } - - th { - color: ${({theme}) => theme.colors.creme}; - background-color: ${({theme}) => theme.colors.darkGreen}; - } - - tr { - background-color: ${({theme}) => theme.colors.gray}; - } - - tr:nth-of-type(2n) { - background-color: ${({theme}) => theme.colors.creme}; - } - - a { - text-decoration: none; - color: ${({theme}) => theme.colors.darkGreen}; - } - } -`; diff --git a/website/src/index.tsx b/website/src/index.tsx index 0b11a7b..f18e07f 100644 --- a/website/src/index.tsx +++ b/website/src/index.tsx @@ -18,8 +18,12 @@ const history = createBrowserHistory(); require('typeface-quicksand'); require('typeface-crimson-text'); -const AsyncBlog = lazy(() => import('./components/blog/Blog/index.js')); -const AsyncBlogPost = lazy(() => import('./components/blog/BlogPost/index.js')); +const AsyncBlog = lazy(() => + import('./components/blog/Blog.tsx').then((module) => ({default: module.Blog})) +); +const AsyncBlogPost = lazy(() => + import('./components/blog/BlogPost.tsx').then((module) => ({default: module.BlogPost})) +); const root = createRoot(document.getElementById('root')); root.render(