Skip to content

Commit

Permalink
Website fixes (ChilliCream#1590)
Browse files Browse the repository at this point in the history
  • Loading branch information
rstaib authored Mar 22, 2020
1 parent d96e36c commit dae4ae4
Show file tree
Hide file tree
Showing 15 changed files with 207 additions and 222 deletions.
1 change: 0 additions & 1 deletion website/gatsby-browser.js
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
require("prismjs/themes/prism-tomorrow.css");
require("prismjs/plugins/line-numbers/prism-line-numbers.css");
32 changes: 0 additions & 32 deletions website/gatsby-ssr.js
Original file line number Diff line number Diff line change
@@ -1,32 +0,0 @@
// const React = require("react");

// exports.onRenderBody = ({ setPostBodyComponents }) => {
// setPostBodyComponents([
// <script
// dangerouslySetInnerHTML={{
// __html: `
// window.addEventListener("scroll", function() {
// console.log("TESTSTSTSTS");
// const content = document.getElementById("content");
// const header = document.getElementById("header");
// const className = "test";
// const classNames = header.className.split(/\s+/);

// if (content.scrollTop > 5) {
// if (classNames.indexOf(className) === -1) {
// header.className += " " + className;
// }
// } else {
// const index = classNames.indexOf(className);

// if (index !== -1) {
// classNames.splice(index, 1);
// header.className = classNames.join(" ");
// }
// }
// });
// `,
// }}
// />,
// ]);
// };
8 changes: 4 additions & 4 deletions website/graphql-types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -691,6 +691,7 @@ export type FileFieldsEnum =
'childMarkdownRemark___frontmatter___title' |
'childMarkdownRemark___frontmatter___path' |
'childMarkdownRemark___frontmatter___date' |
'childMarkdownRemark___frontmatter___tags' |
'childMarkdownRemark___frontmatter___author' |
'childMarkdownRemark___frontmatter___authorUrl' |
'childMarkdownRemark___frontmatter___authorImageUrl' |
Expand Down Expand Up @@ -730,7 +731,6 @@ export type FileFieldsEnum =
'childMarkdownRemark___frontmatter___featuredImage___publicURL' |
'childMarkdownRemark___frontmatter___featuredImage___id' |
'childMarkdownRemark___frontmatter___featuredImage___children' |
'childMarkdownRemark___frontmatter___tags' |
'childMarkdownRemark___excerpt' |
'childMarkdownRemark___rawMarkdownBody' |
'childMarkdownRemark___fileAbsolutePath' |
Expand Down Expand Up @@ -1503,6 +1503,7 @@ export type MarkdownRemarkFieldsEnum =
'frontmatter___title' |
'frontmatter___path' |
'frontmatter___date' |
'frontmatter___tags' |
'frontmatter___author' |
'frontmatter___authorUrl' |
'frontmatter___authorImageUrl' |
Expand Down Expand Up @@ -1567,7 +1568,6 @@ export type MarkdownRemarkFieldsEnum =
'frontmatter___featuredImage___childMarkdownRemark___timeToRead' |
'frontmatter___featuredImage___childMarkdownRemark___tableOfContents' |
'frontmatter___featuredImage___childMarkdownRemark___children' |
'frontmatter___tags' |
'excerpt' |
'rawMarkdownBody' |
'fileAbsolutePath' |
Expand Down Expand Up @@ -1715,11 +1715,11 @@ export type MarkdownRemarkFrontmatter = {
title?: Maybe<Scalars['String']>;
path?: Maybe<Scalars['String']>;
date?: Maybe<Scalars['Date']>;
tags?: Maybe<Array<Maybe<Scalars['String']>>>;
author?: Maybe<Scalars['String']>;
authorUrl?: Maybe<Scalars['String']>;
authorImageUrl?: Maybe<Scalars['String']>;
featuredImage?: Maybe<File>;
tags?: Maybe<Array<Maybe<Scalars['String']>>>;
};


Expand All @@ -1734,11 +1734,11 @@ export type MarkdownRemarkFrontmatterFilterInput = {
title?: Maybe<StringQueryOperatorInput>;
path?: Maybe<StringQueryOperatorInput>;
date?: Maybe<DateQueryOperatorInput>;
tags?: Maybe<StringQueryOperatorInput>;
author?: Maybe<StringQueryOperatorInput>;
authorUrl?: Maybe<StringQueryOperatorInput>;
authorImageUrl?: Maybe<StringQueryOperatorInput>;
featuredImage?: Maybe<FileFilterInput>;
tags?: Maybe<StringQueryOperatorInput>;
};

export type MarkdownRemarkGroupConnection = {
Expand Down
13 changes: 13 additions & 0 deletions website/src/components/misc/blog-article-elements.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import styled from "styled-components";

export const ArticleTitle = styled.h1`
margin-top: 20px;
margin-right: 20px;
margin-left: 20px;
font-size: 2em;
@media only screen and (min-width: 800px) {
margin-right: 50px;
margin-left: 50px;
}
`;
56 changes: 56 additions & 0 deletions website/src/components/misc/blog-article-metadata.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import React, { FunctionComponent } from "react";
import styled from "styled-components";
import { Link } from "../misc/link";

interface BlogArticleMetadataProperties {
author: string;
authorImageUrl: string;
authorUrl: string;
date: string;
readingTime: string;
}

export const BlogArticleMetadata: FunctionComponent<BlogArticleMetadataProperties> = ({
author,
authorImageUrl,
authorUrl,
date,
readingTime,
}) => {
return (
<Metadata>
<AuthorLink to={authorUrl}>
<AuthorImage src={authorImageUrl} />
{author}
</AuthorLink>{" "}
{date}{readingTime}
</Metadata>
);
};

const Metadata = styled.div`
display: flex;
flex-direction: row;
align-items: center;
margin: 0 20px 20px;
font-size: 0.778em;
@media only screen and (min-width: 800px) {
margin: 0 50px 20px;
}
`;

const AuthorLink = styled(Link)`
display: flex;
flex: 0 0 auto;
flex-direction: row;
align-items: center;
color: #666;
`;

const AuthorImage = styled.img`
flex: 0 0 auto;
margin-right: 0.5em;
border-radius: 15px;
width: 30px;
`;
51 changes: 51 additions & 0 deletions website/src/components/misc/blog-article-tags.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import React, { FunctionComponent } from "react";
import styled from "styled-components";
import { Link } from "./link";

interface BlogArticleTagsProperties {
tags: string[];
}

export const BlogArticleTags: FunctionComponent<BlogArticleTagsProperties> = ({
tags,
}) => {
return (
<>
{tags.length > 0 && (
<Tags>
{tags.map(tag => (
<Tag key={tag}>
<TagLink to={`/blog/tags/${tag}`}>{tag}</TagLink>
</Tag>
))}
</Tags>
)}
</>
);
};

const Tags = styled.ul`
margin: 0 20px 20px;
list-style-type: none;
@media only screen and (min-width: 800px) {
margin: 0 50px 20px;
}
`;

const Tag = styled.li`
display: inline-block;
margin: 0 5px 5px 0;
border-radius: 4px;
padding: 0;
background-color: #f40010;
font-size: 0.722em;
letter-spacing: 0.05em;
color: #fff;
`;

const TagLink = styled(Link)`
display: block;
padding: 5px 15px;
color: #fff;
`;
6 changes: 4 additions & 2 deletions website/src/components/misc/global-style.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export const GlobalStyle = createGlobalStyle`
height: 100vh;
font-size: 18px;
line-height: 30px;
overflow: auto;
background-color: #ccc;
color: #667;
scroll-behavior: smooth;
Expand All @@ -24,7 +23,6 @@ export const GlobalStyle = createGlobalStyle`
* {
margin: 0;
padding: 0;
overflow: hidden;
/*user-select: none;*/
font-family: sans-serif;
font-size: 1em;
Expand All @@ -36,6 +34,10 @@ export const GlobalStyle = createGlobalStyle`
outline: none;
}
div, span {
overflow: hidden;
}
a {
color: #f40010;
text-decoration: none;
Expand Down
12 changes: 12 additions & 0 deletions website/src/components/misc/icon-container.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import styled from "styled-components";

export const IconContainer = styled.span<{ size?: 16 | 24 | 32 }>`
display: inline-flex;
align-items: center;
justify-content: center;
width: ${props => props.size || 24}px;
height: ${props => props.size || 24}px;
font-size: 24px;
line-height: 24px;
vertical-align: middle;
`;
5 changes: 4 additions & 1 deletion website/src/components/misc/pagination.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,10 @@ export const Pagination: FunctionComponent<PaginationProperties> = ({
return (
<Container>
{items.map(item => (
<Page className={item.page === currentPage ? "active" : undefined}>
<Page
key={`page-${item.page}`}
className={item.page === currentPage ? "active" : undefined}
>
<PageLink to={item.link}>{item.page}</PageLink>
</Page>
))}
Expand Down
25 changes: 19 additions & 6 deletions website/src/components/structure/footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { graphql, useStaticQuery } from "gatsby";
import React, { FunctionComponent } from "react";
import styled from "styled-components";
import { GetFooterDataQuery } from "../../../graphql-types";
import { IconContainer } from "../misc/icon-container";
import { Link } from "../misc/link";

import GithubIconSvg from "../../images/github.svg";
Expand Down Expand Up @@ -50,13 +51,22 @@ export const Footer: FunctionComponent = () => {
</Description>
<Connect>
<ConnectLink to={tools!.github!}>
<GithubIcon /> to work with us on the platform
<IconContainer>
<GithubIcon />
</IconContainer>{" "}
to work with us on the platform
</ConnectLink>
<ConnectLink to={tools!.slack!}>
<SlackIcon /> to get in touch with us
<IconContainer>
<SlackIcon />
</IconContainer>{" "}
to get in touch with us
</ConnectLink>
<ConnectLink to={tools!.twitter!}>
<TwitterIcon /> to stay up-to-date
<IconContainer>
<TwitterIcon />
</IconContainer>{" "}
to stay up-to-date
</ConnectLink>
</Connect>
</About>
Expand Down Expand Up @@ -158,16 +168,19 @@ const ConnectLink = styled(Link)`
color: #666;
transition: color 0.2s ease-in-out;
> svg {
> ${IconContainer} {
margin-right: 10px;
vertical-align: middle;
transition: fill 0.2s ease-in-out;
> svg {
transition: fill 0.2s ease-in-out;
}
}
:hover {
color: #000;
> svg {
> ${IconContainer} > svg {
fill: #000;
}
}
Expand Down
17 changes: 12 additions & 5 deletions website/src/components/structure/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { graphql, useStaticQuery } from "gatsby";
import React, { FunctionComponent } from "react";
import styled from "styled-components";
import { GetHeaderDataQuery } from "../../../graphql-types";
import { IconContainer } from "../misc/icon-container";
import { Link } from "../misc/link";

import GithubIconSvg from "../../images/github.svg";
Expand Down Expand Up @@ -55,13 +56,19 @@ export const Header: FunctionComponent = () => {
</Search>
<Tools>
<ToolLink to={tools!.slack!}>
<SlackIcon />
<IconContainer>
<SlackIcon />
</IconContainer>
</ToolLink>
<ToolLink to={tools!.twitter!}>
<TwitterIcon />
<IconContainer>
<TwitterIcon />
</IconContainer>
</ToolLink>
<ToolLink to={tools!.github!}>
<GithubIcon />
<IconContainer>
<GithubIcon />
</IconContainer>
</ToolLink>
</Tools>
</Group>
Expand Down Expand Up @@ -213,11 +220,11 @@ const ToolLink = styled(Link)`
margin-left: 15px;
text-decoration: none;
> svg {
> ${IconContainer} > svg {
transition: fill 0.2s ease-in-out;
}
:hover > svg {
:hover > ${IconContainer} > svg {
fill: #b7020a;
}
`;
Expand Down
Loading

0 comments on commit dae4ae4

Please sign in to comment.