From ab8e8edd5a56343dd98341f2e6c34b21471b9ee1 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Mon, 11 May 2020 02:00:57 -0400 Subject: [PATCH] ui: first pass on redesign (#228) --- package-lock.json | 11 ++ package.json | 2 + src/components/Breadcrumb/index.tsx | 20 ++-- src/components/Breadcrumb/styles.tsx | 19 ++-- src/components/Container/styles.tsx | 16 ++- src/components/ContentPage/index.tsx | 8 ++ src/components/ContentPage/styles.tsx | 11 ++ src/components/Footer/index.tsx | 16 ++- src/components/Footer/styles.tsx | 26 +++-- src/components/Header/index.tsx | 110 ++++++------------- src/components/Header/styles.tsx | 91 ++++------------ src/components/HeaderBarebone/index.tsx | 33 ++++++ src/components/HeaderBarebone/styles.tsx | 116 ++++++++++++++++++++ src/components/Home/styles.tsx | 2 +- src/components/Link/styles.tsx | 25 ++++- src/components/Markdown/styles.tsx | 31 ++++-- src/components/MobileHeader/styles.tsx | 3 +- src/components/PageContent/index.tsx | 75 +++++++++++++ src/components/PageContent/styles.tsx | 108 +++++++++++++++++++ src/components/ResourcesSidebar/styles.tsx | 4 + src/components/Sidebar/index.tsx | 16 +-- src/components/Sidebar/styles.tsx | 24 ++++- src/components/StackedAvatars/styles.tsx | 2 +- src/components/Waves/index.tsx | 12 ++- src/components/Waves/styles.tsx | 7 ++ src/content/site/about.md | 2 - src/content/site/rules.md | 117 +++++++++++++-------- src/design/themes.ts | 10 +- src/images/circles.svg | 3 + src/images/tph-banner.svg | 68 ------------ src/images/waves-top2.svg | 33 ++++++ src/layouts/ColumnLayout/index.tsx | 8 +- src/layouts/ColumnLayout/styles.tsx | 5 +- src/pages/about.tsx | 6 +- src/pages/archives/index.tsx | 20 ++-- src/pages/resources/index.tsx | 37 ++++--- src/pages/rules.tsx | 6 +- src/templates/archive.tsx | 4 +- src/templates/languageHome.tsx | 18 +++- src/templates/languagePost.tsx | 16 ++- 40 files changed, 779 insertions(+), 362 deletions(-) create mode 100644 src/components/ContentPage/index.tsx create mode 100644 src/components/ContentPage/styles.tsx create mode 100644 src/components/HeaderBarebone/index.tsx create mode 100644 src/components/HeaderBarebone/styles.tsx create mode 100644 src/components/PageContent/index.tsx create mode 100644 src/components/PageContent/styles.tsx create mode 100644 src/images/circles.svg delete mode 100644 src/images/tph-banner.svg create mode 100644 src/images/waves-top2.svg diff --git a/package-lock.json b/package-lock.json index af5eaa1..0156d7a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2704,6 +2704,12 @@ "defer-to-connect": "^1.0.1" } }, + "@types/classnames": { + "version": "2.2.10", + "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.10.tgz", + "integrity": "sha512-1UzDldn9GfYYEsWWnn/P4wkTlkZDH7lDb0wBMGbtIQc9zXEQq7FlKBdZUn6OBqD8sKZZ2RQO2mAjGpXiDGoRmQ==", + "dev": true + }, "@types/color-name": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", @@ -5347,6 +5353,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", diff --git a/package.json b/package.json index 9f2028b..96b70a2 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ }, "dependencies": { "@reach/router": "^1.3.3", + "classnames": "^2.2.6", "gatsby": "^2.19.34", "gatsby-plugin-layout": "^1.1.23", "gatsby-plugin-manifest": "^2.2.45", @@ -62,6 +63,7 @@ "@graphql-codegen/typescript": "1.13.0", "@graphql-codegen/typescript-operations": "1.13.0", "@graphql-codegen/typescript-react-apollo": "1.13.0", + "@types/classnames": "^2.2.10", "@types/lodash": "^4.14.149", "@types/prismjs": "^1.16.0", "@types/ramda": "^0.26.43", diff --git a/src/components/Breadcrumb/index.tsx b/src/components/Breadcrumb/index.tsx index 0015236..7ed0fdd 100644 --- a/src/components/Breadcrumb/index.tsx +++ b/src/components/Breadcrumb/index.tsx @@ -14,7 +14,7 @@ interface IBreadcrumbProps { basePath: string } -const Link: FC = ({ item }) => { +const LinkItem: FC = ({ item }) => { return {humanize(item.title)} } @@ -32,17 +32,17 @@ function flatten([ export function Breadcrumb({ relativePath, basePath }: IBreadcrumbProps) { const paths = relativePath.split("/") const breadcrumbItems = flatten([traversePaths(paths, basePath)]) - let foldersDepth = 0; + let foldersDepth = 0 return ( - - { if (item.type === "folder") { - foldersDepth++; + foldersDepth++ if (foldersDepth > 1) { return ( - - { item.title } - - + + {item.title} + + ) } else { return ( - + ) diff --git a/src/components/Breadcrumb/styles.tsx b/src/components/Breadcrumb/styles.tsx index 9601163..f904701 100644 --- a/src/components/Breadcrumb/styles.tsx +++ b/src/components/Breadcrumb/styles.tsx @@ -1,9 +1,9 @@ import { Link } from "gatsby" -import { darken, lighten } from "polished" import styled from "styled-components" export const BreadcrumbWrapper = styled.div` display: flex; + flex-wrap: wrap; align-items: flex-start; @media screen and (max-width: 767px) { @@ -16,6 +16,7 @@ export const LinkWrapper = styled.div` display: flex; align-items: center; height: 30px; + white-space: nowrap; svg { width: 12px; @@ -24,20 +25,21 @@ export const LinkWrapper = styled.div` } svg path { - fill: ${props => props.theme.main.link}; + fill: ${props => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")}; } ` export const StyledLink = styled(Link)` - color: ${props => props.theme.main.link}; + color: ${props => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")}; cursor: pointer; + font-weight: 700; + text-decoration: underline; &:hover { - color: #045551; - color: ${props => - props.theme.name === "dark" - ? lighten(0.15, props.theme.main.link) - : darken(0.15, props.theme.main.link)}; + background: linear-gradient(92.97deg, #feaf6d 0%, #ff70a5 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } ` @@ -45,4 +47,5 @@ export const CurrentPage = styled.div` display: flex; align-items: center; height: 30px; + white-space: nowrap; ` diff --git a/src/components/Container/styles.tsx b/src/components/Container/styles.tsx index f98292c..5c1f0f2 100644 --- a/src/components/Container/styles.tsx +++ b/src/components/Container/styles.tsx @@ -1,3 +1,17 @@ import styled from "styled-components" -export const ContainerWrapper = styled.div`` +export const ContainerWrapper = styled.div` + --padding: 64px; + width: 650px; + max-width: calc(100% - var(--padding) * 2); + padding: 0px var(--padding); + margin: 0 auto; + + @media screen and (max-width: 1200px) { + width: auto; + } + + @media screen and (max-width: 767px) { + --padding: 32px; + } +` diff --git a/src/components/ContentPage/index.tsx b/src/components/ContentPage/index.tsx new file mode 100644 index 0000000..6a3425e --- /dev/null +++ b/src/components/ContentPage/index.tsx @@ -0,0 +1,8 @@ +import React from "react" +import * as SC from "./styles" + +export const ContentPage: React.FC = ({ children, ...restProps }) => { + return ( + {children} + ) +} diff --git a/src/components/ContentPage/styles.tsx b/src/components/ContentPage/styles.tsx new file mode 100644 index 0000000..54df31f --- /dev/null +++ b/src/components/ContentPage/styles.tsx @@ -0,0 +1,11 @@ +import styled from "styled-components" + +export const ContentPageWrapper = styled.div` + width: calc(100% - 305px); + margin-right: 305px; + + @media screen and (max-width: 1200px) { + width: 100%; + margin: 0; + } +` diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 99f50ec..4635591 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,19 +1,17 @@ import React, { FC } from "react" import packageJson from "../../../package.json" -import { Container } from "../Container" +import { Link } from "../Link" import * as SC from "./styles" export const Footer: FC = () => { return ( - -

- © {new Date().getFullYear()}, Built with - {` `} - Gatsby - Source on{" "} - GitHub -

- +

+ © {new Date().getFullYear()}, Built with + {` `} + Gatsby - Source on{" "} + GitHub +

) } diff --git a/src/components/Footer/styles.tsx b/src/components/Footer/styles.tsx index 5153b10..61d91a8 100644 --- a/src/components/Footer/styles.tsx +++ b/src/components/Footer/styles.tsx @@ -1,20 +1,34 @@ import styled from "styled-components" export const FooterWrapper = styled.footer` - margin-top: 128px; + margin-top: 64px; & a { display: inline; - color: #0090d8; font-weight: 700; - border-bottom: 2px solid; + color: #fff; + color: ${props => props.theme.main.foreground}; + font-weight: 700; text-decoration: none; - transition: color 0.3s; + position: relative; + + &::after { + position: absolute; + left: 0; + right: 0; + content: ""; + display: block; + width: 100%; + height: 2px; + background: linear-gradient(92.97deg, #feaf6d 0%, #ff70a5 100%); + } &:hover, &:focus { - color: #5dbbea; - transition: none; + background: linear-gradient(92.97deg, #feaf6d 0%, #ff70a5 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } } ` diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 2e3a11c..b6f8385 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,6 +1,7 @@ -import React, { FC, Fragment } from "react" +import React from "react" +import cx from "classnames" -import ChevronUp from "../../icons/chevron-up.svg" +import { HeaderBarebone } from "../HeaderBarebone" import { Breadcrumb } from "../Breadcrumb" import { StackedAvatars } from "../StackedAvatars" import * as SC from "./styles" @@ -9,54 +10,24 @@ interface IHeaderProps { relativePath: string basePath: string title: string - authors?: Array<{ + authors?: { avatar: string hash: string name: string - }> + }[] createdAt: string timeToRead: number - recommendedReading?: string[] - externalResources?: string[] + shifted: boolean } -function ExtraLink({ - item, - external = false, -}: { - item: string - external?: boolean -}) { - const Inner = () => ( - - {item} - - ) - - if (external) { - return ( - - - - ) - } - - return ( - - - - ) -} - -export const Header: FC = ({ +export const Header: React.FC = ({ basePath, relativePath, title, authors, createdAt, timeToRead, - recommendedReading, - externalResources, + shifted, }) => { const date = new Date(createdAt) const month = date.toLocaleString("default", { month: "long" }) @@ -65,48 +36,31 @@ export const Header: FC = ({ const dateToHuman = `${month} ${day}, ${year}` return ( - - - - {title} - - - {authors && ( + } + title={title} + className={cx({ shifted })} + content={ + + {authors && ( + + + + {authors.length} contributor{authors.length > 1 && "s"} + + {authors + .map(author => `${author.name}#${author.hash}`) + .join(", ")} + + + + )} + {dateToHuman && {dateToHuman}} - - - {authors.length} contributor{authors.length > 1 && "s"} - - {authors - .map(author => `${author.name}#${author.hash}`) - .join(", ")} - - + {timeToRead} minute{timeToRead !== 1 && "s"} read time - )} - {dateToHuman && {dateToHuman}} - - {timeToRead} minute{timeToRead !== 1 && "s"} read time - - - - {recommendedReading && ( - - Recommended reading - {recommendedReading.map(item => { - return - })} - - )} - - {externalResources && ( - - External Resources - {externalResources.map(item => { - return - })} - - )} - + + } + /> ) } diff --git a/src/components/Header/styles.tsx b/src/components/Header/styles.tsx index 3ed36fe..f065888 100644 --- a/src/components/Header/styles.tsx +++ b/src/components/Header/styles.tsx @@ -1,42 +1,31 @@ -import { Link } from "gatsby" -import { darken, lighten } from "polished" -import styled, { css } from "styled-components" -import { fontFamily, modularScale } from "../../design/typography" - -export const HeaderWrapper = styled.div` - border-bottom: 1px solid #dbdbdb; - padding-bottom: 32px; - margin-bottom: 32px; -` +import { transparentize } from "polished" +import styled from "styled-components" export const Top = styled.div` display: flex; align-items: center; - @media screen and (max-width: 767px) { + @media screen and (max-width: 1200px) { flex-direction: column; align-items: flex-start; } ` -export const Title = styled.h1` - font-family: ${fontFamily.header}; - font-size: ${modularScale(6).fontSize}px; - line-height: ${modularScale(6).lineHeight}px; - letter-spacing: -1.75px; - margin-top: 0; -` - export const Meta = styled.div` display: flex; + white-space: nowrap; align-items: center; + color: ${props => + props.theme.name === "dark" + ? transparentize(0.1, props.theme.main.foreground) + : transparentize(0.1, props.theme.main.foreground)}; & + &::before { content: "•"; margin: 0 8px; } - @media screen and (max-width: 767px) { + @media screen and (max-width: 1200px) { & + & { margin-top: 8px; } @@ -47,53 +36,6 @@ export const Meta = styled.div` } ` -const ExtraLinks = styled.div` - margin-top: 16px; -` - -export const RecommendedReading = styled(ExtraLinks)`` - -export const ExternalResources = styled(ExtraLinks)`` - -const extraLink = css` - display: flex; - align-items: center; - color: ${props => props.theme.main.link}; - margin-top: 4px; - margin-left: 20px; - cursor: pointer; - - &:hover { - color: ${props => - props.theme.name === "dark" - ? lighten(0.15, props.theme.main.link) - : darken(0.15, props.theme.main.link)}; - } - - svg { - width: 14px; - flex: 0 0 14px; - transform: rotate(90deg); - margin-right: 6px; - } - - svg path { - fill: ${props => props.theme.main.link}; - } -` - -export const ExtraLinkInternal = styled(Link)` - ${extraLink}; -` - -export const ExtraLinkExternal = styled.a` - ${extraLink}; -` - -export const ExtraLinkText = styled.div` - text-decoration: underline; -` - export const Popover = styled.div` display: none; position: absolute; @@ -101,10 +43,11 @@ export const Popover = styled.div` margin-top: 8px; padding: 8px; border-radius: 4px; + backdrop-filter: blur(14px); background: ${props => props.theme.name === "dark" - ? lighten(0.1, props.theme.main.background) - : darken(0.1, props.theme.main.background)}; + ? transparentize(0.3, props.theme.main.background) + : transparentize(0.3, props.theme.main.background)}; &::before { position: absolute; @@ -113,13 +56,14 @@ export const Popover = styled.div` content: ""; width: 0; height: 0; + backdrop-filter: blur(14px); border-style: solid; border-width: 0 3.5px 4px 3.5px; border-color: transparent transparent ${props => props.theme.name === "dark" - ? lighten(0.1, props.theme.main.background) - : darken(0.1, props.theme.main.background)} + ? transparentize(0.3, props.theme.main.background) + : transparentize(0.3, props.theme.main.background)} transparent; } ` @@ -128,6 +72,11 @@ export const PopoverToggler = styled.div` display: flex; align-items: center; position: relative; + border-bottom: 1px dashed + ${props => + props.theme.name === "dark" + ? transparentize(0.1, props.theme.main.foreground) + : transparentize(0.1, props.theme.main.foreground)}; &:hover ${Popover} { display: block; diff --git a/src/components/HeaderBarebone/index.tsx b/src/components/HeaderBarebone/index.tsx new file mode 100644 index 0000000..09caadd --- /dev/null +++ b/src/components/HeaderBarebone/index.tsx @@ -0,0 +1,33 @@ +import React from "react" + +import * as SC from "./styles" +import { Container } from "../Container" + +interface IHeaderBareboneProps { + above?: React.ReactNode + title: string + content?: React.ReactNode + className?: string +} + +export const HeaderBarebone: React.FC = props => { + return ( + + + + + + + + + + {props.above} + + {props.title} + + {props.content} + + + + ) +} diff --git a/src/components/HeaderBarebone/styles.tsx b/src/components/HeaderBarebone/styles.tsx new file mode 100644 index 0000000..2126b8d --- /dev/null +++ b/src/components/HeaderBarebone/styles.tsx @@ -0,0 +1,116 @@ +import { transparentize, darken } from "polished" +import styled from "styled-components" +import { fontFamily, modularScale } from "../../design/typography" +import { WavesTop, WavesBottom } from "../Waves" +import Circles from "../../images/circles.svg" + +export const HeaderWrapper = styled.div` + width: 100%; + height: 391px; + padding-top: 67px; + position: relative; + + &.shifted { + width: calc(100% - 305px); + padding-right: 305px; + } + + @media screen and (max-width: 1200px) { + width: 100% !important; + padding-right: 0 !important; + } + + @media screen and (max-width: 767px) { + display: flex; + align-items: flex-end; + height: auto; + min-height: 391px; + } +` + +export const BackgroundWrapper = styled.div` + height: 391px; + padding-top: 67px; + overflow: hidden; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + @media screen and (max-width: 767px) { + height: calc(100% - 67px); + background: ${props => darken(0.2, props.theme.main.background)}; + } +` + +export const StyledCircles = styled(Circles)` + position: absolute; + top: 50%; + margin-top: -200px; + + @media screen and (max-width: 768px) { + margin-top: -145px; + margin-left: -20px; + margin-right: -20px; + } +` + +export const StyledWavesTop = styled(WavesTop)` + opacity: ${props => (props.theme.name === "dark" ? 0.8 : 0.2)}; + top: -10%; + transform: scaleX(-1); + + @media screen and (max-width: 767px) { + top: 0; + } +` + +export const StyledWavesBottom = styled(WavesBottom)` + opacity: ${props => (props.theme.name === "dark" ? 0.8 : 0.2)}; + bottom: -30%; + transform: scaleX(-1); + + @media screen and (max-width: 767px) { + bottom: 0; + } +` + +export const Box = styled.div` + display: inline-flex; + flex-direction: column; + position: absolute; + bottom: 40px; + margin-left: -16px; + background: ${props => transparentize(0.3, props.theme.main.background)}; + padding: 16px; + backdrop-filter: blur(14px); + max-width: 650px; + + @media screen and (max-width: 1200px) { + max-width: 100%; + left: 32px; + right: 32px; + margin-left: 0; + } + + @media screen and (max-width: 767px) { + position: static; + bottom: auto; + top: auto; + margin: 32px 0; + } +` + +export const Title = styled.h1` + font-family: ${fontFamily.header}; + font-size: ${modularScale(6).fontSize}px; + line-height: ${modularScale(6).lineHeight}px; + letter-spacing: -1.75px; + margin-top: 0; + margin: 0; + + & + * { + margin-top: 16px; + } +` diff --git a/src/components/Home/styles.tsx b/src/components/Home/styles.tsx index 20b96ad..f3dbb38 100644 --- a/src/components/Home/styles.tsx +++ b/src/components/Home/styles.tsx @@ -10,7 +10,7 @@ export const HomeWrapper = styled.header` width: 100%; position: relative; min-height: 100vh; - background: #1f2a34; + background: ${props => props.theme.main.background}; overflow: hidden; ` diff --git a/src/components/Link/styles.tsx b/src/components/Link/styles.tsx index fb22cf1..6b52bd1 100644 --- a/src/components/Link/styles.tsx +++ b/src/components/Link/styles.tsx @@ -2,16 +2,31 @@ import { Link } from "gatsby" import styled, { css } from "styled-components" const linkStyle = css` - color: #0090d8; + display: inline-block; + font-weight: 700; + color: #fff; + color: ${props => props.theme.main.foreground}; font-weight: 700; - border-bottom: 2px solid; text-decoration: none; - transition: color 0.3s; + position: relative; + + &::after { + position: absolute; + left: 0; + right: 0; + content: ""; + display: block; + width: 100%; + height: 2px; + background: linear-gradient(92.97deg, #feaf6d 0%, #ff70a5 100%); + } &:hover, &:focus { - color: #5dbbea; - transition: none; + background: linear-gradient(92.97deg, #feaf6d 0%, #ff70a5 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } ` diff --git a/src/components/Markdown/styles.tsx b/src/components/Markdown/styles.tsx index afc7f7b..52b49ef 100644 --- a/src/components/Markdown/styles.tsx +++ b/src/components/Markdown/styles.tsx @@ -1,4 +1,3 @@ -import { darken, lighten } from "polished" import styled, { css } from "styled-components" import { BASE_FONT_SIZE, @@ -78,7 +77,7 @@ export const MarkdownWrapper = styled.div` } code { - background: #192129; + background: ${props => props.theme.code.background}; padding: 4px 8px; display: inline; border-radius: 3px; @@ -89,7 +88,7 @@ export const MarkdownWrapper = styled.div` :not(pre) > code[class*="language-"], pre[class*="language-"] { overflow-x: auto; - background: #192129; + background: ${props => props.theme.code.background}; } pre > code[class*="language-"] { @@ -122,16 +121,30 @@ export const MarkdownWrapper = styled.div` } } - a { + a:not(.anchor) { + display: inline-block; + position: relative; + font-weight: 700; + color: ${props => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")}; + text-decoration: none; word-break: break-word; - color: ${props => props.theme.main.link}; cursor: pointer; + &::after { + content: ""; + display: block; + width: 100%; + left: 0; + right: 0; + height: 2px; + background: linear-gradient(92.97deg, #feaf6d 0%, #ff70a5 100%); + } + &:hover { - color: ${props => - props.theme.name === "dark" - ? lighten(0.15, props.theme.main.link) - : darken(0.15, props.theme.main.link)}; + background: linear-gradient(92.97deg, #feaf6d 0%, #ff70a5 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } } ` diff --git a/src/components/MobileHeader/styles.tsx b/src/components/MobileHeader/styles.tsx index 99121a3..b4fa946 100644 --- a/src/components/MobileHeader/styles.tsx +++ b/src/components/MobileHeader/styles.tsx @@ -5,7 +5,8 @@ import Logo from "../../images/tph-logo.svg" export const MobileHeaderWrapper = styled.div` z-index: 50; - background: ${props => transparentize(0.2, props.theme.main.background)}; + background: ${props => transparentize(0.6, props.theme.main.background)}; + backdrop-filter: blur(14px); position: fixed; top: 0; left: 0; diff --git a/src/components/PageContent/index.tsx b/src/components/PageContent/index.tsx new file mode 100644 index 0000000..a2dd440 --- /dev/null +++ b/src/components/PageContent/index.tsx @@ -0,0 +1,75 @@ +import React, { FC, Fragment } from "react" + +import { humanize } from "../../utils" +import * as SC from "./styles" +import { Container } from "../Container" + +interface IPageContentProps { + content: JSX.Element + recommendedReading?: string[] + externalResources?: string[] +} + +function ExtraLink({ + item, + external = false, +}: { + item: string + external?: boolean +}) { + const Inner = ({ text }: { text: string }) => ( + + {text} + + ) + + if (external) { + return ( + + + + ) + } + + const [internalText] = item.split("/").slice(-1) + + return ( + + + + ) +} + +export const PageContent: FC = ({ + content, + recommendedReading, + externalResources, +}) => { + return ( + <> + + {content} + + + + {recommendedReading && ( + + Recommended reading + {recommendedReading.map(item => { + return + })} + + )} + + {externalResources && ( + + External Resources + {externalResources.map(item => { + return + })} + + )} + + + ) +} diff --git a/src/components/PageContent/styles.tsx b/src/components/PageContent/styles.tsx new file mode 100644 index 0000000..0d22aa0 --- /dev/null +++ b/src/components/PageContent/styles.tsx @@ -0,0 +1,108 @@ +import styled, { css } from "styled-components" +import { Link } from "gatsby" +import fontFamily from "../../design/typography" +import { darken } from "polished" + +export const Content = styled.div` + flex: 1 1 calc(100% - 305px); + width: calc(100% - 305px); + padding: 64px 0; + + @media screen and (max-width: 1200px) { + width: 100%; + flex-basis: auto; + } +` + +export const Sidebar = styled.div` + width: 240px; + flex: 0 0 240px; + border-left: 1px solid ${props => darken(0.1, props.theme.main.background)}; + color: ${props => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")}; + margin: 64px 0; + padding: 0 32px; + + &:empty { + display: none; + } + + @media screen and (max-width: 1200px) { + width: auto; + padding: 64px; + flex-basis: auto; + + & > :first-child { + margin-top: 0; + } + } + + @media screen and (max-width: 768px) { + display: none; + } +` + +export const SidebarHeader = styled.div` + font-family: ${fontFamily.header}; + font-weight: 700; + font-size: 18px; + margin-bottom: 8px; + margin-top: 0; +` + +const ExtraLinks = styled.div` + margin-top: 16px; +` + +export const RecommendedReading = styled(ExtraLinks)`` + +export const ExternalResources = styled(ExtraLinks)`` + +const extraLink = css` + display: flex; + align-items: center; + color: ${props => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")}; + cursor: pointer; + text-decoration: none; + + & + & { + margin-top: 8px; + } + + &:hover { + background: linear-gradient(92.97deg, #feaf6d 0%, #ff70a5 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + svg { + width: 14px; + flex: 0 0 14px; + transform: rotate(90deg); + margin-left: 6px; + } + + svg path { + fill: ${props => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")}; + } +` + +export const ExtraLinkInternal = styled(Link)` + ${extraLink}; +` + +export const ExtraLinkExternal = styled.a` + ${extraLink}; +` + +export const ExtraLinkText = styled.div` + word-break: break-word; + + &::after { + content: ""; + display: block; + width: 100%; + height: 2px; + background: linear-gradient(92.97deg, #feaf6d 0%, #ff70a5 100%); + } +` diff --git a/src/components/ResourcesSidebar/styles.tsx b/src/components/ResourcesSidebar/styles.tsx index 4b0edf7..f075c08 100644 --- a/src/components/ResourcesSidebar/styles.tsx +++ b/src/components/ResourcesSidebar/styles.tsx @@ -124,6 +124,10 @@ export const ExpandLanguagesHeader = styled.div` cursor: pointer; color: ${props => transparentize(0.5, props.theme.sidebar.foreground)}; font-weight: 700; + + &:hover { + opacity: 0.85; + } ` export const ExpandLanguagesList = styled.div` diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx index 45fce25..d3600c3 100644 --- a/src/components/Sidebar/index.tsx +++ b/src/components/Sidebar/index.tsx @@ -1,8 +1,7 @@ -import { Link } from "gatsby" import React, { FC, HTMLAttributes, PropsWithChildren } from "react" import Scrollbar from "react-perfect-scrollbar" import "react-perfect-scrollbar/dist/css/styles.css" -import Banner from "../../images/tph-banner.svg" +import cx from "classnames" import { ThemeToggler } from "../ThemeToggler" import * as SC from "./styles" @@ -22,18 +21,21 @@ export const Sidebar: FC >> = props => { const { children, ...restProps } = props - const isBorderVisible = children === undefined ? false : true return ( - - - + + The +
+ Programmer's +
+ Hangout + {children} - + about rules resources diff --git a/src/components/Sidebar/styles.tsx b/src/components/Sidebar/styles.tsx index 4b9a949..4f38d14 100644 --- a/src/components/Sidebar/styles.tsx +++ b/src/components/Sidebar/styles.tsx @@ -1,5 +1,6 @@ import { Link } from "gatsby" import styled, { css } from "styled-components" +import { transparentize } from "polished" export const SidebarWrapper = styled.div` box-sizing: border-box; @@ -27,17 +28,34 @@ export const SidebarWrapper = styled.div` } ` +export const Title = styled(Link)` + display: block; + color: ${props => props.theme.sidebar.foreground}; + font-size: 30px; + line-height: 34px; + font-weight: 700; + padding: 20px 0 0 20px; + text-decoration: none; + + &:hover { + opacity: 0.85; + } +` + export const Inner = styled.div` - padding: 30px 0 30px 20px; + padding: 20px 0 30px 20px; ` export const Menu = styled.nav` display: flex; flex-direction: column; - border-top: ${props => - props.borderVisibility ? "1px dashed #a5a5a5" : "none"}; margin: 20px 0 40px; padding-top: 20px; + + &.has-border { + border-top: ${props => + `1px dashed ${transparentize(0.8, props.theme.sidebar.foreground)}`}; + } ` export const menuItemStyles = css` diff --git a/src/components/StackedAvatars/styles.tsx b/src/components/StackedAvatars/styles.tsx index 221a086..b6c7a6c 100644 --- a/src/components/StackedAvatars/styles.tsx +++ b/src/components/StackedAvatars/styles.tsx @@ -22,7 +22,7 @@ export const AuthorAvatar = styled.img<{ index: number }>` width: ${AVATAR_SIZE}px; height: ${AVATAR_SIZE}px; flex: 0 0 ${AVATAR_SIZE}px; - border: 2px solid #fff; + border: 2px solid #4c6780; border-radius: 50%; z-index: ${props => props.index}; left: -${props => AVATAR_SIZE * OVERLAP_AMOUT * props.index}px; diff --git a/src/components/Waves/index.tsx b/src/components/Waves/index.tsx index cb0b783..171fef0 100644 --- a/src/components/Waves/index.tsx +++ b/src/components/Waves/index.tsx @@ -1,10 +1,14 @@ import React, { FC } from "react" import * as SC from "./styles" -export const WavesTop: FC = () => { - return +export const WavesTop: FC = props => { + return } -export const WavesBottom: FC = () => { - return +export const WavesTopTwo: FC = props => { + return +} + +export const WavesBottom: FC = props => { + return } diff --git a/src/components/Waves/styles.tsx b/src/components/Waves/styles.tsx index 7fdc515..366649b 100644 --- a/src/components/Waves/styles.tsx +++ b/src/components/Waves/styles.tsx @@ -1,6 +1,7 @@ import styled, { css } from "styled-components" import WavesBottom from "../../images/waves-bot.svg" import WavesTop from "../../images/waves-top.svg" +import WavesTopTwo from "../../images/waves-top2.svg" const waves = css` display: block; @@ -17,6 +18,12 @@ export const StyledWavesTop = styled(WavesTop)` height: 87vh; ` +export const StyledWavesTopTwo = styled(WavesTopTwo)` + ${waves}; + top: 0; + height: 87vh; +` + export const StyledWavesBottom = styled(WavesBottom)` ${waves}; bottom: 0; diff --git a/src/content/site/about.md b/src/content/site/about.md index 3453177..f596e80 100644 --- a/src/content/site/about.md +++ b/src/content/site/about.md @@ -2,8 +2,6 @@ path: /about --- -# About Us - ## What is The Programmers Hangout? The Programmer's Hangout (TPH) is a discord community geared towards programming. The use of the word "geared" here is important because more accurately it's a discord for programmers of all kinds. If you're a green noob with 5 lines of code under your belt, or if you're a veteran with 15 years of industry experience, TPH has a place for you. More than that, there are over 30,000 people here. You can guarantee you won't be the only person with your experience level on the server. diff --git a/src/content/site/rules.md b/src/content/site/rules.md index 9aa0ed3..84fd143 100644 --- a/src/content/site/rules.md +++ b/src/content/site/rules.md @@ -12,100 +12,125 @@ path: /rules - [Nickname Policy](#nickname-policy) - [What is Modmail / How to contact staff](#what-is-modmail) -# General Rules +## General Rules Below you will find the rules of the server. These are the dos and don'ts of being here. Follow them if you wish to stay, ignorance is not an excuse. -**1. Do not advertise.**
+### 1. Do not advertise. + This includes other servers, products or services that you stand to benefit from financially, your Youtube channel or the like. -**2. Do not be a dick.**
+### 2. Do not be a dick. + If you make yourself particularly hard to deal with, if you pretend that you are better than anyone else, or if you are just in general very annoying and not a good fit for this server we will remove you. Permanently. -**3. Use facts, not authority.**
+### 3. Use facts, not authority. + If you are going to provide an anecdote or your own experience, that is fine, provided you don't pass it off as axiomatic. Quote sources when you are asked to. -**4. Do not flame languages or other such technologies (e.g. text editors).**
+### 4. Do not flame languages or other such technologies (e.g. text editors). + Doing so is reductive. If someone likes to use VB.Net or JavaScript or Vim, we surprisingly expect you to not jump down their throat about that. Doing so outside of regulated channels where staff have explicitly allowed the discussion for a short period of time is not allowed ( #poll-discussion is one such example of an okay place to talk about it provided the poll allows it ) -**5. Speak English only in the chat.**
+### 5. Speak English only in the chat. + This speaks for itself, we do not expect staff to speak extra languages and we cannot moderate what we do not understand. Sorry. -**6. Do not ask for free work.**
+### 6. Do not ask for free work. + This is not an advertisement platform. If you are going to take from this community, you are going to give back to it first. We do not care about your work if you do not care about us. Thanks. -**7. Do not DM people who you have not built a rapport with.**
+### 7. Do not DM people who you have not built a rapport with. + This is self-explanatory. Don't be a creep. Don't be a pest, ask questions in relevant channels. Someone's DM is not a relevant channel. -**8. Do not talk about your infractions publicly.**
+### 8. Do not talk about your infractions publicly. + If you are infracted, it's not a big deal. It's simply a formal warning - you can totally recover from that. If you disagree with a warning, DM @ModMail. Complaining about infractions publicly will land you a mute or a ban. Don't pollute chat or other channels with these conversations. -**9. Do not participate in spoonfeeding.**
+### 9. Do not participate in spoonfeeding. + Asking to be spoonfed is the same as asking someone else to do your work for you. We do not condone just solving the problems of others -- make them work for it. Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime. -**10. Do not impersonate staff members.**
+### 10. Do not impersonate staff members. + Using the avatar of another staff member that they've had for a reasonable long time is not allowed. You will be notified if you seem like you're impersonating a staff member. We may also nickname you depending on the context. In addition, it is especially prohibited to pretend to be another staff member through messages/voice, DM or otherwise. Doing so will land you an immediate, permanent ban. -**11. Follow the directions of staff members to the letter.**
+### 11. Follow the directions of staff members to the letter. + Most of us are here for our love of programming, so we like to do as much talking about programming and the like as possible. That being said, we really don't like intervening. But we especially don't like having to intervene twice. Please don't make us do that, thank you -**12. No backseat driving.**
+### 12. No backseat driving. + If you see people working through a problem, you shouldn't intermittently interject advice. Let them work it out unless someone asks for help. We understand you want to help out, but this can often cause confusion and overall a negative impact on the person who originally asked the question. -**13. Do not bad mouth linked servers.**
+### 13. Do not bad mouth linked servers. + TPH is joined at the hip to Controversy Central (CC), KUtils, and Late Gaming (LG). If you don't like one of our linked servers, just leave them. Each server serves its own purpose. -**14. TPH is not a ban appeal vector for linked servers.**
+### 14. TPH is not a ban appeal vector for linked servers. + Bans on all linked servers are propagated. This means that if you are banned on any of our servers (CC/KUtils/Late Gaming), you will be banned on all of them. Members with certain roles will be exempt from ban propagation, but that is no excuse to run riot on other servers. If you troll them, we will also ban you here. That being said, TPH is not a place to post your ban appeal. Please take it up with those servers. -**15. Link to the FAQ and beginner guide channels liberally.**
+### 15. Link to the FAQ and beginner guide channels liberally. + The FAQ and beginner guide channels represent many hours of discussion to find well-rounded answers to common questions. Please link to them regularly when beginners and the uninformed ask those questions. You may be asked to cease your participation in a conversation if you present yourself as a zealot with distracting opinions. [Table of Contents](#table-of-contents) -# Golden Rules +## Golden Rules + +### 1. Don't be a pedant. -**1. Don't be a pedant.**
Don't be the type of person who fixates on minor details or meaningless trivia. -**2. Don't be a gatekeeper.**
+### 2. Don't be a gatekeeper. + _Gatekeeping_ is when someone takes it upon themselves to decide who does or does not have access to a community/identity. i.e. “You’re not a _real_ programmer if you don’t use [language x]” -**3. Don't be cocky.**
+### 3. Don't be cocky. + Always be humble. No one likes a cocky fool. -**4. Maintain a student mentality.**
+### 4. Maintain a student mentality. + Treat other members, regardless of their skill level, as though you have something to learn from them. In general, if you have a contribution to make, _please be encouraging_. Being pedantic or gatekeeping how "hard" something is or pretending like you're some kind of God when it comes to programming is purely reductive garbage. If you are found to be guilty of violating these tenants appropriate action shall be taken against you. There are far too many people out there actively discouraging self-improvement and learning. This server refuses to stand for it. [Table of Contents](#table-of-contents) -# Content Policy +## Content Policy Below is a list of things that you cannot talk about here. If a staff member cites you the content policy, please understand that they really mean _stop_ talking about the thing you are talking about. I think you will find the list reasonable, as we construct it to be conducive to an environment that suits talking about programming and technology in the absence of distractions. -**1. No politics, religion, philosophy or other such topics.**
+### 1. No politics, religion, philosophy or other such topics. + This goes without saying. You don't make friends by talking to strangers about these topics. Your political views have nothing to do with how good of a programmer you are. -**2. No NSFW content in any capacity.**
+### 2. No NSFW content in any capacity. + Always ask yourself "Would my boss be okay with this fullscreen on my monitor as he walked by?". If the answer is no, don't post it. The content here is meant to be pg13. Not pg15, not pg18 - if you wouldn't show it to your kid brother in front of your mother, it has no place here. No hentai, no porn, no anything like that. -**3. No talk of suicide or depression.**
+### 3. No talk of suicide or depression. + Sorry to say, but if you are depressed or considering suicide, that is terrible and we feel sorry for you, but we do **not** feel qualified to give advice, to moderate advice given, or anything of the sort. It would be absolutely unfair of me to put that weight on the shoulders of the moderators here. So please, ring your local suicide hotline which you can hopefully find here: [http://www.suicide.org/international-suicide-hotlines.html](http://www.suicide.org/international-suicide-hotlines.html "http://www.suicide.org/international-suicide-hotlines.html") (or by googling it) -**4. No talk of illegal topics, pirating, reverse engineering, hacking, imitating user interaction or other similar topics.**
+### 4. No talk of illegal topics, pirating, reverse engineering, hacking, imitating user interaction or other similar topics. + This includes anything against a site's terms of service, anything protected by a captcha/robots.txt and any automated account creation/checkout/purchasing. These topics are strictly forbidden. Topics related to these may also be disallowed. -**5. Don't ask for relationship or life advice.**
+### 5. Don't ask for relationship or life advice. + As annoying as it is for me to write this, do not ask about how to "get the girl" or whatever. This is not the appropriate environment. Go look for dating advice and the like elsewhere. Complicated, heavy life advice topics that are not explicitly career-related are **off-limits** here as well. We're just programmers, we're not miracle makers. -**6. Do not bring other server drama here.**
+### 6. Do not bring other server drama here. + We do not care that you got banned on another server. Sorry, but not our problem. Take it up with that server's staff. [Table of Contents](#table-of-contents) -# Why don't you allow talk regarding hacking? +## Why don't you allow talk regarding hacking? There are a few reasons for not allowing it: - It is directly against the Discord Terms of Service (ToS), allowing talk of how to perform hacks is basically never going to be allowed for this reason. @@ -113,37 +138,43 @@ _Hacking is a dick move. Stop trying to be a dick._ It generally leads to even more illegal topics -**So then, what is allowed?**
+#### So then, what is allowed? + Light talk about prevention is allowed. Providing elaborate details in any capacity of how someone might get past a system is not allowed. -**Where should I ask?**
+#### Where should I ask? + Try not to, honestly, if you are looking to prevent a specific kind of attack feel free to ask if your code prevents that, outside of that sharing details as to how you might get past some code isn't the best idea, try to talk about the solution more so than the gory details of the problem. Feel free to share the gory details via DM, but don't wait to take the conversation to DM. This is one of the very few topic areas we want you to take it to DM, since information spread in this area is not something we want to prevent, rather, the discussion around it. [Table of Contents](#table-of-contents) -# Roles +## Roles TPH has a relatively small amount of roles, but each of our roles has a purpose. We don't have 30 language roles and a staff rank. That being said, it's kind of tricky to keep a track of all of the roles at once - so here you can see what they're for. -_Community-Member, Active Contributor, Chatterbox, Super-Talky-Guy, Bepis-Drinker, Conke-Commander, and Patriotic-Procrastinator_ +### _Community-Member, Active Contributor, Chatterbox, Super-Talky-Guy, Bepis-Drinker, Conke-Commander, and Patriotic-Procrastinator_ These are the activity roles of the server. Different tiers will grant different perks, such as unlocking hidden channels, voice access, and nicknaming privileges. These roles are assigned automatically as you participate in the server, so don't ask for them. -**Wizard**
+### Wizard + This is for helpful members who have shown exceptional aptitude or expertise in some field. This is given out at the discretion of Elliott - though other staff members may suggest for Elliot to give it to someone. Less than 0.001% of users get this role. -**Technology Champion**
+### Technology Champion + These people will try to provide some answers on their own time for questions in the Technology spotlight category. Often times these people will write the introductory text for the current technology as well. Staff will be preferred for this role, but not always - This is a temporary role. -**Solid Contributor**
+### Solid Contributor + This role recognizes people who contribute their time and knowledge to the server completely out of their own volition. -**Staff roles**
+### Staff roles + Self-explanatory - _ChatMod/Moderator/Senior Moderator/Admin/Owner_ - These people ensure that the usage of this environment reflects the guidelines as illustrated in the rules. Staff is occasionally handpicked, and sometimes there is an application process. There is a trial period for all new staff of 2-4 weeks (Sometimes more, sometimes less) which comes with a trial role, however, they are treated as full staff members during this time. Please respect all staff equally; if you have an issue with a specific staff member, talk to an administrator. [Table of Contents](#table-of-contents) -# Nickname Policy +## Nickname Policy On TPH, we enforce a nickname policy - This means that if your nickname is deemed too NSFW (not safe for work), or hard to read/tag (it uses weird characters, it's blank or it contains numbers) we can and will forcibly nickname you to something else. @@ -155,21 +186,23 @@ If you pipe up and get annoyed and flustered that you don't have your name, you' [Table of Contents](#table-of-contents) -# What is ModMail? +## What is ModMail? ModMail (@ModMail) is a bot that reports every direct message received to staff. -**How do I use it?**
+### How do I use it? + Send it a message. This will open a two-way communication medium between you and the entire staff team. It won't notify or bother people who are offline or busy, so don't even concern yourself with that part. -**Use it when you...** +### Use it when you... - Notice a heated argument about how bad JavaScript is. - Wish to dispute an infraction you have received. - Would like more context about a rule. - Would like to screen something with the staff before posting. -**Don't use it when you...**
+### Don't use it when you... + Notice something which requires immediate attention such as raids or NSFW content. In these cases, use the serious rule break tag instead to immediately alert staff. [Table of Contents](#table-of-contents) diff --git a/src/design/themes.ts b/src/design/themes.ts index 24bd1f4..6609925 100644 --- a/src/design/themes.ts +++ b/src/design/themes.ts @@ -11,6 +11,9 @@ export interface ITheme { base: string darker: string } + code: { + background: string + } } const baseColors = { @@ -18,18 +21,21 @@ const baseColors = { base: "#7289DA", darker: "#5265AD", }, + code: { + background: "#0c1115", + }, } export const darkTheme: ITheme = { ...baseColors, name: "dark", sidebar: { - background: "#293845", + background: "#22323f", foreground: "#FFFFFF", active: "#00FCFF", }, main: { - background: "#1F2A34", + background: "#16212b", foreground: "#FFFFFF", link: "#04B0A6", }, diff --git a/src/images/circles.svg b/src/images/circles.svg new file mode 100644 index 0000000..05b1199 --- /dev/null +++ b/src/images/circles.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/images/tph-banner.svg b/src/images/tph-banner.svg deleted file mode 100644 index 05fb2e1..0000000 --- a/src/images/tph-banner.svg +++ /dev/null @@ -1,68 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/images/waves-top2.svg b/src/images/waves-top2.svg new file mode 100644 index 0000000..3298a47 --- /dev/null +++ b/src/images/waves-top2.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/layouts/ColumnLayout/index.tsx b/src/layouts/ColumnLayout/index.tsx index 379a9f2..492aff5 100644 --- a/src/layouts/ColumnLayout/index.tsx +++ b/src/layouts/ColumnLayout/index.tsx @@ -1,6 +1,5 @@ import React, { FC, Fragment } from "react" -import { Footer } from "../../components/Footer" import { MobileHeader } from "../../components/MobileHeader" import { GlobalStyles } from "../../globalStyles" import { useLockBodyScroll } from "../../hooks/useLockBodyScroll" @@ -39,12 +38,7 @@ const InnerColumnLayout: FC = ({ {title} {sidebar({ className: openOnMobile ? "is-open" : "" })} - - - {content} -