Skip to content
This repository was archived by the owner on Nov 8, 2024. It is now read-only.

Commit 175e42a

Browse files
authored
Merge pull request #36 from SwitchbackTech/feature/RemoveDisqus
Remove Disqus
2 parents 18403f1 + c00c46c commit 175e42a

5 files changed

Lines changed: 505 additions & 521 deletions

File tree

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
Navigate into your new site’s directory and start it up.
55

66
```shell
7-
cd website
7+
cd website
88
gatsby develop
99
```
1010

public/index.html

Lines changed: 1 addition & 99 deletions
Large diffs are not rendered by default.
Lines changed: 145 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,152 @@
1-
import React, {Fragment, useState} from 'react'
2-
import PropTypes from 'prop-types'
3-
import {Link} from 'gatsby'
1+
import React, { Fragment, useState } from "react";
2+
import PropTypes from "prop-types";
3+
import { Link } from "gatsby";
44
import { FiChevronRight } from "react-icons/fi";
5-
import Button from '../../shared/button'
6-
import {cleanText, inferSlug} from '../../../utils/utilFunctions'
7-
import BlogMeta, {Category, CommentNumber} from '../../blog/blog-meta'
8-
import ModalVideo from '../../shared/modal-video'
9-
import {Thumbnail, Video, Quote, Linked, Gallery} from '../blog-media'
10-
import {truncateString} from '../../../utils/utilFunctions'
5+
import Button from "../../shared/button";
6+
import { cleanText, inferSlug } from "../../../utils/utilFunctions";
7+
import BlogMeta, { Category, CommentNumber } from "../../blog/blog-meta";
8+
import ModalVideo from "../../shared/modal-video";
9+
import { Thumbnail, Video, Quote, Linked, Gallery } from "../blog-media";
10+
import { truncateString } from "../../../utils/utilFunctions";
1111
import {
12-
BlogWrapper,
13-
BlogInner,
14-
BlogMedia,
15-
BlogContent,
16-
BlogHeader,
17-
BlogCategory,
18-
BlogTitle,
19-
BlogMetaWrap,
20-
BlogExcerpt,
21-
BlogFooter,
22-
BlogBtn
23-
} from './blog.stc'
24-
25-
const Blog = ({content, ...restProps}) => {
26-
const {
27-
slug, dateSlug, category, date, format, title, image,
28-
excerpt, postID, video_link, quote_text, quote_author,
29-
link, images, authorId, author
30-
} = content;
31-
const {btnStyle, categoryStyle, ...restStyles} = restProps;
32-
let video_arr, video_id, video_channel;
33-
if(video_link){
34-
video_arr = video_link.split('=', -1);
35-
video_id = video_arr[1];
36-
video_channel = video_link.split(".")[1];
37-
}
38-
const [videoOpen, setVideoOpen] = useState(false);
39-
const modalVideoOpen = () => {
40-
setVideoOpen(true)
41-
}
42-
const modalVideoClose = () => {
43-
setVideoOpen(false)
44-
}
12+
BlogWrapper,
13+
BlogInner,
14+
BlogMedia,
15+
BlogContent,
16+
BlogHeader,
17+
BlogCategory,
18+
BlogTitle,
19+
BlogMetaWrap,
20+
BlogExcerpt,
21+
BlogFooter,
22+
BlogBtn,
23+
} from "./blog.stc";
4524

46-
const datePath = inferSlug(`date/${dateSlug}`)
47-
const categoryPath = inferSlug(`category/${category}`)
48-
49-
return (
50-
<Fragment>
51-
<BlogWrapper {...restStyles}>
52-
<BlogInner>
53-
<BlogMedia>
54-
{format === 'image' && (
55-
<Thumbnail path={`/${slug}`} image={image} title={title}/>
56-
)}
57-
{format === 'video' && (
58-
<Video
59-
onClick={modalVideoOpen}
60-
poster={image.childImageSharp.fluid}
61-
title={title}
62-
/>
63-
)}
64-
{format === 'quote' && <Quote layout={2} text={quote_text} author={quote_author}/>}
65-
{format === 'link' && <Linked layout={2} link={link}/>}
66-
{format === 'gallery' && <Gallery images={images}/>}
67-
{(format === 'image' || format === 'video' || format === 'gallery') && category && (
68-
<BlogCategory to={categoryPath}>{category}</BlogCategory>
69-
)}
70-
</BlogMedia>
71-
<BlogContent>
72-
<BlogHeader>
73-
{(format === 'quote' || format === 'link') && category && (
74-
<Category slug={`/category/${cleanText(category)}`} text={category}/>
75-
)}
76-
{title && <BlogTitle><Link to={`/${slug}`}>{truncateString(title, 30)}</Link></BlogTitle>}
77-
</BlogHeader>
78-
{excerpt && <BlogExcerpt>{excerpt}</BlogExcerpt>}
79-
<BlogFooter>
80-
<BlogMetaWrap>
81-
{date && (
82-
<BlogMeta>
83-
<Link to={datePath}>{date}</Link>
84-
</BlogMeta>
85-
)}
86-
{author && (
87-
<BlogMeta>
88-
<Link to={inferSlug(`/author/${authorId}`)}>{author.name}</Link>
89-
</BlogMeta>
90-
)}
91-
<BlogMeta>
92-
<CommentNumber slug={slug} title={title} id={postID}/>
93-
</BlogMeta>
94-
</BlogMetaWrap>
95-
<BlogBtn>
96-
<Button {...btnStyle} icon={<FiChevronRight/>} to={slug}>Read More</Button>
97-
</BlogBtn>
98-
</BlogFooter>
99-
</BlogContent>
100-
</BlogInner>
101-
</BlogWrapper>
102-
<ModalVideo
103-
channel={video_channel}
104-
videoId={video_id}
105-
isOpen={videoOpen}
106-
onClose={modalVideoClose}
107-
/>
108-
</Fragment>
109-
)
110-
}
25+
const Blog = ({ content, ...restProps }) => {
26+
const {
27+
slug,
28+
dateSlug,
29+
category,
30+
date,
31+
format,
32+
title,
33+
image,
34+
excerpt,
35+
postID,
36+
video_link,
37+
quote_text,
38+
quote_author,
39+
link,
40+
images,
41+
authorId,
42+
author,
43+
} = content;
44+
const { btnStyle, categoryStyle, ...restStyles } = restProps;
45+
let video_arr, video_id, video_channel;
46+
if (video_link) {
47+
video_arr = video_link.split("=", -1);
48+
video_id = video_arr[1];
49+
video_channel = video_link.split(".")[1];
50+
}
51+
const [videoOpen, setVideoOpen] = useState(false);
52+
const modalVideoOpen = () => {
53+
setVideoOpen(true);
54+
};
55+
const modalVideoClose = () => {
56+
setVideoOpen(false);
57+
};
58+
59+
const datePath = inferSlug(`date/${dateSlug}`);
60+
const categoryPath = inferSlug(`category/${category}`);
61+
62+
return (
63+
<Fragment>
64+
<BlogWrapper {...restStyles}>
65+
<BlogInner>
66+
<BlogMedia>
67+
{format === "image" && (
68+
<Thumbnail path={`/${slug}`} image={image} title={title} />
69+
)}
70+
{format === "video" && (
71+
<Video
72+
onClick={modalVideoOpen}
73+
poster={image.childImageSharp.fluid}
74+
title={title}
75+
/>
76+
)}
77+
{format === "quote" && (
78+
<Quote layout={2} text={quote_text} author={quote_author} />
79+
)}
80+
{format === "link" && <Linked layout={2} link={link} />}
81+
{format === "gallery" && <Gallery images={images} />}
82+
{(format === "image" ||
83+
format === "video" ||
84+
format === "gallery") &&
85+
category && (
86+
<BlogCategory to={categoryPath}>{category}</BlogCategory>
87+
)}
88+
</BlogMedia>
89+
<BlogContent>
90+
<BlogHeader>
91+
{(format === "quote" || format === "link") && category && (
92+
<Category
93+
slug={`/category/${cleanText(category)}`}
94+
text={category}
95+
/>
96+
)}
97+
{title && (
98+
<BlogTitle>
99+
<Link to={`/${slug}`}>{truncateString(title, 30)}</Link>
100+
</BlogTitle>
101+
)}
102+
</BlogHeader>
103+
{excerpt && <BlogExcerpt>{excerpt}</BlogExcerpt>}
104+
<BlogFooter>
105+
<BlogMetaWrap>
106+
{date && (
107+
<BlogMeta>
108+
<Link to={datePath}>{date}</Link>
109+
</BlogMeta>
110+
)}
111+
{author && (
112+
<BlogMeta>
113+
<Link to={inferSlug(`/author/${authorId}`)}>
114+
{author.name}
115+
</Link>
116+
</BlogMeta>
117+
)}
118+
</BlogMetaWrap>
119+
<BlogBtn>
120+
<Button {...btnStyle} icon={<FiChevronRight />} to={slug}>
121+
Read More
122+
</Button>
123+
</BlogBtn>
124+
</BlogFooter>
125+
</BlogContent>
126+
</BlogInner>
127+
</BlogWrapper>
128+
<ModalVideo
129+
channel={video_channel}
130+
videoId={video_id}
131+
isOpen={videoOpen}
132+
onClose={modalVideoClose}
133+
/>
134+
</Fragment>
135+
);
136+
};
111137

112138
Blog.propTypes = {
113-
btnStyle: PropTypes.object
114-
}
115-
139+
btnStyle: PropTypes.object,
140+
};
141+
116142
Blog.defaultProps = {
117-
btnStyle: {
118-
varient: "texted",
119-
color: "gray"
120-
},
121-
categoryStyle: {
122-
mb: '7px'
123-
}
124-
}
143+
btnStyle: {
144+
varient: "texted",
145+
color: "gray",
146+
},
147+
categoryStyle: {
148+
mb: "7px",
149+
},
150+
};
125151

126-
export default Blog
152+
export default Blog;

0 commit comments

Comments
 (0)