(https://www.greglobinski.com/)",
14 | "license": "MIT",
15 | "dependencies": {
16 | "@react-website-themes/base": "^0.0.7",
17 | "typeface-open-sans": "^0.0.54",
18 | "typeface-pt-serif": "^0.0.54"
19 | },
20 | "peerDependencies": {
21 | "emotion": "^9.2.4",
22 | "emotion-server": "^9.2.6",
23 | "facepaint": "^1.2.1",
24 | "prop-types": "^15.6.0",
25 | "react": "^16.3.0",
26 | "react-custom-share": "^0.4.8",
27 | "react-dom": "^16.3.0",
28 | "react-emotion": "^9.2.6",
29 | "react-facebook": "^5.0.3",
30 | "react-helmet": "^5.2.0"
31 | },
32 | "devDependencies": {
33 | "@babel/cli": "7.0.0-rc.1",
34 | "@babel/core": "7.0.0-rc.1",
35 | "emotion": "^9.2.4",
36 | "emotion-server": "^9.2.6",
37 | "facepaint": "^1.2.1",
38 | "npm-run-all": "4.1.3",
39 | "prop-types": "^15.6.0",
40 | "react": "^16.3.0",
41 | "react-custom-share": "^0.4.8",
42 | "react-dom": "^16.3.0",
43 | "react-emotion": "^9.2.6",
44 | "react-facebook": "^5.0.3",
45 | "react-helmet": "^5.2.0",
46 | "rimraf": "^2.6.2"
47 | },
48 | "gitHead": "c7f95f929855c2ff35dbc4cf5a8ab2e8d0f84c8b"
49 | }
50 |
--------------------------------------------------------------------------------
/packages/side-blog/src/components/Article.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import PropTypes from 'prop-types';
4 | import { cx } from 'emotion';
5 |
6 | import style from '../styles/article';
7 |
8 | class Article extends React.Component {
9 | state = {
10 | entryClass: '',
11 | };
12 |
13 | componentDidMount() {
14 | this.addEntryStyle();
15 | this.props.updateArticleRendered(true);
16 | }
17 |
18 | componentDidUpdate(prevProps, prevState) {
19 | const prevPath = prevProps.location.pathname;
20 | const path = this.props.location.pathname;
21 |
22 | if (prevPath !== path) {
23 | this.addEntryStyle();
24 | this.props.updateArticleRendered(true);
25 | }
26 | }
27 |
28 | addEntryStyle() {
29 | this.setState({
30 | entryClass: 'entry',
31 | });
32 |
33 | setTimeout(() => {
34 | this.setState({
35 | entryClass: '',
36 | });
37 | }, 500);
38 | }
39 |
40 | render() {
41 | const { children, themeStyle = style, customStyle = '' } = this.props;
42 |
43 | return (
44 |
47 | {children}
48 |
49 | );
50 | }
51 | }
52 |
53 | Article.propTypes = {
54 | children: PropTypes.node.isRequired,
55 | themeStyle: PropTypes.string,
56 | customStyle: PropTypes.string,
57 | location: PropTypes.object.isRequired,
58 | articleRendered: PropTypes.bool.isRequired,
59 | updateArticleRendered: PropTypes.func.isRequired,
60 | };
61 |
62 | export default Article;
63 |
--------------------------------------------------------------------------------
/packages/side-blog/src/components/Author.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { cx } from 'emotion';
4 |
5 | import style from '../styles/author';
6 |
7 | const Author = props => {
8 | const {
9 | html,
10 | name = 'avatar',
11 | themeStyle = style,
12 | customStyle = '',
13 | avatar,
14 | } = props;
15 |
16 | return (
17 |
18 | {avatar &&
}
19 |
20 |
{title}
15 | {subTitle}
16 |
17 | );
18 | };
19 |
20 | Branding.propTypes = {
21 | title: PropTypes.string,
22 | subTitle: PropTypes.string,
23 | logo: PropTypes.node,
24 | themeStyle: PropTypes.string,
25 | customStyle: PropTypes.string,
26 | };
27 |
28 | export default Branding;
29 |
--------------------------------------------------------------------------------
/packages/side-blog/src/components/Comments.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import FacebookProvider, { Comments as FBComments } from 'react-facebook';
4 | import { cx } from 'emotion';
5 |
6 | import style from '../styles/comments';
7 |
8 | class Comments extends React.Component {
9 | state = {
10 | hidden: true,
11 | slug: this.props.slug,
12 | };
13 |
14 | static getDerivedStateFromProps(props, state) {
15 | if (props.slug !== state.slug) {
16 | return { hidden: true, slug: props.slug };
17 | }
18 | return null;
19 | }
20 |
21 | showWidget = e => {
22 | this.setState({
23 | hidden: false,
24 | });
25 | };
26 |
27 | render() {
28 | const {
29 | slug,
30 | siteUrl,
31 | appId,
32 | themeStyle = '',
33 | customStyle = style,
34 | colorScheme = 'light',
35 | onDemand = false,
36 | onDemandLabel = 'Would you like to add a comment?',
37 | icons: { message: Icon },
38 | } = this.props;
39 |
40 | return (
41 |
42 | {this.state.hidden && (
43 |
44 | {onDemandLabel} {Icon &&
46 | )}
47 | {!this.state.hidden && (
48 |
49 |
55 | )}
56 |
57 | );
58 | }
59 | }
60 |
61 | Comments.propTypes = {
62 | slug: PropTypes.string.isRequired,
63 | siteUrl: PropTypes.string.isRequired,
64 | appId: PropTypes.string.isRequired,
65 | themeStyle: PropTypes.string,
66 | customStyle: PropTypes.string,
67 | colorScheme: PropTypes.string,
68 | onDemand: PropTypes.bool,
69 | onDemandLabel: PropTypes.string,
70 | icons: PropTypes.object,
71 | };
72 |
73 | export default Comments;
74 |
--------------------------------------------------------------------------------
/packages/side-blog/src/components/FilterInfo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { cx } from 'emotion';
4 |
5 | import style from '../styles/filterInfo';
6 |
7 | const FilterInfo = props => {
8 | function isApplied(item) {}
9 |
10 | const {
11 | appliedFilters,
12 | onClick,
13 | themeStyle = style,
14 | customStyle = '',
15 | icons,
16 | icons: { close: CloseIcon },
17 | } = props;
18 |
19 | const filters = Object.keys(appliedFilters)
20 | .map(key => ({ group: key, value: appliedFilters[key] }))
21 | .filter(item => item.value !== null);
22 |
23 | return filters.length ? (
24 |
25 |
Applied filters:
26 |
27 | {filters.map(item => {
28 | const { group, value } = item;
29 | const Icon = icons[group];
30 |
31 | return (
32 |
39 |
45 |
46 |
48 |
49 |
51 |
52 |
53 | );
54 | })}
55 |
56 |
28 | {activeFilterGroup === filterName ?
30 | );
31 | };
32 |
33 | // activeFilterGroup === filterName ? `var(--${filterName}Color)` : '',
34 |
35 | FilterSwitcher.propTypes = {
36 | filterName: PropTypes.string.isRequired,
37 | appliedFilters: PropTypes.object.isRequired,
38 | onClick: PropTypes.func.isRequired,
39 | icons: PropTypes.object.isRequired,
40 | activeFilterGroup: PropTypes.string,
41 | themeStyle: PropTypes.string,
42 | customStyle: PropTypes.string,
43 | };
44 |
45 | export default FilterSwitcher;
46 |
--------------------------------------------------------------------------------
/packages/side-blog/src/components/FilterWidget.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { cx } from 'emotion';
4 |
5 | import style from '../styles/filterWidget';
6 |
7 | const FilterWidget = props => {
8 | const {
9 | onClick,
10 | items = [],
11 | appliedFilters,
12 | group = '',
13 | themeStyle = style,
14 | customStyle = '',
15 | icons: { check: CheckIcon },
16 | } = props;
17 |
18 | return (
19 |
25 | {group && (
26 |
27 | Filter posts by » {group}
28 |
29 | )}
30 | {items.length > 0 && (
31 |
32 | {items.map(item => {
33 | const { value, label, postsNumber } = item;
34 | const isApplied = appliedFilters[group] === value;
35 | return (
36 |
43 |
44 | {label}
45 |
46 | {isApplied ?
48 |
49 |
50 | );
51 | })}
52 |
53 | )}
54 |
{isApplied ? */
71 |
--------------------------------------------------------------------------------
/packages/side-blog/src/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import style from '../styles/footer';
4 | import BaseFooter from '@react-website-themes/base/components/Footer';
5 |
6 | const Footer = props => {
7 | const { themeStyle = style, ...rest } = props;
8 |
9 | return
20 | {title ? {title} : children}
21 |
22 | );
23 | };
24 |
25 | Heading.propTypes = {
26 | title: PropTypes.string,
27 | children: PropTypes.node,
28 | themeStyle: PropTypes.string,
29 | customStyle: PropTypes.string,
30 | special: PropTypes.bool,
31 | };
32 |
33 | export default Heading;
34 |
--------------------------------------------------------------------------------
/packages/side-blog/src/components/Layout.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React from 'react';
3 | import { cx } from 'emotion';
4 |
5 | import style from '../styles/layout';
6 |
7 | const Layout = props => {
8 | const { children, themeStyle = style, customStyle = '' } = props;
9 |
10 | return {children}
;
11 | };
12 |
13 | Layout.propTypes = {
14 | children: PropTypes.node.isRequired,
15 | themeStyle: PropTypes.string,
16 | customStyle: PropTypes.string,
17 | };
18 |
19 | export default Layout;
20 |
--------------------------------------------------------------------------------
/packages/side-blog/src/components/List.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Link } from 'gatsby';
4 | import { cx } from 'emotion';
5 | import dayjs from 'dayjs';
6 |
7 | import prefixToDateTimeString from '../utils/prefixToDateTimeString';
8 | import style from '../styles/list';
9 |
10 | const List = props => {
11 | const { items, themeStyle = style, customStyle = '', icon: Icon } = props;
12 |
13 | return (
14 |
15 |
16 | {items.map(item => {
17 | const {
18 | frontmatter: { title },
19 | fields: { slug, prefix },
20 | } = item;
21 |
22 | const dateTimeString = prefixToDateTimeString(prefix);
23 |
24 | return (
25 |
26 |
28 |
35 | {title}
36 |
37 |
38 | );
39 | })}
40 |
41 |
30 |
31 | {items.map(item => {
32 | const { label, to, icon: Icon, external, linkProps } = item;
33 |
34 | return (
35 |
36 | {external ? (
37 |
38 | {Icon && {label}
40 |
41 | ) : (
42 | {label}
45 |
46 | )}
47 |
48 | );
49 | })}
50 |
51 | {CalendarIcon && (
52 |
53 |
55 | )}
56 | {ToTopIcon && (
57 |
58 |
60 | )}
61 |
62 | );
63 | };
64 |
65 | Menu.propTypes = {
66 | items: PropTypes.array.isRequired,
67 | themeStyle: PropTypes.string,
68 | customStyle: PropTypes.string,
69 | actionIcons: PropTypes.object,
70 | };
71 |
72 | export default Menu;
73 |
--------------------------------------------------------------------------------
/packages/side-blog/src/components/Meta.js:
--------------------------------------------------------------------------------
1 | import { Link } from 'gatsby';
2 | import PropTypes from 'prop-types';
3 | import React from 'react';
4 | import { cx } from 'emotion';
5 | import parse from 'date-fns/parse';
6 | import format from 'date-fns/format';
7 |
8 | import prefixToDateTimeString from '../utils/prefixToDateTimeString';
9 | import style from '../styles/meta';
10 |
11 | const Meta = props => {
12 | const {
13 | prefix,
14 | categories,
15 | tags,
16 | themeStyle = style,
17 | customStyle = '',
18 | icons: { calendar: CalendarIcon, tag: TagIcon, folder: FolderIcon },
19 | } = props;
20 |
21 | const dateString = prefixToDateTimeString(prefix);
22 | const date = parse(dateString);
23 |
24 | return (
25 |
26 |
27 | {CalendarIcon &&
29 | {categories && (
30 |
31 | {FolderIcon &&
36 | )}
37 | {tags && (
38 |
39 | {TagIcon &&
44 | )}
45 |
46 | );
47 | };
48 |
49 | Meta.propTypes = {
50 | themeStyle: PropTypes.string,
51 | customStyle: PropTypes.string,
52 | prefix: PropTypes.string,
53 | categories: PropTypes.array,
54 | author: PropTypes.string,
55 | icons: PropTypes.object,
56 | };
57 |
58 | export default Meta;
59 |
--------------------------------------------------------------------------------
/packages/side-blog/src/components/NextPrev.js:
--------------------------------------------------------------------------------
1 | import { Link } from 'gatsby';
2 | import PropTypes from 'prop-types';
3 | import React from 'react';
4 | import { cx } from 'emotion';
5 | import parse from 'date-fns/parse';
6 | import format from 'date-fns/format';
7 |
8 | import prefixToDateTimeString from '../utils/prefixToDateTimeString';
9 | import style from '../styles/nextPrev';
10 |
11 | const NextPrev = props => {
12 | const {
13 | themeStyle = style,
14 | customStyle = '',
15 | icons: { next: NextIcon, prev: PrevIcon },
16 | next: {
17 | fields: { prefix: nextPrefix, slug: nextSlug } = {},
18 | frontmatter: { title: nextTitle } = {},
19 | } = {},
20 | prev: {
21 | fields: { prefix: prevPrefix, slug: prevSlug } = {},
22 | frontmatter: { title: prevTitle } = {},
23 | } = {},
24 | timeOffset,
25 | } = props;
26 |
27 | const prevDateString = prevPrefix ? prefixToDateTimeString(prevPrefix) : null;
28 | const nextDateString = nextPrefix ? prefixToDateTimeString(nextPrefix) : null;
29 |
30 | const prevDate = parse(prevDateString);
31 | const nextDate = parse(nextDateString);
32 |
33 | return (
34 |
35 | {prevSlug && (
36 |
37 | {PrevIcon &&
}
38 |
39 | {prevTitle} {format(prevDate, 'dddd, MMMM D, YYYY')}
40 |
41 |
42 | )}
43 | {nextSlug && (
44 |
45 | {NextIcon &&
}
46 |
47 | {nextTitle} {format(nextDate, 'dddd, MMMM D, YYYY')}
48 |
49 |
50 | )}
51 |
12 | {/* General tags */}
13 | {title}
14 |
29 | );
30 |
31 | // const title = postTitle
32 | // ? `${postTitle} - ${config.shortSiteTitle}`
33 | // : config.siteTitle;
34 | // const description = postDescription
35 | // ? postDescription
36 | // : config.siteDescription;
37 | // const image = postCover ? postCover : config.siteImage;
38 | // const url = config.siteUrl + config.pathPrefix + postSlug;
39 | };
40 |
41 | Seo.propTypes = {
42 | language: PropTypes.string,
43 | url: PropTypes.string.isRequired,
44 | title: PropTypes.string.isRequired,
45 | description: PropTypes.string.isRequired,
46 | image: PropTypes.string,
47 | };
48 |
49 | export default Seo;
50 |
--------------------------------------------------------------------------------
/packages/side-blog/src/components/Share.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { ShareBlockStandard } from 'react-custom-share';
4 | import { cx } from 'emotion';
5 |
6 | import style from '../styles/share';
7 |
8 | const PostShare = props => {
9 | const { themeStyle = style, customStyle = '', shareBlockProps } = props;
10 |
11 | return (
12 |
13 |
15 | );
16 | };
17 |
18 | PostShare.propTypes = {
19 | themeStyle: PropTypes.string,
20 | customStyle: PropTypes.string,
21 | shareBlockProps: PropTypes.object,
22 | };
23 |
24 | export default PostShare;
25 |
--------------------------------------------------------------------------------
/packages/side-blog/src/components/ToTop.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { cx } from 'emotion';
4 |
5 | import style from '../styles/toTop';
6 |
7 | const ToTop = props => {
8 | function onClick(e) {
9 | if (
10 | document.body.scrollTop !== 0 ||
11 | document.documentElement.scrollTop !== 0
12 | ) {
13 | window.scrollBy(0, -150);
14 | requestAnimationFrame(onClick);
15 | }
16 | }
17 |
18 | const {
19 | themeStyle = '',
20 | customStyle = style,
21 | icons: { arrow: ArrowIcon },
22 | sideOnMobileExposed,
23 | } = props;
24 |
25 | return (
26 |
33 |
34 |
36 |
37 | );
38 | };
39 |
40 | ToTop.propTypes = {
41 | themeStyle: PropTypes.string,
42 | customStyle: PropTypes.string,
43 | icons: PropTypes.object.isRequired,
44 | sideOnMobileExposed: PropTypes.bool.isRequired,
45 | };
46 |
47 | export default ToTop;
48 |
--------------------------------------------------------------------------------
/packages/side-blog/src/index.js:
--------------------------------------------------------------------------------
1 | /* components */
2 | export { default as Article } from './components/Article';
3 | export { default as Author } from './components/Author';
4 | export { default as Bodytext } from './components/Bodytext';
5 | export { default as Blog } from './components/Blog';
6 | export { default as Branding } from './components/Branding';
7 | export { default as Comments } from './components/Comments';
8 | export { default as Footer } from './components/Footer';
9 | export { default as Heading } from './components/Heading';
10 | export { default as Header } from './components/Header';
11 | export { default as Hero } from './components/Hero';
12 | export { default as Layout } from './components/Layout';
13 | export { default as List } from './components/List';
14 | export { default as Menu } from './components/Menu';
15 | export { default as Meta } from './components/Meta';
16 | export { default as NextPrev } from './components/NextPrev';
17 | export { default as Page } from './components/Page';
18 | export { default as Seo } from './components/Seo';
19 | export { default as Share } from './components/Share';
20 | /* styles */
21 | export { default as article } from './styles/article';
22 | export { default as author } from './styles/author';
23 | export { default as blog } from './styles/blog';
24 | export { default as bodytext } from './styles/bodytext';
25 | export { default as branding } from './styles/branding';
26 | export { default as comments } from './styles/comments';
27 | export { default as footer } from './styles/footer';
28 | export { default as heading } from './styles/heading';
29 | export { default as header } from './styles/header';
30 | export { default as hero } from './styles/hero';
31 | export { default as layout } from './styles/layout';
32 | export { default as list } from './styles/list';
33 | export { default as menu } from './styles/menu';
34 | export { default as meta } from './styles/meta';
35 | export { default as nextPrev } from './styles/nextPrev';
36 | export { default as page } from './styles/page';
37 | export { default as share } from './styles/share';
38 | /* global */
39 | export { default as global } from './styles/global';
40 |
--------------------------------------------------------------------------------
/packages/side-blog/src/store/Context.js:
--------------------------------------------------------------------------------
1 | // Context.js
2 | import React from 'react';
3 |
4 | const defaultContextValue = {
5 | data: {
6 | sideOnMobileExposed: false,
7 | articleRendered: false,
8 | },
9 | set: () => {},
10 | };
11 |
12 | const { Provider, Consumer } = React.createContext(defaultContextValue);
13 |
14 | class ContextProviderComponent extends React.Component {
15 | constructor() {
16 | super();
17 |
18 | this.setData = this.setData.bind(this);
19 | this.state = {
20 | ...defaultContextValue,
21 | set: this.setData,
22 | };
23 | }
24 |
25 | setData(newData) {
26 | this.setState(state => ({
27 | data: {
28 | ...state.data,
29 | ...newData,
30 | },
31 | }));
32 | }
33 |
34 | render() {
35 | return {this.props.children} ;
36 | }
37 | }
38 |
39 | export { Consumer as default, ContextProviderComponent };
40 |
--------------------------------------------------------------------------------
/packages/side-blog/src/styles/article.js:
--------------------------------------------------------------------------------
1 | import { css } from 'emotion';
2 | import { keyframes } from 'react-emotion';
3 | import facepaint from 'facepaint';
4 |
5 | const breakpoints = [1024];
6 | const mq = facepaint(breakpoints.map(bp => `@media (min-width: ${bp}px)`));
7 |
8 | const entry = keyframes`
9 | from {
10 | opacity: 0;
11 | transform: translateY(30px)
12 | }
13 |
14 | to {
15 | opacity: 1
16 | transform: translateY(0)
17 | }
18 | `;
19 |
20 | const article = css`
21 | overflow-x: hidden;
22 | padding: 5% 0 0;
23 | min-height: 100vh;
24 |
25 | &.entry {
26 | ${mq({
27 | animation: ['', `${entry} var(--transitionTime) ease 1`],
28 | animationFillMode: ['', 'forwards'],
29 | })};
30 | }
31 | `;
32 |
33 | export default article;
34 |
--------------------------------------------------------------------------------
/packages/side-blog/src/styles/author.js:
--------------------------------------------------------------------------------
1 | import { css } from 'emotion';
2 | import facepaint from 'facepaint';
3 |
4 | const breakpoints = [1024];
5 | const mq = facepaint(breakpoints.map(bp => `@media (min-width: ${bp}px)`));
6 |
7 | const author = css`
8 | line-height: 1.7;
9 | font-size: 1em;
10 | display: flex;
11 | max-width: var(--textMaxWidth);
12 | margin: var(--spaceXL) auto;
13 | padding-top: ;
14 | border-top: 1px dotted #ddd;
15 |
16 | ${mq({
17 | padding: [
18 | 'calc(var(--spaceXXL) * 1.5) var(--spaceXL) var(--spaceXL)',
19 | 'calc(var(--spaceXXL) * 1.5) var(--spaceXXL) var(--spaceXL)',
20 | ],
21 | })};
22 |
23 | .avatar {
24 | width: 60px;
25 | height: 60px;
26 | margin: 0.4em var(--spaceXL) 0 0;
27 | }
28 | `;
29 |
30 | export default author;
31 |
--------------------------------------------------------------------------------
/packages/side-blog/src/styles/branding.js:
--------------------------------------------------------------------------------
1 | import { css } from 'emotion';
2 |
3 | import facepaint from 'facepaint';
4 |
5 | const breakpoints = [768, 1024];
6 | const mq = facepaint(breakpoints.map(bp => `@media (min-width: ${bp}px)`));
7 |
8 | const branding = css`
9 | align-items: center;
10 | display: flex;
11 | flex-direction: column;
12 | flex-grow: 0;
13 | align-items: center;
14 | justify-content: center;
15 |
16 | img {
17 | margin: 0 0 10px;
18 | width: 40px;
19 |
20 | ${mq({
21 | width: ['30px', '40px', '50px'],
22 | })};
23 | }
24 |
25 | h1 {
26 | color: var(--textColor);
27 | text-align: center;
28 | line-height: 1.1;
29 | margin-bottom: 0.2em;
30 | text-transform: uppercase;
31 | ${mq({
32 | fontSize: ['1.4em', '1.6em', '1.8em'],
33 | })};
34 | }
35 |
36 | p {
37 | font-size: 1em;
38 | font-family: var(--firstFontFamily);
39 | letter-spacing: -0.01em;
40 | }
41 |
42 | a {
43 | }
44 | `;
45 |
46 | export default branding;
47 |
--------------------------------------------------------------------------------
/packages/side-blog/src/styles/comments.js:
--------------------------------------------------------------------------------
1 | import { css } from 'emotion';
2 | import facepaint from 'facepaint';
3 |
4 | const breakpoints = [1024];
5 | const mq = facepaint(breakpoints.map(bp => `@media (min-width: ${bp}px)`));
6 |
7 | const comments = css`
8 | border-top: 1px dashed var(--brightColor);
9 | background: var(--commentsBgColor);
10 | min-height: 140px;
11 |
12 | ${mq({
13 | padding: ['var(--spaceXL)', 'var(--spaceXL) var(--spaceXXL)'],
14 | })};
15 |
16 | .demand {
17 | width: 100%;
18 | margin: var(--spaceXL) auto;
19 | display: flex;
20 | justify-content: center;
21 | align-items: center;
22 | background: none;
23 | border: 0;
24 | font-size: 1.2em;
25 | cursor: pointer;
26 | color: var(--textColor);
27 | border-radius: var(--radius);
28 | transition: all var(--transitionTime);
29 | line-height: 1.2;
30 |
31 | svg {
32 | width: 40px;
33 | height: 40px;
34 | margin: var(--spaceL);
35 | stroke: var(--linkColor);
36 | transition: all var(--transitionTime);
37 | flex-shrink: 0;
38 | flex-grow: 0;
39 | }
40 |
41 | @media (hover: hover) {
42 | &:hover {
43 | svg {
44 | stroke: var(--accentColor);
45 | }
46 | }
47 | }
48 | }
49 | `;
50 |
51 | export default comments;
52 |
--------------------------------------------------------------------------------
/packages/side-blog/src/styles/filterInfo.js:
--------------------------------------------------------------------------------
1 | import { css } from 'emotion';
2 |
3 | const filtersInfo = css`
4 | padding: var(--spaceL) var(--spaceL) var(--spaceL);
5 | border-bottom: 1px dashed var(--sidebarLineColor);
6 | background: var(--sidebarSwitchBgColor);
7 |
8 | .title {
9 | color: var(--brightColor);
10 | padding: 0 var(--spaceM) var(--spaceS);
11 | font-size: 0.8em;
12 | letter-spacing: 0.3em;
13 | text-transform: uppercase;
14 | color: var(--colorF);
15 | margin-top: -2px;
16 | }
17 |
18 | & li {
19 | display: flex;
20 | justify-content: space-between;
21 | align-items: center;
22 | }
23 |
24 | .item {
25 | border: 0;
26 | background: transparent;
27 | cursor: pointer;
28 | margin: 0;
29 | padding: calc(var(--spaceS) * 1.5);
30 |
31 | @media (hover: hover) {
32 | &:hover {
33 | .sign {
34 | background: rgba(255, 255, 255, 1);
35 | color: var(--textColor);
36 | }
37 | }
38 | }
39 | }
40 |
41 | .wrapper {
42 | display: flex;
43 | height: 32px;
44 | border-radius: var(--radius);
45 | }
46 |
47 | .value,
48 | .sign {
49 | color: var(--brightColor);
50 | display: flex;
51 | align-items: center;
52 | transition: all var(--transitionTime);
53 | }
54 |
55 | .value {
56 | border-radius: var(--radius) 0 0 var(--radius);
57 | padding: 0 10px;
58 | font-size: 1.1em;
59 | line-height: 1;
60 |
61 | svg {
62 | width: 15px;
63 | height: 15px;
64 | margin: -1px var(--spaceS) 0 0;
65 | }
66 | }
67 |
68 | .sign {
69 | border-radius: 0 var(--radius) var(--radius);
70 | margin-left: 1px;
71 | font-weight: 700;
72 | font-size: 1.3em;
73 | padding: 0 6px;
74 | background: rgba(255, 255, 255, 0.1);
75 |
76 | svg {
77 | stroke: var(--accentColor);
78 | width: 18px;
79 | height: 18px;
80 | stroke-width: 4;
81 | }
82 | }
83 | `;
84 |
85 | export default filtersInfo;
86 |
--------------------------------------------------------------------------------
/packages/side-blog/src/styles/filterSwitcher.js:
--------------------------------------------------------------------------------
1 | import { css } from 'emotion';
2 | import { keyframes } from 'react-emotion';
3 |
4 | const entry = keyframes`
5 | from {
6 | transform: scale(0);
7 | }
8 |
9 | to {
10 | transform: scale(1);
11 | }
12 | `;
13 |
14 | const filterSwitcher = css`
15 | display: flex;
16 | background: var(--sidebarSwitchBgColor);
17 | border: none;
18 | flex-shrink: 0;
19 | flex-grow: 1;
20 | width: var(--barHeight);
21 | cursor: pointer;
22 | justify-content: center;
23 | align-items: center;
24 | transition: var(--transitionTime) ease;
25 |
26 | & svg {
27 | stroke: white;
28 | animation: ${entry} var(--transitionTime) ease 1;
29 | animation-fill-mode: forwards;
30 | }
31 | `;
32 |
33 | export default filterSwitcher;
34 |
--------------------------------------------------------------------------------
/packages/side-blog/src/styles/footer.js:
--------------------------------------------------------------------------------
1 | import { css } from 'emotion';
2 | import facepaint from 'facepaint';
3 |
4 | const breakpoints = [1024];
5 | const mq = facepaint(breakpoints.map(bp => `@media (min-width: ${bp}px)`));
6 |
7 | const footer = css`
8 | border-top: 1px dashed var(--brightColor);
9 | background: var(--footerBgColor);
10 | display: flex;
11 | flex-direction: column;
12 | font-size: 0.9em;
13 | padding: calc(var(--spaceXL) * 2);
14 |
15 | ${mq({
16 | paddingBottom: ['calc(var(--spaceXL) * 5)', 'calc(var(--spaceXL) * 2)'],
17 | })};
18 |
19 | .links ul {
20 | list-style: none;
21 | color: var(--textColor);
22 | display: flex;
23 | justify-content: center;
24 | flex-wrap: wrap;
25 | line-height: 1.1;
26 | }
27 |
28 | .links a {
29 | text-decoration: none;
30 | color: var(--textColor);
31 | font-weight: bold;
32 | }
33 |
34 | .links li {
35 | text-align: center;
36 | margin: var(--spaceXS) var(--spaceM);
37 | position: relative;
38 | line-height: 1.2;
39 | }
40 |
41 | .copyright {
42 | font-size: 0.9em;
43 | color: var(--lightTextColor);
44 | text-align: center;
45 | margin: var(--spaceM) 0;
46 | }
47 |
48 | .credits {
49 | font-size: 0.8em;
50 | color: var(--lightTextColor);
51 | margin: var(--spaceXL) 0 0;
52 | text-align: center;
53 |
54 | & a {
55 | text-decoration: none;
56 | color: var(--lightTextColor);
57 | }
58 | }
59 | `;
60 |
61 | export default footer;
62 |
--------------------------------------------------------------------------------
/packages/side-blog/src/styles/global.js:
--------------------------------------------------------------------------------
1 | import { injectGlobal } from 'emotion';
2 |
3 | const global = injectGlobal`
4 | html {
5 | box-sizing: border-box;
6 | font-family: var(--firstFontFamily);
7 | font-size: 16px;
8 | color: #666;
9 | }
10 |
11 | .main:focus {
12 | background: red;
13 | }
14 |
15 | body {
16 | background: var(--bodyBgColor);
17 | }
18 |
19 | *,
20 | *:after,
21 | *:before {
22 | box-sizing: inherit;
23 | margin: 0;
24 | padding: 0;
25 | }
26 |
27 | p {
28 | color: var(--textColor);
29 | }
30 |
31 | h1 {
32 | font-size: 2.4em;
33 | }
34 |
35 | h2 {
36 | font-size: 1.8em;
37 | }
38 |
39 | ul {
40 | list-style-position: inside;
41 | }
42 |
43 | a {
44 | color: var(--linkColor);
45 | transition: .3s;
46 | }
47 |
48 | @media (hover: hover) {
49 | a:hover {
50 | color: var(--hoverLinkColor);
51 | }
52 |
53 | *::-webkit-scrollbar {
54 | width: var(--scrollBarWidth);
55 | }
56 | *::-webkit-scrollbar-track {
57 | background: var(--scrollBarTrack);
58 | }
59 | *::-webkit-scrollbar-thumb {
60 | background-color: var(--scrollBarThumb);
61 | }
62 | }
63 |
64 | button {
65 | font-family: var(--firstFontFamily);
66 | }
67 |
68 | `;
69 |
70 | export default global;
71 |
--------------------------------------------------------------------------------
/packages/side-blog/src/styles/heading.js:
--------------------------------------------------------------------------------
1 | import { css } from 'emotion';
2 | import facepaint from 'facepaint';
3 |
4 | const breakpoints = [1024];
5 | const mq = facepaint(breakpoints.map(bp => `@media (min-width: ${bp}px)`));
6 |
7 | const heading = css`
8 | h1 {
9 | max-width: var(--textMaxWidth);
10 | letter-spacing: -0.04em;
11 | margin: 0 auto var(--spaceXXL);
12 | line-height: 1.1;
13 | color: var(--headingColor);
14 |
15 | ${mq({
16 | fontSize: ['2em', '2.3em', '2.6em'],
17 | padding: ['0 var(--spaceXL)', '0 var(--spaceXXL)'],
18 | })};
19 |
20 | small {
21 | font-size: 0.4em;
22 | display: block;
23 | font-weight: 300;
24 | letter-spacing: 0.3em;
25 | text-transform: uppercase;
26 | margin: 0.5em 0;
27 | }
28 |
29 | span {
30 | font-size: 0.5em;
31 | display: block;
32 | font-weight: 300;
33 | letter-spacing: 0;
34 | margin: 0.5em 0;
35 | }
36 | }
37 |
38 | &.special {
39 | text-align: center;
40 | margin-top: 2em;
41 |
42 | h1 {
43 | letter-spacing: -0.05em;
44 |
45 | ${mq({
46 | fontSize: ['2.5em', '2.8em', '3.2em'],
47 | })};
48 | }
49 | }
50 | `;
51 |
52 | export default heading;
53 |
--------------------------------------------------------------------------------
/packages/side-blog/src/styles/layout.js:
--------------------------------------------------------------------------------
1 | import { css } from 'emotion';
2 | import facepaint from 'facepaint';
3 |
4 | const breakpoints = [1024];
5 | const mq = facepaint(breakpoints.map(bp => `@media (min-width: ${bp}px)`));
6 |
7 | const layout = css`
8 | main {
9 | ${mq({
10 | marginLeft: [0, 'var(--desktopSidebarWidth)'],
11 | width: ['100%', 'auto'],
12 | })};
13 | }
14 | `;
15 |
16 | export default layout;
17 |
--------------------------------------------------------------------------------
/packages/side-blog/src/styles/list.js:
--------------------------------------------------------------------------------
1 | import { css } from 'emotion';
2 |
3 | const list = css`
4 | ul {
5 | list-style: none;
6 |
7 | margin: 40px 0;
8 | }
9 |
10 | li {
11 | font-size: 1.5em;
12 | text-align: center;
13 | line-height: 1.2;
14 | margin-bottom: 20px;
15 | }
16 |
17 | time {
18 | font-family: var(--firstFontFamily);
19 | font-size: 0.6em;
20 | color: var(--brandColor);
21 | display: flex;
22 | justify-content: center;
23 | align-items: center;
24 | margin-bottom: 4px;
25 |
26 | & svg {
27 | width: 14px;
28 | margin-right: 5px;
29 | stroke: var(--accentColor);
30 | }
31 | }
32 |
33 | a {
34 | text-decoration: none;
35 | padding: 0.6em 5px;
36 | position: relative;
37 | display: block;
38 | color: var(--textColor);
39 |
40 | @media (any-hover: hover) {
41 | &:hover {
42 | color: var(--hoverLinkColor);
43 | }
44 | }
45 | }
46 | `;
47 |
48 | export default list;
49 |
--------------------------------------------------------------------------------
/packages/side-blog/src/styles/meta.js:
--------------------------------------------------------------------------------
1 | import { css } from 'emotion';
2 | import facepaint from 'facepaint';
3 |
4 | const breakpoints = [1024];
5 | const mq = facepaint(breakpoints.map(bp => `@media (min-width: ${bp}px)`));
6 |
7 | const meta = css`
8 | max-width: var(--textMaxWidth);
9 | margin: 0 auto var(--spaceXXL);
10 | font-size: 0.9em;
11 | color: var(--headingColor);
12 | display: flex;
13 | flex-direction: column;
14 | font-family: var(--firstFontFamily);
15 | align-items: flex-start;
16 |
17 | ${mq({
18 | padding: ['0 var(--spaceXL)', '0 var(--spaceXXL)'],
19 | })};
20 |
21 | & span {
22 | padding: var(--spaceXS) 0;
23 | display: flex;
24 | align-items: center;
25 | margin-bottom: var(--spaceS);
26 | }
27 |
28 | & svg {
29 | margin: 0 var(--spaceS) 0 0;
30 | width: 16px;
31 | height: 16px;
32 | stroke: var(--accentColor);
33 | }
34 | `;
35 |
36 | export default meta;
37 |
--------------------------------------------------------------------------------
/packages/side-blog/src/styles/nextPrev.js:
--------------------------------------------------------------------------------
1 | import { css } from 'emotion';
2 | import facepaint from 'facepaint';
3 |
4 | const breakpoints = [768];
5 | const mq = facepaint(breakpoints.map(bp => `@media (min-width: ${bp}px)`));
6 |
7 | const nextPrev = css`
8 | background: var(--nextPrevBgColor);
9 | display: flex;
10 | flex-direction: column;
11 | font-size: 1.2em;
12 | line-height: 1.2;
13 | position: relative;
14 |
15 | ${mq({
16 | flexDirection: ['column', 'row'],
17 | })};
18 |
19 | & svg {
20 | width: 30px;
21 | height: 30px;
22 | flex-shrink: 0;
23 | }
24 |
25 | & a {
26 | text-decoration: none;
27 | }
28 |
29 | & .next,
30 | & .prev {
31 | display: flex;
32 | flex-grow: 0;
33 | flex-shrink: 0;
34 | flex-basis: 50%;
35 | padding: 20px;
36 |
37 | & > svg {
38 | flex-grow: 0;
39 | }
40 | }
41 |
42 | & .prev {
43 | ${mq({
44 | borderRight: [0, '1px dashed var(--brightColor)'],
45 | borderBottom: ['1px dashed var(--brightColor)', 0],
46 | })};
47 |
48 | & > svg {
49 | margin-right: 10px;
50 | }
51 | }
52 |
53 | & .next {
54 | margin-right: 1px;
55 | flex-direction: row-reverse;
56 | text-align: right;
57 |
58 | & > svg {
59 | margin-left: 10px;
60 | }
61 | }
62 |
63 | & time {
64 | display: block;
65 | font-size: 0.65em;
66 | font-family: var(--firstFontFamily);
67 | color: var(--lightTextColor);
68 | margin-top: 6px;
69 | }
70 | `;
71 |
72 | export default nextPrev;
73 |
--------------------------------------------------------------------------------
/packages/side-blog/src/styles/page.js:
--------------------------------------------------------------------------------
1 | import { css } from 'emotion';
2 |
3 | const page = css`
4 | display: block;
5 | `;
6 |
7 | export default page;
8 |
--------------------------------------------------------------------------------
/packages/side-blog/src/styles/pagination.js:
--------------------------------------------------------------------------------
1 | import { css } from 'emotion';
2 |
3 | const pagination = css`
4 | padding: 40px 0;
5 | font-family: var(--firstFontFamily);
6 | display: flex;
7 | justify-content: center;
8 |
9 | ul {
10 | display: inline-flex;
11 | justify-content: center;
12 | list-style: none;
13 | margin: 0;
14 | padding: 0;
15 | }
16 |
17 | li {
18 | border-top: 1px solid var(--brandColor);
19 | border-bottom: 1px solid var(--brandColor);
20 | border-right: 1px solid #ddd;
21 |
22 | &:last-child,
23 | &:first-child {
24 | border: 1px solid var(--brandColor);
25 | }
26 |
27 | &:first-child {
28 | border-radius: var(--radius) 0 0 var(--radius);
29 | border-right: 1px solid #ddd;
30 |
31 | &.no-onestep {
32 | border-right: 2px dotted var(--brandColor);
33 | }
34 | }
35 |
36 | &:last-child {
37 | border-radius: 0 var(--radius) var(--radius) 0;
38 | border-left: 1px solid #ddd;
39 |
40 | &.no-onestep {
41 | border-left: 2px dotted var(--brandColor);
42 | }
43 | }
44 |
45 | &:nth-last-child(2) {
46 | border-right: none;
47 | }
48 | }
49 |
50 | svg {
51 | width: 20px;
52 | }
53 |
54 | a {
55 | display: flex;
56 | justify-content: center;
57 | align-items: center;
58 | text-decoration: none;
59 | height: 44px;
60 | min-width: 40px;
61 |
62 | &.active {
63 | color: white;
64 | font-weight: 700;
65 | background: var(--accentColor);
66 | }
67 | }
68 | `;
69 |
70 | export default pagination;
71 |
--------------------------------------------------------------------------------
/packages/side-blog/src/styles/share.js:
--------------------------------------------------------------------------------
1 | import { css } from 'emotion';
2 |
3 | const share = css``;
4 |
5 | export default share;
6 |
--------------------------------------------------------------------------------
/packages/side-blog/src/styles/toTop.js:
--------------------------------------------------------------------------------
1 | import { css } from 'emotion';
2 | import facepaint from 'facepaint';
3 |
4 | const breakpoints = [1024];
5 | const mq = facepaint(breakpoints.map(bp => `@media (min-width: ${bp}px)`));
6 |
7 | const toTop = css`
8 | position: fixed;
9 | background: var(--sidebarBarBgColor);
10 | border: 0;
11 | z-index: 1;
12 | transition: all var(--transitionTime);
13 | cursor: pointer;
14 |
15 | ${mq({
16 | width: ['var(--barHeight)', '40px'],
17 | height: ['var(--barHeight)', '40px'],
18 | borderRadius: [0, 'var(--radius)'],
19 | bottom: [0, 'var(--spaceXL)'],
20 | right: [0, 'var(--spaceXL)'],
21 | })};
22 |
23 | .wrapper {
24 | display: flex;
25 | width: 100%;
26 | height: 100%;
27 | justify-content: center;
28 | align-items: center;
29 | }
30 |
31 | svg {
32 | stroke: var(--brightColor);
33 | }
34 | `;
35 |
36 | export default toTop;
37 |
--------------------------------------------------------------------------------
/packages/side-blog/src/styles/variables.js:
--------------------------------------------------------------------------------
1 | import 'typeface-pt-serif';
2 | import 'typeface-open-sans';
3 | import { injectGlobal } from 'emotion';
4 |
5 | const variables = injectGlobal`
6 | :root {
7 |
8 | /* base colors */
9 | --darkColor: #333;
10 | --brightColor: #FFF;
11 | --accentColor: #FFA500;
12 | --colorA: #605B71;
13 | --colorB: #524D60;
14 | --colorC: #464252;
15 | --colorD: #F6F6F6;
16 | --colorE: #EEEEEE;
17 | --colorF: #DDDDDD;
18 | --colorG: #847d9c;
19 | --monthColor: #5F8C40;
20 | --categoryColor: #3E8A8E;
21 | --tagColor: #815A9A;
22 |
23 | /* elements' colors */
24 | --bodyBgColor: var(--brightColor);
25 | --linkColor: var(--colorG);
26 | --hoverLinkColor: var(--accentColor);
27 | --textColor: #555;
28 | --lightTextColor: #888;
29 | --superLightTextColor: #aaa;
30 |
31 | --sidebarBgColor: var(--colorA);
32 | --sidebarLineColor: var(--colorG);
33 | --sidebarTextColor: var(--brightColor);
34 | --sidebarActiveLinkBgColor: var(--colorC);
35 | --sidebarLinkHoverBgColor: var(--colorB);
36 | --sidebarBarBgColor: var(--colorB);
37 | --sidebarSwitchBgColor: var(--colorC);
38 |
39 | --headingColor: var(--colorA);
40 | --quoteColor: var(--colorA);
41 | --nextPrevBgColor: var(--colorD);
42 | --commentsBgColor: var(--colorE);
43 | --footerBgColor: var(--colorF);
44 |
45 | /* spaces */
46 | --spaceXS: 2px;
47 | --spaceS: 4px;
48 | --spaceM: 8px;
49 | --spaceL: 14px;
50 | --spaceXL: 20px;
51 | --spaceXXL: 30px;
52 |
53 | --textMaxWidth: 640px;
54 |
55 | --barHeight: 60px;
56 | --desktopSidebarWidth: 40%;
57 | --mobileSidebarWidth: 100%;
58 |
59 | /* fonts */
60 | --firstFontFamily: "Open Sans", sans-serif;
61 | --secondFontFamily: "PT Serif", serif;
62 |
63 | /* other */
64 | --transitionTime: 0.5s;
65 | --radius: 2px;
66 |
67 | --scrollBarThumb: rgba(0,0,0, .2);
68 | --scrollBarTrack: rgba(0,0,0, .1);
69 | --scrollBarWidth: 8px;
70 | }
71 | `;
72 |
73 | export default variables;
74 |
--------------------------------------------------------------------------------
/packages/side-blog/src/utils/prefixToDateTimeString.js:
--------------------------------------------------------------------------------
1 | export default function prefixToDateTimeString(str) {
2 | let dateString = /^(\d{4}-\d{2}-\d{2})/.exec(str);
3 | dateString = dateString ? dateString[1] : '';
4 |
5 | let timeString = /--(\d{2}-\d{2})$/.exec(str);
6 | timeString = timeString ? timeString[1].replace('-', ':') : '00:00';
7 |
8 | return `${dateString}T${timeString}`;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/side-blog/utils/prefixToDateTimeString.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 | exports.default = prefixToDateTimeString;
7 |
8 | function prefixToDateTimeString(str) {
9 | var dateString = /^(\d{4}-\d{2}-\d{2})/.exec(str);
10 | dateString = dateString ? dateString[1] : '';
11 | var timeString = /--(\d{2}-\d{2})$/.exec(str);
12 | timeString = timeString ? timeString[1].replace('-', ':') : '00:00';
13 | return "".concat(dateString, "T").concat(timeString);
14 | }
--------------------------------------------------------------------------------
/stylelint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | processors: ['stylelint-processor-styled-components'],
3 | extends: [
4 | 'stylelint-config-recommended',
5 | 'stylelint-config-styled-components',
6 | ],
7 | rules: {
8 | 'no-descending-specificity': null,
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/test/throwOnPropTypeError.js:
--------------------------------------------------------------------------------
1 | const error = console.error;
2 |
3 | console.error = (message, ...args) => {
4 | if (/(Invalid prop|Failed prop type)/gi.test(message)) {
5 | throw new Error(message);
6 | }
7 |
8 | error.apply(console, [message, ...args]);
9 | };
10 |
--------------------------------------------------------------------------------
5 |